/* ================================================================ DARK MODE — Paroki Santo Yoseph Matraman (Compro Section) Activates when has class "dark". Dark palette mirrors the ORIGINAL design: Background : #0d0d0d / #111 / #000 Text : #fff + rgba(255,255,255,x) Accent : rgb(255, 122, 20) — orange Font : Chamberi (heading) + Cinzel (body) — same as light mode, no override ================================================================ */ /* ── Smooth transition for theme switch ─────────────────────── */ html { color-scheme: light; } html.dark { color-scheme: dark; } body, .breadcrumb-bar, .offcanvas__panel, .footer, .page-section, .page-section--alt, .page-hero { transition: background-color 0.28s ease, background 0.28s ease, border-color 0.28s ease, color 0.28s ease; } /* ================================================================ CSS VARIABLE OVERRIDES (dark = original palette) ================================================================ */ html.dark { /* Base backgrounds */ --ivory: #0d0d0d; --ivory-dark: #111111; --ivory-card: #1a1a1a; --ivory-border: rgba(255, 255, 255, 0.08); /* Gold → Orange (original accent) */ --gold: rgb(255, 122, 20); --gold-light: rgba(255, 122, 20, 0.85); --gold-dim: rgba(255, 122, 20, 0.22); /* Burgundy → Orange (original accent) */ --burgundy: rgb(255, 122, 20); --burgundy-light: rgba(255, 122, 20, 0.9); --burgundy-dim: rgba(255, 122, 20, 0.12); /* Text */ --text: #ffffff; --text-muted: rgba(255, 255, 255, 0.65); --text-faint: rgba(255, 255, 255, 0.42); --text-ghost: rgba(255, 255, 255, 0.25); /* Borders / shadows */ --border: rgba(255, 255, 255, 0.08); --border-gold: rgba(255, 122, 20, 0.3); --shadow: rgba(0, 0, 0, 0.4); --shadow-md: rgba(0, 0, 0, 0.65); } /* ================================================================ GLOBAL / BASE ================================================================ */ /* Body: keep EB Garamond consistent with light mode; remove parchment texture */ html.dark body { background-color: #0d0d0d; background-image: none; } /* ================================================================ DARK MODE TOGGLE BUTTON — base styles ================================================================ */ .dark-toggle { background: none; border: 1px solid var(--border-gold); cursor: pointer; color: var(--text-muted); font-size: 1.1rem; line-height: 1; padding: 5px 9px; border-radius: 4px; transition: border-color 0.2s, color 0.2s, background 0.2s; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .dark-toggle:hover { color: var(--burgundy); border-color: var(--burgundy); background: var(--burgundy-dim); } html.dark .dark-toggle { border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.65); } html.dark .dark-toggle:hover { border-color: rgb(255, 122, 20); color: rgb(255, 122, 20); background: rgba(255, 122, 20, 0.1); } /* ================================================================ BREADCRUMB BAR ================================================================ */ html.dark .breadcrumb-bar { background: rgba(8, 8, 8, 0.4); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-color: rgba(255, 122, 20, 0.28); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } html.dark .breadcrumb-bar__toggle { border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); } html.dark .breadcrumb-bar__toggle:hover { color: rgb(255, 122, 20); border-color: rgb(255, 122, 20); background: rgba(255, 122, 20, 0.1); } html.dark .breadcrumb-bar__link { color: rgba(255, 255, 255, 0.55); } html.dark .breadcrumb-bar__link:hover { color: rgb(255, 122, 20); } html.dark .breadcrumb-bar__item--current { color: rgba(255, 255, 255, 0.88); } html.dark .breadcrumb-bar__sep { color: rgba(255, 255, 255, 0.2); } /* ================================================================ OFFCANVAS DRAWER ================================================================ */ html.dark .offcanvas__backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } html.dark .offcanvas .offcanvas__panel { background: rgba(8, 8, 8, 0.45); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border-right: 1px solid rgba(255, 122, 20, 0.22); box-shadow: 4px 0 40px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.05); } html.dark .offcanvas .offcanvas__panel::before { content: none; } html.dark .offcanvas__close { color: rgba(255, 255, 255, 0.6); } html.dark .offcanvas__close:hover { color: rgb(255, 122, 20); opacity: 1; } html.dark .offcanvas__menu > ul > li { border-bottom-color: rgba(255, 122, 20, 0.12); } html.dark .offcanvas__menu > ul > li:first-child { border-top-color: rgba(255, 122, 20, 0.12); } html.dark .offcanvas__menu a { color: rgba(255, 255, 255, 0.8); } html.dark .offcanvas__menu a:hover { color: rgb(255, 122, 20); } html.dark .offcanvas__acc-toggle { color: rgba(255, 255, 255, 0.8); } html.dark .offcanvas__acc-toggle:hover { color: rgb(255, 122, 20); opacity: 1; } html.dark .offcanvas__acc-arrow { color: rgb(255, 122, 20); opacity: 0.75; } html.dark .offcanvas__submenu a { color: rgba(255, 255, 255, 0.5); } html.dark .offcanvas__submenu a:hover { color: rgb(255, 122, 20); } html.dark .offcanvas__btn { background: rgb(255, 122, 20) !important; color: #fff !important; } html.dark .offcanvas__btn:hover { background: rgba(255, 150, 60, 1) !important; } html.dark .offcanvas__btn::before { display: none !important; } /* ================================================================ BUTTON PRIMARY ================================================================ */ html.dark .button-primary { color: #fff; background-color: transparent; } html.dark .button-primary:hover { color: #fff; } html.dark .button-primary::before { background: rgb(255, 122, 20); } /* ================================================================ SECTION 2 / JADWAL MISA (Homepage) ================================================================ */ /* Jadwal misa cards: white on dark (original style) */ html.dark .jadwal__card { background: #ffffff !important; border-color: transparent !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } html.dark .jadwal__card:hover { border-color: #1a1a1a !important; transform: translateY(-4px); } html.dark .jadwal__hari { color: rgba(0, 0, 0, 0.4) !important; } html.dark .jadwal__waktu { color: #000000 !important; } html.dark .jadwal__nama { color: #1a1a1a !important; } html.dark .jadwal__item { border-bottom-color: rgba(0, 0, 0, 0.08) !important; } html.dark .jadwal__card--highlight { background: rgb(255, 122, 20) !important; border-color: transparent !important; } html.dark .jadwal__card--highlight .jadwal__hari, html.dark .jadwal__card--highlight .jadwal__waktu, html.dark .jadwal__card--highlight .jadwal__nama { color: rgba(255, 255, 255, 0.92) !important; } html.dark .jadwal__card--highlight .jadwal__item { border-bottom-color: rgba(255, 255, 255, 0.15) !important; } html.dark .jadwal__card--highlight:hover { border-color: rgba(255, 255, 255, 0.3) !important; } /* ================================================================ PAGE HERO (sub-page banners) ================================================================ */ html.dark .page-hero { background-color: #0a0a0a !important; } html.dark .page-hero::after { background: linear-gradient( to top, #0a0a0a 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100% ) !important; } html.dark .page-hero__eyebrow { color: rgb(255, 122, 20) !important; } html.dark .page-hero__eyebrow::after { display: none; } html.dark .page-hero__title { color: #ffffff !important; } html.dark .page-hero__accent { color: rgba(255, 255, 255, 0.35) !important; font-style: italic; } /* ================================================================ PAGE SECTIONS (sub-pages) ================================================================ */ html.dark .page-section { background: #0d0d0d !important; } html.dark .page-section--alt { background: #111111 !important; } /* Ornamental gold line between sections → use orange tint */ html.dark .page-section + .page-section::before, html.dark .page-section--alt + .page-section::before, html.dark .page-section + .page-section--alt::before { background: linear-gradient( to right, transparent, rgba(255, 122, 20, 0.25), transparent ); } html.dark .page-label { color: rgba(255, 255, 255, 0.3); letter-spacing: 0.18em; } html.dark .page-year { color: rgba(255, 255, 255, 0.07); } html.dark .page-body p { color: rgba(255, 255, 255, 0.6); } html.dark .page-source { color: rgba(255, 255, 255, 0.2); border-top-color: rgba(255, 255, 255, 0.06); } html.dark .page-section-title { color: rgba(255, 255, 255, 0.25); } /* ================================================================ TIMELINE (Sejarah sub-page) ================================================================ */ html.dark .timeline__item { border-top-color: rgba(255, 255, 255, 0.08); } html.dark .timeline__year { color: rgb(255, 122, 20); } html.dark .timeline__title { color: #ffffff; } html.dark .timeline__text { color: rgba(255, 255, 255, 0.6); } /* ================================================================ SEJARAH SECTION ================================================================ */ html.dark .sejarah__quote { border-left-color: rgb(255, 122, 20); } /* ================================================================ VISI-MISI ================================================================ */ html.dark .visi-statement__text { border-left-color: rgb(255, 122, 20); } html.dark .misi-pillar { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.08) !important; } html.dark .misi-pillar:hover { background: rgba(255, 122, 20, 0.08) !important; border-color: rgba(255, 122, 20, 0.2) !important; } html.dark .misi-pillar__name { color: rgb(255, 122, 20) !important; } html.dark .values-list { background: rgba(255, 255, 255, 0.06) !important; } html.dark .value-item { background: #1a1a1a !important; } /* ================================================================ PASTOR / DEWAN PAROKI CARDS ================================================================ */ html.dark .pastor-card { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html.dark .pastor-card:hover { border-color: rgba(255, 122, 20, 0.35) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important; } html.dark .pastor-card__name { color: #ffffff !important; } html.dark .pastor-img--placeholder, html.dark .pastor-card__img--placeholder { background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.25) !important; } html.dark .dewan-grid .dewan-card { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html.dark .dewan-grid .dewan-card:hover { border-color: rgba(255, 122, 20, 0.35) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important; } html.dark .dewan-card__img--placeholder { background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.25) !important; } html.dark .dewan-card__nama { color: #ffffff !important; } /* ================================================================ PETA PAROKI / MAP ================================================================ */ html.dark .map-info__item { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html.dark .kontak-jp { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html.dark .kontak-jp__sep { background: repeating-linear-gradient( to right, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.12) 2px, transparent 2px, transparent 6px ) !important; } html.dark .kontak-jp__row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* ================================================================ BERITA PAGES ================================================================ */ html.dark .berita-card__link { background: #1a1a1a !important; } html.dark .berita-card__link:hover { background: rgba(255, 255, 255, 0.04) !important; } html.dark .berita-grid { background: rgba(255, 255, 255, 0.06) !important; } html.dark .berita-filter__btn { border-color: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.45) !important; } html.dark .berita-filter__btn:hover { color: rgba(255, 255, 255, 0.85) !important; border-color: rgba(255, 255, 255, 0.3) !important; } html.dark .berita-filter__btn--active { border-color: rgb(255, 122, 20) !important; color: rgb(255, 122, 20) !important; background: rgba(255, 122, 20, 0.1) !important; } /* ================================================================ PENGUMUMAN CARDS ================================================================ */ html.dark .pengumuman-pin { background: rgba(255, 122, 20, 0.08) !important; border-color: rgba(255, 122, 20, 0.18) !important; } /* ================================================================ UNDUHAN ================================================================ */ html.dark .unduhan-item__name small { color: rgba(255, 255, 255, 0.35) !important; } html.dark .unduhan-item__dl { border-color: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.5) !important; } html.dark .unduhan-item__dl:hover { color: rgb(255, 122, 20) !important; border-color: rgb(255, 122, 20) !important; background: rgba(255, 122, 20, 0.1) !important; } /* ================================================================ KONTAK PAGE ================================================================ */ html.dark .kontak-card { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; } html.dark .kontak-form__input { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; } html.dark .kontak-form__input::placeholder { color: rgba(255, 255, 255, 0.25) !important; } html.dark .kontak-form__input:focus { border-color: rgb(255, 122, 20) !important; background: rgba(255, 122, 20, 0.08) !important; } html.dark .kontak-form__submit { background: rgb(255, 122, 20) !important; color: #fff !important; } html.dark .kontak-form__submit:hover { background: rgba(255, 150, 60, 1) !important; } /* ================================================================ RENUNGAN ================================================================ */ html.dark .renungan-featured-section { background: #111111 !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html.dark .renungan-row:hover { background: rgba(255, 255, 255, 0.04) !important; } html.dark .renungan-row:hover .renungan-row__title { color: rgb(255, 122, 20) !important; } html.dark .renungan-row:hover .renungan-row__arrow { color: rgb(255, 122, 20) !important; } html.dark .renungan-detail__scripture { background: rgba(255, 122, 20, 0.07) !important; border-left-color: rgb(255, 122, 20) !important; } /* ================================================================ SAKRAMEN ================================================================ */ html.dark .sak-intro-section { background: #0d0d0d !important; } html.dark .sak-content-section { background: #111111 !important; border-top-color: rgba(255, 255, 255, 0.08) !important; } html.dark .sak-content-section--alt { background: #0d0d0d !important; } html.dark .sak-content-num { color: rgba(255, 255, 255, 0.05) !important; } /* ── CTA MISA ── */ html.dark .sak-cta { background: #0d0d0d !important; border-top-color: rgba(255, 255, 255, 0.08) !important; } html.dark .sak-cta__inner { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 122, 20, 0.2) !important; } html.dark .sak-cta__inner::before { background: radial-gradient(circle, rgba(255, 122, 20, 0.08) 0%, transparent 70%) !important; } html.dark .sak-cta__eyebrow { color: rgba(255, 255, 255, 0.4) !important; } html.dark .sak-cta__title { color: #ffffff !important; } html.dark .sak-cta__btn { border-color: rgba(255, 122, 20, 0.35) !important; color: rgb(255, 122, 20) !important; } html.dark .sak-cta__btn:hover { background: rgba(255, 122, 20, 0.1) !important; border-color: rgb(255, 122, 20) !important; } /* ================================================================ FOOTER ================================================================ */ html.dark .footer { background: #000000 !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; } html.dark .footer__logo { color: #ffffff !important; } html.dark .footer__tagline { color: rgba(255, 255, 255, 0.3) !important; } html.dark .footer__nav-heading { color: rgba(255, 255, 255, 0.25) !important; } html.dark .footer__nav-link { color: rgba(255, 255, 255, 0.55) !important; } html.dark .footer__nav-link:hover { color: #ffffff !important; } html.dark .footer__bottom { border-top-color: rgba(255, 255, 255, 0.06) !important; } html.dark .footer__copy, html.dark .footer__address { color: rgba(255, 255, 255, 0.2) !important; } html.dark .footer__copy-link { color: rgba(255, 255, 255, 0.35) !important; } html.dark .footer__copy-link:hover { color: rgba(255, 255, 255, 0.65) !important; } html.dark .footer__social-link { border-color: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.45) !important; } html.dark .footer__social-link:hover { color: rgb(255, 122, 20) !important; border-color: rgba(255, 122, 20, 0.4) !important; } /* Footer jadwal misa mini-card */ html.dark .footer-misa-card { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 122, 20, 0.18) !important; } html.dark .footer-misa-card__icon { background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.35) !important; } html.dark .footer-misa-card__title { color: rgba(255, 255, 255, 0.88) !important; } html.dark .footer-misa-card__sub { color: rgba(255, 255, 255, 0.38) !important; } html.dark .footer-misa-card__row { border-bottom-color: rgba(255, 255, 255, 0.07) !important; } html.dark .footer-misa-card__day { color: rgba(255, 255, 255, 0.48) !important; } html.dark .footer-misa-card__sep { background: repeating-linear-gradient( to right, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.12) 2px, transparent 2px, transparent 6px ) !important; } html.dark .footer-misa-card__time { color: rgba(255, 255, 255, 0.85) !important; } /* ================================================================ BERITA DETAIL / RENUNGAN DETAIL — PROSE ================================================================ */ html.dark .prose blockquote { background: rgba(255, 122, 20, 0.08) !important; border-left-color: rgb(255, 122, 20) !important; } html.dark .prose th { background: rgba(255, 255, 255, 0.05) !important; } /* ================================================================ MAP IFRAME — invert in dark mode for readability ================================================================ */ html.dark .map-embed iframe, html.dark .kontak-map iframe { filter: invert(90%) hue-rotate(180deg); }