/*
Theme Name: Quiety Child
Theme URI: https://quiety-wp.themetags.com/
Description: Quiety is a modern and clean WordPress theme suitable for any kind of Digital Agency, Digital Marketing and Seo Marketing.
Author: ThemeTags
Author URI: https://themetags.com/
Template: quiety
Version: 4.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: quiety
LAST UPDATED: 3-25-2026
*/
/* **************************** CSS VARIABLES FOR BRAND COLOR PALETTE **************************** */
:root {
/* Brand Colors */
--color-logo-blue: #509ac7;
--color-logo-gray: #5d5d5d;
/* Core Palette */
--color-primary: #2d78aa;
--color-secondary: #397e7e;
--color-accent: #f4b400;
/* Links */
--color-link: #2d78aa;
--color-link-hover: #1e587f;
/* Neutrals */
--color-off-white: #f8f9fa;
--color-neutral-gray: #5d5d5d;
--color-text-dark: #212529;
--color-text-light: #ffffff;
}
/* Example usage */
/*
body {
background-color: var(--color-off-white);
color: var(--color-text-dark);
font-family: system-ui, sans-serif;
}
a {
color: var(--color-link);
text-decoration: none;
}
a:hover {
color: var(--color-link-hover);
}
.button-primary {
background-color: var(--color-primary);
color: var(--color-text-light);
padding: 0.75em 1.5em;
border: none;
border-radius: 0.5em;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
}
.button-primary:hover {
background-color: var(--color-link-hover);
}
.button-secondary {
background-color: var(--color-secondary);
color: var(--color-text-light);
}
.accent {
color: var(--color-accent);
}
*/
/* top search bar on the Blog/Bruno's Bytes page so that button next to input field - Note: I placed it in "inactive widgets" in Appearance > Widgets since it duplicated the top site search */
/*
#wp-block-search__input-1 {
width: 70%;
}
*/
/* cool CSS image transitons - apply in Advanced settings of Elementor for an image */
/* float */
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-15px);
}
100% {
transform: translateY(0px);
}
}
.floating-image {
animation: float 6s ease-in-out infinite;
}
/* subtle float */
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.image-float {
animation: float 4s ease-in-out infinite;
}
/* fade in */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.image-fade-in {
animation: fadeIn 1.2s ease-in-out both;
}
/* slow zoom-in Ken Burns style */
@keyframes zoomIn {
from {
transform: scale(1);
}
to {
transform: scale(1.08);
}
}
.image-zoom-slow {
animation: zoomIn 10s ease-in-out forwards;
}
.image-zoom-medium {
animation: zoomIn 5s ease-in-out forwards;
}
.image-zoom-fast {
animation: zoomIn 3s ease-in-out forwards;
}
/* hover lift */
@keyframes lift {
0% {
transform: translateY(0) scale(1);
}
100% {
transform: translateY(-6px) scale(1.03);
}
}
.image-hover-lift {
transition: transform 0.4s ease;
}
/* glowing pulse */
@keyframes glow {
0%,
100% {
box-shadow: 0 0 0px rgba(80, 154, 199, 0.4);
}
50% {
box-shadow: 0 0 20px rgba(80, 154, 199, 0.7);
}
}
.image-glow {
animation: glow 3s ease-in-out infinite;
border-radius: 12px;
}
/* flip and reveal */
@keyframes flipIn {
from {
transform: rotateY(90deg);
opacity: 0;
}
to {
transform: rotateY(0);
opacity: 1;
}
}
.image-flip-in {
animation: flipIn 0.8s ease forwards;
transform-origin: left;
}
/* blur to sharp */
@keyframes blurIn {
from {
filter: blur(8px);
opacity: 0;
}
to {
filter: blur(0);
opacity: 1;
}
}
.image-blur-in {
animation: blurIn 1s ease-out forwards;
}
/* strange template hacks needed */
/* for the H2 titles for the individual blog post pages - for some reason was max-width 700px */
.single-post-header-bg .single-post-title {
max-width: 100% !important;
}
/* strange bug where .svg from demo contents.xml file is sticking at the main logo, so overriding it here */
img.main-logo {
content: url("https://www.gen3i.com/wp-content/uploads/2025/10/GEN3i-logo-dark-gray-transparent-cropped-519x248-1.png") !important;
}
/* ***** */
/* using SVG for external link icon, for any anchors with an "external" class - modified from https://codepen.io/fathy_ar/pen/WNvZjgK */
a[target="_blank"]::after {
content: '';
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 1em 0.75em;
-webkit-mask-position: center;
mask: url("data:image/svg+xml;utf8,");
mask-repeat: no-repeat;
mask-size: 1em 0.75em;
mask-position: center;
display: inline-block;
background-color: currentcolor;
position: relative;
top: 0em;
width: 1em;
height: 1em;
left: 0.1em; /* added this so icon is not totally against the link on display */
}
/* custom heading styles */
h2, h3 {
margin: 32px 0 5px !important;
}
/* forcing anchor styles to be styled nicely, scoping out to that the anchor needs to be inside a p so that the anchor buttons don't get upset */
p > a, a.coolanchor {
color: #2D78AA !important;
text-decoration: underline !important;
}
p > a:hover, a.coolanchor:hover {
color: #397E7E !important;
text-decoration: none !important;
}
/* custom class to force underlined links (such as on Privacy Policy page) and then when hover no underline */
.anchor-underline-custom {
text-decoration: underline !important;
}
.anchor-underline-custom:hover {
text-decoration: none !important;
}
/* custom classes to override the Footer > anchor and Footer > Copyright anchor styles */
.site-footer.footer_light .widget ul li a, .site-footer.footer_light .site-info .copyright p a {
color: #397E7E !important;
text-decoration: underline !important;
}
.site-footer.footer_light .widget ul li a:hover, .site-footer.footer_light .site-info .copyright p a:hover {
color: #2d78aa;
text-decoration: none !important;
}
.site-footer .widget ul li:not(:last-child) {
margin-bottom: 15px;
}
/* *********** custom ordered list circle styles - example: used on Active Directory Part 2 blog post *********** */
.circular-ol-numbers {
/* 1. Counter Reset: Starting at 0 to get the first item to show 1 */
counter-reset: list-item 0;
/* 2. List Reset: Hides default markers and sets the base */
list-style: none;
margin-left: 0;
padding-left: 0;
}
.circular-ol-numbers li {
/* 3. ITEM INCREMENT: Moved to the LI element to prevent double-counting. */
counter-increment: list-item 1;
/* Item Positioning */
position: relative;
padding-left: 2.8em;
margin-bottom: 0.8em;
}
.circular-ol-numbers li:before {
/* 4. The Custom Circle Marker */
/* NOTE: counter-increment has been REMOVED from here. */
content: counter(list-item); /* Inserts the number (which is now correctly incremented) */
/* Position and Alignment */
position: absolute;
left: 0;
top: 8px;
/* Size */
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
border-radius: 50%;
/* Styling (WCAG AA Compliant) */
background-color: #397E7E;
color: #FFFFFF;
/* Text Formatting */
text-align: center;
font-weight: bold;
font-size: 0.9em;
}
/* *********** Cool custom styles *********** */
.lightyellow-box {
background-color: #FFF7E0;
padding: 15px;
border: 1px solid #E0A600;
}
/* *********** Button styles *********** */
/* Hover, focus-visible, active, and persistent focus - working alongside a script in Code Snippets > Header and Footer */
.tt-btn:hover,
.tt-btn:focus-visible,
.tt-btn:active,
.tt-btn.active,
.tt-btn.focus {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,.25);
color: #ffffff !important;
background-color: var(--q-primary-color, #0a66c2) !important;
outline: 3px solid #ffffff;
outline-offset: 3px;
}
/* *********** Social Button styles *********** */
.quiety-social-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .55rem 1rem;
border-radius: 8px;
font-weight: 600;
font-size: .9rem;
line-height: 1.2;
text-decoration: none;
color: #ffffff;
transition: transform .2s ease, box-shadow .2s ease;
}
/* LinkedIn accent */
.quiety-li-follow-btn {
background-color: var(--q-primary-color, #0a66c2);
}
/* Facebook accent matches Quiety */
.quiety-fb-follow-btn {
background-color: var(--q-primary-color, #0a66c2);
}
/* Hover, focus-visible, active, and persistent focus - working alongside a script in Code Snippets > Header and Footer */
.quiety-social-btn:hover,
.quiety-social-btn:focus-visible,
.quiety-social-btn:active,
.quiety-social-btn.active,
.quiety-social-btn.focus {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,.25);
color: #ffffff !important;
background-color: var(--q-primary-color, #0a66c2) !important;
outline: 3px solid #ffffff;
outline-offset: 3px;
}
/* Footer spacing */
footer .quiety-social-btn {
margin-top: .5rem;
}
/* SVG alignment */
.quiety-social-btn svg {
display: block;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.quiety-social-btn {
transition: none;
}
.quiety-social-btn:hover {
transform: none;
box-shadow: none;
}
}
/* High contrast underline hover */
@media (prefers-contrast: more) {
.quiety-social-btn:hover,
.quiety-social-btn:focus-visible {
text-decoration: underline;
}
}
/* RTL support */
:dir(rtl) .quiety-social-btn {
flex-direction: row-reverse;
}
:dir(rtl) .quiety-social-btn .social-text {
text-align: right;
}
/* Visually hidden ARIA text -- NOTE: Also hiding the honeypot field label and input ID from the contact form on the Contact page */
.visually-hidden, .hp-message, input[name="honeypot-868"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Responsive - mobile icon-only buttons */
@media (max-width: 480px) {
.quiety-social-btn {
font-size: 0;
padding: .45rem;
}
.quiety-social-btn .social-text {
display: none;
}
.quiety-social-btn svg {
width: 20px;
height: 20px;
}
}
/* ********************** Facebook Feed for Widgets ********************** */
.quiety-fb-feed-wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
max-height: 400px; /* limit vertical height */
}
/* Make iframe fully responsive */
.quiety-fb-feed-wrapper iframe {
width: 100% !important;
min-height: 350px; /* matches data-height */
max-height: 400px; /* restrict vertical size */
border: none;
overflow-y: auto; /* allow scroll if needed */
}
/* Mobile adjustments */
@media (max-width: 480px) {
.quiety-fb-feed-wrapper iframe {
min-height: 250px;
max-height: 300px;
}
}
/* ********************** Vimeo embed for Widgets ********************** */
/* Vimeo video wrapper for responsive embed */
.quiety-vimeo-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
padding-top: 25px;
height: 0;
overflow: hidden;
max-width: 100%;
border-radius: 8px; /* optional, matches Quiety style */
box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* optional */
}
.quiety-vimeo-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ********************** pure CSS way to increment list items within an ordered list - for multiple ordered lists on a single page - see Saas Backup Is No Longer Optional post for HTML ********************** */
/* Each numbering group gets its own counter */
.list-group {
counter-reset: custom-counter;
}
/* Remove default numbering */
ol.list-continue {
list-style: none;
margin: 0;
padding-left: 0;
}
/* Increment and display the counter */
ol.list-continue li::before {
counter-increment: custom-counter;
content: counter(custom-counter) "";
/* content: counter(custom-counter) ". "; */
font-weight: 600; /* optional styling */
}
/* ********************** SVG icons (on homepage) - consistent sizing with class in svg tags ********************** */
.svg-icon-1 {
width: 200px;
height: 200px;
/* Optional: ensures the icon scales to fill its container while maintaining aspect ratio */
display: inline-block;
}
/* so that labels for the tabs are underneath the svg icon (on the homepage) */
svg.svg-icon-1 + span {
display: block;
}
/* styling the active tab's SVG */
#content-tabs-nav > li.active .svg-icon-1 {
fill: #F4B400;
}
/* also styling the active tab's tab label in the span */
#content-tabs-nav > li.active .svg-icon-1 + span {
color: #F4B400;
}
/* giving these icons a hover color also */
.svg-icon-1:hover {
fill: #397E7E
}
#content-tabs-nav > li.active .svg-icon-1:hover {
fill: #397E7E
}
/* and a hover color for the SVG's span */
.svg-icon-1:hover + span, #content-tabs-nav > li.active .svg-icon-1:hover + span {
color: #397E7E
}
/* ********************** hack to override light gray background on homepage bottom CTA and CTA on the Data Protection Lab page ********************** */
.elementor-widget-container > .call-to-action {
background-image: linear-gradient(135deg,#1e587f,#2d78aa) !important;
}
/* ********************** possibly is giving Partner Ecosystem logo carousel some smoothness ********************** */
.swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
/* ********************** hiding the link buttons on the Data Protection Lab image carousel ********************** */
.page-id-19767 .ins-gallery-slide-single .ins-primary-btn {
display: none;
}
/* ************* need to declare this so that the PDF icon shows up on red button (on Data Protection Lab page) ********* */
.e-far-file-pdf {
height: 30px;
width: 30px;
fill: #FFF;
}