/*! * WSAVA Congress 2026 - landing styles * * Scope: rules apply only inside . * Until Phase 4 adds that body class, this stylesheet is loaded but inert. * * Layered AFTER css/app.css (Bootstrap 5 + legacy Dismeet styles); does not * override Dismeet selectors. Bootstrap grid utilities remain available. * * Palette sourced from img/logos/wsava-logo.svg + page mockups: * --wsava-navy: #252c69 primary * --wsava-pink: #ef426e accent * --wsava-blue: #2a75bb secondary * --vetexpert-teal: #00af9a cross-brand link to Vet Expert * * No new external dependencies. Uses font families already shipped in /fonts. */ .wsava-landing { --wsava-navy: #252c69; --wsava-pink: #ef426e; --wsava-blue: #2a75bb; --wsava-teal: #00af9a; --wsava-bg: #f4f6fb; --wsava-card: #ffffff; --wsava-text: #1f2533; --wsava-muted: #5b6376; --wsava-border: #e3e7f0; background: var(--wsava-bg); color: var(--wsava-text); font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* css/app.css sets html { font-size: 62.5% } (1rem = 10 px). Restate the base for the WSAVA scope so 1.6rem reads as 16 px and child rem values match the design intent. */ font-size: 1.6rem; line-height: 1.6; } /* Defensive: lock the top edge of the page when the landing scope is active. Bootstrap already zeros body margin; this also prevents any future
padding (header.php currently adds none) from pushing the hero down. */ body.wsava-landing, body.wsava-landing main[role="main"] { margin: 0; padding: 0; } /* Neutralize Dismeet's `p { font-size: 1.2rem }` leak (= 12 px under the 62.5% root) inside the landing scope so card/contact body copy reads at 16 px. */ .wsava-landing p { font-size: 1.6rem; line-height: 1.6; margin-bottom: 1rem; } .wsava-landing h1, .wsava-landing h2, .wsava-landing h3, .wsava-landing h4 { color: var(--wsava-navy); letter-spacing: 0.01em; font-weight: 800; } .wsava-landing a { color: var(--wsava-blue); } .wsava-landing a:hover { color: var(--wsava-pink); } /* ============================================================ * HERO (front-page only) * ============================================================ */ .wsava-hero { position: relative; /* Balanced full-bleed: tall enough to feel hero-like on big screens, capped so chips can still peek above the fold on common laptops. */ min-height: clamp(620px, 88svh, 860px); background: #0a0e1f center/cover no-repeat; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem 7rem; overflow: hidden; } .wsava-hero::after { content: ''; position: absolute; inset: 0; /* Darker top + bottom so the title stays readable over bright sky regions. */ background: linear-gradient(180deg, rgba(10,14,31,0.45) 0%, rgba(10,14,31,0.65) 100%); pointer-events: none; } .wsava-hero__inner { position: relative; z-index: 1; max-width: 880px; } .wsava-hero__eyebrow { color: #fff; font-size: 1.8rem; font-weight: 300; letter-spacing: 0.04em; margin-bottom: 0.25rem; /* Crisp + soft layered shadow keeps light eyebrow text legible over the brightest sky regions of the Warsaw photo. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(0, 0, 0, 0.45); } /* Selector is `.wsava-landing .wsava-hero__title` (specificity 0,2,0) so it wins against `.wsava-landing h1` (0,1,1). The hero title is an

in parts/landing/hero.php; without this defense the navy heading colour would override the white hero colour. */ .wsava-landing .wsava-hero__title { color: #fff; font-size: clamp(3.6rem, 6vw, 6rem); font-weight: 900; line-height: 1.05; margin: 0 0 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; /* Layered shadow: tight crisp shadow for edge legibility + soft halo for lift over busy/bright photo regions. */ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 4px 24px rgba(0, 0, 0, 0.5); } .wsava-hero__meta { color: #fff; font-size: 1.8rem; margin: 0 0 0.25rem; font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(0, 0, 0, 0.45); } .wsava-hero__meta strong { color: #fff; font-weight: 600; } .wsava-hero__lockup { margin-top: 2.25rem; display: inline-flex; flex-direction: row; align-items: center; gap: 1.25rem; } .wsava-hero__lockup-vetexpert { height: 110px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); } .wsava-hero__lockup-wsava { height: 46px; width: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); } /* ============================================================ * CHIP-NAV (round icon buttons; one row, used on every page) * ============================================================ */ .wsava-chipnav { background: transparent; margin: -3rem auto 0; position: relative; z-index: 2; padding: 0 1rem 2.5rem; } .wsava-chipnav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; list-style: none; margin: 0; padding: 0; } .wsava-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 0.5rem 0.4rem; border-radius: 50%; background: var(--wsava-card); color: var(--wsava-navy); text-decoration: none; box-shadow: 0 6px 18px rgba(37, 44, 105, 0.18); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; text-align: center; /* Labels stay legible; long labels wrap to 2 lines instead of shrinking. */ font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; word-break: normal; overflow-wrap: break-word; hyphens: none; } .wsava-chip__icon { width: 36px; height: 36px; display: block; margin-bottom: 4px; object-fit: contain; } .wsava-chip:hover, .wsava-chip:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(37, 44, 105, 0.28); color: var(--wsava-pink); outline: none; } .wsava-chip[aria-current="page"] { background: var(--wsava-navy); color: #fff; } .wsava-chip[aria-current="page"] .wsava-chip__icon { filter: brightness(0) invert(1); } /* Inner-page (non-front-page) chip-nav: no negative top margin */ .wsava-landing:not(.home) .wsava-chipnav { margin-top: 0; padding-top: 1.5rem; } @media (max-width: 575px) { .wsava-chip { width: 76px; height: 76px; font-size: 1.15rem; } .wsava-chip__icon { width: 28px; height: 28px; } /* Slightly shorter hero on phones so the chip row stays reachable. */ .wsava-hero { min-height: 82svh; } } /* ============================================================ * SECTION & CARD PRIMITIVES * ============================================================ */ .wsava-section { padding: 3rem 0 4rem; } .wsava-section__title { text-align: center; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wsava-navy); font-weight: 800; font-size: 2.8rem; margin: 0 0 0.25rem; } .wsava-section__title::after { content: ''; display: block; width: 60px; height: 3px; background: var(--wsava-pink); margin: 0.65rem auto 0; border-radius: 2px; } .wsava-card { background: var(--wsava-card); border: 1px solid var(--wsava-border); border-radius: 12px; padding: 1.5rem; box-shadow: 0 2px 8px rgba(20, 30, 60, 0.04); } .wsava-card__title { font-weight: 800; color: var(--wsava-navy); text-transform: uppercase; letter-spacing: 0.05em; font-size: 2rem; margin: 0 0 1rem; border-bottom: 1px dashed var(--wsava-border); padding-bottom: 0.75rem; } .wsava-card__title-icon { width: 22px; height: 22px; vertical-align: -4px; margin-right: 0.5rem; opacity: 0.85; } /* ============================================================ * AGENDA - vertical day-card timeline * ============================================================ */ .wsava-day { display: grid; grid-template-columns: 140px 1fr; margin: 0 0 1rem; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(20, 30, 60, 0.06); background: #fff; border: 1px solid var(--wsava-border); } .wsava-day__header { background: var(--wsava-bg); color: var(--wsava-navy); padding: 1.25rem 0.75rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 700; border-right: 1px solid var(--wsava-border); position: relative; } /* Calendar stamp at the top of every day-card header. Uses the existing black-silhouette icon shipped in img/icons/event.png. Colour reads close to navy on the light header background. */ .wsava-day__header::before { content: ''; display: block; width: 32px; height: 32px; margin: 0 auto 0.5rem; background: url('../img/icons/event.png') center/contain no-repeat; opacity: 0.9; } .wsava-day__date { font-size: 2.6rem; line-height: 1; color: var(--wsava-navy); } .wsava-day__month { font-size: 1.4rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.35rem; color: var(--wsava-navy); } .wsava-day__body { padding: 1rem 1.25rem; } .wsava-day__list { list-style: none; margin: 0; padding: 0; } .wsava-day__list li { position: relative; padding: 0.5rem 0 0.5rem 1.5rem; border-bottom: 1px dotted var(--wsava-border); font-size: 1.6rem; line-height: 1.5; } /* Bullet marker per mockup; pink dot anchored to the left of each row. */ .wsava-day__list li::before { content: '\2022'; color: var(--wsava-pink); position: absolute; left: 0.25rem; top: 0.4rem; font-size: 1.6rem; line-height: 1.5; } .wsava-day__list li:last-child { border-bottom: none; } .wsava-day__list strong { color: var(--wsava-navy); font-weight: 700; } @media (max-width: 575px) { .wsava-day { grid-template-columns: 1fr; } .wsava-day__header { padding: 0.75rem; flex-direction: row; gap: 0.65rem; border-right: none; border-bottom: 1px solid var(--wsava-border); } .wsava-day__header::before { margin: 0; } .wsava-day__date { font-size: 1.8rem; } .wsava-day__month { margin-top: 0; } } /* ============================================================ * CONTACTS / TRANSPORT - icon + value rows * ============================================================ */ .wsava-contact { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0; color: var(--wsava-text); text-decoration: none; } .wsava-contact__icon { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; opacity: 0.75; } .wsava-contact:hover { color: var(--wsava-pink); } /* ============================================================ * BUTTONS / LINKS * ============================================================ */ .wsava-btn { display: inline-block; padding: 1rem 2rem; border-radius: 999px; background: var(--wsava-pink); color: #fff; font-size: 1.5rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; transition: background 0.18s ease, color 0.18s ease; } .wsava-btn:hover, .wsava-btn:focus-visible { background: var(--wsava-navy); color: #fff; outline: none; } .wsava-btn--ghost { background: transparent; color: var(--wsava-navy); border: 1px solid var(--wsava-navy); } .wsava-btn--ghost:hover, .wsava-btn--ghost:focus-visible { background: var(--wsava-navy); color: #fff; } /* ============================================================ * HOTEL PAGE - two-column section * * Mobile (< 992 px): info card on top, gallery below as a 2x2 thumbnail * grid (preserves the previously-good mobile layout). * Desktop (>= 992 px): 40 / 60 two-column grid, capped at 1200 px wide. * The gallery becomes a 3-column sub-grid where the * first image spans the full width as a featured * photo (16:9) and the other three sit below as * supporting tiles (4:3). The info card stretches to * match the gallery height; the CTA pins to the * bottom so the column reads as intentional rather * than padded with empty space. * ============================================================ */ .wsava-hotel { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1200px; margin-left: auto; margin-right: auto; } .wsava-hotel__info { display: flex; flex-direction: column; } .wsava-hotel__cta { margin-top: auto; margin-bottom: 0; padding-top: 1rem; } .wsava-hotel__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; } .wsava-hotel__gallery > img { width: 100%; height: auto; display: block; border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; } @media (min-width: 992px) { .wsava-hotel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; align-items: stretch; } .wsava-hotel__gallery { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .wsava-hotel__gallery > img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; border-radius: 12px; } } /* ============================================================ * UTILITIES * ============================================================ */ .wsava-tbc::after { content: ' (TBC)'; color: var(--wsava-muted); font-style: italic; font-weight: 400; margin-left: 0.25rem; } .wsava-mb-section { margin-bottom: 2.5rem; } .wsava-text-muted { color: var(--wsava-muted); } /* ============================================================ * INNER-PAGE HEADER MARK (Vet Expert + WSAVA lockup, horizontal) * ============================================================ */ .wsava-pageheader { background: #fff; border-bottom: 1px solid var(--wsava-border); padding: 1rem 1rem; text-align: center; } .wsava-pageheader__lockup { display: inline-flex; flex-direction: row; align-items: center; gap: 1.25rem; text-decoration: none; color: inherit; transition: opacity 0.18s ease; } .wsava-pageheader__lockup:hover, .wsava-pageheader__lockup:focus-visible { opacity: 0.85; outline: none; } .wsava-pageheader__lockup-vetexpert { display: block; height: 110px; width: auto; } .wsava-pageheader__lockup-wsava { display: block; height: 46px; width: auto; } /* When the inner-page header is mounted directly above the chip-nav, tighten the chip-nav top padding so the two strips read as one band. */ .wsava-pageheader + .wsava-chipnav { padding-top: 1rem; } /* ============================================================ * FLOOR PLAN + GOOGLE MAP (WSAVA 2026 detail page) * ============================================================ */ .wsava-venue-block__floorplan { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--wsava-border); } .wsava-venue-block__floorplan-title { margin-bottom: 1rem; } .wsava-map-embed--inline { margin-bottom: 0; } .wsava-floorplan__figure { margin: 0; } .wsava-floorplan__link { display: block; cursor: zoom-in; text-decoration: none; overflow-x: auto; } .wsava-floorplan__img { display: block; width: 75%; max-width: 75%; height: auto; margin: 0 auto; } .wsava-floorplan__figure figcaption { margin-top: 1rem; text-align: center; } .wsava-map-embed__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0.5rem; border: 1px solid var(--wsava-border); } .wsava-map-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }