/* * Riccarton Community Church - Enfold child theme design system. * Ported from DESIGN/design-tokens.css + DESIGN/proof.css (approved design, Concept 1a). * Loaded standalone at priority 9999 (see functions.php) so it wins the cascade over * Enfold core + dynamic CSS. * * Layout system: ALB sections carry rcc-* custom classes; the section's * .entry-content-wrapper becomes a CSS grid so the design's exact breakpoints * (1000 / 900 / 700) apply while every element stays native and editable. */ /* ---------- fonts (self-hosted, licence to be confirmed before launch) ---------- */ @font-face { font-family: 'Galaxie Copernicus'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/GalaxieCopernicus-Book.woff2') format('woff2'); } @font-face { font-family: 'Galaxie Copernicus'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/GalaxieCopernicus-BookItalic.woff2') format('woff2'); } @font-face { font-family: 'TT Norms'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ttnorms_regular.woff2') format('woff2'); } @font-face { font-family: 'TT Norms'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/ttnorms_medium.woff2') format('woff2'); } /* ---------- design tokens (verbatim from DESIGN/design-tokens.css) ---------- */ :root { --accent: #df1d4a; --accent-dark: #b01639; --purple: #8b2388; --purple-pale: #f5f0f5; --ink: #111111; --ink-soft: #333333; --ink-mute: #666666; --paper: #ffffff; --paper-warm: #f4f3f0; --dark: #4a3c38; --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.14); --border-faint: rgba(0, 0, 0, 0.06); --hero-overlay: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.50)); --font-display: 'Galaxie Copernicus', Georgia, serif; --font-body: 'TT Norms', 'Helvetica Neue', Arial, sans-serif; --h-hero-min: 38px; --h-hero-max: 92px; --h1-min: 34px; --h1-max: 72px; --h2-min: 28px; --h2-max: 44px; --h3-min: 19px; --h3-max: 24px; --lead-min: 21px; --lead-max: 34px; --body-min: 16px; --body-max: 21px; --body-sm: 15px; --label: 13px; --meta: 13px; --lh-hero: 1.00; --lh-heading: 1.05; --lh-lead: 1.45; --lh-body: 1.65; --lh-tight: 1.25; --track-label: 0.12em; --track-label-wide: 0.22em; --track-caps: 0.03em; --w-body: 400; --w-bold: 700; --space-1: 6px; --space-2: 12px; --space-3: 18px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px; --section-pad-y: clamp(48px, 7vw, 96px); --section-pad-y-sm: clamp(36px, 5vw, 64px); --gutter: 32px; --gutter-mobile: 24px; --gap-grid: clamp(24px, 4vw, 48px); --gap-tight: clamp(12px, 1.6vw, 20px); --content-max: 1200px; --measure-max: 880px; --header-height: 73px; --page-header-min: 440px; --radius: 0; /* fluid type steps (both bounds from the token pairs above) */ --fs-hero: clamp(38px, 7.5vw, 92px); --fs-h1: clamp(34px, 6vw, 72px); --fs-h2: clamp(28px, 4.4vw, 44px); --fs-h3: clamp(19px, 2vw, 24px); --fs-lead: clamp(21px, 3vw, 34px); --fs-prose: clamp(16px, 1.9vw, 21px); } /* ---------- base ---------- */ body { font-family: var(--font-body); font-weight: var(--w-body); font-size: 17px; line-height: var(--lh-body); color: var(--ink); -webkit-font-smoothing: antialiased; text-wrap: pretty; } #top h1, #top h2, #top h3, #top h4, #top .av-special-heading h1, #top .av-special-heading h2, #top .av-special-heading h3, #top .av-special-heading h4, #top .av-special-heading-tag { font-family: var(--font-body); font-weight: var(--w-bold); color: var(--ink); letter-spacing: 0; text-transform: none; } /* no rule/underline beside headings */ #top .av-special-heading .special-heading-border { display: none; } /* * Enfold floats .av-special-heading-tag left purely so that side-border can sit next to it - and we * hide the border on every heading, so the float buys nothing and costs a lot. A floated box is * shrink-to-fit and ignores the centring of its container, so every centred Special Heading sat * left of centre by however much narrower than its column it happened to be (204px on the home * services band, 489px on First Visit). It also collapses the wrapper's height, which puts any * border-bottom through the middle of the words instead of under them. */ #top .av-special-heading-tag { float: none; } #top h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); } /* section headings across the proofs use this step, not the token ceiling */ #top h2 { font-size: clamp(24px, 3vw, 36px); line-height: var(--lh-heading); } #top h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); } #top .avia_textblock { font-size: 17px; line-height: var(--lh-body); } #top .avia_textblock a { color: var(--accent); } #top .avia_textblock a:hover { color: var(--accent-dark); } /* square everything - the design has no radius anywhere */ #top .avia-button, #top input, #top textarea, #top select, #top .avia-section, #top .flex_column, #top img { border-radius: 0; } /* content + section rhythm */ #top .container { max-width: calc(var(--content-max) + (2 * var(--gutter))); padding-left: var(--gutter); padding-right: var(--gutter); } #top .avia-section-large .container { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); } #top .avia-section-default .container { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); } #top .avia-section-small .container { padding-top: var(--section-pad-y-sm); padding-bottom: var(--section-pad-y-sm); } #top .avia-section-no-padding .container { padding-top: 0; padding-bottom: 0; } /* centred long-form measure */ #top .rcc-measure .avia_textblock, #top .rcc-measure .av-special-heading, #top .flex_column.rcc-measure { max-width: var(--measure-max); margin-left: auto; margin-right: auto; } /* * float: none is what makes the auto margins above actually centre the column. Enfold's grid floats * every .flex_column, and auto margins resolve to 0 on a floated box - so the 880px cap pinned the * column to the left of its ~1264px container and the (centre-aligned) text inside sat ~165px left * of the page centre on wide screens. It only showed above ~1000px, where the container first grows * past 880px. rcc-measure is only ever put on a full-width single column (av_one_full, no siblings), * so removing the float costs nothing. */ #top .flex_column.rcc-measure { float: none; } /* ---------- type utilities (used via element custom classes) ---------- */ #top .rcc-eyebrow, .rcc-eyebrow { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--purple); margin: 0 0 24px; } .rcc-eyebrow--accent { color: var(--accent); } .rcc-eyebrow--light, .rcc-on-dark .rcc-eyebrow { color: var(--paper); } #top .rcc-display, .rcc-display, #top .rcc-display h1, #top .rcc-display h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; line-height: var(--lh-hero); } /* custom_class can land on the column (descendant) or on .avia_textblock itself - cover both */ #top .rcc-lead .avia_textblock, #top .avia_textblock.rcc-lead, .rcc-lead { font-family: var(--font-display); font-size: var(--fs-lead); line-height: var(--lh-lead); } #top .rcc-prose .avia_textblock, #top .avia_textblock.rcc-prose, .rcc-prose { font-family: var(--font-display); font-size: var(--fs-prose); line-height: var(--lh-body); color: var(--ink-soft); } #top .rcc-prose .avia_textblock h3, #top .avia_textblock.rcc-prose h3 { font-family: var(--font-body); font-size: 17px; margin-bottom: 12px; } #top .rcc-prose-sm .avia_textblock, #top .avia_textblock.rcc-prose-sm { font-family: var(--font-display); font-size: 17px; color: var(--ink-soft); } #top .rcc-note .avia_textblock, #top .avia_textblock.rcc-note, .rcc-note { font-family: var(--font-display); font-size: 15px; line-height: 1.6; color: var(--ink-mute); } /* ---------- buttons: square, accent fill, hover fills PURPLE (never darker pink) ---------- */ #top .avia-button { font-family: var(--font-body); font-weight: var(--w-bold); font-size: 17px; line-height: 1; padding: 18px 44px; border: 0; border-radius: 0; background: var(--accent); color: var(--paper); text-decoration: none; box-shadow: none; text-shadow: none; transition: background 160ms, color 160ms; } #top .avia-button:hover { background: var(--purple); color: var(--paper); opacity: 1; } #top .avia-button .avia_button_background { display: none; } /* on accent / purple grounds: white fill, accent text, hover purple fill */ #top .rcc-btn-on-accent.avia-button, #top .rcc-on-dark .avia-button { background: var(--paper); color: var(--accent); } #top .rcc-btn-on-accent.avia-button:hover, #top .rcc-on-dark .avia-button:hover { background: var(--purple); color: var(--paper); } /* * A width floor for Layout Builder buttons, so a stacked pair (e.g. Facebook / YouTube on News & * Events) reads as one block instead of two near-but-not-quite-equal widths. Scoped to Enfold's * avia-size-* classes - which only ALB Button elements carry, and where Enfold already sets its * own (smaller) min-widths - so the theme's utility buttons (.rcc-btn-sm, the talks filter Apply, * pagination) keep sizing to their content. */ #top .avia-button.avia-size-small { min-width: 120px; } #top .avia-button.avia-size-medium { min-width: 150px; } #top .avia-button.avia-size-large { min-width: 200px; } #top .avia-button.avia-size-x-large { min-width: 240px; } /* icon-only buttons opt out, as they do in Enfold */ #top .avia-button.av-button-notext, #top .avia-button.av-button-label-on-hover { min-width: 0; } #top .rcc-btn-sm.avia-button { font-size: 14px; padding: 12px 26px; } /* buttons sitting on accent/purple grounds flip automatically */ #top .rcc-section-accent .avia-button, #top .rcc-section-purple .avia-button, #top .flex_column.rcc-band .avia-button { background: var(--paper); color: var(--accent); } #top .rcc-section-accent .avia-button:hover, #top .rcc-section-purple .avia-button:hover, #top .flex_column.rcc-band .avia-button:hover { background: var(--purple); color: var(--paper); } /* the larger token-scale H2 (home band + split CTA) */ #top .rcc-h2-lg h2, #top h2.rcc-h2-lg, #top .rcc-h2-lg .av-special-heading-tag { font-size: var(--fs-h2); } /* ---------- header ---------- */ #top #header { background: var(--paper); border-bottom: 3px solid var(--purple); } #top #header_main { border-bottom: none; height: 70px; } #top #header_main .container { height: 70px; } /* fixed 73px header (70px + the 3px purple rule) at every scroll position */ .html_header_top.html_header_sticky #top #wrap_all #header_main { height: 70px; } /* Enfold offsets content by its own preset header height (88px) - match the real 73px, so no white strip shows between the purple rule and the first section */ .html_header_top #top #main { padding-top: 73px !important; } #top #header .logo, #top #header .logo a { display: flex; align-items: center; height: 100%; } #top #header .logo img, #top #header .logo a > img, #top #header .logo.avia-img-svg-logo > a > img, #top #header .logo svg, #top #header .logo a > svg { height: 38px !important; max-height: 38px; width: auto !important; } #top .av-main-nav > li > a { line-height: 70px; height: 70px; } /* menu: 15px TT Norms 700 ink, hover/current accent */ #top .av-main-nav > li > a { font-family: var(--font-body); font-size: 15px; font-weight: var(--w-bold); color: var(--ink); } #top .av-main-nav > li > a:hover, #top .av-main-nav > li.current-menu-item > a, #top .av-main-nav > li.current_page_item > a, #top .av-main-nav > li:hover > a { color: var(--accent); } #top .av-main-nav > li > a .avia-menu-fx { display: none; } /* caret on dropdown parents */ #top .av-main-nav > li.menu-item-has-children > a .avia-menu-text::after { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 8px; vertical-align: 2px; } /* dropdown panel: white, hairline, 3px purple top rule, shadow */ #top #header .av-main-nav > li > ul.sub-menu, #top #header .av-main-nav ul.sub-menu { background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--purple); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.22); min-width: 240px; padding: 8px; } #top #header .av-main-nav ul.sub-menu li { border: none; } #top #header .av-main-nav ul.sub-menu li > a { font-family: var(--font-body); font-size: 14px; font-weight: var(--w-body); color: var(--ink-soft); padding: 10px 14px; border: none; width: 100%; } #top #header .av-main-nav ul.sub-menu li > a:hover { background: var(--purple-pale); color: var(--purple); } /* hide the header search icon (option treats empty as on) */ #top #header #menu-item-search, #top #header .menu-item-search { display: none; } /* First Visit CTA menu item as a button */ #top .av-main-nav > li.menu-item-first-visit { display: flex; align-items: center; height: 70px; margin-left: 14px; } #top .av-main-nav > li.menu-item-first-visit > a { background: var(--accent); color: var(--paper); font-size: 14px; font-weight: var(--w-bold); padding: 12px 26px; line-height: 1; height: auto; transition: background 160ms; } #top .av-main-nav > li.menu-item-first-visit > a:hover { background: var(--purple); color: var(--paper); } #top .av-main-nav > li.menu-item-first-visit > a .avia-menu-fx { display: none; } /* ---------- burger drawer (mobile menu) ---------- */ #top #av-burger-menu-ul { padding-top: 0; } .av-burger-overlay-active #av-burger-menu-ul { border-top: 3px solid var(--purple); } #top #av-burger-menu-ul li > a { font-family: var(--font-body); font-weight: var(--w-bold); color: var(--ink); background: var(--paper); } #top #av-burger-menu-ul li li > a { font-weight: var(--w-body); color: var(--ink-soft); } #top #av-burger-menu-ul li > a:hover { background: var(--purple-pale); color: var(--purple); } /* First Visit first in the drawer, styled as the CTA */ #top #av-burger-menu-ul { display: flex; flex-direction: column; } #top #av-burger-menu-ul > li { width: 100%; } #top #av-burger-menu-ul > li.menu-item-first-visit { order: -1; } #top #av-burger-menu-ul > li.menu-item-first-visit > a, #top #av-burger-menu-ul > li.menu-item-first-visit > a:hover { background: var(--accent); color: var(--paper); text-align: center; } /* + toggle that rotates 45deg when open */ #top .av-burger-overlay .av-submenu-indicator::before { content: "+"; font-size: 24px; color: var(--purple); } #top .av-burger-overlay li.av-active-submenu > a .av-submenu-indicator::before, #top .av-burger-overlay li.av-show-submenu > a .av-submenu-indicator::before { display: inline-block; transform: rotate(45deg); } /* ---------- footer (widget columns) ---------- */ #top #footer { background: var(--paper-warm); border-top: 1px solid var(--border-faint); padding: 56px 0 40px; } #top #footer .widgettitle { font-family: var(--font-body); font-size: 15px; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink); margin-bottom: 18px; } #top #footer .widget_nav_menu li { border: none; padding: 0 0 10px; } #top #footer .widget_nav_menu li a { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink); line-height: var(--lh-tight); text-decoration: none; border: none; padding: 0; } #top #footer .widget_nav_menu li a:hover { color: var(--accent); } /* First Visit at the foot of the last column: uppercase accent, sans */ #top #footer .widget_nav_menu li.rcc-footer-first-visit { padding-top: 26px; } #top #footer .widget_nav_menu li.rcc-footer-first-visit a { font-family: var(--font-body); font-style: normal; font-weight: var(--w-bold); font-size: 15px; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--accent); } #top #footer .widget_nav_menu li.rcc-footer-first-visiting a:hover { color: var(--purple); } /* ---------- socket = footer base row + the 12px purple bar ---------- */ #top #socket { background: var(--paper-warm); border-top: none; padding: 0; } #top #socket .container { max-width: calc(var(--content-max) + (2 * var(--gutter))); border-top: 1px solid var(--border-strong); padding-top: 30px; padding-bottom: 40px; } #top #socket .copyright { float: none; display: block; font-size: var(--body-sm); color: var(--ink); } #top #socket::after { content: ""; display: block; height: 12px; background: var(--purple); } /* base-row content (markup comes from the Enfold 'copyright' option) */ #top #socket .rcc-footer-identity { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; margin-bottom: 20px; } #top #socket .rcc-footer-identity img { height: 72px; width: auto; } #top #socket .rcc-footer-identity address { font-style: normal; font-size: var(--body-sm); line-height: 1.6; } #top #socket .rcc-footer-contact { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; font-size: var(--body-sm); } #top #socket .rcc-footer-contact a { color: var(--ink); text-decoration: underline; } #top #socket .rcc-footer-contact a:hover { color: var(--accent); } #top #socket .rcc-footer-services { margin: 0; font-size: var(--body-sm); font-weight: var(--w-bold); } /* ---------- page header (Color Section, bg image, purple L-to-R scrim) ---------- */ #top .rcc-page-header { position: relative; min-height: var(--page-header-min); display: flex; align-items: flex-end; background-color: var(--purple); } #top .rcc-page-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(90, 20, 88, 0.88), rgba(139, 35, 136, 0.50) 48%, rgba(139, 35, 136, 0.06)); z-index: 0; pointer-events: none; } #top .rcc-page-header .container { position: relative; z-index: 1; width: 100%; align-self: flex-end; padding-top: clamp(96px, 14vw, 160px); padding-bottom: clamp(32px, 5vw, 56px); } #top .rcc-page-header, #top .rcc-page-header h1, #top .rcc-page-header .avia_textblock { color: var(--paper); } #top .rcc-page-header h1 { max-width: 22ch; font-size: clamp(30px, 4vw, 46px); line-height: 1.06; margin-bottom: 16px; } #top .rcc-page-header .rcc-eyebrow { color: var(--paper); letter-spacing: 0.08em; margin-bottom: 14px; } #top .rcc-page-header .rcc-kicker .avia_textblock, #top .rcc-page-header .avia_textblock.rcc-kicker { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.6vw, 30px); } #top .rcc-page-header .rcc-intro .avia_textblock, #top .rcc-page-header .avia_textblock.rcc-intro { font-family: var(--font-display); font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.94); max-width: 560px; } #top .rcc-page-header { background-size: cover !important; background-position: center center !important; } /* plain variant - no artwork exists yet: solid purple, same layout */ #top .rcc-page-header--plain { background-color: var(--purple); } #top .rcc-page-header--plain::before { content: none; } /* Staff variant: pale purple ground, no scrim, ink text */ #top .rcc-page-header--portrait { background-color: var(--purple-pale); align-items: center; } #top .rcc-page-header--portrait::before { content: none; } #top .rcc-page-header--portrait, #top .rcc-page-header--portrait h1, #top .rcc-page-header--portrait .avia_textblock { color: var(--ink); } #top .rcc-page-header--portrait .rcc-eyebrow { color: var(--purple); } /* * The Staff hero's "Senior Pastor" role and "Who We Are" kicker are Enfold Special Heading * subheadings (`subheading_active`), not .rcc-eyebrow text blocks, so they never picked up the * eyebrow treatment above - rendering as plain black, sentence-case text (`.av-subheading p`, * confirmed the only use of this class site-wide). Match them to the same eyebrow look used * everywhere else on this hero: bold, uppercase, letter-spaced, purple. */ #top .rcc-page-header--portrait .av-subheading { font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--purple); } #top .rcc-page-header--portrait .rcc-intro .avia_textblock, #top .rcc-page-header--portrait .avia_textblock.rcc-intro { color: var(--ink-soft); font-family: var(--font-display); } /* ---------- home hero ---------- */ #top .rcc-hero { position: relative; min-height: clamp(360px, 58vw, 620px) !important; display: flex; align-items: center; background-size: cover !important; background-position: center center !important; } #top .rcc-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-overlay); pointer-events: none; } #top .rcc-hero .container { position: relative; z-index: 1; width: 100%; min-height: clamp(360px, 58vw, 620px); text-align: center; } /* centre vertically through Enfold's whole wrapper chain - the intermediate .template-page/.post-entry blocks otherwise stretch and pin content to the top */ #top .rcc-hero .container, #top .rcc-hero .container .template-page, #top .rcc-hero .container .post-entry, #top .rcc-hero .container .entry-content-wrapper { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; float: none; width: 100%; } #top .rcc-hero .av-special-heading { display: flex; justify-content: center; float: none; width: 100%; text-align: center; } #top .rcc-hero .av-special-heading-tag { text-align: center; } #top .rcc-hero h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); } #top .rcc-hero h1 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-hero); line-height: 1; color: var(--paper); } #top .rcc-hero .rcc-hero-scroll .avia_textblock, #top .rcc-hero .avia_textblock.rcc-hero-scroll { margin-top: clamp(16px, 2.5vw, 28px); font-size: 12px; font-weight: var(--w-bold); letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--paper); opacity: 0.9; } /* ---------- colour bands (services band, CTA strips) ---------- */ /* full-bleed colour sections */ #top .rcc-section-accent { background-color: var(--accent); } #top .rcc-section-purple { background-color: var(--purple); } #top .rcc-section-accent, #top .rcc-section-purple, #top .rcc-section-accent h1, #top .rcc-section-accent h2, #top .rcc-section-accent h3, #top .rcc-section-purple h1, #top .rcc-section-purple h2, #top .rcc-section-purple h3, #top .rcc-section-accent .avia_textblock, #top .rcc-section-purple .avia_textblock { color: var(--paper); } #top .rcc-section-accent .avia_textblock a, #top .rcc-section-purple .avia_textblock a { color: var(--paper); } /* * Inset accent band (home services). Built from Enfold Layout Elements only - a Special Heading, a * trio of 1/3 columns, a Text Block and a Button, so any of it is editable through the normal ALB * popups with no HTML to accidentally damage. Was previously one Text Block holding hand-written *
markup for the three times; a non-technical edit there risked deleting a sibling div along * with the text. * * The panel colour/padding is applied ONCE, on the wrapper Enfold generates per section * (.entry-content-wrapper), rather than per row - each row still carries custom_class='rcc-band' as * a marker (matched by :has() below), but if padding were put on each of the five rows individually * it would compound into five stacked gaps instead of one evenly padded block. * * The three time columns (av_one_third) would otherwise span the full band edge-to-edge per * Enfold's own float grid; flex-wrap on the wrapper below keeps the two full-width rows (heading; * paragraph+button) each on their own line while letting the three time columns shrink to content * and sit centred together on the line between them - reproducing the original flex row's look * without a dedicated wrapper element (which Enfold has no shortcode for at this nesting level). */ #top .rcc-band-section { background-color: var(--accent); } #top .entry-content-wrapper:has(> .rcc-band) { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: clamp(12px, 1.6vw, 18px) clamp(28px, 5vw, 48px); padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 56px); text-align: center; color: var(--paper); } #top .entry-content-wrapper:has(> .rcc-band) > .av_one_full { flex: 0 0 100%; width: 100%; margin-left: 0; } #top .entry-content-wrapper:has(> .rcc-band) > .av_one_third { flex: 0 0 auto; width: auto; margin-left: 0; } /* * Enfold's parser adds .column-top-margin (shortcodes.min.css: margin-top:50px) to the first column * of every row after the first, on top of whatever margin the theme sets - stacking with the `gap` * above to roughly double the space between rows. `gap` already does that job here, so it's zeroed. */ #top .entry-content-wrapper:has(> .rcc-band) > .rcc-band.column-top-margin { margin-top: 0; } #top .rcc-band-section h2, #top .rcc-band-section h3, #top .rcc-band-section .avia_textblock { color: var(--paper); } #top .rcc-band-section .rcc-time { font-family: var(--font-display); font-style: italic; font-size: clamp(38px, 6vw, 54px); line-height: 1.1; } #top .rcc-band-section .rcc-time-label { font-family: var(--font-body); font-size: var(--label); letter-spacing: 0.1em; opacity: 0.85; text-transform: uppercase; } /* the paragraph reads as a narrow measure against the full-width band, matching the heading's weight, instead of stretching edge to edge - per DESIGN/Home.dc.html (max-width:760px) */ #top .rcc-band-section .avia_textblock:not(.rcc-time-label) { max-width: 760px; margin-left: auto; margin-right: auto; } /* ---------- section grid system (exact design breakpoints) ---------- */ #top .rcc-grid-2 .entry-content-wrapper, #top .rcc-grid-3 .entry-content-wrapper, #top .rcc-grid-4 .entry-content-wrapper, #top .rcc-strip .entry-content-wrapper { display: grid; gap: var(--gap-grid); } /* * .rcc-split is flex, not grid, unlike its siblings above. A split row's two columns aren't always * equal (photo + text can legitimately be 1/2+1/2, 1/3+2/3, 2/3+1/3...) - CSS Grid's fixed * `repeat(2, 1fr)` tracks can only ever express an EQUAL split (which is exactly the "Elders & * Trustees" row broke on: a 1/3+2/3 row rendered as two equal, half-empty halves). Flexbox sizes * each item by its own specified width, so whatever ratio a row actually uses (Enfold's own native * av_one_X / av_two_X percentage, left untouched below) renders correctly with no per-combination * CSS needed - the same reason .rcc-staff-grid dropped the grid system entirely, just keeping this * one's `align-items: center` and consistent gap since every row here IS exactly two columns. */ #top .rcc-split .entry-content-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-grid); } /* * .rcc-staff-grid deliberately does NOT join this CSS Grid system, unlike its siblings above. * It's the one section non-technical editors actively rearrange in wp-admin - adding a staff member, * or (as happened) changing a row to a 1/3 + 2/3 split for a group photo. A fixed * `grid-template-columns` can only ever be correct for ONE column combination (whatever it was tuned * for); the moment a row uses a different split, an item ends up squeezed into one grid cell instead * of the several its Enfold width implies, leaving the rest of the row blank. Enfold's own float-based * column system (what plain av_one_half / av_one_third / av_two_third already do with no override at * all) handles ANY mix of standard fractions correctly by design - so for exactly this one * frequently-hand-edited section, the fix is to add NOTHING and let Enfold's stock behaviour run. */ /* Enfold's clearfix pseudo-elements (display:table) would become anonymous grid items and shift every cell - suppress them inside grid sections */ #top .rcc-grid-2 .entry-content-wrapper::before, #top .rcc-grid-2 .entry-content-wrapper::after, #top .rcc-grid-3 .entry-content-wrapper::before, #top .rcc-grid-3 .entry-content-wrapper::after, #top .rcc-grid-4 .entry-content-wrapper::before, #top .rcc-grid-4 .entry-content-wrapper::after, #top .rcc-split .entry-content-wrapper::before, #top .rcc-split .entry-content-wrapper::after, #top .rcc-strip .entry-content-wrapper::before, #top .rcc-strip .entry-content-wrapper::after { content: none; display: none; } /* columns keep Enfold's 50px top margin otherwise - the grid gap is the spacing */ #top .rcc-grid-2 .flex_column.column-top-margin, #top .rcc-grid-3 .flex_column.column-top-margin, #top .rcc-grid-4 .flex_column.column-top-margin, #top .rcc-split .flex_column.column-top-margin, #top .rcc-strip .flex_column.column-top-margin { margin-top: 0; } /* .rcc-staff-grid keeps Enfold's own 50px row margin - see note above */ /* image elements inside these sections fill their cell (Enfold shrink-wraps them) */ #top .rcc-strip .avia-image-container, #top .rcc-split .rcc-col-img .avia-image-container, #top .rcc-inset-img .avia-image-container, #top .rcc-grid-2 .avia-image-container { display: block; width: 100%; } #top .rcc-strip .avia-image-container-inner, #top .rcc-split .rcc-col-img .avia-image-container-inner, #top .rcc-inset-img .avia-image-container-inner, #top .rcc-grid-2 .avia-image-container-inner, #top .rcc-strip .avia-image-overlay-wrap, #top .rcc-split .rcc-col-img .avia-image-overlay-wrap, #top .rcc-inset-img .avia-image-overlay-wrap, #top .rcc-grid-2 .avia-image-overlay-wrap { display: block; width: 100%; } #top .rcc-split .rcc-col-img img { width: 100%; object-fit: cover; } #top .rcc-grid-2 .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } #top .rcc-grid-3 .entry-content-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)); } #top .rcc-grid-4 .entry-content-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); } #top .rcc-strip .entry-content-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-tight); } /* * .rcc-staff-grid columns are NOT reset to width:100% here - unlike its siblings, it isn't a CSS Grid * (see the note near `display: grid` above), so its `av_one_third` / `av_two_third` / etc columns * keep Enfold's own native percentage widths (29.33%, 64.66%...) and lay out correctly whatever * combination an editor picks for a given row, including a mix of widths in the same section. */ #top .rcc-grid-2 .flex_column, #top .rcc-grid-3 .flex_column, #top .rcc-grid-4 .flex_column, #top .rcc-strip .flex_column { width: 100% !important; margin-left: 0 !important; margin-bottom: 0; float: none; } /* * .rcc-split keeps Enfold's own native WIDTH (so an unequal split like 1/3 + 2/3 still renders at * the right ratio - see the note above) but zeroes margin-left, unlike its still-grid siblings. * Enfold's margin-left (6% - intended to make e.g. 29.33% + 6% + 64.66% sum to exactly 100% in its * own float layout) leaves NO tolerance for rounding once summed against a flex-wrap decision: at * some viewport widths the total came out a fraction of a pixel over the container - invisible in * the numbers (47% + 47% + 6% = 100.00%) but enough for the browser's wrap check to break the row * anyway, with margin-left still applying to whichever item now started its own line. Confirmed by * reading the exact rendered numbers at a width where it broke: 433px + 55.25px + 433px = 921.25px * against a 921px container - and confirmed the fix by testing three others (reducing width, * `min-width: 0`, `flex-wrap: nowrap`) before finding that zeroing margin-left and using `gap` for * spacing instead (wrapper rule above) is what actually holds at every width, because `gap` doesn't * carry that same razor-thin 100%-exactly assumption - there's real slack (`94% + 40px` fits with * room to spare at any width this section is used at, for either a 50/50 or an unequal split). */ #top .rcc-split .flex_column { margin-left: 0; margin-bottom: 0; float: none; } /* * Turning on a row's "Equal Height Columns" option (Row settings -> Column Height, e.g. for a * photo + text pair) makes Enfold wrap BOTH of that row's columns together in one shared * `.flex_column_table` (a `display:table` element), instead of emitting them as separate siblings. * Neither a CSS Grid nor a flex parent knows that wrapper holds two things - it hands the whole * table ONE grid cell / flex item, so an "equal height" row rendered at a fraction of its intended * width with the rest of the row blank (grid) or the whole row squeezed onto one narrow slice * (flex). Two different fixes, verified separately against this exact "Elders & Trustees" row: * * GRID (rcc-grid-2/3/4, rcc-strip): `display: contents` makes the wrapper transparent - its own box * disappears and its cells (which already carry the plain `.flex_column` class matched above) become * direct grid items. Confirmed working: both cells render as separate, correctly-positioned grid * items once this applies. * * FLEX (rcc-split): `display: contents` on the SAME wrapper instead made its cells collapse onto * separate stacked lines rather than sharing one - display:contents + a flex parent proved * unreliable here (confirmed by testing it directly against this exact row). So instead the table * keeps its own `display: table` and is simply given the full width of one flex line * (`flex: 0 0 100%`), exactly like a full-width row - Enfold's own `table-layout: fixed` plus each * cell's existing width percentage (already set by `div .av_one_third` etc, still applies to a * table-cell) then correctly proportions the two cells INSIDE that line with no extra CSS needed. */ #top .rcc-grid-2 .flex_column_table, #top .rcc-grid-3 .flex_column_table, #top .rcc-grid-4 .flex_column_table, #top .rcc-strip .flex_column_table { display: contents; } #top .rcc-split .flex_column_table { flex: 0 0 100%; width: 100%; } /* a full-width row (e.g. the section heading) above grid columns */ #top .rcc-grid-2 .flex_column.rcc-row-full, #top .rcc-grid-3 .flex_column.rcc-row-full, #top .rcc-grid-4 .flex_column.rcc-row-full, #top .rcc-strip .flex_column.rcc-row-full { grid-column: 1 / -1; } #top .rcc-split .flex_column.rcc-row-full { flex: 0 0 100%; width: 100%; margin-left: 0; } /* home image strip: 8px white inset, no border, no shadow */ #top .rcc-strip img, #top .rcc-strip .avia-image-container img { border: 8px solid var(--paper); box-shadow: none; width: 100%; height: clamp(200px, 20vw, 260px); object-fit: cover; } /* ---------- cards ---------- */ #top .flex_column.rcc-card { background: var(--paper); border: 1px solid var(--border); padding: clamp(24px, 3vw, 36px); } #top .flex_column.rcc-card h3 { margin-bottom: 10px; } #top .flex_column.rcc-card-rule { border-top: 3px solid var(--accent); padding-top: 20px; } /* card with a 3px purple top rule (community events etc.) */ #top .flex_column.rcc-card-top { background: var(--paper); border: 1px solid var(--border); border-top: 3px solid var(--purple); padding: 26px 24px; } /* content block with a 4px purple rule above (What we believe) */ #top .flex_column.rcc-rule-row { border-top: 4px solid var(--purple); padding-top: 26px; } /* centred sections + the thin divider + band statement (accent bands) */ #top .rcc-center, #top .rcc-center .av-special-heading { text-align: center; } .rcc-divider { width: 120px; height: 1px; background: rgba(255, 255, 255, 0.6); margin: 0 auto 24px; } #top .rcc-band-statement .avia_textblock, #top .avia_textblock.rcc-band-statement { font-weight: var(--w-bold); font-size: clamp(22px, 3vw, 32px); line-height: 1.2; } #top .rcc-band-copy .avia_textblock, #top .avia_textblock.rcc-band-copy { font-family: var(--font-display); font-size: 17px; line-height: 1.65; max-width: 640px; margin: 0 auto; } /* inset gallery image (8px white border, fixed crop) */ #top .rcc-inset-img img { border: 8px solid var(--paper); width: 100%; height: 280px; object-fit: cover; box-shadow: none; } /* ---------- icon list as feature rows (icons suppressed) ---------- */ /* feature rows: label column left, prose right, hairline above each row */ #top .rcc-iconlist .iconlist_icon, #top .rcc-iconlist .iconlist-timeline { display: none; } #top .rcc-iconlist li { padding: 22px 0; margin: 0; border-top: 1px solid var(--border-strong); } #top .rcc-iconlist .iconlist_content_wrap { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; } #top .rcc-iconlist article.article-icon-entry { display: block; margin: 0; padding: 0; } #top .rcc-iconlist .iconlist_title { font-size: 17px; font-weight: var(--w-bold); margin: 0; text-transform: none; letter-spacing: 0; } #top .rcc-iconlist .iconlist_content { font-family: var(--font-display); font-size: 16px; line-height: 1.65; color: var(--ink-soft); } @media only screen and (max-width: 700px) { #top .rcc-iconlist .iconlist_content_wrap { grid-template-columns: minmax(0, 1fr); gap: 8px; } } /* ---------- accordion (Enfold Toggles) ---------- */ #top .togglecontainer { border-top: 1px solid var(--border); margin-top: 20px; } #top .togglecontainer .single_toggle { margin: 0; border-bottom: 1px solid var(--border); } #top .togglecontainer .toggler { background: transparent; border: none; margin: 0; padding: 22px 44px 22px 0; font-family: var(--font-body); font-weight: var(--w-bold); font-size: 18px; color: var(--ink); } #top .togglecontainer .toggler:hover { color: var(--purple); background: transparent; } #top .togglecontainer .toggler.activeTitle { color: var(--ink); background: transparent; } /* the +/- is drawn by BORDERS - recolour border-color, purple always; icon on the RIGHT */ #top .togglecontainer .toggle_icon { border-color: transparent; background: transparent; left: auto; right: 0; } #top .togglecontainer .toggle_icon .vert_icon, #top .togglecontainer .toggle_icon .hor_icon { border-color: var(--purple); } #top .togglecontainer .toggler.activeTitle .toggle_icon .vert_icon, #top .togglecontainer .toggler.activeTitle .toggle_icon .hor_icon { border-color: var(--purple); } #top .togglecontainer .toggle_wrap { padding: 0; } #top .togglecontainer .toggle_content { border: none; background: transparent; margin: 0; padding: 0 0 24px; font-family: var(--font-display); font-size: 17px; line-height: var(--lh-body); color: var(--ink-soft); max-width: 74ch; } /* ---------- table (Enfold Table element) ---------- */ /* * Per DESIGN/News - Events.dc.html, the only page that uses this element. The design draws each * row as a two-column grid sitting on the page background: equal columns, a 24px gutter, 22px of * vertical air, hairline rules between rows and none after the last. * * Two Enfold defaults had to be undone to get there. Enfold's .avia_pricing_default fills the * element itself with #f8f8f8 - our cells are transparent, so it showed through as a grey * panel the design does not have. And base.min.css sets `td { font-size: 13px }`, which this block * never overrode, so both columns rendered at 13px instead of the design's 17px / 15px. */ #top table.avia-table { border: none; margin: 0; background: transparent; } #top table.avia-table tr { background: transparent; border: none; } #top table.avia-table th, #top table.avia-table td { background: transparent; border: none; border-bottom: 1px solid var(--border-strong); text-align: left; padding: 22px 24px 22px 0; /* the 24px on the right IS the column gutter */ vertical-align: top; } /* no outer padding: the rows line up with the heading above them */ #top table.avia-table th:last-child, #top table.avia-table td:last-child { padding-right: 0; } #top table.avia-table tr:first-child th, #top table.avia-table tr:first-child td { padding-top: 0; } #top table.avia-table tr:last-child th, #top table.avia-table tr:last-child td { border-bottom: none; } #top table.avia-table th { font-family: var(--font-body); font-size: var(--label); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--purple); } #top table.avia-table td:first-child { width: 50%; font-family: var(--font-body); font-size: 17px; line-height: 1.3; font-weight: var(--w-bold); color: var(--ink); } #top table.avia-table td:last-child { font-family: var(--font-display); font-size: 15px; line-height: 1.55; font-weight: var(--w-body); color: var(--ink-soft); } /* * Enfold stacks these cells to full width at 767px (table.min.css). Stacked, the 50% column and * its gutter make no sense - the title wrapped early against a half-width edge - and the shared * border-bottom drew a stray rule between a title and its own body text. So below that breakpoint * the title runs full width with the design's 10px stacked gap, and only the body cell keeps the * rule that separates one event from the next. */ @media only screen and (max-width: 767px) { #top table.avia-table td:first-child { width: auto; padding-right: 0; padding-bottom: 10px; border-bottom: none; } #top table.avia-table td:last-child { padding-top: 0; } } /* * The heading above such a table ("Regular Events") is a block heading in the design, not a page * heading: clamp(22px, 2.6vw, 28px) with a hairline rule under it, against the global 36px H2. * Scoped with :has() to the column holding the table so no other H2 on the site moves. * * The rule goes on the .av-special-heading WRAPPER, not on the h2, so it spans the full column * rather than just the width of the words. The wrapper's margin carries the 22px the design leaves * between the rule and row one. */ #top .flex_column:has(.avia-data-table) .av-special-heading { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--border-strong); } #top .flex_column:has(.avia-data-table) .av-special-heading-tag { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.1; } /* ---------- team member ---------- */ #top .team_member { text-align: left; } #top .team_member .team_member_inner { border: none; background: transparent; padding: 0; } #top .team_member .team-img-container { display: block; width: 100%; } #top .team_member img, #top .team_member img.avia_image_team { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } #top .team_member .team-member-name, #top .team_member h3.team-member-name { font-family: var(--font-body); font-size: 18px; font-weight: var(--w-bold); color: var(--ink); margin: 14px 0 4px; padding: 0; text-transform: none; letter-spacing: 0; } #top .team_member .team-member-job-title { font-family: var(--font-display); font-size: 15px; color: var(--ink-mute); margin: 0; } /* ---------- talk templates (single-talk.php / archive-talk.php) ---------- */ #top .rcc-tpl-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); align-items: start; } #top .rcc-tpl-media img { width: 100%; height: auto; object-fit: cover; } #top .rcc-talk-eyebrow { margin-bottom: 6px; } #top .rcc-talk-title { font-size: clamp(28px, 4vw, 44px); margin-bottom: 0.4em; } #top .rcc-talk-title a { color: var(--ink); text-decoration: none; } #top .rcc-talk-title a:hover { color: var(--accent); } #top .rcc-talk-speaker { margin-bottom: 1.2em; } #top .rcc-talk-player { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 44px); align-items: stretch; } #top .rcc-talk-player-bar { flex: 1 1 420px; min-width: 0; } #top .rcc-talk-player-download { flex: none; display: flex; align-items: stretch; } #top .rcc-talk-questions-link { margin-top: 20px; } #top .rcc-talk-questions-link a { color: var(--accent); } #top .rcc-measure-block { max-width: var(--measure-max); margin: 0 auto; } #top .rcc-questions-title { margin-bottom: 1em; } /* * Life Group Questions come from post_content (the WYSIWYG editor), rendered by single-talk.php via * plain the_content() with no Enfold wrapper - not through template-builder.php like an ALB page. So * they never inherit Enfold's own base.min.css rule that turns bullets back on * (`.entry-content-wrapper ul, ul.disc { list-style: disc outside }`) after its global reset * (`ol, ul { list-style: none }`); the