@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Syne+Mono&family=Instrument+Serif:ital@0;1&display=swap'); /* ═══════════════════════════════════════════ DESIGN TOKENS — Ink & Paper Theme ═══════════════════════════════════════════ */ :root { --maxw: 1200px; /* Ink palette */ --ink-black: #0d0d0d; --ink-deep: #1a1a1a; --ink-mid: #2e2e2e; --ink-soft: #4a4a4a; /* Paper palette */ --paper-white: #fafaf8; --paper-off: #f4f3ef; --paper-warm: #edeae2; --paper-tan: #e2ddd5; /* Accent — electric lime pop */ --ac: #c8f000; --ac-dim: #a8cc00; --ac-glow: rgba(200, 240, 0, 0.18); --ac-ring: rgba(200, 240, 0, 0.30); /* Semantic */ --bg: var(--paper-white); --surface: var(--paper-off); --surface-2: var(--paper-warm); --surface-3: var(--paper-tan); --text-primary: var(--ink-black); --text-secondary: var(--ink-soft); --text-muted: #888880; --border: rgba(0, 0, 0, .10); --border-soft: rgba(0, 0, 0, .07); --border-mid: rgba(0, 0, 0, .16); --shadow-xs: 0 1px 3px rgba(0, 0, 0, .07); --shadow-sm: 0 4px 16px rgba(0, 0, 0, .09), 0 1px 4px rgba(0, 0, 0, .05); --shadow-md: 0 12px 40px rgba(0, 0, 0, .12), 0 3px 10px rgba(0, 0, 0, .07); --shadow-ac: 0 0 28px rgba(200, 240, 0, .22); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; --ftfamily: 'Syne', system-ui, sans-serif; --display: 'Instrument Serif', Georgia, serif; --mono: 'Syne Mono', monospace; --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* ═══════════════════════════════════════════ DARK MODE TOKENS Applied via: or Toggle with JS: document.documentElement.classList.toggle('dark') ═══════════════════════════════════════════ */ .dark { /* Surfaces */ --bg: #0f0f0e; --surface: #1a1a18; --surface-2: #222220; --surface-3: #2a2a28; /* Text */ --text-primary: #f0efe9; --text-secondary: #a8a89e; --text-muted: #666660; /* Borders */ --border: rgba(255, 255, 255, .09); --border-soft: rgba(255, 255, 255, .06); --border-mid: rgba(255, 255, 255, .14); /* Shadows (deeper on dark) */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, .30); --shadow-sm: 0 4px 16px rgba(0, 0, 0, .40), 0 1px 4px rgba(0, 0, 0, .25); --shadow-md: 0 12px 40px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .35); --shadow-ac: 0 0 28px rgba(200, 240, 0, .18); } /* ═══════════════════════════════════════════ THEME TOGGLE BUTTON ═══════════════════════════════════════════ */ #themeToggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-mid); background: var(--surface); color: var(--text-secondary); font-family: var(--ftfamily); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .22s var(--ease-out); white-space: nowrap; flex-shrink: 0; } #themeToggle:hover { border-color: var(--ac); background: var(--ac); color: var(--ink-black); box-shadow: 0 4px 14px rgba(200, 240, 0, .30); } /* Sun/moon icons inside the toggle */ #themeToggle .icon-sun, #themeToggle .icon-moon { font-size: 15px; line-height: 1; } /* In light mode: show moon (clicking switches to dark) */ #themeToggle .icon-moon { display: inline; } #themeToggle .icon-sun { display: none; } #themeToggle .label-dark { display: inline; } #themeToggle .label-light { display: none; } /* In dark mode: show sun (clicking switches to light) */ .dark #themeToggle .icon-moon { display: none; } .dark #themeToggle .icon-sun { display: inline; } .dark #themeToggle .label-dark { display: none; } .dark #themeToggle .label-light { display: inline; } /* ─── Dark mode overrides for specific elements ─── */ /* Header */ .dark header { background: #0a0a09; } /* Cards */ .dark .stylishfontgenerator li { background: var(--surface); } .dark li p:hover, .dark li p:focus { background: var(--surface-2); } .dark .stylishfontgenerator li button { background: var(--surface-2); color: var(--text-secondary); } .dark .stylishfontgenerator li button:hover { background: var(--ac); color: var(--ink-black); } /* Input */ .dark .input-section { background: var(--bg); border-color: var(--border); } .dark .input-section input { background: var(--surface); color: var(--text-primary); border-color: var(--border-mid); } .dark .input-section input::placeholder { color: var(--text-muted); } .dark .input-section input:focus { border-color: rgba(200, 240, 0, .6); } /* Top menu pills */ .dark #topMenu a { background: var(--surface); border-color: var(--border); color: var(--text-secondary); } .dark #topMenu a:hover, .dark #topMenu a.active { color: var(--ink-black); } /* Buttons */ .dark .btn { background: var(--ac); color: var(--ink-black); } .dark .btn:hover { background: #d4ff1a; } .dark .btn.secondary { background: var(--surface); color: var(--text-secondary); border-color: var(--border-mid); } .dark .btn.secondary:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-mid); } .dark button#menu { background: var(--surface); border-color: var(--border-mid); color: var(--text-secondary); } .dark button#menu:hover { background: var(--ac); color: var(--ink-black); border-color: var(--ac); } /* Floating buttons */ .dark .buttons button { background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border-mid); } .dark .buttons button:hover { background: var(--ac); color: var(--ink-black); } /* Side drawer */ .dark .f-m { background: var(--surface); border-color: var(--border-mid); } .dark .floatmenu a, .dark .right-menu a { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border-soft); } .dark .floatmenu a:hover, .dark .right-menu a:hover { background: var(--ac); color: var(--ink-black); border-color: var(--ac); } .dark .close-button { background: var(--surface); border-color: var(--border-mid); color: var(--text-secondary); } .dark .close-button:hover { background: var(--ac); color: var(--ink-black); border-color: var(--ac); } /* Popup */ .dark .popup-box { background: var(--surface); box-shadow: var(--shadow-md), 0 0 0 1.5px var(--border-mid); } .dark .popup-header { background: var(--surface-2); border-color: var(--border); } .dark .popup-header h3 { color: var(--text-primary); } .dark .popup-header button:hover { background: var(--ac); color: var(--ink-black); } .dark #flourishList li { background: var(--surface-2); border-color: var(--border-soft); } .dark #flourishList li:hover { border-color: var(--border-mid); box-shadow: 3px 3px 0 0 var(--ac); } .dark #flourishList li p { color: var(--text-primary); } .dark .flourishit { background: var(--surface-2); border-color: var(--border); } .dark #flourishSelect { background: var(--surface); color: var(--text-primary); border-color: var(--border-mid); } /* Info text block */ .dark .info-text { background: var(--surface); border-color: var(--border-soft); } .dark .info-text h1 { color: var(--text-primary); -webkit-text-fill-color: var(--text-primary); border-color: var(--border); } .dark .info-text h2 { color: var(--text-primary); } .dark .info-text h3 { color: var(--text-secondary); } .dark .info-text p { color: var(--text-secondary); } .dark .info-text strong { color: var(--text-primary); } .dark .info-text code { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-soft); } .dark .info-text .example-box { background: var(--surface-2); } .dark .info-text .example-box li { background: var(--surface-3); border-color: var(--border-soft); color: var(--text-primary); } /* Other tools */ .dark #othertools a { background: var(--surface); color: var(--text-secondary); border-color: var(--border-soft); } .dark #othertools a:hover { background: var(--ink-black); color: var(--ac); border-color: var(--ink-black); } /* Random cloud */ .dark #randomcloud p { color: var(--text-secondary); } .dark #randomcloud p:hover { color: var(--text-primary); } /* Ads placeholder */ .dark .ads { background: var(--surface-2); border-color: var(--border-mid); } /* Smooth theme transition on all elements */ *, *::before, *::after { transition: background-color .25s ease, border-color .25s ease, color .18s ease, box-shadow .25s ease; } /* Exclude transitions that shouldn't animate */ .loader, .loader * { transition: none !important; } /* ═══════════════════════════════════════════ RESET ═══════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } a { text-decoration: none; } body { font-family: var(--ftfamily); font-size: 15px; line-height: 1.65; color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; padding-bottom: 80px; /* Subtle paper grain */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E"); } h1 { font-family: var(--display); font-size: 2.2rem; font-weight: 400; font-style: italic; letter-spacing: -.2px; color: var(--text-primary); margin: 0; } h2 { font-family: var(--ftfamily); font-weight: 700; font-size: 1rem; color: var(--text-secondary); letter-spacing: .04em; text-transform: uppercase; } h3 { font-family: var(--ftfamily); font-weight: 600; color: var(--text-secondary); } /* ═══════════════════════════════════════════ HEADER ═══════════════════════════════════════════ */ header { background: var(--ink-black); position: relative; z-index: 50; } /* Lime accent stripe */ header::after { content: ''; display: block; height: 3px; width: 100%; background: var(--ac); position: absolute; bottom: 0; left: 0; } header .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } header a { color: rgba(250, 250, 248, .45); padding: 7px 13px; cursor: pointer; font-size: .82rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; transition: color .18s; } header a:hover { color: var(--ac); } .entry-header { width: 100%; text-align: center; } .entry-header p { color: #555; } /* ═══════════════════════════════════════════ CONTAINER ═══════════════════════════════════════════ */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* ═══════════════════════════════════════════ TOP MENU ═══════════════════════════════════════════ */ #topMenu { display: flex; align-items: center; gap: 5px; padding: 12px 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scroll-behavior: smooth; scrollbar-width: none; } #topMenu::-webkit-scrollbar { display: none; } #topMenu a { display: inline-flex; align-items: center; padding: 6px 15px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); border: 1.5px solid var(--border); background: white; transition: all .2s var(--ease-out); white-space: nowrap; } #topMenu a:hover, #topMenu a.active { color: var(--ink-black); background: var(--ac); border-color: var(--ac); box-shadow: 0 4px 14px rgba(200, 240, 0, .35); } #topMenu h3 { font-size: .65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .14em; margin: 0 8px; white-space: nowrap; } /* ═══════════════════════════════════════════ INPUT SECTION ═══════════════════════════════════════════ */ .input-section { display: flex; position: sticky; top: 0; z-index: 40; padding: 14px 0; gap: 10px; align-items: center; background: var(--bg); /* Frosted glass strip */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } .input-section div { width: 100%; position: relative; } .input-section input { width: 100%; padding: 16px 52px 16px 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-mid); background: white; font-family: var(--ftfamily); font-size: 1rem; font-weight: 500; color: var(--text-primary); outline: none; box-shadow: var(--shadow-xs); transition: border-color .22s, box-shadow .22s, transform .18s var(--ease-spring); letter-spacing: .01em; } .input-section input::placeholder { color: var(--text-muted); font-weight: 400; } .input-section input:focus { border-color: var(--ink-black); box-shadow: 0 0 0 3px var(--ac-ring), var(--shadow-ac); transform: translateY(-1px); } #input-count { position: absolute; right: 28px; bottom: 4px; font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .05em; } .clear-overlay { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; color: var(--text-muted); transition: color .2s, background .2s; z-index: 10; } .clear-overlay:hover { color: var(--ink-black); background: var(--surface-2); } /* ═══════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 26px; border-radius: var(--radius-pill); border: 1.5px solid transparent; font-family: var(--ftfamily); font-size: .72rem; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; cursor: pointer; background: var(--ink-black); color: var(--ac); box-shadow: var(--shadow-sm); transition: transform .15s var(--ease-spring), box-shadow .2s, background .2s; white-space: nowrap; } .btn:hover { background: var(--ac); color: var(--ink-black); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200, 240, 0, .35); } .btn:active { transform: scale(.97); } .btn.secondary { background: white; color: var(--text-secondary); border-color: var(--border-mid); box-shadow: var(--shadow-xs); } .btn.secondary:hover { border-color: var(--ink-black); color: var(--ink-black); background: var(--surface-2); box-shadow: var(--shadow-sm); } button.btn.closeit { background: #1a0000; color: #ff8080; border-color: rgba(200, 60, 60, .3); } button#menu { font-size: 1.3rem; height: 44px; width: 44px; border-radius: var(--radius-md); border: 1.5px solid var(--border-mid); background: white; box-shadow: var(--shadow-xs); transition: all .2s; color: var(--text-secondary); } button#menu:hover { border-color: var(--ink-black); background: var(--ac); color: var(--ink-black); } /* ═══════════════════════════════════════════ RANDOM CLOUD ═══════════════════════════════════════════ */ #randomcloud { text-align: center; width: 100%; height: 70px; overflow: auto; scrollbar-width: none; } #randomcloud::-webkit-scrollbar { display: none; } #randomcloud li { background: transparent; border: none; box-shadow: none; } #randomcloud p { color: var(--text-secondary); background: transparent; text-align: center; border: none; font-size: 26px !important; padding: 10px 0 0; margin: 0; cursor: pointer; transition: color .2s, transform .2s var(--ease-spring); font-family: 'Syne Mono', monospace; } #randomcloud p:hover { color: var(--ink-black); transform: scale(1.15); } #randombutton { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill); padding: 14px 32px; margin-top: 12px; background: var(--ink-black); color: var(--ac); font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1.1rem; border: 1.5px solid var(--ink-black); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease-spring), box-shadow .2s, background .2s, color .2s; } #randombutton:hover { background: var(--ac); color: var(--ink-black); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(200, 240, 0, .30); } /* ═══════════════════════════════════════════ FONT SIZE CONTROLLER ═══════════════════════════════════════════ */ .font-size-controller { display: flex; align-items: center; gap: 14px; justify-content: flex-end; padding: 10px 0; } .font-size-controller label { font-size: .68rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; } .font-size-controller input[type="range"] { width: 200px; height: 3px; background: var(--surface-3); border-radius: var(--radius-pill); outline: none; appearance: none; -webkit-appearance: none; cursor: pointer; } .font-size-controller input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--ink-black); border: 3px solid var(--ac); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); transition: transform .15s var(--ease-spring); cursor: grab; } .font-size-controller input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.3); } /* ═══════════════════════════════════════════ RESULTS GRID ═══════════════════════════════════════════ */ #results { width: 100%; } .grid ul { display: grid; margin: 0; padding: 0; gap: 8px; grid-template-columns: repeat(3, 1fr); } .stylishfontgenerator li { display: flex; align-items: stretch; position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid var(--border-soft); background: white; transition: border-color .22s, box-shadow .22s, transform .22s var(--ease-spring); } .stylishfontgenerator li:hover { border-color: var(--ink-black); transform: translateY(-2px); box-shadow: var(--shadow-sm), 4px 4px 0 0 var(--ac); } li p { background: transparent; padding: 12px 0 22px 14px; margin: 0; color: var(--text-primary); cursor: pointer; user-select: none; text-align: left; width: 100%; position: relative; white-space: normal; word-break: break-word; font-family: 'Syne Mono', monospace; overflow: hidden; border: none; transition: color .2s, background .2s; line-height: 1.55; } li p:hover, li p:focus { outline: none; background: var(--surface); } li i { position: absolute; bottom: 3px; left: 14px; font-size: 11px; font-weight: 700; color: var(--text-muted); z-index: 2; display: flex; align-items: baseline; gap: 4px; letter-spacing: .04em; text-transform: uppercase; font-style: normal; font-family: var(--ftfamily); } .stylishfontgenerator li button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 8px 16px 8px 10px; gap: 4px; color: var(--text-secondary); background: var(--surface); border: none; border-left: 1px solid var(--border-soft); cursor: pointer; font-family: var(--ftfamily); letter-spacing: .08em; text-transform: uppercase; transition: background .18s, color .18s; } .stylishfontgenerator li button:hover { background: var(--ac); color: var(--ink-black); } /* ═══════════════════════════════════════════ FLOATING BUTTONS ═══════════════════════════════════════════ */ .buttons { position: fixed; right: 14px; bottom: 80px; z-index: 99; display: flex; flex-direction: column-reverse; gap: 4px; } .buttons button { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--ink-black); border: none; box-shadow: var(--shadow-md); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s var(--ease-spring); color: white; } .buttons button:hover { background: var(--ac); color: var(--ink-black); transform: scale(1.10); box-shadow: 0 8px 24px rgba(200, 240, 0, .30); } #bulbBtn svg { stroke: var(--ac); } #bulbBtn:hover svg { stroke: var(--ink-black); } button, #othertools a { display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: transparent; font-size: 16px; line-height: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-family: var(--ftfamily); } button:hover { opacity: .88; } #othertools a { padding: 9px 16px; background: white; color: var(--text-secondary); border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; border: 1.5px solid var(--border-soft); transition: all .2s; letter-spacing: .04em; text-transform: uppercase; } #othertools a:hover { background: var(--ink-black); color: var(--ac); border-color: var(--ink-black); } svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; } /* ═══════════════════════════════════════════ SIDE DRAWER ═══════════════════════════════════════════ */ .f-m { position: fixed; top: 0; right: 0; width: 300px; height: 100%; background: white; border-left: 1.5px solid var(--border-mid); box-shadow: -10px 0 50px rgba(0, 0, 0, .14); z-index: 9999; display: none; overflow-y: auto; padding: 24px 20px; } .floatmenu h3 { color: var(--text-muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; margin-bottom: 8px; } .floatmenu a, .right-menu a { display: inline-block; align-items: center; padding: 9px 14px; border-radius: var(--radius-md); font-size: .85rem; font-weight: 600; color: var(--text-secondary); background: var(--surface); border: 1.5px solid var(--border-soft); margin: 5px; transition: all .2s; font-family: var(--ftfamily); scroll-snap-align: start; white-space: nowrap; } .floatmenu a:hover, .right-menu a:hover { color: var(--ink-black); background: var(--ac); border-color: var(--ac); } .stylish-font-list { margin-bottom: 24px; } .stylish-font-list h2 { color: var(--text-secondary); margin-bottom: 10px; font-size: .9rem; } .info-text { white-space: normal; word-break: break-word; } .info-text img { max-width: 100%; border-radius: var(--radius-md); } .info-text ul { overflow: auto; } .fAr { display: none; } #fMN { overflow: auto; } #menu { color: var(--text-secondary); } .close-button { position: fixed; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 18px; border: 1.5px solid var(--border-mid); border-radius: var(--radius-md); color: var(--text-secondary); background: white; box-shadow: var(--shadow-xs); cursor: pointer; transition: all .2s; z-index: 10000; padding: 0; } .close-button:hover { border-color: var(--ink-black); background: var(--ac); color: var(--ink-black); } /* ═══════════════════════════════════════════ COPIED TOAST ═══════════════════════════════════════════ */ .copied { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; position: fixed; top: 12%; right: 0; z-index: 9999; width: 200px; background: var(--ink-black); color: var(--ac); border-radius: var(--radius-lg) 0 0 var(--radius-lg); border: 1.5px solid rgba(200, 240, 0, .25); border-right: none; box-shadow: -4px 4px 24px rgba(0, 0, 0, .25); animation: slideIn .25s var(--ease-spring); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .copied textarea { background: transparent; border: none; color: rgba(200, 240, 0, .80); font-family: 'Syne Mono', monospace; font-size: .8rem; resize: none; outline: none; padding: 6px; } .copied-btn { position: absolute; top: 8px; left: 10px; background: var(--ac); color: var(--ink-black); border-radius: var(--radius-pill); padding: 3px 10px; font-size: .70rem; font-weight: 800; border: none; cursor: default; letter-spacing: .08em; text-transform: uppercase; } /* ═══════════════════════════════════════════ LOADER ═══════════════════════════════════════════ */ .loader { width: 42px; height: 42px; border: 2.5px solid var(--surface-3); border-top-color: var(--ink-black); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .page-load-status, .aryapage { display: none; align-items: center; justify-content: center; width: 100%; margin: 24px 0; } .loadmore { text-align: center; padding: 16px 0; } /* ═══════════════════════════════════════════ POPUP ═══════════════════════════════════════════ */ .flourish-popup { position: fixed; inset: 0; background: rgba(13, 13, 13, .55); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 999; animation: fadeIn .2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .flourish-popup.hidden { display: none; } .popup-box { background: white; width: 92%; max-width: 460px; max-height: 72vh; border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-md), 0 0 0 1.5px var(--ink-black); animation: popIn .25s var(--ease-spring); } .popup-box::before { content: ''; display: block; height: 3px; background: var(--ac); flex-shrink: 0; } @keyframes popIn { from { transform: scale(.94) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .popup-header { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-bottom: 1px solid var(--border); padding: 4px 16px; } .popup-header h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 400; font-style: italic; color: var(--ink-deep); padding: 12px 0; margin: 0; letter-spacing: .3px; } .popup-header button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 14px; border-radius: var(--radius-sm); transition: all .2s; } .popup-header button:hover { background: var(--ac); color: var(--ink-black); } #flourishList { padding: 14px; overflow-y: auto; list-style: none; flex: 1; } #flourishList li { margin-bottom: 8px; position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid var(--border-soft); background: var(--surface); transition: all .2s var(--ease-spring); } #flourishList li:hover { border-color: var(--ink-black); transform: translateY(-1px); box-shadow: 3px 3px 0 0 var(--ac); } #flourishList .count { display: flex; justify-content: flex-end; font-size: 10px; color: var(--text-muted); padding: 2px 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } #flourishList li p { font-size: 1rem !important; color: var(--text-primary); border-radius: 0; border: none; background: transparent; text-align: center; padding: 12px; } #flourishList li:hover p { color: var(--ink-black); } .flourishit { padding: 12px 16px; text-align: center; border-top: 1px solid var(--border); background: var(--surface); } .select-flourish { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; } .select-flourish label { font-size: .8rem; font-weight: 700; color: var(--text-secondary); letter-spacing: .05em; text-transform: uppercase; } #flourishSelect { appearance: none; padding: 9px 28px 9px 14px; font-size: .85rem; font-family: var(--ftfamily); font-weight: 600; border-radius: var(--radius-pill); border: 1.5px solid var(--border-mid); background: white; color: var(--text-primary); cursor: pointer; outline: none; transition: border-color .2s, box-shadow .2s; } #flourishSelect:focus { border-color: var(--ink-black); box-shadow: 0 0 0 3px var(--ac-ring); } #flourishRegenerate { padding: 12px 28px; border-radius: var(--radius-pill); background: var(--ink-black); color: var(--ac); font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1rem; border: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease-spring), box-shadow .2s, background .2s, color .2s; } #flourishRegenerate:hover { background: var(--ac); color: var(--ink-black); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200, 240, 0, .30); } #flourishRegenerate:active { transform: scale(.96); } .ads { grid-column: 1 / -1; display: block; width: 100%; margin: 12px 0; border-radius: var(--radius-md); background: var(--surface-2); border: 1.5px dashed var(--border-mid); overflow: hidden; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ footer { margin-top: 56px; background: var(--ink-black); padding: 24px 0; position: relative; } footer::before { content: ''; display: block; height: 3px; background: var(--ac); width: 100%; position: absolute; top: 0; left: 0; } footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } footer a { color: var(--ac); font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.05rem; transition: opacity .2s; } footer a:hover { opacity: .75; } footer p, footer span { color: rgba(250, 250, 248, .4); font-size: .8rem; letter-spacing: .04em; } /* ═══════════════════════════════════════════ INFO TEXT ═══════════════════════════════════════════ */ .info-text { font-family: var(--ftfamily); line-height: 1.78; color: var(--text-secondary); padding: 48px 32px; background: white; margin-top: 24px; border-radius: var(--radius-xl); border: 1.5px solid var(--border-soft); box-shadow: var(--shadow-sm); } .info-text h1 { font-family: var(--display); font-size: 2.6rem; font-style: italic; font-weight: 400; color: var(--ink-black); text-align: center; margin-bottom: 32px; padding-bottom: 18px; border-bottom: 1.5px solid var(--border); letter-spacing: .3px; background: none; -webkit-text-fill-color: var(--ink-black); } .info-text h2 { font-family: var(--ftfamily); font-size: 1.5rem; font-weight: 800; color: var(--ink-black); margin-top: 40px; margin-bottom: 14px; letter-spacing: -.3px; text-transform: none; font-style: normal; position: relative; padding-left: 14px; } .info-text h2::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background: var(--ac); border-radius: 2px; } .info-text h3 { font-family: var(--ftfamily); font-size: 1.1rem; font-weight: 700; color: var(--ink-mid); margin-top: 24px; margin-bottom: 8px; font-style: normal; } .info-text p { font-size: 1rem; margin-bottom: 18px; text-align: justify; color: var(--text-secondary); } .info-text ul, .info-text ol { margin-bottom: 22px; padding-left: 22px; } .info-text li { font-size: 1rem; margin-bottom: 8px; } .info-text strong { color: var(--ink-black); font-weight: 700; } .info-text code { background: var(--surface-2); color: var(--ink-mid); padding: 2px 7px; border-radius: 4px; font-family: var(--mono); font-size: .88rem; word-break: break-all; display: inline-block; margin: 2px; border: 1px solid var(--border-soft); } .info-text .example-box { background: var(--surface); border-left: 3px solid var(--ac); border-radius: var(--radius-md); padding: 20px 22px; margin: 24px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); } .info-text .example-title { font-weight: 800; font-size: 1rem; color: var(--ink-black); margin-top: 14px; margin-bottom: 8px; letter-spacing: .02em; font-style: normal; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; } .info-text .example-title:first-child { margin-top: 0; } .info-text .example-box ol { list-style-type: decimal; margin-bottom: 12px; } .info-text .example-box li { font-size: 1.08rem; letter-spacing: .4px; color: var(--text-primary); background: white; padding: 8px 12px; margin-bottom: 5px; border-radius: var(--radius-sm); border: 1px solid var(--border-soft); } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 940px) { .grid ul { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { h1 { font-size: 1.55rem; } .container { padding: 0 14px; max-width: 100%; } .input-section { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; } .f-m { width: 100%; } .font-size-controller input[type="range"] { width: 140px; } .grid ul { grid-template-columns: 1fr; } .info-text { padding: 28px 18px; border-radius: var(--radius-lg); } .info-text h1 { font-size: 1.9rem; } .floatmenu a { display: block; } }