/* =================================================================== * TRC Light Theme — load AFTER main.css * White base; accent taken from the church logo and assigned at random * on each page load by js/theme-random.js (class added to ): * .theme-plum → Plum (#4A1D5F) * .theme-gold → Gold (#9A6317, logo gold darkened for contrast) * .theme-green → Green (#3A7D3D) * Plum is also the fallback (:root default) if JS is disabled. * =================================================================== */ :root { --accent: #4a1d5f; --accent-dark: #311340; --accent-soft: rgba(74, 29, 95, 0.08); } .theme-gold { --accent: #9a6317; --accent-dark: #7a4d10; --accent-soft: rgba(154, 99, 23, 0.08); } .theme-green { --accent: #3a7d3d; --accent-dark: #2a5c2d; --accent-soft: rgba(58, 125, 61, 0.08); } body { background: #ffffff; color: #1c1a17; } a { color: var(--accent); } a:hover, a:focus, a:active { color: var(--accent-dark); } /* ------------------------------------------------------------------- * header — white band with accent underline, full-colour logo * ------------------------------------------------------------------- */ .s-header { top: 0; background-color: #ffffff; border-bottom: 3px solid var(--accent); } .header-logo::before { display: none; } .header-logo img { width: 150px; height: auto; } .header-nav a { color: #1c1a17; } .header-nav a:hover, .header-nav a:focus { color: var(--accent); } .header-nav .current a { color: var(--accent); font-weight: 700; border-bottom: 2px solid var(--accent); padding-bottom: 4px; } .header-menu-toggle span { background-color: #1c1a17; } .header-menu-toggle { color: #1c1a17; } .header-menu-toggle:hover, .header-menu-toggle:focus { color: var(--accent); } @media screen and (max-width: 800px) { .header-nav-wrap { top: 0; } .header-nav-wrap .header-nav a { color: rgba(255, 255, 255, 0.8); } .header-menu-toggle.is-clicked span { background-color: rgba(255, 255, 255, 0); } } /* ------------------------------------------------------------------- * hero (homepage) * ------------------------------------------------------------------- */ .hero-left-bar { background-color: var(--accent); opacity: 0.85; } .hero-content h1::before { height: 3px; background-color: var(--accent); } .hero-content__buttons .btn.video-popup-trigger { background: var(--accent) !important; border-color: var(--accent); } .hero-content__buttons .btn.video-popup-trigger:hover, .hero-content__buttons .btn.video-popup-trigger:focus { background: var(--accent-dark) !important; border-color: var(--accent-dark); color: #ffffff; } .hero-scroll .scroll-link:hover, .hero-scroll .scroll-link:focus { color: var(--accent); } /* ------------------------------------------------------------------- * welcome / about section (homepage) — dark plum block becomes white * ------------------------------------------------------------------- */ .s-about { background-color: #ffffff; color: #3d3a35; } .s-about .subhead { color: var(--accent); } .s-about .lead { color: #1c1a17; } .s-about .btn--about { background-color: var(--accent); border-color: var(--accent); } .s-about .btn--about:hover, .s-about .btn--about:focus { background-color: var(--accent-dark); border-color: var(--accent-dark); } .about-sched { border-top: 1px solid rgba(0, 0, 0, 0.1); } .about-sched li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: linear-gradient(to right, var(--accent-soft), transparent 60%); padding-left: 24px; padding-bottom: 24px; } .about-sched h4 { color: var(--accent); } /* ------------------------------------------------------------------- * social strip — black becomes warm off-white, accent icon discs * ------------------------------------------------------------------- */ .s-social { background-color: #f7f5f1; } .social-list a { color: #1c1a17; } .social-list a:hover, .social-list a:focus { color: var(--accent); } .social-list__icon { background-color: var(--accent); border: none; transition: background-color 0.3s ease-in-out; } .social-list a:hover .social-list__icon { background-color: var(--accent-dark); } /* ------------------------------------------------------------------- * footer — dark plum becomes white with accent top border * ------------------------------------------------------------------- */ .s-footer { background-color: #ffffff; border-top: 3px solid var(--accent); color: #6b6459; } .s-footer a { color: #6b6459; } .s-footer a:hover, .s-footer a:focus { color: var(--accent); } .s-footer h4 { color: #1c1a17; } .s-footer .btn--footer { background-color: var(--accent); border-color: var(--accent); color: #ffffff; } .s-footer .btn--footer:hover, .s-footer .btn--footer:focus { background-color: var(--accent-dark); border-color: var(--accent-dark); color: #ffffff; } .footer-logo img { width: 180px; height: auto; } .footer-list a { color: #6b6459; } .footer-list a:hover, .footer-list a:focus { color: var(--accent); } .ss-copyright { color: #9a938a; } .ss-copyright span::after { color: rgba(0, 0, 0, 0.15); } .ss-go-top a { background-color: var(--accent); } .ss-go-top a:hover { background-color: var(--accent-dark); } /* ------------------------------------------------------------------- * inner page header + content (about / contact) * ------------------------------------------------------------------- */ .page-header h1::after { content: ""; display: block; width: 72px; height: 3px; background-color: var(--accent); margin: 28px auto 0; } ul.disc li::before { background: var(--accent); } dt { color: var(--accent); } .drop-cap:first-letter { color: var(--accent); } blockquote { border-left: 4px solid var(--accent); background: var(--accent-soft); } .page-content h6, .block-list h6 { color: var(--accent); } .leader-profile { margin-bottom: 24px; } .leader-portrait { margin: 0 0 24px; } .leader-portrait img { display: block; width: 100%; height: auto; border-radius: 6px; border: 4px solid var(--accent); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14); } .leader-portrait figcaption { margin-top: 14px; text-align: center; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } /* ------------------------------------------------------------------- * site lock — password gate modal (js/site-lock.js) * ------------------------------------------------------------------- */ #site-lock-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #ffffff; padding: 24px; } .site-lock__box { width: 100%; max-width: 380px; text-align: center; } .site-lock__logo { width: 160px; height: auto; margin: 0 auto 32px; } .site-lock__box h3 { margin-bottom: 8px; color: #1c1a17; } .site-lock__hint { color: #6b6459; margin-bottom: 24px; } #site-lock-form input[type="password"] { text-align: center; } .site-lock__error { color: #b3261e; margin: 16px 0 0; font-size: 1.4rem; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border-bottom: 1px solid var(--accent); } .btn.btn--primary, button.btn--primary, input[type="submit"].btn--primary { background: var(--accent); border-color: var(--accent); } .btn.btn--primary:hover, button.btn--primary:hover, input[type="submit"].btn--primary:hover, .btn.btn--primary:focus, button.btn--primary:focus, input[type="submit"].btn--primary:focus { background: var(--accent-dark); border-color: var(--accent-dark); } /* ------------------------------------------------------------------- * map embed (contact page) * ------------------------------------------------------------------- */ .map-embed { position: relative; width: 100%; height: 400px; margin: 3.2rem 0 4.8rem; border-radius: 4px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); } .map-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } @media screen and (max-width: 600px) { .map-embed { height: 300px; } } /* ------------------------------------------------------------------- * faith / vision / beliefs lists (about + our-faith pages) * ------------------------------------------------------------------- */ ul.disc li { margin-bottom: 1.2rem; } .ministry-list__item h6 { margin-bottom: 0.4rem; } .ministry-list__item .placeholder-note { color: #9a938a; font-style: italic; font-size: 1.4rem; }