/* files1/style.css — light & dark theme via CSS variables. - Default: light - Auto-dark: respects system (prefers-color-scheme: dark) - Manual override: add class "dark" on to force dark, or "light" to force light. */ :root { --bg: #ffffff; --text: #111111; --muted: #555555; --card: #ffffff; --border: #e5e5e5; --shadow: rgba(0,0,0,0.04); --thumb: #f6f6f6; --accent: #e03131; /* red you liked */ --btn-text: #ffffff; --pill-bg: #000000; --pill-text: #ffffff; --link: #111111; } @media (prefers-color-scheme: dark) { :root { --bg: #0b0f15; --text: #e5e7eb; --muted: #9aa7b8; --card: #111827; --border: #1f2733; --shadow: rgba(0,0,0,0.35); --thumb: #0f1623; --accent: #ef4444; /* slightly brighter red on dark */ --btn-text: #ffffff; --pill-bg: #111827; --pill-text: #ffffff; --link: #e5e7eb; } } body.dark { --bg: #0b0f15; --text: #e5e7eb; --muted: #9aa7b8; --card: #111827; --border: #1f2733; --shadow: rgba(0,0,0,0.35); --thumb: #0f1623; --accent: #ef4444; --btn-text: #ffffff; --pill-bg: #111827; --pill-text: #ffffff; --link: #e5e7eb; } body.light { --bg: #ffffff; --text: #111111; --muted: #555555; --card: #ffffff; --border: #e5e5e5; --shadow: rgba(0,0,0,0.04); --thumb: #f6f6f6; --accent: #e03131; --btn-text: #ffffff; --pill-bg: #000000; --pill-text: #ffffff; --link: #111111; } html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); } a { color: var(--link); } .container { max-width: 1100px; margin: 0 auto; padding: 16px; } .page_title { font-size: 24px; font-weight: 800; } .category_blurb { color: var(--muted); } .card_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .card { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: 0 1px 2px var(--shadow); } .card_thumb { aspect-ratio: 16/9; background: var(--thumb); display:flex; align-items:center; justify-content:center; } .thumb_label { font-weight:600; color: var(--muted); } .card_body { padding: 10px 12px 12px; } .card_name { font-weight: 700; margin-bottom: 10px; color: var(--text); } .card_buttons { display:flex; flex-direction:column; gap:8px; } .btn { display:block; text-align:center; padding:10px 12px; border-radius:12px; text-decoration:none; user-select:none; transition: filter 120ms ease, transform 120ms ease; } .btn-read { border:1px solid var(--border); color: var(--text); background: transparent; } .btn-open { background: var(--accent); color: var(--btn-text); } .btn:hover { filter: brightness(0.98); } .btn:active { transform: translateY(1px); } /* Bottom-left number pill locked */ .card_index { position: absolute; left: 10px; bottom: 10px; background: var(--pill-bg); color: var(--pill-text); border-radius: 999px; padding: 4px 9px; font-weight: 700; font-size: 13px; line-height: 1; } .see_all_wrap { margin-top: 18px; } .see_all { display:inline-block; border:1px solid var(--border); color: var(--text); background: transparent; } /* Optional: basic toggle button styling if you add one */ .theme-toggle { appearance: none; border: 1px solid var(--border); background: transparent; color: var(--text); padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; } /* ==== Header & Burger ==== */ .site_header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); } .header_inner { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; } .brand { font-weight: 800; text-decoration: none; color: var(--text); } .header_actions { display:flex; gap:10px; align-items:center; } .burger { width:40px; height:36px; border:1px solid var(--border); background:transparent; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; } .burger span { display:block; width:20px; height:2px; background: var(--text); } .nav_drawer { position: fixed; right: -340px; top:0; bottom:0; width: 320px; background: var(--card); border-left:1px solid var(--border); box-shadow: -4px 0 12px var(--shadow); transition: right 160ms ease; z-index: 60; } .nav_drawer.open { right: 0; } .nav_drawer_inner { display:flex; flex-direction:column; height:100%; } .nav_drawer_header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); } .drawer_title { font-weight:700; } .drawer_close { background:transparent; border:1px solid var(--border); border-radius:8px; width:34px; height:34px; cursor:pointer; color:var(--text); } .nav_list { list-style:none; margin:0; padding:10px 0; } .nav_list li a { display:block; padding:10px 16px; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); } .nav_list li a:hover { background: var(--thumb); } .nav_backdrop { position: fixed; inset:0; background: rgba(0,0,0,0.2); display:none; z-index:55; } .nav_backdrop.show { display:block; } /* Breadcrumbs */ .breadcrumbs { padding: 8px 16px; font-size: 14px; color: var(--muted); } .breadcrumbs ol { list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap; } .breadcrumbs li::after { content: '/'; margin-left:8px; color: var(--border); } .breadcrumbs li:last-child::after { content: ''; } .breadcrumbs a { color: var(--muted); text-decoration:none; } .breadcrumbs a:hover { text-decoration: underline; } /* URL row with favicon */ .card_url_row { margin: 6px 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.2; } .card_url_row .favicon { border-radius: 4px; box-shadow: 0 0 0 1px var(--border); flex: 0 0 auto; } .card_url_row .card_url { color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; } .card_url_row .card_url:hover { text-decoration: underline; } /* Inside-thumb button overlay (enable with body.btns-in-thumb) */ .thumb_overlay { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px; background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.0)); transform: translateY(8px); opacity: 0; transition: opacity 140ms ease, transform 140ms ease; } .thumb_overlay .btn { flex: 1 1 0; } .btns-in-thumb .card .card_buttons { display: none; } /* hide outside buttons when inside-thumb mode is active */ .btns-in-thumb .card:hover .thumb_overlay, .btns-in-thumb .card:focus-within .thumb_overlay { opacity: 1; transform: translateY(0); } /* Always-show overlay on small screens (no hover) */ @media (max-width: 640px) { .btns-in-thumb .thumb_overlay { opacity: 1; transform: translateY(0); } }