.pro-tf-research.shop-redesign-container,
.pro-tf-research.shop-redesign-container * {
box-sizing: border-box;
}
.pro-tf-research-page {
position: relative;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: #fff;
overflow: visible;
padding: 0 0 64px;
}
.res-page-bg {
position: absolute;
top: 0;
right: max(0px, calc(50% - 700px));
left: auto;
width: min(700px, 56%);
height: min(480px, 60vh);
z-index: 0;
pointer-events: none;
background: transparent;
}
.res-page-bg::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--res-hero-bg);
background-repeat: no-repeat;
background-position: right top;
background-size: contain;
opacity: 0.95;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, transparent 14%, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.88) 72%, #000 88%, #000 100%),
linear-gradient(0deg, transparent 0%, transparent 12%, rgba(0, 0, 0, 0.15) 32%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.9) 74%, #000 88%, #000 100%);
-webkit-mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(90deg, transparent 0%, transparent 14%, rgba(0, 0, 0, 0.12) 30%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.88) 72%, #000 88%, #000 100%),
linear-gradient(0deg, transparent 0%, transparent 12%, rgba(0, 0, 0, 0.15) 32%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.9) 74%, #000 88%, #000 100%);
mask-size: 100% 100%;
mask-repeat: no-repeat;
mask-composite: intersect;
}
.res-page-bg::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, #fff 0%, #fff 8%, rgba(255, 255, 255, 0.88) 22%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0) 58%),
linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.92) 14%, rgba(255, 255, 255, 0.45) 34%, rgba(255, 255, 255, 0) 52%);
}
.pro-tf-research {
--res-blue: #11519b;
--res-ink: #08162d;
--res-text: #1f1d1d;
--res-muted: #667085;
position: relative;
z-index: 1;
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 28px 15px 8px;
font-family: 'Montserrat', system-ui, sans-serif;
color: var(--res-text);
}
.res-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 22px;
font-size: 13px;
line-height: 1.4;
color: var(--res-muted);
}
.res-breadcrumbs a {
color: var(--res-muted);
text-decoration: none;
}
.res-breadcrumbs a:hover { color: var(--res-blue); }
.res-bc-sep { opacity: 0.7; }
.res-bc-current { color: var(--res-ink); }
.res-hero {
max-width: 620px;
margin: 0 0 36px;
min-height: 120px;
}
.res-title {
margin: 0 0 14px;
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 800;
line-height: 1.15;
text-transform: none !important;
color: var(--res-ink) !important;
}
.res-subtitle {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: var(--res-text);
max-width: 560px;
}
.res-cards {
display: flex;
flex-direction: column;
gap: 18px;
margin: 0 0 40px;
}
.res-card {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 0 28px;
align-items: stretch;
padding: 18px;
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.res-card-media {
position: relative;
aspect-ratio: 1;
border-radius: 12px;
overflow: hidden;
background: #f3f6fa;
isolation: isolate;
}
.res-card-photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.res-card-body {
display: flex;
flex-direction: column;
min-width: 0;
padding: 6px 4px 4px 0;
}
.res-card-title {
margin: 0 0 8px;
font-size: 22px;
font-weight: 800;
line-height: 1.25;
color: var(--res-ink) !important;
}
.res-card-desc {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.5;
color: var(--res-text);
}
.res-card-features {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 18px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid #e8edf3;
}
.res-feat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
min-width: 0;
}
.res-feat-ico {
display: inline-flex;
color: var(--res-blue);
}
.res-feat-ico svg { display: block; }
.res-feat-label {
font-size: 13px;
font-weight: 600;
line-height: 1.35;
color: var(--res-ink);
}
.res-prod {
margin: 0 0 36px;
padding: 28px 24px 24px;
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.res-prod-title {
margin: 0 0 24px;
text-align: center;
font-size: clamp(22px, 2.8vw, 30px);
font-weight: 800;
line-height: 1.25;
color: var(--res-ink) !important;
}
.res-steps {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
gap: 10px 8px;
align-items: start;
margin: 0 0 22px;
}
.res-step {
min-width: 0;
text-align: center;
}
.res-step-media {
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
background: #edf2f7;
margin: 0 0 12px;
}
.res-step-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.res-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 0 8px;
border-radius: 999px;
background: var(--res-blue);
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.res-step-title {
margin: 0 0 6px;
font-size: 15px;
font-weight: 800;
line-height: 1.3;
color: var(--res-ink) !important;
}
.res-step-desc {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--res-muted);
}
.res-step-sep {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding-top: 18%;
color: var(--res-blue);
}
.res-step-arrow { display: block; }
.res-prod-note {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 14px;
max-width: 860px;
margin: 8px auto 0;
text-align: left;
}
.res-prod-note-ico {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--res-blue);
width: 40px;
height: 40px;
}
.res-prod-note-ico svg {
display: block;
width: 40px;
height: 40px;
}
.res-prod-note p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--res-text);
}
.res-stats {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 0 28px;
padding: 0;
background: #fff;
border: 1px solid #e6ebf2;
border-radius: 18px;
overflow: hidden;
}
.res-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding: 22px 8px;
}
.res-stat {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
text-align: left;
gap: 12px;
padding: 8px 18px;
border-right: 1px solid #e6ebf2;
min-width: 0;
}
.res-stat:last-child { border-right: 0; }
.res-stat-ico {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--res-blue);
width: 36px;
height: 36px;
}
.res-stat-ico svg {
display: block;
width: 36px;
height: 36px;
}
.res-stat-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.res-stat-value {
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 800;
line-height: 1.1;
color: var(--res-ink);
}
.res-stat-label {
font-size: 12px;
line-height: 1.35;
color: var(--res-muted);
max-width: 160px;
}
.res-footer-note {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
margin: 0;
padding: 14px 22px;
background: #eaf2fb;
text-align: left;
}
.res-footer-note-ico {
flex: 0 0 auto;
color: var(--res-blue);
}
.res-footer-note p {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--res-text);
}
@media (max-width: 1100px) {
.res-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 16px;
}
.res-step-sep { display: none; }
.res-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 0;
}
.res-stat:nth-child(2n) { border-right: 0; }
.res-stat:nth-child(-n+2) {
border-bottom: 1px solid #e6ebf2;
padding-bottom: 16px;
margin-bottom: 8px;
}
}
@media (max-width: 720px) {
.pro-tf-research-page { padding-bottom: 48px; }
.res-page-bg {
width: min(78%, 280px);
height: 190px;
}
.res-page-bg::before { opacity: 0.35; }
.res-page-bg::after {
background:
linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.45) 80%, rgba(255, 255, 255, 0.15) 100%),
linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0.95) 35%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0.1) 85%, rgba(255, 255, 255, 0) 100%);
}
.res-hero { max-width: 100%; margin-bottom: 24px; }
.res-card {
grid-template-columns: 1fr;
gap: 14px;
padding: 14px;
}
.res-card-media {
aspect-ratio: 16 / 10;
max-height: 220px;
}
.res-card-title { font-size: 18px; }
.res-card-features {
grid-template-columns: 1fr;
gap: 12px;
}
.res-feat {
flex-direction: row;
align-items: center;
gap: 10px;
}
.res-prod { padding: 20px 14px; }
.res-steps { grid-template-columns: 1fr; }
.res-stats-grid {
grid-template-columns: 1fr;
padding: 12px 8px;
}
.res-stat {
border-right: 0;
border-bottom: 1px solid #e6ebf2;
padding: 14px 12px;
}
.res-stat:last-child { border-bottom: 0; }
.res-stat:nth-child(-n+2) {
border-bottom: 1px solid #e6ebf2;
padding-bottom: 14px;
margin-bottom: 0;
}
} .shop-tags-section {
margin: 36px 0 0 !important;
padding: 0 0 48px !important;
}
.tf-page-faq {
margin: 0 0 40px !important;
}
.tf-page-faq .faq-main-title {
margin: 0 0 28px !important;
}