/* ============================================================ SALESFORCE / DREAMFORCE | Event Gallery (/e/ pages) Pop Life Photo | Customize Event > Gallery Design CSS The gallery's own custom-CSS slot, which is SEPARATE from the microsite's (docs/breeze.md §6): reskinning one leaves the other on its old theme, and that is how these two pages spent a day looking like two different products. /events//microsite-settings -> the /s/ page /events//gallery-settings -> the /e/ page Reskinned 2026-08-19 to match `breeze/microsite.css` value for value: the same sky, the same ribbon strip, the same arced panel from the supplied mask, the same ratios. A guest goes quiz -> camera -> microsite -> gallery, so all four have to be one design. Change them together. THE MARKUP IS NEARLY the microsite's shape, and the one difference decides a colour: body > .gallery-page > .header + .gallery body > .footer <- NOT in the wrapper The microsite's footer is INSIDE `.session-page` and therefore inside the panel, so its copy is navy. The gallery's footer is a SIBLING of `.gallery-page`, so it lands on the artwork below the arc, and its copy is white with a shadow — the same as the quiz's. Measured, not assumed: the footer's own rect starts where the wrapper's ends. There is no panel here any more: the cards sit straight on the artwork. The microsite still has one, so the two pages are NOT symmetrical -- do not port a panel rule across from it. TWO MORE THINGS DIFFER FROM THE MICROSITE, both structural: 1. `.gallery-header` also carries `.container-fluid`, so it is `width:100%` and `display:inline-block` alone will not shrink it — it needs `width:auto !important`. It no longer needs to: the pale plate that used to sit there is gone, because a pale plate on a pale panel is nothing at all. 2. `` carries an INLINE `min-height:100vh; display:flex; flex-direction:column`. Inline styles beat any stylesheet rule short of !important, so the wrapper is given `flex:1 0 auto` to fill rather than fighting the height. The measure is wider here than on the microsite — a grid of sixteen photos is not one card — but the arc and the corner radius stay ratios OF that width, so the panel is the same drawing at a different size. NOTE: this event's header carries a logo only; .event-title renders empty. The type rules below are kept for whenever a title or description is switched on. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); :root { /* Sampled off the supplied artwork, not eyeballed. Identical to microsite.css and to breeze/survey.css. */ --sf-blue-900: #022AC0; --sf-indigo: #3B41D2; --sf-violet: #7659E3; --sf-orchid: #D27DFF; --sf-cyan: #3FAEFD; --sf-blue-700: #0045DB; --sf-blue: #0176D3; --sf-navy: #032D60; --sf-muted: #5C6B8A; --sf-sans: "Poppins", "Montserrat", Arial, sans-serif; /* The ribbon strip, absolute because this stylesheet is served from cloud.breezesoftware.com onto a page on sharethis.co — a relative path resolves against neither host that has the file. */ --sf-waves: url("https://wind-m3yb.vercel.app/vendor/df-waves.png"); /* 1200px rather than the microsite's 820: the gallery holds a masonry grid, and at 820 a desktop viewer gets only two columns. This now sets the grid's width directly rather than a panel's. */ --sf-measure: 1200px; --sf-panel-w: min(var(--sf-measure), calc(100vw - 24px)); } @media (max-width: 899px) { :root { --sf-measure: 620px; } } @media (max-width: 599px) { :root { --sf-measure: 520px; } } /* Page: the Dreamforce artwork ------------------------------ */ html { background: var(--sf-blue-900); } body { /* Four layers, back to front: the ribbon strip pinned to the foot, the orchid circle off the left edge, the pale-blue shape off the right, and the sky gradient under all of it. `fixed` on every layer so the composition is framed by the screen and does not slide as a long gallery scrolls — which matters more here than anywhere else, since this is the one page that really is long. */ background: var(--sf-waves) bottom center / 100% auto no-repeat, radial-gradient(60% 34% at -10% 52%, var(--sf-orchid) 0 52%, rgba(210,125,255,0) 82%), radial-gradient(56% 40% at 110% 64%, #86C6FF 0 44%, rgba(134,198,255,0) 82%), linear-gradient(180deg, var(--sf-blue-900) 0%, #1F36C9 10%, var(--sf-indigo) 15%, #594DDA 20%, var(--sf-violet) 25%, #9464EC 30%, #B070F4 35%, #CE7CFD 40%, var(--sf-orchid) 47%, #9CCDF4 60%, var(--sf-cyan) 72%, #0089F5 84%, var(--sf-blue-700) 100%) !important; background-attachment: fixed, fixed, fixed, fixed !important; background-repeat: no-repeat !important; color: var(--sf-navy); font-family: var(--sf-sans); } /* The panel ------------------------------------------------- */ .gallery-page { position: relative; background: transparent; /* body is an inline-styled flex column; this fills it without restating 100vh. */ flex: 1 0 auto; width: 100%; max-width: var(--sf-panel-w); margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; /* Was `calc(var(--sf-gap-bot) + var(--sf-arc))` to clear the arc. With no panel there is no arc to clear, and leaving it stranded ~170px of empty artwork under the last row. */ padding: 0 1.2rem 18px; } /* No panel. The pale ::before that used to sit behind the whole page was removed 2026-08-20 -- the cards read better straight on the artwork, and the wave field is the point of the background. It is in git history if it is ever wanted back. What went with it: --sf-gap-bot, --sf-arc, --sf-radius, --sf-panel and --sf-arc-shape were only ever consumed by that rule. --sf-measure stays, because --sf-panel-w still sets the grid's max width. */ .gallery-page > * { position: relative; z-index: 1; } /* Header: the logo, on the artwork -------------------------- No plate behind it. The mark is Salesforce cyan and the page under it is the deep blue/violet top of the gradient, which separates them well enough; a pale plate here would put back a version of the shape that was just removed. The theme pads .header 64/80, which left ~144px of dead air under a logo-only header — pull it in. */ .header { background: transparent; position: relative; text-align: center; padding: 22px 0 6px !important; } .gallery-header { display: block; width: auto !important; max-width: 100%; margin: 0 auto; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; text-align: center; } .event-logo { height: 92px; display: block; margin: 0 auto; } /* Type, for whenever the title/description are switched on --- */ .event-title h1 { color: var(--sf-navy); font-family: var(--sf-sans); font-weight: 800; font-size: clamp(22px, 5vw, 32px); letter-spacing: -0.02em; margin-top: 14px; } .event-title h2, .event-title h2 a { color: var(--sf-navy); font-family: var(--sf-sans); font-weight: 600; font-size: 15px; letter-spacing: .10em; text-transform: uppercase; } /* The empty-gallery message. Navy, not white: it used to sit on a blue page and now sits on the panel — the same trip the microsite's QR caption made twice. */ .placeholder { font-family: var(--sf-sans); color: var(--sf-navy); font-size: 20px; text-shadow: none; } /* Scroll arrows: hidden ------------------------------------- */ .arrow, .arrow-up, .arrow-down { display: none !important; } /* The grid takes the panel's measure ------------------------ `.gallery > .container` is Bootstrap's, so it caps itself around 1140px and adds its own gutters. Inside a panel that already sets the measure and its own padding, that is a second measure fighting the first. */ .gallery { padding-top: 6px !important; } .gallery .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Photo tiles: white cards on the panel --------------------- */ /* No mat. The white frame around each photo was this element's own background showing through 7px of padding, not a border property -- `border: none` was already set and removing it changed nothing. Transparent + zero padding is what actually takes it off. The lift moves to the , so the shadow follows the picture's corners rather than a wrapper rect 7px larger with a different radius. */ .mm-masonry__item { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; transition: transform .18s ease; } .mm-masonry__item:hover { transform: translateY(-3px); } .mm-masonry__img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 10px 26px rgba(11, 42, 99, .22); } /* Footer: OUTSIDE the panel, on the artwork, so white ------- It is a sibling of .gallery-page, not a child, so it sits below the arc on the ribbons — dark blue where the microsite's footer sits on pale. White with a soft shadow, so it holds over both the light crest of a ribbon and the deep blue between them: the same treatment the quiz's footer gets, for the same reason. */ .footer { background: transparent; border-top: none; margin-top: 0; padding: 14px 10px 18px; text-align: center; } .footer-content { color: rgba(255, 255, 255, .88); font-family: var(--sf-sans); font-size: 14px; letter-spacing: .03em; text-shadow: 0 1px 10px rgba(2, 20, 96, .55); } .footer-content a { color: #FFFFFF; font-weight: 700; text-decoration: none; } .footer-content a:hover { text-decoration: underline; } /* Session filter stays hidden (matches current setup) -------- */ .session-filter, .session-filter a { color: transparent !important; } @media (max-width: 560px) { .event-logo { height: 76px; } .header { padding: 16px 0 4px !important; } } @media (prefers-reduced-motion: reduce) { .mm-masonry__item { transition: none; } }