:root { --bg: #1a0d2b; --panel: #0e1627; --card: #2b1a47; --muted: #b8a4d2; --accent: #a100a1; --glass: rgba(161, 0, 161, 0.1); --glass-2: rgba(161, 0, 161, 0.05); --text: #e6d7f8; --button-text: #2b0047; --radius: 12px; --surface: #2b1a47; /* fallback */ --border: #4a2e6e; --primary: #a100a1; /* default accent */ --success: #34d058; --danger: #ff4d4d; --warning: #ffaa00; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --repeat-gradient: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 48px); --font-family: 'Inter', ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial; } /* Purple Magic Theme (default) */ [data-theme="purple"] { --bg: #1a0d2b; --panel: #0e1627; --card: #2b1a47; --muted: #b8a4d2; --accent: #a100a1; --glass: rgba(161, 0, 161, 0.1); --glass-2: rgba(161, 0, 161, 0.05); --text: #e6d7f8; --button-text: #2b0047; --surface: #2b1a47; --border: #4a2e6e; --primary: #a100a1; --success: #34d058; --danger: #ff4d4d; --warning: #ffaa00; } /* Classic Dark Theme */ [data-theme="dark"] { --bg: #071021; --panel: #0e1627; --card: #0e1627; --muted: #b0b8c4; --accent: #36b37e; --glass: rgba(54, 179, 126, 0.12); --glass-2: rgba(54, 179, 126, 0.05); --text: #e6eef6; --button-text: #042018; --surface: #0e1627; --border: #1e2a3c; --primary: #36b37e; --success: #34d058; --danger: #ff6b6b; --warning: #ffaa00; } /* Light Theme */ [data-theme="light"] { --bg: #f0f4f8; --panel: #ffffff; --card: #ffffff; --muted: #6b7280; --accent: #10b981; --glass: rgba(16, 185, 129, 0.08); --glass-2: rgba(16, 185, 129, 0.03); --text: #1f2937; --button-text: #ffffff; --surface: #ffffff; --border: #d1d5db; --primary: #10b981; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; } /* Nether Theme */ [data-theme="nether"] { --bg: #2f0b0b; --panel: #3f1616; --card: #3f1616; --muted: #d4a29a; --accent: #e25822; --glass: rgba(226, 88, 34, 0.15); --glass-2: rgba(226, 88, 34, 0.06); --text: #f4d7d3; --button-text: #3f1208; --surface: #3f1616; --border: #5c1f1f; --primary: #e25822; --success: #ff8c00; --danger: #ff3333; --warning: #ffaa00; } *{box-sizing:border-box;margin:0;padding:0} /* Font Classes */ .font-default { font-family: var(--font-family); } .font-pressstart { font-family: 'Press Start 2P', cursive; font-size: 16px; } .font-vt323 { font-family: 'VT323', monospace; font-size: 18px; } html, body { max-width: 100%; overflow-x: hidden; } body { font-family: var(--font-family); background: var(--bg); color: var(--text); margin: 0; line-height: 1.6; transition: background 0.4s, color 0.4s; } /* Hero Content */ .center { width: 100%; margin: 5px auto 10px auto; padding: clamp(20px, 5vw, 40px) clamp(12px, 2vw, 20px); } /* About Hero */ .about-hero { text-align: center; padding: clamp(5px, 2vw, 10px) clamp(12px, 2vw, 20px); background: var(--repeat-gradient); } .about-hero h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: clamp(12px, 2vw, 20px); width: 100%; } .about-hero p { font-size: clamp(0.9rem, 2.5vw, 1.1rem); max-width: 600px; margin: 0 auto clamp(16px, 3vw, 30px); color: var(--muted); } .cta-buttons { display: flex; gap: clamp(12px, 2vw, 16px); justify-content: center; flex-wrap: wrap; } .cta-button { padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2.5vw, 24px); font-size: clamp(1rem, 2vw, 1.1rem); font-weight: 600; color: var(--text); background: var(--accent); border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease; } .cta-button:hover, .cta-button:focus { transform: translateY(-5px); box-shadow: 0 5px 15px var(--glass); } .cta-button.secondary { background: var(--card); border: 1px solid var(--glass); color: var(--text); } .theme { background: var(--card); color: var(--text); border: 1px solid var(--glass); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); z-index: 1001; width: 30%; margin: auto; margin-bottom: 15px; text-align: center; font-size: 22px; } .theme select { background: var(--panel); color: var(--text); border-radius: 6px; padding: 8px 12px; font-size: 1rem; cursor: pointer; } /*app section*/ /* Generator Section */ main { flex: 1; width: 100%; margin: 0 auto; padding: 16px; display: grid; gap: 16px; max-width: 1100px; /* Keep for large screens */ } /* On small screens, remove max-width constraint */ @media (max-width: 1100px) { main { max-width: 100%; padding: 12px; /* Reduce padding to avoid squeezing */ } } textarea { width: 100%; min-height: 100px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 1rem; } .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .toolbar strong { white-space: nowrap; margin-right: 4px; } .toolbar button { background: #000; border: 1px solid var(--border); color: #fff; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; min-width: 44px; min-height: 44px; } .toolbar button:hover { border-color: var(--accent) } .colors { display: grid; grid-template-columns: repeat(8, minmax(36px, 1fr)); /* Original on large screens */ gap: 6px; max-width: 100%; /* Allow full width */ overflow-x: auto; /* Enable horizontal scroll on overflow */ padding-bottom: 8px; /* Space for scrollbar if needed */ scroll-snap-type: x mandatory; /* Optional: snap to each color */ -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */ } /* On very small screens, make columns even smaller */ @media (max-width: 480px) { .colors { grid-template-columns: repeat(6, minmax(32px, 1fr)); gap: 4px; } } .color { aspect-ratio: 1/1; border-radius: 6px; cursor: pointer; border: 1px solid #000; } .outputs { display: grid; grid-template-columns: 1fr; gap: 16px; } .output-format { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #fff; } .output-format label { font-weight: 600; } .output-format select { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 0.8rem; cursor: pointer; } .card { background: #000; border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .card h3 { font-size: 1.1rem; text-align: center; color: #fff; } .preview-box { min-height: 80px; padding: 12px; border-radius: 8px; background: #111; color: #fff; word-break: break-word; font-size: 1.15rem; line-height: 1.4; font-family: "Noto Sans CJK JP", "Noto Sans CJK SC", "Segoe UI Symbol", system-ui, sans-serif; } .meta { display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; color: var(--muted); } .app-copy { background: var(--accent); color: var(--text); border: none; border-radius: 6px; padding: 8px 12px; font-weight: 600; cursor: pointer; min-height: 44px; transition: background 0.3s; } .app-copy.copied { background: #166534; color: #fff; } .badge { color: #fff; font-size: 0.75rem; } /* Responsive improvements */ @media (min-width: 640px) { .outputs { grid-template-columns: 1fr 1fr; } .toolbar { justify-content: flex-start; } } @media (max-width: 480px) { header { padding: 12px; } main { padding: 12px; } textarea { min-height: 90px; font-size: 1rem; } .toolbar button { padding: 10px 8px; font-size: 0.85rem; } .preview-box { font-size: 1.1rem; } } .color-main { max-width: 1200px; margin: auto; margin-top: 30px; margin-bottom: 30px; } h2 { color: var(--primary); text-align: center; margin-bottom: 8px; font-size: 2.2rem; } .subtitle { text-align: center; color: #888; margin-bottom: 32px; font-size: 1.05rem; } .controls { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-bottom: 32px; padding: 12px 0; position: sticky; top: 0; background: var(--bg); z-index: 100; backdrop-filter: blur(8px); } .search { padding: 12px 16px; width: 340px; max-width: 100%; border: 1px solid var(--border); border-radius: 10px; font-size: 16px; background: var(--surface); color: var(--text); transition: border-color 0.3s; } .search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(85, 255, 85, 0.2); } .view-toggle button { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; background: var(--surface); color: var(--text); transition: all 0.2s; } .view-toggle button.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } /* Grid View */ .colors-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 24px; } .color-card { background: var(--surface); border-radius: 12px; padding: 24px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 24px; transition: transform 0.25s, box-shadow 0.25s; } .color-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .swatch { width: 90px; height: 90px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border: 1px solid var(--border); } .info h3 { margin: 0 0 16px; font-size: 1.5rem; color: var(--primary); } .details { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; font-family: 'Courier New', monospace; font-size: 15px; } .label { font-weight: bold; color: var(--primary); white-space: nowrap; } .value { display: flex; align-items: center; gap: 8px; position: relative; } .copy { cursor: pointer; font-size: 18px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--border); transition: all 0.2s; user-select: none; } .copy:hover { background: var(--primary); color: #fff; transform: scale(1.1); } .copy.copied { background: var(--success); color: white; } /* Table / List View */ .list-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } .list-table thead { background: var(--primary); color: #fff; } .list-table th, .list-table td { padding: 16px; text-align: left; border-bottom: 1px solid var(--border); } .list-table tbody tr:hover { background: rgba(85, 255, 85, 0.08); } .list-swatch { width: 50px; height: 50px; border-radius: 8px; display: inline-block; vertical-align: middle; margin-right: 12px; border: 1px solid var(--border); } .list-name { font-weight: bold; font-size: 1.1em; } /* Mobile table → stacked cards */ @media (max-width: 768px) { .list-table thead { display: none; } .list-table tr { display: block; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 12px; } .list-table td { display: flex; justify-content: space-between; padding: 10px 12px; border: none; text-align: right; } .list-table td::before { content: attr(data-label); font-weight: bold; color: var(--primary); text-align: left; flex: 1; } .color-card { flex-direction: column; } } /* Toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--success); color: white; padding: 12px 28px; border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transition: opacity 0.4s, transform 0.4s; z-index: 1000; font-weight: 500; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(-8px); } .preview-icon { width: 90px; height: 90px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--primary); flex-shrink: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } a, button, input, select, textarea { color: var(--text); } button, .cta-button, .app-copy { background: var(--accent); color: var(--button-text); border: none; } button:hover, .cta-button:hover, .app-copy:hover { background: color-mix(in srgb, var(--accent) 80%, white); } .copy:hover { background: var(--primary); color: var(--button-text); } .color-card, .card, .list-table { background: var(--card); border: 1px solid var(--border); color: var(--text); } .list-table thead { background: var(--primary); color: var(--button-text); } .list-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .search { background: var(--panel); color: var(--text); border: 1px solid var(--border); } .search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent); } .view-toggle button { background: var(--panel); color: var(--text); border: 1px solid var(--border); } .view-toggle button.active { background: var(--primary); color: var(--button-text); } /* Shadows & glass effects adapt to theme */ .color-card, .list-table, .card { box-shadow: var(--shadow); } .preview-icon { background: var(--surface); border: 1px solid var(--border); color: var(--primary); } /* Ensure text contrast */ h2, h3 { color: var(--primary); } .subtitle, .muted, .label { color: var(--muted); } /* Make sure copy buttons are visible */ .copy { background: var(--border); color: var(--text); } .copy:hover { background: var(--primary); color: var(--button-text); } .copy.copied { background: var(--success); color: #fff; } /* Toast adapts to theme */ .toast { background: var(--success); color: #fff; } /* FAQ Section - Special Styles */ .faq-section { max-width: 900px; margin: 80px auto 40px; } .faq-section h2 { text-align: center; margin-bottom: 24px; color: var(--primary); } .faq-subtitle { text-align: center; color: var(--muted); margin-bottom: 40px; font-size: 1.05rem; } .faq-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .faq-item { border-bottom: 1px solid var(--border); } .faq-item:last-child { border-bottom: none; } .faq-item summary { padding: 20px 24px; font-weight: 600; font-size: 1.1rem; color: var(--text); cursor: pointer; list-style: none; position: relative; transition: background 0.2s ease; } .faq-item summary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "▼"; position: absolute; right: 24px; transition: transform 0.3s ease; color: var(--muted); font-size: 0.9rem; } .faq-item[open] summary::after { transform: rotate(180deg); } .faq-item[open] summary { background: color-mix(in srgb, var(--accent) 12%, transparent); } .faq-content { padding: 0 24px 24px; color: var(--muted); line-height: 1.6; } .faq-content p, .faq-content ul, .faq-content pre { margin: 16px 0; } .faq-content code { background: var(--panel); padding: 2px 6px; border-radius: 4px; font-family: monospace; } .faq-content pre { background: var(--panel); padding: 16px; border-radius: 8px; overflow-x: auto; font-size: 0.9rem; } .faq-content ul { padding-left: 24px; } .faq-content li { margin-bottom: 8px; } /* Mobile adjustments */ @media (max-width: 768px) { .faq-item summary { padding: 16px 20px; } .faq-content { padding: 0 20px 20px; } } /* Color name cell styling */ .color-name-cell { font-weight: 600; text-align: center; color: #000; /* default dark text */ } /* Auto-adjust text color for light backgrounds */ .color-name-cell.light-bg { color: #000; } /* Auto-adjust for dark backgrounds */ .color-name-cell.dark-bg { color: #fff; } /* Optional border for white/pale colors */ .color-name-cell.pale-bg { border: 1px solid #ccc; } a {text-decoration: none;}