/* ========================================================================= Biblr v2.0 — main.css Advanced modern Bible study theme. Light/dark mode via [data-theme] on (toggled by JS + cookie). All color tokens live here; bible-study.css can override for the warm-parchment aesthetic applied on devotional / study-plan pages. ========================================================================= */ /* ---- Light mode tokens -------------------------------------------------- */ :root, [data-theme="light"] { --biblr-ink: #171219; --biblr-ink-muted: rgba(23, 18, 25, 0.62); --biblr-paper: #FFFDF6; --biblr-paper-card: color-mix(in srgb, var(--biblr-paper) 96%, black 2%); --biblr-paper-raised: #FFFFFF; --biblr-accent-a: #FF4FA3; --biblr-accent-b: #FFE94D; --biblr-accent-c: #3E8CFF; --biblr-accent-a-ink: #fff; --biblr-accent-b-ink: var(--biblr-ink); --biblr-accent-c-ink: #fff; --biblr-error: #D6335A; --biblr-error-bg: #FDE3EA; --biblr-success: #1E8A5E; --biblr-success-bg: #D6F4EA; --biblr-border: rgba(23, 18, 25, 0.13); --biblr-border-strong: rgba(23, 18, 25, 0.38); --biblr-shadow-sm: 0 2px 8px rgba(23, 18, 25, 0.07); --biblr-shadow-md: 0 8px 24px rgba(23, 18, 25, 0.10); --biblr-shadow-lg: 0 20px 48px rgba(23, 18, 25, 0.13); --biblr-shadow-flat: 5px 5px 0 var(--biblr-ink); --biblr-shadow-flat-lg:8px 8px 0 var(--biblr-ink); --biblr-verse-bg: rgba(242, 201, 76, 0.18); --biblr-verse-border: rgba(242, 201, 76, 0.55); --biblr-progress-bg: rgba(23, 18, 25, 0.10); --biblr-progress-fill: var(--biblr-accent-a); --biblr-header-bg: transparent; } /* ---- Dark mode tokens --------------------------------------------------- */ /* These are the static fallback values used before any admin color preset is saved. Once output_theme_css() writes :root:root[data-theme="dark"] with PHP-derived dark surfaces, these values are overridden. */ [data-theme="dark"], .biblr-dark { --biblr-ink: #F0EDE8; --biblr-ink-muted: rgba(240, 237, 232, 0.60); --biblr-paper: #12100F; --biblr-paper-card: #1C1917; --biblr-paper-raised: #242120; --biblr-accent-a: #FF6EB5; --biblr-accent-b: #FFE94D; --biblr-accent-c: #5EA8FF; --biblr-accent-a-ink: #12100F; --biblr-accent-b-ink: #12100F; --biblr-accent-c-ink: #12100F; --biblr-error: #FF7096; --biblr-error-bg: rgba(214, 51, 90, 0.20); --biblr-success: #4CD9A0; --biblr-success-bg: rgba(30, 138, 94, 0.20); --biblr-border: rgba(240, 237, 232, 0.11); --biblr-border-strong: rgba(240, 237, 232, 0.28); --biblr-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --biblr-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42); --biblr-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); --biblr-shadow-flat: 5px 5px 0 rgba(240, 237, 232, 0.22); --biblr-shadow-flat-lg:8px 8px 0 rgba(240, 237, 232, 0.18); --biblr-verse-bg: rgba(242, 201, 76, 0.11); --biblr-verse-border: rgba(242, 201, 76, 0.38); --biblr-progress-bg: rgba(240, 237, 232, 0.10); --biblr-progress-fill: var(--biblr-accent-a); } /* Derived tokens that auto-update based on whatever ink/paper/accent values are active (whether from the fallback above or from the admin override). These use color-mix() so they always stay relative to the active palette. */ [data-theme="dark"], .biblr-dark { --biblr-ink-muted: color-mix(in srgb, var(--biblr-ink) 60%, transparent); --biblr-border: color-mix(in srgb, var(--biblr-ink) 11%, transparent); --biblr-border-strong: color-mix(in srgb, var(--biblr-ink) 28%, transparent); --biblr-verse-bg: color-mix(in srgb, var(--biblr-accent-b) 11%, transparent); --biblr-verse-border: color-mix(in srgb, var(--biblr-accent-b) 38%, transparent); --biblr-progress-fill: var(--biblr-accent-a); } /* ---- Typography & layout constants -------------------------------------- */ :root { --biblr-font-display: "Arvo", Georgia, serif; --biblr-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --biblr-font-mono: "JetBrains Mono", "Fira Code", monospace; --biblr-radius-xs: 6px; --biblr-radius-sm: 10px; --biblr-radius-md: 16px; --biblr-radius-lg: 22px; --biblr-radius-xl: 32px; --biblr-container: 1160px; --biblr-content: 720px; --header-h: 66px; } /* ---- Reset / base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; font-family: var(--biblr-font-body); color: var(--biblr-ink); background-color: var(--biblr-paper); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color 0.3s ease, color 0.3s ease; } img { max-width: 100%; display: block; height: auto; } a { color: var(--biblr-ink); } a:hover { text-decoration-thickness: 2px; } ul { padding: 0; margin: 0; list-style: none; } h1, h2, h3, h4, h5 { font-family: var(--biblr-font-display); color: var(--biblr-ink); line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; text-wrap: balance; letter-spacing: -0.02em; } p { margin: 0 0 1em; } button { font-family: inherit; cursor: pointer; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--biblr-accent-c); outline-offset: 3px; border-radius: 4px; } .biblr-container { max-width: var(--biblr-container); margin: 0 auto; padding: 0 24px; } .screen-reader-text { position: absolute; left: -9999px; } section { padding: 80px 0; } @media (max-width: 640px) { section { padding: 56px 0; } } /* ========================================================================= Global UI components ========================================================================= */ .biblr-eyebrow { display: inline-block; font-family: var(--biblr-font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--biblr-ink); background: var(--biblr-accent-c); color: var(--biblr-accent-c-ink); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; } .biblr-section-header { margin-bottom: 48px; } .biblr-section-header h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 10px; } .biblr-section-header p { color: var(--biblr-ink-muted); max-width: 54ch; } .biblr-section-header--split { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .biblr-section-header--split h2 { margin-bottom: 0; } /* Section tint / width utilities */ .biblr-section--tint { background: var(--biblr-main-bg, var(--biblr-paper-card)); border-top: 1px solid var(--biblr-border); border-bottom: 1px solid var(--biblr-border); } .biblr-section--narrow { padding: 0 0 48px; } .biblr-section--narrow .biblr-container { max-width: 760px; } /* Buttons */ .biblr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 2px solid transparent; background: var(--biblr-paper-card); color: var(--biblr-ink); transition: transform 0.15s ease, background 0.15s ease; text-decoration: none; } .biblr-btn:hover { transform: translateY(-1px); text-decoration: none; } .biblr-btn:active { transform: translateY(0); } .biblr-btn--primary { background: var(--biblr-accent-b); color: var(--biblr-accent-b-ink); border-color: transparent; } .biblr-btn--primary:hover { color: var(--biblr-accent-b-ink); } .biblr-btn--dark { background: var(--biblr-ink); color: var(--biblr-paper); border-color: transparent; } .biblr-btn--dark:hover { color: var(--biblr-paper); } .biblr-btn--outline { background: transparent; border-color: var(--biblr-border-strong); color: var(--biblr-ink); box-shadow: none; } .biblr-btn--sm { padding: 8px 16px; font-size: 13px; } /* Reference badge */ .biblr-reference-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--biblr-verse-bg); border: 1px solid var(--biblr-verse-border); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--biblr-ink); } .biblr-reference-icon { font-size: 14px; } /* Tags */ .biblr-tags { margin: 24px 0; display: flex; gap: 8px; flex-wrap: wrap; } .biblr-tags a { padding: 5px 12px; background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; transition: background 0.15s ease, border-color 0.15s ease; } .biblr-tags a:hover { background: var(--biblr-accent-b); border-color: transparent; color: var(--biblr-accent-b-ink); } /* Scroll-reveal */ [data-biblr-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; } [data-biblr-reveal].is-visible { opacity: 1; transform: none; } /* ========================================================================= Reading progress bar (single post / devotional) ========================================================================= */ .biblr-reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--biblr-progress-fill); z-index: 200; transition: width 0.1s linear; border-radius: 0 2px 2px 0; } /* ========================================================================= Header ========================================================================= */ .biblr-header { position: sticky; top: 0; z-index: 100; background: var(--biblr-header-bg); border-bottom: 1px solid var(--biblr-border); } .biblr-header-inner { position: relative; display: flex; align-items: stretch; justify-content: space-between; padding: 14px 20px; max-width: var(--biblr-container); margin: 0 auto; gap: 24px; } /* Logo */ .biblr-logo { display: flex; align-items: center; align-self: center; gap: 10px; font-family: var(--biblr-font-display); font-weight: 700; font-size: 20px; color: var(--biblr-header-fg, var(--biblr-ink)); text-decoration: none; flex-shrink: 0; } .biblr-logo:hover { text-decoration: none; } .biblr-logo img { width: 36px; height: 36px; border-radius: 10px; border: 2px solid var(--biblr-border); background: var(--biblr-accent-b); padding: 3px; object-fit: contain; } /* Nav cluster — groups the primary nav with the dark-mode toggle and app CTA into a single flex slot, mirroring wellmar's 3-slot header (brand/nav/toggle) */ .biblr-nav-cluster { display: flex; align-items: center; gap: 10px; } /* Primary nav — bleeds past .biblr-header-inner's own vertical padding so hover/active items form a flush, full-bar-height block (mirrors wellmar's .site-nav negative-margin trick) instead of a small floating pill. */ .biblr-primary-menu { display: flex; align-items: stretch; align-self: stretch; margin: -14px 0; } .biblr-primary-menu > ul { display: flex; gap: 4px; align-items: stretch; } .biblr-primary-menu li { display: flex; } .biblr-primary-menu a { display: inline-flex; align-items: center; color: var(--biblr-header-fg, var(--biblr-ink)); font-weight: 600; font-size: 14px; text-decoration: none; padding: 0 14px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease; } .biblr-primary-menu a:hover { background: var(--biblr-border); border-radius: 0; } .biblr-primary-menu .current-menu-item > a, .biblr-primary-menu .current_page_item > a { background: var(--biblr-ink); color: var(--biblr-paper); font-weight: 700; border-radius: 0; } /* App CTA — flush full-height block like the nav items, riding the same bleed */ .biblr-nav-cluster .biblr-nav-cta { align-self: stretch; margin: -14px 0; display: inline-flex; align-items: center; border-radius: 0; padding: 0 18px; } .biblr-nav-cluster .biblr-nav-cta:hover { transform: none; } /* Dark mode toggle */ .biblr-dark-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--biblr-border); background: var(--biblr-paper-card); font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; cursor: pointer; } .biblr-dark-toggle:hover { background: var(--biblr-accent-b); border-color: transparent; } /* Hamburger */ .biblr-nav-toggle { display: none; background: none; border: none; width: 40px; height: 40px; position: relative; flex-shrink: 0; } .biblr-nav-toggle span { position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 2px; background: var(--biblr-header-fg, var(--biblr-ink)); transition: transform 0.2s ease, opacity 0.2s ease; } .biblr-nav-toggle span:nth-child(1) { top: 13px; } .biblr-nav-toggle span:nth-child(2) { top: 19px; } .biblr-nav-toggle span:nth-child(3) { top: 25px; } body.biblr-nav-open .biblr-nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.biblr-nav-open .biblr-nav-toggle span:nth-child(2) { opacity: 0; } body.biblr-nav-open .biblr-nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 860px) { .biblr-nav-toggle { display: flex; align-items: center; justify-content: center; } .biblr-primary-menu { position: fixed; inset: var(--header-h) 0 0; flex-direction: column; align-items: stretch; align-self: auto; margin: 0; background: var(--biblr-paper); padding: 24px; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease; overflow-y: auto; } .biblr-primary-menu.is-open { opacity: 1; pointer-events: auto; transform: none; } .biblr-primary-menu > ul { flex-direction: column; gap: 4px; } .biblr-primary-menu a { color: var(--biblr-ink); font-size: 17px; padding: 12px 16px; border-radius: var(--biblr-radius-sm); } .biblr-primary-menu a:hover { background: var(--biblr-border); } .biblr-primary-menu .current-menu-item > a, .biblr-primary-menu .current_page_item > a { background: var(--biblr-ink); color: var(--biblr-paper); } .biblr-nav-cluster .biblr-nav-cta { display: none; } } /* ========================================================================= Main-column verse strip — flush banner at the top of .biblr-main ========================================================================= */ .biblr-main-verse { color: var(--biblr-ink-muted); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; padding: 12px 24px; text-align: center; margin-bottom: 24px; } .biblr-main-verse p { margin: 0; } /* ========================================================================= Breadcrumbs ========================================================================= */ .biblr-breadcrumbs { padding: 16px 0 0; } .biblr-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 600; color: var(--biblr-ink-muted); } .biblr-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; } .biblr-breadcrumbs a { color: var(--biblr-ink-muted); text-decoration: none; } .biblr-breadcrumbs a:hover { color: var(--biblr-ink); text-decoration: underline; } /* ========================================================================= Hero ========================================================================= */ .biblr-hero { position: relative; padding: 72px 0 80px; overflow: hidden; } .biblr-hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--biblr-accent-b) 22%, transparent), transparent 42%), radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--biblr-accent-c) 14%, transparent), transparent 38%); } .biblr-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 48px; align-items: center; } .biblr-hero-verse-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--biblr-verse-bg); border: 1px solid var(--biblr-verse-border); border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 22px; color: var(--biblr-ink); } .biblr-hero-heading { font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-bottom: 20px; line-height: 1.06; } .biblr-hero-subheading { font-size: 17px; color: var(--biblr-ink-muted); max-width: 46ch; margin-bottom: 36px; line-height: 1.65; } .biblr-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 32px; } .biblr-hero-image { position: relative; display: flex; justify-content: center; align-items: center; background: none; } .biblr-hero-image img { background: none; border: none; outline: none; box-shadow: none; border-radius: 0; max-height: 600px; width: auto; object-fit: contain; } @media (max-width: 900px) { .biblr-hero-inner { grid-template-columns: 1fr; text-align: center; } .biblr-hero-subheading { margin-inline: auto; } .biblr-hero-actions { justify-content: center; } } @media (max-width: 640px) { .biblr-hero { padding: 48px 0 56px; } } /* Store badges */ .biblr-store-badges { display: flex; flex-wrap: wrap; gap: 12px; } .store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: var(--biblr-radius-md); background: var(--biblr-ink); color: var(--biblr-paper); font-weight: 700; font-size: 14px; box-shadow: var(--biblr-shadow-md); transition: transform 0.15s ease, box-shadow 0.15s ease; text-decoration: none; } .store-badge:hover { color: var(--biblr-paper); transform: translateY(-2px); box-shadow: var(--biblr-shadow-lg); text-decoration: none; } /* ========================================================================= Verse of the Day widget ========================================================================= */ .biblr-votd { background: var(--biblr-verse-bg); border: 1px solid var(--biblr-verse-border); border-radius: var(--biblr-radius-lg); padding: 28px 32px; position: relative; overflow: hidden; } .biblr-votd::before { content: "\201C"; position: absolute; top: -16px; left: 16px; font-family: var(--biblr-font-display); font-size: 120px; line-height: 1; color: color-mix(in srgb, var(--biblr-accent-b) 55%, transparent); pointer-events: none; } .biblr-votd-text { position: relative; font-family: var(--biblr-font-display); font-size: clamp(1.1rem, 2.2vw, 1.45rem); font-style: italic; line-height: 1.55; margin-bottom: 16px; color: var(--biblr-ink); } .biblr-votd-ref { font-size: 13px; font-weight: 700; color: var(--biblr-ink-muted); letter-spacing: 0.06em; text-transform: uppercase; } /* ========================================================================= Stats band ========================================================================= */ .biblr-stats-band { padding: 48px 0; } .biblr-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .biblr-stat { background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); border-radius: var(--biblr-radius-md); padding: 24px 20px; text-align: center; box-shadow: var(--biblr-shadow-sm); } .biblr-stat-value { font-family: var(--biblr-font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; } .biblr-stat-label { font-size: 13px; font-weight: 600; color: var(--biblr-ink-muted); margin-top: 4px; letter-spacing: 0.03em; } /* ========================================================================= Features grid ========================================================================= */ .biblr-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .biblr-feature-card { background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); border-top: 4px dashed var(--biblr-accent-b); border-radius: var(--biblr-radius-lg); padding: 28px 24px; transition: transform 0.2s ease, border-color 0.2s ease; } .biblr-feature-card:hover { transform: translateY(-2px); } .biblr-feature-card:nth-child(4n+2) { border-top-color: var(--biblr-accent-a); } .biblr-feature-card:nth-child(4n+3) { border-top-color: var(--biblr-accent-c); } .biblr-feature-card:nth-child(4n+4) { border-top-color: var(--biblr-accent-a); } .biblr-feature-icon { width: 50px; height: 50px; border-radius: var(--biblr-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; background: var(--biblr-accent-b); } .biblr-feature-card:nth-child(4n+2) .biblr-feature-icon { background: var(--biblr-accent-a); } .biblr-feature-card:nth-child(4n+3) .biblr-feature-icon { background: var(--biblr-accent-c); } .biblr-feature-card:nth-child(4n+4) .biblr-feature-icon { background: var(--biblr-accent-a); } .biblr-feature-card h3 { font-size: 16px; margin-bottom: 8px; } .biblr-feature-card p { color: var(--biblr-ink-muted); margin: 0; font-size: 13px; } /* Feature card reused as a linked post preview (e.g. recent blog posts) */ .biblr-feature-card--link { text-decoration: none; display: block; } .biblr-feature-card--link .biblr-post-meta { margin-bottom: 8px; } .biblr-feature-card--link-thumb { border-radius: 12px; margin-bottom: 16px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; } @media (max-width: 1100px) { .biblr-features-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .biblr-features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .biblr-features-grid { grid-template-columns: 1fr; } } /* ========================================================================= Showcase "How it works" — 2-column grid of dashed-border step cards ========================================================================= */ .biblr-showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; } @media (max-width: 640px) { .biblr-showcase-grid { grid-template-columns: 1fr; } } .biblr-showcase-card { border: 2px dashed var(--biblr-accent-b); border-radius: var(--biblr-radius-lg); padding: 24px; background: var(--biblr-paper-card); } .biblr-showcase-card:nth-child(3n+2) { border-color: var(--biblr-accent-a); } .biblr-showcase-card:nth-child(3n+3) { border-color: var(--biblr-accent-c); } .biblr-showcase-card-media { margin-bottom: 16px; } .biblr-showcase-card-media img { width: 100%; border-radius: var(--biblr-radius-md); } .biblr-showcase-step { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--biblr-accent-b); color: var(--biblr-accent-b-ink); border-radius: 999px; margin-bottom: 14px; } .biblr-showcase-card p { color: var(--biblr-ink-muted); } .biblr-showcase-points { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .biblr-showcase-points li { position: relative; padding-left: 28px; font-size: 14px; font-weight: 500; } .biblr-showcase-points li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--biblr-accent-a); color: var(--biblr-accent-a-ink); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ========================================================================= Screenshot carousel ========================================================================= */ .biblr-carousel { position: relative; margin-top: 40px; } .biblr-carousel-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 16px; scrollbar-width: none; } .biblr-carousel-track::-webkit-scrollbar { display: none; } .biblr-carousel-item { flex: 0 0 auto; width: 220px; scroll-snap-align: start; } .biblr-carousel-item img { border-radius: var(--biblr-radius-lg); box-shadow: var(--biblr-shadow-md); } .biblr-carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; } .biblr-carousel-prev, .biblr-carousel-next { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--biblr-border); background: var(--biblr-paper-raised); font-size: 18px; font-weight: 700; box-shadow: var(--biblr-shadow-sm); transition: background 0.15s ease, transform 0.15s ease; display: flex; align-items: center; justify-content: center; } .biblr-carousel-prev:hover, .biblr-carousel-next:hover { background: var(--biblr-accent-b); border-color: transparent; transform: scale(1.08); } /* ========================================================================= Testimonials ========================================================================= */ .biblr-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; } .biblr-testimonial-card { border: 1px solid var(--biblr-border); border-left: 4px dashed var(--biblr-accent-a); border-radius: var(--biblr-radius-lg); padding: 24px; background: var(--biblr-paper-card); transition: transform 0.2s ease; } .biblr-testimonial-card:nth-child(3n+2) { border-left-color: var(--biblr-accent-b); } .biblr-testimonial-card:nth-child(3n+3) { border-left-color: var(--biblr-accent-c); } .biblr-testimonial-card:hover { transform: translateY(-2px); } .biblr-testimonial-rating { position: relative; display: inline-block; font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; color: var(--biblr-border); } .biblr-testimonial-rating::before { content: "★★★★★"; } .biblr-testimonial-rating::after { content: "★★★★★"; position: absolute; top: 0; left: 0; width: calc(var(--rating) / 5 * 100%); overflow: hidden; white-space: nowrap; color: var(--biblr-accent-b); } .biblr-testimonial-quote { font-size: 15px; margin-bottom: 20px; line-height: 1.6; } .biblr-testimonial-author { display: flex; align-items: center; gap: 12px; } .biblr-testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--biblr-border); object-fit: cover; } .biblr-testimonial-name { font-weight: 700; font-size: 14px; } .biblr-testimonial-role { font-size: 12px; color: var(--biblr-ink-muted); } @media (max-width: 900px) { .biblr-testimonials-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .biblr-testimonials-grid { grid-template-columns: 1fr; } } /* ========================================================================= CTA band ========================================================================= */ .biblr-cta-band { background: var(--biblr-accent-a); border-radius: var(--biblr-radius-xl); padding: 64px 48px; text-align: center; box-shadow: var(--biblr-shadow-lg); } .biblr-cta-band h2 { color: var(--biblr-accent-a-ink); font-size: clamp(1.6rem, 3vw, 2.3rem); } .biblr-cta-band p { color: color-mix(in srgb, var(--biblr-accent-a-ink) 85%, transparent); max-width: 46ch; margin: 0 auto 28px; } .biblr-cta-band .biblr-store-badges { justify-content: center; } .biblr-cta-band .store-badge { background: var(--biblr-paper); color: var(--biblr-ink); } .biblr-cta-band .store-badge:hover { color: var(--biblr-ink); } @media (max-width: 640px) { .biblr-cta-band { padding: 40px 24px; } } /* ========================================================================= Page shell — persistent sidebar + main "sheet", reused on every template ========================================================================= */ .biblr-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; align-items: stretch; padding: 40px 0 80px; } @media (max-width: 900px) { .biblr-layout { grid-template-columns: 1fr; gap: 24px; padding: 24px 0 56px; } } .biblr-sidebar { background: var(--biblr-sidebar-bg, var(--biblr-paper-card)); border: 1px solid var(--biblr-border); border-radius: var(--biblr-radius-lg) 0 0 var(--biblr-radius-lg); padding: 28px; position: sticky; top: calc(var(--header-h) + 20px); } @media (max-width: 900px) { .biblr-sidebar { position: static; border-radius: var(--biblr-radius-lg); } } .biblr-sidebar__brand { text-align: center; margin-bottom: 20px; } .biblr-sidebar__brand .biblr-logo { justify-content: center; color: var(--biblr-ink); margin-bottom: 8px; } .biblr-sidebar__eyebrow { font-size: 13px; color: var(--biblr-ink-muted); margin: 0; } .biblr-sidebar__cta { margin-bottom: 24px; } .biblr-sidebar__cta .biblr-store-badges { flex-direction: column; } .biblr-sidebar__cta .store-badge { justify-content: center; width: 100%; } .biblr-sidebar__stats { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--biblr-border); } .biblr-sidebar__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--biblr-border); } .biblr-sidebar__stat-value { font-family: var(--biblr-font-display); font-weight: 700; font-size: 18px; } .biblr-sidebar__stat-label { font-size: 12px; color: var(--biblr-ink-muted); text-align: right; } .biblr-sidebar__section { border-top: 1px solid var(--biblr-border); padding-top: 16px; margin-bottom: 16px; } .biblr-sidebar__section h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--biblr-ink-muted); margin-bottom: 10px; } .biblr-sidebar__section ul li { padding: 6px 0; border-bottom: 1px solid var(--biblr-border); font-size: 13px; } .biblr-sidebar__section ul li:last-child { border-bottom: none; } .biblr-sidebar__section ul li a { color: var(--biblr-ink); text-decoration: none; } .biblr-sidebar__section ul li a:hover { text-decoration: underline; } .biblr-sidebar__section .biblr-tags { margin: 0; } .biblr-sidebar__features li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; } .biblr-sidebar__feature-icon { font-size: 16px; line-height: 1.4; flex-shrink: 0; } .biblr-sidebar__feature-title { display: block; font-weight: 700; font-size: 13px; color: var(--biblr-ink); } .biblr-sidebar__feature-text { display: block; font-size: 12px; color: var(--biblr-ink-muted); margin-top: 2px; } .biblr-sidebar__social { border-top: 1px solid var(--biblr-border); padding-top: 16px; } .biblr-sidebar__social .biblr-social-links { margin-top: 0; } .biblr-sidebar__social .social-icon { border-color: var(--biblr-border); background: var(--biblr-paper-raised); color: var(--biblr-ink); } .biblr-sidebar__social .social-icon:hover { background: var(--biblr-accent-b); border-color: transparent; color: var(--biblr-accent-b-ink); } .biblr-main { background: var(--biblr-main-bg, var(--biblr-paper-raised)); border: 1px solid var(--biblr-border); border-left: none; border-bottom: none; border-radius: 0 var(--biblr-radius-lg) 0 0; padding: 8px 0; overflow: hidden; } @media (max-width: 900px) { .biblr-main { border-left: 1px solid var(--biblr-border); border-bottom: 1px solid var(--biblr-border); border-radius: var(--biblr-radius-lg); } } .biblr-post-grid { display: grid; gap: 24px; } .biblr-post-card { background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); border-left: 4px dashed var(--biblr-accent-c); border-radius: var(--biblr-radius-lg); overflow: hidden; display: grid; grid-template-columns: 200px 1fr; transition: transform 0.2s ease; } .biblr-post-card:hover { transform: translateY(-2px); } .biblr-post-card-thumb { aspect-ratio: 4/3; overflow: hidden; background: color-mix(in srgb, var(--biblr-accent-c) 20%, var(--biblr-paper-card)); } .biblr-post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .biblr-post-card:hover .biblr-post-card-thumb img { transform: scale(1.04); } .biblr-post-card-body { padding: 22px 24px; } .biblr-post-meta { font-size: 12px; font-weight: 600; color: var(--biblr-ink-muted); display: flex; gap: 10px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; } .biblr-post-meta-separator { opacity: 0.4; } .biblr-post-card h2 { font-size: 20px; margin-bottom: 8px; } .biblr-post-card h2 a { color: var(--biblr-ink); text-decoration: none; } .biblr-post-card h2 a:hover { text-decoration: underline; text-decoration-color: var(--biblr-accent-a); text-underline-offset: 4px; } .biblr-post-excerpt { color: var(--biblr-ink-muted); font-size: 14px; margin: 0; } @media (max-width: 640px) { .biblr-post-card { grid-template-columns: 1fr; } } /* Pagination */ .biblr-pagination { margin-top: 40px; display: flex; gap: 8px; flex-wrap: wrap; } .biblr-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--biblr-border); border-radius: var(--biblr-radius-sm); color: var(--biblr-ink); font-weight: 600; font-size: 14px; background: var(--biblr-paper-card); text-decoration: none; transition: background 0.15s ease; } .biblr-pagination .page-numbers:hover { background: var(--biblr-accent-b); border-color: transparent; color: var(--biblr-accent-b-ink); } .biblr-pagination .page-numbers.current { background: var(--biblr-ink); color: var(--biblr-paper); border-color: transparent; } /* ========================================================================= Page shell (contact / FAQ / study-plan style text pages) ========================================================================= */ .biblr-page-shell { padding-top: 48px; padding-bottom: 32px; } .biblr-page-shell--narrow { max-width: 800px; margin: 0 auto; } .biblr-page-shell__title { position: relative; padding-left: 18px; } .biblr-page-shell__title::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; background: var(--biblr-accent-a); border-radius: 2px; } /* ========================================================================= Single post / devotional ========================================================================= */ .biblr-single-header { padding-top: 40px; } .biblr-single-header h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 14px; } .biblr-single-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--biblr-ink-muted); font-size: 13px; font-weight: 600; margin-bottom: 24px; letter-spacing: 0.03em; } .biblr-single-meta-sep { opacity: 0.35; } .biblr-single-reference { margin-bottom: 24px; } .biblr-single-thumb { border-radius: var(--biblr-radius-xl); overflow: hidden; margin-bottom: 40px; box-shadow: var(--biblr-shadow-lg); } /* Long-form reading styles */ .biblr-entry-content { font-size: 17px; line-height: 1.8; max-width: var(--biblr-content); color: var(--biblr-ink); } .biblr-entry-content h2 { margin-top: 1.8em; font-size: 1.55rem; } .biblr-entry-content h3 { margin-top: 1.5em; font-size: 1.25rem; } .biblr-entry-content h4 { margin-top: 1.3em; font-size: 1.1rem; } .biblr-entry-content p { margin-bottom: 1.3em; } .biblr-entry-content ul, .biblr-entry-content ol { padding-left: 1.5em; margin-bottom: 1.3em; list-style: revert; } .biblr-entry-content li { margin-bottom: 0.4em; } .biblr-entry-content blockquote { border-left: 4px solid var(--biblr-verse-border); background: var(--biblr-verse-bg); margin: 28px 0; padding: 18px 22px; border-radius: 0 var(--biblr-radius-sm) var(--biblr-radius-sm) 0; font-style: italic; color: var(--biblr-ink); } .biblr-entry-content blockquote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; font-weight: 700; color: var(--biblr-ink-muted); } .biblr-entry-content img { border-radius: var(--biblr-radius-md); box-shadow: var(--biblr-shadow-md); margin: 28px 0; } .biblr-entry-content a { text-decoration: underline; text-decoration-color: var(--biblr-accent-a); text-decoration-thickness: 2px; text-underline-offset: 3px; } .biblr-entry-content code { font-family: var(--biblr-font-mono); font-size: 0.88em; background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); padding: 2px 6px; border-radius: var(--biblr-radius-xs); } .biblr-entry-content pre { background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); border-radius: var(--biblr-radius-md); padding: 20px; overflow-x: auto; margin-bottom: 1.4em; } .biblr-entry-content pre code { background: none; border: none; padding: 0; font-size: 0.9em; } .biblr-entry-content hr { border: none; height: 1px; background: var(--biblr-border); margin: 2.5em 0; } /* Scripture pull-quote block (editor custom class) */ .wp-block-quote.is-style-scripture, .biblr-scripture-quote { background: var(--biblr-verse-bg); border-left: 4px solid var(--biblr-accent-b); border-radius: 0 var(--biblr-radius-md) var(--biblr-radius-md) 0; padding: 24px 28px; margin: 32px 0; font-family: var(--biblr-font-display); font-style: italic; font-size: 1.15em; } /* Post navigation */ .biblr-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--biblr-border); } .biblr-post-nav-item { background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); border-radius: var(--biblr-radius-md); padding: 18px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; transition: background 0.15s ease, border-color 0.15s ease; } .biblr-post-nav-item:hover { background: var(--biblr-paper-raised); border-color: var(--biblr-border-strong); } .biblr-post-nav-item--next { text-align: right; } .biblr-post-nav-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--biblr-ink-muted); } .biblr-post-nav-title { font-size: 14px; font-weight: 700; color: var(--biblr-ink); } @media (max-width: 580px) { .biblr-post-nav { grid-template-columns: 1fr; } } /* ========================================================================= Devotional card (used in devotional archive) ========================================================================= */ .biblr-devotional-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; } .biblr-devotional-card { background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); border-top: 4px dashed var(--biblr-accent-a); border-radius: var(--biblr-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease; } .biblr-devotional-card:nth-child(3n+2) { border-top-color: var(--biblr-accent-b); } .biblr-devotional-card:nth-child(3n+3) { border-top-color: var(--biblr-accent-c); } .biblr-devotional-card:hover { transform: translateY(-2px); } .biblr-devotional-card-thumb { aspect-ratio: 16/9; overflow: hidden; background: color-mix(in srgb, var(--biblr-accent-b) 20%, var(--biblr-paper-card)); } .biblr-devotional-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .biblr-devotional-card:hover .biblr-devotional-card-thumb img { transform: scale(1.05); } .biblr-devotional-card-body { padding: 22px; flex: 1; display: flex; flex-direction: column; } .biblr-devotional-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .biblr-devotional-card h3 { font-size: 18px; margin-bottom: 8px; } .biblr-devotional-card h3 a { color: var(--biblr-ink); text-decoration: none; } .biblr-devotional-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--biblr-accent-a); } .biblr-devotional-card-excerpt { font-size: 14px; color: var(--biblr-ink-muted); flex: 1; margin-bottom: 16px; } .biblr-devotional-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--biblr-border); font-size: 12px; font-weight: 600; color: var(--biblr-ink-muted); } /* ========================================================================= Study plan card ========================================================================= */ .biblr-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; } .biblr-plan-card { background: var(--biblr-paper-card); border: 1px solid var(--biblr-border); border-radius: var(--biblr-radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease; } .biblr-plan-card:hover { transform: translateY(-2px); } .biblr-plan-card-header { background: linear-gradient(135deg, color-mix(in srgb, var(--biblr-accent-c) 30%, var(--biblr-paper-card)), color-mix(in srgb, var(--biblr-accent-b) 20%, var(--biblr-paper-card))); padding: 28px 24px; } .biblr-plan-card:nth-child(3n+2) .biblr-plan-card-header { background: linear-gradient(135deg, color-mix(in srgb, var(--biblr-accent-a) 30%, var(--biblr-paper-card)), color-mix(in srgb, var(--biblr-accent-c) 20%, var(--biblr-paper-card))); } .biblr-plan-card:nth-child(3n+3) .biblr-plan-card-header { background: linear-gradient(135deg, color-mix(in srgb, var(--biblr-accent-b) 30%, var(--biblr-paper-card)), color-mix(in srgb, var(--biblr-accent-a) 20%, var(--biblr-paper-card))); } .biblr-plan-card-header h3 { margin: 0; font-size: 20px; } .biblr-plan-card-header h3 a { color: var(--biblr-ink); text-decoration: none; } .biblr-plan-card-body { padding: 20px 24px; flex: 1; } .biblr-plan-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .biblr-plan-stat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--biblr-paper-raised); border: 1px solid var(--biblr-border); border-radius: 999px; font-size: 12px; font-weight: 600; } .biblr-plan-level { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .biblr-plan-card-excerpt { margin-top: 12px; font-size: 14px; color: var(--biblr-ink-muted); } .biblr-plan-card-cta { margin-top: 14px; } .biblr-plan-level--beginner { background: color-mix(in srgb, var(--biblr-success) 18%, transparent); color: var(--biblr-success); } .biblr-plan-level--intermediate { background: color-mix(in srgb, var(--biblr-accent-b) 25%, transparent); color: color-mix(in srgb, var(--biblr-accent-b-ink) 80%, transparent); } .biblr-plan-level--advanced { background: color-mix(in srgb, var(--biblr-accent-a) 18%, transparent); color: var(--biblr-accent-a); } /* ========================================================================= FAQ accordion ========================================================================= */ .biblr-faq-accordion { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--biblr-border); } .faq-question { width: 100%; text-align: left; background: none; border: none; padding: 20px 0; font-size: 17px; font-weight: 700; font-family: var(--biblr-font-display); display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--biblr-ink); cursor: pointer; } .faq-icon { width: 26px; height: 26px; flex-shrink: 0; position: relative; border: 2px solid var(--biblr-border-strong); border-radius: 50%; } .faq-icon::before, .faq-icon::after { content: ""; position: absolute; background: var(--biblr-ink); transition: transform 0.2s ease; } .faq-icon::before { left: 6px; top: 50%; width: 12px; height: 2px; transform: translateY(-50%); border-radius: 2px; } .faq-icon::after { left: 50%; top: 6px; width: 2px; height: 12px; transform: translateX(-50%); border-radius: 2px; } .faq-item.is-open .faq-icon::after { transform: translateX(-50%) scaleY(0); } .faq-answer { padding: 0 0 22px; font-size: 15px; color: var(--biblr-ink-muted); line-height: 1.7; } /* ========================================================================= Contact form ========================================================================= */ .biblr-form { max-width: 560px; } .biblr-form-row { margin-bottom: 20px; } .biblr-form-row label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; } .biblr-form-row input, .biblr-form-row textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--biblr-border-strong); border-radius: var(--biblr-radius-sm); font-family: inherit; font-size: 15px; background: var(--biblr-paper-raised); color: var(--biblr-ink); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .biblr-form-row input:focus, .biblr-form-row textarea:focus { border-color: var(--biblr-accent-c); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--biblr-accent-c) 20%, transparent); } .biblr-form-notice { padding: 14px 18px; border-radius: var(--biblr-radius-sm); margin-bottom: 24px; font-weight: 600; font-size: 14px; } .biblr-form-notice--success { background: var(--biblr-success-bg); color: var(--biblr-success); border: 1px solid color-mix(in srgb, var(--biblr-success) 35%, transparent); } .biblr-form-notice--error { background: var(--biblr-error-bg); color: var(--biblr-error); border: 1px solid color-mix(in srgb, var(--biblr-error) 35%, transparent); } /* ========================================================================= Search form ========================================================================= */ .biblr-search-form { display: flex; gap: 8px; } .biblr-search-form input[type="search"] { padding: 10px 14px; border: 1px solid var(--biblr-border-strong); border-radius: var(--biblr-radius-sm); font-size: 14px; flex: 1; background: var(--biblr-paper-raised); color: var(--biblr-ink); } .biblr-search-form button { padding: 10px 16px; border: none; background: var(--biblr-ink); color: var(--biblr-paper); font-weight: 700; border-radius: var(--biblr-radius-sm); font-size: 14px; transition: opacity 0.15s ease; } .biblr-search-form button:hover { opacity: 0.85; } /* ========================================================================= 404 ========================================================================= */ .biblr-404 { text-align: center; padding: 100px 0; } .biblr-404-code { font-family: var(--biblr-font-display); font-size: clamp(5rem, 15vw, 10rem); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 3px var(--biblr-border-strong); margin-bottom: 20px; } .biblr-404 h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; } .biblr-404 p { color: var(--biblr-ink-muted); max-width: 40ch; margin: 0 auto 28px; } /* ========================================================================= Social links (used in the sidebar) ========================================================================= */ .biblr-social-links { display: flex; gap: 10px; margin-top: 16px; } .social-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background 0.15s ease, border-color 0.15s ease; text-decoration: none; color: var(--biblr-paper); } .social-icon:hover { background: var(--biblr-accent-b); border-color: transparent; color: var(--biblr-accent-b-ink); }