* element on every page. The site overrides it for landing, * auth-login, client-dashboard, and not-found — but NOT for * data-page="contact", which is what /pc-builder uses. Result: the * navbar widens to 1320/1480/1600 but everything inside

(hero, * wizard, configurator) stays clamped at 1140px, leaving big blank * gutters either side of the page content. * * Fix: * 1. Release

so sections inside can use the full viewport. * max-width:none + width:100%, no padding. * 2. Mirror the navbar's exact tiers on every .container inside the * page (1320 / 1480 / 1600 px, 22px / clamp(26-36) padding) so * hero, wizard, configurator, and footer all line up with the * brand/CTA edges above. * * Specificity body[data-page="contact"].pcb-page is (0,0,3,1) — beats * the default rules and the data-page="contact" tier rules cleanly. * ============================================================ */ body[data-page="contact"].pcb-page main { width: 100%; max-width: none; margin: 0; padding: 0; } body[data-page="contact"].pcb-page .container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 22px; padding-right: 22px; box-sizing: border-box; } @media (min-width: 1400px) { body[data-page="contact"].pcb-page .container { max-width: 1480px; padding-left: clamp(26px, 2vw, 36px); padding-right: clamp(26px, 2vw, 36px); } } @media (min-width: 1600px) { body[data-page="contact"].pcb-page .container { max-width: 1600px; } } /* ---------- Compact studio header ---------- Replaces the old full-bleed hero photo + 8-step wizard bar that used to sit above the configurator. Both were eating ~80% of the above-the-fold space. The rail on the left already shows step numbers per category, so the wizard is redundant; the marketing hero goes away entirely so the customer sees parts immediately. Layout: brand mark + title on the left, three feature pills on the right. Wraps to a single column on phones. Total height ~84 px on desktop vs ~520 px hero+wizard before. */ .pcb-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1rem, 1.4vw, 1.4rem) 0 clamp(.85rem, 1.2vw, 1.25rem); flex-wrap: wrap; } .pcb-studio-brand { display: flex; align-items: center; gap: .85rem; min-width: 0; } .pcb-studio-mark { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(207,254,37,0.10); border: 1px solid var(--pcb-card-border-strong); color: var(--pcb-accent); font-size: 22px; flex-shrink: 0; } .pcb-studio-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pcb-studio-eyebrow { font: 700 .66rem 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--pcb-accent); } .pcb-studio-title h1 { margin: 0; font: 700 clamp(1.25rem, 2.2vw, 1.7rem)/1.1 'Sora', sans-serif; color: #fff; letter-spacing: -0.01em; } .pcb-studio-meta { display: flex; gap: .45rem; flex-wrap: wrap; } .pcb-studio-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--pcb-card-border); background: rgba(255,255,255,0.02); border-radius: 999px; font: 600 .76rem 'Sora', sans-serif; color: var(--pcb-text); white-space: nowrap; } .pcb-studio-pill i { color: var(--pcb-accent); font-size: 15px; } @media (max-width: 720px) { .pcb-studio-head { padding: .85rem 0 .65rem; gap: .75rem; } .pcb-studio-mark { width: 38px; height: 38px; font-size: 18px; } .pcb-studio-meta { width: 100%; } .pcb-studio-pill { padding: .3rem .6rem; font-size: .7rem; } } @media (max-width: 575px) { /* Phone: the header was eating too much above-the-fold space — the three decorative feature pills wrap to their own full-width row and add ~40px of pure marketing chrome. Drop them on phones; the title + the rail below already tell the customer what this is. Also tighten the title block so parts show up sooner. */ .pcb-studio-meta { display: none; } .pcb-studio-head { padding: .5rem 0 .45rem; gap: .5rem; } .pcb-studio-mark { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; } .pcb-studio-brand { gap: .6rem; } .pcb-studio-eyebrow { font-size: .58rem; letter-spacing: .1em; } } /* ---------- Section heads ---------- */ body.pcb-page .section-head { margin-bottom: 1.5rem; } body.pcb-page .section-head h2 { font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.15 'Sora', sans-serif; margin: 0 0 .35rem; color: #fff; letter-spacing: -0.01em; } body.pcb-page .section-head .section-lead { font-size: .95rem; color: var(--pcb-text-mute); margin: 0; max-width: 720px; } /* ---------- Pre-Built starter cards ---------- Optional section above the wizard. Shown only when at least one active PcPreBuild exists. Each card is a hero image + name + tier badge + perf hint + parts count + load button. Clicking the button replaces the customer's current selections with the prebuild's parts, paints the wizard, and scrolls to the configurator. */ /* When an admin publishes one or more prebuilds, .pcb-prebuilds is the FIRST visible section under

. The site-header is sticky with top:1rem AND a 1.25rem outer margin AND its own padding/border — so in its STUCK state it overlays the top ~82-100 px of the viewport. The previous clamp(80, 8vh, 96) was right at the edge and clipped the h2 on shorter viewports. Use a hard 130 px floor so the section head is always comfortably below the navbar, with scroll-margin-top matching for any deep-link/hash navigation. */ .pcb-prebuilds { padding: 130px 0 1.5rem; scroll-margin-top: 130px; } @media (max-width: 575px) { .pcb-prebuilds { padding-top: 96px; scroll-margin-top: 96px; } } /* Trim the picker's clearance when prebuilds is visible above it — otherwise we double up (130 + 96 = 226 px of empty band between the two sections). The prebuilds section already handles navbar clearance, so picker only needs a modest top gap as a separator. */ .pcb-prebuilds:not([hidden]) ~ .pcb-picker { padding-top: 1.75rem; } .pcb-prebuilds .section-head { margin-bottom: 1.25rem; } .pcb-prebuilds-grid { display: grid; /* auto-fill (not auto-fit) — otherwise a single prebuild stretches across every possible column slot, and the 16:9 hero scales up to ~600px tall instead of staying card-sized. */ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .pcb-prebuild-card { /* Cap individual cards so even if the operator publishes only one, it still reads as a card, not a billboard. */ max-width: 420px; background: linear-gradient(180deg, rgba(20,20,27,0.85), rgba(8,9,13,0.95)); border: 1px solid var(--pcb-card-border-strong); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; cursor: pointer; position: relative; } .pcb-prebuild-card:hover { transform: translateY(-3px); border-color: rgba(207,254,37,0.35); box-shadow: 0 18px 40px rgba(0,0,0,0.50); } .pcb-prebuild-card-hero { position: relative; aspect-ratio: 16 / 9; background: #1a2942; background-size: cover; background-position: center; } .pcb-prebuild-card-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.78)); } .pcb-prebuild-card-tier { position: absolute; top: 12px; left: 12px; padding: .25rem .55rem; background: var(--pcb-accent); color: var(--pcb-accent-ink); font: 700 .62rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; z-index: 2; } .pcb-prebuild-card-title { position: absolute; bottom: 12px; left: 14px; right: 14px; z-index: 2; color: #fff; } .pcb-prebuild-card-title h3 { margin: 0; font: 800 1.05rem 'Sora', sans-serif; line-height: 1.2; text-shadow: 0 2px 4px rgba(0,0,0,0.6); } .pcb-prebuild-card-perf { display: block; margin-top: .15rem; font: 600 .72rem 'JetBrains Mono', monospace; color: rgba(207,254,37,0.95); letter-spacing: .04em; } .pcb-prebuild-card-body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; } .pcb-prebuild-card-desc { font-size: .82rem; color: var(--pcb-text-mute); line-height: 1.4; margin: 0; } .pcb-prebuild-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: .72rem; color: var(--pcb-text-mute); } .pcb-prebuild-card-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; background: rgba(207,254,37,0.10); color: var(--pcb-accent); border: 1px solid rgba(207,254,37,0.30); border-radius: 999px; font: 700 .72rem 'Sora', sans-serif; } .pcb-prebuild-card:hover .pcb-prebuild-card-cta { background: var(--pcb-accent); color: var(--pcb-accent-ink); } /* ---------- Configurator (rail + stage + summary) ---------- Now that the container goes full edge-to-edge, the rail and summary need HARD CAPS so they don't bloat absurdly on ultrawide monitors — a 13% rail at 2500px container is 325px, way too wide for category icons. clamp() solves it: rail stays 180-240, summary stays 280-360, stage soaks up everything else. Works at any viewport from 1024 to 4K without tier breakpoints. */ .pcb-picker { /* Top padding clears the sticky/fixed site-header (~76 px) that used to be hidden behind the hero photo. With the hero gone, the configurator section sits directly under the navbar so we add the clearance here instead. Bottom padding stays modest — there's a sticky summary bar that takes over the bottom of the viewport. */ padding: clamp(80px, 8vh, 96px) 0 1.25rem; } /* Phone: trim the top clearance — the site header is shorter on mobile and the old clamp floor (80px) left a big empty band above the builder header. */ @media (max-width: 575px) { .pcb-picker { padding-top: 64px; } } .pcb-config { display: grid; grid-template-columns: clamp(180px, 12vw, 240px) minmax(0, 1fr) clamp(280px, 18vw, 360px); gap: clamp(.85rem, 1.2vw, 1.75rem); margin-top: 1.25rem; align-items: start; } @media (max-width: 1279px) { .pcb-config { grid-template-columns: clamp(180px, 16vw, 220px) minmax(0, 1fr); gap: 1.1rem; } } @media (max-width: 1023px) { .pcb-config { grid-template-columns: 1fr; gap: 1rem; } } /* --- Left rail --- */ .pcb-config-rail { display: flex; flex-direction: column; gap: .5rem; position: sticky; top: 92px; align-self: start; /* Match the summary's sticky panel height so the three columns read as one unified surface — was max-height (collapsed to fit 8 rows of content), now a fixed viewport-relative height. The rail still scrolls internally if categories overflow but its OUTER edges line up with the summary on the right. */ height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; padding: .25rem; } .pcb-config-rail::-webkit-scrollbar { width: 4px; } .pcb-config-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; } @media (max-width: 1023px) { /* Mobile/tablet rail: a horizontal-scrolling strip of step tabs. STICKY just under the site header so the customer can always jump between steps while browsing parts — previously it scrolled away with the page and the operator reported "steps 1-8 don't work on mobile" because you had to scroll all the way back up to change category. The solid bg + bottom border keep part cards from bleeding through behind it. */ .pcb-config-rail { /* Sticks to the very top of the viewport. The site header on this page auto-hides on scroll-down, so while the customer browses parts (scrolling down) the rail owns top:0 and the steps stay reachable. z-index stays well under the header's (12000) so a scroll-up that brings the header back simply covers the rail. */ position: sticky; top: 0; z-index: 30; height: auto; max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: .4rem .15rem .5rem; gap: .5rem; overscroll-behavior-x: contain; background: var(--pcb-bg-deep); border-bottom: 1px solid var(--pcb-card-border); margin-bottom: .25rem; /* Right-edge fade hint: tells phone users "there's more, scroll right". Achieved with a CSS mask gradient so we don't need an extra DOM element. */ -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 32px), transparent 100%); } /* Hide the fade when scrolled all the way to the end (rail's scrollLeft + clientWidth === scrollWidth). We use JS-set data-scroll-end="true" — set in the JS that handles the scroll event on .pcb-config-rail. */ .pcb-config-rail[data-scroll-end="true"] { -webkit-mask-image: none; mask-image: none; } } /* Rail row — sidebar nav item, not a card. Layout: [icon] [text grows] [step pill]. Plain flexbox so the visual order is unambiguous regardless of row height — the previous grid version mis-rendered when the rail container was tall and the rows stretched (icon ended up in one corner, text in another, step in a third). Flex with row-aligned items just works. Visually distinct from the product cards in the stage by: - NO inner background or border by default (transparent rows) - Tiny line-style icon on the left (no "thumb frame", no fill) - Step number as a small circle pill on the right - Active = subtle accent tint + 3 px left strip + accent border - Hover = faint white wash + low-opacity left strip */ .pcb-rail-row { position: relative; display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: background .18s ease, border-color .18s ease; min-height: 52px; } .pcb-rail-row::before { content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 0; background: var(--pcb-accent); border-radius: 2px; transform: translateY(-50%); transition: height .2s ease; } .pcb-rail-row:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.06); } .pcb-rail-row:hover::before { height: 18px; } .pcb-rail-row.active { background: linear-gradient(90deg, rgba(207,254,37,0.10), transparent 80%); border-color: rgba(207,254,37,0.25); } .pcb-rail-row.active::before { height: 60%; } @media (max-width: 1023px) { /* Mobile/tablet rail: compact horizontal-scrolling tabs. Drop the description / subtitle / status line so each tab is one row only — that keeps the rail at a consistent ~44 px height and stops the "Pick the brain of your PC" subtitle from wrapping and pushing the rail behind the search bar (operator screenshot showed exactly this stacking bug on iPhone). */ .pcb-rail-row { flex: 0 0 auto; width: auto; min-width: 0; /* let pill be as tight as content */ padding: .5rem .8rem; min-height: 44px; /* comfortable touch target */ border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); } .pcb-rail-row::before { display: none; } .pcb-rail-row.active { background: rgba(207,254,37,0.12); border-color: rgba(207,254,37,0.45); box-shadow: 0 0 0 1px rgba(207,254,37,0.15); } /* The subtitle line — empty-hint copy or current-selection name — wraps to a second line on narrow pills and pushes the rail height up, which then collides with the search bar below. Hide it on mobile; the category name + step pill alone communicate enough. */ .pcb-rail-row .pcb-rail-status { display: none; } /* Trim the rail name font + drop the gap inside .pcb-rail-text so a name like "Power Supply" doesn't break across two lines on narrow phones. */ .pcb-rail-row .pcb-rail-name { font-size: .82rem; white-space: nowrap; } .pcb-rail-row .pcb-rail-text { gap: 0; } /* Smaller icon + step pill so the pill height stays at 38 px. */ .pcb-rail-row .pcb-rail-icon { width: 18px; height: 18px; } .pcb-rail-row .pcb-rail-icon svg { width: 18px; height: 18px; } .pcb-rail-row .pcb-rail-step { width: 22px; height: 22px; font-size: .68rem; } } /* Line-style icon on the LEFT — no fill, no frame, no border. Just the SVG outline at low opacity (full color when active). Reads as a UI icon, never as a product thumb. */ .pcb-rail-icon { width: 22px; height: 22px; color: var(--pcb-text-mute); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .55; transition: color .2s, opacity .2s; } .pcb-rail-icon svg { width: 22px; height: 22px; display: block; /* Force every category SVG to render as a line drawing so it can never visually compete with a product photo. fill:none + the svg's own stroke gives a clean outline; we apply currentColor as the stroke too so the icon picks up the muted/active text color. */ fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pcb-rail-icon svg * { fill: none; stroke: currentColor; } .pcb-rail-row:hover .pcb-rail-icon { opacity: .85; } .pcb-rail-row.active .pcb-rail-icon { color: var(--pcb-accent); opacity: 1; } .pcb-rail-row.has-selection .pcb-rail-icon { color: var(--pcb-accent); opacity: .9; } .pcb-rail-text { min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .pcb-rail-name { font: 600 .92rem/1.2 'Sora', sans-serif; color: #fff; display: flex; align-items: center; gap: .4rem; } .pcb-rail-name .pcb-rail-multi { font: 700 .58rem 'JetBrains Mono', monospace; letter-spacing: .08em; padding: .12rem .4rem; border-radius: 4px; background: rgba(99,102,241,0.20); color: #a5b4fc; text-transform: uppercase; } /* Gift chip in the rail row — appears next to the name when at least one selected part in this category has a freebie attached. */ .pcb-rail-name .pcb-rail-gift { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; font-size: 11px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(245,158,11,0.35); } .pcb-rail-row.has-gift { border-color: rgba(245,158,11,0.25); } .pcb-rail-status { font-size: .76rem; line-height: 1.3; color: var(--pcb-text-mute); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .pcb-rail-row.has-selection .pcb-rail-status { color: var(--pcb-text); } .pcb-rail-status .price { font: 700 .76rem 'JetBrains Mono', monospace; color: var(--pcb-accent); } /* Text grows to fill the middle of the row. min-width:0 lets the title ellipsize cleanly when category names are long ("Drives & Storage"). */ .pcb-rail-text { flex: 1; min-width: 0; } /* Step pill on the RIGHT. Small circle with the step number; turns into a filled accent-color check when the customer has at least one part in this category. */ .pcb-rail-step { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid var(--pcb-card-border); font: 700 .76rem 'JetBrains Mono', monospace; color: var(--pcb-text-mute); transition: background .2s, color .2s, border-color .2s; } .pcb-rail-row:hover .pcb-rail-step { border-color: var(--pcb-card-border-strong); color: var(--pcb-text); } .pcb-rail-row.active .pcb-rail-step { background: rgba(207,254,37,0.15); border-color: var(--pcb-accent); color: var(--pcb-accent); } .pcb-rail-row.has-selection .pcb-rail-step { background: var(--pcb-accent); color: var(--pcb-accent-ink); border-color: var(--pcb-accent); } .pcb-rail-row.has-selection .pcb-rail-step::before { content: "✓"; } .pcb-rail-row.has-selection .pcb-rail-step .num { display: none; } /* --- Right stage --- */ .pcb-config-stage { display: flex; flex-direction: column; border: 1px solid var(--pcb-card-border); border-radius: 16px; background: var(--pcb-bg-surface); box-shadow: var(--pcb-shadow-soft); /* Match the rail + summary sticky heights so the three columns line up as a unified surface. The .pcb-stage-grid below scrolls internally when there are more parts than fit the viewport — the stage container itself stays anchored. min-height keeps the parts grid usable on short laptops: without it, on a ~600px-tall viewport the header + subcat tabs + selected strip + footer could sum to nearly the whole `calc(100vh - 110px)` and squeeze the grid to near-zero with no way to scroll it back. */ position: sticky; top: 92px; align-self: start; height: calc(100vh - 110px); min-height: 440px; overflow: hidden; } @media (max-width: 1023px) { /* Stack layout: rail (horizontal scroll) above, stage below. Drop sticky + viewport-height — the page should scroll naturally, not pin the stage to a fixed area. The grid inside still uses overflow:auto if the part list is huge, but the stage container itself grows with its content so the page footer (compare tray, etc.) stays accessible by scrolling instead of being pushed off the bottom. */ .pcb-config-stage { position: static; height: auto; /* No max-height on mobile — the grid should scroll with the page naturally instead of trapping the customer in a nested scroll area (operator reported scroll-within-scroll on phones felt broken, especially with the bottom Build-summary launcher pill overlapping the last row of cards). */ max-height: none; overflow: visible; /* When activateCategory() scrolls the stage into view, stop short so the (briefly re-shown) site header + the sticky rail strip don't sit on top of the stage header. */ scroll-margin-top: 124px; } .pcb-stage-grid { /* Stage grid no longer scrolls independently on phones — it grows with content and the page handles the scrolling. */ overflow-y: visible; /* Bottom padding so the floating Build-summary launcher pill (~56px tall, sits ~24px from the bottom) doesn't cover the last row of cards. */ padding-bottom: 96px; } } @media (max-width: 540px) { /* Compress the stage header so the title + search + sort don't eat half the viewport before the grid is visible. */ .pcb-stage-head { padding: .75rem .8rem; gap: .55rem; } .pcb-stage-icon { width: 36px; height: 36px; border-radius: 9px; } .pcb-stage-icon svg { width: 22px; height: 22px; } .pcb-stage-title h3 { font-size: .98rem; } /* Hide the subtitle on phones — it's a wide one-liner that adds a full row of height without telling the customer anything they can't infer from the section header. */ .pcb-stage-title p { display: none; } /* Controls drop to a full-width row below the title. Search takes 100% width within that row; sort comes after on its own line below if needed. */ .pcb-stage-controls { width: 100%; min-width: 0; justify-content: stretch; flex-wrap: wrap; gap: .4rem; } .pcb-picker-search { flex: 1 1 100%; max-width: none; min-width: 0; } .pcb-picker-sort { flex: 1 1 100%; min-width: 0; padding-right: 2rem; } } .pcb-stage-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--pcb-card-border); background: rgba(255,255,255,0.02); } .pcb-stage-title { display: flex; align-items: center; gap: .85rem; min-width: 0; } .pcb-stage-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(207,254,37,0.10); border: 1px solid var(--pcb-card-border-strong); color: var(--pcb-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pcb-stage-icon svg { width: 32px; height: 32px; } .pcb-stage-title h3 { margin: 0; font: 700 1.15rem/1.2 'Sora', sans-serif; color: #fff; } .pcb-stage-title p { margin: .15rem 0 0; font-size: .82rem; color: var(--pcb-text-mute); } .pcb-stage-controls { display: flex; gap: .5rem; align-items: center; flex: 1; min-width: 240px; justify-content: flex-end; } .pcb-stage-controls[hidden] { display: none; } .pcb-picker-search { position: relative; flex: 1; max-width: 300px; min-width: 180px; } .pcb-picker-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--pcb-text-mute); font-size: 16px; } .pcb-picker-search input { width: 100%; padding: .55rem .85rem .55rem 2.2rem; background: rgba(255,255,255,0.03); border: 1px solid var(--pcb-card-border); border-radius: 8px; color: var(--pcb-text); font-size: .85rem; font-family: 'Sora', sans-serif; } .pcb-picker-search input:focus { outline: none; border-color: var(--pcb-accent); } /* Sort select — styled to match the search input next to it (same dark bg, same border, same hover/focus accent). The native dropdown arrow is replaced with an inline SVG chevron so the trigger looks consistent across browsers. color-scheme:dark forces the popup itself to render in dark mode; explicit option styles are honored by FF/Safari. */ .pcb-picker-sort { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: .55rem 2.1rem .55rem .9rem; background-color: rgba(255,255,255,0.03); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px 14px; border: 1px solid var(--pcb-card-border); border-radius: 8px; color: var(--pcb-text); font: 600 .82rem 'Sora', sans-serif; cursor: pointer; min-width: 180px; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; color-scheme: dark; } .pcb-picker-sort:hover { border-color: var(--pcb-card-border-strong); background-color: rgba(255,255,255,0.05); } .pcb-picker-sort:focus { outline: none; border-color: var(--pcb-accent); box-shadow: 0 0 0 3px rgba(207,254,37,0.12); } .pcb-picker-sort option { background: #14141b; color: var(--pcb-text); font: 500 .85rem 'Sora', sans-serif; padding: .5rem; } .pcb-picker-sort option:checked, .pcb-picker-sort option:hover { background: rgba(207,254,37,0.18); color: var(--pcb-accent); } .pcb-stage-subcats { padding: .85rem 1.4rem; border-bottom: 1px solid var(--pcb-card-border); display: flex; gap: .4rem; flex-wrap: wrap; } .pcb-stage-subcats[hidden] { display: none; } .pcb-subcat-tab { padding: .35rem .75rem; background: rgba(255,255,255,0.04); border: 1px solid transparent; border-radius: 999px; font-size: .76rem; font-weight: 600; color: var(--pcb-text-mute); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .pcb-subcat-tab:hover { color: var(--pcb-text); } .pcb-subcat-tab.active { background: var(--pcb-accent-ink); border-color: var(--pcb-accent); color: var(--pcb-accent); } .pcb-stage-selected { padding: .65rem 1.4rem; border-bottom: 1px solid var(--pcb-card-border); background: rgba(207,254,37,0.04); display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; } .pcb-stage-selected[hidden] { display: none; } .pcb-stage-selected-label { font: 600 .68rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--pcb-text-mute); flex-shrink: 0; } .pcb-stage-selected-chips { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; min-width: 0; } .pcb-stage-selected-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .55rem; background: rgba(207,254,37,0.10); border: 1px solid var(--pcb-card-border-strong); border-radius: 8px; font-size: .78rem; color: var(--pcb-text); max-width: 280px; } .pcb-stage-selected-chip > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .pcb-stage-selected-chip .price { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--pcb-accent); flex-shrink: 0; } .pcb-stage-selected-chip button { background: none; border: none; padding: 2px 4px; color: var(--pcb-text-mute); cursor: pointer; border-radius: 4px; flex-shrink: 0; } .pcb-stage-selected-chip button:hover { color: var(--pcb-bad); background: rgba(240,101,72,0.10); } /* Stage grid — pure auto-fill. The middle stage scales 720→1170 px depending on container; the grid auto-fills cards of min-width 240px so 1, 2, 3, or 4 cards fit per row depending on space. Below that, the grid drops to a single column. Each card is VERTICAL (thumb on top, info middle, full-width CTA at bottom) — that layout reads cleanly all the way down to ~200 px. The horizontal variant the previous CSS targeted at 320 px+ broke at 220-240 px (text + button got crushed because grid columns were too narrow for 92px-thumb + min-text + auto-button), so we removed it. */ .pcb-stage-grid { /* flex: 1 so this fills the remaining space inside .pcb-config-stage (which is now a sticky fixed-height column). The grid scrolls internally; the stage's head/foot stay pinned. */ flex: 1; min-height: 0; /* required so flex child can actually scroll */ padding: clamp(.85rem, 1vw, 1.25rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: clamp(.6rem, .8vw, 1rem); align-content: start; overflow-y: auto; } @media (max-width: 600px) { /* MOBILE: 2-column compact grid. Operator reported customers saw only 1-2 products per screen on phones; cutting the card height in half and going to 2-up means ~4-6 products visible per viewport. Breakpoint is 600px (not 540) so the whole phone range gets the same clean 2-up layout — the old 541-575px gap fell through to a stale grid rule that broke the card. */ .pcb-stage-grid { padding: .6rem; gap: .55rem; grid-template-columns: 1fr 1fr; } .pcb-part-card { padding: .55rem; gap: .4rem; border-radius: 10px; } /* Thumb shrinks + caps lower so the card height comes down. */ .pcb-part-card-thumb { aspect-ratio: 1 / 1; max-height: 130px; padding: 4px; border-radius: 8px; } /* Name truncated to one line at this size — saves a full line of height per card and the operator gets twice as many tiles visible. The full name still appears in the title attribute / details view. */ .pcb-part-card-name { font-size: .76rem; line-height: 1.25; -webkit-line-clamp: 2; } .pcb-part-card-meta { font-size: .66rem; gap: .3rem; } /* Hide the feature bullets entirely on mobile — they push the card too tall and they're already visible in the part-details modal. */ .pcb-part-card-features { display: none; } /* Compact stock pill + CTA. */ .pcb-part-card .stock-pill { font-size: .62rem; padding: .15rem .4rem; } .pcb-part-card-cta { font-size: .72rem; padding: .4rem .55rem; min-height: 32px; } /* Offer / incompat banners get cramped on a narrow tile too. */ .pcb-part-card-offer { font-size: .62rem; padding: .3rem .45rem; } .pcb-part-card-incompat { font-size: .58rem; padding: .25rem .4rem; margin-top: .3rem; } } @media (max-width: 360px) { /* Very small phones (iPhone SE, older Androids): 2-up still works but tighten gap + drop to single column if the design feels squeezed. Keeping it 2-col since operator explicitly wanted compact density. */ .pcb-stage-grid { gap: .45rem; padding: .5rem; } .pcb-part-card { padding: .45rem; } .pcb-part-card-thumb { max-height: 110px; } /* Recommended block mirrors the main grid's tightening so its 2-up cards don't overflow at 320-360px. */ .pcb-recommended-grid { gap: .45rem; } .pcb-recommended-block { padding: .5rem; } } .pcb-stage-placeholder { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 4rem 1rem; color: var(--pcb-text-mute); text-align: center; } .pcb-stage-placeholder-mark { width: 64px; height: 64px; border-radius: 50%; background: rgba(207,254,37,0.06); border: 1px dashed var(--pcb-card-border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; color: var(--pcb-accent); } .pcb-stage-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--pcb-text-mute); } /* Skeleton card — placeholder while parts load. Sized to match the real .pcb-part-card so the layout doesn't jump on swap. */ .pcb-skeleton-card { background: var(--pcb-card-bg); border: 1px solid var(--pcb-card-border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; } .pcb-skeleton-shimmer { background: linear-gradient( 90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 100%); background-size: 200% 100%; border-radius: 6px; animation: pcb-skeleton-shine 1.6s ease-in-out infinite; } .pcb-skeleton-img { width: 100%; aspect-ratio: 1.3 / 1; border-radius: 8px; } .pcb-skeleton-line { height: 12px; border-radius: 4px; } .pcb-skeleton-line.short { width: 60%; } .pcb-skeleton-line.medium { width: 80%; } @keyframes pcb-skeleton-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Card fade-in animation removed. The previous staggered cascade (0s, 0.04s, ..., 0.28s) made the sort feel "live" — the customer perceived it as products "moving around" each time they landed on a new category. The user asked for the sort to be totally invisible; killing the entry animation is part of that. The cards now appear instantly with their new tiered order already applied. */ /* "Recommended for your build" block — sits above the main grid in the four categories where prior selections give us meaningful context (motherboards, memory, graphics-cards, cooling). Scored server-side-free in scoreForBuild(). Always shows at most 2 cards and only when there's a real signal to rank by — otherwise the block is omitted entirely. */ .pcb-recommended-block { grid-column: 1 / -1; padding: .85rem; margin-bottom: 1rem; background: linear-gradient(180deg, rgba(207,254,37,0.06), rgba(20,20,27,0.30)); border: 1px solid rgba(207,254,37,0.22); border-radius: 14px; } .pcb-recommended-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; font: 700 .85rem/1.2 'Sora', sans-serif; color: var(--pcb-accent); } .pcb-recommended-head i { font-size: 16px; } .pcb-recommended-pill { margin-left: auto; font: 600 .65rem 'JetBrains Mono', monospace; color: var(--pcb-text-mute); letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; background: rgba(255,255,255,0.04); border: 1px solid var(--pcb-card-border); border-radius: 999px; } .pcb-recommended-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: clamp(.6rem, .8vw, 1rem); } /* On phones the recommended grid collapses to the same 2-up the main grid uses, so the visual rhythm stays consistent. Breakpoint kept in sync with the main stage grid (600px). */ @media (max-width: 600px) { .pcb-recommended-block { padding: .6rem; margin-bottom: .75rem; } .pcb-recommended-grid { grid-template-columns: 1fr 1fr; gap: .55rem; } .pcb-recommended-head { font-size: .76rem; margin-bottom: .55rem; } .pcb-recommended-pill { display: none; } } /* Recommended cards get a subtle accent border so they stand out inside (and outside) the block. */ .pcb-part-card.is-recommended { border-color: rgba(207,254,37,0.45); box-shadow: 0 0 0 1px rgba(207,254,37,0.12); } /* "Top match" ribbon on recommended cards. Sits in the top-left corner of the card. */ .pcb-part-reco-ribbon { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; background: linear-gradient(135deg, rgba(207,254,37,0.95), rgba(180,220,0,0.95)); color: var(--pcb-accent-ink); font: 700 .58rem 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); } .pcb-part-reco-ribbon i { font-size: 10px; } /* "No 12V-2x6" warning ribbon for PSUs paired with a GPU that uses the modern 12V-2x6 connector. Sits next to the reco ribbon on the top-left. Amber rather than red because it's a soft warning — the PSU still works, customer just needs an adapter. */ .pcb-part-psuwarn-ribbon { position: absolute; top: 8px; right: 8px; z-index: 2; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.95)); color: #1a1207; font: 700 .58rem 'Sora', sans-serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); cursor: help; } .pcb-part-psuwarn-ribbon i { font-size: 10px; } @media (max-width: 540px) { .pcb-part-psuwarn-ribbon { padding: .15rem .4rem; font-size: .5rem; top: 6px; right: 6px; } } @media (max-width: 540px) { .pcb-part-reco-ribbon { padding: .15rem .4rem; font-size: .5rem; top: 6px; left: 6px; } } /* Vertical product-tile card: thumbnail on top, info middle, CTA at the bottom spanning full width. Renders cleanly from a 200px wide column up to ~360px; beyond that the contents just breathe more. We picked vertical over horizontal because the grid auto-fills at min 240px — the horizontal layout (92px thumb + text + button) only worked at ~360px+ widths and the user reported it falling apart visually on mobile/tablet. */ .pcb-part-card { position: relative; display: flex; flex-direction: column; gap: .65rem; padding: .9rem; background: var(--pcb-card-bg); border: 1px solid var(--pcb-card-border); border-radius: 12px; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; text-align: left; } .pcb-part-card:hover { transform: translateY(-1px); border-color: var(--pcb-card-border-strong); box-shadow: 0 8px 20px rgba(0,0,0,0.35); } .pcb-part-card.selected { border-color: var(--pcb-accent); background: linear-gradient(180deg, rgba(207,254,37,0.06), rgba(20,20,27,0.74)); box-shadow: 0 0 0 1px rgba(207,254,37,0.32); } /* Compat-lock + out-of-stock states. We don't fully disable the card so the customer can still read its specs and gift offers — we just make it visually clear it's not pickable right now and de-emphasize it. */ .pcb-part-card.is-incompatible, .pcb-part-card.is-unavailable { cursor: not-allowed; opacity: .55; filter: grayscale(0.4); } .pcb-part-card.is-incompatible:hover, .pcb-part-card.is-unavailable:hover { transform: none; box-shadow: none; border-color: var(--pcb-card-border); } .pcb-part-card.is-incompatible { border-color: rgba(239,68,68,0.30); } .pcb-part-card.is-incompatible:hover { border-color: rgba(239,68,68,0.45); } .pcb-part-card.is-unavailable .pcb-part-card-cta, .pcb-part-card.is-incompatible .pcb-part-card-cta { background: rgba(255,255,255,0.05); color: var(--pcb-text-mute); border-color: var(--pcb-card-border); } .pcb-part-card-incompat { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; padding: .35rem .55rem; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.30); border-radius: 6px; font: 600 .7rem 'Sora', sans-serif; color: #fca5a5; } .pcb-part-card-incompat i { color: #ef4444; font-size: 13px; } .pcb-part-card-thumb { /* Vertical-card variant: a wider thumb on top of the card. Aspect ratio 4:3 keeps the image readable while leaving room for the name + meta + features below. We use width 100% so the thumb stretches to whatever column width the grid hands the card. */ width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--pcb-card-border); padding: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* Cap the thumb height so very narrow columns don't make the image dominate the card. */ max-height: 200px; } .pcb-part-card-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* No mix-blend-mode. The previous attempt (multiply + brightness compensation) was darkening EVERY product image regardless of whether the card was compatible/in-stock — the customer saw all cards as "dim" and couldn't tell which ones were actually incompatible. The dimming for incompat / OOS comes purely from .is-incompatible / .is-unavailable below now. Trade-off: products with white studio backgrounds will show that white on the dark card. Acceptable until we add server-side background removal (rembg or remove.bg) in the scraper pipeline. */ } .pcb-part-card-info { min-width: 0; display: flex; flex-direction: column; gap: .35rem; flex: 1; /* push the action button to the bottom of the card */ } .pcb-part-card-name { font: 600 .92rem/1.3 'Sora', sans-serif; color: var(--pcb-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcb-part-card-meta { font-size: .76rem; color: var(--pcb-text-mute); display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .pcb-part-card-meta .brand { font-weight: 600; color: var(--pcb-text); } .pcb-part-card-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .2rem; } .pcb-part-card-features li { font-size: .72rem; color: var(--pcb-text-mute); display: inline-flex; gap: .3rem; align-items: flex-start; line-height: 1.3; } .pcb-part-card-features li::before { content: "✓"; color: var(--pcb-accent); flex-shrink: 0; font-size: .82rem; margin-top: 1px; } .pcb-part-card-offer { font-size: .74rem; font-weight: 600; line-height: 1.35; color: #fde68a; background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(207,254,37,0.06)); border: 1px solid rgba(245,158,11,0.30); border-radius: 8px; padding: .4rem .6rem; display: inline-flex; align-items: flex-start; gap: .4rem; align-self: flex-start; max-width: 100%; } .pcb-part-card-offer i { font-size: 14px; color: #f59e0b; flex-shrink: 0; margin-top: 1px; } .pcb-part-card-offer span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Action row at the bottom of the vertical card. The CTA spans the full card width on its own line; the compare-toggle (scales icon) sits in the corner of the thumbnail above (position:absolute inside .pcb-part-card-thumb). */ .pcb-part-card-action { flex-shrink: 0; display: flex; flex-direction: row; align-items: stretch; gap: .5rem; } .pcb-part-card-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem .8rem; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--pcb-card-border); font: 600 .82rem 'Sora', sans-serif; color: var(--pcb-text); transition: background .15s, border-color .15s, color .15s; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .pcb-part-card-cta i { font-size: 16px; } .pcb-part-card:hover .pcb-part-card-cta { background: rgba(207,254,37,0.10); border-color: var(--pcb-card-border-strong); color: var(--pcb-accent); } .pcb-part-card-cta.is-selected, .pcb-part-card.selected .pcb-part-card-cta { background: var(--pcb-accent); border-color: var(--pcb-accent); color: var(--pcb-accent-ink); } /* Inline Compare button — sits to the right of the main Add CTA inside .pcb-part-card-action (which is already flex-row). The previous compare control was an absolutely-positioned icon button overlaid on the thumbnail; operators reported customers never realized comparison was a thing. Moving it inline raises affordance without crowding the CTA — flex:0 keeps the CTA stretching to fill while Compare stays compact. Specificity note: the compound selector `.pcb-part-compare-btn .pcb-part-compare-btn-inline` is required because the original .pcb-part-compare-btn rule (further down in this file) sets position:absolute at the same specificity. Without the compound selector the cascade would prefer the LATER rule (the absolute one) and the button would still float in the thumbnail corner. */ .pcb-part-compare-btn.pcb-part-compare-btn-inline { position: static; top: auto; right: auto; width: auto; height: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: 0 .85rem; border: 1px solid var(--pcb-card-border); border-radius: 10px; background: rgba(255,255,255,0.04); color: var(--pcb-text-mute); font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s ease; } .pcb-part-compare-btn.pcb-part-compare-btn-inline i { font-size: 15px; line-height: 1; } .pcb-part-compare-btn.pcb-part-compare-btn-inline:hover { background: rgba(207,254,37,0.10); border-color: var(--pcb-card-border-strong); color: var(--pcb-accent); transform: none; } .pcb-part-compare-btn.pcb-part-compare-btn-inline.is-active { background: var(--pcb-accent); border-color: var(--pcb-accent); color: var(--pcb-accent-ink); } /* On narrow screens (phones, tight side-by-side stages) drop the text label and collapse to a 42x42 icon-only square. Keeps the Add-to-build CTA readable when card width is tight. 600px breakpoint matches the rest of pc-builder.css's mobile threshold. */ @media (max-width: 600px) { .pcb-part-compare-btn.pcb-part-compare-btn-inline .pcb-part-compare-label { display: none; } .pcb-part-compare-btn.pcb-part-compare-btn-inline { width: 42px; height: 42px; padding: 0; gap: 0; } .pcb-part-compare-btn.pcb-part-compare-btn-inline i { font-size: 17px; } } /* Price displayed prominently in the info block. The previous spec left price hidden until Estimate; the operator decided customers should see ballpark cost up front so they don't burn time configuring a build they can't afford. "Price on request" is the fallback when the supplier scrape hasn't produced a number yet. */ .pcb-part-card-price { font-size: 1.05rem; font-weight: 700; color: var(--pcb-accent); letter-spacing: -0.01em; line-height: 1.1; margin-top: .1rem; } .pcb-part-card-price-na { color: var(--pcb-text-mute); font-size: .85rem; font-weight: 500; } .stock-pill { padding: .15rem .5rem; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .stock-pill.in { background: rgba(10,179,156,0.18); color: var(--pcb-good); } .stock-pill.out { background: rgba(240,101,72,0.18); color: var(--pcb-bad); } .stock-pill.low { background: rgba(245,158,11,0.20); color: #b45309; } /* Gift ribbon top-right corner of card */ .pcb-part-gift-ribbon { position: absolute; top: -8px; right: 14px; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem; font: 700 .65rem 'Sora', sans-serif; letter-spacing: .04em; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; border-radius: 999px; box-shadow: 0 4px 10px rgba(245,158,11,0.30); z-index: 2; cursor: help; animation: pcb-gift-pulse 2.6s ease-in-out infinite; text-transform: uppercase; } .pcb-part-gift-ribbon i { font-size: 12px; } @keyframes pcb-gift-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 10px rgba(245,158,11,0.30); } 50% { transform: scale(1.04); box-shadow: 0 4px 16px rgba(245,158,11,0.55); } } .pcb-part-card.has-gift { border-color: rgba(245,158,11,0.30); } /* NOTE: an old `@media (max-width:575px)` block lived here that set `grid-template-columns` / `grid-column` on `.pcb-part-card` — but the card is `display:flex; flex-direction:column`, so those grid props were dead no-ops. The one rule that DID apply, `.pcb-part-card-thumb { width:72px; height:72px }`, shrank the thumb to a tiny floating square on 541-575px phones — the "cards display poorly / overlapping" bug. Removed entirely; the phone layout is fully owned by the `@media (max-width:600px)` block above. */ @media (max-width: 600px) { .pcb-part-card-cta { width: 100%; min-width: 0; } } /* Desktop layout: cards are PRODUCT TILES (thumb on top, info below, full-width action button at the bottom). Active any time the summary panel is also visible (≥1280px), so the dense product-grid feel kicks in across the whole desktop range — laptops 1366×768 included. */ @media (min-width: 1280px) { .pcb-stage-grid .pcb-part-card { grid-template-columns: 1fr; grid-auto-rows: auto; align-items: stretch; text-align: left; padding: 1rem; gap: .65rem; } .pcb-stage-grid .pcb-part-card-thumb { /* Product-tile look: the thumb has NO inner background or border in the vertical layout — the image floats directly on the card so the visual is closer to a Newegg / Amazon product tile than the boxy "image inside a frame" look. mix-blend-mode on the image below handles supplier images that ship with white studio BGs. */ width: 100%; height: auto; aspect-ratio: 4 / 3; padding: 8px; background: transparent; border: none; border-radius: 0; } .pcb-stage-grid .pcb-part-card-info { gap: .4rem; } .pcb-stage-grid .pcb-part-card-action { grid-column: 1 / -1; justify-content: stretch; margin-top: auto; } .pcb-stage-grid .pcb-part-card-cta { flex: 1; width: 100%; min-width: 0; padding: .65rem 1rem; } .pcb-stage-grid .pcb-part-gift-ribbon { top: -10px; right: 12px; } } .pcb-stage-foot { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.4rem; border-top: 1px solid var(--pcb-card-border); background: rgba(255,255,255,0.02); } .pcb-stage-foot[hidden] { display: none; } .pcb-stage-count { font-size: .82rem; color: var(--pcb-text-mute); } .pcb-stage-count-hint { /* Tells the customer the auto-sort tiered the results — only shown when at least one item is OOS or incompat with the current build. */ display: inline-block; margin-left: .25rem; color: var(--pcb-accent); font-weight: 600; cursor: help; } .pcb-stage-pagination { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; } .pcb-page-btn { min-width: 32px; height: 32px; padding: 0 .55rem; background: rgba(255,255,255,0.03); border: 1px solid var(--pcb-card-border); color: var(--pcb-text-mute); border-radius: 8px; font: 600 .82rem 'JetBrains Mono', monospace; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s, background .15s; } .pcb-page-btn:hover:not(:disabled) { color: var(--pcb-text); border-color: var(--pcb-card-border-strong); } .pcb-page-btn:disabled { opacity: .35; cursor: not-allowed; } .pcb-page-btn.active { background: var(--pcb-accent); color: var(--pcb-accent-ink); border-color: var(--pcb-accent); } .pcb-page-ellipsis { color: var(--pcb-text-mute); font: 600 .82rem 'JetBrains Mono', monospace; padding: 0 .25rem; } @media (max-width: 575px) { .pcb-stage-foot { flex-direction: column; align-items: flex-start; gap: .55rem; } .pcb-stage-pagination { width: 100%; justify-content: center; } } /* ---------- Right-side Build Summary panel ---------- */ .pcb-config-summary { position: sticky; top: 92px; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 0%, rgba(207,254,37,0.10), transparent 60%), linear-gradient(180deg, rgba(20,20,27,0.92), rgba(8,9,13,0.96)); border: 1px solid var(--pcb-card-border-strong); border-radius: 18px; /* overflow-y:auto so the entire panel scrolls internally when its content (head + hero visual + 5 widgets + selected list + foot) exceeds the viewport. Was overflow:hidden which clipped the FPS and Games widgets at the top of the panel on laptops 768-900px tall. The selected-list-wrap inside still has its own scroll for long part lists, but now the viewport-driven outer scroll fixes the "panel breaks when filling up" complaint. */ overflow-y: auto; scrollbar-width: thin; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(207,254,37,0.06); height: calc(100vh - 110px); } .pcb-config-summary::-webkit-scrollbar { width: 4px; } .pcb-config-summary::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; } .pcb-summary-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1rem; border-bottom: 1px solid var(--pcb-card-border); flex-shrink: 0; } .pcb-summary-eyebrow { font: 700 .68rem 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--pcb-text-mute); } .pcb-summary-cta { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; font: 700 .82rem 'Sora', sans-serif; background: var(--pcb-accent); color: var(--pcb-accent-ink); border: none; border-radius: 999px; cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; } .pcb-summary-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(207,254,37,0.30); } .pcb-summary-cta:disabled { opacity: .4; cursor: not-allowed; } .pcb-summary-cta i { font-size: 14px; } /* Hero PC visual at the top of the panel */ .pcb-summary-visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--pcb-card-border); flex-shrink: 0; } .pcb-summary-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.75) contrast(1.05) brightness(0.6); } .pcb-summary-visual-grad { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(207,254,37,0.15) 0%, transparent 60%), linear-gradient(180deg, rgba(8,9,13,0.30) 0%, rgba(8,9,13,0.85) 100%); } .pcb-summary-visual-pills { position: absolute; top: 12px; left: 12px; display: flex; gap: .35rem; flex-wrap: wrap; } .pcb-summary-visual-meta { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; color: #fff; } .pcb-summary-visual-count { font: 600 .9rem 'Sora', sans-serif; } .pcb-summary-visual-count strong { font: 800 1.4rem 'Sora', sans-serif; color: var(--pcb-accent); margin-right: .35rem; } /* ---------- Summary widgets (FPS / Power / Compat) ---------- Three stacked premium cards inside the summary panel. Each is a self-contained widget with a head row (label + hint) and a body that fills with live data as the user picks parts. They share a common shell so the visual rhythm is consistent. data-state on the wrapper drives the visual treatment: empty — muted, no fills, hint copy in place partial — one or two inputs available, partial calc shown ready — full calculation lit up warn — yellow accents (e.g. PSU under recommendation) error — red accents (e.g. socket mismatch) */ .pcb-summary-widgets { display: flex; flex-direction: column; gap: .6rem; padding: .85rem .85rem .35rem; border-bottom: 1px solid var(--pcb-card-border); flex-shrink: 0; } .pcb-summary-widget { background: rgba(255,255,255,0.025); border: 1px solid var(--pcb-card-border); border-radius: 12px; padding: .75rem .85rem; transition: border-color .25s, background .25s; } .pcb-summary-widget[data-state="empty"] { opacity: .55; } .pcb-summary-widget[data-state="ready"] { border-color: rgba(207,254,37,0.30); background: radial-gradient(circle at 100% 0%, rgba(207,254,37,0.06), transparent 60%), rgba(255,255,255,0.025); } .pcb-summary-widget[data-state="warn"] { border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.06); } .pcb-summary-widget[data-state="error"] { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.07); } .pcb-summary-widget-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; } .pcb-summary-widget-label { font: 700 .72rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--pcb-text); display: inline-flex; align-items: center; gap: .35rem; } .pcb-summary-widget-label i { color: var(--pcb-accent); font-size: 14px; } .pcb-summary-widget-hint { font-size: .68rem; color: var(--pcb-text-mute); } .pcb-summary-widget[data-state="warn"] .pcb-summary-widget-hint { color: #fbbf24; } .pcb-summary-widget[data-state="error"] .pcb-summary-widget-hint { color: #ef4444; } /* --- FPS gauges --- */ .pcb-fps-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .pcb-fps-gauge { background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: .5rem .55rem; display: flex; flex-direction: column; gap: .3rem; align-items: center; text-align: center; } .pcb-fps-gauge-res { font: 700 .62rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--pcb-text-mute); } .pcb-fps-gauge-num { font: 800 1.05rem 'Sora', sans-serif; color: var(--pcb-text); line-height: 1; } .pcb-summary-fps[data-state="ready"] .pcb-fps-gauge-num { color: var(--pcb-accent); } .pcb-fps-gauge-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; } .pcb-fps-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #f06548 0%, #f59e0b 40%, #22c55e 70%, var(--pcb-accent) 100%); border-radius: 999px; transition: width .55s cubic-bezier(0.4, 0, 0.2, 1); } /* --- Power widget --- */ .pcb-power-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-bottom: .55rem; } .pcb-power-stat { background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: .45rem .55rem; display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; } .pcb-power-stat-label { font: 700 .6rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--pcb-text-mute); } .pcb-power-stat-value { font: 600 .82rem 'Sora', sans-serif; color: var(--pcb-text); } .pcb-power-stat-value strong { font: 800 1.05rem 'Sora', sans-serif; color: var(--pcb-text); margin-right: .15rem; } .pcb-summary-power[data-state="ready"] .pcb-power-stat-value strong { color: var(--pcb-accent); } .pcb-summary-power[data-state="warn"] .pcb-power-stat-value strong { color: #fbbf24; } .pcb-summary-power[data-state="error"] .pcb-power-stat-value strong { color: #ef4444; } .pcb-power-msg { margin: .55rem 0 0; font-size: .72rem; color: var(--pcb-text); display: flex; align-items: flex-start; gap: .35rem; } .pcb-summary-power[data-state="warn"] .pcb-power-msg { color: #fbbf24; } .pcb-summary-power[data-state="error"] .pcb-power-msg { color: #ef4444; } /* --- Bottleneck widget (pc-builds.com-style: per-resolution check + RAM rec/max stats + GPU upgrade suggestions) --- */ .pcb-bottleneck-body { display: flex; flex-direction: column; gap: .65rem; } .pcb-bn-res-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; } .pcb-bn-res { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .5rem .6rem; border-radius: 8px; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.05); } .pcb-bn-res-name { font: 700 .62rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--pcb-text-mute); } .pcb-bn-res-tag { font: 700 .76rem 'Sora', sans-serif; color: var(--pcb-text); display: inline-flex; align-items: center; gap: .3rem; } .pcb-bn-res-tag i { font-size: 12px; } .pcb-bn-res.ok { border-color: rgba(10,179,156,0.30); background: rgba(10,179,156,0.08); } .pcb-bn-res.ok .pcb-bn-res-tag, .pcb-bn-res.ok i { color: var(--pcb-good); } .pcb-bn-res.warn-gpu { border-color: rgba(245,158,11,0.40); background: rgba(245,158,11,0.10); } .pcb-bn-res.warn-gpu .pcb-bn-res-tag, .pcb-bn-res.warn-gpu i { color: #fbbf24; } .pcb-bn-res.warn-cpu { border-color: rgba(240,101,72,0.40); background: rgba(240,101,72,0.10); } .pcb-bn-res.warn-cpu .pcb-bn-res-tag, .pcb-bn-res.warn-cpu i { color: #fca5a5; } .pcb-bn-ram { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; } .pcb-bn-ram-stat { background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: .45rem .55rem; display: flex; flex-direction: column; gap: .15rem; } .pcb-bn-ram-label { font: 700 .6rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--pcb-text-mute); } .pcb-bn-ram-value { font: 600 .8rem 'Sora', sans-serif; color: var(--pcb-text); } .pcb-bn-ram-value strong { font: 800 1.05rem 'Sora', sans-serif; color: var(--pcb-accent); margin-right: .15rem; } .pcb-bn-suggest { padding: .55rem .65rem; background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.30); border-radius: 8px; } .pcb-bn-suggest-head { font: 700 .68rem 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #a5b4fc; margin-bottom: .4rem; display: inline-flex; align-items: center; gap: .35rem; } .pcb-bn-suggest-head i { font-size: 13px; } .pcb-bn-suggest-list { display: flex; flex-wrap: wrap; gap: .3rem; } .pcb-bn-suggest-chip { font: 600 .72rem 'Sora', sans-serif; padding: .25rem .55rem; background: rgba(99,102,241,0.16); color: var(--pcb-text); border: 1px solid rgba(99,102,241,0.25); border-radius: 999px; } .pcb-bottleneck-msg { margin: .55rem 0 0; font-size: .72rem; color: var(--pcb-text); line-height: 1.35; } .pcb-summary-bottleneck[data-state="warn"] .pcb-bottleneck-msg { color: #fbbf24; } @media (max-width: 575px) { .pcb-bn-res-row { grid-template-columns: 1fr 1fr 1fr; gap: .3rem; } .pcb-bn-res { padding: .4rem .5rem; } } /* --- Game-specific FPS list --- */ .pcb-game-list { display: flex; flex-direction: column; gap: .35rem; } .pcb-game-list-empty { font-size: .76rem; color: var(--pcb-text-mute); font-style: italic; padding: .25rem 0; } .pcb-game-row { background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; padding: .5rem .65rem; display: flex; flex-direction: column; gap: .25rem; } .pcb-game-row-name { font: 700 .76rem 'Sora', sans-serif; color: var(--pcb-text); display: flex; align-items: center; justify-content: space-between; gap: .35rem; } .pcb-game-row-preset { font: 600 .62rem 'JetBrains Mono', monospace; color: var(--pcb-text-mute); letter-spacing: .04em; } .pcb-game-row-fps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; } .pcb-game-row-fps span { display: flex; flex-direction: column; align-items: center; gap: 1px; font: 700 .68rem 'JetBrains Mono', monospace; padding: .15rem .25rem; border-radius: 4px; background: rgba(255,255,255,0.03); } .pcb-game-row-fps span small { font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pcb-text-mute); } .pcb-game-row-fps span.high { color: var(--pcb-accent); } .pcb-game-row-fps span.mid { color: #facc15; } .pcb-game-row-fps span.low { color: #f06548; } /* --- Compat list --- */ .pcb-compat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .pcb-compat-item { display: flex; align-items: center; gap: .55rem; padding: .35rem .55rem; border-radius: 6px; background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.04); font-size: .76rem; color: var(--pcb-text); } .pcb-compat-item i { font-size: 14px; flex-shrink: 0; } .pcb-compat-item--ok { color: #d1d5db; } .pcb-compat-item--ok i { color: #22c55e; } .pcb-compat-item--warn { color: #fbbf24; border-color: rgba(245,158,11,0.30); background: rgba(245,158,11,0.05); } .pcb-compat-item--warn i{ color: #fbbf24; } .pcb-compat-item--err { color: #fca5a5; border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.05); } .pcb-compat-item--err i { color: #ef4444; } .pcb-compat-item-message { flex: 1; line-height: 1.3; } /* Selected components list */ .pcb-summary-list-wrap { flex: 1; overflow-y: auto; scrollbar-width: thin; } .pcb-summary-list-wrap::-webkit-scrollbar { width: 4px; } .pcb-summary-list-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; } .pcb-summary-list-head { font: 700 .68rem 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--pcb-text-mute); padding: .9rem 1rem .55rem; } .pcb-summary-list { padding: 0 .65rem .85rem; display: flex; flex-direction: column; gap: .35rem; } .pcb-summary-list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.25rem 1rem 2rem; gap: .55rem; color: var(--pcb-text-mute); } .pcb-summary-list-empty i { font-size: 26px; color: rgba(207,254,37,0.45); } .pcb-summary-list-empty p { margin: 0; font-size: .82rem; } .pcb-summary-row { display: grid; grid-template-columns: 28px 1fr; gap: .55rem; align-items: center; padding: .5rem .55rem; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid var(--pcb-card-border); transition: border-color .15s; } .pcb-summary-row:hover { border-color: var(--pcb-card-border-strong); } .pcb-summary-row .row-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--pcb-accent); } .pcb-summary-row .row-icon svg { width: 22px; height: 22px; } .pcb-summary-row .row-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pcb-summary-row .row-cat { font: 700 .62rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--pcb-text-mute); } .pcb-summary-row .row-name { font: 600 .78rem 'Sora', sans-serif; color: var(--pcb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcb-summary-row .row-gift { font: 600 .66rem 'Sora', sans-serif; color: #fde68a; display: inline-flex; align-items: center; gap: .25rem; margin-top: 2px; } .pcb-summary-row .row-gift i { font-size: 11px; color: #f59e0b; } .pcb-summary-foot { display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem; border-top: 1px solid var(--pcb-card-border); background: rgba(0,0,0,0.20); flex-shrink: 0; } .pcb-summary-foot-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(207,254,37,0.10); color: var(--pcb-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .pcb-summary-foot-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pcb-summary-foot-text strong { font: 600 .78rem 'Sora', sans-serif; color: var(--pcb-text); } .pcb-summary-foot-text em { font: 500 .68rem 'Sora', sans-serif; color: var(--pcb-text-mute); font-style: normal; } /* Below 1280px (most laptops are 1366×768 — they get the persistent panel too): hide the right panel and show it as a slide-in drawer instead. Was 1399px which excluded common laptops from seeing the build summary without manually opening the drawer — that hurt conversion. */ @media (max-width: 1279px) { .pcb-config-summary { position: fixed; top: 0; right: 0; width: min(380px, 100vw); height: 100vh; max-height: 100vh; border-radius: 0; transform: translateX(100%); transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 50; } .pcb-config-summary[data-open="true"] { transform: translateX(0); } } /* Mobile launcher pill — sticky bottom on screens without the side panel */ .pcb-summary-mobile-launcher { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 45; display: inline-flex; align-items: center; gap: .55rem; padding: .65rem 1rem .65rem .85rem; border: 1px solid var(--pcb-card-border-strong); border-radius: 999px; background: linear-gradient(135deg, rgba(13,16,24,0.95), rgba(8,10,16,0.95)); color: var(--pcb-text); cursor: pointer; font: 600 .85rem 'Sora', sans-serif; box-shadow: 0 14px 32px rgba(0,0,0,0.50), 0 0 0 1px rgba(207,254,37,0.20); backdrop-filter: blur(10px); transition: transform .2s ease; } .pcb-summary-mobile-launcher:hover { transform: translateX(-50%) translateY(-2px); } .pcb-summary-mobile-launcher[hidden] { display: none; } .pcb-summary-mobile-launcher i:first-child { color: var(--pcb-accent); font-size: 18px; } .pcb-summary-mobile-launcher i:last-child { color: var(--pcb-text-mute); font-size: 16px; } .pcb-summary-mobile-launcher strong { color: var(--pcb-accent); margin-right: 2px; } @media (min-width: 1280px) { .pcb-summary-mobile-launcher { display: none !important; } } /* Floating Reset button — visible only after the customer has picked at least one part (JS toggles `hidden`). Anchored to the BOTTOM-LEFT so it doesn't overlap with the XDan launcher in the bottom-right. Was previously bottom:96px right:24px which sat right behind XDan and got the user complaining "el boton de reset esta detras de xdan". */ .pcb-reset-floating { position: fixed; bottom: 24px; left: 24px; z-index: 44; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 999px; background: rgba(13, 16, 24, 0.94); border: 1px solid var(--pcb-card-border); color: var(--pcb-text-mute); font: 600 .8rem 'Sora', sans-serif; cursor: pointer; backdrop-filter: blur(8px); box-shadow: 0 6px 16px rgba(0,0,0,0.40); transition: color .15s, border-color .15s, background .15s; } .pcb-reset-floating:hover { color: var(--pcb-bad); border-color: rgba(240,101,72,0.40); background: rgba(240,101,72,0.06); } .pcb-reset-floating[hidden] { display: none; } .pcb-reset-floating i { font-size: 14px; } @media (max-width: 575px) { .pcb-reset-floating { bottom: 16px; left: 12px; padding: .5rem .75rem; font-size: .76rem; } } /* ---------- Status pills + primary CTA ---------- The old fixed bottom "summary bar" these used to live in was removed (the right-side summary panel + the mobile launcher pill replaced it). These three rules survive because the pills still render inside `.pcb-summary-visual-pills` and `.pcb-cta` is the estimate-modal's primary button (`button-01 pcb-cta`). */ .pcb-issues-pill { padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; } .pcb-issues-pill.ok { background: rgba(10,179,156,0.18); color: var(--pcb-good); } .pcb-issues-pill.warn { background: rgba(245,158,11,0.18); color: var(--pcb-warn); } .pcb-issues-pill.err { background: rgba(240,101,72,0.18); color: var(--pcb-bad); } .pcb-gifts-pill { padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; display: inline-flex; align-items: center; gap: .35rem; box-shadow: 0 4px 10px rgba(245,158,11,0.25); } .pcb-gifts-pill[hidden] { display: none; } .pcb-gifts-pill i { font-size: 13px; } .pcb-cta { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.4rem; font: 700 .92rem 'Sora', sans-serif; background: var(--pcb-accent); color: var(--pcb-accent-ink); border: none; border-radius: 10px; cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; } .pcb-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(207,254,37,0.30); } .pcb-cta:disabled { opacity: .5; cursor: not-allowed; } @media (max-width: 575px) { .pcb-cta { width: 100%; justify-content: center; } } /* ---------- XDan AI launcher (chat-widget style, à la Intercom/Crisp) ---------- */ .pcb-xdan-launcher { /* Anchored to the BOTTOM-RIGHT corner with a sensible 24 px gutter. Was bottom:110px which lifted it well above the corner — that made sense when there was a sticky summary bar at the bottom of the viewport, but that bar was removed. With it gone the launcher just floated mid-screen for no reason. The Reset button is on the bottom-LEFT now (commit aa28817), so the corner is clear. */ position: fixed; bottom: 24px; right: 24px; z-index: 45; width: 60px; height: 60px; padding: 0; border: none; border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.35), transparent 55%), linear-gradient(135deg, #cffe25 0%, #a3e21d 100%); color: #0a1322; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30), 0 0 0 4px rgba(207,254,37,0.15), inset 0 -3px 8px rgba(0,0,0,0.20); transition: transform .2s ease, box-shadow .2s ease; } .pcb-xdan-launcher:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.40), 0 0 0 6px rgba(207,254,37,0.25), inset 0 -3px 8px rgba(0,0,0,0.20); } .pcb-xdan-launcher:active { transform: translateY(0) scale(1.02); } .pcb-xdan-launcher[hidden] { display: none; } .pcb-xdan-launcher i { line-height: 1; } /* Notification dot — surfaces when XDan flags a compat issue */ .pcb-xdan-launcher-pulse { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(239,68,68,0.7); opacity: 0; transition: opacity .2s; } .pcb-xdan-launcher[data-attention="true"] .pcb-xdan-launcher-pulse { opacity: 1; animation: pcb-pulse-dot 1.8s ease-out infinite; } @keyframes pcb-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); } 100% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } } @media (max-width: 575px) { /* Mobile: keep the launcher a normal round chat-bubble button in the bottom-RIGHT corner — operator reversed the earlier side-tab idea, they want the familiar Intercom/Crisp position. Anchored above the iOS home-indicator safe area so it stays tappable (the original complaint was "can't click XDan from my iPhone" — the home indicator was eating the tap zone). Slightly smaller than desktop so it doesn't crowd the bottom-center summary pill. */ .pcb-xdan-launcher { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 14px; width: 54px; height: 54px; border-radius: 50%; font-size: 25px; padding: 0; transform: none; transition: transform .18s ease, box-shadow .2s ease; box-shadow: 0 8px 20px rgba(0,0,0,0.40), 0 0 0 3px rgba(207,254,37,0.16); } .pcb-xdan-launcher:active { transform: scale(0.93); } .pcb-xdan-launcher-pulse { top: 5px; right: 5px; left: auto; } } .pcb-xdan-panel { /* Sits just above the launcher: launcher = 24 + 60 high + 12 gap = 96. */ position: fixed; bottom: 96px; right: 24px; width: min(380px, calc(100vw - 2rem)); max-height: min(560px, calc(100vh - 140px)); /* Above the compare tray (1000): when the customer has the chat panel open it's the focused surface, so it must win any overlap — especially the mobile full-width sheet, which would otherwise sit behind the tray. */ z-index: 1100; background: var(--pcb-bg-surface); border: 1px solid var(--pcb-card-border-strong); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.6); display: flex; flex-direction: column; animation: pcb-panel-in .25s ease-out; } .pcb-xdan-panel[hidden] { display: none; } @keyframes pcb-panel-in { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 575px) { .pcb-xdan-panel { bottom: 0; right: 0; left: 0; width: 100%; max-height: 70vh; border-radius: 16px 16px 0 0; } } .pcb-xdan-head { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-bottom: 1px solid var(--pcb-card-border); } .pcb-xdan-avatar { position: relative; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--pcb-accent), #6366f1); display: inline-flex; align-items: center; justify-content: center; font: 800 16px 'Sora', sans-serif; color: var(--pcb-accent-ink); flex-shrink: 0; } .pcb-xdan-glow { position: absolute; inset: -3px; border-radius: 14px; background: radial-gradient(circle, rgba(207,254,37,0.55), transparent 70%); opacity: .55; filter: blur(8px); animation: pcb-xdan-pulse 2.4s ease-in-out infinite; } .pcb-xdan-mark { position: relative; z-index: 1; } .pcb-xdan-id { flex: 1; min-width: 0; } .pcb-xdan-id h3 { margin: 0; font: 600 .98rem/1.1 'Sora', sans-serif; color: var(--pcb-text); } .pcb-xdan-tag { font-size: .72rem; color: var(--pcb-text-mute); margin: .15rem 0 0; letter-spacing: .04em; } .pcb-xdan-status { font: 600 .66rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; background: rgba(10,179,156,0.18); color: var(--pcb-good); } .pcb-xdan-status.thinking { background: rgba(99,102,241,0.18); color: #a5b4fc; } .pcb-xdan-close { width: 32px; height: 32px; background: rgba(255,255,255,0.06); border: 1px solid var(--pcb-card-border); color: var(--pcb-text); cursor: pointer; border-radius: 8px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s; } .pcb-xdan-close:hover { color: #fff; background: rgba(240,101,72,0.18); border-color: rgba(240,101,72,0.40); } .pcb-xdan-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .65rem; scrollbar-width: thin; } .pcb-xdan-body::-webkit-scrollbar { width: 4px; } .pcb-xdan-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; } .pcb-xdan-msg { padding: .7rem .85rem; border-radius: 12px; font-size: .85rem; line-height: 1.5; max-width: 92%; animation: pcb-msg-in .35s ease-out; } .pcb-xdan-msg.agent { background: rgba(207,254,37,0.06); border: 1px solid var(--pcb-card-border-strong); align-self: flex-start; color: var(--pcb-text); } .pcb-xdan-msg.user { background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.30); color: #d4d8ff; align-self: flex-end; } .pcb-xdan-msg.agent.error { background: rgba(240,101,72,0.08); border-color: rgba(240,101,72,0.30); color: #ffd6cd; } .pcb-xdan-msg p { margin: 0 0 .35rem; } .pcb-xdan-msg p:last-child { margin: 0; } .pcb-xdan-msg strong { color: var(--pcb-accent); } .pcb-xdan-thinking { padding: .65rem .85rem; display: inline-flex; gap: .25rem; align-items: center; background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.30); border-radius: 12px; align-self: flex-start; } .pcb-xdan-thinking span { width: 6px; height: 6px; border-radius: 50%; background: #a5b4fc; animation: pcb-think-bounce 1.2s infinite ease-in-out; } .pcb-xdan-thinking span:nth-child(2) { animation-delay: .2s; } .pcb-xdan-thinking span:nth-child(3) { animation-delay: .4s; } @keyframes pcb-msg-in { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pcb-think-bounce { 0%, 80%, 100% { transform: scale(.7); opacity: .5; } 40% { transform: scale(1); opacity: 1; } } .pcb-xdan-tool { align-self: flex-start; padding: .35rem .6rem; background: rgba(99,102,241,0.08); border: 1px dashed rgba(99,102,241,0.25); border-radius: 8px; font-size: .68rem; color: #a5b4fc; display: inline-flex; align-items: center; gap: .4rem; font-family: 'JetBrains Mono', monospace; } .pcb-xdan-tool .dot { width: 6px; height: 6px; border-radius: 50%; background: #a5b4fc; animation: pcb-think-bounce 1.2s infinite ease-in-out; } .pcb-xdan-tool.done { color: var(--pcb-good); border-color: rgba(10,179,156,0.30); background: rgba(10,179,156,0.06); } .pcb-xdan-tool.done .dot { background: var(--pcb-good); animation: none; } .pcb-xdan-tool.failed { color: var(--pcb-bad); border-color: rgba(240,101,72,0.30); } /* Inline product card — XDan recommends parts from the recommend_part tool and renders one of these per match alongside the chat bubble. */ .pcb-xdan-part-card { align-self: stretch; display: grid; grid-template-columns: 64px 1fr auto; gap: .65rem; padding: .55rem; background: rgba(255,255,255,0.03); border: 1px solid var(--pcb-card-border); border-radius: 12px; align-items: center; animation: pcb-msg-in .25s ease-out both; } .pcb-xdan-part-card.added { border-color: rgba(10,179,156,0.45); background: rgba(10,179,156,0.06); } .pcb-xdan-part-card .thumb { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.04); display: grid; place-items: center; } .pcb-xdan-part-card .thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .pcb-xdan-part-card .meta { min-width: 0; } .pcb-xdan-part-card .meta .name { font-size: .8rem; font-weight: 600; color: var(--pcb-text); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcb-xdan-part-card .meta .sub { font-size: .68rem; color: rgba(148,163,184,0.85); margin-top: .15rem; } .pcb-xdan-part-card .meta .badges { display: flex; gap: .3rem; margin-top: .25rem; flex-wrap: wrap; } .pcb-xdan-part-card .meta .badges .stock, .pcb-xdan-part-card .meta .badges .offer { font-size: .58rem; padding: .1rem .35rem; border-radius: 999px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .pcb-xdan-part-card .meta .badges .stock.ok, .pcb-xdan-part-card .meta .badges .stock.high { background: rgba(10,179,156,0.14); color: var(--pcb-good); } .pcb-xdan-part-card .meta .badges .stock.low { background: rgba(245,158,11,0.16); color: #f59e0b; } .pcb-xdan-part-card .meta .badges .stock.out { background: rgba(240,101,72,0.16); color: var(--pcb-bad); } .pcb-xdan-part-card .meta .badges .offer { background: rgba(99,102,241,0.16); color: #a5b4fc; } .pcb-xdan-part-card .actions .btn-add { height: 32px; padding: 0 .75rem; border-radius: 999px; background: var(--pcb-accent); color: #0a1322; border: 0; font-weight: 700; font-size: .72rem; letter-spacing: -.01em; cursor: pointer; transition: filter .15s, transform .1s; white-space: nowrap; } .pcb-xdan-part-card .actions .btn-add:hover { filter: brightness(1.08); } .pcb-xdan-part-card .actions .btn-add:active { transform: translateY(1px); } .pcb-xdan-part-card .actions .btn-add:disabled { background: rgba(10,179,156,0.4); color: rgba(255,255,255,0.85); cursor: default; } /* Auto-pick group card (one shown when XDan calls auto_complete_build). */ .pcb-xdan-autopicks { align-self: stretch; padding: .65rem .75rem; background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(10,179,156,0.06)); border: 1px solid rgba(99,102,241,0.30); border-radius: 12px; animation: pcb-msg-in .25s ease-out both; } .pcb-xdan-autopicks .head { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--pcb-text); margin-bottom: .5rem; } .pcb-xdan-autopicks .head i { color: var(--pcb-accent); font-size: 1rem; } .pcb-xdan-autopicks .head .muted { color: rgba(148,163,184,0.85); font-size: .7rem; margin-left: auto; font-weight: 500; } .pcb-xdan-autopicks .list { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-direction: column; gap: .25rem; } .pcb-xdan-autopicks .list li { display: flex; gap: .55rem; align-items: baseline; padding: .35rem .5rem; background: rgba(0,0,0,0.18); border-radius: 8px; font-size: .72rem; } .pcb-xdan-autopicks .list .cat { width: 70px; flex-shrink: 0; font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pcb-accent); font-weight: 700; } .pcb-xdan-autopicks .list .part { color: var(--pcb-text); font-weight: 600; line-height: 1.25; } .pcb-xdan-autopicks .actions { display: flex; justify-content: flex-end; } .pcb-xdan-autopicks .btn-apply { height: 32px; padding: 0 .9rem; border-radius: 999px; background: var(--pcb-accent); color: #0a1322; border: 0; font-weight: 700; font-size: .72rem; cursor: pointer; } .pcb-xdan-autopicks .btn-apply:hover { filter: brightness(1.08); } .pcb-xdan-autopicks .btn-apply:disabled { background: rgba(10,179,156,0.4); color: rgba(255,255,255,0.85); cursor: default; } .pcb-xdan-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--pcb-card-border); align-items: stretch; } .pcb-xdan-form input { flex: 1; min-width: 0; padding: .65rem .8rem; background: rgba(255,255,255,0.03); border: 1px solid var(--pcb-card-border); border-radius: 10px; color: var(--pcb-text); font-size: .85rem; font-family: 'Sora', sans-serif; height: 44px; } .pcb-xdan-form input::placeholder { color: rgba(148,163,184,0.6); } .pcb-xdan-form input:focus { outline: none; border-color: var(--pcb-accent); } /* Send button — high specificity + explicit colors so global button styles from styles.css can't override / hide it. */ .pcb-xdan-form .pcb-xdan-send { width: 44px !important; height: 44px !important; min-width: 44px; padding: 0 !important; background: linear-gradient(135deg, #cffe25 0%, #a3e21d 100%) !important; color: #0a1322 !important; border: 1px solid rgba(207,254,37,0.45) !important; border-radius: 10px !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; font-size: 20px; line-height: 1; flex-shrink: 0; box-shadow: 0 4px 12px rgba(207,254,37,0.30); transition: transform .15s, box-shadow .15s, background .15s; } .pcb-xdan-form .pcb-xdan-send:hover { background: linear-gradient(135deg, #d8ff3a 0%, #b6f520 100%) !important; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(207,254,37,0.45); } .pcb-xdan-form .pcb-xdan-send:active { transform: translateY(0); } .pcb-xdan-form .pcb-xdan-send i { font-size: 20px; line-height: 1; color: #0a1322; } .pcb-xdan-form .pcb-xdan-send:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ---------- Estimate modal ---------- */ .pcb-modal { position: fixed; inset: 0; z-index: 200; background: rgba(6, 8, 13, 0.82); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: pcb-modal-in .25s ease-out; overflow-y: auto; } .pcb-modal[hidden] { display: none; } @keyframes pcb-modal-in { from { opacity: 0; } to { opacity: 1; } } .pcb-modal-card { position: relative; width: 100%; max-width: 540px; background: var(--pcb-bg-surface); border: 1px solid var(--pcb-card-border-strong); border-radius: 16px; padding: 2rem; max-height: 90vh; overflow-y: auto; } .pcb-modal-close { position: absolute; top: .75rem; right: .75rem; width: 36px; height: 36px; background: rgba(255,255,255,0.05); border: none; border-radius: 8px; color: var(--pcb-text-mute); cursor: pointer; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; } .pcb-modal-close:hover { color: var(--pcb-text); background: rgba(255,255,255,0.10); } .pcb-modal-card h2 { font: 700 1.4rem/1.2 'Sora', sans-serif; margin: 0 0 .35rem; color: var(--pcb-text); } .pcb-modal-intro { color: var(--pcb-text-mute); font-size: .9rem; margin: 0 0 1.5rem; } /* Estimate disclaimer above the Step-4 breakdown. Amber-tinted so it reads as "important but not an error" — green would imply success and red would scare the customer. The whole block is a single info notice, NOT a dismissible toast — operator wants this guaranteed visible every time. */ .pcb-estimate-notice { display: flex; gap: .65rem; align-items: flex-start; padding: .85rem 1rem; margin: 0 0 1.25rem; background: linear-gradient(135deg, rgba(245,158,11,0.13), rgba(245,158,11,0.05)); border: 1px solid rgba(245,158,11,0.40); border-left: 3px solid #f59e0b; border-radius: 10px; color: #fde68a; font-size: .82rem; line-height: 1.45; } .pcb-estimate-notice i { font-size: 18px; color: #f59e0b; flex-shrink: 0; line-height: 1.3; margin-top: 1px; } .pcb-estimate-notice strong { display: block; color: #fff; font-weight: 700; margin-bottom: .15rem; } /* Estimate-modal form fields. These used to be keyed off `#pcb-step1-form` / `#pcb-step2-form` — IDs that DO NOT EXIST in the markup (the real forms are `#pcb-quote-step1..3`, class `.pcb-quote-step-pane`). So none of this ever applied: the modal's inputs rendered as raw browser-default white boxes on the dark card, which is the "los input fields lo rompen" the operator reported. Now scoped to `.pcb-quote-step-pane` so it covers every step, with `:not()` guards so the consent box, fulfillment/payment cards, and the honeypot keep their own layouts. */ .pcb-quote-step-pane label:not(.pcb-quote-consent):not(.pcb-fulfillment-card):not(.pcb-honeypot) { display: block; margin-bottom: .85rem; } .pcb-quote-step-pane label:not(.pcb-quote-consent):not(.pcb-fulfillment-card):not(.pcb-honeypot) > span { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .4rem; color: var(--pcb-text-mute); } .pcb-quote-step-pane label:not(.pcb-quote-consent):not(.pcb-fulfillment-card):not(.pcb-honeypot) > span small { font-weight: 500; color: var(--pcb-text-mute); opacity: .8; } .pcb-quote-step-pane input[type="text"], .pcb-quote-step-pane input[type="email"], .pcb-quote-step-pane input[type="tel"], .pcb-quote-step-pane input[type="number"], .pcb-quote-step-pane input:not([type]), .pcb-quote-step-pane textarea { width: 100%; box-sizing: border-box; padding: .7rem .85rem; background: rgba(255,255,255,0.03); border: 1px solid var(--pcb-card-border); border-radius: 8px; color: var(--pcb-text); font-family: 'Sora', sans-serif; font-size: .9rem; transition: border-color .15s ease, box-shadow .15s ease; } .pcb-quote-step-pane textarea { resize: vertical; min-height: 72px; } .pcb-quote-step-pane input[type="text"]:focus, .pcb-quote-step-pane input[type="email"]:focus, .pcb-quote-step-pane input[type="tel"]:focus, .pcb-quote-step-pane input[type="number"]:focus, .pcb-quote-step-pane input:not([type]):focus, .pcb-quote-step-pane textarea:focus { outline: none; border-color: var(--pcb-accent); box-shadow: 0 0 0 3px rgba(207,254,37,0.12); } .pcb-quote-step-pane input::placeholder, .pcb-quote-step-pane textarea::placeholder { color: var(--pcb-text-mute); opacity: .55; } .pcb-link-btn { background: none; border: none; padding: 0; color: var(--pcb-accent); text-decoration: underline; font: inherit; cursor: pointer; display: inline; margin-left: .25rem; } .pcb-link-btn:hover { color: #b3e220; } .pcb-honeypot { position: absolute; left: -10000px; opacity: 0; pointer-events: none; height: 0; overflow: hidden; } .pcb-form-note { margin: .75rem 0 0; font-size: .82rem; text-align: center; } .pcb-form-note.success { color: var(--pcb-good); } .pcb-form-note.error { color: var(--pcb-bad); } /* ---------- Fulfillment radio cards (pickup vs delivery) ---------- */ .pcb-fulfillment-options { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; } .pcb-fulfillment-card { position: relative; display: block; margin: 0 !important; cursor: pointer; border-radius: 12px; transition: transform .15s ease; } .pcb-fulfillment-card input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .pcb-fulfillment-card-inner { display: grid; grid-template-columns: 36px 1fr auto; gap: .65rem; align-items: center; padding: .8rem .85rem; border: 1px solid var(--pcb-card-border); border-radius: 12px; background: rgba(255,255,255,0.03); transition: border-color .15s, background .15s, box-shadow .15s; } .pcb-fulfillment-card:hover .pcb-fulfillment-card-inner { border-color: rgba(207,254,37,0.35); background: rgba(207,254,37,0.05); } .pcb-fulfillment-card input:checked ~ .pcb-fulfillment-card-inner { border-color: var(--pcb-accent); background: rgba(207,254,37,0.10); box-shadow: 0 0 0 2px rgba(207,254,37,0.20); } .pcb-fulfillment-card input:focus-visible ~ .pcb-fulfillment-card-inner { outline: 2px solid var(--pcb-accent); outline-offset: 2px; } .pcb-fulfillment-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(207,254,37,0.10); border: 1px solid var(--pcb-card-border); color: var(--pcb-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .pcb-fulfillment-card input:checked ~ .pcb-fulfillment-card-inner .pcb-fulfillment-icon { background: var(--pcb-accent); color: var(--pcb-accent-ink); border-color: var(--pcb-accent); } .pcb-fulfillment-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pcb-fulfillment-text strong { font: 700 .9rem 'Sora', sans-serif; color: var(--pcb-text); line-height: 1.1; } .pcb-fulfillment-text em { font: 500 .72rem 'Sora', sans-serif; color: var(--pcb-text-mute); font-style: normal; line-height: 1.1; } .pcb-fulfillment-price { font: 700 .82rem 'JetBrains Mono', monospace; color: var(--pcb-text); flex-shrink: 0; } .pcb-fulfillment-card input:checked ~ .pcb-fulfillment-card-inner .pcb-fulfillment-price { color: var(--pcb-accent); } @media (max-width: 480px) { .pcb-fulfillment-options { grid-template-columns: 1fr; } } /* ---------- Quote flow modal (4-step estimate) ---------- */ .pcb-quote-modal-card { max-width: min(94vw, 620px) !important; max-height: 92vh; overflow-y: auto; } .pcb-quote-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--pcb-card-border); } .pcb-quote-step { display: flex; flex-direction: column; align-items: center; gap: .35rem; position: relative; } .pcb-quote-step::before { content: ""; position: absolute; top: 14px; left: -50%; right: 50%; height: 2px; background: var(--pcb-card-border); z-index: 0; } .pcb-quote-step:first-child::before { display: none; } .pcb-quote-step .num { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(20,20,27,1); border: 2px solid var(--pcb-card-border); color: var(--pcb-text-mute); font: 700 .82rem 'JetBrains Mono', monospace; transition: all .25s ease; } .pcb-quote-step .lbl { font: 700 .62rem 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--pcb-text-mute); } .pcb-quote-step[data-state="active"] .num { border-color: var(--pcb-accent); color: var(--pcb-accent); background: rgba(207,254,37,0.10); } .pcb-quote-step[data-state="active"] .lbl { color: var(--pcb-accent); } .pcb-quote-step[data-state="done"] .num { background: var(--pcb-accent); border-color: var(--pcb-accent); color: var(--pcb-accent-ink); } .pcb-quote-step[data-state="done"] .num::before { content: "✓"; } .pcb-quote-step[data-state="done"] .num span, .pcb-quote-step[data-state="done"] .num { font-size: 0; } .pcb-quote-step[data-state="done"] .num::before { font-size: 14px; font-weight: 800; } .pcb-quote-step-pane { display: none; } .pcb-quote-step-pane.pcb-quote-step-active { display: block; } .pcb-quote-step-pane h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .55rem; color: var(--pcb-text); } .pcb-quote-consent { display: flex; align-items: flex-start; gap: .55rem; margin: .85rem 0 !important; padding: .75rem .9rem; background: rgba(255,255,255,0.025); border: 1px solid var(--pcb-card-border); border-radius: 8px; font-size: .82rem; color: var(--pcb-text); cursor: pointer; } .pcb-quote-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; } .pcb-quote-captcha { margin: 1rem 0; padding: .85rem; background: rgba(255,255,255,0.025); border: 1px solid var(--pcb-card-border); border-radius: 8px; text-align: center; } .pcb-quote-captcha[data-state="skipped"] { display: none; } .pcb-quote-captcha-hint { margin: .55rem 0 0; font-size: .76rem; color: var(--pcb-text-mute); } .pcb-quote-captcha[data-state="ready"] .pcb-quote-captcha-hint { color: var(--pcb-accent); } .pcb-quote-captcha[data-state="error"] .pcb-quote-captcha-hint { color: #ef4444; } /* Email-code verification (replaces the captcha) */ .pcb-quote-emailverify { margin: 1rem 0; padding: .85rem; background: rgba(255,255,255,0.025); border: 1px solid var(--pcb-card-border); border-radius: 8px; } .pcb-quote-emailverify[data-state="disabled"] { display: none; } .pcb-emailverify-send { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem 1rem; background: rgba(207,254,37,0.10); color: var(--pcb-accent); border: 1px solid rgba(207,254,37,0.35); border-radius: 8px; font: 700 .9rem 'Sora', sans-serif; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .pcb-emailverify-send:hover:not(:disabled) { background: var(--pcb-accent); color: var(--pcb-accent-ink); } .pcb-emailverify-send:disabled { opacity: .6; cursor: progress; } .pcb-emailverify-code { margin-top: .85rem; } .pcb-emailverify-code label { display: flex; flex-direction: column; gap: .35rem; } .pcb-emailverify-code label > span { font-size: .8rem; color: var(--pcb-text-mute); } .pcb-emailverify-code input { width: 100%; padding: .65rem .8rem; background: rgba(0,0,0,0.35); border: 1px solid var(--pcb-card-border); border-radius: 8px; color: #fff; font: 700 1.15rem 'JetBrains Mono', monospace; letter-spacing: .35em; text-align: center; } .pcb-emailverify-code input:focus { outline: none; border-color: var(--pcb-accent); box-shadow: 0 0 0 3px rgba(207,254,37,0.18); } .pcb-emailverify-resend { margin-top: .5rem; background: none; border: 0; color: var(--pcb-text-mute); font-size: .76rem; text-decoration: underline; cursor: pointer; } .pcb-emailverify-resend:hover { color: var(--pcb-accent); } #pcb-emailverify-hint { margin: .55rem 0 0; font-size: .76rem; color: var(--pcb-text-mute); } #pcb-emailverify-hint[data-kind="success"] { color: var(--pcb-accent); } #pcb-emailverify-hint[data-kind="error"] { color: #ef4444; } .pcb-quote-ship-fields { margin-top: 1rem; padding: 1rem; border: 1px solid var(--pcb-card-border); border-radius: 8px; background: rgba(255,255,255,0.02); } .pcb-quote-ship-fields legend { font: 700 .68rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--pcb-text-mute); padding: 0 .55rem; margin-left: -.25rem; width: auto; } .pcb-quote-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; } .pcb-quote-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .65rem; } @media (max-width: 540px) { .pcb-quote-grid-2, .pcb-quote-grid-3 { grid-template-columns: 1fr; } } .pcb-quote-payment-options { display: flex; flex-direction: column; gap: .55rem; margin: .85rem 0 1.25rem; } .pcb-quote-financing-group { display: flex; flex-direction: column; gap: .55rem; } .pcb-quote-actions { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-top: 1.5rem; } .pcb-quote-actions .pcb-cta { flex: 1; } /* Final breakdown — clean invoice-style block. */ .pcb-quote-breakdown { margin: 1rem 0; padding: 1.2rem 1.4rem; background: radial-gradient(circle at 100% 0%, rgba(207,254,37,0.08), transparent 60%), rgba(20,20,27,0.85); border: 1px solid var(--pcb-card-border-strong); border-radius: 12px; } .pcb-quote-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; font-size: .92rem; color: var(--pcb-text); font-variant-numeric: tabular-nums; } .pcb-quote-row .muted { color: var(--pcb-text-mute); } .pcb-quote-row--total { margin-top: .55rem; padding-top: 1rem; border-top: 1px solid var(--pcb-card-border-strong); font-size: 1.1rem; font-weight: 800; color: #fff; } .pcb-quote-row--total span:last-child { color: var(--pcb-accent); font-size: 1.6rem; font-weight: 900; } .pcb-quote-done-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: rgba(207,254,37,0.15); border-radius: 50%; margin: 0 auto 1rem; color: var(--pcb-accent); font-size: 32px; } /* ---------- Comparison mode ---------- Floating tray + modal. Tray sits bottom-center while at least one part is ticked; modal opens with side-by-side specs. The "compare" button on each card is a small icon next to the Add CTA. */ /* Compare-toggle. We float it in the top-right of the product thumb so it doesn't compete with the bottom CTA for horizontal space. The thumb is position:relative (set in .pcb-part-card-thumb) so this absolute placement targets it. Background is glassy so it remains visible on both dark and light-product images. */ .pcb-part-compare-btn { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 7px; background: rgba(8,9,13,0.72); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.18); color: var(--pcb-text-mute); cursor: pointer; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; z-index: 2; } .pcb-part-compare-btn:hover { background: rgba(207,254,37,0.18); border-color: rgba(207,254,37,0.50); color: var(--pcb-accent); transform: scale(1.05); } .pcb-part-compare-btn.is-active { background: var(--pcb-accent); border-color: var(--pcb-accent); color: var(--pcb-accent-ink); } /* Thumb needs position:relative so the inline compare-btn's absolute anchoring (and any future overlay) resolves against it. */ .pcb-part-card-thumb { position: relative; } .pcb-compare-tray { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: .5rem; padding: .55rem .65rem; background: linear-gradient(180deg, rgba(20,20,27,0.96), rgba(8,9,13,0.98)); border: 1px solid var(--pcb-card-border-strong); border-radius: 999px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); max-width: calc(100vw - 32px); } /* Below 1280px the bottom-centre summary launcher pill is visible and ALSO anchored bottom:24px left:50% — the two collided dead-centre. Lift the compare tray above it in this range. */ @media (max-width: 1279px) { .pcb-compare-tray { bottom: 92px; } } .pcb-compare-tray-list { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; } .pcb-compare-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; background: rgba(255,255,255,0.04); border: 1px solid var(--pcb-card-border); border-radius: 999px; flex-shrink: 0; } .pcb-compare-chip img { border-radius: 4px; object-fit: contain; background: rgba(255,255,255,0.05); padding: 1px; } .pcb-compare-chip-name { font-size: .76rem; color: var(--pcb-text); white-space: nowrap; } .pcb-compare-chip-x { background: none; border: none; color: var(--pcb-text-mute); cursor: pointer; padding: 2px; display: inline-flex; align-items: center; justify-content: center; } .pcb-compare-chip-x:hover { color: #ef4444; } .pcb-compare-tray-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 1rem; background: var(--pcb-accent); color: var(--pcb-accent-ink); border: none; border-radius: 999px; font: 700 .82rem 'Sora', sans-serif; cursor: pointer; transition: opacity .15s, transform .15s; } .pcb-compare-tray-btn:disabled { opacity: .4; cursor: not-allowed; } .pcb-compare-tray-btn:hover:not(:disabled) { transform: translateY(-1px); } .pcb-compare-tray-clear { background: rgba(255,255,255,0.04); border: 1px solid var(--pcb-card-border); color: var(--pcb-text-mute); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .pcb-compare-tray-clear:hover { color: #ef4444; border-color: rgba(239,68,68,0.40); } .pcb-compare-modal-card { max-width: min(95vw, 1100px) !important; max-height: 90vh; overflow-y: auto; } .pcb-compare-grid { margin-top: 1rem; } .pcb-compare-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .pcb-compare-card { background: rgba(255,255,255,0.025); border: 1px solid var(--pcb-card-border); border-radius: 12px; padding: 1rem; text-align: center; display: flex; flex-direction: column; gap: .55rem; } .pcb-compare-card-thumb { height: 120px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border-radius: 8px; padding: 8px; } .pcb-compare-card-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .pcb-compare-card-name { font: 700 .92rem 'Sora', sans-serif; color: var(--pcb-text); line-height: 1.3; } .pcb-compare-card-brand { font-size: .76rem; color: var(--pcb-text-mute); } .pcb-compare-pick-btn { margin-top: auto; padding: .5rem .85rem; background: var(--pcb-accent); color: var(--pcb-accent-ink); border: none; border-radius: 999px; font: 700 .8rem 'Sora', sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; transition: transform .15s; } .pcb-compare-pick-btn:hover { transform: translateY(-1px); } .pcb-compare-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .pcb-compare-table th, .pcb-compare-table td { padding: .65rem .85rem; border-top: 1px solid var(--pcb-card-border); text-align: left; } .pcb-compare-table th { font: 700 .72rem 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--pcb-text-mute); width: 22%; background: rgba(0,0,0,0.20); } .pcb-compare-table tr.is-varying td { background: rgba(207,254,37,0.05); color: var(--pcb-accent); font-weight: 700; } /* Section dividers — group spec rows under a tinted header so a 60-row compare table stays scannable. The header spans the full row using colspan, so we suppress the inherited "width: 22%" rule from .pcb-compare-table th by targeting the section-row th specifically. */ .pcb-compare-table tr.pcb-compare-section th { width: auto; background: linear-gradient(90deg, rgba(207,254,37,0.18), rgba(207,254,37,0.04)); color: var(--pcb-accent); font: 700 .68rem 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: .55rem .85rem; border-top: 2px solid var(--pcb-accent); border-bottom: 1px solid var(--pcb-card-border); } /* "Key differences" section — sits at the top of the compare table and surfaces the highest-magnitude spec gaps so the customer's eye lands on what actually matters when picking between parts. Stronger visual treatment than a regular section divider: amber-orange tint to distinguish it from the lime-green sections, slightly larger header font, and key-diff rows get a tinted left-border so they read as "marked for attention". */ .pcb-compare-table tr.pcb-compare-section--key th { background: linear-gradient(90deg, rgba(245,158,11,0.22), rgba(245,158,11,0.04)); color: #fcd34d; border-top: 2px solid #f59e0b; font-size: .75rem; } .pcb-compare-table tr.is-key-diff th, .pcb-compare-table tr.is-key-diff td { background: rgba(245,158,11,0.06); } .pcb-compare-table tr.is-key-diff th { border-left: 3px solid #f59e0b; color: #fcd34d; font-weight: 800; } .pcb-compare-table tr.is-key-diff td { color: var(--pcb-text); font-weight: 700; } @media (max-width: 540px) { /* bottom stays at the 1279px lift (92px) so it clears the summary launcher pill — only the inner padding/gap tighten on phones. */ .pcb-compare-tray { padding: .4rem .5rem; gap: .35rem; } .pcb-compare-tray-btn { padding: .4rem .7rem; font-size: .76rem; } .pcb-compare-table { font-size: .76rem; } .pcb-compare-table th, .pcb-compare-table td { padding: .5rem .55rem; } } /* ================================================================= RESPONSIVE TIERS — single source of truth for the 4-breakpoint rhythm the configurator targets. Specific component-level rules live next to those components (search for @media); this block is for layout-level defaults + landscape-orientation tweaks. ================================================================= Tier | Width range | Layout notes --------- | ------------------------------ | ------------------------------------- large | > 1440px | 3-column: rail + stage + summary medium | 768-1440px | 2-column: rail + stage; summary becomes drawer small | 480-768px | 1-column stack; rail collapses to chips mobile | < 480px | Same stack, denser; wizard wraps to 4-cols-x-2-rows landscape | any with orientation:landscape | Trims top/bottom padding, hides hero text fluff ================================================================= */ /* MEDIUM: 768-1180px — sticky summary panel converts to a drawer. */ @media (max-width: 1180px) and (min-width: 768px) { .pcb-summary-widgets { padding: .65rem .65rem .25rem; } .pcb-summary-widget { padding: .6rem .7rem; } } /* SMALL: 480-768px — single-column stack. */ @media (max-width: 768px) and (min-width: 480px) { .pcb-fps-gauges { grid-template-columns: repeat(3, 1fr); } } /* MOBILE: < 480px — densest layout. */ @media (max-width: 479px) { .pcb-fps-gauges { gap: .35rem; } .pcb-fps-gauge { padding: .4rem .35rem; } .pcb-fps-gauge-num { font-size: .92rem; } .pcb-power-stats { gap: .3rem; } } /* LANDSCAPE: phone-in-landscape — trim studio header so the parts grid gets to the user's thumbs faster. */ @media (orientation: landscape) and (max-height: 540px) { .pcb-studio-head { padding: .55rem 0 .45rem; } .pcb-studio-title h1 { font-size: 1.1rem; } .pcb-studio-meta { display: none; } } /* Container is fixed at 1320px so we don't need a >2160 stretch variant — the configurator stays centered within the same envelope as the navbar regardless of monitor size. */