/* * Campaign popups. * * Five layouts off one shell: text, image, text-image, video and form. They * share a border, a backdrop and a close button, and differ only in what sits * inside .popup__inner — which is why this is one block of rules rather than * five components that drift apart. * * Written the way the rest of site.css is written: flat surfaces, 1px gold * hairlines, no shadows, no radius, and logical properties throughout so the * Arabic layout is the same file mirrored by the attribute. */ /* * No `display` here, and none anywhere that is not qualified by [open]. * * The browser hides a closed dialog with `dialog:not([open]) { display: none }` * from its own stylesheet, and any class-level display beats that on * specificity. Setting it unconditionally made every popup a permanently * visible block at the end of the body: it sat under the page content, ignored * its trigger, and closing it changed nothing, because there was nothing about * it that depended on being open. */ .popup { width: min(620px, calc(100% - 40px)); max-height: min(88vh, 920px); padding: 0; border: 1px solid var(--gold); margin: auto; background: #050505; color: var(--text); overflow: hidden; } .popup--small { width: min(430px, calc(100% - 40px)); } .popup--large { width: min(980px, calc(100% - 40px)); } /* Open, and only open, is a flex container. */ .popup[open] { display: flex; } .popup::backdrop { background: rgba(0, 0, 0, 0.9); } /* * The dialog is the frame and never scrolls; the inner box does. A long form * popup would otherwise scroll its own close button off the top edge, since * the button is positioned against the dialog. */ .popup__inner { display: flex; width: 100%; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; } /* ---- Close ------------------------------------------------------------- */ .popup__close { position: absolute; z-index: 2; inset-block-start: 0; inset-inline-end: 0; display: grid; width: 44px; height: 44px; border: 0; /* Not fully opaque: over a photograph the corner has to read as an overlay rather than a notch cut out of the image. */ background: rgba(0, 0, 0, 0.55); color: var(--gold-bright); cursor: pointer; place-items: center; transition: background-color 0.25s ease-out, color 0.25s ease-out; } .popup__close:hover, .popup__close:focus-visible { background: var(--gold); color: #000; outline: none; } .popup__close svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; } /* ---- Media ------------------------------------------------------------- */ .popup__media { position: relative; background: #000; } .popup__media img { width: 100%; } .popup__image-link { display: block; } .popup__iframe, .popup__video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; } /* The still that stands in for the player until someone presses play. */ .popup__video-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; } .popup__video-facade img { width: 100%; height: 100%; object-fit: cover; } .popup__video-facade .video-frame__play { position: absolute; top: 50%; left: 50%; display: grid; width: 64px; height: 64px; padding: 0; border: 1px solid var(--gold-bright); border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; font-size: 20px; place-items: center; transform: translate(-50%, -50%); transition: background-color 0.2s ease, transform 0.2s ease; } .popup__video-facade .video-frame__play:hover, .popup__video-facade .video-frame__play:focus-visible { background: var(--gold); color: #000; transform: translate(-50%, -50%) scale(1.08); } /* A hidden iframe must not keep occupying its aspect-ratio box. */ .popup__iframe[hidden], .popup__video-facade[hidden] { display: none; } /* ---- Copy -------------------------------------------------------------- */ .popup__copy { padding: 40px; } .popup--small .popup__copy { padding: 32px 28px; } .popup__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--gold); font-size: 12px; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; } .popup__eyebrow::before { width: 28px; height: 1px; background: currentColor; content: ""; } .popup__title { margin: 0 0 16px; color: #fff; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; } .popup__text { margin: 0; color: #b7b3ae; font-size: 15px; } .popup__text p { margin: 0 0 12px; } .popup__text p:last-child { margin-bottom: 0; } .popup__actions { display: flex; flex-wrap: wrap; align-items: center; margin: 28px 0 0; gap: 12px 22px; } /* A quiet dismiss beside a loud button, not a second button competing with it. */ .popup__skip { padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; transition: color 0.25s ease-out; } .popup__skip:hover, .popup__skip:focus-visible { color: var(--gold-bright); } /* ---- Variant: text ----------------------------------------------------- */ /* Copy alone has nothing to sit beside, so it centres and the gold rule of the eyebrow centres with it. */ .popup--text .popup__copy { padding: 48px 44px; text-align: center; } .popup--text .popup__eyebrow, .popup--text .popup__actions { justify-content: center; } .popup--text .popup__text { margin-inline: auto; max-width: 46ch; } /* ---- Variant: image ---------------------------------------------------- */ /* No frame padding: the image is the popup. */ .popup--image { width: min(720px, calc(100% - 40px)); line-height: 0; } /* ---- Variant: text-image ----------------------------------------------- */ @media (min-width: 761px) { .popup--text-image { width: min(900px, calc(100% - 40px)); } .popup--text-image .popup__inner { display: grid; align-items: stretch; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } /* align="end" puts the picture after the copy. order, not a second column rule, so the DOM order stays copy-last for a screen reader either way. */ .popup--text-image.popup--media-end .popup__media { order: 2; } .popup--text-image .popup__media { height: 100%; } .popup--text-image .popup__media img { height: 100%; object-fit: cover; } .popup--text-image .popup__copy { display: flex; flex-direction: column; justify-content: center; padding: 44px 40px; } } @media (max-width: 760px) { /* Stacked, and the picture is a band rather than half the screen — a tall portrait shot would otherwise push the headline below the fold. */ .popup--text-image .popup__media img { max-height: 34vh; object-fit: cover; } } /* ---- Variant: video ---------------------------------------------------- */ .popup--video { width: min(940px, calc(100% - 40px)); } .popup--video .popup__copy { padding: 28px 36px 36px; } /* ---- Variant: form ----------------------------------------------------- */ .popup__form { margin-top: 26px; } .popup__form .field { margin-bottom: 14px; } /* ---- Motion ------------------------------------------------------------ */ .popup[open] { animation: popup-in 0.42s var(--ease) both; } .popup[open]::backdrop { animation: popup-backdrop-in 0.42s var(--ease) both; } @keyframes popup-in { from { opacity: 0; transform: translateY(18px); } } @keyframes popup-backdrop-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .popup[open], .popup[open]::backdrop { animation: none; } }