.pro-tf-affiliates.shop-redesign-container,
.pro-tf-affiliates.shop-redesign-container * {
box-sizing: border-box;
font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}
.pro-tf-affiliates-page {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
padding-top: 0;
background: #f5f8fc;
overflow: visible;
} body.pro-tf-affiliates-template #content,
body.pro-tf-affiliates-template .page-wrapper,
body.pro-tf-affiliates-template .page-wrapper > .col,
body.pro-tf-affiliates-template #main {
padding-top: 0 !important;
margin-top: 0 !important;
} .aff-page-bg {
position: absolute;
top: 0;
left: max(0px, calc(50% - 700px));
right: max(0px, calc(50% - 700px));
width: auto;
height: min(450px, 48vw);
aspect-ratio: auto;
z-index: 0;
pointer-events: none;
background-color: #f5f8fc;
background-image: none;
} .aff-page-bg::before {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
aspect-ratio: 1024 / 479;
width: auto;
max-width: 100%;
background-color: transparent;
background-image: var(--aff-hero-bg);
background-repeat: no-repeat;
background-position: right top;
background-size: cover;
-webkit-mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.12) 10%,
rgba(0, 0, 0, 0.4) 22%,
rgba(0, 0, 0, 0.75) 38%,
#000 55%,
#000 100%
);
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.12) 10%,
rgba(0, 0, 0, 0.4) 22%,
rgba(0, 0, 0, 0.75) 38%,
#000 55%,
#000 100%
);
}
.aff-page-bg::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 20%;
background: linear-gradient(180deg, rgba(245, 248, 252, 0) 0%, rgba(245, 248, 252, 0.4) 60%, #f5f8fc 100%);
pointer-events: none;
}
.pro-tf-affiliates {
max-width: 1400px;
margin: 0 auto;
padding: 18px 15px 48px;
color: #1f1d1d;
position: relative;
z-index: 1;
} .aff-hero {
position: relative;
z-index: 1;
margin-bottom: 18px;
padding-top: 0;
padding-bottom: 8px;
min-height: 0;
display: flex;
align-items: flex-start;
}
.aff-hero-copy {
max-width: 520px;
position: relative;
z-index: 2;
}
.aff-title {
margin: 0 0 14px;
font-size: clamp(32px, 4.2vw, 48px);
font-weight: 800;
line-height: 1.1;
text-transform: none;
color: #08162d !important;
}
.aff-subtitle {
margin: 0 0 22px;
font-size: 16px;
font-weight: 600;
color: #1f1d1d;
line-height: 1.45;
}
.aff-benefits {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.aff-benefits li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
line-height: 1.45;
color: #1f1d1d;
}
.aff-benefits-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
margin-top: 1px;
display: block;
} .aff-features {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px 20px;
background: #fff;
border-radius: 18px;
box-shadow: 0 10px 28px rgba(15, 55, 120, 0.07);
padding: 24px 20px;
margin: 0 0 28px;
text-align: center;
}
.aff-feature-icon {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
margin: 0 auto 12px;
display: block;
object-fit: contain;
object-position: center;
}
.aff-feature-title {
margin: 0 0 8px;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #11519b;
}
.aff-feature-text {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: #1f1d1d;
} .aff-main {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 28px;
background: #fff;
border-radius: 18px;
box-shadow: 0 10px 28px rgba(15, 55, 120, 0.07);
padding: 32px 28px;
margin-bottom: 28px;
}
.aff-form-title {
margin: 0 0 10px;
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #11519b !important;
}
.aff-howto-title {
margin: 0 0 18px;
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 800;
line-height: 1.2;
text-transform: uppercase;
color: #11519b !important;
}
.aff-steps {
list-style: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.aff-step {
display: flex;
align-items: flex-start;
gap: 14px;
}
.aff-step-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.aff-step-icon img {
width: 44px;
height: 44px;
object-fit: contain;
display: block;
}
.aff-step-title {
font-size: 15px;
font-weight: 800;
color: #1f1d1d;
margin-bottom: 4px;
}
.aff-step-text {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: #1f1d1d;
}
.aff-notice {
display: flex;
align-items: flex-start;
gap: 12px;
background: #eaf4ff;
border-radius: 12px;
padding: 14px 16px;
}
.aff-notice-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
display: block;
}
.aff-notice-text {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: #2a5694;
}
.aff-form-intro {
margin: 0 0 22px;
font-size: 14px;
line-height: 1.5;
color: #1f1d1d;
}
.aff-form-msg {
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
}
.aff-form-msg--ok {
background: #ecfdf3;
color: #027a48;
}
.aff-form-msg--err {
background: #fef3f2;
color: #b42318;
} .aff-form-wrap {
min-width: 0;
}
.aff-form-shortcode .wpcf7 {
margin: 0;
}
.aff-form-shortcode .wpcf7-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 14px;
margin: 0;
}
.aff-form-shortcode .wpcf7-form > p {
margin: 0;
flex: 1 1 100%;
} .aff-form-shortcode .wpcf7-form > p:has(input[name="your-name"]),
.aff-form-shortcode .wpcf7-form > p:has(input[name="your-email"]),
.aff-form-shortcode .wpcf7-form > p:has([data-name="your-name"]),
.aff-form-shortcode .wpcf7-form > p:has([data-name="your-email"]),
.aff-form-shortcode .wpcf7-form > p.aff-form-half {
flex: 1 1 calc(50% - 7px);
min-width: 0;
}
.aff-form-row-2 {
display: flex;
flex-wrap: nowrap;
gap: 14px;
width: 100%;
flex: 1 1 100%;
}
.aff-form-row-2 > p {
margin: 0 !important;
flex: 1 1 calc(50% - 7px);
min-width: 0;
}
.aff-form-shortcode .wpcf7-form label {
display: block;
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
}
.aff-form-shortcode .wpcf7-form label .wpcf7-form-control-wrap {
font-size: 14px;
line-height: normal;
color: #1f1d1d;
}
.aff-form-shortcode .wpcf7-form-control-wrap {
position: relative;
display: block;
width: 100%;
} .aff-form-shortcode .wpcf7-form-control-wrap[data-name="your-name"]::before,
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="your-email"]::before,
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="tel-411"]::before,
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="your-subject"]::before,
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="your-message"]::before {
content: '';
position: absolute;
left: 16px;
top: 17px; width: 18px;
height: 18px;
z-index: 2;
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
}
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="your-name"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8' r='3.4' stroke='%2398A2B3' stroke-width='1.7'/%3E%3Cpath d='M5 19c1.6-3.6 4.2-5.2 7-5.2s5.4 1.6 7 5.2' stroke='%2398A2B3' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="your-email"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='6' width='18' height='12' rx='2' stroke='%2398A2B3' stroke-width='1.7'/%3E%3Cpath d='M3 8l9 6 9-6' stroke='%2398A2B3' stroke-width='1.7'/%3E%3C/svg%3E");
}
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="tel-411"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 3.8h2.8l1.4 3.8-2 1.4a12 12 0 005.2 5.2l1.4-2 3.8 1.4V18a2 2 0 01-2 2A15 15 0 015 5.8a2 2 0 012-2z' stroke='%2398A2B3' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="your-subject"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2' stroke='%2398A2B3' stroke-width='1.7'/%3E%3Crect x='6' y='8' width='4' height='4' rx='0.8' stroke='%2398A2B3' stroke-width='1.5'/%3E%3Cpath d='M12.5 9h5M12.5 12h5M6 15.5h12' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.aff-form-shortcode .wpcf7-form-control-wrap[data-name="your-message"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 10-14 0c0 5.6 7 11 7 11z' stroke='%2398A2B3' stroke-width='1.7'/%3E%3Ccircle cx='12' cy='10' r='2.4' stroke='%2398A2B3' stroke-width='1.7'/%3E%3C/svg%3E");
}
.aff-form-shortcode input[type="text"],
.aff-form-shortcode input[type="email"],
.aff-form-shortcode input[type="tel"],
.aff-form-shortcode input[type="url"],
.aff-form-shortcode input[type="number"],
.aff-form-shortcode textarea {
width: 100% !important;
height: 52px !important;
padding: 0 16px 0 48px !important;
border: 1px solid #c5d0e0 !important;
border-radius: 10px !important;
font-size: 14px !important;
font-family: inherit !important;
line-height: 1.35 !important;
color: #1f1d1d !important;
background: #fff !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.15s ease;
}
.aff-form-shortcode textarea {
height: auto !important;
min-height: 96px !important;
padding: 14px 16px 14px 48px !important;
line-height: 1.45 !important;
resize: vertical;
}
.aff-form-shortcode input:focus,
.aff-form-shortcode textarea:focus {
border-color: #11519b !important;
}
.aff-form-shortcode input::placeholder,
.aff-form-shortcode textarea::placeholder {
color: #98a2b3 !important;
opacity: 1 !important;
}
.aff-form-shortcode .wpcf7-acceptance {
margin: 2px 0 4px !important;
}
.aff-form-shortcode .wpcf7-acceptance .wpcf7-list-item {
margin: 0 !important;
}
.aff-form-shortcode .wpcf7-acceptance label,
.aff-form-shortcode .wpcf7-list-item label {
display: flex !important;
align-items: flex-start;
gap: 10px;
font-size: 13px !important;
line-height: 1.45 !important;
color: #1f1d1d !important;
cursor: pointer;
}
.aff-form-shortcode .wpcf7-acceptance input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
min-width: 16px;
margin: 2px 0 0 !important;
accent-color: #11519b;
flex-shrink: 0;
}
.aff-form-shortcode .wpcf7-acceptance a,
.aff-form-shortcode .wpcf7-list-item-label a {
color: #11519b !important;
text-decoration: underline;
}
.aff-form-shortcode .wpcf7-submit {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100% !important;
height: 54px !important;
margin-top: 4px;
padding: 0 20px !important;
border: 0 !important;
border-radius: 12px !important;
background: #11519b !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.03em;
text-transform: uppercase;
cursor: pointer;
box-shadow: none !important;
transition: background 0.15s ease;
}
.aff-form-shortcode .wpcf7-submit:hover {
background: #0d3f7a !important;
}
.aff-form-shortcode .wpcf7-submit::after {
content: '';
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h12M13 6l6 6-6 6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.aff-form-shortcode .wpcf7-spinner {
margin-left: 8px;
}
.aff-form-shortcode .wpcf7-response-output {
margin: 8px 0 0 !important;
padding: 10px 12px !important;
border-radius: 8px;
font-size: 13px;
}
.aff-form-shortcode .wpcf7-not-valid-tip {
font-size: 12px;
margin-top: 4px;
}
.aff-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.aff-field {
position: relative;
display: block;
margin: 0;
}
.aff-field-ico {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
pointer-events: none;
}
.pro-tf-affiliates .aff-field input,
.pro-tf-affiliates .aff-field input[type="text"],
.pro-tf-affiliates .aff-field input[type="email"],
.pro-tf-affiliates .aff-field input[type="tel"] {
width: 100% !important;
height: 48px !important;
padding: 0 16px 0 48px !important;
border: 1px solid #d0d5dd !important;
border-radius: 10px !important;
font-size: 14px !important;
line-height: 48px !important;
color: #1f1d1d !important;
background: #fff !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.15s ease;
}
.pro-tf-affiliates .aff-field input:focus {
border-color: #11519b !important;
}
.pro-tf-affiliates .aff-field input::placeholder {
color: #98a2b3 !important;
opacity: 1 !important;
}
.aff-agree {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 4px 0 2px;
font-size: 13px;
line-height: 1.4;
color: #1f1d1d;
cursor: pointer;
}
.aff-agree input {
margin-top: 2px;
flex-shrink: 0;
}
.aff-agree a {
color: #11519b;
text-decoration: underline;
}
.aff-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 52px;
margin-top: 6px;
border: 0;
border-radius: 12px;
background: #11519b;
color: #fff;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s ease;
}
.aff-submit:hover {
background: #0d3f7a;
} .aff-partner {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 20px;
align-items: center;
background: linear-gradient(90deg, #eaf4ff 0%, #f5f8fc 55%, #fff 100%);
border-radius: 18px;
overflow: hidden;
padding: 8px 8px 8px 28px;
margin-bottom: 16px;
}
.aff-partner-copy {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 8px;
}
.aff-partner-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
display: block;
}
.aff-partner-title {
margin: 0;
font-size: clamp(16px, 2vw, 22px);
font-weight: 800;
line-height: 1.25;
text-transform: uppercase;
color: #11519b;
}
.aff-partner-media {
justify-self: end;
max-width: 420px;
width: 100%;
}
.aff-partner-media img {
display: block;
width: 100%;
height: 180px;
object-fit: cover;
object-position: center;
border-radius: 14px;
}
.aff-disclaimer {
margin: 0;
padding: 18px 20px;
text-align: center;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.45;
color: #1f1d1d;
background: #eef2f6;
border-radius: 10px;
} @media (max-width: 980px) {
.aff-page-bg { height: 260px;
}
.aff-page-bg::before {
left: auto;
right: 0;
top: 0;
width: auto;
max-width: 92%;
height: 100%;
aspect-ratio: 1024 / 479;
background-size: cover;
background-position: center top;
opacity: 0.5;
-webkit-mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.2) 16%,
rgba(0, 0, 0, 0.65) 38%,
#000 58%,
#000 100%
);
mask-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.2) 16%,
rgba(0, 0, 0, 0.65) 38%,
#000 58%,
#000 100%
);
}
.aff-page-bg::after {
height: 42%;
background: linear-gradient(
180deg,
rgba(245, 248, 252, 0) 0%,
rgba(245, 248, 252, 0.55) 50%,
#f5f8fc 100%
);
}
.aff-hero {
padding-bottom: 8px;
}
.aff-hero-copy {
max-width: none;
}
.aff-features {
grid-template-columns: 1fr 1fr;
gap: 20px 12px;
padding: 22px 16px;
margin-top: -28px;
margin-bottom: 22px;
}
.aff-main {
grid-template-columns: 1fr;
padding: 24px 18px;
}
.aff-partner {
grid-template-columns: 1fr;
padding: 20px 16px;
text-align: center;
}
.aff-partner-copy {
flex-direction: column;
justify-content: center;
}
.aff-partner-media {
justify-self: center;
max-width: none;
}
.aff-partner-media img {
height: 160px;
} .aff-notice {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 18px 16px;
}
.aff-notice-icon {
width: 36px;
height: 36px;
} .aff-steps {
gap: 20px;
}
.aff-step {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
}
@media (max-width: 640px) {
.pro-tf-affiliates {
padding: 12px 12px 36px;
}
.aff-page-bg {
height: 210px;
}
.aff-page-bg::before {
max-width: 100%;
opacity: 0.42;
background-size: cover;
background-position: center top;
}
.aff-features {
margin-top: -22px;
}
.aff-title {
font-size: 28px;
}
.aff-subtitle {
font-size: 14px;
}
.aff-benefits li {
font-size: 13px;
}
.aff-benefits-icon {
width: 24px;
height: 24px;
}
.aff-features {
grid-template-columns: 1fr;
gap: 18px;
}
.aff-howto-title,
.aff-form-title {
font-size: 18px;
text-align: center;
}
.aff-form-intro {
text-align: center;
font-size: 13px;
}
.aff-form-shortcode .wpcf7-form > p:has(input[name="your-name"]),
.aff-form-shortcode .wpcf7-form > p:has(input[name="your-email"]),
.aff-form-shortcode .wpcf7-form > p:has([data-name="your-name"]),
.aff-form-shortcode .wpcf7-form > p:has([data-name="your-email"]),
.aff-form-shortcode .wpcf7-form > p.aff-form-half,
.aff-form-row-2 {
flex: 1 1 100%;
flex-wrap: wrap;
}
.aff-form-row-2 > p {
flex: 1 1 100%;
}
.aff-feature-title {
font-size: 12px;
}
.aff-feature-text {
font-size: 12px;
}
.aff-submit {
font-size: 14px;
height: 48px;
}
.aff-partner-title {
font-size: 15px;
}
.aff-disclaimer {
font-size: 13px;
padding: 16px 14px;
}
}
.pro-tf-affiliates .aff-tags.shop-tags-section {
margin: 36px 0 28px;
}
.pro-tf-affiliates .aff-faq {
margin: 0 0 40px;
}
.pro-tf-affiliates .aff-faq .faq-main-title {
text-align: left;
}