/* ============================================================ Range showcase — tpl-showcase.php. One screen per product: overview card left, feature card right. The panel between them holds the gallery of the product hero (large frame + thumb column) and, on a button, the tilt/swivel scene. Blue #01abea is the Blaupunkt colour. After the range comes Soon — products not in it yet, laid out flat and two to a screen, with no panel and no scenes. Its block sits below the cover-screen rules. Isolation, the same rules as ud_product: - every class carries the uds- prefix. The inherited layer still loads the whole of Bootstrap, and it owns .card, .lead, .nav — without the prefix its rules leak into these cards. - no top-level selectors: everything is nested under .ud-showcase. The one exception is html.uds-on, which carries scroll-snap for the page scroller and is set by the script on this page only. What animates the stand diagrams is not here: see css/ud-stand-scene.css, shared with the product page. ============================================================ */ /* Nothing global: box-sizing stays inside the showcase, and scroll-snap sits on only while the showcase is on screen (the class is set by JS). */ .ud-showcase,.ud-showcase *,.ud-showcase *::before,.ud-showcase *::after{box-sizing:border-box} html.uds-on{scroll-behavior:smooth;scroll-snap-type:y proximity} .ud-showcase{ --blue:#01abea; --tan:#CDAA7D; --dim:rgba(255,255,255,.72); --dimmer:rgba(255,255,255,.5); --line:rgba(255,255,255,.14); --ease:cubic-bezier(.16,1,.3,1); --bg-t:0; --bg-l:9; --head-fs:40; --head-scale:1; /* the pinned name grows on wide screens */ /* Panel size, read by measure(): the cap on its width in px and how much of the height under --top it may take. Unitless on purpose — the script does the arithmetic, the breakpoints below do the deciding. */ --panel-max:760; --panel-fill:.78; --phead-top:26px; --top:118px; /* Two colour spots over a tinted base, all of it inside the brand's blue sector: #002554 (h 214) and #003C71 (h 208) at the deep end, #2E6F95 (h 202) and #0077A8 (h 198) in the middle, the brand blue #01abea (h 196) at the bright end. Nothing reaches green. That sector spans barely 18°, so the slides cannot be told apart by hue alone — the deck travels in depth instead: --bg-t runs 0 on the first product to 1 on the last, and the base darkens-to-lightens, desaturates and the spots gain strength along the way. The script writes --bg-t. The spots sit near the edges, and on a narrow screen the cards cover the middle — hence the breakpoints below pulling them inwards. */ --spot-a-x:-14%; --spot-a-end:34%; --spot-a-alpha:.34; --spot-b-x:114%; --spot-b-end:40%; --spot-b-alpha:.46; font-family:"Google Sans",sans-serif;color:#fff;line-height:1.55; position:relative;min-height:100dvh; background: radial-gradient(circle at var(--spot-a-x) 26%, hsl(196deg 99% calc(32% + 20% * var(--bg-t)) / calc(var(--spot-a-alpha) * (.8 + .5 * var(--bg-t)))) 6%, transparent var(--spot-a-end)), radial-gradient(circle at var(--spot-b-x) 86%, hsl(calc(208deg - 10deg * var(--bg-t)) calc(72% + 28% * var(--bg-t)) calc(24% + 10% * var(--bg-t)) / calc(var(--spot-b-alpha) * (.85 + .4 * var(--bg-t)))) 10%, transparent var(--spot-b-end)), hsl(calc(214deg - 18deg * var(--bg-t)) calc(100% - 18% * var(--bg-t)) calc(var(--bg-l) * 1%)); background-attachment:fixed; } .ud-showcase a{text-decoration:none;color:inherit} .ud-showcase h1,.ud-showcase h2{margin:0;line-height:1.1} /* The inherited layer styles bare tags globally — header{background:#010101; padding:20px 0} in css/legacy.css, button{outline:none!important} — undo that in here. Goes when that layer does. */ .ud-showcase header{background:none;padding:0} .ud-showcase :focus-visible{outline:2px solid var(--blue)!important;outline-offset:3px} /* ---------- progress ---------- */ .ud-showcase .uds-prog{position:fixed;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.12);z-index:9} .ud-showcase .uds-prog i{display:block;height:100%;width:0;background:var(--blue)} /* ---------- pinned product header ---------- */ .ud-showcase .uds-phead{position:fixed;top:var(--phead-top);left:0;right:0;z-index:6;text-align:center;padding:0 100px;pointer-events:none} .ud-showcase .uds-phead-ids{ font-family:"Google Sans",sans-serif;font-variant-numeric:tabular-nums; font-size:11px;letter-spacing:.18em;color:var(--dimmer);text-transform:uppercase;margin-bottom:8px; } .ud-showcase .uds-phead-ids b{color:var(--blue);font-weight:500} .ud-showcase .uds-phead-name{ font-size:calc(var(--head-fs) * var(--head-scale) * 1px); font-weight:800;letter-spacing:-.004em;text-wrap:balance;max-width:900px;margin:0 auto; } /* ---------- the flipping panel ---------- */ /* Fixed, so it hangs over whatever the viewport holds — including the theme's header and footer. Opacity alone does not take it out of the way: .uds-flip keeps pointer-events, so a transparent panel still swallows clicks in the middle of the screen. It therefore starts hidden and the script switches visibility on only while the deck is actually on screen. */ .ud-showcase .uds-scene{ position:fixed;inset:var(--top) 0 0 0;z-index:2; display:flex;align-items:center;justify-content:center; /* Centred in an area cut short at the bottom, which lifts the panel without touching --top or the transform the script animates. */ padding-bottom:70px; perspective:1600px;pointer-events:none; opacity:0;visibility:hidden; } .ud-showcase .uds-flip{position:relative;transform-style:preserve-3d;will-change:transform;pointer-events:auto} .ud-showcase .uds-face{ position:absolute;inset:0;backface-visibility:hidden; border-radius:16px;overflow:hidden;border:0; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.4); } .ud-showcase .uds-face--b{transform:rotateY(180deg)} .ud-showcase .uds-face-slot{position:absolute;inset:0} .ud-showcase .uds-face-media{position:absolute;inset:0} /* The photo fills the whole face and the thumbs float over it on the right, instead of taking a column of their own. */ .ud-showcase .uds-gal{ position:absolute;inset:0; transition:opacity .45s var(--ease),transform .45s var(--ease); } /* The photo area is the whole face — no ratio box around it, so nothing draws a white margin along the edges and a landscape shot spans the full scene. Each frame is contained inside it and centred, whatever its proportions. */ .ud-showcase .uds-gal-main{ position:relative;overflow:hidden; width:100%;height:100%; } /* Thumbs over the photo: pinned to the right edge, height capped so the strip scrolls instead of running past the face. */ .ud-showcase .uds-gal-side{ position:absolute;top:14px;right:14px;bottom:14px;z-index:2; width:72px;display:flex;flex-direction:column;gap:8px;min-height:0; } .ud-showcase .uds-gal-thumbs{ display:flex;flex-direction:column;gap:10px; flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; scrollbar-width:none; } .ud-showcase .uds-gal-thumbs::-webkit-scrollbar{display:none} .ud-showcase .uds-gal-step{ flex:0 0 auto;height:22px;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center; border:1px solid rgba(0,37,84,.14);border-radius:6px; background:rgba(255,255,255,.94);color:#2E6F95; box-shadow:0 2px 10px rgba(0,37,84,.14); transition:color .3s,border-color .3s; } .ud-showcase .uds-gal-step:hover{color:var(--blue);border-color:var(--blue)} .ud-showcase .uds-gal-step svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8} .ud-showcase .uds-gal-step[hidden]{display:none} /* On the white face the thumbs need their own edge — var(--line) is a translucent white and would vanish here. */ .ud-showcase .uds-gal-thumbs .uds-t{ flex:0 0 auto;aspect-ratio:1;border-radius:8px;overflow:hidden;cursor:pointer; border:1px solid rgba(0,37,84,.14);background:#fff;padding:0; box-shadow:0 2px 10px rgba(0,37,84,.14); transition:border-color .3s,box-shadow .3s,transform .3s; } .ud-showcase .uds-gal-thumbs .uds-t:hover{transform:translateY(-2px)} .ud-showcase .uds-gal-thumbs .uds-t.uds-is-on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)} /* One frame of the main gallery: either a photo (.uds-shot) or, for a product with an empty gallery, a text stub (.uds-ph) carrying the model. */ .ud-showcase .uds-frame{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease} .ud-showcase .uds-frame.uds-is-on{opacity:1} .ud-showcase .uds-shot{object-fit:contain;display:block} .ud-showcase .uds-ph{ display:flex;align-items:center;justify-content:center;background:#fff; font-family:"Google Sans",sans-serif;letter-spacing:.2em;color:#AEAEAE;font-size:15px; } .ud-showcase .uds-gal-thumbs .uds-t img{width:100%;height:100%;object-fit:cover;display:block} /* Mount point for the stand scene shown over the gallery. The drawings come from includes/product-scene.php, the same ones the product page uses, and what animates them is in css/ud-stand-scene.css. */ /* The face is white for the photos, but the scenes keep the dark ground they are drawn for — the same gradient .feat-visual uses on the product page. It rides on .uds-scn, so it fades in and out together with the drawing. */ .ud-showcase .uds-scn{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#141a4c,#222a72); opacity:0;transform:scale(.97);pointer-events:none; transition:opacity .45s var(--ease),transform .45s var(--ease); } .ud-showcase .uds-face-media.uds-show-scene .uds-gal{opacity:0;transform:scale(1.03);pointer-events:none} .ud-showcase .uds-face-media.uds-show-scene .uds-scn{opacity:1;transform:scale(1)} .ud-showcase .uds-stand{height:84%;aspect-ratio:1;max-width:84%} /* The scenes are the product page's own drawings (udtheme_stand_scene_* rendered into #uds-scenes above and moved into the panel by the script). What animates them — keyframes, pivots, the reduced-motion freeze — is in css/ud-stand-scene.css, shared with the product page, so a pivot is moved in one place. Only the mounting rules are here. display:none on the inactive views is what restarts an animation from the top when the toggle switches to it. */ .ud-showcase .uds-scene-view{display:none;height:100%} .ud-showcase .uds-scene-view.uds-is-active{display:block} .ud-showcase .stand-svg{display:block;width:100%;height:100%} /* ---------- side rail ---------- */ .ud-showcase .uds-rail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:22px} .ud-showcase .uds-rail-group{display:flex;flex-direction:column;align-items:center;gap:13px} .ud-showcase .uds-rail-label{writing-mode:vertical-rl;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.34);transition:color .4s} .ud-showcase .uds-rail-group.uds-is-here .uds-rail-label{color:var(--blue)} .ud-showcase .uds-rail-dot{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:background .3s,transform .3s} .ud-showcase .uds-rail-dot:hover{background:rgba(255,255,255,.6);transform:scale(1.25)} .ud-showcase .uds-rail-dot.uds-is-active{background:var(--blue);transform:scale(1.45)} .ud-showcase .uds-rail-dot span{ position:absolute;left:22px;top:50%;transform:translate(-6px,-50%);white-space:nowrap; font-family:"Google Sans",sans-serif;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.04em;color:#fff; background:rgba(10,14,40,.86);border:1px solid rgba(255,255,255,.22);padding:8px 14px;border-radius:4px; opacity:0;pointer-events:none;transition:opacity .25s,transform .25s; } .ud-showcase .uds-rail-dot:hover span,.ud-showcase .uds-rail-dot:focus-visible span{opacity:1;transform:translate(0,-50%)} /* Soon is one stop past the range rather than another group inside it, so it is set off by a tick above it — tan, the same accent that rules the two products of a Soon screen apart. */ .ud-showcase .uds-rail-group--soon{ margin-top:4px;padding-top:18px;border-top:1px solid rgba(205,170,125,.55); } /* ---------- full screen ---------- */ .ud-showcase .uds-fs{ position:fixed;right:26px;bottom:26px;z-index:6;width:38px;height:38px; display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:8px;background:rgba(10,14,40,.5); color:var(--dim);cursor:pointer;transition:color .3s,border-color .3s; } .ud-showcase .uds-fs:hover{color:#fff;border-color:var(--blue)} .ud-showcase .uds-fs svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6} /* ---------- take it offline (signed-in only) ---------- */ /* Above the full-screen button, out of the way of the panel: the deck is the thing being looked at, and this is for whoever is running the meeting. */ .ud-showcase .uds-export{ position:fixed;right:26px;bottom:76px;z-index:6; display:flex;align-items:center;gap:8px; } .ud-showcase .uds-export-label{ font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer); } /* button = the PDF trigger (built from this page); a = the PPTX download, a plain link to the vendor deck in the media library. Same skin either way. */ .ud-showcase .uds-export button, .ud-showcase .uds-export a{ font:inherit;font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1; padding:9px 13px;border-radius:8px;cursor:pointer;text-decoration:none; border:1px solid var(--line);background:rgba(10,14,40,.5);color:var(--dim); transition:color .3s,border-color .3s,background .3s; } .ud-showcase .uds-export button:hover, .ud-showcase .uds-export a:hover{color:#fff;border-color:var(--blue)} .ud-showcase .uds-export button[disabled]{opacity:.6;cursor:default} @media(max-width:900px){ /* The bottom bar owns that corner on a phone, and nobody exports a deck from one anyway. */ .ud-showcase .uds-export{display:none} } /* ---------- screen: card — panel — card ---------- */ .ud-showcase .uds-stage{position:relative;z-index:1} /* Grid, not flex: the two cards share a row, so stretch gives them a common height — the taller one sets it. The second row is an empty spacer that eats the rest of the 100dvh, which is what keeps the pair at the top instead of stretching it down the whole screen. The middle column is the gap the fixed panel sits in; measure() reads its width off the cards themselves. --card-w is the one number the breakpoints below change. */ .ud-showcase .uds-screen{ --card-w:470px; min-height:100dvh; display:grid; grid-template-columns:var(--card-w) 1fr var(--card-w); grid-template-rows:auto 1fr; align-items:stretch; gap:0 40px;padding:110px 60px 70px;scroll-snap-align:start; /* Cards sit at the two edges of the screen, so on a very wide monitor they drift apart while the panel stays capped at --panel-max — leaving a hole on either side of it. The row is therefore capped too and centred: card, panel and card stay one group in the middle. The number is what the widest step needs: 2x580 cards + 1060 panel + gaps + padding. */ max-width:2480px;margin-inline:auto; } .ud-showcase .uds-card--a{grid-column:1;grid-row:1} .ud-showcase .uds-card--b{grid-column:3;grid-row:1} .ud-showcase .uds-card{ width:100%;padding:26px 28px; background:rgba(9,13,44,.6); backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%); border-left:1px solid rgba(1,171,234,.45);border-radius:0 10px 10px 0; } .ud-showcase .uds-card--b{ text-align:right;border-left:none;border-right:1px solid rgba(1,171,234,.45);border-radius:10px 0 0 10px; } .ud-showcase .uds-card--b .uds-hline{margin-left:auto;transform-origin:right} .ud-showcase .uds-card--b .uds-mini, .ud-showcase .uds-card--b .uds-stats, .ud-showcase .uds-card--b .uds-toggle, .ud-showcase .uds-card--b .uds-nav-row{justify-content:flex-end} .ud-showcase .uds-tag{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)} .ud-showcase .uds-hline{width:50px;height:1px;background:var(--tan);margin:14px 0 16px;transform-origin:left} .ud-showcase .uds-card h2{font-size:22px;font-weight:700;letter-spacing:.004em;margin-bottom:12px} .ud-showcase .uds-lead{font-size:15px;color:var(--dim);margin:0} /* short_description and the feature text are ACF textareas with wpautop, so they arrive already wrapped in

— give those their own spacing. */ .ud-showcase .uds-lead p{margin:0 0 .7em} .ud-showcase .uds-lead p:last-child{margin-bottom:0} .ud-showcase .uds-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .ud-showcase .uds-stat{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.05);padding:11px 13px;min-width:98px} .ud-showcase .uds-stat .uds-num{font-size:24px;font-weight:800;line-height:1;letter-spacing:-.02em} .ud-showcase .uds-stat .uds-num span{font-size:13px;color:var(--blue);font-weight:700} .ud-showcase .uds-stat .uds-lbl{font-size:11px;color:var(--dimmer);margin-top:5px} .ud-showcase .uds-bullets{list-style:none;padding:0;margin:18px 0 0} .ud-showcase .uds-bullets li{position:relative;padding:7px 0 7px 26px;font-size:14px;color:var(--dim);border-bottom:1px solid rgba(255,255,255,.1)} .ud-showcase .uds-bullets li:last-child{border-bottom:none} .ud-showcase .uds-bullets li:before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;background:var(--tan);border-radius:2px;transform:rotate(45deg)} .ud-showcase .uds-mini{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px} .ud-showcase .uds-mini b{display:block;font-size:19px;font-weight:800} .ud-showcase .uds-mini div{font-size:12px;color:var(--dimmer)} /* panel view switch: photos / tilt / swivel */ .ud-showcase .uds-toggle{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} .ud-showcase .uds-toggle button{ font:inherit;font-size:13px;font-weight:600;line-height:1;color:var(--dim); background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:100px; padding:8px 15px;cursor:pointer;transition:color .3s,border-color .3s,background .3s; } .ud-showcase .uds-toggle button:hover{color:#fff;border-color:rgba(255,255,255,.34)} .ud-showcase .uds-toggle button.uds-is-active{color:#fff;border-color:var(--blue);background:rgba(1,171,234,.2)} .ud-showcase .uds-techline{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;letter-spacing:.05em;color:var(--dimmer)} .ud-showcase .uds-plink{font:inherit;background:none;border:0;border-bottom:1px solid rgba(205,170,125,.4);cursor:pointer;padding:0 0 1px;display:inline-block;margin-top:12px;font-size:13px;color:var(--tan);border-bottom:1px solid rgba(205,170,125,.4);padding-bottom:1px} .ud-showcase .uds-plink:hover{color:#fff;border-color:#fff} .ud-showcase .uds-nav-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .ud-showcase .uds-nav-btn{ display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 18px;border-radius:5px; font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; border:1px solid rgba(255,255,255,.28);color:var(--dim);cursor:pointer;background:none;font-family:inherit;transition:all .3s; } .ud-showcase .uds-nav-btn:hover{color:#fff;border-color:#fff} .ud-showcase .uds-nav-btn.uds-is-next{border-color:var(--blue);color:var(--blue)} .ud-showcase .uds-nav-btn.uds-is-next:hover{background:var(--blue);color:#06122b} .ud-showcase .uds-nav-btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6} /* ---------- cover screen ---------- */ /* The Soon title screen is the same thing one section further on — same box, same eyebrow, same title and lead — so it shares these rules rather than carrying a copy of them. */ .ud-showcase .uds-screen--intro, .ud-showcase .uds-screen--soon-intro{display:block;padding:0 60px 0 74px} .ud-showcase .uds-intro{ min-height:100dvh;max-width:1500px;margin:0 auto; display:flex;flex-direction:column;justify-content:center;padding:56px 0 48px; } .ud-showcase .uds-intro-eyebrow{ font-family:"Google Sans",sans-serif;font-size:12px; letter-spacing:.34em;text-transform:uppercase;color:var(--blue);margin-bottom:24px; } /* vw in the clamp is only a gentle addition to the rem base: ~66px at 1440, capped at 84px from 1920 up */ /* The line breaks are set by hand with
, so the box must not add its own: 16ch cut "Every screen ends up" mid-phrase and dropped "up" to a line of its own. Each line is kept whole with nowrap and the size steps down instead — at the smallest step the longest line is about 570px, well inside the narrowest screen this layout runs on. */ .ud-showcase .uds-intro-title{ font-size:clamp(40px, 2.2rem + 2.4vw, 84px); font-weight:800;line-height:1.02;letter-spacing:-.012em; white-space:nowrap;margin:0 0 26px; } .ud-showcase .uds-intro-title em{color:var(--blue);font-style:normal} .ud-showcase .uds-intro-lead{ font-size:clamp(15px, .85rem + .25vw, 18px);line-height:1.7;color:var(--dim); max-width:52ch;margin:0 0 32px; } /* auto-fit, not repeat(3): a long category is split across several columns, so the count is not fixed — three fit on a wide screen, fewer when narrow. */ .ud-showcase .uds-intro-index{ border-top:1px solid rgba(255,255,255,.14);padding-top:22px; display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 48px; } .ud-showcase .uds-ix-head{ display:flex;align-items:baseline;justify-content:space-between;gap:12px; font-family:"Google Sans",sans-serif;font-variant-numeric:tabular-nums;font-size:12px; letter-spacing:.28em;text-transform:uppercase;color:var(--dimmer);margin-bottom:14px; } .ud-showcase .uds-ix-head b{color:var(--blue);font-weight:500} .ud-showcase .uds-ix-head--cont{visibility:hidden} .ud-showcase .uds-ix-row{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:9px 6px 9px 16px;border-radius:6px; transition:background .25s,padding .25s; } .ud-showcase .uds-ix-row{width:100%;font:inherit;color:inherit;text-align:left;background:none;border:0;cursor:pointer} .ud-showcase .uds-ix-row:hover{background:rgba(1,171,234,.1);padding-left:22px} .ud-showcase .uds-ix-code{font-family:"Google Sans",sans-serif;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.06em;color:#fff} .ud-showcase .uds-ix-row:hover .uds-ix-code{color:var(--blue)} .ud-showcase .uds-ix-meta{font-size:13px;color:var(--dimmer);white-space:nowrap} /* The Soon line at the foot of the last column of the index. It is set as a category heading and has to keep looking like one, so only what makes a button a button is undone here — the flex row, the spacing and the blue count all come from .uds-ix-head above. */ .ud-showcase .uds-ix-soon{ width:100%;font:inherit;background:none;border:0;cursor:pointer; margin:18px 0 0;padding:11px 6px 11px 16px;border-radius:6px; border-top:1px solid rgba(255,255,255,.14); transition:background .25s,padding .25s,color .25s; } .ud-showcase .uds-ix-soon:hover{background:rgba(1,171,234,.1);padding-left:22px;color:#fff} /* ---------- Soon ---------- Products that have not joined the range yet: no panel, no scenes, no rail dots. Two to a screen, gallery on the left and specification on the right, while the background walks back down the gradient the range came up — see --bg-t in js/ud-showcase.js. These screens keep .uds-screen for the scroll-snap and for measure(), but not its three-column grid: the middle column of that grid is the gap the fixed panel sits in, and no panel comes here. The padding rule carries both classes on purpose. The breakpoints further down re-set .uds-screen's padding for narrower windows, and they sit after this block — matching their specificity rather than relying on source order is what keeps this from being undone at 1599px and below. */ .ud-showcase .uds-screen.uds-screen--soon{ display:flex;flex-direction:column;gap:0; /* 110px at the top on a product screen is clearance for the pinned product name, and that name is faded out across this section — 60px is enough. The foot has to clear the export buttons and the full-screen one, both fixed in that corner (bottom 76px + 26px, see their rules above). The Back and Next row is what does most of that work: it is centred, so it passes under them, and the specification above it ends well clear of the corner. 74px on the left is the rail's clearance, the same figure the cover and the final screen use — the product screens can do without it because their cards start further in. */ padding:60px 60px 80px 74px; } .ud-showcase .uds-soon-head{ font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--dimmer);margin-bottom:22px; } /* The two products stand side by side with a rule between them. The middle track is the rule itself — one pixel, no gap of its own — so the two halves are equal whatever the screen. */ .ud-showcase .uds-soon-pair{ flex:1 1 auto;min-height:0; display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:0 40px; /* The two are as tall as their content now, so they are centred in the screen rather than pinned under the head with the slack left at the bottom. */ align-content:center; } /* An odd count leaves the last screen with one product. Centred and capped rather than left hanging in the left-hand half of a wide monitor. */ .ud-showcase .uds-soon-pair--one{grid-template-columns:minmax(0,700px);justify-content:center} /* Tan, not the brand blue. The background here is blue and travelling through more of it, and a blue hairline on it was invisible at any alpha worth calling a hairline — the warm accent the deck already uses for .uds-hline reads at one pixel wherever the gradient happens to be. Fading at both ends, so it divides the two rather than bordering one of them. */ .ud-showcase .uds-soon-split{ background:linear-gradient(180deg, transparent, rgba(205,170,125,.7) 12%, rgba(205,170,125,.7) 88%, transparent); } /* Model, name and rule across the product's half; the gallery and the specification side by side underneath. */ .ud-showcase .uds-soon-item{display:flex;flex-direction:column;min-height:0} .ud-showcase .uds-soon-top{flex:0 0 auto} /* align-items:start, not stretch. Half a screen split again is a narrow column, and a gallery stretched down the whole of it came out at 326x578 — a portrait card with a landscape photograph adrift in the middle of it. The card is given a shape instead and the pair is centred in what is left. */ .ud-showcase .uds-soon-cols{ flex:0 0 auto; display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:0 20px;align-items:start;margin-top:16px; } /* h3 is a bare tag and the inherited layer styles those globally, so size, weight and margin are stated here rather than left to it. */ .ud-showcase .uds-soon-item h3{ font-size:19px;font-weight:700;line-height:1.2;letter-spacing:.004em;margin:6px 0 0; } .ud-showcase .uds-soon-item .uds-hline{margin:12px 0 0} /* The frames are the deck's own .uds-frame / .uds-shot / .uds-ph, so a change of shot fades here exactly as it does inside the panel, and the empty-gallery stub is the same one. min-height keeps a long specification from squeezing the picture out of existence; past that the screen grows instead. */ .ud-showcase .uds-soon-gal{min-width:0} .ud-showcase .uds-soon-gal-main{ position:relative;width:100%;aspect-ratio:1.05; background:#fff;border-radius:12px;overflow:hidden; box-shadow:0 14px 40px rgba(0,0,0,.28); } /* Over the photo and pinned to its right edge, the way .uds-gal-side sits in the panel — the picture keeps the full width of its card, and the strip scrolls, between its arrows, when there are more shots than fit. The arrows themselves are .uds-gal-step, styled for a white ground further up. */ .ud-showcase .uds-soon-side{ position:absolute;top:12px;right:12px;bottom:12px;z-index:2;width:48px; display:flex;flex-direction:column;gap:8px;min-height:0; } .ud-showcase .uds-soon-thumbs{ display:flex;flex-direction:column;gap:8px; flex:1 1 auto;min-height:0; overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none; } .ud-showcase .uds-soon-thumbs::-webkit-scrollbar{display:none} /* On the white card the thumbs need their own edge: var(--line) is a translucent white and would vanish here. Same values as the panel's. */ .ud-showcase .uds-soon-t{ flex:0 0 auto;width:100%;aspect-ratio:1;padding:0;cursor:pointer; border:1px solid rgba(0,37,84,.14);border-radius:8px;overflow:hidden;background:#fff; box-shadow:0 2px 10px rgba(0,37,84,.14); transition:border-color .3s,box-shadow .3s,transform .3s; } .ud-showcase .uds-soon-t:hover{transform:translateY(-2px)} .ud-showcase .uds-soon-t.uds-is-on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)} .ud-showcase .uds-soon-t img{width:100%;height:100%;object-fit:cover;display:block} /* Back and Next under the pair. Centred, because unlike the product screens there is no card for them to belong to. */ .ud-showcase .uds-soon-nav{ display:flex;justify-content:center;gap:10px;flex-wrap:wrap; flex:0 0 auto;margin-top:26px; } /* table-layout:fixed is not cosmetic. Left to size itself a table refuses to go below the min-content width of its widest cell, and a VESA field naming twenty patterns is one long unbreakable-looking run — at 320px it pushed the table 12px wider than the screen and took the whole page sideways with it. Fixed columns hold the width and the value wraps inside them instead. */ .ud-showcase .uds-soon-spec{ align-self:start; width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed; } .ud-showcase .uds-soon-spec td{ padding:7px 0;vertical-align:baseline;border-bottom:1px solid rgba(255,255,255,.1); } .ud-showcase .uds-soon-spec tr:last-child td{border-bottom:none} .ud-showcase .uds-soon-spec .uds-k{ width:36%;color:var(--dimmer);white-space:nowrap;padding-right:14px; } .ud-showcase .uds-soon-spec .uds-v{color:#fff;text-align:right;overflow-wrap:anywhere} @media(max-width:1599px){ .ud-showcase .uds-screen.uds-screen--soon{padding:60px 40px 80px 74px} .ud-showcase .uds-soon-pair{gap:0 30px} } @media(max-width:1199px){ .ud-showcase .uds-screen.uds-screen--soon{padding:60px 28px 80px 74px} .ud-showcase .uds-soon-pair{gap:0 22px} .ud-showcase .uds-soon-spec{font-size:12px} .ud-showcase .uds-soon-side{width:46px} } /* ---------- final screen: CTA form ---------- */ .ud-showcase .uds-screen--outro{display:block;padding:0 60px 0 74px} .ud-showcase .uds-outro{ min-height:100dvh;max-width:1040px;margin:0 auto; display:flex;flex-direction:column;justify-content:center;padding:90px 0 70px; } .ud-showcase .uds-outro-title{ font-size:clamp(34px,4.4vw,64px);font-weight:800;line-height:1.02;letter-spacing:-.01em; max-width:18ch;margin:0 0 20px; } .ud-showcase .uds-outro-title em{color:var(--blue);font-style:normal} .ud-showcase .uds-outro-lead{font-size:16px;line-height:1.75;color:var(--dim);max-width:56ch;margin:0 0 36px} /* The lead form on the deck is the shared component (css/ud-lead-form.css) in a dark skin: redefine its custom properties, add the rule that ties it to the outro, and re-tint the few things a dark background needs. */ .ud-showcase .udlf-form{ --lf-text:#fff; --lf-label:var(--dimmer); --lf-field-bg:rgba(255,255,255,.05); --lf-field-border:var(--line); --lf-field-focus-bg:rgba(1,171,234,.08); --lf-accent:var(--blue); --lf-accent-hover:#4cc6f5; --lf-accent-ink:#06122b; --lf-note:var(--dimmer); --lf-ok-bg:rgba(1,171,234,.1); --lf-ok-border:rgba(1,171,234,.5); border-top:1px solid rgba(255,255,255,.14);padding-top:30px; } .ud-showcase .udlf-fld select option{background:#12173f;color:#fff} .ud-showcase .udlf-fld input::placeholder, .ud-showcase .udlf-fld textarea::placeholder{color:rgba(255,255,255,.3)} /* "Call us" — the accent action of the final screen. Deliberately a different silhouette from the form's Send request (pill + icon + glow, not a square button), so it reads as its own offer rather than a duplicate submit. nowrap keeps the label on one line whatever the phone label turns out to be. */ /* Its own block under the form, not a line tacked onto it: tinted panel, heading and one line of copy on the left, the call button on the right. */ .ud-showcase .uds-callout{ display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap; margin-top:34px;padding:24px 28px;border-radius:14px; background:rgba(1,171,234,.09);border:1px solid rgba(1,171,234,.34); } .ud-showcase .uds-callout-copy{flex:1 1 320px;min-width:0} .ud-showcase .uds-callout-title{font-size:17px;font-weight:700;letter-spacing:.005em;margin-bottom:6px} .ud-showcase .uds-callout-lead{font-size:14px;line-height:1.6;color:var(--dim);margin:0;max-width:52ch} .ud-showcase .uds-btn-call{ display:inline-flex;align-items:center;gap:10px;white-space:nowrap; font:inherit;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; min-height:52px;padding:14px 32px;border-radius:100px; background:var(--blue);color:#06122b;border:1px solid var(--blue); box-shadow:0 10px 34px rgba(1,171,234,.38); transition:background .3s,border-color .3s,box-shadow .3s,transform .3s; } .ud-showcase .uds-btn-call:hover{ background:#4cc6f5;border-color:#4cc6f5; box-shadow:0 12px 40px rgba(1,171,234,.55);transform:translateY(-1px); } /* The handset rings every few seconds: a short shake with a long pause, so it draws the eye without turning into a blinking banner. On hover it settles. */ @keyframes uds-ring{ 0%,82%,100%{transform:rotate(0)} 84%{transform:rotate(-14deg)} 86%{transform:rotate(11deg)} 88%{transform:rotate(-9deg)} 90%{transform:rotate(7deg)} 92%{transform:rotate(-4deg)} 94%{transform:rotate(2deg)} } .ud-showcase .uds-btn-call svg{ width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round; transform-origin:50% 60%; animation:uds-ring 4.5s ease-in-out infinite; } .ud-showcase .uds-btn-call:hover svg{animation-play-state:paused} .ud-showcase .uds-outro-back{ margin-top:46px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14); display:flex;justify-content:center; } .ud-showcase .uds-btn-top{ display:inline-flex;align-items:center;gap:10px;font:inherit;cursor:pointer; font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);background:none;border:1px solid rgba(255,255,255,.28); border-radius:100px;padding:13px 28px;transition:all .3s; } .ud-showcase .uds-btn-top:hover{color:#fff;border-color:#fff} .ud-showcase .uds-btn-top svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6} /* ---------- reveal on scroll ---------- */ .ud-showcase .uds-rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .ud-showcase .uds-rv.uds-in{opacity:1;transform:none} .ud-showcase .uds-rv.uds-d1{transition-delay:.08s} .ud-showcase .uds-rv.uds-d2{transition-delay:.18s} .ud-showcase .uds-rv.uds-d3{transition-delay:.28s} .ud-showcase .uds-hline.uds-rv{transform:scaleX(0)} .ud-showcase .uds-hline.uds-rv.uds-in{transform:scaleX(1)} .ud-showcase .uds-mbar,.ud-showcase .uds-mnav{display:none} /* Steps: the narrower the viewport, the narrower the cards — the panel takes whatever is left between them, so every step here also sets the panel size. 470px cards only from 1800 up, where there is still room for a large panel. */ /* Wide screens have room to spare above the panel: the pinned product name grows a little and the header sits lower. --top stays put, so the panel does not move — the two just stop crowding each other. */ @media(min-width:1600px){ .ud-showcase{--head-scale:1.12;--phead-top:40px} } /* Very wide screens: cards and panel both grow. The threshold is 2200, not 2000: the two share one row, so every pixel a card gains comes out of the panel — measured at 2000 the panel actually shrank. From 2200 up there is enough width that both end up bigger. */ @media(min-width:2200px){ .ud-showcase{--panel-max:900;--panel-fill:.82} .ud-showcase .uds-screen{--card-w:520px} } @media(min-width:2560px){ .ud-showcase{--panel-max:1060;--panel-fill:.84} .ud-showcase .uds-screen{--card-w:580px} } /* Beyond 2560 the group was pinned at max-width:2480 and just centred, leaving the cards, panel and rail small in a widening sea of margin. Two more steps: the row cap, the cards and the panel all keep growing, and the rail with them. Same idiom as the steps above — the script reads --panel-max/--fill and the widths off the cards, the media query only decides the numbers. */ @media(min-width:2880px){ .ud-showcase{--panel-max:1220;--panel-fill:.85;--head-scale:1.2} .ud-showcase .uds-screen{--card-w:660px;max-width:2860px} .ud-showcase .uds-rail{left:26px;gap:24px} .ud-showcase .uds-rail-dot{width:13px;height:13px} .ud-showcase .uds-rail-dot span{font-size:17px;left:26px;padding:9px 16px} } @media(min-width:3600px){ .ud-showcase{--panel-max:1480;--panel-fill:.86;--head-scale:1.32} .ud-showcase .uds-screen{--card-w:800px;max-width:3560px} .ud-showcase .uds-rail{left:40px;gap:28px} .ud-showcase .uds-rail-dot{width:15px;height:15px} .ud-showcase .uds-rail-dot span{font-size:19px;left:30px} } /* Card copy on wide monitors — the cards widen a lot on big screens (--card-w up to 800), but the text inside held the ~11-15px base and read tiny across a room on a 4K/5K panel. Scale it in steps; the base sizes stand below 1920. */ @media(min-width:1920px){ .ud-showcase .uds-lead{font-size:16px} .ud-showcase .uds-bullets li{font-size:15px} .ud-showcase .uds-mini b{font-size:20px} .ud-showcase .uds-mini div{font-size:13px} .ud-showcase .uds-stat .uds-num{font-size:26px} .ud-showcase .uds-stat .uds-num span{font-size:14px} .ud-showcase .uds-stat .uds-lbl, .ud-showcase .uds-tag{font-size:12px} .ud-showcase .uds-techline, .ud-showcase .uds-soon-spec{font-size:13px} } @media(min-width:2560px){ .ud-showcase .uds-lead{font-size:18px} .ud-showcase .uds-bullets li{font-size:17px} .ud-showcase .uds-mini b{font-size:23px} .ud-showcase .uds-mini div{font-size:14px} .ud-showcase .uds-stat .uds-num{font-size:30px} .ud-showcase .uds-stat .uds-num span{font-size:16px} .ud-showcase .uds-stat .uds-lbl, .ud-showcase .uds-tag{font-size:13px} .ud-showcase .uds-techline, .ud-showcase .uds-soon-spec{font-size:14px} } @media(min-width:3200px){ .ud-showcase .uds-lead{font-size:22px} .ud-showcase .uds-bullets li{font-size:20px} .ud-showcase .uds-mini b{font-size:27px} .ud-showcase .uds-mini div{font-size:16px} .ud-showcase .uds-stat .uds-num{font-size:35px} .ud-showcase .uds-stat .uds-num span{font-size:18px} .ud-showcase .uds-stat .uds-lbl, .ud-showcase .uds-tag{font-size:15px} .ud-showcase .uds-techline, .ud-showcase .uds-soon-spec{font-size:16px} } @media(max-width:1799px){ .ud-showcase .uds-screen{--card-w:420px} } /* Less bare background around the cards from here down: the spots move into view and grow so the slide-to-slide colour change stays readable. */ @media(max-width:1599px){ .ud-showcase{ --spot-a-x:-2%;--spot-a-end:48%;--spot-a-alpha:.42; --spot-b-x:102%;--spot-b-end:54%;--spot-b-alpha:.52; } } @media(max-width:1199px){ .ud-showcase{ --spot-a-x:6%;--spot-a-end:62%;--spot-a-alpha:.5; --spot-b-x:94%;--spot-b-end:68%;--spot-b-alpha:.58; } } @media(max-width:1599px){ .ud-showcase .uds-screen{--card-w:320px;padding:110px 40px 70px;gap:0 30px} .ud-showcase .uds-card{padding:24px 24px} } @media(max-width:1199px){ .ud-showcase .uds-intro-index{grid-template-columns:repeat(2,1fr);gap:0 36px} .ud-showcase .uds-screen{--card-w:280px;padding:110px 28px 70px;gap:0 22px} .ud-showcase .uds-card{padding:20px 20px} } /* ---------- mobile layout ---------- */ @media(max-width:900px){ html{scroll-snap-type:none} .ud-showcase{--top:52px} .ud-showcase .uds-phead,.ud-showcase .uds-rail,.ud-showcase .uds-fs{display:none} .ud-showcase .uds-mbar{ display:flex;align-items:center;gap:10px;position:fixed;top:0;left:0;right:0;height:52px;z-index:8; padding:0 14px;background:rgba(9,13,44,.9); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line); } .ud-showcase .uds-mbar .uds-n{font-family:"Google Sans",sans-serif;font-variant-numeric:tabular-nums;font-size:12px;color:var(--blue)} .ud-showcase .uds-mbar .uds-t{flex:1;min-width:0;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ud-showcase .uds-mbar .uds-fs-m{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;background:none;color:var(--dim)} .ud-showcase .uds-mbar .uds-fs-m svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6} .ud-showcase .uds-scene{inset:52px 0 auto 0;height:36dvh} .ud-showcase .uds-mnav{ display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:8; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(9,13,44,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); } .ud-showcase .uds-mnav button{font:inherit;min-height:42px;border-radius:6px;cursor:pointer;background:none;border:1px solid rgba(255,255,255,.28);color:var(--dim);font-size:12px;font-weight:600;padding:0 12px} .ud-showcase .uds-mnav .uds-prev{flex:0 0 auto;width:56px} .ud-showcase .uds-mnav .uds-next{flex:1;min-width:0;border-color:var(--blue);color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ud-showcase .uds-screen{min-height:0;display:block;padding:calc(36dvh + 74px) 16px 96px} .ud-showcase .uds-card{max-width:100%;width:auto;padding:20px 18px} .ud-showcase .uds-card--b{ text-align:left;margin-top:16px; border-left:1px solid rgba(1,171,234,.45);border-right:none;border-radius:0 10px 10px 0; } .ud-showcase .uds-card--b .uds-hline{margin-left:0;transform-origin:left} .ud-showcase .uds-card--b .uds-mini,.ud-showcase .uds-card--b .uds-toggle{justify-content:flex-start} .ud-showcase .uds-bullets,.ud-showcase .uds-nav-row{display:none} .ud-showcase .uds-gal-side{width:56px;top:10px;right:10px;bottom:10px} .ud-showcase .uds-screen--intro{padding:0 16px} .ud-showcase .uds-intro{min-height:0;padding:calc(52px + 34px) 0 96px} .ud-showcase .uds-intro-eyebrow{margin-bottom:22px} .ud-showcase .uds-intro-title{max-width:none;margin-bottom:22px} /* Below ~700px the longest line no longer fits at the smallest step, and nowrap would push it off the screen — let it wrap again. */ @media(max-width:760px){ .ud-showcase .uds-intro-title{white-space:normal} } .ud-showcase .uds-intro-lead{margin-bottom:30px;line-height:1.7} .ud-showcase .uds-intro-index{grid-template-columns:1fr;gap:26px} .ud-showcase .uds-ix-row{padding-left:12px} /* Soon. The product screens leave 36dvh of clearance at the top for the fixed panel; nothing is pinned over this section, so it starts where the bar ends. The rows stop sharing the height and simply follow one another, and the photo needs a shape of its own again now that nothing stretches it. */ .ud-showcase .uds-screen--soon-intro{padding:0 16px} .ud-showcase .uds-screen.uds-screen--soon{display:block;padding:74px 16px 96px} /* Side by side needs width there is none of: the pair stacks and the rule between the two turns on its side with it. */ .ud-showcase .uds-soon-pair, .ud-showcase .uds-soon-pair--one{display:block} .ud-showcase .uds-soon-item{display:block} .ud-showcase .uds-soon-split{ height:1px;margin:30px 0; background:linear-gradient(90deg, transparent, rgba(1,171,234,.5) 14%, rgba(1,171,234,.5) 86%, transparent); } /* Side by side needs width here too: the gallery goes back above its specification. And nothing stretches it once the column stops being a flex box, so the picture needs a shape of its own again. */ .ud-showcase .uds-soon-cols{display:block;margin-top:14px} .ud-showcase .uds-soon-gal{margin-bottom:14px} .ud-showcase .uds-soon-gal-main{height:auto;aspect-ratio:1.3} .ud-showcase .uds-soon-side{width:44px;top:10px;right:10px;bottom:10px} /* The bar at the foot of the screen does this job on a phone — the product screens hide their own nav row for the same reason. */ .ud-showcase .uds-soon-nav{display:none} .ud-showcase .uds-screen--outro{padding:0 16px} .ud-showcase .uds-outro{min-height:0;padding:calc(52px + 34px) 0 96px} .ud-showcase .uds-outro-back{margin-top:32px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .ud-showcase .uds-rv{opacity:1!important;transform:none!important;transition:none!important} .ud-showcase .uds-frame{transition:none} /* The stand diagrams freeze in css/ud-stand-scene.css, with the rest of what drives them. */ .ud-showcase .uds-btn-call svg{animation:none} } /* ============================================================ Cross-link band — a plain section printed after #uds-app on both showcase templates (tpl-showcase.php, tpl-showcase-tv.php), pointing at the other deck and the main site. It lives OUTSIDE .ud-showcase, so it cannot lean on that element's reset or its blue radial background — it carries its own. Top-level selectors here, but the uds-xlink- prefix is unique, so nothing in the inherited Bootstrap/legacy layer (loaded on tpl-showcase.php) collides with it. Every property that layer sets on a bare section / h2 / p / a is restated. ============================================================ */ .uds-xlink{ font-family:"Google Sans",sans-serif; background:#04182c;color:#fff; padding:76px 40px;border-top:1px solid rgba(255,255,255,.1); /* The TV deck sets scroll-snap-type:y mandatory on (desktop only). Without a snap point of its own this band is unreachable — the scroller falls back to the CTA screen's. The footer below closes the run. Inert on the mount deck (proximity) and under reduced-motion (snap-type:none). */ scroll-snap-align:start; } html.uds-on .ud-footer{scroll-snap-align:end} .uds-xlink *,.uds-xlink *::before,.uds-xlink *::after{box-sizing:border-box} .uds-xlink-inner{max-width:1040px;margin:0 auto;text-align:center} .uds-xlink-eyebrow{ font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.5);margin:0 0 14px; } .uds-xlink-title{ font-size:clamp(24px,3vw,38px);font-weight:800;line-height:1.12; letter-spacing:-.01em;margin:0 0 12px;color:#fff; } .uds-xlink-lead{ font-size:15px;line-height:1.7;color:rgba(255,255,255,.72); max-width:56ch;margin:0 auto 32px; } .uds-xlink-actions{ display:flex;align-items:center;justify-content:center; gap:16px 28px;flex-wrap:wrap; } /* The bright action: same silhouette as the CTA screen's "Call us" pill so the two showcases feel like one set. */ .uds-xlink-btn{ display:inline-flex;align-items:center;gap:10px;text-decoration:none; font:inherit;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; min-height:52px;padding:14px 34px;border-radius:100px; background:#01abea;color:#06122b;border:1px solid #01abea; box-shadow:0 10px 34px rgba(1,171,234,.38); transition:background .3s,border-color .3s,box-shadow .3s,transform .3s; } .uds-xlink-btn::after{content:"\2192";font-weight:700} .uds-xlink-btn:hover{ background:#4cc6f5;border-color:#4cc6f5; box-shadow:0 12px 40px rgba(1,171,234,.55);transform:translateY(-1px); } /* The quiet action: a plain underlined link, clearly secondary to the pill. */ .uds-xlink-home{ font:inherit;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:rgba(255,255,255,.72);text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px; transition:color .3s,border-color .3s; } .uds-xlink-home:hover{color:#fff;border-color:#fff} @media(max-width:640px){ .uds-xlink{padding:54px 22px} .uds-xlink-actions{flex-direction:column;gap:18px} .uds-xlink-btn{width:100%;justify-content:center} }