:root { --color-bg-light: #fcb9f6; --color-bg-dark: #1f2233; --color-bg-grad-light: linear-gradient(120deg, #fcb9f6 0%, #a9b7c5 100%); --color-bg-grad-dark: linear-gradient(120deg, #232946 0%, #434457 100%); --color-text-light: #232946; --color-text-dark: #e7e9f0; --color-primary: #b46a57; --color-card-light: #fff; --color-card-dark: #232946; --color-accent: #b46a57; --color-accent-dark: #e8b871; --color-card-hover-light: #f8fcff; --color-card-hover-dark: #2f2f3e; --color-button-light: #b46a57; --color-button-dark: #fdac62; --color-button-hover-light: #944e45; --color-button-hover-dark: #714035; --input-bg-light: #fff; --input-bg-dark: #292a38; } /* Theme switches on [data-theme="dark"] on */ body { margin: 0; padding: 0; font-family: 'Nunito', Arial, sans-serif; min-height: 100vh; background: var(--color-bg-grad-light); color: var(--color-text-light); transition: background 0.3s, color 0.25s; } body[data-theme="dark"] { background: var(--color-bg-grad-dark); color: var(--color-text-dark); } header { text-align: center; padding: 2rem 0 0.5rem 0; font-family: 'Montserrat', Arial, sans-serif; background: var(--color-bg-grad-light); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 12px rgba(180, 106, 87, 0.1); } body[data-theme="dark"] header { background: var(--color-bg-grad-dark); box-shadow: 0 2px 8px rgba(232, 184, 113, 0.15); } h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: 0; letter-spacing: 0.03em; color: var(--color-primary); } body[data-theme="dark"] h1 { color: var(--color-accent-dark); } /* Header tools: search & toggle */ .header-tools { margin: 1em auto 1.5em auto; display: flex; justify-content: center; align-items: center; gap: 1em; max-width: 360px; padding: 0 1rem; } #search-input { flex: 1; padding: 0.55em 1em; border-radius: 8px; border: 1px solid #bdbdbd; font-size: 1.1em; outline: none; background: var(--input-bg-light); color: var(--color-text-light); box-shadow: 2px 2px 6px #fcd8ea88; transition: background 0.25s, color 0.25s, box-shadow 0.25s; } #search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 10px var(--color-primary); } body[data-theme="dark"] #search-input { background: var(--input-bg-dark); color: var(--color-text-dark); border: 1px solid #33374a; box-shadow: none; } body[data-theme="dark"] #search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); } #theme-toggle { background: none; border: none; font-size: 1.6em; cursor: pointer; padding: 0.28em 0.5em; border-radius: 50%; transition: background 0.2s; color: var(--color-primary); box-shadow: 1px 1px 5px #fbb6d988; } #theme-toggle:hover, #theme-toggle:focus { background-color: var(--color-button-light); color: white; box-shadow: 0 0 8px var(--color-button-light); outline: none; } body[data-theme="dark"] #theme-toggle { color: var(--color-accent-dark); box-shadow: 1px 1px 6px #eba94899; } body[data-theme="dark"] #theme-toggle:hover, body[data-theme="dark"] #theme-toggle:focus { background-color: var(--color-button-dark); color: #242021; box-shadow: 0 0 10px var(--color-button-dark); } #theme-icon { pointer-events: none; } .watermark { font-family: 'Indie Flower', cursive; font-size: 1rem; font-weight: 600; margin-left: 0.7em; opacity: 0.75; color: #ffffffcc; user-select: none; vertical-align: middle; } main { max-width: 900px; margin: 2rem auto 0; padding: 0 1rem; min-height: 70vh; } #web-intro { text-align: center; margin-top: 0px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--color-primary); text-shadow: 1px 1px 3px #fcd8ea88; user-select: none; } .controls { text-align: center; margin-bottom: 2.5rem; } label { font-weight: 600; margin-right: 0.7em; font-size: 1em; color: var(--color-primary); } #preview-input { width: 70vw; max-width: 380px; padding: 0.55em 1em; font-size: 1.15em; border-radius: 10px; border: 1.5px solid #bdbdbdc7; background: var(--input-bg-light); color: var(--color-text-light); box-shadow: 2px 2px 7px #fcd8ea88; transition: background 0.25s, color 0.25s, box-shadow 0.25s; } #preview-input:focus { border-color: var(--color-primary); box-shadow: 0 0 12px var(--color-primary); outline: none; } body[data-theme="dark"] #preview-input { background: var(--input-bg-dark); color: var(--color-text-dark); border: 1.5px solid #33374a; box-shadow: none; } body[data-theme="dark"] #preview-input:focus { border-color: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); outline: none; } footer { text-align: center; color: #8582ad; padding: 2em 0 1em 0; background: transparent; margin-top: 3em; font-size: 1em; user-select: none; } #gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5em; max-width: 900px; margin: 0 auto 2rem auto; padding: 0 1rem; } .font-card { background: var(--color-card-light); border-radius: 14px; padding: 1.2em 1.4em 1.8em 1.4em; box-shadow: 0 3px 14px rgba(180, 106, 87, 0.1); display: flex; flex-direction: column; justify-content: space-between; transition: background 0.22s, box-shadow 0.24s; cursor: default; user-select: text; } body[data-theme="dark"] .font-card { background: var(--color-card-dark); box-shadow: 0 3px 16px #10111b88; } .font-card:hover { background: var(--color-card-hover-light); box-shadow: 0 4px 18px rgba(180, 106, 87, 0.25); } body[data-theme="dark"] .font-card:hover { background: var(--color-card-hover-dark); box-shadow: 0 6px 22px #0e151fbb; } .font-name { font-family: 'Montserrat', Arial, sans-serif; color: var(--color-primary); font-weight: 700; font-size: 1.3em; margin-bottom: 0.4em; user-select: text; letter-spacing: 0.02em; } body[data-theme="dark"] .font-name { color: var(--color-accent-dark); } .font-license { font-size: 0.95em; color: #978aad; margin-bottom: 0.8em; font-style: italic; user-select: none; } body[data-theme="dark"] .font-license { color: #cfc1e3; } .font-preview { flex-grow: 1; background: #f3f7fc; border-radius: 10px; padding: 0.7em 1.2em; margin-bottom: 1.3em; color: var(--color-text-light); min-height: 3.2em; font-size: 1.15em; line-height: 1.35; box-shadow: inset 0 0 4px #d1d9f2aa; user-select: text; transition: background 0.3s, color 0.3s; } body[data-theme="dark"] .font-preview { background: #22263b; color: var(--color-text-dark); box-shadow: inset 0 0 5px #121529ee; } .download-button { display: inline-block; background-color: var(--color-button-light); color: white; text-decoration: none; font-weight: 600; padding: 0.5em 1.15em; border-radius: 22px; text-align: center; font-size: 1em; user-select: none; box-shadow: 2px 2px 10px #b4645766; transition: background-color 0.25s, color 0.2s, box-shadow 0.3s; align-self: flex-start; cursor: pointer; } .download-button:hover { background-color: var(--color-button-hover-light); box-shadow: 0 0 13px var(--color-button-hover-light); color: white; } body[data-theme="dark"] .download-button { background-color: var(--color-button-dark); color: #242021; box-shadow: 2px 2px 11px #fdad6277; } body[data-theme="dark"] .download-button:hover { background-color: var(--color-button-hover-dark); box-shadow: 0 0 14px var(--color-button-hover-dark); color: #fff; }