/* ========================================================================== Ultimate Username Generator — styles All rules are scoped under .uug-wrapper to avoid leaking into the theme. ========================================================================== */ .uug-wrapper { --uug-bg: #ffffff; --uug-bg-soft: #f6f7fb; --uug-border: #e4e7ef; --uug-text: #1a1d29; --uug-text-muted: #666b7a; --uug-primary: #5b5bf5; --uug-primary-dark: #4747d6; --uug-primary-soft: #eef0ff; --uug-accent: #ff5b8c; --uug-success: #1fa971; --uug-radius-lg: 18px; --uug-radius-md: 12px; --uug-radius-sm: 8px; --uug-shadow: 0 4px 20px rgba(20, 22, 40, 0.06); --uug-shadow-hover: 0 8px 28px rgba(20, 22, 40, 0.1); box-sizing: border-box; max-width: 1080px; margin: 0 auto; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 16px; /* fixed base — every size below is in px so the tool stays consistently large no matter what root font-size the active theme sets on . */ color: var(--uug-text); line-height: 1.6; } .uug-wrapper *, .uug-wrapper *::before, .uug-wrapper *::after { box-sizing: border-box; } .uug-wrapper img, .uug-wrapper svg { max-width: 100%; } /* --------------------------------------------------------------------- THEME-CONFLICT DEFENSIVE RESET Many WordPress themes apply broad rules to buttons, links, and text inside the content area (uppercase text, hidden/icon-font svg resets, custom list styles, etc). Everything below forces this tool's own look regardless of what the active theme does elsewhere on the page. --------------------------------------------------------------------- */ .uug-wrapper, .uug-wrapper * { text-transform: none !important; letter-spacing: normal !important; list-style: none !important; text-decoration: none !important; } .uug-wrapper svg { display: inline-block !important; visibility: visible !important; opacity: 1 !important; vertical-align: middle; pointer-events: none; color: inherit; } .uug-wrapper button, .uug-wrapper input, .uug-wrapper select, .uug-wrapper textarea { font-family: inherit !important; box-shadow: none; -webkit-appearance: none !important; appearance: none !important; } .uug-wrapper select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='%23666b7a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* ---------- Header ---------- */ .uug-header { text-align: center; padding: 44px 20px 26px; } .uug-header-icon { display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(135deg, var(--uug-primary-soft), #ffe4ef); color: var(--uug-primary); margin-bottom: 16px; } .uug-title { font-size: clamp(32px, 4.2vw, 43px); font-weight: 800; margin: 0 0 10px; letter-spacing: -0.02em; } .uug-subtitle { color: var(--uug-text-muted); font-size: 18px; max-width: 620px; margin: 0 auto 22px; } .uug-badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; } .uug-badge { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 700; padding: 8px 15px; border-radius: 999px; box-shadow: 0 4px 12px rgba(20, 22, 40, 0.12); } .uug-badge:nth-child(1) { background: linear-gradient(135deg, #ff8a5b, #ff5b8c); } .uug-badge:nth-child(2) { background: linear-gradient(135deg, #5b9bf5, #5b5bf5); } .uug-badge:nth-child(3) { background: linear-gradient(135deg, #22c98f, #1fa971); } .uug-badge:nth-child(4) { background: linear-gradient(135deg, #b25bf5, #7a5bf5); } .uug-badge svg { color: #fff; flex-shrink: 0; } /* ---------- Ad slots ---------- */ .uug-ad-slot { width: 100%; min-height: 0; margin: 18px 0; text-align: center; overflow: hidden; } .uug-ad-slot:empty { margin: 0; min-height: 0; display: block; } /* ---------- Quick modes ---------- */ .uug-quick-modes { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 16px 24px; justify-content: center; } .uug-quick-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--uug-bg-soft); border: 1.5px solid var(--uug-border); color: var(--uug-text); font-size: 15px; font-weight: 700; padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .uug-quick-btn svg { color: var(--uug-primary); } .uug-quick-btn:hover { box-shadow: var(--uug-shadow-hover); transform: translateY(-1px); color: #fff; border-color: transparent; } .uug-quick-btn:active { transform: scale(0.97); } /* Each quick mode gets its own distinct color on hover / active */ .uug-quick-btn[data-mode="gaming"]:hover, .uug-quick-btn[data-mode="gaming"].is-active { background: linear-gradient(135deg, #7a5bf5, #5b5bf5); border-color: transparent; } .uug-quick-btn[data-mode="social"]:hover, .uug-quick-btn[data-mode="social"].is-active { background: linear-gradient(135deg, #ff8ab0, #ff5b8c); border-color: transparent; } .uug-quick-btn[data-mode="professional"]:hover, .uug-quick-btn[data-mode="professional"].is-active { background: linear-gradient(135deg, #5b9bf5, #3f7de0); border-color: transparent; } .uug-quick-btn[data-mode="business"]:hover, .uug-quick-btn[data-mode="business"].is-active { background: linear-gradient(135deg, #ffb35b, #ff8a3d); border-color: transparent; } .uug-quick-btn[data-mode="tech"]:hover, .uug-quick-btn[data-mode="tech"].is-active { background: linear-gradient(135deg, #22c98f, #1fa971); border-color: transparent; } .uug-quick-btn[data-mode="aesthetic"]:hover, .uug-quick-btn[data-mode="aesthetic"].is-active { background: linear-gradient(135deg, #f5a3d1, #d15be0); border-color: transparent; } .uug-quick-btn[data-mode="anonymous"]:hover, .uug-quick-btn[data-mode="anonymous"].is-active { background: linear-gradient(135deg, #616a80, #3d4356); border-color: transparent; } .uug-quick-btn.is-active { color: #fff; box-shadow: var(--uug-shadow-hover); } .uug-quick-btn.is-active svg, .uug-quick-btn:hover svg { color: #fff; } /* ---------- Form ---------- */ .uug-form { background: var(--uug-bg); border: 1px solid var(--uug-border); border-radius: var(--uug-radius-lg); padding: 30px; box-shadow: var(--uug-shadow); } .uug-field { margin-bottom: 22px; } .uug-field:last-child { margin-bottom: 0; } .uug-field label, .uug-fieldset-label { display: block; font-weight: 700; font-size: 16px; margin-bottom: 10px; } .uug-help-text { display: block; color: var(--uug-text-muted); font-size: 13px; margin-top: 7px; } .uug-input, .uug-select { width: 100%; padding: 14px 16px; border: 1.5px solid var(--uug-border); border-radius: var(--uug-radius-md); background: var(--uug-bg); color: var(--uug-text); font-size: 17px; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .uug-input:focus, .uug-select:focus { outline: none; border-color: var(--uug-primary); box-shadow: 0 0 0 3px var(--uug-primary-soft); } .uug-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .uug-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } .uug-pill-group { display: flex; flex-wrap: wrap; gap: 10px; } .uug-pill { background: var(--uug-bg-soft); border: 1.5px solid var(--uug-border); color: var(--uug-text); font-size: 15px; font-weight: 700; padding: 11px 20px; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; } .uug-pill:hover { border-color: var(--uug-primary); color: var(--uug-primary-dark); } .uug-pill.is-active { background: linear-gradient(135deg, var(--uug-primary), #8a5bf5); border-color: transparent; color: #fff; box-shadow: var(--uug-shadow-hover); } .uug-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .uug-toggle { /* CRITICAL: this must be the positioning context for the hidden checkbox below — without it the checkbox escapes to the nearest positioned ancestor (often the page itself) and visually collides with unrelated text elsewhere on the page. */ position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; font-weight: 600; user-select: none; padding: 4px 0; } .uug-toggle input[type="checkbox"] { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .uug-toggle-track { position: relative; width: 44px; height: 26px; background: var(--uug-border); border-radius: 999px; flex-shrink: 0; transition: background 0.15s ease; } .uug-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; } .uug-toggle input:checked + .uug-toggle-track { background: linear-gradient(135deg, var(--uug-primary), #8a5bf5); } .uug-toggle input:checked + .uug-toggle-track::after { transform: translateX(18px); } .uug-toggle input:focus-visible + .uug-toggle-track { box-shadow: 0 0 0 3px var(--uug-primary-soft); } .uug-toggle-text { flex: 1; min-width: 0; } .uug-advanced { border: 1.5px solid var(--uug-border); border-radius: var(--uug-radius-md); padding: 4px 14px; margin-bottom: 18px; } .uug-advanced-summary { cursor: pointer; font-weight: 700; font-size: 14px; padding: 12px 0; list-style: none; } .uug-advanced-summary::-webkit-details-marker { display: none; } .uug-advanced-summary::before { content: "▸"; display: inline-block; margin-right: 8px; transition: transform 0.15s ease; } .uug-advanced[open] .uug-advanced-summary::before { transform: rotate(90deg); } .uug-advanced-body { padding: 4px 0 16px; } .uug-generate-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, #7a5bf5, var(--uug-primary), #ff5b8c); background-size: 200% 200%; background-position: 0% 50%; color: #fff; border: none; padding: 18px 22px; border-radius: var(--uug-radius-md); font-size: 18px; font-weight: 800; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.15s ease, background-position 0.3s ease; } .uug-generate-btn:hover { box-shadow: var(--uug-shadow-hover); background-position: 100% 50%; } .uug-generate-btn:active { transform: scale(0.99); } .uug-wrapper button:focus-visible, .uug-wrapper input:focus-visible, .uug-wrapper select:focus-visible, .uug-wrapper summary:focus-visible { outline: 3px solid var(--uug-primary); outline-offset: 2px; } /* ---------- Tabs ---------- */ .uug-tabs { display: flex; gap: 6px; margin: 30px 0 0; border-bottom: 2px solid var(--uug-border); } .uug-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 14px 6px; font-weight: 700; font-size: 16px; color: var(--uug-text-muted); cursor: pointer; margin-right: 20px; transition: color 0.15s ease, border-color 0.15s ease; } .uug-tab:hover { color: var(--uug-primary); } .uug-tab.is-active { color: var(--uug-primary); border-bottom-color: var(--uug-primary); } .uug-count { display: inline-block; background: linear-gradient(135deg, var(--uug-primary), #ff5b8c); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 5px; } .uug-panel { padding: 24px 0 8px; } .uug-results-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .uug-results-status { font-size: 14px; color: var(--uug-text-muted); margin: 0; } .uug-results-actions { display: flex; flex-wrap: wrap; gap: 10px; } .uug-action-btn { background: var(--uug-bg-soft); border: 1.5px solid var(--uug-border); color: var(--uug-text); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: var(--uug-radius-sm); cursor: pointer; transition: all 0.15s ease; } .uug-action-btn:hover { color: #fff; border-color: transparent; box-shadow: var(--uug-shadow-hover); transform: translateY(-1px); } .uug-generate-more-btn:hover { background: linear-gradient(135deg, #7a5bf5, var(--uug-primary)); } .uug-copy-all-btn:hover { background: linear-gradient(135deg, #22c98f, #1fa971); } .uug-save-history-btn:hover { background: linear-gradient(135deg, #ffb35b, #ff8a3d); } .uug-clear-favorites-btn:hover, .uug-clear-history-btn:hover { background: linear-gradient(135deg, #ff8a8a, #ff5b6b); } /* ---------- Results grid ---------- */ .uug-results-grid, .uug-favorites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .uug-result-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--uug-bg-soft); border: 1.5px solid var(--uug-border); border-radius: var(--uug-radius-md); padding: 14px 14px 14px 16px; min-width: 0; min-height: 60px; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .uug-result-card:hover { box-shadow: var(--uug-shadow-hover); border-color: var(--uug-primary); transform: translateY(-1px); } .uug-result-name { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; word-break: break-word; min-width: 0; flex: 1 1 auto; line-height: 1.3; } .uug-result-buttons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .uug-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--uug-bg); border: 1.5px solid var(--uug-border); border-radius: var(--uug-radius-sm); color: var(--uug-text); cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .uug-icon-btn:hover { transform: translateY(-1px); box-shadow: var(--uug-shadow); } .uug-copy-btn:hover { background: linear-gradient(135deg, #5b9bf5, #3f7de0); border-color: transparent; color: #fff; } .uug-fav-btn:hover { background: linear-gradient(135deg, #ff8ab0, var(--uug-accent)); border-color: transparent; color: #fff; } .uug-icon-btn.uug-fav-btn.is-favorited { background: linear-gradient(135deg, #ff8ab0, var(--uug-accent)); border-color: transparent; color: #fff; } .uug-icon-btn.is-copied { background: linear-gradient(135deg, #22c98f, var(--uug-success)); border-color: transparent; color: #fff; } .uug-load-btn:hover { background: linear-gradient(135deg, #5b9bf5, #3f7de0); border-color: transparent; color: #fff; } .uug-remove-btn:hover { background: linear-gradient(135deg, #ff8a8a, #ff5b6b); border-color: transparent; color: #fff; } .uug-empty-state { display: none; text-align: center; color: var(--uug-text-muted); font-size: 14px; padding: 30px 10px; border: 1.5px dashed var(--uug-border); border-radius: var(--uug-radius-md); } .uug-empty-state.is-visible { display: block; } .uug-availability-note { font-size: 12px; color: var(--uug-text-muted); text-align: center; margin-top: 16px; } /* ---------- History list ---------- */ .uug-history-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--uug-bg-soft); border: 1.5px solid var(--uug-border); border-radius: var(--uug-radius-md); padding: 12px 14px; margin-bottom: 10px; } .uug-history-meta { min-width: 0; overflow-wrap: anywhere; } .uug-history-title { font-weight: 700; font-size: 14px; margin: 0 0 2px; } .uug-history-sub { font-size: 12px; color: var(--uug-text-muted); margin: 0; } .uug-history-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ---------- SEO content ---------- */ .uug-seo-content { margin-top: 34px; padding-top: 10px; border-top: 1.5px solid var(--uug-border); } .uug-seo-content h2 { font-size: 21px; margin: 30px 0 12px; } .uug-seo-content h2:first-child { margin-top: 10px; } .uug-seo-content p, .uug-seo-content li { color: var(--uug-text-muted); font-size: 16px; line-height: 1.7; } .uug-seo-content ul { padding-left: 20px; } /* ---------- FAQ ---------- */ .uug-faq { margin-top: 30px; } .uug-faq h2 { font-size: 21px; margin-bottom: 14px; } .uug-faq-item { border-bottom: 1px solid var(--uug-border); } .uug-faq-item h3 { margin: 0; font-size: 1em; } .uug-faq-question { width: 100%; text-align: left; background: none; border: none; padding: 16px 4px; font-weight: 700; font-size: 16px; color: var(--uug-text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .uug-faq-question::after { content: "+"; font-size: 19px; font-weight: 400; color: var(--uug-primary); flex-shrink: 0; transition: transform 0.15s ease; } .uug-faq-question[aria-expanded="true"]::after { transform: rotate(45deg); } .uug-faq-answer { padding: 0 4px 16px; } .uug-faq-answer p { margin: 0; color: var(--uug-text-muted); font-size: 15px; line-height: 1.65; } /* ---------- Toasts ---------- */ .uug-toast-region { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .uug-toast { background: #1a1d29; color: #fff; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .uug-toast.is-visible { opacity: 1; transform: translateY(0); } /* ========================================================================== Responsive breakpoints ========================================================================== */ @media (max-width: 1024px) { .uug-results-grid, .uug-favorites-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .uug-wrapper { padding: 0 4px; } .uug-grid-2, .uug-grid-3 { grid-template-columns: 1fr; } .uug-toggle-grid { grid-template-columns: 1fr; } .uug-results-grid, .uug-favorites-grid { grid-template-columns: 1fr; } .uug-results-toolbar { flex-direction: column; align-items: stretch; } .uug-results-actions { justify-content: stretch; } .uug-action-btn { flex: 1; } .uug-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .uug-form { padding: 16px; } .uug-header { padding: 24px 8px 16px; } } @media (max-width: 420px) { .uug-quick-btn { font-size: 12px; padding: 8px 11px; } .uug-result-card { padding: 10px; } .uug-icon-btn { width: 30px; height: 30px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .uug-wrapper * { transition: none !important; } }