/* Theme Name: Jagadish Christian.Com Theme URI: https://jagadishchristian.com Description: Custom child theme of Twenty Fourteen for Jagadish Christian.Com. Inherits the existing layout, header, widget areas and menus, with room for a modern redesign. Parent theme: Twenty Fourteen. Author: Jagadish Christian.Com Template: twentyfourteen Version: 1.0.0 */ /* ============================================================ CUSTOM STYLES — Jagadish Christian.Com ============================================================ */ /* ------------------------------------------------------------ Layout width — widen page AND header to the same width. ------------------------------------------------------------ */ .site, .site-header { max-width: 1600px; margin-left: auto; margin-right: auto; } /* ============================================================ VISITOR COLOUR PALETTES Applied via a data-palette attribute on (set by palette-switcher.js + saved in localStorage). Each palette only changes a set of CSS variables. DEFAULT (:root) = Royal Burgundy. "Classic" (the original black/green Twenty Fourteen look) is data-palette="default". ============================================================ */ :root { --jc-header-bg: #6E1B27; --jc-accent: #B8923F; --jc-accent-dark: #8c6f30; --jc-title: #ffffff; --jc-panel-bg: #f8efe9; --jc-panel-text: #574540; --jc-panel-title: #6E1B27; --jc-body-bg: #f3ebe8; } html[data-palette="default"] { --jc-header-bg: #000000; --jc-accent: #24890d; --jc-accent-dark: #1b6a09; --jc-title: #24890d; --jc-panel-bg: #f2f1ec; --jc-panel-text: #444444; --jc-panel-title: #222222; --jc-body-bg: #f1f1ee; } html[data-palette="burgundy"] { --jc-header-bg: #6E1B27; --jc-accent: #B8923F; --jc-accent-dark: #8c6f30; --jc-title: #ffffff; --jc-panel-bg: #f8efe9; --jc-panel-text: #574540; --jc-panel-title: #6E1B27; --jc-body-bg: #f3ebe8; } html[data-palette="navy"] { --jc-header-bg: #14304F; --jc-accent: #2E6FB7; --jc-accent-dark: #214f86; --jc-title: #ffffff; --jc-panel-bg: #eef3f9; --jc-panel-text: #33465a; --jc-panel-title: #14304F; --jc-body-bg: #eaf0f6; } html[data-palette="violet"] { --jc-header-bg: #33276E; --jc-accent: #6D4AE0; --jc-accent-dark: #523ab0; --jc-title: #ffffff; --jc-panel-bg: #f2eefb; --jc-panel-text: #463f5e; --jc-panel-title: #33276E; --jc-body-bg: #efeaf9; } html[data-palette="forest"] { --jc-header-bg: #1E4D3A; --jc-accent: #C9A227; --jc-accent-dark: #9c7d1d; --jc-title: #ffffff; --jc-panel-bg: #eef4ef; --jc-panel-text: #3b4a40; --jc-panel-title: #1E4D3A; --jc-body-bg: #e9f1eb; } html[data-palette="christmas"] { --jc-header-bg: #8E1B1B; --jc-accent: #1E7A46; --jc-accent-dark: #155c34; --jc-title: #ffffff; --jc-panel-bg: #f8ece9; --jc-panel-text: #54403e; --jc-panel-title: #8E1B1B; --jc-body-bg: #f4e7e5; } html[data-palette="slate"] { --jc-header-bg: #37434F; --jc-accent: #2A9D8F; --jc-accent-dark: #1f7a6e; --jc-title: #ffffff; --jc-panel-bg: #eef1f3; --jc-panel-text: #3d4750; --jc-panel-title: #37434F; --jc-body-bg: #e9edf0; } /* --- Page / gutters --- */ body { background-color: var(--jc-body-bg) !important; } /* --- Header / menu / accents --- */ .site-header { background-color: var(--jc-header-bg) !important; } .site-title a, .site-title a:hover { color: var(--jc-title) !important; } .content-area a, .content-sidebar a, .site-content a:not(.button) { color: var(--jc-accent); } .content-area a:hover, .content-sidebar a:hover, .site-content a:hover { color: var(--jc-accent-dark); } .search-toggle { background-color: var(--jc-accent) !important; } .search-toggle:hover, .search-toggle.active { background-color: var(--jc-accent-dark) !important; } .search-box .search-submit { background-color: var(--jc-accent) !important; border-color: var(--jc-accent) !important; } /* Active/current menu item — accent text on the header bar (no background). */ .primary-navigation li.current_page_item > a, .primary-navigation li.current-menu-item > a { color: var(--jc-accent) !important; } /* Hover/focus — palette-accent background with WHITE text, so the item stays readable in every palette (fixes green-on-green in Classic). */ .primary-navigation li:hover > a, .primary-navigation li.focus > a, .primary-navigation li a:hover { background-color: var(--jc-accent) !important; color: #ffffff !important; } /* Drop-down sub-menus follow the palette too. */ .primary-navigation ul ul { background-color: var(--jc-accent) !important; } .primary-navigation ul ul a { color: #ffffff !important; } .primary-navigation ul ul a:hover, .primary-navigation ul ul li.focus > a { background-color: var(--jc-accent-dark) !important; color: #ffffff !important; } /* --- Left side panel (primary sidebar) — light per palette --- */ .site:before { background-color: var(--jc-panel-bg) !important; } #secondary { background-color: var(--jc-panel-bg) !important; color: var(--jc-panel-text) !important; border-bottom-color: rgba(0, 0, 0, 0.12) !important; } #secondary, #secondary p, #secondary li, #secondary .widget { color: var(--jc-panel-text) !important; } #secondary .widget-title { color: var(--jc-panel-title) !important; } #secondary a, #secondary .widget a, #secondary li a { color: var(--jc-accent) !important; } #secondary a:hover, #secondary .widget a:hover, #secondary li a:hover { color: var(--jc-accent-dark) !important; } #secondary .widget, #secondary .widget li, #secondary .widget + .widget { border-color: rgba(0, 0, 0, 0.10) !important; } /* --- Right content sidebar --- */ .content-sidebar .widget-title { color: var(--jc-panel-title) !important; } .content-sidebar .widget a { color: var(--jc-accent) !important; } .content-sidebar .widget a:hover { color: var(--jc-accent-dark) !important; } /* --- Footer --- */ .site-footer { background-color: var(--jc-header-bg) !important; } .site-footer a { color: rgba(255, 255, 255, 0.85); } .site-footer a:hover { color: #ffffff; } /* ============================================================ LEFT PANEL ORDER + "TODAY IN THE CHURCH" DAILY WIDGET Custom daily widget on top, "Secured Site Seal" (#text-25) moved to the bottom of the left panel. ============================================================ */ .primary-sidebar { display: flex; flex-direction: column; } .primary-sidebar #text-25 { order: 100; } .jc-daily-catholic { order: -10; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-top: 3px solid var(--jc-panel-title); border-radius: 6px; padding: 12px 14px 14px; margin-bottom: 24px; } .jc-daily-catholic .widget-title { color: var(--jc-panel-title) !important; font-size: 15px; margin: 0 0 8px; } .jc-dc-date { font-size: 12px; color: var(--jc-panel-text); opacity: .85; } .jc-dc-feast { font-weight: 700; color: var(--jc-panel-title); line-height: 1.3; margin: 4px 0 2px; } .jc-dc-season { font-size: 11px; color: var(--jc-accent); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; } .jc-dc-quote { font-style: italic; font-size: 13px; color: var(--jc-panel-text); border-left: 2px solid var(--jc-accent); margin: 8px 0; padding-left: 8px; } .jc-dc-readings { font-size: 12px; color: var(--jc-panel-text); line-height: 1.5; margin: 8px 0; } .jc-dc-readings .jc-dc-h { display: block; font-weight: 700; color: var(--jc-panel-title); margin-bottom: 2px; } .jc-dc-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--jc-accent) !important; } /* ============================================================ DAILY MASS READINGS PAGE (/daily-mass-readings/) ============================================================ */ .jc-readings-page .jc-rd-loading { color: var(--jc-panel-text); } .jc-rd-head { margin: 0 0 1.6em; padding-bottom: 1em; border-bottom: 2px solid var(--jc-accent); } .jc-rd-date { color: var(--jc-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; } .jc-rd-feast { margin: .15em 0; color: var(--jc-header-bg); } .jc-rd-season { color: var(--jc-panel-text); font-style: italic; } .jc-rd-quote { border-left: 3px solid var(--jc-accent); padding-left: 14px; margin: 1em 0 0; font-style: italic; color: var(--jc-panel-text); } .jc-rd-section { margin: 0 0 1.8em; } .jc-rd-label { color: var(--jc-accent); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin: 0 0 .1em; } .jc-rd-cite { font-weight: 700; color: var(--jc-header-bg); margin-bottom: .4em; } .jc-rd-text { line-height: 1.85; } .jc-rd-foot { margin-top: 2em; padding-top: 1em; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 13px; color: var(--jc-panel-text); } /* ============================================================ PALETTE PICKER WIDGET (floating, bottom-right) ============================================================ */ #jc-palette-picker { position: fixed; right: 18px; bottom: 18px; z-index: 99999; font-family: Lato, sans-serif; } #jc-palette-toggle { display: flex; align-items: center; gap: 8px; background: #ffffff; color: #222222; border: 1px solid rgba(0,0,0,.15); border-radius: 30px; padding: 9px 16px; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18); } #jc-palette-toggle:hover { background: #f5f5f5; } #jc-palette-toggle svg { width: 18px; height: 18px; } #jc-palette-menu { position: absolute; right: 0; bottom: 56px; background: #ffffff; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.20); padding: 8px; min-width: 224px; max-height: 70vh; overflow-y: auto; } #jc-palette-menu[hidden] { display: none; } .jc-pp-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #888; padding: 6px 10px 8px; } .jc-pp-item { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-radius: 8px; padding: 9px 10px; font-size: 14px; color: #222; text-align: left; cursor: pointer; } .jc-pp-item:hover { background: #f3f3f3; } .jc-pp-item.active { background: #eef1ff; font-weight: bold; } .jc-sws { display: inline-flex; flex: 0 0 auto; } .jc-sw { width: 16px; height: 16px; border-radius: 50%; display: inline-block; margin-left: -5px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); } .jc-sw:first-child { margin-left: 0; } .jc-pp-label { flex: 1; } @media print { #jc-palette-picker { display: none; } }