html {
font-size: 14px;
}
/* Theme variables (set by layout class on ) */
.jj-theme-light {
--jj-paper-bg: #fffdf8;
--jj-red-letters-color: #c21212;
--jj-entry-separator: rgba(0, 0, 0, 0.12);
}
.jj-theme-dark {
--jj-paper-bg: #1d1d1d;
--jj-red-letters-color: #ff004d;
--jj-entry-separator: rgba(255, 255, 255, 0.18);
}
/* Bootstrap/Bootswatch dark mode: ensure native form controls (date/search/select) render with dark chrome,
and that form inputs match the surrounding theme instead of staying white. */
[data-bs-theme="dark"] {
color-scheme: dark;
}
.jj-theme-dark .form-control,
.jj-theme-dark .form-select,
.jj-theme-dark .form-control:focus,
.jj-theme-dark .form-select:focus,
.jj-theme-dark .form-check-input {
background-color: var(--bs-body-bg, #212529);
color: var(--bs-body-color, #f8f9fa);
border-color: var(--bs-border-color, rgba(255, 255, 255, 0.15));
}
.jj-theme-dark .form-control::placeholder {
color: var(--bs-secondary-color, rgba(255, 255, 255, 0.65));
opacity: 1;
}
.jj-theme-dark .form-control:disabled,
.jj-theme-dark .form-select:disabled,
.jj-theme-dark .form-check-input:disabled {
background-color: var(--bs-secondary-bg, rgba(255, 255, 255, 0.08));
color: var(--bs-secondary-color, rgba(255, 255, 255, 0.65));
}
/* Tom Select (tom-select.bootstrap5.min.css) does not fully respect Bootstrap 5.3 dark mode variables.
Ensure dropdown text is readable on dark Bootswatch themes. */
[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper.single .ts-control,
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control,
[data-bs-theme="dark"] .ts-dropdown {
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .ts-wrapper .ts-control input {
color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ts-dropdown .option,
[data-bs-theme="dark"] .ts-dropdown [data-selectable] {
color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ts-dropdown .active,
[data-bs-theme="dark"] .ts-dropdown .option.active,
[data-bs-theme="dark"] .ts-dropdown [data-selectable].active {
background-color: var(--bs-tertiary-bg);
color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ts-dropdown .selected,
[data-bs-theme="dark"] .ts-dropdown .option.selected,
[data-bs-theme="dark"] .ts-dropdown [data-selectable].selected {
background-color: var(--bs-secondary-bg);
color: var(--bs-body-color);
}
/* Prevent centered layout "jump" between pages with/without a vertical scrollbar. */
html {
scrollbar-gutter: stable;
overflow-y: scroll; /* fallback for browsers without scrollbar-gutter support */
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* Review "journal book" styling */
.journal-paper {
background: var(--jj-paper-bg, #fffdf8);
border: 1px solid rgba(0,0,0,.08);
border-radius: 12px;
box-shadow: 0 12px 28px rgba(0,0,0,.08);
padding: 1.25rem;
}
@media (min-width: 768px) {
.journal-paper {
padding: 2rem;
}
}
.journal-entry-body {
line-height: 1.7;
}
.journal-entry-body p {
margin-bottom: .75rem;
}
.journal-entry-separator {
border: 0;
border-top: 1px solid #7d7d7d;
margin: 1.25rem 0;
}
.jj-theme-dark .journal-entry-separator {
border-top: 1px solid #afafaf;
}
/* Inserted scripture block styling */
.scripture-block {
background: var(--jj-paper-bg, #fffdf8);
border: 1px solid rgba(0,0,0,.08);
border-left: 4px solid rgba(13,110,253,.55); /* bootstrap primary-ish */
border-radius: 10px;
padding: .75rem .9rem;
margin: .75rem 0;
}
.scripture-ref {
margin-bottom: .5rem;
}
.scripture-text {
margin: 0;
padding-left: .75rem;
}
.scripture-text p {
margin-bottom: .5rem;
}
.scripture-text sup {
font-size: .75em;
top: -.3em;
}
/* Red letter styling (works in normal pages AND inside Quill editor).
Quill's snow CSS loads after site.css, so we bump specificity for .ql-editor. */
.red-letters,
.ql-redletters-on,
.ql-editor .red-letters,
.ql-editor .ql-redletters,
.ql-editor .ql-redletters-on {
color: var(--jj-red-letters-color, #c21212);
}
/* Category color utility classes (use for icon tint, etc.) */
.cat-color-slate { color: #6c757d; }
.cat-color-blue { color: #0d6efd; }
.cat-color-light-blue { color: #66b2ff; }
.cat-color-navy { color: #0a2a66; }
.cat-color-indigo { color: #6610f2; }
.cat-color-purple { color: #6f42c1; }
.cat-color-violet { color: #8b5cf6; }
.cat-color-pink { color: #d63384; }
.cat-color-rose { color: #f43f5e; }
.cat-color-red { color: #dc3545; }
.cat-color-maroon { color: #7f1d1d; }
.cat-color-orange { color: #fd7e14; }
.cat-color-amber { color: #f59e0b; }
.cat-color-yellow { color: #ffc107; }
.cat-color-gold { color: #d4af37; }
.cat-color-green { color: #198754; }
.cat-color-lime { color: #84cc16; }
.cat-color-mint { color: #34d399; }
.cat-color-teal { color: #20c997; }
.cat-color-cyan { color: #0dcaf0; }
.cat-color-sky { color: #38bdf8; }
.cat-color-dark { color: #212529; }
.jj-theme-dark .cat-color-slate { color: #afafaf; }
.jj-theme-dark .cat-color-dark { color: #fff; }
.jj-theme-dark .cat-color-navy { color: #0adaff; }
.jj-theme-dark .cat-color-indigo { color: #ff10f2; }
.jj-theme-dark .cat-color-purple { color: #ff42f1; }
.jj-theme-dark .cat-color-maroon { color: #ff1d1d; }
/* Subtle flip transition */
.journal-paper {
will-change: transform;
}
.journal-flip-in-prev {
animation: journalFlipInPrev 160ms ease-out;
transform-origin: left center;
}
.journal-flip-in-next {
animation: journalFlipInNext 160ms ease-out;
transform-origin: right center;
}
.journal-flip-out-prev {
animation: journalFlipOutPrev 110ms ease-in;
transform-origin: right center;
}
.journal-flip-out-next {
animation: journalFlipOutNext 110ms ease-in;
transform-origin: left center;
}
/* Keep opacity at 1 to avoid the "blank gap" between navigations; rely on subtle transform. */
@keyframes journalFlipInPrev {
from { transform: perspective(900px) rotateY(-6deg) translateX(-4px); }
to { transform: perspective(900px) rotateY(0deg) translateX(0); }
}
@keyframes journalFlipInNext {
from { transform: perspective(900px) rotateY(6deg) translateX(4px); }
to { transform: perspective(900px) rotateY(0deg) translateX(0); }
}
@keyframes journalFlipOutPrev {
from { transform: perspective(900px) rotateY(0deg) translateX(0); }
to { transform: perspective(900px) rotateY(5deg) translateX(5px); }
}
@keyframes journalFlipOutNext {
from { transform: perspective(900px) rotateY(0deg) translateX(0); }
to { transform: perspective(900px) rotateY(-5deg) translateX(-5px); }
}