/* Theme Name: OCR UPDATED Theme URI: http://www.chiefrabbi.org/ Description: Bespoke theme design and developed for The Office of the Chief Rabbi Version: 1.0 Author: Maven Design Author URI: http://www.mavendesign.co.uk Tags: simple, clean, basic */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 Media queries =========================== */ /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ @import "css/ie.css"; @import "css/reset.css"; @import "css/responsive-gs-12col.css"; div, article, section, header, footer, nav, li { /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; /* Don't forget to style your body to avoid user overrides */ } ::-moz-selection { background:#ff0; color:#333; } ::selection { background:#ff0; color:#333; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 21 / 16 = 1.3125em (21px equivalent) 24 / 16 = 1.5em (24px equivalent) 30 / 16 = 1.875em (30px equivalent) */ input, textarea { border:solid 1px #ccc; } h1, h2, h3, h4, h5, h6 { font-weight:bold; /* This helps to identify headings at the initial build stage, but you should write something more precise later on */ } /* ---------------------------------------------------------------------------------------------------------- 03 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ body {font-family: 'Open Sans', sans-serif; font-size: 16px; color: #000; font-weight: 400; } a:hover {color:#3B6E8F} #page_wrap {background: #fff; } #header-container {} #logo-bar {padding: 15px 0 ;} #title img {width: 150px;} #top-widgets {background: #7F8184; padding: 10px;} #top-widgets ul li {float: left; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 800; margin-right: 10px;} /*#top-widgets ul li:last-child {float: right; margin-right: 0;}*/ #top-widgets ul li a {color: #fff; text-decoration: none;} #top-widgets ul li a:hover {color: #E5E6E6} #top-widgets ul li a span {margin: 5px 0 0 5px; display: inline-block;} #top-widgets ul li img {float: left;} #nav-wrapper {background: #002F65;} nav#global_nav {position: relative;} nav#global_nav .search-icon {cursor: pointer;} nav#global_nav #searchform {display: none; position: absolute; top: 45px; right: 0; background: #8E0C3A; padding: 5px; } #searchform {display: inline-block; position: relative;} #searchform label {display: none} input#s { background:#fff; width: 150px; padding: 5px; color: #7F8184; font-size: 14px; font-weight: 800; border: none; font-family: 'Open Sans', sans-serif; } #searchsubmit {position: absolute; right: 10px; top: 11px; border: none;} .sub-banner {position: absolute; z-index: 10; top: 0; left: 0; background: #7F8184; display: inline-block; font-weight: 800; text-transform: uppercase; font-size: 14px; color: #fff; padding: 12px;} img {max-width: 100%; height: auto;} /* nav#global_nav {margin-top: 0; margin-bottom: 20px; background: #002E64; } nav#global_nav li {float: left; } nav#global_nav li a {font-size: 16px; text-transform: uppercase; font-weight: 800; text-decoration: none; display: inline-block; color: #fff; padding: 10px 20px} nav#global_nav li:hover a{color:#fff; background:#396D8E } nav#global_nav li ul { position: absolute; background: #396D8E; width: 200px; left: -999em; margin:0 0 0 0; z-index:100000; } nav#global_nav li li a {width:160px; color: #fff; padding:10px 20px; display: inline-block; font-weight: normal; text-transform: none; } nav#global_nav li li a:hover {text-decoration: underline;} nav#global_nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em;} nav#global_nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto;} */ #global_nav #megaMenu .wpmega-nonlink li.latest-news {width: 60.2%} #global_nav #megaMenu .wpmega-nonlink li.news-categories {width: 28.2%} #global_nav #megaMenu ul.megaMenu {float: right;} #global_nav #megaMenu.megaMenuHorizontal ul.megaMenu {width: auto; padding-left: 150px;} #global_nav #megaMenu ul > li a, #global_nav #megaMenu ul > li span {background:#002F65; color: #fff; text-transform: uppercase; font-weight: 700; } #global_nav #megaMenu ul > li:first-child {} #global_nav #megaMenu ul > li ul li:first-child {margin-left: 0;} #global_nav #megaMenu ul ul.sub-menu li.menu-item .wpmega-nonlink a, #global_nav #megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item > a span{display:inline-block; background: #9EA374; color: #fff; text-transform: none; text-decoration: none; font-weight: normal; font-size: 1.3em; } #global_nav #megaMenu ul ul.sub-menu li.menu-item .wpmega-nonlink img.wp-post-image {max-width: 80px; padding-right: 10px; height: auto; display: inline-block; float: left;} #global_nav #megaMenu .wpmega-widgetarea h2.widgettitle {text-transform: uppercase; color: #fff;} #global_nav #megaMenu ul.megaMenu > li.menu-item.megaHover a, #global_nav #megaMenu ul.megaMenu > li.menu-item.megaHover span, #global_nav #megaMenu ul.megaMenu > li.current-menu-item a, #global_nav #megaMenu ul.megaMenu > li.current-menu-item span, #global_nav #megaMenu ul.megaMenu > li:hover a, #global_nav #megaMenu ul.megaMenu > li:hover span, #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > ul.sub-menu.sub-menu-1, #global_nav #megaMenu ul li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item > a {background:#9EA374; } #global_nav #megaMenu ul ul.sub-menu {min-width: 180px;} #global_nav #megaMenu ul.megaMenu > li.menu-item.megaHover a:hover {font-weight: 700;} #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after, #megaMenu ul.megaMenu li.menu-item.mega-with-sub > a:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after, #megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after {display: none;} #megaMenu ul.megaMenu > li#menu-item-897 {background: #8E0C3A} #megaMenu ul.megaMenu > li.menu-item > a, #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {padding: 12px 16px} #global_nav .ubermenu .ubermenu-submenu .ubermenu-target {padding: 5px 20px} #global_nav .ubermenu .ubermenu-submenu .ubermenu-target:hover {color: #3B6E8F } #global_nav .ubermenu h3.ubermenu-widgettitle {font-size: 1.1em; margin-bottom: 5px; text-transform: uppercase; padding-left: 10px} #global_nav .ubermenu .dpe-flexible-posts {padding-left: 20px;} #global_nav .ubermenu .dpe-flexible-posts h4 a{color: #fff; font-weight: normal; font-size: 14px; text-decoration: none; line-height: 140%;} #global_nav .ubermenu .dpe-flexible-posts h4 a:hover, #global_nav .ubermenu a.read-more:hover {color: #3B6E8F} .priorities-widget h3.quote {font-family: 'Cardo', sans-serif; font-style: italic; font-size: 24px; line-height: 125%; margin-bottom: 10px; color:#fff; font-weight: normal; } .priorities-widget h3.quote a {color: #fff; text-decoration: none;} .priorities-widget h3.quote a:hover {color: #3B6E8F } .priorities-widget p {font-size: 14px; color: #fff; line-height: 135%;} .priorities-widget p a {font-weight: bold; color: #fff; text-transform: uppercase; display: block; padding-top: 5px; text-decoration: none; } .banners .span_6 {margin-left: 0; width: 50%; position: relative;} .banners .span_6 img{float: left; width: 100%;} .banners .span_6 .row {position: relative; border-bottom: 10px #fff solid; cursor: pointer; } .banners .span_6 .row.active {cursor: inherit;} .banners .span_8 {position: relative;} .banner-content {position: absolute; bottom: 0; left: 0; color: #fff; } .banner-content h3, .banner-content p, .banner-content span { background: #002F65; } .banners .banner-content h3 {padding: 15px 20px 15px 20px; font-size: 1.3em; font-weight: normal; line-height: 115%; display: block;} .banner-content p {padding: 0 20px 20px 20px; font-size: .83333em; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; opacity: 0; display:none;} .banners .banner-content a.more {display: inline-block; padding: 10px 20px 5px 0; font-size: 1em; font-weight: 700; text-transform: uppercase; color: #fff; text-decoration: none;} .banners .span_6 img {transition: opacity .3s ease-in; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; } .banners .span_6 .toggle img { opacity:1; } .banners .span_6 .active img { opacity:.2; } .banners .span_6 .active .banner-content p, .banners .span_6 .active .banner-content h3 {opacity: 1; background: none; } .close i {padding: 1px 2px 0 2px;vertical-align: top;} .close {position: absolute; opacity: 0; transition: opacity .3s ease-in; -webkit-transition: opacity .3s ease-in; -moz-transition: opacity .3s ease-in; -o-transition: opacity .3s ease-in; top: 10px; right: 10px; color: #fff; border: #fff solid 3px; border-radius: 50%; width: 25px; height: 25px; z-index: 90;} .active .close {opacity: 1; } .blue-bg h3, .blue-bg p, .blue-bg span, .blue-bg {background: #002F65;} .lblue-bg h3, .lblue-bg p, .lblue-bg span, .lblue-bg {background: #91ACBD} .red-bg h3, .red-bg p, .red-bg span, .red-bg {background: #8E0C3A} .yellow-bg h3, .yellow-bg p, .yellow-bg span, .yellow-bg {background: #C4960C} .teal-bg h3, .teal-bg p, .teal-bg span, .teal-bg {background: #3B6E8F} .cff-likebox.cff-bottom {display: none;} .banners .span_4 .row:first-of-type .banner-content h3, .banners .span_4 .row:first-of-type .banner-content span {background: #3B6E8F; } .banners .span_4 .row .banner-content h3, .banners .span_4 .row .banner-content span {background: #91ACBD; } .banners .span_4 .row .banner-content h3 {font-size: 1.5555em; padding-bottom: 20px;} /* ========================================================================== Hero card (homepage) ========================================================================== */ /* ========================================================================== Hero card (homepage) — pull flush against the header on this template only ========================================================================== */ .home-layout nav#global_nav {margin-bottom: 0;} .home-layout #header-container {display: none;} .home-layout #main-content {margin-top: 0; padding-top: 0;} .home-layout .row.banners {margin-top: 0; padding-top: 0;} .home-layout .hero-card {margin-top: 0; margin-bottom: 0;} /* Feature strip — full-bleed editable background (feature_strip_bg_color), bold white left-aligned text, and an editable thumbnail. Thumbnail is sized to match the small square cards in .banner-articles-row (same border/aspect-ratio treatment). Text + thumbnail are centered as a group within the strip with a fixed gap between them, rather than the thumbnail sitting flush against the right edge. Entirely optional. */ .home-layout .feature-strip { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; min-height: 200px; padding: 25px 20px; } .home-layout .feature-strip-text { flex: 0 1 480px; box-sizing: border-box; display: flex; align-items: center; padding: 0; } .home-layout .feature-strip-text.feature-strip-text-full { flex: 1 1 100%; max-width: 800px; } .home-layout .feature-strip-text p { font-family: 'Open Sans', sans-serif; font-weight: 700; font-style: normal; color: #fff; font-size: 1.8em; line-height: 135%; text-align: left; margin: 0; } .home-layout .feature-strip-image { flex: 0 0 220px; width: 220px; max-width: 220px; box-sizing: border-box; margin: 0; } .home-layout .feature-strip-image img { display: block; width: 100%; height: auto; } /* Optional clickable thumbnail (feature_strip_image_link ACF field). Only appears when a link is set; fades on hover the same way the banner cards above do (see .banner-articles-row .row.toggle img). */ .home-layout .feature-strip-image-link { display: block; width: 100%; } .home-layout .feature-strip-image-link img { transition: opacity .3s ease-in; } .home-layout .feature-strip-image-link:hover img { opacity: .8; } /* Profile photo shown to the left of the feature strip text. Starts invisible; JS adds .is-visible the first time it scrolls into view, which triggers the opacity "dissolve" transition. Once visible, the image itself continuously pulses (scales up and back down slightly) — no border or ring, just the photo growing/shrinking. */ .home-layout .feature-strip-profile { display: block; position: relative; overflow: hidden; align-self: center; flex: 0 0 150px; width: 150px; max-width: 150px; aspect-ratio: 1 / 1; box-sizing: border-box; border-radius: 50%; opacity: 0; transform: scale(.92); transition: opacity 1.1s ease, transform 1.1s ease; } .home-layout .feature-strip-profile.is-visible { opacity: 1; animation: feature-strip-profile-pulse 2.6s ease-in-out infinite; } .home-layout .feature-strip-profile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } @keyframes feature-strip-profile-pulse { 0%, 100% {transform: scale(1);} 50% {transform: scale(1.06);} } /* Navy tint that fades in over the profile photo on hover, revealing the Instagram handle. The whole photo is a link through to the profile, so clicking anywhere on it (tint visible or not) opens Instagram. */ .home-layout .feature-strip-profile-overlay { position: absolute; inset: 0; border-radius: 50%; background-color: rgba(0, 48, 97, .82); /* #003061 navy tint */ opacity: 0; transition: opacity .35s ease; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-weight: 700; font-size: 15px; padding: 10px; } .home-layout .feature-strip-profile:hover .feature-strip-profile-overlay, .home-layout .feature-strip-profile:focus .feature-strip-profile-overlay { opacity: 1; } .home-layout .feature-strip-instagram{ flex:0 0 340px; width:340px; max-width:340px; } /* Desktop: text + profile stay exactly as-is; the Instagram thumbnails grow to fill whatever width is left in the strip, laid out in a single row of 4 (tile size follows the available width, not a fixed box). Mobile (<=1040px) is untouched and keeps the plugin's native cols=2, two-row layout from the shortcode above. */ @media only screen and (min-width: 1041px) { .home-layout .feature-strip-instagram { flex: 0 1 380px; width: auto; max-width: 380px; min-width: 260px; } .home-layout .feature-strip-instagram .sbi { display: flex !important; flex-wrap: nowrap !important; gap: 8px; width: 100% !important; } .home-layout .feature-strip-instagram .sbi_item { width: auto !important; max-width: none !important; flex: 1 1 0 !important; } .home-layout .feature-strip-instagram .sbi_item img { width: 100% !important; height: auto !important; display: block; } } .home-layout .feature-strip-instagram .sbi{ background:none !important; padding:0 !important; } .home-layout .feature-strip-instagram img{ border-radius:8px; } /* Shared "Featured" / "Latest" style, matching the existing "Projects" section title look. Forced to flex-basis:100% wherever its parent is a flex row, so it sits on its own line above the cards rather than becoming a flex item itself. */ .home-layout .section-title { flex-basis: 100%; width: 100%; box-sizing: border-box; text-align: left; font-weight: 300; text-transform: uppercase; font-size: 2em; margin: 0 0 15px 0; padding: 0 2%; } /* Font is editable per-section (Open Sans / Cardo, the only two fonts the site loads) via *_title_font ACF fields. Colour comes through as an inline style, so no colour rule is needed here. */ .home-layout .section-title.font-sans { font-family: 'Open Sans', sans-serif; font-style: normal; } .home-layout .section-title.font-serif { font-family: 'Cardo', serif; font-style: italic; } /* News/Explore and Projects/priorities section titles: the

itself stays full-width (flex-basis:100%) so it forces its own row above the cards below it; the actual visible "badge" is the inner .title-badge span, which is what gets the fixed width/background/rounding/pulse. */ .home-layout .news-articles .section-title, .home-layout .priorities h2 { text-align: center; padding: 0; box-sizing: border-box; flex: 0 0 100%; flex-basis: 100%; } .home-layout .priorities h2 { margin-bottom: 28px; } .home-layout .news-articles .section-title .title-badge, .home-layout .priorities h2 .title-badge { display: inline-block; box-sizing: border-box; text-align: center; padding: 8px 20px; border-radius: 10px; animation: title-badge-pulse 2.4s ease-in-out infinite; } .home-layout .news-articles .section-title .title-badge { min-width: 200px; white-space: nowrap; background-color: #003061; color: #ffffff; } .home-layout .priorities h2 .title-badge { min-width: 260px; white-space: nowrap; background-color: #ffffff; color: #003061; } @keyframes title-badge-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* Article banners — single row of 4 equal cards (article_1–4), filling the full screen width edge-to-edge with only small gaps between the thumbnails themselves (no title, no outer side padding). Background colour behind the row is editable in ACF via banner_articles_bg_color (falls back to white). Uses the same viewport-width breakout as .hero-card so the colour reaches the true edges of the screen regardless of the ancestor .banners padding. */ .home-layout .banner-articles-row { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 14px; padding: 60px 20px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .home-layout .banner-articles-row .row.toggle { /* 4 cards (article_1–4), 3 gaps of 14px between them, no outer padding — this fills the full-bleed row edge-to-edge with only small gaps between the thumbnails themselves. */ flex: 0 0 calc((100% - (3 * 14px)) / 4); max-width: calc((100% - (3 * 14px)) / 4); box-sizing: border-box; border: 2px solid #fff; position: relative; cursor: pointer; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; } .home-layout .banner-articles-row .row.toggle img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease-in, transform .4s ease; } .home-layout .banner-articles-row .row.toggle:hover img { transform: scale(1.08); } .home-layout .banner-articles-row .row.active img { opacity: .2; } .home-layout .banner-articles-row .row.active .banner-content p, .home-layout .banner-articles-row .row.active .banner-content h3 { opacity: 1; background: none; } /* Overlay must be full-width or the h3/p background only stretches as wide as the text inside it, instead of spanning the whole thumbnail. */ .home-layout .banner-articles-row .banner-content { width: 100%; box-sizing: border-box; } /* Smaller overlay text to suit the smaller cards in a 4-across row */ .home-layout .banner-articles-row .banner-content h3 { font-size: .85em; padding: 8px 10px; } .home-layout .banner-articles-row .banner-content p { font-size: .7em; padding: 0 10px 10px 10px; } .hero-card {margin-bottom: 20px; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;} .hero-card-inner {position: relative; overflow: hidden; height: 95vh; min-height: 600px;} .hero-card-inner img {width: 100%; height: 100%; object-fit: cover; display: block;} /* Overlay sits directly on top of the image. Colour/opacity are set inline from ACF fields (hero_card_overlay_color / hero_card_overlay_opacity). */ .hero-card-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;} /* Scroll-down cue — pinned to the bottom of the hero card, pulses continuously */ .hero-scroll-indicator { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; } .hero-scroll-chevron { width: 22px; height: 22px; border-right: 5px solid #fff; border-bottom: 5px solid #fff; border-radius: 0 2px 0 0; transform: rotate(45deg); animation: heroScrollPulse 1.8s ease-in-out infinite; } .hero-scroll-chevron-2 { margin-top: -12px; animation-delay: .3s; } @keyframes heroScrollPulse { 0%, 100% {opacity: .3; transform: rotate(45deg) scale(0.85);} 50% {opacity: 1; transform: rotate(45deg) scale(1.15);} } @media (prefers-reduced-motion: reduce) { .hero-scroll-chevron {animation: none; opacity: .85;} } /* Text block centres over the whole card, above the overlay */ .hero-card-content {position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px;} .hero-card-content-inner {max-width: 800px;} .hero-card-content h1 {margin: 0 0 10px 0; font-weight: normal; line-height: 115%; color: #fff; text-align: center;} .hero-card-content p {margin: 0 auto; line-height: 140%; max-width: 720px; color: #fff; text-align: center;} a.hero-card-link {display: block; text-decoration: none;} /* Text size — editable in ACF via hero_card_text_size (select field) */ .hero-card-content-inner.size-small h1 {font-size: 1.6em;} .hero-card-content-inner.size-small p {font-size: .9em;} .hero-card-content-inner.size-medium h1 {font-size: 2.2em;} .hero-card-content-inner.size-medium p {font-size: 1.05em;} .hero-card-content-inner.size-large h1 {font-size: 3em;} .hero-card-content-inner.size-large p {font-size: 1.25em;} .hero-card-content-inner.size-xlarge h1 {font-size: 3.8em;} .hero-card-content-inner.size-xlarge p {font-size: 1.4em;} /* Font — editable in ACF via hero_card_font, limited to fonts the site already loads (Open Sans / Cardo) */ .hero-card-content-inner.font-sans h1, .hero-card-content-inner.font-sans p {font-family: 'Open Sans', sans-serif;} .hero-card-content-inner.font-serif h1, .hero-card-content-inner.font-serif p {font-family: 'Cardo', serif;} /* Weight/style — editable in ACF via hero_card_font_weight. Independent of the font family choice above; applies on top of it. */ .hero-card-content-inner.weight-thin h1, .hero-card-content-inner.weight-thin p {font-weight: 300; font-style: normal;} .hero-card-content-inner.weight-regular h1, .hero-card-content-inner.weight-regular p {font-weight: 400; font-style: normal;} .hero-card-content-inner.weight-regular-italic h1, .hero-card-content-inner.weight-regular-italic p {font-weight: 400; font-style: italic;} .hero-card-content-inner.weight-bold h1, .hero-card-content-inner.weight-bold p {font-weight: 700; font-style: normal;} .hero-card-content-inner.weight-bold-italic h1, .hero-card-content-inner.weight-bold-italic p {font-weight: 700; font-style: italic;} /* Fade-up-in entrance animation. "both" keeps it invisible before the animation starts and holds the end state after it finishes. */ .hero-card-content-inner { animation: heroFadeUp .9s ease-out both; animation-delay: .15s; } @keyframes heroFadeUp { from {opacity: 0; transform: translateY(28px);} to {opacity: 1; transform: translateY(0);} } /* Respect users who've asked their OS/browser to reduce motion */ @media (prefers-reduced-motion: reduce) { .hero-card-content-inner {animation: none; opacity: 1; transform: none;} } #mc_embed_signup input {width: 100%; padding:10px; font-size: 14px; margin-bottom: 10px; color: #7F8184; font-family: 'Open Sans', sans-serif;} #mc_embed_signup input.button {margin-bottom: 0; background: #002E64; font-weight: 800; text-transform: uppercase; font-size: 14px; color: #fff; padding: 10px; cursor: pointer; } #mc_embed_signup input.button:hover {background: #396D8E;} ul.team {padding: 0 20px;} ul.team li {padding: 25px 0; border-bottom: #939598 solid 1px;} .page article, article#listing { position: relative; padding-bottom: 20px; min-height: 500px; background: transparent;} .page article img {max-width: 100%; height:auto;} .page article .gform_wrapper img {width: auto; height:auto;} .post-password-form p {margin: 6px 0;} .article_content {background: transparent; padding: 10px;} .sub_heading {padding-top: 60px;} article#listing h2{ font-size: 1.3em; line-height: 100%; font-weight: 700; margin-bottom: 5px; } article#listing h2 a {color: #396D8E; text-decoration: none;}article#listing h2 a:hover {color: #002E64} article#listing ul.article_posts li p {font-size: 16px; padding: 6px 0;} article#listing time {font-size: .8em; text-transform: uppercase; font-weight: bold; display: block; padding: 3px 0} article#listing ul.article_posts {padding:0 20px 20px 20px;} article#listing ul.article_posts li p .read_more {font-weight: bold; text-decoration: none; color: #396D8E;} article#listing ul.article_posts li p .read_more:hover {color: #002E64 } article#listing ul.article_posts li {padding: 20px 0; border-bottom: #efefef 1px solid; list-style: none;} article#listing ul.article_posts li .span_2 {width: 25%;} article#listing ul.article_posts li .span_10 {width: 73%; margin-left: 2%;} article#listing h1 {padding: 20px; font-size: 1.8em; line-height: 120%; font-weight: 300; margin-bottom: 5px; display: block; } article#listing .featured img {max-width: 100%; height: auto; padding-top: 20px;} .article_content ul, .article_content ol {padding:0 30px 20px 30px; font-size: 16px; line-height: 150%; } .article_content ul li {list-style: disc; margin-bottom: 6px; } .article_content ol li {list-style: decimal;margin-bottom: 6px; } .article_content p {margin: 0 0 15px 0; line-height: 150%;} .article_content p.break {margin: 0;} .article_content blockquote {padding: 10px 30px; font-family: 'Cardo', sans-serif; font-style: italic; font-size: 26px; color:#002E64; } article#listing .article_content h1 {font-family: 'Cardo', sans-serif; font-style: italic; font-size: 46px; line-height: 120%; padding:10px 20px; font-weight: 400; } .article_content a {color: #396D8E; text-decoration: none; font-weight: bold;} .article_content a:hover {color: #002E64} .article_content h2, .article_content h3, .article_content h4, .article_content h5 {padding: 10px 0 0 0; margin-bottom: 5px;} .article_content h3 {font-size: 24px; color: #002E64} .article_content h4 {font-size: 24px; color: #8D0838;} .article_content h5 {font-size: 10px;} .article_content time {margin-bottom: 10px; display: block;} /* ---- Dvar Torah featured video hero card ---- */ .dvar-video-hero {position: relative; border-radius: 6px; overflow: hidden; margin: 0 0 24px; background: #001C3F;max-width: 700px; /* adjust this number to taste */} .dvar-video-hero__poster {position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #001C3F; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; width: 100%; padding: 0;} .dvar-video-hero__poster::before {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,28,63,.55) 0%, rgba(0,28,63,.30) 45%, rgba(0,28,63,.80) 100%);} .dvar-video-hero__kicker {position: absolute; top: 16px; left: 18px; right: 18px; z-index: 2; display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,.35); padding: 6px 12px 6px 9px; border-radius: 20px; max-width: max-content;} .dvar-video-hero__kicker svg {width: 12px; height: 12px; fill: #ffb4c9; flex-shrink: 0;} .dvar-video-hero__kicker span {color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .2px; font-family: 'Open Sans', sans-serif;} .dvar-video-hero__play {position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .15s ease, background .15s ease; padding: 0;} .dvar-video-hero__play:hover, .dvar-video-hero__play:focus {transform: scale(1.06); background: rgba(255,255,255,.24);} .dvar-video-hero__play svg {width: 20px; height: 20px; fill: #fff; margin-left: 3px;} .dvar-video-hero__text {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: center; padding: 0 24px 26px;} .dvar-video-hero__text h2 {font-family: 'Cardo', sans-serif; font-style: italic; font-weight: 400; color: #fff; font-size: 1.5rem; line-height: 1.3; margin: 0 0 6px; padding: 0;} .dvar-video-hero__text p.sub {color: #cfe0ee; font-size: .88rem; margin: 0; line-height: 1.5;} .dvar-video-hero__frame {position: relative; padding-bottom: 56.25%; height: 0;} .dvar-video-hero__frame iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: 0;} @media (max-width: 600px) { .dvar-video-hero__play {width: 52px; height: 52px;} .dvar-video-hero__text h2 {font-size: 1.15rem;} } .page-template-page-history .pf-content .printfriendly {display: none;} .article_content ul.previous-rabbis, .article_content ul.links {padding: 0;} .article_content ul.previous-rabbis li {list-style: none; padding-top: 20px; margin-top: 20px; border-top: #ccc solid 1px;} .article_content ul.previous-rabbis li h4 {padding-top: 0;} .article_content ul.previous-rabbis li .dates {font-size: .8888em; color: #002F65; margin-top: 10px;} .article_content ul.links li {list-style: none; margin: 0; } .press_statement {background:#7F8184; color: #fff; padding: 10px; font-size: .7777em; margin-bottom: 20px; } .contact article p:first-of-type {padding: 0;} .contact article hr {margin: 20px 0;} .contact article h4 {padding-top: 0;} article p em, article p i {font-style: italic;} article p strong {font-weight: bold;} .priorities {margin-top: 20px; margin-bottom: 20px; padding: 20px 0; background-position: center; /* center the image */ background-size: cover; /* cover the entire window */} .priorities .row { display: flex; } .home .priorities .span_4 {padding-bottom: 20px;display: flex; flex-direction: column;} .priorities h2 {font-weight: 300; text-transform: uppercase; font-size: 2em; text-align: left;} .priorities h2.font-sans {font-family: 'Open Sans', sans-serif; font-style: normal;} .priorities h2.font-serif {font-family: 'Cardo', serif; font-style: italic;} .priorities h3 {padding: 5px 10px; display: inline-block; font-size: .777em; text-transform: uppercase; color: #fff; } .priorities a {color: #fff; text-decoration: none;} .priorities ul li { padding:0 10px; font-size: 1.6666em; font-family: 'Cardo', sans-serif; font-style: italic; } .priorities ul li a { border-bottom: 1px solid #fff; display: block; padding: 10px 0;} .priorities ul li:last-child a{border-bottom: none;} .priorities a.view-more {width: 100%; display: block; padding: 0 10px 10px 10px; text-align: right; text-transform: uppercase; font-weight: 300;} .priorities .education img, .priorities .education a.view-more, .priorities .education h3, .priorities .education p {background: #3B6E8F; } .priorities .social_change p, .priorities .social_change a.view-more, .priorities .social_change h3 {background: #C4960C;} .priorities .community_building p, .priorities .community_building a.view-more, .priorities .community_building h3 {background: #9EA374;} .priorities img {padding: 10px 0; margin: 0;} .priorities p {padding:10px 20px ; margin: 0; color: #fff; flex: 1 0 auto;} .news-articles .container {display: block; /* or inline-flex */; padding: 20px 0;} .news-articles .col {position: relative; flex:1; background: #8E0C3A; } .news-articles .articles {background:#002F65 } .news-articles .news {margin-bottom: 20px;} .news-articles h3 {position: absolute; top: 0; left: 0; padding: 10px 12px; color: #fff; text-transform: uppercase; font-size: .7777em; background-color:#8E0C3A } .news-articles a img{display: block; width: 100%;} .news-articles h2 {font-family: 'Cardo', sans-serif; font-style: italic; font-size: 1.4em; font-weight: normal;} .news-articles .articles h3, .news-articles .articles .text-block {background:#002F65 } .news-articles .view-all { text-transform: uppercase; padding-top: 10px; float: right; opacity: .6;position: absolute;right: 20px;bottom: 20px;} .text-block {background: #8E0C3A; padding: 20px; min-height: 150px;} .text-block a {color: #fff; text-decoration: none;} .text-block time {color: #fff; padding-bottom: 10px; display: block;} .connect {padding-bottom: 30px;} .connect h2 {font-size: 2em; font-weight: 300; text-transform: uppercase; margin-bottom: 20px;} .connect h3 {font-size: .777em; text-transform: uppercase; display: inline-block; background: #fff; padding: 10px 10px 5px 10px; border-top: #7F8084 solid 1px; border-left: #7F8084 solid 1px; border-right: #7F8084 solid 1px;} .connect .inner-widget {border-top: #7F8084 solid 1px; padding-top: 10px; margin-top: -1px;} .connect .inner-widget .clear a {color: #939598; text-decoration: none; text-transform: uppercase;} article img {max-width: 100%; height: auto;} article#priorities {background: none;} #priorities .title {background: #3B6E8F; color: #fff; font-weight: 700; text-transform: uppercase; display: inline-block; padding: 3px 10px;} #priorities .intro {padding: 20px 0; margin-bottom: 20px; } #priorities .intro h1 {font-weight: 300; font-size: 1.8em; line-height: 100%; display: inline-block; } #priorities .intro p {font-size: 1.6667em; line-height: 110%; font-family: 'Cardo', sans-serif; font-style: italic; font-weight: 400;} .wp-caption.alignnone { max-width: 96% !important; width: auto !important; } p.wp-caption-text {margin-bottom: 10px;} dd.gallery-caption {margin-right: 30px;} #priorities h2{font-size:1.6666em; margin-bottom: 10px; } #priorities h3{margin: .7em 0 .2em 0; text-transform: uppercase; font-weight: 300; color: #3B6E8F;} .page article#priorities .addthis_toolbox {padding-bottom: 0;} article#priorities .content {background: #fff;} aside#widgets div.widget {padding: 20px;} aside#widgets div.widget h3 {font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 700; margin-bottom: .5em; } aside#widgets div.widget .textwidget {font-size: .8333em; } aside ul.dpe-flexible-posts li a img {max-width: 100%; float: left; width: 25%; padding-right: 10px; display: inline-block;} aside ul.dpe-flexible-posts li h4 {font-size: .8em; font-weight: normal;} aside ul.dpe-flexible-posts li {display: inline-block; width: 100%;} aside div.grey {background: #636466; } aside div.blue {background: #3B6E8F} .connect .really_simple_twitter_widget li {padding: 20px 0; margin: 0 30px; border-bottom: #ccc solid 1px; font-size: .8em; } .connect .really_simple_twitter_widget li:last-child {border-bottom: none; } .connect .really_simple_twitter_widget li img {margin-right: 15px;} .connect .really_simple_twitter_widget li a {color: #3B6E8F; font-weight: bold; text-decoration: none;} .rstw_link_user a {text-transform: uppercase; color: #3B6E8F; text-decoration: none;} .related h2 {font-size: 2em; font-weight: 300; text-transform: uppercase; margin-bottom: 10px;} .related h3 {font-size: 1.333em; } .related h3 a {color: #636466; text-decoration: none;} .related span {font-size: .7777em; font-weight: 700; text-transform: uppercase; display: inline-block; padding: 10px 10px 10px 0; } .related li {border-top: #939598 solid 1px;} div#articles {margin-top: 20px; margin-bottom: 20px;} ul.post_archive {background: #fff; padding:20px 20px 20px 0;} .post_archive li {border-bottom: #939598 solid 1px; padding: 25px 0;} .post_archive li p {font-size: .8333em;} .post_archive time {color: #002F65; font-weight: 700; font-size: .9em; padding: 10px 0 10px 0; display: block; } .link-category {padding: 25px 0; border-bottom: #939598 solid 1px;} .link-category h2 {color:#8E0C3A } ul.links li a {color: #002F65; font-weight: bold; text-decoration: none; font-size: .8333em; background: url(images/external-link.png) no-repeat right 3px; padding-right: 20px;} a.priorities-link {font-size: .7777em; text-transform: uppercase; font-weight: 700; color: #fff; background:#3B6E8F; padding: 2px 5px; text-decoration: none; } #menu-footer { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2;} /* Images */ .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } img.alignleft { margin: 5px 20px 5px 0; } .wp-caption.alignleft { margin: 5px 10px 5px 0; } img.alignright { margin: 5px 0 5px 20px; } .wp-caption.alignright { margin: 5px 0 5px 10px; } img.aligncenter { margin: 5px auto; } img.alignnone { margin: 5px 0; } .wp-caption .wp-caption-text, .entry-caption, .gallery-caption { color:#7F8084; font-size: 14px; font-style: italic; font-weight: bold; } img.wp-smiley, .rsswidget img { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; margin-top: 0; padding: 0; } .wp-caption.alignleft + ul, .wp-caption.alignleft + ol { list-style-position: inside; } /* Pagination */ ul.page-numbers { margin: 20px; display: inline-block; padding: 0 0 0 0; line-height: normal; box-sizing: border-box; width: 100%; } ul.page-numbers li { float: left; } ul.page-numbers a, ul.page-numbers span { padding: 2px 5px; margin: 0 5px 0 0; text-decoration: none; color: #3B6E8F; } ul.page-numbers a:hover, ul.page-numbers span.current { font-weight: 700; } ul.page-numbers a.prev, ul.page-numbers a.next {background: #3B6E8F; color:#D9D9D9 } .installation article h2 {padding-top: 60px;} .page aside div {color: #fff;} .page aside div p {padding: 20px;} .page aside div img {max-width: 100%; height: auto;} .page aside div h3 {font-family: 'Cardo', sans-serif; font-style: italic; font-size: 46px; line-height: 100%; padding:55px 20px 20px 20px; font-weight: 400; } #browse-cat { text-transform: uppercase; margin-top: 20px;} #global_nav .ubermenu-column-id-2380-col-0 {padding-top: 0;} #footer-container {color: #fff; padding: 25px 0; background: #003061 ;} footer { border-bottom: 1px solid rgba(255,255,255,.25); padding: 25px 0;} footer li {} footer li a {color: #fff; text-decoration: none; display: inline-block; padding-bottom: 15px; font-size: .8em;} footer li a:hover {text-decoration: underline;} footer .motif img{float: right; padding-top: 70px;} footer #mc_embed_signup {background-color: rgba(255,255,255,.1); padding: 10px;} footer .span_4 {padding-bottom: 20px;} footer .sub-menu, footer #menu-item-897 {display: none;} #newsletter {background-color: #91acbd; padding: 15px; box-sizing: border-box; width: 25%; flex: 0 0 25%; max-width: 25%; margin-right: 50px;} #newsletter h3 {background-color: rgba(255,255,255,.15); padding: 10px 10px 5px 10px; color: #fff; display: inline-block; text-transform: uppercase; font-size: .7777em; line-height: 100%; } #copyright {margin-top: 20px; font-size: 12px; color: #fff;} .contact1 {font-size: .7777em; color: #fff;} .contact1 img {max-width: 180px; width: 100%; height: auto; display: block; margin-left: -10px; margin-bottom: -8px;} .red, .green, .yellow, .divrei-color { position: relative; margin-bottom: 20px;} .red {background: #8D0838; margin-left: 0;} .green { background: #9DA273; color: #fff; padding: 30px 30px 20px 30px;} .yellow { background: #C4950A; margin-top: 20px; padding: 30px; color: #fff;} .yellow h2 {font-size: 1.4em; margin-top: 30px;} .yellow #gallery-1 img {border: none; width: 90%; height: auto;} .page article .gallery {padding-left: 20px;} .page article .gallery img {border: none; width: 90%; height: auto;} .red img {width: 100%; height: auto;} .red p, .green p {padding:20px 30px 25px 30px; color: #fff;} .red p a.more-link {color: #fff; font-weight: bold; text-decoration: none;} .red p a.more-link:hover {color: #7F8084} .green h3 {font-family: 'Cardo', sans-serif; font-style: italic; font-size: 46px; line-height: 100%; padding: 30px 0 30px 0; font-weight: 400; } .maven {float: right; padding: 20px 0; color: #fff; font-size: .6em; text-transform: uppercase; text-decoration: none;} aside div.row {position: relative; padding: 50px 20px 20px 20px; color: #fff; min-height: 180px; margin-bottom: 20px; margin-top: 0;} aside div.row a {font-weight: bold; text-decoration: none; text-decoration: none; color: #fff;} aside div.row p {padding: 0; } aside div.row ul li {padding: 10px 0; } aside div.row ul li .sub-menu li {padding: 3px 0; } aside div.row ul li .sub-menu li a {font-weight: normal; font-size: .8em;} .dpe-flexible-posts li {padding: 10px 0; border-bottom: #FEEBF1 solid 1px; display: block; } .widget_dpe_fp_widget a.view-all{padding: 10px 0 10px 20px; text-transform: uppercase; color: #fff; text-decoration: none; font-weight: bold; display: block; } #global_nav .ubermenu .ubermenu-submenu a.view-more { padding: 0 0 20px 30px; text-transform: uppercase; color: #fff; text-decoration: none; font-weight: bold; display: inline-block; } .widget_dpe_fp_widget a.view-all:hover, #global_nav .ubermenu .ubermenu-submenu a.view-more:hover {color: #3B6E8F} aside div.row h3 {font-family: 'Cardo', sans-serif; font-style: italic; font-size: 26px; line-height: 120%; padding:0; font-weight: 400; } aside div.row time {font-size: .7em; text-transform: uppercase; display: block; margin: 5px 0; } /* ========================================================================== Media Queries ========================================================================== */ .post-password-form input, .ocr-form .gform_wrapper input[type=text],.ocr-form .gform_wrapper input[type=url],.ocr-form .gform_wrapper input[type=email],.ocr-form .gform_wrapper input[type=tel],.ocr-form .gform_wrapper input[type=number], .ocr-form .gform_wrapper input[type=password] {border:solid 1px #666; font-size: 13px; } .gform_wrapper, .gform_confirmation_wrapper, .post-password-form {padding: 20px;} .inside-page_wrapper, .inside-page {padding: 0;} .ocr-form .gform_footer input[type=submit], #listing .gform_footer input[type=submit] {background:#8D0838; padding: 10px 40px; color: #fff; cursor: pointer; } #listing .gform_wrapper ul li.gfield {margin-bottom: 15px;} #listing .gform_wrapper .gsection {border-bottom: none; border-top: 1px dotted #CCC; padding-top: 10px; margin-top: 50px;} #listing .gform_wrapper .gsection h2 {color: #396D8E;} .gform_wrapper .description_above .gfield_description {font-family: 'Open Sans', sans-serif; } .post-password-form input {padding:5px; } .post-password-form input[type=submit] {margin-left:83px; margin-top: 10px; font-size: 1em; background:#8D0838; padding: 6px 20px; color: #fff; cursor: pointer; line-height: 1em; border: none; clear: both; display: block; font-family: 'Open Sans', sans-serif; } .post-password-form p {margin-bottom: 20px; } ul.instagram-pics {padding: 0 10px;} ul.instagram-pics li {width: 32%; float: left; margin: 0 1%;} ul.instagram-pics li a { border-radius: 3px; padding: 4px; border: #939598 solid 1px; display: inline-block; margin-right: 10px; margin-bottom: 10px; } ul.instagram-pics li:nth-child(1n) {margin-left: 0; } ul.instagram-pics li:nth-child(3n) {margin-right: 0; } ul.instagram-pics li a img {float: left; width: 100%;} #listing .gform_wrapper textarea, #listing .gform_wrapper input[type=text], #listing .gform_wrapper input[type=url], #listing .gform_wrapper input[type=email], #listing .gform_wrapper input[type=tel], #listing .gform_wrapper input[type=number], #listing .gform_wrapper input[type=password] {font-size: 13px;} .wpgform-dontsplit {padding: 20px 0; } #ss-submit, #ss-back-button {cursor: pointer; background: #396D8E; color: #fff; border: none; font-size: 1.2em; width: auto; padding: 5px 20px; margin-right: 40px;}#ss-back-button {margin-right: 10px;} .wpgform-column-wrapper ol {padding: 0;} .ss-form input, .ss-form textarea {font-size: 1em; padding: 5px; width: 80%;} .ss-form .errorbox-bad input, .ss-form .errorbox-bad textarea {color: #D8000C; background-color: #FFBABA; } .ss-form .error-message {display: block; color: #D8000C; padding: 5px; margin: 10px 0; } .ss-required-asterisk {color: red; } .ss-form input[type='checkbox'], .ss-form input[type='radio'] {font-size: 30px;} .goog-inline-block {display: inline-block; margin-right: 10px;} .article_content div.ss-form-container {font-family: 'Open Sans', sans-serif; } .ubermenu-skin-grey-white.ubermenu-responsive-toggle {background:none ;} @media only screen and (min-width: 480px) { } @media only screen and (min-width: 768px) { .banner .content {padding-right: 20px; padding-left: 20px; padding-top: 0;} .red, .green, .yellow {min-height: 450px; position: relative; margin-bottom: 0;} #megaMenu { }.banners .banner-content h3 {padding: 15px 20px 15px 20px; font-size: 1.25em; font-weight: normal; line-height: 115%; display: block;} .news-articles .container {display: flex; /* or inline-flex */;} footer .span_4 {padding-right: 60px; padding-bottom: 0} #priorities .intro h1 {font-size: 3.3333em;} #title img {width: auto;} #logo-bar {padding: 30px 0 ;} body {font-size: 18px; }.article_content {background: transparent; padding: 20px 20px 20px 0;} article#listing h1 {padding: 20px; font-size: 46px;} article#listing ul.article_posts li .span_2 {width: 15%;} article#listing ul.article_posts li .span_10 {width: 83%; } article#listing h2{ font-size: 1.6667em;} .banners .span_6 .row.blue-bg {border-bottom:#fff solid 6px; border-right:#fff solid 6px;} .banners .span_6 .row.green-bg {border-top:#fff solid 6px; border-right:#fff solid 6px; border-bottom: none;} .banners .span_6 .row.red-bg {border-bottom:#fff solid 6px; border-left:#fff solid 6px;} .banners .span_6 .row.yellow-bg {border-bottom:#fff solid 6px; border-left:#fff solid 6px; border-top:#fff solid 6px; } .banners .span_6 .row.teal-bg {border-top:#fff solid 6px; border-left:#fff solid 6px; border-bottom: none;} .news-articles .news {margin-bottom: 0 ;} .home .priorities .span_4 {padding-bottom: 0;} .news-articles h2 {font-size: 2.111em;} } @media only screen and (min-width: 1040px) { /* =============== Maximal Width =============== */ .banners .banner-content h3 {padding: 10px 15px 10px 15px; font-size: 1.35em; font-weight: normal; line-height: 115%; display: block;} } @media only screen and (max-width: 1040px) { .banners .span_6 {width: 100%;} .banners .banner-content h3 {padding: 10px 15px; font-size: 1.15em; font-weight: normal; line-height: 115%; display: block;} .hero-card-content {padding: 20px 15px;} .hero-card-content-inner.size-small h1 {font-size: 1.3em;} .hero-card-content-inner.size-small p {font-size: .85em;} .hero-card-content-inner.size-medium h1 {font-size: 1.6em;} .hero-card-content-inner.size-medium p {font-size: .95em;} .hero-card-content-inner.size-large h1 {font-size: 1.9em;} .hero-card-content-inner.size-large p {font-size: 1em;} .hero-card-content-inner.size-xlarge h1 {font-size: 2.2em;} .hero-card-content-inner.size-xlarge p {font-size: 1.05em;} .hero-card-content-inner h1 {margin-bottom: 6px;} .home-layout .banner-articles-row .row.toggle {flex: 0 0 calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2);} .home-layout .banner-articles-row .section-title {padding-left: 2%;} .home-layout .news-articles .col {flex: 0 0 calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2);} .home-layout .priorities-cards-row .col {flex: 0 0 calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2);} .hero-card-inner {height: 75vh; min-height: 420px;} .home-layout .feature-strip {gap: 30px; padding: 30px 5%;} .home-layout .feature-strip-text {flex-basis: 100%; max-width: 100%;} .home-layout .feature-strip-image {flex: 0 0 180px; width: 180px; max-width: 180px; margin: 0 auto;} .home-layout .feature-strip-carousel {flex: 0 0 232px; width: 232px; max-width: 232px; padding: 0 26px; margin: 0 auto;} .home-layout .feature-strip-profile {flex: 0 0 140px; width: 140px; max-width: 140px; margin: 0 auto;} .home-layout .feature-strip-text p {font-size: 1.4em;} } /* Weekly Insight hero card — sits above the News/Insight row and features the latest Dvar Torah (previously the 4th thumbnail inside the News row). Hidden/offset by default, then fades and rises into place the first time it scrolls into view (see the IntersectionObserver script in page-home.php, same pattern as .feature-strip-profile). */ .weekly-insight-hero { max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: 70px 20px 40px; } .weekly-insight-hero-inner { position: relative; width: 960px !important; max-width: 100% !important; margin: 0 auto; opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; border-radius: 4px; overflow: hidden; } .weekly-insight-hero-inner.is-visible { opacity: 1; transform: translateY(0); } /* Hardcoded fixed pixel box (960 x 540 = 16:9), not a ratio property, so the exact shape can't be reinterpreted by anything else. !important locks it against any other rule or stale cached snapshot. */ .weekly-insight-hero-media { display: block !important; position: relative !important; width: 960px !important; height: 540px !important; max-width: 100% !important; overflow: hidden !important; } .weekly-insight-hero-media img { width: 960px !important; height: 540px !important; max-width: 100% !important; object-fit: cover !important; object-position: center 20% !important; display: block !important; transition: transform .4s ease; } .weekly-insight-hero-media iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; transition: transform .4s ease; } .weekly-insight-hero-inner:hover .weekly-insight-hero-media img, .weekly-insight-hero-inner:hover .weekly-insight-hero-media iframe { transform: scale(1.08); } .weekly-insight-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0, 47, 101, .9) 0%, rgba(0, 47, 101, .1) 60%, rgba(0, 47, 101, 0) 100%); pointer-events: none; } .weekly-insight-hero-content { position: absolute; left: 20px; right: 20px; bottom: 18px; color: #fff; } .weekly-insight-hero-label { display: inline-block; text-transform: uppercase; font-size: .7em; letter-spacing: .02em; background-color: #8E0C3A; padding: 5px 9px; margin-bottom: 10px; } .weekly-insight-hero-content h2 { font-family: 'Cardo', sans-serif; font-style: italic; font-weight: normal; font-size: 1.3em; line-height: 120%; margin: 0 0 6px 0; max-width: 800px; } .weekly-insight-hero-content h2 a { color: #fff; text-decoration: none; } .weekly-insight-hero-content time { display: block; color: rgba(255, 255, 255, .75); font-size: .8em; margin-bottom: 8px; } .weekly-insight-hero-content .view-all { display: inline-block; text-transform: uppercase; font-size: .75em; color: #fff; opacity: .85; text-decoration: none; } @media only screen and (max-width: 1040px) { .weekly-insight-hero { padding: 50px 20px 30px; } /* Same 16:9 ratio as desktop, just smaller fixed pixel values (420 x 236 = 16:9), not a percentage or aspect-ratio property. */ .weekly-insight-hero-inner { width: 420px !important; max-width: 100% !important; margin-left: auto; margin-right: auto; } .weekly-insight-hero-media { width: 420px !important; height: 236px !important; max-width: 100% !important; } .weekly-insight-hero-media img { width: 420px !important; height: 236px !important; max-width: 100% !important; } .weekly-insight-hero-content { left: 15px; right: 15px; bottom: 14px; } .weekly-insight-hero-content h2 { font-size: 1.15em; } } @media only screen and (max-width: 480px) { /* Smaller phones: same 16:9 ratio again (320 x 180), since the 420px box above is still too wide for a narrow phone screen. */ .weekly-insight-hero-inner { width: 320px !important; } .weekly-insight-hero-media { width: 320px !important; height: 180px !important; } .weekly-insight-hero-media img { width: 320px !important; height: 180px !important; } } @media (prefers-reduced-motion: reduce) { .weekly-insight-hero-inner { transition: none; opacity: 1; transform: none; } } /* News/Insight row — full-bleed editable background (news_articles_bg_color, defaults to white). Cards are sized to match the banner-articles-row thumbnails exactly: both rows are full 100vw-width with the same 2% side padding, and both cards use flex-basis 20%, so they land on the same rendered pixel size regardless of screen width. Text overlays the image the same way .banner-content does, instead of sitting in a block below it. */ .home-layout .row.news-articles { max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: 60px 20px; } .home-layout .news-articles .container { max-width: none; width: 100%; box-sizing: border-box; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .home-layout .news-articles .col { background: none; /* 3 cards, 2 gaps of 14px between them, no outer padding — fills the full-bleed row edge-to-edge with only small gaps between thumbnails, matching .banner-articles-row sizing. */ flex: 0 0 calc((100% - (2 * 14px)) / 3); max-width: calc((100% - (2 * 14px)) / 3); margin: 0; position: relative; aspect-ratio: 1 / 1; overflow: hidden; } .home-layout .news-articles .articles { background: none; } .home-layout .news-articles .image { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .home-layout .news-articles .image img, .home-layout .news-articles .image iframe { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .home-layout .news-articles .col:hover .image img, .home-layout .news-articles .col:hover .image iframe { transform: scale(1.08); } /* Text overlays the bottom of the image, same treatment as .banner-content */ .home-layout .news-articles .text-block { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; min-height: 0; background: rgba(0, 47, 101, .85); color: #fff; padding: 10px 15px; } .home-layout .news-articles .articles .text-block { background: rgba(0, 47, 101, .85); } .home-layout .news-articles .text-block h2 { font-family: 'Open Sans', sans-serif; font-style: normal; font-size: .95em; margin: 0 0 4px 0; } .home-layout .news-articles .text-block h2 a, .home-layout .news-articles .articles .text-block a { color: #fff; } .home-layout .news-articles .text-block time { color: rgba(255, 255, 255, .75); font-size: .75em; } .home-layout .news-articles .view-all { position: static; display: inline-block; font-size: .75em; opacity: .85; } /* Priorities/Projects row — full-bleed editable background (projects_bg_color, defaults to white), cards sized to match the other two rows (same 100vw + 2% padding + 20% flex-basis math), square thumbnails, overlay text matching .banner-content / news-articles style. */ .home-layout .row.priorities { max-width: 1200px; box-sizing: border-box; padding: 40px; margin: 40px auto; background-repeat: no-repeat; background-size: cover; } .home-layout .priorities .container { max-width: none; width: 100%; box-sizing: border-box; padding: 0; } .home-layout .priorities-cards-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .home-layout .priorities-cards-row .col { /* Fixed to match the size of the News/Featured thumbnails, rather than stretching to fill the (now wider) light blue background — the row centers within the background instead of the cards growing to fit it. */ flex: 0 0 280px; max-width: 280px; margin: 0; padding: 0; display: block; } /* Below 1040px, fall back to fluid 2-up sizing so the fixed 280px cards above don't overflow narrow screens. */ @media only screen and (max-width: 1040px) { .home-layout .priorities-cards-row .col { flex: 0 0 calc((100% - 14px) / 2); max-width: calc((100% - 14px) / 2); } } .home-layout .priorities-card { position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: block; } .home-layout .priorities-card img { width: 100%; height: 100%; object-fit: cover; display: block; padding: 0; margin: 0; transition: transform .4s ease; } .home-layout .priorities-card:hover img { transform: scale(1.08); } .home-layout .priorities-card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; background: #002F65; color: #fff; padding: 10px 15px; text-decoration: none; display: block; } .home-layout .priorities-card-overlay h3 { background: none; display: block; padding: 0; margin: 0 0 4px 0; font-size: .95em; text-transform: none; color: #fff; } .home-layout .priorities-card-overlay p { background: none; padding: 0; margin: 0 0 6px 0; font-size: .75em; flex: none; color: rgba(255, 255, 255, .9); } .home-layout .priorities-card-overlay .view-more { background: none; display: inline-block; width: auto; padding: 0; text-align: left; font-size: .7em; opacity: .85; } @media only screen and (max-width: 600px) { /* Kept at 2-up (inherits the calc from the 1040px breakpoint above) so thumbnails stay side-by-side with a small gap, rather than stacking to a single full-width column. */ } @media only screen and (min-width: 1300px) { /* =============== Maximal Width =============== */ .banners {padding-bottom: 20px; padding-left: 7%; padding-right: 7%;} .banners .banner-content h3 {padding: 10px 15px 10px 15px; font-size: 1.35em; font-weight: normal; line-height: 115%; display: block;} } /* ========================================================================== Helper classes ========================================================================== */ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== Print styles ========================================================================== */ @media print { } /* Added */ .sidebar-news { padding-left: 15px; } .sidebar-news > li{ position: relative; } .sidebar-news span{ cursor: pointer; } .sidebar-news span.right::before { content: "▶ "; left: -22px; position: absolute; top: 12px; vertical-align: middle; font-size: 12px; } .sidebar-news span.down::before { content: "▼ "; left: -25px; position: absolute; top: 12px; vertical-align: middle; font-size: 12px; } .media-view-more span{ font-size: 14px; } .special-tab-viewall .view-all-media{ text-align: center; } aside .special-tab-viewall{ padding: 15px !important; background : #7f8184 none repeat scroll 0 0; min-height: inherit !important; } .post-type-archive-article #listing::before { background: #002f65 none repeat scroll 0 0; color: #fff; content: "Media"; font-size: 14px; font-weight: bold; padding: 12px; position: absolute; text-transform: uppercase; top: -43px; } .post-type-archive-article #listing{ margin-top: 43px; } .article_posts time{ color: #002F65; } .tag.blue > a { background: #002f65 none repeat scroll 0 0; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 2px; } .tag.blue { display: inline-block; float: left; padding-right: 5px; } .tag.rdark > a { background: #8D0838 none repeat scroll 0 0; color: #fff; font-size: 14px; font-weight: bold; text-decoration: none; text-transform: uppercase; padding: 2px } .tag.rdark { display: inline-block; float: left; padding-right: 5px; } .tag-cloud { padding-top: 15px; } aside .sidebar-news a{ font-weight: normal !important; } .media-related img{ min-height: 235px; } .news-related img{ min-height: 235px; } #listing .read-more{ color: #7F8084; font-weight: bold; text-decoration: none; } .article_posts .read-more{ color: #7F8084; font-weight: bold; text-decoration: none; } /* Divrei Taxonomy */ .divrei-color{ color: #3B6E8F; } ul.parent-divrei ul { padding-left: 5px; } .parent-divrei { padding-left: 15px; } .parent-divrei > li{ position: relative; } .parent-divrei div{ cursor: pointer; } .parent-divrei > li > div.right::before { content: "▶ "; left: -22px; position: absolute; top: 12px; vertical-align: middle; font-size: 12px; } .parent-divrei >li > div.down::before { content: "▼ "; left: -25px; position: absolute; top: 12px; vertical-align: middle; font-size: 16px; } .tag.dvar.blue a{ background: #3B6E8F; } aside .parent-divrei li ul li,aside .sidebar-news li ul li{ padding: 5px; } .sidebar-news span{ font-weight: bold; } /* Custom menu */ .ubermenu-main .ubermenu-item .ubermenu-submenu-drop { -webkit-transition-duration:300ms; -ms-transition-duration:300ms; transition-duration:300ms; } .ubermenu-main .ubermenu-item-layout-image_left > .ubermenu-target-text { padding-left:26px; } .ubermenu-main .ubermenu-item-layout-image_right > .ubermenu-target-text { padding-right:26px; } .ubermenu-main { background:none; border:none; box-shadow:none; } .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target { border:none; box-shadow:none; } .ubermenu-main.ubermenu-horizontal .ubermenu-submenu-drop.ubermenu-submenu-align-left_edge_bar, .ubermenu-main.ubermenu-horizontal .ubermenu-submenu-drop.ubermenu-submenu-align-full_width { left:0; } .ubermenu-main.ubermenu-horizontal .ubermenu-item-level-0.ubermenu-active > .ubermenu-submenu-drop, .ubermenu-main.ubermenu-horizontal:not(.ubermenu-transition-shift) .ubermenu-item-level-0 > .ubermenu-submenu-drop { margin-top:0; } .ubermenu.ubermenu-main .ubermenu-item-level-0:hover > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-active > .ubermenu-target { background:#9ea374; } .ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-item > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-parent > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-current-menu-ancestor > .ubermenu-target { background:#8e0c3a; } .ubermenu-main .ubermenu-item.ubermenu-item-level-0 > .ubermenu-highlight { background:#8e0c3a; } .ubermenu-main .ubermenu-submenu.ubermenu-submenu-drop { background-color:#9ea374; border:1px solid #9ea37f; color:#ffffff; } .ubermenu-main .ubermenu-submenu .ubermenu-highlight { color:#ffffff; } .ubermenu-main .ubermenu-item-normal > .ubermenu-target,.ubermenu-main .ubermenu-submenu .ubermenu-target,.ubermenu-main .ubermenu-submenu .ubermenu-nonlink,.ubermenu-main .ubermenu-submenu .ubermenu-widget,.ubermenu-main .ubermenu-submenu .ubermenu-custom-content-padded,.ubermenu-main .ubermenu-submenu .ubermenu-retractor,.ubermenu-main .ubermenu-submenu .ubermenu-colgroup .ubermenu-column,.ubermenu-main .ubermenu-submenu.ubermenu-submenu-type-stack > .ubermenu-item-normal > .ubermenu-target,.ubermenu-main .ubermenu-submenu.ubermenu-submenu-padded { padding:10px; } .ubermenu .ubermenu-grid-row { padding-right:10px; } .ubermenu .ubermenu-grid-row .ubermenu-target { padding-right:0; } .ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target { color:#ffffff; } .ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target:hover { color:#ffffff; } .ubermenu-main .ubermenu-submenu .ubermenu-item-header.ubermenu-current-menu-item > .ubermenu-target { color:#ffffff; } .ubermenu-main .ubermenu-item-normal > .ubermenu-target { color:#ffffff; font-size:14px; } .ubermenu.ubermenu-main .ubermenu-item-normal > .ubermenu-target:hover { color:#ffffff; } .ubermenu-main .ubermenu-item-normal.ubermenu-current-menu-item > .ubermenu-target { color:#ffffff; } .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main { background:#002f65; } .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main:hover { background:#8d0838; } /* ========================================================================== Home Test — logo / nav / subscribe overlay bar Scoped entirely to .home-layout so nothing here touches the real site's header, nav, or subscribe form on any other page. ========================================================================== */ /* Absolute-positioned children need a positioned ancestor to anchor to */ .home-layout #page_wrap { position: relative; } /* The bar sits on top of the hero image instead of pushing it down */ .home-layout #hero-top-bar { position: absolute; top: 0; left: 0; width: 100%; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; padding: 20px 30px; box-sizing: border-box; background-color: transparent; transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease; } /* Pinned state — toggled by JS (see the script at the bottom of header.php) once the user scrolls past the top of the page. Switches from absolute (scrolls away with the hero image) to fixed (stays put), and fades in a solid white background since the bar is transparent by default so the hero image shows through underneath it. Nav text/links switch to navy (#003061) to stay readable against the new white background, extra top padding is added to push the menu down off the very top edge of the screen, and a soft shadow marks the bottom edge. */ .home-layout #hero-top-bar.is-pinned { position: fixed; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); padding-top: 32px; padding-bottom: 16px; } .home-layout #hero-top-bar.is-pinned #global_nav { color: #003061; transition: color .3s ease; } .home-layout #hero-top-bar.is-pinned #global_nav li a, .home-layout #hero-top-bar.is-pinned .ubermenu-main .ubermenu-item-normal > .ubermenu-target, .home-layout #hero-top-bar.is-pinned #global_nav #megaMenu ul.megaMenu > li a, .home-layout #hero-top-bar.is-pinned #global_nav #megaMenu ul.megaMenu > li span, .home-layout #hero-top-bar.is-pinned #searchform label { color: #003061; } /* Pinned state, part 2 — catches the items the rule above misses. "About" and the search icon were staying a pale grey in the pinned bar: their colour/opacity comes from something more specific than the plain "li a" rule (an Ubermenu per-item style, or an icon font / SVG sitting inside the link rather than being the link itself). This forces every top-level link, its inner text, chevron and icon to solid navy at full opacity. - Scoped to .is-pinned, so the transparent / white-text state at the top of the page is completely untouched. - Scoped to level-0 targets only ("> .ubermenu-target"), so the white dropdown panels keep their existing navy-on-white styling. */ .home-layout #hero-top-bar.is-pinned #global_nav .ubermenu-item-level-0 { opacity: 1 !important; } .home-layout #hero-top-bar.is-pinned #global_nav .ubermenu-item-level-0 > .ubermenu-target, .home-layout #hero-top-bar.is-pinned #global_nav .ubermenu-item-level-0 > .ubermenu-target *, .home-layout #hero-top-bar.is-pinned #global_nav .ubermenu-item-level-0:hover > .ubermenu-target, .home-layout #hero-top-bar.is-pinned #global_nav .ubermenu-item-level-0:hover > .ubermenu-target *, .home-layout #hero-top-bar.is-pinned #global_nav .ubermenu-item-level-0.ubermenu-active > .ubermenu-target, .home-layout #hero-top-bar.is-pinned #global_nav .ubermenu-item-level-0.ubermenu-active > .ubermenu-target *, .home-layout #hero-top-bar.is-pinned #global_nav .ubermenu-search-submit, .home-layout #hero-top-bar.is-pinned #global_nav .search-icon, .home-layout #hero-top-bar.is-pinned #global_nav .search-icon * { color: #003061 !important; opacity: 1 !important; fill: #003061; } /* Subscribe button is hidden while pinned (per request — the pinned bar is nav-only). Collapsed to zero size + overflow:hidden rather than display:none, so if the subscribe modal happens to already be open when the user scrolls, it isn't yanked off-screen along with the button (position:fixed content escapes a zero-size/overflow:hidden ancestor fine, but not a display:none one). */ .home-layout #hero-top-bar.is-pinned .announcement { flex-basis: 0; width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; pointer-events: none; } /* Logo, top left */ .home-layout #nav-logo-bar { margin-right: auto; } .home-layout #nav-logo-bar .nav-logo-img { display: block; width: auto; /* actual width is set inline per the ACF field, this just stops the theme's default img rule from fighting it */ } /* Nav, top right, no background, breaks out of the centred container */ .home-layout #nav-wrapper { background: none; margin: 0 0 0 auto; width: auto; } .home-layout #nav-wrapper .container { width: auto; max-width: none; margin: 0; padding: 0; } .home-layout nav#global_nav { margin: 0; transition: color .3s ease; } /* Deliberately NOT display:flex here — Ubermenu uses JS to measure its own container's pixel width to decide whether it fits horizontally. Flexbox changes how that width is reported and can trick it into falling back to its stacked/mobile layout even on a full-width desktop screen. Right alignment is handled a level up, on #nav-wrapper (margin: 0 0 0 auto), which doesn't touch Ubermenu's own box model at all. */ /* Ubermenu — strip its background and let text pick up the colour set on the