:root {
--wpl-navy: #082A42;
--wpl-navy-hover: #0E3D5E;
--wpl-navy-2: #0F3653;
--wpl-tyrkys: #358C83;
--wpl-tyrkys-text: #276B63;
--wpl-tyrkys-tinta: #E6F2F0;
--wpl-tyrkys-light: #7CCFC5;
--wpl-tyrkys-pale: #9FD3CC;
--wpl-text: #0A1419;
--wpl-text-muted: #4A5862;
--wpl-bg: #FFFFFF;
--wpl-bg-soft: #F5F7F8;
--wpl-line: #E2E7EA;
--wpl-line-strong: #D5DDE2;
--wpl-field-line: #7B8891;
--wpl-placeholder: #647179;
--wpl-success: #358C83;
--wpl-success-tint: #E6F2F0;
--wpl-info: #082A42;
--wpl-info-tint: #EDF2F7;
--wpl-error: #B3261E;
--wpl-error-tint: #FBEAE9;
--wpl-warning: #B86E00;
--wpl-warning-tint: #FDF3E1;
--wpl-warning-text: #8A5300;
--wpl-font-heading: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--wpl-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--wpl-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--wpl-fs-display: clamp(2.875rem, 1.807rem + 4.381vw, 5.75rem);
--wpl-fs-h1: clamp(2.5rem, 2.036rem + 1.905vw, 3.75rem);
--wpl-fs-h1-hero: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
--wpl-fs-h2: clamp(2rem, 1.629rem + 1.524vw, 3rem);
--wpl-fs-h3: clamp(1.25rem, 1.18rem + 0.286vw, 1.4375rem);
--wpl-fs-h4: clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem);
--wpl-fs-lead: clamp(1.125rem, 1.055rem + 0.286vw, 1.3125rem);
--wpl-fs-sub: clamp(1rem, 0.93rem + 0.286vw, 1.1875rem);
--wpl-fs-body: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);
--wpl-fs-small: 0.875rem;
--wpl-fs-eyebrow: 0.8125rem;
--wpl-fs-content: clamp(1.0625rem, 1.039rem + 0.095vw, 1.125rem);
--wpl-fs-content-h2: clamp(1.625rem, 1.486rem + 0.571vw, 2rem);
--wpl-fs-content-h3: clamp(1.3125rem, 1.243rem + 0.286vw, 1.5rem);
--wpl-fs-content-h4: clamp(1.125rem, 1.102rem + 0.095vw, 1.1875rem);
--wpl-fs-quote: clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem);
--wpl-wrap: 1200px;
--wpl-gutter: 20px;
--wpl-text-col: 720px;
--wpl-section-y: clamp(4.5rem, 3.386rem + 4.571vw, 7.5rem);
--wpl-topbar-h: 40px;
--wpl-header-h: 84px;
--wpl-radius-field: 12px;
--wpl-radius-card: 14px;
--wpl-radius-panel: 20px;
--wpl-radius-panel-lg: 24px;
--wpl-radius-pill: 999px;
--wpl-shadow-menu: 0 20px 40px rgba(8, 42, 66, 0.10);
--wpl-transition: 0.2s ease;
--wpl-focus-ring: 3px solid var(--wpl-tyrkys);
--wpl-focus-offset: 2px;
--wpl-z-header: 100;
--wpl-z-menu: 200;
--wpl-z-drawer: 300;
--wpl-z-toast: 400;
}
@media (min-width: 768px) {
:root {
--wpl-gutter: 32px;
}
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/inter-latin-ext-wght-italic.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--wpl-header-h) + 16px);
}
body {
margin: 0;
background: var(--wpl-bg);
color: var(--wpl-text);
font-family: var(--wpl-font-body);
font-size: var(--wpl-fs-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-weight: 700;
text-wrap: balance;
}
p,
ul,
ol,
figure,
blockquote {
margin: 0;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: var(--wpl-navy);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
::selection {
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-navy);
}
:focus-visible {
outline: var(--wpl-focus-ring);
outline-offset: var(--wpl-focus-offset);
}
.wpl-main:focus {
outline: none;
}
.wpl-skip-link {
position: absolute;
top: 8px;
left: 8px;
z-index: var(--wpl-z-toast);
padding: 12px 20px;
border-radius: var(--wpl-radius-pill);
background: var(--wpl-navy);
color: #FFFFFF;
font-weight: 600;
text-decoration: none;
transform: translateY(-200%);
}
.wpl-skip-link:focus {
transform: none;
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.wpl-wrap {
width: min(100% - 2 * var(--wpl-gutter), var(--wpl-wrap));
margin-inline: auto;
}
.wpl-wrap--text {
width: min(100% - 2 * var(--wpl-gutter), var(--wpl-text-col));
}
.wpl-section {
padding-block: var(--wpl-section-y);
}
.wpl-section--soft {
background: var(--wpl-bg-soft);
}
.wpl-section--navy {
background: var(--wpl-navy);
color: #FFFFFF;
}
.wpl-section--navy :is(h1, h2, h3, h4) {
color: #FFFFFF;
}
.wpl-section--tight {
padding-block: calc(var(--wpl-section-y) * 0.6);
}
.wpl-display {
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-display);
font-weight: 800;
line-height: 1;
letter-spacing: -0.045em;
color: var(--wpl-navy);
}
.wpl-h1 {
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-h1);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.04em;
color: var(--wpl-navy);
}
.wpl-h1-hero {
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-h1-hero);
font-weight: 700;
line-height: 1.35;
color: var(--wpl-navy);
}
.wpl-h2 {
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-h2);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--wpl-navy);
}
.wpl-h3 {
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-h3);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--wpl-navy);
}
.wpl-h4 {
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-h4);
font-weight: 700;
line-height: 1.35;
color: var(--wpl-navy);
}
.wpl-section--navy :is(.wpl-display, .wpl-h1, .wpl-h2, .wpl-h3, .wpl-h4) {
color: #FFFFFF;
}
.wpl-section--navy .wpl-h1-hero {
color: var(--wpl-tyrkys-pale);
}
.wpl-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--wpl-fs-eyebrow);
font-weight: 600;
line-height: 1;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--wpl-tyrkys-text);
}
.wpl-eyebrow::before {
content: "";
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--wpl-tyrkys);
}
.wpl-section--navy .wpl-eyebrow {
color: var(--wpl-tyrkys-light);
}
.wpl-lead {
font-size: var(--wpl-fs-lead);
line-height: 1.5;
}
.wpl-sub {
font-size: var(--wpl-fs-sub);
line-height: 1.5;
color: var(--wpl-text-muted);
}
.wpl-section--navy .wpl-sub {
color: var(--wpl-tyrkys-pale);
}
.wpl-muted {
color: var(--wpl-text-muted);
}
.wpl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 28px;
border: 0;
border-radius: var(--wpl-radius-pill);
background: var(--wpl-navy);
color: #FFFFFF;
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--wpl-transition), color var(--wpl-transition);
}
.wpl-btn:hover {
background: var(--wpl-navy-hover);
color: #FFFFFF;
}
.wpl-btn--light {
background: #FFFFFF;
color: var(--wpl-navy);
}
.wpl-btn--light:hover {
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-navy);
}
.wpl-btn--sm {
min-height: 44px;
padding: 0 22px;
font-size: 0.9375rem;
}
.wpl-link {
color: var(--wpl-navy);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
transition: text-decoration-color var(--wpl-transition);
}
.wpl-link:hover {
color: var(--wpl-navy);
text-decoration-color: var(--wpl-navy);
}
.wpl-link:has(> .wpl-link__text) {
text-decoration-line: none;
}
.wpl-link__text {
text-decoration-line: underline;
text-decoration-color: inherit;
text-decoration-thickness: inherit;
}
.wpl-link__arrow {
display: inline-block;
margin-left: 2px;
color: var(--wpl-tyrkys);
transition: transform var(--wpl-transition);
}
.wpl-link:hover .wpl-link__arrow {
transform: translateX(4px);
}
.wpl-section--navy .wpl-link {
color: #FFFFFF;
text-decoration-color: var(--wpl-tyrkys-light);
}
.wpl-section--navy .wpl-link:hover {
text-decoration-color: #FFFFFF;
}
.wpl-section--navy .wpl-link__arrow {
color: var(--wpl-tyrkys-light);
}
.wpl-header,
.wpl-scrolled .wpl-header[data-sticky="1"] .wpl-header__bar {
--hdr-bg: var(--wpl-bg-soft);
--hdr-line: rgba(8, 42, 66, 0.08);
--hdr-logo: var(--wpl-navy);
--hdr-link: var(--wpl-text);
--hdr-link-hover: var(--wpl-tyrkys-text);
--hdr-cur: var(--wpl-navy);
--hdr-cur-weight: 600;
--hdr-cur-line: var(--wpl-tyrkys);
--hdr-icon: var(--wpl-navy);
--hdr-icon-hover: rgba(8, 42, 66, 0.06);
--hdr-burger-line: rgba(8, 42, 66, 0.18);
--hdr-pill-bg: var(--wpl-navy);
--hdr-pill-fg: #FFFFFF;
--hdr-pill-hover: var(--wpl-navy-hover);
}
.wpl-header--dark {
--hdr-bg: var(--wpl-navy);
--hdr-line: rgba(255, 255, 255, 0.10);
--hdr-logo: #FFFFFF;
--hdr-link: #DCE6EE;
--hdr-link-hover: #FFFFFF;
--hdr-cur: #FFFFFF;
--hdr-cur-weight: 500;
--hdr-cur-line: var(--wpl-tyrkys-light);
--hdr-icon: #FFFFFF;
--hdr-icon-hover: rgba(255, 255, 255, 0.08);
--hdr-burger-line: rgba(255, 255, 255, 0.24);
--hdr-pill-bg: #FFFFFF;
--hdr-pill-fg: var(--wpl-navy);
--hdr-pill-hover: var(--wpl-tyrkys-tinta);
}
.wpl-header--white,
.wpl-header--minimal {
--hdr-bg: var(--wpl-bg);
}
.wpl-header {
--hdr-row: 64px;
position: relative;
z-index: var(--wpl-z-header);
background: var(--hdr-bg);
color: var(--wpl-text);
}
@media (min-width: 1200px) {
.wpl-header {
--hdr-row: var(--wpl-header-h);
}
}
.wpl-hbtn,
.wpl-mega__icon,
.wpl-mega__ok,
.wpl-hsearch__ico,
.wpl-hsearch__close,
.wpl-drawer__close,
.wpl-drawer__acute-icon,
.wpl-mnav__pm {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.wpl-topbar a,
.wpl-mega__write,
a.wpl-mega__title:hover,
.wpl-mega__link:hover,
.wpl-mega__link[aria-current="page"],
.wpl-header__help a:hover,
.wpl-mnav__sublink:hover,
.wpl-mnav__sublink[aria-current="page"],
.wpl-drawer__email:hover {
color: var(--wpl-navy);
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.wpl-topbar a:hover,
.wpl-mega__write:hover {
color: var(--wpl-navy);
text-decoration-color: var(--wpl-navy);
}
.wpl-hsearch,
.wpl-drawer {
position: fixed;
z-index: var(--wpl-z-menu);
visibility: hidden;
transition: visibility 0s linear 0.3s;
}
.wpl-hsearch[hidden],
.wpl-drawer[hidden],
.wpl-scrim[hidden],
.wpl-hsearch__results[hidden],
.wpl-hsearch__empty[hidden],
.wpl-mnav__sub[hidden] {
display: none;
}
.wpl-hsearch.is-open,
.wpl-drawer.is-open {
visibility: visible;
transition-delay: 0s;
}
.wpl-hsearch__scrim,
.wpl-drawer__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 42, 66, 0.55);
opacity: 0;
transition: opacity 0.3s ease;
}
.wpl-hsearch.is-open .wpl-hsearch__scrim,
.wpl-drawer.is-open .wpl-drawer__backdrop {
opacity: 1;
}
.wpl-hsearch__close,
.wpl-drawer__close {
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--wpl-line-strong);
border-radius: 50%;
background: var(--wpl-bg);
color: var(--wpl-navy);
text-decoration: none;
cursor: pointer;
}
.wpl-hsearch__close:hover,
.wpl-drawer__close:hover {
color: var(--wpl-navy);
}
html:not(.wpl-js) .wpl-hsearch:target {
display: block;
visibility: visible;
transition: none;
}
html:not(.wpl-js) .wpl-hsearch:target .wpl-hsearch__scrim {
opacity: 1;
}
html:not(.wpl-js) .wpl-hsearch:target .wpl-hsearch__panel {
opacity: 1;
transform: none;
transition: none;
}
@media (max-width: 1199px) {
html:not(.wpl-js) .wpl-drawer:target {
display: block;
visibility: visible;
transition: none;
}
html:not(.wpl-js) .wpl-drawer:target .wpl-drawer__backdrop {
opacity: 1;
}
html:not(.wpl-js) .wpl-drawer:target .wpl-drawer__panel {
transform: none;
transition: none;
}
html:not(.wpl-js) .wpl-mnav__sub[hidden] {
display: flex;
}
html:not(.wpl-js) .wpl-mnav__pm {
display: none;
}
}
.wpl-topbar {
background: var(--wpl-bg-soft);
border-bottom: 1px solid var(--wpl-line);
color: var(--wpl-text);
font-size: 0.8125rem;
line-height: 1.45;
}
.wpl-topbar__inner {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(var(--wpl-topbar-h) - 1px);
padding-block: 6px;
text-align: center;
}
.wpl-topbar__text {
margin: 0;
}
.wpl-topbar a {
font-weight: 600;
white-space: nowrap;
}
.wpl-topbar__label--desktop,
.wpl-topbar__more--desktop {
display: none;
}
@media (min-width: 768px) {
.wpl-topbar {
font-size: var(--wpl-fs-small);
}
.wpl-topbar__label--desktop,
.wpl-topbar__more--desktop {
display: inline;
}
.wpl-topbar__label--mobile,
.wpl-topbar__more--mobile {
display: none;
}
}
.wpl-header__slot {
height: var(--hdr-row);
}
.wpl-header__bar {
position: relative;
height: var(--hdr-row);
background: var(--hdr-bg);
box-shadow: inset 0 -1px 0 var(--hdr-line);
}
.wpl-header__row {
display: flex;
align-items: center;
gap: 4px;
height: 100%;
}
.wpl-logo {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: 1.4375rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.035em;
text-decoration: none;
white-space: nowrap;
}
.wpl-logo:hover {
color: var(--wpl-navy);
}
.wpl-header__logo {
margin-right: auto;
}
.wpl-header__logo,
.wpl-header__logo:hover {
color: var(--hdr-logo);
}
.wpl-hbtn {
position: relative;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--hdr-icon);
text-decoration: none;
cursor: pointer;
transition: background-color var(--wpl-transition);
}
.wpl-hbtn:hover {
background: var(--hdr-icon-hover);
color: var(--hdr-icon);
}
.wpl-header__actions {
display: flex;
align-items: center;
gap: 4px;
}
.wpl-header__cart.is-empty {
display: none;
}
.wpl-header__cart .wpl-cart-count {
position: absolute;
top: 4px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--wpl-radius-pill);
background: var(--wpl-tyrkys-text);
color: #FFFFFF;
font-size: 0.6875rem;
font-weight: 700;
line-height: 18px;
text-align: center;
}
.wpl-header__cta {
display: none;
}
.wpl-header__cta,
.wpl-header__cta:hover {
background: var(--hdr-pill-bg);
color: var(--hdr-pill-fg);
}
.wpl-header__cta:hover {
background: var(--hdr-pill-hover);
}
.wpl-header__burger {
margin-left: 4px;
border: 1px solid var(--hdr-burger-line);
}
@media (min-width: 768px) {
.wpl-header__cta {
display: inline-flex;
margin-left: 8px;
}
}
@media (min-width: 1200px) {
.wpl-header__row {
gap: 24px;
}
.wpl-header__logo,
.wpl-header--minimal .wpl-header__logo {
margin-right: 0;
font-size: 1.5625rem;
}
.wpl-header__cta {
margin-left: 0;
}
.wpl-header__burger {
display: none;
}
}
@media (min-width: 1320px) {
.wpl-header__row {
gap: 40px;
}
}
.wpl-nav {
display: none;
}
@media (min-width: 1200px) {
.wpl-nav {
display: flex;
flex: 1 1 auto;
align-self: stretch;
min-width: 0;
}
.wpl-nav__list {
display: flex;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.wpl-nav__item {
display: flex;
}
.wpl-nav__item--dropdown {
position: relative;
}
.wpl-nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0;
border: 0;
background: none;
color: var(--hdr-link);
font: inherit;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: color var(--wpl-transition), box-shadow var(--wpl-transition);
}
.wpl-nav__link::before {
content: "";
position: absolute;
inset: 0 -8px;
}
.wpl-nav__link:hover {
color: var(--hdr-link-hover);
}
.wpl-nav__link:focus-visible {
outline: none;
}
.wpl-nav__link:focus-visible .wpl-nav__text {
outline: var(--wpl-focus-ring);
outline-offset: var(--wpl-focus-offset);
border-radius: 4px;
}
.wpl-nav__text {
padding: 6px 0;
}
.wpl-nav__chev {
display: inline-flex;
transition: transform var(--wpl-transition);
}
.wpl-nav__chev svg {
width: 16px;
height: 16px;
}
.wpl-nav__item.is-current > .wpl-nav__link {
color: var(--hdr-cur);
font-weight: var(--hdr-cur-weight);
}
.wpl-nav__item.is-current > .wpl-nav__link .wpl-nav__text {
box-shadow: inset 0 -2px 0 var(--hdr-cur-line);
}
.wpl-nav__toggle[aria-expanded="true"] {
color: var(--hdr-cur);
box-shadow: inset 0 -3px 0 var(--hdr-cur-line);
}
.wpl-nav__toggle[aria-expanded="true"] .wpl-nav__text {
box-shadow: none;
}
.wpl-nav__toggle[aria-expanded="true"] .wpl-nav__chev {
transform: rotate(180deg);
}
}
@media (min-width: 1320px) {
.wpl-nav__list {
gap: 28px;
}
}
.wpl-nav__dropdown {
position: absolute;
top: 100%;
left: -16px;
z-index: 1;
min-width: 240px;
padding: 8px;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-card);
background: var(--wpl-bg);
box-shadow: var(--wpl-shadow-menu);
}
.wpl-nav__sub {
margin: 0;
padding: 0;
list-style: none;
}
.wpl-nav__sublink {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: 10px;
color: var(--wpl-text);
font-size: 0.9375rem;
line-height: 1.3;
text-decoration: none;
transition: background-color var(--wpl-transition);
}
.wpl-nav__sublink:hover {
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
}
.wpl-nav__sublink--parent,
.wpl-nav__sublink[aria-current="page"] {
color: var(--wpl-navy);
font-weight: 600;
}
.wpl-nav__sublink[aria-current="page"] {
box-shadow: inset 3px 0 0 var(--wpl-tyrkys);
}
html:not(.wpl-js) .wpl-nav__item:hover > [hidden],
html:not(.wpl-js) .wpl-nav__item:focus-within > [hidden] {
display: block;
}
.wpl-mega {
position: absolute;
top: 100%;
right: 0;
left: 0;
padding: 28px 0;
border-bottom: 1px solid var(--wpl-line);
background: var(--wpl-bg);
box-shadow: var(--wpl-shadow-menu);
color: var(--wpl-text);
font-size: var(--wpl-fs-body);
white-space: normal;
}
.wpl-mega__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
}
.wpl-mega__groups {
display: grid;
grid-column: span 8;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 24px;
align-content: start;
margin: 0;
padding: 0;
list-style: none;
}
.wpl-mega__group {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border-radius: 12px;
transition: background-color var(--wpl-transition);
}
.wpl-mega__group:hover {
background: var(--wpl-bg-soft);
}
.wpl-mega__icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-tyrkys-text);
}
.wpl-mega__group--acute .wpl-mega__icon {
background: var(--wpl-navy);
color: #FFFFFF;
}
.wpl-mega__body {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.wpl-mega__title {
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
}
.wpl-mega__links,
.wpl-mega__checks {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.wpl-mega__link {
display: flex;
align-items: baseline;
gap: 6px;
min-height: 26px;
padding: 3px 0;
color: var(--wpl-text);
font-size: 0.875rem;
line-height: 1.4;
text-decoration: none;
}
.wpl-mega__link:hover,
.wpl-mega__link[aria-current="page"] {
text-underline-offset: 3px;
}
.wpl-mega__chev {
display: inline-flex;
flex-shrink: 0;
color: var(--wpl-tyrkys);
transform: translateY(1px);
transition: transform 0.15s ease;
}
.wpl-mega__chev svg {
width: 11px;
height: 11px;
stroke-width: 2.6;
}
.wpl-mega__link:hover .wpl-mega__chev {
transform: translate(2px, 1px);
}
.wpl-mega__card {
display: flex;
flex-direction: column;
grid-column: 9 / span 4;
gap: 14px;
padding: 24px;
border-radius: 16px;
background: var(--wpl-bg-soft);
}
.wpl-mega__card-title {
margin: 0;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25;
}
.wpl-mega__price {
display: flex;
align-items: baseline;
gap: 6px;
margin: 0;
color: var(--wpl-navy);
}
.wpl-mega__price-note {
color: var(--wpl-text-muted);
font-size: 0.875rem;
}
.wpl-mega__price-num {
font-family: var(--wpl-font-heading);
font-size: 1.875rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
white-space: nowrap;
}
.wpl-mega__checks {
gap: 7px;
font-size: 0.875rem;
line-height: 1.4;
}
.wpl-mega__checks li {
display: flex;
align-items: center;
gap: 10px;
}
.wpl-mega__ok {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--wpl-tyrkys);
color: #FFFFFF;
}
.wpl-mega__ok svg {
width: 11px;
height: 11px;
stroke-width: 3;
}
.wpl-mega__btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
margin-top: auto;
padding: 0 18px;
border-radius: 12px;
background: var(--wpl-navy);
color: #FFFFFF;
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
transition: background-color var(--wpl-transition);
}
.wpl-mega__btn:hover {
background: var(--wpl-navy-hover);
color: #FFFFFF;
}
.wpl-mega__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--wpl-line);
}
.wpl-mega__note {
margin: 0;
color: var(--wpl-text-muted);
font-size: 0.9375rem;
}
.wpl-mega__write {
font-weight: 600;
}
.wpl-mega__more {
display: flex;
flex-wrap: wrap;
gap: 12px 32px;
font-size: 0.9375rem;
}
.wpl-scrim {
position: fixed;
inset: 0;
z-index: calc(var(--wpl-z-header) - 1);
background: rgba(8, 42, 66, 0.45);
}
@keyframes wpl-header-in {
from {
transform: translateY(-100%);
}
}
.wpl-scrolled .wpl-header[data-sticky="1"] .wpl-header__bar {
--hdr-bg: var(--wpl-bg);
position: fixed;
top: var(--wpl-adminbar, 0px);
right: 0;
left: 0;
box-shadow: 0 8px 24px rgba(8, 42, 66, 0.10);
animation: wpl-header-in 0.25s ease;
}
@media (min-width: 1200px) {
.wpl-scrolled .wpl-header[data-sticky="1"] .wpl-header__bar {
height: 68px;
}
.wpl-scrolled .wpl-header[data-sticky="1"] .wpl-header__logo {
font-size: 1.375rem;
}
.wpl-scrolled .wpl-header[data-sticky="1"] .wpl-header__cta {
min-height: 42px;
padding: 0 20px;
}
}
.admin-bar {
--wpl-adminbar: 32px;
}
@media (max-width: 782px) {
.admin-bar {
--wpl-adminbar: 46px;
}
}
html.wpl-scroll-lock {
overflow: hidden;
scrollbar-gutter: stable;
}
.wpl-header--minimal {
--hdr-line: var(--wpl-line);
}
.wpl-header--minimal .wpl-header__row {
justify-content: space-between;
gap: 16px;
}
.wpl-header--minimal .wpl-header__logo {
margin-right: 0;
font-size: 1.375rem;
}
.wpl-header__center,
.wpl-header__help {
display: none;
}
.wpl-header__help {
margin: 0;
color: var(--wpl-text-muted);
font-size: var(--wpl-fs-small);
white-space: nowrap;
}
.wpl-header__help a {
color: var(--wpl-navy);
font-weight: 700;
text-decoration: none;
}
.wpl-header__secure {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--wpl-tyrkys-text);
font-size: 0.8125rem;
font-weight: 600;
}
@media (min-width: 768px) {
.wpl-header__center {
display: flex;
flex: 1 1 auto;
justify-content: center;
min-width: 0;
}
}
@media (min-width: 1024px) {
.wpl-header__help {
display: flex;
align-items: center;
gap: 8px;
}
.wpl-header__secure {
display: none;
}
}
.wpl-hsearch {
inset: 0;
}
.wpl-hsearch__panel {
position: absolute;
inset: var(--wpl-adminbar, 0px) 0 0;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--wpl-bg);
color: var(--wpl-text);
opacity: 0;
transform: translateY(-12px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.wpl-hsearch.is-open .wpl-hsearch__panel {
opacity: 1;
transform: none;
}
.wpl-hsearch__inner.wpl-wrap {
width: 100%;
}
.wpl-hsearch__top {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 12px 12px 16px;
border-bottom: 1px solid var(--wpl-line);
}
.wpl-hsearch__form {
flex: 1 1 auto;
min-width: 0;
}
.wpl-hsearch__field {
display: flex;
align-items: center;
gap: 12px;
height: 48px;
padding: 0 8px 0 16px;
border: 1px solid var(--wpl-field-line);
border-radius: var(--wpl-radius-field);
background: var(--wpl-bg);
transition: border-color var(--wpl-transition), box-shadow var(--wpl-transition);
}
.wpl-hsearch__field:focus-within {
border-color: var(--wpl-tyrkys);
box-shadow: 0 0 0 3px rgba(53, 140, 131, 0.18);
}
.wpl-hsearch__icon {
flex-shrink: 0;
color: var(--wpl-tyrkys-text);
}
.wpl-hsearch__input {
flex: 1 1 auto;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--wpl-text);
font-size: 1rem;
-webkit-appearance: none;
appearance: none;
}
.wpl-hsearch__input:focus-visible {
outline: none;
}
.wpl-hsearch__input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.wpl-hsearch__input::placeholder {
color: var(--wpl-text-muted);
opacity: 1;
}
.wpl-hsearch__go {
display: none;
}
.wpl-hsearch__close {
border-color: transparent;
}
.wpl-hsearch__results {
padding: 16px 20px 24px;
}
.wpl-hsearch__groups {
display: flex;
flex-direction: column;
gap: 20px;
}
.wpl-hsearch__groups:empty,
.wpl-hsearch__all-link:empty,
.wpl-hsearch__keys {
display: none;
}
.wpl-hsearch__results.is-loading .wpl-hsearch__groups {
opacity: 0.6;
}
.wpl-hsearch__group {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.wpl-hsearch__gh,
.wpl-hsearch__popular-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 0 4px;
color: var(--wpl-text-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.wpl-hsearch__gh {
padding-bottom: 8px;
border-bottom: 1px solid var(--wpl-line);
}
.wpl-hsearch__all {
margin: -4px -8px;
padding: 4px 8px;
border-radius: 6px;
color: var(--wpl-navy);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-underline-offset: 4px;
}
.wpl-hsearch__all.is-active {
background: var(--wpl-bg-soft);
box-shadow: inset 0 0 0 2px var(--wpl-tyrkys);
}
.wpl-hsearch__opt {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
margin: 0 -12px;
padding: 10px 12px;
border-radius: 10px;
color: var(--wpl-text);
font-size: 0.9375rem;
line-height: 1.4;
text-decoration: none;
}
.wpl-hsearch__opt:hover,
.wpl-hsearch__opt.is-active {
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
}
.wpl-hsearch__opt.is-active {
box-shadow: inset 0 0 0 2px var(--wpl-tyrkys);
}
.wpl-hsearch__opt mark {
background: transparent;
color: var(--wpl-navy);
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys-pale);
text-decoration-thickness: 3px;
text-underline-offset: 3px;
}
.wpl-hsearch__ico {
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-tyrkys-text);
}
.wpl-hsearch__ico svg {
width: 16px;
height: 16px;
}
.wpl-hsearch__t {
min-width: 0;
}
.wpl-hsearch__m {
margin-left: auto;
padding-left: 8px;
color: var(--wpl-text-muted);
font-size: 0.8125rem;
white-space: nowrap;
}
.wpl-hsearch__empty {
display: flex;
flex-direction: column;
gap: 12px;
}
.wpl-hsearch__empty-title {
margin: 0;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.3;
}
.wpl-hsearch__popular {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.wpl-hsearch__chip {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--wpl-line-strong);
border-radius: var(--wpl-radius-pill);
background: var(--wpl-bg);
color: var(--wpl-navy);
font: inherit;
font-size: var(--wpl-fs-small);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: border-color var(--wpl-transition);
}
.wpl-hsearch__chip:hover {
border-color: var(--wpl-navy);
color: var(--wpl-navy);
}
.wpl-hsearch__empty-help {
margin: 0;
color: var(--wpl-text-muted);
font-size: 0.9375rem;
}
.wpl-hsearch__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--wpl-line);
}
.wpl-hsearch__keys {
align-items: center;
gap: 8px;
margin: 0;
color: var(--wpl-text-muted);
font-size: 0.8125rem;
}
.wpl-hsearch__keys kbd {
min-width: 28px;
padding: 1px 8px;
border: 1px solid #C9D3DA;
border-bottom-width: 3px;
border-radius: 7px;
background: var(--wpl-bg);
color: var(--wpl-navy);
font-family: var(--wpl-font-mono);
font-size: 0.8em;
font-weight: 600;
text-align: center;
}
@media (hover: hover) and (pointer: fine) {
.wpl-hsearch__keys {
display: flex;
}
}
@media (min-width: 768px) {
.wpl-hsearch__panel {
top: var(--wpl-hsearch-top, 124px);
bottom: auto;
max-height: calc(100vh - var(--wpl-hsearch-top, 124px) - 24px);
border-radius: 0 0 var(--wpl-radius-panel-lg) var(--wpl-radius-panel-lg);
box-shadow: 0 24px 64px rgba(8, 42, 66, 0.20);
}
.wpl-hsearch__inner.wpl-wrap {
width: min(100% - 2 * var(--wpl-gutter), var(--wpl-wrap));
padding: 28px 0 32px;
}
.wpl-hsearch__top {
gap: 16px;
padding: 0;
border-bottom: 0;
}
.wpl-hsearch__field {
height: 64px;
border-radius: 16px;
}
.wpl-hsearch__input {
font-size: 1.1875rem;
}
.wpl-hsearch__go {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 22px;
border: 0;
border-radius: 9px;
background: var(--wpl-navy);
color: #FFFFFF;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: background-color var(--wpl-transition);
}
.wpl-hsearch__go:hover {
background: var(--wpl-navy-hover);
}
.wpl-hsearch__close {
width: 52px;
height: 52px;
border-color: var(--wpl-line-strong);
}
.wpl-hsearch__results {
padding: 28px 0 0;
}
.wpl-hsearch__groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 32px;
}
}
@media (min-width: 1200px) {
.wpl-hsearch__groups {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.wpl-drawer {
inset: var(--wpl-adminbar, 0px) 0 0;
z-index: var(--wpl-z-drawer);
}
.wpl-drawer__backdrop {
background: rgba(8, 42, 66, 0.45);
}
.wpl-drawer__panel {
position: absolute;
inset: 0 0 0 auto;
display: flex;
flex-direction: column;
width: 100%;
max-width: 480px;
background: var(--wpl-bg);
color: var(--wpl-text);
transform: translateX(100%);
transition: transform 0.3s ease;
}
.wpl-drawer.is-open .wpl-drawer__panel {
transform: none;
}
.wpl-drawer__head {
display: flex;
flex-shrink: 0;
align-items: center;
height: 64px;
padding: 0 12px 0 20px;
border-bottom: 1px solid var(--wpl-line);
}
.wpl-drawer__logo {
flex-grow: 1;
}
.wpl-drawer__body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
}
.wpl-drawer__acute {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 20px 4px;
padding: 14px 16px;
border-radius: var(--wpl-radius-card);
background: var(--wpl-navy);
text-decoration: none;
}
.wpl-drawer__acute,
.wpl-drawer__acute:hover {
color: #FFFFFF;
}
.wpl-drawer__acute:hover {
background: var(--wpl-navy-hover);
}
.wpl-drawer__acute-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.10);
color: #9FE3DA;
}
.wpl-drawer__acute-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.wpl-drawer__acute-label {
color: #B7C8D6;
font-size: 0.8125rem;
}
.wpl-drawer__acute-phone {
font-family: var(--wpl-font-heading);
font-size: 1.125rem;
font-weight: 800;
line-height: 1.2;
}
.wpl-mnav,
.wpl-mnav__links {
margin: 0;
padding: 0;
list-style: none;
}
.wpl-mnav {
margin-top: 12px;
}
.wpl-mnav__item {
border-bottom: 1px solid var(--wpl-line);
}
.wpl-mnav__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 56px;
padding: 0 20px;
border: 0;
background: none;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.25;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.wpl-mnav__link:hover {
color: var(--wpl-navy);
}
.wpl-mnav__link:focus-visible {
outline-offset: -3px;
}
.wpl-mnav__item.is-current > .wpl-mnav__link {
box-shadow: inset 3px 0 0 var(--wpl-tyrkys);
}
.wpl-mnav__pm {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
transition: background-color var(--wpl-transition), color var(--wpl-transition);
}
.wpl-mnav__pm .wpl-mnav__minus,
.wpl-mnav__toggle[aria-expanded="true"] .wpl-mnav__pm .wpl-mnav__plus {
display: none;
}
.wpl-mnav__toggle[aria-expanded="true"] .wpl-mnav__pm .wpl-mnav__minus {
display: block;
}
.wpl-mnav__toggle[aria-expanded="true"] .wpl-mnav__pm {
background: var(--wpl-navy);
color: #FFFFFF;
}
.wpl-mnav__sub {
display: flex;
flex-direction: column;
gap: 14px;
padding: 0 20px 16px;
}
.wpl-mnav__label {
margin: 0;
color: var(--wpl-tyrkys-text);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.wpl-mnav__sublink {
display: flex;
align-items: center;
min-height: 44px;
color: var(--wpl-text);
font-size: 0.9375rem;
line-height: 1.35;
text-decoration: none;
}
.wpl-mnav__sublink[aria-current="page"] {
font-weight: 600;
}
.wpl-mnav__all {
align-self: flex-start;
padding-block: 12px;
font-size: 0.9375rem;
}
.wpl-drawer__foot {
display: flex;
flex-shrink: 0;
flex-direction: column;
gap: 14px;
padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--wpl-line);
}
.wpl-drawer__cta {
width: 100%;
}
.wpl-drawer__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.wpl-drawer__email {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--wpl-text);
font-size: 0.9375rem;
text-decoration: none;
}
@media (min-width: 1200px) {
.wpl-drawer {
display: none;
}
}
.wpl-footer {
padding: 56px 0 32px;
border-top: 1px solid var(--wpl-line);
background: var(--wpl-bg);
color: var(--wpl-text);
}
.wpl-footer__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 20px;
}
.wpl-footer__top,
.wpl-footer__bottom {
display: contents;
}
.wpl-footer__brand {
display: flex;
flex-direction: column;
grid-row: 1;
grid-column: 1 / -1;
gap: 10px;
}
.wpl-footer__logo {
align-self: flex-start;
}
.wpl-footer__desc {
margin: 0;
color: var(--wpl-text-muted);
font-size: 0.9375rem;
line-height: 1.6;
}
.wpl-footer__contact {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0;
font-size: 0.9375rem;
}
.wpl-footer__contact a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--wpl-text);
text-decoration: none;
}
.wpl-footer__phone {
font-weight: 600;
}
.wpl-footer__contact a:hover {
color: var(--wpl-navy);
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.wpl-footer__cols {
display: grid;
grid-row: 2;
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px 20px;
margin-top: 36px;
}
.wpl-footer__col {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.wpl-footer__title {
margin: 0 0 6px;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0;
}
.wpl-footer__links {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.wpl-footer__link {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--wpl-text);
font-size: 0.9375rem;
line-height: 1.4;
text-decoration: none;
}
.wpl-footer__link:hover,
.wpl-footer__link[aria-current="page"] {
color: var(--wpl-navy);
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.wpl-footer__social {
display: flex;
grid-row: 3;
grid-column: 1;
align-self: center;
gap: 10px;
margin: 36px 0 0;
padding: 0;
list-style: none;
}
.wpl-footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
transition: background-color var(--wpl-transition);
}
.wpl-footer__social-link:hover {
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-navy);
}
.wpl-footer__social-link svg {
width: 18px;
height: 18px;
}
.wpl-lang__list {
display: flex;
margin: 0;
padding: 3px;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-pill);
list-style: none;
}
.wpl-lang__link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 40px;
padding: 0 14px;
border-radius: var(--wpl-radius-pill);
color: var(--wpl-text);
font-size: 0.8125rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background-color var(--wpl-transition), color var(--wpl-transition);
}
.wpl-lang__link::before {
content: "";
position: absolute;
inset: -2px 0;
}
.wpl-lang__link:hover {
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
}
.wpl-lang__link.is-current {
background: var(--wpl-navy);
color: #FFFFFF;
}
.wpl-footer__lang {
grid-row: 3;
grid-column: 2;
align-self: center;
margin-top: 36px;
}
.wpl-footer__legal {
grid-row: 4;
grid-column: 1 / -1;
margin-top: 36px;
padding-top: 20px;
border-top: 1px solid var(--wpl-line);
}
.wpl-footer__legal-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.wpl-footer__legal a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--wpl-text-muted);
font-size: 0.8125rem;
text-decoration: none;
}
.wpl-footer__legal a:hover,
.wpl-footer__legal a[aria-current="page"] {
color: var(--wpl-navy);
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.wpl-footer__copy {
grid-row: 5;
grid-column: 1 / -1;
margin: 8px 0 0;
color: var(--wpl-text-muted);
font-size: 0.8125rem;
}
.wpl-footer__copy:first-child {
margin-top: 36px;
padding-top: 20px;
border-top: 1px solid var(--wpl-line);
}
@media (min-width: 768px) {
.wpl-footer__cols {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.wpl-footer.wpl-footer--minimal {
padding: 28px 0;
}
.wpl-footer__row {
display: flex;
flex-direction: column;
gap: 4px;
color: var(--wpl-text-muted);
font-size: var(--wpl-fs-small);
}
.wpl-footer--minimal .wpl-footer__copy,
.wpl-footer--minimal .wpl-footer__legal {
margin: 0;
padding: 0;
border: 0;
}
.wpl-footer--minimal .wpl-footer__copy {
font-size: var(--wpl-fs-small);
}
.wpl-footer--minimal .wpl-footer__legal-list {
flex-direction: row;
flex-wrap: wrap;
column-gap: 24px;
}
.wpl-footer--minimal .wpl-footer__legal a {
font-size: var(--wpl-fs-small);
}
@media (min-width: 768px) {
.wpl-footer__row {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 24px;
}
}
@media (min-width: 1024px) {
.wpl-footer {
padding: 80px 0 40px;
}
.wpl-footer__inner {
display: block;
}
.wpl-footer__top {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 24px;
}
.wpl-footer__brand {
grid-row: 1;
grid-column: 1 / span 4;
gap: 16px;
}
.wpl-footer__logo {
font-size: 1.5625rem;
}
.wpl-footer__contact {
gap: 6px;
margin-top: 8px;
}
.wpl-footer__contact a {
display: inline;
min-height: 0;
padding-block: 3px;
margin-block: -3px;
}
.wpl-footer__link {
display: inline;
min-height: 0;
padding-block: 8px;
}
.wpl-footer__social {
grid-row: 2;
grid-column: 1 / span 4;
align-self: start;
margin-top: 24px;
}
.wpl-footer__social-link {
position: relative;
width: 40px;
height: 40px;
border-radius: 10px;
}
.wpl-footer__social-link::before {
content: "";
position: absolute;
inset: -2px;
}
.wpl-footer__cols {
grid-row: 1 / span 2;
grid-column: 6 / -1;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 24px;
align-self: start;
margin-top: 0;
}
.wpl-footer__col {
grid-column: span 2;
gap: 12px;
}
.wpl-footer__col:first-child {
grid-column: span 3;
}
.wpl-footer__title {
margin: 0;
}
.wpl-footer__links {
gap: 12px;
}
.wpl-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 24px;
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--wpl-line);
color: var(--wpl-text-muted);
font-size: var(--wpl-fs-small);
}
.wpl-footer__legal,
.wpl-footer__copy,
.wpl-footer__copy:first-child,
.wpl-footer__lang {
margin: 0;
padding: 0;
border: 0;
}
.wpl-footer__copy {
order: -1;
font-size: var(--wpl-fs-small);
}
.wpl-footer__legal-list {
flex-direction: row;
flex-wrap: wrap;
gap: 8px 24px;
}
.wpl-footer__legal a {
display: inline;
min-height: 0;
padding-block: 12px;
font-size: var(--wpl-fs-small);
}
.wpl-footer__lang .wpl-lang__link {
min-height: 28px;
padding: 0 12px;
}
.wpl-footer__lang .wpl-lang__link::before {
inset: -8px 0;
}
}
.wpl-icon {
display: inline-block;
flex-shrink: 0;
vertical-align: middle;
}
.wpl-icon-box,
.wpl-check-mark,
.wpl-avatar,
.wpl-card-post__icon,
.wpl-card-post__go,
.wpl-row-service__go,
.wpl-service-box__icon,
.wpl-faq__icon,
.wpl-cta-band__portrait,
.wpl-acute-band__icon,
.wpl-steps__num,
.wpl-quote__initials,
.wpl-quote__photo {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.wpl-card-post__go,
.wpl-row-service__go {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
transition: background-color var(--wpl-transition), color var(--wpl-transition), transform var(--wpl-transition);
}
.wpl-card-post--row:hover .wpl-card-post__go,
.wpl-row-service:hover .wpl-row-service__go {
background: var(--wpl-navy);
color: #fff;
transform: translateX(4px);
}
.wpl-page-head__title,
.wpl-card-post__title,
.wpl-row-service__title,
.wpl-card-service__title,
.wpl-service-box__title,
.wpl-author-box__name,
.wpl-steps__title,
.wpl-acute-band__title,
.wpl-link-list__title,
.wpl-cta-band__title,
.wpl-hero__display,
.wpl-hero__title {
margin: 0;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-weight: 700;
line-height: 1.3;
overflow-wrap: break-word;
}
.wpl-card-post__excerpt,
.wpl-row-service__text,
.wpl-card-service__text,
.wpl-author-box__bio,
.wpl-steps__text,
.wpl-acute-band__text {
margin: 0;
color: var(--wpl-text-muted);
font-size: 0.9375rem;
line-height: 1.55;
}
.wpl-label,
.wpl-tag-label,
.wpl-service-box__eyebrow,
.wpl-author-box__label,
.wpl-cta-band__label,
.wpl-toc__title {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.wpl-card-post:hover .wpl-card-post__link,
.wpl-card-post__link:focus-visible,
.wpl-row-service:hover .wpl-row-service__title,
.wpl-faq__q:hover .wpl-faq__q-text,
.wpl-link-list__link:hover .wpl-link-list__label {
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.wpl-card-post,
.wpl-card-service {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-card);
background: var(--wpl-bg);
transition: transform var(--wpl-transition), border-color var(--wpl-transition), box-shadow var(--wpl-transition);
}
.wpl-card-post:hover,
.wpl-card-service:hover {
transform: translateY(-4px);
border-color: var(--wpl-navy);
box-shadow: 0 0 0 1px var(--wpl-navy), 0 16px 32px rgba(8, 42, 66, 0.1);
}
.wpl-tags,
.wpl-cards,
.wpl-rows,
.wpl-breadcrumbs__list,
.wpl-pagination__list,
.wpl-chips__list,
.wpl-chips__menu,
.wpl-steps,
.wpl-check-grid,
.wpl-link-list__items,
.wpl-toc__list {
margin: 0;
padding: 0;
list-style: none;
}
.wpl-faq__q,
.wpl-toc__toggle,
summary.wpl-chip,
.wpl-chips__select-btn {
list-style: none;
cursor: pointer;
}
.wpl-faq__q::-webkit-details-marker,
.wpl-toc__toggle::-webkit-details-marker,
summary.wpl-chip::-webkit-details-marker,
.wpl-chips__select-btn::-webkit-details-marker {
display: none;
}
.wpl-icon-box {
width: 44px;
height: 44px;
border-radius: var(--wpl-radius-field);
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-tyrkys-text);
}
.wpl-check-mark {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--wpl-tyrkys);
color: #fff;
}
.wpl-check-mark .wpl-icon {
width: 12px;
height: 12px;
}
.wpl-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--wpl-navy);
color: var(--wpl-tyrkys-pale);
font-family: var(--wpl-font-heading);
font-size: 1.3125rem;
font-weight: 800;
line-height: 1;
object-fit: cover;
}
.wpl-avatar--sm { width: 36px; height: 36px; font-size: 0.8125rem; }
.wpl-avatar--lg { width: 96px; height: 96px; font-size: 2rem; }
.wpl-badge {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 22px;
padding: 2px 10px;
border-radius: var(--wpl-radius-pill);
font-size: 0.75rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.02em;
white-space: nowrap;
}
.wpl-badge .wpl-icon { width: 12px; height: 12px; }
.wpl-badge--new { background: var(--wpl-tyrkys-text); color: #fff; }
.wpl-badge--free,
.wpl-badge--done { background: var(--wpl-tyrkys-tinta); color: var(--wpl-tyrkys-text); }
.wpl-badge--premium { background: var(--wpl-navy); color: var(--wpl-tyrkys-pale); }
.wpl-badge--sale { background: var(--wpl-warning-tint); color: var(--wpl-warning-text); }
.wpl-badge--line { background: var(--wpl-bg); color: var(--wpl-navy); box-shadow: inset 0 0 0 1px var(--wpl-line-strong); }
.wpl-tag-label {
display: inline-flex;
align-self: flex-start;
padding: 4px 9px;
border-radius: var(--wpl-radius-pill);
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-tyrkys-text);
font-size: 0.6875rem;
letter-spacing: 0.06em;
}
.wpl-label {
color: var(--wpl-tyrkys-text);
font-size: var(--wpl-fs-eyebrow);
}
.wpl-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wpl-tag {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--wpl-line-strong);
border-radius: var(--wpl-radius-pill);
color: var(--wpl-navy);
font-size: var(--wpl-fs-small);
font-weight: 600;
text-decoration: none;
transition: border-color var(--wpl-transition);
}
.wpl-tag:hover {
border-color: var(--wpl-navy);
color: var(--wpl-navy);
}
.wpl-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin: 0;
color: var(--wpl-text-muted);
font-size: 0.9375rem;
line-height: 1.5;
}
.wpl-meta strong {
color: var(--wpl-navy);
font-weight: 600;
}
.wpl-meta__dot,
.wpl-facts__dot {
flex-shrink: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--wpl-tyrkys);
}
.wpl-cards {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.wpl-rows {
border-top: 1px solid var(--wpl-line);
}
@media (min-width: 768px) {
.wpl-icon-box { width: 48px; height: 48px; }
.wpl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.wpl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpl-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpl-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
button.wpl-btn {
border: 0;
font-family: inherit;
}
.wpl-btn .wpl-icon {
width: 18px;
height: 18px;
}
.wpl-btn--lg {
min-height: 56px;
padding: 0 32px;
font-size: 1.0625rem;
}
.wpl-btn--full {
width: 100%;
white-space: normal;
}
.wpl-btn--outline {
background: transparent;
color: var(--wpl-navy);
box-shadow: inset 0 0 0 1.5px var(--wpl-navy);
}
.wpl-btn--outline:hover {
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
}
:is(.wpl-section--navy, .wpl-hero, .wpl-cta-band) .wpl-btn--outline {
color: #fff;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
:is(.wpl-section--navy, .wpl-hero, .wpl-cta-band) .wpl-btn--outline:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.wpl-btn:disabled,
.wpl-btn[aria-disabled="true"] {
background: var(--wpl-line-strong);
color: #fff;
box-shadow: none;
cursor: not-allowed;
}
.wpl-btn-tile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 50px;
padding: 0 20px;
border: 0;
border-radius: var(--wpl-radius-field);
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
font: 600 0.9375rem/1.3 var(--wpl-font-body);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background-color var(--wpl-transition), color var(--wpl-transition);
}
.wpl-btn-tile:hover {
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-navy);
}
.wpl-btn-tile--acute {
background: var(--wpl-navy);
color: #fff;
}
.wpl-btn-tile--acute:hover {
background: var(--wpl-navy-hover);
color: #fff;
}
.wpl-breadcrumbs {
font-size: var(--wpl-fs-small);
line-height: 1.5;
}
.wpl-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
color: var(--wpl-text-muted);
}
.wpl-breadcrumbs__item {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.wpl-breadcrumbs__sep {
color: var(--wpl-tyrkys);
}
.wpl-breadcrumbs__link {
color: var(--wpl-navy);
text-decoration: underline;
text-decoration-color: rgba(53, 140, 131, 0.55);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: text-decoration-color var(--wpl-transition);
}
.wpl-breadcrumbs__link:hover {
color: var(--wpl-navy);
text-decoration-color: var(--wpl-navy);
}
.wpl-breadcrumbs__current {
display: block;
max-width: 420px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wpl-breadcrumbs--dark .wpl-breadcrumbs__list { color: #B7C8D6; }
.wpl-breadcrumbs--dark .wpl-breadcrumbs__sep { color: var(--wpl-tyrkys-light); }
.wpl-breadcrumbs--dark .wpl-breadcrumbs__current { color: #fff; }
.wpl-breadcrumbs--dark .wpl-breadcrumbs__link {
color: #DCE6EE;
text-decoration-color: rgba(124, 207, 197, 0.6);
}
.wpl-breadcrumbs--dark .wpl-breadcrumbs__link:hover {
color: #fff;
text-decoration-color: #fff;
}
.wpl-breadcrumbs__back {
display: none;
}
@media (max-width: 767px) {
.wpl-breadcrumbs--has-back .wpl-breadcrumbs__list {
display: none;
}
.wpl-breadcrumbs--has-back .wpl-breadcrumbs__back {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
color: var(--wpl-navy);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
.wpl-breadcrumbs__back .wpl-icon { color: var(--wpl-tyrkys); }
.wpl-breadcrumbs--dark .wpl-breadcrumbs__back { color: #fff; text-decoration-color: var(--wpl-tyrkys-light); }
.wpl-breadcrumbs--dark .wpl-breadcrumbs__back .wpl-icon { color: var(--wpl-tyrkys-light); }
}
.wpl-page-head {
border-bottom: 1px solid var(--wpl-line);
background: var(--wpl-bg-soft);
}
.wpl-page-head__inner {
display: flex;
flex-direction: column;
gap: 18px;
padding-block: 20px 40px;
}
.wpl-page-head__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px 24px;
align-items: center;
}
.wpl-page-head__main {
display: flex;
flex-direction: column;
gap: 18px;
min-width: 0;
max-width: 880px;
}
.wpl-page-head__eyebrow {
margin: 0;
}
.wpl-page-head__title {
font-size: var(--wpl-fs-h1);
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.04em;
}
.wpl-page-head__text {
max-width: 820px;
margin: 0;
color: var(--wpl-text-muted);
font-size: clamp(1.0625rem, 0.992rem + 0.286vw, 1.25rem);
line-height: 1.55;
}
.wpl-page-head__text > * + * {
margin-top: 0.75em;
}
.wpl-page-head__after {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
}
@media (min-width: 768px) {
.wpl-page-head__inner {
gap: 24px;
padding-block: 36px 48px;
}
}
@media (min-width: 1024px) {
.wpl-page-head--has-aside .wpl-page-head__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wpl-page-head--has-aside .wpl-page-head__main { grid-column: 1 / span 7; }
.wpl-page-head--has-aside .wpl-page-head__aside { grid-column: 9 / span 4; }
}
.wpl-hero,
.wpl-cta-band,
.wpl-service-box--large {
--wpl-l-lead: #C3D2DE;
--wpl-l-muted: #B7C8D6;
--wpl-l-rule: rgba(255, 255, 255, 0.14);
background: var(--wpl-navy);
color: #fff;
}
.wpl-hero {
position: relative;
overflow: hidden;
isolation: isolate;
}
.wpl-hero__bg {
position: absolute;
inset: 0;
z-index: -1;
background-image:
radial-gradient(circle 300px at 50% 85%, rgba(53, 140, 131, 0.4), rgba(53, 140, 131, 0) 70%),
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-position: 0 0, -4px -4px, -4px -4px;
background-size: auto, 48px 48px, 48px 48px;
}
.wpl-hero__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px 24px;
align-items: center;
padding-block: 24px 48px;
}
.wpl-hero__main {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}
.wpl-hero__eyebrow {
margin: 0;
color: var(--wpl-tyrkys-light);
}
.wpl-hero--hero .wpl-hero__title {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--wpl-tyrkys-pale);
font-size: var(--wpl-fs-h1-hero);
line-height: 1.4;
}
.wpl-hero--hero .wpl-hero__title::before {
content: "";
flex-shrink: 0;
width: 9px;
height: 9px;
margin-top: 0.45em;
border-radius: 3px;
background: var(--wpl-tyrkys-light);
}
.wpl-hero__display,
.wpl-hero--large .wpl-hero__title {
color: #fff;
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.045em;
text-wrap: balance;
}
.wpl-hero__display {
font-size: clamp(2.5rem, 1.85rem + 2.667vw, 4.25rem);
}
.wpl-hero--display-xl .wpl-hero__display {
font-size: var(--wpl-fs-display);
line-height: 0.98;
letter-spacing: -0.05em;
}
.wpl-hero--large .wpl-hero__title {
font-size: var(--wpl-fs-h1);
letter-spacing: -0.04em;
}
.wpl-hero__lead {
max-width: 620px;
margin: 0;
color: var(--wpl-l-lead);
font-size: clamp(1.0625rem, 0.992rem + 0.286vw, 1.25rem);
line-height: 1.55;
}
.wpl-hero__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px 28px;
margin-top: 4px;
}
.wpl-hero__actions > .wpl-btn {
width: 100%;
}
.wpl-hero .wpl-link {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #fff;
font-size: 1.0625rem;
text-decoration-color: var(--wpl-tyrkys-light);
}
.wpl-hero .wpl-link:hover {
color: #fff;
text-decoration-color: #fff;
}
.wpl-hero .wpl-link__arrow {
margin-left: 0.3em;
color: var(--wpl-tyrkys-light);
}
.wpl-hero__facts,
.wpl-hero__stats {
margin-top: 8px;
padding-top: 18px;
border-top: 1px solid var(--wpl-l-rule);
}
.wpl-facts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin: 0;
color: var(--wpl-l-muted, #B7C8D6);
font-size: var(--wpl-fs-small);
line-height: 1.5;
}
.wpl-facts strong {
color: #fff;
font-weight: 600;
}
.wpl-hero__stats {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px 24px;
max-width: 560px;
margin-bottom: 0;
}
.wpl-hero__stat {
display: flex;
flex-direction: column-reverse;
gap: 4px;
}
.wpl-hero__stat-value {
margin: 0;
color: #fff;
font: 800 clamp(1.5rem, 1.129rem + 1.524vw, 2.125rem)/1 var(--wpl-font-heading);
letter-spacing: -0.03em;
}
.wpl-hero__stat-label {
color: var(--wpl-l-muted);
font-size: var(--wpl-fs-small);
}
.wpl-hero__aside {
min-width: 0;
}
.wpl-hero-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: 24px;
border-radius: var(--wpl-radius-panel);
background: var(--wpl-bg);
color: var(--wpl-text);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
.wpl-hero-frame {
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--wpl-radius-panel);
background: rgba(255, 255, 255, 0.06);
}
@media (min-width: 768px) {
.wpl-hero__main { gap: 24px; }
.wpl-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
.wpl-hero__actions > .wpl-btn { width: auto; }
.wpl-facts { font-size: 0.9375rem; }
.wpl-hero-card { padding: 32px; }
.wpl-hero-frame { padding: 14px; border-radius: var(--wpl-radius-panel-lg); }
}
@media (min-width: 1024px) {
.wpl-hero__bg {
background-image:
radial-gradient(circle 520px at 72% 35%, rgba(53, 140, 131, 0.42), rgba(53, 140, 131, 0) 70%),
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-position: 0 0, -12px -12px, -12px -12px;
background-size: auto, 72px 72px, 72px 72px;
}
.wpl-hero__inner { padding-block: 56px 88px; }
.wpl-hero--has-aside .wpl-hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wpl-hero--has-aside .wpl-hero__main { grid-column: 1 / span 7; }
.wpl-hero--has-aside .wpl-hero__aside { grid-column: 8 / span 5; }
.wpl-hero--hero .wpl-hero__title { gap: 12px; margin-top: 12px; }
.wpl-hero--hero .wpl-hero__title::before { width: 10px; height: 10px; }
.wpl-hero__facts { margin-top: 12px; padding-top: 20px; }
}
.wpl-section-head {
display: flex;
flex-direction: column;
gap: 16px 40px;
margin-bottom: clamp(2rem, 1.443rem + 2.286vw, 3.5rem);
}
.wpl-section-head__main {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
max-width: 820px;
}
.wpl-section-head__eyebrow,
.wpl-section-head__title {
margin: 0;
}
.wpl-section-head__text {
margin: 4px 0 0;
}
.wpl-section-head--center {
align-items: center;
text-align: center;
}
.wpl-section-head--center .wpl-section-head__main {
align-items: center;
margin-inline: auto;
}
.wpl-section-head__link {
display: flex;
flex-shrink: 0;
}
.wpl-section-head__link .wpl-link {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-block: -8px;
}
@media (min-width: 768px) {
.wpl-section-head__main { gap: 16px; }
.wpl-section-head--has-link:not(.wpl-section-head--center) {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
.wpl-section-head__link { padding-bottom: 6px; }
}
.wpl-card-post {
padding: 8px;
}
.wpl-card-post__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: 10px;
background: linear-gradient(135deg, var(--wpl-navy-2) 0%, var(--wpl-navy) 100%);
}
.wpl-card-post__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wpl-card-post__media--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--wpl-tyrkys-tinta);
background-image:
linear-gradient(rgba(53, 140, 131, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(53, 140, 131, 0.1) 1px, transparent 1px);
background-size: 24px 24px;
color: var(--wpl-tyrkys-text);
}
.wpl-card-post__icon {
width: 72px;
height: 72px;
border-radius: 20px;
background: var(--wpl-bg);
box-shadow: 0 8px 24px rgba(8, 42, 66, 0.08);
}
.wpl-card-post__body {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 10px;
padding: 18px 16px;
}
.wpl-card-post__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
}
.wpl-card-post__title {
font-size: 1.1875rem;
}
.wpl-card-post__link {
color: inherit;
text-decoration: none;
}
.wpl-card-post__link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.wpl-card-post__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin: auto 0 0;
color: var(--wpl-text-muted);
font-size: 0.8125rem;
line-height: 1.5;
}
.wpl-card-post__meta .wpl-meta__dot {
width: 3px;
height: 3px;
background: currentColor;
opacity: 0.55;
}
.wpl-card-post__author {
display: inline-flex;
align-items: center;
gap: 10px;
}
.wpl-card-post__author strong {
color: var(--wpl-navy);
font-weight: 600;
}
.wpl-card-post--row {
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
gap: 16px;
align-items: center;
height: auto;
padding: 20px 0;
border: 0;
border-bottom: 1px solid var(--wpl-line);
border-radius: 0;
background: transparent;
}
.wpl-card-post--row:hover {
transform: none;
border-color: var(--wpl-line);
box-shadow: none;
}
.wpl-card-post--row .wpl-card-post__body {
gap: 6px;
padding: 0;
}
.wpl-card-post--row .wpl-card-post__title {
font-size: 1.125rem;
line-height: 1.35;
}
.wpl-card-post--row .wpl-card-post__meta {
gap: 6px 12px;
margin-top: 0;
}
.wpl-card-post--featured .wpl-card-post__title {
font-size: clamp(1.5rem, 1.071rem + 1.762vw, 2.5rem);
line-height: 1.12;
letter-spacing: -0.03em;
}
.wpl-card-post--featured .wpl-card-post__excerpt {
font-size: 1rem;
}
@media (min-width: 768px) {
.wpl-card-post__body { padding: 20px 22px 22px; }
.wpl-card-post__title { font-size: 1.25rem; }
.wpl-card-post--row { gap: 24px; padding: 22px 0; }
.wpl-card-post--row .wpl-card-post__body { padding: 0; }
.wpl-card-post--row .wpl-card-post__title { font-size: 1.1875rem; }
}
@media (min-width: 1024px) {
.wpl-card-post--featured {
display: grid;
grid-template-columns: 7fr 5fr;
padding: 10px;
}
.wpl-card-post--featured .wpl-card-post__media {
height: 100%;
min-height: 420px;
aspect-ratio: auto;
}
.wpl-card-post--featured .wpl-card-post__body {
justify-content: center;
gap: 16px;
padding: 32px 40px;
}
.wpl-card-post--featured .wpl-card-post__excerpt { font-size: 1.0625rem; }
.wpl-card-post--featured .wpl-card-post__meta { margin-top: 0; font-size: var(--wpl-fs-small); }
}
.wpl-row-service {
display: grid;
grid-template-areas: "main go" "price go";
grid-template-columns: minmax(0, 1fr) 44px;
gap: 8px 16px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--wpl-line);
color: var(--wpl-text);
text-decoration: none;
}
.wpl-row-service:hover {
color: var(--wpl-text);
}
.wpl-row-service__main {
grid-area: main;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.wpl-row-service__title {
font-size: 1.125rem;
}
.wpl-row-service__text {
line-height: 1.5;
}
.wpl-row-service__price {
grid-area: price;
color: var(--wpl-navy);
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
}
.wpl-row-service__price:empty {
display: none;
}
.wpl-row-service__price.is-ask {
color: var(--wpl-text-muted);
font-weight: 500;
}
.wpl-row-service__go {
grid-area: go;
}
.wpl-card-service {
gap: 12px;
padding: 24px;
color: var(--wpl-text);
text-decoration: none;
}
.wpl-card-service:hover {
color: var(--wpl-text);
}
.wpl-card-service__title {
font-size: 1.25rem;
}
.wpl-card-service__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--wpl-line);
color: var(--wpl-navy);
font-size: 0.9375rem;
font-weight: 600;
}
.wpl-card-service__arrow {
display: inline-flex;
color: var(--wpl-tyrkys);
transition: transform var(--wpl-transition);
}
.wpl-card-service:hover .wpl-card-service__arrow {
transform: translateX(4px);
}
@media (min-width: 768px) {
.wpl-row-service {
grid-template-areas: "main price go";
grid-template-columns: minmax(0, 1fr) auto 44px;
gap: 24px;
}
.wpl-row-service__title { font-size: 1.1875rem; }
.wpl-row-service__price { text-align: right; }
.wpl-row-service__price:empty { display: block; }
.wpl-card-service { padding: 28px; }
.wpl-card-service__title { font-size: 1.3125rem; }
}
.wpl-service-box {
position: relative;
}
.wpl-service-box__eyebrow {
color: var(--wpl-tyrkys-text);
}
.wpl-service-box__title {
font-size: 1.25rem;
}
.wpl-service-box__text {
margin: 0;
color: var(--wpl-text);
font-size: 0.9375rem;
line-height: 1.55;
}
.wpl-service-box__price {
margin: 4px 0 0;
color: var(--wpl-tyrkys-text);
font-size: var(--wpl-fs-small);
font-weight: 600;
}
.wpl-service-box__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.wpl-service-box__actions .wpl-btn {
width: 100%;
white-space: normal;
}
.wpl-service-box__main {
display: flex;
flex-direction: column;
gap: 6px;
}
.wpl-service-box--inline {
padding: 22px 20px;
border-radius: 16px;
background: var(--wpl-tyrkys-tinta);
}
.wpl-service-box--inline .wpl-service-box__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px 32px;
align-items: center;
}
.wpl-service-box--large {
overflow: hidden;
padding: 28px 22px;
border-radius: var(--wpl-radius-panel);
}
.wpl-service-box__bg {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle 300px at calc(100% - 90px) 50px, rgba(53, 140, 131, 0.45), rgba(53, 140, 131, 0) 70%),
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: auto, 48px 48px, 48px 48px;
}
.wpl-service-box--large .wpl-service-box__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px 40px;
align-items: end;
}
.wpl-service-box--large .wpl-service-box__main { gap: 12px; }
.wpl-service-box--large .wpl-service-box__eyebrow { color: var(--wpl-tyrkys-light); }
.wpl-service-box--large .wpl-service-box__text { color: var(--wpl-l-lead); font-size: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem); }
.wpl-service-box--large .wpl-service-box__price { color: var(--wpl-tyrkys-pale); font-size: 0.9375rem; }
.wpl-service-box--large .wpl-service-box__title {
color: #fff;
font-size: clamp(1.5rem, 1.314rem + 0.762vw, 2rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.025em;
}
.wpl-service-box__secondary {
display: inline-flex;
align-self: center;
align-items: center;
min-height: 44px;
color: var(--wpl-navy);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
.wpl-service-box__secondary:hover {
color: var(--wpl-navy);
text-decoration-color: var(--wpl-navy);
}
.wpl-service-box--large .wpl-service-box__secondary {
color: #fff;
text-decoration-color: var(--wpl-tyrkys-light);
}
.wpl-service-box--large .wpl-service-box__secondary:hover {
color: #fff;
text-decoration-color: #fff;
}
.wpl-service-box__icon {
width: 56px;
height: 56px;
border-radius: var(--wpl-radius-card);
background: var(--wpl-bg);
color: var(--wpl-tyrkys-text);
}
.wpl-service-box--large .wpl-service-box__icon {
background: rgba(255, 255, 255, 0.08);
color: var(--wpl-tyrkys-pale);
}
@media (min-width: 768px) {
.wpl-service-box--inline { padding: 24px 28px; }
.wpl-service-box--inline .wpl-service-box__inner,
.wpl-service-box--large .wpl-service-box__inner { grid-template-columns: minmax(0, 1fr) auto; }
.wpl-service-box--inline.wpl-service-box--has-icon .wpl-service-box__inner,
.wpl-service-box--large.wpl-service-box--has-icon .wpl-service-box__inner { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; }
.wpl-service-box__actions { align-items: flex-start; }
.wpl-service-box__actions .wpl-btn { width: auto; white-space: nowrap; }
.wpl-service-box__secondary { align-self: flex-start; }
.wpl-service-box--large { padding: 40px; }
.wpl-service-box--large .wpl-service-box__actions { align-items: flex-end; }
.wpl-service-box--large .wpl-service-box__secondary { align-self: flex-end; }
}
.wpl-author-box {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
border: 1px solid var(--wpl-line);
border-radius: 16px;
background: var(--wpl-bg);
}
.wpl-author-box .wpl-avatar--md {
width: 56px;
height: 56px;
font-size: 1.125rem;
}
.wpl-author-box__body {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 8px;
min-width: 0;
}
.wpl-author-box__label {
color: var(--wpl-text-muted);
letter-spacing: 0.1em;
}
.wpl-author-box__name {
font-size: 1.1875rem;
}
.wpl-author-box__bio {
line-height: 1.6;
}
.wpl-author-box__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 20px;
margin: 6px 0 0;
color: var(--wpl-text-muted);
font-size: var(--wpl-fs-small);
}
.wpl-author-box__foot .wpl-link {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 0.9375rem;
}
.wpl-author-box--large .wpl-author-box__name { font-size: clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem); }
.wpl-author-box--large .wpl-author-box__bio { font-size: 1rem; }
@media (min-width: 768px) {
.wpl-author-box { gap: 24px; padding: 28px; }
.wpl-author-box .wpl-avatar--md { width: 64px; height: 64px; font-size: 1.3125rem; }
.wpl-author-box--large { padding: 32px; }
}
.wpl-pagination {
display: flex;
justify-content: center;
}
.wpl-pagination__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
}
.wpl-pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
height: 44px;
padding: 0 6px;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-field);
background: var(--wpl-bg);
color: var(--wpl-navy);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: border-color var(--wpl-transition), background-color var(--wpl-transition);
}
a.wpl-pagination__link:hover {
border-color: var(--wpl-navy);
color: var(--wpl-navy);
}
.wpl-pagination__link.is-current {
border-color: var(--wpl-navy);
background: var(--wpl-navy);
color: #fff;
}
.wpl-pagination__link--nav {
padding: 0 16px;
}
.wpl-pagination__link.is-disabled {
opacity: 0.4;
cursor: default;
}
.wpl-pagination__dots {
display: inline-flex;
justify-content: center;
min-width: 28px;
color: var(--wpl-text-muted);
}
.wpl-pagination__compact {
display: none;
}
.wpl-pagination__status {
color: var(--wpl-text-muted);
font-size: 0.9375rem;
}
.wpl-pagination__status strong {
color: var(--wpl-navy);
}
@media (max-width: 767px) {
.wpl-pagination--compact .wpl-pagination__list {
display: none;
}
.wpl-pagination--compact .wpl-pagination__compact {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
}
}
.wpl-faq {
border-top: 1px solid var(--wpl-line-strong);
}
.wpl-faq__item {
border-bottom: 1px solid var(--wpl-line-strong);
}
.wpl-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
color: var(--wpl-navy);
font: 700 clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem)/1.35 var(--wpl-font-heading);
}
.wpl-faq__q-text {
margin: 0;
color: inherit;
font: inherit;
}
.wpl-faq__icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
transition: transform 0.25s ease, background-color var(--wpl-transition), color var(--wpl-transition);
}
.wpl-section--soft .wpl-faq__icon {
background: var(--wpl-bg);
}
.wpl-faq__item[open] .wpl-faq__icon {
transform: rotate(180deg);
background: var(--wpl-navy);
color: #fff;
}
.wpl-faq__a {
padding: 0 0 20px;
color: var(--wpl-text-muted);
font-size: 0.9375rem;
line-height: 1.6;
}
.wpl-faq__a > * {
margin: 0;
}
.wpl-faq__a > * + * {
margin-top: 0.75em;
}
.wpl-faq__a a {
color: var(--wpl-navy);
font-weight: 600;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.wpl-faq__a :is(ul, ol) {
padding-left: 1.25em;
}
@media (min-width: 768px) {
.wpl-faq__q { gap: 24px; padding: 24px 0; }
.wpl-faq__a { padding: 0 64px 24px 0; font-size: 1rem; }
}
.wpl-cta-band {
padding-block: var(--wpl-section-y);
}
.wpl-cta-band__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 40px 24px;
align-items: end;
}
.wpl-cta-band--form .wpl-cta-band__inner {
align-items: start;
}
.wpl-cta-band__main {
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
.wpl-cta-band__title {
color: #fff;
font-size: clamp(2rem, 1.529rem + 1.905vw, 3.25rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.035em;
text-wrap: balance;
}
.wpl-cta-band__text {
margin: 0;
color: var(--wpl-l-lead);
font-size: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
line-height: 1.5;
}
.wpl-cta-band__actions .wpl-btn {
width: 100%;
}
.wpl-cta-band__contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.wpl-cta-band__label {
color: var(--wpl-tyrkys-light);
font-size: var(--wpl-fs-eyebrow);
}
.wpl-cta-band__phone,
.wpl-cta-band__email {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #fff;
font-size: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys-light);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
overflow-wrap: anywhere;
transition: text-decoration-color var(--wpl-transition);
}
.wpl-cta-band__email {
margin-block: -7px;
}
.wpl-cta-band__phone {
font-family: var(--wpl-font-heading);
font-size: clamp(1.625rem, 1.393rem + 0.952vw, 2.125rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.wpl-cta-band__phone:hover,
.wpl-cta-band__email:hover {
color: #fff;
text-decoration-color: #fff;
}
.wpl-cta-band__person {
display: flex;
align-items: center;
align-self: stretch;
gap: 14px;
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wpl-cta-band__person p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.45;
}
.wpl-cta-band__portrait {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--wpl-navy-2);
box-shadow: 0 0 0 3px var(--wpl-tyrkys);
color: var(--wpl-tyrkys-pale);
}
.wpl-cta-band__person-label,
.wpl-cta-band__person-role {
color: var(--wpl-l-muted);
}
.wpl-cta-band__person-name {
color: #fff;
font-family: var(--wpl-font-heading);
font-size: 1.0625rem;
}
.wpl-cta-band__form {
padding: 22px;
border-radius: var(--wpl-radius-panel);
background: var(--wpl-bg);
color: var(--wpl-text);
}
@media (min-width: 768px) {
.wpl-cta-band__main { gap: 32px; }
.wpl-cta-band--form .wpl-cta-band__main { gap: 24px; }
.wpl-cta-band__actions .wpl-btn { width: auto; }
.wpl-cta-band__form { padding: 40px; }
}
@media (min-width: 1024px) {
.wpl-cta-band__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wpl-cta-band__main { grid-column: 1 / span 7; }
.wpl-cta-band__side { grid-column: 9 / span 4; }
.wpl-cta-band--form .wpl-cta-band__main { grid-column: 1 / span 5; }
.wpl-cta-band--form .wpl-cta-band__side { grid-column: 7 / span 6; }
}
.wpl-acute-band {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 22px;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-card);
background: var(--wpl-bg);
}
.wpl-acute-band__icon {
width: 44px;
height: 44px;
border-radius: var(--wpl-radius-field);
background: var(--wpl-navy);
color: #fff;
}
.wpl-acute-band__body {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 4px;
min-width: 0;
}
.wpl-acute-band__title {
font-size: var(--wpl-fs-h4);
line-height: 1.35;
}
.wpl-acute-band__action {
flex-shrink: 0;
align-self: stretch;
margin-top: 4px;
}
.wpl-acute-band__action .wpl-btn {
width: 100%;
}
.wpl-acute-band__action .wpl-link {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-block: -8px;
}
.wpl-acute-band--tint {
border-color: transparent;
background: var(--wpl-tyrkys-tinta);
}
.wpl-acute-band--tint .wpl-acute-band__icon {
background: var(--wpl-bg);
color: var(--wpl-tyrkys-text);
}
.wpl-acute-band--tint .wpl-acute-band__text {
color: var(--wpl-text);
}
@media (min-width: 768px) {
.wpl-acute-band { flex-direction: row; align-items: center; gap: 24px; padding: 28px 32px; }
.wpl-acute-band__icon { width: 48px; height: 48px; }
.wpl-acute-band__text { font-size: 1rem; }
.wpl-acute-band__action { align-self: auto; margin-top: 0; }
.wpl-acute-band__action .wpl-btn { width: auto; }
.wpl-acute-band__action .wpl-link { white-space: nowrap; }
}
.wpl-chips {
position: relative;
}
.wpl-chips__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.wpl-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--wpl-line-strong);
border-radius: var(--wpl-radius-pill);
background: var(--wpl-bg);
color: var(--wpl-navy);
font: 600 var(--wpl-fs-small)/1.2 var(--wpl-font-body);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: border-color var(--wpl-transition), background-color var(--wpl-transition), color var(--wpl-transition);
}
.wpl-chip:hover {
border-color: var(--wpl-navy);
color: var(--wpl-navy);
}
.wpl-chip.is-active {
border-color: var(--wpl-navy);
background: var(--wpl-navy);
color: #fff;
}
.wpl-chip__count {
color: var(--wpl-text-muted);
font-size: 0.75rem;
font-weight: 600;
}
.wpl-chip.is-active .wpl-chip__count {
color: var(--wpl-tyrkys-pale);
}
.wpl-chip__chevron {
transition: transform var(--wpl-transition);
}
details[open] > summary .wpl-chip__chevron {
transform: rotate(180deg);
}
.wpl-chips__menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: var(--wpl-z-menu);
display: flex;
flex-direction: column;
min-width: 240px;
max-width: 100%;
max-height: min(60vh, 420px);
padding: 6px;
overflow-y: auto;
border-radius: var(--wpl-radius-card);
background: var(--wpl-bg);
box-shadow: 0 16px 40px rgba(8, 42, 66, 0.16), 0 0 0 1px rgba(8, 42, 66, 0.08);
}
.wpl-chips__option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 44px;
padding: 0 12px;
border-radius: 10px;
color: var(--wpl-text);
font-size: 0.9375rem;
text-decoration: none;
}
.wpl-chips__option:hover {
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
}
.wpl-chips__option.is-active {
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-navy);
font-weight: 700;
}
.wpl-chips__option .wpl-chip__count {
margin-left: auto;
}
.wpl-chips__check {
display: inline-flex;
color: transparent;
}
.wpl-chips__option.is-active .wpl-chips__check {
color: var(--wpl-tyrkys-text);
}
.wpl-chips__select {
display: none;
position: relative;
}
.wpl-chips__select-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 0 16px;
border: 1.5px solid var(--wpl-line-strong);
border-radius: var(--wpl-radius-field);
background: var(--wpl-bg);
color: var(--wpl-text);
}
.wpl-chips__select[open] .wpl-chips__select-btn {
border-color: var(--wpl-navy);
box-shadow: 0 0 0 1px var(--wpl-navy);
}
.wpl-chips__select-label {
color: var(--wpl-text-muted);
}
.wpl-chips__select-btn strong {
color: var(--wpl-navy);
}
.wpl-chips__menu--select {
left: 0;
min-width: 0;
}
@media (max-width: 767px) {
.wpl-chips--has-select .wpl-chips__list { display: none; }
.wpl-chips--has-select .wpl-chips__select { display: block; }
.wpl-chips--scroll .wpl-chips__list {
flex-wrap: nowrap;
margin-inline: calc(-1 * var(--wpl-gutter));
margin-block: -6px -2px;
padding: 6px var(--wpl-gutter);
overflow-x: auto;
scrollbar-width: none;
}
.wpl-chips--scroll .wpl-chips__list::-webkit-scrollbar { display: none; }
}
.wpl-steps {
--wpl-steps-bg: var(--wpl-bg);
position: relative;
display: grid;
}
.wpl-section--soft .wpl-steps {
--wpl-steps-bg: var(--wpl-bg-soft);
}
.wpl-steps__item {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 16px;
padding-bottom: 24px;
}
.wpl-steps__item:last-child {
padding-bottom: 0;
}
.wpl-steps__item:not(:last-child)::before {
content: "";
position: absolute;
top: 44px;
bottom: 0;
left: 21px;
width: 2px;
background: repeating-linear-gradient(180deg, var(--wpl-tyrkys-pale) 0 6px, transparent 6px 12px);
}
.wpl-steps__num {
position: relative;
z-index: 1;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--wpl-navy);
color: #fff;
font: 800 1.1875rem/1 var(--wpl-font-heading);
}
.wpl-steps__item:last-child .wpl-steps__num {
background: var(--wpl-tyrkys);
}
.wpl-steps__body {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 9px;
}
.wpl-steps__title {
font-size: 1.125rem;
}
@media (min-width: 1024px) {
.wpl-steps {
grid-template-columns: repeat(var(--wpl-steps, 4), minmax(0, 1fr));
gap: 24px;
}
.wpl-steps::before {
content: "";
position: absolute;
top: 27px;
left: 28px;
right: calc((100% - (var(--wpl-steps, 4) - 1) * 24px) / var(--wpl-steps, 4) - 28px);
height: 2px;
background: repeating-linear-gradient(90deg, var(--wpl-tyrkys-pale) 0 8px, transparent 8px 16px);
}
.wpl-steps__item { display: flex; flex-direction: column; gap: 12px; padding: 0; }
.wpl-steps__item:not(:last-child)::before { display: none; }
.wpl-steps__num { width: 56px; height: 56px; font-size: 1.375rem; box-shadow: 0 0 0 8px var(--wpl-steps-bg); }
.wpl-steps__body { gap: 12px; padding-top: 8px; }
.wpl-steps__title { font-size: 1.25rem; }
}
.wpl-check-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.wpl-check-grid__item {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.wpl-check-grid__text {
min-width: 0;
line-height: 1.5;
}
.wpl-check-grid__note {
display: block;
margin-top: 2px;
color: var(--wpl-text-muted);
font-size: var(--wpl-fs-small);
font-weight: 400;
line-height: 1.45;
}
.wpl-check-grid--cards .wpl-check-grid__item {
align-items: center;
gap: 14px;
padding: 18px 20px;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-card);
background: var(--wpl-bg);
color: var(--wpl-navy);
font-weight: 600;
}
.wpl-check-grid--cards .wpl-check-mark {
width: 26px;
height: 26px;
}
.wpl-check-grid--list {
gap: 16px;
}
.wpl-check-grid--list .wpl-check-mark {
margin-top: 1px;
}
@media (min-width: 768px) {
.wpl-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.wpl-check-grid--cards .wpl-check-grid__item { padding: 20px 22px; font-size: 1.0625rem; }
}
@media (min-width: 1024px) {
.wpl-check-grid { grid-template-columns: repeat(var(--wpl-cols, 3), minmax(0, 1fr)); }
}
.wpl-quotes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.wpl-quote {
display: flex;
flex-direction: column;
gap: 18px;
margin: 0;
padding: 24px;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-card);
background: var(--wpl-bg);
}
.wpl-quote__mark {
display: block;
height: 24px;
color: var(--wpl-tyrkys-pale);
font: 800 3.5rem/0.6 var(--wpl-font-heading);
}
.wpl-quote__text {
margin: 0;
color: var(--wpl-text);
font-size: 1rem;
line-height: 1.6;
}
.wpl-quote__text p {
margin: 0;
}
.wpl-quote--big .wpl-quote__text {
color: var(--wpl-navy);
font-weight: 500;
}
.wpl-quote__author {
display: flex;
align-items: center;
gap: 14px;
margin-top: auto;
}
.wpl-quote__initials,
.wpl-quote__photo {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-tyrkys-text);
font-size: var(--wpl-fs-small);
font-weight: 700;
object-fit: cover;
}
.wpl-quote__who {
display: flex;
flex-direction: column;
min-width: 0;
}
.wpl-quote__name {
font-size: 0.9375rem;
font-weight: 600;
}
.wpl-quote__role {
color: var(--wpl-text-muted);
font-size: var(--wpl-fs-small);
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.wpl-quotes--scroll {
display: flex;
gap: 12px;
margin-inline: calc(-1 * var(--wpl-gutter));
padding: 4px var(--wpl-gutter) 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--wpl-gutter);
scrollbar-width: none;
}
.wpl-quotes--scroll::-webkit-scrollbar { display: none; }
.wpl-quotes--scroll .wpl-quote { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; }
}
@media (min-width: 768px) {
.wpl-quotes--cols-2,
.wpl-quotes--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.wpl-quote { gap: 24px; padding: 32px; }
.wpl-quote__text { font-size: 1.0625rem; }
.wpl-quote--big .wpl-quote__text { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
.wpl-quotes--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wpl-link-list__title {
margin-bottom: 12px;
font-size: 1.375rem;
}
.wpl-link-list__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 44px;
padding: 18px 0;
border-bottom: 1px solid var(--wpl-line-strong);
color: var(--wpl-navy);
font: 700 1.125rem/1.35 var(--wpl-font-heading);
text-decoration: none;
}
.wpl-link-list--article .wpl-link-list__link {
font: 600 1rem/1.4 var(--wpl-font-body);
}
.wpl-link-list__link:hover {
color: var(--wpl-navy);
}
.wpl-link-list__arrow {
display: inline-flex;
flex-shrink: 0;
color: var(--wpl-tyrkys);
transition: transform var(--wpl-transition);
}
.wpl-link-list__link:hover .wpl-link-list__arrow {
transform: translateX(4px);
}
@media (min-width: 768px) {
.wpl-link-list__link { padding: 20px 0; font-size: 1.1875rem; }
.wpl-link-list--article .wpl-link-list__link { font-size: 1.0625rem; }
}
.wpl-search-form {
position: relative;
display: flex;
align-items: center;
gap: 12px;
height: 52px;
padding: 0 4px 0 16px;
border: 1px solid var(--wpl-line-strong);
border-radius: var(--wpl-radius-field);
background: var(--wpl-bg);
transition: border-color var(--wpl-transition), box-shadow var(--wpl-transition);
}
.wpl-search-form:hover {
border-color: var(--wpl-navy);
}
.wpl-search-form:focus-within {
border-color: var(--wpl-tyrkys);
box-shadow: 0 0 0 3px rgba(53, 140, 131, 0.18);
}
.wpl-search-form__icon {
display: inline-flex;
color: var(--wpl-tyrkys-text);
}
.wpl-search-form__input {
flex-grow: 1;
min-width: 0;
height: 100%;
padding: 0;
border: 0;
background: transparent;
color: var(--wpl-text);
font-size: 1rem;
-webkit-appearance: none;
appearance: none;
}
.wpl-search-form__input::placeholder {
color: var(--wpl-text-muted);
opacity: 0.85;
}
.wpl-search-form__input:focus-visible {
outline: none;
}
.wpl-search-form__submit {
flex-shrink: 0;
min-height: 44px;
padding: 0 18px;
border: 0;
border-radius: 9px;
background: var(--wpl-navy);
color: #fff;
font: 600 var(--wpl-fs-small)/1 var(--wpl-font-body);
cursor: pointer;
transition: background-color var(--wpl-transition);
}
.wpl-search-form__submit:hover {
background: var(--wpl-navy-hover);
}
.wpl-search-form--lg {
height: 64px;
padding-left: 20px;
border-radius: 16px;
}
.wpl-search-form--lg .wpl-search-form__input {
font-size: 1.1875rem;
}
.wpl-search-form--lg .wpl-search-form__submit {
min-height: 52px;
padding: 0 24px;
border-radius: var(--wpl-radius-field);
font-size: 0.9375rem;
}
.wpl-toc {
display: flex;
flex-direction: column;
gap: 14px;
}
.wpl-toc__title {
color: var(--wpl-text-muted);
}
.wpl-toc__list {
display: flex;
flex-direction: column;
border-left: 2px solid var(--wpl-line);
}
.wpl-toc__link {
display: flex;
gap: 10px;
margin-left: -2px;
padding: 8px 0 8px 16px;
border-left: 2px solid transparent;
color: var(--wpl-text-muted);
font-size: 0.9375rem;
line-height: 1.4;
text-decoration: none;
transition: color var(--wpl-transition), border-color var(--wpl-transition);
}
.wpl-toc__link:hover {
color: var(--wpl-navy);
}
.wpl-toc__item.is-done .wpl-toc__link {
border-left-color: var(--wpl-tyrkys-pale);
color: var(--wpl-navy);
}
.wpl-toc__item.is-current .wpl-toc__link {
border-left-color: var(--wpl-tyrkys);
color: var(--wpl-navy);
font-weight: 600;
}
.wpl-toc__num {
color: var(--wpl-text-muted);
font-weight: 700;
}
:is(.wpl-toc__item.is-done, .wpl-toc__item.is-current) .wpl-toc__num {
color: var(--wpl-tyrkys-text);
}
.wpl-toc__progress {
display: flex;
align-items: center;
gap: 10px;
}
.wpl-toc__bar {
flex-grow: 1;
height: 6px;
overflow: hidden;
border-radius: var(--wpl-radius-pill);
background: var(--wpl-line);
}
.wpl-toc__bar-fill {
display: block;
width: var(--wpl-toc-progress, 0%);
height: 100%;
border-radius: var(--wpl-radius-pill);
background: var(--wpl-tyrkys);
}
.wpl-toc__percent {
color: var(--wpl-tyrkys-text);
font-size: 0.8125rem;
font-weight: 600;
}
.wpl-toc--mobile {
display: block;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-card);
background: var(--wpl-bg-soft);
}
.wpl-toc__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 56px;
padding: 0 16px;
color: var(--wpl-navy);
font-weight: 600;
}
.wpl-toc__chevron {
transition: transform var(--wpl-transition);
}
.wpl-toc--mobile[open] .wpl-toc__chevron {
transform: rotate(180deg);
}
.wpl-toc--mobile .wpl-toc__list {
gap: 10px;
padding: 0 16px 16px 36px;
border-left: 0;
color: var(--wpl-navy);
list-style: decimal;
}
.wpl-toc--mobile .wpl-toc__item {
display: list-item;
padding-left: 2px;
}
.wpl-toc--mobile .wpl-toc__link {
display: inline;
margin: 0;
padding: 0;
border: 0;
color: var(--wpl-navy);
text-decoration: underline rgba(53, 140, 131, 0.5);
text-underline-offset: 4px;
}
.wpl-form,
.wpl-field {
--wpl-l-field-line: var(--wpl-field-line);
--wpl-l-box-line: var(--wpl-field-line);
--wpl-l-placeholder: var(--wpl-placeholder);
--wpl-l-drop-bg: #F9FAFB;
--wpl-l-focus-glow: rgba(53, 140, 131, 0.18);
--wpl-l-error-glow: rgba(179, 38, 30, 0.12);
}
:is(.wpl-form, .wpl-field) [hidden],
.wpl-form[hidden] {
display: none !important;
}
.wpl-form {
container: wpl-form / inline-size;
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
min-width: 0;
color: var(--wpl-text);
font-size: 1rem;
line-height: 1.5;
}
.wpl-form--card {
padding: 22px;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-panel);
background: var(--wpl-bg);
}
:is(.wpl-section--navy, .wpl-hero, .wpl-service-box--large) .wpl-form--card {
border-color: transparent;
}
.wpl-cta-band__form .wpl-form--card {
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.wpl-form .wpl-form__title {
margin: 0;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-h3);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
}
.wpl-form .wpl-form__intro {
margin: -4px 0 0;
color: var(--wpl-text-muted);
font-size: 0.9375rem;
}
.wpl-form__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
@container wpl-form (min-width: 520px) {
.wpl-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.wpl-form__grid > .wpl-field {
grid-column: 1 / -1;
}
.wpl-form__grid > .wpl-field--half {
grid-column: auto;
}
}
.wpl-field {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.wpl-field__label {
color: var(--wpl-navy);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
}
.wpl-field__req {
color: var(--wpl-tyrkys-text);
}
.wpl-field__control {
position: relative;
}
.wpl-input,
.wpl-textarea,
.wpl-select {
display: block;
width: 100%;
min-height: 50px;
margin: 0;
padding: 0 16px;
border: 1px solid var(--wpl-l-field-line);
border-radius: var(--wpl-radius-field);
background: var(--wpl-bg);
color: var(--wpl-text);
font-family: var(--wpl-font-body);
font-size: 1rem;
line-height: 1.4;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
transition: border-color var(--wpl-transition), box-shadow var(--wpl-transition);
}
.wpl-textarea {
min-height: 128px;
padding-block: 14px;
line-height: 1.55;
resize: vertical;
}
.wpl-select {
padding-right: 48px;
text-overflow: ellipsis;
cursor: pointer;
}
:is(.wpl-input, .wpl-textarea)::placeholder {
color: var(--wpl-l-placeholder);
opacity: 1;
}
:is(.wpl-input, .wpl-textarea, .wpl-select):hover {
border-color: var(--wpl-navy);
}
:is(.wpl-input, .wpl-textarea, .wpl-select):focus {
outline: 2px solid transparent;
outline-offset: 0;
border-color: var(--wpl-tyrkys);
box-shadow: 0 0 0 1px var(--wpl-tyrkys), 0 0 0 5px var(--wpl-l-focus-glow);
}
:is(.wpl-input, .wpl-textarea, .wpl-select):disabled {
border-color: var(--wpl-line);
background: var(--wpl-bg-soft);
color: var(--wpl-l-placeholder);
cursor: not-allowed;
}
.wpl-field__chevron {
position: absolute;
top: 50%;
right: 14px;
display: flex;
color: var(--wpl-navy);
transform: translateY(-50%);
pointer-events: none;
}
.wpl-field--error :is(.wpl-input, .wpl-textarea, .wpl-select),
:is(.wpl-input, .wpl-textarea, .wpl-select)[aria-invalid="true"] {
border-color: var(--wpl-error);
box-shadow: 0 0 0 3px var(--wpl-l-error-glow);
}
.wpl-field--error :is(.wpl-input, .wpl-textarea, .wpl-select):focus {
box-shadow: 0 0 0 1px var(--wpl-error), 0 0 0 5px var(--wpl-l-error-glow);
}
.wpl-field__valid {
position: absolute;
top: 50%;
right: 14px;
display: none;
color: var(--wpl-tyrkys-text);
transform: translateY(-50%);
pointer-events: none;
}
.wpl-field--valid .wpl-field__valid {
display: flex;
}
.wpl-field--valid .wpl-input {
padding-right: 44px;
border-color: var(--wpl-tyrkys);
}
.wpl-field__hint {
margin: 0;
color: var(--wpl-text-muted);
font-size: 0.8125rem;
line-height: 1.45;
}
.wpl-field__error {
display: flex;
align-items: flex-start;
gap: 6px;
margin: 0;
color: var(--wpl-error);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
}
.wpl-field__error .wpl-icon {
flex-shrink: 0;
margin-top: 1px;
}
:is(.wpl-form, .wpl-field) .wpl-check {
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 12px;
width: auto;
height: auto;
margin-block: -11px;
padding-block: 11px;
border-radius: 0;
background: none;
color: var(--wpl-text);
font-size: 0.875rem;
line-height: 1.5;
cursor: pointer;
}
.wpl-check__input {
position: absolute;
top: 11px;
left: 0;
width: 22px;
height: 22px;
margin: 0;
opacity: 0;
cursor: pointer;
}
.wpl-check__box {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
border: 1.5px solid var(--wpl-l-box-line);
border-radius: 6px;
background: var(--wpl-bg);
color: #fff;
transition: background-color var(--wpl-transition), border-color var(--wpl-transition);
}
.wpl-check__box .wpl-icon {
opacity: 0;
transform: scale(0.6);
transition: opacity var(--wpl-transition), transform var(--wpl-transition);
}
.wpl-check:hover .wpl-check__box {
border-color: var(--wpl-navy);
}
.wpl-check__input:checked + .wpl-check__box {
border-color: var(--wpl-navy);
background: var(--wpl-navy);
}
.wpl-check__input:checked + .wpl-check__box .wpl-icon {
opacity: 1;
transform: none;
}
.wpl-check__input:focus-visible + .wpl-check__box {
outline: var(--wpl-focus-ring);
outline-offset: var(--wpl-focus-offset);
}
.wpl-field--error .wpl-check__box {
border-color: var(--wpl-error);
}
.wpl-check__text {
min-width: 0;
}
.wpl-check__text a {
color: var(--wpl-navy);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.wpl-check__text a:hover {
text-decoration-color: var(--wpl-navy);
}
.wpl-file {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
}
.wpl-file__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wpl-file__drop {
display: flex;
align-items: center;
gap: 14px;
min-height: 64px;
padding: 16px 18px;
border: 1.5px dashed var(--wpl-l-box-line);
border-radius: var(--wpl-radius-field);
background: var(--wpl-l-drop-bg);
color: var(--wpl-text-muted);
font-size: 0.875rem;
line-height: 1.45;
cursor: pointer;
transition: border-color var(--wpl-transition), background-color var(--wpl-transition);
}
.wpl-file__drop:hover,
.wpl-file__drop.is-dragover {
border-color: var(--wpl-navy);
background: var(--wpl-bg-soft);
}
.wpl-file__input:focus-visible + .wpl-file__drop,
.wpl-file__input:focus-visible ~ .wpl-file__chip {
outline: var(--wpl-focus-ring);
outline-offset: var(--wpl-focus-offset);
}
.wpl-field--error .wpl-file__drop {
border-color: var(--wpl-error);
}
.wpl-file__icon,
.wpl-file__chip-icon {
display: flex;
flex-shrink: 0;
color: var(--wpl-tyrkys-text);
}
.wpl-file__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.wpl-file__text strong {
color: var(--wpl-navy);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.wpl-file__types {
font-size: 0.8125rem;
}
.wpl-file__chip {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 6px 6px 14px;
border: 1px solid var(--wpl-line);
border-radius: var(--wpl-radius-field);
background: var(--wpl-bg);
font-size: 0.875rem;
}
.wpl-file__meta {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.35;
}
.wpl-file__name {
overflow: hidden;
color: var(--wpl-navy);
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.wpl-file__size {
color: var(--wpl-text-muted);
font-size: 0.8125rem;
}
.wpl-file__remove {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 44px;
height: 44px;
margin-left: auto;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
cursor: pointer;
transition: background-color var(--wpl-transition), color var(--wpl-transition);
}
.wpl-file__remove:hover {
background: var(--wpl-navy);
color: #fff;
}
.wpl-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 16px;
margin-top: 4px;
}
.wpl-form__submit {
width: 100%;
}
.wpl-form__submit.is-loading,
.wpl-form__submit.is-loading:hover {
background: var(--wpl-navy-hover);
cursor: progress;
}
.wpl-form__spinner {
display: none;
flex-shrink: 0;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: wpl-form-spin 0.9s linear infinite;
}
.wpl-form__submit.is-loading .wpl-form__spinner {
display: inline-block;
}
@keyframes wpl-form-spin {
to {
transform: rotate(360deg);
}
}
.wpl-form .wpl-form__note {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
color: var(--wpl-text-muted);
font-size: 0.8125rem;
line-height: 1.5;
}
.wpl-form__note .wpl-icon {
flex-shrink: 0;
margin-top: 1px;
color: var(--wpl-tyrkys-text);
}
.wpl-form__summary,
.wpl-form__alert {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px;
border-radius: var(--wpl-radius-card);
background: var(--wpl-error-tint);
color: var(--wpl-text);
font-size: 0.9375rem;
line-height: 1.5;
}
.wpl-form__alert {
flex-direction: row;
align-items: flex-start;
gap: 10px;
}
.wpl-form .wpl-form__alert p,
.wpl-form .wpl-form__summary-title {
margin: 0;
}
.wpl-form__summary-title {
display: flex;
align-items: center;
gap: 8px;
color: var(--wpl-error);
font-weight: 700;
}
:is(.wpl-form__summary, .wpl-form__alert) .wpl-icon {
flex-shrink: 0;
color: var(--wpl-error);
}
.wpl-form__alert .wpl-icon {
margin-top: 2px;
}
.wpl-form .wpl-form__summary-list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0 0 0 26px;
list-style: none;
}
.wpl-form .wpl-form__summary-list a {
color: var(--wpl-navy);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--wpl-error);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.wpl-form__success {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 28px;
border-radius: var(--wpl-radius-card);
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-text);
font-size: 1rem;
line-height: 1.6;
}
.wpl-form__success-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--wpl-tyrkys);
color: #fff;
}
.wpl-form__success .wpl-form__success-title {
margin: 6px 0 0;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-h3);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
}
.wpl-form__success .wpl-form__success-text {
margin: 0;
}
.wpl-form__success-text strong {
color: var(--wpl-navy);
font-weight: 600;
}
.wpl-form__success .wpl-link {
color: var(--wpl-navy);
font-size: 0.9375rem;
text-decoration-color: var(--wpl-tyrkys);
}
.wpl-form__success .wpl-link__arrow {
color: var(--wpl-tyrkys);
}
.wpl-form__hp {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.wpl-form__turnstile:empty {
display: none;
}
.wpl-form__turnstile:not(.is-visible) {
position: absolute;
left: 0;
width: 100%;
height: 0;
overflow: hidden;
pointer-events: none;
}
.wpl-form__turnstile iframe {
max-width: 100%;
}
.wpl-form .wpl-form__noscript {
margin: 0;
padding: 12px 16px;
border-radius: var(--wpl-radius-field);
background: var(--wpl-warning-tint);
color: var(--wpl-text);
font-size: 0.875rem;
}
@media (min-width: 768px) {
.wpl-form {
gap: 18px;
}
.wpl-form--card {
padding: 40px;
}
.wpl-input,
.wpl-select {
min-height: 52px;
}
.wpl-form__submit {
width: auto;
}
}
.wpl-notice {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 4px 14px;
padding: 18px 18px;
border-radius: var(--wpl-radius-card);
color: var(--wpl-text);
font-size: 1rem;
line-height: 1.6;
}
.wpl-notice__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--wpl-navy);
color: #FFFFFF;
}
.wpl-notice__body {
min-width: 0;
}
.wpl-notice__title {
margin: 0;
padding-top: 6px;
font-family: var(--wpl-font-heading);
font-size: 1rem;
font-weight: 700;
line-height: 1.5;
}
.wpl-notice__text > * {
margin: 0;
}
.wpl-notice__text > * + * {
margin-top: 0.5em;
}
.wpl-notice--no-title .wpl-notice__body {
padding-top: 5px;
}
.wpl-notice__text a:not([class]) {
color: var(--wpl-navy);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.wpl-notice__link {
display: inline-flex;
grid-column: 2;
justify-self: start;
align-items: center;
min-height: 44px;
margin: -6px 0 -10px;
font-size: 0.9375rem;
}
.wpl-notice--tip {
background: var(--wpl-tyrkys-tinta);
}
.wpl-notice--tip .wpl-notice__icon {
background: var(--wpl-tyrkys);
}
.wpl-notice--tip .wpl-notice__title {
color: var(--wpl-tyrkys-text);
}
.wpl-notice--warning {
background: var(--wpl-warning-tint);
}
.wpl-notice--warning .wpl-notice__icon {
background: var(--wpl-warning);
}
.wpl-notice--warning .wpl-notice__title {
color: var(--wpl-warning-text);
}
.wpl-notice--note {
border: 1px solid var(--wpl-line);
background: var(--wpl-bg-soft);
}
.wpl-notice--note .wpl-notice__title {
color: var(--wpl-navy);
}
.wpl-notice--state {
grid-template-columns: 32px minmax(0, 1fr);
gap: 4px 14px;
align-items: center;
padding: 14px 16px;
font-size: 0.9375rem;
line-height: 1.5;
}
.wpl-notice--state .wpl-notice__icon {
width: 32px;
height: 32px;
border-radius: 50%;
}
.wpl-notice--state .wpl-notice__title {
padding-top: 0;
font-family: var(--wpl-font-body);
font-size: inherit;
}
.wpl-notice--state.wpl-notice--no-title .wpl-notice__body {
padding-top: 0;
}
.wpl-notice--success {
background: var(--wpl-success-tint);
}
.wpl-notice--success .wpl-notice__icon {
background: var(--wpl-success);
}
.wpl-notice--error {
background: var(--wpl-error-tint);
}
.wpl-notice--error .wpl-notice__icon {
background: var(--wpl-error);
}
.wpl-notice--error .wpl-notice__title {
color: var(--wpl-error);
}
.wpl-notice--info {
background: var(--wpl-info-tint);
}
.wpl-notice--info .wpl-notice__icon {
background: var(--wpl-info);
}
.wpl-notice--compact {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--wpl-radius-field);
font-size: 0.9375rem;
line-height: 1.5;
}
.wpl-notice--compact .wpl-notice__icon {
width: auto;
height: auto;
border-radius: 0;
background: transparent;
color: var(--wpl-navy);
}
.wpl-notice--compact .wpl-notice__body {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 6px;
padding-top: 0;
}
.wpl-notice--compact .wpl-notice__title {
padding-top: 0;
font-family: var(--wpl-font-body);
font-size: inherit;
}
.wpl-notice--compact.wpl-notice--tip .wpl-notice__icon {
color: var(--wpl-tyrkys-text);
}
.wpl-notice--compact.wpl-notice--warning .wpl-notice__icon {
color: var(--wpl-warning-text);
}
.wpl-notice--compact.wpl-notice--warning .wpl-notice__text a:not([class]) {
text-decoration-color: var(--wpl-warning);
text-decoration-thickness: 1px;
}
.wpl-notice--compact.wpl-notice--error .wpl-notice__icon {
color: var(--wpl-error);
}
.wpl-notice--compact .wpl-notice__link {
margin: -10px 0 -10px auto;
}
@media (min-width: 768px) {
.wpl-notice {
padding: 20px 22px;
}
.wpl-notice--state {
grid-template-columns: 32px minmax(0, 1fr) auto;
padding: 16px 18px;
}
.wpl-notice--state .wpl-notice__link {
grid-column: 3;
grid-row: 1;
margin: -10px 0;
white-space: nowrap;
}
.wpl-notice--compact {
padding: 14px 18px;
}
}
.wpl-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 40px 20px;
border: 1px dashed var(--wpl-line-strong);
border-radius: var(--wpl-radius-panel);
background: var(--wpl-bg);
text-align: center;
}
.wpl-empty__icon {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--wpl-tyrkys-tinta);
color: var(--wpl-tyrkys-text);
}
.wpl-empty__title {
margin: 0;
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: var(--wpl-fs-h3);
font-weight: 700;
line-height: 1.25;
}
.wpl-empty__text {
max-width: 440px;
margin: 0;
color: var(--wpl-text-muted);
font-size: 1rem;
line-height: 1.6;
}
.wpl-empty__search {
width: 100%;
max-width: 440px;
}
.wpl-empty__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 20px;
margin: 0;
padding: 0;
list-style: none;
}
.wpl-empty__links .wpl-link {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 0.9375rem;
}
@media (min-width: 768px) {
.wpl-empty {
padding: 56px 32px;
}
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner {
--cmplz_banner_background_color: var(--wpl-bg);
--cmplz_banner_border_color: transparent;
--cmplz_banner_border_width: 0;
--cmplz_banner_border_radius: 18px;
--cmplz_text_color: var(--wpl-text);
--cmplz_hyperlink_color: var(--wpl-navy);
--cmplz_text_font_size: 15px;
--cmplz_link_font_size: 14px;
--cmplz_title_font_size: 19px;
--cmplz_button_font_size: 15px;
--cmplz_button_border_radius: 999px;
--cmplz_button_accept_background_color: var(--wpl-navy);
--cmplz_button_accept_border_color: var(--wpl-navy);
--cmplz_button_accept_text_color: #FFFFFF;
--cmplz_button_deny_background_color: var(--wpl-bg);
--cmplz_button_deny_border_color: var(--wpl-navy);
--cmplz_button_deny_text_color: var(--wpl-navy);
--cmplz_button_settings_background_color: var(--wpl-bg);
--cmplz_button_settings_border_color: var(--wpl-navy);
--cmplz_button_settings_text_color: var(--wpl-navy);
--cmplz_slider_active_color: var(--wpl-tyrkys);
--cmplz_slider_inactive_color: var(--wpl-line-strong);
--cmplz_slider_bullet_color: #FFFFFF;
--cmplz_category_body_font_size: 14px;
--cmplz_category_header_title_font_size: 16px;
--cmplz_category_header_active_font_size: 13px;
--cmplz_category_header_always_active_color: var(--wpl-tyrkys-text);
--cmplz_category_open_icon_color: var(--wpl-navy);
border: 0;
border-radius: 18px;
background: var(--wpl-bg);
box-shadow: 0 20px 48px rgba(8, 42, 66, 0.18), 0 0 0 1px rgba(8, 42, 66, 0.06);
color: var(--wpl-text);
font-family: var(--wpl-font-body);
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-title {
color: var(--wpl-navy);
font-family: var(--wpl-font-heading);
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.3;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-message {
color: var(--wpl-text);
font-size: 0.9375rem;
line-height: 1.55;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner :is(.cmplz-message, .cmplz-description) a,
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-links .cmplz-link {
color: var(--wpl-navy);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-links .cmplz-link {
font-size: var(--wpl-fs-small);
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-close {
display: none;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
min-height: 44px;
height: auto;
padding: 10px 22px;
border: 1.5px solid var(--wpl-navy);
border-radius: var(--wpl-radius-pill);
box-shadow: none;
font-family: var(--wpl-font-body);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background-color var(--wpl-transition), color var(--wpl-transition), border-color var(--wpl-transition);
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
background: var(--wpl-navy);
color: #FFFFFF;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
border-color: var(--wpl-navy-hover);
background: var(--wpl-navy-hover);
color: #FFFFFF;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-deny, .cmplz-save-preferences) {
background: var(--wpl-bg);
color: var(--wpl-navy);
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-deny, .cmplz-save-preferences):hover {
background: var(--wpl-bg-soft);
color: var(--wpl-navy);
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-view-preferences, .cmplz-manage-options) {
border-color: transparent;
background: transparent;
color: var(--wpl-navy);
text-decoration: underline;
text-decoration-color: var(--wpl-tyrkys);
text-decoration-thickness: 2px;
text-underline-offset: 5px;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-view-preferences, .cmplz-manage-options):hover {
background: transparent;
text-decoration-color: var(--wpl-navy);
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-categories .cmplz-category {
border-top: 1px solid var(--wpl-line);
border-radius: 0;
background: transparent;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-category-title {
color: var(--wpl-navy);
font-size: 1rem;
font-weight: 700;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-description {
color: var(--wpl-text-muted);
font-size: var(--wpl-fs-small);
line-height: 1.5;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-always-active {
color: var(--wpl-tyrkys-text);
font-weight: 600;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner :is(.cmplz-btn, .cmplz-link, .cmplz-close, summary, a, label):focus-visible {
outline: var(--wpl-focus-ring);
outline-offset: var(--wpl-focus-offset);
}
#cmplz-manage-consent .cmplz-manage-consent {
min-height: 44px;
border-radius: var(--wpl-radius-field) var(--wpl-radius-field) 0 0;
background: var(--wpl-navy);
color: #FFFFFF;
font-family: var(--wpl-font-body);
font-size: var(--wpl-fs-small);
font-weight: 600;
}
@media (max-width: 767px) {
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
width: 100%;
}
:is(#cmplz-cookiebanner-container, body) .cmplz-cookiebanner .cmplz-message {
font-size: var(--wpl-fs-small);
}
}