/*
Theme Name: Betext Template
Theme URI: https://betext.io
Template: betext
Version: 1.0.8
Text Domain: kutak
License: Themeforest Licence
License URI: https://themeforest.net/licenses
*/
/* =Theme customization starts here
-------------------------------------------------------------- */
:root {
scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000;
}
:root {
--kutak--font-family--base: arial, helvetica, clean, sans-serif;
--kutak--font-weight--base: 400;
--kutak--font-weight--base-bold: 600;
--kutak--font-family--elements: arial, helvetica, clean, sans-serif;
--kutak--font-weight--elements: 550;
--kutak--font-weight--elements-bold: 600;
--kutak--font-family--headings: arial, helvetica, clean, sans-serif;
--kutak--font-weight--headings: 700;
--kutak--font-weight--headings-small: 550;
--kutak--letter-spacing--headings: 0;
--betext-color-base:var(--kutak--color--contrast);
--betext-color-accent:var(--kutak--color--accent);
--betext-bg-color:var(--kutak--color--highlight-background);
--betext-bg-base: var(--kutak--color--base);
--betext-bg-secondary: var(--kutak--color--secondary);
--betext-bg-accent: var(--kutak--color--primary);
--betext-bg-blur: color-mix(in srgb, var(--betext-bg-color) 49%, transparent);
--betext-bg-aside-blur: color-mix(in srgb, var(--betext-bg-secondary) 85%, transparent);
--betext-outline-color: #ffe;
--betext-outline-base: 4px solid color-mix(in srgb, var(--betext-outline-color) 50%, transparent);
--betext-outline-aside: 5px solid color-mix(in srgb, var(--betext-outline-color) 50%, transparent);
--betext-outline-btn: 1px solid color-mix(in srgb, var(--betext-bg-color) 45%, transparent);
--betext-outline-column: 1px solid var(--betext-color-border);
--betext-color-pink:deepPink;
--betext-color-icon:var(--kutak--color--contrast);
--betext-color-symbol:#001;
--betext-color-border:var(--kutak--color--border);
--kutak--color--contrast-dim: rgba(0, 0, 0, .85);
--betext-glow-stop-1: rgba(255, 222, 31, 1);
--betext-glow-stop-2: rgba(244, 93, 33, 1);
--betext-glow-stop-3: rgba(255, 69, 120, 1);
--betext-glow-stop-4: rgba(171, 81, 249, 1);
--betext-glow-stop-5: rgba(94, 27, 229, 1);
--betext-glow-stop-6: rgba(41, 76, 194, 1);
--betext-bg-gradient-base: linear-gradient(135deg, var(--betext-glow-stop-1) 0, var(--betext-glow-stop-2) 25%, var(--betext-glow-stop-3) 50%, var(--betext-glow-stop-4) 75%, var(--betext-glow-stop-5) 100%);
--betext-bg-gradient-1: rgba(255, 174, 16, 1) 0%, rgba(255, 69, 120, 1) 50%, rgba(94, 27, 229, 1) 100% ;
--betext-bg-gradient-2: rgba(4,231,224,1) 0%, rgba(171, 81, 249, 1) 38%, rgba(255, 69, 120, 1) 65%, rgba(255, 174, 16, 1) 100%;
--betext-bg-gradient-3: rgba(112, 255, 126, 1) 0%, rgba(255, 83, 83, 1) 72%, rgba(233, 9, 9, 1) 100%;
--betext-bg-gradient-4: linear-gradient(135deg, #764ba2 0%, #667eea 28%, rgba(0, 71, 171, 1) 100%);
--betext-bg-gradient-5: #f3d344 0%, #e753fe 28%, var(--betext-glow-stop-5) 100%;
--betext-bg-gradient-glass: rgba(255, 174, 16, .175) 0%, rgba(255, 69, 120, .105) 50%, rgba(94, 27, 229, .205) 100% ;
--betext-bg-gradient-green: rgba(52, 211, 153, 1), rgba(59, 130, 246, 1);
--betext-bg-gradient-1-50: rgba(255, 174, 16, .25) 0%, rgba(255, 69, 120, .25) 50%, rgba(94, 27, 229, .25) 100% ;
--betext-bg-gradient-2-50: rgba(4,231,224,.25) 0%, rgba(171, 81, 249, .25) 35%, rgba(255, 69, 120, .25) 65%, rgba(255, 174, 16, .25) 100%;
--betext-bg-gradient-3-50: rgba(112, 255, 126, .25) 0%, rgba(255, 83, 83, .25) 35%, rgba(233, 9, 9, .25) 100%;
--betext-bg-gradient-4-50: rgba(118, 75, 162, .25) 0%, rgba(102, 126, 234, .25) 35%, rgba(0, 71, 171, .25) 100%;
--betext-bg-gradient-5-50: rgba(243, 211, 68, .25) 0%, rgba(231, 83, 254, .25) 28%, rgba(196, 48, 255, .25) 100%;
--betext-bg-gradient-green-50: rgba(52, 211, 153, .25), rgba(59, 130, 246, .25);
--betext-bg-gradient-aurora: linear-gradient(to bottom right in oklab, oklch(.37 .013 285.805) 0%, oklch(.21 .006 285.885) 100%);
--betext-box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);
--betext-bg-opacity:0.25;
--betext-btn-bg-color:#E9967A;
--betext-btn-text-color:#f0ece3;
--betext-btn-hover-color:var(--betext-bg-accent);
--betext-btn-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
--betext-btn-bg-gradient:#fff;
--betext-btn-border-clr:var(--betext-color-border);
--betext-btn-border-clr-hover:#001;
--betext-rounded-xs:var(--kutak--radius--xs);
--betext-rounded-sm:var(--kutak--radius--s);
--betext-rounded-md:var(--kutak--radius--m);
--betext-rounded-lg:.65rem;
--betext-rounded-xl:var(--kutak--radius--xl);
--betext-rounded-2xl:var(--kutak--radius--2xl);
--betext-rounded-3xl: 1.5rem;
--betext-rounded-max: 1.8rem;
--betext-rounded-full: 99em;
--betext-backdrop-blur-sm: blur(8px);
--betext-backdrop-blur-md: blur(12px);
--betext-backdrop-blur-lg: blur(22px);
--betext-textarea-height: 36.5vh;
--betext-textarea-min-height: 5rem;
--betext-share-height:0vh;
--container-max-inline-size: calc(var(--kutak--size--container) + var(--kutak--space--site) * 2);
--container-inline-start-end: var(--kutak--space--xs);
--kutak--space--section-first: calc(var(--kutak--space--xl) - (var(--kutak--size--header) - var(--kutak--size--header-content)) / 2);
/* Panel */
--betext-tabs-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0,0,0,0.1), 0 4px 6px -4px rgb(0,0,0,0.1);
--panel-bg-color:var(--betext-bg-color);
--panel-bg-before:var(--betext-bg-blur);
--panel-bg-after:hsla(0, 0%, 100%, .002);
--panel-border-color:var(--betext-color-border);
--panel-box-shadow:inset 0 24px 48px 0 rgba(199, 211, 234, .05), inset 0 1px 1px 0 rgba(199, 211, 234, .12);
/* Symbols */
--emoji-size: 2em;
--emoji-padding: 2em;
--symbol-size: 2em;
--symbol-padding: 3em;
--kaomoji-size: 6em;
--kaomoji-padding: 6em;
/* ALERTS */
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(98% 0 0);
--color-base-300: oklch(95% 0 0);
--color-base-content: oklch(21% .006 285.885);
--color-info: oklch(74% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--color-log: oklch(75% .183 55.934);
--color-log-content: oklch(26% .079 36.259);
--radius-selector: .5rem;
--radius-field: .25rem;
--radius-box: .5rem;
--size-selector: .25rem;
--size-field: .25rem;
--border: 1px;
--depth: 1;
--noise: 0;
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
}
:root[data-accent-color-dark-contrast=false][data-has-dark-mode-support][data-prefers-color-scheme=dark], :root[data-color-dark-scheme=dark][data-has-dark-mode-support]:not([data-prefers-color-scheme]), :root[data-prefers-color-scheme=dark] {
--betext-color-base:var(--kutak--color--contrast);
--betext-color-accent:var(--kutak--color--accent);
--betext-bg-color:var(--kutak--color--base);
--betext-bg-base: var(--kutak--color--base);
--betext-bg-accent:var(--kutak--dark-mode--color--accent, var(--kutak--color--accent));
--betext-bg-opacity:0.15;
--betext-outline-color: #001;
--betext-outline-base: 4px solid color-mix(in srgb, var(--betext-outline-color) 8%, transparent);
--betext-outline-aside: 5px solid color-mix(in srgb, var(--betext-outline-color) 12%, transparent);
--betext-color-pink:hotPink;
--betext-color-icon:var(--kutak--color--contrast);
--betext-color-symbol:#ffe;
--betext-btn-bg-color:#FF7F50;
--betext-btn-bg-gradient:#ffe;
--betext-btn-border-clr-hover:#ffe;
--panel-bg-color:rgba(134, 191, 242, .01);
/* --panel-bg-before:rgba(7, 7, 7, .6); */
--panel-bg-after:hsla(0, 0%, 100%, .002);
--panel-border-color:rgba(209, 170, 215, .06);
--panel-box-shadow:inset 0 24px 48px 0 rgba(199, 211, 234, .05), inset 0 1px 1px 0 rgba(199, 211, 234, .12);
/* ALERTS */
--color-base-100: oklch(25.33% .016 252.42);
--color-base-200: oklch(23.26% .014 253.1);
--color-base-300: oklch(21.15% .012 254.09);
--color-base-content: oklch(97.807% .029 256.847);
--color-info: oklch(84% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--color-log: var(--color-warning);
--color-log-content: var(--color-warning-content);
.betext-app button img,
.cpaw-tool__link:after,
.cpaw-tools-category__header:after {
filter: invert(1);
-webkit-filter:invert(1);
}
}
@media(prefers-color-scheme:dark){
:root[data-color-dark-scheme=dark][data-has-dark-mode-support]:not([data-prefers-color-scheme]), :root[data-prefers-color-scheme=dark]{
--betext-bg-base: var(--kutak--dark-mode--color--background);
--betext-bg-color:var(--kutak--dark-mode--color--highlight-background);
--betext-bg-accent:var(--kutak--dark-mode--color--accent, var(--kutak--color--accent));
--betext-bg-opacity:0.15;
--betext-outline-color: #001;
--betext-outline-base: 4px solid color-mix(in srgb, var(--betext-outline-color) 8%, transparent);
--betext-outline-aside: 5px solid color-mix(in srgb, var(--betext-outline-color) 12%, transparent);
--betext-color-pink:hotPink;
--betext-color-icon:var(--kutak--color--contrast);
--betext-color-symbol:#ffe;
--betext-btn-bg-color:var(--betext-bg-accent);
--betext-btn-bg-gradient:#ffe;
--betext-btn-border-clr-hover:#ffe;
--panel-bg-color:rgba(134, 191, 242, .01);
/* --panel-bg-before:rgba(7, 7, 7, .6); */
--panel-bg-after:hsla(0, 0%, 100%, .002);
--panel-border-color:rgba(209, 170, 215, .06);
--panel-box-shadow:inset 0 24px 48px 0 rgba(199, 211, 234, .05), inset 0 1px 1px 0 rgba(199, 211, 234, .12);
/* ALERTS */
--color-base-100: oklch(25.33% .016 252.42);
--color-base-200: oklch(23.26% .014 253.1);
--color-base-300: oklch(21.15% .012 254.09);
--color-base-content: oklch(97.807% .029 256.847);
--color-info: oklch(84% .16 232.661);
--color-info-content: oklch(29% .066 243.157);
--color-success: oklch(76% .177 163.223);
--color-success-content: oklch(37% .077 168.94);
--color-warning: oklch(82% .189 84.429);
--color-warning-content: oklch(41% .112 45.904);
--color-error: oklch(71% .194 13.428);
--color-error-content: oklch(27% .105 12.094);
--color-log: var(--color-warning);
--color-log-content: var(--color-warning-content);
.betext-app button img,
.cpaw-tool__link:after,
.cpaw-tools-category__header:after {
filter: invert(1);
-webkit-filter:invert(1);
}
}
}
@view-transition {
navigation: auto;
}
/** ADVANCED STYLING **/
.container {
inline-size: 100%;
max-inline-size: var(--container-max-inline-size);
padding-inline: var(--container-inline-start-end);
}
.flex {
display:flex;
gap: var(--container-inline-start-end);
}
.grid {
display:grid;
/* grid-gap: var(--container-inline-start-end); */
grid-gap: var(--kutak--space--xs-s);
}
.fixed {
position:fixed;
z-index: var(--kutak--z-index--modal);
}
.absolute {
position:absolute;
z-index: var(--kutak--z-index--modal);
}
.relative {
position:relative;
}
.center {
text-align:center;
}
.site-header__bg {
background:transparent!important;
}
.site-hero__bg-gradient {
pointer-events: none;
user-select: none;
position: absolute;
left: 0;
top: 0;
right:0;
z-index: 1;
height: 256px;
width: 100%;
transform: scaleX(1) translateX(0) translateY(-25%)!important;
background: none;
filter: blur(50px);
opacity:1;
border-radius:0 0 50% 50%;
}
.site:not(.webapp) .site-hero__bg-gradient,
.category .site.webapp .site-hero__bg-gradient {
background: linear-gradient(to bottom right, var(--betext-bg-gradient-1));
}
.site-styling__dot-pattern {
position: absolute;
opacity: .75;
z-index: -1;
mask-image: radial-gradient(ellipse at center, black 0%, black 40%, transparent 100%);
inset: 0;
background-image: radial-gradient(circle at 1px 1px, #313131aa 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.post-card__title {
letter-spacing:0!important;
}
.has-glow:before {
content: "";
position: absolute;
inset: -5px;
transform: translate(0);
z-index: -1;
opacity: .5;
background: var(--betext-bg-gradient-base);
border-radius: 12px;
animation: glow-to-blur 1s ease .25s;
animation-fill-mode: both;
}
.has-glow:after {
content: "";
position: absolute;
inset: -1px;
transform: translate(0);
z-index: -1;
opacity: .5;
background: linear-gradient(135deg, transparent 0, transparent 34%, transparent 49%, #fff 57%, #fff 64%, var(--betext-glow-stop-1) 66%, var(--betext-glow-stop-2) 75%, var(--betext-glow-stop-3) 83%, var(--betext-glow-stop-4) 92%, var(--betext-glow-stop-5) 100%);
background-size: 300% 300%;
background-position: 0 0;
background-repeat: no-repeat;
transition: background-position .8s ease;
border-radius: 12px;
animation: glow-to-stroke .5s ease .5s;
animation-fill-mode: both;
}
.has-glow__hover:hover:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--betext-bg-color);
border-radius: var(--betext-rounded-lg);
}
.has-glow__hover:hover:after {
content: "";
position: absolute;
inset: -5px;
transform: translate(0);
z-index: -2;
opacity: .5;
background: var(--betext-bg-gradient-base);
border-radius: var(--betext-rounded-lg);
animation: glow-enter-blur-to-none 1s ease .25s;
animation-fill-mode: both;
}
.shake {
animation: shake 0.5s linear infinite;
}
.num {
display:flex;
background-color:var(--betext-bg-base);
color:var(--kutak--color--contrast-dim);
font-size:0.75rem;
padding:.2rem .55rem;
border-radius:var(--betext-rounded-sm);
line-height:1;
position:absolute;
top:auto;
right:0;
margin-inline-end:var(--kutak--space--xs);
border:1px solid var(--betext-color-border);
transition: transform 0.3s ease;
}
.highlight {
background-color: var(--betext-bg-color);
font-weight: 600;
}
.highlight-gradient {
background: linear-gradient(135deg, var(--betext-bg-gradient-glass));
font-weight: 600;
}
.stat-card {
position:relative;
}
.bg-glass__glow {
background: radial-gradient(ellipse 80% 60% at 5% 40%, rgba(175, 109, 255, 0.28), transparent 67%),
radial-gradient(ellipse 70% 60% at 45% 45%, rgba(255, 100, 180, 0.21), transparent 67%),
radial-gradient(ellipse 62% 52% at 83% 76%, rgba(255, 235, 170, 0.24), transparent 63%),
radial-gradient(ellipse 60% 48% at 75% 20%, rgba(120, 190, 255, 0.26), transparent 66%),
linear-gradient(45deg, var(--betext-bg-gradient-1-50));
}
/* HEADER - NAV */
.site-header {
position:relative;
/* block-size: calc(var(--kutak--size--header) + 30px); */
inset-block-start: 0!important;
padding-block-start: 1.5rem!important;
padding-inline-start:var(--container-inline-start-end);
padding-inline-end:var(--container-inline-start-end);
}
.site-header__container {
background:color-mix(in srgb, var(--betext-bg-base) 30%, transparent);
border-radius: var(--betext-rounded-xl);
-webkit-backdrop-filter: var(--betext-backdrop-blur-lg);
backdrop-filter: var(--betext-backdrop-blur-lg);
/* outline:4px solid rgba(0,0,0,.15); */
outline: 4px solid color-mix(in srgb, var(--betext-color-base) 8%, transparent);
height:var(--kutak--size--header);
position:relative;
z-index:var(--kutak--z-index--modal)!important;
}
.site-search__form input {
background:none;
}
.site-actions__backdrop {
top:calc(var(--kutak--site-actions--height) + var(--kutak--size--header) + var(--kutak--offset--sticky-header));
}
.site-color-scheme__options {
z-index:var(--kutak--z-index--modal);
}
.site-header[data-state] .site-actions__bg {
max-block-size: calc(var(--kutak--site-actions--height) + var(--kutak--size--header) + 32px)!important;
}
.site:not(.webapp) .site-header__container {
background-color:var(--betext-bg-blur);
outline: 4px solid color-mix(in srgb, var(--betext-color-base) 25%, transparent);
}
/* POSTS */
.section[data-section=first], .site-main>.section:first-child {
padding-block-start: calc(var(--kutak--space--section-first) + var(--kutak--size--header)*1.5)!important;
}
.single-post .article-main {
position:relative;
}
.article-header__footer {
text-transform:none;
}
.site-heading>* {
position:relative;
z-index:var(--kutak--z-index--foreground);
}
.article-header__title {
text-align:center;
}
.article-header__content{
position:relative;
z-index:var(--kutak--z-index--foreground);
}
.single .article-header__content .post-meta__category a:after {
width:0!important;
overflow:hidden;
}
.betext-tools .article-header__content {
padding-block:var(--kutak--space--section-first);
}
.single-post .article-header {
background-color:none!important;
}
.single-post .article-header .article-header__content {
justify-content:center;
justify-self:center;
align-items:center;
max-width:100%;
}
.single-post .article-header .post-meta__category {
align-self:center;
}
.single-post .article-header .article-header__excerpt,
.betext-tools .article-header .tool-header__subtitle {
text-align:center;
}
.tool-header__subtitle {
--kutak--flow--content: var(--kutak--space--s);
font-size: var(--kutak--font-size--base);
margin-block-start: var(--kutak--flow--content);
}
.note {
position:relative;
display:flex;
flex-flow:row nowrap;
gap:1rem;
margin-block-start:var(--kutak--space--xs);
border: 2px solid var(--betext-color-border);
padding:.75rem 1rem;
border-radius:8px;
font-size: var(--kutak--font-size--xs);
color: var(--kutak--color--contrast-dim);
}
.note:before {
content:'🗒️';
font-size: var(--kutak--font-size--m);
}
.article-header .post-meta__category a {
background-color: var(--betext-bg-base);
box-shadow: 0 0 #001, 0 0 #001, var(--betext-btn-shadow);
padding:.55rem 1.85rem!important;
border-radius:var(--betext-rounded-lg);
outline:1px solid var(--betext-color-border);
outline-offset:0!important;
margin-bottom:1.5rem;
transition: all 0.3s ease;
}
.article-header .post-meta__category a:hover {
outline:var(--betext-outline-base);
}
/** BLOG **/
.blog .article-header {
padding-block-end: var(--kutak--space--site)!important;
}
/* SIDEBAR */
.betext__more-tools {
outline:var(--betext-outline-aside);
border-radius:var(--betext-rounded-3xl);
padding:1rem;
background:var(--betext-bg-blur);
-webkit-backdrop-filter: var(--betext-backdrop-blur-md);
backdrop-filter: var(--betext-backdrop-blur-md);
}
/* TERMS */
.post-card__content {
flex:0 0 auto!important;
}
/* FOOTER */
.site-footer {
background:none;
position:relative;
margin:8rem auto 0;
padding-inline-start:var(--container-inline-start-end);
padding-inline-end:var(--container-inline-start-end);
}
.site-footer.has-glow:before {
pointer-events: none;
user-select: none;
inset-block:-1rem;
inset-inline:-10rem;
border-radius:99em;
}
.site-footer.has-glow:after {
inline-size:100%;
max-inline-size: var(--container-max-inline-size);
border-radius: 2.5rem;
display:none;
}
.site-footer__content {
background-color:var(--betext-bg-base);
margin:2rem auto;
padding:4rem;
border-radius:2.5rem;
outline:5px solid rgba(255,255,255,.5);
box-shadow: 0 0 #001, 0 0 #001, 0px 4px 24px rgba(0,0,0,.15)
;
inline-size:100%;
max-inline-size: var(--container-max-inline-size);
}
.site-footer__content .nav-secondary__menu-link:hover {
text-decoration: underline;
}
.current_page_item a {
text-decoration:underline;
}
/* TOOLTIP */
.has-tooltip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
color:var(--kutak--color--contrast)!important;
}
.has-tooltip:before {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: auto;
right: auto;
font-size: .8675rem;
opacity: 0;
visibility: hidden;
padding: .4rem 1rem;
border-radius: var(--betext-rounded-sm);
white-space: nowrap;
line-height: 1;
z-index: 10;
transition: opacity .3s ease-in-out;
border:1px solid var(--betext-color-border);
margin-block-start:2px;
}
.has-tooltip:hover:before {
background: var(--betext-bg-base);
opacity: 1;
visibility: visible;
}
.meta-title .tooltip {
text-transform: none;
}
.tooltip {
margin-left: 8px;
width: 20px;
height: 20px;
background: #6c757d;
color: white;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
cursor: help;
position: relative;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 220px;
background-color: #1f2937; /* gray-800 */
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 10;
bottom: 125%;
left: 50%;
margin-left: -110px;
opacity: 0;
transition: opacity 0.3s;
font-size: 0.875rem;
font-weight: 500;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #1f2937 transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
.tap-to-copy {
position: relative;
cursor: pointer;
}
.tap-to-copy input[readonly] {
cursor:pointer;
}
.tap-to-copy::after {
content: "Click to copy";
position: absolute;
bottom: 100%; /* show above */
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.tap-to-copy:hover::after {
opacity: 1;
}
.tap-to-copy.copied::after {
content: "Copied!";
background: #2b8a3e;
}
/** TRANSLATIONS SWITCHER **/
.site-footer__actions {
padding-block-start:var(--container-inline-start-end);
justify-content: center;
align-items: center;
gap:.75rem;
}
.site-footer__actions select,
.scrolltop-link {
border-radius: var(--betext-rounded-lg);
height:50px;
}
.scrolltop-link {
border:1px solid var(--betext-color-border);
padding-inline: var(--kutak--space--xs);
aspect-ratio: 1;
align-content: center;
line-height: calc(50px + var(--kutak--space--xs));
}
.language-switcher__container {
display:flex;
justify-content:center;
align-items:center;
margin:0 auto;
}
.language-switcher__container .language-switcher-dropdown {
display:inline-block;
font-size: var(--kutak--font-size--base-small);
}
.language-switcher-dropdown select:empty {
display:none!important;
height:0!important;
width:0!important;
}
.site-footer__copyright {
margin-block-start: 0!important;
}
/* BETEXT TOOLS */
.betext-app {
display:flex;
justify-content:center;
margin-block-start:0!important;
margin-block-end:var(--kutak--space--site);
}
.page-tools .betext-app {
background-color: var(--betext-bg-color)!important;
padding-block: var(--kutak--space--section-first);
}
.page-tools .betext-app.layout__content-width {
padding-inline-start: var(--container-inline-start-end);
padding-inline-end: var(--container-inline-start-end);
}
.betext-app.layout__full-width {
background-color:var(--betext-bg-color);
padding-inline-start: var(--container-inline-start-end);
padding-inline-end: var(--container-inline-start-end);
}
.betext__related-tools {
padding-inline-start:var(--container-inline-start-end);
padding-inline-end:var(--container-inline-start-end);
}
.betext-app .betext-tools__container {
text-align:center;
inline-size: 100%;
/* max-inline-size: var(--container-max-inline-size); */
max-inline-size: 2560px;
padding-block-end:var(--kutak--space--section-first)!important;
}
.betext-app.layout__content-width .betext-tools__container {
padding-block-end:0!important;
}
.betext-tools__bg {
background-color:var(--betext-bg-color);
position:absolute;
inset:0;
z-index:0;
width:100%;
display:block;
}
.tools-card .post-card__content {
margin-block-start: 0!important;
margin-inline-end: 0!important;
margin-inline-start: 0!important;
padding-block-start: 0!important;
padding-inline: 0!important;
background:transparent!important;
}
.tools-card .post-card__footer {
border:0;
margin-block-start:.45rem;
margin-block-end:1.25rem;
}
.playground .tools-card .post-card__footer {
margin-block-end:0!important;
padding-block-end:0!important;
}
.tools-card .post-card__footer .post-meta__item-inner,
.text-gradient {
-webkit-text-fill-color: transparent;
background: linear-gradient(to left, var(--betext-bg-gradient-1)) text;
background-clip: border-box;
-webkit-background-clip: text;
}
.post-card__tools {
position:relative;
}
.betext-tools-list {
display:flex;
flex-direction:column;
gap:1.5rem;
}
.betext-tools-item {
position:relative;
background-color: var(--betext-bg-blur);
border-radius:var(--betext-rounded-lg);
padding:.75rem;
outline: var(--betext-outline-base);
transition: transform 0.3s ease-in-out;
}
.betext-tools-item:hover,
.cpaw-tools-category:hover {
background-color:var(--betext-bg-color);
box-shadow: 0 0 #001, 0 0 #001, 0px 4px 24px rgba(0, 0, 0, .125);
transform: translateY(-2px);
}
.cpaw-tool__link.active {
background-color:color-mix(in srgb, var(--betext-bg-base) 75%, transparent);
}
.betext-tool-icon {
display: flex;
width: 50px;
height: 50px;
aspect-ratio: 1;
border-radius: 22.5px;
background-color: var(--kutak--color--border-dim);
background-image: linear-gradient(to right bottom, var(--betext-bg-gradient-glass));
font-size: 22px;
align-items: center;
justify-content: center;
transition: .3s ease-in;
}
.betext-tool-icon svg {
color:var(--betext-color-icon);
width:24px;
height:24px;
opacity:.85;
}
.betext-tool-icon i {
color:var(--betext-color-icon);
font-style:normal;
font-weight:400;
opacity:.85;
font-size:var(--kutak--font-size--m);
}
.betext-tools-item .post-card__content-link:hover .betext-tool-icon,
.cpaw-tools-category__header:hover .betext-tool-icon{
background: linear-gradient(to right bottom, var(--betext-bg-gradient-1));
}
.betext-tools-item .post-card__content-link:hover .betext-tool-icon svg,
.cpaw-tools-category__header:hover .betext-tool-icon svg,
.betext-tools-item .post-card__content-link:hover .betext-tool-icon i,
.cpaw-tools-category__header:hover .betext-tool-icon i{
opacity:1;
}
.betext-tools-item .post-card__content-main{
display:flex;
flex-flow:column wrap;
justify-content:flex-start;
gap:.75rem;
}
/* Home */
.home .site-heading {
flex-direction: column;
justify-content: center;
align-items:center;
padding-block-start:calc(var(--kutak--space--section) * 2);
padding-block-end:var(--kutak--space--section);
gap: var(--kutak--space--xs-s);
}.home .site-heading__content {
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
margin-block-end:1rem;
}
.home .site-heading__content .site-heading__title {
text-align:center;
position: relative;
display:inline-block;
}
.home .site-heading__info {
display:flex;
gap:.55rem;
align-items:center;
justify-content: center;
font-weight: var(--kutak--font-weight--headings);
position:relative;
z-index:1;
padding:.35rem 1.85rem;
border-radius:99em;
overflow: hidden;
}
.home .site-heading__info span {
font-size:100%!important;
margin-block-end: 0;
}
.home .site-heading__info:before,
.home .site-heading__info:after {
content:'';
display:block;
position:absolute;
border-radius:99em;
z-index:-1;
margin:auto;
}
.home .site-heading__info:before {
width:100%;
height:100%;
inset:0;
background:var(--betext-bg-gradient-base);
}
.home .site-heading__info:after {
width:calc(100% - 2px);
height:calc(100% - 2px);
inset:1px;
background-color:var(--kutak--color--base);
}
.home .site-heading__info span:before{
content:'🚀';
font-size:var(--kutak--font-size--l);
margin-right:.25rem;
}
.home .betext-tools-item .post-card__content-main,
.archive .betext-tools-item .post-card__content-main {
gap:1rem;
}
.home .betext-tools-item,
.archive .betext-tools-item,
.playground .betext-tools-item {
padding: 1rem 1.25rem 1.25rem;
}
.playground [data-layout-grid] {
gap: var(--kutak--space--column)!important;
}
.playground[data-layout-grid] {
gap:0!important;
}
.betext-tools-item.tool-layout__featured .post-card__content-main {
flex-flow:row nowrap;
align-items:center;
gap:1.5rem;
}
.home .betext-tools-item .post-card__content-main {
flex-flow: row nowrap;
align-items: center;
}
.home .betext-tools-item .post-card__title {
font-size:var(--kutak--font-size--base);
font-weight:var(--kutak--font-weight--base);
line-height:1.5em;
}
.home .betext-tools-item .post-card__title .post-card__title-inner {
font-size: 100%;
}
.betext-tools-item .post-card__title {
letter-spacing:0;
}
.betext-tools-item:not(.tool-layout__featured) .post-card__title-inner,
.betext-tools-item .post-card__excerpt,
.betext-tools-item .tool-card__subtitle{
font-size:80%;
}
.betext-tools-item .post-card__title,
.betext-tools-item .post-card__excerpt,
.betext-tools-item .tool-card__subtitle,
.tools-card .post-card__content-main{
margin-block:0!important;
padding-block:0!important;
}
.tool-card__subtitle {
-webkit-box-orient: vertical;
color: var(--kutak--color--contrast);
display: -webkit-box;
font-size: var(--kutak--font-size--base-small);
line-height: var(--kutak--line-height--base-small);
-webkit-line-clamp: 3;
line-clamp: 3;
max-height: 5.0625rem;
overflow: hidden;
text-overflow: ellipsis;
}
.related-tools {
position:relative;
margin: 0 auto;
inline-size: 100%;
max-inline-size: var(--container-max-inline-size);
margin-block-end:4rem;
padding-block-start:0!important;
outline: var(--betext-outline-aside);
border-radius: var(--betext-rounded-3xl);
overflow:hidden;
}
.betext__related-tools {
position:relative;
}
.related-tools .betext-tools-item {
background:var(--betext-bg-blur);
-webkit-backdrop-filter: var(--betext-backdrop-blur-md);
backdrop-filter: var(--betext-backdrop-blur-md);
}
.related-tools .betext-tools-item:hover {
background:var(--betext-bg-color);
}
.related-tools .section-title {
text-align:center;
font-size:125%;
}
.related-tools .section-title,
.related-tools .related-posts__grid {
position:relative;
z-index:1;
}
.related-tools .related__bg-gradient {
position: absolute;
inset:0;
inset-inline-start: 50%;
margin: auto;
background: linear-gradient(135deg, var(--betext-bg-gradient-2));
pointer-events: none;
user-select: none;
filter: blur(55px);
opacity:.7556;
height:100%;
inline-size: 95%;
transform: translateX(-50%) translateY(-28%)!important;
border-radius:0 0 50% 50%;
}
.related-tools .section-title:after {
display:none;
visibility:hidden;
}
/** BETEXT APP ROOT **/
.betext-app .loading {
font-size:var(--kutak--font-size--2xs);
opacity:.57;
}
.flex-row {
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:var(--container-inline-start-end);
padding-block:var(--container-inline-start-end);
}
.layout__content-width .flex-row {
padding-block:0;
}
.layout__content-width .flex-row.grid {
display:grid!important;
grid-gap: var(--kutak--space--xs-s);
}
div[data-canvas-flex="container"] {
display:flex;
margin:0 auto;
flex-direction: column!important;
justify-content: center!important;
inline-size: 100%;
max-inline-size: var(--container-max-inline-size);
}
.flex-row[data-canvas-flex="full-width"] {
gap:0;
}
.flex-col {
position:relative;
background-color:var(--betext-bg-base);
border-radius: var(--betext-rounded-xl);
width:100%;
display:flex;
justify-content:flex-start;
flex-direction:column;
text-align:left;
max-width:calc(50% - var(--kutak--space--xs));
outline: var(--betext-outline-column);
}
.layout__content-width .flex-row.grid .flex-col,
.flex-row[data-canvas-flex] .flex-col {
max-width:100%;
}
.page-tools .flex-col {
outline: 4px solid color-mix(in srgb, var(--betext-color-base) 18%, transparent);
}
/* .betext-tools__actions:not([class*='mod__']), */
.betext-tools__header,
.betext-tools__footer,
.betext-tools__actions,
.betext-tools__options,
.betext-tools__results {
padding-block: var(--kutak--space--xs);
padding-inline: var(--kutak--space--xs);
}
.flex-row header,
.betext-tools__header {
position:relative;
display:flex;
justify-content:space-between;
align-items:center;
gap:var(--container-inline-start-end);
flex-flow: row nowrap;
width:100%;
height:60px;
max-height:60px;
border-bottom: 1px solid var(--kutak--color--border);
user-select: none;
}
.flex-col.betext-tools-result,
.betext-tools-result .betext-tools__header {
overflow: unset!important;
}
.betext-tools__header:before {
content:"";
position:absolute;
inset:0;
z-index:0;
width:100%;
height:100%;
pointer-events:none;
opacity:var(--betext-bg-opacity);
border-radius:calc(var(--betext-rounded-lg) + 5px) calc(var(--betext-rounded-lg) + 5px) 0 0;
}
.betext-tools__header:before {
background-image:radial-gradient(67.52% 167.71% at 10.38% -41.67%, var(--betext-btn-bg-gradient) 0%, transparent 100%);
}
.betext-tools__header label {
position:relative;
z-index:1;
margin-block-end:0!important;
}
.betext-tools__header p {
color: var(--kutak--color--contrast-dim);
display: inline-block;
font-family: var(--kutak--font-family--elements);
font-size: var(--kutak--font-size--2xs);
font-weight: var(--kutak--font-weight--elements);
line-height: 1.5;
margin-block-end: var(--kutak--space--3xs);
}
.betext-tools__header select {
padding-block: var(--kutak--space--2xs)!important;
max-width:9rem;
}
.flex-row .betext-tools__content {
position:relative;
display: flex;
flex-flow: column wrap;
}
.flex-row .betext-tools__content .betext-content__container {
padding-inline:var(--container-inline-start-end);
padding-block:var(--container-inline-start-end);
width:100%;
}
.betext-tools__counters:not(.mod__relative),
.result-content__options {
position:absolute;
inset-block-end:1px;
inset-inline-start:1px;
inset-inline-end: var(--kutak--scrollbar-width);
z-index:0;
}
.betext-tools__counters .betext-tools-counter__container,
.result-content__options {
display:flex;
justify-content:flex-start;
align-items:center;
gap:var(--container-inline-start-end);
font-size:12px;
text-transform:uppercase;
user-select: none;
}
.betext-tools-counter__container .betext-item__counter {
background: var(--kutak--color--base)/85%;
-webkit-backdrop-filter: var(--betext-backdrop-blur-md);
backdrop-filter: var(--betext-backdrop-blur-lg);
padding:.12rem .5rem;
border-radius:var(--betext-rounded-sm);
}
.result-content__options {
background: var(--kutak--color--base)/85%;
-webkit-backdrop-filter: var(--betext-backdrop-blur-md);
backdrop-filter: var(--betext-backdrop-blur-lg);
padding:0 .5rem;
height:1.25rem;
width:calc(100% - var(--kutak--scrollbar-width));
}
.result-content__options label {
font-size:12px;
font-weight:400;
margin-block-end:0;
}
.flex-row .betext-tools__content .betext-tools__counter p {
margin-block-start:0!important;
padding-block:0!important;
text-transform:uppercase;
font-size:80%;
}
.betext-app .result-content {
background-color: var(--kutak--color--base);
/* border: 1px solid var(--kutak--color--border); */
color: var(--kutak--color--contrast);
font-family: inherit;
font-size: 1rem;
line-height: 1.6;
margin: 0;
padding-block: var(--kutak--space--xs);
padding-inline: var(--kutak--space--xs);
transition: border-color .2s;
width: 100%;
word-break: break-all;
overflow-wrap: break-word;
overflow-y: auto;
}
.betext-app .betext-tools__actions {
border-top:1px solid var(--betext-color-border);
}
.flex-row .mod__col-border .betext-tools__actions {
width:100%;
}
textarea.input-text,
textarea.result-content,
div.result-content {
border-radius:0;
resize:vertical;
height:var(--betext-textarea-height);
min-height: var(--betext-textarea-min-height);
border:none!important;
padding-block-end:2rem;
}
.clean-text pre,
.clean-text pre code {
background:transparent!important;
padding:0!important;
font-family:var(--kutak--font-family--base);
font-size:var(--kutak--font-size--base);
overflow:unset;
word-break: break-all!important;
width:100%;
inline-size:100%;
max-inline-size:100%;
max-width:100%;
white-space: wrap;
}
.variant-option {
position:relative;
display: flex;
justify-content: flex-start;
flex-flow:column wrap;
gap:1.5rem;
font-size: 1rem;
margin-block-end:2rem;
border-bottom:2px solid var(--betext-color-border);
padding:0 .5rem 3rem;
word-break: break-all!important;
}
.variant-option button {
position:absolute;
bottom:.5rem;
right:.5rem;
z-index:1;
}
.variant-option button:before {
content:'Copy 📋';
}
.variant-option button.copied:before {
content:'Copied ✔️';
}
.input-with-unit select:is(:last-child),
.input-with-unit input:is(:last-child) {
width:100px;
}
.betext-app .content-list__index, .betext-app .content-list {
display:flex;
flex-flow:column wrap;
gap:var(--container-inline-start-end);
overflow-wrap: anywhere;
}
.betext-app .content-item {
border-bottom:1px solid var(--kutak--color--border);
padding:1.25rem 0;
}
.betext-app .font-style__container {
position:relative;
}
.font-style__text {
margin-block-start:0;
padding-right:5.5rem;
margin:0;
}
.betext-app i.icon {
font-size:1.35em;
}
.betext-tools__placeholder {
display:flex;
flex-flow:column nowrap;
padding-inline: var(--container-inline-start-end);
padding-block-start:var(--kutak--space--s);
padding-block-end:calc(var(--kutak--space--s) * 1.5);
}
.result-content__placeholder {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:100%;
min-height:var(--betext-textarea-min-height);
text-align:center;
padding-block:var(--kutak--space--xs);
font-size:1rem;
}
.betext-tools__placeholder .result-content__placeholder,
.results {
border:1px solid var(--kutak--color--border);
border-radius:var(--betext-rounded-lg);
background-color: var(--betext-bg-blur);
box-shadow:var(--betext-box-shadow);
}
.results {
box-shadow:none;
padding-inline: var(--container-inline-start-end);
padding-block: var(--container-inline-start-end);
margin-block-end:calc(var(--kutak--space--s) * 1.5);
}
.results__bg {
background-color: var(--betext-bg-blur)!important;
}
.result-content__animation .result-content__placeholder {
height:calc(var(--betext-textarea-height) - (var(--betext-share-height) - 4.5rem));
}
.content__border-bottom {
border-bottom:1px solid var(--kutak--color--border);
}
.betext__components-button {
display:flex;
align-items:center;
justify-content:space-between;
gap:.25rem;
cursor:pointer!important;
border-radius: var(--betext-rounded-sm);
background: var(--betext-bg-blur);
padding-block: var(--kutak--space--2xs);
padding-inline: .625rem;
position: relative;
transition: transform 0.3s;
outline:none!important;
font-size: var(--kutak--font-size--2xs)!important;
border: 1px solid var(--betext-color-border);
font-weight:400;
}
.button-ghost {
background:transparent;
border-color:transparent;
}
.betext__components-button:hover,
.btn:hover {
background-color: var(--betext-bg-accent);
color:#ffe;
border-color: var(--betext-color-border);
transform: translateY(-2px);
}
.betext__components-button.more-actions:hover {
transform: translateY(0);
}
.betext-app .font-style__container button {
border-radius:6px;
font-size:90%;
}
.betext-app .betext__components-button svg {
width:20px;
height:20px;
}
.betext-app .betext__components-button:hover svg {
fill:#ffe!important;
color:#ffe!important;
}
.betext-app .betext__components-button:hover img {
filter: invert(1);
-webkit-filter:invert(1);
}
.betext-app svg {
color: var(--betext-color-icon);
width: 24px;
height: 24px;
}
.font-style__container .button__copy {
position: absolute;
top: 0;
right: 0;
margin-left: auto;
text-align: left;
height:28px;
padding: 0 .625rem;
background-color:var(--betext-btn-bg-color);
background-image: url("data:image/svg+xml;utf8,");
background-size: .785rem .785rem;
background-repeat: no-repeat;
background-position: center right .75rem;
cursor: pointer;
color:var(--betext-btn-text-color);
transition: all 0.3s ease-in-out;
}
.button__copy.copied {
background-color:var(--betext-bg-accent)!important;
}
.font-style__container .button__copy:before {
content: "Copy";
display: inline-block;
padding-right:1.2rem;
font-size:90%;
}
.font-style__container .button__copy.copied:before {
content: "Copied";
}
#loadMoreFonts {
display:flex;
justify-content:center;
align-items:center;
padding:0;
}
.betext-item__action {
border-radius:var(--betext-rounded-md);
transform: translateY(0);
/* box-shadow:var(--betext-btn-shadow); */
}
.button__loadmore:not(:empty),
button.betext-item__action:not(.hidden) {
display:inline-flex;
position:relative;
border-radius:var(--betext-rounded-md);
background-color: var(--betext-bg-blur);
outline-offset:0!important;
outline:none!important;
align-items:center;
inline-size: auto;
padding-block: calc(var(--kutak--space--2xs) + .3rem);
padding-inline: calc(var(--kutak--space--s) + .1rem);
line-height: 1.4;
min-inline-size: -moz-fit-content;
min-inline-size: fit-content;
font-size:var(--kutak--font-size--xs)!important;
font-weight: 500;
transition: transform 0.2s ease-in-out;
vertical-align:middle;
border:1px solid var(--betext-btn-border-clr);
}
.betext-item__action.w-full {
display:flex!important;
border:none!important;
outline:none!important;
justify-content: center!important;
}
select.betext-item__action {
padding-block: calc(var(--kutak--space--2xs) + .3rem)!important;
padding-inline: var(--kutak--space--s)!important;
outline:none!important;
}
select.betext-item__action:hover {
background-color: var(--betext-bg-base);
}
.betext-item__action svg {
block-size: clamp(1.125rem, .3279vw + 1.0451rem, 1.25rem);
inline-size: clamp(1.125rem, .3279vw + 1.0451rem, 1.25rem);
color:var(--betext-color-base);
margin-inline-start: .5rem;
}
button.betext-item__action:not(.button__generating) {
padding-block: calc(var(--kutak--space--2xs) + .2rem);
}
.betext-item__action[class*="btn__bg-"] {
color:#ffe!important;
justify-content: center;
border:0!important;
outline:none!important;
padding-block: calc(var(--kutak--space--2xs) + .3rem);
}
.button__export-to-txt,
.button__export-to-csv,
.button__generating,
.button__loadmore {
color:#ffe!important;
justify-content: center;
background: linear-gradient(to right bottom, var(--betext-bg-gradient-1));
transition: background 1s ease-out;
border:0!important;
}
.button__export-to-txt svg,
.button__export-to-csv svg,
.button__generating svg,
.betext-item__action[class*="btn__bg-"] svg {
color:var(--betext-btn-text-color);
}
.button__generating:hover {
background: var(--betext-bg-gradient-base);
}
.button__loadmore:hover,
.betext-item__action:hover {
background-color: var(--betext-btn-hover-color);
transform: translateY(-2px);
border-color:var(--betext-btn-border-clr-hover)!important;
}
.betext-tools__actions .betext-tools-action__container,
.betext-tools__options .betext-tools-option__container{
position:relative;
display:flex;
justify-content:center;
align-items:center;
gap:var(--container-inline-start-end);
margin:auto;
width:100%;
}
.flex-row .mod__col-border .betext-tools__options{
border-bottom:1px solid var(--kutak--color--border);
}
.betext-tools__options .betext-tools-option__container{
padding-block:var(--container-inline-start-end);
justify-content:space-between;
gap:var(--kutak--space--xs);
flex-wrap:wrap;
}
.input__text-file {
width:auto;
max-width:100%;
border-radius: var(--betext-rounded-lg);
}
.betext-item__col {
display:flex;
gap:var(--container-inline-start-end);
align-items:flex-start;
flex: 0 0 auto;
}
.betext-item__col:not(.tick__option){
flex-flow:column wrap;
width:calc(50% - var(--container-inline-start-end));
}
.betext-item__col.tick__option{
align-items: center;
width:100%;
margin-block-start:1rem;
}
.flex-row[data-canvas-flex] .betext-item__col {
width:100%;
}
.betext-item__col.tick__option input[type='checkbox']{
order:-1;
}
.result-content__options .betext-item__col.tick__option {
margin-block-start:0;
}
.betext-item__col.submit__to-generate button{
width:100%;
justify-content: center;
}
.button__loadmore:active,
button.betext-item__action:active,
.betext__components-button:active {
transform: translateY(1px);
}
.betext-tools__results {
position:relative;
display:flex;
flex-flow:column wrap;
gap:calc(var(--container-inline-start-end)*2);
align-items: center;
}
.betext-grid__container {
display:flex;
flex-flow:column wrap;
gap:calc(var(--container-inline-start-end)*4);
align-items: center;
}
.betext-grid__container,
.betext-grid__container .grid-row {
width:100%;
}
.betext-grid__container .grid-row{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
grid-gap:var(--container-inline-start-end);
}
.row-item {
position:relative;
transition: all 0.3s ease-in-out;
}
.row-item.has-glow:after,
.row-item.has-glow:before {
z-index:0;
}
.row-item .row-item__text {
display:block;
padding:.75rem;
border-radius:var(--betext-rounded-lg);
text-align:center;
position:relative;
background:var(--betext-bg-color);
z-index:2;
height:100%;
}
.row-item:hover {
transform: translateY(-2px);
}
.row-item__text span {
display:block;
font-size:var(--kutak--font-size--2xs);
color:var(--kutak--color--contrast-dim);
}
.message-box,
.show-toast {
position: fixed;
bottom: 1rem;
right: 1rem;
background-color: var(--betext-bg-secondary);
color: inherit;
padding: 0.75rem 1.5rem;
border-radius: var(--betext-rounded-lg);
z-index: calc(var(--kutak--z-index--modal) + 10);
opacity: 0;
transition: opacity 0.3s ease-in-out;
outline: 3px solid var(--kutak--color--border);
backdrop-filter: var(--betext-backdrop-blur-lg);
animation: slideIn 0.3s ease-out;
}
.message-box.show,
.show-toast {
opacity: 1;
}
.swap-btn {
--color-swap-btn:#ffe;
background: linear-gradient(to right bottom, var(--betext-bg-gradient-2));
border: none;
color: var(--color-swap-btn);
padding: 15px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s ease;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-inline: var(--kutak--space--s);
}
.swap-btn svg {
color:var(--color-swap-btn)
}
.swap-btn:hover {
transform: scale(1.1);
}
/** FOOTER BETEXT **/
.site-footer__betext {
border-block-end: 1px solid var(--kutak--color--border-dim);
display:flex;
justify-content:space-between;
align-items:center;
padding-block-start: var(--kutak--space--m);
padding-block-end: var(--kutak--space--xs);
}
.site-footer__betext .site-footer__socials {
border-block:none;
padding-block-end: 0;
}
.site-footer__content .nav-secondary__menu {
gap: var(--kutak--space--m);
margin-block-end: var(--kutak--space--m);
}
.site-footer__nav-services {
margin: 0 auto;
text-align:center;
}
.site-footer__nav-services ul{
list-style:none;
display:inline-block;
font-size: var(--kutak--font-size--2xs);
padding:0;
}
.site-footer__nav-services ul li{
display:inline-block;
}
.site-footer__nav-services ul li a{
padding:.25rem;
}
.site-footer__nav-services ul li a:hover{
text-decoration:underline;
color: var(--kutak--color--primary);
}
/** LOADER **/
.betext-loader {
position:absolute;
inset:0;
z-index:var(--kutak--z-index--modal);
background-color:var(--betext-bg-color);
opacity:.75;
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
pointer-events:none;
user-select:none;
-webkit-user-select:none;
border-radius:var(--betext-rounded-lg);
overflow:hidden;
}
.betext-loader__container {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.betext-loader__container svg {
margin: 10px;
width: 135px;
height: 135px;
color:var(--betext-color-icon);
}
.betext-loader__overlay {
position:absolute;
inset:0;
z-index:var(--kutak--z-index--modal);
background: var(--kutak--color--overlay-backdrop);
transition: opacity .3s, visibility .3s;
backdrop-filter: var(--betext-backdrop-blur-lg);
}
.betext-loader__glow {
display:flex;
justify-content:center;
align-items:center;
min-height:250px;
width:100%;
}
.loader-glow {
position: relative;
width: 75px;
aspect-ratio: 1;
border-radius: 99em;
background: var(--betext-bg-gradient-base);
animation: loader-glow .75s linear infinite;
animation-fill-mode: both;
}
.loader-glow:before {
content: '';
position: absolute;
inset:4px;
background: var(--betext-bg-color);
border-radius: 99em;
z-index: var(--kutak--z-index--modal);
opacity:.85;
backdrop-filter: var(--betext-backdrop-blur-lg);
}
.loader-glow:after {
content: '';
position: absolute;
inset:0;
background: var(--betext-bg-gradient-base);
border-radius: 99em;
z-index: 1;
filter: blur(30px);
}
.load-more {
gap:.55rem;
}
/* CPAW : CATEGORY POSTS ACCORDION WIDGET */
.cpaw .cpaw-tools__container {
width:100%;
opacity:1;
}
.cpaw-tools-category {
position: relative;
background-color: var(--betext-bg-blur);
border-radius: var(--betext-rounded-lg);
outline: var(--betext-outline-base);
transition: transform 0.3s ease-in-out;
}
.cpaw-tools-category__header {
position:relative;
padding: .75rem;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 1rem;
transition: background-color 0.2s ease;
font-size: var(--kutak--font-size--post-card-featured-title);
line-height: 1.45;
border-radius: var(--betext-rounded-lg);
}
.cpaw-tools-category__content {
font-size: var(--kutak--font-size--xs);
}
.cpaw-tools-category .cpaw-tools-category__header .num {
right:calc(1rem + 35px);
}
.cpaw-tools-category__header:hover {
background-color: var(--betext-bg-blur);
}
.cpaw-tools-category .cpaw-tools-category__header:hover .num {
background-color: var(--betext-color-accent);
color:#ffe;
}
.cpaw-tools-category__header:hover {
background-color: var(--betext-bg-blur);
}
.cpaw-tools-category .cpaw-tools-category__header:hover .num {
background-color: var(--betext-color-accent);
color:#ffe;
}
.cpaw-tools-category__header.active {
background-color: var(--betext-bg-blur);
border-radius: var(--betext-rounded-lg) var(--betext-rounded-lg) 0 0;
}
.cpaw-tools-category__header:after,
.cpaw-tool__link:after{
content:'';
position:absolute;
right:1rem;
background-size: 1.15rem 1.15rem;
background-repeat: no-repeat;
background-position: center;
transition: all 0.3s ease;
height:35px;
width:35px;
display:block;
}
.cpaw-tools-category__header:after {
background-image: url("data:image/svg+xml;utf8,");
}
.cpaw-tool__link:after {
right:.35;
}
.cpaw-tool__link:after {
background-image: url("data:image/svg+xml;utf8,");
}
.cpaw-tool__link:hover:after {
filter: invert(1);
-webkit-filter:invert(1);
right:0;
}
.cpaw-tools-category__header.active:after {
transform: rotate(180deg);
}
.cpaw-tools-category__content {
background-color:var(--betext-bg-color);
border-radius:var(--betext-rounded-lg);
width:100%;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.cpaw-tools-category__content.active {
transition: max-height 0.3s ease-in;
}
.cpaw-tools-list {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
padding-inline:var(--kutak--space--xs);
padding-block-end: var(--kutak--space--s);
gap:var(--kutak--space--xs);
}
.cpaw-tool__link {
position:relative;
border-radius:var(--betext-rounded-md);
display:flex;
align-items:center;
justify-content:space-between;
gap:.5rem;
border:1px solid var(--betext-color-border);
}
.cpaw-tools-list a,
.no-posts-message{
font-weight:400;
padding: .75rem var(--kutak--space--xs);
}
.cpaw-tools-list a:hover {
background-color: var(--betext-bg-accent);
color:var(--kutak--color--primary-contrast);
box-shadow: 0 0 #001, 0 0 #001, 0px 4px 24px rgba(0, 0, 0, .125);
border:none;
}
.cpaw-tool__title {
padding-right:2rem;
}
.cpaw .cpaw-search-box-tools__container .search-icon{
position:absolute;
inset-inline-start: 0;
inset-block-start: 0;
margin-inline-start: 1rem;
margin-block-start: 1rem;
}
.cpaw .cpaw-search-box-tools__container input[type="search"] {
width:100%;
border-radius: var(--betext-rounded-lg);
outline:none;
padding:.75rem .75rem .75rem 4rem;
box-sizing:border-box;
}
/* INFO CARD IN POSTS */
.info-card {
position:relative;
}
.info-card__item .card-content ul,
.info-card__item .card-content ul li,
.info-card__item .card-content ul li::marker {
color:var(--kutak--color--contrast);
opacity:1;
}
.info-card__key_features .card-content ul li:not(li ul li)::marker {
content:"✨ ";
}
.info-card__common_use_cases .card-content ul li:not(li ul li)::marker {
content:"💡 ";
}
/* .info-card__how_to_use .card-content ul li:not(li ul li)::marker {
content:"👉 ";
} */
.info-card__instructions .card-content ul li:not(li ul li)::marker {
content:"📌 ";
}
.info-card__technical_highlights .card-content ul li:not(li ul li)::marker {
content:"⌘ ";
color:orange;
}
.info-card__common_questions .card-content ul li:not(li ul li)::marker {
content:"❓ ";
}
.info-card__key_features .card-content ul ul li::marker {
content:"🌟 ";
}
.info-card__item .card-content ul>li>ul {
list-style-type:disc!important;
}
.info-card__how_to_use .card-content ul:not(li ul) {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
padding-inline-start:0!important;
margin-block-start: .5em;
margin-block-end: 1em;
}
.info-card__how_to_use .card-content ul li:not(li ul li) {
display:flex;
border:1px solid var(--betext-color-border);
border-radius:var(--betext-rounded-lg);
padding:1rem;
list-style:none;
background-color:var(--betext-bg-color);
font-weight:500;
flex-flow:column wrap;
gap:.55rem;
position: relative;
margin-block-end: 0!important;
margin-block-start: 0!important;
min-height:100px;
}
.info-card__how_to_use .card-content ul li:not(li ul li):before {
content:'👉 ';
font-size:2.65rem;
height:55px;
width:55px;
display:flex;
justify-content: center;
align-items: center;
border-radius:var(--betext-rounded-full);
color:color-mix(in srgb, #ffe 70%, transparent);
box-shadow:var(--betext-btn-shadow);
background-color:var(--betext-bg-accent);
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(1):before {
content:'❶';
background: linear-gradient(135deg, var(--betext-bg-gradient-1));
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(2):before {
content:'❷';
background: linear-gradient(135deg, var(--betext-bg-gradient-2));
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(3):before {
content:'❸';
background: linear-gradient(135deg, var(--betext-bg-gradient-3));
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(4):before {
content:'❹';
background: linear-gradient(135deg, var(--betext-bg-gradient-green));
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(5):before {
content:'❺';
background: linear-gradient(135deg, var(--betext-bg-gradient-5));
}
.info-card__how_to_use .card-content ul li:not(li ul li):nth-child(6):before {
content:'❻';
background: var(--betext-glow-stop-5);
}
.info-card__how_to_use .card-content ul>li>ul {
font-size:16px;
font-weight:400;
flex:1;
width:100%;
}
/* ACCRORDION STYLES */
.accordion-content p {
font-size:var(--kutak--font-size--xs);
}
.accordion-style__outline .accordion-item{
position: relative;
background-color: var(--betext-bg-blur);
border-radius: var(--betext-rounded-lg);
outline: var(--betext-outline-base);
transition: transform 0.3s ease-in-out;
margin-block-start: var(--kutak--space--xs-s);
}
.accordion-style__outline .accordion-item .accordion-header {
position: relative;
padding: 1rem 1.25rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
transition: background-color 0.2s ease;
font-size: var(--kutak--font-size--post-card-featured-title);
line-height: 1.45;
border-radius: var(--betext-rounded-lg);
text-align:left;
}
.accordion-style__outline .accordion-item .accordion-header:hover {
background-color: var(--betext-bg-blur);
}
.accordion-style__outline .accordion-content {
background-color: var(--betext-bg-color);
border-radius: var(--betext-rounded-lg);
}
.accordion-style__outline .accordion-content p{
padding-block: 1.25rem;
padding-inline: 1.25rem;
}
.accordion-style__border .accordion-item .accordion-header {
padding-block: .75rem;
font-weight: 600;
text-align:left;
}
.accordion-style__border .accordion-item{
border-bottom:1px solid var(--betext-color-border);
margin-block-start:1rem;
}
.accordion-style__border .accordion-item .accordion-content p{
padding-block-start:0;
padding-block-end:1.25rem;
}
.accordion-header::after{
display:flex;
justify-content:center;
align-items:center;
border:1px solid var(--betext-color-border);
height:45px;
aspect-ratio: 1;
border-radius: var(--betext-rounded-lg);
}
.accordion-header.active::after {
background-color: var(--betext-bg-color);
}
/* CARD STATS */
.card {
position:relative;
}
.card.has-glow:before,
.card.has-glow:after {
z-index: 0;
}
.card.grid {
grid-gap:var(--container-inline-start-end);
}
.card-stat {
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:.5rem;
padding:1rem 1.25rem;
border-radius:var(--betext-rounded-lg);
background: linear-gradient(135deg, var(--betext-bg-gradient-1-50));
transition: background-color 0.3s ease;
line-height: 1.25;
}
.card-stat p {
margin-block-start:0;
}
.card-stat:hover {
background: linear-gradient(135deg, var(--betext-bg-gradient-1));
}
.has-glow .card-stat {
position: relative;
z-index: 1;
background:var(--betext-bg-color)!important;
}
.card__bg-1,
.btn__bg-1 {
background: linear-gradient(135deg, var(--betext-bg-gradient-1));
}
.card__bg-2,
.btn__bg-2 {
background: linear-gradient(135deg, var(--betext-bg-gradient-2));
}
.card__bg-3,
.btn__bg-3,
.button__export-to-txt {
background: linear-gradient(135deg, var(--betext-bg-gradient-3));
}
.card__bg-green,
.btn__bg-green,
.button__export-to-csv {
background: linear-gradient(135deg, var(--betext-bg-gradient-green));
}
.card__bg-4,
.btn__bg-4,
.card__bg-4-50:hover {
background: var(--betext-bg-gradient-4);
}
.card__bg-5,
.btn__bg-5 {
background: linear-gradient(135deg, var(--betext-bg-gradient-5));
}
.card__bg-glass {
background: linear-gradient(135deg, var(--betext-bg-gradient-glass));
}
.card__bg-1-50 {
background: linear-gradient(135deg, var(--betext-bg-gradient-1-50));
}
.card__bg-2-50 {
background: linear-gradient(135deg, var(--betext-bg-gradient-2-50));
}
.card__bg-3-50 {
background: linear-gradient(135deg, var(--betext-bg-gradient-3-50));
}
.card__bg-4-50 {
background: linear-gradient(135deg, var(--betext-bg-gradient-4-50));
}
.card__bg-5-50 {
background: linear-gradient(135deg, var(--betext-bg-gradient-5-50));
}
.card__bg-green-50 {
background: linear-gradient(135deg, var(--betext-bg-gradient-green-50));
}
.card__bg-1-50:hover {
background: linear-gradient(135deg, var(--betext-bg-gradient-1));
}
.card__bg-2-50:hover {
background: linear-gradient(135deg, var(--betext-bg-gradient-2));
}
.card__bg-3-50:hover {
background: linear-gradient(135deg, var(--betext-bg-gradient-3));
}
.card__bg-5-50:hover {
background: linear-gradient(135deg, var(--betext-bg-gradient-5));
}
.card__bg-green-50:hover {
background: linear-gradient(135deg, var(--betext-bg-gradient-green));
}
/* MORE ACTIONS */
.betext__more-actions input[type="checkbox"] {
display:none!important;
}
.more-actions__header-btn.flex {
gap:0;
}
.more-actions__header-btn label,
.link-options-btn {
padding:.45rem;
}
.more-actions__header-btn label svg {
color:var(--kutak--color--contrast);
}
.icon__more-actions {
width:21px;
height:21px;
}
.more-actions__container input[type="checkbox"]:checked~.more-actions-dropdown {
display:block;
}
.more-actions-dropdown {
position:relative;
}
.more-actions-dropdown__container {
position:absolute;
top:100%;
right:0;
width:250px;
background-color:var(--betext-bg-color);
border-radius:var(--betext-rounded-lg);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
z-index:var(--kutak--z-index--modal);
outline:var(--betext-outline-base);
}
.more-actions__header {
display:flex;
justify-content:end;
align-items:center;
padding:.5rem;
border-bottom: 1px solid var(--betext-color-border);
}
.more-actions__header label {
width:40px;
height:40px;
}
.more-actions__content button,
.more-actions__content a,
.menu-item__link {
display:flex;
justify-content: flex-start;
align-items:center;
gap:.75rem;
padding:.55rem 1rem;
transition: background-color 0.2s ease;
outline:none!important;
font-size: var(--kutak--font-size--2xs);
font-weight: 400;
line-height: 1.5;
width:100%;
}
.more-actions__content button:hover,
.more-actions__content a:hover,
.menu-item__link:hover {
background-color: var(--betext-bg-accent);
color:#ffe;
}
.more-actions__content .menu-item:hover svg,
.menu-item__link:hover svg {
color:#ffe;
}
/* FAVORITES */
.more-actions-aside {
top:0;
right:0;
bottom:0;
margin-block:0;
margin-inline:0;
scroll-margin-block-start:0;
z-index: calc(var(--kutak--z-index--modal) + 11);
user-select: none;
}
.all-favorites {
padding-block:var(--kutak--space--xs);
padding-inline:var(--kutak--space--xs);
position:relative;
height:100vh;
}
.all-favorites__header{
display:flex;
justify-content: space-between;
align-items:center;
gap:1rem;
border-bottom: 1px solid var(--betext-color-border);
padding:0 var(--kutak--space--xs) var(--kutak--space--xs);
}
.favorites-counter {
color:var(--betext-color-pink);
font-size:14px;
}
.favorites-counter svg {
height:15px;
width:15px;
color:var(--betext-color-pink);
}
.favorites-title {
margin-block:0;
margin-inline-start:.40rem;
}
.all-favorites__container {
position: relative;
display:flex;
flex-flow:column nowrap;
justify-content: space-between;
background: var(--betext-bg-aside-blur);
width:325px;
height:100%;
box-shadow: 0 0 #001, 0 0 #001, 0px 4px 24px rgba(0, 0, 0, .125);
-webkit-backdrop-filter: var(--betext-backdrop-blur-lg);
backdrop-filter: var(--betext-backdrop-blur-lg);
box-sizing: border-box;
border-radius: var(--betext-rounded-lg);
outline: 4px solid var(--kutak--color--border);
padding-block:var(--container-inline-start-end);
}
.all-favorites__container:after {
clear:both;
content:"";
display:block
}
.all-favorites__container .favorites-list{
padding:1rem;
margin-block-start:0;
list-style:none;
}
.no-favorites-message {
text-align:center;
padding:1rem;
}
.all-favorites__container ul li a{
font-weight:400;
font-size: var(--kutak--font-size--xs);
}
.button__favorites:not(.hidden),
.menu-item__remove-favorites,
.remove-item-btn,
.button__favorites:not(.hidden) svg,
.menu-item__remove-favorites svg,
.remove-item-btn svg {
color:var(--betext-color-pink);
}
.all-favorites__content {
flex-grow:3;
}
.favorites-list li {
display:flex;
position: relative;
justify-content:space-between;
align-items:center;
gap:.5rem;
}
.favorites-list li.active .link-options-btn {
border:1px solid var(--betext-color-border);
}
.favorites-list li a {
width: calc(100% - 3rem);
overflow:hidden;
}
.all-favorites__footer {
order:10;
margin: 0 auto;
width:100%;
padding-inline:var(--container-inline-start-end);
}
.close__list-favorites {
justify-content: center;
width:100%;
}
.link-dropdown__container {
width:250px;
background-color:var(--betext-bg-color);
border-radius:var(--betext-rounded-lg);
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
overflow:hidden;
outline:var(--betext-outline-base);
padding-block:var(--container-inline-start-end);
}
.site-apps__backdrop {
--betext-z-index--backdrop:var(--kutak--z-index--modal);
position:fixed;
inset:0;
height:0;
visibility:hidden;
opacity:0;
background: var(--kutak--color--overlay-backdrop);
transition: opacity .3s, visibility .3s;
z-index: var(--betext-z-index--backdrop);
}
.more-actions-aside[aria-expanded="true"] ~ .site-apps__backdrop {
visibility:visible;
opacity:1;
height:100vh;
}
/* SYMBOLS */
.symbols {
--betext-textarea-height: calc(var(--betext-textarea-height) - var(--kutak--font-size--m));
}
.symbols textarea {
font-size:var(--kutak--font-size--m)!important;
border-left-width:0!important;
border-right-width:0!important;
}
.content-items__grid {
display:grid;
grid-template-columns: repeat(auto-fill, minmax(calc(var(--symbol-size) + var(--emoji-padding)), 1fr));
grid-gap:.75rem;
}
.content-items__flex {
display:flex;
flex-flow:row wrap;
justify-content: space-between;
align-content: center;
gap:.75rem;
}
.content-items__emojis .betext-tools__container {
text-align:left;
}
.symbol-content__title {
display:flex;
justify-content:space-between;
align-items:center;
gap:.5rem;
font-size: var(--kutak--font-size--post-card-featured-title);
line-height: 1.45;
border-radius:var(--betext-rounded-xl);
background-color:var(--betext-bg-color);
color:var(--betext-color-icon);
border:1px solid var(--betext-color-border);
padding:1.25rem;
margin-block-end:.75rem;
transition: transform 0.3s ease-in-out;
}
.num {
margin-inline-end:1.25rem;
}
.symbol-content__title:hover .num {
background-color: var(--betext-color-accent);
color:#ffe;
}
.symbol-content__item {
position:relative;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
}
.symbol-item {
flex:1 1 auto;
position: relative;
cursor:pointer;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
border-radius:var(--betext-rounded-xl);
font-size:var(--emoji-size);
background-color:var(--betext-bg-color);
color:var(--betext-color-symbol);
border:1px solid var(--betext-color-border);
width:100%;
padding:.75rem;
line-height:normal;
margin:0 auto;
user-select: none;
}
.content-items__flex .symbol-item {
width:auto;
--emoji-size: var(--kutak--font-size--l);
}
.content-items__flex .symbol-item:last-child {
max-width:205px;
}
.symbol-name {
position:absolute;
display:none;
opacity:0;
bottom:100%;
padding: .35rem 1rem;
border-radius: .375rem;
font-size: var(--kutak--font-size--3xs);
white-space: nowrap;
line-height: 1;
transition: opacity 0.3s ease-in-out;
border-radius:var(--betext-rounded-sm);
border:1px solid var(--betext-color-border);
background-color:var(--betext-bg-color);
}
.symbol-content__item:hover .symbol-name {
display:block;
opacity: 1;
}
.symbol-item span {
transition: transform 0.2s ease-in-out;
}
.symbol-item:hover {
background-color:var(--betext-bg-accent);
color:#ffe;
}
.symbol-item:hover span:not(.copied-text) {
transform: translateY(-5px);
}
/* ALERTS */
.alert {
--alert-color: var(--betext-bg-color);
position: relative;
border-radius: var(--betext-rounded-lg);
background-color: var(--alert-color, var(--betext-color-base));
text-align: start;
border: var(--border) solid var(--betext-color-border);
background-size: auto, calc(var(--noise) * 100%);
background-image: var(--fx-noise);
box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in srgb, #000 20%, var(--alert-color, var(--betext-color-base))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08));
grid-template-columns: auto;
grid-auto-flow: column;
justify-content: start;
place-items: start center;
gap: 1rem;
padding-block: .75rem;
padding-inline: 1rem;
font-size: .875rem;
line-height: 1.25rem;
display: grid;
margin-block-end:var(--container-inline-start-end);
}
.alert-info {
border-color: var(--color-info);
color: var(--color-info-content);
--alert-color: var(--color-info);
--icon-color:var(--color-info-content);
}
.alert-warning {
border-color: var(--color-warning);
color: var(--color-warning-content);
--alert-color: var(--color-warning);
--icon-color:var(--color-warning-content);
}
.alert-error {
border-color: var(--color-error);
color: var(--color-error-content);
--alert-color: var(--color-error);
--icon-color:var(--color-error-content);
}
.alert-success {
border-color: var(--color-success);
color: var(--color-success-content);
--alert-color: var(--color-success);
--icon-color:var(--color-success-content);
}
.alert-tools {
border:none;
color:var(--kutak--color--contrast);
}
.alert-tools:after {
content: "";
position: absolute;
inset: -1px;
transform: translate(0);
z-index: -1;
opacity: .5;
background: linear-gradient(135deg, transparent 0, transparent 34%, transparent 49%, #fff 57%, #fff 64%, var(--betext-glow-stop-1) 66%, var(--betext-glow-stop-2) 75%, var(--betext-glow-stop-3) 83%, var(--betext-glow-stop-4) 92%, var(--betext-glow-stop-5) 100%);
background-size: 300% 300%;
background-position: 0 0;
background-repeat: no-repeat;
transition: background-position .8s ease;
border-radius: 12px;
animation: glow-to-stroke .5s ease .5s;
animation-fill-mode: both;
}
.alert svg {
color:var(--icon-color);
stroke: currentColor;
}
.alert.alert-tools svg {
color:var(--betext-color-accent);
stroke: currentColor;
}
.alert:has(:nth-child(2)) {
grid-template-columns: auto minmax(auto, 1fr);
}
.color-correction {
border: var(--border) solid var(--alert-color, var(--color-base-200));
color: var(--alert-color, var(--color-base-content));
background-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100));
border-color: color-mix(in oklab, var(--alert-color, var(--color-base-content)) 18%, var(--color-base-100));
}
.log {
display:flex;
vertical-align: middle;
color:var(--log-color);
background-color:var(--log-fg);
--log-color:var(--color-log);
--log-fg:var(--color-log-content);
min-height:98px;
flex-flow: column nowrap;
gap:0;
border-radius: var(--betext-rounded-lg);
overflow-wrap: anywhere;
}
div.log {
padding-block: var(--kutak--space--xs);
padding-inline: var(--kutak--space--xs);
}
.log-soft {
border: var(--border) solid var(--log-color, var(--color-base-200));
color: var(--log-color, var(--color-base-content));
background-color: color-mix(in oklab, var(--log-color, var(--color-base-content)) 8%, var(--color-base-100));
border-color: color-mix(in oklab, var(--log-color, var(--color-base-content)) 20%, var(--color-base-100));
}
/* TOOLS TABS */
.mode-switcher {
display: flex;
justify-content: center;
margin: 0 auto;
padding-block: calc(var(--kutak--flow--content) + 1.25rem);
border-bottom: 1px solid var(--betext-color-border);
width: 100%;
}
.switcher-separator {
width:45px;
height:45px;
display:flex;
justify-content:center;
align-items:center;
}
.tabs,
.tools-tab {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-block-end: var(--kutak--flow--content);
}
.mode-switcher .tabs,
.mode-switcher .tools-tab {
margin-block-end: 0;
}
.tab-container,
.tools-tab__container {
display:flex;
justify-content: center;
align-items: center;
margin:0 auto;
position: relative;
background-color: var(--betext-bg-base);
border-radius: var(--betext-rounded-full);
border:1px solid var(--betext-color-border);
transition: transform 0.3s ease-in-out;
padding:.35rem;
box-shadow: var(--betext-tabs-shadow);
gap:0;
flex-flow: row wrap;
}
.tab,
.tools-tab-btn {
padding: 1rem 2.5rem;
cursor: pointer;
border: none;
outline:none;
background-color: transparent;
font-size: var(--kutak--font-size--2xs);
font-weight: var(--kutak--font-weight--headings);
position: relative;
box-shadow:none;
border-radius: var(--betext-rounded-full);
text-transform: uppercase;
transition: all 0.3s ease-in-out;
white-space: nowrap;
}
.small-switcher .tab,
.small-switcher .tools-tab-btn {
padding: .55rem 1.5rem;
}
.tab:hover,
.tools-tab-btn:hover,
.mode-switcher .tools-tab-btn:not(.active) {
background: var(--betext-bg-color);
}
.tab.active,
.tools-tab-btn.active {
color:#ffe;
background: linear-gradient(to right bottom, var(--betext-bg-gradient-1));
box-shadow: var(--betext-btn-shadow);
}
.tab-btn__container {
padding-block:var(--container-inline-start-end);
.tab-btn {
position: relative;
gap: .75rem;
cursor: pointer;
z-index: 0;
border: 1px solid var(--betext-color-border);
border-radius: var(--betext-rounded-lg);
font-size: var(--kutak--font-size--xs);
font-weight: var(--kutak--font-weight--elements);
box-shadow: var(--betext-btn-shadow);
line-height: 1.5;
transition: all 0.3s ease;
}
.tab-btn span.flex {
padding:.75rem 1rem;
border-radius: var(--betext-rounded-lg);
}
.tab-btn:hover span.flex,
.tab-btn.active span.flex {
background-color: var(--betext-bg-color);
width: 100%;
}
}
/* FORMS - INPUTS */
.form-row {
display: flex;
gap: var(--container-inline-start-end);
}
.input-group,
.form-group {
position:relative;
width: 100%;
}
.form-row .form-group {
flex: 1;
}
/* PRESETS */
[x-cloak] {
display:none!important;
}
.hidden {
display:none;
}
.visibility-hidden {
visibility:hidden;
height:0;
overflow:hidden;
}
.container-inline {
padding-inline: var(--container-inline-start-end);
}
.container-block {
padding-block: var(--container-inline-start-end);
}
.padding-inline-xs {
padding-inline: var(--kutak--space--xs);
}
.padding-inline-sm {
padding-inline: var(--kutak--space--s);
}
.padding-inline-md {
padding-inline: var(--kutak--space--m);
}
.padding-inline-lg {
padding-inline: var(--kutak--space--l);
}
.padding-inline-xl {
padding-inline: var(--kutak--space--xl);
}
.padding-block-xs {
padding-block: var(--kutak--space--xs);
}
.padding-block-sm {
padding-block: var(--kutak--space--s);
}
.padding-block-md {
padding-block: var(--kutak--space--m);
}
.padding-block-lg {
padding-block: var(--kutak--space--l);
}
.padding-block-xl {
padding-block: var(--kutak--space--xl);
}
.betext-grid__container.hidden,
.betext-loader__glow.hidden {
min-height:0;
height:0;
width:0;
overflow:hidden;
z-index:0;
opacity:0;
}
.justify-start {
justify-content:flex-start!important;
}
.justify-center {
justify-content:center!important;
}
.justify-between {
justify-content:space-between!important;
}
.justify-end {
justify-content:flex-end!important;
}
.align-self-end {
align-self:flex-end;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.items-center-safe {
align-items: safe center;
}
.items-baseline {
align-items: baseline;
}
.items-baseline-last {
align-items: last baseline;
}
.items-stretch {
align-items: stretch;
}
.flex-flow-row {
flex-flow: row nowrap;
}
.flex-flow-col {
flex-flow: column nowrap;
}
.mx-auto {
margin:auto;
}
.transition {
transition: transform 0.3s ease;
}
.transition:hover {
transform: translateY(-2px);
}
.custom-height {
height:var(--betext-textarea-custom-height);
}
.betext-tools__header label,
.result-content__options,
.betext__components-button,
.favorites-list li a,
thead tr th{
overflow: hidden;
text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
white-space: nowrap;
}
.w-full {
width:100%!important;
max-width:100%!important;
inline-size: 100%!important;
}
.min-h {
min-height:var(--betext-textarea-height);
}
.p-col {
padding-block: var(--kutak--space--xs);
padding-inline: var(--kutak--space--xs);
}
.m-col {
margin-block: var(--kutak--space--xs);
margin-inline: var(--kutak--space--xs);
}
.overflow-x-auto table thead {
border-radius:var(--betext-rounded-lg);
overflow:hidden;
}
#root table input,
#root table select {
padding-block:var(--kutak--space--2xs)!important;
}
table {
position: relative;
border-collapse: collapse;
}
table thead {
border-block-end: 0!important;
}
table tr th{
position: sticky;
top: 0;
z-index:2;
border-block-end: 2px solid var(--kutak--color--border-highlight);
}
table thead tr th{
background-color: var(--betext-bg-base);
}
table.table .bg-thead tr th{
background: var(--betext-bg-gradient-4);
color:#ffe!important;
}
.table thead tr th{
vertical-align: top;
}
i.icon {
font-style:normal!important;
}
.shadow {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.math {
font-family: "Times New Roman";
font-size: 1.6em;
font-weight: normal;
border-radius: var(--kutak--radius--m);
max-inline-size: min(100% - 2 * var(--kutak--space--site), var(--kutak--size--content));
overflow: auto;
padding: var(--kutak--space--s);
}
.bg-math {
background-color: var(--betext-bg-color);
color: var(--kutak--color--contrast);
}
.currency {
position:absolute;
bottom:0;
left:0;
z-index:0;
color:inherit;
opacity:.85;
padding-block: var(--kutak--space--xs);
padding-inline: var(--kutak--space--xs);
line-height: 1.6;
font-size:1rem;
}
.currency.usd:before {
content:'$';
}
.currency ~ input {
padding-inline-start:2rem;
}
.color-accent {
color:var(--betext-color-accent);
}
.text-xl:not(label) {
font-size:var(--kutak--font-size--xl);
line-height:1.25;
}
.text-lg:not(label) {
font-size:var(--kutak--font-size--l);
line-height:1.25;
}
.text-md:not(label) {
font-size:calc(var(--kutak--font-size--m) - .125rem);
line-height:1.25;
}
.text-sm:not(label) {
font-size:var(--kutak--font-size--2xs);
margin-block-start:var(--kutak--space--3xs);
color: var(--kutak--color--contrast-dim,rgb(100 116 139));
}
.text-xs:not(label) {
font-size:var(--kutak--font-size--3xs);
margin-block-start:var(--kutak--space--3xs);
color: var(--kutak--color--contrast-dim,rgb(100 116 139));
}
.font-bold {
font-weight:700;
}
.font-semibold {
font-weight:550;
}
.font-normal {
font-weight:400!important;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.align-middle {
vertical-align:middle;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-3-auto {
grid-template-columns: auto 1fr auto;
}
.grid-cols-2-auto {
grid-template-columns: 1fr auto;
}
.space-y-0 {
margin-block-start: 0;
}
.space-y-1 {
margin-block-start:var(--kutak--space--s);
}
.space-y-2 {
margin-block-start:var(--kutak--space--m);
}
.space-y-3 {
margin-block-start:var(--kutak--space--l);
}
.space-y-4 {
margin-block-start:var(--kutak--space--xl);
}
.overflow-x-auto {
overflow-x:auto;
}
.overflow-y-auto {
overflow-y:auto;
}
.uppercase {
text-transform:uppercase;
}
.label {
color: var(--kutak--color--contrast-dim);
display: inline-block;
font-family: var(--kutak--font-family--elements);
font-size: var(--kutak--font-size--2xs);
font-weight: var(--kutak--font-weight--elements);
line-height: 1.5;
margin-block-end: var(--kutak--space--3xs);
}
/* OTHER PAGE */
.other-page .article-header__title {
text-align:center;
padding-block-end:var(--kutak--space--l);
}
/* CONTACT FORM */
.form-control {
background: var(--betext-bg-color)!important;
height:auto!important;
padding:1rem!important;
border:1px solid var(--betext-color-border)!important;
border-radius:var(--betext-rounded-lg)!important;
}
.form-control.input-xlarge[type="checkbox"] {
padding:0!important;
border-radius:var(--betext-rounded-sm)!important;
height:25px!important;
width:25px!important;
}
.error {
font-size:var(--kutak--font-size--xs);
color:var(--color-error);
}
/* RESPONSIVE */
@media (min-width: 68.75em) {
.single-post.has-content-sidebar .article-main>:where(:not(.article-content)),
.betext-app .betext-tools__container {
max-inline-size: 100%;
}
.betext-tools .article-content>* {
margin-inline:unset!important;
max-inline-size:100%;
}
}
@media screen and (max-width: 1024px) {
.betext-grid__container .grid-row {
grid-gap: calc(var(--container-inline-start-end));
}
.betext-tools__header .justify-end {
gap:.55rem;
}
.betext__components-button span {
display: none;
opacity:0;
}
.betext__components-button {
justify-content: center;
}
.betext__components-button:before {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: auto;
right: auto;
font-size: .8675rem;
opacity: 0;
visibility: hidden;
padding: .4rem 1rem;
border-radius: var(--betext-rounded-sm);
white-space: nowrap;
line-height: 1;
z-index: 10;
transition: opacity .3s ease-in-out;
border:1px solid var(--betext-color-border);
margin-block-start:2px;
color:var(--kutak--color--contrast)!important;
}
.betext__components-button:hover:before {
background: var(--betext-bg-base);
opacity: 1;
visibility: visible;
}
.betext-tools__options .betext-tools-option__container {
align-items: flex-end;
}
}
@media screen and (max-width: 880px) {
.flex-row {
flex-direction:column;
flex:100%;
gap:2rem;
}
.flex-col {
max-width: 100%;
height:100%;
}
.flex-row .grid[x-data] {
grid-template-columns: 1fr!important;
}
.flex-col.betext-tools-result {
min-height:320px;
max-height:650px;
}
div.flex-row[data-canvas-flex] .flex-col {
height:auto;
max-height:100%!important;
}
.flex-col.betext-tools-result.mod__col-border {
max-height:100%;
}
textarea.input-text, textarea.result-content, div.result-content {
height: 30.5vh;
min-height: 30.5vh;
}
.font-style__text {
padding-right:3.5rem;
}
.font-style__container .button__copy {
padding:0;
height:36px;
aspect-ratio: 1;
background-size: 1rem 1rem;
background-position: center;
}
.font-style__container .button__copy:before{
padding:0;
display:none;
}
.font-style__container .button__copy:hover {
background-color:var(--betext-color-accent);
}
.tab-panel .tab-panel__container {
flex-direction: column;
align-items: flex-start;
gap:3rem;
padding:5rem 1rem 0;
}
.tab-panel__description {
margin-inline-start: 3rem;
}
}
@media screen and (max-width: 768px) {
.form-row {
flex-direction: column;
}
.input-with-unit{
flex-direction: row!important;
}
.betext-content__swap,
.swap-container {
align-items:center!important;
}
.betext-content__swap .swap-btn,
.swap-container .swap-btn {
margin-block-start:var(--kutak--space--s);
}
}
@media screen and (max-width: 640px) {
.grid-cols-3,
.grid-cols-2 {
grid-template-columns: 1fr;
}
.cpaw-tools-category__content.active {
transition: max-height 0.3s ease-in;
overflow-y:auto!important;
}
.betext-tools-action__container {
flex-direction: column;
gap:var(--kutak--space--m);
}
.betext-tools-action__container button {
width:100%!important;
justify-content: center;
}
.site-footer__content {
padding:2.5rem 1rem;
}
}
@media screen and (max-width: 480px) {
.betext-tools__options .betext-tools-option__container {
flex-direction: column;
}
.betext-item__col:not(.tick__option) {
width: 100%;
}
.site-footer__content {
padding:2.5rem 0;
}
.nav-secondary__menu-item {
width:45%;
}
}
/** KEYFRAMES **/
@-webkit-keyframes glow-to-blur {
0% {
opacity: 0;
-webkit-filter: blur(1px);
}
25% {
opacity: .7;
-webkit-filter: blur(30px);
}
100% {
opacity: .5;
-webkit-filter: blur(55px);
}
}
@-moz-keyframes glow-to-blur {
0% {
opacity: 0;
-moz-filter: blur(1px);
}
25% {
opacity: .7;
-moz-filter: blur(30px);
}
100% {
opacity: .5;
-moz-filter: blur(55px);
}
}
@keyframes glow-to-blur {
0% {
opacity: 0;
filter: blur(1px);
}
25% {
opacity: .7;
filter: blur(30px);
}
100% {
opacity: .5;
filter: blur(55px);
}
}
/* --- */
@-webkit-keyframes glow-enter-blur-to-none {
0% {
opacity: .5;
-webkit-filter: blur(50px);
}
100% {
opacity: 0;
-webkit-filter: blur(50px);
}
}
@-moz-keyframes glow-enter-blur-to-none {
0% {
opacity: .5;
-moz-filter: blur(50px);
}
100% {
opacity: 0;
-moz-filter: blur(50px);
}
}
@keyframes glow-enter-blur-to-none {
0% {
opacity: .5;
filter: blur(50px);
}
100% {
opacity: 0;
filter: blur(50px);
}
}
/* --- */
@-webkit-keyframes glow-to-stroke {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
@-moz-keyframes glow-to-stroke {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
@keyframes glow-to-stroke {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}
@-webkit-keyframes loader-glow {
0% {
-webkit-transform: rotate(0deg);
-webkit-filter: hue-rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-webkit-filter: hue-rotate(360deg);
}
}
@-moz-keyframes loader-glow {
0% {
-moz-transform: rotate(0deg);
-moz-filter: hue-rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-moz-filter: hue-rotate(360deg);
}
}
@keyframes loader-glow {
0% {
transform: rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0)
}20%, 80% {
transform: translate3d(2px, 0, 0)
}30%, 50%, 70% {
transform: translate3d(-4px, 0, 0)
}
40%, 60% {
transform: translate3d(4px, 0, 0)
}
}
@-webkit-keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0)
}20%, 80% {
transform: translate3d(2px, 0, 0)
}30%, 50%, 70% {
transform: translate3d(-4px, 0, 0)
}
40%, 60% {
transform: translate3d(4px, 0, 0)
}
}
@-moz-keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0)
}
20%, 80% {
transform: translate3d(2px, 0, 0)
}30%, 50%, 70% {
transform: translate3d(-4px, 0, 0)
}40%, 60% {
transform: translate3d(4px, 0, 0)
}
}
/* --- */
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/** 404 page **/
.error-page {
padding-block-start: calc(var(--kutak--space--section)*3);
}
.error-page__code {
display: flex;
flex-flow:column nowrap;
align-items:center;
justify-content:center;
gap:.5rem;
}
.error-page__code span.title {
font-size: calc(var(--kutak--font-size--4xl)*2);
font-weight: var(--kutak--font-weight--headings);
}
.error-page__code span.has-glow {
position:relative;
border-radius:var(--betext-rounded-full);
overflow:hidden;
width:var(--kutak--font-size--6xl);
height: var(--kutak--font-size--6xl);
aspect-ratio: 1;
margin-block-end:var(--kutak--space--m);
}
.error-page__code svg {
width: var(--kutak--font-size--6xl);
height: var(--kutak--font-size--6xl);
color:#ffe;
}