/* =========================================================================== SSTGC — plugin compatibility File: assets/css/plugin-compat.css (loads last) The previous theme had a static header, so any plugin that fixes a bar to the top of the viewport simply sat above it. This theme's header is sticky, which is better for a site whose menu is the main way around — but it means a fixed bar and the header now compete for the same space. Nothing here changes what a plugin does. It gets out of the way of what they already do. =========================================================================== */ /* ── MyStickymenu Welcome Bar ────────────────────────────────────────────── The temple uses this for notices — the lunar eclipse timings, festival announcements, closures. It fixes itself to the top of the viewport, so the sticky header has to sit below it rather than over it. The plugin sets --mystickymenu-height on when the bar is showing; if a version does not, the fallback keeps the header clear of a typical bar. */ body.mystickyMenu-welcomebar .site-header, body:has(#mysticky_welcomebar) .site-header { top: var(--welcomebar-height, 48px); } /* The bar is the topmost thing on the page — above the header, below a modal. */ #mysticky_welcomebar, .mysticky-welcomebar-wrap { z-index: 120 !important; } /* Its own typography, so a notice reads as part of the site rather than as the plugin's default. Colours are left alone — the office sets those. */ #mysticky_welcomebar, #mysticky_welcomebar * { font-family: var(--font) !important; } #mysticky_welcomebar .mysticky-welcomebar-content, #mysticky_welcomebar p { font-size: var(--t-sm) !important; line-height: var(--lh-snug) !important; } #mysticky_welcomebar a:not(.mysticky-welcomebar-btn) { text-decoration: underline; text-underline-offset: 2px; } /* The close button is often a bare × with no hit area. */ #mysticky_welcomebar .mysticky-welcomebar-close, .mysticky-welcomebar-close { min-width: 32px; min-height: 32px; display: grid !important; place-items: center; } @media (max-width: 640px) { /* Two lines of notice on a phone is normal; three pushes the header off. */ body.mystickyMenu-welcomebar .site-header, body:has(#mysticky_welcomebar) .site-header { top: var(--welcomebar-height, 64px); } } /* ── Skip link ───────────────────────────────────────────────────────────── Must clear the bar too, or it lands underneath it. */ body:has(#mysticky_welcomebar) .skip-link:focus { top: calc(var(--welcomebar-height, 48px) + var(--s-4)); } /* ── Anchor offset ───────────────────────────────────────────────────────── scroll-padding-top in base.css assumes the header alone. With a bar above it, an #anchor lands under both. */ body:has(#mysticky_welcomebar) { scroll-padding-top: calc(6rem + var(--welcomebar-height, 48px)); } /* ── Hide My WP ──────────────────────────────────────────────────────────── Rewrites /wp-content/ to /core/modules/ and similar. It needs no CSS, but it is worth recording here that the paths in the browser will not match the paths on disk while it is active — which is confusing when debugging and is why an asset 404 may be a rewrite-rule problem rather than a missing file. */ /* ── Contact Form 7 ──────────────────────────────────────────────────────── Styled in forms.css. Nothing needed here. */ /* ── Simple Calendar (google-calendar-events) ────────────────────────────── Active but unused — the Calendar of Events page embeds a Google iframe directly. Kept minimal in case a shortcode is added later. */ .simcal-calendar { max-width: none; } .simcal-current { background: var(--brand-tint) !important; } /* ── Events plugin: containers ───────────────────────────────────────────── The plugin breaks its sections out to the full viewport width so their backgrounds run edge to edge. That part works. What it does not do is put the content back inside a column — so the programme list, the contacts and the promo strip all started hard against the left edge of the screen. The plugin cannot know this theme's page width, so the theme supplies it. Backgrounds stay full-bleed; the text sits in the same column as everything else on the page. */ .sstgc-ev > .sstgc-sec > *, .sstgc-sec__inner, .sstgc-promo__inner, .sstgc-announce__inner { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; } /* A section whose children are laid out as a grid must not have that grid broken by wrapping each child — constrain the section's own padding instead. */ .sstgc-ev .sstgc-sec { padding-inline: max(var(--gutter), calc((100% - var(--page)) / 2)); } .sstgc-ev .sstgc-sec > * { max-width: none; padding-inline: 0; } /* The promo strip. In `bar` style it is a single line of text on white, sitting between a saffron band above and a grey band below with nothing to mark it as its own thing. It read as a caption that had come loose. */ .sstgc-promo--bar, .sstgc-promo { border-block: 1px solid var(--brand-line); background: var(--brand-tint); } .sstgc-promo--bar .sstgc-promo__inner { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; padding-block: var(--s-3); } @media (max-width: 640px) { .sstgc-promo--bar .sstgc-promo__inner { text-align: center; } } /* ── Donor Opportunities ─────────────────────────────────────────────────── The amounts were invisible. That section runs on a dark ground, and the tier amount inherits the theme's heading colour — near-black. Against the dark band it disappeared entirely, so the page showed four unlabelled lists of benefits with no prices. */ .sstgc-sec--dark .sstgc-tier__amount, .sstgc-sec--dark .sstgc-tier h3, .sstgc-sec--dark .sstgc-tier strong { color: var(--saffron-400) !important; } .sstgc-sec--dark .sstgc-tier, .sstgc-sec--dark .sstgc-tier li, .sstgc-sec--dark .sstgc-tier p { color: var(--on-ground) !important; } /* The tiers as cards, so four lists of benefits are visibly four things. */ .sstgc-sec--dark .sstgc-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--s-5); } .sstgc-sec--dark .sstgc-tier { background: rgba(255, 255, 255, .06); border: 1px solid rgba(240, 153, 29, .25); border-radius: var(--r); padding: var(--s-5); } /* ── Donor tiers, refined ────────────────────────────────────────────────── The amount is the thing being chosen between, so it leads. The benefits are a list and are set as one, with room to breathe — they were three lines crammed under a number with no separation. */ .sstgc-sec--dark .sstgc-tier { padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; transition: border-color .2s ease, transform .2s ease; } .sstgc-sec--dark .sstgc-tier:hover { border-color: rgba(240, 153, 29, .6); transform: translateY(-2px); } .sstgc-sec--dark .sstgc-tier__amount { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid rgba(240, 153, 29, .22); display: block; } .sstgc-sec--dark .sstgc-tier__list, .sstgc-sec--dark .sstgc-tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); } .sstgc-sec--dark .sstgc-tier li { position: relative; padding-left: var(--s-5); font-size: var(--t-sm); line-height: var(--lh-snug); } /* A tick rather than a bullet — these are things you receive. */ .sstgc-sec--dark .sstgc-tier li::before { content: '✓'; position: absolute; left: 0; color: var(--saffron-400); font-weight: 700; } /* ── Programme, as a timeline ────────────────────────────────────────────── The markup is an
    of
  1. with a __time and a __what span. My first attempt styled .sstgc-schedule, which does not exist in this plugin, so none of it applied — the list rendered as six plain lines with the time run into the sentence. A rail with a dot per entry: the evening reads as a sequence rather than as six unrelated facts, and the times align on their own column so the eye can scan down them. */ .sstgc-ev .sstgc-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 540px; position: relative; } /* The rail itself, from the first dot to the last. */ .sstgc-ev .sstgc-timeline::before { content: ''; position: absolute; left: 6.5rem; top: 1.1rem; bottom: 1.1rem; width: 2px; background: linear-gradient(var(--saffron-300), var(--brand-line)); border-radius: 2px; } .sstgc-ev .sstgc-timeline li { display: grid; grid-template-columns: 5.75rem 1.5rem 1fr; align-items: baseline; gap: 0; padding-block: var(--s-3); position: relative; } .sstgc-ev .sstgc-timeline__time { text-align: right; font-weight: 600; font-size: var(--t-sm); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--brand); white-space: nowrap; } /* The dot sits in the middle column, centred on the rail. */ .sstgc-ev .sstgc-timeline li::before { content: ''; grid-column: 2; justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); position: relative; top: .35rem; z-index: 1; } .sstgc-ev .sstgc-timeline__what { grid-column: 3; font-size: var(--t-base); line-height: var(--lh-snug); color: var(--text-strong); padding-left: var(--s-2); } @media (max-width: 560px) { .sstgc-ev .sstgc-timeline { max-width: none; } .sstgc-ev .sstgc-timeline::before { left: 4px; } .sstgc-ev .sstgc-timeline li { grid-template-columns: 1.5rem 1fr; padding-left: 0; } .sstgc-ev .sstgc-timeline li::before { grid-column: 1; grid-row: 1 / span 2; top: .3rem; } .sstgc-ev .sstgc-timeline__time { grid-column: 2; text-align: left; padding-left: var(--s-2); } .sstgc-ev .sstgc-timeline__what { grid-column: 2; } }