/* ── PARIS GIVEAWAY A/B BANNER ── * Two promo placements tested 50/50 on Home (see `Home.astro` for the * pre-paint variant assignment). Both are hidden by default and one is * revealed by the `data-ays-banner` attribute the inline head script * sets on before first paint (no flicker): * * data-ays-banner="A" → variant="fixed" (rectangular bottom bar) * data-ays-banner="B" → variant="hero" (rectangular in-hero bar) * * `data-ays-banner-closed` (set by the close button, persisted in * localStorage) permanently hides variant A. No-JS visitors get the * attribute-less default → neither banner shows. * * Layout: horizontal on desktop (head left, actions right); stacks on * mobile (CTA drops to its own full-width row). Both outer bars are * rounded on desktop (100px pill) and go square on mobile — variant A * because it turns full-bleed, variant B by design. * Colors come from AYS semantic tokens; the one decorative gradient * endpoint and the scrim that have no token are hardcoded in OKLCH and * logged in docs/bds-coverage-gaps.md. */ .ays-paris-banner-fixed, .ays-paris-banner-hero { display: none; } html[data-ays-banner="A"]:not([data-ays-banner-closed]) .ays-paris-banner-fixed { display: flex; } html[data-ays-banner="B"] .ays-paris-banner-hero { display: flex; } /* ── SHARED STRUCTURE ── */ .ays-paris-banner-inner { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 12px; } .ays-paris-banner-head { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; } .ays-paris-banner-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; } .ays-paris-banner-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ays-paris-banner-icon img { width: 20px; height: 20px; display: block; } .ays-paris-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ays-paris-banner-eyebrow { font-family: var(--font-marketing-body); font-size: 10px; line-height: 12px; letter-spacing: 0.05px; color: var(--ays-text-inverse-secondary); } .ays-paris-banner-title { font-family: var(--font-marketing-heading); font-weight: 600; font-size: 16px; line-height: 20px; letter-spacing: -0.15px; color: var(--ays-text-inverse-primary); /* Single line in the horizontal layout so the bar height is * deterministic and the fixed banner's footer reserve always clears * it. Allowed to wrap again on mobile, where the layout stacks. */ white-space: nowrap; } .ays-paris-banner-cta { display: inline-flex; align-items: center; justify-content: center; padding: 8px 24px; border-radius: 999px; font-family: var(--font-marketing-body); font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.075px; color: var(--ays-text-inverse-primary); text-decoration: none; white-space: nowrap; transition: filter 0.2s ease; } .ays-paris-banner-cta:hover { filter: brightness(1.08); } .ays-paris-banner-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ays-text-inverse-secondary); cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .ays-paris-banner-close:hover { color: var(--ays-text-inverse-primary); background: oklch(100% 0 0 / 0.12); } /* ── VARIANT A — FIXED BOTTOM BAR ── * Rounded pill on desktop (100px, reads as a pill at the single-row * height); goes square + full-bleed on mobile. Brand-gradient background * with a soft scrim for text legibility, primary-gradient CTA, dismiss * button beside it. Centered like the cookie banner; 768px wide, * shrinking only when the viewport can't hold it plus the side gutters. */ .ays-paris-banner-fixed { position: fixed; bottom: 24px; left: 16px; right: 16px; margin-inline: auto; width: min(768px, calc(100% - 32px)); align-items: center; padding: 8px 16px 8px 8px; border-radius: 100px; border: 1px solid var(--ays-button-bg-primary); /* Brand gradient built entirely from tokens; a hardcoded 8% black * scrim layer sits on top for legibility (logged in * docs/bds-coverage-gaps.md). */ background: linear-gradient(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.08)), linear-gradient( 120deg, var(--ays-button-bg-primary) 0%, var(--ays-button-bg-secondary) 50%, var(--ays-button-bg-secondary-bottom) 100% ); z-index: 150; box-shadow: 0 8px 24px oklch(54.18% 0.2112 314.87 / 0.35); } .ays-paris-banner-fixed .ays-paris-banner-icon { background: var(--ays-container-base); } .ays-paris-banner-fixed .ays-paris-banner-cta { background: linear-gradient( 180deg, var(--ays-button-bg-primary), var(--ays-button-bg-primary-bottom) ); } /* Lift the fixed banner above the cookie banner while consent is * pending (the cookie banner is toggled via the `hidden` attribute). * The cookie banner keeps a higher z-index (200 vs 150), so it stays * usable on top even if this clearance estimate is imperfect. */ body:has(.ays-cookie-banner:not([hidden])) .ays-paris-banner-fixed { bottom: 150px; } /* Reserve space so the pinned bar never permanently covers the footer. * Applied only when variant A is active and not dismissed. */ html[data-ays-banner="A"]:not([data-ays-banner-closed]) body { padding-bottom: 104px; } /* Gentle entrance — motion-safe only. */ @media (prefers-reduced-motion: no-preference) { html[data-ays-banner="A"]:not([data-ays-banner-closed]) .ays-paris-banner-fixed { animation: ays-paris-banner-in 0.4s ease both; } @keyframes ays-paris-banner-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } } /* ── VARIANT B — IN-HERO BAR ── * Rectangular translucent surface over the dark hero, gradient icon * circle, secondary-gradient CTA. Breaks out of the hero's left text * column (`grid-column: 1 / -1`, `order: -2`) to span the full hero and * center a 768px box (Figma width) above the headline. */ .ays-paris-banner-hero { grid-column: 1 / -1; order: -2; justify-self: center; width: 100%; max-width: 768px; align-items: center; padding: 12px 12px; /* Rounded outer bar: 100px on desktop (reads as a pill at the * single-row height), 12px on mobile where it stacks taller. Variant A * matches the 100px on desktop but drops to square (full-bleed) on * mobile. */ border-radius: 100px; background: var(--ays-container-ghost-soft-inverse); border: 1px solid var(--ays-border-base-soft-inverse); } .ays-paris-banner-hero .ays-paris-banner-icon { /* Brand gradient (#9b38c1 → #fd4ea3); the pink endpoint has no * semantic token — logged in docs/bds-coverage-gaps.md. */ background: linear-gradient( 93deg, var(--ays-button-bg-primary) 0%, oklch(69.1% 0.2225 354.81) 100% ); } .ays-paris-banner-hero .ays-paris-banner-cta { background: linear-gradient( 180deg, var(--ays-button-bg-secondary), var(--ays-button-bg-secondary-bottom) ); } /* The full-span banner introduces a second grid row; tighten the row * gap so the promo doesn't push the headline too far down. */ html[data-ays-banner="B"] .ays-home-hero-container { row-gap: 40px; } /* ── RESPONSIVE — stack the CTA onto its own row (Figma 303:444) ── */ @media (max-width: 768px) { .ays-paris-banner-inner { flex-direction: column; align-items: stretch; row-gap: 12px; } .ays-paris-banner-actions { width: 100%; } .ays-paris-banner-cta { flex: 1 1 auto; } .ays-paris-banner-hero { border-radius: 12px; } .ays-paris-banner-title { white-space: normal; } .ays-paris-banner-fixed { /* Full-bleed bottom bar on mobile: flush to the edges and the * bottom, no outer gutters or margin, so the desktop 100px pill * radius is dropped back to square here. Internal padding stays so * the content doesn't touch the screen edges. */ bottom: 0; left: 0; right: 0; width: 100%; margin-inline: 0; padding: 12px; border-radius: 0; } html[data-ays-banner="A"]:not([data-ays-banner-closed]) body { padding-bottom: 148px; } body:has(.ays-cookie-banner:not([hidden])) .ays-paris-banner-fixed { bottom: 180px; } }