/* ------------------------------------------------- KRATERLEUTE THEME: clean, product-y, non-neon Light/dark via data-theme on (preferred) Also respects system preference by default. -------------------------------------------------- */ :root{ /* Typography / layout */ --radius: 14px; --radius-sm: 12px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 6px 24px rgba(0,0,0,0.06); --shadow: 0 1px 2px rgba(0,0,0,0.10), 0 12px 40px rgba(0,0,0,0.10); /* Accent (single, restrained) */ --accent: #2563eb; /* blue-600-ish */ --accent-strong: #1d4ed8; /* Status */ --danger: #dc2626; --success: #16a34a; /* Transitions */ --t: 140ms ease; } /* Default = light */ :root, :root[data-theme="light"]{ --bg: #f6f7f9; --surface: #ffffff; --surface2: #f1f3f5; --text: #0f172a; /* slate-900 */ --muted: #475569; /* slate-600 */ --muted2: #64748b; /* slate-500 */ --border: rgba(15,23,42,0.10); --border-strong: rgba(15,23,42,0.16); --input-bg: #ffffff; --topbar-bg: rgba(246,247,249,0.80); --footer-bg: rgba(246,247,249,0.80); --card-bg: #ffffff; --card-grad: none; --focus: rgba(37,99,235,0.20); } /* Dark */ :root[data-theme="dark"]{ --bg: #0b0f14; --surface: #0f1620; --surface2: #121c29; --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.65); --muted2: rgba(255,255,255,0.52); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.14); --input-bg: rgba(255,255,255,0.04); --topbar-bg: rgba(11,15,20,0.70); --footer-bg: rgba(11,15,20,0.70); --card-bg: rgba(255,255,255,0.03); --card-grad: none; --focus: rgba(37,99,235,0.28); } /* If user hasn't chosen, follow system preference */ @media (prefers-color-scheme: dark){ :root:not([data-theme]){ --bg: #0b0f14; --surface: #0f1620; --surface2: #121c29; --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.65); --muted2: rgba(255,255,255,0.52); --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.14); --input-bg: rgba(255,255,255,0.04); --topbar-bg: rgba(11,15,20,0.70); --footer-bg: rgba(11,15,20,0.70); --card-bg: rgba(255,255,255,0.03); --card-grad: none; --focus: rgba(37,99,235,0.28); } } *{ box-sizing: border-box; } html,body{ height:100%; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a{ color: inherit; text-decoration: none; } h1,h2,h3{ margin: 0 0 10px; letter-spacing: -0.02em; } h1{ font-size: 30px; } h2{ font-size: 18px; } p{ margin: 0 0 12px; } .muted{ color: var(--muted); } .hint{ margin-top: 6px; font-size: 13px; color: var(--muted2); } .container{ width: min(1100px, 92vw); margin: 0 auto; } .topbar{ position: sticky; top: 0; z-index: 10; background: var(--topbar-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); } .topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; } .brand{ display:flex; align-items:center; gap: 10px; font-weight: 750; } .brand__dot{ width: 10px; height: 10px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(37,99,235,0.14); } .brand__name{ letter-spacing: -0.02em; } .nav{ display:flex; align-items:center; gap: 10px; } .nav__link{ color: var(--muted); padding: 8px 10px; border-radius: 10px; transition: background var(--t), color var(--t), border-color var(--t); border: 1px solid transparent; } .nav__link:hover{ background: var(--surface2); border-color: var(--border); color: var(--text); } .nav__form{ margin:0; } .main{ padding: 26px 0 40px; } .footer{ border-top: 1px solid var(--border); background: var(--footer-bg); padding: 22px 0; } .footer__inner{ color: var(--muted); font-size: 13px; } .card{ background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; } .divider{ height: 1px; background: var(--border); margin: 18px 0; } .pagehead{ display:flex; align-items:flex-end; justify-content:space-between; gap: 18px; margin-bottom: 16px; } .pagehead__actions{ display:flex; gap:10px; } .stack{ display:flex; flex-direction:column; gap: 14px; } .stack--tight{ gap: 10px; } .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 820px){ .grid2, .grid3{ grid-template-columns: 1fr; } .pagehead{ align-items:flex-start; flex-direction:column; } } .form{ display:flex; flex-direction:column; gap: 12px; } .field label{ display:block; color: var(--muted); font-size: 13px; margin-bottom: 6px; } .input{ width:100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); outline: none; transition: border-color var(--t), box-shadow var(--t), background var(--t); } .input:focus{ border-color: rgba(37,99,235,0.55); box-shadow: 0 0 0 4px var(--focus); } .textarea{ min-height: 140px; resize: vertical; } .actions{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-top: 6px; } .btn{ border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 10px 12px; border-radius: 12px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; gap: 8px; font-weight: 650; transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t); } .btn:hover{ background: var(--surface2); border-color: var(--border-strong); } .btn:active{ transform: translateY(1px); } .btn--primary{ border-color: rgba(37,99,235,0.45); background: var(--accent); color: white; box-shadow: 0 6px 18px rgba(37,99,235,0.22); } .btn--primary:hover{ background: var(--accent-strong); border-color: rgba(29,78,216,0.55); } .btn--ghost{ background: transparent; } .btn--ghost:hover{ background: var(--surface2); } .btn--danger{ border-color: rgba(220,38,38,0.45); background: rgba(220,38,38,0.10); } .btn--danger:hover{ background: rgba(220,38,38,0.16); } .btn--sm{ padding: 7px 10px; border-radius: 10px; font-size: 13px; } .link{ color: var(--accent); } .link:hover{ text-decoration: underline; } .flashstack{ display:flex; flex-direction:column; gap: 10px; margin-bottom: 14px; } .flash{ padding: 12px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); } .flash--error{ border-color: rgba(220,38,38,0.35); background: rgba(220,38,38,0.08); } .flash--success{ border-color: rgba(22,163,74,0.35); background: rgba(22,163,74,0.10); } .auth{ display:grid; place-items: center; min-height: calc(100vh - 220px); } .post__meta{ display:flex; align-items:center; gap: 10px; margin-bottom: 10px; color: var(--muted); } .post__text{ white-space: pre-wrap; line-height: 1.5; margin: 10px 0 0; } .post__media{ width:100%; border-radius: 14px; border: 1px solid var(--border); margin-top: 12px; background: rgba(0,0,0,0.06); max-height: 540px; object-fit: contain; } .pill{ padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); font-size: 12px; color: var(--muted); } .dot{ color: rgba(127,127,127,0.45); } .inline{ display:inline; margin:0; } .metric{ display:flex; flex-direction:column; gap: 6px; } .metric__label{ font-size: 13px; color: var(--muted); } .metric__value{ font-size: 34px; font-weight: 800; letter-spacing: -0.03em; } .kv{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; } .kv__row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .event__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; } .event__title{ font-weight: 800; font-size: 16px; margin-bottom: 6px; } .event__desc{ margin-top: 10px; white-space: pre-wrap; line-height: 1.5; } .event__actions{ display:flex; align-items:center; gap: 10px; } .empty{ text-align:center; padding: 28px; color: var(--muted); } /* Accessible focus for keyboard users */ :focus-visible{ outline: 2px solid rgba(37,99,235,0.70); outline-offset: 2px; border-radius: 10px; } .theme-toggle svg{ display: none; } :root[data-theme="light"] #iconMoon{ display: block; } :root[data-theme="light"] #iconSun{ display: none; } :root[data-theme="dark"] #iconSun{ display: block; } :root[data-theme="dark"] #iconMoon{ display: none; } /* If no explicit theme yet, follow system */ @media (prefers-color-scheme: dark){ :root:not([data-theme]) #iconSun{ display: block; } :root:not([data-theme]) #iconMoon{ display: none; } } @media (prefers-color-scheme: light){ :root:not([data-theme]) #iconMoon{ display: block; } :root:not([data-theme]) #iconSun{ display: none; } }