/* ========================================================================== Landing page — styles Same palette as the tools it links to: indigo primary, teal accent. ========================================================================== */ :root { --color-primary: #1e73be; --color-accent: #0d9488; --color-bg: #f9f9f5; --color-surface: #ffffff; --color-border: #e5e5e0; --color-text: #1c1c1c; --color-text-muted: #4d4d4d; --radius: 14px; --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06); } /* ---------- Dark theme ---------- theme.js sets data-theme on , defaulting to the OS preference. */ :root[data-theme="dark"] { --color-primary: #58a6f0; --color-accent: #2dd4bf; --color-bg: #1a1a17; --color-surface: #232320; --color-border: #35352f; --color-text: #f2f2ec; --color-text-muted: #a5a59c; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; font-weight: 600; color: var(--color-text-muted); font-size: 0.9rem; } main { flex: 1; max-width: 900px; margin: 0 auto; padding: 40px 24px; width: 100%; } .intro { text-align: center; margin-bottom: 48px; } .intro h1 { font-size: 2rem; margin: 0 0 10px; } .intro p { color: var(--color-text-muted); font-size: 1.05rem; margin: 0; } .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .tool-card { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform 0.15s ease, border-color 0.15s ease; } .tool-card:hover { border-color: var(--color-primary); transform: translateY(-2px); } .tool-card-icon { font-size: 1.8rem; display: block; margin-bottom: 12px; } .tool-card-name { font-size: 1.1rem; margin: 0 0 6px; } .tool-card-desc { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; } .site-footer { text-align: center; padding: 24px; font-size: 0.82rem; color: var(--color-text-muted); } .site-footer p { margin: 0 0 4px; } .site-footer p:last-child { margin-bottom: 0; } .site-footer a { color: var(--color-primary); } @media (max-width: 500px) { .intro h1 { font-size: 1.5rem; } } .theme-toggle { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1; cursor: pointer; } .theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); }