@import url('/brand.css');
/* UV Spot Shop — premium theme layer.
* Loaded AFTER responsive.css. Adds depth, warmth, motion and refined
* typography on top of the layout. Selectors target the React-normalised
* rendered inline-style format (hex → rgb(), 'a:b' spacing, 'x, y' commas).
* The design tokens + component classes live in brand.css (imported above);
* this file is the applied theme on top of them.
* Goal: make a flat design-tool mock feel like a living storefront. */
:root {
--uv-violet: #5b2b9e;
--uv-violet-d: #43206f;
--uv-teal: #0e9488;
--uv-teal-d: #0b7a70;
--uv-ink: #1b1524;
--uv-shadow-sm: 0 1px 2px rgba(27,21,36,.06), 0 1px 3px rgba(27,21,36,.05);
--uv-shadow-md: 0 2px 6px rgba(27,21,36,.06), 0 8px 22px rgba(27,21,36,.09);
--uv-shadow-lg: 0 6px 16px rgba(27,21,36,.08), 0 22px 48px rgba(27,21,36,.14);
--uv-shadow-violet: 0 10px 30px rgba(91,43,158,.20);
--uv-shadow-teal: 0 8px 22px rgba(14,148,136,.28);
}
/* ---------- Base ---------- */
* { -webkit-tap-highlight-color: transparent; }
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: rgba(91,43,158,.16); }
/* Smooth, purposeful motion on the whole interactive surface */
a, span[style*="cursor: pointer"], button,
div[style*="cursor: pointer"], input, textarea, select,
img, [style*="border-radius"] {
transition: color .18s ease, background-color .2s ease, border-color .2s ease,
box-shadow .25s ease, transform .2s cubic-bezier(.2,.7,.3,1),
opacity .2s ease;
}
/* ---------- Page backdrop ----------
Desktop canvas is set by the refinement layer (flat #f4f5f7); mobile
white comes from responsive.css. Container shadow is desktop-only so
the mobile "full-bleed, no shadow" rules can win. */
@media (min-width: 801px) {
div[style*="max-width: 1240px"][style*="box-shadow"] {
box-shadow: 0 0 0 1px rgba(27,21,36,.03), 0 18px 60px rgba(27,21,36,.07) !important;
}
}
/* ---------- Utility bar: subtle top sheen ---------- */
div[style*="background: rgb(27, 21, 36)"][style*="color: rgb(184, 196, 207)"] {
background: linear-gradient(180deg, #241c30, #1b1524) !important;
border-bottom: 1px solid rgba(255,255,255,.04);
}
/* ---------- Category nav: depth + animated hover underline ---------- */
div[style*="background: rgb(91, 43, 158)"][style*="display: flex"] {
background: linear-gradient(180deg, #6231a8, #5b2b9e) !important;
box-shadow: 0 3px 12px rgba(91,43,158,.28);
}
div[style*="background: rgb(91, 43, 158)"] a,
div[style*="background: rgb(91, 43, 158)"] > div > span {
position: relative;
}
/* nav hover: soft raise */
div[style*="background: rgb(91, 43, 158)"] a:hover {
background: rgba(255,255,255,.10) !important;
}
/* ---------- Buttons: teal CTAs — flat, modern, no bevel ----------
:not([style*="position: absolute"]) keeps the static "IN STOCK" photo
badges (also teal) from getting button hover behavior. */
a[style*="background: rgb(14, 148, 136)"]:not([style*="position: absolute"]),
span[style*="background: rgb(14, 148, 136)"]:not([style*="position: absolute"]) {
background: linear-gradient(180deg, #12a99b, #0e9488) !important;
box-shadow: 0 2px 8px rgba(14,148,136,.24) !important;
}
a[style*="background: rgb(14, 148, 136)"]:not([style*="position: absolute"]):hover,
span[style*="background: rgb(14, 148, 136)"]:not([style*="position: absolute"]):hover {
background: linear-gradient(180deg, #0e9488, #0b7a70) !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(14,148,136,.30) !important;
}
a[style*="background: rgb(14, 148, 136)"]:not([style*="position: absolute"]):active,
span[style*="background: rgb(14, 148, 136)"]:not([style*="position: absolute"]):active { transform: translateY(1px); }
/* Violet search button */
span[style*="background: rgb(91, 43, 158)"][style*="cursor: pointer"] {
background: linear-gradient(180deg, #6633ad, #5b2b9e) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}
span[style*="background: rgb(91, 43, 158)"][style*="cursor: pointer"]:hover {
background: linear-gradient(180deg, #5b2b9e, #43206f) !important;
}
/* Outline / secondary buttons: crisper */
a[style*="border: 1.5px solid rgb(91, 43, 158)"]:hover {
background: #f5f1fd !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(91,43,158,.14) !important;
}
/* ---------- Cards & surfaces: elevation + hover lift ---------- */
/* Generic hairline card */
div[style*="border: 1px solid rgb(223, 228, 232)"],
div[style*="border: 1px solid rgb(230, 233, 237)"],
div[style*="border: 1px solid rgb(227, 232, 236)"] {
box-shadow: var(--uv-shadow-sm);
}
/* Product result cards (search + listings): tactile lift */
a[style*="grid-template-columns: 160px 1fr 132px"]:hover,
a[style*="grid-template-columns: 160px 1fr 150px"]:hover {
transform: translateY(-3px);
box-shadow: var(--uv-shadow-lg) !important;
border-color: #cdbdf0 !important;
}
/* Hero product card on home */
a[style*="box-shadow: rgba(18, 33, 47"]:hover {
transform: translateY(-3px);
box-shadow: var(--uv-shadow-violet) !important;
}
/* Product imagery: subtle zoom on card hover */
a:hover > div > img,
a:hover img[alt="SunSpot 2"],
a:hover img[alt="SkyBeam"] { transform: scale(1.04); }
/* ---------- Section rhythm: hero gradient + soft dividers ---------- */
div[style*="linear-gradient(rgb(243, 238, 251)"],
div[style*="linear-gradient(180deg, rgb(243, 238, 251)"] {
background:
radial-gradient(680px 320px at 82% 20%, rgba(14,148,136,.08), transparent 70%),
linear-gradient(180deg, #f4eefc 0%, #fbf9ff 100%) !important;
}
/* Alt sections get a faint tint instead of flat grey */
div[style*="background: rgb(247, 249, 251)"] {
background: linear-gradient(180deg, #f7f9fb, #f2f5f8) !important;
}
/* ---------- Comparison table (desktop): premium rows ---------- */
table.uvshop-cardify thead tr {
background: linear-gradient(180deg, #241c30, #1b1524) !important;
}
@media (min-width: 801px) {
table.uvshop-cardify tbody tr {
transition: background-color .18s ease, box-shadow .2s ease;
}
table.uvshop-cardify tbody tr:hover {
background: #f6f1fc !important;
box-shadow: inset 3px 0 0 var(--uv-violet);
}
/* image cell frame */
table.uvshop-cardify td:first-child img { border-radius: 4px; }
}
/* ---------- "How it works" number tiles: brand accent ---------- */
div[style*="border-top: 3px solid rgb(91, 43, 158)"]:hover,
div[style*="border-top: 3px solid rgb(14, 148, 136)"]:hover {
transform: translateY(-3px);
box-shadow: var(--uv-shadow-md) !important;
}
/* ---------- Inputs: premium focus ---------- */
input:focus, textarea:focus, select:focus {
box-shadow: 0 0 0 3px rgba(91,43,158,.14) !important;
}
/* ---------- Scrollbar (desktop) ---------- */
@media (min-width: 801px) {
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
background: #c9cdd4; border-radius: 8px; border: 3px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #a9aeb8; background-clip: padding-box; }
}
/* =====================================================================
MOBILE (≤800px): premium product cards + fixed trust strip
===================================================================== */
@media (max-width: 800px) {
/* ---- Fix the trust strip: keep it 3-across, compact (don't stack) ---- */
div[style*="grid-template-columns: repeat(3, 1fr)"][style*="border-radius: 12px"] {
grid-template-columns: repeat(3, 1fr) !important;
gap: 0 !important;
}
div[style*="grid-template-columns: repeat(3, 1fr)"][style*="border-radius: 12px"] > div {
padding: 14px 6px !important;
}
/* keep the title/subtitle on two lines (the
is intentional) */
div[style*="grid-template-columns: repeat(3, 1fr)"][style*="border-radius: 12px"] > div > div {
line-height: 1.35 !important;
}
/* ---- Rebuild comparison-table rows into REAL product cards ---- */
table.uvshop-cardify tr {
border: 1px solid #e7e2f0 !important;
border-top: 3px solid var(--uv-violet) !important;
border-radius: 14px !important;
padding: 16px 16px 14px !important;
margin-bottom: 16px !important;
box-shadow: var(--uv-shadow-md) !important;
background: linear-gradient(180deg, #ffffff, #fcfbfe) !important;
}
/* image cell: clean tinted panel, single frame, generous product image */
table.uvshop-cardify td:first-child {
background: linear-gradient(180deg, #faf7ff, #ffffff) !important;
border: 1px solid #efeaf8 !important;
border-radius: 12px !important;
padding: 18px 12px !important;
margin-bottom: 14px !important;
text-align: center !important;
}
/* photo thumbnails: strip the tiny 80×60 white frame so the photo shows large */
table.uvshop-cardify td:first-child a {
display: inline-flex !important; align-items: center; justify-content: center;
width: auto !important; height: auto !important; max-width: 100% !important;
border: none !important; background: transparent !important;
box-shadow: none !important; overflow: visible !important; border-radius: 0 !important;
}
table.uvshop-cardify td:first-child img {
width: auto !important; height: 128px !important; max-width: 86% !important;
object-fit: contain !important; display: block;
}
/* stage-tile (dark backdrop + label, no photo): keep the tile, enlarge */
table.uvshop-cardify td:first-child a[style*="product-stage"] {
background: #140f1d url('assets/product-stage.webp') center/cover no-repeat !important;
width: 70% !important; height: 116px !important;
border: 1px solid #2a2140 !important; border-radius: 10px !important;
}
table.uvshop-cardify td:first-child a[style*="product-stage"] span {
font-size: 12px !important;
}
/* MODEL / PART NO. cell → product headline (no label, big name) */
table.uvshop-cardify td[data-label="MODEL / PART NO."] {
display: block !important;
text-align: left !important;
border-bottom: 1px solid #f0ecf8 !important;
padding: 0 0 12px !important;
margin-bottom: 4px !important;
}
table.uvshop-cardify td[data-label="MODEL / PART NO."]::before {
display: none !important;
}
table.uvshop-cardify td[data-label="MODEL / PART NO."] a {
font-family: 'Archivo', Arial, sans-serif !important;
font-size: 21px !important; font-weight: 800 !important;
letter-spacing: -.02em !important; color: var(--uv-ink) !important;
line-height: 1.1 !important; display: block;
}
table.uvshop-cardify td[data-label="MODEL / PART NO."] div {
font-size: 12px !important; color: #8a97a3 !important; margin-top: 3px !important;
}
/* spec rows: refined label/value */
table.uvshop-cardify td[data-label] {
padding: 9px 0 !important;
border-bottom: 1px solid #f4f2f8 !important;
font-size: 13.5px !important;
}
table.uvshop-cardify td[data-label]::before {
font-size: 10px !important; color: #9aa4ae !important; font-weight: 700 !important;
letter-spacing: .07em !important;
}
table.uvshop-cardify td[data-label] {
color: var(--uv-ink) !important; font-weight: 600 !important;
}
/* Get Quote cell → premium full-width button */
table.uvshop-cardify td:last-child {
padding-top: 14px !important; border-bottom: none !important;
}
table.uvshop-cardify td:last-child span,
table.uvshop-cardify td:last-child a {
display: block !important; width: 100% !important;
padding: 14px 0 !important; border-radius: 10px !important;
font-size: 15px !important; font-weight: 700 !important;
background: linear-gradient(180deg, #12a99b, #0e9488) !important;
color: #fff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(14,148,136,.3) !important;
}
/* ---- Result cards (search/listing): tighter, premium ---- */
a[style*="grid-template-columns: 160px 1fr 132px"],
a[style*="grid-template-columns: 160px 1fr 150px"] {
box-shadow: var(--uv-shadow-md) !important;
border-radius: 14px !important;
}
a[style*="grid-template-columns: 160px 1fr"] > div[style*="width: 160px"] {
background: radial-gradient(120% 100% at 50% 0%, #f6f1fc, #fff) !important;
border: 1px solid #eee7f7 !important;
}
/* ---- Hero: image card gets lifted + tighter ---- */
a[style*="box-shadow: rgba(18, 33, 47"] {
box-shadow: var(--uv-shadow-md) !important;
border-radius: 14px !important;
}
/* ---- Section headings: tighter, confident ---- */
h1[style*="font-family: Archivo"] { letter-spacing: -.025em !important; }
h2[style*="font-family: Archivo"] { letter-spacing: -.02em !important; }
/* ---- Feature check row: keep tidy on mobile ---- */
div[style*="gap: 22px"][style*="font-weight: 500"] { gap: 14px 18px !important; }
/* ---- Sticky quote bar: premium ---- */
.uvshop-mobile-sticky-quote {
box-shadow: 0 -8px 30px rgba(27,21,36,.16) !important;
border-top: 1px solid #eee7f7 !important;
}
.uvshop-mobile-sticky-quote a {
background: linear-gradient(180deg, #12a99b, #0e9488) !important;
}
}
/* =====================================================================
FOOTER (DigiKey-class) — id-driven layout so responsive.css attribute
selectors never touch it. Base look is inline; layout lives here.
===================================================================== */
#uvfoot-top { grid-template-columns: 1.4fr 1fr; }
#uvfoot-cols { grid-template-columns: repeat(4, 1fr); }
#uvfoot a[style*="text-decoration: none"] { transition: color .16s ease; }
/* No faded text on dark: every bit of footer copy is white. */
#uvfoot, #uvfoot p, #uvfoot span, #uvfoot div, #uvfoot a { color: #fff !important; }
#uvfoot-email { color: #fff !important; }
#uvfoot-email::placeholder { color: #d6dde4 !important; }
/* Hover affordance only on the link lists / legal — not the CTA buttons */
#uvfoot-cols a:hover, #uvfoot-legal a:hover, #uvfoot-bottom a:hover { text-decoration: underline !important; }
/* Brighten the dark utility bar text too (US-Based Supplier / Sign In / Order Status) */
div[style*="background: rgb(27, 21, 36)"][style*="color: rgb(184, 196, 207)"],
div[style*="background: rgb(27, 21, 36)"][style*="color: rgb(184, 196, 207)"] span {
color: #fff !important;
}
@media (max-width: 900px) {
#uvfoot-top { grid-template-columns: 1fr !important; gap: 30px !important; }
#uvfoot-cols { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 800px) {
#uvfoot-inner { padding: 0 18px !important; }
#uvfoot-cta { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
#uvfoot-cta > div:last-child { display: flex !important; width: 100% !important; }
#uvfoot-cta > div:last-child a { flex: 1 !important; text-align: center !important; }
#uvfoot-form { max-width: 100% !important; }
#uvfoot-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
}
@media (max-width: 460px) {
#uvfoot-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
}
/* The Support column carries the long-tail links; give it more room and flow
it into two balanced sub-columns on desktop so no single stack runs long. */
@media (min-width: 901px) {
#uvfoot-cols { grid-template-columns: 1fr 1fr 1.9fr 1.2fr; align-items: start; }
#uvfoot-cols > div:nth-child(3) { column-count: 2; column-gap: 26px; }
#uvfoot-cols > div:nth-child(3) > .uvfoot-h { column-span: all; }
#uvfoot-cols > div:nth-child(3) a { break-inside: avoid; }
}
/* Spec tables (label/value, no ) are NOT cardified — keep them as
ordinary full-width tables on mobile so rows read as clean label → value. */
@media (max-width: 800px) {
table:not(.uvshop-cardify) { width: 100% !important; font-size: 12.5px !important; }
table:not(.uvshop-cardify) td { word-break: break-word; }
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition: none !important; animation: none !important;
}
}
/* ============================================================
* 2026 refinement layer — "really subtle" pass.
* Flatter canvas, no bevels, no loud pills, softer hairlines.
* Selectors target the React-normalized inline styles (see header).
* ============================================================ */
/* Calm flat canvas instead of the gradient backdrop (desktop only —
mobile body background is owned by responsive.css) */
@media (min-width: 801px) {
body { background: #f4f5f7 !important; }
}
/* De-bevel every CTA (the inset "ledge" reads 2007) + modern radius.
The [padding] guard limits radius upgrades to real buttons/cards —
image tiles and gallery thumbs (no inline padding) keep their radius;
position:absolute photo badges are excluded from both. */
a[style*="-2px 0px inset"], span[style*="-2px 0px inset"],
a[style*="inset 0 -2px 0"], span[style*="inset 0 -2px 0"] {
box-shadow: 0 1px 2px rgba(27, 21, 36, 0.12) !important;
}
a[style*="border-radius: 3px"][style*="padding"]:not([style*="position: absolute"]),
span[style*="border-radius: 3px"][style*="padding"]:not([style*="position: absolute"]) {
border-radius: 8px !important;
}
div[style*="border-radius: 4px"][style*="padding"],
a[style*="border-radius: 4px"][style*="padding"] {
border-radius: 12px !important;
}
/* Header search: quiet neutral border until focused */
input[placeholder^="Search by keyword"] {
border: 1.5px solid #d9dee4 !important;
border-right: none !important;
border-radius: 8px 0 0 8px !important;
}
input[placeholder^="Search by keyword"]:focus { border-color: #5b2b9e !important; }
input[placeholder^="Search by keyword"] + span,
div input[placeholder^="Search by keyword"] ~ span {
border-radius: 0 8px 8px 0 !important;
}
/* Spec badges on result cards -> quiet inline specs, not pill soup */
span[style*="background: rgb(244, 241, 250)"][style*="border-radius: 6px"] {
background: transparent !important;
border-color: transparent !important;
padding: 2px 0 !important;
margin-right: 10px !important;
color: #5f6b76 !important;
font-weight: 500 !important;
}
/* Category eyebrow pills -> bare uppercase micro-labels */
span[style*="background: rgb(243, 238, 251)"][style*="999px"] {
background: transparent !important;
padding: 0 !important;
letter-spacing: 0.09em !important;
}
/* Display typography: slightly tighter tracking on the big sizes */
h1[style*="font-size: 40px"], h1[style*="font-size: 38px"],
h2[style*="font-size: 26px"] { letter-spacing: -0.02em !important; }
/* Hairlines: warm grey -> cooler, lighter */
div[style*="1px solid rgb(227, 227, 227)"] { border-color: #e9ebef !important; }
/* a11y (WCAG AA): the two muted slate greys fail 4.5:1 on white at small
sizes — darken site-wide; attribute match catches every inline instance */
[style*="color: rgb(138, 151, 163)"] { color: rgb(96, 110, 128) !important; }
[style*="color: rgb(111, 124, 136)"] { color: rgb(96, 110, 128) !important; }
[style*="color: rgb(154, 164, 174)"] { color: rgb(96, 110, 128) !important; }
/* stock-badge green: 3.9:1 -> 6.3:1 at 12px */
[style*="color: rgb(33, 138, 63)"] { color: rgb(23, 111, 48) !important; }
/* brand teal as TEXT on white fails AA at small sizes — darken for text only
(background/gradient teal is untouched: 'background:'/gradients don't contain
the 'color: rgb(14, 148, 136)' substring, so CTAs keep their white-on-teal) */
[style*="color: rgb(14, 148, 136)"] { color: rgb(9, 104, 95) !important; }