.experience-section {
position: relative;
} .experience-timeline {
position: relative;
} .experience-timeline::before {
content: '';
position: absolute;
left: 50%;
top: 20px;
bottom: 20px;
width: 1px;
background-color: var(--wp--preset--color--base-3, #e9e9e9);
transform: translateX(-50%);
z-index: 0;
} .experience-item.wp-block-columns {
position: relative;
gap: var(--wp--preset--spacing--40, 2rem);
margin-bottom: 0;
} .experience-item__left {
text-align: left;
} .experience-item__right {
text-align: left;
} .experience-item__org {
font-size: var(--wp--preset--font-size--medium, 1.125rem);
font-weight: 600;
color: var(--wp--preset--color--contrast-3, #131313);
margin: 0 0 0.25rem 0;
} .experience-item__duration {
font-size: var(--wp--preset--font-size--small, 0.875rem);
color: var(--wp--preset--color--tint-2, #979797);
margin: 0;
} .experience-item__title {
font-size: var(--wp--preset--font-size--medium, 1.125rem);
font-weight: 600;
color: var(--wp--preset--color--contrast-3, #131313);
margin: 0 0 0.5rem 0;
} .experience-item__desc {
font-size: var(--wp--preset--font-size--small, 0.875rem);
color: var(--wp--preset--color--tint-3, #777777);
margin: 0;
line-height: 1.6;
} .experience-item__left .wp-block-outermost-icon-block,
.experience-item__right .wp-block-outermost-icon-block {
margin-bottom: 0.5rem;
} @media (min-width: 782px) {
.experience-item .wp-block-column {
padding-left: 1rem;
padding-right: 1rem;
}
.experience-item__left {
text-align: right;
}
.wp-block-outermost-icon-block{
margin-top: -15px;
} .experience-item__left .wp-block-outermost-icon-block .icon-container {
margin-left: auto;
} .experience-item.wp-block-columns::after {
content: '';
position: absolute;
left: 50%;
top: 14px;
width: 12px;
height: 4px; background-color: var(--wp--preset--color--tint, #777777); transform: translateX(-50%);
z-index: 1;
}
} @media (max-width: 781px) { .experience-timeline::before {
display: none;
}
.experience-item.wp-block-columns {
flex-direction: column;
gap: var(--wp--preset--spacing--20, 1rem);
}
.experience-item__left,
.experience-item__right {
text-align: left;
flex-basis: 100% !important;
}
}.news-card {
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.news-card:hover {
transform: translateY(-4px);
} .news-card__image {
overflow: hidden;
margin: 0 !important;
}
.news-card__image a {
display: block;
}
.news-card__image img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.4s ease;
}
.news-card:hover .news-card__image img {
transform: scale(1.05);
} .news-card__content {
flex-grow: 1;
}
.news-card__content .wp-block-post-title a {
text-decoration: none;
transition: color 0.2s ease;
}
.news-card__content .wp-block-post-title a:hover {
color: var(--wp--preset--color--main-accent);
} .news-card__content .wp-block-post-excerpt__excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
color: var(--wp--preset--color--white);
} @media (max-width: 1024px) {
.wp-block-post-template.columns-3 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
.wp-block-post-template.columns-3 {
grid-template-columns: 1fr !important;
}
}.partikule-logo .icon-container {
transition: transform 0.3s ease;
}
.partikule-logo:hover .icon-container {
transform: rotate(90deg) !important;
}.wp-block-group.is-style-image-wrap {
position: relative;
}
.wp-block-group.is-style-image-wrap::before {
content: "";
position: absolute;
border: 1px solid var(--wp--preset--color--tint-3, #777);
border-radius: 50%;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0;
transition: opacity 0.6s ease;
left: unset;
right: 5%;
} .wp-block-group.is-style-image-wrap.ptk-animate-visible::before,
.wp-block-group.is-style-image-wrap.ptk-animate-complete::before {
opacity: 1;
} .wp-block-group.is-style-image-wrap figure,
.wp-block-group.is-style-image-wrap .wp-block-image {
border-radius: 51% 49% 77% 23% / 65% 50% 50% 35%;
overflow: hidden;
}
.wp-block-group.is-style-image-wrap img {
width: 100%;
height: auto;
display: block;
}.wp-block-group.is-style-typed-headline {
align-items: baseline;
}
.wp-block-group.is-style-typed-headline p {
margin: 0;
}
@media (max-width: 781px) {
.wp-block-group.is-style-typed-headline {
gap: var(--wp--preset--spacing--20);
}
}@media (max-width: 991px) {
.section-hero {
padding-top: 0 !important;
}
.section-hero .is-style-image-wrap {
margin-bottom: var(--wp--preset--spacing--60);
}
} .hero-title {
line-height: 1.1;
} .hero-title__intro {
display: block;
font-size: var(--wp--preset--font-size--x-base, 1.125rem);
font-weight: 500;
letter-spacing: 1px;
} .hero-title__name {
display: block;
}.portfolio-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.portfolio-grid.wp-block-group {
gap: 1.5rem;
}
@media (min-width: 600px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1000px) {
.portfolio-grid {
grid-template-columns: repeat(3, 1fr);
}
} .portfolio-card {
position: relative;
overflow: hidden;
border: solid 1px #1a1a1a;
aspect-ratio: 4/3;
margin-block-start: 0 !important;
} .portfolio-card__overlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
transition: background 0.4s ease-out;
} .portfolio-card__category {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(0, 0, 0, 0.6);
margin: 0 0 0.5rem 0;
}
.portfolio-card__title {
font-size: 1.25rem;
font-weight: 600;
color: #1a1a1a !important;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: transform 0.4s ease-out;
}
.portfolio-card:hover .portfolio-card__title {
transform: translateY(-4px);
}
.portfolio-card__description {
font-size: 0.875rem;
color: rgba(0, 0, 0, 0.6);
margin: 0.5rem 0 0 0;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.portfolio-card:hover .portfolio-card__description {
opacity: 1;
transform: translateY(0);
} .portfolio-card__logo {
position: absolute;
top: 1.5rem;
right: 1.5rem;
max-width: 90px;
max-height: 50px;
margin: 0;
}
.portfolio-card__logo img {
max-height: 40px;
object-fit: contain;
filter: grayscale(100%) opacity(0.4);
transition: filter 0.4s ease-out;
}
.portfolio-card:hover .portfolio-card__logo img {
filter: grayscale(0%) opacity(1);
}.site-footer {
border-top: 1px solid var(--wp--preset--color--base-3, #e9e9e9);
} .text-center {
text-align: center;
}
.text-lg-start {
text-align: center;
}
@media (min-width: 992px) {
.text-lg-start {
text-align: left;
}
} .site-footer .wp-block-social-links.justify-content-center {
justify-content: center;
}
.site-footer .wp-block-social-links.justify-content-lg-end {
justify-content: center;
}
@media (min-width: 992px) {
.site-footer .wp-block-social-links.justify-content-lg-end {
justify-content: flex-end;
}
} .site-footer .wp-block-columns.align-items-center {
align-items: center;
} .site-footer .wp-block-social-link {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.site-footer .wp-block-social-link:hover {
transform: translateY(-2px);
opacity: 0.8;
} .site-footer .wp-block-social-link a {
padding: 0.75rem;
border-radius: 50%;
}:root {
--header-height: 100px;
--header-height-scrolled: 80px;
--timing-transition-1: cubic-bezier(0.4, 0, 0.2, 1);
} .site-header {
width: 100%;
height: var(--header-height);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
transition: all 0.4s var(--timing-transition-1);
position: relative;
} .site-header.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100vw;
} .editor-styles-wrapper .site-header.sticky {
position: relative;
top: auto;
left: auto;
right: auto;
} .admin-bar .site-header.sticky {
top: 32px;
}
@media screen and (max-width: 782px) {
.site-header {
padding-left: var(--wp--preset--spacing--20) !important;
padding-right: var(--wp--preset--spacing--20) !important;
}
.admin-bar .site-header.sticky {
top: 46px;
}
} .site-header.body-scrolled {
height: var(--header-height-scrolled);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
} .site-header.body-scrolled::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--wp--preset--color--base-1, #f8fafb);
opacity: 0.85;
z-index: -1;
transition: opacity 0.4s var(--timing-transition-1);
} .site-header.transparent {
background-color: transparent !important;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.site-header.transparent::before {
opacity: 0;
} .site-header-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
} .site-header-logo {
height: 100%;
display: flex;
align-items: center;
flex-shrink: 0;
}
.site-header-logo img {
transition: all 0.4s var(--timing-transition-1);
max-height: 50px;
width: auto;
}
.site-header.body-scrolled .site-header-logo img {
max-height: 40px;
}
@media screen and (max-width: 782px) {
.site-header.body-scrolled .site-header-logo img {
max-height: 30px;
}
} .site-header-logo.show-on-scroll {
opacity: 0;
visibility: hidden;
width: 0;
overflow: hidden;
transform: translateY(-10px);
transition: opacity 0.4s var(--timing-transition-1),
visibility 0.4s var(--timing-transition-1),
transform 0.4s var(--timing-transition-1),
width 0.4s var(--timing-transition-1);
}
.site-header.body-scrolled .site-header-logo.show-on-scroll {
opacity: 1;
visibility: visible;
width: auto;
transform: translateY(0);
} .site-header .site-menu {
flex: 1;
justify-content: center;
} .site-header .wp-block-navigation-item__content {
position: relative;
transition: color 0.3s ease;
}
.site-header .wp-block-navigation-item__content::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
background-color: var(--wp--preset--color--primary, #0A3981);
transition: width 0.3s ease;
}
.site-header .wp-block-navigation-item__content:hover::after,
.site-header .current-menu-item .wp-block-navigation-item__content::after {
width: 100%;
} .site-header .wp-block-navigation__submenu-container {
background-color: var(--wp--preset--color--base-2, #f0f0f0);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 0.75rem 0;
min-width: 200px;
margin-top: 0.5rem;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
padding: 0.5rem 1.5rem;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
font-size: 0.9rem;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
display: none;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
background-color: var(--wp--preset--color--base-3, #e9e9e9);
} .site-header .wp-block-navigation__submenu-icon {
margin-left: 0.25rem;
}
.site-header .wp-block-navigation__submenu-icon svg path {
stroke: currentColor;
} .site-header .header-cta {
flex-shrink: 0;
} @media (max-width: 991px) {
.site-header {
--header-height: 80px;
--header-height-scrolled: 70px;
}
.site-header .header-cta {
display: none;
} .site-header .wp-block-navigation__responsive-container-open {
padding: 0.5rem;
} .site-header .wp-block-navigation__responsive-container.is-menu-open {
padding-top: var(--header-height);
}
} .d-none {
display: none !important;
}
.d-lg-flex {
display: none !important;
}
.d-lg-block {
display: none !important;
}
@media (min-width: 992px) {
.d-lg-flex {
display: flex !important;
}
.d-lg-block {
display: block !important;
}
.d-none.d-lg-flex,
.d-none.d-lg-block {
display: flex !important;
}
}.skill-bubbles {
position: relative;
width: 100%;
min-height: 550px;
display: flex;
justify-content: center;
align-items: center;
} .skill-bubble {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--wp--preset--color--primary, #0A3981);
color: var(--wp--preset--color--base, #ffffff);
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: default;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.skill-bubble:hover {
transform: scale(1.1) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
z-index: 100 !important;
} .skill-bubble__text {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.3;
padding: 1rem;
} .skill-bubble:nth-child(1) {
border-radius: 51% 49% 77% 23% / 65% 50% 50% 35%;
width: 170px;
height: 170px;
top: 8%;
left: 15%;
background-color: #3178c6;
z-index: 2;
}
.skill-bubble:nth-child(2) {
border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
width: 180px;
height: 180px;
top: 2%;
left: 42%;
background-color: #8892be;
z-index: 3;
}
.skill-bubble:nth-child(3) {
border-radius: 40% 60% 65% 35% / 55% 65% 35% 45%;
width: 200px;
height: 200px;
top: 22%;
right: 12%;
background-color: #336791;
z-index: 4;
}
.skill-bubble:nth-child(4) {
border-radius: 55% 45% 40% 60% / 60% 40% 60% 40%;
width: 155px;
height: 155px;
bottom: 18%;
left: 18%;
background-color: #2496ed;
z-index: 1;
}
.skill-bubble:nth-child(5) {
border-radius: 45% 55% 70% 30% / 45% 55% 45% 55%;
width: 165px;
height: 165px;
bottom: 5%;
left: 42%;
background-color: #e44d26;
z-index: 2;
}
.skill-bubble:nth-child(6) {
border-radius: 60% 40% 35% 65% / 50% 60% 40% 50%;
width: 160px;
height: 160px;
bottom: 15%;
right: 15%;
background-color: #71aa1b;
z-index: 1;
} .skill-bubble[data-parallax-speed="0.3"] { --parallax-speed: 0.3; }
.skill-bubble[data-parallax-speed="0.5"] { --parallax-speed: 0.5; }
.skill-bubble[data-parallax-speed="0.7"] { --parallax-speed: 0.7; }
.skill-bubble[data-parallax-speed="0.4"] { --parallax-speed: 0.4; }
.skill-bubble[data-parallax-speed="0.6"] { --parallax-speed: 0.6; }
.skill-bubble[data-parallax-speed="0.2"] { --parallax-speed: 0.2; } @media (max-width: 991px) {
.skill-bubbles {
min-height: 450px;
}
.skill-bubble:nth-child(1) { width: 140px; height: 140px; }
.skill-bubble:nth-child(2) { width: 150px; height: 150px; }
.skill-bubble:nth-child(3) { width: 165px; height: 165px; }
.skill-bubble:nth-child(4) { width: 130px; height: 130px; }
.skill-bubble:nth-child(5) { width: 135px; height: 135px; }
.skill-bubble:nth-child(6) { width: 130px; height: 130px; }
.skill-bubble__text {
font-size: 0.75rem;
padding: 0.85rem;
}
}
@media (max-width: 767px) {
.skill-bubbles {
min-height: 380px;
}
.skill-bubble:nth-child(1) { width: 110px; height: 110px; top: 5%; left: 5%; }
.skill-bubble:nth-child(2) { width: 120px; height: 120px; top: 0; left: 35%; }
.skill-bubble:nth-child(3) { width: 130px; height: 130px; top: 18%; right: 5%; }
.skill-bubble:nth-child(4) { width: 105px; height: 105px; bottom: 25%; left: 8%; }
.skill-bubble:nth-child(5) { width: 115px; height: 115px; bottom: 5%; left: 38%; }
.skill-bubble:nth-child(6) { width: 105px; height: 105px; bottom: 18%; right: 8%; }
.skill-bubble__text {
font-size: 0.65rem;
padding: 0.6rem;
}
} .skill-bubble {
opacity: 0;
transform: scale(0.5) translateY(30px);
} .skill-bubbles.is-visible .skill-bubble {
opacity: 1;
transform: scale(1) translateY(0);
}
.skill-bubbles.is-visible .skill-bubble:nth-child(1) { transition: all 0.6s ease 0s; }
.skill-bubbles.is-visible .skill-bubble:nth-child(2) { transition: all 0.6s ease 0.1s; }
.skill-bubbles.is-visible .skill-bubble:nth-child(3) { transition: all 0.6s ease 0.2s; }
.skill-bubbles.is-visible .skill-bubble:nth-child(4) { transition: all 0.6s ease 0.3s; }
.skill-bubbles.is-visible .skill-bubble:nth-child(5) { transition: all 0.6s ease 0.4s; }
.skill-bubbles.is-visible .skill-bubble:nth-child(6) { transition: all 0.6s ease 0.5s; }.skill-progress-item {
margin-bottom: var(--wp--preset--spacing--30, 1.5rem);
}
.skill-progress-item:last-child {
margin-bottom: 0;
} .skill-progress-item .skill-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
font-size: var(--wp--preset--font-size--small, 0.875rem);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--wp--preset--color--contrast-3, #131313);
}
.skill-progress-item .skill-title span {
margin: 0;
}
.skill-progress-item .skill-percentage {
font-weight: 500;
color: var(--wp--preset--color--tint-2, #979797);
} .skill-progress {
width: 100%;
height: 8px;
background-color: var(--wp--preset--color--base-3, #e9e9e9);
border-radius: 4px;
overflow: hidden;
position: relative;
} .skill-progress-bar {
height: 100%;
background-color: var(--wp--preset--color--primary, #0A3981);
border-radius: 4px;
width: 0;
transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
} .skill-progress-item.is-animated .skill-progress-bar {
width: var(--skill-percentage, 0%);
} .skill-progress-item[data-percentage] .skill-progress-bar {
--skill-percentage: attr(data-percentage);
} .skill-progress-item[data-skill="10"] .skill-progress-bar { --skill-percentage: 10%; }
.skill-progress-item[data-skill="15"] .skill-progress-bar { --skill-percentage: 15%; }
.skill-progress-item[data-skill="20"] .skill-progress-bar { --skill-percentage: 20%; }
.skill-progress-item[data-skill="25"] .skill-progress-bar { --skill-percentage: 25%; }
.skill-progress-item[data-skill="30"] .skill-progress-bar { --skill-percentage: 30%; }
.skill-progress-item[data-skill="35"] .skill-progress-bar { --skill-percentage: 35%; }
.skill-progress-item[data-skill="40"] .skill-progress-bar { --skill-percentage: 40%; }
.skill-progress-item[data-skill="45"] .skill-progress-bar { --skill-percentage: 45%; }
.skill-progress-item[data-skill="50"] .skill-progress-bar { --skill-percentage: 50%; }
.skill-progress-item[data-skill="55"] .skill-progress-bar { --skill-percentage: 55%; }
.skill-progress-item[data-skill="60"] .skill-progress-bar { --skill-percentage: 60%; }
.skill-progress-item[data-skill="65"] .skill-progress-bar { --skill-percentage: 65%; }
.skill-progress-item[data-skill="70"] .skill-progress-bar { --skill-percentage: 70%; }
.skill-progress-item[data-skill="75"] .skill-progress-bar { --skill-percentage: 75%; }
.skill-progress-item[data-skill="80"] .skill-progress-bar { --skill-percentage: 80%; }
.skill-progress-item[data-skill="85"] .skill-progress-bar { --skill-percentage: 85%; }
.skill-progress-item[data-skill="90"] .skill-progress-bar { --skill-percentage: 90%; }
.skill-progress-item[data-skill="95"] .skill-progress-bar { --skill-percentage: 95%; }
.skill-progress-item[data-skill="100"] .skill-progress-bar { --skill-percentage: 100%; } .skill-progress-bar.has-primary-background {
background-color: var(--wp--preset--color--primary, #0A3981);
}
.skill-progress-bar.has-contrast-background {
background-color: var(--wp--preset--color--contrast-2, #2d2d2d);
} .skill-progress-bar.has-gradient-background {
background: linear-gradient(90deg,
var(--wp--preset--color--primary, #0A3981) 0%,
var(--wp--preset--color--contrast-2, #2d2d2d) 100%
);
} .skills-section {
position: relative;
}
.skills-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--30, 1.5rem);
}
@media (min-width: 768px) {
.skills-grid {
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--40, 2rem);
}
} .skill-progress-item:nth-child(1) .skill-progress-bar { transition-delay: 0s; }
.skill-progress-item:nth-child(2) .skill-progress-bar { transition-delay: 0.1s; }
.skill-progress-item:nth-child(3) .skill-progress-bar { transition-delay: 0.2s; }
.skill-progress-item:nth-child(4) .skill-progress-bar { transition-delay: 0.3s; }
.skill-progress-item:nth-child(5) .skill-progress-bar { transition-delay: 0.4s; }
.skill-progress-item:nth-child(6) .skill-progress-bar { transition-delay: 0.5s; }
.skill-progress-item:nth-child(7) .skill-progress-bar { transition-delay: 0.6s; }
.skill-progress-item:nth-child(8) .skill-progress-bar { transition-delay: 0.7s; } .skill-progress.is-thin {
height: 4px;
} .skill-progress.is-thick {
height: 12px;
} .skill-progress.is-rounded,
.skill-progress.is-rounded .skill-progress-bar {
border-radius: 10px;
} .skill-progress.is-square,
.skill-progress.is-square .skill-progress-bar {
border-radius: 0;
}.testimonials-section {
overflow-x: clip;
} .testimonials-slider-wrapper {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
} .has-global-padding > .testimonials-slider-wrapper.alignfull:not(.wp-block-group__inner-container) {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
.testimonials-slider {
position: relative;
overflow: visible;
padding: 3rem 0 2rem;
}
.testimonials-slider__track {
display: flex;
transition: transform 0.5s ease-in-out;
} .testimonials-slider__track.wp-block-group {
gap: 0;
}
.testimonials-slider__slide {
flex: 0 0 85%;
max-width: 600px;
padding: 0 1rem;
box-sizing: border-box;
opacity: 0.5;
transform: scale(0.95);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.testimonials-slider__slide.is-active {
opacity: 1;
transform: scale(1);
}
@media (min-width: 600px) {
.testimonials-slider__slide {
}
}
@media (min-width: 900px) {
.testimonials-slider__slide {
}
}
@media (min-width: 1200px) {
.testimonials-slider__slide {
}
} .testimonial-card {
position: relative;
text-align: center;
height: 100%;
box-sizing: border-box;
} .testimonial-card__avatar {
position: absolute;
top: -3rem;
left: 50%;
transform: translateX(-50%);
width: 5rem;
height: 5rem;
border-radius: 50%;
overflow: hidden;
background-color: #e5e5e5;
z-index: 1;
} .testimonial-card__avatar.wp-block-group {
padding: 0;
} .testimonial-card__avatar .wp-block-image {
margin: 0;
width: 100%;
height: 100%;
}
.testimonial-card__avatar .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: filter 0.5s ease;
}
.testimonials-slider__slide.is-active .testimonial-card__avatar img {
filter: grayscale(0%);
} .testimonial-card__quote {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
}
.testimonial-card__quote::before {
content: '\201C';
font-size: 1.5rem;
line-height: 0;
vertical-align: -0.3em;
margin-right: 0.15rem;
opacity: 0.5;
}
.testimonial-card__quote::after {
content: '\201D';
font-size: 1.5rem;
line-height: 0;
vertical-align: -0.3em;
margin-left: 0.15rem;
opacity: 0.5;
} .testimonial-card__author {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.25rem;
margin-top: 0.25rem;
}
.testimonial-card__role {
font-size: 0.8rem;
opacity: 0.7;
letter-spacing: 0.05em;
margin-top: 0;
} .testimonials-slider__nav {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 3rem;
}
.testimonials-slider__btn {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 2px solid currentColor;
background: transparent;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
.testimonials-slider__btn:hover {
background-color: currentColor;
}
.testimonials-slider__btn:hover svg {
color: #fff;
}
.testimonials-slider__btn svg {
width: 1.5rem;
height: 1.5rem;
transition: color 0.3s ease;
}
.testimonials-slider__btn:disabled {
opacity: 0.3;
cursor: not-allowed;
} .testimonials-slider__dots {
display: flex;
gap: 0.5rem;
align-items: center;
}
.testimonials-slider__dot {
width: 0.6rem;
height: 0.6rem;
border: none;
background-color: currentColor;
opacity: 0.3;
cursor: pointer;
padding: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.testimonials-slider__dot.is-active {
opacity: 1;
transform: scale(1.3);
}
.testimonials-slider__dot:hover {
opacity: 0.7;
}