/* The top ad band (_ad_rail.html + static/js/ads.js): full width, every ad at one height and its own shape,
the current one in the middle, the next and previous ones peeking in at the sides, sliding sideways.
Pictures are never cropped or stretched; 3:1 (2400 x 800) fills the middle best. */
:root { --top-banner-ratio: 3 / 1; }
.ad-band,
.home-refresh .ad-band {
--band-h: clamp(128px, 18.5vw, 260px);
--band-gap: 18px;
--band-cap: min(1240px, calc(100vw - 128px));
position: relative;
margin: 0;
padding: 14px 0;
border: 0;
border-bottom: 1px solid #e1eaf5;
background: linear-gradient(180deg, #fbfdff 0%, #eef5ff 100%);
}
.ad-band-viewport {
overflow: hidden;
touch-action: pan-y;
/* the peeking ads fade out toward the window edges */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ad-band-track {
display: flex;
justify-content: center; /* before the script runs, or with a single ad */
gap: var(--band-gap);
height: var(--band-h);
transition: transform 700ms cubic-bezier(.22, .8, .24, 1);
will-change: transform;
}
.ad-band[data-ready] .ad-band-track { justify-content: flex-start; }
.ad-band-track.is-instant,
.ad-band-track.is-instant > * { transition: none; }
.ad-band-slide {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: var(--band-h);
max-width: var(--band-cap);
border-radius: 14px;
-webkit-user-drag: none;
transition: opacity 500ms ease, transform 500ms ease, filter 500ms ease;
}
.ad-band-image {
display: block;
width: auto;
height: auto;
max-width: var(--band-cap);
max-height: var(--band-h);
border-radius: 14px;
background: #fff;
box-shadow: 0 0 0 1px #d9e6f4, 0 10px 26px -14px #17366540;
-webkit-user-drag: none;
user-select: none;
}
/* Once it is a slider, the ads at the sides step back so the middle one reads first. */
.ad-band[data-ready] .ad-band-slide:not(.is-current) { opacity: .5; transform: scale(.93); filter: saturate(.85); cursor: pointer; }
.ad-band[data-ready] .ad-band-slide:not(.is-current):hover { opacity: .75; }
.ad-band-slide:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ad-band-arrow {
position: absolute;
top: 50%;
z-index: 3;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid #d9e6f4;
border-radius: 50%;
background: #fffffff2;
color: #203958;
box-shadow: 0 6px 18px -8px #17366566;
cursor: pointer;
opacity: 0;
transform: translateY(-50%);
transition: opacity 200ms ease, background 200ms ease;
}
.ad-band-arrow[hidden] { display: none; }
.ad-band-prev { left: max(16px, calc(50% - var(--band-cap) / 2 - 22px)); }
.ad-band-next { right: max(16px, calc(50% - var(--band-cap) / 2 - 22px)); }
.ad-band-arrow .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.ad-band:hover .ad-band-arrow,
.ad-band-arrow:focus-visible { opacity: 1; }
.ad-band-arrow:hover { background: #fff; color: var(--blue-dark); }
.ad-band-arrow:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (hover: none) { .ad-band-arrow { display: none; } }
@media (max-width: 620px) {
.ad-band,
.home-refresh .ad-band {
--band-h: 140px;
--band-gap: 10px;
--band-cap: calc(100vw - 48px);
padding: 10px 0;
}
.ad-band-viewport { -webkit-mask-image: none; mask-image: none; }
.ad-band-image, .ad-band-slide { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.ad-band-track, .ad-band-slide { transition: none; }
}
/* Keep dimension guidance outside the shallow banner so it stays readable. */
.ad-upload-guide { margin: 0 0 12px; padding: 14px 16px; border: 1px solid #dbe7f4; border-radius: 10px; background: #f3f8ff; }
.ad-upload-guide strong { display: block; color: #204879; font-size: 16px; line-height: 1.6; }
.ad-upload-guide p { margin: 6px 0 0; color: #5f6e86; font-size: 13px; line-height: 1.7; }
.ad-preview-spec { margin: 0 24px 16px; color: #425b7e; font-size: 14px; font-weight: 600; line-height: 1.6; }
.ad-preview-spec span { display: block; }
.ad-preview-spec [data-preview-placement] { color: #203958; margin-bottom: 4px; }
.ad-preview-spec [data-image-dimensions] { margin-top: 4px; color: #5f6e86; font-size: 13px; font-weight: 400; }
.ad-preview-spec [hidden] { display: none; }
.ad-forum-preview[data-placement="banner"] .ad-image-preview { aspect-ratio: var(--top-banner-ratio); border: 0; box-shadow: 0 0 0 1px #d5deea; }
.ad-forum-preview[data-placement="banner"] .ad-preview-board,
.ad-forum-preview[data-placement="banner"] .ad-preview-board + .ad-mock-rows { display: none; }
.ad-forum-preview[data-placement="rail"] .ad-image-preview { aspect-ratio: 1 / 3; max-width: 180px; margin-inline: auto; }
.ad-forum-preview[data-placement="dining"] .ad-image-preview { aspect-ratio: 3 / 1; }
.ad-forum-preview[data-placement="banner"] .ad-image-preview .ad-tag { display: none; }
.ad-forum-preview .ad-image-preview img { display: block; object-fit: contain; }
.ad-forum-preview .ad-image-preview img[hidden] { display: none; }
.ad-forum-preview .ad-image-preview figcaption[hidden] { display: none; }
.ad-forum-preview[data-placement="banner"] .ad-image-preview figcaption .icon { width: 20px; height: 20px; }
.ad-preview-example { display: block; margin: 14px 24px 0; font-size: 13px; color: #245abb; text-decoration: underline; text-underline-offset: 3px; }
.ad-preview-example[hidden] { display: none; }
.ad-template-download { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 24px 24px; padding: 12px 16px; border: 1px solid #c7d9f5; border-radius: 10px; color: #2155a7; background: #f1f6ff; font-size: 14px; font-weight: 650; }
.ad-template-download:hover { background: #e7f0ff; border-color: #91b4ed; }
.ad-template-download .icon { width: 17px; height: 17px; transform: rotate(90deg); }
@media (max-width: 620px) {
.ad-preview-spec { margin-inline: 20px; }
.ad-preview-example { margin-inline: 20px; }
.ad-template-download { margin-inline: 20px; }
}