body, a, p, span, h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; } .line-border { position: relative; background: linear-gradient(-45deg, var(--primary-dark-trans-30) 0%, rgba(152, 194, 218, 0) 32%, rgba(152, 194, 218, 0) 45%, var(--primary-dark-trans-30) 100%) } .line-border:before { content: ""; position: absolute; inset: 0; border-radius: calc(var(--radius-m) + 1px); border: 1px solid transparent; background: linear-gradient(160deg, var(--primary-dark) 0%, rgba(255, 255, 255, 0) 63%) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask-composite: exclude; z-index: -1; top: 0; left: 0; } .glassblur { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .like-button { display: inline-flex; align-items: center; color: var(--primary); text-decoration: none; width: fit-content; overflow: hidden; position: relative; } .like-button svg { width: 18px; height: 18px; transition: fill 0.5s ease-in-out, transform 0.5s ease-in-out; } .like-button svg path { fill: transparent; stroke: var(--primary); stroke-width: 2; transition: fill 0.5s ease-in-out; } .like-button.liked svg path { fill: var(--primary); }  .like-count { display: inline-block; min-width: 0; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(-10px); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, max-width 0.5s ease-in-out; margin-left: 0; font-size: 14px; line-height: 1; }  .like-button.liked .like-count { opacity: 1; transform: translateX(0); max-width: 40px;  margin-left: 0.3rem; } .comment-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--primary); } .comment-icon { fill: var(--primary); margin-bottom: 0.7px; } .comment-count { font-size: 14px; margin-left: 0.4rem; line-height: 1; } .button-primary, .bricks-background-primary { --btn-background: transparent; --btn-background-hover: var(--primary); --btn-text-color: var(--primary); --btn-text-color-hover: var(--primary-ultra-dark); --btn-border-width: 1px; --btn-border-color: var(--primary); --btn-border-color-hover: var(--primary-hover); --focus-color: var(--primary-light); background: var(--btn-background); color: var(--btn-text-color); border: var(--btn-border-width) solid var(--btn-border-color); padding: 1rem 2.5rem; border-radius: var(--radius-s); font-size: 1.8rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .button-primary:hover, .bricks-background-primary:hover { background: var(--btn-background-hover); color: var(--btn-text-color-hover); border-color: var(--btn-border-color-hover); } .button-primary:focus, .bricks-background-primary:focus { outline: 2px solid var(--focus-color); outline-offset: 2px; } .frontend-admin-message { margin-bottom: var(--space-s); } .brxe-post-comments .comment-meta .comment-reply-link { border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 1px; line-height: 1; padding: 5px; position: absolute; right: 0; text-transform: uppercase; top: 0; background-color: var(--primary-dark) !important; color: var(--white); transition: all 0.3s !important; } .brxe-post-comments .comment-meta a.comment-reply-link:hover { background-color: var(--primary) !important; color: var(--white); }