@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
:root { --ink:#171816; --ink-soft:#5f615a; --paper:#f4f3ef; --panel:#fff; --line:#deded8; --accent:#e8ff5b; --night:#232522; --danger:#c34b45; --sidebar:247px; } * { box-sizing:border-box; } body { margin:0; font-family:Manrope,Arial,sans-serif; color:var(--ink); background:var(--paper); } button,input,textarea,select { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } .eyebrow { color:#989990; font:500 10px DM Mono,monospace; letter-spacing:.13em; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; background:var(--ink); color:var(--accent); font:700 14px Barlow Condensed,Arial,sans-serif; } .login-brand { display:flex; gap:10px; align-items:center; } .brand-logo-mark { object-fit:cover; border-radius:2px; background:#eef0f2; } .login-brand-full { align-items:flex-end; } .login-logo { width:120px; height:120px; object-fit:contain; border-radius:5px; background:#eef0f2; } .login-brand strong { display:block; font-size:13px; } .login-brand small { display:block; margin-top:3px; color:#85877f; font:9px DM Mono,monospace; letter-spacing:.1em; }
/* Login */
.login-page { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(420px,.9fr); background:var(--paper); } .login-image { position:relative; background:url('/assets/login-pickup.jpg') center/cover; color:#fff; } .login-image-overlay { position:absolute; inset:0; background:linear-gradient(110deg,rgba(0,0,0,.72),rgba(0,0,0,.1)); } .login-quote { position:absolute; left:64px; bottom:60px; } .login-quote span { color:var(--accent); font:10px DM Mono,monospace; letter-spacing:.14em; } .login-quote strong { display:block; margin:20px 0 15px; font:600 clamp(44px,6vw,76px)/.9 Barlow Condensed,Arial,sans-serif; } .login-quote small { color:rgba(255,255,255,.68); font-size:12px; } .login-panel { width:min(420px,calc(100% - 80px)); align-self:center; justify-self:center; } .login-heading { margin:90px 0 38px; } .login-heading h1 { margin:12px 0 9px; font:600 50px/.95 Barlow Condensed,Arial,sans-serif; } .login-heading p { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.7; } .login-panel label { display:block; margin-bottom:18px; color:#75766e; font-size:11px; } .login-panel input { display:block; width:100%; margin-top:8px; padding:14px 13px; border:1px solid var(--line); outline:0; background:#fff; color:var(--ink); font-size:13px; } .login-panel input:focus { border-color:var(--ink); } .admin-button { border:0; padding:13px 17px; display:inline-flex; justify-content:center; align-items:center; gap:16px; font-size:11px; font-weight:700; letter-spacing:.01em; } .admin-button.primary { color:#111; background:var(--accent); } .admin-button.primary:hover { background:#f1ff99; } .admin-button:disabled { opacity:.55; cursor:wait; } .login-panel form .admin-button { width:100%; margin-top:12px; } .login-error { min-height:17px; margin:13px 0 0; color:var(--danger); font-size:11px; } .login-hint { margin-top:31px; padding-top:17px; display:flex; align-items:center; gap:9px; border-top:1px solid var(--line); color:#898b83; font-size:10px; } .login-hint code { padding:4px 7px; color:var(--ink); background:#e7e6e0; font:10px DM Mono,monospace; } .back-site { display:inline-block; margin-top:41px; color:var(--ink-soft); font:10px DM Mono,monospace; }
/* Admin shell */
.admin-layout { min-height:100vh; display:flex; } .sidebar { position:fixed; inset:0 auto 0 0; z-index:10; width:var(--sidebar); padding:26px 18px 18px; display:flex; flex-direction:column; color:#f1f2eb; background:var(--night); } .sidebar-top { display:flex; align-items:center; justify-content:space-between; padding:0 9px 40px; } .sidebar .login-brand strong { color:#fff; } .sidebar .login-brand small { color:#8f9288; } .sidebar .brand-mark { background:var(--accent); color:var(--ink); } .sidebar-close { display:none; border:0; color:#fff; background:none; font-size:24px; } .workspace-label,.nav-group-label { margin:0 10px 11px; color:#878a7f; font:9px DM Mono,monospace; letter-spacing:.1em; text-transform:uppercase; } .nav-group-label { margin-top:31px; } .admin-nav { display:flex; flex-direction:column; gap:3px; } .admin-nav button { display:flex; align-items:center; gap:11px; width:100%; padding:12px 10px; border:0; color:#aeb0a6; text-align:left; background:transparent; font-size:11px; } .admin-nav button:hover { color:#fff; } .admin-nav button.active { color:var(--ink); background:var(--accent); } .nav-icon { width:18px; color:inherit; font-size:14px; text-align:center; } .nav-arrow { margin-left:auto; opacity:0; } .admin-nav button.active .nav-arrow { opacity:1; } .sidebar-bottom { margin-top:auto; } .account { display:flex; align-items:center; gap:9px; padding:15px 8px 18px; border-top:1px solid #41433e; } .account-avatar { width:29px; height:29px; display:grid; place-items:center; color:var(--ink); background:var(--accent); font-size:11px; } .account strong { display:block; color:#f7f7f2; font-size:10px; } .account small { display:block; margin-top:2px; color:#858880; font:9px DM Mono,monospace; } .account button { margin-left:auto; border:0; color:#9ea198; background:none; font-size:17px; transform:rotate(90deg); } .view-site { display:flex; justify-content:space-between; padding:11px 10px; color:#aeb0a6; border:1px solid #42443e; font-size:10px; } .view-site:hover { color:var(--accent); border-color:var(--accent); }
.admin-main { width:calc(100% - var(--sidebar)); margin-left:var(--sidebar); } .admin-header { min-height:108px; padding:27px 40px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); background:var(--paper); } .admin-header h1 { margin:8px 0 0; font:600 38px/.9 Barlow Condensed,Arial,sans-serif; } .header-actions { display:flex; align-items:center; gap:21px; } .save-state { color:#888b81; font:10px DM Mono,monospace; } .mobile-menu { display:none; border:0; background:none; font-size:20px; } .admin-content { max-width:1270px; padding:39px 40px 75px; }
.overview-top { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:14px; margin-bottom:28px; } .stat-card { min-height:144px; padding:21px; border:1px solid var(--line); background:var(--panel); } .stat-card.primary-card { color:#111; background:var(--accent); border-color:var(--accent); } .stat-card span { color:#7c7e76; font:10px DM Mono,monospace; } .primary-card span { color:#566000; } .stat-card strong { display:block; margin-top:24px; font:600 45px/.8 Barlow Condensed,Arial,sans-serif; } .stat-card small { display:block; margin-top:11px; color:#8b8d84; font-size:10px; } .primary-card small { color:#596200; } .overview-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:14px; } .admin-card { padding:25px; border:1px solid var(--line); background:var(--panel); } .admin-card h2 { margin:0 0 20px; font:600 26px/1 Barlow Condensed,Arial,sans-serif; } .admin-card-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; } .admin-card-header h2 { margin:0; } .muted { color:#85877f; font-size:11px; line-height:1.7; } .quick-list { display:flex; flex-direction:column; gap:13px; } .quick-row { display:flex; align-items:center; justify-content:space-between; padding-bottom:13px; border-bottom:1px solid #ededea; font-size:11px; } .quick-row span:last-child { color:#8a8c84; font:10px DM Mono,monospace; } .status-dot { display:inline-block; width:6px; height:6px; margin-right:6px; background:#aeb3a5; } .status-dot.green { background:#a7c227; }
/* Editors */
.editor-heading { margin-bottom:30px; } .editor-heading h2 { margin:8px 0; font:600 41px/.9 Barlow Condensed,Arial,sans-serif; } .editor-heading p { max-width:620px; margin:0; color:var(--ink-soft); font-size:12px; line-height:1.8; } .form-card { margin-bottom:14px; padding:27px; border:1px solid var(--line); background:var(--panel); } .form-card h3 { margin:0 0 22px; font:600 24px/1 Barlow Condensed,Arial,sans-serif; } .form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px 19px; } .form-grid.three { grid-template-columns:repeat(3,1fr); } .field { display:block; color:#777a72; font-size:10px; } .field.full { grid-column:1/-1; } .field input,.field textarea,.field select { width:100%; margin-top:7px; padding:12px 11px; border:1px solid #dcdcd6; outline:0; background:#fff; color:var(--ink); font-size:12px; } .field textarea { min-height:86px; resize:vertical; line-height:1.6; } .field input:focus,.field textarea:focus,.field select:focus { border-color:var(--ink); } .helper { margin:-9px 0 21px; color:#8a8b84; font-size:10px; line-height:1.7; } .image-field { display:grid; grid-template-columns:minmax(0,1fr) 105px; gap:14px; align-items:end; padding-top:17px; border-top:1px solid #ededeb; } .image-field .image-url { grid-column:1/-1; } .image-preview { width:105px; height:74px; object-fit:cover; border:1px solid #ddd; background:#ecece7; } .image-actions { display:flex; align-items:flex-end; gap:8px; } .upload-label { display:flex; justify-content:center; align-items:center; height:34px; padding:0 10px; color:var(--ink); background:var(--accent); font-size:10px; font-weight:700; white-space:nowrap; cursor:pointer; } .upload-label input { display:none; } .item-editor { padding:21px 0; border-top:1px solid var(--line); } .item-editor:first-child { padding-top:0; border-top:0; } .item-editor-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .item-index { color:#a1a39a; font:10px DM Mono,monospace; } .item-tools { display:flex; align-items:center; gap:12px; } .check { display:flex; align-items:center; gap:7px; color:#767970; font-size:10px; } .check input { accent-color:var(--ink); } .delete { border:0; padding:5px; color:var(--danger); background:none; font-size:10px; } .delete:hover { text-decoration:underline; } .add-button { border:1px dashed #bfc0b9; padding:11px 15px; color:var(--ink); background:transparent; font-size:11px; } .add-button:hover { border-color:var(--ink); background:#fafaf7; } .article-editor,.media-editor { display:grid; grid-template-columns:1fr 1fr; gap:17px 19px; padding:22px 0; border-top:1px solid var(--line); } .article-editor:first-child,.media-editor:first-child { border-top:0; padding-top:0; } .article-editor .image-field,.media-editor .image-field { grid-column:1/-1; } .editor-actions { display:flex; justify-content:flex-end; padding-top:23px; border-top:1px solid var(--line); } .empty-editor { padding:25px; color:#8c8e85; border:1px dashed #cfd0c9; text-align:center; font-size:11px; } .category-pills { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 23px; } .category-pill { padding:7px 10px; border:1px solid var(--line); color:#7d7f76; font:10px DM Mono,monospace; } .category-pill.active { color:var(--ink); border-color:var(--ink); background:var(--accent); } .media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .media-editor { display:block; padding:0 0 23px; border:0; } .media-editor img { width:100%; aspect-ratio:1.3/1; margin-bottom:13px; object-fit:cover; } .media-editor .field { margin-bottom:11px; } .media-editor .image-field { display:block; padding:0; border:0; } .media-editor .image-preview { display:none; } .media-editor .upload-label { margin-top:7px; width:fit-content; }
.admin-toast { position:fixed; z-index:50; right:25px; bottom:25px; max-width:340px; padding:12px 16px; color:#fff; background:var(--ink); font-size:11px; opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s; } .admin-toast.show { opacity:1; transform:translateY(0); }
@media(max-width:900px) { .login-page { grid-template-columns:1fr; } .login-image { display:none; } .login-panel { width:min(420px,calc(100% - 48px)); } .login-heading { margin:75px 0 35px; } .sidebar { width:255px; transform:translateX(-100%); transition:.25s; } .sidebar.open { transform:translateX(0); box-shadow:10px 0 35px rgba(0,0,0,.2); } .sidebar-close { display:block; } .admin-main { width:100%; margin-left:0; } .admin-header { padding:21px 20px; gap:13px; } .admin-header h1 { font-size:32px; } .mobile-menu { display:block; } .header-actions { margin-left:auto; gap:10px; } .save-state { display:none; } .admin-content { padding:25px 20px 55px; } .overview-top,.overview-grid { grid-template-columns:1fr; } .form-grid,.form-grid.three,.article-editor { grid-template-columns:1fr; } .media-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:560px) { .login-panel { width:calc(100% - 40px); } .editor-heading h2 { font-size:35px; } .form-card { padding:20px 16px; } .image-field { grid-template-columns:1fr; } .image-actions { align-items:flex-start; } .media-grid { grid-template-columns:1fr; } }

/* Use the same parts-led visual language on the protected entry screen. */
.login-image { background-image:url('/assets/spectrum-hero.jpg'); background-position:center; }
.login-image-overlay { background:linear-gradient(110deg,rgba(0,0,0,.78),rgba(0,0,0,.16)); }