frontend style fix

This commit is contained in:
Ümit Tunç
2026-01-01 16:25:27 +03:00
parent e8cdba4fd3
commit 0ca75829bb
454 changed files with 10087 additions and 9940 deletions
+61 -61
View File
@@ -651,18 +651,18 @@
aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a
class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] "
class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] "
href="#">En</a></li>
<li class="nav-item"><a
class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] "
class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] "
href="#">De</a></li>
<li class="nav-item"><a
class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] "
class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] "
href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -701,11 +701,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='forms.html'>Forms</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='active' href='faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='credits.html'>Credits</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -715,13 +715,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -731,34 +731,34 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/accordion.html'>Accordion</a>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='elements/accordion.html'>Accordion</a>
</li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -772,7 +772,7 @@
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-5">If you don't see an answer to your question
here, please feel free to contact us with the links below:</p>
<a href="https://themeforest.net/user/ib-themes"
class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
target="_blank">Contact Form</a>
<a href="https://truncgil.com.tr/comments"
class="btn btn-soft-primary !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.05)]"
@@ -781,7 +781,7 @@
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-2">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-2" aria-expanded="true"
aria-controls="faq-collapse-2"> How can I remove unwanted plugins?</button>
</div>
@@ -803,7 +803,7 @@
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-3">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-3" aria-expanded="true"
aria-controls="faq-collapse-3"> Does Trunçgil support RTL? </button>
</div>
@@ -812,7 +812,7 @@
<div class="card-body p-[0_1.25rem_.25rem_2.35rem]">
<p>No, not currently. Although with the use of <a
href="https://rtlcss.com/learn/usage-guide/install/" target="_blank"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom">RTLCSS</a>
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom">RTLCSS</a>
project you can generate RTL version of <code class="file">style.css</code>, however some template
specific styles wont have support for RTL out of the box.</p>
</div>
@@ -823,7 +823,7 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-4">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-4" aria-expanded="true"
aria-controls="faq-collapse-4"> Why SVG icons appear black? </button>
</div>
@@ -831,7 +831,7 @@
<div id="faq-collapse-4" class="accordion-collapse collapse" aria-labelledby="faq-4">
<div class="card-body p-[0_1.25rem_.25rem_2.35rem]">
<p>Due to the <a href="https://en.wikipedia.org/wiki/Same-origin_policy" target="_blank"
class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom">same-origin
class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom">same-origin
policy</a> SVGInject does not work when run from the local file system in many browsers (Chrome,
Safari). Please test on a working web server.</p>
</div>
@@ -842,14 +842,14 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-5">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-5" aria-expanded="true"
aria-controls="faq-collapse-5"> How to make the contact or newsletter forms work? </button>
</div>
<!--/.card-header -->
<div id="faq-collapse-5" class="accordion-collapse collapse" aria-labelledby="faq-5">
<div class="card-body p-[0_1.25rem_.25rem_2.35rem]">
<p>Follow the instructions <a class='external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='forms.html' target='_blank'>here</a>
<p>Follow the instructions <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='forms.html' target='_blank'>here</a>
to reach the guide on configuring the contact or newsletter forms in Trunçgil. If the forms don't
work or if you receive any errors please keep in mind that the contact forms won't work on local
environment. Please test them on a working web server.</p>
@@ -861,7 +861,7 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-7">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-7" aria-expanded="true"
aria-controls="faq-collapse-7"> Does Trunçgil require jQuery? </button>
</div>
@@ -877,7 +877,7 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-8">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-8" aria-expanded="true"
aria-controls="faq-collapse-8"> Why am I getting an error while installing to Wordpress? </button>
</div>
@@ -893,7 +893,7 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-9">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-9" aria-expanded="true"
aria-controls="faq-collapse-9"> Why the image mask doesn't work on my copy of the item? </button>
</div>
@@ -912,7 +912,7 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-11">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-11" aria-expanded="true"
aria-controls="faq-collapse-11"> How to add a link to dropdown parent? </button>
</div>
@@ -939,7 +939,7 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-12">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-12" aria-expanded="true"
aria-controls="faq-collapse-12"> What font is used on the Trunçgil logo? </button>
</div>
@@ -957,14 +957,14 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-13">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-13" aria-expanded="true"
aria-controls="faq-collapse-13"> How to enable STMP authentication on my contact form? </button>
</div>
<!--/.card-header -->
<div id="faq-collapse-13" class="accordion-collapse collapse" aria-labelledby="faq-13">
<div class="card-body p-[0_1.25rem_.25rem_2.35rem]">
<p>You can enable STMP authentication by following the instructions shown in <a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]' href='forms.html#snippet-1-3'>Forms
<p>You can enable STMP authentication by following the instructions shown in <a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='forms.html#snippet-1-3'>Forms
documentation</a></p>
</div>
<!--/.card-body -->
@@ -974,14 +974,14 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="faq-14">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]"
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]"
data-bs-toggle="collapse" data-bs-target="#faq-collapse-14" aria-expanded="true"
aria-controls="faq-collapse-14"> How to add reCAPTCHA to my contact form? </button>
</div>
<!--/.card-header -->
<div id="faq-collapse-14" class="accordion-collapse collapse" aria-labelledby="faq-14">
<div class="card-body p-[0_1.25rem_.25rem_2.35rem]">
<p>Please follow the instructions shown in <a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]' href='forms.html#snippet-1-4'>Forms
<p>Please follow the instructions shown in <a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='forms.html#snippet-1-4'>Forms
documentation</a> to add reCAPTCHA to your contact form.</p>
</div>
<!--/.card-body -->
@@ -1024,10 +1024,10 @@
</section>
<!-- /section -->
<div
class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path
class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none"
class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none"
d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>