/* The deck is authored as a standalone full-page document. Inside Magento it lands in Luma's wrapper chain (page-wrapper > main.page-main > columns > column.main), whose boxes constrain width, paint opaque backgrounds over the deck's fixed blurred-banner backdrop, and add an offset above the full-height hero. `display: contents` removes those wrapper boxes (keeping their children) so the deck behaves as a direct child of — restoring the backdrop, the 100vh hero, and natural page scrolling. */ body.whatsnew-page .page-wrapper, body.whatsnew-page .page-main, body.whatsnew-page .columns, body.whatsnew-page .column.main { display: contents; } /* Luma clamps html/body to height:100% for its sticky-footer layout. With the wrapper boxes removed above, that clamp traps the tall deck inside one viewport and blocks page scrolling — let the document grow to its content height instead. `:root` (0,1,0) outranks the theme's `html` rule (0,0,1) so the override wins without !important. */ :root { height: auto; } body.whatsnew-page { height: auto; min-height: 100vh; /* The deck's blurred-banner backdrop is a fixed `.page-bg` at z-index:-1. The theme gives BOTH html and body an opaque #f9f9f9, and the body's box background paints over that backdrop (in the standalone deck only the canvas sits behind it). Make the body transparent so the banner shows through, as designed. */ background: transparent; } /* Luma's typography tints visited links blue, which leaks onto the deck. Plain text links should keep matching their surrounding text (the deck uses `a { color: inherit }`)... */ body.whatsnew-page a:visited { color: inherit; } /* ...and the deck's action links/buttons get brand colours in every state so they never turn blue. The body.whatsnew-page prefix outranks the theme's `a:visited`. Amber on the links with a dark/transparent background... */ body.whatsnew-page .topbar__login, body.whatsnew-page .topbar__login:visited, body.whatsnew-page .topbar__login:hover, body.whatsnew-page .topbar__login:focus, body.whatsnew-page .topbar__login:active, body.whatsnew-page .btn--ghost, body.whatsnew-page .btn--ghost:visited, body.whatsnew-page .btn--ghost:hover, body.whatsnew-page .btn--ghost:focus, body.whatsnew-page .btn--ghost:active { color: var(--brand); text-decoration: none; } /* ...and black on the solid amber buttons (hero "See what's new" + the closing-CTA "Go to your dashboard") — readable on amber, and no underline on hover. */ body.whatsnew-page .btn--primary, body.whatsnew-page .btn--primary:visited, body.whatsnew-page .btn--primary:hover, body.whatsnew-page .btn--primary:focus, body.whatsnew-page .btn--primary:active, body.whatsnew-page .btn--brand, body.whatsnew-page .btn--brand:visited, body.whatsnew-page .btn--brand:hover, body.whatsnew-page .btn--brand:focus, body.whatsnew-page .btn--brand:active { color: #000; text-decoration: none; } /* Bootstrap (loaded globally) styles the shared .btn class; its .btn:hover swaps in a dark --bs-btn-hover-bg. Keep the solid amber buttons amber on hover/focus/active. */ body.whatsnew-page .btn--primary:hover, body.whatsnew-page .btn--primary:focus, body.whatsnew-page .btn--primary:active, body.whatsnew-page .btn--brand:hover, body.whatsnew-page .btn--brand:focus, body.whatsnew-page .btn--brand:active { background: var(--brand); }