/* ===== Base palette (cream + coffee brown) ===== */ :root{ --bg: #fffdf5; /* light: cream */ --text: #4A2E1A; /* coffee brown text */ --muted: #7A5A48; --accent: #4A2E1A; /* brown accent */ --brand-accent: var(--accent); /* header title color (can be overridden) */ --accent-contrast: #ffffff; --card: #fffaf0; --border: #e0d6c6; --radius: 14px; --shadow: 0 10px 30px rgba(0,0,0,0.06); } /* ===== Night mode overrides (brown bg + cream text) ===== */ .mode-dark{ --bg: #4A2E1A; /* deep brown */ --text: #FFF7E8; /* warm cream text */ --muted: #E6D6C7; --card: #3E2718; /* cards a bit darker than bg */ --border: #6E4C35; } /* (OS dark preference fallback for first load if JS blocks) */ @media (prefers-color-scheme: dark){ :root:not(.mode-light){ --bg: #4A2E1A; --text: #FFF7E8; --muted: #E6D6C7; --card: #3E2718; --border: #6E4C35; } } /* ===== Category theme classes (apply to ) ===== */ .theme-misc { --accent:#D54315; --bg:#FFEAE3; --card:#FFF3EE; --border:#F5D0C8; } .theme-thoughts { --accent:#2D548A; --bg:#EAF1FB; --card:#F3F7FD; --border:#D6E2F6; } .theme-projects { --accent:#5E2418; --bg:#F8EAE7; --card:#FBF1EF; --border:#EBD1CB; } .theme-movies { --accent:#262C00; --bg:#EDF2E0; --card:#F5F8ED; --border:#DCE5CB; } .theme-books { --accent:#53582F; --bg:#EEF2E6; --card:#F6F8F0; --border:#E0E6D1; } /* On post pages, keep header title brown regardless of theme */ .post-page{ --brand-accent: #4A2E1A; } /* ===== Reset + base ===== */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family: 'Overpass', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } .container{max-width: 820px; margin: 0 auto; padding: 20px} /* ===== Header (banner stays cream everywhere) ===== */ .site-header{ border-bottom: 1px solid var(--border); background: rgba(255, 253, 245, 0.92); /* fixed cream */ backdrop-filter: blur(6px); position: sticky; top:0; z-index: 10; display:flex; align-items:center; gap: 16px; padding: 10px 20px; } .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit} .brand-text strong{ display:block; font-family: 'Overpass', sans-serif; font-size: 2.5rem; font-weight: 800; letter-spacing: 2px; color: var(--brand-accent); text-transform: uppercase; } .brand-text span{display:block; color: var(--muted); font-size: 1rem} /* Toggle button */ .mode-toggle{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background: var(--card); color: var(--text); cursor:pointer; font-weight:700; font-size:.85rem; transition: transform .15s ease, filter .2s ease, box-shadow .2s ease, background .2s ease; } .mode-toggle:hover{ transform: scale(1.05); filter: brightness(1.05); box-shadow: 0 0 10px rgba(0,0,0,0.12); } /* ===== NAV buttons ===== */ .nav a{ margin-left:12px; padding:6px 14px; border-radius:999px; text-decoration:none; font-weight:700; font-size:.9rem; display:inline-block; transition: background .2s ease, transform .15s ease, filter .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease; cursor: pointer; } .nav a[href="/"], .nav a[href="/index.html"]{ background: transparent; color: var(--text); border: 1px solid var(--border); } .nav a[href="/"]:hover, .nav a[href="/index.html"]:hover{ background: var(--card); transform: scale(1.08); filter: brightness(1.1); box-shadow: 0 0 12px rgba(74,46,26,0.35); } .nav a[href*="about"] { background:#2D548A; color:#fff; border:none; } .nav a[href*="contact"]{ background:#53582F; color:#fff; border:none; } .nav a[href*="feed"] { background:#5E2418; color:#fff; border:none; } .nav a[href*="about"]:hover { transform: scale(1.08); filter: brightness(1.15); box-shadow: 0 0 12px rgba(45,84,138,0.6); } .nav a[href*="contact"]:hover { transform: scale(1.08); filter: brightness(1.15); box-shadow: 0 0 12px rgba(83,88,47,0.6); } .nav a[href*="feed"]:hover { transform: scale(1.08); filter: brightness(1.15); box-shadow: 0 0 12px rgba(94,36,24,0.6); } /* ===== Search + tags ===== */ .controls{display:flex; flex-wrap:wrap; gap:10px; margin: 22px 0} #search-input{ flex: 1 1 260px; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--text); outline: none; } .tags{display:flex; gap:8px; align-items:center; flex-wrap:wrap} .tag{ padding:6px 14px; border-radius:999px; font-weight:700; font-size:.9rem; cursor:pointer; border:none; color:#fff; transition: transform .1s ease, filter .2s ease, box-shadow .2s ease; background: var(--accent); } .tag:hover{ transform: scale(1.05); filter: brightness(1.15); } .tag--misc { background:#D54315; } .tag--thoughts{ background:#2D548A; } .tag--projects{ background:#5E2418; } .tag--movies { background:#262C00; } .tag--books { background:#53582F; } .tag--misc:hover { box-shadow: 0 0 12px rgba(213,67,21,0.6); } .tag--thoughts:hover{ box-shadow: 0 0 12px rgba(45,84,138,0.6); } .tag--projects:hover{ box-shadow: 0 0 12px rgba(94,36,24,0.6); } .tag--movies:hover { box-shadow: 0 0 12px rgba(38,44,0,0.6); } .tag--books:hover { box-shadow: 0 0 12px rgba(83,88,47,0.6); } /* ===== Post list & cards ===== */ .post-list{list-style:none; padding:0; margin:0; display:grid; gap:16px} .post-card{ display:block; padding:16px 18px; border-radius: var(--radius); text-decoration:none; font-weight:600; cursor:pointer; background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } .post-card:hover{ transform: translateY(-4px); filter: brightness(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.15); } .post-card.tag--misc { background:#D54315; color:#fff; border:none; } .post-card.tag--misc:hover { box-shadow: 0 8px 22px rgba(213,67,21,0.6); } .post-card.tag--thoughts{ background:#2D548A; color:#fff; border:none; } .post-card.tag--thoughts:hover{ box-shadow: 0 8px 22px rgba(45,84,138,0.6); } .post-card.tag--projects{ background:#5E2418; color:#fff; border:none; } .post-card.tag--projects:hover{ box-shadow: 0 8px 22px rgba(94,36,24,0.6); } .post-card.tag--movies { background:#262C00; color:#fff; border:none; } .post-card.tag--movies:hover { box-shadow: 0 8px 22px rgba(38,44,0,0.6); } .post-card.tag--books { background:#53582F; color:#fff; border:none; } .post-card.tag--books:hover { box-shadow: 0 8px 22px rgba(83,88,47,0.6); } .post-card h2, .post-card p, .post-card .post-meta { color: inherit; margin: 0; } .post-card h2{ font-size: 1.15rem; margin-bottom: 6px; } .post-card p{ opacity: .95; } .post-meta{display:flex; gap:10px; font-size:.9rem; opacity:.9; margin-top:6px} /* ===== Misc ===== */ a{color: var(--accent)} a:hover{text-decoration: underline} .muted{color: var(--muted)} .article{max-width: 720px; margin: 24px auto; padding: 0 20px} .article h1{margin-bottom: 8px; font-size: 2rem; color: var(--accent);} .article .meta{color: var(--muted); margin-bottom: 20px} .article img{max-width:100%; border-radius: 10px} .site-footer{border-top:1px solid var(--border); margin-top: 40px; padding-top: 20px; color:var(--muted)}