/* ========================================================================== DOWNLOAD MODAL — Figma "Premier Download - Module" 13225:23575 (user 2026-09-04). Opened by the two "Download Premier" CTAs (hero + closer). Same shell mechanics as .compare (fixed layer, scrim, class toggle for state, overflow lock) but its own skin: the product-UI palette (#06090f base), a course photo that fades into the plate, and three glass spec cards. Content is hard-coded in index.html for now — the version pill, the download URL and the spec rows are the bits that will want to go config-driven later. ========================================================================== */ .dl { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; pointer-events: none; transition: visibility 0s linear .5s; /* hold until the exit has played */ } .dl.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .dl__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .42s var(--ease); cursor: pointer; } .dl.is-open .dl__scrim { opacity: 1; } /* The panel IS the scroll container: on short viewports the whole module scrolls, the photo rides up with it and the close bar stays put (sticky). */ .dl__panel { position: relative; width: 1273px; /* Figma frame */ max-width: 100%; max-height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background: #06090f; /* colors/background/bg-primary */ color: #fff; border-radius: 32px; box-shadow: 0 12px 16px -4px rgba(0, 0, 0, .35), 0 4px 6px -2px rgba(0, 0, 0, .25); font-family: var(--font); -webkit-font-smoothing: antialiased; opacity: 0; transform: translateY(56px); transition: opacity .42s var(--ease), transform .52s var(--ease); } .dl__panel::-webkit-scrollbar { width: 0; height: 0; } .dl.is-open .dl__panel { opacity: 1; transform: none; } /* --- course photo ------------------------------------------------------- Sits behind the copy and dissolves downward: the photo's own alpha ramps out, a flat 20% black knocks it back, and from ~110px down a blurred 40% plate (Figma: alpha-white-40 over bg-primary + 8px background blur) melts it into the panel so the cards read against near-solid ground. */ .dl__hero { position: absolute; left: 0; right: 0; top: 0; height: 720px; overflow: hidden; pointer-events: none; border-radius: 32px 32px 0 0; } .dl__hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; /* Figma crops in on the 7th green (the instance is 1.68× the frame and pulled 300px up). Scaling about the BOTTOM edge keeps the box covered with no seam while showing the lower two thirds of the render — horizon at the top edge, green and bunkers under the copy, grass under the cards */ transform-origin: 50% 100%; transform: scale(1.5); -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .85) 22%, rgba(0, 0, 0, .3) 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .85) 22%, rgba(0, 0, 0, .3) 60%, transparent 100%); } .dl__hero::before { /* alpha-white-20 (rgba(0,0,0,.2)) wash */ content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .14); } .dl__hero::after { /* the blurred plate, feathered in at the top */ content: ""; position: absolute; inset: 0; background: rgba(6, 9, 15, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, transparent 7%, #000 17%); mask-image: linear-gradient(to bottom, transparent 7%, #000 17%); } /* --- close bar (sticky) ------------------------------------------------- */ .dl__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; padding: 24px; } .dl__close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s var(--ease); } .dl__close svg { width: 18px; height: 18px; display: block; } .dl__close:hover { background: rgba(255, 255, 255, .14); } .dl__close:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; } /* --- body --------------------------------------------------------------- */ .dl__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 48px; padding: 16px 64px 64px; /* 80px bar + 16px gap = copy at y 96 */ } .dl__featured { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .dl__version { /* Mono md/Regular on alpha-white-60 */ margin: 0; padding: 4px 12px; border-radius: 8px; background: rgba(0, 0, 0, .6); font: 400 16px/24px var(--mono); letter-spacing: 0; text-transform: uppercase; color: #fff; white-space: nowrap; } .dl__title { /* Display 2xl/Bold */ margin: 0; font: 700 72px/90px var(--font); letter-spacing: -1.44px; text-transform: uppercase; color: #fff; } .dl__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 40px; border-radius: 9999px; font: 600 16px/24px var(--font); letter-spacing: 0; text-decoration: none; white-space: nowrap; } .dl__cta svg { width: 20px; height: 20px; flex: none; } .dl__cta--get { background: #fff; color: #000; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: transform .35s var(--ease), filter .35s var(--ease); } .dl__cta--get:hover { transform: translateY(-1px); filter: brightness(.94); } .dl__cta--get:active { transform: scale(.97); } .dl__cta--get:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; } .dl__cta--na { /* non-Windows: disabled pill, fg #85888e */ background: rgba(0, 0, 0, .6); color: #85888e; cursor: default; display: none; } /* js flags the layer once it knows the platform isn't Windows */ .dl--nopc .dl__cta--get { display: none; } .dl--nopc .dl__cta--na { display: inline-flex; } /* --- spec cards --------------------------------------------------------- */ .dl__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dl__card { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; /* Figma: radial highlight (519×296, anchored top-centre) over a flat 20% black, with a 15px background blur pulling the photo in behind it */ background: radial-gradient(519px 296px at 50% 0, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, 0) 70%), rgba(0, 0, 0, .2); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); min-width: 0; } .dl__card-head { display: flex; flex-direction: column; align-items: flex-start; } .dl__card-title { margin: 0; font: 700 20px/30px var(--font); letter-spacing: 0; color: #f5f5f6; } /* inline, not a flex sibling, so the bolts stay glued to the last word if the title ever wraps at narrow widths */ .dl__zaps { display: inline-flex; vertical-align: middle; margin-left: 10px; padding: 4px 0; white-space: nowrap; } .dl__zaps svg { width: 12px; height: 12px; display: block; fill: #fff; } .dl__zaps svg.is-dim { fill: rgba(255, 255, 255, .2); } .dl__card-desc { margin: 0; font: 400 14px/20px var(--font); color: rgba(255, 255, 255, .6); } .dl__rows { display: flex; flex-direction: column; gap: 16px; margin: 0; } .dl__row { display: flex; align-items: center; gap: 16px; } .dl__row + .dl__row { /* 16 + 1px rule + 16, as in the comp */ padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); } .dl__row dt { flex: none; width: 69px; font: 600 16px/24px var(--font); color: #f5f5f6; } .dl__row dd { margin: 0; min-width: 0; font: 400 16px/24px var(--font); color: #f5f5f6; } /* --- breakpoints -------------------------------------------------------- */ /* the comp's 64px gutters and 72px title need the full 1273; below that the gutters tighten first, then the cards drop to a single column — three abreast under ~1100px leaves no room for the CPU strings */ @media (max-width: 1180px) { .dl__body { padding: 16px 40px 48px; } .dl__title { font-size: clamp(44px, 5.6vw, 72px); line-height: 1.2; letter-spacing: -.02em; } } @media (max-width: 1100px) { .dl__specs { grid-template-columns: minmax(0, 1fr); } .dl__body { gap: 32px; } } /* phone (Figma Download-windows-mobile, 393 wide): a bottom sheet that starts 64px down, squared off at the bottom; 16px gutters, 36/44 title */ @media (max-width: 720px) { .dl { padding: 64px 0 0; align-items: flex-end; } .dl__panel { width: 100%; height: 100%; border-radius: 32px 32px 0 0; box-shadow: none; } .dl__hero { height: 460px; border-radius: 32px 32px 0 0; } .dl__body { padding: 16px 16px 64px; gap: 32px; } .dl__title { font-size: clamp(28px, 9.2vw, 36px); line-height: 44px; letter-spacing: -.72px; } } @media (prefers-reduced-motion: reduce) { .dl__scrim, .dl__panel { transition: opacity .2s linear; } .dl__panel { transform: none; } .dl__cta--get { transition: none; } }