/* ═══════════════════════════════════════════════════════════════ shared.css — Editorial-monocle design system for Bible study sub-pages Tokens: --bg, --surface, --fg, --muted, --border, --accent Dark mode: [data-theme="dark"] on ═══════════════════════════════════════════════════════════════ */ /* ── TOKENS ── */ :root { --bg: #faf8f4; --surface: #ffffff; --fg: #221e14; --muted: #7a6e5c; --border: #e2d8ca; --accent: #FFA400; --font-d: 'Iowan Old Style', 'Charter', Georgia, serif; --font-b: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --shadow-sm: 0 2px 8px rgba(34,30,20,.07); --shadow-md: 0 8px 32px rgba(34,30,20,.13); --radius-sm: 6px; --radius-md: 12px; --transition: 200ms cubic-bezier(.2,0,.2,1); --nav-w: 272px; } [data-theme="dark"] { --bg: #1d1912; --surface: #252117; --fg: #f0e8d6; --muted: #9e9078; --border: #38321e; --shadow-sm: 0 2px 8px rgba(0,0,0,.28); --shadow-md: 0 8px 32px rgba(0,0,0,.48); } /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } html { scroll-behavior: smooth; } /* ── BASE ELEMENT TYPOGRAPHY — applies to all sub-pages regardless of class names ── */ h1, h2, h3, h4 { font-family: var(--font-d); } body { background: var(--bg); color: var(--fg); font-family: var(--font-b); font-size: 17px; line-height: 1.8; min-height: 100dvh; transition: background .2s, color .2s; } p { text-align: justify; hyphens: auto; } /* ── LAYOUT ── */ .layout { display: flex; min-height: 100dvh; } /* ── SIDEBAR ── */ .sidebar { width: var(--nav-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 50; display: flex; flex-direction: column; transition: background .2s, border-color .2s, left var(--transition); } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .sidebar-header { padding: 28px 20px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sidebar-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--font-b); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; margin-bottom: 16px; transition: color var(--transition); } .sidebar-back:hover { color: var(--accent); } .sidebar-title { font-family: var(--font-d); font-size: 15px; color: var(--fg); line-height: 1.35; letter-spacing: -0.01em; } .sidebar-subtitle { font-family: var(--font-b); font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; } .sidebar-nav { padding: 12px 0 24px; flex: 1; } .nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 20px; background: none; border: none; cursor: pointer; text-align: left; transition: background var(--transition), border-left-color var(--transition); border-left: 3px solid transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; min-height: 44px; } .nav-item:hover { background: rgba(255,164,0,.06); border-left-color: rgba(255,164,0,.3); } .nav-item.active { background: rgba(255,164,0,.08); border-left-color: var(--accent); } .nav-num { font-family: var(--font-b); font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1px; min-width: 22px; } .nav-item.active .nav-num { color: var(--accent); } .nav-abbr { font-family: var(--font-d); font-style: italic; font-size: 13px; color: var(--accent); min-width: 32px; opacity: .7; } .nav-item.active .nav-abbr { opacity: 1; } .nav-name { font-family: var(--font-b); font-size: 14px; color: var(--fg); opacity: .65; line-height: 1.2; } .nav-item.active .nav-name, .nav-item:hover .nav-name { opacity: 1; } /* ── MAIN ── */ .main { margin-left: var(--nav-w); flex: 1; min-width: 0; } /* ── HERO ── */ .hero { padding: 48px 52px 38px; background: var(--surface); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; transition: background .2s, border-color .2s; } .hero::after { content: ''; position: absolute; bottom: 0; left: 52px; width: 48px; height: 2px; background: var(--accent); } .hero-eyebrow { font-family: var(--font-b); font-size: 10px; font-weight: 700; letter-spacing: 3.5px; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; opacity: .8; } .hero-title { font-family: var(--font-d); font-size: clamp(24px, 3vw, 40px); font-weight: 400; color: var(--fg); line-height: 1.1; margin-bottom: 12px; letter-spacing: -0.02em; } .hero-title span { font-style: italic; color: var(--accent); } .hero-desc { font-family: var(--font-b); font-size: 15px; color: var(--muted); max-width: 600px; line-height: 1.7; } /* ── CONTENT ── */ .content { padding: 0 52px 80px; } /* ── BOOK PANELS ── */ .book-panel { display: none; animation: fadeIn 250ms ease; } .book-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .book-header { padding: 44px 0 32px; border-bottom: 1px solid var(--border); margin-bottom: 36px; } .book-eyebrow { font-family: var(--font-b); font-size: 10px; font-weight: 700; letter-spacing: 3.5px; color: var(--accent); text-transform: uppercase; opacity: .8; margin-bottom: 10px; } .book-title { font-family: var(--font-d); font-size: clamp(26px, 3.5vw, 44px); font-weight: 400; color: var(--fg); line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.02em; } .book-title span { font-style: italic; color: var(--accent); } .book-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .book-tag { display: inline-flex; align-items: center; padding: 4px 12px; background: rgba(255,164,0,.07); border: 1px solid rgba(255,164,0,.22); border-radius: 20px; font-family: var(--font-b); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; } .book-verse { font-family: var(--font-d); font-size: 19px; font-style: italic; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 20px; line-height: 1.6; max-width: 620px; } .book-verse cite { display: block; font-style: normal; font-family: var(--font-b); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--accent); opacity: .8; margin-top: 6px; text-transform: uppercase; } /* ── TABS ── */ .tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 40px; overflow-x: auto; } .tabs::-webkit-scrollbar { height: 0; } .tab-btn { padding: 12px 24px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; white-space: nowrap; transition: color var(--transition), border-color var(--transition); margin-bottom: -1px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .tab-btn:hover { color: var(--fg); } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-panel { display: none; } .tab-panel.active { display: block; animation: fadeIn 200ms ease; } /* ── STUDY BLOCKS ── */ .study-block { margin-bottom: 48px; } .study-block + .study-block { padding-top: 40px; border-top: 1px solid var(--border); } .block-title { font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .block-title::after { content: ''; flex: 1; height: 1px; background: var(--border); } .block-body p { color: var(--fg); font-family: var(--font-b); font-size: 16px; line-height: 1.85; margin-bottom: 16px; max-width: 72ch; text-align: justify; hyphens: auto; } .block-body p:last-child { margin-bottom: 0; } .block-body strong { color: var(--fg); font-weight: 700; } /* ── INFO GRID ── */ .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 32px; } .info-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 16px 18px; transition: background .2s, border-color .2s; } .info-card-label { font-family: var(--font-b); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; color: var(--accent); text-transform: uppercase; margin-bottom: 6px; } .info-card-value { font-family: var(--font-d); font-size: 16px; color: var(--fg); line-height: 1.4; } /* ── TIMELINE ── */ .timeline { border-left: 2px solid var(--border); padding-left: 28px; margin-left: 8px; } .tl-item { position: relative; margin-bottom: 28px; } .tl-item::before { content: ''; position: absolute; left: -37px; top: 5px; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; border: 2px solid var(--bg); } .tl-date { font-family: var(--font-b); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin-bottom: 4px; } .tl-text { font-family: var(--font-b); font-size: 15px; color: var(--fg); line-height: 1.65; text-align: justify; hyphens: auto; } /* ── GEO BOX ── */ .geo-box { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 24px 28px; margin-bottom: 28px; transition: background .2s; } .geo-box p { font-family: var(--font-b); font-size: 16px; color: var(--fg); line-height: 1.8; margin-bottom: 12px; text-align: justify; hyphens: auto; } .geo-box p:last-child { margin-bottom: 0; } .geo-box strong { color: var(--fg); font-weight: 700; } /* ── KEY VERSE ── */ .key-verse { background: rgba(255,164,0,.04); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 20px 24px; margin: 28px 0; } .key-verse p { font-family: var(--font-d); font-size: 19px; font-style: italic; color: var(--fg); line-height: 1.65; margin-bottom: 6px; } .key-verse cite { font-family: var(--font-b); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--accent); font-style: normal; text-transform: uppercase; } /* ── THEME TOGGLE ── */ .theme-toggle { position: fixed; top: 14px; right: 16px; z-index: 300; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background .2s, border-color .2s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; stroke: var(--fg); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ── LANG TOGGLE ── */ .lang-toggle { position: fixed; top: 14px; right: 64px; z-index: 300; padding: 0 14px; height: 40px; display: flex; align-items: center; background: var(--surface); border: 1px solid rgba(255,164,0,.35); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-b); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent); text-decoration: none; transition: background .2s, border-color .2s; touch-action: manipulation; } .lang-toggle:hover { background: rgba(255,164,0,.07); border-color: var(--accent); } /* ── MOBILE TOGGLE ── */ .menu-toggle { display: none; position: fixed; top: 14px; left: 16px; z-index: 200; width: 40px; height: 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; align-items: center; justify-content: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .2s, border-color .2s; } .menu-toggle:hover { border-color: var(--accent); } .menu-toggle svg { width: 18px; height: 18px; stroke: var(--fg); fill: none; stroke-width: 2; stroke-linecap: round; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(34,30,20,.4); backdrop-filter: blur(2px); z-index: 40; } /* ── TABLET / HAMBURGER (≤ 900px) ── */ @media (max-width: 900px) { .menu-toggle { display: flex; } .sidebar { left: calc(-1 * var(--nav-w)); box-shadow: var(--shadow-md); } .sidebar.open { left: 0; } .sidebar-overlay.open { display: block; } .main { margin-left: 0; } .sidebar-header { padding-top: 76px; } .hero { padding: 68px 28px 32px; } .hero::after { left: 28px; } .hero-desc { font-size: 14px; } .content { padding: 0 28px 64px; } .book-header { padding: 28px 0 22px; } .book-verse { font-size: 17px; } .tabs { gap: 0; } .tab-btn { padding: 11px 18px; font-size: 10px; letter-spacing: 1.5px; } .block-body p { font-size: 15px; max-width: none; } .geo-box p { font-size: 15px; } .key-verse p { font-size: 17px; } .info-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } /* ── MOBILE (≤ 600px) ── */ @media (max-width: 600px) { :root { --nav-w: 85vw; } body { font-size: 16px; } .hero { padding: 64px 18px 28px; } .hero::after { left: 18px; } .hero-eyebrow { font-size: 9px; letter-spacing: 3px; } .hero-title { font-size: 22px; line-height: 1.2; } .hero-desc { font-size: 14px; line-height: 1.6; } .content { padding: 0 18px 56px; } .book-header { padding: 24px 0 18px; } .book-eyebrow { font-size: 9px; } .book-title { font-size: 26px; line-height: 1.15; } .book-meta { gap: 6px; } .book-tag { font-size: 9px; padding: 3px 10px; } .book-verse { font-size: 16px; padding-left: 14px; } .book-verse cite { font-size: 9px; } .tabs { margin-bottom: 28px; } .tab-btn { padding: 10px 12px; font-size: 9px; letter-spacing: 1.5px; } .study-block { margin-bottom: 32px; } .study-block + .study-block { padding-top: 28px; } .block-title { font-size: 10px; letter-spacing: 2px; margin-bottom: 14px; } .block-body p { font-size: 15px; line-height: 1.75; max-width: none; } .info-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .info-card { padding: 12px 14px; } .info-card-label { font-size: 8px; } .info-card-value { font-size: 14px; } .timeline { padding-left: 20px; margin-left: 4px; } .tl-item { margin-bottom: 20px; } .tl-item::before { left: -28px; width: 10px; height: 10px; } .tl-date { font-size: 9px; } .tl-text { font-size: 14px; } .geo-box { padding: 16px 16px; margin-bottom: 20px; } .geo-box p { font-size: 14px; line-height: 1.7; } .key-verse { padding: 14px 16px; margin: 20px 0; } .key-verse p { font-size: 16px; line-height: 1.55; } .key-verse cite { font-size: 9px; } .sidebar-header { padding: 76px 16px 16px; } .sidebar-title { font-size: 13px; } .sidebar-subtitle { font-size: 9px; } .nav-item { padding: 10px 16px; gap: 10px; } .nav-num { font-size: 9px; min-width: 18px; } .nav-abbr { font-size: 12px; min-width: 28px; } .nav-name { font-size: 13px; } .lang-toggle { right: 60px; padding: 0 10px; font-size: 10px; } .theme-toggle { right: 16px; } }