/* ================================================== OXFORD UNION SOCIETY — SITE CSS OVERRIDES This should be the contents of the global CSS file for Wild Apricot. This is the single source of truth for all visual overrides. Do not edit theme .less files directly. Brand colours (Oxford Union Society): Union Blue var(--ou-blue) — official brand blue (documents, crest) Nav Dark var(--ou-navy) — nav & header background (ToucanTech match) Union Gold var(--ou-gold) — accent, hover, borders Union Red var(--ou-red) — accent only, not backgrounds White var(--ou-white) Black var(--ou-black) Typography: Nav / UI Open Sans (sans-serif) Headings EB Garamond, Garamond, Georgia, serif Body EB Garamond, Garamond, Times New Roman, serif Last updated: July 2026 ================================================== */ /* ═══════════════════════════════════════════════════ FONTS — load before everything else ═══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Open+Sans:wght@300;400;600&display=swap'); :root { --ou-blue: #2B598D; --ou-navy: #161F38; --ou-gold: #B49761; --ou-red: #7A221F; --ou-white: #FFFFFF; --ou-black: #000000; --ou-ink: #111111; --ou-cream: #F7F3EA; } /* ═══════════════════════════════════════════════════ SECTION 1 — DESKTOP NAV ═══════════════════════════════════════════════════ */ .WaGadgetMenuHorizontal .stickyMenu, .WaGadgetMenuHorizontal .menuBackground, #id_Header { background-color: var(--ou-navy) !important; background-image: none !important; transition: none !important; opacity: 1 !important; } .WaGadgetMenuHorizontal .stickyMenu, .WaGadgetMenuHorizontal .menuBackground { min-height: 48px !important; height: 48px !important; } .WaGadgetMenuHorizontal .menuInner { display: flex !important; align-items: center !important; height: 100% !important; } .WaGadgetMenuHorizontal .menuInner ul.firstLevel { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; max-width: 960px !important; margin: 0 auto !important; padding: 0 !important; } .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li { display: flex !important; align-items: center !important; height: 100% !important; } .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item { display: flex !important; align-items: center !important; height: 100% !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a > span { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.875rem !important; font-weight: 300 !important; color: var(--ou-white) !important; text-transform: none !important; letter-spacing: 0.5px; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item:hover > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item:hover > a > span { color: var(--ou-gold) !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item > a > span { color: var(--ou-white) !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item { border-bottom: 2px solid var(--ou-gold) !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item > a > span { color: var(--ou-gold) !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item:hover > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li.sel > .item:hover > a > span { color: var(--ou-gold) !important; } .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:active, .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:focus, .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:visited, .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a:active, .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a:focus { color: var(--ou-white) !important; } .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 4px !important; } .WaGadgetMenuHorizontal .menuInner ul li .item > a, .WaGadgetMenuHorizontal .menuInner ul li .item > a * { color: inherit !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.secondLevel > li > .item > a { background-color: var(--ou-navy) !important; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.875rem !important; font-weight: 300 !important; color: var(--ou-white) !important; } /* ─── Fix: cover WA's default blue on the dropdown container itself ─── */ .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.secondLevel, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.secondLevel > li, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.secondLevel > li > .item { background-color: var(--ou-navy) !important; border-color: var(--ou-navy) !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.secondLevel > li > .item:hover > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.secondLevel > li:hover > .item > a { background-color: var(--ou-navy) !important; color: var(--ou-gold) !important; } @media (max-width: 1200px) { .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a { font-size: 0.8rem !important; } } @media (max-width: 767px) { .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li > .item > a > span { color: var(--ou-white) !important; } .WaGadgetMenuHorizontal .stickyMenu, .WaGadgetMenuHorizontal .menuBackground { background-color: var(--ou-navy) !important; } } /* ─── JOIN CTA — subtle gold accent ─── */ .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:last-child { margin-left: auto !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li:last-child > .item > a { border: 1px solid var(--ou-gold) !important; background: transparent !important; color: var(--ou-white) !important; padding: 0.3rem 1rem !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li:last-child > .item > a > span { border: 0 !important; background: transparent !important; color: inherit !important; padding: 0 !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li:last-child > .item:hover > a, .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li:last-child > .item:hover > a > span { background: transparent !important; color: var(--ou-gold) !important; } .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .menuInner ul.firstLevel > li:last-child.sel > .item { border-bottom: none !important; } /* ═══════════════════════════════════════════════════ SECTION 2 — MOBILE PANEL ═══════════════════════════════════════════════════ */ .mobilePanel, .mobilePanel .mobilePanelButton, .mobilePanel .mobilePanelButton.buttonMenu, .mobilePanel .mobilePanelButton.buttonLogin { background-color: var(--ou-navy) !important; background: var(--ou-navy) !important; border: none !important; box-shadow: none !important; } .mobilePanel { border-bottom: 2px solid var(--ou-gold) !important; } .mobilePanel .mobilePanelButton.buttonMenu { border-right: 1px solid rgba(180, 151, 97, 0.4) !important; } .mobilePanel .mobilePanelButton.buttonLogin { border-left: 1px solid rgba(180, 151, 97, 0.4) !important; } .mobilePanel .mobilePanelButton { color: var(--ou-white) !important; } .mobilePanel .mobilePanelButton:hover { background-color: rgba(180, 151, 97, 0.15) !important; color: var(--ou-gold) !important; } html body .mobilePanel .menuInner, html body .mobilePanel .menuInner ul, html body .mobilePanel .menuInner ul li { background-color: var(--ou-navy) !important; background: var(--ou-navy) !important; } html body .mobilePanel .menuInner ul.firstLevel > li > .item > a { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.85em !important; font-weight: 300 !important; color: var(--ou-white) !important; text-transform: none !important; letter-spacing: 0.06em !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; padding: 0.95em 1.25em !important; display: block !important; background-color: transparent !important; } html body .mobilePanel .menuInner ul.firstLevel > li > .item > a:hover { background-color: rgba(180, 151, 97, 0.12) !important; color: var(--ou-gold) !important; } html body .mobilePanel .menuInner ul.firstLevel > li.sel > .item > a { color: var(--ou-gold) !important; font-weight: 600 !important; } html body .mobilePanel .menuInner ul.secondLevel > li > .item > a { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.8em !important; font-weight: 300 !important; color: rgba(255, 255, 255, 0.85) !important; text-transform: none !important; letter-spacing: 0.03em !important; padding: 0.7em 2.2em !important; display: block !important; background-color: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } html body .mobilePanel .menuInner ul.secondLevel > li > .item > a:hover { color: var(--ou-gold) !important; } html body .mobilePanel .loginInner { background-color: var(--ou-navy) !important; background: var(--ou-navy) !important; border-top: 1px solid var(--ou-gold) !important; padding: 1em 1.2em !important; } html body .mobilePanel .loginInner input[type="text"], html body .mobilePanel .loginInner input[type="password"] { background-color: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(180, 151, 97, 0.4) !important; color: var(--ou-white) !important; border-radius: 3px !important; } html body .mobilePanel .loginInner input[type="submit"] { background-color: var(--ou-gold) !important; color: var(--ou-white) !important; border: none !important; } html body .mobilePanel .loginInner a { color: rgba(255, 255, 255, 0.7) !important; } html body .mobilePanel .loginInner a:hover { color: var(--ou-gold) !important; } /* ═══════════════════════════════════════════════════ SECTION 3 — GLOBAL TYPOGRAPHY ═══════════════════════════════════════════════════ */ body, body p, body li, body td, body th { font-family: 'EB Garamond', 'Garamond', 'Times New Roman', serif !important; } body label, body span:not(.fa):not([class*="icon"]) { font-family: inherit !important; } h1, h2, h3, h4, h5, h6, .WaGadgetHeadline, .WaGadgetHeadline span, .gadgetTitle, .gadgetTitle span { font-family: 'EB Garamond', 'Garamond', Georgia, serif !important; font-weight: 500 !important; } a, a:visited, a:hover { font-family: inherit !important; } input, select, textarea, button { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; } .WaGadgetLogin label, .WaGadgetSearch input, .WaGadgetSearch button, .buttonPrimary, .buttonSecondary, .button { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; } /* ═══════════════════════════════════════════════════ SECTION 4 — PAGE-LEVEL OVERRIDES ═══════════════════════════════════════════════════ */ /* ─── Header background ─── */ #id_Header { background-color: var(--ou-navy) !important; } /* ─── Welcome heading — prevent WA uppercase override ─── */ .ou-w__heading { text-transform: none !important; } /* ═══════════════════════════════════════════════════ SECTION 5 — UPCOMING EVENTS LIST List gadget class: .ou-events Confirmed HTML structure (June 2026): .WaGadgetUpcomingEvents.ou-events .gadgetStyleBody ul li[.last] .title > a .date > span .location > span Note: heading block styled separately ═══════════════════════════════════════════════════ */ /* ─── EVENTS LIST BLOCK ─── */ .ou-events { position: relative !important; background-color: var(--ou-navy) !important; overflow: hidden !important; padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 8vw, 8rem) clamp(3rem, 6vw, 5rem) !important; width: 100% !important; box-sizing: border-box !important; } /* Old Library background image */ .ou-events::before { content: "" !important; position: absolute !important; inset: 0 !important; background-image: url('/resources/Pictures/Old%20Library%202014%20Apr%20009.JPG') !important; background-size: cover !important; background-position: center 30% !important; opacity: 0.10 !important; filter: saturate(0.35) contrast(1.1) !important; pointer-events: none !important; } /* Gradient veil — darkens edges so text stays readable */ .ou-events::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( to bottom, rgba(22, 31, 56, 0.72) 0%, rgba(22, 31, 56, 0.20) 45%, rgba(22, 31, 56, 0.50) 100% ) !important; pointer-events: none !important; } /* Inner wrapper — sits above pseudo-element layers */ .ou-events .gadgetStyleBody { position: relative !important; z-index: 1 !important; max-width: 860px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: none !important; } /* Strip default list styling */ .ou-events ul { list-style: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } /* ─── Event row ─── */ .ou-events ul li { display: flex !important; align-items: baseline !important; gap: 2.5rem !important; padding: clamp(1.2rem, 2.5vw, 1.6rem) 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; background: transparent !important; list-style: none !important; } .ou-events ul li.last { border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } /* ─── Date — left column, fixed width, gold caps ─── */ .ou-events ul li .date { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.6rem !important; font-weight: 600 !important; font-style: normal !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ou-gold) !important; min-width: 150px !important; flex-shrink: 0 !important; line-height: 1.5 !important; order: -1 !important; } .ou-events ul li .date span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; font-style: normal !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; } /* ─── Title — Garamond, white, main column ─── */ .ou-events ul li .title { flex: 1 !important; line-height: 1.25 !important; order: 0 !important; } .ou-events ul li .title a, .ou-events ul li .title a:visited { font-family: 'EB Garamond', 'Garamond', Georgia, serif !important; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem) !important; font-weight: 400 !important; font-style: normal !important; color: var(--ou-white) !important; text-decoration: none !important; letter-spacing: 0.01em !important; line-height: 1.25 !important; } .ou-events ul li .title a:hover { color: var(--ou-gold) !important; text-decoration: none !important; } /* ─── Location — hidden by default ─── */ /* To re-enable, remove display:none and uncomment the block below */ .ou-events ul li .location { display: none !important; /* font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.58rem !important; font-weight: 400 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.28) !important; margin-top: 0.3rem !important; flex-basis: 100% !important; order: 1 !important; */ } /* Always hide timezone span */ .ou-events ul li .event-time-zone { display: none !important; } /* ─── Empty state ─── */ .ou-events .noEventsMessage, .ou-events ul:empty::after { font-family: 'EB Garamond', 'Garamond', Georgia, serif !important; font-size: 1.1rem !important; color: rgba(255, 255, 255, 0.35) !important; font-style: italic !important; display: block !important; padding: 1.5rem 0 !important; } /* ─── Mobile ─── */ @media (max-width: 767px) { .ou-events { padding: 1.5rem 1.25rem 2.5rem !important; } .ou-events ul li { flex-direction: column !important; gap: 0.35rem !important; } .ou-events ul li .date { min-width: unset !important; order: -1 !important; } } /* ═══════════════════════════════════════════════════ SECTION 5b — OPENING HOURS Custom HTML block: .ou-hours ═══════════════════════════════════════════════════ */ .ou-hours { background-color: var(--ou-white) !important; padding: clamp(3rem, 6vw, 5rem) 1.5rem !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; } /* Section label */ .ou-hours__label { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.6rem !important; font-weight: 600 !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: var(--ou-gold) !important; margin: 0 0 clamp(2.5rem, 5vw, 4rem) 0 !important; } /* Each venue block */ .ou-hours__venue-block { margin: 0 auto clamp(2rem, 4vw, 3rem) auto !important; max-width: 360px !important; padding-bottom: clamp(2rem, 4vw, 3rem) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; } .ou-hours__venue-block:last-child { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Venue name */ .ou-hours__venue { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.35rem !important; font-weight: 500 !important; color: var(--ou-ink) !important; margin: 0 0 1rem 0 !important; letter-spacing: 0.01em !important; } /* Day · time line */ .ou-hours__line { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.1rem !important; font-weight: 400 !important; color: var(--ou-ink) !important; margin: 0 0 0.25rem 0 !important; line-height: 1.5 !important; } /* Small print */ .ou-hours__note { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.9rem !important; line-height: 1.55 !important; color: rgba(0, 0, 0, 0.38) !important; margin: 0.75rem 0 0 0 !important; font-style: italic !important; } @media (max-width: 767px) { .ou-hours { padding: 2.5rem 1.25rem !important; } } /* ═══════════════════════════════════════════════════ SECTION 5c — LATEST UPDATES Content gadget class: .ou-updates Blog posts gadget class: .ou-blog ═══════════════════════════════════════════════════ */ /* Band background */ .ou-updates { background-color: var(--ou-navy) !important; padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 8vw, 8rem) clamp(1.5rem, 3vw, 2.5rem) !important; width: 100% !important; box-sizing: border-box !important; } /* Heading — override WA bold white all-caps */ .ou-updates h1, .ou-updates h2, .ou-updates h3, .ou-updates .gadgetTitle { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.6rem !important; font-weight: 600 !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; font-variant: normal !important; color: var(--ou-gold) !important; text-align: left !important; margin: 0 0 clamp(2rem, 4vw, 3rem) 0 !important; padding: 0 !important; border: none !important; background: transparent !important; } .ou-updates h1::before, .ou-updates h2::before, .ou-updates h3::before, .ou-updates .gadgetTitle::before { content: "" !important; display: inline-block !important; vertical-align: middle !important; width: 1.8rem !important; height: 1px !important; background: rgba(180, 151, 97, 0.5) !important; margin-right: 0.75rem !important; position: relative !important; top: -1px !important; } /* Blog posts gadget — sits inside ou-updates band */ .ou-blog { background-color: transparent !important; padding: 0 0 clamp(3rem, 6vw, 5rem) 0 !important; max-width: 960px !important; margin: 0 auto !important; box-sizing: border-box !important; } /* Empty / no items state */ .ou-blog .noItemsMessage, .ou-blog p, .ou-updates p { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1rem !important; font-weight: 400 !important; font-style: italic !important; color: rgba(255, 255, 255, 0.35) !important; text-align: left !important; } /* Blog post items when they exist */ .ou-blog .field-group, .ou-blog .blogPost, .ou-blog article { border-top: 1px solid rgba(255, 255, 255, 0.07) !important; padding: clamp(1.2rem, 2.5vw, 1.6rem) 0 !important; background: transparent !important; } .ou-blog .field-group:last-child, .ou-blog .blogPost:last-child, .ou-blog article:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } .ou-blog .postTitle, .ou-blog h2 a, .ou-blog h3 a { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.3rem) !important; font-weight: 400 !important; color: var(--ou-white) !important; text-decoration: none !important; } .ou-blog .postTitle:hover, .ou-blog h2 a:hover, .ou-blog h3 a:hover { color: var(--ou-gold) !important; } .ou-blog .postDate, .ou-blog .date { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.6rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ou-gold) !important; } @media (max-width: 767px) { .ou-updates { padding: 2.5rem 1.25rem 1.5rem !important; } .ou-blog { padding-bottom: 2.5rem !important; } } /* ═══════════════════════════════════════════════════ SECTION 7 — FOOTER ═══════════════════════════════════════════════════ */ .ou-footer { position: relative !important; background-color: var(--ou-navy) !important; border-top: 3px solid var(--ou-gold) !important; color: var(--ou-white) !important; padding: clamp(2.25rem, 4vw, 3.25rem) 1.5rem !important; overflow: hidden !important; } .ou-footer::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.035), transparent 38%, rgba(180, 151, 97, 0.035) ) !important; pointer-events: none !important; } /* Fix: the decorative gradient above only covers the centered .ou-footer box (max-width ~1200px), not the full-width outer Wild Apricot footer zone (#id_Footer1). That mismatch produced a visible vertical seam at the edges of .ou-footer. Disabling the pseudo-element removes the seam while keeping .ou-footer and the outer zone on the same flat var(--ou-navy) background. */ .ou-footer::before { content: none !important; } /* Ensure the outer Wild Apricot footer zone/placeholder explicitly uses the same navy as .ou-footer, rather than relying on coincidental theme defaults, and keep the inner grid wrapper transparent. */ #id_Footer1, .zoneFooter1, .zoneFooter2, .zoneFooter3 { background-color: var(--ou-navy) !important; } .ou-footer__inner { background: transparent !important; } .ou-footer__inner { position: relative !important; z-index: 1 !important; max-width: 1100px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 0.9fr 1.35fr 1.1fr !important; gap: clamp(2.25rem, 5vw, 4.25rem) !important; align-items: start !important; } /* Constrain the brand column to a width that fits both logo and icons */ .ou-footer__brand { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 160px !important; } /* Let the logo fill that width rather than being hardcoded */ .ou-footer__brand img { width: 100% !important; height: auto !important; display: block !important; background: transparent !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; } .ou-footer__contact, .ou-footer__links { border-left: 1px solid rgba(180, 151, 97, 0.35) !important; padding-left: clamp(1.25rem, 3vw, 2rem) !important; } .ou-footer h3 { margin: 0 0 1rem 0 !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.28rem !important; font-weight: 600 !important; color: var(--ou-white) !important; text-transform: none !important; letter-spacing: 0.015em !important; line-height: 1.15 !important; } .ou-footer h3::after { display: none !important; } .ou-footer p { margin: 0 0 0.8rem 0 !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.02rem !important; line-height: 1.45 !important; color: rgba(255, 255, 255, 0.88) !important; } .ou-footer a, .ou-footer a:visited { color: rgba(255, 255, 255, 0.9) !important; text-decoration: none !important; transition: color 160ms ease !important; } .ou-footer a:hover, .ou-footer a:focus-visible { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 4px !important; } .ou-footer a.ou-footer__login, .ou-footer a.ou-footer__login:visited { display: inline-flex !important; align-items: center !important; gap: 0.45rem !important; margin-top: 0.7rem !important; background-color: transparent !important; color: var(--ou-white) !important; border: 1px solid rgba(180, 151, 97, 0.85) !important; padding: 0.75rem 1.25rem !important; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.72rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; line-height: 1 !important; text-align: center !important; min-width: 82px !important; } .ou-footer a.ou-footer__login:hover, .ou-footer a.ou-footer__login:focus-visible { background-color: var(--ou-gold) !important; border-color: var(--ou-gold) !important; color: var(--ou-navy) !important; text-decoration: none !important; } .ou-footer__item { display: flex !important; align-items: flex-start !important; gap: 0.65rem !important; } .ou-footer__icon { flex: 0 0 auto !important; width: 1rem !important; height: 1rem !important; margin-top: 0.18rem !important; color: var(--ou-gold) !important; } .ou-footer__icon svg { display: block !important; width: 1rem !important; height: 1rem !important; fill: currentColor !important; } .ou-footer__loginIcon { width: 0.85rem !important; height: 0.85rem !important; color: currentColor !important; } .ou-footer__loginIcon svg { display: block !important; width: 0.85rem !important; height: 0.85rem !important; fill: currentColor !important; } .ou-footer__social { display: flex !important; align-items: center !important; gap: 0.55rem !important; margin-top: 1rem !important; } .ou-footer__social a, .ou-footer__social a:visited { width: 2rem !important; height: 2rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(180, 151, 97, 0.55) !important; background-color: rgba(255, 255, 255, 0.035) !important; text-decoration: none !important; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease !important; } .ou-footer__social a:hover, .ou-footer__social a:focus-visible { color: var(--ou-navy) !important; background-color: var(--ou-gold) !important; border-color: var(--ou-gold) !important; text-decoration: none !important; transform: translateY(-1px) !important; } .ou-footer__social svg { width: 0.95rem !important; height: 0.95rem !important; display: block !important; fill: currentColor !important; } /* ─── Hours row — full width above the three columns ─── */ .ou-footer__hours { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(2.25rem, 5vw, 4.25rem) !important; padding-bottom: clamp(1.75rem, 3vw, 2.5rem) !important; margin-bottom: clamp(1.75rem, 3vw, 2.5rem) !important; border-bottom: 1px solid rgba(180, 151, 97, 0.35) !important; } .ou-footer__hours-col { border-left: 1px solid rgba(180, 151, 97, 0.35) !important; padding-left: clamp(1.25rem, 3vw, 2rem) !important; } .ou-footer__hours-col:first-child { border-left: none !important; padding-left: 0 !important; } .ou-footer__hours-venue { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.58rem !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--ou-gold) !important; margin: 0 0 0.6rem 0 !important; display: block !important; } .ou-footer__hours-line { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1rem !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.78) !important; line-height: 1.5 !important; margin: 0 !important; display: block !important; } .ou-footer__hours-note { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.88rem !important; font-style: italic !important; color: rgba(255, 255, 255, 0.35) !important; line-height: 1.5 !important; margin: 0.4rem 0 0 0 !important; display: block !important; } @media (max-width: 767px) { .ou-footer { padding: 2rem 1.25rem !important; } .ou-footer__inner { grid-template-columns: 1fr !important; gap: 1.75rem !important; } .ou-footer__brand img { width: 105px !important; } .ou-footer__contact, .ou-footer__links { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(180, 151, 97, 0.3) !important; padding-top: 1.25rem !important; } .ou-footer__hours { grid-template-columns: 1fr !important; gap: 1.75rem !important; border-bottom: 1px solid rgba(180, 151, 97, 0.3) !important; } .ou-footer__hours-col { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(180, 151, 97, 0.15) !important; padding-top: 1.25rem !important; } .ou-footer__hours-col:first-child { border-top: none !important; padding-top: 0 !important; } .ou-footer__social { margin-top: 0.9rem !important; } } /* ═══════════════════════════════════════════════════ SECTION 8 — ACCESSIBILITY ═══════════════════════════════════════════════════ */ .mobilePanel .mobilePanelButton:focus-visible, html body .mobilePanel .menuInner a:focus-visible, html body .mobilePanel .loginInner input:focus-visible, .ou-events ul li .title a:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } /* ═══════════════════════════════════════════════════ SECTION 9 — CONTAINER OVERRIDES ═══════════════════════════════════════════════════ */ /* Casefile zone — allow full-width sections */ .zoneContent { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Restore sensible width for regular content pages */ .zoneContent .contentArea { max-width: 1100px !important; margin: 0 auto !important; padding: 0 1.5rem !important; } /* ─── EVENTS PAGE INTRO — navy, full-bleed, matches Old Library intro ─── */ .ou-events-header__intro { position: relative !important; overflow: hidden !important; background-color: var(--ou-navy) !important; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) !important; width: 100% !important; box-sizing: border-box !important; } /* Subtle background photo — swap the path for a real events/debate shot */ .ou-events-header__intro::before { content: "" !important; position: absolute !important; inset: 0 !important; background-image: url('/resources/Pictures/media/ball_chamber_photo.jpg') !important; background-size: cover !important; background-position: center !important; opacity: 0.4 !important; filter: saturate(0.7) contrast(1.05) !important; pointer-events: none !important; } .ou-events-header__intro::after { content: "" !important; position: absolute !important; inset: 0 !important; background: rgba(22, 31, 56, 0.5) !important; pointer-events: none !important; } .ou-events-header__intro-inner { position: relative !important; z-index: 1 !important; max-width: 680px !important; margin: 0 auto !important; text-align: center !important; } h1.ou-events-header__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem) !important; font-weight: 500 !important; font-variant: small-caps !important; color: var(--ou-white) !important; margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0 !important; line-height: 1.05 !important; letter-spacing: 0.02em !important; text-transform: none !important; padding: 0 !important; border: none !important; background: none !important; } .ou-events-header__intro-inner p { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem) !important; font-weight: 400 !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.88) !important; margin: 0 !important; } .ou-events-header__intro-inner p a, .ou-events-header__intro-inner p a:visited { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: rgba(180, 151, 97, 0.4) !important; } .ou-events-header__intro-inner p a:hover { color: var(--ou-white) !important; text-decoration-color: var(--ou-white) !important; } @media (max-width: 767px) { .ou-events-header__intro { padding: 2.5rem 1.25rem !important; } } .ou-events-header__types { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(1.5rem, 3vw, 2.5rem) !important; } .ou-events-header__type { border: 1px solid rgba(0, 0, 0, 0.08) !important; border-top: 2px solid var(--ou-gold) !important; padding: clamp(1.75rem, 3.5vw, 2.5rem) !important; background: var(--ou-white) !important; box-sizing: border-box !important; } .ou-events-header__type-icon { display: inline-flex !important; width: 2rem !important; height: 2rem !important; margin-bottom: 1.1rem !important; color: var(--ou-gold) !important; } .ou-events-header__type-icon svg { display: block !important; width: 100% !important; height: 100% !important; } .ou-events-header__type:first-child { border-left: none !important; padding-left: 0 !important; } .ou-events-header__type-title { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.4rem !important; font-weight: 500 !important; letter-spacing: 0.01em !important; text-transform: none !important; color: var(--ou-navy) !important; margin: 0 0 1rem 0 !important; padding: 0 !important; border: none !important; } /* Type body copy */ .ou-events-header__type-body { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.05rem !important; line-height: 1.65 !important; color: rgba(0, 0, 0, 0.7) !important; margin: 0 !important; } @media (max-width: 767px) { .ou-events-header { padding: 2.5rem 1.25rem !important; } .ou-events-header__types { grid-template-columns: 1fr !important; gap: 2rem !important; } .ou-events-header__type { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(180, 151, 97, 0.25) !important; padding-top: 2rem !important; } } @media (max-width: 767px) { .ou-events-header__type { padding: 1.5rem 1.25rem !important; } } /* ═══════════════════════════════════════════════════ SECTION 11 — JOIN PAGE Custom HTML block: .ou-join-intro WA gadget: .membership_app_selection ═══════════════════════════════════════════════════ */ /* ─── SUPPRESS WA AUTO-INJECTED PAGE TITLE ON JOIN PAGE ─── */ /* Targets the WA content area h1 that renders "Society Membership" */ .ou-join-intro ~ * h1.gadgetTitle, .contentArea > h1:first-child { display: none !important; } /* ─── INTRO BLOCK ─── */ .ou-join-intro { background-color: var(--ou-cream) !important; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem) !important; width: 100% !important; box-sizing: border-box !important; } .ou-join-intro__inner { max-width: 860px !important; margin: 0 auto !important; padding: 0 clamp(1.5rem, 4vw, 3rem) !important; } /* Heading — matches "WELCOME" style from homepage */ div.ou-join-intro__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem) !important; font-weight: 500 !important; font-variant: small-caps !important; color: var(--ou-navy) !important; margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0 !important; line-height: 1.05 !important; letter-spacing: 0.02em !important; text-transform: none !important; } /* Body paragraphs — higher specificity to beat WA base */ .ou-join-intro__inner p.ou-join-intro__lead { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.25rem) !important; line-height: 1.7 !important; color: var(--ou-ink) !important; margin: 0 0 1.25rem 0 !important; font-style: normal !important; font-weight: 400 !important; } /* ─── FACILITY FEE SUB-BLOCK ─── */ .ou-join-fee { margin: clamp(2rem, 4vw, 3rem) 0 !important; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; background-color: var(--ou-cream) !important; } /* Academic year line */ .ou-join-fee p.ou-join-fee__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1rem !important; font-weight: 400 !important; color: var(--ou-ink) !important; margin: 0 0 1.25rem 0 !important; font-style: normal !important; } .ou-join-fee__sub { color: rgba(0, 0, 0, 0.45) !important; font-style: normal !important; } /* Table */ .ou-join-fee__table { width: 100% !important; border-collapse: collapse !important; margin: 0 0 1.5rem 0 !important; } .ou-join-fee__table thead tr th { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.58rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--ou-gold) !important; text-align: left !important; padding: 0 0 0.65rem 0 !important; border-bottom: 1px solid rgba(180, 151, 97, 0.4) !important; border-top: none !important; background: none !important; } .ou-join-fee__table thead tr th:last-child { text-align: right !important; } .ou-join-fee__table tbody tr td { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1rem !important; font-weight: 400 !important; color: var(--ou-ink) !important; padding: 0.5rem 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; border-top: none !important; line-height: 1.45 !important; vertical-align: top !important; background: none !important; } .ou-join-fee__table tbody tr td:last-child { text-align: right !important; font-weight: 600 !important; white-space: nowrap !important; } .ou-join-fee__table tbody tr:last-child td { border-bottom: none !important; } /* Footnotes */ .ou-join-fee p.ou-join-fee__note { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: rgba(0, 0, 0, 0.52) !important; margin: 0.7rem 0 0 0 !important; font-style: normal !important; font-weight: 400 !important; } .ou-join-fee p.ou-join-fee__note a, .ou-join-fee p.ou-join-fee__note a:visited { color: rgba(0, 0, 0, 0.55) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .ou-join-fee p.ou-join-fee__note a:hover { color: var(--ou-gold) !important; } /* ─── CTA LEAD-IN ─── */ .ou-join-intro__inner p.ou-join-intro__cta-label { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.62rem !important; font-weight: 600 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: rgba(0, 0, 0, 0.32) !important; margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0 0 !important; font-style: normal !important; } /* ─── MEMBERSHIP APPLICATION GADGET ─── */ .membership_app_selection { background-color: var(--ou-white) !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; } .membership_app_selection fieldset, .membership_app_selection .fieldset { border: none !important; padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem) !important; margin: 0 auto !important; max-width: 720px !important; box-sizing: border-box !important; } .membership_app_selection .priceRow, .membership_app_selection .subscriptionRow, .membership_app_selection .renewalRow, .membership_app_selection .levelRenewal, .membership_app_selection .levelRecurring { display: none !important; } /* "Select membership level" heading / legend */ .membership_app_selection h3, .membership_app_selection legend, .membership_app_selection .sectionHeader, .membership_app_selection .fieldCaption { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.6rem !important; font-weight: 600 !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: var(--ou-gold) !important; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) 0 !important; padding: 0 !important; border: none !important; background: none !important; } /* Mandatory fields note */ .membership_app_selection .mandatoryNotice, .membership_app_selection .mandatoryFieldsNote { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.92rem !important; color: rgba(0, 0, 0, 0.38) !important; font-style: normal !important; margin: 0 0 1.75rem 0 !important; } /* Level rows */ .membership_app_selection .membershipLevelSelector li, .membership_app_selection ul.membershipLevelSelector > li, .membership_app_selection .levelItem, .membership_app_selection .field-group { display: flex !important; align-items: flex-start !important; gap: 1rem !important; padding: clamp(1rem, 2vw, 1.35rem) 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.07) !important; list-style: none !important; background: transparent !important; margin: 0 !important; } .membership_app_selection .membershipLevelSelector li:last-child, .membership_app_selection .levelItem:last-child, .membership_app_selection .field-group:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; } .membership_app_selection ul.membershipLevelSelector { list-style: none !important; padding: 0 !important; margin: 0 !important; } .membership_app_selection input[type="radio"] { accent-color: var(--ou-blue) !important; flex-shrink: 0 !important; margin-top: 0.3rem !important; width: 1rem !important; height: 1rem !important; cursor: pointer !important; } .membership_app_selection label { cursor: pointer !important; flex: 1 1 auto !important; } .membership_app_selection .levelName, .membership_app_selection .membershipLevelName { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem) !important; font-weight: 500 !important; color: var(--ou-ink) !important; line-height: 1.3 !important; display: none !important; } .membership_app_selection .levelPrice, .membership_app_selection .membershipPrice { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.72rem !important; font-weight: 600 !important; color: var(--ou-blue) !important; letter-spacing: 0.04em !important; margin-top: 0.2rem !important; display: none !important; } .membership_app_selection .levelDescription, .membership_app_selection .membershipDescription { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.95rem !important; line-height: 1.6 !important; color: rgba(0, 0, 0, 0.52) !important; margin: 0.3rem 0 0 0 !important; font-style: normal !important; } /* Submit button */ .membership_app_selection input[type="submit"], .membership_app_selection button[type="submit"], .membership_app_selection .buttonPrimary, .membership_app_selection .continueButton { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; background-color: var(--ou-gold) !important; color: var(--ou-white) !important; border: none !important; border-radius: 0 !important; padding: 0.9rem 2.5rem !important; margin-top: clamp(2rem, 4vw, 3rem) !important; cursor: pointer !important; display: inline-block !important; transition: background-color 160ms ease !important; } .membership_app_selection input[type="submit"]:hover, .membership_app_selection button[type="submit"]:hover, .membership_app_selection .buttonPrimary:hover, .membership_app_selection .continueButton:hover { background-color: var(--ou-navy) !important; } .membership_app_selection .fieldError, .membership_app_selection .validationError { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.72rem !important; color: var(--ou-red) !important; margin-top: 0.35rem !important; } /* ─── RESPONSIVE ─── */ @media (max-width: 767px) { .ou-join-intro { padding: 2.5rem 0 2rem !important; } .ou-join-intro__inner { padding: 0 1.25rem !important; } .ou-join-fee__table thead tr th, .ou-join-fee__table tbody tr td { font-size: 0.93rem !important; } .membership_app_selection fieldset, .membership_app_selection .fieldset { padding: 0 1.25rem 3.5rem !important; } } /* Remove Wild Apricot's blue border in sticky desktop nav */ .WaGadgetMenuHorizontal.HorizontalMenuStyle002 .stickyMenu.active { border-bottom: none !important; } #id_Header img { margin-bottom: 4px !important; } /* ═══════════════════════════════════════════════════ SECTION 5b — OPENING HOURS (REPLACES the previous .ou-hours rules) Staff never touch this. All styling lives here. The values live in a plain Content gadget whose content is wrapped once in
…
(see the companion snippet). Staff only edit the text inside that div, so they cannot break the layout, colours, or fonts. Uses the site tokens already defined in :root at the top of this stylesheet (--ou-blue, --ou-gold, --ou-ink, --ou-white). ═══════════════════════════════════════════════════ */ .ou-hours { max-width: 600px !important; margin: 0 auto !important; padding: clamp(2.5rem, 5vw, 4rem) 1.5rem !important; text-align: center !important; background-color: var(--ou-white) !important; box-sizing: border-box !important; } /* Heading — the first line, "Opening Hours" (a Heading in the editor) */ .ou-hours h1, .ou-hours h2, .ou-hours h3 { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.04em !important; color: var(--ou-blue) !important; margin: 0 0 0.75rem !important; padding: 0 !important; line-height: 1.1 !important; text-transform: none !important; } /* Single gold accent rule beneath the heading */ .ou-hours h1::after, .ou-hours h2::after, .ou-hours h3::after { content: "" !important; display: block !important; width: 48px !important; height: 2px !important; background: var(--ou-gold) !important; margin: 0.9rem auto 2.25rem !important; } /* Each venue is ONE paragraph. The venue name is bolded (staff use the editor's Bold button); the hours sit on the line beneath it. */ .ou-hours p { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.15rem !important; line-height: 1.5 !important; color: var(--ou-ink) !important; margin: 0 0 1.6rem !important; } .ou-hours p:last-child { margin-bottom: 0 !important; } /* Bolded venue name → sits on its own line above the hours */ .ou-hours p strong, .ou-hours p b { display: block !important; font-weight: 600 !important; font-size: 1rem !important; letter-spacing: 0.02em !important; color: var(--ou-blue) !important; margin-bottom: 0.15rem !important; } /* Temporary notice — the one line with class="ou-hours__note". Staff delete this whole line when it no longer applies. */ .ou-hours p.ou-hours__note { font-size: 0.95rem !important; font-style: italic !important; color: rgba(0, 0, 0, 0.45) !important; margin: 2.25rem 0 0 !important; } @media (max-width: 767px) { .ou-hours { padding: 2rem 1.25rem !important; } } /* ═══════════════════════════════════════════════════ SECTION 5b — OPENING HOURS + UPCOMING EVENTS BAND (REPLACES the previous .ou-hours rules) LAYOUT Both gadgets sit inside a WA zone with class "ou-info". CSS grid places them side-by-side: hours left, events right. Left gadget → Content gadget, class "ou-hours" Staff edit the text, never touch CSS. Right gadget → Upcoming Events gadget, class "ou-events-mini" Auto-populated by WA. Styled here. WA SETUP 1. Create a two-column zone (or a single full-width zone). 2. Give the zone/row the CSS class: ou-info 3. Drop the hours Content gadget on the left. 4. Drop an Upcoming Events gadget on the right. 5. In the events gadget's settings, add CSS class: ou-events-mini ═══════════════════════════════════════════════════ */ /* ─── WRAPPER BAND ─── */ .ou-info, .ou-info .zoneContent, .ou-info .contentArea { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .ou-info { background-color: var(--ou-white) !important; } .ou-info__inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(2rem, 5vw, 4rem) !important; max-width: 1100px !important; margin: 0 auto !important; padding: clamp(2.5rem, 5vw, 4rem) 1.5rem !important; box-sizing: border-box !important; align-items: start !important; } /* ═══════════════════════════════════════════════════ LEFT — OPENING HOURS (Content gadget, staff-editable) ═══════════════════════════════════════════════════ */ .ou-hours { padding: 0 !important; margin: 0 !important; background: transparent !important; text-align: left !important; box-sizing: border-box !important; } /* Heading */ .ou-hours h1, .ou-hours h2, .ou-hours h3 { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.04em !important; color: var(--ou-blue) !important; margin: 0 0 0.75rem !important; padding: 0 !important; line-height: 1.1 !important; text-transform: none !important; } /* Gold accent rule beneath heading */ .ou-hours h1::after, .ou-hours h2::after, .ou-hours h3::after { content: "" !important; display: block !important; width: 48px !important; height: 2px !important; background: var(--ou-gold) !important; margin: 0.9rem 0 2rem !important; /* left-aligned, not centred */ } /* Each venue = one paragraph. Bold name, hours beneath. */ .ou-hours p { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.15rem !important; line-height: 1.5 !important; color: var(--ou-ink) !important; margin: 0 0 1.4rem !important; } .ou-hours p:last-child { margin-bottom: 0 !important; } /* Bold venue name */ .ou-hours p strong, .ou-hours p b { display: block !important; font-weight: 600 !important; font-size: 1rem !important; letter-spacing: 0.02em !important; color: var(--ou-blue) !important; margin-bottom: 0.15rem !important; } /* Temporary notice */ .ou-hours p.ou-hours__note { font-size: 0.95rem !important; font-style: italic !important; color: rgba(0, 0, 0, 0.45) !important; margin: 2rem 0 0 !important; } /* ═══════════════════════════════════════════════════ RIGHT — UPCOMING EVENTS MINI (WA gadget, auto-populated) ═══════════════════════════════════════════════════ */ .ou-events-mini { padding: 0 !important; margin: 0 !important; background: transparent !important; box-sizing: border-box !important; } /* Heading — matches hours heading style */ .ou-events-mini .gadgetTitle, .ou-events-mini h1, .ou-events-mini h2, .ou-events-mini h3 { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.04em !important; color: var(--ou-blue) !important; margin: 0 0 0.75rem !important; padding: 0 !important; line-height: 1.1 !important; text-align: left !important; text-transform: none !important; border: none !important; background: transparent !important; } .ou-events-mini .gadgetTitle::after, .ou-events-mini h2::after, .ou-events-mini h3::after { content: "" !important; display: block !important; width: 48px !important; height: 2px !important; background: var(--ou-gold) !important; margin: 0.9rem 0 2rem !important; } /* Strip gadget chrome */ .ou-events-mini .gadgetStyleBody { padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; } .ou-events-mini ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Event rows */ .ou-events-mini ul li { display: block !important; padding: clamp(0.8rem, 1.5vw, 1rem) 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.07) !important; background: transparent !important; list-style: none !important; } .ou-events-mini ul li.last, .ou-events-mini ul li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; } /* Event title */ .ou-events-mini ul li .title a, .ou-events-mini ul li .title a:visited { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.15rem) !important; font-weight: 500 !important; color: var(--ou-ink) !important; text-decoration: none !important; line-height: 1.35 !important; } .ou-events-mini ul li .title a:hover { color: var(--ou-gold) !important; } /* Event date */ .ou-events-mini ul li .date { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; color: var(--ou-gold) !important; display: block !important; margin-top: 0.25rem !important; } .ou-events-mini ul li .date span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; letter-spacing: inherit !important; } /* Hide location and timezone */ .ou-events-mini ul li .location, .ou-events-mini ul li .event-time-zone { display: none !important; } /* Empty state */ .ou-events-mini .noEventsMessage { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1rem !important; color: rgba(0, 0, 0, 0.38) !important; font-style: italic !important; } /* ─── RESPONSIVE ─── */ @media (max-width: 767px) { .ou-info__inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; padding: 2rem 1.25rem !important; } } #id_Header2.WaPlaceHolderHeader2 { background-color: #161F38 !important; } /* ═══════════════════════════════════════════════════ SECTION 12 — OLD LIBRARY PAGE Custom HTML block: .ou-lib Append to site CSS after Section 11 (Join Page). Page rhythm: navy — intro (text left / image right) + link cards white — library information card grid image — single full-bleed break (bridges white → navy) navy — accessibility support Garamond throughout; no uppercase sans; no underline rules. --ou-gold-text (#8A6D39) is a darkened gold for WCAG AA contrast on white. ═══════════════════════════════════════════════════ */ .ou-lib { --ou-gold-text: #8A6D39; } /* ─── SUPPRESS WA PAGE TITLE ─── */ .ou-lib ~ * h1.gadgetTitle, .ou-lib ~ h1.gadgetTitle { display: none !important; } /* ─── SHARED SECTION HEADING (h2) ─── */ h2.ou-lib__section-label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--ou-navy) !important; line-height: 1.1 !important; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) 0 !important; padding: 0 !important; border: none !important; background: none !important; text-align: left !important; } /* ─── ARROW CTA LINK ─── */ a.ou-lib__cta, a.ou-lib__cta:visited { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.1rem !important; font-weight: 500 !important; color: var(--ou-gold) !important; text-decoration: none !important; margin-top: 0.25rem !important; transition: color 160ms ease !important; } a.ou-lib__cta:hover, a.ou-lib__cta:focus-visible { color: var(--ou-white) !important; text-decoration: none !important; } .ou-lib__cta-arrow { display: inline-block !important; transition: transform 160ms ease !important; } a.ou-lib__cta:hover .ou-lib__cta-arrow, a.ou-lib__cta:focus-visible .ou-lib__cta-arrow { transform: translateX(4px) !important; } a.ou-lib__cta:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } a.ou-lib__cta--card, a.ou-lib__cta--card:visited { color: var(--ou-gold-text) !important; font-size: 1rem !important; margin-top: auto !important; padding-top: 1rem !important; } a.ou-lib__cta--card:hover, a.ou-lib__cta--card:focus-visible { color: var(--ou-navy) !important; } /* ═══════════════════════════════════════════════════ 12a — HERO IMAGE + INTRO (navy) Replaces the previous 12a block, including .ou-lib__image, which .ou-lib-hero supersedes. The image now leads the page, full bleed beneath the nav. Heading and lead sit left-aligned below it, which brings the Library page into line with the rest of the site rather than leaving it as the lone centred exception. The two signpost paragraphs are demoted into a subordinate two column row, so they read as pointers rather than as part of the lead. ═══════════════════════════════════════════════════ */ .ou-lib-hero { width: 100% !important; height: clamp(260px, 42vw, 520px) !important; overflow: hidden !important; background-color: var(--ou-navy) !important; line-height: 0 !important; } .ou-lib-hero img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 50% !important; } .ou-lib__intro { background-color: var(--ou-navy) !important; padding: clamp(2.75rem, 5.5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem) !important; width: 100% !important; box-sizing: border-box !important; } .ou-lib__intro-inner { max-width: 1100px !important; margin: 0 auto !important; text-align: left !important; } div.ou-lib__heading, h1.ou-lib__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem) !important; font-weight: 500 !important; font-variant: small-caps !important; color: var(--ou-white) !important; margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem) 0 !important; line-height: 1.05 !important; letter-spacing: 0.02em !important; text-transform: none !important; text-align: left !important; padding: 0 !important; border: none !important; background: none !important; } p.ou-lib__lead { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem) !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.9) !important; margin: 0 0 1.25rem 0 !important; font-weight: 400 !important; text-align: left !important; max-width: 62ch !important; } p.ou-lib__lead:last-child { margin-bottom: 0 !important; } p.ou-lib__lead a, p.ou-lib__lead a:visited { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: rgba(180, 151, 97, 0.4) !important; } p.ou-lib__lead a:hover { color: var(--ou-white) !important; text-decoration-color: var(--ou-white) !important; } /* ─── Subordinate signpost row ─── */ .ou-lib__aside { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(2rem, 5vw, 3.5rem) !important; margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; padding-top: 0 !important; border-top: none !important; } .ou-lib__aside-col { border-top: 2px solid var(--ou-gold) !important; padding-top: clamp(1.25rem, 2.5vw, 1.75rem) !important; } h3.ou-lib__aside-label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.3rem !important; font-weight: 500 !important; font-style: normal !important; color: var(--ou-white) !important; margin: 0 0 0.85rem 0 !important; text-transform: none !important; letter-spacing: 0.01em !important; text-align: left !important; } p.ou-lib__aside-text { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.08rem !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.82) !important; margin: 0 !important; font-weight: 400 !important; text-align: left !important; } p.ou-lib__aside-text a, p.ou-lib__aside-text a:visited { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: rgba(180, 151, 97, 0.4) !important; } p.ou-lib__aside-text a:hover { color: var(--ou-white) !important; text-decoration-color: var(--ou-white) !important; } /* ═══════════════════════════════════════════════════ 12b — LIBRARY & ARCHIVES LINK CARDS (navy) Directly beneath the intro on the same band. ═══════════════════════════════════════════════════ */ .ou-lib-explore { background-color: var(--ou-navy) !important; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem) !important; width: 100% !important; box-sizing: border-box !important; } .ou-lib-explore__inner { max-width: 1100px !important; margin: 0 auto !important; } .ou-lib-explore__grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } a.ou-lib-explore__card, a.ou-lib-explore__card:visited { display: flex !important; align-items: center !important; background-color: transparent !important; padding: clamp(1.4rem, 2.5vw, 1.8rem) clamp(1rem, 2vw, 1.5rem) !important; border-left: 1px solid rgba(255, 255, 255, 0.07) !important; text-decoration: none !important; transition: background-color 160ms ease !important; } a.ou-lib-explore__card:first-child { border-left: none !important; padding-left: 0 !important; } a.ou-lib-explore__card:hover, a.ou-lib-explore__card:focus-visible { background-color: rgba(180, 151, 97, 0.06) !important; text-decoration: none !important; } a.ou-lib-explore__card:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: -2px !important; } .ou-lib-explore__card-title { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem) !important; font-weight: 400 !important; color: var(--ou-white) !important; line-height: 1.3 !important; transition: color 160ms ease !important; } a.ou-lib-explore__card:hover .ou-lib-explore__card-title { color: var(--ou-gold) !important; } /* ═══════════════════════════════════════════════════ 12c — LIBRARY INFORMATION CARD GRID (white) ═══════════════════════════════════════════════════ */ .ou-lib-cards { background-color: var(--ou-white) !important; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) !important; width: 100% !important; box-sizing: border-box !important; } .ou-lib-cards__inner { max-width: 1100px !important; margin: 0 auto !important; } .ou-lib-cards__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(1.5rem, 3vw, 2.5rem) !important; } .ou-lib-card { border: 1px solid rgba(0, 0, 0, 0.08) !important; border-top: 2px solid var(--ou-gold) !important; padding: clamp(1.75rem, 3.5vw, 2.5rem) !important; background: var(--ou-white) !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } h3.ou-lib-card__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.4rem !important; font-weight: 500 !important; color: var(--ou-navy) !important; margin: 0 0 1.25rem 0 !important; letter-spacing: 0.01em !important; text-transform: none !important; text-align: left !important; } p.ou-lib-card__sub { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.05rem !important; font-weight: 500 !important; font-style: italic !important; color: var(--ou-gold-text) !important; margin: 0 0 0.35rem 0 !important; text-align: left !important; } p.ou-lib-card__sub:not(:first-of-type) { margin-top: 1.1rem !important; } p.ou-lib-card__text { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.05rem) !important; line-height: 1.7 !important; color: var(--ou-ink) !important; margin: 0 0 0.9rem 0 !important; font-weight: 400 !important; text-align: left !important; } p.ou-lib-card__text:last-child { margin-bottom: 0 !important; } p.ou-lib-card__text a, p.ou-lib-card__text a:visited { color: var(--ou-blue) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } p.ou-lib-card__text a:hover { color: var(--ou-gold-text) !important; } p.ou-lib-card__note { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.95rem !important; font-style: italic !important; color: rgba(0, 0, 0, 0.45) !important; line-height: 1.55 !important; margin: 1.1rem 0 0 0 !important; text-align: left !important; } p.ou-lib-card__note a, p.ou-lib-card__note a:visited { color: rgba(0, 0, 0, 0.5) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } p.ou-lib-card__note a:hover { color: var(--ou-gold-text) !important; } .ou-lib-card__item { display: flex !important; align-items: flex-start !important; gap: 0.85rem !important; margin: 0 0 1rem 0 !important; } .ou-lib-card__item:last-child { margin-bottom: 0 !important; } .ou-lib-card__item p.ou-lib-card__text { margin: 0 !important; flex: 1 !important; } .ou-lib-card__icon { flex: 0 0 auto !important; width: 1.15rem !important; height: 1.15rem !important; margin-top: 0.22rem !important; color: var(--ou-gold-text) !important; display: inline-flex !important; } .ou-lib-card__icon svg { display: block !important; width: 100% !important; height: 100% !important; } /* ═══════════════════════════════════════════════════ 12d — IMAGE BREAK Single full-bleed shot bridging white → navy. ═══════════════════════════════════════════════════ */ .ou-lib-break { width: 100% !important; height: clamp(240px, 36vw, 420px) !important; overflow: hidden !important; background-color: var(--ou-navy) !important; line-height: 0 !important; } .ou-lib-break img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 40% !important; } /* ═══════════════════════════════════════════════════ 12e — ACCESSIBILITY SUPPORT (navy) Clean cut: the image break provides the transition, so the band opens flat with generous top padding. ═══════════════════════════════════════════════════ */ .ou-lib-access { background-color: var(--ou-navy) !important; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 7vw, 5.5rem) !important; width: 100% !important; box-sizing: border-box !important; } .ou-lib-access__inner { max-width: 1100px !important; margin: 0 auto !important; } .ou-lib-access h2.ou-lib__section-label { color: var(--ou-white) !important; } p.ou-lib-access__text { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem) !important; line-height: 1.75 !important; color: rgba(255, 255, 255, 0.85) !important; margin: 0 0 0.9rem 0 !important; font-weight: 400 !important; max-width: 760px !important; text-align: left !important; } p.ou-lib-access__text a, p.ou-lib-access__text a:visited { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: rgba(180, 151, 97, 0.4) !important; } p.ou-lib-access__text a:hover { color: var(--ou-white) !important; text-decoration-color: var(--ou-white) !important; } .ou-lib-access__two-col { display: grid !important; grid-template-columns: 1.4fr 1fr !important; gap: clamp(2rem, 5vw, 3.5rem) !important; margin-top: 1.75rem !important; } .ou-lib-access__col { border-left: 1px solid rgba(180, 151, 97, 0.3) !important; padding-left: clamp(1.25rem, 3vw, 2rem) !important; } .ou-lib-access__col:first-child { border-left: none !important; padding-left: 0 !important; } h3.ou-lib-access__col-label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.2rem !important; font-weight: 500 !important; font-style: normal !important; color: var(--ou-gold) !important; margin: 0 0 0.85rem 0 !important; text-transform: none !important; display: flex !important; align-items: center !important; gap: 0.6rem !important; text-align: left !important; } h3.ou-lib-access__col-label .ou-lib-card__icon { color: var(--ou-gold) !important; margin-top: 0 !important; } .ou-lib-access__col p.ou-lib-access__text { max-width: none !important; } /* ═══════════════════════════════════════════════════ 12f — MOBILE ═══════════════════════════════════════════════════ */ @media (max-width: 767px) { .ou-lib-hero { height: 220px !important; } .ou-lib__intro { padding: 2rem 1.25rem 1.5rem !important; } .ou-lib__aside { grid-template-columns: 1fr !important; gap: 1.75rem !important; margin-top: 2rem !important; padding-top: 0 !important; } .ou-lib__aside-col { border-top: 2px solid var(--ou-gold) !important; padding-top: 1.25rem !important; } .ou-lib__aside-col:first-child { border-top: none !important; padding-top: 0 !important; } .ou-lib-explore { padding: 1.5rem 1.25rem 2.5rem !important; } .ou-lib-explore__grid { grid-template-columns: 1fr !important; border-top: none !important; } a.ou-lib-explore__card { border-left: none !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; padding: 1.1rem 0 !important; } a.ou-lib-explore__card:first-child { border-top: 1px solid rgba(255, 255, 255, 0.07) !important; } .ou-lib-cards { padding: 2.5rem 1.25rem !important; } .ou-lib-cards__grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; } .ou-lib-card { padding: 1.5rem 1.25rem !important; } .ou-lib-break { height: 180px !important; } .ou-lib-access { padding: 2.5rem 1.25rem !important; } .ou-lib-access__two-col { grid-template-columns: 1fr !important; gap: 1.75rem !important; } .ou-lib-access__col { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(180, 151, 97, 0.2) !important; padding-top: 1.25rem !important; } .ou-lib-access__col:first-child { border-top: none !important; padding-top: 0 !important; } } /* ═══════════════════════════════════════════════════ SECTION 12 — EXTRA STUDY AREAS (Library page) Custom HTML block: .ou-study Anchor index at top links to room headings below on the same page. ═══════════════════════════════════════════════════ */ .ou-study { background-color: var(--ou-white) !important; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) !important; width: 100% !important; max-width: 1100px !important; margin: 0 auto !important; box-sizing: border-box !important; border-top: 1px solid rgba(0, 0, 0, 0.07) !important; } .ou-study { scroll-margin-top: 70px !important; } /* Section heading — plain serif, no gold accent */ .ou-study .ou-study__label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem) !important; font-weight: 500 !important; color: var(--ou-navy) !important; text-align: center !important; margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0 !important; letter-spacing: 0.02em !important; text-transform: none !important; } /* Intro line */ .ou-study .ou-study__intro { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem) !important; line-height: 1.65 !important; color: var(--ou-ink) !important; max-width: 620px !important; margin: 0 auto clamp(2rem, 4vw, 3rem) auto !important; text-align: center !important; } /* ─── Anchor index ─── */ .ou-study .ou-study__index { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.5rem 1.75rem !important; margin: 0 auto clamp(2.5rem, 5vw, 4rem) auto !important; padding-bottom: clamp(2rem, 4vw, 3rem) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; } .ou-study .ou-study__index a, .ou-study .ou-study__index a:visited { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.66rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(0, 0, 0, 0.55) !important; text-decoration: none !important; border-bottom: 1px solid rgba(180, 151, 97, 0.45) !important; padding-bottom: 0.2rem !important; transition: color 160ms ease, border-color 160ms ease !important; } .ou-study .ou-study__index a:hover, .ou-study .ou-study__index a:focus-visible { color: var(--ou-gold) !important; border-bottom-color: var(--ou-gold) !important; } .ou-study .ou-study__index a:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } /* ─── Room grid ─── */ .ou-study .ou-study__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem) !important; } .ou-study .ou-study__room { /* Offset anchor jumps so headings clear the 48px sticky nav */ scroll-margin-top: 70px !important; } .ou-study .ou-study__room img { width: 100% !important; aspect-ratio: 3 / 2 !important; object-fit: cover !important; display: block !important; margin: 0 0 1rem 0 !important; filter: saturate(0.92) !important; } .ou-study h3.ou-study__room-title { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem) !important; font-weight: 500 !important; color: var(--ou-navy) !important; margin: 0 0 0.4rem 0 !important; letter-spacing: 0.01em !important; text-transform: none !important; } /* ─── Meta rows (noise level + accessibility) ─── */ .ou-study .ou-study__meta { display: flex !important; flex-direction: column !important; gap: 0.45rem !important; margin-top: 0.15rem !important; padding-top: 0.65rem !important; border-top: 1px solid rgba(0, 0, 0, 0.06) !important; } .ou-study .ou-study__meta-item { display: flex !important; align-items: flex-start !important; gap: 0.55rem !important; } .ou-study .ou-study__meta-icon { flex: 0 0 auto !important; width: 0.95rem !important; height: 0.95rem !important; margin-top: 0.1rem !important; color: var(--ou-gold) !important; } .ou-study .ou-study__meta-icon svg { display: block !important; width: 0.95rem !important; height: 0.95rem !important; } .ou-study .ou-study__meta-text { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.72rem !important; font-weight: 400 !important; letter-spacing: 0.02em !important; color: rgba(0, 0, 0, 0.52) !important; line-height: 1.35 !important; } /* Smooth scrolling for the in-page anchor jumps */ html { scroll-behavior: smooth !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } } /* ─── Mobile ─── */ @media (max-width: 767px) { .ou-study { padding: 2.5rem 1.25rem !important; } .ou-study .ou-study__grid { grid-template-columns: 1fr !important; gap: 2rem !important; } .ou-study .ou-study__index { gap: 0.5rem 1.25rem !important; } } /* ═══════════════════════════════════════════════════ SECTION 13 — CONTACT PAGE Custom HTML block: .ou-contact Append to site CSS after Section 12. Page rhythm: navy — intro white — department cards + other contacts strip white — FAQs accordion (native
, no JS) navy — general enquiries (deliberately last) Uses the :root tokens defined at the top of this stylesheet. --ou-gold-text (#8A6D39) is the darkened gold for WCAG AA contrast on white, matching Section 12. ═══════════════════════════════════════════════════ */ .ou-contact { --ou-gold-text: #8A6D39; } /* Suppress WA auto-injected page title */ .ou-contact ~ * h1.gadgetTitle, .ou-contact ~ h1.gadgetTitle { display: none !important; } /* ─── Shared section heading ─── */ .ou-contact h2.ou-contact__section-label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--ou-navy) !important; line-height: 1.1 !important; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) 0 !important; padding: 0 !important; border: none !important; background: none !important; text-align: left !important; } .ou-contact h2.ou-contact__section-label--light { color: var(--ou-white) !important; } /* ═══ 13a — INTRO (navy) ═══ */ .ou-contact__intro { position: relative !important; overflow: hidden !important; background-color: var(--ou-navy) !important; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) !important; width: 100% !important; box-sizing: border-box !important; } /* Translucent background image (deckchairs), replaces the old inline */ .ou-contact__intro::before { content: "" !important; position: absolute !important; inset: 0 !important; background-image: url('/resources/Pictures/media/deckchairs_in_the_sun.png') !important; background-size: cover !important; background-position: center !important; opacity: 0.08 !important; pointer-events: none !important; } .ou-contact__intro-inner { position: relative !important; z-index: 1 !important; max-width: 860px !important; margin: 0 auto !important; text-align: center !important; } .ou-contact h1.ou-contact__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem) !important; font-weight: 500 !important; font-variant: small-caps !important; color: var(--ou-white) !important; margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0 !important; line-height: 1.05 !important; letter-spacing: 0.02em !important; text-transform: none !important; text-align: center !important; padding: 0 !important; border: none !important; background: none !important; } .ou-contact p.ou-contact__lead { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem) !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.88) !important; margin: 0 !important; font-weight: 400 !important; text-align: center !important; } .ou-contact p.ou-contact__lead a, .ou-contact p.ou-contact__lead a:visited { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: rgba(180, 151, 97, 0.4) !important; } .ou-contact p.ou-contact__lead a:hover { color: var(--ou-white) !important; text-decoration-color: var(--ou-white) !important; } /* ═══ 13b — DEPARTMENT CARDS (white) ═══ */ .ou-contact-cards { background-color: var(--ou-white) !important; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem) !important; width: 100% !important; box-sizing: border-box !important; } .ou-contact-cards__inner { max-width: 1100px !important; margin: 0 auto !important; } .ou-contact-cards__grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: clamp(1.5rem, 3vw, 2.5rem) !important; } .ou-contact-card { grid-column: span 2 !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-top: 2px solid var(--ou-gold) !important; padding: clamp(1.75rem, 3.5vw, 2.5rem) !important; background: var(--ou-white) !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } /* Centre the final two tiles under the row of three */ .ou-contact-card:nth-child(4) { grid-column: 2 / span 2 !important; } .ou-contact-card:nth-child(5) { grid-column: 4 / span 2 !important; } .ou-contact h3.ou-contact-card__title { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.4rem !important; font-weight: 500 !important; color: var(--ou-navy) !important; margin: 0 0 1rem 0 !important; letter-spacing: 0.01em !important; text-transform: none !important; text-align: left !important; } .ou-contact p.ou-contact-card__text { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.05rem) !important; line-height: 1.7 !important; color: var(--ou-ink) !important; margin: 0 0 1rem 0 !important; font-weight: 400 !important; text-align: left !important; flex-grow: 1 !important; } .ou-contact a.ou-contact-card__cta, .ou-contact a.ou-contact-card__cta:visited { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.05rem !important; font-weight: 500 !important; color: var(--ou-gold-text) !important; text-decoration: none !important; margin-top: auto !important; transition: color 160ms ease !important; word-break: break-word !important; } /* Space stacked CTAs (Membership tile) without affecting single-CTA tiles */ .ou-contact a.ou-contact-card__cta + a.ou-contact-card__cta { margin-top: 0.5rem !important; } .ou-contact a.ou-contact-card__cta:hover, .ou-contact a.ou-contact-card__cta:focus-visible { color: var(--ou-navy) !important; text-decoration: none !important; } /* Email icon on mailto CTAs (matches General Enquiries envelope) */ .ou-contact-card__email-icon { display: inline-flex !important; width: 1.1rem !important; height: 1.1rem !important; color: var(--ou-gold-text) !important; vertical-align: middle !important; margin-left: 0.15rem !important; flex-shrink: 0 !important; transition: color 160ms ease !important; } .ou-contact-card__email-icon svg { width: 100% !important; height: 100% !important; display: block !important; } .ou-contact a.ou-contact-card__cta:hover .ou-contact-card__email-icon, .ou-contact a.ou-contact-card__cta:focus-visible .ou-contact-card__email-icon { color: var(--ou-navy) !important; } .ou-contact-card__arrow { display: inline-block !important; transition: transform 160ms ease !important; } .ou-contact a.ou-contact-card__cta:hover .ou-contact-card__arrow, .ou-contact a.ou-contact-card__cta:focus-visible .ou-contact-card__arrow { transform: translateX(4px) !important; } .ou-contact a.ou-contact-card__cta:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } .ou-contact p.ou-contact-card__meta { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.95rem !important; font-style: italic !important; color: rgba(0, 0, 0, 0.45) !important; line-height: 1.55 !important; margin: 0.85rem 0 0 0 !important; text-align: left !important; } .ou-contact p.ou-contact-card__meta a, .ou-contact p.ou-contact-card__meta a:visited { color: rgba(0, 0, 0, 0.5) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .ou-contact p.ou-contact-card__meta a:hover { color: var(--ou-gold-text) !important; } /* ═══ 13c — OTHER CONTACTS STRIP (white) ═══ */ .ou-contact-other { background-color: var(--ou-white) !important; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem) !important; width: 100% !important; box-sizing: border-box !important; } .ou-contact-other__inner { max-width: 1100px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; border-top: 1px solid rgba(0, 0, 0, 0.07) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; } .ou-contact-other__item { display: flex !important; flex-direction: column !important; gap: 0.35rem !important; padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1rem, 2vw, 1.5rem) !important; border-left: 1px solid rgba(0, 0, 0, 0.07) !important; } .ou-contact-other__item:first-child { border-left: none !important; padding-left: 0 !important; } .ou-contact-other__label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1rem !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.04em !important; text-transform: none !important; color: var(--ou-navy) !important; } .ou-contact-other__item a, .ou-contact-other__item a:visited { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.05rem !important; color: var(--ou-ink) !important; text-decoration: none !important; word-break: break-word !important; } .ou-contact-other__item a:hover, .ou-contact-other__item a:focus-visible { color: var(--ou-gold-text) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* ═══ 13d — FAQS (white) ═══ */ .ou-contact-faqs { background-color: var(--ou-white) !important; padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(3.5rem, 7vw, 5.5rem) !important; width: 100% !important; box-sizing: border-box !important; /* Anchor jumps clear the 48px sticky nav */ scroll-margin-top: 70px !important; } .ou-contact-faqs__inner { max-width: 860px !important; margin: 0 auto !important; } .ou-contact h3.ou-contact-faqs__group { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.2rem !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.03em !important; text-transform: none !important; color: var(--ou-navy) !important; margin: clamp(2rem, 4vw, 3rem) 0 0.5rem 0 !important; padding: 0 !important; border: none !important; text-align: left !important; } .ou-contact h3.ou-contact-faqs__group:first-of-type { margin-top: 0 !important; } details.ou-faq { border-top: 1px solid rgba(0, 0, 0, 0.07) !important; background: transparent !important; margin: 0 !important; padding: 0 !important; } details.ou-faq:last-of-type, details.ou-faq:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; } summary.ou-faq__q { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.2rem) !important; font-weight: 500 !important; color: var(--ou-ink) !important; line-height: 1.4 !important; padding: clamp(0.9rem, 1.8vw, 1.15rem) 2rem clamp(0.9rem, 1.8vw, 1.15rem) 0 !important; cursor: pointer !important; list-style: none !important; position: relative !important; transition: color 160ms ease !important; } summary.ou-faq__q::-webkit-details-marker { display: none !important; } /* Plus / minus indicator */ summary.ou-faq__q::after { content: "+" !important; position: absolute !important; right: 0.25rem !important; top: 50% !important; transform: translateY(-50%) !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.3rem !important; font-weight: 400 !important; color: var(--ou-gold-text) !important; line-height: 1 !important; } details.ou-faq[open] > summary.ou-faq__q::after { content: "\2212" !important; /* minus sign */ } summary.ou-faq__q:hover, details.ou-faq[open] > summary.ou-faq__q { color: var(--ou-navy) !important; } summary.ou-faq__q:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } .ou-faq__a { padding: 0 2rem clamp(1.1rem, 2.2vw, 1.4rem) 0 !important; } .ou-faq__a p { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1rem !important; line-height: 1.7 !important; color: rgba(0, 0, 0, 0.7) !important; margin: 0 0 0.75rem 0 !important; text-align: left !important; } .ou-faq__a p:last-child { margin-bottom: 0 !important; } .ou-faq__a a, .ou-faq__a a:visited { color: var(--ou-blue) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .ou-faq__a a:hover { color: var(--ou-gold-text) !important; } /* ═══ 13e — GENERAL ENQUIRIES (navy) ═══ */ .ou-contact-general { background-color: var(--ou-navy) !important; padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 3rem) !important; width: 100% !important; box-sizing: border-box !important; } .ou-contact-general__inner { max-width: 860px !important; margin: 0 auto !important; } .ou-contact p.ou-contact-general__text { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem) !important; line-height: 1.75 !important; color: rgba(255, 255, 255, 0.85) !important; margin: 0 0 clamp(2rem, 4vw, 3rem) 0 !important; font-weight: 400 !important; text-align: left !important; } .ou-contact p.ou-contact-general__text a, .ou-contact p.ou-contact-general__text a:visited { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: rgba(180, 151, 97, 0.4) !important; } .ou-contact p.ou-contact-general__text a:hover { color: var(--ou-white) !important; text-decoration-color: var(--ou-white) !important; } /* Details grid */ .ou-contact-general__details { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 !important; border-top: 1px solid rgba(180, 151, 97, 0.25) !important; border-bottom: 1px solid rgba(180, 151, 97, 0.25) !important; } .ou-contact-general__item { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; padding: 0 clamp(1.25rem, 3vw, 2rem) !important; border-left: 1px solid rgba(180, 151, 97, 0.2) !important; } .ou-contact-general__item:first-child { border-left: none !important; padding-left: 0 !important; } /* Line icons */ .ou-contact-general__icon { width: 1.25rem !important; height: 1.25rem !important; color: var(--ou-gold) !important; display: inline-flex !important; } .ou-contact-general__icon svg { width: 100% !important; height: 100% !important; display: block !important; } /* Trailing arrow on actionable links */ .ou-contact-general__arrow { display: inline-block !important; margin-left: 0.15rem !important; color: var(--ou-gold) !important; transition: transform 160ms ease !important; } .ou-contact-general__item a:hover .ou-contact-general__arrow, .ou-contact-general__item a:focus-visible .ou-contact-general__arrow { transform: translateX(4px) !important; } /* Labels */ .ou-contact-general__label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.95rem !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.05em !important; text-transform: none !important; color: rgba(255, 255, 255, 0.5) !important; } /* Values */ .ou-contact-general__item a, .ou-contact-general__item a:visited, .ou-contact-general__item span:not(.ou-contact-general__label):not(.ou-contact-general__icon) { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.05rem !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.9) !important; text-decoration: none !important; word-break: break-word !important; } .ou-contact-general__item a:hover, .ou-contact-general__item a:focus-visible { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 4px !important; } /* Footer note */ .ou-contact p.ou-contact-general__note { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.92rem !important; font-style: italic !important; color: rgba(255, 255, 255, 0.35) !important; margin: clamp(1.5rem, 3vw, 2rem) 0 0 0 !important; text-align: left !important; } .ou-contact p.ou-contact-general__note a, .ou-contact p.ou-contact-general__note a:visited { color: rgba(255, 255, 255, 0.5) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .ou-contact p.ou-contact-general__note a:hover { color: var(--ou-gold) !important; } /* ═══ 13f — MOBILE ═══ */ @media (max-width: 767px) { .ou-contact__intro { padding: 2.5rem 1.25rem !important; } .ou-contact-cards { padding: 2.5rem 1.25rem 1.25rem !important; } .ou-contact-cards__grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; } .ou-contact-card, .ou-contact-card:nth-child(4), .ou-contact-card:nth-child(5) { grid-column: auto !important; padding: 1.5rem 1.25rem !important; } .ou-contact-faqs { padding: 1.5rem 1.25rem 2.5rem !important; } .ou-contact-general { padding: 2.5rem 1.25rem !important; } .ou-contact-general__details { grid-template-columns: 1fr !important; } .ou-contact-general__item { border-left: none !important; padding: 1.25rem 0 0 0 !important; border-top: 1px solid rgba(180, 151, 97, 0.2) !important; } .ou-contact-general__item:first-child { padding-top: 0 !important; border-top: none !important; } } .membership_app_selection input[type="button"] { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; background-color: var(--ou-gold) !important; color: var(--ou-white) !important; border: none !important; border-radius: 0 !important; padding: 0.9rem 2.5rem !important; cursor: pointer !important; transition: background-color 160ms ease !important; } .membership_app_selection input[type="button"]:hover { background-color: var(--ou-navy) !important; } .membership_app_selection input[disabled] { display: none !important; } /* ─── Membership wizard button bar — single row ─── */ .membership_app_selection .navigationContainer, .membership_app_selection .buttonsPanel, .membership_app_selection .wizardButtons { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; margin-top: clamp(2rem, 4vw, 3rem) !important; } /* Push Back + Next to the right together */ .membership_app_selection input[type="button"], .membership_app_selection input[type="submit"] { margin-top: 0 !important; } a.ou-events-header__faq-card, a.ou-events-header__faq-card:visited { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1.5rem !important; margin-top: clamp(1.5rem, 3vw, 2.5rem) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-top: 2px solid var(--ou-gold) !important; padding: clamp(1.5rem, 3vw, 2rem) clamp(1.75rem, 3.5vw, 2.5rem) !important; background: var(--ou-white) !important; text-decoration: none !important; box-sizing: border-box !important; transition: background-color 160ms ease !important; } a.ou-events-header__faq-card:hover, a.ou-events-header__faq-card:focus-visible { background-color: rgba(180, 151, 97, 0.06) !important; } a.ou-events-header__faq-card:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 2px !important; } h3.ou-events-header__faq-card-title { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.4rem !important; font-weight: 500 !important; color: var(--ou-navy) !important; margin: 0 0 0.4rem 0 !important; } p.ou-events-header__faq-card-body { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.02rem !important; line-height: 1.6 !important; color: rgba(0, 0, 0, 0.6) !important; margin: 0 !important; } .ou-events-header__faq-card-arrow { flex: 0 0 auto !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.6rem !important; color: var(--ou-gold) !important; transition: transform 160ms ease !important; } a.ou-events-header__faq-card:hover .ou-events-header__faq-card-arrow, a.ou-events-header__faq-card:focus-visible .ou-events-header__faq-card-arrow { transform: translateX(4px) !important; } @media (max-width: 767px) { a.ou-events-header__faq-card { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; padding: 1.5rem 1.25rem !important; } } /* ═══════════════════════════════════════════════════ SECTION 14 — SYSTEM PAGE MESSAGE BLOCK Custom HTML block: .ou-sys One reusable block for every Wild Apricot system message page: 403 access denied, 404 not found, generic error, maintenance. Only the heading and the single lead paragraph change between pages. White band, navy text, gold buttons. Sits inside the standard .contentArea width. ═══════════════════════════════════════════════════ */ /* ─── Suppress the WA-generated title and message ─── */ .ou-sys ~ * h1.gadgetTitle, .ou-sys ~ h1.gadgetTitle { display: none !important; } /* ─── Band ─── */ .ou-sys { background-color: var(--ou-white) !important; width: 100% !important; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 4vw, 3rem) !important; box-sizing: border-box !important; } .ou-sys__inner { max-width: 720px !important; margin: 0 auto !important; text-align: center !important; } /* ─── Heading ─── */ .ou-sys h1.ou-sys__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.02em !important; text-transform: none !important; color: var(--ou-navy) !important; line-height: 1.1 !important; margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0 !important; padding: 0 !important; border: none !important; background: none !important; text-align: center !important; } /* ─── Lead copy ─── */ .ou-sys p.ou-sys__lead { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem) !important; font-weight: 400 !important; line-height: 1.7 !important; color: var(--ou-navy) !important; margin: 0 !important; text-align: center !important; } /* ─── Buttons ─── */ .ou-sys__actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 1rem !important; margin-top: clamp(2rem, 4vw, 2.75rem) !important; } .ou-sys a.ou-sys__button, .ou-sys a.ou-sys__button:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.55rem !important; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: none !important; line-height: 1 !important; color: var(--ou-white) !important; background-color: var(--ou-gold) !important; border: none !important; border-radius: 0 !important; padding: 0.95rem 2.4rem !important; min-width: 180px !important; box-sizing: border-box !important; text-decoration: none !important; transition: background-color 160ms ease !important; } .ou-sys a.ou-sys__button:hover, .ou-sys a.ou-sys__button:focus-visible { background-color: var(--ou-navy) !important; color: var(--ou-white) !important; text-decoration: none !important; } .ou-sys .ou-sys__button-icon { display: inline-flex !important; flex: 0 0 auto !important; width: 1rem !important; height: 1rem !important; color: currentColor !important; } .ou-sys .ou-sys__button-icon svg { display: block !important; width: 100% !important; height: 100% !important; } /* ─── Focus ─── */ .ou-sys a:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } /* ─── Mobile ─── */ @media (max-width: 767px) { .ou-sys { padding: 3rem 1.25rem !important; } .ou-sys__actions { flex-direction: column !important; gap: 0.85rem !important; } .ou-sys a.ou-sys__button { width: 100% !important; max-width: 280px !important; } } /* ═══════════════════════════════════════════════════ SECTION 15 — MEMBERS' BENEFITS PAGE Custom HTML block: .ou-mb Append to site CSS after Section 14 (system pages). Page rhythm: navy — intro + on-this-page index white — speaker events (feature + media strip) navy — Members' Bar + Snooker Room (two features) image — full-bleed break white — Library and study spaces (two cards) navy — Shigeru Kawai pianos (feature) white — reciprocal clubs (grid + callout) navy — Treasurer's Treats + membership card white — closing invitation Garamond throughout. Open Sans in title case only, for small meta labels. Gold is a border, icon and hover colour only, never the colour of a title. --ou-gold-text (#8A6D39) is a darkened gold used for WCAG AA contrast on white. ═══════════════════════════════════════════════════ */ /* ─── SUPPRESS WA PAGE TITLE ─── */ .ou-mb ~ * h1.gadgetTitle, .ou-mb ~ h1.gadgetTitle { display: none !important; } /* ═══════════════════════════════════════════════════ 15a — SHARED BAND + TYPOGRAPHY PRIMITIVES ═══════════════════════════════════════════════════ */ .ou-mb-band { width: 100% !important; box-sizing: border-box !important; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem) !important; } .ou-mb-band--navy { background-color: var(--ou-navy) !important; } .ou-mb-band--white { background-color: var(--ou-white) !important; } /* Tighter top padding where a band follows its own sibling band */ .ou-mb-band--tight-top { padding-top: clamp(1.25rem, 2.5vw, 2rem) !important; } .ou-mb-band__inner { max-width: 1100px !important; margin: 0 auto !important; } /* ─── SECTION HEADING (h2) ─── */ h2.ou-mb__section-label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; font-weight: 500 !important; font-variant: small-caps !important; letter-spacing: 0.02em !important; text-transform: none !important; line-height: 1.1 !important; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) 0 !important; padding: 0 !important; border: none !important; background: none !important; text-align: left !important; } .ou-mb-band--navy h2.ou-mb__section-label { color: var(--ou-white) !important; } .ou-mb-band--white h2.ou-mb__section-label { color: var(--ou-navy) !important; } /* ─── BODY TEXT ─── */ p.ou-mb__text { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.08rem) !important; line-height: 1.75 !important; font-weight: 400 !important; margin: 0 0 1rem 0 !important; text-align: left !important; max-width: 62ch !important; } p.ou-mb__text:last-child { margin-bottom: 0 !important; } .ou-mb-band--navy p.ou-mb__text { color: rgba(255, 255, 255, 0.85) !important; } .ou-mb-band--white p.ou-mb__text { color: var(--ou-ink) !important; } .ou-mb-band--navy p.ou-mb__text a, .ou-mb-band--navy p.ou-mb__text a:visited { color: var(--ou-gold) !important; text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-color: rgba(180, 151, 97, 0.4) !important; } .ou-mb-band--navy p.ou-mb__text a:hover { color: var(--ou-white) !important; text-decoration-color: var(--ou-white) !important; } .ou-mb-band--white p.ou-mb__text a, .ou-mb-band--white p.ou-mb__text a:visited { color: var(--ou-blue) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .ou-mb-band--white p.ou-mb__text a:hover { color: var(--ou-gold-text, #8A6D39) !important; } /* Small italic note */ p.ou-mb__note { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.95rem !important; font-style: italic !important; line-height: 1.6 !important; margin: 1.1rem 0 0 0 !important; text-align: left !important; max-width: 62ch !important; } .ou-mb-band--navy p.ou-mb__note { color: rgba(255, 255, 255, 0.42) !important; } .ou-mb-band--white p.ou-mb__note { color: rgba(0, 0, 0, 0.45) !important; } .ou-mb-band--navy p.ou-mb__note a, .ou-mb-band--navy p.ou-mb__note a:visited { color: rgba(255, 255, 255, 0.6) !important; } .ou-mb-band--white p.ou-mb__note a, .ou-mb-band--white p.ou-mb__note a:visited { color: rgba(0, 0, 0, 0.5) !important; } /* ─── ARROW CTA LINK ─── */ a.ou-mb__cta, a.ou-mb__cta:visited { display: inline-flex !important; align-items: center !important; gap: 0.5rem !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.08rem !important; font-weight: 500 !important; text-decoration: none !important; margin-top: 1.25rem !important; transition: color 160ms ease !important; } .ou-mb-band--navy a.ou-mb__cta, .ou-mb-band--navy a.ou-mb__cta:visited { color: var(--ou-gold) !important; } .ou-mb-band--navy a.ou-mb__cta:hover, .ou-mb-band--navy a.ou-mb__cta:focus-visible { color: var(--ou-white) !important; } .ou-mb-band--white a.ou-mb__cta, .ou-mb-band--white a.ou-mb__cta:visited { color: var(--ou-gold-text, #8A6D39) !important; } .ou-mb-band--white a.ou-mb__cta:hover, .ou-mb-band--white a.ou-mb__cta:focus-visible { color: var(--ou-navy) !important; } .ou-mb__cta-arrow { display: inline-block !important; transition: transform 160ms ease !important; } a.ou-mb__cta:hover .ou-mb__cta-arrow, a.ou-mb__cta:focus-visible .ou-mb__cta-arrow { transform: translateX(4px) !important; } a.ou-mb__cta:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } /* ─── META LIST (icon + label + value) ─── */ .ou-mb__meta { display: flex !important; flex-direction: column !important; gap: 0.85rem !important; margin: 1.75rem 0 0 0 !important; padding-top: 1.4rem !important; } .ou-mb-band--navy .ou-mb__meta { border-top: 1px solid rgba(180, 151, 97, 0.3) !important; } .ou-mb-band--white .ou-mb__meta { border-top: 1px solid rgba(0, 0, 0, 0.09) !important; } .ou-mb__meta-item { display: flex !important; align-items: flex-start !important; gap: 0.8rem !important; } .ou-mb__meta-icon { flex: 0 0 auto !important; width: 1.05rem !important; height: 1.05rem !important; margin-top: 0.2rem !important; display: inline-flex !important; } .ou-mb__meta-icon svg { display: block !important; width: 100% !important; height: 100% !important; } .ou-mb-band--navy .ou-mb__meta-icon { color: var(--ou-gold) !important; } .ou-mb-band--white .ou-mb__meta-icon { color: var(--ou-gold-text, #8A6D39) !important; } .ou-mb__meta-text { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.02rem !important; line-height: 1.5 !important; flex: 1 !important; } .ou-mb-band--navy .ou-mb__meta-text { color: rgba(255, 255, 255, 0.82) !important; } .ou-mb-band--white .ou-mb__meta-text { color: var(--ou-ink) !important; } /* The label sits on its own line, Open Sans, title case */ .ou-mb__meta-text strong { display: block !important; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: none !important; margin-bottom: 0.15rem !important; } .ou-mb-band--navy .ou-mb__meta-text strong { color: var(--ou-gold) !important; } .ou-mb-band--white .ou-mb__meta-text strong { color: var(--ou-gold-text, #8A6D39) !important; } .ou-mb__meta-text a, .ou-mb__meta-text a:visited { text-decoration: underline !important; text-underline-offset: 3px !important; } .ou-mb-band--navy .ou-mb__meta-text a, .ou-mb-band--navy .ou-mb__meta-text a:visited { color: var(--ou-gold) !important; text-decoration-color: rgba(180, 151, 97, 0.4) !important; } .ou-mb-band--navy .ou-mb__meta-text a:hover { color: var(--ou-white) !important; } .ou-mb-band--white .ou-mb__meta-text a, .ou-mb-band--white .ou-mb__meta-text a:visited { color: var(--ou-blue) !important; } .ou-mb-band--white .ou-mb__meta-text a:hover { color: var(--ou-gold-text, #8A6D39) !important; } /* ═══════════════════════════════════════════════════ 15b — INTRO (navy) Two columns: text left, image right. Mobile rules live at the foot of this block so the section stays self-contained. ═══════════════════════════════════════════════════ */ .ou-mb-intro { padding-bottom: clamp(2rem, 4vw, 3rem) !important; } .ou-mb-intro__grid { display: grid !important; grid-template-columns: 1.05fr 0.95fr !important; gap: clamp(2rem, 5vw, 4rem) !important; align-items: start !important; } h1.ou-mb__heading, div.ou-mb__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem) !important; font-weight: 500 !important; font-variant: small-caps !important; color: var(--ou-white) !important; margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0 !important; line-height: 1.05 !important; letter-spacing: 0.02em !important; text-transform: none !important; text-align: left !important; padding: 0 !important; border: none !important; background: none !important; } p.ou-mb__lead { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.08rem, 1rem + 0.45vw, 1.28rem) !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.9) !important; font-weight: 400 !important; margin: 0 0 1.25rem 0 !important; max-width: none !important; text-align: left !important; } p.ou-mb__lead:last-child { margin-bottom: 0 !important; } .ou-mb-intro__media { overflow: hidden !important; } .ou-mb-intro__media img { display: block !important; width: 100% !important; height: auto !important; filter: saturate(0.92) !important; } @media (max-width: 767px) { .ou-mb-intro__grid { grid-template-columns: 1fr !important; gap: 1.75rem !important; } } /* ═══════════════════════════════════════════════════ 15c — ON THIS PAGE INDEX (navy) ═══════════════════════════════════════════════════ */ .ou-mb-index__label { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: none !important; color: rgba(255, 255, 255, 0.45) !important; margin: 0 0 1.25rem 0 !important; } .ou-mb-index__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 1px solid rgba(255, 255, 255, 0.08) !important; } a.ou-mb-index__card, a.ou-mb-index__card:visited { display: block !important; padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.4rem) !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; text-decoration: none !important; transition: background-color 160ms ease !important; } a.ou-mb-index__card:hover, a.ou-mb-index__card:focus-visible { background-color: rgba(180, 151, 97, 0.07) !important; text-decoration: none !important; } a.ou-mb-index__card:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: -2px !important; } .ou-mb-index__title { display: block !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem) !important; font-weight: 400 !important; color: var(--ou-white) !important; line-height: 1.3 !important; transition: color 160ms ease !important; } a.ou-mb-index__card:hover .ou-mb-index__title { color: var(--ou-gold) !important; } .ou-mb-index__desc { display: block !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.95rem !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.45) !important; margin-top: 0.3rem !important; } /* ═══════════════════════════════════════════════════ 15d — FEATURE ROW (text + image) .ou-mb-feature--reverse puts the image on the left. .ou-mb-feature--tall stretches the image to the full height of the text column. ═══════════════════════════════════════════════════ */ .ou-mb-feature { display: grid !important; grid-template-columns: 1.05fr 0.95fr !important; gap: clamp(2rem, 5vw, 4rem) !important; align-items: start !important; } .ou-mb-feature + .ou-mb-feature { margin-top: clamp(2.5rem, 5vw, 4rem) !important; padding-top: clamp(2.5rem, 5vw, 4rem) !important; } .ou-mb-band--navy .ou-mb-feature + .ou-mb-feature { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } .ou-mb-band--white .ou-mb-feature + .ou-mb-feature { border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } /* Image on the left, text on the right */ .ou-mb-feature--reverse .ou-mb-feature__body { order: 2 !important; } .ou-mb-feature--reverse .ou-mb-feature__media { order: 1 !important; } .ou-mb-feature__media img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; filter: saturate(0.92) !important; } .ou-mb-feature__caption { display: block !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.9rem !important; font-style: italic !important; line-height: 1.5 !important; margin-top: 0.65rem !important; flex: 0 0 auto !important; } .ou-mb-band--navy .ou-mb-feature__caption { color: rgba(255, 255, 255, 0.4) !important; } .ou-mb-band--white .ou-mb-feature__caption { color: rgba(0, 0, 0, 0.42) !important; } /* ─── Tall variant: image fills the row ─── */ .ou-mb-feature--tall { align-items: stretch !important; } .ou-mb-feature--tall .ou-mb-feature__media { display: flex !important; flex-direction: column !important; min-height: 0 !important; } .ou-mb-feature--tall .ou-mb-feature__media img { flex: 1 1 auto !important; height: 100% !important; min-height: 420px !important; aspect-ratio: auto !important; object-fit: cover !important; } @media (max-width: 767px) { .ou-mb-feature--tall { align-items: start !important; } .ou-mb-feature--tall .ou-mb-feature__media img { height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3 !important; } } /* ═══════════════════════════════════════════════════ 15e — MEDIA STRIP (two images with captions) ═══════════════════════════════════════════════════ */ .ou-mb-gallery { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: clamp(1rem, 2.5vw, 1.75rem) !important; margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; padding-top: clamp(2.5rem, 5vw, 3.5rem) !important; } .ou-mb-band--white .ou-mb-gallery { border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } .ou-mb-band--navy .ou-mb-gallery { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } .ou-mb-gallery figure { margin: 0 !important; padding: 0 !important; } .ou-mb-gallery img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; object-fit: cover !important; filter: saturate(0.92) !important; } .ou-mb-gallery figcaption { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.92rem !important; line-height: 1.5 !important; margin-top: 0.65rem !important; text-align: left !important; } .ou-mb-band--white .ou-mb-gallery figcaption { color: rgba(0, 0, 0, 0.5) !important; } .ou-mb-band--navy .ou-mb-gallery figcaption { color: rgba(255, 255, 255, 0.45) !important; } /* ═══════════════════════════════════════════════════ 15f — CARD GRID (two columns, gold top rule) ═══════════════════════════════════════════════════ */ .ou-mb-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(1.5rem, 3vw, 2.5rem) !important; } .ou-mb-card { border: 1px solid rgba(0, 0, 0, 0.08) !important; border-top: 2px solid var(--ou-gold) !important; padding: 0 0 clamp(1.75rem, 3.5vw, 2.5rem) 0 !important; background: var(--ou-white) !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } .ou-mb-card__media img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; filter: saturate(0.92) !important; } .ou-mb-card__body { padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) 0 !important; display: flex !important; flex-direction: column !important; flex: 1 !important; } h3.ou-mb-card__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.4rem !important; font-weight: 500 !important; color: var(--ou-navy) !important; margin: 0 0 1rem 0 !important; letter-spacing: 0.01em !important; text-transform: none !important; text-align: left !important; } .ou-mb-card p.ou-mb__text { max-width: none !important; } .ou-mb-card a.ou-mb__cta { margin-top: auto !important; padding-top: 1.25rem !important; } /* ═══════════════════════════════════════════════════ 15g — RECIPROCAL CLUB GRID Each cell: club name and country flag form one link to the club's own website. Any club document sits below as a separate link, so no anchors are nested. Flags are inline SVG at their true ratios, height constrained and width automatic, so a 2:1 Union Flag and a 3:2 Italian flag both sit correctly on the same baseline. No image assets are required and nothing breaks on domain migration. ═══════════════════════════════════════════════════ */ .ou-mb-clubs { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; border-top: 1px solid rgba(0, 0, 0, 0.09) !important; border-left: 1px solid rgba(0, 0, 0, 0.09) !important; margin-top: clamp(1.75rem, 3.5vw, 2.5rem) !important; } .ou-mb-club { display: flex !important; flex-direction: column !important; padding: clamp(1.2rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.4rem) !important; border-right: 1px solid rgba(0, 0, 0, 0.09) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.09) !important; box-sizing: border-box !important; } a.ou-mb-club__main, a.ou-mb-club__main:visited { display: block !important; text-decoration: none !important; } a.ou-mb-club__main:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } .ou-mb-club__name { display: block !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.1rem !important; font-weight: 500 !important; font-style: italic !important; color: var(--ou-navy) !important; line-height: 1.35 !important; transition: color 160ms ease !important; } a.ou-mb-club__main:hover .ou-mb-club__name, a.ou-mb-club__main:focus-visible .ou-mb-club__name { color: var(--ou-gold-text, #8A6D39) !important; } .ou-mb-club__place { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin-top: 0.45rem !important; } .ou-mb-club__flag { flex: 0 0 auto !important; display: inline-flex !important; line-height: 0 !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) !important; } .ou-mb-club__flag svg { display: block !important; height: 13px !important; width: auto !important; } .ou-mb-club__city { display: block !important; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: none !important; color: var(--ou-gold-text, #8A6D39) !important; } .ou-mb-club__links { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.3rem !important; margin-top: auto !important; padding-top: 0.9rem !important; } a.ou-mb-club__link, a.ou-mb-club__link:visited { display: inline-block !important; font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 0.95rem !important; line-height: 1.4 !important; color: var(--ou-blue) !important; text-decoration: underline !important; text-underline-offset: 3px !important; transition: color 160ms ease !important; } a.ou-mb-club__link:hover, a.ou-mb-club__link:focus-visible { color: var(--ou-gold-text, #8A6D39) !important; } a.ou-mb-club__link:focus-visible { outline: 2px solid var(--ou-gold) !important; outline-offset: 3px !important; } /* ═══════════════════════════════════════════════════ 15h — CALLOUT BOX Default: text only, full width of the box. .ou-mb-callout--split adds an image column on the right, stretched flush to the height of the text. ═══════════════════════════════════════════════════ */ .ou-mb-callout { margin-top: clamp(2rem, 4vw, 3rem) !important; padding: clamp(1.5rem, 3vw, 2rem) !important; border: 1px solid rgba(0, 0, 0, 0.09) !important; border-left: 3px solid var(--ou-gold) !important; box-sizing: border-box !important; } .ou-mb-band--navy .ou-mb-callout { border-color: rgba(255, 255, 255, 0.12) !important; border-left-color: var(--ou-gold) !important; } h3.ou-mb-callout__heading { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.25rem !important; font-weight: 500 !important; margin: 0 0 0.85rem 0 !important; letter-spacing: 0.01em !important; text-transform: none !important; text-align: left !important; } .ou-mb-band--white h3.ou-mb-callout__heading { color: var(--ou-navy) !important; } .ou-mb-band--navy h3.ou-mb-callout__heading { color: var(--ou-white) !important; } /* ─── Split variant: text left, image right ─── */ .ou-mb-callout--split { display: grid !important; grid-template-columns: 1.05fr 0.95fr !important; gap: clamp(1.5rem, 4vw, 2.5rem) !important; align-items: stretch !important; } .ou-mb-callout--split .ou-mb-callout__body p.ou-mb__text { max-width: none !important; } .ou-mb-callout--split .ou-mb-callout__body p.ou-mb__text:last-child { margin-bottom: 0 !important; } .ou-mb-callout__media { overflow: hidden !important; min-height: 240px !important; } .ou-mb-callout__media img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; filter: saturate(0.92) !important; } @media (max-width: 767px) { .ou-mb-callout--split { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .ou-mb-callout__media { min-height: 0 !important; } .ou-mb-callout__media img { height: auto !important; aspect-ratio: 3 / 2 !important; } } /* ═══════════════════════════════════════════════════ 15i — TWO-COLUMN TEXT SPLIT ═══════════════════════════════════════════════════ */ .ou-mb-split { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: clamp(2rem, 5vw, 3.5rem) !important; } .ou-mb-split__col { border-left: 1px solid rgba(180, 151, 97, 0.3) !important; padding-left: clamp(1.25rem, 3vw, 2rem) !important; } .ou-mb-split__col:first-child { border-left: none !important; padding-left: 0 !important; } h3.ou-mb__col-label { font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: 1.3rem !important; font-weight: 500 !important; margin: 0 0 0.9rem 0 !important; text-transform: none !important; letter-spacing: 0.01em !important; text-align: left !important; } .ou-mb-band--navy h3.ou-mb__col-label { color: var(--ou-white) !important; } .ou-mb-band--white h3.ou-mb__col-label { color: var(--ou-navy) !important; } .ou-mb-split p.ou-mb__text { max-width: none !important; } /* ═══════════════════════════════════════════════════ 15j — IMAGE BREAK (full bleed) ═══════════════════════════════════════════════════ */ .ou-mb-break { width: 100% !important; height: clamp(220px, 32vw, 380px) !important; overflow: hidden !important; background-color: var(--ou-navy) !important; line-height: 0 !important; } .ou-mb-break img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 45% !important; } /* Variant: shifts the crop upward for shots where the subject sits near the top of the frame, such as group photographs. The shared .ou-mb-break rule stays at center 45% for the Library break. */ .ou-mb-break--faces img { object-position: center 20% !important; } /* ═══════════════════════════════════════════════════ 15k — CLOSING INVITATION ═══════════════════════════════════════════════════ */ .ou-mb-invite__inner { max-width: 1100px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1.4fr auto !important; gap: clamp(1.5rem, 4vw, 3rem) !important; align-items: center !important; } a.ou-mb__button, a.ou-mb__button:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: none !important; color: var(--ou-navy) !important; background-color: transparent !important; border: 1px solid var(--ou-gold) !important; padding: 0.9rem 1.9rem !important; text-decoration: none !important; white-space: nowrap !important; transition: background-color 160ms ease, color 160ms ease !important; } a.ou-mb__button:hover, a.ou-mb__button:focus-visible { background-color: var(--ou-gold) !important; color: var(--ou-white) !important; text-decoration: none !important; } a.ou-mb__button:focus-visible { outline: 2px solid var(--ou-navy) !important; outline-offset: 3px !important; } /* ═══════════════════════════════════════════════════ 15l — ANCHOR OFFSET (clears the 48px sticky nav) ═══════════════════════════════════════════════════ */ .ou-mb-anchor { scroll-margin-top: 70px !important; } /* ═══════════════════════════════════════════════════ 15m — MOBILE ═══════════════════════════════════════════════════ */ @media (max-width: 767px) { .ou-mb-band { padding: 2.5rem 1.25rem !important; } .ou-mb-band--tight-top { padding-top: 1.25rem !important; } .ou-mb-index__grid { grid-template-columns: 1fr !important; border-left: none !important; } a.ou-mb-index__card { border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; } .ou-mb-feature { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .ou-mb-feature--reverse .ou-mb-feature__body, .ou-mb-feature--reverse .ou-mb-feature__media { order: 0 !important; } .ou-mb-feature + .ou-mb-feature { margin-top: 2rem !important; padding-top: 2rem !important; } .ou-mb-gallery { grid-template-columns: 1fr !important; gap: 1.5rem !important; margin-top: 2rem !important; padding-top: 2rem !important; } .ou-mb-cards { grid-template-columns: 1fr !important; gap: 1.25rem !important; } .ou-mb-clubs { grid-template-columns: 1fr !important; border-left: none !important; } .ou-mb-club { border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; } .ou-mb-split { grid-template-columns: 1fr !important; gap: 1.75rem !important; } .ou-mb-split__col { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(180, 151, 97, 0.25) !important; padding-top: 1.5rem !important; } .ou-mb-split__col:first-child { border-top: none !important; padding-top: 0 !important; } .ou-mb-break { height: 180px !important; } .ou-mb-invite__inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; align-items: start !important; } a.ou-mb__button { width: 100% !important; } }