html { scroll-behavior: smooth; }
body[class^="page-"],
body[class*=" page-"] {
margin: 0;
padding: 0;
}
/* advertisememt-faqs.html */
/* ===== RESET & TOKENS ===== */
body.page-advertisememt-faqs *, body.page-advertisememt-faqs *::before, body.page-advertisememt-faqs *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.page-advertisememt-faqs {
--blue: #0057ff;
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227,232,255,1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-advertisememt-faqs { font-family: 'Poppins', sans-serif; color: var(--foreground); overflow-x: hidden; line-height: 1.6; }
body.page-advertisememt-faqs img { max-width: 100%; height: auto; display: block; }
body.page-advertisememt-faqs a { text-decoration: none; color: inherit; transition: .3s; }
body.page-advertisememt-faqs ul { list-style: none; padding: 0; }
/* ===== PRELOADER ===== */
body.page-advertisememt-faqs #preloader {
position: fixed; inset: 0; background: #fff;
z-index: 10000; display: flex; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-advertisememt-faqs #preloader.done { opacity: 0; visibility: hidden; }
body.page-advertisememt-faqs #preloader-inner { width: 260px; height: 260px; background: url('image/claimit-loader.gif') center/cover no-repeat; }
/* ===== SOCIAL SIDEBAR ===== */
body.page-advertisememt-faqs .social-sidebar {
position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 12px;
}
body.page-advertisememt-faqs .social-icon {
width: 32px; height: 32px; border-radius: 18px;
background: #fff; color: #1e3a8a; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transition: all .35s var(--ease-out);
}
body.page-advertisememt-faqs .social-icon:hover { transform: translateX(8px) scale(1.08); background: var(--yellow); color: #0F2E6D; }
body.page-advertisememt-faqs .social-icon.facebook:hover { background: #1877f2; color: #fff; }
body.page-advertisememt-faqs .social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
body.page-advertisememt-faqs .social-icon.linkedin:hover { background: #0077b5; color: #fff; }
body.page-advertisememt-faqs .social-icon.twitter:hover { background: #000; color: #fff; }
body.page-advertisememt-faqs .social-icon.youtube:hover { background: #ff0000; color: #fff; }
/* ===== NAVBAR ===== */
body.page-advertisememt-faqs .navbar {
position: fixed; top: 0; left: 0; right: 0;
padding: 16px 0; background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,.10);
z-index: 1000;
}
body.page-advertisememt-faqs .navbar .container {
width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
}
body.page-advertisememt-faqs .navbar-brand img { max-width: 140px; }
body.page-advertisememt-faqs .nav-menu { display: flex; align-items: center; gap: 8px; }
body.page-advertisememt-faqs .nav-menu a {
color: var(--foreground); font-size: .92rem; font-weight: 500;
padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: all .25s;
}
body.page-advertisememt-faqs .nav-menu a:hover { color: var(--blue-dark); background: var(--bg-gray); }
body.page-advertisememt-faqs .nav-btn {
display: inline-flex; align-items: center;
background: var(--blue-dark); color: #fff;
font-weight: 700; font-size: .88rem;
padding: 11px 22px; border-radius: 50px;
transition: all .3s; box-shadow: 0 4px 16px rgba(0,90,156,.25);
}
body.page-advertisememt-faqs .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,90,156,.35); color: #fff; }
body.page-advertisememt-faqs .nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: 6px; cursor: pointer;
}
body.page-advertisememt-faqs .nav-toggle span {
display: block; width: 24px; height: 2px;
background: var(--foreground); border-radius: 2px;
transition: all .35s var(--ease-out);
}
body.page-advertisememt-faqs .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.page-advertisememt-faqs .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.page-advertisememt-faqs .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== CONTAINER ===== */
body.page-advertisememt-faqs .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* ===== FAQ HERO BAND ===== */
body.page-advertisememt-faqs .faq-hero {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 140px 0 80px; text-align: center; position: relative; overflow: hidden;
}
body.page-advertisememt-faqs .faq-hero::before {
content: ''; position: absolute; inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .1;
}
body.page-advertisememt-faqs .faq-hero-inner { position: relative; z-index: 2; }
body.page-advertisememt-faqs .faq-hero .eyebrow {
display: inline-block; background: rgba(255,255,255,.18); color: #fff;
border: 1px solid rgba(255,255,255,.3); border-radius: 30px;
font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
padding: 7px 20px; margin-bottom: 20px;
}
body.page-advertisememt-faqs .faq-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; margin-bottom: 16px; }
body.page-advertisememt-faqs .faq-hero p { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 520px; margin: 0 auto; }
/* ===== FAQ SEARCH ===== */
body.page-advertisememt-faqs .faq-search-wrap { background: #fff; padding: 40px 0 0; }
body.page-advertisememt-faqs .faq-search {
max-width: 560px; margin: 0 auto;
display: flex; align-items: center; gap: 0;
background: var(--bg-gray); border-radius: 50px; overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,.07);
border: 2px solid transparent;
transition: border .3s, box-shadow .3s;
}
body.page-advertisememt-faqs .faq-search:focus-within { border-color: var(--blue-dark); box-shadow: 0 4px 32px rgba(0,90,156,.15); }
body.page-advertisememt-faqs .faq-search i { padding: 0 16px; color: var(--muted); font-size: 16px; }
body.page-advertisememt-faqs .faq-search input {
flex: 1; border: none; outline: none; background: transparent;
padding: 14px 0; font-size: .95rem; font-family: 'Poppins', sans-serif;
color: var(--foreground);
}
body.page-advertisememt-faqs .faq-search input::placeholder { color: var(--muted); }
/* ===== FAQ MAIN ===== */
body.page-advertisememt-faqs .faq-section { background: #fff; padding: 50px 0 100px; }
body.page-advertisememt-faqs .faq-count { text-align: center; margin-bottom: 40px; color: var(--muted); font-size: .9rem; }
body.page-advertisememt-faqs .faq-count span { color: var(--blue-dark); font-weight: 700; }
body.page-advertisememt-faqs .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
body.page-advertisememt-faqs .faq-item {
background: #fff; border: 1.5px solid #edf2f7;
border-radius: 18px; overflow: hidden;
box-shadow: 0 4px 16px rgba(15,23,42,.05);
transition: border-color .3s, box-shadow .3s, transform .35s var(--ease-out);
}
body.page-advertisememt-faqs .faq-item:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(15,23,42,.09); }
body.page-advertisememt-faqs .faq-item.active { border-color: var(--blue-dark); box-shadow: 0 8px 32px rgba(0,90,156,.12); }
body.page-advertisememt-faqs .faq-question {
width: 100%; background: none; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 20px 24px;
font-family: 'Poppins', sans-serif; text-align: left;
font-size: .97rem; font-weight: 600; color: var(--foreground);
transition: color .25s;
}
body.page-advertisememt-faqs .faq-item.active .faq-question { color: var(--blue-dark); }
body.page-advertisememt-faqs .faq-icon {
width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
background: var(--bg-gray); color: var(--blue-dark); font-size: 16px;
display: flex; align-items: center; justify-content: center;
transition: transform .4s var(--ease-out), background .3s, color .3s;
font-weight: 700;
}
body.page-advertisememt-faqs .faq-item.active .faq-icon {
background: var(--blue-dark); color: #fff;
transform: rotate(45deg);
}
body.page-advertisememt-faqs .faq-answer {
max-height: 0; overflow: hidden;
transition: max-height .45s var(--ease-out), padding .35s ease;
padding: 0 24px;
}
body.page-advertisememt-faqs .faq-item.active .faq-answer { max-height: 300px; padding: 0 24px 20px; }
body.page-advertisememt-faqs .faq-answer p { font-size: .92rem; line-height: 1.75; color: var(--text); }
/* No results */
body.page-advertisememt-faqs .faq-empty {
text-align: center; padding: 60px 20px; display: none;
}
body.page-advertisememt-faqs .faq-empty i { font-size: 48px; color: var(--bg-gray); margin-bottom: 16px; }
body.page-advertisememt-faqs .faq-empty p { color: var(--muted); font-size: .95rem; }
/* ===== FOOTER ===== */
body.page-advertisememt-faqs .site-footer { background: var(--bg-gray); padding: 70px 0 0; }
body.page-advertisememt-faqs .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 40px; padding-bottom: 50px; }
body.page-advertisememt-faqs .footer-brand img { max-width: 140px; margin-bottom: 14px; }
body.page-advertisememt-faqs .footer-brand p { font-size: .88rem; color: var(--muted); max-width: 220px; }
body.page-advertisememt-faqs .site-footer h6 { font-size: .92rem; font-weight: 700; margin-bottom: 16px; }
body.page-advertisememt-faqs .site-footer ul li { margin-bottom: 10px; }
body.page-advertisememt-faqs .site-footer ul li a { font-size: .87rem; color: var(--muted); transition: color .25s; }
body.page-advertisememt-faqs .site-footer ul li a:hover { color: var(--blue-dark); }
body.page-advertisememt-faqs .footer-copy { border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0; text-align: center; font-size: .82rem; color: var(--muted); }
/* ===== REVEAL ===== */
body.page-advertisememt-faqs .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-advertisememt-faqs .reveal.visible { opacity: 1; transform: none; }
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
body.page-advertisememt-faqs .nav-menu { display: none; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
body.page-advertisememt-faqs .nav-menu.open { display: flex; }
body.page-advertisememt-faqs .nav-menu a { width: 100%; padding: 10px 14px; }
body.page-advertisememt-faqs .nav-btn-wrap { display: none; }
body.page-advertisememt-faqs .nav-toggle { display: flex; }
body.page-advertisememt-faqs .footer-grid { grid-template-columns: 1fr; gap: 28px; }
body.page-advertisememt-faqs .social-sidebar { display: none; }
body.page-advertisememt-faqs .faq-question { font-size: .9rem; padding: 16px 18px; }
body.page-advertisememt-faqs .faq-answer { padding: 0 18px; }
body.page-advertisememt-faqs .faq-item.active .faq-answer { padding: 0 18px 16px; }
}
/* advertisement-terms-and-conditions.html */
/* ===== RESET & TOKENS ===== */
body.page-advertisement-terms *, body.page-advertisement-terms *::before, body.page-advertisement-terms *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.page-advertisement-terms {
--blue: #0057ff;
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227,232,255,1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-advertisement-terms { font-family: 'Poppins', sans-serif; color: var(--foreground); overflow-x: hidden; line-height: 1.6; }
body.page-advertisement-terms img { max-width: 100%; height: auto; display: block; }
body.page-advertisement-terms a { text-decoration: none; color: inherit; transition: .3s; }
body.page-advertisement-terms ul { list-style: none; padding: 0; }
/* ===== PRELOADER ===== */
body.page-advertisement-terms #preloader {
position: fixed; inset: 0; background: #fff;
z-index: 10000; display: flex; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-advertisement-terms #preloader.done { opacity: 0; visibility: hidden; }
body.page-advertisement-terms #preloader-inner { width: 260px; height: 260px; background: url('image/claimit-loader.gif') center/cover no-repeat; }
/* ===== SOCIAL SIDEBAR ===== */
body.page-advertisement-terms .social-sidebar {
position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 12px;
}
body.page-advertisement-terms .social-icon {
width: 32px; height: 32px; border-radius: 18px;
background: #fff; color: #1e3a8a; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transition: all .35s var(--ease-out);
}
body.page-advertisement-terms .social-icon:hover { transform: translateX(8px) scale(1.08); background: var(--yellow); color: #0F2E6D; }
body.page-advertisement-terms .social-icon.facebook:hover { background: #1877f2; color: #fff; }
body.page-advertisement-terms .social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
body.page-advertisement-terms .social-icon.linkedin:hover { background: #0077b5; color: #fff; }
body.page-advertisement-terms .social-icon.twitter:hover { background: #000; color: #fff; }
body.page-advertisement-terms .social-icon.youtube:hover { background: #ff0000; color: #fff; }
/* ===== NAVBAR ===== */
body.page-advertisement-terms .navbar {
position: fixed; top: 0; left: 0; right: 0;
padding: 16px 0; background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,.10);
z-index: 1000;
}
body.page-advertisement-terms .navbar .container {
width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
}
body.page-advertisement-terms .navbar-brand img { max-width: 140px; }
body.page-advertisement-terms .nav-menu { display: flex; align-items: center; gap: 8px; }
body.page-advertisement-terms .nav-menu a {
color: var(--foreground); font-size: .92rem; font-weight: 500;
padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: all .25s;
}
body.page-advertisement-terms .nav-menu a:hover { color: var(--blue-dark); background: var(--bg-gray); }
body.page-advertisement-terms .nav-btn {
display: inline-flex; align-items: center;
background: var(--blue-dark); color: #fff;
font-weight: 700; font-size: .88rem;
padding: 11px 22px; border-radius: 50px;
transition: all .3s; box-shadow: 0 4px 16px rgba(0,90,156,.25);
}
body.page-advertisement-terms .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,90,156,.35); color: #fff; }
body.page-advertisement-terms .nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: 6px; cursor: pointer;
}
body.page-advertisement-terms .nav-toggle span {
display: block; width: 24px; height: 2px;
background: var(--foreground); border-radius: 2px;
transition: all .35s var(--ease-out);
}
body.page-advertisement-terms .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.page-advertisement-terms .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.page-advertisement-terms .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== CONTAINER ===== */
body.page-advertisement-terms .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* ===== POLICY HERO ===== */
body.page-advertisement-terms .policy-hero {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 140px 0 80px; text-align: center; position: relative; overflow: hidden;
}
body.page-advertisement-terms .policy-hero::before {
content: ''; position: absolute; inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .1;
}
body.page-advertisement-terms .policy-hero::after {
content: ''; position: absolute;
width: 500px; height: 500px; border-radius: 50%;
background: rgba(255,255,255,.04);
top: -120px; right: -100px;
animation: orb-drift 8s ease-in-out infinite alternate;
}
@keyframes orb-drift {
0% { transform: translate(0,0) scale(1); }
100% { transform: translate(-40px, 30px) scale(1.08); }
}
body.page-advertisement-terms .hero-orb2 {
position: absolute; width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,.05);
bottom: -80px; left: -60px;
animation: orb-drift2 10s ease-in-out infinite alternate;
}
@keyframes orb-drift2 {
0% { transform: translate(0,0) scale(1); }
100% { transform: translate(30px,-20px) scale(1.1); }
}
body.page-advertisement-terms .policy-hero-inner { position: relative; z-index: 2; }
body.page-advertisement-terms .policy-hero .eyebrow {
display: inline-block; background: rgba(255,255,255,.18); color: #fff;
border: 1px solid rgba(255,255,255,.3); border-radius: 30px;
font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
padding: 7px 20px; margin-bottom: 20px;
animation: fade-up .8s var(--ease-out) both;
}
body.page-advertisement-terms .policy-hero h1 {
font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; margin-bottom: 16px;
animation: fade-up .8s .15s var(--ease-out) both;
}
body.page-advertisement-terms .policy-hero p {
font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 520px; margin: 0 auto;
animation: fade-up .8s .25s var(--ease-out) both;
}
body.page-advertisement-terms .hero-meta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 24px; background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2); border-radius: 50px;
padding: 8px 20px; font-size: .83rem; color: rgba(255,255,255,.8);
animation: fade-up .8s .35s var(--ease-out) both;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== PROGRESS BAR ===== */
body.page-advertisement-terms .reading-progress {
position: fixed; top: 0; left: 0; height: 3px; width: 0%;
background: linear-gradient(90deg, var(--blue-dark), var(--blue-light));
z-index: 9999; transition: width .1s linear;
}
/* ===== POLICY BODY ===== */
body.page-advertisement-terms .policy-body { background: #fff; padding: 60px 0 100px; }
body.page-advertisement-terms .policy-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start; }
/* ===== STICKY TOC ===== */
body.page-advertisement-terms .toc {
position: sticky; top: 130px;
background: var(--bg-gray); border-radius: 20px;
padding: 28px 24px; max-height: calc(100vh - 150px);
overflow-y: auto;
}
body.page-advertisement-terms .toc::-webkit-scrollbar { width: 4px; }
body.page-advertisement-terms .toc::-webkit-scrollbar-thumb { background: rgba(0,90,156,.2); border-radius: 4px; }
body.page-advertisement-terms .toc h3 { font-size: .78rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
body.page-advertisement-terms .toc ul { display: flex; flex-direction: column; gap: 4px; }
body.page-advertisement-terms .toc li a {
font-size: .82rem; color: var(--text); padding: 7px 12px; border-radius: 10px;
display: block; font-weight: 500; transition: all .25s; border-left: 2px solid transparent;
}
body.page-advertisement-terms .toc li a:hover { color: var(--blue-dark); background: rgba(0,90,156,.06); }
body.page-advertisement-terms .toc li a.active { color: var(--blue-dark); background: rgba(0,90,156,.08); border-left-color: var(--blue-dark); font-weight: 600; }
/* ===== SECTIONS ===== */
body.page-advertisement-terms .policy-sections { display: flex; flex-direction: column; gap: 36px; }
body.page-advertisement-terms .policy-section {
background: #fff; border: 1.5px solid #edf2f7;
border-radius: 20px; padding: 32px 36px;
box-shadow: 0 4px 16px rgba(15,23,42,.04);
transition: border-color .35s, box-shadow .35s, transform .5s var(--ease-out);
position: relative; overflow: hidden;
}
body.page-advertisement-terms .policy-section::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: linear-gradient(180deg, var(--blue-dark), var(--blue-light));
transform: scaleY(0); transform-origin: top;
transition: transform .45s var(--ease-out);
border-radius: 0 2px 2px 0;
}
body.page-advertisement-terms .policy-section:hover { border-color: rgba(0,90,156,.2); box-shadow: 0 12px 40px rgba(15,23,42,.08); transform: translateX(3px); }
body.page-advertisement-terms .policy-section:hover::before { transform: scaleY(1); }
body.page-advertisement-terms .section-num {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px;
background: var(--bg-gray); color: var(--blue-dark); font-size: .78rem;
font-weight: 800; margin-bottom: 14px;
transition: background .3s, color .3s, transform .3s;
}
body.page-advertisement-terms .policy-section:hover .section-num { background: var(--blue-dark); color: #fff; transform: scale(1.1); }
body.page-advertisement-terms .policy-section h2 {
font-size: 1.08rem; font-weight: 700; color: var(--foreground);
margin-bottom: 14px;
}
body.page-advertisement-terms .policy-section p { font-size: .92rem; color: var(--text); line-height: 1.8; margin-bottom: 12px; }
body.page-advertisement-terms .policy-section p:last-child { margin-bottom: 0; }
body.page-advertisement-terms .policy-section ul { display: flex; flex-direction: column; gap: 8px; padding-left: 4px; margin-bottom: 12px; }
body.page-advertisement-terms .policy-section ul:last-child { margin-bottom: 0; }
body.page-advertisement-terms .policy-section li {
font-size: .92rem; color: var(--text); line-height: 1.7;
display: flex; align-items: flex-start; gap: 10px;
}
body.page-advertisement-terms .policy-section li::before {
content: ''; display: block; min-width: 6px; height: 6px; border-radius: 50%;
background: var(--blue-dark); margin-top: 8px; flex-shrink: 0;
transition: transform .25s;
}
body.page-advertisement-terms .policy-section:hover li::before { transform: scale(1.4); }
/* Highlight box for disclaimers */
body.page-advertisement-terms .notice-box {
background: rgba(255,213,74,.12); border: 1.5px solid rgba(255,213,74,.5);
border-radius: 12px; padding: 16px 20px; margin-top: 16px;
}
body.page-advertisement-terms .notice-box p { margin-bottom: 0; font-size: .88rem; }
body.page-advertisement-terms .notice-box strong { color: var(--foreground); }
/* Contact section special */
body.page-advertisement-terms .policy-section.contact-section { background: linear-gradient(135deg, rgba(0,90,156,.04), rgba(42,157,244,.04)); border-color: rgba(0,90,156,.15); }
body.page-advertisement-terms .policy-section.contact-section a { color: var(--blue-dark); font-weight: 600; }
body.page-advertisement-terms .policy-section.contact-section a:hover { text-decoration: underline; }
/* Jurisdiction badge */
body.page-advertisement-terms .jurisdiction {
display: inline-flex; align-items: center; gap: 8px;
background: var(--bg-gray); border-radius: 50px;
padding: 8px 16px; font-size: .83rem; color: var(--blue-dark);
font-weight: 600; margin-top: 12px;
}
/* ===== REVEAL ===== */
body.page-advertisement-terms .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-advertisement-terms .reveal.visible { opacity: 1; transform: none; }
body.page-advertisement-terms .reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-advertisement-terms .reveal-left.visible { opacity: 1; transform: none; }
/* ===== FOOTER ===== */
body.page-advertisement-terms .site-footer { background: var(--bg-gray); padding: 70px 0 0; }
body.page-advertisement-terms .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 40px; padding-bottom: 50px; }
body.page-advertisement-terms .footer-brand img { max-width: 140px; margin-bottom: 14px; }
body.page-advertisement-terms .footer-brand p { font-size: .88rem; color: var(--muted); max-width: 220px; }
body.page-advertisement-terms .site-footer h6 { font-size: .92rem; font-weight: 700; margin-bottom: 16px; }
body.page-advertisement-terms .site-footer ul li { margin-bottom: 10px; }
body.page-advertisement-terms .site-footer ul li a { font-size: .87rem; color: var(--muted); transition: color .25s; }
body.page-advertisement-terms .site-footer ul li a:hover { color: var(--blue-dark); }
body.page-advertisement-terms .footer-copy { border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0; text-align: center; font-size: .82rem; color: var(--muted); }
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
body.page-advertisement-terms .policy-layout { grid-template-columns: 1fr; }
body.page-advertisement-terms .toc { display: none; }
}
@media (max-width: 768px) {
body.page-advertisement-terms .nav-menu { display: none; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
body.page-advertisement-terms .nav-menu.open { display: flex; }
body.page-advertisement-terms .nav-menu a { width: 100%; padding: 10px 14px; }
body.page-advertisement-terms .nav-btn-wrap { display: none; }
body.page-advertisement-terms .nav-toggle { display: flex; }
body.page-advertisement-terms .footer-grid { grid-template-columns: 1fr; gap: 28px; }
body.page-advertisement-terms .social-sidebar { display: none; }
body.page-advertisement-terms .policy-section { padding: 24px 22px; }
body.page-advertisement-terms .quick-nav-wrap { top: 60px; }
}
/* advertiser-2.html */
/* ===== RESET & TOKENS ===== */
body.page-advertiser *, body.page-advertiser *::before, body.page-advertiser *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.page-advertiser {
--blue: #0057ff;
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227,232,255,1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-advertiser { font-family: 'Poppins', sans-serif; color: var(--foreground); overflow-x: hidden; line-height: 1.6; }
body.page-advertiser img { max-width: 100%; height: auto; display: block; }
body.page-advertiser a { text-decoration: none; color: inherit; transition: .3s; }
body.page-advertiser ul { list-style: none; padding: 0; }
body.page-advertiser li { margin-bottom: 0; }
/* ===== PRELOADER ===== */
body.page-advertiser #preloader {
position: fixed; inset: 0; background: #fff;
z-index: 10000; display: flex; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-advertiser #preloader.done { opacity: 0; visibility: hidden; }
body.page-advertiser #preloader-inner { width: 260px; height: 260px; background: url('image/claimit-loader.gif') center/cover no-repeat; }
/* ===== SOCIAL SIDEBAR ===== */
body.page-advertiser .social-sidebar {
position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 12px;
}
body.page-advertiser .social-icon {
width: 32px; height: 32px; border-radius: 18px;
background: #fff; color: #1e3a8a; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,.12); transition: all .35s var(--ease-out);
}
body.page-advertiser .social-icon:hover { transform: translateX(8px) scale(1.08); background: var(--yellow); color: #0F2E6D; }
body.page-advertiser .social-icon.facebook:hover { background: #1877f2; color: #fff; }
body.page-advertiser .social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
body.page-advertiser .social-icon.linkedin:hover { background: #0077b5; color: #fff; }
body.page-advertiser .social-icon.twitter:hover { background: #000; color: #fff; }
body.page-advertiser .social-icon.youtube:hover { background: #ff0000; color: #fff; }
/* ===== NAVBAR ===== */
body.page-advertiser .navbar {
position: absolute; top: 0; left: 0; right: 0;
padding: 28px 0; z-index: 1000;
transition: padding .4s ease, background .4s ease, box-shadow .4s ease;
}
body.page-advertiser .navbar.scrolled { position: fixed; padding: 16px 0; background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,.1); }
body.page-advertiser .navbar .container {
width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
}
body.page-advertiser .navbar-brand img { max-width: 140px; }
body.page-advertiser .nav-menu { display: flex; align-items: center; gap: 8px; }
body.page-advertiser .nav-menu a {
color: rgba(255,255,255,.9); font-size: .92rem; font-weight: 500;
padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: all .25s;
}
body.page-advertiser .nav-menu a:hover { color: #fff; background: rgba(255,255,255,.12); }
body.page-advertiser .navbar.scrolled .nav-menu a { color: var(--foreground); }
body.page-advertiser .navbar.scrolled .nav-menu a:hover { color: var(--blue-dark); background: var(--bg-gray); }
body.page-advertiser .nav-btn {
display: inline-flex; align-items: center;
background: #fff; color: var(--blue-dark);
font-weight: 600; font-size: .88rem;
padding: 11px 22px; border-radius: 50px;
box-shadow: 0 4px 16px rgba(0,0,0,.15); transition: all .3s;
}
body.page-advertiser .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); color: var(--blue-dark); }
body.page-advertiser .navbar.scrolled .nav-btn { background: var(--blue-dark); color: #fff; }
body.page-advertiser .nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: 6px; cursor: pointer;
}
body.page-advertiser .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all .35s var(--ease-out); }
body.page-advertiser .navbar.scrolled .nav-toggle span { background: var(--foreground); }
body.page-advertiser .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.page-advertiser .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.page-advertiser .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== SHARED ===== */
body.page-advertiser .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
body.page-advertiser .row { display: flex; flex-wrap: wrap; gap: 40px; }
body.page-advertiser .row.align-center { align-items: center; }
body.page-advertiser .grdnt-tranquil { background: linear-gradient(135deg,#fed192,#9946b2); }
body.page-advertiser .grdnt-blue { background: linear-gradient(90deg,#491eb8,#844ffc); }
body.page-advertiser .grdnt-cyan { background: linear-gradient(45deg,#2fb8ff,#9eecd9); }
body.page-advertiser .grdnt-purple { background: linear-gradient(135deg,#005A9C,#2A9DF4); }
body.page-advertiser .grdnt-green { background: linear-gradient(135deg,#11998e,#38ef7d); }
body.page-advertiser .grdnt-orange { background: linear-gradient(135deg,#f7971e,#ffd200); }
body.page-advertiser .grdnt-red { background: linear-gradient(135deg,#cb2d3e,#ef473a); }
body.page-advertiser .grdnt-teal { background: linear-gradient(135deg,#1a6dff,#00d2ff); }
/* ===== HERO ===== */
body.page-advertiser .hero-merchant {
position: relative; min-height: 100vh; display: flex; align-items: center;
background: url('image/hero-3.png') center center/cover no-repeat;
background-color: #0d2240; overflow: hidden;
}
body.page-advertiser .hero-merchant::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(115deg,rgba(5,15,35,.92) 0%,rgba(13,34,64,.82) 35%,rgba(13,34,64,.55) 65%,rgba(13,34,64,.25) 100%);
z-index: 1;
}
body.page-advertiser .hero-merchant::after {
content: ""; position: absolute; inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .12; z-index: 2;
}
body.page-advertiser .hero-merchant .container, body.page-advertiser .hero-merchant .row, body.page-advertiser .hero-merchant .hero-content { position: relative; z-index: 3; }
body.page-advertiser .hero-content { position: relative; z-index: 2; width: 100%; padding: 20px 0 0; }
body.page-advertiser .intro-text { max-width: 580px; }
body.page-advertiser .eyebrow-tag {
display: inline-block; background: rgba(255,255,255,.18); color: #fff;
border: 1px solid rgba(255,255,255,.35); border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
padding: 7px 18px; margin-bottom: 22px;
}
body.page-advertiser .intro-text h2 { color: #fff; font-size: clamp(2rem,4vw,3.2rem); font-weight: 600; line-height: 1.15; margin-bottom: 18px; }
body.page-advertiser .intro-text p { color: rgba(255,255,255,.88); font-size: 1.05rem; line-height: 1.7; margin-bottom: 32px; }
body.page-advertiser .hero-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
body.page-advertiser .btn-primary {
display: inline-flex; align-items: center;
background: #fff; color: var(--blue-dark);
font-weight: 600; font-size: .95rem;
padding: 14px 32px; border-radius: 50px;
box-shadow: 0 8px 30px rgba(0,0,0,.18); transition: all .35s var(--ease-out);
}
body.page-advertiser .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25); color: var(--blue-dark); }
body.page-advertiser .btn-secondary {
display: inline-flex;
align-items: center;
background: transparent;
color: #fff;
font-weight: 600;
font-size: .95rem;
padding: 14px 30px;
border-radius: 50px;
border: 1.5px solid rgba(255,255,255,.55);
transition: all .35s var(--ease-out);
}
body.page-advertiser .btn-secondary:hover {
transform: translateY(-4px);
border-color: #fff;
background: rgba(255,255,255,.12);
box-shadow: 0 16px 40px rgba(0,0,0,.18);
color: #fff;
}
body.page-advertiser .hero-img-wrap { flex: 1; text-align: right; }
body.page-advertiser .hero-img-wrap img { max-width: 90%; margin-left: auto; filter: drop-shadow(0 20px 50px rgba(0,0,0,.3)); }
/* Hero animations */
body.page-advertiser .hero-content .eyebrow-tag, body.page-advertiser .hero-content h2, body.page-advertiser .hero-content p, body.page-advertiser .hero-content .btn-primary, body.page-advertiser .hero-content .btn-secondary { opacity: 0; transform: translateY(28px); animation: heroIn .7s var(--ease-out) forwards; }
body.page-advertiser .hero-content h2 { animation-delay: .15s; }
body.page-advertiser .hero-content p { animation-delay: .28s; }
body.page-advertiser .hero-content .btn-primary { animation-delay: .42s; }
body.page-advertiser .hero-content .btn-secondary { animation-delay: .54s; }
body.page-advertiser .hero-img-wrap img { opacity: 0; transform: translateY(30px) scale(.97); animation: heroIn .8s var(--ease-out) .2s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
/* ===== SECTION HEAD ===== */
body.page-advertiser .lp-section-head { text-align: center; margin-bottom: 60px; }
body.page-advertiser .lp-section-head .tag {
display: inline-block;
background: linear-gradient(90deg,rgba(0,90,156,.10),rgba(42,157,244,.10));
color: var(--blue-dark); border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
padding: 6px 18px; margin-bottom: 14px;
}
body.page-advertiser .lp-section-head .tag.on-blue { background: rgba(255,255,255,.18); color: #fff; }
body.page-advertiser .lp-section-head h4 { font-size: clamp(1.6rem,2.5vw,2.4rem); font-weight: 600; margin-bottom: 14px; }
body.page-advertiser .lp-section-head h4.white { color: #fff; }
body.page-advertiser .lp-section-head p.white { color: rgba(255,255,255,.85); }
body.page-advertiser .lp-section-head p { font-size: 1.05rem; color: var(--muted); max-width: 620px; margin: 0 auto; }
/* ===== WHY ADVERTISE (was what-section) ===== */
body.page-advertiser .what-section { background: linear-gradient(180deg, var(--bg-gray) 0%, rgba(227,232,255,0) 100%); padding: 90px 0; }
body.page-advertiser .what-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
body.page-advertiser .what-card {
background: #fff; border-radius: 24px; padding: 36px 24px;
box-shadow: 0 16px 50px rgba(24,32,79,.09); text-align: center;
transition: transform .4s var(--ease-out), box-shadow .4s;
}
body.page-advertiser .what-card:hover { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(24,32,79,.15); }
body.page-advertiser .wc-icon {
width: 68px; height: 68px; border-radius: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 26px; color: #fff; margin: 0 auto 20px;
transition: transform .4s var(--ease-out);
}
body.page-advertiser .what-card:hover .wc-icon { transform: scale(1.1) rotate(-5deg); }
body.page-advertiser .what-card h5 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
body.page-advertiser .what-card p { font-size: .88rem; color: var(--muted); margin: 0; }
/* ===== WHO CAN ADVERTISE ===== */
body.page-advertiser .who-section { background: #fff; padding: 90px 0; }
body.page-advertiser .who-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
body.page-advertiser .who-card {
background: var(--bg-gray); border-radius: 20px; padding: 28px 22px;
transition: transform .4s var(--ease-out), box-shadow .4s;
}
body.page-advertiser .who-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(24,32,79,.12); background: #fff; }
body.page-advertiser .who-icon {
width: 52px; height: 52px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; color: #fff; margin-bottom: 16px;
}
body.page-advertiser .who-card h5 { font-size: .95rem; font-weight: 600; margin-bottom: 10px; color: var(--foreground); }
body.page-advertiser .who-card ul { padding: 0; }
body.page-advertiser .who-card ul li { font-size: .82rem; color: var(--muted); padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.05); display: flex; align-items: center; gap: 6px; }
body.page-advertiser .who-card ul li:last-child { border-bottom: none; }
body.page-advertiser .who-card ul li::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-light); flex-shrink: 0; }
/* ===== FORMATS SECTION ===== */
body.page-advertiser .formats-section {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 90px 0;
}
body.page-advertiser .formats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 10px; }
body.page-advertiser .format-card {
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
border-radius: 20px; overflow: hidden;
transition: transform .4s var(--ease-out), background .3s, box-shadow .4s;
}
body.page-advertiser .format-card:hover {
transform: translateY(-10px); background: rgba(255,255,255,.22);
box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
body.page-advertiser .format-image { overflow: hidden; }
body.page-advertiser .format-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
body.page-advertiser .format-card:hover .format-image img { transform: scale(1.06); }
body.page-advertiser .format-content { padding: 20px; }
body.page-advertiser .format-content h4 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
body.page-advertiser .format-content p { font-size: .82rem; color: rgba(255,255,255,.75); margin: 0; }
/* ===== ADVANTAGES SECTION ===== */
body.page-advertiser .adv-section { background: #fff; padding: 90px 0; }
body.page-advertiser .zone-half { flex: 1; min-width: 280px; }
body.page-advertiser .zone-tag {
display: inline-block; border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
padding: 6px 18px; margin-bottom: 16px;
background: linear-gradient(90deg,rgba(0,90,156,.10),rgba(42,157,244,.10));
color: var(--blue-dark);
}
body.page-advertiser .zone-text h4 { font-size: clamp(1.5rem,2.5vw,2.2rem); font-weight: 600; margin-bottom: 14px; }
body.page-advertiser .zone-text p { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin-bottom: 30px; }
body.page-advertiser .zone-img-wrap { flex: 1; text-align: center; min-width: 260px; }
body.page-advertiser .zone-img-wrap img { border-radius: 20px; box-shadow: 0 20px 60px rgba(0,90,156,.15); max-width: 80%; margin: 0 auto; transition: transform .5s var(--ease-out); }
body.page-advertiser .zone-img-wrap:hover img { transform: translateY(-8px); }
/* ad-benefits grid */
body.page-advertiser .ad-benefits { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 8px; }
body.page-advertiser .ad-benefit {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; border-radius: 16px;
background: var(--bg-gray); transition: all .35s var(--ease-out);
}
body.page-advertiser .ad-benefit:hover { background: #e0e8ff; transform: translateX(4px); }
body.page-advertiser .ad-benefit__icon {
width: 40px; height: 40px; min-width: 40px; border-radius: 12px; flex-shrink: 0;
background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: #fff;
}
body.page-advertiser .ad-benefit__title { font-size: .88rem; font-weight: 600; color: var(--foreground); margin: 0; }
/* ===== ADDITIONAL BENEFITS ===== */
body.page-advertiser .add-benefits { background: rgba(227,232,255,.55); padding: 90px 0; }
body.page-advertiser .ab-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
body.page-advertiser .ab-card {
background: #fff; border-radius: 20px; padding: 28px 22px;
box-shadow: 0 8px 32px rgba(24,32,79,.07);
display: flex; align-items: flex-start; gap: 16px;
transition: transform .35s var(--ease-out), box-shadow .35s;
}
body.page-advertiser .ab-card:hover { transform: translateX(6px); box-shadow: 0 16px 50px rgba(24,32,79,.12); }
body.page-advertiser .ab-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; }
body.page-advertiser .ab-body h6 { font-size: .95rem; font-weight: 600; margin-bottom: 5px; }
body.page-advertiser .ab-body p { font-size: .85rem; color: var(--muted); margin: 0; }
/* ===== VIDEO / LEARN SECTION ===== */
body.page-advertiser .learn-section {
background:
radial-gradient(circle at top left, rgba(42, 157, 244, .12), transparent 28%),
linear-gradient(180deg, #f6f8ff 0%, #edf2ff 100%);
padding: 92px 0 100px;
}
body.page-advertiser .learn-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
margin-top: 60px;
}
body.page-advertiser .video-card {
appearance: none;
border: 0;
padding: 0;
width: 100%;
display: block;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
background: #fff;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(15, 38, 84, .08);
transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
body.page-advertiser .video-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(15, 38, 84, .14);
}
body.page-advertiser .video-card-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: linear-gradient(135deg, #dde7ff, #c8d8ff);
}
body.page-advertiser .video-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.01);
transition: transform .45s var(--ease-out);
}
body.page-advertiser .video-card:hover .video-card-media img {
transform: scale(1.08);
}
body.page-advertiser .video-card-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6, 14, 32, .08) 0%, rgba(6, 14, 32, .22) 100%);
}
body.page-advertiser .video-card-play {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
body.page-advertiser .video-card-play .play-core {
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
color: var(--blue-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
position: relative;
}
body.page-advertiser .video-card-play .play-core::before,
body.page-advertiser .video-card-play .play-core::after {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .55);
animation: pulse-ring 2s infinite;
}
body.page-advertiser .video-card-play .play-core::after {
inset: -18px;
animation-delay: .7s;
}
body.page-advertiser .video-card-body {
padding: 18px 18px 20px;
}
body.page-advertiser .video-card-body h5 {
margin: 0 0 6px;
font-size: 1.05rem;
line-height: 1.35;
color: #101828;
}
body.page-advertiser .video-card-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: .9rem;
color: #6c7a9b;
}
body.page-advertiser .video-card-meta i {
color: #7f90bb;
}
body.page-advertiser .video-modal {
position: fixed;
inset: 0;
background: rgba(5, 10, 20, .82);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
}
body.page-advertiser .video-modal.active {
display: flex;
}
body.page-advertiser .video-modal-content {
width: min(1020px, 100%);
position: relative;
}
body.page-advertiser .video-modal-frame {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
body.page-advertiser .video-modal-frame iframe {
width: 100%;
display: block;
aspect-ratio: 16 / 9;
border: 0;
}
body.page-advertiser .video-modal-caption {
background: rgba(255, 255, 255, .96);
padding: 18px 20px 20px;
}
body.page-advertiser .video-modal-caption h5 {
margin: 0 0 6px;
font-size: 1.1rem;
color: #101828;
}
body.page-advertiser .video-modal-caption p {
margin: 0;
color: #5d6a85;
line-height: 1.6;
font-size: .96rem;
}
body.page-advertiser .close-video {
position: absolute;
top: -46px;
right: 0;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
/* ========== LEARN CLAIMIT ========== */body.page-index .learn-section{ padding: 100px 0; background: #f5f7ff; }body.page-index .learn-grid{
display: grid; grid-template-rows: 0fr 0fr; gap: 60px;
align-items: start; margin-top: 60px;
}
/* Video thumbnails grid */body.page-index .learn-videos-wrap{ }body.page-index .learn-videos-label{
font-size: .75rem; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--muted);
margin-bottom: 18px;
}body.page-index .learn-video-grid{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}body.page-index .learn-video-card{
border-radius: 18px; overflow: hidden;
background: #fff;
box-shadow: 0 8px 28px rgba(15,23,42,.08);
transition: transform .35s var(--ease-out-expo), box-shadow .35s;
cursor: pointer;
}body.page-index .learn-video-card:hover{
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0,87,255,.14);
}body.page-index .learn-video-thumb{
position: relative; aspect-ratio: 16/9; overflow: hidden;
background: linear-gradient(135deg, #1a2a6c, #005a9c, #2a9df4);
}body.page-index .learn-video-thumb img{
width: 100%; height: 100%; object-fit: cover;
transition: transform .5s var(--ease-out-expo);
}body.page-index .learn-video-card:hover .learn-video-thumb img{ transform: scale(1.06); }body.page-index .learn-video-thumb-placeholder{
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
position: absolute; inset: 0;
}body.page-index .learn-video-thumb-icon{
font-size: 1.5rem; color: rgba(255,255,255,.35);
}body.page-index .learn-video-play{
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.22);
transition: background .3s;
}body.page-index .learn-video-card:hover .learn-video-play{ background: rgba(0,40,120,.35); }body.page-index .learn-video-play-btn{
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.92);
display: flex; align-items: center; justify-content: center;
font-size: 14px; color: var(--blue-dark);
box-shadow: 0 4px 16px rgba(0,0,0,.25);
transition: transform .3s, background .3s;
}body.page-index .learn-video-card:hover .learn-video-play-btn{
transform: scale(1.12);
background: #fff;
}body.page-index .learn-video-info{
padding: 14px 16px;
}body.page-index .learn-video-info span{
font-size: .82rem; font-weight: 600; color: var(--foreground);
line-height: 1.4; display: block;
}body.page-index .learn-video-duration{
font-size: .72rem !important; color: var(--muted) !important;
font-weight: 400 !important; margin-top: 4px;
}
/* ===== HOW IT WORKS ===== */
body.page-advertiser .how-section { background: #fff; padding: 90px 0; }
body.page-advertiser .how-cols { display: flex; gap: 60px; align-items: flex-start; }
body.page-advertiser .steps-side { flex: 1; }
body.page-advertiser .steps-track { position: relative; }
body.page-advertiser .steps-track::before {
content: ''; position: absolute;
left: 28px; top: 28px; bottom: 28px; width: 2px;
background: linear-gradient(180deg, var(--blue-dark), var(--blue-light)); opacity: .2;
}
body.page-advertiser .step-row {
display: flex; gap: 22px; align-items: flex-start;
padding: 18px 0; opacity: 0; transform: translateX(-20px);
transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
body.page-advertiser .step-row.visible { opacity: 1; transform: none; }
body.page-advertiser .step-num {
width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 600; color: #fff;
box-shadow: 0 8px 24px rgba(0,90,156,.3); position: relative; z-index: 1;
transition: transform .35s var(--ease-out);
}
body.page-advertiser .step-row:hover .step-num { transform: scale(1.08); }
body.page-advertiser .step-body { padding-top: 12px; }
body.page-advertiser .step-body h6 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
body.page-advertiser .step-body p { font-size: .88rem; color: var(--muted); margin: 0; }
body.page-advertiser .how-img { flex: 1; }
body.page-advertiser .how-img img { border-radius: 20px; box-shadow: 0 20px 60px rgba(0,90,156,.15); width: 100%; }
/* ===== LEAD FORM ===== */
body.page-advertiser .lead-form-section,
body.page-index .lead-form-section {
background: #f7f9ff;
padding: 90px 0;
}
body.page-advertiser .lead-form-wrap,
body.page-index .lead-form-wrap {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: 42px;
align-items: center;
background: #fff;
border: 1px solid rgba(0,90,156,.12);
border-radius: 24px;
padding: 46px;
box-shadow: 0 24px 70px rgba(24,32,79,.1);
position: relative;
overflow: hidden;
}
body.page-advertiser .lead-form-wrap::before,
body.page-index .lead-form-wrap::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 8px;
background: linear-gradient(180deg, var(--blue-dark), var(--blue-light));
}
body.page-advertiser .lead-form-copy,
body.page-advertiser .lead-form,
body.page-index .lead-form-copy,
body.page-index .lead-form {
position: relative;
z-index: 1;
}
body.page-advertiser .lead-form-copy .tag,
body.page-index .lead-form-copy .tag {
display: inline-flex;
align-items: center;
border-radius: 999px;
background: rgba(0,90,156,.1);
color: var(--blue-dark);
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 8px 14px;
}
body.page-advertiser .lead-form-copy h3,
body.page-index .lead-form-copy h3 {
font-size: clamp(1.65rem,2.5vw,2.35rem);
line-height: 1.18;
font-weight: 600;
margin: 14px 0;
color: var(--foreground);
}
body.page-advertiser .lead-form-copy p,
body.page-index .lead-form-copy p {
color: var(--muted);
font-size: 1rem;
line-height: 1.75;
max-width: 430px;
margin: 0;
}
body.page-advertiser .lead-form,
body.page-index .lead-form {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
}
body.page-advertiser .lead-field-full,
body.page-advertiser .lead-submit,
body.page-index .lead-field-full,
body.page-index .lead-submit {
grid-column: 1 / -1;
}
body.page-advertiser .lead-field label,
body.page-index .lead-field label {
display: block;
font-size: .82rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 8px;
}
body.page-advertiser .lead-field input,
body.page-advertiser .lead-field textarea,
body.page-index .lead-field input,
body.page-index .lead-field textarea {
width: 100%;
border: 1px solid rgba(15,46,109,.16);
border-radius: 14px;
background: #f8faff;
color: var(--foreground);
font: inherit;
font-size: .92rem;
padding: 14px 16px;
outline: none;
transition: border-color .25s, box-shadow .25s, background .25s;
}
body.page-advertiser .lead-field textarea,
body.page-index .lead-field textarea {
min-height: 118px;
resize: vertical;
}
body.page-advertiser .lead-field input:focus,
body.page-advertiser .lead-field textarea:focus,
body.page-index .lead-field input:focus,
body.page-index .lead-field textarea:focus {
border-color: var(--blue-light);
background: #fff;
box-shadow: 0 0 0 4px rgba(42,157,244,.14);
}
body.page-advertiser .lead-submit,
body.page-index .lead-submit {
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
color: #fff;
cursor: pointer;
font: inherit;
font-weight: 600;
padding: 15px 26px;
box-shadow: 0 12px 30px rgba(0,90,156,.25);
transition: transform .25s var(--ease-out), box-shadow .25s;
}
body.page-advertiser .lead-submit:hover,
body.page-index .lead-submit:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0,90,156,.3);
}
body.page-advertiser .lead-form-frame,
body.page-index .lead-form-frame {
position: absolute;
width: 1px;
height: 1px;
border: 0;
opacity: 0;
pointer-events: none;
}
/* ===== CTA ===== */
body.page-advertiser .cta-section {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 100px 0 0; overflow: hidden; position: relative;
}
body.page-advertiser .cta-section::before { content: ''; position: absolute; inset: 0; background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .1; }
body.page-advertiser .cta-inner { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 60px; }
body.page-advertiser .cta-text { flex: 1; padding-bottom: 80px; }
body.page-advertiser .cta-text h3 { font-size: clamp(2rem,3vw,2.8rem); color: #fff; font-weight: 600; line-height: 1.2; margin-bottom: 16px; }
body.page-advertiser .cta-text p { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 480px; margin-bottom: 32px; }
body.page-advertiser .btn-cta-white {
display: inline-block; background: #fff; color: var(--blue-dark);
font-weight: 600; font-size: .95rem;
padding: 16px 36px; border-radius: 50px;
box-shadow: 0 8px 30px rgba(0,0,0,.15); transition: all .35s var(--ease-out);
}
body.page-advertiser .btn-cta-white:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.22); color: var(--blue-dark); }
body.page-advertiser .cta-img-wrap { flex: 1; text-align: right; }
body.page-advertiser .cta-img-wrap img { max-width: 78%; margin-bottom: -4px; }
/* ===== FOOTER ===== */
body.page-advertiser .site-footer { background: var(--bg-gray); padding: 70px 0 0; }
body.page-advertiser .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 40px; padding-bottom: 50px; }
body.page-advertiser .footer-brand img { max-width: 140px; margin-bottom: 14px; }
body.page-advertiser .footer-brand p { font-size: .88rem; color: var(--muted); max-width: 220px; }
body.page-advertiser .site-footer h6 { font-size: .92rem; font-weight: 600; margin-bottom: 16px; }
body.page-advertiser .site-footer ul li { margin-bottom: 10px; }
body.page-advertiser .site-footer ul li a { font-size: .87rem; color: var(--muted); transition: color .25s; }
body.page-advertiser .site-footer ul li a:hover { color: var(--blue-dark); }
body.page-advertiser .footer-copy { border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0; text-align: center; font-size: .82rem; color: var(--muted); }
/* ===== REVEAL ===== */
body.page-advertiser .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-advertiser .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-advertiser .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-advertiser .reveal.visible, body.page-advertiser .reveal-left.visible, body.page-advertiser .reveal-right.visible { opacity: 1; transform: none; }
body.page-advertiser .delay-1 { transition-delay: .1s; }
body.page-advertiser .delay-2 { transition-delay: .2s; }
body.page-advertiser .delay-3 { transition-delay: .3s; }
body.page-advertiser .delay-4 { transition-delay: .4s; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
body.page-advertiser .formats-grid { grid-template-columns: repeat(3,1fr); }
body.page-advertiser .who-grid { grid-template-columns: repeat(3,1fr); }
body.page-advertiser .learn-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 991px) {
body.page-advertiser .what-grid { grid-template-columns: repeat(2,1fr); }
body.page-advertiser .who-grid { grid-template-columns: repeat(2,1fr); }
body.page-advertiser .ab-grid { grid-template-columns: repeat(2,1fr); }
body.page-advertiser .footer-grid { grid-template-columns: 1fr 1fr; }
body.page-advertiser .how-cols { flex-direction: column; }
body.page-advertiser .formats-grid { grid-template-columns: repeat(2,1fr); }
body.page-advertiser .ad-benefits { grid-template-columns: 1fr; }
body.page-advertiser .learn-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
body.page-advertiser .nav-menu { display: none; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
body.page-advertiser .nav-menu.open { display: flex; }
body.page-advertiser .nav-menu a { color: var(--foreground); width: 100%; padding: 10px 14px; }
body.page-advertiser .nav-btn-wrap { display: none; }
body.page-advertiser .nav-toggle { display: flex; }
body.page-advertiser .navbar { position: fixed; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); padding: 14px 0; }
body.page-advertiser .navbar .nav-toggle span { background: var(--foreground); }
body.page-advertiser .hero-content { padding: 120px 0 60px; }
body.page-advertiser .hero-actions { flex-direction: column; align-items: flex-start; }
body.page-advertiser .hero-img-wrap { display: none; }
body.page-advertiser .row { gap: 24px; }
body.page-advertiser .what-grid { grid-template-columns: 1fr; }
body.page-advertiser .who-grid { grid-template-columns: 1fr; }
body.page-advertiser .ab-grid { grid-template-columns: 1fr; }
body.page-advertiser .formats-grid { grid-template-columns: 1fr; }
body.page-advertiser .learn-grid { grid-template-columns: 1fr; }
body.page-advertiser .lead-form-wrap { grid-template-columns: 1fr; padding: 34px 24px; }
body.page-advertiser .lead-form { grid-template-columns: 1fr; }
body.page-advertiser .footer-grid { grid-template-columns: 1fr; gap: 24px; }
body.page-advertiser .social-sidebar { display: none; }
body.page-advertiser .cta-inner { flex-direction: column; }
body.page-advertiser .cta-img-wrap { text-align: center; }
}
/* index.html */
/* ===== RESET & TOKENS ===== */
body.page-index *, body.page-index *::before, body.page-index *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body.page-index {
--blue: #0057ff;
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227, 232, 255, 1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-io: cubic-bezier(0.77, 0, 0.18, 1);
}
body.page-index {
font-family: 'Poppins', sans-serif;
color: var(--foreground);
overflow-x: hidden;
line-height: 1.6;
}
body.page-index img {
max-width: 100%;
height: auto;
display: block;
}
body.page-index a {
text-decoration: none;
color: inherit;
transition: .3s;
}
body.page-index ul {
list-style: none;
padding: 0;
}
body.page-index li {
margin-bottom: 0;
}
/* ===== PRELOADER ===== */
body.page-index #preloader {
position: fixed;
inset: 0;
background: #fff;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-index #preloader.done {
opacity: 0;
visibility: hidden;
}
body.page-index #preloader-inner {
width: 260px;
height: 260px;
background: url('image/claimit-preloader.gif') center/cover no-repeat;
}
/* ===== SOCIAL SIDEBAR ===== */
body.page-index .social-sidebar {
position: fixed;
left: 25px;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
}
body.page-index .social-icon {
width: 32px;
height: 32px;
border-radius: 18px;
background: #fff;
color: #1e3a8a;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
transition: all .35s var(--ease-out);
}
body.page-index .social-icon:hover {
transform: translateX(8px) scale(1.08);
background: var(--yellow);
color: #0F2E6D;
}
body.page-index .social-icon.facebook:hover {
background: #1877f2;
color: #fff;
}
body.page-index .social-icon.instagram:hover {
background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
color: #fff;
}
body.page-index .social-icon.linkedin:hover {
background: #0077b5;
color: #fff;
}
body.page-index .social-icon.twitter:hover {
background: #000;
color: #fff;
}
body.page-index .social-icon.youtube:hover {
background: #ff0000;
color: #fff;
}
/* ===== NAVBAR ===== */
body.page-index .navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 28px 0;
z-index: 1000;
transition: padding .4s ease, background .4s ease, box-shadow .4s ease;
}
body.page-index .navbar.scrolled {
position: fixed;
padding: 16px 0;
background: #fff;
box-shadow: 0 2px 20px rgba(0, 0, 0, .1);
}
body.page-index .navbar .container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
body.page-index .navbar-brand #navLogo {
max-width: 140px;
transition: opacity .3s, filter .3s;
}
body.page-index .nav-menu {
display: flex;
align-items: center;
gap: 8px;
}
body.page-index .nav-menu a {
color: rgba(255, 255, 255, .9);
font-size: .92rem;
font-weight: 500;
padding: 8px 12px;
border-radius: 6px;
white-space: nowrap;
transition: all .25s;
}
body.page-index .nav-menu a:hover {
color: #fff;
background: rgba(255, 255, 255, .12);
}
body.page-index .navbar.scrolled .nav-menu a {
color: var(--foreground);
}
body.page-index .navbar.scrolled .nav-menu a:hover {
color: var(--blue-dark);
background: var(--bg-gray);
}
body.page-index .nav-btn {
display: inline-flex;
align-items: center;
background: #fff;
color: var(--blue-dark);
font-weight: 700;
font-size: .88rem;
padding: 11px 22px;
border-radius: 50px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
transition: all .3s;
}
body.page-index .nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0, 0, 0, .2);
color: var(--blue-dark);
}
body.page-index .navbar.scrolled .nav-btn {
background: var(--blue-dark);
color: #fff;
}
body.page-index .nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
padding: 6px;
cursor: pointer;
}
body.page-index .nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: all .35s var(--ease-out);
}
body.page-index .navbar.scrolled .nav-toggle span {
background: var(--foreground);
}
body.page-index .nav-toggle.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
body.page-index .nav-toggle.open span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
body.page-index .nav-toggle.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ===== SHARED ===== */
body.page-index .container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
body.page-index .row {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
body.page-index .row.align-center {
align-items: center;
}
body.page-index .grdnt-tranquil {
background: linear-gradient(135deg, #fed192, #9946b2);
}
body.page-index .grdnt-blue {
background: linear-gradient(90deg, #491eb8, #844ffc);
}
body.page-index .grdnt-cyan {
background: linear-gradient(45deg, #2fb8ff, #9eecd9);
}
body.page-index .grdnt-purple {
background: linear-gradient(135deg, #005A9C, #2A9DF4);
}
body.page-index .grdnt-green {
background: linear-gradient(135deg, #11998e, #38ef7d);
}
body.page-index .grdnt-orange {
background: linear-gradient(135deg, #f7971e, #ffd200);
}
body.page-index .grdnt-red {
background: linear-gradient(135deg, #c94b4b, #4b134f);
}
body.page-index .grdnt-teal {
background: linear-gradient(135deg, #43cea2, #185a9d);
}
/* ===== HERO ===== */
body.page-index .hero-merchant {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: url('image/hero-2.png') center center/cover no-repeat;
background-color: #0d2240;
overflow: hidden;
}
body.page-index .hero-merchant::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(115deg,
rgba(5, 15, 35, 0.92) 0%,
rgba(13, 34, 64, 0.82) 35%,
rgba(13, 34, 64, 0.55) 65%,
rgba(13, 34, 64, 0.25) 100%);
z-index: 1;
}
body.page-index .hero-merchant::after {
content: "";
position: absolute;
inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat;
opacity: 0.12;
z-index: 2;
}
body.page-index .hero-merchant .container, body.page-index .hero-merchant .row, body.page-index .hero-merchant .hero-content {
position: relative;
z-index: 3;
}
body.page-index .hero-content {
position: relative;
z-index: 2;
width: 100%;
padding: 20px 0 0px;
}
body.page-index .intro-text {
max-width: 560px;
}
body.page-index .eyebrow-tag {
display: inline-block;
background: rgba(255, 255, 255, .18);
color: #fff;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 30px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 7px 18px;
margin-bottom: 22px;
}
body.page-index .intro-text h2 {
color: #fff;
font-size: clamp(2.2rem, 4vw, 3.4rem);
font-weight: 600;
line-height: 1.15;
margin-bottom: 10px;
}
body.page-index .hero-subtitle {
color: var(--yellow);
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 18px;
letter-spacing: .5px;
}
body.page-index .intro-text p {
color: rgba(255, 255, 255, .88);
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 32px;
}
body.page-index .hero-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
body.page-index .btn-primary {
display: inline-flex;
align-items: center;
background: #fff;
color: var(--blue-dark);
font-weight: 600;
font-size: .95rem;
padding: 14px 32px;
border-radius: 50px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
transition: all .35s var(--ease-out);
}
body.page-index .btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
color: var(--blue-dark);
}
body.page-index .btn-secondary {
display: inline-flex;
align-items: center;
background: transparent;
color: #fff;
font-weight: 600;
font-size: .95rem;
padding: 14px 30px;
border-radius: 50px;
border: 1.5px solid rgba(255, 255, 255, .55);
transition: all .35s var(--ease-out);
}
body.page-index .btn-secondary:hover {
transform: translateY(-4px);
border-color: #fff;
background: rgba(255, 255, 255, .12);
box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
color: #fff;
}
body.page-index .hero-img-wrap {
flex: 1;
text-align: right;
}
body.page-index .hero-img-wrap img {
max-width: 90%;
margin-left: auto;
filter: drop-shadow(0 20px 50px rgba(0, 0, 0, .3));
}
/* hero text animation */
body.page-index .hero-content .eyebrow-tag, body.page-index .hero-content h2, body.page-index .hero-subtitle, body.page-index .hero-content p, body.page-index .hero-content .btn-primary, body.page-index .hero-content .btn-secondary {
opacity: 0;
transform: translateY(28px);
animation: heroIn .7s var(--ease-out) forwards;
}
body.page-index .hero-content h2 {
animation-delay: .15s;
}
body.page-index .hero-subtitle {
animation-delay: .22s;
}
body.page-index .hero-content p {
animation-delay: .30s;
}
body.page-index .hero-content .btn-primary {
animation-delay: .44s;
}
body.page-index .hero-content .btn-secondary {
animation-delay: .54s;
}
body.page-index .hero-img-wrap img {
opacity: 0;
transform: translateY(30px) scale(.97);
animation: heroIn .8s var(--ease-out) .2s forwards;
}
@keyframes heroIn {
to {
opacity: 1;
transform: none;
}
}
/* ===== SECTION HEAD ===== */
body.page-index .lp-section-head {
text-align: center;
margin-bottom: 60px;
}
body.page-index .lp-section-head .tag {
display: inline-block;
background: linear-gradient(90deg, rgba(0, 90, 156, .10), rgba(42, 157, 244, .10));
color: var(--blue-dark);
border-radius: 30px;
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
margin-bottom: 14px;
}
body.page-index .lp-section-head h4 {
font-size: clamp(1.6rem, 2.5vw, 2.4rem);
font-weight: 600;
margin-bottom: 14px;
}
body.page-index .lp-section-head p {
font-size: 1.05rem;
color: var(--muted);
max-width: 600px;
margin: 0 auto;
}
/* ===== WHAT CARDS ===== */
body.page-index .what-section {
background: linear-gradient(180deg, var(--bg-gray) 0%, rgba(227, 232, 255, 0) 100%);
padding: 90px 0;
}
body.page-index .what-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
body.page-index .what-card {
background: #fff;
border-radius: 24px;
padding: 36px 24px;
box-shadow: 0 16px 50px rgba(24, 32, 79, .09);
text-align: center;
transition: transform .4s var(--ease-out), box-shadow .4s;
}
body.page-index .what-card:hover {
transform: translateY(-8px);
box-shadow: 0 28px 70px rgba(24, 32, 79, .15);
}
body.page-index .wc-icon {
width: 68px;
height: 68px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
margin: 0 auto 20px;
transition: transform .4s var(--ease-out);
}
body.page-index .what-card:hover .wc-icon {
transform: scale(1.1) rotate(-5deg);
}
body.page-index .what-card h5 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 10px;
}
body.page-index .what-card p {
font-size: .88rem;
color: var(--muted);
margin: 0;
}
/* ===== WHO CAN JOIN ===== */
body.page-index .who-section {
background: #fff;
padding: 90px 0;
}
body.page-index .who-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
body.page-index .who-card {
background: #fff;
border-radius: 20px;
padding: 28px 20px;
box-shadow: 0 8px 32px rgba(24, 32, 79, .08);
text-align: center;
border: 1px solid rgba(227, 232, 255, .9);
transition: transform .35s var(--ease-out), box-shadow .35s;
}
body.page-index .who-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 54px rgba(24, 32, 79, .14);
}
body.page-index .who-icon {
width: 64px;
height: 64px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
margin: 0 auto 16px;
transition: transform .4s var(--ease-out);
}
body.page-index .who-card:hover .who-icon {
transform: scale(1.1) rotate(-5deg);
}
body.page-index .who-card h5 {
font-size: .97rem;
font-weight: 600;
margin-bottom: 12px;
color: var(--foreground);
}
body.page-index .who-card ul {
list-style: none;
padding: 0;
}
body.page-index .who-card ul li {
font-size: .82rem;
color: var(--muted);
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, .05);
line-height: 1.4;
}
body.page-index .who-card ul li:last-child {
border-bottom: none;
}
/* ===== ZONE SECTIONS ===== */
body.page-index .zone-section {
padding: 90px 0;
}
body.page-index .zone-section.bg-blue {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
}
body.page-index .zone-section.bg-white {
background: #fff;
}
body.page-index .zone-half {
flex: 1;
min-width: 280px;
}
body.page-index .zone-tag {
display: inline-block;
border-radius: 30px;
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
margin-bottom: 16px;
}
body.page-index .on-blue .zone-tag {
background: rgba(255, 255, 255, .18);
color: #fff;
}
body.page-index .on-white .zone-tag {
background: linear-gradient(90deg, rgba(0, 90, 156, .10), rgba(42, 157, 244, .10));
color: var(--blue-dark);
}
body.page-index .on-blue h4 {
color: #fff;
}
body.page-index .on-white h4 {
color: var(--foreground);
}
body.page-index .on-blue p {
color: rgba(255, 255, 255, .85);
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 30px;
}
body.page-index .on-white p {
color: var(--muted);
font-size: 1.02rem;
line-height: 1.75;
margin-bottom: 30px;
}
body.page-index .zone-text h4 {
font-size: clamp(1.5rem, 2.5vw, 2.2rem);
font-weight: 600;
margin-bottom: 14px;
}
body.page-index .benefit-list {
margin: 0;
}
body.page-index .benefit-list li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid rgba(255, 255, 255, .12);
transition: transform .3s;
}
body.page-index .benefit-list li:hover {
transform: translateX(5px);
}
body.page-index .benefit-list li:last-child {
border-bottom: none;
}
body.page-index .on-white .benefit-list li {
border-color: rgba(0, 0, 0, .06);
}
body.page-index .bl-icon {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 12px;
flex-shrink: 0;
background: rgba(255, 255, 255, .18);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
}
body.page-index .on-white .bl-icon {
background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
}
body.page-index .bl-text strong {
display: block;
font-size: .93rem;
font-weight: 600;
color: #fff;
margin-bottom: 3px;
}
body.page-index .on-white .bl-text strong {
color: var(--foreground);
}
body.page-index .bl-text span {
font-size: .85rem;
color: rgba(255, 255, 255, .75);
}
body.page-index .on-white .bl-text span {
color: var(--muted);
}
body.page-index .zone-img-wrap {
flex: 1;
text-align: center;
min-width: 260px;
}
body.page-index .zone-img-wrap img {
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 90, 156, .2);
max-width: 85%;
margin: 0 auto;
transition: transform .5s var(--ease-out);
}
body.page-index .zone-img-wrap:hover img {
transform: translateY(-8px);
}
/* ===== ADDITIONAL BENEFITS ===== */
body.page-index .add-benefits {
background: rgba(227, 232, 255, .55);
padding: 90px 0;
}
body.page-index .ab-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
body.page-index .ab-card {
background: #fff;
border-radius: 20px;
padding: 28px 22px;
box-shadow: 0 8px 32px rgba(24, 32, 79, .07);
display: flex;
align-items: flex-start;
gap: 16px;
transition: transform .35s var(--ease-out), box-shadow .35s;
}
body.page-index .ab-card:hover {
transform: translateX(6px);
box-shadow: 0 16px 50px rgba(24, 32, 79, .12);
}
body.page-index .ab-icon {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 14px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
}
body.page-index .ab-body h6 {
font-size: .95rem;
font-weight: 600;
margin-bottom: 5px;
}
body.page-index .ab-body p {
font-size: .85rem;
color: var(--muted);
margin: 0;
}
/* ===== VIDEO / LEARN SECTION ===== */
body.page-index .video-section {
background:
radial-gradient(circle at top left, rgba(42, 157, 244, .12), transparent 28%),
linear-gradient(180deg, #f6f8ff 0%, #edf2ff 100%);
padding: 92px 0 100px;
}
body.page-index .video-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
body.page-index .video-card {
appearance: none;
border: 0;
padding: 0;
width: 100%;
display: block;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
background: #fff;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 18px 45px rgba(15, 38, 84, .08);
transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
body.page-index .video-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 60px rgba(15, 38, 84, .14);
}
body.page-index .video-card-media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: linear-gradient(135deg, #dde7ff, #c8d8ff);
}
body.page-index .video-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.01);
transition: transform .45s var(--ease-out);
}
body.page-index .video-card:hover .video-card-media img {
transform: scale(1.08);
}
body.page-index .video-card-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(6, 14, 32, .08) 0%, rgba(6, 14, 32, .22) 100%);
}
body.page-index .video-card-play {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
body.page-index .video-card-play .play-core {
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
color: var(--blue-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
position: relative;
}
body.page-index .video-card-play .play-core::before, body.page-index .video-card-play .play-core::after {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .55);
animation: pulse-ring 2s infinite;
}
body.page-index .video-card-play .play-core::after {
inset: -18px;
animation-delay: .7s;
}
body.page-index .video-card-body {
padding: 18px 18px 20px;
}
body.page-index .video-card-body h5 {
margin: 0 0 6px;
font-size: 1.05rem;
line-height: 1.35;
color: #101828;
}
body.page-index .video-card-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: .9rem;
color: #6c7a9b;
}
body.page-index .video-card-meta i {
color: #7f90bb;
}
body.page-index .learn-more-cta,
body.page-advertiser .learn-more-cta {
display: flex;
justify-content: center;
margin-top: 38px;
}
body.page-index .btn-learn-more,
body.page-advertiser .btn-learn-more {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 30px;
border-radius: 999px;
background: var(--blue-dark);
color: #fff;
font-weight: 600;
font-size: .95rem;
box-shadow: 0 14px 34px rgba(0, 90, 156, .22);
transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
body.page-index .btn-learn-more:hover,
body.page-advertiser .btn-learn-more:hover {
transform: translateY(-3px);
background: var(--blue-mid);
color: #fff;
box-shadow: 0 18px 44px rgba(0, 90, 156, .3);
}
body.page-index .video-modal {
position: fixed;
inset: 0;
background: rgba(5, 10, 20, .82);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
}
body.page-index .video-modal.active {
display: flex;
}
body.page-index .video-modal-content {
width: min(1020px, 100%);
position: relative;
}
body.page-index .video-modal-frame {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
body.page-index .video-modal-frame iframe {
width: 100%;
display: block;
aspect-ratio: 16 / 9;
border: 0;
}
body.page-index .video-modal-caption {
background: rgba(255, 255, 255, .96);
padding: 18px 20px 20px;
}
body.page-index .video-modal-caption h5 {
margin: 0 0 6px;
font-size: 1.1rem;
color: #101828;
}
body.page-index .video-modal-caption p {
margin: 0;
color: #5d6a85;
line-height: 1.6;
font-size: .96rem;
}
body.page-index .close-video {
position: absolute;
top: -46px;
right: 0;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
@keyframes pulse-ring {
from {
transform: scale(1);
opacity: .7;
}
to {
transform: scale(1.7);
opacity: 0;
}
}
/* ===== ALL LEARN VIDEOS PAGE ===== */
body.page-index.page-learn-videos {
background: #f6f8ff;
}
body.page-index.page-learn-videos .navbar {
position: fixed;
}
body.page-index.page-learn-videos .policy-hero {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 150px 0 86px;
text-align: center;
position: relative;
overflow: hidden;
}
body.page-index.page-learn-videos .policy-hero::before {
content: "";
position: absolute;
inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat;
opacity: .1;
}
body.page-index.page-learn-videos .policy-hero-inner {
width: 90%;
max-width: 820px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
body.page-index.page-learn-videos .policy-hero .eyebrow {
display: inline-block;
background: rgba(255,255,255,.18);
color: #fff;
border: 1px solid rgba(255,255,255,.3);
border-radius: 30px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 7px 20px;
margin-bottom: 20px;
}
body.page-index.page-learn-videos .policy-hero h1 {
color: #fff;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.12;
font-weight: 800;
margin: 0 0 12px;
}
body.page-index.page-learn-videos .policy-hero p {
color: rgba(255,255,255,.85);
font-size: 1rem;
line-height: 1.75;
margin: 0 auto;
max-width: 720px;
}
body.page-index.page-learn-videos .policy-hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}
body.page-index.page-learn-videos .learn-library-section {
padding: 96px 0;
}
body.page-index.page-learn-videos .learn-library-section.alt {
background:
radial-gradient(circle at top right, rgba(255,213,74,.2), transparent 30%),
linear-gradient(180deg, #fff 0%, #edf2ff 100%);
}
body.page-index.page-learn-videos .learn-page-cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
body.page-index.page-learn-videos .btn-cta-white.secondary {
background: rgba(255,255,255,.14);
border: 1.5px solid rgba(255,255,255,.48);
color: #fff;
}
body.page-index.page-learn-videos .btn-cta-white.secondary:hover {
background: rgba(255,255,255,.22);
color: #fff;
}
/* ===== HOW IT WORKS ===== */
body.page-index .how-section {
background: #fff;
padding: 90px 0;
}
body.page-index .how-cols {
display: flex;
gap: 60px;
align-items: flex-start;
}
body.page-index .steps-side {
flex: 1;
}
body.page-index .steps-track {
position: relative;
}
body.page-index .steps-track::before {
content: '';
position: absolute;
left: 28px;
top: 28px;
bottom: 28px;
width: 2px;
background: linear-gradient(180deg, var(--blue-dark), var(--blue-light));
opacity: .2;
}
body.page-index .step-row {
display: flex;
gap: 22px;
align-items: flex-start;
padding: 18px 0;
opacity: 0;
transform: translateX(-20px);
transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
body.page-index .step-row.visible {
opacity: 1;
transform: none;
}
body.page-index .step-num {
width: 58px;
height: 58px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
color: #fff;
box-shadow: 0 8px 24px rgba(0, 90, 156, .3);
position: relative;
z-index: 1;
transition: transform .35s var(--ease-out);
}
body.page-index .step-row:hover .step-num {
transform: scale(1.08);
}
body.page-index .step-body {
padding-top: 12px;
}
body.page-index .step-body h6 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
}
body.page-index .step-body p {
font-size: .88rem;
color: var(--muted);
margin: 0;
}
body.page-index .how-img {
flex: 1;
}
body.page-index .how-img img {
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 90, 156, .15);
width: 100%;
}
/* ===== CTA ===== */
body.page-index .cta-section {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 100px 0 0;
overflow: hidden;
position: relative;
}
body.page-index .cta-section::before {
content: '';
position: absolute;
inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat;
opacity: .1;
}
body.page-index .cta-inner {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
gap: 60px;
}
body.page-index .cta-text {
flex: 1;
padding-bottom: 80px;
}
body.page-index .cta-text h3 {
font-size: clamp(2rem, 3vw, 2.8rem);
color: #fff;
font-weight: 600;
line-height: 1.2;
margin-bottom: 16px;
}
body.page-index .cta-text p {
font-size: 1.05rem;
color: rgba(255, 255, 255, .85);
max-width: 480px;
margin-bottom: 32px;
}
body.page-index .btn-cta-white {
display: inline-block;
background: #fff;
color: var(--blue-dark);
font-weight: 600;
font-size: .95rem;
padding: 16px 36px;
border-radius: 50px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .15);
transition: all .35s var(--ease-out);
}
body.page-index .btn-cta-white:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
color: var(--blue-dark);
}
body.page-index .cta-img-wrap {
flex: 1;
text-align: right;
}
body.page-index .cta-img-wrap img {
max-width: 78%;
margin-bottom: -4px;
}
/* ===== FOOTER ===== */
body.page-index .site-footer {
background: var(--bg-gray);
padding: 70px 0 0;
}
body.page-index .footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 50px;
}
body.page-index .footer-brand img {
max-width: 140px;
margin-bottom: 14px;
}
body.page-index .footer-brand p {
font-size: .88rem;
color: var(--muted);
max-width: 220px;
}
body.page-index .site-footer h6 {
font-size: .92rem;
font-weight: 600;
margin-bottom: 16px;
}
body.page-index .site-footer ul li {
margin-bottom: 10px;
}
body.page-index .site-footer ul li a {
font-size: .87rem;
color: var(--muted);
transition: color .25s;
}
body.page-index .site-footer ul li a:hover {
color: var(--blue-dark);
}
body.page-index .footer-copy {
border-top: 1px solid rgba(0, 0, 0, .1);
padding: 22px 0;
text-align: center;
font-size: .82rem;
color: var(--muted);
}
/* ===== REVEAL ===== */
body.page-index .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
body.page-index .reveal-left {
opacity: 0;
transform: translateX(-32px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
body.page-index .reveal-right {
opacity: 0;
transform: translateX(32px);
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
body.page-index .reveal.visible, body.page-index .reveal-left.visible, body.page-index .reveal-right.visible {
opacity: 1;
transform: none;
}
body.page-index .delay-1 {
transition-delay: .1s;
}
body.page-index .delay-2 {
transition-delay: .2s;
}
body.page-index .delay-3 {
transition-delay: .3s;
}
body.page-index .delay-4 {
transition-delay: .4s;
}
body.page-index .delay-5 {
transition-delay: .5s;
}
body.page-index .delay-6 {
transition-delay: .6s;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
body.page-index .what-grid {
grid-template-columns: repeat(2, 1fr);
}
body.page-index .who-grid {
grid-template-columns: repeat(2, 1fr);
}
body.page-index .ab-grid {
grid-template-columns: repeat(2, 1fr);
}
body.page-index .video-grid {
grid-template-columns: repeat(2, 1fr);
}
body.page-index .footer-grid {
grid-template-columns: 1fr 1fr;
}
body.page-index .how-cols {
flex-direction: column;
}
}
@media (max-width: 768px) {
body.page-index .nav-menu {
display: none;
flex-direction: column;
align-items: flex-start;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
padding: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
body.page-index .nav-menu.open {
display: flex;
}
body.page-index .nav-menu a {
color: var(--foreground);
width: 100%;
padding: 10px 14px;
}
body.page-index .nav-btn-wrap {
display: none;
}
body.page-index .nav-toggle {
display: flex;
}
body.page-index .navbar {
position: fixed;
background: rgba(255, 255, 255, .95);
backdrop-filter: blur(10px);
padding: 14px 0;
}
body.page-index .navbar .nav-toggle span {
background: var(--foreground);
}
body.page-index .hero-content {
padding: 120px 0 60px;
}
body.page-index .hero-actions {
flex-direction: column;
align-items: flex-start;
}
body.page-index .hero-img-wrap {
display: none;
}
body.page-index .row {
gap: 24px;
}
body.page-index .what-grid {
grid-template-columns: 1fr;
}
body.page-index .who-grid {
grid-template-columns: repeat(2, 1fr);
}
body.page-index .ab-grid {
grid-template-columns: 1fr;
}
body.page-index .video-grid {
grid-template-columns: 1fr;
}
body.page-index .lead-form-wrap {
grid-template-columns: 1fr;
padding: 34px 24px;
}
body.page-index .lead-form {
grid-template-columns: 1fr;
}
body.page-index .footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
body.page-index .social-sidebar {
display: none;
}
body.page-index .cta-inner {
flex-direction: column;
}
body.page-index.page-learn-videos .policy-hero {
min-height: auto;
padding: 118px 0 70px;
}
body.page-index.page-learn-videos .navbar {
background: rgba(5, 15, 35, .96);
}
body.page-index.page-learn-videos .navbar.scrolled {
background: rgba(255, 255, 255, .95);
}
body.page-index.page-learn-videos .navbar .nav-toggle span {
background: #fff;
}
body.page-index.page-learn-videos .navbar.scrolled .nav-toggle span {
background: var(--foreground);
}
body.page-index.page-learn-videos .policy-hero h1 {
font-size: 2.3rem;
}
body.page-index.page-learn-videos .learn-library-section {
padding: 72px 0;
}
body.page-index.page-learn-videos .learn-page-cta-row {
flex-direction: column;
align-items: flex-start;
}
body.page-index .cta-img-wrap {
text-align: center;
}
}
/* merchant-faqs.html */
/* ===== RESET & TOKENS ===== */
body.page-merchant-faqs *, body.page-merchant-faqs *::before, body.page-merchant-faqs *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.page-merchant-faqs {
--blue: #0057ff;
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227,232,255,1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-merchant-faqs { font-family: 'Poppins', sans-serif; color: var(--foreground); overflow-x: hidden; line-height: 1.6; }
body.page-merchant-faqs img { max-width: 100%; height: auto; display: block; }
body.page-merchant-faqs a { text-decoration: none; color: inherit; transition: .3s; }
body.page-merchant-faqs ul { list-style: none; padding: 0; }
/* ===== PRELOADER ===== */
body.page-merchant-faqs #preloader {
position: fixed; inset: 0; background: #fff;
z-index: 10000; display: flex; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-merchant-faqs #preloader.done { opacity: 0; visibility: hidden; }
body.page-merchant-faqs #preloader-inner { width: 260px; height: 260px; background: url('image/claimit-loader.gif') center/cover no-repeat; }
/* ===== SOCIAL SIDEBAR ===== */
body.page-merchant-faqs .social-sidebar {
position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 12px;
}
body.page-merchant-faqs .social-icon {
width: 32px; height: 32px; border-radius: 18px;
background: #fff; color: #1e3a8a; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transition: all .35s var(--ease-out);
}
body.page-merchant-faqs .social-icon:hover { transform: translateX(8px) scale(1.08); background: var(--yellow); color: #0F2E6D; }
body.page-merchant-faqs .social-icon.facebook:hover { background: #1877f2; color: #fff; }
body.page-merchant-faqs .social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
body.page-merchant-faqs .social-icon.linkedin:hover { background: #0077b5; color: #fff; }
body.page-merchant-faqs .social-icon.twitter:hover { background: #000; color: #fff; }
body.page-merchant-faqs .social-icon.youtube:hover { background: #ff0000; color: #fff; }
/* ===== NAVBAR ===== */
body.page-merchant-faqs .navbar {
position: fixed; top: 0; left: 0; right: 0;
padding: 16px 0; background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,.10);
z-index: 1000;
}
body.page-merchant-faqs .navbar .container {
width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
}
body.page-merchant-faqs .navbar-brand img { max-width: 140px; }
body.page-merchant-faqs .nav-menu { display: flex; align-items: center; gap: 8px; }
body.page-merchant-faqs .nav-menu a {
color: var(--foreground); font-size: .92rem; font-weight: 500;
padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: all .25s;
}
body.page-merchant-faqs .nav-menu a:hover { color: var(--blue-dark); background: var(--bg-gray); }
body.page-merchant-faqs .nav-btn {
display: inline-flex; align-items: center;
background: var(--blue-dark); color: #fff;
font-weight: 700; font-size: .88rem;
padding: 11px 22px; border-radius: 50px;
transition: all .3s; box-shadow: 0 4px 16px rgba(0,90,156,.25);
}
body.page-merchant-faqs .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,90,156,.35); color: #fff; }
body.page-merchant-faqs .nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: 6px; cursor: pointer;
}
body.page-merchant-faqs .nav-toggle span {
display: block; width: 24px; height: 2px;
background: var(--foreground); border-radius: 2px;
transition: all .35s var(--ease-out);
}
body.page-merchant-faqs .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.page-merchant-faqs .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.page-merchant-faqs .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== CONTAINER ===== */
body.page-merchant-faqs .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* ===== FAQ HERO BAND ===== */
body.page-merchant-faqs .faq-hero {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 140px 0 80px; text-align: center; position: relative; overflow: hidden;
}
body.page-merchant-faqs .faq-hero::before {
content: ''; position: absolute; inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .1;
}
body.page-merchant-faqs .faq-hero-inner { position: relative; z-index: 2; }
body.page-merchant-faqs .faq-hero .eyebrow {
display: inline-block; background: rgba(255,255,255,.18); color: #fff;
border: 1px solid rgba(255,255,255,.3); border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
padding: 7px 20px; margin-bottom: 20px;
}
body.page-merchant-faqs .faq-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 600; color: #fff; margin-bottom: 16px; }
body.page-merchant-faqs .faq-hero p { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 520px; margin: 0 auto; }
/* ===== FAQ SEARCH ===== */
body.page-merchant-faqs .faq-search-wrap { background: #fff; padding: 40px 0 0; }
body.page-merchant-faqs .faq-search {
max-width: 560px; margin: 0 auto;
display: flex; align-items: center; gap: 0;
background: var(--bg-gray); border-radius: 50px; overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,.07);
border: 2px solid transparent;
transition: border .3s, box-shadow .3s;
}
body.page-merchant-faqs .faq-search:focus-within { border-color: var(--blue-dark); box-shadow: 0 4px 32px rgba(0,90,156,.15); }
body.page-merchant-faqs .faq-search i { padding: 0 16px; color: var(--muted); font-size: 16px; }
body.page-merchant-faqs .faq-search input {
flex: 1; border: none; outline: none; background: transparent;
padding: 14px 0; font-size: .95rem; font-family: 'Poppins', sans-serif;
color: var(--foreground);
}
body.page-merchant-faqs .faq-search input::placeholder { color: var(--muted); }
/* ===== FAQ MAIN ===== */
body.page-merchant-faqs .faq-section { background: #fff; padding: 50px 0 100px; }
body.page-merchant-faqs .faq-count { text-align: center; margin-bottom: 40px; color: var(--muted); font-size: .9rem; }
body.page-merchant-faqs .faq-count span { color: var(--blue-dark); font-weight: 600; }
body.page-merchant-faqs .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
body.page-merchant-faqs .faq-item {
background: #fff; border: 1.5px solid #edf2f7;
border-radius: 18px; overflow: hidden;
box-shadow: 0 4px 16px rgba(15,23,42,.05);
transition: border-color .3s, box-shadow .3s, transform .35s var(--ease-out);
}
body.page-merchant-faqs .faq-item:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(15,23,42,.09); }
body.page-merchant-faqs .faq-item.active { border-color: var(--blue-dark); box-shadow: 0 8px 32px rgba(0,90,156,.12); }
body.page-merchant-faqs .faq-question {
width: 100%; background: none; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 20px 24px;
font-family: 'Poppins', sans-serif; text-align: left;
font-size: .97rem; font-weight: 600; color: var(--foreground);
transition: color .25s;
}
body.page-merchant-faqs .faq-item.active .faq-question { color: var(--blue-dark); }
body.page-merchant-faqs .faq-icon {
width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
background: var(--bg-gray); color: var(--blue-dark); font-size: 16px;
display: flex; align-items: center; justify-content: center;
transition: transform .4s var(--ease-out), background .3s, color .3s;
font-weight: 600;
}
body.page-merchant-faqs .faq-item.active .faq-icon {
background: var(--blue-dark); color: #fff;
transform: rotate(45deg);
}
body.page-merchant-faqs .faq-answer {
max-height: 0; overflow: hidden;
transition: max-height .45s var(--ease-out), padding .35s ease;
padding: 0 24px;
}
body.page-merchant-faqs .faq-item.active .faq-answer { max-height: 300px; padding: 0 24px 20px; }
body.page-merchant-faqs .faq-answer p { font-size: .92rem; line-height: 1.75; color: var(--text); }
/* No results */
body.page-merchant-faqs .faq-empty {
text-align: center; padding: 60px 20px; display: none;
}
body.page-merchant-faqs .faq-empty i { font-size: 48px; color: var(--bg-gray); margin-bottom: 16px; }
body.page-merchant-faqs .faq-empty p { color: var(--muted); font-size: .95rem; }
/* ===== FOOTER ===== */
body.page-merchant-faqs .site-footer { background: var(--bg-gray); padding: 70px 0 0; }
body.page-merchant-faqs .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 40px; padding-bottom: 50px; }
body.page-merchant-faqs .footer-brand img { max-width: 140px; margin-bottom: 14px; }
body.page-merchant-faqs .footer-brand p { font-size: .88rem; color: var(--muted); max-width: 220px; }
body.page-merchant-faqs .site-footer h6 { font-size: .92rem; font-weight: 600; margin-bottom: 16px; }
body.page-merchant-faqs .site-footer ul li { margin-bottom: 10px; }
body.page-merchant-faqs .site-footer ul li a { font-size: .87rem; color: var(--muted); transition: color .25s; }
body.page-merchant-faqs .site-footer ul li a:hover { color: var(--blue-dark); }
body.page-merchant-faqs .footer-copy {
border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0;
text-align: center; font-size: .82rem; color: var(--muted);
}
/* ===== REVEAL ===== */
body.page-merchant-faqs .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-merchant-faqs .reveal.visible { opacity: 1; transform: none; }
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
body.page-merchant-faqs .nav-menu { display: none; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
body.page-merchant-faqs .nav-menu.open { display: flex; }
body.page-merchant-faqs .nav-menu a { width: 100%; padding: 10px 14px; }
body.page-merchant-faqs .nav-btn-wrap { display: none; }
body.page-merchant-faqs .nav-toggle { display: flex; }
body.page-merchant-faqs .footer-grid { grid-template-columns: 1fr; gap: 28px; }
body.page-merchant-faqs .social-sidebar { display: none; }
body.page-merchant-faqs .faq-question { font-size: .9rem; padding: 16px 18px; }
body.page-merchant-faqs .faq-answer { padding: 0 18px; }
body.page-merchant-faqs .faq-item.active .faq-answer { padding: 0 18px 16px; }
}
/* merchant-terms-and-conditions.html */
/* ===== RESET & TOKENS ===== */
body.page-merchant-terms *, body.page-merchant-terms *::before, body.page-merchant-terms *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.page-merchant-terms {
--blue: #0057ff;
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227,232,255,1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-merchant-terms { font-family: 'Poppins', sans-serif; color: var(--foreground); overflow-x: hidden; line-height: 1.6; }
body.page-merchant-terms img { max-width: 100%; height: auto; display: block; }
body.page-merchant-terms a { text-decoration: none; color: inherit; transition: .3s; }
body.page-merchant-terms ul { list-style: none; padding: 0; }
/* ===== PRELOADER ===== */
body.page-merchant-terms #preloader {
position: fixed; inset: 0; background: #fff;
z-index: 10000; display: flex; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-merchant-terms #preloader.done { opacity: 0; visibility: hidden; }
body.page-merchant-terms #preloader-inner { width: 260px; height: 260px; background: url('image/claimit-loader.gif') center/cover no-repeat; }
/* ===== SOCIAL SIDEBAR ===== */
body.page-merchant-terms .social-sidebar {
position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 12px;
}
body.page-merchant-terms .social-icon {
width: 32px; height: 32px; border-radius: 18px;
background: #fff; color: #1e3a8a; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transition: all .35s var(--ease-out);
}
body.page-merchant-terms .social-icon:hover { transform: translateX(8px) scale(1.08); background: var(--yellow); color: #0F2E6D; }
body.page-merchant-terms .social-icon.facebook:hover { background: #1877f2; color: #fff; }
body.page-merchant-terms .social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
body.page-merchant-terms .social-icon.linkedin:hover { background: #0077b5; color: #fff; }
body.page-merchant-terms .social-icon.twitter:hover { background: #000; color: #fff; }
body.page-merchant-terms .social-icon.youtube:hover { background: #ff0000; color: #fff; }
/* ===== NAVBAR ===== */
body.page-merchant-terms .navbar {
position: fixed; top: 0; left: 0; right: 0;
padding: 16px 0; background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,.10);
z-index: 1000;
}
body.page-merchant-terms .navbar .container {
width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
}
body.page-merchant-terms .navbar-brand img { max-width: 140px; }
body.page-merchant-terms .nav-menu { display: flex; align-items: center; gap: 8px; }
body.page-merchant-terms .nav-menu a {
color: var(--foreground); font-size: .92rem; font-weight: 500;
padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: all .25s;
}
body.page-merchant-terms .nav-menu a:hover { color: var(--blue-dark); background: var(--bg-gray); }
body.page-merchant-terms .nav-btn {
display: inline-flex; align-items: center;
background: var(--blue-dark); color: #fff;
font-weight: 700; font-size: .88rem;
padding: 11px 22px; border-radius: 50px;
transition: all .3s; box-shadow: 0 4px 16px rgba(0,90,156,.25);
}
body.page-merchant-terms .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,90,156,.35); color: #fff; }
body.page-merchant-terms .nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: 6px; cursor: pointer;
}
body.page-merchant-terms .nav-toggle span {
display: block; width: 24px; height: 2px;
background: var(--foreground); border-radius: 2px;
transition: all .35s var(--ease-out);
}
body.page-merchant-terms .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.page-merchant-terms .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.page-merchant-terms .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== CONTAINER ===== */
body.page-merchant-terms .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* ===== POLICY HERO ===== */
body.page-merchant-terms .policy-hero {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 140px 0 80px; text-align: center; position: relative; overflow: hidden;
}
body.page-merchant-terms .policy-hero::before {
content: ''; position: absolute; inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .1;
}
body.page-merchant-terms .policy-hero::after {
content: ''; position: absolute;
width: 500px; height: 500px; border-radius: 50%;
background: rgba(255,255,255,.04);
top: -120px; right: -100px;
animation: orb-drift 8s ease-in-out infinite alternate;
}
@keyframes orb-drift {
0% { transform: translate(0,0) scale(1); }
100% { transform: translate(-40px, 30px) scale(1.08); }
}
body.page-merchant-terms .hero-orb2 {
position: absolute; width: 300px; height: 300px; border-radius: 50%;
background: rgba(255,255,255,.05);
bottom: -80px; left: -60px;
animation: orb-drift2 10s ease-in-out infinite alternate;
}
@keyframes orb-drift2 {
0% { transform: translate(0,0) scale(1); }
100% { transform: translate(30px,-20px) scale(1.1); }
}
body.page-merchant-terms .policy-hero-inner { position: relative; z-index: 2; }
body.page-merchant-terms .policy-hero .eyebrow {
display: inline-block; background: rgba(255,255,255,.18); color: #fff;
border: 1px solid rgba(255,255,255,.3); border-radius: 30px;
font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
padding: 7px 20px; margin-bottom: 20px;
animation: fade-up .8s var(--ease-out) both;
}
body.page-merchant-terms .policy-hero h1 {
font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; margin-bottom: 16px;
animation: fade-up .8s .15s var(--ease-out) both;
}
body.page-merchant-terms .policy-hero p {
font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 520px; margin: 0 auto;
animation: fade-up .8s .25s var(--ease-out) both;
}
body.page-merchant-terms .hero-meta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 24px; background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2); border-radius: 50px;
padding: 8px 20px; font-size: .83rem; color: rgba(255,255,255,.8);
animation: fade-up .8s .35s var(--ease-out) both;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ===== PROGRESS BAR ===== */
body.page-merchant-terms .reading-progress {
position: fixed; top: 0; left: 0; height: 3px; width: 0%;
background: linear-gradient(90deg, var(--blue-dark), var(--blue-light));
z-index: 9999; transition: width .1s linear;
}
/* ===== POLICY BODY ===== */
body.page-merchant-terms .policy-body { background: #fff; padding: 60px 0 100px; }
body.page-merchant-terms .policy-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start; }
/* ===== STICKY TOC ===== */
body.page-merchant-terms .toc {
position: sticky; top: 130px;
background: var(--bg-gray); border-radius: 20px;
padding: 28px 24px; max-height: calc(100vh - 150px);
overflow-y: auto;
}
body.page-merchant-terms .toc::-webkit-scrollbar { width: 4px; }
body.page-merchant-terms .toc::-webkit-scrollbar-thumb { background: rgba(0,90,156,.2); border-radius: 4px; }
body.page-merchant-terms .toc h3 { font-size: .78rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
body.page-merchant-terms .toc ul { display: flex; flex-direction: column; gap: 4px; }
body.page-merchant-terms .toc li a {
font-size: .82rem; color: var(--text); padding: 7px 12px; border-radius: 10px;
display: block; font-weight: 500; transition: all .25s; border-left: 2px solid transparent;
}
body.page-merchant-terms .toc li a:hover { color: var(--blue-dark); background: rgba(0,90,156,.06); }
body.page-merchant-terms .toc li a.active { color: var(--blue-dark); background: rgba(0,90,156,.08); border-left-color: var(--blue-dark); font-weight: 600; }
/* ===== SECTIONS ===== */
body.page-merchant-terms .policy-sections { display: flex; flex-direction: column; gap: 36px; }
body.page-merchant-terms .policy-section {
background: #fff; border: 1.5px solid #edf2f7;
border-radius: 20px; padding: 32px 36px;
box-shadow: 0 4px 16px rgba(15,23,42,.04);
transition: border-color .35s, box-shadow .35s, transform .5s var(--ease-out);
position: relative; overflow: hidden;
}
body.page-merchant-terms .policy-section::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px; background: linear-gradient(180deg, var(--blue-dark), var(--blue-light));
transform: scaleY(0); transform-origin: top;
transition: transform .45s var(--ease-out);
border-radius: 0 2px 2px 0;
}
body.page-merchant-terms .policy-section:hover { border-color: rgba(0,90,156,.2); box-shadow: 0 12px 40px rgba(15,23,42,.08); transform: translateX(3px); }
body.page-merchant-terms .policy-section:hover::before { transform: scaleY(1); }
body.page-merchant-terms .section-num {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px;
background: var(--bg-gray); color: var(--blue-dark); font-size: .78rem;
font-weight: 800; margin-bottom: 14px;
transition: background .3s, color .3s, transform .3s;
}
body.page-merchant-terms .policy-section:hover .section-num { background: var(--blue-dark); color: #fff; transform: scale(1.1); }
body.page-merchant-terms .policy-section h2 {
font-size: 1.08rem; font-weight: 700; color: var(--foreground);
margin-bottom: 14px;
}
body.page-merchant-terms .policy-section p { font-size: .92rem; color: var(--text); line-height: 1.8; margin-bottom: 12px; }
body.page-merchant-terms .policy-section p:last-child { margin-bottom: 0; }
body.page-merchant-terms .policy-section ul { display: flex; flex-direction: column; gap: 8px; padding-left: 4px; margin-bottom: 12px; }
body.page-merchant-terms .policy-section ul:last-child { margin-bottom: 0; }
body.page-merchant-terms .policy-section li {
font-size: .92rem; color: var(--text); line-height: 1.7;
display: flex; align-items: flex-start; gap: 10px;
}
body.page-merchant-terms .policy-section li::before {
content: ''; display: block; min-width: 6px; height: 6px; border-radius: 50%;
background: var(--blue-dark); margin-top: 8px; flex-shrink: 0;
transition: transform .25s;
}
body.page-merchant-terms .policy-section:hover li::before { transform: scale(1.4); }
/* Highlight box for disclaimers */
body.page-merchant-terms .notice-box {
background: rgba(255,213,74,.12); border: 1.5px solid rgba(255,213,74,.5);
border-radius: 12px; padding: 16px 20px; margin-top: 16px;
}
body.page-merchant-terms .notice-box p { margin-bottom: 0; font-size: .88rem; }
body.page-merchant-terms .notice-box strong { color: var(--foreground); }
/* Contact section special */
body.page-merchant-terms .policy-section.contact-section { background: linear-gradient(135deg, rgba(0,90,156,.04), rgba(42,157,244,.04)); border-color: rgba(0,90,156,.15); }
body.page-merchant-terms .policy-section.contact-section a { color: var(--blue-dark); font-weight: 600; }
body.page-merchant-terms .policy-section.contact-section a:hover { text-decoration: underline; }
/* Jurisdiction badge */
body.page-merchant-terms .jurisdiction {
display: inline-flex; align-items: center; gap: 8px;
background: var(--bg-gray); border-radius: 50px;
padding: 8px 16px; font-size: .83rem; color: var(--blue-dark);
font-weight: 600; margin-top: 12px;
}
/* ===== REVEAL ===== */
body.page-merchant-terms .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-merchant-terms .reveal.visible { opacity: 1; transform: none; }
body.page-merchant-terms .reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-merchant-terms .reveal-left.visible { opacity: 1; transform: none; }
/* ===== FOOTER ===== */
body.page-merchant-terms .site-footer { background: var(--bg-gray); padding: 70px 0 0; }
body.page-merchant-terms .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 40px; padding-bottom: 50px; }
body.page-merchant-terms .footer-brand img { max-width: 140px; margin-bottom: 14px; }
body.page-merchant-terms .footer-brand p { font-size: .88rem; color: var(--muted); max-width: 220px; }
body.page-merchant-terms .site-footer h6 { font-size: .92rem; font-weight: 700; margin-bottom: 16px; }
body.page-merchant-terms .site-footer ul li { margin-bottom: 10px; }
body.page-merchant-terms .site-footer ul li a { font-size: .87rem; color: var(--muted); transition: color .25s; }
body.page-merchant-terms .site-footer ul li a:hover { color: var(--blue-dark); }
body.page-merchant-terms .footer-copy {
border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0;
text-align: center; font-size: .82rem; color: var(--muted);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
body.page-merchant-terms .policy-layout { grid-template-columns: 1fr; }
body.page-merchant-terms .toc { display: none; }
}
@media (max-width: 768px) {
body.page-merchant-terms .nav-menu { display: none; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
body.page-merchant-terms .nav-menu.open { display: flex; }
body.page-merchant-terms .nav-menu a { width: 100%; padding: 10px 14px; }
body.page-merchant-terms .nav-btn-wrap { display: none; }
body.page-merchant-terms .nav-toggle { display: flex; }
body.page-merchant-terms .footer-grid { grid-template-columns: 1fr; gap: 28px; }
body.page-merchant-terms .social-sidebar { display: none; }
body.page-merchant-terms .policy-section { padding: 24px 22px; }
body.page-merchant-terms .quick-nav-wrap { top: 60px; }
}
/* privacy-policy.html */
body.page-privacy-policy *, body.page-privacy-policy *::before, body.page-privacy-policy *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.page-privacy-policy {
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227,232,255,1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-privacy-policy { font-family: 'Poppins', sans-serif; color: var(--foreground); overflow-x: hidden; line-height: 1.6; }
body.page-privacy-policy img { max-width: 100%; height: auto; display: block; }
body.page-privacy-policy a { text-decoration: none; color: inherit; transition: .3s; }
body.page-privacy-policy ul { list-style: none; padding: 0; }
/* PRELOADER */
body.page-privacy-policy #preloader {
position: fixed; inset: 0; background: #fff;
z-index: 10000; display: flex; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-privacy-policy #preloader.done { opacity: 0; visibility: hidden; }
body.page-privacy-policy #preloader-inner { width: 260px; height: 260px; background: url('image/claimit-loader.gif') center/cover no-repeat; }
/* SOCIAL SIDEBAR */
body.page-privacy-policy .social-sidebar {
position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 12px;
}
body.page-privacy-policy .social-icon {
width: 32px; height: 32px; border-radius: 18px;
background: #fff; color: #1e3a8a; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transition: all .35s var(--ease-out);
}
body.page-privacy-policy .social-icon:hover { transform: translateX(8px) scale(1.08); }
body.page-privacy-policy .social-icon.facebook:hover { background: #1877f2; color: #fff; }
body.page-privacy-policy .social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
body.page-privacy-policy .social-icon.linkedin:hover { background: #0077b5; color: #fff; }
body.page-privacy-policy .social-icon.twitter:hover { background: #000; color: #fff; }
body.page-privacy-policy .social-icon.youtube:hover { background: #ff0000; color: #fff; }
/* NAVBAR */
body.page-privacy-policy .navbar {
position: fixed; top: 0; left: 0; right: 0;
padding: 16px 0; background: #fff;
box-shadow: 0 2px 20px rgba(0,0,0,.10);
z-index: 1000;
}
body.page-privacy-policy .navbar .container {
display: flex; align-items: center; justify-content: space-between;
}
body.page-privacy-policy .navbar-brand img { max-width: 140px; }
body.page-privacy-policy .nav-menu { display: flex; align-items: center; gap: 8px; }
body.page-privacy-policy .nav-menu a {
color: var(--foreground); font-size: .92rem; font-weight: 500;
padding: 8px 12px; border-radius: 6px; white-space: nowrap;
}
body.page-privacy-policy .nav-menu a:hover { color: var(--blue-dark); background: var(--bg-gray); }
body.page-privacy-policy .nav-btn {
display: inline-flex; align-items: center;
background: var(--blue-dark); color: #fff;
font-weight: 700; font-size: .88rem;
padding: 11px 22px; border-radius: 50px;
box-shadow: 0 4px 16px rgba(0,90,156,.25);
}
body.page-privacy-policy .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,90,156,.35); color: #fff; }
body.page-privacy-policy .nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: 6px; cursor: pointer;
}
body.page-privacy-policy .nav-toggle span {
display: block; width: 24px; height: 2px;
background: var(--foreground); border-radius: 2px;
transition: all .35s var(--ease-out);
}
body.page-privacy-policy .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.page-privacy-policy .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.page-privacy-policy .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* CONTAINER */
body.page-privacy-policy .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* HERO */
body.page-privacy-policy .policy-hero {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 140px 0 80px; text-align: center; position: relative; overflow: hidden;
}
body.page-privacy-policy .policy-hero::before {
content: ''; position: absolute; inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .1;
}
body.page-privacy-policy .policy-hero-inner { position: relative; z-index: 2; }
body.page-privacy-policy .policy-hero .eyebrow {
display: inline-block; background: rgba(255,255,255,.18); color: #fff;
border: 1px solid rgba(255,255,255,.3); border-radius: 30px;
font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
padding: 7px 20px; margin-bottom: 20px;
}
body.page-privacy-policy .policy-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; margin-bottom: 12px; }
body.page-privacy-policy .policy-hero p { font-size: 1rem; color: rgba(255,255,255,.85); }
/* CONTENT */
body.page-privacy-policy .policy-body { background: #fff; padding: 70px 0 100px; }
body.page-privacy-policy .policy-content { max-width: 820px; margin: 0 auto; }
body.page-privacy-policy .policy-section {
margin-bottom: 40px;
opacity: 0; transform: translateY(24px);
transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
body.page-privacy-policy .policy-section.visible { opacity: 1; transform: none; }
body.page-privacy-policy .policy-section h2 {
font-size: 1.05rem; font-weight: 700; color: var(--foreground);
margin-bottom: 12px; padding-bottom: 10px;
border-bottom: 1.5px solid #edf2f7;
}
body.page-privacy-policy .policy-section p { font-size: .92rem; color: var(--text); line-height: 1.8; margin-bottom: 10px; }
body.page-privacy-policy .policy-section p:last-child { margin-bottom: 0; }
body.page-privacy-policy .policy-section ul { margin: 8px 0 10px 0; display: flex; flex-direction: column; gap: 6px; }
body.page-privacy-policy .policy-section li {
font-size: .92rem; color: var(--text); line-height: 1.7;
display: flex; align-items: flex-start; gap: 10px;
}
body.page-privacy-policy .policy-section li::before {
content: ''; display: block; min-width: 5px; height: 5px; border-radius: 50%;
background: var(--blue-dark); margin-top: 9px; flex-shrink: 0;
}
body.page-privacy-policy .policy-section strong { color: var(--foreground); }
body.page-privacy-policy .policy-section a { color: var(--blue-dark); font-weight: 600; }
body.page-privacy-policy .policy-section a:hover { text-decoration: underline; }
/* FOOTER */
body.page-privacy-policy .site-footer { background: var(--bg-gray); padding: 70px 0 0; }
body.page-privacy-policy .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 40px; padding-bottom: 50px; }
body.page-privacy-policy .footer-brand img { max-width: 140px; margin-bottom: 14px; }
body.page-privacy-policy .footer-brand p { font-size: .88rem; color: var(--muted); max-width: 220px; }
body.page-privacy-policy .site-footer h6 { font-size: .92rem; font-weight: 600; margin-bottom: 16px; }
body.page-privacy-policy .site-footer ul li { margin-bottom: 10px; }
body.page-privacy-policy .site-footer ul li a { font-size: .87rem; color: var(--muted); transition: color .25s; }
body.page-privacy-policy .site-footer ul li a:hover { color: var(--blue-dark); }
body.page-privacy-policy .footer-copy {
border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0;
text-align: center; font-size: .82rem; color: var(--muted);
}
/* RESPONSIVE */
@media (max-width: 768px) {
body.page-privacy-policy .nav-menu { display: none; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
body.page-privacy-policy .nav-menu.open { display: flex; }
body.page-privacy-policy .nav-menu a { width: 100%; padding: 10px 14px; }
body.page-privacy-policy .nav-btn-wrap { display: none; }
body.page-privacy-policy .nav-toggle { display: flex; }
body.page-privacy-policy .footer-grid { grid-template-columns: 1fr; gap: 28px; }
body.page-privacy-policy .social-sidebar { display: none; }
}
/* image\advertiser-2.html */
/* ===== RESET & TOKENS ===== */
body.page-image-advertiser *, body.page-image-advertiser *::before, body.page-image-advertiser *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.page-image-advertiser {
--blue: #0057ff;
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227,232,255,1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-image-advertiser { font-family: 'Poppins', sans-serif; color: var(--foreground); overflow-x: hidden; line-height: 1.6; }
body.page-image-advertiser img { max-width: 100%; height: auto; display: block; }
body.page-image-advertiser a { text-decoration: none; color: inherit; transition: .3s; }
body.page-image-advertiser ul { list-style: none; padding: 0; }
body.page-image-advertiser li { margin-bottom: 0; }
/* ===== PRELOADER ===== */
body.page-image-advertiser #preloader {
position: fixed; inset: 0; background: #fff;
z-index: 10000; display: flex; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-image-advertiser #preloader.done { opacity: 0; visibility: hidden; }
body.page-image-advertiser #preloader-inner { width: 260px; height: 260px; background: url('image/claimit-loader.gif') center/cover no-repeat; }
/* ===== SOCIAL SIDEBAR ===== */
body.page-image-advertiser .social-sidebar {
position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 12px;
}
body.page-image-advertiser .social-icon {
width: 32px; height: 32px; border-radius: 18px;
background: #fff; color: #1e3a8a; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,.12); transition: all .35s var(--ease-out);
}
body.page-image-advertiser .social-icon:hover { transform: translateX(8px) scale(1.08); background: var(--yellow); color: #0F2E6D; }
body.page-image-advertiser .social-icon.facebook:hover { background: #1877f2; color: #fff; }
body.page-image-advertiser .social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
body.page-image-advertiser .social-icon.linkedin:hover { background: #0077b5; color: #fff; }
body.page-image-advertiser .social-icon.twitter:hover { background: #000; color: #fff; }
body.page-image-advertiser .social-icon.youtube:hover { background: #ff0000; color: #fff; }
/* ===== NAVBAR ===== */
body.page-image-advertiser .navbar {
position: absolute; top: 0; left: 0; right: 0;
padding: 28px 0; z-index: 1000;
transition: padding .4s ease, background .4s ease, box-shadow .4s ease;
}
body.page-image-advertiser .navbar.scrolled { position: fixed; padding: 16px 0; background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,.1); }
body.page-image-advertiser .navbar .container {
width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
}
body.page-image-advertiser .navbar-brand img { max-width: 140px; }
body.page-image-advertiser .nav-menu { display: flex; align-items: center; gap: 8px; }
body.page-image-advertiser .nav-menu a {
color: rgba(255,255,255,.9); font-size: .92rem; font-weight: 500;
padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: all .25s;
}
body.page-image-advertiser .nav-menu a:hover { color: #fff; background: rgba(255,255,255,.12); }
body.page-image-advertiser .navbar.scrolled .nav-menu a { color: var(--foreground); }
body.page-image-advertiser .navbar.scrolled .nav-menu a:hover { color: var(--blue-dark); background: var(--bg-gray); }
body.page-image-advertiser .nav-btn {
display: inline-flex; align-items: center;
background: #fff; color: var(--blue-dark);
font-weight: 600; font-size: .88rem;
padding: 11px 22px; border-radius: 50px;
box-shadow: 0 4px 16px rgba(0,0,0,.15); transition: all .3s;
}
body.page-image-advertiser .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); color: var(--blue-dark); }
body.page-image-advertiser .navbar.scrolled .nav-btn { background: var(--blue-dark); color: #fff; }
body.page-image-advertiser .nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: 6px; cursor: pointer;
}
body.page-image-advertiser .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all .35s var(--ease-out); }
body.page-image-advertiser .navbar.scrolled .nav-toggle span { background: var(--foreground); }
body.page-image-advertiser .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.page-image-advertiser .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.page-image-advertiser .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== SHARED ===== */
body.page-image-advertiser .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
body.page-image-advertiser .row { display: flex; flex-wrap: wrap; gap: 40px; }
body.page-image-advertiser .row.align-center { align-items: center; }
body.page-image-advertiser .grdnt-tranquil { background: linear-gradient(135deg,#fed192,#9946b2); }
body.page-image-advertiser .grdnt-blue { background: linear-gradient(90deg,#491eb8,#844ffc); }
body.page-image-advertiser .grdnt-cyan { background: linear-gradient(45deg,#2fb8ff,#9eecd9); }
body.page-image-advertiser .grdnt-purple { background: linear-gradient(135deg,#005A9C,#2A9DF4); }
/* ===== HERO ===== */
body.page-image-advertiser .hero-merchant {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: url('image/hero-3.png') center center/cover no-repeat;
background-color: #0d2240;
overflow: hidden;
}
body.page-image-advertiser .hero-merchant::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
115deg,
rgba(5, 15, 35, 0.92) 0%,
rgba(13, 34, 64, 0.82) 35%,
rgba(13, 34, 64, 0.55) 65%,
rgba(13, 34, 64, 0.25) 100%
);
z-index: 1;
}
body.page-image-advertiser .hero-merchant::after {
content: "";
position: absolute;
inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat;
opacity: 0.12;
z-index: 2;
}
body.page-image-advertiser .hero-merchant .container, body.page-image-advertiser .hero-merchant .row, body.page-image-advertiser .hero-merchant .hero-content {
position: relative;
z-index: 3;
}
body.page-image-advertiser .hero-content { position: relative; z-index: 2; width: 100%; padding: 20px 0 0px; }
body.page-image-advertiser .intro-text { max-width: 520px; }
body.page-image-advertiser .eyebrow-tag {
display: inline-block; background: rgba(255,255,255,.18); color: #fff;
border: 1px solid rgba(255,255,255,.35); border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
padding: 7px 18px; margin-bottom: 22px;
}
body.page-image-advertiser .intro-text h2 { color: #fff; font-size: clamp(2rem,4vw,3.2rem); font-weight: 600; line-height: 1.15; margin-bottom: 18px; }
body.page-image-advertiser .intro-text p { color: rgba(255,255,255,.88); font-size: 1.05rem; line-height: 1.7; margin-bottom: 32px; }
body.page-image-advertiser .btn-primary {
display: inline-flex; align-items: center;
background: #fff; color: var(--blue-dark);
font-weight: 600; font-size: .95rem;
padding: 14px 32px; border-radius: 50px;
box-shadow: 0 8px 30px rgba(0,0,0,.18); transition: all .35s var(--ease-out);
}
body.page-image-advertiser .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25); color: var(--blue-dark); }
body.page-image-advertiser .hero-img-wrap { flex: 1; text-align: right; }
body.page-image-advertiser .hero-img-wrap img { max-width: 90%; margin-left: auto; filter: drop-shadow(0 20px 50px rgba(0,0,0,.3)); }
/* Hero animations */
body.page-image-advertiser .hero-content .eyebrow-tag, body.page-image-advertiser .hero-content h2, body.page-image-advertiser .hero-content p, body.page-image-advertiser .hero-content .btn-primary { opacity: 0; transform: translateY(28px); animation: heroIn .7s var(--ease-out) forwards; }
body.page-image-advertiser .hero-content h2 { animation-delay: .15s; }
body.page-image-advertiser .hero-content p { animation-delay: .28s; }
body.page-image-advertiser .hero-content .btn-primary { animation-delay: .42s; }
body.page-image-advertiser .hero-img-wrap img { opacity: 0; transform: translateY(30px) scale(.97); animation: heroIn .8s var(--ease-out) .2s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
/* ===== SECTION HEAD ===== */
body.page-image-advertiser .lp-section-head { text-align: center; margin-bottom: 60px; }
body.page-image-advertiser .lp-section-head .tag {
display: inline-block;
background: linear-gradient(90deg,rgba(0,90,156,.10),rgba(42,157,244,.10));
color: var(--blue-dark); border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
padding: 6px 18px; margin-bottom: 14px;
}
body.page-image-advertiser .lp-section-head .tag.on-blue { background: rgba(255,255,255,.18); color: #fff; }
body.page-image-advertiser .lp-section-head h4 { font-size: clamp(1.6rem,2.5vw,2.4rem); font-weight: 600; margin-bottom: 14px; }
body.page-image-advertiser .lp-section-head h4.white { color: #fff; }
body.page-image-advertiser .lp-section-head p.white { color: rgba(255,255,255,.85); }
body.page-image-advertiser .lp-section-head p { font-size: 1.05rem; color: var(--muted); max-width: 580px; margin: 0 auto; }
/* ===== WHAT CARDS ===== */
body.page-image-advertiser .what-section { background: linear-gradient(180deg, var(--bg-gray) 0%, rgba(227,232,255,0) 100%); padding: 90px 0; }
body.page-image-advertiser .what-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
body.page-image-advertiser .what-card {
background: #fff; border-radius: 24px; padding: 36px 24px;
box-shadow: 0 16px 50px rgba(24,32,79,.09); text-align: center;
transition: transform .4s var(--ease-out), box-shadow .4s;
}
body.page-image-advertiser .what-card:hover { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(24,32,79,.15); }
body.page-image-advertiser .wc-icon {
width: 68px; height: 68px; border-radius: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 26px; color: #fff; margin: 0 auto 20px;
transition: transform .4s var(--ease-out);
}
body.page-image-advertiser .what-card:hover .wc-icon { transform: scale(1.1) rotate(-5deg); }
body.page-image-advertiser .what-card h5 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
body.page-image-advertiser .what-card p { font-size: .88rem; color: var(--muted); margin: 0; }
/* ===== FORMATS SECTION ===== */
body.page-image-advertiser .formats-section {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 90px 0;
}
body.page-image-advertiser .formats-grid {
display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 10px;
}
body.page-image-advertiser .format-card {
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
border-radius: 20px; overflow: hidden;
transition: transform .4s var(--ease-out), background .3s, box-shadow .4s;
}
body.page-image-advertiser .format-card:hover {
transform: translateY(-10px);
background: rgba(255,255,255,.22);
box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
body.page-image-advertiser .format-image { overflow: hidden; }
body.page-image-advertiser .format-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
body.page-image-advertiser .format-card:hover .format-image img { transform: scale(1.06); }
body.page-image-advertiser .format-content { padding: 20px; }
body.page-image-advertiser .format-content h4 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 6px; }
body.page-image-advertiser .format-content p { font-size: .82rem; color: rgba(255,255,255,.75); margin: 0; }
/* ===== ADVANTAGES SECTION ===== */
body.page-image-advertiser .adv-section { background: #fff; padding: 90px 0; }
body.page-image-advertiser .zone-half { flex: 1; min-width: 280px; }
body.page-image-advertiser .zone-tag {
display: inline-block; border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
padding: 6px 18px; margin-bottom: 16px;
background: linear-gradient(90deg,rgba(0,90,156,.10),rgba(42,157,244,.10));
color: var(--blue-dark);
}
body.page-image-advertiser .zone-text h4 { font-size: clamp(1.5rem,2.5vw,2.2rem); font-weight: 600; margin-bottom: 14px; }
body.page-image-advertiser .zone-text p { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin-bottom: 30px; }
body.page-image-advertiser .zone-img-wrap { flex: 1; text-align: center; min-width: 260px; }
body.page-image-advertiser .zone-img-wrap img { border-radius: 20px; box-shadow: 0 20px 60px rgba(0,90,156,.15); max-width: 80%; margin: 0 auto; transition: transform .5s var(--ease-out); }
body.page-image-advertiser .zone-img-wrap:hover img { transform: translateY(-8px); }
/* ad-benefits grid */
body.page-image-advertiser .ad-benefits { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 8px; }
body.page-image-advertiser .ad-benefit {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; border-radius: 16px;
background: var(--bg-gray);
transition: all .35s var(--ease-out);
}
body.page-image-advertiser .ad-benefit:hover { background: #e0e8ff; transform: translateX(4px); }
body.page-image-advertiser .ad-benefit__icon {
width: 40px; height: 40px; min-width: 40px; border-radius: 12px; flex-shrink: 0;
background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: #fff;
}
body.page-image-advertiser .ad-benefit__title { font-size: .88rem; font-weight: 600; color: var(--foreground); margin: 0; }
/* ===== ADDITIONAL BENEFITS ===== */
body.page-image-advertiser .add-benefits { background: rgba(227,232,255,.55); padding: 90px 0; }
body.page-image-advertiser .ab-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
body.page-image-advertiser .ab-card {
background: #fff; border-radius: 20px; padding: 28px 22px;
box-shadow: 0 8px 32px rgba(24,32,79,.07);
display: flex; align-items: flex-start; gap: 16px;
transition: transform .35s var(--ease-out), box-shadow .35s;
}
body.page-image-advertiser .ab-card:hover { transform: translateX(6px); box-shadow: 0 16px 50px rgba(24,32,79,.12); }
body.page-image-advertiser .ab-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; }
body.page-image-advertiser .ab-body h6 { font-size: .95rem; font-weight: 600; margin-bottom: 5px; }
body.page-image-advertiser .ab-body p { font-size: .85rem; color: var(--muted); margin: 0; }
/* ===== HOW IT WORKS ===== */
body.page-image-advertiser .how-section { background: #fff; padding: 90px 0; }
body.page-image-advertiser .how-cols { display: flex; gap: 60px; align-items: flex-start; }
body.page-image-advertiser .steps-side { flex: 1; }
body.page-image-advertiser .steps-track { position: relative; }
body.page-image-advertiser .steps-track::before {
content: ''; position: absolute;
left: 28px; top: 28px; bottom: 28px; width: 2px;
background: linear-gradient(180deg, var(--blue-dark), var(--blue-light)); opacity: .2;
}
body.page-image-advertiser .step-row {
display: flex; gap: 22px; align-items: flex-start;
padding: 18px 0; opacity: 0; transform: translateX(-20px);
transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
body.page-image-advertiser .step-row.visible { opacity: 1; transform: none; }
body.page-image-advertiser .step-num {
width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 600; color: #fff;
box-shadow: 0 8px 24px rgba(0,90,156,.3); position: relative; z-index: 1;
transition: transform .35s var(--ease-out);
}
body.page-image-advertiser .step-row:hover .step-num { transform: scale(1.08); }
body.page-image-advertiser .step-body { padding-top: 12px; }
body.page-image-advertiser .step-body h6 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
body.page-image-advertiser .step-body p { font-size: .88rem; color: var(--muted); margin: 0; }
body.page-image-advertiser .how-img { flex: 1; }
body.page-image-advertiser .how-img img { border-radius: 20px; box-shadow: 0 20px 60px rgba(0,90,156,.15); width: 100%; }
/* ===== CTA ===== */
body.page-image-advertiser .cta-section {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 100px 0 0; overflow: hidden; position: relative;
}
body.page-image-advertiser .cta-section::before { content: ''; position: absolute; inset: 0; background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .1; }
body.page-image-advertiser .cta-inner { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 60px; }
body.page-image-advertiser .cta-text { flex: 1; padding-bottom: 80px; }
body.page-image-advertiser .cta-text h3 { font-size: clamp(2rem,3vw,2.8rem); color: #fff; font-weight: 600; line-height: 1.2; margin-bottom: 16px; }
body.page-image-advertiser .cta-text p { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 480px; margin-bottom: 32px; }
body.page-image-advertiser .btn-cta-white {
display: inline-block; background: #fff; color: var(--blue-dark);
font-weight: 600; font-size: .95rem;
padding: 16px 36px; border-radius: 50px;
box-shadow: 0 8px 30px rgba(0,0,0,.15); transition: all .35s var(--ease-out);
}
body.page-image-advertiser .btn-cta-white:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.22); color: var(--blue-dark); }
body.page-image-advertiser .cta-img-wrap { flex: 1; text-align: right; }
body.page-image-advertiser .cta-img-wrap img { max-width: 78%; margin-bottom: -4px; }
/* ===== FOOTER ===== */
body.page-image-advertiser .site-footer { background: var(--bg-gray); padding: 70px 0 0; }
body.page-image-advertiser .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 40px; padding-bottom: 50px; }
body.page-image-advertiser .footer-brand img { max-width: 140px; margin-bottom: 14px; }
body.page-image-advertiser .footer-brand p { font-size: .88rem; color: var(--muted); max-width: 220px; }
body.page-image-advertiser .site-footer h6 { font-size: .92rem; font-weight: 600; margin-bottom: 16px; }
body.page-image-advertiser .site-footer ul li { margin-bottom: 10px; }
body.page-image-advertiser .site-footer ul li a { font-size: .87rem; color: var(--muted); transition: color .25s; }
body.page-image-advertiser .site-footer ul li a:hover { color: var(--blue-dark); }
body.page-image-advertiser .footer-copy { border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0; text-align: center; font-size: .82rem; color: var(--muted); }
/* ===== REVEAL ===== */
body.page-image-advertiser .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-image-advertiser .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-image-advertiser .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-image-advertiser .reveal.visible, body.page-image-advertiser .reveal-left.visible, body.page-image-advertiser .reveal-right.visible { opacity: 1; transform: none; }
body.page-image-advertiser .delay-1 { transition-delay: .1s; }
body.page-image-advertiser .delay-2 { transition-delay: .2s; }
body.page-image-advertiser .delay-3 { transition-delay: .3s; }
body.page-image-advertiser .delay-4 { transition-delay: .4s; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
body.page-image-advertiser .formats-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 991px) {
body.page-image-advertiser .what-grid { grid-template-columns: repeat(2,1fr); }
body.page-image-advertiser .ab-grid { grid-template-columns: repeat(2,1fr); }
body.page-image-advertiser .footer-grid { grid-template-columns: 1fr 1fr; }
body.page-image-advertiser .how-cols { flex-direction: column; }
body.page-image-advertiser .formats-grid { grid-template-columns: repeat(2,1fr); }
body.page-image-advertiser .ad-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
body.page-image-advertiser .nav-menu { display: none; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
body.page-image-advertiser .nav-menu.open { display: flex; }
body.page-image-advertiser .nav-menu a { color: var(--foreground); width: 100%; padding: 10px 14px; }
body.page-image-advertiser .nav-btn-wrap { display: none; }
body.page-image-advertiser .nav-toggle { display: flex; }
body.page-image-advertiser .navbar { position: fixed; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); padding: 14px 0; }
body.page-image-advertiser .navbar .nav-toggle span { background: var(--foreground); }
body.page-image-advertiser .hero-content { padding: 120px 0 60px; }
body.page-image-advertiser .hero-img-wrap { display: none; }
body.page-image-advertiser .row { gap: 24px; }
body.page-image-advertiser .what-grid { grid-template-columns: 1fr; }
body.page-image-advertiser .ab-grid { grid-template-columns: 1fr; }
body.page-image-advertiser .formats-grid { grid-template-columns: 1fr; }
body.page-image-advertiser .footer-grid { grid-template-columns: 1fr; gap: 24px; }
body.page-image-advertiser .social-sidebar { display: none; }
body.page-image-advertiser .cta-inner { flex-direction: column; }
body.page-image-advertiser .cta-img-wrap { text-align: center; }
}
/* image\index.html */
/* ===== RESET & TOKENS ===== */
body.page-image-index *, body.page-image-index *::before, body.page-image-index *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.page-image-index {
--blue: #0057ff;
--blue-dark: #005A9C;
--blue-mid: #0070C0;
--blue-light: #2A9DF4;
--yellow: #FFD54A;
--bg-gray: rgba(227,232,255,1);
--text: #64748b;
--foreground: #161c2d;
--muted: #869ab8;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-io: cubic-bezier(0.77, 0, 0.18, 1);
}
body.page-image-index { font-family: 'Poppins', sans-serif; color: var(--foreground); overflow-x: hidden; line-height: 1.6; }
body.page-image-index img { max-width: 100%; height: auto; display: block; }
body.page-image-index a { text-decoration: none; color: inherit; transition: .3s; }
body.page-image-index ul { list-style: none; padding: 0; }
body.page-image-index li { margin-bottom: 0; }
/* ===== PRELOADER ===== */
body.page-image-index #preloader {
position: fixed; inset: 0; background: #fff;
z-index: 10000; display: flex; align-items: center; justify-content: center;
transition: opacity .6s ease, visibility .6s ease;
}
body.page-image-index #preloader.done { opacity: 0; visibility: hidden; }
body.page-image-index #preloader-inner { width: 260px; height: 260px; background: url('image/claimit-loader.gif') center/cover no-repeat; }
/* ===== SOCIAL SIDEBAR ===== */
body.page-image-index .social-sidebar {
position: fixed; left: 25px; top: 50%; transform: translateY(-50%);
z-index: 9999; display: flex; flex-direction: column; gap: 12px;
}
body.page-image-index .social-icon {
width: 32px; height: 32px; border-radius: 18px;
background: #fff; color: #1e3a8a; font-size: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,.12); transition: all .35s var(--ease-out);
}
body.page-image-index .social-icon:hover { transform: translateX(8px) scale(1.08); background: var(--yellow); color: #0F2E6D; }
body.page-image-index .social-icon.facebook:hover { background: #1877f2; color: #fff; }
body.page-image-index .social-icon.instagram:hover { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); color: #fff; }
body.page-image-index .social-icon.linkedin:hover { background: #0077b5; color: #fff; }
body.page-image-index .social-icon.twitter:hover { background: #000; color: #fff; }
body.page-image-index .social-icon.youtube:hover { background: #ff0000; color: #fff; }
/* ===== NAVBAR ===== */
body.page-image-index .navbar {
position: absolute; top: 0; left: 0; right: 0;
padding: 28px 0; z-index: 1000;
transition: padding .4s ease, background .4s ease, box-shadow .4s ease;
}
body.page-image-index .navbar.scrolled {
position: fixed; padding: 16px 0;
background: #fff; box-shadow: 0 2px 20px rgba(0,0,0,.1);
}
body.page-image-index .navbar .container {
width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
display: flex; align-items: center; justify-content: space-between;
}
body.page-image-index .navbar-brand #navLogo { max-width: 140px; transition: opacity .3s, filter .3s; }
body.page-image-index .nav-menu { display: flex; align-items: center; gap: 8px; }
body.page-image-index .nav-menu a {
color: rgba(255,255,255,.9); font-size: .92rem; font-weight: 500;
padding: 8px 12px; border-radius: 6px; white-space: nowrap; transition: all .25s;
}
body.page-image-index .nav-menu a:hover { color: #fff; background: rgba(255,255,255,.12); }
body.page-image-index .navbar.scrolled .nav-menu a { color: var(--foreground); }
body.page-image-index .navbar.scrolled .nav-menu a:hover { color: var(--blue-dark); background: var(--bg-gray); }
body.page-image-index .nav-btn {
display: inline-flex; align-items: center;
background: #fff; color: var(--blue-dark);
font-weight: 700; font-size: .88rem;
padding: 11px 22px; border-radius: 50px;
box-shadow: 0 4px 16px rgba(0,0,0,.15); transition: all .3s;
}
body.page-image-index .nav-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.2); color: var(--blue-dark); }
body.page-image-index .navbar.scrolled .nav-btn { background: var(--blue-dark); color: #fff; }
body.page-image-index .nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: none; border: none; padding: 6px; cursor: pointer;
}
body.page-image-index .nav-toggle span {
display: block; width: 24px; height: 2px;
background: #fff; border-radius: 2px; transition: all .35s var(--ease-out);
}
body.page-image-index .navbar.scrolled .nav-toggle span { background: var(--foreground); }
body.page-image-index .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.page-image-index .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.page-image-index .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ===== SHARED ===== */
body.page-image-index .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
body.page-image-index .row { display: flex; flex-wrap: wrap; gap: 40px; }
body.page-image-index .row.align-center { align-items: center; }
body.page-image-index .grdnt-tranquil { background: linear-gradient(135deg,#fed192,#9946b2); }
body.page-image-index .grdnt-blue { background: linear-gradient(90deg,#491eb8,#844ffc); }
body.page-image-index .grdnt-cyan { background: linear-gradient(45deg,#2fb8ff,#9eecd9); }
body.page-image-index .grdnt-purple { background: linear-gradient(135deg,#005A9C,#2A9DF4); }
/* ===== HERO ===== */
body.page-image-index .hero-merchant {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: url('image/hero-2.png') center center/cover no-repeat;
background-color: #0d2240;
overflow: hidden;
}
body.page-image-index .hero-merchant::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
115deg,
rgba(5, 15, 35, 0.92) 0%,
rgba(13, 34, 64, 0.82) 35%,
rgba(13, 34, 64, 0.55) 65%,
rgba(13, 34, 64, 0.25) 100%
);
z-index: 1;
}
body.page-image-index .hero-merchant::after {
content: "";
position: absolute;
inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat;
opacity: 0.12;
z-index: 2;
}
body.page-image-index .hero-merchant .container, body.page-image-index .hero-merchant .row, body.page-image-index .hero-merchant .hero-content {
position: relative;
z-index: 3;
}
/* floating orbs for depth */
body.page-image-index .hero-merchant::after {
content: ''; position: absolute;
width: 500px; height: 500px; border-radius: 50%;
background: rgba(255,255,255,.04);
top: -100px; right: -120px; z-index: 0;
}
body.page-image-index .hero-content { position: relative; z-index: 2; width: 100%; padding: 20px 0 0px; }
body.page-image-index .intro-text { max-width: 520px; }
body.page-image-index .eyebrow-tag {
display: inline-block;
background: rgba(255,255,255,.18); color: #fff;
border: 1px solid rgba(255,255,255,.35); border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
padding: 7px 18px; margin-bottom: 22px;
}
body.page-image-index .intro-text h2 { color: #fff; font-size: clamp(2.2rem,4vw,3.4rem); font-weight: 600; line-height: 1.15; margin-bottom: 18px; }
body.page-image-index .intro-text p { color: rgba(255,255,255,.88); font-size: 1.05rem; line-height: 1.7; margin-bottom: 32px; }
body.page-image-index .btn-primary {
display: inline-flex; align-items: center;
background: #fff; color: var(--blue-dark);
font-weight: 600; font-size: .95rem;
padding: 14px 32px; border-radius: 50px;
box-shadow: 0 8px 30px rgba(0,0,0,.18); transition: all .35s var(--ease-out);
}
body.page-image-index .btn-primary:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.25); color: var(--blue-dark); }
body.page-image-index .hero-img-wrap { flex: 1; text-align: right; }
body.page-image-index .hero-img-wrap img {
max-width: 90%; margin-left: auto;
filter: drop-shadow(0 20px 50px rgba(0,0,0,.3));
}
/* hero text animation */
body.page-image-index .hero-content .eyebrow-tag, body.page-image-index .hero-content h2, body.page-image-index .hero-content p, body.page-image-index .hero-content .btn-primary {
opacity: 0; transform: translateY(28px);
animation: heroIn .7s var(--ease-out) forwards;
}
body.page-image-index .hero-content h2 { animation-delay: .15s; }
body.page-image-index .hero-content p { animation-delay: .28s; }
body.page-image-index .hero-content .btn-primary { animation-delay: .42s; }
body.page-image-index .hero-img-wrap img { opacity: 0; transform: translateY(30px) scale(.97); animation: heroIn .8s var(--ease-out) .2s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
/* ===== SECTION HEAD ===== */
body.page-image-index .lp-section-head { text-align: center; margin-bottom: 60px; }
body.page-image-index .lp-section-head .tag {
display: inline-block;
background: linear-gradient(90deg,rgba(0,90,156,.10),rgba(42,157,244,.10));
color: var(--blue-dark); border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
padding: 6px 18px; margin-bottom: 14px;
}
body.page-image-index .lp-section-head h4 { font-size: clamp(1.6rem,2.5vw,2.4rem); font-weight: 600; margin-bottom: 14px; }
body.page-image-index .lp-section-head p { font-size: 1.05rem; color: var(--muted); max-width: 580px; margin: 0 auto; }
/* ===== WHAT CARDS ===== */
body.page-image-index .what-section { background: linear-gradient(180deg, var(--bg-gray) 0%, rgba(227,232,255,0) 100%); padding: 90px 0; }
body.page-image-index .what-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
body.page-image-index .what-card {
background: #fff; border-radius: 24px; padding: 36px 24px;
box-shadow: 0 16px 50px rgba(24,32,79,.09); text-align: center;
transition: transform .4s var(--ease-out), box-shadow .4s;
}
body.page-image-index .what-card:hover { transform: translateY(-8px); box-shadow: 0 28px 70px rgba(24,32,79,.15); }
body.page-image-index .wc-icon {
width: 68px; height: 68px; border-radius: 22px;
display: flex; align-items: center; justify-content: center;
font-size: 26px; color: #fff; margin: 0 auto 20px;
transition: transform .4s var(--ease-out);
}
body.page-image-index .what-card:hover .wc-icon { transform: scale(1.1) rotate(-5deg); }
body.page-image-index .what-card h5 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
body.page-image-index .what-card p { font-size: .88rem; color: var(--muted); margin: 0; }
/* ===== ZONE SECTIONS ===== */
body.page-image-index .zone-section { padding: 90px 0; }
body.page-image-index .zone-section.bg-blue { background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%); }
body.page-image-index .zone-section.bg-white { background: #fff; }
body.page-image-index .zone-half { flex: 1; min-width: 280px; }
body.page-image-index .zone-tag {
display: inline-block; border-radius: 30px;
font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
padding: 6px 18px; margin-bottom: 16px;
}
body.page-image-index .on-blue .zone-tag { background: rgba(255,255,255,.18); color: #fff; }
body.page-image-index .on-white .zone-tag { background: linear-gradient(90deg,rgba(0,90,156,.10),rgba(42,157,244,.10)); color: var(--blue-dark); }
body.page-image-index .on-blue h4 { color: #fff; }
body.page-image-index .on-white h4 { color: var(--foreground); }
body.page-image-index .on-blue p { color: rgba(255,255,255,.85); font-size: 1.02rem; line-height: 1.75; margin-bottom: 30px; }
body.page-image-index .on-white p { color: var(--muted); font-size: 1.02rem; line-height: 1.75; margin-bottom: 30px; }
body.page-image-index .zone-text h4 { font-size: clamp(1.5rem,2.5vw,2.2rem); font-weight: 600; margin-bottom: 14px; }
body.page-image-index .benefit-list { margin: 0; }
body.page-image-index .benefit-list li {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12);
transition: transform .3s;
}
body.page-image-index .benefit-list li:hover { transform: translateX(5px); }
body.page-image-index .benefit-list li:last-child { border-bottom: none; }
body.page-image-index .on-white .benefit-list li { border-color: rgba(0,0,0,.06); }
body.page-image-index .bl-icon {
width: 40px; height: 40px; min-width: 40px; border-radius: 12px; flex-shrink: 0;
background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: #fff;
}
body.page-image-index .on-white .bl-icon { background: linear-gradient(135deg, var(--blue-dark), var(--blue-light)); }
body.page-image-index .bl-text strong { display: block; font-size: .93rem; font-weight: 600; color: #fff; margin-bottom: 3px; }
body.page-image-index .on-white .bl-text strong { color: var(--foreground); }
body.page-image-index .bl-text span { font-size: .85rem; color: rgba(255,255,255,.75); }
body.page-image-index .on-white .bl-text span { color: var(--muted); }
body.page-image-index .zone-img-wrap { flex: 1; text-align: center; min-width: 260px; }
body.page-image-index .zone-img-wrap img {
border-radius: 20px; box-shadow: 0 20px 60px rgba(0,90,156,.2); max-width: 85%; margin: 0 auto;
transition: transform .5s var(--ease-out);
}
body.page-image-index .zone-img-wrap:hover img { transform: translateY(-8px); }
/* ===== ADDITIONAL BENEFITS ===== */
body.page-image-index .add-benefits { background: rgba(227,232,255,.55); padding: 90px 0; }
body.page-image-index .ab-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
body.page-image-index .ab-card {
background: #fff; border-radius: 20px; padding: 28px 22px;
box-shadow: 0 8px 32px rgba(24,32,79,.07);
display: flex; align-items: flex-start; gap: 16px;
transition: transform .35s var(--ease-out), box-shadow .35s;
}
body.page-image-index .ab-card:hover { transform: translateX(6px); box-shadow: 0 16px 50px rgba(24,32,79,.12); }
body.page-image-index .ab-icon {
width: 48px; height: 48px; min-width: 48px; border-radius: 14px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 20px; color: #fff;
}
body.page-image-index .ab-body h6 { font-size: .95rem; font-weight: 600; margin-bottom: 5px; }
body.page-image-index .ab-body p { font-size: .85rem; color: var(--muted); margin: 0; }
/* ===== HOW IT WORKS ===== */
body.page-image-index .how-section { background: #fff; padding: 90px 0; }
body.page-image-index .how-cols { display: flex; gap: 60px; align-items: flex-start; }
body.page-image-index .steps-side { flex: 1; }
body.page-image-index .steps-track { position: relative; }
body.page-image-index .steps-track::before {
content: ''; position: absolute;
left: 28px; top: 28px; bottom: 28px; width: 2px;
background: linear-gradient(180deg, var(--blue-dark), var(--blue-light)); opacity: .2;
}
body.page-image-index .step-row {
display: flex; gap: 22px; align-items: flex-start;
padding: 18px 0; opacity: 0; transform: translateX(-20px);
transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
body.page-image-index .step-row.visible { opacity: 1; transform: none; }
body.page-image-index .step-num {
width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 600; color: #fff;
box-shadow: 0 8px 24px rgba(0,90,156,.3); position: relative; z-index: 1;
transition: transform .35s var(--ease-out);
}
body.page-image-index .step-row:hover .step-num { transform: scale(1.08); }
body.page-image-index .step-body { padding-top: 12px; }
body.page-image-index .step-body h6 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
body.page-image-index .step-body p { font-size: .88rem; color: var(--muted); margin: 0; }
body.page-image-index .how-img { flex: 1; }
body.page-image-index .how-img img { border-radius: 20px; box-shadow: 0 20px 60px rgba(0,90,156,.15); width: 100%; }
/* ===== CTA ===== */
body.page-image-index .cta-section {
background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue-mid) 50%, var(--blue-light) 100%);
padding: 100px 0 0; overflow: hidden; position: relative;
}
body.page-image-index .cta-section::before {
content: ''; position: absolute; inset: 0;
background: url('image/bg-trans-2.png') center/cover no-repeat; opacity: .1;
}
body.page-image-index .cta-inner { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 60px; }
body.page-image-index .cta-text { flex: 1; padding-bottom: 80px; }
body.page-image-index .cta-text h3 { font-size: clamp(2rem,3vw,2.8rem); color: #fff; font-weight: 600; line-height: 1.2; margin-bottom: 16px; }
body.page-image-index .cta-text p { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 480px; margin-bottom: 32px; }
body.page-image-index .btn-cta-white {
display: inline-block;
background: #fff; color: var(--blue-dark);
font-weight: 600; font-size: .95rem;
padding: 16px 36px; border-radius: 50px;
box-shadow: 0 8px 30px rgba(0,0,0,.15); transition: all .35s var(--ease-out);
}
body.page-image-index .btn-cta-white:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.22); color: var(--blue-dark); }
body.page-image-index .cta-img-wrap { flex: 1; text-align: right; }
body.page-image-index .cta-img-wrap img { max-width: 78%; margin-bottom: -4px; }
/* ===== FOOTER ===== */
body.page-image-index .site-footer { background: var(--bg-gray); padding: 70px 0 0; }
body.page-image-index .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; gap: 40px; padding-bottom: 50px; }
body.page-image-index .footer-brand img { max-width: 140px; margin-bottom: 14px; }
body.page-image-index .footer-brand p { font-size: .88rem; color: var(--muted); max-width: 220px; }
body.page-image-index .site-footer h6 { font-size: .92rem; font-weight: 600; margin-bottom: 16px; }
body.page-image-index .site-footer ul li { margin-bottom: 10px; }
body.page-image-index .site-footer ul li a { font-size: .87rem; color: var(--muted); transition: color .25s; }
body.page-image-index .site-footer ul li a:hover { color: var(--blue-dark); }
body.page-image-index .footer-copy {
border-top: 1px solid rgba(0,0,0,.1); padding: 22px 0;
text-align: center; font-size: .82rem; color: var(--muted);
}
/* ===== REVEAL ===== */
body.page-image-index .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-image-index .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-image-index .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.page-image-index .reveal.visible, body.page-image-index .reveal-left.visible, body.page-image-index .reveal-right.visible { opacity: 1; transform: none; }
body.page-image-index .delay-1 { transition-delay: .1s; }
body.page-image-index .delay-2 { transition-delay: .2s; }
body.page-image-index .delay-3 { transition-delay: .3s; }
body.page-image-index .delay-4 { transition-delay: .4s; }
/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
body.page-image-index .what-grid { grid-template-columns: repeat(2,1fr); }
body.page-image-index .ab-grid { grid-template-columns: repeat(2,1fr); }
body.page-image-index .footer-grid { grid-template-columns: 1fr 1fr; }
body.page-image-index .how-cols { flex-direction: column; }
}
@media (max-width: 768px) {
body.page-image-index .nav-menu { display: none; flex-direction: column; align-items: flex-start;
position: absolute; top: 100%; left: 0; right: 0;
background: #fff; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
body.page-image-index .nav-menu.open { display: flex; }
body.page-image-index .nav-menu a { color: var(--foreground); width: 100%; padding: 10px 14px; }
body.page-image-index .nav-btn-wrap { display: none; }
body.page-image-index .nav-toggle { display: flex; }
body.page-image-index .navbar { position: fixed; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); padding: 14px 0; }
body.page-image-index .navbar .nav-toggle span { background: var(--foreground); }
body.page-image-index .hero-content { padding: 120px 0 60px; }
body.page-image-index .hero-img-wrap { display: none; }
body.page-image-index .row { gap: 24px; }
body.page-image-index .what-grid { grid-template-columns: 1fr; }
body.page-image-index .ab-grid { grid-template-columns: 1fr; }
body.page-image-index .footer-grid { grid-template-columns: 1fr; gap: 24px; }
body.page-image-index .social-sidebar { display: none; }
body.page-image-index .cta-inner { flex-direction: column; }
body.page-image-index .cta-img-wrap { text-align: center; }
}