/* Theme Name: Emanuel Theme URI: https://www.emanuel-church.com/ Description: Block theme for Emanuel Romanian Pentecostal Church, Sacramento. Same look as the Minimalist + WPBakery site, built only with WordPress blocks. Author: Emanuel RPC Version: 0.1.69 Requires at least: 6.6 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: emanuel */ /* ---- Top bar: dark, slightly see-through, gold marker on the current page ---- */ /* WordPress wraps the header part in its own element; that wrapper is what sticks. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; } @media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } } /* The blur sits on a layer behind the bar: on the bar itself, backdrop-filter would trap the phone menu (a fixed overlay) inside the 61px bar. */ .em-topbar { position: relative; isolation: isolate; } .em-topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(68, 68, 68, 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* No gap between the bar, the live player slot and the first banner. */ .wp-site-blocks > * { margin-block-start: 0; } .wp-site-blocks > footer { margin-block-start: 0; } #emc-live[hidden] + .clear, .wp-site-blocks > .clear { display: none; } .em-topbar { min-height: 61px; align-items: center; } .em-topbar .em-logo img { display: block; } .em-topbar .wp-block-navigation-item__content { color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 13px; padding: 4px 8px; border-bottom: 2px solid transparent; } /* Phones: the menu button sits at the right, as before. */ @media (max-width: 599px) { .em-topbar .em-menu { margin-left: auto; } } /* Menu colours. The theme's link colour (#444) must not reach the menu, or the links vanish on the #444 bar. Other pages: 65% white. Hover: full white with a faint gold underline. Current page: gold text with the gold underline (#c9a46a on the bar is about 5.5:1 contrast). */ .em-topbar .wp-block-navigation .wp-block-navigation-item__content, .em-topbar .wp-block-navigation .wp-block-navigation-item__content:visited { color: rgba(255, 255, 255, 0.65) !important; transition: color .15s, border-color .15s; } .em-topbar .wp-block-navigation .wp-block-navigation-item__content:hover, .em-topbar .wp-block-navigation .wp-block-navigation-item__content:focus { color: #fff !important; border-bottom-color: rgba(201, 164, 106, 0.5); } .em-topbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, .em-topbar .wp-block-navigation [aria-current="page"] { color: var(--wp--preset--color--gold) !important; border-bottom-color: var(--wp--preset--color--gold); } /* Phone menu: a full-screen dark panel with large links, a thin line between them, the current page in gold, and a white close button where the menu button was. */ .em-topbar .wp-block-navigation__responsive-container-open, .em-topbar .wp-block-navigation__responsive-container-close { color: #fff; padding: 8px; margin-right: -8px; } .em-topbar .wp-block-navigation__responsive-container-open svg, .em-topbar .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; fill: currentColor; } .em-topbar .wp-block-navigation__responsive-container.is-menu-open { background: #333 !important; color: #fff; padding: 14px 15px 40px; animation: em-menu-in .2s ease-out; } @keyframes em-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .em-topbar .wp-block-navigation__responsive-container.is-menu-open { animation: none; } } .em-topbar .is-menu-open .wp-block-navigation__responsive-container-close { top: 12px; right: 15px; } .em-topbar .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px !important; align-items: stretch !important; } .em-topbar .is-menu-open .wp-block-navigation__container { width: 100%; gap: 0 !important; align-items: stretch !important; } .em-topbar .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .12); } .em-topbar .is-menu-open .wp-block-navigation-item:first-child { border-top: 1px solid rgba(255, 255, 255, .12); } .em-topbar .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 18px 4px !important; font-size: 20px !important; letter-spacing: 1.5px; border-bottom: 0 !important; color: rgba(255, 255, 255, .85) !important; } .em-topbar .is-menu-open [aria-current="page"], .em-topbar .is-menu-open .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--gold) !important; } /* ---- Page banner / home-page cards: a photo with the title over it ---- * As on the old site: white Montserrat, 48px, regular weight, tight lines, * no underline, no shadow. Titles that are links dim a little on hover. */ .em-banner .wp-block-cover__inner-container { text-align: center; } .em-banner :is(h1, h2) { color: #fff; font-family: var(--wp--preset--font-family--montserrat); font-size: clamp(32px, 4.5vw, 48px) !important; font-weight: 400; line-height: 0.9; letter-spacing: -1px; text-transform: lowercase; text-shadow: none; } .em-banner :is(h1, h2) a, .em-banner :is(h1, h2) a:visited { color: #fff !important; text-decoration: none !important; transition: opacity .15s; } .em-banner :is(h1, h2) a:hover, .em-banner :is(h1, h2) a:focus-visible { opacity: .8; } /* Home-page cards (departamente, bibliotecă, …): 383px tall, 30px apart, as before. */ .home .wp-block-post-content > .em-banner { min-height: 383px !important; margin-top: 0 !important; margin-bottom: 30px !important; } /* ---- Staff card: photo beside name and role ---- */ .em-person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .em-person h3 { margin: 0 0 4px; } .em-person p { margin: 0; font-style: italic; } /* ---- Live player (Video Search plugin): 16:9, full width ---- */ .cwm-player { position: relative; padding-bottom: 56.25%; width: 100%; margin: 0; } .cwm-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---- Footer ---- */ .em-footer a { color: inherit; } .em-footer h3 { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; font-weight: 700; } .em-footer .em-schedule p { margin: 0; } /* ---- Home-page hero, matching the old Slider Revolution slide ---- * Source Sans (the slider's font) at 70px, extra-light. "DUMNEZEU ESTE" slides * in from the left (0.75 s, 1.5 s long); then each word builds up letter by * letter from 80% size, softly blurred while it shows (2px; CU NOI 1.1px, as * on the slider), and leaves shrinking to 90%, on a 15 s loop: * DRAGOSTE 1.5–4.5 s, SFÂNT 4.5–7.5 s, VEȘNIC 7.5–10.5 s, CU NOI 10.5–14.4 s. */ /* Like the slider: it starts under the top bar and is a little taller than the screen. */ .wp-block-post-content > .em-hero:first-child { margin-top: -61px !important; min-height: calc(100vh + 60px) !important; } .em-hero .em-hero-logo { margin-bottom: 42px; } .em-hero h1 { font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif; font-weight: 200; font-size: clamp(34px, 5.5vw, 70px); line-height: 1; letter-spacing: 0; color: #fff; text-transform: none; } .em-hero-lead { display: inline-block; animation: em-lead 1.5s cubic-bezier(.25, .46, .45, .94) .75s both; } @keyframes em-lead { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } } .em-rotate { display: inline-grid; justify-items: start; text-align: left; vertical-align: top; margin-left: 7px; } /* The slider's line sits about 40px right of centre (its words start where DRAGOSTE does). */ @media (min-width: 768px) { .em-hero h1 { padding-left: 98px; } } .em-w { grid-area: 1 / 1; white-space: nowrap; } .em-w:first-child { font-weight: 300; } .em-w > span { display: inline-block; opacity: 0; animation: 15s infinite both; animation-delay: calc(var(--i) * 30ms); } /* Seen as is wherever the animation doesn't run (for whatever reason): "Dumnezeu este cu noi". While it runs, the keyframes (filling both ways) decide what shows. */ .em-w:nth-child(4) > span { opacity: 1; } .em-w:nth-child(1) > span { animation-name: em-w1; } .em-w:nth-child(2) > span { animation-name: em-w2; } .em-w:nth-child(3) > span { animation-name: em-w3; } .em-w:nth-child(4) > span { animation-name: em-w4; } /* In: 0.5 s ease-out from 80%, sharp, to full size with the slider's blur. Out: 0.5 s ease-in to 90%. */ @keyframes em-w1 { 0%, 10% { opacity: 0; transform: scale(.8); filter: blur(0); animation-timing-function: cubic-bezier(.17, .84, .44, 1); } 13.33%, 26.67% { opacity: 1; transform: none; filter: blur(2px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); } 30%, 100% { opacity: 0; transform: scale(.9); filter: blur(2px); } } @keyframes em-w2 { 0%, 30.07% { opacity: 0; transform: scale(.8); filter: blur(0); animation-timing-function: cubic-bezier(.17, .84, .44, 1); } 33.4%, 46.73% { opacity: 1; transform: none; filter: blur(2px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); } 50.07%, 100% { opacity: 0; transform: scale(.9); filter: blur(2px); } } @keyframes em-w3 { 0%, 49.93% { opacity: 0; transform: scale(.8); filter: blur(0); animation-timing-function: cubic-bezier(.17, .84, .44, 1); } 53.27%, 66.6% { opacity: 1; transform: none; filter: blur(2px); animation-timing-function: cubic-bezier(.55, .06, .68, .19); } 69.93%, 100% { opacity: 0; transform: scale(.9); filter: blur(2px); } } @keyframes em-w4 { 0%, 69.93% { opacity: 0; transform: scale(.8); filter: blur(0); animation-timing-function: cubic-bezier(.17, .84, .44, 1); } 73.27%, 92.67% { opacity: 1; transform: none; filter: blur(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); } 96%, 100% { opacity: 0; transform: scale(1.04); filter: blur(14px); } /* "cu noi" / "with us" blurs out as it leaves */ } /* Phones: as on the old slider, bold, with the word on its own line. */ @media (max-width: 767px) { .em-hero h1 { font-weight: 700; } .em-w:first-child { font-weight: 700; } .em-rotate { display: grid; justify-items: center; margin-top: 8px; } .em-hero .em-hero-logo img { width: 180px !important; } } /* The visitor's device asks for less motion: no animation, so the title stands still as "Dumnezeu este cu noi" / "God is with us". */ @media (prefers-reduced-motion: reduce) { .em-hero-lead, .em-w > span { animation: none; } } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ---- Hide on some screens (from WPBakery's "hide on device") ---- */ @media (max-width: 767px) { .em-hide-phone { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .em-hide-tablet { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .em-hide-laptop { display: none !important; } } @media (min-width: 1200px) { .em-hide-desktop { display: none !important; } } /* Full-width sections follow each other with no gap, as on the WPBakery site. */ .wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; } /* Buletine: a bulletin cover, its month and an OPEN button. */ .em-bulletin img { width: 100%; height: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } .em-bulletin h3 { margin: 12px 0 8px; letter-spacing: 1px; } /* Home page: the latest services. */ .em-latest { background: var(--wp--preset--color--light); } .em-latest h2 { margin-bottom: var(--wp--preset--spacing--40); } /* ---- Buttons: all in the outline style of "Urmăriți serviciile" ---- * A 2px border in the text colour, no fill: white over photos, charcoal on * light backgrounds. On hover they fill with the gold accent. */ .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--text) !important; border: 2px solid currentColor !important; padding: 8.67px 17.29px; transition: background-color .15s, border-color .15s, color .15s; } .wp-block-cover .wp-block-button__link, .wp-block-cover .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff !important; } .wp-block-button__link:hover, .wp-block-button__link:focus-visible, .wp-block-cover .wp-block-button__link:hover, .wp-block-cover .wp-block-button__link:focus-visible { background: var(--wp--preset--color--gold) !important; border-color: var(--wp--preset--color--gold) !important; color: #fff !important; } /* ===================================================================== * Contemporan (page template "Contemporan", body class .em-contemporan) * Everything here is scoped so the Clasic home page is untouched. * Mobile-first; breakpoints 600 / 782 / 1024. * ===================================================================== */ .em-contemporan { font-size: 17px; overflow-x: hidden; } .em-contemporan .wp-block-post-content > .alignfull { margin-block-start: 0; } /* Sections: 56px vertical on phones, 96px on desktop */ .em-contemporan .em-c-section { padding-top: 56px; padding-bottom: 56px; padding-left: 20px; padding-right: 20px; } @media (min-width: 782px) { .em-contemporan .em-c-section { padding-top: 96px; padding-bottom: 96px; } } .em-contemporan .em-c-section > * { max-width: 1140px; margin-left: auto; margin-right: auto; } /* Type */ .em-contemporan h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; text-transform: none; color: var(--wp--preset--color--dark); margin: 0 auto 32px; } .em-contemporan h3 { text-transform: none; letter-spacing: 0; font-size: 20px; font-weight: 600; color: var(--wp--preset--color--dark); } .em-contemporan .em-c-eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--gold); font-weight: 600; margin: 0 auto 12px; } /* Reveal: only hidden when scripting is on and motion is welcome (no JS = visible) */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .em-c-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .em-c-reveal.is-visible { opacity: 1; transform: none; } } /* Hero: 75vh, dark gradient rising from the bottom */ .em-contemporan .wp-block-post-content > .em-hero:first-child { min-height: calc(75vh + 60px) !important; } .em-contemporan .em-c-hero { padding-bottom: 56px; align-items: flex-end; } .em-contemporan .em-c-hero .wp-block-cover__inner-container { text-align: center; } /* Hero photo of the sanctuary: framed on the aisle and pulpit; the shade (warm dark brown at the bottom, a light gold veil at the top) keeps the white text readable on the bright room. */ .em-contemporan .em-c-hero .wp-block-cover__image-background { object-position: 50% 45%; filter: saturate(1.05); } .em-contemporan .em-c-hero .wp-block-cover__background { background: linear-gradient(0deg, rgba(30, 20, 10, .92) 0%, rgba(40, 28, 16, .62) 40%, rgba(40, 28, 16, .45) 70%, rgba(120, 90, 50, .35) 100%) !important; opacity: 1; } .em-contemporan .em-c-hero .em-c-hero-times { color: rgba(255, 255, 255, .92); font-size: 18px; letter-spacing: 1px; margin: 28px 0 24px; } .em-contemporan .em-c-hero .wp-block-buttons { gap: 14px; } /* Cards */ .em-contemporan .em-c-card { position: relative; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .em-contemporan .em-c-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .12); } .em-contemporan .em-c-card--text { padding: 32px; height: 100%; } .em-contemporan .em-c-card--text > * { margin-block-start: 0; } .em-contemporan .em-c-card--text h3 { margin: 0 0 12px; } .em-contemporan .em-c-card--text p { margin: 0 0 20px; } .em-contemporan .em-c-card figure { margin: 0; } .em-contemporan .em-c-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px 12px 0 0; } .em-contemporan .em-c-card-body { padding: 20px 22px 22px; } .em-contemporan .em-c-card-body > * { margin-block-start: 0; } .em-contemporan .em-c-card-body h3 { margin: 0 0 8px; font-size: 19px; } .em-contemporan .em-c-card-body h3 a { color: inherit; text-decoration: none; } .em-contemporan .em-c-card-body h3 a::after { content: ""; position: absolute; inset: 0; } .em-contemporan .em-c-card-body p { margin: 0 0 10px; font-size: 15px; color: var(--wp--preset--color--muted); } .em-contemporan .em-c-card-body .em-c-arrow { color: var(--wp--preset--color--gold); font-size: 22px; margin: 0; transition: transform .2s ease; } .em-contemporan .em-c-card:hover .em-c-arrow { transform: translateX(6px); } /* Card grid: 1 / 2 / 4 columns */ .em-contemporan .em-c-cards { display: grid; grid-template-columns: 1fr; gap: 24px; } .em-contemporan .em-c-cards > * { margin: 0; } @media (min-width: 782px) { .em-contemporan .em-c-cards { grid-template-columns: repeat(3, 1fr); } } /* Two-column blocks: stack under 782px (core default), equal height above */ .em-contemporan .wp-block-columns { gap: 24px; margin-bottom: 0; } @media (min-width: 782px) { .em-contemporan .wp-block-columns { gap: 32px; } .em-contemporan .em-c-visit-cols { gap: 64px; } } .em-contemporan .em-c-faith-cols > .wp-block-column > .em-c-card, .em-contemporan .em-c-giving-cols > .wp-block-column > .em-c-card { height: 100%; } /* Lists in the visit section */ .em-contemporan .em-c-times, .em-contemporan .em-c-expect { list-style: none; padding: 0; margin: 0 0 32px; } .em-contemporan .em-c-times li { padding: 14px 0; border-bottom: 1px solid #e5e5e5; } .em-contemporan .em-c-expect li { padding: 10px 0 10px 28px; position: relative; } .em-contemporan .em-c-expect li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--gold); } .em-contemporan .em-c-visit h3 { margin: 0 0 12px; } /* Latest services (plugin markup) */ /* Three equal columns (two on tablets, one on phones), cards of equal height. */ .em-contemporan .ecvs-latest-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } @media (max-width: 960px) { .em-contemporan .ecvs-latest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .em-contemporan .ecvs-latest-list { grid-template-columns: 1fr; gap: 24px; } } .em-contemporan .ecvs-latest-list > li { display: flex; } .em-contemporan .ecvs-latest-card { flex: 1; gap: 0; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, .08); overflow: hidden; background: #fff; transition: transform .2s ease, box-shadow .2s ease; } .em-contemporan .ecvs-latest-card:hover, .em-contemporan .ecvs-latest-card:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .14); color: inherit; } .em-contemporan .ecvs-latest-thumb { position: relative; border-radius: 0; } .em-contemporan .ecvs-latest-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 45%); pointer-events: none; } /* Play: a round button instead of the bare glyph */ .em-contemporan .ecvs-latest-play { inset: auto; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .25); font-size: 18px; padding-left: 4px; text-shadow: none; opacity: 1; z-index: 1; transition: background .2s ease, border-color .2s ease; } .em-contemporan .ecvs-latest-card:hover .ecvs-latest-play { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); } .em-contemporan .ecvs-latest-len { z-index: 1; } .em-contemporan .ecvs-latest-date { margin: 20px 22px 6px; } .em-contemporan .ecvs-latest-title { margin: 0 22px 8px; font-size: 18px; font-weight: 600; color: var(--wp--preset--color--dark); } .em-contemporan .ecvs-latest-text { margin: 0 22px 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .em-contemporan .ecvs-latest-more { margin-top: 40px; } .em-contemporan .ecvs-latest-more a { display: inline-block; padding: 14px 28px; border: 2px solid var(--wp--preset--color--text); color: var(--wp--preset--color--text); text-decoration: none; border-radius: 2px; transition: background .2s ease, border-color .2s ease, color .2s ease; } .em-contemporan .ecvs-latest-more a:hover, .em-contemporan .ecvs-latest-more a:focus-visible { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); color: #fff; } .em-contemporan .ecvs-latest-card.is-live .ecvs-latest-thumb::before { content: "LIVE ACUM"; position: absolute; top: 12px; left: 12px; z-index: 2; background: #d62828; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; line-height: 1; padding: 6px 10px; border-radius: 999px; } /* Giving */ .em-contemporan .em-c-zelle-addr { font-weight: 600; color: var(--wp--preset--color--dark); word-break: break-word; } /* Forms: buttons wrap on phones */ .em-contemporan .em-c-forms .wp-block-buttons { gap: 14px; } /* Contemporan footer */ .em-c-footer { background: #333; color: rgba(255, 255, 255, .7); padding: 64px 20px 32px; margin: 0; } .em-c-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; } .em-c-footer a:hover, .em-c-footer a:focus-visible { color: var(--wp--preset--color--gold); } .em-c-footer h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 600; margin: 0 0 16px; } .em-c-footer p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; } .em-c-footer .em-c-footer-cols { max-width: 1140px; margin: 0 auto 40px; gap: 32px; } .em-c-footer .em-c-footer-logo { margin: 0 0 16px; } .em-c-footer .em-c-logorow { max-width: 1140px; margin: 0 auto 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); gap: 16px 20px; align-items: center; } .em-c-footer .em-c-footer-label { flex-basis: 100%; margin: 0; color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: 2px; font-size: 12px; } .em-c-footer .em-c-logorow figure { margin: 0; } .em-c-footer .em-c-affiliates figure { background: #fff; border-radius: 8px; padding: 8px 12px; } .em-c-footer .em-c-logorow img { display: block; height: 48px; width: auto; max-width: 100%; } .em-c-footer .em-c-resources img { height: 44px; } .em-c-footer .em-c-copyright { max-width: 1140px; margin: 16px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; color: rgba(255, 255, 255, .5); text-align: center; } /* Contact Form 7 forms, styled like the old site's (Bootstrap): a grey panel, full-width white textboxes 42px tall with a light border, labels above, the forms' own .row / .col-md-* columns, and an outline Send button. */ .wpcf7 { background: #e0e0e0; padding: 20px 24px 24px; border-radius: 2px; margin-block: 30px; } .wpcf7 form > p, .wpcf7 .row > p { margin: 0 0 16px; } .wpcf7 p > br:first-child, .wpcf7 label > br:last-child, .wpcf7 label + br { display: none; } .wpcf7 .row { display: flex; flex-wrap: wrap; margin: 0 -10px; } .wpcf7 .row > [class*="col-"] { flex: 1 1 100%; padding: 0 10px; box-sizing: border-box; } @media (min-width: 768px) { .wpcf7 .row > .col-md-3 { flex-basis: 25%; max-width: 25%; } .wpcf7 .row > .col-md-4 { flex-basis: 33.333%; max-width: 33.333%; } .wpcf7 .row > .col-md-6 { flex-basis: 50%; max-width: 50%; } .wpcf7 .row > .col-md-8 { flex-basis: 66.666%; max-width: 66.666%; } .wpcf7 .row > .col-md-12 { flex-basis: 100%; max-width: 100%; } } .wpcf7 h3 { font-size: 24px; font-weight: 400; letter-spacing: 0; margin: 24px 0 14px; } .wpcf7 label { display: block; font-size: 14px; color: #444; } .wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 4px; } .wpcf7 input:is([type="text"], [type="email"], [type="tel"], [type="date"], [type="number"], [type="url"]), .wpcf7 select, .wpcf7 textarea { display: block; width: 100%; box-sizing: border-box; min-height: 42px; padding: 6px 12px; font: inherit; font-size: 16px; color: #495057; background: #fff; border: 1px solid #ced4da; border-radius: 4px; transition: border-color .15s, box-shadow .15s; } .wpcf7 textarea { min-height: 120px; resize: vertical; } .wpcf7 :is(input, select, textarea):focus { outline: 0; border-color: var(--wp--preset--color--gold); box-shadow: 0 0 0 3px rgba(201, 164, 106, .25); } .wpcf7 .wpcf7-list-item { display: inline-flex; align-items: center; gap: 6px; margin: 4px 18px 0 0; } .wpcf7 input[type="file"] { font-size: 14px; } .wpcf7 .wpcf7-submit { min-height: 0; padding: 12px 28px; background: transparent; color: var(--wp--preset--color--text); border: 2px solid var(--wp--preset--color--text); border-radius: 2px; cursor: pointer; font: 600 13px/1 var(--wp--preset--font-family--montserrat); text-transform: uppercase; letter-spacing: 1px; transition: background .2s, border-color .2s, color .2s; } .wpcf7 .wpcf7-submit:hover, .wpcf7 .wpcf7-submit:focus-visible { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); color: #fff; } .wpcf7 .wpcf7-not-valid-tip { font-size: 13px; margin-top: 4px; } .wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 10px 14px; border-radius: 4px; background: #fff; } /* Contemporan: photo band with a verse. The photo is taller than the band so the parallax never shows an edge. */ .em-contemporan .em-c-band { overflow: hidden; } .em-contemporan .em-c-band .wp-block-cover__image-background { top: -80px; height: calc(100% + 160px); } .em-contemporan .em-c-band .wp-block-cover__background { background: linear-gradient(90deg, rgba(30, 20, 10, .78), rgba(40, 28, 16, .62) 50%, rgba(30, 20, 10, .78)) !important; opacity: 1 !important; } .em-contemporan .em-c-verse { border: 0; margin: 0 auto; padding: 0 20px; max-width: 820px; text-align: center; color: #fff; } .em-contemporan .em-c-verse p { font-family: 'Source Sans 3', var(--wp--preset--font-family--montserrat); font-weight: 300; font-size: clamp(28px, 4.2vw, 48px); line-height: 1.25; letter-spacing: -.5px; margin: 0; } .em-contemporan .em-c-verse p::before { content: ""; display: block; width: 48px; height: 2px; margin: 0 auto 28px; background: var(--wp--preset--color--gold); } .em-contemporan .em-c-verse cite { display: block; margin-top: 22px; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--wp--preset--color--gold); } /* ---- Contemporan refinements ---- * Serif titles (Cormorant Garamond) beside Montserrat text; warm palette (charcoal * ink, cream sections, gold only for accents); one corner radius (4px) and one * soft shadow everywhere; monochrome affiliate logos in the footer. */ .em-contemporan { --em-ink: #2b2622; --em-body: #4d4640; --em-cream: #faf7f2; --em-radius: 4px; --em-shadow: 0 1px 2px rgba(43, 38, 34, .05), 0 8px 24px rgba(43, 38, 34, .07); --em-shadow-hover: 0 2px 4px rgba(43, 38, 34, .06), 0 16px 36px rgba(43, 38, 34, .12); --em-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; color: var(--em-body); } .em-contemporan .has-light-background-color { background-color: var(--em-cream) !important; } .em-contemporan :is(h2, h3) { color: var(--em-ink); } .em-contemporan h2 { font-family: var(--em-serif); font-weight: 500; font-size: clamp(34px, 4.6vw, 52px); letter-spacing: -.3px; line-height: 1.1; } .em-contemporan .em-c-card-body h3, .em-contemporan .em-c-card--text h3, .em-contemporan .em-c-visit h3, .em-contemporan .ecvs-latest-title { font-family: var(--em-serif); font-weight: 600; font-size: 24px; letter-spacing: 0; line-height: 1.2; color: var(--em-ink); } .em-contemporan .em-c-verse p { font-family: var(--em-serif); font-style: italic; font-weight: 500; font-size: clamp(32px, 4.8vw, 56px); letter-spacing: 0; } .em-contemporan .em-c-eyebrow { color: var(--wp--preset--color--gold); } /* Hero without the badge logo: the title carries it. */ .em-contemporan .em-c-hero { min-height: 82vh !important; padding-bottom: 72px; } /* One radius, one shadow */ .em-contemporan :is(.em-c-card, .ecvs-latest-card) { border-radius: var(--em-radius); box-shadow: var(--em-shadow); } .em-contemporan :is(.em-c-card, .ecvs-latest-card):hover { box-shadow: var(--em-shadow-hover); transform: translateY(-3px); } .em-contemporan .em-c-card img { border-radius: var(--em-radius) var(--em-radius) 0 0; } .em-contemporan :is(.wp-block-button__link, .ecvs-latest-more a, .wpcf7-submit) { border-radius: var(--em-radius) !important; } .em-contemporan .ecvs-latest-more a::after { content: ""; } .em-contemporan .ecvs-latest-more a { transition: background .2s, border-color .2s, color .2s, letter-spacing .2s; } .em-contemporan .ecvs-latest-more a:hover { letter-spacing: 1.6px; } /* Footer: affiliate logos in grey on equal, softened tiles (some logos have their own solid background, so they can't simply be turned white); full colour on hover. */ .em-c-footer .em-c-affiliates figure { background: rgba(255, 255, 255, .92); border-radius: var(--em-radius, 4px); padding: 0; width: 120px; height: 64px; display: flex; align-items: center; justify-content: center; opacity: .55; transition: opacity .2s; } .em-c-footer .em-c-affiliates figure a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 8px 12px; box-sizing: border-box; } .em-c-footer .em-c-affiliates img { height: auto; max-height: 46px; max-width: 100%; filter: grayscale(1); transition: filter .2s; } .em-c-footer .em-c-affiliates figure:hover, .em-c-footer .em-c-affiliates figure:focus-within { opacity: 1; } .em-c-footer .em-c-affiliates figure:hover img, .em-c-footer .em-c-affiliates figure:focus-within img { filter: none; } /* Orchestra photo: keep the trumpeters in frame when the card crops it. */ .em-contemporan .em-c-card img[src*="emanuel-orchestra"] { object-position: 50% 0%; } /* Live player: on the Contemporan page it sits under the hero, edge to edge (16:9 across the full width). */ .em-contemporan #emc-live:not([hidden]) { max-width: none !important; width: auto; padding-bottom: 0; aspect-ratio: 16 / 9; margin: 0 calc(var(--wp--style--root--padding-right, 20px) * -1) 0 calc(var(--wp--style--root--padding-left, 20px) * -1) !important; background: #000; } /* Home page (player above the hero): the hero isn't pulled up under the bar then, or it would cover the player's controls. */ .wp-site-blocks:has(> #emc-live:not([hidden])) .wp-block-post-content > .em-hero:first-child { margin-top: 0 !important; min-height: 100vh !important; } /* Footer headings stay light on the dark footer (the page's charcoal heading colour is for light sections). */ .em-c-footer h3 { color: var(--wp--preset--color--gold); } /* Hero with the crosses photo (WebsiteSplash1): the warm sepia-gold tone it had before. */ .em-contemporan .em-c-hero img[src*="WebsiteSplash1"] { object-position: 50% 50%; filter: sepia(.4) saturate(1.15) brightness(.92) contrast(1.05); } .em-contemporan .em-c-hero:has(img[src*="WebsiteSplash1"]) .wp-block-cover__background { background: linear-gradient(0deg, rgba(36, 24, 12, .9) 0%, rgba(58, 38, 18, .5) 45%, rgba(201, 164, 106, .22) 100%) !important; } /* Computers: the whole church building (functions.php puts it in), washed out to a soft warm tone so the text reads over it, darker towards the bottom. */ @media (min-width: 782px) { .em-contemporan .em-c-hero img[src*="emanuel-cladire"] { object-position: 50% 55%; filter: sepia(.25) saturate(.3) contrast(.68) brightness(1.18); } .em-contemporan .em-c-hero:has(img[src*="emanuel-cladire"]) .wp-block-cover__background { background: linear-gradient(0deg, rgba(36, 24, 12, .88) 0%, rgba(58, 38, 18, .5) 42%, rgba(220, 200, 170, .22) 72%, rgba(240, 232, 220, .38) 100%) !important; } } /* Phones: the church building upright (below 782px), in its own colours, the palms and the windows in view, and darker towards the bottom where the text sits. */ @media (max-width: 781px) { .em-contemporan .em-c-hero picture .wp-block-cover__image-background { object-position: 30% 35%; filter: saturate(.95) brightness(.95); } .em-contemporan .em-c-hero:has(picture) .wp-block-cover__background { background: linear-gradient(0deg, rgba(20, 16, 12, .92) 0%, rgba(20, 16, 12, .7) 38%, rgba(20, 16, 12, .3) 70%, rgba(20, 16, 12, .45) 100%) !important; } } /* ---- Contemporan: menu bar and hero ---- * The bar floats over the hero photo (transparent, with a soft shade for the * white text) and turns solid charcoal with a blur once the page scrolls. A * text wordmark replaces the logo image; links in sentence case; "Urmăriți live" * as a small outline button on the right. */ .em-c-topbar { min-height: 72px; } .em-c-topbar::before { background: linear-gradient(rgba(20, 14, 8, .45), rgba(20, 14, 8, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .35s ease; } .is-scrolled .em-c-topbar::before { background: rgba(36, 31, 27, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .em-site .wp-site-blocks > header { transition: box-shadow .35s ease; } .em-site .wp-site-blocks > header.is-scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .12); } .em-contemporan .wp-block-post-content > .em-hero:first-child { margin-top: -72px !important; min-height: 100vh !important; } .em-c-brand { margin: 0; line-height: 1; } .em-c-brand a { display: flex; flex-direction: column; gap: 4px; color: #fff !important; text-decoration: none; } .em-c-brand-name { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 30px; letter-spacing: .5px; line-height: .9; } .em-c-brand-sub { font-family: var(--wp--preset--font-family--montserrat); font-size: 9.5px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .em-c-nav { align-items: center; } .em-c-topbar .wp-block-navigation-item__content { text-transform: none; font-size: 14px; font-weight: 500; letter-spacing: .3px; padding: 6px 2px; margin: 0 12px; border-bottom: 0; position: relative; color: rgba(255, 255, 255, .82) !important; } .em-c-topbar .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--wp--preset--color--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .em-c-topbar .wp-block-navigation-item__content:hover { color: #fff !important; } .em-c-topbar .wp-block-navigation-item__content:hover::after, .em-c-topbar [aria-current="page"]::after { transform: scaleX(1); } .em-c-nav-cta .wp-block-button__link { padding: 9px 18px; font-size: 12px; letter-spacing: 1px; border: 1.5px solid rgba(255, 255, 255, .85) !important; color: #fff !important; background: transparent !important; } .em-c-nav-cta .wp-block-button__link:hover { background: var(--wp--preset--color--gold) !important; border-color: var(--wp--preset--color--gold) !important; } @media (max-width: 781px) { .em-c-nav-cta { display: none; } } /* Phone menu panel: links in sentence case like the bar. */ .em-c-topbar .is-menu-open .wp-block-navigation-item__content { margin: 0; text-transform: none; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px !important; font-weight: 500; letter-spacing: 0; } .em-c-topbar .is-menu-open .wp-block-navigation-item__content::after { display: none; } /* Hero: emblem, the church's name in small capitals, the serif title with the rotating word in gold italics on its own line. */ .em-contemporan .em-c-hero { align-items: center; padding-top: 110px; padding-bottom: 80px; } .em-contemporan .em-c-hero-mark { margin: 0 auto 22px; opacity: .92; } .em-contemporan .em-c-hero-mark img { display: block; width: 60px !important; height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25)); } .em-contemporan .em-c-hero-eyebrow { margin: 0 0 26px; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--wp--preset--color--gold); } .em-contemporan .em-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(46px, 7.4vw, 104px); line-height: 1; letter-spacing: -.5px; padding-left: 0; margin: 0; } .em-contemporan .em-hero-lead { display: block; } .em-contemporan .em-rotate { display: grid; justify-items: center; margin: 4px 0 0; } .em-contemporan .em-w, .em-contemporan .em-w:first-child { font-style: italic; font-weight: 500; color: #e3c48e; } .em-contemporan .em-w:not(:nth-child(4)) > span { filter: none !important; } /* sharp words; "cu noi" (the 4th) blurs out as it leaves */ .em-contemporan .em-c-hero .em-c-hero-times { margin-top: 30px; } @media (max-width: 767px) { .em-contemporan .em-hero h1, .em-contemporan .em-w:first-child { font-weight: 500; } .em-contemporan .em-c-hero-eyebrow { font-size: 10.5px; letter-spacing: 2px; } .em-c-brand-name { font-size: 26px; } } /* Hero text stays readable on the bright mist of the photo. */ .em-contemporan .em-c-hero-eyebrow { color: rgba(255, 255, 255, .92); } .em-contemporan .em-c-hero :is(.em-c-hero-eyebrow, h1, .em-c-hero-times) { text-shadow: 0 1px 2px rgba(60, 36, 14, .35), 0 2px 20px rgba(60, 36, 14, .4); } /* The shade behind the text is drawn into the photo's own shade layer, in the photo's warm brown, and fades out wide (a separate dark layer over the text looked grey). */ .em-contemporan .em-c-hero:has(img[src*="WebsiteSplash1"]) .wp-block-cover__background, .home.em-contemporan:is(.em-hero-photo, .em-hero-sketch) .em-c-hero .wp-block-cover__background { /* the church photo and sketch heroes have no crosses photo in the page (functions.php) */ background: radial-gradient(ellipse 52% 42% at 50% 50%, rgba(92, 58, 26, .5), rgba(92, 58, 26, .22) 55%, rgba(92, 58, 26, 0) 100%), linear-gradient(0deg, rgba(36, 24, 12, .9) 0%, rgba(58, 38, 18, .5) 45%, rgba(201, 164, 106, .22) 100%) !important; } .em-contemporan .em-c-hero .wp-block-cover__inner-container { position: relative; isolation: isolate; } .em-contemporan .em-c-hero-eyebrow { text-wrap: balance; } @media (max-width: 767px) { .em-contemporan .em-hero h1 { font-size: 54px; } } /* Departamente card: a cinematic grade on the orchestra photo — deeper contrast, muted colour with warm highlights, a soft vignette and a slow push-in on hover. */ .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"]) { position: relative; overflow: hidden; border-radius: var(--em-radius) var(--em-radius) 0 0; } .em-contemporan .em-c-card img[src*="emanuel-orchestra"] { filter: contrast(1.12) saturate(.82) sepia(.18) brightness(.94); transform: scale(1.02); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s ease; } .em-contemporan .em-c-card:hover img[src*="emanuel-orchestra"] { transform: scale(1.07); filter: contrast(1.14) saturate(.9) sepia(.14) brightness(.98); } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(18, 12, 6, .5) 100%), linear-gradient(180deg, rgba(30, 50, 60, .12), rgba(120, 70, 20, .12)); mix-blend-mode: multiply; } /* Stronger grade for the orchestra, and the same cinematic grade for the Psalm 122:1 band. */ .em-contemporan .em-c-card img[src*="emanuel-orchestra"] { filter: contrast(1.22) saturate(.72) sepia(.24) brightness(.9); } .em-contemporan .em-c-card:hover img[src*="emanuel-orchestra"] { filter: contrast(1.22) saturate(.8) sepia(.2) brightness(.95); } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::after { background: radial-gradient(ellipse 70% 65% at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(14, 9, 4, .62) 100%), linear-gradient(180deg, rgba(20, 45, 55, .18), rgba(130, 75, 20, .16)); } .em-contemporan .em-c-band .wp-block-cover__image-background { filter: contrast(1.2) saturate(.7) sepia(.25) brightness(.92); } .em-contemporan .em-c-band .wp-block-cover__background { background: radial-gradient(ellipse 65% 75% at 50% 50%, rgba(30, 20, 10, .35), rgba(14, 9, 4, .82) 100%), linear-gradient(180deg, rgba(20, 40, 50, .25), rgba(110, 62, 18, .22)) !important; opacity: 1 !important; } /* Orchestra: hazy, matte look instead — lifted blacks, softer contrast, a warm light haze from the top. */ .em-contemporan .em-c-card img[src*="emanuel-orchestra"] { filter: contrast(.86) saturate(.78) sepia(.16) brightness(1.06); } .em-contemporan .em-c-card:hover img[src*="emanuel-orchestra"] { filter: contrast(.9) saturate(.85) sepia(.12) brightness(1.08); } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::after { background: radial-gradient(ellipse 80% 75% at 50% 45%, rgba(0, 0, 0, 0) 60%, rgba(40, 26, 12, .28) 100%); mix-blend-mode: multiply; } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 30% 10%, rgba(255, 238, 214, .38), rgba(255, 238, 214, 0) 70%), linear-gradient(180deg, rgba(240, 225, 205, .16), rgba(60, 40, 20, .06)); mix-blend-mode: screen; } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::after { z-index: 1; } /* Worship-film look (orchestra card and Psalm band): deep blacks, warm stage-light highlights, haze with light beams from above, cool shadows, strong vignette. */ .em-contemporan .em-c-card img[src*="emanuel-orchestra"] { filter: contrast(1.18) brightness(.8) saturate(.92) sepia(.12); } .em-contemporan .em-c-card:hover img[src*="emanuel-orchestra"] { filter: contrast(1.18) brightness(.88) saturate(.98) sepia(.1); } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::before { background: radial-gradient(ellipse 55% 45% at 55% -5%, rgba(255, 196, 120, .55), rgba(255, 196, 120, 0) 70%), linear-gradient(112deg, rgba(255, 214, 160, 0) 28%, rgba(255, 214, 160, .2) 36%, rgba(255, 214, 160, 0) 44%), linear-gradient(98deg, rgba(255, 214, 160, 0) 55%, rgba(255, 214, 160, .14) 61%, rgba(255, 214, 160, 0) 67%), linear-gradient(180deg, rgba(255, 225, 190, .08), rgba(255, 225, 190, 0) 60%); mix-blend-mode: screen; } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::after { background: radial-gradient(ellipse 72% 68% at 50% 40%, rgba(0, 0, 0, 0) 40%, rgba(8, 5, 3, .78) 100%), linear-gradient(0deg, rgba(10, 30, 40, .35), rgba(10, 30, 40, 0) 50%); mix-blend-mode: multiply; } .em-contemporan .em-c-band .wp-block-cover__image-background { filter: contrast(1.2) brightness(.78) saturate(.9) sepia(.14); } .em-contemporan .em-c-band .wp-block-cover__background { background: radial-gradient(ellipse 34% 60% at 50% -12%, rgba(255, 186, 100, .55), rgba(255, 186, 100, 0) 78%), linear-gradient(108deg, rgba(255, 206, 140, 0) 32%, rgba(255, 206, 140, .2) 40%, rgba(255, 206, 140, 0) 47%), linear-gradient(72deg, rgba(255, 206, 140, 0) 53%, rgba(255, 206, 140, .16) 60%, rgba(255, 206, 140, 0) 67%), radial-gradient(ellipse 65% 78% at 50% 45%, rgba(24, 15, 6, .42), rgba(5, 3, 1, .9) 100%), linear-gradient(0deg, rgba(8, 26, 36, .45), rgba(8, 26, 36, 0) 55%) !important; opacity: 1 !important; } /* Final grade (orchestra card and Psalm band): a clean, professional worship look — no haze or beams; richer contrast, slightly lower exposure, warm skin tones, a hint of cool in the shadows and a gentle vignette. */ .em-contemporan .em-c-card img[src*="emanuel-orchestra"] { filter: contrast(1.12) brightness(.92) saturate(1.05) sepia(.06); } .em-contemporan .em-c-card:hover img[src*="emanuel-orchestra"] { filter: contrast(1.12) brightness(.97) saturate(1.08) sepia(.05); } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::before { background: linear-gradient(180deg, rgba(255, 200, 140, .07), rgba(255, 200, 140, 0) 55%); mix-blend-mode: soft-light; } .em-contemporan .em-c-card figure:has(img[src*="emanuel-orchestra"])::after { background: radial-gradient(ellipse 80% 78% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(10, 7, 4, .42) 100%), linear-gradient(0deg, rgba(12, 32, 44, .16), rgba(12, 32, 44, 0) 50%); mix-blend-mode: multiply; } .em-contemporan .em-c-band .wp-block-cover__image-background { filter: contrast(1.12) brightness(.9) saturate(1.02) sepia(.06); } .em-contemporan .em-c-band .wp-block-cover__background { background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(22, 15, 8, .5), rgba(8, 5, 2, .82) 100%), linear-gradient(0deg, rgba(10, 28, 38, .25), rgba(10, 28, 38, 0) 55%) !important; opacity: 1 !important; } /* New menu bar on every page: it floats transparent only over the home page's hero photo; on other pages (banner or text first) it is solid from the start. */ body:not(.home) .em-c-topbar::before { background: rgba(36, 31, 27, .96); } /* ===================================================================== * Contemporan: dark theme * Warm near-black page, sections alternating with a slightly lighter tone, * cards as raised panels with a hairline border, light text, gold accents. * ===================================================================== */ .em-contemporan { --em-bg: #121010; --em-bg-2: #191614; --em-panel: #211d1a; --em-line: rgba(255, 255, 255, .08); --em-ink: #f4efe8; --em-body: rgba(244, 239, 232, .74); --em-muted: rgba(244, 239, 232, .55); --em-cream: var(--em-bg-2); --em-gold-text: #d9b97f; --em-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 32px rgba(0, 0, 0, .35); --em-shadow-hover: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 44px rgba(0, 0, 0, .5); background: var(--em-bg); color: var(--em-body); color-scheme: dark; } .em-contemporan .wp-site-blocks { background: var(--em-bg); } .em-contemporan .em-c-section { background-color: var(--em-bg); } .em-contemporan .has-light-background-color { background-color: var(--em-bg-2) !important; } .em-contemporan :is(h1, h2, h3, h4) { color: var(--em-ink); } .em-contemporan :is(p, li) { color: inherit; } .em-contemporan strong { color: var(--em-ink); } .em-contemporan .em-c-eyebrow, .em-contemporan .ecvs-latest-date { color: var(--em-gold-text); } .em-contemporan a:where(:not(.wp-element-button)) { color: var(--em-gold-text); } .em-contemporan a:where(:not(.wp-element-button)):hover { color: #fff; } .em-contemporan ::selection { background: rgba(201, 164, 106, .35); color: #fff; } /* Cards and service cards: raised dark panels */ .em-contemporan :is(.em-c-card, .ecvs-latest-card) { background: var(--em-panel); border: 1px solid var(--em-line); } .em-contemporan .em-c-card-body h3 a, .em-contemporan .ecvs-latest-card { color: var(--em-ink); } .em-contemporan :is(.em-c-card-body p, .ecvs-latest-text, .em-c-card--text p) { color: var(--em-muted); } .em-contemporan .em-c-card--text h3 { color: var(--em-ink); } .em-contemporan .ecvs-latest-title { color: var(--em-ink); } .em-contemporan .ecvs-latest-thumb { background: #000; } /* Lists and lines */ .em-contemporan .em-c-times li { border-bottom-color: var(--em-line); } .em-contemporan .em-c-zelle-addr { color: var(--em-ink); } /* Buttons: light outline on dark, gold fill on hover */ .em-contemporan .wp-block-button__link, .em-contemporan .ecvs-latest-more a { color: var(--em-ink) !important; border-color: rgba(244, 239, 232, .55) !important; } .em-contemporan .wp-block-button__link:hover, .em-contemporan .wp-block-button__link:focus-visible, .em-contemporan .ecvs-latest-more a:hover, .em-contemporan .ecvs-latest-more a:focus-visible { background: var(--wp--preset--color--gold) !important; border-color: var(--wp--preset--color--gold) !important; color: #14110f !important; } /* Bar and footer a shade apart from the page */ .em-contemporan .is-scrolled .em-c-topbar::before { background: rgba(14, 12, 11, .86); } .em-contemporan .em-c-footer { background: #0b0a09; border-top: 1px solid var(--em-line); } .em-contemporan .em-c-footer .em-c-affiliates figure { background: rgba(255, 255, 255, .9); } /* Hero fades into the dark page instead of ending on a hard edge */ .em-contemporan .em-c-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(rgba(18, 16, 16, 0), var(--em-bg)); pointer-events: none; z-index: 1; } /* Dark theme in the church's own charcoal greys (the old site's #444 / #333 bars) instead of near-black. */ .em-contemporan { --em-bg: #2f2f2f; --em-bg-2: #383838; --em-panel: #424242; --em-line: rgba(255, 255, 255, .09); --em-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 28px rgba(0, 0, 0, .28); --em-shadow-hover: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 16px 40px rgba(0, 0, 0, .4); } .em-contemporan .is-scrolled .em-c-topbar::before { background: rgba(44, 44, 44, .9); } .em-contemporan .em-c-footer { background: #262626; } .em-contemporan .em-c-hero::after { background: linear-gradient(rgba(47, 47, 47, 0), var(--em-bg)); } /* ===================================================================== * Dark theme on the inner pages (same charcoal greys and gold as the home page). * The theme's text / light / muted colours are redefined, so headings, text, * links and light panels follow; photo banners keep their white titles. * ===================================================================== */ .em-site:not(.em-contemporan) { --wp--preset--color--text: #ece6de; --wp--preset--color--light: #383838; --wp--preset--color--muted: rgba(236, 230, 222, .58); --em-ink: #f4efe8; --em-body: rgba(244, 239, 232, .78); --em-panel: #424242; --em-line: rgba(255, 255, 255, .1); background: #2f2f2f; color: var(--em-body); color-scheme: dark; } .em-site:not(.em-contemporan) .wp-site-blocks { background: #2f2f2f; } .em-site:not(.em-contemporan) :is(h1, h2, h3, h4, h5, strong) { color: var(--em-ink); } .em-site:not(.em-contemporan) .wp-block-cover :is(h1, h2, h3, p) { color: #fff; } .em-site:not(.em-contemporan) a:where(:not(.wp-element-button)) { color: #d9b97f; } .em-site:not(.em-contemporan) a:where(:not(.wp-element-button)):hover { color: #fff; } .em-site:not(.em-contemporan) .has-light-background-color { background-color: #383838 !important; } .em-site:not(.em-contemporan) .has-white-background-color { background-color: #383838 !important; } .em-site:not(.em-contemporan) .wp-block-separator { color: var(--em-line); border-color: var(--em-line); } .em-site:not(.em-contemporan) .em-c-footer { background: #262626; border-top: 1px solid var(--em-line); } .em-site:not(.em-contemporan) .is-scrolled .em-c-topbar::before, .em-site:not(.em-contemporan):not(.home) .em-c-topbar::before { background: rgba(38, 38, 38, .96); } /* Buttons: light outline, gold fill on hover */ .em-site:not(.em-contemporan) .wp-block-button__link { color: var(--em-ink) !important; border-color: rgba(244, 239, 232, .55) !important; } .em-site:not(.em-contemporan) .wp-block-button__link:hover, .em-site:not(.em-contemporan) .wp-block-button__link:focus-visible { color: #1e1b18 !important; border-color: var(--wp--preset--color--gold) !important; } /* Forms (Contact Form 7): dark panel, dark textboxes with light text */ .em-site .wpcf7 { background: #383838; border: 1px solid var(--em-line, rgba(255,255,255,.1)); } .em-site .wpcf7 label, .em-site .wpcf7 .wpcf7-list-item-label { color: rgba(244, 239, 232, .82); } .em-site .wpcf7 input:is([type="text"], [type="email"], [type="tel"], [type="date"], [type="number"], [type="url"]), .em-site .wpcf7 select, .em-site .wpcf7 textarea { background: #2a2a2a; color: #f4efe8; border-color: #5a5a5a; } .em-site .wpcf7 input::placeholder, .em-site .wpcf7 textarea::placeholder { color: rgba(244, 239, 232, .4); } .em-site .wpcf7 .wpcf7-submit { color: #f4efe8; border-color: rgba(244, 239, 232, .6); } .em-site .wpcf7 .wpcf7-submit:hover { color: #1e1b18; } .em-site .wpcf7 form .wpcf7-response-output { background: #2a2a2a; color: #f4efe8; } /* Video archive (plugin): its own colour variables, plus the few white surfaces it hard-codes */ .em-site .ecvs { --ecvs-ink: #ece6de; --ecvs-line: rgba(255, 255, 255, .1); --ecvs-dim: rgba(236, 230, 222, .6); --ecvs-soft: #3a3a3a; --ecvs-mark: rgba(201, 164, 106, .38); --ecvs-accent: #c9a46a; } .em-site .ecvs .ecvs-q:focus, .em-site .ecvs-badge, .em-site .ecvs .ecvs-play, .em-site .ecvs .ecvs-moment:hover, .em-site .ecvs .ecvs-moment:focus-visible { background: #444; } .em-site .ecvs .ecvs-desc { color: rgba(236, 230, 222, .75); } .em-site .ecvs .ecvs-more:hover { color: #1e1b18; } .em-site .ecvs input::placeholder { color: rgba(236, 230, 222, .45); } .em-site .ecvs select option { background: #2f2f2f; color: #ece6de; } /* Red notes typed into old content (e.g. the membership form's instructions): a lighter red that reads on dark grey. */ .em-site:not(.em-contemporan) [style*="#ff0000"], .em-site:not(.em-contemporan) [style*="#FF0000"], .em-site:not(.em-contemporan) [style*="color: red"] { color: #ff8a80 !important; } /* Phones: the bar's live button is hidden on every page (the block layout's own display rule won over the plain one). */ @media (max-width: 781px) { .em-c-topbar .wp-block-buttons.em-c-nav-cta { display: none !important; } } .em-c-brand-sub { white-space: nowrap; } /* Jumping to the live player leaves room for the menu bar. */ #emc-live { scroll-margin-top: 80px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Lighter charcoal (one step up, towards the old site's #444): page #3a3a3a, alternate sections #434343, cards #4e4e4e, footer #2e2e2e. */ .em-contemporan { --em-bg: #3a3a3a; --em-bg-2: #434343; --em-panel: #4e4e4e; } .em-contemporan .em-c-footer, .em-site:not(.em-contemporan) .em-c-footer { background: #2e2e2e; } .em-contemporan .em-c-hero::after { background: linear-gradient(rgba(58, 58, 58, 0), var(--em-bg)); } .em-contemporan .is-scrolled .em-c-topbar::before { background: rgba(50, 50, 50, .9); } .em-site:not(.em-contemporan) { --wp--preset--color--light: #434343; --em-panel: #4e4e4e; background: #3a3a3a; } .em-site:not(.em-contemporan) .wp-site-blocks { background: #3a3a3a; } .em-site:not(.em-contemporan) :is(.has-light-background-color, .has-white-background-color) { background-color: #434343 !important; } .em-site:not(.em-contemporan) .is-scrolled .em-c-topbar::before, .em-site:not(.em-contemporan):not(.home) .em-c-topbar::before { background: rgba(46, 46, 46, .96); } .em-site .wpcf7 { background: #434343; } .em-site .wpcf7 input:is([type="text"], [type="email"], [type="tel"], [type="date"], [type="number"], [type="url"]), .em-site .wpcf7 select, .em-site .wpcf7 textarea { background: #333; border-color: #626262; } .em-site .ecvs { --ecvs-soft: #454545; } .em-site .ecvs .ecvs-q:focus, .em-site .ecvs-badge, .em-site .ecvs .ecvs-play, .em-site .ecvs .ecvs-moment:hover, .em-site .ecvs .ecvs-moment:focus-visible { background: #4e4e4e; } /* Cards switched off during a live service (the layout's display rule must not bring them back). */ .ecvs-latest-list > li[hidden] { display: none !important; } /* ===================================================================== * Inner pages, finishing: titles, people, focus, 404 * ===================================================================== */ /* Page titles on the photo banners and section titles: the serif of the home page, first letter capital. */ .em-site:not(.em-contemporan) .em-banner :is(h1, h2), .em-site:not(.em-contemporan) .wp-block-post-content > .wp-block-cover:first-child :is(h1, h2) { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(42px, 5.6vw, 76px); letter-spacing: -.3px; line-height: 1.05; text-shadow: 0 2px 18px rgba(20, 12, 4, .35); } .em-site:not(.em-contemporan) .wp-block-post-content h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.2px; line-height: 1.15; } .em-site:not(.em-contemporan) .wp-block-post-content :is(h1, h2)::first-letter, .em-site:not(.em-contemporan) .em-banner :is(h1, h2)::first-letter { text-transform: uppercase; } /* Departamente: every portrait the same round frame with a thin gold ring; names in the serif, roles small. */ .em-site .em-person { gap: 22px; align-items: center !important; } .em-site .em-person > .wp-block-column:first-child { flex: 0 0 132px !important; } .em-site .em-person figure { margin: 0; } .em-site .em-person img { display: block; width: 132px !important; height: 132px !important; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; border-radius: 50%; box-shadow: 0 0 0 2px rgba(201, 164, 106, .55), 0 8px 22px rgba(0, 0, 0, .3); background: #4e4e4e; } .em-site .em-person h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; letter-spacing: 0; margin: 0 0 4px; } .em-site .em-person p { margin: 0; font-size: 12px; font-style: normal !important; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #d9b97f; } .em-site .em-person p em { font-style: normal; } /* Computers: each person is a block of the same width, centred in its half of the row, so a pair sits centred under the section's heading (not pushed to the left), and the portraits still line up straight from row to row. */ @media (min-width: 782px) { .em-site .em-person { width: 460px; max-width: 100%; margin-left: auto !important; margin-right: auto !important; gap: 26px; } /* The portraits bigger on computers (the photos are 819px wide, sharp at this size too). */ .em-site .em-person > .wp-block-column:first-child { flex-basis: 176px !important; } .em-site .em-person img { width: 176px !important; height: 176px !important; } } /* Phones: the rows of two stack into one list, so the space between two people of a row and between rows is made the same (32px), and the blank filler beside a lone person is left out. */ @media (max-width: 781px) { .em-site .wp-block-group:has(> .wp-block-columns > .wp-block-column > .em-person) { padding-top: 16px !important; padding-bottom: 16px !important; } .em-site .wp-block-columns:has(> .wp-block-column > .em-person) { row-gap: 32px; } .em-site .wp-block-columns:has(> .wp-block-column > .em-person) > .wp-block-column:has(> .wp-block-spacer:only-child) { display: none; } } /* Keyboard focus: a clear gold outline on the dark theme. */ .em-site :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #d9b97f; outline-offset: 3px; border-radius: 2px; } /* 404 */ .em-c-404 .wp-block-buttons { gap: 14px; } .em-c-404 .em-c-hero-eyebrow { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: #d9b97f; } .em-c-404 p { color: rgba(255, 255, 255, .85); } /* Footer logo rows (Afilieri, Resurse): centred, the row label above, a small caption under each logo. */ .em-c-footer .em-c-logorow { justify-content: center !important; align-items: flex-start; gap: 18px 22px; text-align: center; } .em-c-footer .em-c-logorow .em-c-footer-label { flex: 0 0 100%; margin: 0 0 2px; text-align: center; } .em-c-footer .em-c-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; } .em-c-footer .em-c-logo figcaption { margin: 0; font-size: 11px; letter-spacing: .4px; line-height: 1.3; color: rgba(255, 255, 255, .6); max-width: 120px; } .em-c-footer .em-c-affiliates .em-c-logo { background: none !important; width: auto !important; height: auto !important; opacity: 1 !important; padding: 0; } .em-c-footer .em-c-affiliates .em-c-logo > a { width: 120px; height: 64px; background: rgba(255, 255, 255, .9); border-radius: var(--em-radius, 4px); opacity: .6; transition: opacity .2s; } .em-c-footer .em-c-affiliates .em-c-logo:hover > a, .em-c-footer .em-c-affiliates .em-c-logo:focus-within > a { opacity: 1; } /* RO | EN switch in the menu bar */ .em-lang { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; white-space: nowrap; } .em-lang a { color: rgba(255, 255, 255, .55) !important; text-decoration: none; padding: 4px 2px; } .em-lang a:hover, .em-lang a:focus-visible { color: #fff !important; } .em-lang a[aria-current] { color: #d9b97f !important; } .em-lang-sep { color: rgba(255, 255, 255, .3); } .em-c-nav > p:empty { display: none; } /* Phones: RO | EN sits before the menu button, everything fits the bar. */ @media (max-width: 781px) { .em-c-topbar { padding-left: 16px !important; padding-right: 12px !important; } .em-c-nav { gap: 10px !important; } .em-c-nav .em-lang { order: -1; font-size: 11px; gap: 4px; } .em-c-brand-sub { font-size: 8.5px; letter-spacing: 1.6px; } } @media (max-width: 360px) { .em-c-brand-sub { display: none; } } /* Phones turned sideways and small tablets (600-1023px): the full menu doesn't fit the bar (it wrapped onto two lines), so the menu button and panel are kept, as on phones. The Navigation block itself only switches below 600px. RO | EN sits before the button. */ @media (min-width: 600px) and (max-width: 1023px) { .em-topbar .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .em-topbar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .em-c-nav .em-lang { order: -1; } .em-c-nav-cta .wp-block-button__link { white-space: nowrap; } } /* A phone on its side is short: the open menu scrolls rather than running off the screen. */ @media (max-height: 500px) { .em-topbar .wp-block-navigation__responsive-container.is-menu-open { overflow-y: auto; } .em-topbar .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 52px !important; } } /* Facebook gallery (ec-fb-gallery) in the dark theme: its own colour variables mapped to the site's. */ .em-site .ecfb-gallery { --ecfb-charcoal: #4e4e4e; --ecfb-terra: #c9a46a; --ecfb-terra-lt: #d9b97f; --ecfb-terra-dk: #a8844f; --ecfb-cream: #434343; --ecfb-beige: #434343; --ecfb-offwhite: #4e4e4e; --ecfb-text: #f4efe8; --ecfb-muted: rgba(244, 239, 232, .62); --ecfb-border: rgba(255, 255, 255, .1); --ecfb-shadow: rgba(0, 0, 0, .3); --ecfb-radius: 4px; --ecfb-radius-lg: 4px; --ecfb-font-body: Montserrat, 'Helvetica Neue', Arial, sans-serif; --ecfb-font-heading: 'Cormorant Garamond', Georgia, serif; } .em-site .ecfb-album-card { background: #4e4e4e; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); } .em-site .ecfb-album-name { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 22px; color: #f4efe8; } .em-site .ecfb-notice { max-width: 760px; margin: 10px auto 40px; padding: 22px 26px; background: #434343; border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid #c9a46a; border-radius: 4px; color: rgba(244, 239, 232, .85); } .em-site .ecfb-notice p { margin: 0; } .em-site .ecfb-notice .ecfb-notice-admin { margin-top: 12px; font-size: 13px; color: #ff8a80; } /* Block editor: the page title field reads on the dark canvas. */ .editor-post-title, .editor-post-title__input { color: #f4efe8 !important; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; } /* In the editor the content root carries .em-site (not .wp-block-post-content): same section titles. */ .em-site.is-root-container:not(.em-contemporan) h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.2px; line-height: 1.15; } .em-site.is-root-container:not(.em-contemporan) :is(h1, h2)::first-letter { text-transform: uppercase; } /* Phones: banner photos without the fixed (parallax) background, so the chosen framing shows (iPhones ignore fixed backgrounds anyway). */ @media (max-width: 781px) { .wp-block-cover .wp-block-cover__image-background.has-parallax, .wp-block-cover.has-parallax { background-attachment: scroll !important; } } /* Istoric: the list of the website's earlier versions. */ .em-sites { list-style: none; padding-left: 0; display: grid; gap: 8px; } .em-sites li { padding: 10px 14px; background: #434343; border-left: 2px solid #c9a46a; border-radius: 2px; } .em-sites strong { font-variant-numeric: tabular-nums; color: #d9b97f; } /* Istoric: a few old photos beside the text (from the church's "Istoric Pictures" folder), left and right in turn, each with its caption (beside the name lists always on the right, so the lists keep their place); on phones full width between the paragraphs. */ .em-site .wp-block-image.em-istoric-foto { width: 42%; max-width: 380px; clear: both; margin-top: 6px; margin-bottom: 20px; } /* Floats aren't held to the text width, so they line up with the text's edge themselves. */ .em-site .wp-block-image.em-istoric-foto.alignright { margin-left: 28px; margin-right: max(0px, calc((100% - var(--wp--style--global--content-size, 100%)) / 2)); } .em-site .wp-block-image.em-istoric-foto.alignleft { margin-right: 28px; margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 100%)) / 2)); } /* Istoric: the index at the top, links to each section as small pills; the headings land below the menu bar. */ .em-site ul.em-istoric-index { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-wrap: wrap; gap: 8px 10px; } .em-site ul.em-istoric-index li { margin: 0; } .em-site ul.em-istoric-index a { display: inline-block; padding: 6px 14px; border: 1px solid rgba(201, 164, 106, .45); border-radius: 999px; font-size: 13.5px; line-height: 1.4; color: #e6d3ad; text-decoration: none; transition: background-color .15s, border-color .15s; } .em-site ul.em-istoric-index a:hover, .em-site ul.em-istoric-index a:focus-visible { background: rgba(201, 164, 106, .16); border-color: #c9a46a; } .em-site .entry-content:has(.em-istoric-index) > h3[id] { scroll-margin-top: 96px; } html:has(.em-istoric-index) { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html:has(.em-istoric-index) { scroll-behavior: auto; } } @media (max-width: 600px) { .em-site ul.em-istoric-index a { font-size: 13px; padding: 5px 12px; } } /* Istoric: the Fell Street years as a small gallery, three to a row (two on phones), photos cropped to one shape. */ .em-site .em-istoric-galerie-titlu { clear: both; margin-top: 30px; font-style: italic; color: #d9cdb8; } .em-site .wp-block-gallery.em-istoric-galerie { gap: 18px; margin-bottom: 36px; } .em-site .wp-block-gallery.em-istoric-galerie .wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); } .em-site .wp-block-gallery.em-istoric-galerie .wp-block-image figcaption { position: static; background: none; padding: 8px 0 0; margin: 0; max-height: none; overflow: visible; font-size: 13.5px; line-height: 1.45; font-style: italic; color: #bdb3a4; text-align: left; text-shadow: none; } .em-site .wp-block-gallery.em-istoric-galerie .wp-block-image { flex-direction: column; justify-content: flex-start; } @media (max-width: 600px) { .em-site .wp-block-gallery.em-istoric-galerie .wp-block-image { width: calc(50% - 9px) !important; flex-grow: 0; } } /* A section heading starts below a photo on the left that runs past its section, not beside it. */ .em-site .entry-content:has(.em-istoric-foto) > h3 { clear: left; } .em-site .em-istoric-foto img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); } .em-site .em-istoric-foto figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.45; font-style: italic; color: #bdb3a4; text-align: left; } @media (max-width: 600px) { .em-site .wp-block-image.em-istoric-foto { float: none; width: 100%; max-width: none; margin: 18px 0 24px; } } .em-sites a { word-break: break-word; } /* Gallery in the theme: album photos with the site's corners and gold hover; serif album title. */ .em-site .ecfb-photo-item { border-radius: 4px !important; } .em-site .ecfb-photo-overlay { background: rgba(201, 164, 106, .28); } .em-site .ecfb-back-btn { color: #f4efe8; border-color: rgba(244, 239, 232, .55); } .em-site .ecfb-back-btn:hover, .em-site .ecfb-back-btn:focus-visible { background: #c9a46a; border-color: #c9a46a; color: #1e1b18; } .em-site .ecfb-album-overlay { background: rgba(30, 24, 18, .35); } .em-site .ecfb-album-open-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff; font-size: 18px; padding-left: 4px; } .em-site .ecfb-album-card:hover .ecfb-album-open-icon { background: #c9a46a; border-color: #c9a46a; } /* Psalm 122:1 band: the photo more visible — a lighter shade (darker only at the edges and right behind the words) and the photo at full brightness; a soft shadow keeps the verse legible. */ .em-contemporan .em-c-band .wp-block-cover__image-background { filter: contrast(1.08) brightness(1) saturate(1.05) sepia(.04); } .em-contemporan .em-c-band .wp-block-cover__background { background: radial-gradient(ellipse 48% 42% at 50% 50%, rgba(18, 12, 6, .42), rgba(18, 12, 6, 0) 100%), radial-gradient(ellipse 80% 90% at 50% 50%, rgba(18, 12, 6, .14), rgba(8, 5, 2, .58) 100%) !important; opacity: 1 !important; } .em-contemporan .em-c-verse p, .em-contemporan .em-c-verse cite { text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 18px rgba(0, 0, 0, .55); } /* Psalm band parallax, stronger: the photo extends 200px beyond the band on each side, so it can move at about half the scroll speed without showing an edge. */ .em-contemporan .em-c-band .wp-block-cover__image-background { top: -200px !important; height: calc(100% + 400px) !important; } /* Live translation strip under the live player: black like the player, Áron's projector inside. */ .em-live-captions { background: #000; margin: 0 calc(var(--wp--style--root--padding-right, 20px) * -1) 0 calc(var(--wp--style--root--padding-left, 20px) * -1); border-top: 1px solid rgba(255, 255, 255, .08); } .em-live-captions-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, 4vw) 0; font-size: 11.5px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; } .em-live-captions-label { color: #d9b97f; display: inline-flex; align-items: center; gap: 8px; } .em-live-captions-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #d62828; box-shadow: 0 0 0 3px rgba(214, 40, 40, .25); } .em-live-captions-bar a { color: rgba(255, 255, 255, .7) !important; text-decoration: none; letter-spacing: 1px; } .em-live-captions-bar a:hover { color: #fff !important; } /* Three lines of the projector text (its size: 2.6% of the width, 17-32px; line height 1.3) and its 14px margin below, as the archive strip. */ .em-live-captions iframe { display: block; width: 100%; height: calc(clamp(17px, 2.6vw, 32px) * 3.9 + 18px); border: 0; background: #000; } /* The strip runs edge to edge like the player (the content column's own margins don't apply). */ .em-contemporan .em-live-captions { max-width: none !important; margin: 0 calc(var(--wp--style--root--padding-right, 20px) * -1) 0 calc(var(--wp--style--root--padding-left, 20px) * -1) !important; } /* Closed until a caption arrives; closes again after 10 s without one (em-reveal.js). The frame keeps its size inside, so the projector keeps running and laying out while closed. */ .em-live-captions { max-height: 0; overflow: hidden; border-top-width: 0; transition: max-height .45s ease; } .em-live-captions.is-on { max-height: 260px; border-top-width: 1px; } @media (prefers-reduced-motion: reduce) { .em-live-captions { transition: none; } } /* Phones: the bar on one line. */ @media (max-width: 600px) { .em-live-captions-bar { font-size: 10px; letter-spacing: 1.1px; padding-top: 8px; } .em-live-captions-bar > * { white-space: nowrap; } } /* Listen (the spoken translation) beside Full screen in the live-translation bar. */ .em-live-captions-actions { display: inline-flex; align-items: center; gap: 14px; } .em-live-listen { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid rgba(217, 185, 127, .55); border-radius: 999px; background: transparent; color: #d9b97f; font: inherit; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } .em-live-listen:hover { border-color: #d9b97f; color: #f0d9ac; } .em-live-listen[aria-pressed="true"] { background: #c9a46a; border-color: #c9a46a; color: #1c1c1c; } .em-live-listen[hidden] { display: none; } .em-live-listen:focus-visible { outline: 2px solid #d9b97f; outline-offset: 2px; } @media (max-width: 600px) { .em-live-captions-actions { gap: 10px; } .em-live-listen { padding: 4px 9px; } .em-live-full-txt { display: none; } .em-live-captions-bar a { font-size: 15px; } } /* The live card's badge on the English pages. */ html[lang^="en"] .em-contemporan .ecvs-latest-card.is-live .ecvs-latest-thumb::before { content: "LIVE NOW"; } /* Home page: the pastor's welcome letter, below the hero. Photo, name and role on the left; the letter on the right; stacked on phones. The handwritten touches of the printed letter are the site's Cormorant italic in gold, as the hero's rotating word. */ .em-contemporan .em-c-pastor-cols { gap: 56px; align-items: flex-start; } .em-contemporan .em-c-pastor-side { text-align: center; } /* The photo kept modest (the letter is the point): a charcoal backdrop like the page's, a faint gold line, a soft shadow. */ .em-contemporan .em-c-pastor-side { flex-basis: 240px !important; } .em-contemporan .em-c-pastor-photo { margin: 0 auto; max-width: 200px; } .em-contemporan .em-c-pastor-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 6px; box-shadow: 0 0 0 1px rgba(201, 164, 106, .2), 0 8px 22px rgba(0, 0, 0, .3); } .em-contemporan .em-c-pastor-sig { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 38px; line-height: 1; color: #e3c48e; margin: 22px 0 6px; } .em-contemporan .em-c-pastor-role { font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--em-gold-text); margin: 0; } .em-contemporan .em-c-pastor-role::after { content: ""; display: block; width: 56px; height: 2px; background: var(--wp--preset--color--gold); margin: 16px auto 0; opacity: .7; } .em-contemporan .em-c-pastor-title { margin: 0 0 28px; text-align: left; line-height: 1.05; } .em-contemporan .em-c-pastor-title .em-c-pastor-script { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(30px, 3.4vw, 40px); color: #e3c48e; letter-spacing: 0; } .em-contemporan .em-c-pastor-title .em-c-pastor-serif { display: block; font-size: clamp(36px, 4.6vw, 54px); letter-spacing: -.5px; } .em-contemporan .em-c-pastor-title::after { content: ""; display: block; width: 64px; height: 2px; background: var(--wp--preset--color--gold); margin-top: 22px; opacity: .7; } .em-contemporan .em-c-pastor-text p { margin: 0 0 16px; line-height: 1.7; } .em-contemporan .em-c-pastor-text .em-c-pastor-closing { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 34px; line-height: 1.1; color: #e3c48e; margin: 28px 0 10px; } .em-contemporan .em-c-pastor-text .em-c-pastor-name { font-weight: 600; color: var(--em-ink); margin-top: 8px; } @media (max-width: 781px) { .em-contemporan .em-c-pastor-cols { gap: 28px; } .em-contemporan .em-c-pastor-side { max-width: 240px; margin: 0 auto; } .em-contemporan .em-c-pastor-photo { max-width: 160px; } .em-contemporan .em-c-pastor-title { text-align: center; } .em-contemporan .em-c-pastor-title::after { margin-left: auto; margin-right: auto; } } /* Home page hero: the church (the side-view photo, toned sepia, its sky taken out, its edges soft) faint over the crosses, like a double exposure. On computers it stands at the left, balancing the crosses on the right; on phones behind the text, fainter. It fades out towards the bottom, into the page. (assets/img/church-outline.svg, a line drawing of the same view, was the first version.) */ .home.em-contemporan .em-c-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url("assets/img/church-faint.webp") no-repeat left 6% bottom 0 / auto 96%; opacity: .24; /* Two masks together: the fade towards the bottom, and the crosses with their hill (drawn from the photo, placed over it the way the photo is: covering, centred), so the drawing stands behind them. */ -webkit-mask-image: linear-gradient(#000 55%, transparent 98%), url("assets/img/hero-crosses-mask.png"); mask-image: linear-gradient(#000 55%, transparent 98%), url("assets/img/hero-crosses-mask.png"); -webkit-mask-size: 100% 100%, cover; mask-size: 100% 100%, cover; -webkit-mask-position: 0 0, 50% 50%; mask-position: 0 0, 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; transform: translate3d(0, var(--em-par, 0px), 0); /* moves with the photo's parallax (em-reveal.js) */ } /* The hero's text in front of that layer (and of the fade at the bottom), not seen through it. */ .home.em-contemporan .em-c-hero .wp-block-cover__inner-container { z-index: 2; } @media (max-width: 781px) { .home.em-contemporan .em-c-hero::before { background-position: 50% 100%; background-size: auto 92%; opacity: .2; } } /* The other version (?hero=outline): the church as a line drawing (assets/img/church-outline.svg, lines 2.6px). */ .home.em-contemporan.em-hero-outline .em-c-hero::before { background-image: url("assets/img/church-outline.svg?v=4"); opacity: .22; } @media (max-width: 781px) { .home.em-contemporan.em-hero-outline .em-c-hero::before { opacity: .13; } } /* ?hero=original: only the crosses photo, without the church. */ .home.em-contemporan.em-hero-original .em-c-hero::before { content: none; } /* Home page hero: the church's shield, flat white, redrawn clean from the original logo (specks gone, the bricks redrawn as even rows), the flame orange to red like the sign in the church (uploads/2026/10/emanuel-scut-flacara.png; emanuel-scut-alb.png is the all-white one), with the same light shadow the emblem had, so it holds against the bright haze. */ .em-contemporan .em-c-hero-mark:has(img[src*="emanuel-scut-"]) { width: 132px; margin: 0 auto 24px; opacity: 1; } .em-contemporan .em-c-hero-mark img[src*="emanuel-scut-"] { width: 132px !important; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25)); } @media (max-width: 781px) { .em-contemporan .em-c-hero-mark:has(img[src*="emanuel-scut-"]) { width: 112px; margin-bottom: 20px; } .em-contemporan .em-c-hero-mark img[src*="emanuel-scut-"] { width: 112px !important; } } /* The home page hero as it is now: only the church, without the crosses (?hero=crosses for the version with them): the crosses photo hidden, the hero in a warm grey, as the charcoal sections below it, and the church photo clearer, with no mask. */ .home.em-contemporan.em-hero-photo .em-c-hero { background: radial-gradient(120% 90% at 50% 20%, #c2bcb2, #837c72 55%, #3d3935); } .home.em-contemporan.em-hero-photo .em-c-hero .wp-block-cover__image-background { opacity: 0; } .home.em-contemporan.em-hero-photo .em-c-hero::before { opacity: .55; background-position: left 8% bottom 0; background-size: auto 100%; -webkit-mask-image: linear-gradient(#000 60%, transparent 99%); mask-image: linear-gradient(#000 60%, transparent 99%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: 0 0; mask-position: 0 0; } @media (max-width: 781px) { .home.em-contemporan.em-hero-photo .em-c-hero::before { opacity: .42; background-position: 50% 100%; background-size: auto 96%; } } /* Warm grey: the church photo mostly desaturated, and the shade behind the text grey-brown instead of brown. */ .home.em-contemporan.em-hero-photo .em-c-hero::before { filter: grayscale(.75); } .home.em-contemporan.em-hero-photo .em-c-hero .wp-block-cover__background { background: radial-gradient(ellipse 52% 42% at 50% 50%, rgba(48, 42, 36, .5), rgba(48, 42, 36, .22) 55%, rgba(48, 42, 36, 0) 100%), linear-gradient(0deg, rgba(51, 49, 46, .95) 0%, rgba(50, 45, 40, .5) 45%, rgba(200, 200, 200, .12) 100%) !important; } /* The church-photo hero is lighter than the crosses one: its text solid white (the gold word a shade deeper) with a firmer shadow, so it stands out instead of looking faded into the photo. */ .home.em-contemporan:is(.em-hero-photo, .em-hero-sketch, .em-hero-sanctuary) .em-c-hero :is(.em-c-hero-eyebrow, h1, .em-c-hero-times) { color: #fff; text-shadow: 0 1px 2px rgba(40, 24, 8, .75), 0 2px 14px rgba(40, 24, 8, .65), 0 0 34px rgba(40, 24, 8, .45); } .home.em-contemporan:is(.em-hero-photo, .em-hero-sketch, .em-hero-sanctuary) .em-c-hero h1 :is(.em-hero-lead, .em-w) { color: inherit; } .home.em-contemporan:is(.em-hero-photo, .em-hero-sketch, .em-hero-sanctuary) .em-c-hero h1 .em-w span { color: #e8c27e; } .home.em-contemporan.em-hero-photo .em-c-hero :is(.em-c-hero-eyebrow, h1, .em-c-hero-times) { text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 2px 14px rgba(0, 0, 0, .55), 0 0 34px rgba(0, 0, 0, .4); } /* The church's name above the title, a bit bigger. */ .em-contemporan .em-c-hero .em-c-hero-eyebrow { font-size: 15px; letter-spacing: 3.2px; line-height: 1.6; } @media (max-width: 781px) { .em-contemporan .em-c-hero .em-c-hero-eyebrow { font-size: 12.5px; letter-spacing: 2.2px; } } /* The other version (?hero=sketch): the church as a pencil sketch on warm paper, filling the hero: the wide view on computers (assets/img/church-sketch-wide.jpg), the side view with the palms on phones (church-sketch-phone.jpg). */ .home.em-contemporan.em-hero-sketch .em-c-hero { background: #4a3a2a; } /* the sketch at half strength over a dark warm brown, so the white title stands out */ .home.em-contemporan.em-hero-sketch .em-c-hero::before { opacity: .5; background: url("assets/img/church-sketch-wide.jpg") 50% 70% / cover no-repeat; -webkit-mask-image: none; mask-image: none; } @media (max-width: 781px) { .home.em-contemporan.em-hero-sketch .em-c-hero::before { background-image: url("assets/img/church-sketch-phone.jpg"); background-position: 50% 100%; } } /* The other version (?hero=sanctuary): the sanctuary during the service, the choir, orchestra and congregation singing (Christmas Concert 2025, from the church's Facebook album): assets/img/sanctuary-wide.jpg on computers, a tall crop on the stage and the shield on phones (sanctuary-phone.jpg). The photo is bright and busy, so a dark shade, deeper in the middle and at the bottom, keeps the title readable. */ .home.em-contemporan.em-hero-sanctuary .em-c-hero { background: #1d1a17; } .home.em-contemporan.em-hero-sanctuary .em-c-hero::before { opacity: 1; background: url("assets/img/sanctuary-wide.jpg?v=3") 50% 25% / cover no-repeat; -webkit-mask-image: none; mask-image: none; } .home.em-contemporan.em-hero-sanctuary .em-c-hero .wp-block-cover__background { z-index: 1; opacity: 1; background: radial-gradient(ellipse 60% 48% at 50% 52%, rgba(16, 12, 8, .55), rgba(16, 12, 8, .3) 60%, rgba(16, 12, 8, 0) 100%), linear-gradient(0deg, rgba(16, 12, 8, .9) 0%, rgba(20, 15, 10, .55) 42%, rgba(20, 15, 10, .38) 100%) !important; } @media (max-width: 781px) { .home.em-contemporan.em-hero-sanctuary .em-c-hero::before { background-image: url("assets/img/sanctuary-phone.jpg?v=3"); background-position: 50% 40%; } } /* Home page: a slim band under the hero pointing to the "new website" presentation (/prezentare/). Temporary: remove with its block on the home page. */ .em-c-nou { margin: 0 !important; padding: 14px 16px; text-align: center; background: #35322F; border-bottom: 1px solid rgba(201, 164, 106, .35); font: 500 15px/1.5 Montserrat, Arial, sans-serif; } .em-c-nou a { color: #F3EEE6; text-decoration: none; } .em-c-nou a:hover, .em-c-nou a:focus-visible { color: #E3C186; } .em-c-nou-tag { display: inline-block; margin-right: 10px; padding: 2px 8px; border-radius: 3px; background: #C9A46A; color: #2A2826; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; vertical-align: 1px; } .em-c-nou-arrow { color: #E3C186; }