/* ============================================================================= VADA on Nicasio Theme 11: the recolour + the few VADA-only bits. Loads AFTER css/user.css, which stays exactly as Nicasio sells it. 1. Tokens (the theme's own rebrand point) 4. Litigation-section / quick-link lists 2. Colour context on dark sections 5. Marquees: member voices + sponsor tiles 3. Logo 6. Small layout notes (photos, map, events) No rule here sets font-family/size/weight (the theme's type rule), Font Awesome glyphs excepted. ============================================================================= */ /* --- 1. TOKENS: VADA navy (logo #00457C) + one gold family (their #af881a) -------------------------- Contrast (WCAG): ink on paper 15.3:1 · ink-2 on tint 7.6:1 · ink-3 on paper 5.5:1, on tint 5.0:1 · accent on paper 9.1:1, on tint 8.2:1 · highlight-ink on highlight 5.2:1 · highlight on ink 11.7:1 */ :root { --n11-paper: #F4F6F9; /* cool, very light neutral */ --n11-paper-2: #E6ECF3; /* pale blue-grey tint */ --n11-ink: #0B1F3A; /* deep navy: text + the ink sections */ --n11-ink-2: #3A4A60; --n11-ink-3: #56657A; --n11-line: #C6D0DC; --n11-white: #FFFFFF; --n11-accent: #00457C; /* VADA logo navy: buttons, links */ --n11-accent-hover: #00325C; --n11-on-accent: #FFFFFF; --n11-highlight: #EAD8A2; /* soft gold (replaces the theme's mint) */ --n11-highlight-ink: #6B5210; /* deep gold-brown */ /* mobile bar logo (WA's mobile panel): the horizontal lockup, as wide as the space between the bar's two buttons */ --n11-logo-url: url('../shared/img/logo/vada-lockup-navy.png'); --n11-logo-w: min(calc(100vw - 144px), 400px); } /* --- 2. DARK SECTIONS (ink, media/hero, join band) ------------------------------------------------- user.css writes the light text as #F4F7F1 (a green-white tuned to its sage paper); match VADA's paper. And: a navy button disappears on a navy section, so on dark sections the button family takes the gold highlight with navy text (same tokens, scoped to the section context). */ body.LayoutMain .n11-section--ink, body.LayoutMain .n11-section--media { --n11-fg: #F4F6F9; --n11-fg-2: rgba(244,246,249,.82); --n11-fg-3: rgba(244,246,249,.66); --n11-rule: rgba(244,246,249,.2); --n11-accent: var(--n11-highlight); --n11-accent-hover: #F6EBC8; --n11-on-accent: var(--n11-ink); } /* --- 3. LOGO: horizontal lockup (tools/logo-split.mjs, Chris 10-31) so the name + tagline read in the masthead. Masthead column widened to fit; docked nav = the VADA mark alone. Theme's logo column is 34%. */ #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaLayoutItem:nth-child(1), #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaLayoutItem:nth-child(5) { width: 27% !important; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaLayoutItem:nth-child(3) { width: 46% !important; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .n11-logo { display: flex; justify-content: center; padding: 0 24px; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .n11-logo img { width: min(90%, 600px); height: auto; } body.LayoutMain .n11-dock .n11-logo img { content: url('../shared/img/logo/vada-mark-navy.png'); height: 28px; width: auto; } body.LayoutMain .n11-footer__brand .n11-logo img { width: min(100%, 400px); height: auto; } /* the narrower side column: search gives up width so the social icons stay on one row */ #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaGadgetSiteSearch { flex: 1 1 0; min-width: 0; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaGadgetSiteSearch .searchBoxField { width: 100%; min-width: 0; box-sizing: border-box; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaGadgetSocialProfile { flex: none; } #idHeaderContentHolder > div > .WaLayoutContainerFirst .WaGadgetSocialProfile ul { flex-wrap: nowrap; white-space: nowrap; } /* phones: the bar's too narrow for the lockup to read, so the stacked logo, taller than the theme's 32px */ @media (max-width: 599px) { :root { --n11-logo-url: url('../shared/img/logo/vada-logo-navy.png'); --n11-logo-w: 172px; } body.LayoutMain .WaGadgetMobilePanel .mobilePanel::before { height: 48px; margin-top: 2px; } } /* the home link laid over the mobile panel's CSS logo (see the small script at the end of each page) */ body.LayoutMain .WaGadgetMobilePanel .mobilePanel { position: relative; } body.LayoutMain .vada-mobile-home { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--n11-logo-w); height: 40px; z-index: 2; } /* --- 4. LINK LISTS (Members quick links, litigation sections): WA's Custom menu gadget, vertical, with the theme's button arrow so each row reads as a link. Calm hover: colour + 3px arrow nudge. */ body.LayoutMain .vada-links ul.orientationVertical { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n11-fg); } body.LayoutMain .vada-links li { margin: 0; } body.LayoutMain .WaGadgetCustomMenu.vada-links .orientationVertical li a { display: flex; align-items: center; justify-content: space-between; gap: var(--n11-s2); padding: 15px 0; } body.LayoutMain .vada-links li a::after { content: '\f061'; font-family: var(--n11-icons); font-weight: 900; color: var(--n11-link); transition: transform .25s ease; } body.LayoutMain .vada-links li a:hover::after { transform: translateX(3px); } body.LayoutMain .vada-links--cols ul.orientationVertical { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--n11-s4); } body.LayoutMain .vada-note { margin: var(--n11-s3) 0 0; color: var(--n11-fg-3); } /* the long members button may wrap on a phone instead of overflowing */ body.LayoutMain .n11-btn.vada-btn-wrap { white-space: normal; height: auto; min-height: 50px; padding-top: 12px; padding-bottom: 12px; text-align: left; } /* --- 5. MARQUEES --------------------------------------------------------------------------------- HOUSE RULE: both marquees NEVER pause: no hover pause, no focus pause, and they keep drifting under prefers-reduced-motion (user.css already leaves .n11-marquee__track running there). They move by the theme's CSS transform animation on the track, never scrollLeft. Do not add a pause. */ /* member voices: equal text-only cards (the tile treatment), slow enough to read */ body.LayoutMain .vada-voices .n11-marquee { border: 0; padding: var(--n11-s1) 0 0; } body.LayoutMain .vada-voices .n11-marquee__track { animation-duration: 190s; align-items: stretch; } body.LayoutMain .vada-voices .n11-marquee__group { align-items: stretch; gap: var(--n11-s3); padding-right: var(--n11-s3); } body.LayoutMain .vada-voices .n11-marquee__group > .vada-voice { flex: none; width: min(440px, calc(100vw - 2 * var(--n11-gutter) - 24px)); height: auto; white-space: normal; color: var(--n11-fg); background: var(--n11-white); } body.LayoutMain .vada-voice blockquote { margin: 0; } body.LayoutMain .vada-voice figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; } body.LayoutMain .vada-voice figcaption .n11-caption { color: var(--n11-fg-3); } /* sponsors: reversed out on a navy band (Chris 10-31; see the overrides under the base rules) */ body.LayoutMain .vada-sponsors .n11-marquee { border: 0; padding: var(--n11-s1) 0; } body.LayoutMain .vada-sponsors .n11-marquee__track { animation-duration: 176s; } body.LayoutMain .vada-sponsors .n11-marquee__group { gap: 20px; padding-right: 20px; } body.LayoutMain .vada-sponsor { flex: none; box-sizing: border-box; display: block; width: 200px; height: 104px; padding: 16px 20px; background: #FFFFFF; border: 1px solid var(--n11-line); border-radius: var(--n11-radius); } body.LayoutMain .n11-marquee__group .vada-sponsor img { width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: none; } body.LayoutMain .vada-sponsors:has(.n11-marquee) { padding-bottom: 0; } body.LayoutMain .vada-sponsors .n11-marquee { border: 0; padding: var(--n11-s1) 0; background-color: var(--n11-accent); margin-top: var(--n11-s6); } body.LayoutMain .vada-sponsors:has(.n11-marquee) .vada-sponsor { background: var(--n11-accent); border: 0; border-radius: 0; } body.LayoutMain .n11-marquee__group .vada-sponsor img { opacity: .8; filter: grayscale(1) invert(1); mix-blend-mode: screen; } /* --- 6. PHOTOS, MAP, EVENTS ------------------------------------------------------------------------- VADA's photos are all ~2.6:1 crops with faces near the edges. The rail cards show them uncropped at their own ratio (the theme's 4:3 frame would cut faces), and the card photo does not zoom on hover (calm hovers; a zoom also clips edge faces). */ body.LayoutMain .n11-rail .n11-card.vada-card--wide { flex-basis: clamp(290px, 34vw, 460px); } body.LayoutMain .vada-card--wide .n11-card__img { aspect-ratio: 1200 / 462; } body.LayoutMain a.n11-card:hover .n11-card__img img { transform: none; } /* hero: the active photo is on screen from the first paint (the theme wipes it in after the fonts load); the 9s settle-in scale still runs, so it is moving from the start */ html.n11-js:not(.n11-ready) .n11-hero__slide.is-active .n11-media { clip-path: inset(0); } /* per-photo focus on phones (inline --n11-focus is the desktop crop; a phone sees ~20% of a 2.6:1 photo). !important only because the builder writes the desktop value inline. Each crop checked for cut faces. */ @media (max-width: 600px) { body.LayoutMain .vada-focus-1 { --n11-focus: 45% 50% !important; } body.LayoutMain .vada-focus-2 { --n11-focus: 100% 50% !important; } body.LayoutMain .vada-focus-3 { --n11-focus: 21% 50% !important; } body.LayoutMain .vada-focus-join { --n11-focus: 60% 50% !important; } } /* mission: the Rule of Law line under the photo (the theme's blockquote = Quote type) */ body.LayoutMain .vada-pull { margin: var(--n11-s4) 0 0; } /* Virginia outline + VADA's five regions (a dot on a representative city; VADA publishes no boundaries) */ body.LayoutMain .vada-map { position: relative; margin: var(--n11-s5) 0 0; color: rgba(244,246,249,.13); } body.LayoutMain .vada-map svg { display: block; width: 100%; height: auto; } body.LayoutMain .vada-map__pin { position: absolute; width: 0; height: 0; } body.LayoutMain .vada-map__pin::before { content: ''; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--n11-highlight); box-shadow: 0 0 0 5px rgba(234,216,162,.22); } body.LayoutMain .vada-map__pin .n11-label { position: absolute; left: 0; bottom: 14px; transform: translateX(-50%); white-space: nowrap; color: var(--n11-fg); } /* recent-from-VADA tiles: the small kicker above the name */ body.LayoutMain .n11-tile .vada-kicker { color: var(--n11-link); } /* one stat on its own (Join page) */ body.LayoutMain .n11-stats.vada-stats--one { grid-template-columns: minmax(0, 1fr); } /* events page: detail sections land under the sticky nav row; agenda tables */ body.LayoutMain .vada-event, body.LayoutMain #sections { scroll-margin-top: 72px; } body.LayoutMain .vada-event h2 { margin: 0 0 var(--n11-s3); } body.LayoutMain .vada-event .n11-prose > .n11-lead { margin-top: 0; } body.LayoutMain .vada-event h3.n11-h4 { margin: var(--n11-s5) 0 var(--n11-s2); } body.LayoutMain .vada-agenda { margin: 0 0 var(--n11-s4); } body.LayoutMain .vada-agenda caption { caption-side: top; text-align: left; padding: 0 0 8px; color: var(--n11-fg-3); } body.LayoutMain .vada-agenda td:first-child { width: 128px; white-space: nowrap; color: var(--n11-fg-2); } body.LayoutMain .vada-event__side { position: sticky; top: 80px; } body.LayoutMain .vada-event__side .n11-row-btns { margin-top: var(--n11-s3); } body.LayoutMain .vada-hero-note { margin: var(--n11-s3) 0 0; color: var(--n11-fg-2); max-width: 40em; } body.LayoutMain .n11-page-hero .n11-row-btns { margin-top: var(--n11-s4); } /* footer staff list */ body.LayoutMain .n11-footer .vada-staff li { margin: 0 0 14px; color: var(--n11-fg); } body.LayoutMain .n11-footer .vada-staff .n11-caption { display: block; color: var(--n11-fg-3); } @media (max-width: 960px) { body.LayoutMain .vada-links--cols ul.orientationVertical { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.LayoutMain .vada-event__side { position: static; } body.LayoutMain .vada-event, body.LayoutMain #sections { scroll-margin-top: 76px; } } @media (max-width: 600px) { body.LayoutMain .vada-links--cols ul.orientationVertical { grid-template-columns: minmax(0, 1fr); } body.LayoutMain .vada-agenda td:first-child { width: 92px; white-space: normal; } body.LayoutMain .vada-sections-table th:first-child, body.LayoutMain .vada-sections-table td:first-child { width: 42%; } } /* events page: each event's title sits above its two columns; on phones the When / Location / Registration block comes straight after the title instead of after the agenda */ body.LayoutMain .vada-event__head { margin: 0 0 var(--n11-s5); } body.LayoutMain .vada-event__head h2 { max-width: 18em; } body.LayoutMain .vada-event__head .n11-tag { display: inline-block; } body.LayoutMain .vada-event__head p:last-child { margin-bottom: 0; } @media (max-width: 960px) { body.LayoutMain .vada-event .n11-split > .vada-event__side { order: -1; } body.LayoutMain .vada-event__head { margin-bottom: var(--n11-s4); } } /* --- 7. MISSION PHOTO WIPE: same move as the theme's photo stack. theme.js adds .is-in to .n11-fade, so the figure borrows that trigger without its fade; the clip sits on the img so the observer still sees the figure's full box. */ html.n11-js body.LayoutMain .vada-wipe { opacity: 1; transform: none; transition: none; } html.n11-js body.LayoutMain .vada-wipe img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.65,0,.2,1); } html.n11-js body.LayoutMain .vada-wipe.is-in img { clip-path: inset(0); } @media (prefers-reduced-motion: reduce) { html.n11-js body.LayoutMain .vada-wipe img { clip-path: none; transition: none; } } .pageModeEdit .vada-wipe img { clip-path: none !important; }