/* ========================================================================== Dive X AI ads gallery (/ai-ads/ and /ai-ads//) Scoped to #aiads and body:has(#aiads) so nothing leaks after a Barba swap. Light, minimal ground; Dive violet and lime only as accents. ========================================================================== */ #aiads { --ink: #13161d; --ink-2: rgba(19, 22, 29, .82); /* navy tint */ --ink-3: rgba(19, 22, 29, .7); /* navy tint, about 6:1 on white */ --paper: #ffffff; --mist: #EDE7FF; /* theme lavender */ --violet: #a78cfa; --violet-2: #c6b4fc; --lav: #ede7ff; --lime: #d0ff71; --e-out: cubic-bezier(.333, 1, .666, 1); --e-io: cubic-bezier(.666, 0, .333, 1); --edge: 24px; --r: 8px; --pill: 34px; /* the site header's round buttons: size and inset, as on the home page */ --hb: 42px; --hb-in: 15px; --wf: clamp(84px, 16vw, 300px); /* size of the AI and ADS words */ position: fixed; inset: 0; z-index: 1; overflow: hidden; background: var(--paper); color: var(--ink); font-family: "Clash Grotesk", system-ui, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.4; letter-spacing: 0; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } @media (min-width: 768px) { #aiads { --r: 12px; --hb: 60px; } } @media (min-width: 961px) { #aiads { --hb-in: 30px; } } @media (min-width: 1024px) { #aiads { --edge: 80px; } } @media (min-width: 1280px) { #aiads { --edge: 120px; --r: 16px; } } @media (min-width: 1920px) { #aiads { --edge: 12vw; } } #aiads *, #aiads *::before, #aiads *::after { box-sizing: border-box; } #aiads a { color: inherit; text-decoration: none; } #aiads button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } #aiads img, #aiads video { display: block; max-width: none; } #aiads :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* controls sitting on the video: a navy and lime ring reads on both dark and light frames */ #aiads .ga-d-sound:focus-visible { outline-color: var(--lime); box-shadow: 0 0 0 3px var(--ink); border-radius: var(--pill); } #aiads .ga-d-play:focus-visible { outline: 2px solid var(--lime); outline-offset: -5px; box-shadow: inset 0 0 0 3px var(--ink); border-radius: var(--r); } /* grid slots sit flush with the masked column box, which would clip an outside ring: draw it inside, above the poster */ #aiads .ga-gslot:focus-visible { outline: none; } #aiads .ga-gslot:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--r); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px var(--lime); pointer-events: none; } /* the info panel heading takes focus on open only so reading starts at the top */ #aiads .ga-info-lines:focus { outline: none; } #aiads .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* page lock: the gallery is a full-screen app, the site body never scrolls under it */ html:has(#aiads), html:has(#aiads) body { overflow: hidden !important; height: 100%; overscroll-behavior: none; } /* the site reserves a scrollbar gutter on ; this page never scrolls, so give the gallery the full width */ html:has(#aiads) { scrollbar-gutter: auto !important; } main.ga-page { position: relative; min-height: 100vh; } /* ------------------------------------------------ site chrome The header's round Menu and WhatsApp buttons are left exactly as the site styles them (lilac, 60px, 30px in from the corners on desktop). Below 961px the site parks them at the bottom of the screen; the gallery needs its bottom row, so here they keep their size and inset but sit in the top corners. */ @media (max-width: 960px) { body:has(#aiads) .o-header_menuButton, body:has(#aiads) .o-header_whatsappButton { top: 1.5rem; bottom: auto; } } /* ------------------------------------------------------------------ glass pills */ #aiads .ga-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--pill); padding: 0 15px; border-radius: var(--pill); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; isolation: isolate; transition: color 333ms var(--e-out), transform 333ms var(--e-out); } #aiads .ga-pill > :not(.ga-glass) { position: relative; z-index: 1; } #aiads .ga-glass { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(6px) saturate(1.3) brightness(1.05); backdrop-filter: blur(6px) saturate(1.3) brightness(1.05); box-shadow: inset 8px 8px 26px rgba(237, 231, 255, .78), inset 0 0 5px rgba(255, 255, 255, .35), 0 1px 3px rgba(19, 22, 29, .08); transition: background-color 333ms var(--e-out), box-shadow 333ms var(--e-out); } #aiads .ga-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(60% 60% at 0 0, #fff, rgba(255, 255, 255, 0)), radial-gradient(60% 60% at 100% 100%, #fff, rgba(255, 255, 255, 0)); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } @media (hover: hover) { #aiads .ga-pill:hover { color: #fff; } #aiads .ga-pill:hover .ga-glass { background-color: var(--ink); box-shadow: inset 8px 8px 26px rgba(19, 22, 29, .7); } #aiads .ga-pill:hover svg { fill: #fff; stroke: #fff; } } #aiads .ga-pill:active { transform: scale(.94); } #aiads .ga-round { width: var(--pill); padding: 0; } #aiads .ga-round svg { width: 100%; height: 100%; fill: var(--ink); stroke: var(--ink); transition: opacity 333ms var(--e-out), transform 333ms var(--e-out); } #aiads .ga-ui { position: absolute; z-index: 60; display: flex; align-items: center; gap: 5px; pointer-events: none; } #aiads .ga-ui > * { pointer-events: auto; } #aiads .ga-ui-top { top: var(--hb-in); right: calc(var(--hb-in) + var(--hb) + 8px); height: var(--hb); justify-content: flex-end; } #aiads .ga-ui-right { display: flex; gap: 8px; align-items: center; } #aiads .ga-ui-bottom { right: 20px; bottom: 20px; } #aiads .ga-ui-top, #aiads .ga-ui-bottom, #aiads .ga-new { opacity: 0; transition: opacity 1s var(--e-out), transform 1s var(--e-out); } #aiads .ga-ui-top { transform: translateY(-12px); } #aiads .ga-ui-bottom { transform: translateY(12px); } #aiads.is-chrome .ga-ui-top, #aiads.is-chrome .ga-ui-bottom, #aiads.is-ui .ga-ui-top, #aiads.is-ui .ga-ui-bottom { opacity: 1; transform: none; } /* top right controls in the header's own button language: lilac, navy icon, the site's springy hover */ #aiads .ga-hbtn { --s: 1; display: inline-flex; align-items: center; justify-content: center; height: var(--hb); border-radius: var(--hb); background: var(--violet-2); color: var(--ink); transform: scale(var(--s)); transition: transform .4s cubic-bezier(.17, .67, .3, 1.33); } @media (hover: hover) and (any-pointer: fine) { #aiads .ga-hbtn:hover { --s: 1.1; } #aiads .ga-book:hover { --s: 1.06; } } #aiads .ga-hbtn:active { --s: .8; } #aiads .ga-hbtn.ga-round { width: var(--hb); padding: 0; } #aiads .ga-hbtn.ga-round svg { width: 30px; height: 30px; } @media (min-width: 768px) { #aiads .ga-hbtn.ga-round svg { width: 36px; height: 36px; } } #aiads .ga-book { min-width: 118px; padding: 0 20px; font-weight: 700; font-size: 13px; letter-spacing: .01em; white-space: nowrap; } @media (min-width: 768px) { #aiads .ga-book { min-width: 150px; padding: 0 26px; font-size: 15px; } } #aiads .ga-book-txt { display: inline-block; font-variant-numeric: tabular-nums; } /* sound icon: waves when on, a cross when off */ #aiads .ga-i-sound .ga-i-cone { fill: var(--ink); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; } #aiads .ga-i-sound .ga-i-waves, #aiads .ga-i-sound .ga-i-x { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; transition: opacity 333ms var(--e-out), transform 333ms var(--e-out); } #aiads .ga-i-sound .ga-i-x { opacity: 0; transform: translateX(-3px); } #aiads [aria-pressed=false] .ga-i-sound .ga-i-waves { opacity: 0; transform: translateX(-3px); } #aiads [aria-pressed=false] .ga-i-sound .ga-i-x { opacity: 1; transform: none; transition-delay: 120ms; } @media (hover: hover) { #aiads .ga-pill:hover .ga-i-sound .ga-i-cone { fill: #fff; stroke: #fff; } #aiads .ga-pill:hover .ga-i-sound .ga-i-waves, #aiads .ga-pill:hover .ga-i-sound .ga-i-x { stroke: #fff; } } /* ------------------------------------------------------------------ intro words */ #aiads .ga-hero { position: absolute; inset: 0; } #aiads .ga-words { position: absolute; top: 50%; left: 0; width: 100%; height: 1em; margin: 0; transform: translateY(-50%); /* the site's display face, as in the home page headings */ font-family: Beni, "Clash Grotesk", sans-serif; font-weight: 900; font-size: var(--wf); line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; color: var(--ink); pointer-events: none; user-select: none; } #aiads .ga-word { position: absolute; top: 0; left: 50%; height: 100%; display: block; transition: transform 666ms var(--e-io); } #aiads .ga-word:first-child { transform: translateX(calc(-100% - .12em)); } #aiads .ga-word:last-child { transform: translateX(.12em); } #aiads .ga-word > span { display: inline-block; opacity: 0; transform: translateY(.2em); } #aiads.is-init .ga-word > span { opacity: 1; transform: none; transition: opacity 444ms var(--e-out), transform 666ms var(--e-out); transition-delay: var(--ld, 0ms); } #aiads.is-split .ga-word:first-child { transform: translateX(calc(-50vw + var(--edge))); } #aiads.is-split .ga-word:last-child { transform: translateX(calc(50vw - var(--edge) - 100%)); } #aiads.is-set .ga-word, #aiads.is-set .ga-word > span { transition: none !important; } #aiads .ga-words .ga-dot { color: var(--violet); } /* ------------------------------------------------------------------ card carousel Vertical 9:16 cards in a horizontal stack: the next ad waits on the right and travels right to left into the centre. gallery.js sizes and places the cards. */ #aiads .ga-root { position: absolute; top: 76px; bottom: 132px; left: 0; right: 0; touch-action: none; user-select: none; -webkit-user-select: none; } #aiads .ga-root.is-locked { pointer-events: none; } #aiads .ga-stage { position: relative; height: 100%; width: 100%; opacity: 0; transform: scale(.5); transform-origin: 50% 50%; will-change: transform, opacity; } #aiads .ga-track { position: absolute; inset: 0; } #aiads .ga-card { --sh: .22; position: absolute; left: 50%; top: 50%; width: var(--cw, 300px); height: var(--ch, 180px); margin: calc(var(--ch, 180px) / -2) 0 0 calc(var(--cw, 300px) / -2); border-radius: var(--r); overflow: hidden; background: var(--mist); box-shadow: 0 0 4px 1px rgba(19, 22, 29, var(--sh)); transition: box-shadow 333ms var(--e-out); will-change: transform; backface-visibility: hidden; contain: layout paint; visibility: hidden; -webkit-user-drag: none; } #aiads .ga-card.is-far { --sh: 0; } /* the ad itself fills its card: no frame, no blurred side panels */ #aiads .ga-media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } #aiads .ga-media img, #aiads .ga-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; } #aiads .ga-media video { opacity: 0; transition: opacity 400ms var(--e-out); } #aiads .ga-media video.is-playing { opacity: 1; } #aiads .ga-caption { position: absolute; left: 50%; bottom: 30px; z-index: 5; display: flex; gap: 8px; max-width: calc(100vw - 260px); margin: 0; transform: translateX(-50%); font-size: 13px; line-height: 1.2; white-space: nowrap; opacity: 0; transition: opacity 333ms var(--e-out); pointer-events: none; } #aiads.is-ui .ga-caption.is-on { opacity: 1; } #aiads .ga-caption-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; } #aiads .ga-caption-client { color: var(--ink-3); } #aiads .ga-caption-client::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--violet); vertical-align: middle; } @media (min-width: 768px) { #aiads .ga-root { top: 96px; bottom: 84px; } } @media (min-width: 961px) { #aiads .ga-root { top: 112px; bottom: 80px; } } /* tall screens (phones and tablets upright): no room beside the cards, so the words sit in a row under the header and the stack runs edge to edge below them */ @media (max-aspect-ratio: 9 / 10) { #aiads .ga-words { top: calc(var(--hb-in) + var(--hb)); transform: none; } /* and ends above the bottom row (the NEW thumbnail is the tallest thing in it) */ #aiads .ga-root { top: calc(var(--hb-in) + var(--hb) + var(--wf) * .92); bottom: calc(clamp(54px, 14vw, 100px) * 16 / 9 + 36px); } } @media (max-width: 767px) { #aiads .ga-caption { bottom: calc(9vw + 12px); max-width: calc(100vw - 200px); flex-direction: column; gap: 2px; align-items: center; font-size: 12px; } #aiads .ga-caption-client::before { display: none; } } /* ------------------------------------------------------------------ NEW thumbnail */ #aiads .ga-new { position: absolute; left: 20px; bottom: 20px; z-index: 55; display: block; transform: translateY(12px); } #aiads.is-ui .ga-new { opacity: 1; transform: none; } #aiads .ga-new-media { display: block; position: relative; width: clamp(54px, 14vw, 100px); aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; background: var(--mist); box-shadow: 0 0 4px 1px rgba(19, 22, 29, .14); } #aiads .ga-new-media img, #aiads .ga-new-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 666ms var(--e-out); } #aiads .ga-new-media video { opacity: 0; transition: opacity 400ms var(--e-out); } #aiads .ga-new-media video.is-playing { opacity: 1; } @media (hover: hover) { #aiads .ga-new:hover .ga-new-media img { transform: scale(1.06); } } #aiads .ga-new-label { position: absolute; left: 0; top: 0; height: 24px; margin-top: -12px; padding: 0 12px; font-size: 11px; letter-spacing: .08em; } #aiads .ga-new-label::before { content: ""; position: relative; z-index: 1; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); } @media (min-width: 1280px) { #aiads .ga-new-label { height: 30px; margin-top: -15px; padding: 0 14px; font-size: 12px; } } /* bottom right toggles: the icon becomes a cross while its panel is open */ #aiads .ga-ui-bottom button svg:last-child { position: absolute; inset: 0; opacity: 0; transform: scale(.4) rotate(-45deg); } #aiads .ga-ui-bottom button[aria-expanded=true] svg:nth-of-type(1) { opacity: 0; transform: scale(.4) rotate(45deg); } #aiads .ga-ui-bottom button[aria-expanded=true] svg:last-child { opacity: 1; transform: none; } #aiads .ga-ui-bottom button { transition: width 666ms var(--e-out), transform 333ms var(--e-out), opacity 333ms var(--e-out); overflow: hidden; } #aiads.is-grid .ga-info-btn, #aiads.is-info .ga-grid-btn { width: 0; opacity: 0; transform: scaleY(0); pointer-events: none; } #aiads .ga-ui-bottom a svg { width: 100%; height: 100%; fill: var(--ink); stroke: var(--ink); } /* ------------------------------------------------------------------ frosted panels */ #aiads .ga-panel { position: absolute; inset: 0; z-index: 40; opacity: 0; visibility: hidden; transition: opacity 666ms var(--e-io), visibility 0s linear 666ms; } #aiads .ga-panel.is-open { opacity: 1; visibility: visible; transition: opacity 666ms var(--e-io), visibility 0s; } #aiads .ga-frost-layer { position: absolute; inset: 0; overflow: hidden; background: #fff; } /* the frosted backdrop is a blurred snapshot of the stack drawn once into a small canvas (see gallery.js frost()), so scrolling the grid never re-runs a live backdrop blur */ #aiads .ga-frost-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; } #aiads .ga-frost-layer::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .34); } #aiads.is-frozen .ga-hero { visibility: hidden; } /* grid view */ #aiads .ga-grid-view { overflow: hidden; touch-action: none; } #aiads .ga-grid-cols { position: absolute; inset: 0 20px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); } #aiads .ga-gcol { position: absolute; top: 0; will-change: transform; } #aiads .ga-gcard { position: absolute; left: 0; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; background: var(--mist); box-shadow: 0 0 4px 1px rgba(19, 22, 29, .12); opacity: 0; transform: translateY(36px) scale(.94); transition: opacity 666ms var(--e-out), transform 666ms var(--e-out); transition-delay: var(--d, 0ms); -webkit-user-drag: none; } #aiads .ga-grid-view.is-in .ga-gcard { opacity: 1; transform: none; } #aiads .ga-grid-view.is-in .ga-gcard.is-settled { transition: transform 444ms var(--e-out), box-shadow 333ms var(--e-out); transition-delay: 0ms; } @media (hover: hover) { #aiads .ga-grid-view.is-in .ga-gcard.is-settled:hover { transform: scale(1.03); box-shadow: 0 16px 40px rgba(19, 22, 29, .18); z-index: 2; } } #aiads .ga-gcard-label { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; gap: 6px; align-items: center; height: 26px; padding: 0 10px; border-radius: 26px; background: rgba(255, 255, 255, .86); font-size: 11px; font-weight: 700; letter-spacing: .02em; opacity: 0; transform: translateY(6px); transition: opacity 333ms var(--e-out), transform 333ms var(--e-out); max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* text-overflow only draws on the spans that hold the text; the title gives way first (down to a few letters), then the client */ #aiads .ga-gcard-label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #aiads .ga-gcard-label > .ga-gcard-t { flex: 0 1000 auto; min-width: 3.5em; } /* the pill is 86% white over the poster, so it can sit on grey: the darker grey keeps 4.5:1 */ #aiads .ga-gcard-label > .ga-gcard-c { flex: 0 1 auto; color: var(--ink-2); font-weight: 400; } @media (hover: hover) { #aiads .ga-gcard:hover .ga-gcard-label { opacity: 1; transform: none; } } #aiads .ga-gslot:focus-visible .ga-gcard-label { opacity: 1; transform: none; } @media (hover: none) { #aiads .ga-gcard-label { opacity: 1; transform: none; } } /* info view */ #aiads .ga-info-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; } #aiads .ga-info-inner { position: relative; max-width: 900px; margin: 0 auto; padding: 110px 24px 120px; } #aiads .ga-info-lines { margin: 0 0 56px; font-weight: 700; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.16; letter-spacing: -.005em; word-spacing: .04em; } #aiads .ga-line { display: block; margin-bottom: .8em; } #aiads .ga-line, #aiads .ga-info-sub { opacity: 0; transform: translateY(24px); transition: opacity 666ms var(--e-out), transform 666ms var(--e-out); transition-delay: 0ms; } #aiads .ga-info.is-open .ga-line, #aiads .ga-info.is-open .ga-info-sub { opacity: 1; transform: none; transition-delay: calc(var(--d, 0ms) + 200ms); } #aiads .ga-info-note { margin: 0 0 32px; max-width: 62ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; } #aiads .ga-faq { margin: 0 0 40px; padding: 0; display: grid; gap: 22px; } #aiads .ga-faq-item { padding-top: 18px; border-top: 1px solid rgba(19, 22, 29, .12); } #aiads .ga-faq dt { font-weight: 700; font-size: 17px; margin-bottom: 6px; } #aiads .ga-faq dd { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 62ch; } /* CTAs */ #aiads .ga-ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } #aiads .ga-cta { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 24px; border-radius: 52px; font-weight: 700; font-size: 15px; letter-spacing: .025em; word-spacing: .05em; transition: background-color 333ms var(--e-out), color 333ms var(--e-out), transform 333ms var(--e-out), box-shadow 333ms var(--e-out); } #aiads .ga-cta svg { width: 24px; height: 24px; stroke: currentColor; fill: currentColor; flex: none; } #aiads .ga-cta-main { background: var(--ink); color: #fff; } #aiads .ga-cta-main svg { fill: none; transition: transform 333ms var(--e-out); } #aiads .ga-cta-wa { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(19, 22, 29, .14); padding: 0 22px 0 18px; } #aiads .ga-cta-wa svg { width: 20px; height: 20px; stroke: none; } @media (hover: hover) { #aiads .ga-cta-main:hover { background: var(--lime); color: var(--ink); } #aiads .ga-cta-main:hover svg { transform: translateX(4px); } #aiads .ga-cta-wa:hover { background: var(--ink); color: #fff; } } #aiads .ga-cta:active { transform: scale(.96); } /* ------------------------------------------------------------------ detail view */ #aiads .ga-detail { position: absolute; inset: 0; z-index: 45; background: var(--paper); } /* detail text sits on the grey frost, not white: its muted labels need the darker grey to keep 4.5:1 */ #aiads .ga-detail { --ink-3: var(--ink-2); } #aiads .ga-detail.is-overlay { opacity: 0; transition: opacity 500ms var(--e-io); } #aiads .ga-detail.is-overlay.is-open { opacity: 1; } #aiads .ga-frost { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } #aiads .ga-frost img { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; opacity: .5; transform: scale(1.05); } #aiads .ga-frost::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 45%, rgba(255, 255, 255, .15), rgba(255, 255, 255, .8)); } #aiads .ga-d-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } #aiads .ga-d-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; display: grid; place-items: center; } #aiads .ga-d-kicker { position: absolute; top: 74px; left: 0; right: 0; margin: 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity 666ms var(--e-out) 300ms; } #aiads .ga-d-title { position: absolute; top: 50%; left: 0; right: 0; margin: 0; padding: 0 20px; transform: translateY(-50%); text-align: center; font-weight: 700; font-size: clamp(44px, 9vw, 150px); line-height: .95; letter-spacing: -.045em; text-transform: lowercase; text-wrap: balance; opacity: 0; filter: blur(22px); transition: opacity 900ms var(--e-out), filter 900ms var(--e-out); } #aiads .ga-d-player { position: relative; width: min(calc(100vw - 40px), calc(76svh * var(--ar)), 1100px); aspect-ratio: var(--ar); border-radius: var(--r); overflow: hidden; background: #13161D; box-shadow: 0 30px 90px rgba(19, 22, 29, .28), 0 0 4px 1px rgba(19, 22, 29, .12); opacity: 0; transform: translateY(48px) scale(.96); transition: opacity 900ms var(--e-out), transform 1100ms var(--e-out); } #aiads .ga-detail.is-in .ga-d-kicker { opacity: 1; } #aiads .ga-detail.is-in .ga-d-title { opacity: 1; filter: none; } #aiads .ga-detail.is-in .ga-d-player { opacity: 1; transform: none; transition-delay: 650ms; } #aiads .ga-d-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #aiads .ga-d-play { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; } #aiads .ga-d-play span { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(255, 255, 255, .88); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; transform: scale(.7); transition: opacity 333ms var(--e-out), transform 333ms var(--e-out); } #aiads .ga-d-play span::after { content: ""; position: absolute; left: 31px; top: 25px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--ink); } #aiads .ga-d-player.is-paused .ga-d-play span { opacity: 1; transform: none; } #aiads .ga-d-sound { position: absolute; left: 14px; bottom: 16px; z-index: 2; height: 36px; padding: 0 14px 0 4px; gap: 2px; font-size: 11px; } #aiads .ga-d-sound svg { width: 30px; height: 30px; } #aiads .ga-d-sound[aria-pressed=false] { animation: ga-nudge 2.4s var(--e-out) 2s 2; } @keyframes ga-nudge { 0%, 100% { transform: none; } 12% { transform: scale(1.08); } 24% { transform: none; } } #aiads .ga-d-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 3px; background: rgba(255, 255, 255, .25); pointer-events: none; } #aiads .ga-d-progress span { position: absolute; inset: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); } #aiads .ga-d-info { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px 72px; max-width: 1100px; margin: 0 auto; padding: 72px 24px 64px; } #aiads .ga-meta { margin: 0 0 22px; display: grid; gap: 14px; } #aiads .ga-meta div { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; gap: 12px; } #aiads .ga-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } #aiads .ga-meta dd { margin: 0; font-size: 17px; font-weight: 700; } #aiads .ga-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } #aiads .ga-tags li { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 30px; font-size: 13px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(19, 22, 29, .12); } #aiads .ga-tags li:first-child { background: var(--lav); box-shadow: none; } #aiads .ga-d-desc { margin: 0 0 30px; font-size: clamp(20px, 2vw, 27px); line-height: 1.28; letter-spacing: -.015em; font-weight: 400; max-width: 34ch; } #aiads .ga-d-more { position: relative; padding: 24px 0 120px; } #aiads .ga-d-more-title { margin: 0 0 16px; padding: 0 24px; max-width: 1100px; margin-inline: auto; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } #aiads .ga-more-strip { --pad: max(20px, calc((100vw - 1100px) / 2 + 24px)); display: flex; gap: 12px; overflow-x: auto; padding: 4px var(--pad) 16px; scroll-padding-inline: var(--pad); scroll-snap-type: x proximity; scrollbar-width: none; } #aiads .ga-more-strip::-webkit-scrollbar { display: none; } #aiads .ga-more-card { flex: 0 0 auto; width: 170px; scroll-snap-align: start; } #aiads .ga-more-media { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; background: var(--mist); box-shadow: 0 0 4px 1px rgba(19, 22, 29, .1); } #aiads .ga-more-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 666ms var(--e-out); } @media (hover: hover) { #aiads .ga-more-card:hover .ga-more-poster { transform: scale(1.04); } } #aiads .ga-more-txt { display: grid; gap: 1px; padding: 10px 4px 0; font-size: 13px; line-height: 1.25; } #aiads .ga-more-txt span { color: var(--ink-3); } @media (min-width: 1280px) { #aiads .ga-more-card { width: 190px; } } @media (max-width: 767px) { #aiads .ga-d-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; height: auto; min-height: 100svh; padding: 76px 20px 28px; } #aiads .ga-d-kicker { position: static; margin-bottom: 8px; } #aiads .ga-d-title { position: static; transform: none; padding: 0; margin-bottom: 18px; font-size: clamp(34px, 11vw, 60px); } #aiads .ga-d-player { width: min(100%, calc(64svh * var(--ar))); } #aiads .ga-d-info { grid-template-columns: 1fr; gap: 28px; padding: 36px 20px 40px; } #aiads .ga-cta { height: 48px; } #aiads .ga-more-card { width: 128px; } } /* short landscape screens (phones on their side): keep the whole player, its sound button and progress bar on screen, and the stack clear of the caption */ @media (max-height: 500px) and (orientation: landscape) { #aiads .ga-root { top: 84px; bottom: 56px; } #aiads .ga-new-media { width: 44px; } #aiads .ga-d-hero { height: auto; min-height: 100svh; padding: 64px 20px 16px; } #aiads .ga-d-kicker { top: 31px; } #aiads .ga-d-player { width: min(calc(100vw - 40px), calc((100svh - 84px) * var(--ar)), 1100px); } #aiads .ga-detail::before { height: 60px; } } /* ------------------------------------------------------------------ cursor */ #ga-cursor { display: none; } @media (hover: hover) and (pointer: fine) { #aiads.has-cursor, #aiads.has-cursor * { cursor: none !important; } #ga-cursor { display: block; position: fixed; left: 0; top: 0; z-index: 9999; width: 8px; height: 8px; pointer-events: none; will-change: transform; } #ga-cursor.is-out { opacity: 0; } #ga-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; background: #13161d; transform: translate(-50%, -50%); transition: transform 333ms cubic-bezier(.333, 1, .666, 1), opacity 333ms cubic-bezier(.333, 1, .666, 1); } #ga-cursor.is-hover::after { transform: translate(-50%, -50%) scale(2); } #ga-cursor.is-drag::after { transform: translate(-50%, -50%) scale(3); background: #a78cfa; } #ga-cursor.is-tip::after { opacity: 0; } #ga-cursor::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; background: #fff; opacity: 0; transform: translate(-50%, -50%) scale(3); } #ga-cursor.is-press::before { animation: ga-press 666ms cubic-bezier(.333, 1, .666, 1); } #ga-cursor .ga-tip { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 34px; background: #13161d; color: #fff; font: 700 12px/1 "Clash Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(.5); transition: visibility 0s linear 333ms, opacity 333ms cubic-bezier(.333, 1, .666, 1), transform 333ms cubic-bezier(.333, 1, .666, 1); } #ga-cursor .ga-tip::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #d0ff71; } #ga-cursor.is-tip .ga-tip { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); transition: opacity 333ms cubic-bezier(.333, 1, .666, 1), transform 333ms cubic-bezier(.333, 1, .666, 1); } } @keyframes ga-press { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(5); } } /* ------------------------------------------------------------------ reduced motion */ @media (prefers-reduced-motion: reduce) { #aiads *, #aiads *::before, #aiads *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; } #aiads .ga-d-title { filter: none; } } /* ------------------------------------------------------------------ overlay states */ #aiads .ga-d-close { position: absolute; right: 20px; bottom: 20px; z-index: 60; } #aiads.is-detail > .ga-ui-bottom, #aiads.is-detail > .ga-new, #aiads.is-detail .ga-caption { opacity: 0 !important; pointer-events: none; } #aiads.is-grid .ga-caption, #aiads.is-info .ga-caption { opacity: 0 !important; } #aiads.is-grid .ga-new, #aiads.is-info .ga-new { opacity: 0; pointer-events: none; } #aiads .ga-page-detail .ga-detail, #aiads[data-view=detail] .ga-detail { z-index: 10; } #aiads.is-detail > .ga-ui-bottom, #aiads.is-detail > .ga-ui-bottom > *, #aiads.is-detail > .ga-new { pointer-events: none !important; visibility: hidden; } /* soft fades so scrolled detail content slides under the pills cleanly */ #aiads .ga-detail::before, #aiads .ga-detail::after { content: ""; position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none; } #aiads .ga-detail::before { top: 0; height: 104px; background: linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); } #aiads .ga-detail::after { bottom: 0; height: 64px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .85)); }