/* NDEVR product web widget styles. Scoped under .ndevr-product. The product NAME is the headline, * body copy rides on a frosted-glass sheet over the card art, and the action buttons are beveled * "box" buttons. Text colors use !important so generic heading/paragraph rules can't override them. */ /* Colors reference the --nd-* theme tokens from /shared/css/theme.css; every var() keeps the original dark literal as its fallback. */ /* The card (and everything it mounts on : the detail overlay, notes/license popups, the * [ndevr_download] CTA) follows the page's dark/light theme. Most colors read the shared --nd-* * tokens directly; the props below cover what the shared tokens can't express — the glass tint * over the photo art, the glow that lifts copy off it, the card's outer hairline, and the * per-product accent used AS TEXT (--ndevr-ink), darkened in light mode for contrast just like * the global --nd-accent-text rule. Accent used as a FILL keeps --ndevr-accent untouched. */ .ndevr-product, .ndevr-download, .ndevr-product-overlay, .ndevr-product__notes-pop { --ndevr-glass-rgb: 8, 11, 14; --ndevr-glow: rgba(0, 0, 0, 0.6); --ndevr-hero-border: rgba(255, 255, 255, 0.22); --ndevr-ink: var(--ndevr-accent, #f2a900); } html[data-theme="light"] .ndevr-product, html[data-theme="light"] .ndevr-download, html[data-theme="light"] .ndevr-product-overlay, html[data-theme="light"] .ndevr-product__notes-pop { --ndevr-glass-rgb: 244, 246, 249; --ndevr-glow: rgba(255, 255, 255, 0.66); --ndevr-hero-border: rgba(16, 20, 28, 0.2); --ndevr-ink: color-mix(in srgb, var(--ndevr-accent, #f2a900) 68%, #221a06); } .ndevr-product { --ndevr-accent: var(--nd-accent-deep, #f2a900); /* button + headline accent (NDEVR gold) */ --ndevr-accent-dark: #0c5e88; /* darker edge that gives the buttons their "thickness" */ --ndevr-text: var(--nd-text-strong, #ffffff); --ndevr-radius: 10px; --ndevr-bevel: 11px; /* corner chamfer size */ box-sizing: border-box; /* so height:100% + the 1px border don't overflow the grid cell */ max-width: 920px; margin: 0 auto; color: var(--ndevr-text); font-family: var(--nd-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); line-height: 1.5; text-align: center; } .ndevr-product--loading::after { content: "Loading…"; display: block; padding: 2rem 0; color: var(--nd-text-strong, #fff); opacity: 0.7; } /* ================= [ndevr_download] CTA block: tagline + per-OS download buttons ================= */ /* Re-declares the same accent/bevel custom props as .ndevr-product so the reused beveled download buttons (.ndevr-product__btn) render identically when mounted outside a product card. The tagline inherits the surrounding section's text color so it reads correctly on any background. */ .ndevr-download { --ndevr-accent: var(--nd-accent-deep, #f2a900); --ndevr-accent-dark: #0c5e88; --ndevr-bevel: 11px; box-sizing: border-box; margin: 0 auto; font-family: var(--nd-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); line-height: 1.5; text-align: center; } .ndevr-download__tagline { margin: 0 0 1.6rem; font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; letter-spacing: 0.01em; } /* The button row already centers + wraps (.ndevr-product__dl-buttons); add breathing room below the tagline and let it use the full width so wrapping happens at the container edge, not the content. */ .ndevr-download .ndevr-product__dl-buttons { margin: 0; align-self: stretch; } /* ================= Hero card: carousel BEHIND, frosted glass over it, content in front ========= * Three stacked layers inside one outlined card: * .ndevr-product__bg — the carousel, full-bleed background (images COVER the card) * .ndevr-product__glass — a frosted-glass sheet over the image for text legibility * .ndevr-product__content — title / marketing / description / buttons, riding in front * bg has no z-index (auto) so the carousel nav can still float above the glass via z-index:3. */ .ndevr-product--hero { position: relative; overflow: hidden; min-height: 460px; height: 100%; /* fill the grid/flex cell so cards in a row match height */ display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--ndevr-hero-border, rgba(255, 255, 255, 0.22)); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10); isolation: isolate; text-align: center; /* Entrance: each card fades + rises in. In the directory grid the JS sets --ndevr-card-i per card so the row cascades in (a soft diagonal wave) instead of every card flashing at once. The single- product widget leaves --ndevr-card-i unset (0 → no delay). Disabled under reduced-motion below. */ animation: ndevrProductIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--ndevr-card-i, 0) * 45ms); } @keyframes ndevrProductIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ndevr-product--hero { animation: none; } .ndevr-product__bg .ndevr-product__image { opacity: 1; transition: none; } } .ndevr-product__bg { position: absolute; inset: 0; overflow: hidden; /* clip the carousel's off-screen slides to the card */ background: var(--nd-bg-deep, #0f1216); } /* No product image yet → a subtle accent-tinted gradient instead of a flat well. */ .ndevr-product--no-image .ndevr-product__bg { background: linear-gradient(160deg, var(--nd-bg-soft, #181b21), var(--nd-bg-deep, #0f1216)); } .ndevr-product--no-image .ndevr-product__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, var(--ndevr-accent), transparent 60%); opacity: 0.18; } /* The carousel fills the background; stacked slides crossfade, images cover (crop) the whole card. */ .ndevr-product__bg .ndevr-product__carousel { height: 100%; margin: 0; } .ndevr-product__bg .ndevr-product__stage { height: 100%; aspect-ratio: auto; border-radius: 0; background: transparent; } .ndevr-product__bg .ndevr-product__image { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.55s ease; } .ndevr-product__bg .ndevr-product__image.is-loaded { opacity: 1; } .ndevr-product__bg .ndevr-product__caption { display: none; } .ndevr-product--hero .ndevr-product__nav { z-index: 3; } /* Frosted-glass sheet between the image and the content. */ .ndevr-product__glass { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--ndevr-glass-rgb, 8, 11, 14), 0.32) 0%, rgba(var(--ndevr-glass-rgb, 8, 11, 14), 0.60) 52%, rgba(var(--ndevr-glass-rgb, 8, 11, 14), 0.82) 100%); -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); pointer-events: none; /* let clicks reach the content + carousel nav */ } /* Content layer, vertically centered over the hero. flex:1 makes it fill the card height so the content stays centered even when the card is stretched taller to match its row. */ .ndevr-product__content { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 460px; /* generous vertical breathing room, but tighter horizontal padding so a card in a 3-up grid keeps enough usable width for the Learn More + Download buttons to stay side-by-side. */ padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.25rem); } /* `margin-top: auto` is a flexible spacer after the summary: it soaks up all the extra height so the action buttons pin to the BOTTOM of the card. With equal-height cards in a row, the buttons (and everything below the summary) line up across the whole row regardless of how much text each has. */ .ndevr-product__content .ndevr-product__actions { margin-top: auto; padding-top: 1.6rem; } /* Access badges — corner pills on the hero card shown when the signed-in OWL user OWNS a license for this product ("Owned", green) and/or may MANAGE it ("Manage", blue). They stack top-right, floating above the glass + content (z-index 4, same tier as the carousel nav). */ .ndevr-product__badges { position: absolute; top: 14px; right: 14px; z-index: 4; display: flex; flex-direction: row; /* pills sit side-by-side (horizontal), anchored to the top-right */ flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; pointer-events: none; /* the wrapper never intercepts clicks; only the pills do (below) */ } /* The pills are