/* ============================================================ UNBOX LABS — the SERP's skin. Loaded next to core/css/serp.css, which holds the structure and reads every colour, font and radius from the tokens below. These are the values of the mockup the structure was ported from (page-templates slot `generic-product-page-v8`, draft v5), so this file restores the page to the look it was designed in. Serves unboxlabs.ai and www, which the monolith renders with themes.unboxlabs. beta.unboxlabs.ai is the separate unboxlabs_frontend service and is not affected by anything here. ============================================================ */ /* --testa-h is 76/84px, not 0: this header is sticky, and the sticky filter rail and mobile command strip have to clear it. Price Ninja's header is static, which is why its skin sets 0. */ .serp-pagina { --card: #fff; --greige: #F8F7F4; --superficie: #F1EEE9; --divisore: #EAE5DE; --testo: #353333; --testo-2: #5B5350; --tenue: #736A65; --arancio: #FD7B1A; /* fills */ --azione: #913600; /* text and borders: the fill orange is 2.5:1 and cannot carry text */ --azione-hover: #F26F09; --azione-scuro: #7C2E00; --azione-tenue: #FFF4E6; --prezzo: #EA5200; --etichetta: #2B1200; /* on the orange fills, not white */ --verde: #0B7F50; --rosso: #C5221F; --ombra: 53, 51, 51; --ombra-azione: 145, 54, 0; --anello-fuoco: 253, 123, 26; --bordo-tenue: #E3D6C6; --fondo-tenue: #FFFCF8; --bordo-controllo: #DCD2C6; --bordo-chip-attivo: #F3D9B8; --chip-attivo: 255, 244, 230; --voce-hover: 241, 238, 233; --barra-attiva: #F6D4B4; --barrato: #8A8078; --fondo-sconto: #E7F5EE; --separatore: #C9C0B6; --r-xl: 24px; --r-lg: 16px; --r-md: 12px; --pill: 100px; --testa-h: 76px; --titoli: 'Kanit', system-ui, sans-serif; --testo-font: 'Geist', system-ui, sans-serif; } @media (min-width: 992px) { .serp-pagina { --testa-h: 84px; } } /* The signature gesture: a gradient border that travels round the card on hover. Not the mockup's own technique. That one animated background-position over a linear-gradient sized 320% of the card, so the slice of gradient a card showed depended on the card's own height -- a tall card and a short one looked like two different effects, which is exactly what was reported. A conic gradient rotated through a registered angle is the same look and is independent of the box, so every card runs the identical animation. Where @property is unsupported the angle does not animate and the border shows as a static gradient: the affordance survives, the motion does not. */ @property --giro { syntax: ''; initial-value: 0deg; inherits: false; } @media (hover: hover) and (min-width: 992px) { .serp-pagina .scheda::before { content: ''; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .18s ease; /* Repeating, and three turns of it: a conic gradient is uniform in ANGLE, but a tall card spreads those angles unevenly along its perimeter -- the left and right edges cover a narrow slice, the top and bottom a wide one -- so the same gradient read as a different effect on every card shape. Repeating it puts the whole scale on every edge whatever the card's proportions. */ background: repeating-conic-gradient(from var(--giro), #FFC294 0deg, #FD7B1A 30deg, #FF5F00 60deg, #913600 90deg, #FF5F00 120deg, #FD7B1A 150deg, #FFC294 180deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .serp-pagina .scheda:hover::before { opacity: 1; animation: ubl-giro 3.4s linear infinite; } } @keyframes ubl-giro { to { --giro: 360deg; } } /* The mockup also lifted the card by 2px on hover. That is deliberately NOT restored: a transform makes the card a new stacking context, which changes the blending group of the photo (.vetrina img is mix-blend-mode: multiply) at the exact moment the pointer arrives, and the picture visibly snaps. It is the defect reported on 8 September. The border alone touches no compositing. */ @media (prefers-reduced-motion: reduce) { .serp-pagina .scheda:hover::before { animation: none; } } /* The page ground. It cannot live in the structure with the other tokens: they are declared on .serp-pagina, and body is its parent, so the variable is out of scope there. Without it the theme's own #FFF8DC -- the old Price Ninja yellow -- shows above and below the results. */ /* !important because the theme sets `body{background-color:#fff8dc !important}` -- the old Price Ninja yellow. This is one of the two global exceptions the mockup's own notes declared, and it is still the only way past that declaration. */ body:has(.serp-pagina) { background-color: #F8F7F4 !important; } /* The price has to read as the price, and Kanit 500 is also the title's weight -- at the mockup's setting the two differed only in size. 800 separates them but reads too heavy, and there is no middle: this Kanit is STATIC (300/400/500/800/900), so 600 and 700 are not faces and a browser asked for either renders 800 anyway. The emphasis therefore comes from size and tracking, not weight: the title's 500, two points larger than the mockup, tighter. A real 600 would mean adding it to `static_weights` in scripts/build_web_font_subsets.py and regenerating the inlined @font-face block -- one more file on every page that inlines it. */ .serp-pagina .cifra { font-weight: 500; font-size: clamp(23px, 1.7vw, 26px); letter-spacing: -.02em; } /* UnBox Labs keeps the plain rule, as its own product page does: v9 hides the swoosh and the star and sets text-decoration back on .offer-original. */ .serp-pagina .barrato { text-decoration: line-through; text-decoration-thickness: 1.5px; }