/* ========================================================== The Prophet Me — site.css (clean, no duplicates) Default: LIGHT theme Optional: Prophecy theme via ========================================================== */ /* ------------------------------ 1) Design tokens (LIGHT default) --------------------------------- */ :root{ --bg: #fff7ed; /* warm parchment */ --surface: #ffffff; /* cards / containers */ --text: #111827; /* near-black */ --muted: #4b5563; /* gray */ --border: #e5e7eb; /* light border */ --shadow: 0 10px 25px rgba(17,24,39,.10); --primary: #1e3a8a; /* deep navy */ --primary-hover: #1d4ed8; /* brighter blue */ --accent: #b45309; /* amber */ --success: #0f766e; /* teal */ --danger: #b91c1c; /* red */ --focus: #0ea5e9; /* sky */ --radius: 14px; --maxw: 1100px; /* Themeable helpers */ --body-bg: var(--bg); --header-bg: rgba(255,255,255,.88); --header-border: var(--border); --nav-hover-bg: rgba(30,58,138,.08); --nav-hover-border: rgba(30,58,138,.20); --nav-active-bg: rgba(30,58,138,.12); --nav-active-border: rgba(30,58,138,.35); } /* ------------------------------ 2) Prophecy theme overrides Enable with: --------------------------------- */ body.theme-prophecy{ --bg1:#0b0b12; --bg2:#141428; --surface: rgba(18,18,36,.78); --surface-2: rgba(18,18,36,.62); --text:#f3f2ff; --muted:#c9c7e6; --primary:#ffb457; --primary-hover:#76e4b4; --border:#2a2a4a; --shadow: 0 18px 50px rgba(0,0,0,.45); --radius: 16px; --maxw: 1400px; --body-bg: radial-gradient(1200px 700px at 18% 10%, rgba(255,180,87,.18), transparent 60%), radial-gradient(1100px 650px at 85% 22%, rgba(118,228,180,.16), transparent 55%), linear-gradient(160deg, var(--bg1), var(--bg2)); --header-bg: rgba(11,11,18,.72); --header-border: var(--border); --nav-hover-bg: rgba(255,180,87,.10); --nav-hover-border: rgba(255,180,87,.22); --nav-active-bg: rgba(255,180,87,.14); --nav-active-border: rgba(255,180,87,.28); } /* ------------------------------ 3) Base reset --------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } html, body{ height: 100%; } body{ margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; line-height: 1.6; background: var(--body-bg); color: var(--text); } img, video{ max-width: 100%; height: auto; } a{ color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } a:hover{ color: var(--primary-hover); } :focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; } /* ------------------------------ 4) Layout helpers --------------------------------- */ .container{ width: min(var(--maxw), calc(100% - 2rem)); margin: 0 auto; } .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; } .stack > * + *{ margin-top: 1rem; } /* ------------------------------ 5) Header / Nav --------------------------------- */ .site-header{ position: sticky; top: 0; z-index: 20; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--header-border); } .header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0; } .brand{ font-weight: 800; letter-spacing: .3px; text-decoration: none; color: var(--text); } .brand:hover{ color: var(--primary); } .nav{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; justify-content: flex-end; } .nav-link{ display: inline-block; padding: .45rem .65rem; border-radius: 999px; text-decoration: none; color: var(--text); border: 1px solid transparent; } .nav-link:hover{ background: var(--nav-hover-bg); border-color: var(--nav-hover-border); color: var(--primary); } .nav-link.is-active{ background: var(--nav-active-bg); border-color: var(--nav-active-border); color: var(--primary); font-weight: 700; } /* ------------------------------ 6) Headings / main spacing --------------------------------- */ h1, h2, h3{ color: var(--accent); /* uses your warm accent token */ } body.theme-prophecy h1, body.theme-prophecy h2, body.theme-prophecy h3{ color: var(--primary); /* your prophecy gold */ } h1, h2, h3, h4{ line-height: 1.2; margin: 0 0 .75rem 0; } h1{ font-size: clamp(1.75rem, 2.7vw, 2.4rem); } h2{ font-size: clamp(1.35rem, 2.1vw, 1.8rem); } h3{ font-size: 1.25rem; } h4{ font-size: 1.1rem; color: var(--muted); } main{ padding: 1.25rem 0 2rem 0; } /* ------------------------------ 7) Buttons --------------------------------- */ .btn, .chatgpt-btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; border-radius: 12px; border: 1px solid rgba(30,58,138,.35); background: rgba(30,58,138,.10); color: var(--text); text-decoration: none; font-weight: 700; } .btn:hover, .chatgpt-btn:hover{ background: rgba(30,58,138,.16); border-color: rgba(30,58,138,.55); } /* If prophecy theme is enabled, make button colors match */ body.theme-prophecy .btn, body.theme-prophecy .chatgpt-btn{ border-color: rgba(255,180,87,.28); background: rgba(255,180,87,.12); } body.theme-prophecy .btn:hover, body.theme-prophecy .chatgpt-btn:hover{ background: rgba(255,180,87,.18); border-color: rgba(255,180,87,.40); } /* ------------------------------ 8) Responsive embeds (YouTube, etc.) --------------------------------- */ .video-wrapper, .embed{ position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #0b1220; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(17,24,39,.15); margin: 1.25rem 0; } .video-wrapper iframe, .embed iframe, .video-wrapper video{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------ 9) Columns / grids (single definition to avoid conflicts) --------------------------------- */ .three-columns-container{ display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; margin: 1.25rem 0; } @media (max-width: 1100px){ .three-columns-container{ grid-template-columns: 1fr 1fr; } } @media (max-width: 720px){ .three-columns-container{ grid-template-columns: 1fr; } } .four-columns-container{ display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; margin: 1.25rem 0; } @media (max-width: 1100px){ .four-columns-container{ grid-template-columns: 1fr 1fr; } } @media (max-width: 720px){ .four-columns-container{ grid-template-columns: 1fr; } } .column, .column-inner{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; } /* ------------------------------ 10) Poem / scripture containers --------------------------------- */ .poem-container, .judgment-scripture{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin: 1.25rem auto; max-width: 900px; } .scripture-passage strong{ color: var(--primary); } /* ------------------------------ 11) Tables --------------------------------- */ .table-scroll{ overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; } .prolific-table{ width: 100%; min-width: 720px; border-collapse: collapse; } .prolific-table th, .prolific-table td{ border: 1px solid var(--border); padding: .75rem .75rem; vertical-align: top; } .prolific-table th{ background: rgba(30,58,138,.08); color: var(--text); } body.theme-prophecy .prolific-table th{ background: rgba(255,180,87,.08); } /* ------------------------------ 12) Thumbnails --------------------------------- */ .thumb-link{ display: inline-block; margin-bottom: .8rem; } .thumb{ display: block; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0,0,0,.35); } .muted{ color: var(--muted); margin-top: 0; } /* ------------------------------ 13) Footer --------------------------------- */ .site-footer{ border-top: 1px solid var(--border); background: rgba(255,255,255,.65); } body.theme-prophecy .site-footer{ background: rgba(18,18,36,.55); } .footer-inner{ display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 1rem 0 1.25rem 0; color: var(--muted); font-size: .95rem; } .footer-inner p{ margin: 0; } @media (min-width: 860px){ .footer-inner{ grid-template-columns: 1fr 1fr 1fr; align-items: center; } .footer-left{ justify-self: start; } .footer-center{ justify-self: center; text-align: center; } .footer-right{ justify-self: end; text-align: right; } } /* ------------------------------ 14) Small-screen nav --------------------------------- */ @media (max-width: 560px){ .header-inner{ flex-direction: column; align-items: flex-start; } .nav{ justify-content: flex-start; } } /* ------------------------------ 15) Optional page wrapper --------------------------------- */ .page{ width: min(100% - 2rem, var(--maxw)); margin: 0 auto; padding: 1.2rem 0 2.2rem; } .page-title{ margin: .25rem 0 .35rem; font-size: clamp(1.6rem, 2.4vw, 2.4rem); letter-spacing: .2px; } .page-subtitle{ margin: 0 0 1.2rem; color: var(--muted); max-width: 70ch; }