/* Font Generator Tool v2.6.1 | fontgeneratorlab.com | GPL-2.0 */
:root{
--fgt-primary:#4460ec;
--fgt-primary-dark:#3346cc;
--fgt-primary-light:#e8ecfd;
--fgt-surface:#fff;
--fgt-surface2:#f7f8fe;
--fgt-border:#d9def7;
--fgt-text:#1a1828;
--fgt-text2:#6b6480;
--fgt-radius:10px;
--fgt-shadow:0 2px 10px rgba(68,96,236,.12);
--fgt-output-size:18px;
--fgt-header-offset:0px;
}
#fgt-root{
--fgt-primary:#4460ec;
--fgt-primary-dark:#3346cc;
--fgt-primary-light:#e8ecfd;
--fgt-surface:#fff;
--fgt-surface2:#f7f8fe;
--fgt-border:#d9def7;
--fgt-text:#1a1828;
--fgt-text2:#6b6480;
--fgt-radius:10px;
--fgt-shadow:0 2px 10px rgba(68,96,236,.12);
--fgt-output-size:18px;
--fgt-header-offset:0px;
}
#fgt-root,
.fgt-root{
font-family:inherit;
color:var(--fgt-text);
padding:0 12px 48px;
max-width:860px;
margin:0 auto;
box-sizing:border-box;
}
*,
*::before,
*::after{
box-sizing:inherit;
}
.fgt-sticky{
position:sticky;
top:calc(var(--wp-admin--admin-bar--height,0px)+var(--fgt-header-offset,0px));
z-index:100;
background:var(--fgt-surface);
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
border-bottom:1px solid var(--fgt-border);
padding:12px 0 8px;
margin-bottom:10px;
}
.fgt-input-wrap{
display:flex;
align-items:flex-start;
gap:8px;
margin-bottom:8px;
}
.fgt-input{
flex:1;
border:2px solid var(--fgt-border);
border-radius:var(--fgt-radius);
padding:10px 14px;
font-size:16px;
font-family:inherit;
color:var(--fgt-text);
background:var(--fgt-surface);
transition:border-color .2s;
min-height:48px;
max-height:200px;
overflow-y:auto;
line-height:1.5;
resize:none;
}
.fgt-input:focus{
outline:none;
border-color:var(--fgt-primary);
}
.fgt-input:focus-visible{
outline:3px solid var(--fgt-primary);
outline-offset:1px;
}
.fgt-clear-btn{
background:none;
border:1px solid var(--fgt-border);
border-radius:8px;
padding:6px 10px;
cursor:pointer;
color:var(--fgt-text2);
font-size:14px;
line-height:1;
transition:background .15s,color .15s;
min-height:40px;
font-family:inherit;
}
.fgt-clear-btn:hover{
background:var(--fgt-primary-light);
color:var(--fgt-primary-dark);
}
.fgt-clear-btn:focus-visible{
outline:3px solid var(--fgt-primary);
outline-offset:2px;
}
.fgt-controls{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.fgt-char-count{
font-size:13px;
color:var(--fgt-text2);
min-width:0;
}
.fgt-char-hint{
font-style:italic;
}
.fgt-fav-hint{
color:#e05b9e;
}
.fgt-filter-wrap{
margin-top:8px;
}
.fgt-filter-input{
width:100%;
border:1px solid var(--fgt-border);
border-radius:8px;
padding:7px 12px;
font-size:14px;
font-family:inherit;
color:var(--fgt-text);
background:var(--fgt-surface2);
transition:border-color .2s,box-shadow .2s;
}
.fgt-filter-input:focus{
outline:none;
border-color:var(--fgt-primary);
box-shadow:0 0 0 3px rgba(124,92,191,.12);
}
.fgt-filter-input:focus-visible{
outline:3px solid var(--fgt-primary);
outline-offset:1px;
}
.fgt-results{
margin-top:8px;
}
#fgt-results{
display:flex;
flex-direction:column;
}
.fgt-category{
margin-bottom:24px;
}
.fgt-category-heading{
font-size:16px;
font-weight:700;
color:var(--fgt-primary-dark);
margin:0 0 4px;
padding:4px 0 4px 10px;
border-left:3px solid var(--fgt-primary);
background:var(--fgt-primary-light);
border-radius:0 4px 4px 0;
}
.fgt-category-desc{
font-size:12px;
color:var(--fgt-text2);
margin:0 0 8px;
line-height:1.4;
}
.fgt-category-rows{
display:flex;
flex-direction:column;
gap:6px;
}
.fgt-font-row{
background:var(--fgt-surface2);
border:1px solid var(--fgt-border);
border-radius:var(--fgt-radius);
padding:10px 14px;
transition:box-shadow .15s,border-color .15s;
}
.fgt-font-row:hover{
border-color:var(--fgt-primary);
box-shadow:var(--fgt-shadow);
}
.fgt-font-row-meta{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:6px;
flex-wrap:wrap;
gap:4px;
}
.fgt-font-label{
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:.05em;
color:var(--fgt-text2);
}
.fgt-row-actions{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
}
.fgt-font-output{
font-size:var(--fgt-output-size,18px);
line-height:1.6;
word-break:break-word;
overflow-wrap:anywhere;
color:var(--fgt-text);
-webkit-user-select:text;
user-select:text;
cursor:text;
}
.fgt-unchanged-note{
font-size:10px;
color:var(--fgt-text2);
font-style:italic;
opacity:.7;
white-space:nowrap;
}
.fgt-copy-btn{
background:var(--fgt-primary);
color:#fff;
border:none;
border-radius:6px;
padding:4px 12px;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:background .15s,transform .1s;
font-family:inherit;
}
.fgt-copy-btn:hover{
background:var(--fgt-primary-dark);
}
.fgt-copy-btn:active{
transform:scale(.96);
}
.fgt-copy-btn.copied{
background:#16a34a;
}
.fgt-copy-btn:focus-visible{
outline:3px solid var(--fgt-primary-dark);
outline-offset:2px;
}
.fgt-fav-btn{
background:none;
border:1px solid #c4b8e8;
border-radius:6px;
font-size:18px;
cursor:pointer;
color:#7c6aad;
transition:color .15s,transform .15s,background .15s,border-color .15s;
padding:2px 6px;
line-height:1;
}
.fgt-fav-btn::before{
content:'\2661';
}
.fgt-fav-btn.active{
background:#fff0f8;
border-color:#e05b9e;
}
.fgt-fav-btn.active::before{
content:'\2665';
color:#e05b9e;
}
.fgt-fav-btn:hover{
color:#e05b9e;
border-color:#e05b9e;
background:#fff0f8;
transform:scale(1.15);
}
.fgt-fav-btn:focus-visible{
outline:3px solid var(--fgt-primary);
outline-offset:2px;
border-radius:6px;
}
.fgt-note-badge{
font-size:10px;
font-weight:700;
padding:2px 7px;
border-radius:99px;
background:var(--fgt-primary-light);
color:var(--fgt-primary-dark);
white-space:nowrap;
}
.fgt-badge-discord{
background:#5865f2;
color:#fff;
}
.fgt-badge-whatsapp{
background:#25d366;
color:#fff;
}
.fgt-badge-warning{
background:#f59e0b;
color:#fff;
}
.fgt-badge-tiktok{
background:#ff0050;
color:#fff;
}
#fgt-fav-section{
background:#fff9fe;
border:2px dashed #e05b9e;
border-radius:var(--fgt-radius);
padding:14px;
margin-bottom:20px;
}
#fgt-fav-section .fgt-category-heading{
color:#e05b9e;
background:#fff9fe;
border-left:3px solid #e05b9e;
}
.fgt-no-results{
text-align:center;
padding:24px 12px;
color:var(--fgt-text2);
font-size:14px;
font-style:italic;
background:var(--fgt-surface2);
border:1px dashed var(--fgt-border);
border-radius:var(--fgt-radius);
margin:12px 0;
}
.fgt-fav-empty{
font-size:13px;
color:var(--fgt-text2);
font-style:italic;
}
.fgt-toast{
position:fixed;
bottom:28px;
left:50%;
transform:translateX(-50%) translateY(12px);
background:#1e1b38;
color:#fff;
font-size:14px;
font-weight:600;
padding:10px 22px;
border-radius:999px;
box-shadow:0 4px 20px rgba(0,0,0,.22);
opacity:0;
pointer-events:none;
transition:opacity .22s ease,transform .22s ease;
z-index:999999;
white-space:nowrap;
font-family:inherit;
}
.fgt-toast.visible{
opacity:1;
transform:translateX(-50%) translateY(0);
}
.fgt-hidden{
display:none !important;
}
@media (max-width:600px){
.fgt-controls{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
}
@media (max-width:480px){
.fgt-font-row{
padding:7px 10px;
}
.fgt-font-row-meta{
flex-direction:row;
align-items:center;
flex-wrap:nowrap;
margin-bottom:4px;
gap:4px;
}
.fgt-font-label{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.fgt-row-actions{
flex-shrink:0;
}
}
@media (max-width:360px){
#fgt-root,
.fgt-root{
padding:0 8px 32px;
}
.fgt-font-output{
}
@media print{
.fgt-sticky{
position:static;
}
.fgt-input-wrap,
.fgt-controls,
.fgt-filter-wrap,
.fgt-copy-btn,
.fgt-fav-btn,
#fgt-toast,
display:none !important;
}
.fgt-font-row{
break-inside:avoid;
border:1px solid #ccc;
box-shadow:none;
}
.fgt-font-output{
font-size:14pt;
}
#fgt-fav-section{
border:1px solid #e05b9e;
}
}