/* ============================================================ Adult FYI — shared site stylesheet Light theme is the default. Dark theme activates when the element has data-theme="dark". A pre-paint script in includes/header.php applies the saved preference from localStorage before first paint. ============================================================ */ :root { /* Light theme (default) */ --bg-0: #ffffff; --bg-1: #f6f7f9; --bg-2: #ffffff; --bg-3: #eef0f3; --bg-soft: #fafbfc; --bg-hover: #f3f5f8; --bg-deep: #f6f7f9; --text-0: #0a0a0b; --text-1: #2a2a2e; --text-2: #57575e; --text-dim: #7a7a82; --text-dimer: #a0a0a8; --border: #e2e4e8; --border-soft: #ecedef; --cyan: #0086a8; --cyan-bright: #00b4d8; --on-cyan: #ffffff; --green: #00873d; --orange: #d54e1f; --yellow: #b88600; --red: #c93030; --st-approved-bg: #d4f5e5; --st-approved-fg: #00753f; --st-synth-bg: #d6ecf5; --st-synth-fg: #006a8a; --st-rejected-bg: #fde0e0; --st-rejected-fg: #b91c1c; --st-pending-bg: #fdf4d1; --st-pending-fg: #835400; --st-error-bg: #fde6d3; --st-error-fg: #a13503; --staging-bg: #fef3c7; --staging-fg: #92400e; --code-fg: #00753f; --textarea-bg: #ffffff; --textarea-border:#c8cad0; --shadow-card: 0 1px 2px rgba(0,0,0,0.04); --serif: Georgia, "Times New Roman", serif; --sans: -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: light; } html[data-theme="dark"] { --bg-0: #0a0a0b; --bg-1: #16161a; --bg-2: #1a1a1c; --bg-3: #252529; --bg-soft: #181a1e; --bg-hover: #1f1f22; --bg-deep: #0d0d0e; --text-0: #ffffff; --text-1: #eaeaea; --text-2: #b8b8c0; --text-dim: #888888; --text-dimer: #666666; --border: #2a2a2e; --border-soft: #252529; --cyan: #00d4ff; --cyan-bright: #00d4ff; --on-cyan: #0a0a0b; --green: #00ff88; --orange: #ff6b35; --yellow: #ffaa00; --red: #ff6b6b; --st-approved-bg: #0d3d2d; --st-approved-fg: #00ff88; --st-synth-bg: #0d3d4d; --st-synth-fg: #00d4ff; --st-rejected-bg: #4d0d0d; --st-rejected-fg: #ff6b6b; --st-pending-bg: #3d3d0d; --st-pending-fg: #e0c200; --st-error-bg: #4d2d0d; --st-error-fg: #ff8855; --staging-bg: #4d2d0d; --staging-fg: #ffaa00; --code-fg: #00ff88; --textarea-bg: #252529; --textarea-border:#444444; --shadow-card: none; color-scheme: dark; } /* ===== Base =========================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 15px/1.6 var(--sans); background: var(--bg-0); color: var(--text-1); min-height: 100vh; display: flex; flex-direction: column; transition: background-color .15s, color .15s; } a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } code { background: var(--bg-3); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; color: var(--code-fg); font-family: ui-monospace, "SF Mono", Consolas, monospace; } pre { background: var(--bg-3); border: 1px solid var(--border-soft); padding: 14px 16px; border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.45; margin: 12px 0; } pre code { background: transparent; padding: 0; } /* ===== Layout ========================================= */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; } .site-main { flex: 1; padding: 32px 0 60px; } /* ===== Top nav ======================================== */ .site-nav { background: var(--bg-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .nav-inner { display: flex; align-items: center; gap: 22px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; } .site-logo { display: inline-flex; align-items: center; line-height: 1; } .site-logo img { height: 34px; width: auto; display: block; } .site-logo:hover { text-decoration: none; } @media (max-width: 500px) { .site-logo img { height: 28px; } } .site-nav nav { display: flex; gap: 22px; flex: 1; } .site-nav nav a { color: var(--text-2); font-weight: 600; font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; } .site-nav nav a:hover { color: var(--text-0); text-decoration: none; border-bottom-color: var(--cyan); } .site-nav nav a.active { color: var(--text-0); border-bottom-color: var(--cyan); } .staging-badge { background: var(--staging-bg); color: var(--staging-fg); font-size: 11px; padding: 4px 10px; border-radius: 99px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } /* ===== Theme toggle =================================== */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-2); padding: 6px 9px; border-radius: 99px; cursor: pointer; display: inline-flex; align-items: center; line-height: 1; transition: color .15s, border-color .15s; } .theme-toggle:hover { color: var(--text-0); border-color: var(--cyan); } .theme-toggle .ti-sun { display: none; } .theme-toggle .ti-moon { display: inline-block; } html[data-theme="dark"] .theme-toggle .ti-moon { display: none; } html[data-theme="dark"] .theme-toggle .ti-sun { display: inline-block; } /* ===== Footer ========================================= */ .site-footer { background: var(--bg-1); border-top: 1px solid var(--border); padding: 44px 0 22px; margin-top: 60px; color: var(--text-2); font-size: 13px; } .footer-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 32px; } .footer-col strong { color: var(--text-0); display: block; margin-bottom: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 7px; } .footer-col a { color: var(--text-2); } .footer-col a:hover { color: var(--cyan); text-decoration: none; } .footer-col p { margin: 0; line-height: 1.6; } .footer-bar { border-top: 1px solid var(--border); padding-top: 20px; text-align: center; color: var(--text-dim); font-size: 12px; } /* ===== Typography ===================================== */ h1, h2, h3, h4 { color: var(--text-0); line-height: 1.3; } h1 { font-size: 32px; margin: 0 0 16px; } h2 { font-size: 22px; margin: 32px 0 14px; color: var(--cyan); } h3 { font-size: 17px; margin: 20px 0 8px; } /* ===== Buttons & pills ================================ */ .btn { display: inline-block; padding: 8px 16px; background: var(--cyan); color: var(--on-cyan); border-radius: 4px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; transition: background .15s, transform .05s; border: none; cursor: pointer; font-family: var(--sans); text-align: center; } .btn:hover { background: var(--cyan-bright); text-decoration: none; color: var(--on-cyan); } .btn-secondary { background: var(--bg-3); color: var(--text-1); } .btn-secondary:hover { background: var(--border); color: var(--text-0); } .btn-approve { background: var(--green); color: #ffffff; } .btn-approve:hover { background: var(--green); filter: brightness(1.1); color: #ffffff; } .btn-reject { background: var(--orange); color: #ffffff; } .btn-reject:hover { background: var(--orange); filter: brightness(1.1); color: #ffffff; } .btn-sm { padding: 5px 11px; font-size: 11px; } .btn-block { display: block; width: 100%; } .pill { display: inline-block; background: var(--bg-3); color: var(--text-2); padding: 4px 10px; border-radius: 99px; font-size: 12px; border: 1px solid var(--border-soft); } /* ===== Status badges ================================== */ .status { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .status-approved { background: var(--st-approved-bg); color: var(--st-approved-fg); } .status-synthesized { background: var(--st-synth-bg); color: var(--st-synth-fg); } .status-rejected { background: var(--st-rejected-bg); color: var(--st-rejected-fg); } .status-researching, .status-new { background: var(--st-pending-bg); color: var(--st-pending-fg); } .status-error { background: var(--st-error-bg); color: var(--st-error-fg); } .status-other { background: var(--bg-3); color: var(--text-2); } .cf-high { color: var(--green); font-weight: 700; } .cf-mid { color: var(--yellow); font-weight: 700; } .cf-low { color: var(--orange); font-weight: 700; } /* ===== Text utilities ================================= */ .text-error { color: var(--red); } .text-dim { color: var(--text-dim); } .text-mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; } /* ===== Cards & generic blocks ========================= */ .card { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow-card); } .callout { background: var(--bg-2); border: 1px solid var(--border-soft); border-left: 3px solid var(--cyan); padding: 16px 22px; border-radius: 6px; margin: 18px 0; box-shadow: var(--shadow-card); } .callout strong { color: var(--text-0); } .empty { padding: 60px; text-align: center; color: var(--text-dim); background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 8px; } /* ===== Data tables ==================================== */ .data-table { width: 100%; border-collapse: collapse; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 6px; overflow: hidden; } .data-table th, .data-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; } .data-table th { background: var(--bg-3); color: var(--text-2); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg-hover); } .data-table .title { color: var(--text-0); font-weight: 600; } .data-table .meta { color: var(--text-dim); font-size: 12px; margin-top: 3px; } /* ===== Hero / homepage ================================ */ .hero { padding: 50px 0 26px; text-align: center; } .hero h1 { font-size: 44px; margin: 0 0 14px; font-family: var(--serif); letter-spacing: -0.5px; } .hero h1 span { color: var(--cyan); } .hero p { color: var(--text-2); font-size: 17px; max-width: 640px; margin: 0 auto; } .section-title { color: var(--cyan); font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; margin: 36px 0 14px; font-weight: 700; } .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } .article-card { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 20px; transition: border-color .15s, transform .15s, box-shadow .15s; display: flex; flex-direction: column; box-shadow: var(--shadow-card); } .article-card:hover { border-color: var(--cyan); transform: translateY(-2px); text-decoration: none; } .article-card h3 { font-size: 17px; margin: 0 0 10px; font-family: var(--serif); line-height: 1.3; color: var(--text-0); } .article-card:hover h3 { color: var(--cyan); } .article-card p { color: var(--text-2); font-size: 13px; margin: 0 0 14px; line-height: 1.55; flex: 1; } .article-card .meta-row { color: var(--text-dim); font-size: 11px; display: flex; gap: 10px; align-items: center; } /* ===== Compare page =================================== */ .compare-intro { color: var(--text-2); font-size: 13px; margin-bottom: 24px; line-height: 1.65; } .compare-intro strong { color: var(--text-0); } .compare-row { display: grid; grid-template-columns: 1fr 1fr 200px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 14px; overflow: hidden; transition: border-color .15s, box-shadow .15s; box-shadow: var(--shadow-card); } .compare-row:hover { border-color: var(--cyan); } .compare-col { padding: 18px 20px; min-width: 0; } .compare-col-orig { border-right: 1px solid var(--border-soft); } .compare-col-new { border-right: 1px solid var(--border-soft); background: var(--bg-soft); } .compare-col-meta { background: var(--bg-1); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; } .compare-label { display: inline-block; font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .7px; font-weight: 700; margin-bottom: 8px; } .compare-col-new .compare-label { color: var(--cyan); } .compare-col h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.4; } .compare-col h3 a { color: var(--text-0); } .compare-col h3 a:hover { color: var(--cyan); } .compare-lede { color: var(--text-2); font-size: 13px; margin: 0 0 10px; line-height: 1.5; } .compare-url { color: var(--text-dimer); font-size: 11px; word-break: break-all; margin: 0; } .compare-url a { color: var(--text-dim); } .compare-url a:hover { color: var(--cyan); } .compare-thin { color: var(--text-dim); font-size: 12px; font-style: italic; margin: 6px 0; } .compare-id { color: var(--text-dimer); font-family: ui-monospace, monospace; font-size: 11px; margin-left: 6px; } .btn-row { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: auto; } /* ===== Alt-AI comparison panel (admin/view.php) ======== */ .alt-compare { margin-top: 28px; } .alt-compare h2 { margin-top: 12px; } .alt-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px 16px; margin: 14px 0 18px; } .alt-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; } .alt-form select, .alt-form input[type="text"] { background: var(--bg-2); color: var(--text-0); border: 1px solid var(--border); border-radius: 4px; padding: 7px 10px; font-size: 13px; min-width: 220px; } .alt-rewrite { border: 1px solid var(--border-soft); border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; background: var(--bg-soft); } .alt-rewrite-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; } .alt-error { color: var(--orange); padding: 10px 12px; border-radius: 4px; background: rgba(255, 100, 50, 0.08); font-size: 13px; } /* ===== Settings page ================================== */ .settings-flash { padding: 10px 14px; border-radius: 6px; margin: 14px 0; font-size: 13px; } .settings-flash-ok { background: rgba(80, 200, 120, 0.12); color: var(--green); border: 1px solid var(--green); } .settings-flash-err { background: rgba(255, 100, 50, 0.12); color: var(--orange); border: 1px solid var(--orange); } .settings-form { margin: 18px 0 28px; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 8px; padding: 18px 22px; } .settings-row { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); } .settings-row:last-of-type { border-bottom: none; } .settings-label { font-size: 13px; color: var(--text-0); display: flex; flex-direction: column; gap: 4px; } .settings-const { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-dim); background: var(--bg-2); padding: 2px 6px; border-radius: 3px; width: max-content; } .settings-input { display: flex; flex-direction: column; gap: 6px; } .settings-input input[type="text"], .settings-input input[type="password"] { background: var(--bg-2); color: var(--text-0); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; font-size: 13px; font-family: ui-monospace, monospace; width: 100%; max-width: 460px; } .settings-clear { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; } .settings-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; width: max-content; } .settings-toggle input { position: absolute; opacity: 0; pointer-events: none; } .settings-toggle-track { position: relative; width: 44px; height: 24px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 999px; transition: background 0.18s ease, border-color 0.18s ease; flex-shrink: 0; } .settings-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--text-dim); border-radius: 50%; transition: left 0.18s ease, background 0.18s ease; } .settings-toggle input:checked + .settings-toggle-track { background: var(--cyan, #00d4ff); border-color: var(--cyan, #00d4ff); } .settings-toggle input:checked + .settings-toggle-track::after { left: 22px; background: #fff; } .settings-toggle input:focus-visible + .settings-toggle-track { outline: 2px solid var(--cyan, #00d4ff); outline-offset: 2px; } .settings-toggle-state { font-size: 13px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; min-width: 26px; } .settings-toggle input:checked ~ .settings-toggle-state { color: var(--cyan, #00d4ff); } .settings-help { font-size: 12px; color: var(--text-dim); margin: 0; } .settings-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); } .settings-readonly-head { margin-top: 28px; font-size: 16px; color: var(--text-dim); } .settings-readonly { width: 100%; max-width: 720px; border-collapse: collapse; margin-top: 10px; } .settings-readonly th, .settings-readonly td { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); text-align: left; font-size: 13px; } .settings-readonly th { color: var(--text-dim); font-weight: 500; width: 180px; } .settings-readonly td { font-family: ui-monospace, monospace; } /* ===== Public article ================================= */ .article-wrap { max-width: 720px; margin: 0 auto; } .article-meta-line { color: var(--text-dim); font-size: 13px; margin-bottom: 18px; } .article-meta-line a { color: var(--text-dim); } .article-meta-line a:hover { color: var(--cyan); } .article-title { font-size: 36px; line-height: 1.18; margin: 0 0 14px; font-family: var(--serif); color: var(--text-0); } .article-lede { font-size: 19px; color: var(--text-2); margin: 0 0 32px; font-family: var(--serif); font-style: italic; line-height: 1.5; } .article-body { font: 17px/1.7 var(--serif); color: var(--text-1); } .article-body h2 { font-size: 25px; margin: 40px 0 14px; color: var(--text-0); font-family: var(--serif); } .article-body h3 { font-size: 20px; margin: 30px 0 10px; color: var(--text-0); font-family: var(--serif); } .article-body p { margin: 0 0 18px; } .article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 26px; } .article-body li { margin-bottom: 6px; } .article-body strong { color: var(--text-0); } .article-body a { color: var(--cyan); border-bottom: 1px solid currentColor; } .article-body a:hover { text-decoration: none; } .article-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 13px; } .article-preview-banner { background: rgba(255, 165, 0, 0.08); border: 1px solid var(--orange); border-radius: 6px; padding: 10px 14px; margin: 0 0 24px; font-size: 13px; color: var(--text-1); } .article-preview-banner strong { color: var(--orange); } .article-preview-banner a { color: var(--cyan); margin-left: 8px; } /* ===== Public homepage ============================== */ .home-container { max-width: 1100px; } .home-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; padding: 0 0 48px; text-decoration: none; color: inherit; margin-bottom: 48px; border-bottom: 1px solid var(--border); } .home-hero-img img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: cover; border-radius: 8px; background: var(--bg-2); } .home-hero-body { padding-right: 12px; } .home-hero-eyebrow { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cyan); margin-bottom: 12px; } .home-hero-title { font-size: 36px; line-height: 1.15; margin: 0 0 16px; color: var(--text-0); } .home-hero:hover .home-hero-title { color: var(--cyan); } .home-hero-lede { font-size: 16px; line-height: 1.55; color: var(--text-1); margin: 0 0 16px; } .home-hero-meta { display: block; font-size: 13px; color: var(--text-dim); } .home-section { margin: 0 0 48px; } .home-section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin: 0 0 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 24px; } .home-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; } .home-card-img { width: 100%; aspect-ratio: 16/10; overflow: hidden; border-radius: 6px; background: var(--bg-2); margin-bottom: 12px; } .home-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } .home-card:hover .home-card-img img { transform: scale(1.03); } .home-card-img-empty { background: linear-gradient(135deg, var(--bg-2), var(--bg-3)); } .home-card-pinned { /* visual border removed — pin ordering still active */ } .home-card-pin, .archive-row-pin { color: var(--cyan); margin-right: 4px; } .home-card-title { font-size: 17px; line-height: 1.3; margin: 0 0 6px; color: var(--text-0); } .home-card:hover .home-card-title { color: var(--cyan); } .home-card-lede { font-size: 13px; line-height: 1.45; color: var(--text-1); margin: 0 0 8px; min-height: 38px; } .home-card-meta { font-size: 12px; color: var(--text-dim); margin-top: auto; } .home-list { list-style: none; padding: 0; margin: 0; } .home-list li { padding: 12px 0; border-bottom: 1px solid var(--border-soft); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; } .home-list li:last-child { border-bottom: none; } .home-list a { color: var(--text-0); text-decoration: none; flex: 1; } .home-list a:hover { color: var(--cyan); } .home-list-meta { flex-shrink: 0; font-size: 12px; color: var(--text-dim); } .home-archive-link { margin: 24px 0 0; text-align: center; } .pill-preview { background: rgba(255, 165, 0, 0.15); color: var(--orange); border: 1px solid var(--orange); font-size: 10px; padding: 2px 7px; } /* ===== Archive page ============================== */ .archive-bar { display: flex; align-items: baseline; gap: 16px; margin: 0 0 32px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .archive-bar h1 { margin: 0; font-size: 28px; } .archive-list { display: flex; flex-direction: column; gap: 0; } .archive-row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: inherit; } .archive-row:hover { background: rgba(0, 212, 255, 0.025); } .archive-row:last-child { border-bottom: none; } .archive-row-img { width: 140px; height: 90px; border-radius: 5px; overflow: hidden; background: var(--bg-2); } .archive-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .archive-row-img-empty { background: linear-gradient(135deg, var(--bg-2), var(--bg-3)); } .archive-row-title { font-size: 17px; margin: 0 0 4px; color: var(--text-0); } .archive-row:hover .archive-row-title { color: var(--cyan); } .archive-row-lede { font-size: 13px; line-height: 1.45; color: var(--text-1); margin: 0 0 6px; } .archive-row-meta { font-size: 12px; color: var(--text-dim); } .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 32px 0; flex-wrap: wrap; } .page-link { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-1); text-decoration: none; font-size: 13px; } .page-link:hover { border-color: var(--cyan); color: var(--cyan); } .page-link-active { background: var(--cyan); border-color: var(--cyan); color: var(--on-cyan); } .page-link-active:hover { color: var(--on-cyan); } .page-gap { color: var(--text-dim); padding: 0 4px; } @media (max-width: 720px) { .home-hero { grid-template-columns: 1fr; gap: 18px; } .home-hero-title { font-size: 26px; } .archive-row { grid-template-columns: 100px 1fr; gap: 12px; } .archive-row-img { width: 100px; height: 70px; } } .article-hero { margin: 0 0 32px; } .article-hero img { display: block; width: 100%; height: auto; max-height: 540px; object-fit: cover; border-radius: 8px; background: var(--bg-2); } .article-hero figcaption, .article-video figcaption { margin-top: 8px; color: var(--text-dim); font-size: 13px; text-align: center; } .article-videos { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); } .article-videos h2 { margin: 0 0 16px; font-size: 20px; } .article-video { margin: 0 0 24px; } .article-video video { display: block; width: 100%; height: auto; max-height: 540px; border-radius: 8px; background: #000; } /* ===== Admin edit (edit.php) ======================== */ .admin-bar-actions { display: flex; gap: 10px; margin: 12px 0 18px; flex-wrap: wrap; } .edit-form { max-width: 920px; margin: 0 auto; } .edit-fieldset { background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 18px 22px 22px; margin: 0 0 22px; } .edit-fieldset legend { padding: 0 8px; font-weight: 600; color: var(--text-0); } .edit-row { display: block; margin: 0 0 14px; } .edit-row:last-child { margin-bottom: 0; } .edit-label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; } .edit-label small { text-transform: none; letter-spacing: 0; } .edit-row input[type="text"], .edit-row textarea { width: 100%; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; color: var(--text-0); font: 14px/1.45 inherit; } .edit-row textarea { resize: vertical; min-height: 64px; } .edit-body { min-height: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .edit-featured { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; } .edit-featured img { width: 320px; height: auto; border-radius: 6px; background: var(--bg-1); } .edit-featured-meta { flex: 1; min-width: 280px; } .edit-candidate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; } .edit-candidate { position: relative; display: block; border: 2px solid var(--border); border-radius: 6px; padding: 4px; cursor: pointer; background: var(--bg-1); transition: border-color .12s ease; } .edit-candidate:hover { border-color: var(--cyan); } .edit-candidate input[type="radio"] { position: absolute; top: 6px; left: 6px; accent-color: var(--cyan); } .edit-candidate img { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: 4px; } .edit-candidate-dim { display: block; margin-top: 4px; font-size: 11px; color: var(--text-dim); text-align: center; } .edit-candidate-featured { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); } .edit-video-row { display: flex; gap: 18px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); } .edit-video-row:first-of-type { border-top: none; padding-top: 0; } .edit-video-row video { border-radius: 6px; background: #000; } .edit-video-meta { flex: 1; } .edit-actions { display: flex; gap: 12px; align-items: center; padding: 16px 0 32px; } /* ===== Admin review (view.php) ======================== */ .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .review-grid.review-grid-single { grid-template-columns: 1fr; } .review-col { background: var(--bg-2); border: 1px solid var(--border-soft); padding: 20px; border-radius: 8px; box-shadow: var(--shadow-card); } .review-col h2 { margin: 0 0 6px; font-size: 14px; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; } .review-col h2 small { font-size: 11px; color: var(--text-dim); font-weight: 400; text-transform: none; } .divider { border-top: 1px solid var(--border-soft); margin: 14px 0; } .review-stats { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; } .review-stat { background: var(--bg-3); padding: 8px 12px; border-radius: 6px; font-size: 12px; color: var(--text-2); border: 1px solid var(--border-soft); } .review-stat .v { font-weight: 700; font-size: 16px; display: block; color: var(--text-0); } .review-orig { color: var(--text-2); } .review-orig h3 { color: var(--text-0); margin: 0 0 8px; } .review-rw h3 { margin: 0 0 4px; color: var(--text-0); font-size: 22px; font-family: var(--serif); } .review-meta-desc { color: var(--text-2); font-size: 13px; font-style: italic; margin-bottom: 12px; } .review-body-preview { background: var(--bg-deep); padding: 16px; border-radius: 6px; border: 1px solid var(--border-soft); color: var(--text-1); } .review-body-preview h2 { font-size: 18px; color: var(--cyan); text-transform: none; letter-spacing: 0; margin: 18px 0 8px; } .review-body-preview h3 { font-size: 15px; margin: 14px 0 6px; color: var(--text-0); } .review-body-preview p { margin: 0 0 12px; } .review-body-preview ul { margin: 0 0 12px; padding-left: 22px; } .review-body-preview li { margin-bottom: 4px; } .sources-list { font-size: 12px; color: var(--text-dim); padding-left: 20px; margin: 0; } .sources-list li { margin-bottom: 4px; } .sources-list a { color: var(--cyan); } .review-actions { position: sticky; bottom: 0; background: var(--bg-2); padding: 14px 24px; border: 1px solid var(--border-soft); border-top: 1px solid var(--border); display: flex; gap: 12px; justify-content: center; margin-top: 24px; border-radius: 8px; flex-wrap: wrap; box-shadow: var(--shadow-card); } .review-actions textarea { flex: 1; min-width: 260px; max-width: 500px; padding: 8px; background: var(--textarea-bg); color: var(--text-0); border: 1px solid var(--textarea-border); border-radius: 5px; resize: vertical; font: 14px var(--sans); } .review-actions button { padding: 10px 22px; border: none; border-radius: 5px; cursor: pointer; font-weight: 700; font: 14px var(--sans); } details { margin-top: 12px; } details summary { cursor: pointer; color: var(--text-dim); font-size: 12px; } details pre { background: var(--bg-deep); padding: 10px; border-radius: 5px; overflow: auto; font-size: 11px; color: var(--text-1); max-height: 300px; line-height: 1.4; } /* ===== Notes / dev orientation ======================== */ .notes-list { color: var(--text-2); } .notes-list li { margin-bottom: 6px; } /* ===== Admin headers ================================== */ .admin-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .admin-bar h1 { margin: 0; font-size: 24px; flex: 1 1 auto; } .pill-strip { display: flex; gap: 8px; flex-wrap: wrap; } .admin-sub-nav { display: flex; gap: 22px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); align-items: center; } .admin-sub-nav a { color: var(--text-2); font-weight: 600; font-size: 13px; padding: 4px 0; border-bottom: 2px solid transparent; } .admin-sub-nav a:hover { color: var(--text-0); text-decoration: none; border-bottom-color: var(--cyan); } .admin-sub-nav a.active { color: var(--cyan); border-bottom-color: var(--cyan); } /* Dropdowns in admin sub-nav (native
) */ .admin-sub-nav .nav-drop { position: relative; margin: 0; padding: 0; line-height: 1; } .admin-sub-nav .nav-drop > summary { list-style: none; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 13px; padding: 4px 0; margin: 0; border-bottom: 2px solid transparent; user-select: none; line-height: inherit; } .admin-sub-nav .nav-drop > summary::-webkit-details-marker { display: none; } .admin-sub-nav .nav-drop > summary:hover { color: var(--text-0); border-bottom-color: var(--cyan); } .admin-sub-nav .nav-drop > summary.active { color: var(--cyan); border-bottom-color: var(--cyan); } .admin-sub-nav .nav-drop[open] > summary { color: var(--text-0); } .admin-sub-nav .nav-drop-menu { position: absolute; top: 100%; left: 0; z-index: 100; margin-top: 8px; background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 6px; padding: 6px; min-width: 220px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } .admin-sub-nav .nav-drop-menu a { padding: 7px 12px; border-radius: 4px; border-bottom: none; font-size: 13px; white-space: nowrap; color: var(--text-1); } .admin-sub-nav .nav-drop-menu a:hover { background: var(--bg-3); color: var(--text-0); text-decoration: none; border-bottom-color: transparent; } .admin-sub-nav .nav-drop-menu a.active { background: var(--bg-3); color: var(--cyan); border-bottom-color: transparent; } .admin-hint { color: var(--text-dim); font-size: 13px; margin-bottom: 22px; } /* ===== Responsive ===================================== */ @media (max-width: 1000px) { .compare-row { grid-template-columns: 1fr; } .compare-col-orig, .compare-col-new { border-right: none; border-bottom: 1px solid var(--border-soft); } .review-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 26px; } } @media (max-width: 700px) { h1 { font-size: 26px; } .hero h1 { font-size: 32px; } .article-title { font-size: 28px; } .article-body { font-size: 16px; } .nav-inner { gap: 14px; } .site-nav nav { gap: 16px; order: 3; flex-basis: 100%; } .staging-badge { order: 2; } .theme-toggle { order: 2; } } @media (max-width: 500px) { .footer-cols { grid-template-columns: 1fr; } }