/* chlak-v2.css */
:root{
--bg:#08090d;
--bg-2:#0d0f15;
--panel:#11141c;
--panel-2:#151925;
--panel-3:#1a1f2c;
--text:#f7f8fb;
--muted:#a6adba;
--muted-2:#798194;
--line:#232938;
--line-2:#30384b;
--white:#ffffff;
--blue:#5f7cff;
--blue-2:#7aa2ff;
--violet:#8b5cf6;
--cyan:#3bd7ff;
--green:#26c281;
--red:#ff6b74;
--amber:#f2b84b;
--pink:#f05aa6;
--shadow:0 24px 70px rgba(0,0,0,.34);
--shadow-soft:0 12px 35px rgba(0,0,0,.22);
--radius-xl:28px;
--radius-lg:20px;
--radius-md:15px;
--max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
color:var(--text);
background:
linear-gradient(180deg,#08090d 0,#0a0c11 34%,#0c0f15 68%,#08090d 100%);
font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.18;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:44px 44px;
mask-image:linear-gradient(to bottom,black,transparent 74%);
-webkit-mask-image:linear-gradient(to bottom,black,transparent 74%);
}
*::selection{background:#536fff;color:#fff}
a{color:inherit}
img,svg{display:block}
button,input{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.header{
position:sticky;
top:0;
z-index:60;
border-bottom:1px solid rgba(48,56,75,.65);
background:rgba(8,9,13,.94);
}
.header-inner{
min-height:74px;
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
}
.brand{
display:inline-flex;
align-items:center;
gap:11px;
text-decoration:none;
min-width:max-content;
}
.brand img{
width:40px;
height:40px;
border-radius:12px;
object-fit:cover;
box-shadow:0 9px 28px rgba(84,109,255,.2);
}
.brand-word{
font-size:1.18rem;
font-weight:860;
letter-spacing:-.035em;
}
.desktop-nav{
display:flex;
align-items:center;
gap:3px;
margin-left:auto;
}
.nav-link,.nav-summary,.lang-summary{
display:inline-flex;
align-items:center;
gap:7px;
min-height:40px;
padding:0 12px;
border-radius:11px;
color:#c4c9d4;
text-decoration:none;
font-size:.89rem;
font-weight:680;
transition:background .16s ease,color .16s ease;
}
.nav-link:hover,.nav-summary:hover,.lang-summary:hover{
background:#141821;
color:#fff;
}
.nav-details,.lang-details{position:relative}
.nav-summary,.lang-summary{list-style:none;cursor:pointer}
.nav-summary::-webkit-details-marker,.lang-summary::-webkit-details-marker{display:none}
.mega{
position:absolute;
top:calc(100% + 12px);
right:-180px;
width:min(760px,calc(100vw - 40px));
padding:18px;
border:1px solid var(--line-2);
border-radius:20px;
background:#0f1219;
box-shadow:var(--shadow);
}
.mega-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.mega-head{
grid-column:1/-1;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:2px 4px 10px;
color:var(--muted);
font-size:.77rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.mega a{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:11px 12px;
border:1px solid transparent;
border-radius:12px;
color:#d8dce5;
text-decoration:none;
font-size:.86rem;
font-weight:650;
}
.mega a:hover{
border-color:var(--line);
background:#151925;
color:#fff;
}
.mega small{
color:#747d90;
font-size:.68rem;
font-weight:700;
}
.lang-details{margin-left:4px}
.lang-pop{
position:absolute;
right:0;
top:calc(100% + 12px);
min-width:170px;
padding:8px;
border:1px solid var(--line-2);
border-radius:14px;
background:#0f1219;
box-shadow:var(--shadow-soft);
}
.lang-current{
display:block;
padding:10px 11px;
border-radius:9px;
background:#171b25;
color:#fff;
font-size:.85rem;
font-weight:750;
}
.lang-note{padding:9px 10px 5px;color:var(--muted-2);font-size:.72rem;line-height:1.4}
.mobile-menu{display:none;position:relative}
.mobile-menu>summary{
width:43px;height:43px;
display:grid;place-items:center;
list-style:none;cursor:pointer;
border:1px solid var(--line);
border-radius:12px;
background:#11141c;
}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-pop{
position:absolute;
right:0;
top:53px;
width:min(320px,calc(100vw - 26px));
padding:10px;
border:1px solid var(--line-2);
border-radius:17px;
background:#0f1219;
box-shadow:var(--shadow);
}
.mobile-pop a{
display:flex;
justify-content:space-between;
gap:12px;
padding:11px 12px;
border-radius:10px;
text-decoration:none;
color:#d5d9e2;
font-size:.88rem;
font-weight:650;
}
.mobile-pop a:hover{background:#171b25;color:#fff}
.mobile-pop .divider{height:1px;background:var(--line);margin:7px 5px}
.hero{
position:relative;
overflow:hidden;
padding:84px 0 50px;
}
.hero::before{
content:"";
position:absolute;
left:50%;
top:-210px;
width:900px;
height:620px;
transform:translateX(-50%);
border-radius:50%;
background:
radial-gradient(circle at center,rgba(95,124,255,.23),rgba(139,92,246,.08) 43%,transparent 72%);
pointer-events:none;
}
.hero-inner{position:relative;text-align:center}
.hero-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 11px;
border:1px solid #293149;
border-radius:999px;
background:#10141e;
color:#cfd4df;
font-size:.76rem;
font-weight:760;
letter-spacing:.01em;
}
.hero-chip .live{
width:7px;height:7px;border-radius:50%;background:var(--green);
box-shadow:0 0 0 4px rgba(38,194,129,.12);
}
h1{
width:min(1120px,100%);
margin:24px auto 18px;
font-size:clamp(3rem,5.9vw,5.7rem);
line-height:1.02;
letter-spacing:-.058em;
font-weight:900;
text-wrap:balance;
}
.hero-line{
display:block;
}
.hero-line-accent{
margin-top:.03em;
padding-bottom:.06em;
}
.hero-gradient{
background:linear-gradient(90deg,#f58529 0%,#dd2a7b 35%,#a63cc0 68%,#6c63ff 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.hero-copy{
width:min(760px,100%);
margin:6px auto 0;
color:var(--muted);
font-size:clamp(1rem,1.55vw,1.12rem);
line-height:1.72;
}
.hero-trust{
margin:18px auto 0;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px 16px;
color:#8f97a7;
font-size:.77rem;
font-weight:660;
}
.hero-trust span{display:inline-flex;align-items:center;gap:6px}
.hero-trust svg{color:#6f8bff}
.download-shell{
width:min(990px,100%);
margin:34px auto 0;
padding:10px;
border:1px solid #293149;
border-radius:25px;
background:linear-gradient(180deg,#141923,#0f1219);
box-shadow:0 26px 75px rgba(0,0,0,.34);
text-align:left;
}
.download-form{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
gap:8px;
padding:6px;
border:1px solid #2b3346;
border-radius:18px;
background:#0b0d12;
}
.url-wrap{
min-width:0;
display:flex;
align-items:center;
gap:10px;
padding-left:10px;
}
.url-icon{color:#70798c;flex:0 0 auto}
.url-input{
width:100%;
min-width:0;
padding:14px 2px;
border:0;
outline:0;
background:transparent;
color:#f7f8fb;
font-size:.99rem;
}
.url-input::placeholder{color:#606878}
.button{
border:0;
border-radius:12px;
padding:13px 17px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
white-space:nowrap;
text-decoration:none;
font-weight:800;
transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.button:hover{transform:translateY(-1px)}
.button:disabled{opacity:.58;cursor:not-allowed;transform:none}
.button-quiet{
background:#171b25;
color:#d6dbe5;
border:1px solid #262d3d;
}
.button-quiet:hover{background:#1c2230}
.button-primary{
color:#fff;
background:linear-gradient(135deg,#f58529 0%,#dd2a7b 38%,#8134af 70%,#515bd4 100%);
box-shadow:0 9px 24px rgba(94,111,255,.22);
}
.button-primary:hover{background:linear-gradient(135deg,#ff8c32 0%,#e63285 38%,#8c3dbb 70%,#5d66df 100%)}
.download-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:11px 7px 1px;
color:#7e8798;
font-size:.75rem;
line-height:1.5;
}
.pattern-row{display:flex;flex-wrap:wrap;gap:5px}
.pattern{
padding:3px 7px;
border:1px solid #272e3d;
border-radius:7px;
background:#11151e;
color:#9da5b4;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.7rem;
}
.download-meta a{color:#a7b5e9}
.status{
display:none;
margin:10px 2px 1px;
padding:12px 14px;
border-radius:12px;
font-size:.86rem;
font-weight:690;
}
.status.show{display:block}
.status.loading{background:#111b38;color:#b7c6ff;border:1px solid #26375f}
.status.success{background:#0e271f;color:#9ce6c4;border:1px solid #1d4a3b}
.status.error{background:#2c1518;color:#ffb6bc;border:1px solid #5b252b}
.quick-links{
width:min(990px,100%);
margin:15px auto 0;
display:flex;
justify-content:center;
gap:7px;
flex-wrap:wrap;
}
.quick-links a{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 11px;
border:1px solid var(--line);
border-radius:999px;
background:#0e1117;
color:#a9b0bd;
text-decoration:none;
font-size:.77rem;
font-weight:690;
}
.quick-links a:hover{border-color:#384159;color:#fff}
.result-wrap{
width:min(990px,100%);
margin:16px auto 0;
text-align:left;
}
.result-card{
display:grid;
grid-template-columns:180px minmax(0,1fr);
gap:20px;
padding:18px;
border:1px solid #273045;
border-radius:21px;
background:#10141c;
box-shadow:var(--shadow-soft);
}
.result-media{
min-height:180px;
aspect-ratio:4/5;
display:grid;
place-items:center;
overflow:hidden;
border:1px solid #252c3a;
border-radius:15px;
background:#0b0d12;
color:#737b89;
}
.result-media img{width:100%;height:100%;object-fit:cover}
.result-info{min-width:0;padding:6px 2px}
.ready-badge{
display:inline-flex;align-items:center;gap:6px;
padding:6px 8px;border-radius:999px;
background:#10261f;color:#92dfbd;border:1px solid #204839;
font-size:.71rem;font-weight:800;
}
.result-info h2{margin:12px 0 6px;font-size:1.32rem;letter-spacing:-.03em}
.result-url{margin:0;color:#798294;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.carousel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.media-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid #252c3c;border-radius:12px;background:#0d1016}
.media-item strong{display:block;font-size:.8rem}.media-item small{display:block;margin-top:2px;color:#747d8d;font-size:.7rem}
.media-item .button{padding:8px 10px;font-size:.74rem}
.section{padding:76px 0}
.section-tight{padding:58px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:27px}
.section-intro{max-width:720px}
.eyebrow{
display:inline-flex;
align-items:center;
gap:7px;
color:#8ca0ff;
font-size:.72rem;
font-weight:850;
letter-spacing:.13em;
text-transform:uppercase;
}
.eyebrow::before{content:"";width:18px;height:1px;background:#6f87ff}
.section h2{
margin:9px 0 0;
font-size:clamp(2rem,4.2vw,3.45rem);
line-height:1.01;
letter-spacing:-.05em;
}
.section-description{max-width:500px;color:#878f9f;line-height:1.65;font-size:.9rem}
.tool-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}
.tool-card{
position:relative;
min-height:205px;
padding:18px;
display:flex;
flex-direction:column;
border:1px solid #242b3b;
border-radius:19px;
background:linear-gradient(180deg,#121722,#0f1219);
color:inherit;
text-decoration:none;
overflow:hidden;
transition:transform .17s ease,border-color .17s ease,background .17s ease;
}
.tool-card::after{
content:"";
position:absolute;
right:-48px;
top:-48px;
width:125px;
height:125px;
border-radius:50%;
background:var(--tool-glow,rgba(95,124,255,.13));
opacity:.75;
pointer-events:none;
}
.tool-card:hover{
transform:translateY(-3px);
border-color:#3c4761;
background:linear-gradient(180deg,#151b28,#11151e);
}
.tool-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tool-icon{
width:45px;height:45px;
display:grid;place-items:center;
border:1px solid var(--tool-border,#30416e);
border-radius:13px;
background:var(--tool-bg,#141d39);
color:var(--tool-color,#8ea4ff);
}
.tool-icon svg{width:22px;height:22px}
.tool-arrow{color:#616b7d;font-size:1.05rem}
.tool-copy{margin-top:auto;padding-top:28px}
.tool-copy h3{margin:0;font-size:1.01rem;letter-spacing:-.02em}
.tool-copy p{margin:6px 0 0;color:#81899a;font-size:.79rem;line-height:1.5}
.tool-type{
display:inline-flex;
margin-top:10px;
padding:4px 7px;
border:1px solid #2b3242;
border-radius:999px;
color:#6f7889;
font-size:.65rem;
font-weight:760;
text-transform:uppercase;
letter-spacing:.06em;
}
.advanced-wrap{
border:1px solid #252d3e;
border-radius:26px;
background:linear-gradient(180deg,#0f131b,#0c0f15);
overflow:hidden;
}
.advanced-top{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:30px;
padding:30px;
border-bottom:1px solid #222938;
background:
linear-gradient(118deg,rgba(95,124,255,.12),transparent 43%),
#10141c;
}
.advanced-top h2{font-size:clamp(2rem,4vw,3.2rem)}
.advanced-top p{margin:0;color:#8b93a2;line-height:1.7}
.advanced-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
}
.advanced-card{
min-height:154px;
padding:18px;
border-right:1px solid #222938;
border-bottom:1px solid #222938;
text-decoration:none;
transition:background .15s ease;
}
.advanced-card:nth-child(4n){border-right:0}
.advanced-card:hover{background:#141923}
.advanced-icon{color:#778dff;margin-bottom:25px}
.advanced-icon svg{width:22px;height:22px}
.advanced-card h3{margin:0 0 6px;font-size:.94rem}
.advanced-card p{margin:0;color:#747d8d;font-size:.76rem;line-height:1.5}
.advanced-label{margin-top:9px;color:#5e6778;font-size:.65rem;font-weight:760;text-transform:uppercase;letter-spacing:.07em}
.mapper{
display:grid;
grid-template-columns:.82fr 1.18fr;
gap:16px;
align-items:stretch;
}
.mapper-intro,.mapper-table{
border:1px solid #252d3e;
border-radius:22px;
background:#0f1219;
}
.mapper-intro{padding:26px}
.mapper-intro h2{margin-top:0}
.mapper-intro p{color:#818a9a;line-height:1.7}
.mapper-note{
margin-top:24px;
padding:13px 14px;
border:1px solid #273147;
border-radius:13px;
background:#111726;
color:#a4aec0;
font-size:.8rem;
line-height:1.55;
}
.mapper-table{padding:10px}
.map-row{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:15px;
align-items:center;
padding:13px 12px;
border-bottom:1px solid #202635;
}
.map-row:last-child{border-bottom:0}
.map-pattern{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#a5adbb;font-size:.78rem}
.map-row a{text-decoration:none;color:#d9ddea;font-size:.83rem;font-weight:720}
.map-row a:hover{color:#8fa5ff}
.map-sub{display:block;margin-top:3px;color:#676f80;font-size:.7rem;font-family:inherit}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.step{
min-height:220px;
padding:22px;
border:1px solid #242b3b;
border-radius:19px;
background:#0f1219;
}
.step-number{
width:39px;height:39px;
display:grid;place-items:center;
border:1px solid #31406b;
border-radius:11px;
background:#141c35;
color:#94a9ff;
font-size:.73rem;font-weight:850
}
.step h3{margin:36px 0 8px;font-size:1.06rem}
.step p{margin:0;color:#7d8697;line-height:1.63;font-size:.83rem}
.trust-panel{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:0;
border:1px solid #273047;
border-radius:26px;
overflow:hidden;
background:#0f1219;
}
.trust-copy{
padding:34px;
background:
linear-gradient(120deg,rgba(98,124,255,.1),transparent 55%),
#11151e;
}
.trust-copy h2{margin-top:0}
.trust-copy p{max-width:650px;color:#858e9f;line-height:1.72}
.trust-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:20px}
.trust-point{padding:12px;border:1px solid #252e41;border-radius:12px;background:#0e121a;color:#bac1cf;font-size:.8rem;font-weight:680}
.trust-side{padding:30px;background:#090b10;display:flex;flex-direction:column;justify-content:space-between}
.trust-side .mini{color:#697387;font-size:.69rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.trust-side h3{margin:11px 0;font-size:1.75rem;line-height:1.08;letter-spacing:-.04em}
.trust-side p{margin:0;color:#777f90;line-height:1.65;font-size:.86rem}
.trust-side a{margin-top:24px;color:#9badff;text-underline-offset:4px;font-weight:780}
.faq{max-width:900px;margin:0 auto}
.faq details{border-bottom:1px solid #242b3b}
.faq summary{
list-style:none;
cursor:pointer;
padding:20px 2px;
display:flex;
justify-content:space-between;
align-items:center;
gap:22px;
font-size:.94rem;
font-weight:760;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#6f7b91;font-size:1.25rem}
.faq details[open] summary::after{content:"−"}
.faq-answer{padding:0 40px 21px 2px;color:#7f8798;line-height:1.7;font-size:.84rem}
footer{
margin-top:42px;
padding:48px 0 26px;
border-top:1px solid #202635;
background:#07080b;
}
.footer-grid{
display:grid;
grid-template-columns:1.45fr repeat(4,1fr);
gap:30px;
}
.footer-brand p{max-width:360px;color:#70798a;font-size:.8rem;line-height:1.65}
.footer-col h3{margin:4px 0 14px;color:#c9ced8;font-size:.78rem}
.footer-col a{
display:block;
width:max-content;
max-width:100%;
margin:9px 0;
color:#6f7787;
text-decoration:none;
font-size:.78rem;
}
.footer-col a:hover{color:#fff}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:20px;
margin-top:34px;
padding-top:20px;
border-top:1px solid #1e2431;
color:#555e6f;
font-size:.71rem;
line-height:1.55;
}
@media(max-width:1080px){
.desktop-nav,.lang-details{display:none}
.mobile-menu{display:block}
.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.advanced-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.advanced-card:nth-child(4n){border-right:1px solid #222938}
.advanced-card:nth-child(3n){border-right:0}
.footer-grid{grid-template-columns:1.4fr repeat(2,1fr)}
.footer-col:nth-child(4),.footer-col:nth-child(5){grid-column:auto}
}
@media(max-width:820px){
.container{width:min(var(--max),calc(100% - 28px))}
.header-inner{min-height:68px}
.hero{padding:58px 0 35px}
h1{font-size:clamp(2.75rem,9.8vw,4.7rem);line-height:1.03;letter-spacing:-.052em}
.download-form{grid-template-columns:minmax(0,1fr) auto}
.url-wrap{grid-column:1/-1;padding:4px 7px 8px;border-bottom:1px solid #202737}
#pasteBtn{grid-column:1/2}
#submitBtn{grid-column:2/3}
.download-meta{align-items:flex-start;flex-direction:column}
.result-card{grid-template-columns:120px minmax(0,1fr)}
.section{padding:60px 0}
.section-tight{padding:48px 0}
.section-head{display:block}
.section-description{margin-top:13px}
.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.advanced-top{grid-template-columns:1fr}
.advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.advanced-card:nth-child(3n){border-right:1px solid #222938}
.advanced-card:nth-child(2n){border-right:0}
.mapper{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.trust-panel{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-brand{grid-column:1/-1}
}
@media(max-width:520px){
.container{width:min(var(--max),calc(100% - 20px))}
.brand img{width:37px;height:37px}
.hero{padding-top:44px}
h1{font-size:2.72rem;line-height:1.04;letter-spacing:-.045em}
.hero-copy{font-size:.96rem}
.download-shell{padding:8px;border-radius:20px}
.download-form{display:flex;flex-wrap:wrap}
.url-wrap{flex:1 0 100%;width:100%}
#pasteBtn{flex:1}
#submitBtn{flex:1.15}
.result-card{grid-template-columns:1fr}
.result-media{aspect-ratio:16/9}
.carousel-grid{grid-template-columns:1fr}
.tool-grid{grid-template-columns:1fr}
.tool-card{min-height:175px}
.advanced-grid{grid-template-columns:1fr}
.advanced-card,.advanced-card:nth-child(2n),.advanced-card:nth-child(3n),.advanced-card:nth-child(4n){border-right:0}
.map-row{grid-template-columns:1fr;gap:4px}
.trust-copy,.trust-side{padding:23px}
.trust-points{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.footer-brand{grid-column:auto}
.footer-bottom{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}
:root{
color-scheme:light;
--bg:#f5f7fb;
--bg-2:#eef2f7;
--panel:#ffffff;
--panel-2:#f8faff;
--panel-3:#f1f4f9;
--text:#111827;
--muted:#667085;
--muted-2:#8a94a6;
--line:#e4e8ef;
--line-2:#d9dfe8;
--blue:#4f67f6;
--blue-2:#6d83ff;
--violet:#7c5ce7;
--shadow:0 24px 70px rgba(15,23,42,.09);
--shadow-soft:0 12px 35px rgba(15,23,42,.07);
}
body{
color:#111827;
background:
radial-gradient(circle at 12% 5%,rgba(79,103,246,.10),transparent 29rem),
radial-gradient(circle at 88% 8%,rgba(124,92,231,.08),transparent 28rem),
linear-gradient(180deg,#fafbfe 0%,#f5f7fb 48%,#f8f9fc 100%);
}
body::before{
opacity:.32;
background-image:
linear-gradient(rgba(57,73,112,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(57,73,112,.04) 1px,transparent 1px);
}
.header{
border-bottom-color:rgba(220,225,234,.9);
background:rgba(255,255,255,.94);
box-shadow:0 1px 0 rgba(15,23,42,.025);
}
.brand-word{color:#111827}
.nav-link,.nav-summary,.lang-summary{color:#536075}
.nav-link:hover,.nav-summary:hover,.lang-summary:hover{background:#f3f5f9;color:#111827}
.mega,.lang-pop,.mobile-pop{
border-color:#dde2ea;
background:#fff;
box-shadow:0 22px 60px rgba(15,23,42,.12);
}
.mega-head{color:#7d8798}
.mega a{color:#384152}
.mega a:hover{border-color:#e1e5ec;background:#f6f8fb;color:#101828}
.mega small{color:#98a1b2}
.lang-current{background:#f2f5fa;color:#172033}
.lang-note{color:#7f899a}
.mobile-menu>summary{
border-color:#dfe4ec;
background:#fff;
color:#283346;
}
.mobile-pop a{color:#344054}
.mobile-pop a:hover{background:#f5f7fa;color:#111827}
.mobile-pop .divider{background:#e6eaf0}
.theme-toggle{
width:42px;
height:42px;
flex:0 0 42px;
display:grid;
place-items:center;
border:1px solid #dfe4ec;
border-radius:12px;
background:#fff;
color:#374151;
box-shadow:0 4px 14px rgba(15,23,42,.04);
transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.theme-toggle:hover{
transform:translateY(-1px);
background:#f5f7fa;
border-color:#cfd6e1;
color:#111827;
}
.theme-icon{grid-area:1/1}
.theme-icon-sun{display:none}
.hero::before{
background:radial-gradient(circle at center,rgba(79,103,246,.15),rgba(124,92,231,.055) 46%,transparent 72%);
}
.hero-chip{
border-color:#dfe4ec;
background:rgba(255,255,255,.82);
color:#4e5a6d;
box-shadow:0 8px 24px rgba(15,23,42,.05);
}
h1{color:#111827}
.hero-gradient{
background:linear-gradient(90deg,#f58529 0%,#dd2a7b 35%,#8134af 68%,#515bd4 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-copy{color:#667085}
.hero-trust{color:#758095}
.download-shell{
border-color:#dde2ea;
background:rgba(255,255,255,.96);
box-shadow:0 30px 80px rgba(15,23,42,.10);
}
.download-form{
border-color:#dfe4ec;
background:#fbfcfe;
}
.url-icon{color:#8b95a7}
.url-input{color:#101828}
.url-input::placeholder{color:#9aa4b5}
.button-quiet{
background:#f2f5f9;
color:#344054;
border-color:#e0e5ec;
}
.button-quiet:hover{background:#e9edf4}
.button-primary{
color:#fff;
background:linear-gradient(135deg,#f58529 0%,#dd2a7b 38%,#8134af 70%,#515bd4 100%);
box-shadow:0 10px 24px rgba(84,103,239,.18);
}
.download-meta{color:#7b8595}
.pattern{border-color:#e0e5ec;background:#f5f7fa;color:#667085}
.download-meta a{color:#4e63d8}
.status.loading{background:#eef3ff;color:#3f55bf;border-color:#d7e0ff}
.status.success{background:#edf9f3;color:#197456;border-color:#d4efdf}
.status.error{background:#fff1f2;color:#b4232d;border-color:#ffd9dd}
.quick-links a{
border-color:#e0e5ec;
background:#fff;
color:#667085;
box-shadow:0 4px 14px rgba(15,23,42,.025);
}
.quick-links a:hover{border-color:#cbd3df;color:#111827;background:#f9fafc}
.result-card{
border-color:#dfe4ec;
background:#fff;
box-shadow:0 16px 45px rgba(15,23,42,.08);
}
.result-media{
border-color:#e1e5ec;
background:#f4f6fa;
color:#8b95a6;
}
.ready-badge{background:#edf9f3;color:#197456;border-color:#d2ecdd}
.result-url{color:#7c8797}
.media-item{border-color:#e2e6ed;background:#f8f9fb}
.media-item small{color:#818b9b}
.eyebrow{color:#5368df}
.eyebrow::before{background:#667bf2}
.section-description{color:#7a8495}
.tool-card{
border-color:#e1e5ec;
background:linear-gradient(180deg,#ffffff,#fafbfe);
box-shadow:0 10px 28px rgba(15,23,42,.035);
}
.tool-card:hover{
border-color:#cfd6e1;
background:#fff;
box-shadow:0 18px 45px rgba(15,23,42,.08);
}
.tool-icon{
border-color:#dfe5f2!important;
background:#f4f7ff!important;
color:#5068e6!important;
}
.tool-arrow{color:#a0a8b6}
.tool-copy h3{color:#182133}
.tool-copy p{color:#758095}
.tool-type{border-color:#e0e5ec;color:#8b95a5;background:#fafbfc}
.advanced-wrap{
border-color:#dfe4ec;
background:#fff;
box-shadow:0 18px 50px rgba(15,23,42,.05);
}
.advanced-top{
border-bottom-color:#e1e5ec;
background:
linear-gradient(118deg,rgba(79,103,246,.075),transparent 45%),
#fafbfe;
}
.advanced-top p{color:#758095}
.advanced-card{border-color:#e4e8ef}
.advanced-card:hover{background:#f7f9fc}
.advanced-icon{color:#5c71e9}
.advanced-card h3{color:#182133}
.advanced-card p{color:#7a8494}
.advanced-label{color:#98a2b3}
.mapper-intro,.mapper-table{
border-color:#dfe4ec;
background:#fff;
box-shadow:0 12px 35px rgba(15,23,42,.035);
}
.mapper-intro p{color:#748093}
.mapper-note{border-color:#dde4f2;background:#f4f7ff;color:#5b6882}
.map-row{border-bottom-color:#e7eaf0}
.map-pattern{color:#536075}
.map-row a{color:#344054}
.map-row a:hover{color:#5368df}
.map-sub{color:#98a2b3}
.step{
border-color:#e1e5ec;
background:#fff;
box-shadow:0 10px 28px rgba(15,23,42,.03);
}
.step-number{border-color:#dbe2fb;background:#f0f4ff;color:#5268dd}
.step h3{color:#182133}
.step p{color:#788395}
.trust-panel{border-color:#dce2eb;background:#fff}
.trust-copy{
background:
linear-gradient(120deg,rgba(79,103,246,.07),transparent 58%),
#fafbfe;
}
.trust-copy p{color:#748093}
.trust-point{border-color:#e1e5ec;background:#fff;color:#536075}
.trust-side{background:#111827}
.trust-side .mini{color:#8f9bb0}
.trust-side h3{color:#fff}
.trust-side p{color:#a5adba}
.trust-side a{color:#aebcff}
.faq details{border-bottom-color:#e1e5ec}
.faq summary{color:#182133}
.faq summary::after{color:#8d97a7}
.faq-answer{color:#748093}
footer{border-top-color:#e1e5ec;background:#fff}
.footer-brand p{color:#7b8595}
.footer-col h3{color:#344054}
.footer-col a{color:#7a8494}
.footer-col a:hover{color:#111827}
.footer-bottom{border-top-color:#e7eaf0;color:#98a2b3}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{
color:#f7f8fb;
background:linear-gradient(180deg,#08090d 0,#0a0c11 34%,#0c0f15 68%,#08090d 100%);
}
html[data-theme="dark"] body::before{
opacity:.18;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
}
html[data-theme="dark"] .header{border-bottom-color:rgba(48,56,75,.65);background:rgba(8,9,13,.94);box-shadow:none}
html[data-theme="dark"] .brand-word{color:#f7f8fb}
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-summary,
html[data-theme="dark"] .lang-summary{color:#c4c9d4}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-summary:hover,
html[data-theme="dark"] .lang-summary:hover{background:#141821;color:#fff}
html[data-theme="dark"] .mega,
html[data-theme="dark"] .lang-pop,
html[data-theme="dark"] .mobile-pop{border-color:#30384b;background:#0f1219;box-shadow:0 24px 70px rgba(0,0,0,.34)}
html[data-theme="dark"] .mega-head{color:#a6adba}
html[data-theme="dark"] .mega a{color:#d8dce5}
html[data-theme="dark"] .mega a:hover{border-color:#232938;background:#151925;color:#fff}
html[data-theme="dark"] .mega small{color:#747d90}
html[data-theme="dark"] .lang-current{background:#171b25;color:#fff}
html[data-theme="dark"] .lang-note{color:#798194}
html[data-theme="dark"] .mobile-menu>summary{border-color:#232938;background:#11141c;color:#f7f8fb}
html[data-theme="dark"] .mobile-pop a{color:#d5d9e2}
html[data-theme="dark"] .mobile-pop a:hover{background:#171b25;color:#fff}
html[data-theme="dark"] .mobile-pop .divider{background:#232938}
html[data-theme="dark"] .theme-toggle{border-color:#2a3142;background:#11141c;color:#e8ebf2;box-shadow:none}
html[data-theme="dark"] .theme-toggle:hover{background:#171b25;border-color:#394155;color:#fff}
html[data-theme="dark"] .theme-icon-moon{display:none}
html[data-theme="dark"] .theme-icon-sun{display:grid}
html[data-theme="dark"] .hero::before{background:radial-gradient(circle at center,rgba(95,124,255,.23),rgba(139,92,246,.08) 43%,transparent 72%)}
html[data-theme="dark"] .hero-chip{border-color:#293149;background:#10141e;color:#cfd4df;box-shadow:none}
html[data-theme="dark"] h1{color:#f7f8fb}
html[data-theme="dark"] .hero-gradient{background:linear-gradient(90deg,#f58529 0%,#dd2a7b 35%,#a63cc0 68%,#6c63ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .hero-copy{color:#a6adba}
html[data-theme="dark"] .hero-trust{color:#8f97a7}
html[data-theme="dark"] .download-shell{border-color:#293149;background:linear-gradient(180deg,#141923,#0f1219);box-shadow:0 26px 75px rgba(0,0,0,.34)}
html[data-theme="dark"] .download-form{border-color:#2b3346;background:#0b0d12}
html[data-theme="dark"] .url-icon{color:#70798c}
html[data-theme="dark"] .url-input{color:#f7f8fb}
html[data-theme="dark"] .url-input::placeholder{color:#606878}
html[data-theme="dark"] .button-quiet{background:#171b25;color:#d6dbe5;border-color:#262d3d}
html[data-theme="dark"] .button-quiet:hover{background:#1c2230}
html[data-theme="dark"] .button-primary{background:linear-gradient(135deg,#f58529 0%,#dd2a7b 38%,#8134af 70%,#515bd4 100%);box-shadow:0 9px 24px rgba(94,111,255,.22)}
html[data-theme="dark"] .download-meta{color:#7e8798}
html[data-theme="dark"] .pattern{border-color:#272e3d;background:#11151e;color:#9da5b4}
html[data-theme="dark"] .download-meta a{color:#a7b5e9}
html[data-theme="dark"] .status.loading{background:#111b38;color:#b7c6ff;border-color:#26375f}
html[data-theme="dark"] .status.success{background:#0e271f;color:#9ce6c4;border-color:#1d4a3b}
html[data-theme="dark"] .status.error{background:#2c1518;color:#ffb6bc;border-color:#5b252b}
html[data-theme="dark"] .quick-links a{border-color:#232938;background:#0e1117;color:#a9b0bd;box-shadow:none}
html[data-theme="dark"] .quick-links a:hover{border-color:#384159;color:#fff;background:#0e1117}
html[data-theme="dark"] .result-card{border-color:#273045;background:#10141c;box-shadow:0 12px 35px rgba(0,0,0,.22)}
html[data-theme="dark"] .result-media{border-color:#252c3a;background:#0b0d12;color:#737b89}
html[data-theme="dark"] .ready-badge{background:#10261f;color:#92dfbd;border-color:#204839}
html[data-theme="dark"] .result-url{color:#798294}
html[data-theme="dark"] .media-item{border-color:#252c3c;background:#0d1016}
html[data-theme="dark"] .media-item small{color:#747d8d}
html[data-theme="dark"] .eyebrow{color:#8ca0ff}
html[data-theme="dark"] .eyebrow::before{background:#6f87ff}
html[data-theme="dark"] .section-description{color:#878f9f}
html[data-theme="dark"] .tool-card{border-color:#242b3b;background:linear-gradient(180deg,#121722,#0f1219);box-shadow:none}
html[data-theme="dark"] .tool-card:hover{border-color:#3c4761;background:linear-gradient(180deg,#151b28,#11151e);box-shadow:none}
html[data-theme="dark"] .tool-icon{border-color:var(--tool-border,#30416e)!important;background:var(--tool-bg,#141d39)!important;color:var(--tool-color,#8ea4ff)!important}
html[data-theme="dark"] .tool-arrow{color:#616b7d}
html[data-theme="dark"] .tool-copy h3{color:#f7f8fb}
html[data-theme="dark"] .tool-copy p{color:#81899a}
html[data-theme="dark"] .tool-type{border-color:#2b3242;color:#6f7889;background:transparent}
html[data-theme="dark"] .advanced-wrap{border-color:#252d3e;background:linear-gradient(180deg,#0f131b,#0c0f15);box-shadow:none}
html[data-theme="dark"] .advanced-top{border-bottom-color:#222938;background:linear-gradient(118deg,rgba(95,124,255,.12),transparent 43%),#10141c}
html[data-theme="dark"] .advanced-top p{color:#8b93a2}
html[data-theme="dark"] .advanced-card{border-color:#222938}
html[data-theme="dark"] .advanced-card:hover{background:#141923}
html[data-theme="dark"] .advanced-icon{color:#778dff}
html[data-theme="dark"] .advanced-card h3{color:#f7f8fb}
html[data-theme="dark"] .advanced-card p{color:#747d8d}
html[data-theme="dark"] .advanced-label{color:#5e6778}
html[data-theme="dark"] .mapper-intro,
html[data-theme="dark"] .mapper-table{border-color:#252d3e;background:#0f1219;box-shadow:none}
html[data-theme="dark"] .mapper-intro p{color:#818a9a}
html[data-theme="dark"] .mapper-note{border-color:#273147;background:#111726;color:#a4aec0}
html[data-theme="dark"] .map-row{border-bottom-color:#202635}
html[data-theme="dark"] .map-pattern{color:#a5adbb}
html[data-theme="dark"] .map-row a{color:#d9ddea}
html[data-theme="dark"] .map-row a:hover{color:#8fa5ff}
html[data-theme="dark"] .map-sub{color:#676f80}
html[data-theme="dark"] .step{border-color:#242b3b;background:#0f1219;box-shadow:none}
html[data-theme="dark"] .step-number{border-color:#31406b;background:#141c35;color:#94a9ff}
html[data-theme="dark"] .step h3{color:#f7f8fb}
html[data-theme="dark"] .step p{color:#7d8697}
html[data-theme="dark"] .trust-panel{border-color:#273047;background:#0f1219}
html[data-theme="dark"] .trust-copy{background:linear-gradient(120deg,rgba(98,124,255,.1),transparent 55%),#11151e}
html[data-theme="dark"] .trust-copy p{color:#858e9f}
html[data-theme="dark"] .trust-point{border-color:#252e41;background:#0e121a;color:#bac1cf}
html[data-theme="dark"] .trust-side{background:#090b10}
html[data-theme="dark"] .trust-side .mini{color:#697387}
html[data-theme="dark"] .trust-side h3{color:#f7f8fb}
html[data-theme="dark"] .trust-side p{color:#777f90}
html[data-theme="dark"] .trust-side a{color:#9badff}
html[data-theme="dark"] .faq details{border-bottom-color:#242b3b}
html[data-theme="dark"] .faq summary{color:#f7f8fb}
html[data-theme="dark"] .faq summary::after{color:#6f7b91}
html[data-theme="dark"] .faq-answer{color:#7f8798}
html[data-theme="dark"] footer{border-top-color:#202635;background:#07080b}
html[data-theme="dark"] .footer-brand p{color:#70798a}
html[data-theme="dark"] .footer-col h3{color:#c9ced8}
html[data-theme="dark"] .footer-col a{color:#6f7787}
html[data-theme="dark"] .footer-col a:hover{color:#fff}
html[data-theme="dark"] .footer-bottom{border-top-color:#1e2431;color:#555e6f}
.hero h1,
.hero h1 .hero-line,
.hero h1 .hero-gradient {
font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
font-weight: 800 !important;
}
.hero h1 {
line-height: 1.10 !important;
}
.hero h1 .hero-line {
line-height: 1.10 !important;
}
.hero h1 .hero-line-accent {
line-height: 1.12 !important;
margin-top: .08em !important;
padding-bottom: .08em !important;
}
@media (max-width: 820px) {
.hero h1,
.hero h1 .hero-line,
.hero h1 .hero-line-accent {
line-height: 1.12 !important;
}
}
.brand-mark{
width:40px;
height:40px;
flex:0 0 40px;
display:grid;
place-items:center;
border-radius:12px;
color:#fff;
font-weight:800;
font-family:Inter,ui-sans-serif,system-ui,sans-serif;
background:linear-gradient(135deg,#f58529 0%,#dd2a7b 35%,#8134af 68%,#515bd4 100%);
box-shadow:0 8px 24px rgba(129,52,175,.22);
}
@font-face {
font-family: "Poppins";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/poppins-800-latin-v1.woff2") format("woff2");
}
.tool-theme-video{
--tool-bg:#112238;
--tool-border:#23476f;
--tool-color:#70b7ff;
--tool-glow:rgba(61,153,255,.17);
}
.tool-theme-reels{
--tool-bg:#241a3c;
--tool-border:#49356e;
--tool-color:#b497ff;
--tool-glow:rgba(145,92,246,.17);
}
.tool-theme-photo{
--tool-bg:#163126;
--tool-border:#285846;
--tool-color:#77dfad;
--tool-glow:rgba(38,194,129,.16);
}
.tool-theme-story{
--tool-bg:#351d28;
--tool-border:#613145;
--tool-color:#ff8ebd;
--tool-glow:rgba(240,90,166,.16);
}
.tool-theme-igtv{
--tool-bg:#2d2414;
--tool-border:#574729;
--tool-color:#f2c96f;
--tool-glow:rgba(242,184,75,.15);
}
.tool-theme-carousel{
--tool-bg:#142d33;
--tool-border:#27505a;
--tool-color:#75dcea;
--tool-glow:rgba(59,215,255,.14);
}
.tool-theme-profile{
--tool-bg:#221c38;
--tool-border:#443768;
--tool-color:#aa98ff;
--tool-glow:rgba(139,92,246,.14);
}
.tool-theme-viewer{
--tool-bg:#1b283b;
--tool-border:#314b70;
--tool-color:#88baff;
--tool-glow:rgba(95,124,255,.15);
}
.is-hidden{
display:none !important;
}
@media (min-width:1081px) {
.header .header-inner > #themeToggle {
display:none !important;
visibility:hidden !important;
width:0 !important;
min-width:0 !important;
height:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
overflow:hidden !important;
}
.footer-bottom {
align-items:center;
}
.footer-settings {
display:inline-flex;
align-items:center;
gap:6px;
flex:0 0 auto;
padding:4px;
border:1px solid #e1e5ec;
border-radius:11px;
background:#fff;
}
.footer-language {
height:30px;
display:inline-flex;
align-items:center;
gap:6px;
padding:0 7px;
color:#667085;
font-size:.68rem;
font-weight:680;
white-space:nowrap;
}
.footer-language svg {
width:13px;
height:13px;
}
.footer-theme-toggle {
width:30px !important;
min-width:30px !important;
height:30px !important;
padding:0 !important;
margin:0 !important;
display:inline-grid !important;
place-items:center !important;
border:1px solid #e7eaf0 !important;
border-radius:8px !important;
background:#f8fafc !important;
color:#667085 !important;
box-shadow:none !important;
}
.footer-theme-toggle:hover {
background:#f1f4f8 !important;
color:#111827 !important;
}
.footer-theme-toggle .footer-theme-label {
display:none !important;
}
html[data-theme="dark"] .footer-settings {
border-color:#252c39;
background:#0d1118;
}
html[data-theme="dark"] .footer-language {
color:#9da7b8;
}
html[data-theme="dark"] .footer-theme-toggle {
border-color:#293140 !important;
background:#151a23 !important;
color:#c9ced8 !important;
}
}
@media (max-width:1080px) {
.footer-settings {
display:none !important;
}
}
@media (max-width:1080px) {
.header .header-inner > #themeToggle {
display:none !important;
visibility:hidden !important;
}
.mobile-menu {
display:block;
margin-left:auto;
position:relative;
}
.mobile-menu > summary {
width:42px;
height:42px;
display:grid;
place-items:center;
list-style:none;
cursor:pointer;
}
.mobile-menu > summary::-webkit-details-marker {
display:none;
}
.mobile-pop {
position:absolute;
top:calc(100% + 10px);
right:0;
width:min(340px,calc(100vw - 28px));
max-height:min(650px,calc(100vh - 92px));
overflow-y:auto;
overscroll-behavior:contain;
padding:8px;
border:1px solid #dde2ea;
border-radius:17px;
background:#fff;
box-shadow:
0 22px 60px rgba(15,23,42,.14),
0 4px 14px rgba(15,23,42,.05);
}
.mobile-pop > a,
.mobile-primary-link {
min-height:44px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:10px 11px;
border-radius:10px;
color:#344054;
text-decoration:none;
font-size:.86rem;
font-weight:680;
}
.mobile-pop > a small,
.mobile-primary-link small {
color:#98a2b3;
font-size:.68rem;
font-weight:700;
}
.mobile-pop > a:hover {
background:#f5f7fa;
color:#111827;
}
.mobile-group {
margin:2px 0;
border-radius:11px;
}
.mobile-group > summary {
min-height:46px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:10px 11px;
list-style:none;
cursor:pointer;
border-radius:10px;
color:#344054;
font-size:.86rem;
font-weight:720;
transition:
background .15s ease,
color .15s ease;
}
.mobile-group > summary::-webkit-details-marker {
display:none;
}
.mobile-group > summary:hover,
.mobile-group[open] > summary {
background:#f4f6fa;
color:#111827;
}
.mobile-group-meta {
display:inline-flex;
align-items:center;
gap:7px;
color:#98a2b3;
}
.mobile-group-meta small {
font-size:.67rem;
font-weight:750;
}
.mobile-group-meta svg {
transition:transform .18s ease;
}
.mobile-group[open] .mobile-group-meta svg {
transform:rotate(180deg);
}
.mobile-submenu {
margin:1px 4px 7px;
padding:5px;
border:1px solid #e8ebf1;
border-radius:11px;
background:#f8fafc;
}
.mobile-submenu a {
min-height:40px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 9px;
border-radius:8px;
color:#475467;
text-decoration:none;
font-size:.8rem;
font-weight:650;
}
.mobile-submenu a:hover {
background:#fff;
color:#101828;
}
.mobile-submenu small {
flex:0 0 auto;
color:#98a2b3;
font-size:.63rem;
font-weight:700;
}
.mobile-divider,
.mobile-pop .divider {
height:1px;
margin:7px 7px;
background:#e7eaf0;
}
.footer-bottom {
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:13px !important;
}
.footer-settings {
display:inline-flex !important;
align-items:center;
gap:4px;
width:max-content;
padding:4px;
border:1px solid #e1e5ec;
border-radius:10px;
background:#fff;
box-shadow:0 1px 3px rgba(16,24,40,.04);
}
.footer-language {
height:31px;
display:inline-flex;
align-items:center;
gap:6px;
padding:0 8px;
color:#667085;
font-size:.68rem;
font-weight:700;
}
.footer-language svg {
width:13px;
height:13px;
}
.footer-theme-toggle {
width:31px !important;
min-width:31px !important;
height:31px !important;
margin:0 !important;
padding:0 !important;
display:grid !important;
place-items:center !important;
border:1px solid #e5e9f0 !important;
border-radius:7px !important;
background:#f8fafc !important;
color:#667085 !important;
box-shadow:none !important;
}
.footer-theme-toggle .footer-theme-label {
display:none !important;
}
html[data-theme="dark"] .mobile-pop {
border-color:#293140;
background:#0d1118;
}
html[data-theme="dark"] .mobile-pop > a,
html[data-theme="dark"] .mobile-group > summary {
color:#cbd2dc;
}
html[data-theme="dark"] .mobile-pop > a:hover,
html[data-theme="dark"] .mobile-group > summary:hover,
html[data-theme="dark"] .mobile-group[open] > summary {
background:#151b25;
color:#fff;
}
html[data-theme="dark"] .mobile-submenu {
border-color:#252d3a;
background:#10151d;
}
html[data-theme="dark"] .mobile-submenu a {
color:#aeb7c6;
}
html[data-theme="dark"] .mobile-submenu a:hover {
background:#171d27;
color:#fff;
}
html[data-theme="dark"] .mobile-divider,
html[data-theme="dark"] .mobile-pop .divider {
background:#242c39;
}
html[data-theme="dark"] .footer-settings {
border-color:#293140;
background:#0d1118;
}
html[data-theme="dark"] .footer-language {
color:#aab3c2;
}
html[data-theme="dark"] .footer-theme-toggle {
border-color:#293140 !important;
background:#151a23 !important;
color:#cbd2dc !important;
}
}
@media (max-width:520px) {
.mobile-pop {
width:min(320px,calc(100vw - 20px));
right:0;
}
}
@media (max-width:1080px) {
.header .header-inner > #themeToggle {
display:none !important;
visibility:hidden !important;
}
.mobile-pop {
width:min(340px,calc(100vw - 28px));
padding:8px;
border:1px solid #dde2ea;
border-radius:17px;
background:#fff;
box-shadow:
0 22px 60px rgba(15,23,42,.14),
0 4px 14px rgba(15,23,42,.05);
}
.mobile-instagram-tools {
margin:0 0 4px;
}
.mobile-instagram-tools > summary {
min-height:46px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:10px 11px;
list-style:none;
cursor:pointer;
border-radius:10px;
color:#344054;
font-size:.86rem;
font-weight:720;
}
.mobile-instagram-tools > summary::-webkit-details-marker {
display:none;
}
.mobile-instagram-tools[open] > summary {
background:#f4f6fa;
color:#101828;
}
.mobile-instagram-tools .mobile-submenu {
max-height:340px;
overflow-y:auto;
margin:2px 4px 7px;
padding:5px;
border:1px solid #e7eaf0;
border-radius:11px;
background:#f8fafc;
}
.mobile-instagram-tools .mobile-submenu a {
min-height:40px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:8px 9px;
border-radius:8px;
color:#475467;
text-decoration:none;
font-size:.8rem;
font-weight:650;
}
.mobile-instagram-tools .mobile-submenu a:hover {
background:#fff;
color:#101828;
}
.mobile-instagram-tools .mobile-submenu small {
flex:0 0 auto;
color:#98a2b3;
font-size:.63rem;
font-weight:700;
}
.mobile-nav-direct {
min-height:44px;
display:flex !important;
align-items:center !important;
padding:10px 11px !important;
border-radius:10px;
color:#344054 !important;
text-decoration:none;
font-size:.86rem !important;
font-weight:680 !important;
}
.mobile-nav-direct:hover {
background:#f5f7fa;
color:#111827 !important;
}
.mobile-language-row {
min-height:44px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 11px;
color:#475467;
font-size:.82rem;
font-weight:680;
}
.mobile-language-main {
display:inline-flex;
align-items:center;
gap:7px;
}
.mobile-language-row small {
color:#98a2b3;
font-size:.65rem;
font-weight:700;
}
.footer-settings {
display:inline-flex !important;
}
html[data-theme="dark"] .mobile-pop {
border-color:#293140;
background:#0d1118;
}
html[data-theme="dark"] .mobile-instagram-tools > summary,
html[data-theme="dark"] .mobile-nav-direct,
html[data-theme="dark"] .mobile-language-row {
color:#cbd2dc !important;
}
html[data-theme="dark"] .mobile-instagram-tools[open] > summary {
background:#151b25;
color:#fff !important;
}
html[data-theme="dark"] .mobile-instagram-tools .mobile-submenu {
border-color:#252d3a;
background:#10151d;
}
html[data-theme="dark"] .mobile-instagram-tools .mobile-submenu a {
color:#aeb7c6;
}
html[data-theme="dark"] .mobile-instagram-tools .mobile-submenu a:hover {
background:#171d27;
color:#fff;
}
html[data-theme="dark"] .mobile-nav-direct:hover {
background:#151b25;
color:#fff !important;
}
}
@media (max-width:520px) {
.mobile-pop {
width:min(320px,calc(100vw - 20px));
}
}
.blog-main,
.article-main{
background:#f8f9fc;
}
.blog-hero{
padding:92px 0 62px;
border-bottom:1px solid #e6e9f0;
background:
radial-gradient(circle at 50% 0%,rgba(101,81,255,.12),transparent 42%),
#f8f9fc;
}
.blog-hero-inner{
max-width:920px;
text-align:center;
}
.blog-eyebrow,
.blog-section-kicker,
.article-category{
display:inline-block;
color:#5b6ff8;
font-size:.72rem;
font-weight:800;
letter-spacing:.14em;
}
.blog-hero h1{
max-width:900px;
margin:18px auto 20px;
color:#0f172a;
font-size:clamp(2.4rem,5vw,4.6rem);
line-height:1.02;
letter-spacing:-.045em;
}
.blog-lead{
max-width:790px;
margin:0 auto;
color:#667085;
font-size:1.05rem;
line-height:1.75;
}
.blog-topic-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin-top:28px;
}
.blog-topic-row span{
padding:7px 11px;
border:1px solid #dfe3eb;
border-radius:999px;
background:#fff;
color:#667085;
font-size:.72rem;
font-weight:700;
}
.blog-section{
padding:72px 0;
}
.blog-section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:34px;
margin-bottom:30px;
}
.blog-section-head h2,
.blog-principles h2{
margin:8px 0 0;
color:#101828;
font-size:2rem;
letter-spacing:-.03em;
}
.blog-section-head > p{
max-width:470px;
margin:0;
color:#667085;
line-height:1.65;
}
.guide-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.guide-card{
min-height:250px;
display:flex;
flex-direction:column;
padding:22px;
border:1px solid #e2e6ed;
border-radius:18px;
background:#fff;
color:inherit;
text-decoration:none;
}
.guide-card-live{
border-color:#cfd5ff;
box-shadow:0 12px 35px rgba(64,75,180,.09);
}
.guide-card-top{
display:flex;
justify-content:space-between;
gap:10px;
margin-bottom:28px;
}
.guide-category,
.guide-live,
.guide-year{
font-size:.66rem;
font-weight:800;
letter-spacing:.05em;
}
.guide-category{
color:#667085;
}
.guide-live{
color:#5264ef;
}
.guide-year{
color:#98a2b3;
}
.guide-card h3{
margin:0 0 12px;
color:#101828;
font-size:1rem;
line-height:1.42;
}
.guide-card p{
margin:0;
color:#7a8496;
font-size:.78rem;
line-height:1.65;
}
.guide-arrow{
margin-top:auto;
padding-top:20px;
color:#5264ef;
font-size:.75rem;
font-weight:800;
}
.guide-card-live:hover{
transform:translateY(-2px);
border-color:#aeb8ff;
}
.blog-principles{
padding:0 0 80px;
}
.blog-principles-card{
padding:34px;
border:1px solid #e2e6ed;
border-radius:22px;
background:#fff;
}
.blog-principles-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:28px;
}
.blog-principles-grid > div{
padding:20px;
border-radius:14px;
background:#f7f8fb;
}
.blog-principles-grid strong{
color:#101828;
}
.blog-principles-grid p{
margin:8px 0 0;
color:#667085;
font-size:.8rem;
line-height:1.6;
}
.article-hero{
padding:68px 0 54px;
border-bottom:1px solid #e4e8ef;
background:
radial-gradient(circle at 50% 0%,rgba(100,82,255,.11),transparent 42%),
#f8f9fc;
}
.article-container{
max-width:900px;
}
.article-breadcrumb{
display:flex;
gap:8px;
margin-bottom:34px;
color:#8a94a6;
font-size:.75rem;
}
.article-breadcrumb a{
color:#5968e8;
text-decoration:none;
}
.article-hero h1{
max-width:900px;
margin:14px 0 18px;
color:#101828;
font-size:clamp(2.3rem,4.4vw,4rem);
line-height:1.04;
letter-spacing:-.045em;
}
.article-deck{
max-width:820px;
margin:0;
color:#667085;
font-size:1.02rem;
line-height:1.75;
}
.article-meta{
display:flex;
flex-wrap:wrap;
gap:8px 18px;
margin-top:25px;
color:#8b95a7;
font-size:.7rem;
font-weight:700;
}
.article-layout{
max-width:1100px;
display:grid;
grid-template-columns:220px minmax(0,760px);
gap:55px;
align-items:start;
padding-top:58px;
padding-bottom:84px;
}
.article-toc{
position:sticky;
top:110px;
display:flex;
flex-direction:column;
gap:11px;
padding:18px;
border:1px solid #e3e7ee;
border-radius:14px;
background:#fff;
}
.article-toc strong{
margin-bottom:4px;
color:#101828;
font-size:.75rem;
}
.article-toc a{
color:#7b8597;
text-decoration:none;
font-size:.72rem;
}
.article-toc a:hover{
color:#5264ef;
}
.article-content{
min-width:0;
}
.article-content section{
scroll-margin-top:120px;
margin-bottom:54px;
}
.article-content h2{
margin:0 0 18px;
color:#101828;
font-size:1.8rem;
line-height:1.2;
letter-spacing:-.025em;
}
.article-content h3{
margin:30px 0 10px;
color:#101828;
font-size:1.08rem;
}
.article-content p{
margin:0 0 17px;
color:#667085;
font-size:.94rem;
line-height:1.82;
}
.article-content a{
color:#5061e8;
}
.article-callout{
margin:26px 0;
padding:20px 22px;
border:1px solid #d9defe;
border-radius:14px;
background:#f2f4ff;
}
.article-callout strong{
color:#3343ba;
}
.article-callout p{
margin:7px 0 0;
}
.article-steps{
display:grid;
gap:12px;
padding:0;
list-style:none;
counter-reset:steps;
}
.article-steps li{
counter-increment:steps;
position:relative;
padding:20px 20px 20px 58px;
border:1px solid #e3e7ee;
border-radius:14px;
background:#fff;
}
.article-steps li::before{
content:counter(steps,decimal-leading-zero);
position:absolute;
top:19px;
left:18px;
color:#5868ed;
font-size:.72rem;
font-weight:800;
}
.article-steps strong{
color:#101828;
}
.article-steps p{
margin:7px 0 0;
}
.article-compare{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.article-compare > div{
padding:22px;
border:1px solid #e2e6ed;
border-radius:16px;
background:#fff;
}
.article-compare span,
.article-next > span{
color:#6676f0;
font-size:.66rem;
font-weight:800;
letter-spacing:.1em;
}
.article-compare h3{
margin:9px 0 10px;
}
.article-compare p{
font-size:.82rem;
}
.article-compare a{
font-size:.76rem;
font-weight:800;
text-decoration:none;
}
.article-faq details{
border-bottom:1px solid #e3e7ee;
}
.article-faq summary{
padding:18px 0;
color:#101828;
cursor:pointer;
font-weight:700;
}
.article-faq details p{
padding:0 0 18px;
}
.article-next{
padding:28px;
border:1px solid #dfe3eb;
border-radius:18px;
background:#fff;
}
.article-next h2{
margin-top:8px;
}
.article-actions{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:22px;
}
.article-actions a{
display:inline-flex;
min-height:42px;
align-items:center;
padding:0 14px;
border-radius:10px;
text-decoration:none;
font-size:.75rem;
font-weight:800;
}
.article-primary{
background:#111827;
color:#fff!important;
}
.article-secondary{
border:1px solid #dfe3eb;
color:#475467!important;
background:#fff;
}
html[data-theme="dark"] .blog-main,
html[data-theme="dark"] .article-main,
html[data-theme="dark"] .blog-hero,
html[data-theme="dark"] .article-hero{
background:#080a0f;
}
html[data-theme="dark"] .blog-hero,
html[data-theme="dark"] .article-hero{
border-color:#202735;
}
html[data-theme="dark"] .blog-hero h1,
html[data-theme="dark"] .blog-section-head h2,
html[data-theme="dark"] .blog-principles h2,
html[data-theme="dark"] .guide-card h3,
html[data-theme="dark"] .article-hero h1,
html[data-theme="dark"] .article-content h2,
html[data-theme="dark"] .article-content h3,
html[data-theme="dark"] .article-faq summary{
color:#f4f6fb;
}
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .blog-principles-card,
html[data-theme="dark"] .article-toc,
html[data-theme="dark"] .article-steps li,
html[data-theme="dark"] .article-compare > div,
html[data-theme="dark"] .article-next{
border-color:#252c39;
background:#0d1118;
}
html[data-theme="dark"] .blog-principles-grid > div,
html[data-theme="dark"] .article-callout{
border-color:#252d45;
background:#111722;
}
@media(max-width:980px){
.guide-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.article-layout{
grid-template-columns:1fr;
}
.article-toc{
position:static;
}
}
@media(max-width:680px){
.blog-hero{
padding:64px 0 44px;
}
.blog-section{
padding:50px 0;
}
.blog-section-head{
display:block;
}
.blog-section-head > p{
margin-top:12px;
}
.guide-grid,
.blog-principles-grid,
.article-compare{
grid-template-columns:1fr;
}
.guide-card{
min-height:220px;
}
.article-hero{
padding:50px 0 40px;
}
.article-layout{
padding-top:38px;
padding-bottom:60px;
}
}
.article-table-wrap{
overflow-x:auto;
margin:24px 0;
border:1px solid #e2e6ed;
border-radius:16px;
background:#fff;
}
.article-table{
width:100%;
min-width:720px;
border-collapse:collapse;
}
.article-table th,
.article-table td{
padding:14px 16px;
border-bottom:1px solid #e8ebf1;
text-align:left;
vertical-align:top;
color:#667085;
font-size:.76rem;
line-height:1.55;
}
.article-table th{
background:#f7f8fb;
color:#344054;
font-size:.7rem;
font-weight:800;
}
.article-table tbody tr:last-child td{
border-bottom:0;
}
.article-compare-three{
grid-template-columns:repeat(3,minmax(0,1fr));
}
html[data-theme="dark"] .article-table-wrap{
border-color:#252c39;
background:#0d1118;
}
html[data-theme="dark"] .article-table th{
background:#121722;
color:#d9dfeb;
}
html[data-theme="dark"] .article-table td,
html[data-theme="dark"] .article-table th{
border-color:#252c39;
}
@media(max-width:760px){
.article-compare-three{
grid-template-columns:1fr;
}
}
@media (min-width: 769px) {
.header .desktop-nav {
display:flex;
align-items:center;
gap:3px;
}
.header .desktop-nav > .lang-details {
margin-left:0 !important;
margin-inline-start:0 !important;
padding-left:0 !important;
flex:0 0 auto;
}
.header .desktop-nav > .lang-details > .lang-summary {
padding-left:10px;
padding-right:10px;
gap:6px;
}
}
/* chlak-mobile-footer.css */
@media (max-width: 768px) {
footer .footer-bottom {
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:flex-start !important;
width:100% !important;
gap:16px !important;
}
footer .footer-settings {
box-sizing:border-box !important;
display:grid !important;
grid-template-columns:auto 44px !important;
align-items:center !important;
justify-content:start !important;
column-gap:8px !important;
row-gap:0 !important;
width:max-content !important;
max-width:100% !important;
min-width:0 !important;
height:auto !important;
min-height:44px !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
position:static !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
transform:none !important;
translate:none !important;
overflow:visible !important;
}
footer .footer-settings .footer-language {
box-sizing:border-box !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
height:44px !important;
min-height:44px !important;
margin:0 !important;
padding:0 14px !important;
border:1px solid #e0e5ec !important;
border-radius:12px !important;
background:#ffffff !important;
color:#596579 !important;
box-shadow:
0 1px 2px rgba(15,23,42,.03) !important;
font-size:.82rem !important;
font-weight:700 !important;
line-height:1 !important;
white-space:nowrap !important;
position:static !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
transform:none !important;
translate:none !important;
flex:0 0 auto !important;
}
footer .footer-settings .footer-language svg {
display:block !important;
width:17px !important;
min-width:17px !important;
height:17px !important;
flex:0 0 17px !important;
}
footer .footer-settings .footer-theme-toggle {
-webkit-appearance:none !important;
appearance:none !important;
box-sizing:border-box !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:44px !important;
min-width:44px !important;
max-width:44px !important;
height:44px !important;
min-height:44px !important;
max-height:44px !important;
margin:0 !important;
padding:0 !important;
border:1px solid #e0e5ec !important;
border-radius:12px !important;
background:#ffffff !important;
color:#596579 !important;
box-shadow:
0 1px 2px rgba(15,23,42,.03) !important;
position:static !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
inset:auto !important;
transform:none !important;
translate:none !important;
flex:0 0 44px !important;
overflow:hidden !important;
cursor:pointer !important;
touch-action:manipulation !important;
-webkit-tap-highlight-color:transparent;
}
footer .footer-settings .footer-theme-toggle:hover {
transform:none !important;
}
footer .footer-settings .footer-theme-toggle:active {
transform:none !important;
}
footer .footer-settings .footer-theme-toggle:focus-visible {
outline:2px solid #667eea !important;
outline-offset:2px !important;
}
footer .footer-settings .footer-theme-toggle .theme-icon {
width:20px !important;
height:20px !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 !important;
}
footer .footer-settings .footer-theme-toggle svg {
display:block !important;
width:18px !important;
height:18px !important;
margin:auto !important;
}
html[data-theme="dark"]
footer .footer-settings .footer-language,
html[data-theme="dark"]
footer .footer-settings .footer-theme-toggle {
border-color:#2e3747 !important;
background:#121722 !important;
color:#d7deea !important;
box-shadow:none !important;
}
footer,
footer .container,
footer .footer-bottom,
footer .footer-settings {
max-width:100% !important;
}
}
@media (max-width: 359px) {
footer .footer-settings {
grid-template-columns:auto 42px !important;
column-gap:7px !important;
}
footer .footer-settings .footer-language {
height:42px !important;
min-height:42px !important;
padding-left:12px !important;
padding-right:12px !important;
font-size:.78rem !important;
}
footer .footer-settings .footer-theme-toggle {
width:42px !important;
min-width:42px !important;
max-width:42px !important;
height:42px !important;
min-height:42px !important;
max-height:42px !important;
flex-basis:42px !important;
}
}
/* chlak-home-hero-v3.css */
.hero .hero-inner {
max-width: 1080px;
}
.hero .hero-copy.ch3-copy {
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: 26px;
font-size: 18px;
line-height: 1.65;
}
.ch3-downloader {
width: min(850px, 100%);
margin: 0 auto;
}
.ch3-url-row {
display: flex;
width: 100%;
padding: 7px;
gap: 8px;
border: 1px solid rgba(148,163,184,.34);
border-radius: 20px;
background: rgba(255,255,255,.96);
box-shadow:
0 20px 55px rgba(15,23,42,.10),
0 2px 8px rgba(15,23,42,.04);
}
.ch3-url-input {
min-width: 0;
flex: 1;
height: 58px;
padding: 0 18px;
border: 0;
outline: 0;
border-radius: 14px;
background: transparent;
color: #0f172a;
font: inherit;
font-size: 15px;
}
.ch3-url-input::placeholder {
color: #94a3b8;
}
.ch3-download-btn {
flex: 0 0 auto;
min-width: 145px;
height: 58px;
padding: 0 25px;
border: 0;
border-radius: 14px;
background:
linear-gradient(
135deg,
#7c3aed 0%,
#c026d3 55%,
#ec4899 100%
);
color: #fff;
font: inherit;
font-size: 15px;
font-weight: 850;
box-shadow:
0 10px 25px rgba(124,58,237,.24);
opacity: 1;
}
.ch3-download-btn[disabled] {
cursor: not-allowed;
}
.ch3-legal {
margin-top: 11px;
text-align: left;
color: #64748b;
font-size: 11px;
line-height: 1.55;
}
.ch3-legal a {
color: #475569;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
.ch3-legal span {
font-weight: 700;
}
.ch3-status {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 13px;
color: #64748b;
font-size: 11px;
line-height: 1.45;
}
.ch3-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #f59e0b;
box-shadow:
0 0 0 4px rgba(245,158,11,.12);
}
.ch3-platforms {
width: min(850px, 100%);
margin: 28px auto 0;
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
gap: 9px;
}
.ch3-platform,
.ch3-platform-disabled {
position: relative;
display: flex;
align-items: center;
min-width: 0;
min-height: 60px;
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(148,163,184,.27);
border-radius: 14px;
background: rgba(255,255,255,.80);
box-shadow:
0 6px 18px rgba(15,23,42,.035);
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.ch3-platform:hover {
transform: translateY(-2px);
border-color: rgba(124,58,237,.25);
box-shadow:
0 12px 26px rgba(15,23,42,.075);
}
.ch3-platform-disabled {
opacity: .70;
cursor: default;
}
.ch3-brand {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 10px;
color: #fff;
font-size: 10px;
font-weight: 900;
}
.ch3-instagram {
background:
linear-gradient(
135deg,
#7c3aed,
#ec4899,
#f59e0b
);
}
.ch3-facebook {
background:
linear-gradient(
135deg,
#1d4ed8,
#3b82f6
);
}
.ch3-pinterest {
background:
linear-gradient(
135deg,
#be123c,
#ef4444
);
}
.ch3-tiktok {
background: #111827;
}
.ch3-youtube {
background: #ef4444;
}
.ch3-platform-copy {
min-width: 0;
text-align: left;
}
.ch3-platform-copy strong {
display: block;
overflow: hidden;
color: #1e293b;
font-size: 12px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.ch3-platform-copy small {
display: block;
margin-top: 2px;
color: #94a3b8;
font-size: 9px;
font-weight: 650;
}
.ch3-soon {
position: absolute;
top: -7px;
right: 7px;
padding: 3px 6px;
border: 1px solid rgba(245,158,11,.25);
border-radius: 999px;
background: #fff7ed;
color: #b45309;
font-size: 8px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}
html[data-theme="dark"] .ch3-url-row,
body[data-theme="dark"] .ch3-url-row,
html.dark .ch3-url-row,
body.dark .ch3-url-row,
body.dark-mode .ch3-url-row {
border-color: rgba(71,85,105,.65);
background: rgba(15,23,42,.93);
}
html[data-theme="dark"] .ch3-url-input,
body[data-theme="dark"] .ch3-url-input,
html.dark .ch3-url-input,
body.dark .ch3-url-input,
body.dark-mode .ch3-url-input {
color: #f8fafc;
}
html[data-theme="dark"] .ch3-platform,
html[data-theme="dark"] .ch3-platform-disabled,
body[data-theme="dark"] .ch3-platform,
body[data-theme="dark"] .ch3-platform-disabled,
html.dark .ch3-platform,
html.dark .ch3-platform-disabled,
body.dark .ch3-platform,
body.dark .ch3-platform-disabled,
body.dark-mode .ch3-platform,
body.dark-mode .ch3-platform-disabled {
border-color: rgba(71,85,105,.55);
background: rgba(15,23,42,.70);
}
html[data-theme="dark"] .ch3-platform-copy strong,
body[data-theme="dark"] .ch3-platform-copy strong,
html.dark .ch3-platform-copy strong,
body.dark .ch3-platform-copy strong,
body.dark-mode .ch3-platform-copy strong {
color: #f8fafc;
}
html[data-theme="dark"] .ch3-legal,
html[data-theme="dark"] .ch3-status,
body[data-theme="dark"] .ch3-legal,
body[data-theme="dark"] .ch3-status,
html.dark .ch3-legal,
html.dark .ch3-status,
body.dark .ch3-legal,
body.dark .ch3-status,
body.dark-mode .ch3-legal,
body.dark-mode .ch3-status {
color: #94a3b8;
}
html[data-theme="dark"] .ch3-legal a,
body[data-theme="dark"] .ch3-legal a,
html.dark .ch3-legal a,
body.dark .ch3-legal a,
body.dark-mode .ch3-legal a {
color: #cbd5e1;
}
@media (max-width: 850px) {
.ch3-platforms {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.hero .hero-copy.ch3-copy {
margin-bottom: 20px;
font-size: 16px;
}
.ch3-url-row {
display: grid;
grid-template-columns: 1fr;
padding: 6px;
border-radius: 17px;
}
.ch3-url-input {
width: 100%;
height: 54px;
}
.ch3-download-btn {
width: 100%;
height: 52px;
border-radius: 12px;
}
.ch3-legal {
padding: 0 4px;
text-align: center;
}
.ch3-platforms {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 23px;
}
.ch3-platform,
.ch3-platform-disabled {
min-height: 56px;
}
.ch3-platform:last-child {
grid-column: auto;
}
}
.ch3-brand svg {
display: block;
width: 19px;
height: 19px;
color: #ffffff;
}
.ch3-platform,
.ch3-platform:link,
.ch3-platform:visited,
.ch3-platform:hover,
.ch3-platform:active {
text-decoration: none !important;
}
.ch3-platform-copy,
.ch3-platform-copy strong,
.ch3-platform-copy small {
text-decoration: none !important;
}
.ch3-platform:focus-visible {
outline: 3px solid rgba(124,58,237,.22);
outline-offset: 3px;
}
.ch3-brand img {
display: block;
width: 20px;
height: 20px;
object-fit: contain;
filter: brightness(0) invert(1);
pointer-events: none;
}
.ch3-platform,
.ch3-platform:link,
.ch3-platform:visited,
.ch3-platform:hover,
.ch3-platform:active {
text-decoration: none !important;
}
.ch3-platform-copy,
.ch3-platform-copy strong,
.ch3-platform-copy small {
text-decoration: none !important;
}
.ch3-brand.ch3-tiktok {
background: #000000 !important;
box-shadow:
-2px 0 0 rgba(37, 244, 238, .85),
2px 0 0 rgba(254, 44, 85, .85),
0 7px 16px rgba(0,0,0,.14) !important;
}
.ch3-brand.ch3-tiktok img {
filter: brightness(0) invert(1) !important;
}
.ch3-brand.ch3-youtube {
background: #ff0000 !important;
box-shadow:
0 7px 16px rgba(255,0,0,.18) !important;
}
.ch3-brand.ch3-youtube img {
filter: brightness(0) invert(1) !important;
}
.ch3-platform-disabled {
opacity: 1 !important;
}
.ch3-platform-disabled .ch3-platform-copy {
opacity: .58;
}
.ch3-platform-disabled .ch3-soon {
opacity: 1;
}
.ch3-platform-disabled .ch3-brand.ch3-tiktok {
opacity: 1 !important;
background: #000000 !important;
box-shadow:
-2px 0 0 rgba(37, 244, 238, .95),
2px 0 0 rgba(254, 44, 85, .95),
0 7px 16px rgba(0,0,0,.16) !important;
}
.ch3-platform-disabled .ch3-brand.ch3-youtube {
opacity: 1 !important;
background: #ff0000 !important;
box-shadow:
0 7px 16px rgba(255,0,0,.20) !important;
}
.ch3-platform-disabled .ch3-brand img {
opacity: 1 !important;
filter: brightness(0) invert(1) !important;
}
#video-platforms .ch-route-coming-soon {
cursor: default;
position: relative;
border-style: dashed;
opacity: .82;
background:
linear-gradient(
180deg,
rgba(248,250,252,.96),
rgba(248,250,252,.72)
);
}
#video-platforms .ch-route-coming-soon:hover {
transform: none;
}
#video-platforms .ch-route-coming-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
#video-platforms .ch-route-platform {
color: #64748b;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .07em;
}
#video-platforms .ch-route-soon {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 4px 9px;
border: 1px solid rgba(245,158,11,.28);
border-radius: 999px;
background: #fff7ed;
color: #b45309;
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .035em;
white-space: nowrap;
}
#video-platforms .tool-grid {
display: grid !important;
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
gap: 18px !important;
align-items: stretch !important;
}
#video-platforms .tool-grid > .tool-card {
grid-column: span 2;
}
#video-platforms .tool-grid > .tool-card:nth-child(5) {
grid-column: 2 / span 2;
}
#video-platforms .tool-grid > .tool-card:nth-child(6) {
grid-column: 4 / span 2;
}
#video-platforms .tool-grid > .tool-card:nth-child(7) {
grid-column: 6 / span 2;
}
#video-platforms .tool-grid > .tool-card {
position: relative !important;
display: flex !important;
min-height: 235px !important;
padding: 22px !important;
overflow: hidden !important;
border:
1px solid
rgba(148, 163, 184, .24)
!important;
border-radius: 20px !important;
background:
rgba(255,255,255,.92)
!important;
box-shadow:
0 10px 30px
rgba(15,23,42,.045)
!important;
text-decoration: none !important;
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease
!important;
}
#video-platforms .tool-grid > .tool-card::after {
display: none !important;
}
#video-platforms .tool-grid > .tool-card::before {
content: "" !important;
position: absolute !important;
top: 20px !important;
left: 20px !important;
width: 44px !important;
height: 44px !important;
border-radius: 13px !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 21px 21px !important;
box-shadow:
0 8px 20px
rgba(15,23,42,.12)
!important;
}
#video-platforms
a.tool-card[href="/video"]::before,
#video-platforms
a.tool-card[href="/reels"]::before {
background-image:
url("/assets/brand-icons/instagram.svg"),
linear-gradient(
135deg,
#833ab4 0%,
#c13584 35%,
#e1306c 62%,
#fcaf45 100%
)
!important;
}
#video-platforms
a.tool-card[href="/facebook-video-downloader"]::before,
#video-platforms
a.tool-card[href="/facebook-reels-downloader"]::before {
background-color:
#1877f2
!important;
background-image:
url("/assets/brand-icons/facebook.svg")
!important;
}
#video-platforms
a.tool-card[href="/pinterest-video-downloader"]::before {
background-color:
#e60023
!important;
background-image:
url("/assets/brand-icons/pinterest.svg")
!important;
}
#video-platforms
.ch-route-coming-soon[
aria-label*="TikTok"
]::before {
background-color:
#000000
!important;
background-image:
url("/assets/brand-icons/tiktok.svg")
!important;
box-shadow:
-2px 0 0 rgba(37,244,238,.75),
2px 0 0 rgba(254,44,85,.75),
0 8px 20px rgba(0,0,0,.12)
!important;
}
#video-platforms
.ch-route-coming-soon[
aria-label*="YouTube"
]::before {
background-color:
#ff0000
!important;
background-image:
url("/assets/brand-icons/youtube.svg")
!important;
}
#video-platforms .tool-card .tool-copy {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-width: 0 !important;
}
#video-platforms .tool-card h3 {
margin:
60px 0 7px
!important;
color:
#172033
!important;
font-size:
16px
!important;
font-weight:
800
!important;
line-height:
1.3
!important;
letter-spacing:
-.015em
!important;
}
#video-platforms .tool-card p {
margin:
0 0 16px
!important;
color:
#6b7a96
!important;
font-size:
13px
!important;
line-height:
1.55
!important;
}
#video-platforms .tool-card .tool-type {
margin-top:
auto
!important;
align-self:
flex-start
!important;
padding:
5px 9px
!important;
border:
1px solid
rgba(148,163,184,.28)
!important;
border-radius:
999px
!important;
background:
#f8fafc
!important;
color:
#8793a8
!important;
font-size:
9px
!important;
font-weight:
800
!important;
letter-spacing:
.07em
!important;
text-transform:
uppercase
!important;
}
#video-platforms a.tool-card:hover {
transform:
translateY(-4px)
!important;
border-color:
rgba(99,102,241,.25)
!important;
box-shadow:
0 18px 42px
rgba(15,23,42,.09)
!important;
}
#video-platforms .ch-route-coming-soon {
opacity:
1
!important;
cursor:
default
!important;
background:
linear-gradient(
180deg,
rgba(255,255,255,.90),
rgba(248,250,252,.94)
)
!important;
}
#video-platforms .ch-route-coming-soon:hover {
transform:
none
!important;
box-shadow:
0 10px 30px
rgba(15,23,42,.045)
!important;
}
#video-platforms .ch-route-coming-head {
height:
0
!important;
margin:
0
!important;
}
#video-platforms .ch-route-platform {
display:
none
!important;
}
#video-platforms .ch-route-soon {
position:
absolute
!important;
top:
26px
!important;
right:
20px
!important;
z-index:
2
!important;
display:
inline-flex
!important;
align-items:
center
!important;
justify-content:
center
!important;
padding:
5px 8px
!important;
border:
1px solid
rgba(245,158,11,.22)
!important;
border-radius:
999px
!important;
background:
#fff7ed
!important;
color:
#b45309
!important;
font-size:
8px
!important;
font-weight:
900
!important;
line-height:
1
!important;
letter-spacing:
.05em
!important;
text-transform:
uppercase
!important;
white-space:
nowrap
!important;
}
@media (max-width: 1100px) {
#video-platforms .tool-grid {
grid-template-columns:
repeat(2, minmax(0,1fr))
!important;
}
#video-platforms .tool-grid > .tool-card,
#video-platforms .tool-grid > .tool-card:nth-child(5),
#video-platforms .tool-grid > .tool-card:nth-child(6),
#video-platforms .tool-grid > .tool-card:nth-child(7) {
grid-column:
auto
!important;
}
}
@media (max-width: 680px) {
#video-platforms .tool-grid {
grid-template-columns:
1fr
!important;
gap:
14px
!important;
}
#video-platforms .tool-grid > .tool-card {
min-height:
215px
!important;
padding:
20px
!important;
}
#video-platforms .tool-grid > .tool-card::before {
top:
18px
!important;
left:
18px
!important;
}
#video-platforms .ch-route-soon {
top:
24px
!important;
right:
18px
!important;
}
}
#video-platforms .tool-grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 18px !important;
width: 100% !important;
}
#video-platforms .tool-grid > .tool-card {
flex:
0 0 calc((100% - 54px) / 4)
!important;
width:
calc((100% - 54px) / 4)
!important;
max-width:
calc((100% - 54px) / 4)
!important;
min-width: 0 !important;
min-height: 220px !important;
height: auto !important;
box-sizing: border-box !important;
padding: 20px !important;
}
#video-platforms .tool-card .tool-copy {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
}
#video-platforms .tool-card h3 {
margin:
48px 0 7px
!important;
padding: 0 !important;
min-height: 21px !important;
color: #172033 !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: -.015em !important;
}
#video-platforms .tool-card p {
margin:
0 0 14px
!important;
min-height:
78px
!important;
color:
#6b7a96
!important;
font-size:
13px
!important;
line-height:
1.5
!important;
}
#video-platforms .tool-card .tool-type {
margin-top:
auto
!important;
align-self:
flex-start
!important;
}
#video-platforms .ch-route-coming-head {
position:
absolute
!important;
top:
18px
!important;
right:
18px
!important;
left:
auto
!important;
height:
auto
!important;
margin:
0
!important;
padding:
0
!important;
}
#video-platforms .ch-route-platform {
display:
none
!important;
}
#video-platforms .ch-route-soon {
display:
inline-flex
!important;
align-items:
center
!important;
justify-content:
center
!important;
padding:
5px 8px
!important;
border:
1px solid
rgba(245,158,11,.25)
!important;
border-radius:
999px
!important;
background:
#fff7ed
!important;
color:
#b45309
!important;
font-size:
8px
!important;
font-weight:
900
!important;
line-height:
1
!important;
letter-spacing:
.045em
!important;
text-transform:
uppercase
!important;
white-space:
nowrap
!important;
}
@media (max-width: 1050px) {
#video-platforms .tool-grid > .tool-card {
flex:
0 0 calc((100% - 18px) / 2)
!important;
width:
calc((100% - 18px) / 2)
!important;
max-width:
calc((100% - 18px) / 2)
!important;
}
}
@media (max-width: 650px) {
#video-platforms .tool-grid {
gap:
14px
!important;
}
#video-platforms .tool-grid > .tool-card {
flex:
0 0 100%
!important;
width:
100%
!important;
max-width:
100%
!important;
min-height:
205px
!important;
}
}
@media (min-width: 1051px) {
#video-platforms .tool-grid > .tool-card {
position: relative !important;
min-height: 205px !important;
padding: 20px 18px !important;
box-sizing: border-box !important;
}
#video-platforms .tool-grid > .tool-card h3 {
position: absolute !important;
top: 52px !important;
left: 18px !important;
right: 18px !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
font-size: 16px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
color: #172033 !important;
}
#video-platforms .tool-grid > .tool-card p {
position: absolute !important;
top: 82px !important;
left: 18px !important;
right: 18px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #6b7a96 !important;
}
#video-platforms .tool-grid > .tool-card .tool-type {
position: absolute !important;
left: 18px !important;
bottom: 18px !important;
margin: 0 !important;
}
#video-platforms .ch-route-platform {
display: none !important;
}
#video-platforms .ch-route-coming-head {
position: static !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
#video-platforms .ch-route-soon {
position: absolute !important;
top: 17px !important;
right: 17px !important;
z-index: 5 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 5px 8px !important;
border:
1px solid rgba(245,158,11,.28)
!important;
border-radius: 999px !important;
background: #fff7ed !important;
color: #b45309 !important;
font-size: 8px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
}
@media (max-width: 1050px) {
#video-platforms .tool-grid > .tool-card h3,
#video-platforms .tool-grid > .tool-card p,
#video-platforms .tool-grid > .tool-card .tool-type {
position: static !important;
}
#video-platforms .tool-grid > .tool-card h3 {
margin: 48px 0 7px !important;
}
#video-platforms .tool-grid > .tool-card p {
margin: 0 0 14px !important;
}
#video-platforms .tool-grid > .tool-card .tool-type {
margin-top: auto !important;
}
}
#video-platforms .ch-route-grid {
display: grid !important;
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
gap: 18px !important;
width: 100% !important;
margin-top: 28px !important;
}
#video-platforms .ch-route-card {
position: relative !important;
grid-column: span 2;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
min-height: 238px !important;
padding: 22px !important;
border:
1px solid rgba(148,163,184,.22)
!important;
border-radius:
20px
!important;
background:
rgba(255,255,255,.94)
!important;
box-shadow:
0 10px 30px rgba(15,23,42,.045)
!important;
color:
inherit
!important;
text-decoration:
none
!important;
overflow:
hidden
!important;
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease
!important;
}
#video-platforms .ch-route-card:nth-child(5) {
grid-column:
2 / span 2
!important;
}
#video-platforms .ch-route-card:nth-child(6) {
grid-column:
4 / span 2
!important;
}
#video-platforms .ch-route-card:nth-child(7) {
grid-column:
6 / span 2
!important;
}
#video-platforms a.ch-route-card:hover {
transform:
translateY(-4px)
!important;
border-color:
rgba(99,102,241,.25)
!important;
box-shadow:
0 18px 42px rgba(15,23,42,.085)
!important;
}
#video-platforms .ch-route-icon {
display:
flex
!important;
align-items:
center
!important;
justify-content:
center
!important;
width:
44px
!important;
height:
44px
!important;
flex:
0 0 44px
!important;
margin-bottom:
18px
!important;
border-radius:
13px
!important;
box-shadow:
0 8px 20px rgba(15,23,42,.10)
!important;
}
#video-platforms .ch-route-icon img {
display:
block
!important;
width:
22px
!important;
height:
22px
!important;
filter:
brightness(0) invert(1)
!important;
}
#video-platforms .ch-route-instagram {
background:
linear-gradient(
135deg,
#833ab4 0%,
#c13584 36%,
#e1306c 66%,
#fcaf45 100%
)
!important;
}
#video-platforms .ch-route-facebook {
background:
#1877f2
!important;
}
#video-platforms .ch-route-pinterest {
background:
#e60023
!important;
}
#video-platforms .ch-route-tiktok {
background:
#000000
!important;
box-shadow:
-2px 0 0 rgba(37,244,238,.75),
2px 0 0 rgba(254,44,85,.75),
0 8px 20px rgba(15,23,42,.10)
!important;
}
#video-platforms .ch-route-youtube {
background:
#ff0000
!important;
}
#video-platforms .ch-route-content {
display:
block
!important;
min-height:
105px
!important;
}
#video-platforms .ch-route-content h3 {
position:
static
!important;
margin:
0 0 8px
!important;
padding:
0
!important;
min-height:
42px
!important;
color:
#172033
!important;
font-size:
16px
!important;
font-weight:
800
!important;
line-height:
1.3
!important;
letter-spacing:
-.015em
!important;
}
#video-platforms .ch-route-content p {
position:
static
!important;
margin:
0
!important;
padding:
0
!important;
color:
#6b7a96
!important;
font-size:
13px
!important;
line-height:
1.55
!important;
}
#video-platforms .ch-route-type {
display:
inline-flex
!important;
align-items:
center
!important;
align-self:
flex-start
!important;
margin-top:
auto
!important;
padding:
5px 9px
!important;
border:
1px solid rgba(148,163,184,.28)
!important;
border-radius:
999px
!important;
background:
#f8fafc
!important;
color:
#8793a8
!important;
font-size:
9px
!important;
font-weight:
800
!important;
line-height:
1
!important;
letter-spacing:
.065em
!important;
text-transform:
uppercase
!important;
}
#video-platforms .ch-route-card-planned {
cursor:
default
!important;
background:
linear-gradient(
180deg,
rgba(255,255,255,.95),
rgba(248,250,252,.95)
)
!important;
}
#video-platforms .ch-route-soon-v2 {
position:
absolute
!important;
top:
20px
!important;
right:
20px
!important;
display:
inline-flex
!important;
align-items:
center
!important;
justify-content:
center
!important;
padding:
5px 8px
!important;
border:
1px solid rgba(245,158,11,.24)
!important;
border-radius:
999px
!important;
background:
#fff7ed
!important;
color:
#b45309
!important;
font-size:
8px
!important;
font-weight:
900
!important;
line-height:
1
!important;
letter-spacing:
.045em
!important;
text-transform:
uppercase
!important;
white-space:
nowrap
!important;
}
@media (max-width: 1050px) {
#video-platforms .ch-route-grid {
grid-template-columns:
repeat(2, minmax(0,1fr))
!important;
}
#video-platforms .ch-route-card,
#video-platforms .ch-route-card:nth-child(5),
#video-platforms .ch-route-card:nth-child(6),
#video-platforms .ch-route-card:nth-child(7) {
grid-column:
auto
!important;
}
}
@media (max-width: 650px) {
#video-platforms .ch-route-grid {
grid-template-columns:
1fr
!important;
gap:
14px
!important;
}
#video-platforms .ch-route-card {
min-height:
220px
!important;
padding:
20px
!important;
}
}
#video-platforms.ch-route-section {
margin-top: 56px !important;
}
#video-platforms .ch-route-head {
display: grid !important;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, .95fr) !important;
gap: 32px !important;
align-items: start !important;
}
#video-platforms .ch-route-eyebrow {
margin: 0 0 12px !important;
color: #5568ff !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .12em !important;
text-transform: uppercase !important;
}
#video-platforms .ch-route-head-main h2 {
margin: 0 !important;
color: #0f172a !important;
font-size: clamp(38px, 5.2vw, 60px) !important;
font-weight: 900 !important;
line-height: .95 !important;
letter-spacing: -.045em !important;
max-width: 780px !important;
}
#video-platforms .ch-route-head-side p {
margin: 0 !important;
color: #66758f !important;
font-size: 14px !important;
line-height: 1.7 !important;
max-width: 520px !important;
}
#video-platforms .ch-route-grid {
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
gap: 20px !important;
margin-top: 30px !important;
}
#video-platforms .ch-route-card {
position: relative !important;
grid-column: span 3 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
min-height: 250px !important;
padding: 22px !important;
border: 1px solid rgba(148,163,184,.22) !important;
border-radius: 22px !important;
background: rgba(255,255,255,.94) !important;
box-shadow: 0 10px 30px rgba(15,23,42,.045) !important;
text-decoration: none !important;
color: inherit !important;
overflow: hidden !important;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
#video-platforms a.ch-route-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(99,102,241,.24) !important;
box-shadow: 0 18px 42px rgba(15,23,42,.085) !important;
}
#video-platforms .ch-route-card:nth-child(5) {
grid-column: 2 / span 3 !important;
}
#video-platforms .ch-route-card:nth-child(6) {
grid-column: 5 / span 3 !important;
}
#video-platforms .ch-route-card:nth-child(7) {
grid-column: 8 / span 3 !important;
}
#video-platforms .ch-route-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
border-radius: 14px !important;
box-shadow: 0 10px 24px rgba(15,23,42,.11) !important;
margin-bottom: 18px !important;
flex: 0 0 46px !important;
}
#video-platforms .ch-route-icon img {
display: block !important;
width: 22px !important;
height: 22px !important;
filter: brightness(0) invert(1) !important;
}
#video-platforms .ch-route-instagram {
background: linear-gradient(135deg, #833ab4 0%, #c13584 36%, #e1306c 66%, #fcaf45 100%) !important;
}
#video-platforms .ch-route-facebook {
background: #1877f2 !important;
}
#video-platforms .ch-route-pinterest {
background: #e60023 !important;
}
#video-platforms .ch-route-tiktok {
background: #000 !important;
box-shadow: -2px 0 0 rgba(37,244,238,.75), 2px 0 0 rgba(254,44,85,.75), 0 10px 24px rgba(15,23,42,.11) !important;
}
#video-platforms .ch-route-youtube {
background: #ff0000 !important;
}
#video-platforms .ch-route-body {
display: block !important;
min-height: 108px !important;
}
#video-platforms .ch-route-body h3 {
margin: 0 0 10px !important;
color: #172033 !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: -.015em !important;
min-height: 44px !important;
}
#video-platforms .ch-route-body p {
margin: 0 !important;
color: #6b7a96 !important;
font-size: 13px !important;
line-height: 1.58 !important;
min-height: 62px !important;
}
#video-platforms .ch-route-tag {
display: inline-flex !important;
align-items: center !important;
align-self: flex-start !important;
margin-top: auto !important;
padding: 6px 10px !important;
border: 1px solid rgba(148,163,184,.28) !important;
border-radius: 999px !important;
background: #f8fafc !important;
color: #8793a8 !important;
font-size: 9px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .065em !important;
text-transform: uppercase !important;
}
#video-platforms .is-planned {
cursor: default !important;
background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.95)) !important;
}
#video-platforms .ch-route-soon {
position: absolute !important;
top: 18px !important;
right: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 5px 8px !important;
border: 1px solid rgba(245,158,11,.24) !important;
border-radius: 999px !important;
background: #fff7ed !important;
color: #b45309 !important;
font-size: 8px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
@media (max-width: 1050px) {
#video-platforms .ch-route-head {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
#video-platforms .ch-route-grid {
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
#video-platforms .ch-route-card,
#video-platforms .ch-route-card:nth-child(5),
#video-platforms .ch-route-card:nth-child(6),
#video-platforms .ch-route-card:nth-child(7) {
grid-column: auto !important;
}
}
@media (max-width: 650px) {
#video-platforms .ch-route-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
#video-platforms .ch-route-card {
min-height: 220px !important;
padding: 20px !important;
}
#video-platforms .ch-route-head-main h2 {
font-size: 36px !important;
line-height: 1 !important;
}
}
.ch3-platforms .ch3-brand img {
filter: brightness(0) invert(1);
}
/* chlak-video-platforms-v1.css */
#video-platforms.ch-route-section {
width: min(1220px, calc(100% - 48px)) !important;
margin: 0 auto !important;
padding: 72px 0 82px !important;
box-sizing: border-box !important;
}
#video-platforms .ch-route-head {
display: grid !important;
grid-template-columns:
minmax(0, 1.32fr)
minmax(320px, .92fr) !important;
gap: 56px !important;
align-items: end !important;
margin: 0 0 34px !important;
}
#video-platforms .ch-route-head-main,
#video-platforms .ch-route-head-side {
min-width: 0 !important;
}
#video-platforms .ch-route-eyebrow {
margin: 0 0 14px !important;
padding: 0 !important;
color: #5367ff !important;
font-family: inherit !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .13em !important;
text-transform: uppercase !important;
}
#video-platforms .ch-route-eyebrow::before {
content: "" !important;
display: inline-block !important;
width: 18px !important;
height: 1px !important;
margin: 0 9px 3px 0 !important;
background: #5367ff !important;
}
#video-platforms .ch-route-head-main h2 {
margin: 0 !important;
padding: 0 !important;
max-width: 720px !important;
color: #111827 !important;
font-family: inherit !important;
font-size: clamp(42px, 4.4vw, 58px) !important;
font-weight: 900 !important;
line-height: .98 !important;
letter-spacing: -.048em !important;
}
#video-platforms .ch-route-head-side {
padding-bottom: 7px !important;
}
#video-platforms .ch-route-head-side p {
margin: 0 !important;
padding: 0 !important;
max-width: 480px !important;
color: #71809a !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.7 !important;
}
#video-platforms .ch-route-grid {
display: grid !important;
grid-template-columns:
repeat(8, minmax(0, 1fr))
!important;
gap: 18px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
#video-platforms .ch-route-card {
position: relative !important;
grid-column: span 2 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
width: auto !important;
min-height: 250px !important;
margin: 0 !important;
padding: 22px !important;
box-sizing: border-box !important;
border:
1px solid rgba(148,163,184,.24)
!important;
border-radius: 20px !important;
background:
rgba(255,255,255,.96)
!important;
box-shadow:
0 12px 32px rgba(15,23,42,.055)
!important;
color: inherit !important;
font-family: inherit !important;
text-decoration: none !important;
overflow: hidden !important;
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease
!important;
}
#video-platforms .ch-route-card:nth-child(5) {
grid-column:
2 / span 2
!important;
}
#video-platforms .ch-route-card:nth-child(6) {
grid-column:
4 / span 2
!important;
}
#video-platforms .ch-route-card:nth-child(7) {
grid-column:
6 / span 2
!important;
}
#video-platforms a.ch-route-card,
#video-platforms a.ch-route-card:link,
#video-platforms a.ch-route-card:visited {
color: inherit !important;
text-decoration: none !important;
}
#video-platforms a.ch-route-card:hover {
transform:
translateY(-4px)
!important;
border-color:
rgba(99,102,241,.30)
!important;
box-shadow:
0 20px 46px rgba(15,23,42,.10)
!important;
text-decoration:
none
!important;
}
#video-platforms .ch-route-icon {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
flex: 0 0 46px !important;
margin: 0 0 20px !important;
padding: 0 !important;
border-radius: 14px !important;
box-sizing: border-box !important;
box-shadow:
0 9px 22px rgba(15,23,42,.12)
!important;
}
#video-platforms .ch-route-icon img {
display: block !important;
width: 22px !important;
height: 22px !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
filter:
brightness(0) invert(1)
!important;
}
#video-platforms .ch-route-instagram {
background:
linear-gradient(
135deg,
#833ab4 0%,
#c13584 35%,
#e1306c 64%,
#fcaf45 100%
)
!important;
}
#video-platforms .ch-route-facebook {
background:
#1877f2
!important;
}
#video-platforms .ch-route-pinterest {
background:
#e60023
!important;
}
#video-platforms .ch-route-tiktok {
background:
#000
!important;
box-shadow:
-2px 0 0 rgba(37,244,238,.85),
2px 0 0 rgba(254,44,85,.85),
0 9px 22px rgba(15,23,42,.12)
!important;
}
#video-platforms .ch-route-youtube {
background:
#ff0000
!important;
}
#video-platforms .ch-route-body {
position: static !important;
display: block !important;
width: 100% !important;
min-height: 112px !important;
margin: 0 !important;
padding: 0 !important;
}
#video-platforms .ch-route-body h3 {
position: static !important;
display: block !important;
min-height: 43px !important;
margin: 0 0 8px !important;
padding: 0 !important;
color: #172033 !important;
font-family: inherit !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.34 !important;
letter-spacing: -.018em !important;
text-decoration: none !important;
}
#video-platforms .ch-route-body p {
position: static !important;
display: block !important;
min-height: 62px !important;
margin: 0 !important;
padding: 0 !important;
color: #71809a !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
text-decoration: none !important;
}
#video-platforms .ch-route-tag {
position: static !important;
display: inline-flex !important;
align-items: center !important;
align-self: flex-start !important;
margin: auto 0 0 !important;
padding: 6px 9px !important;
border:
1px solid rgba(148,163,184,.28)
!important;
border-radius: 999px !important;
background: #f8fafc !important;
color: #8a97aa !important;
font-family: inherit !important;
font-size: 9px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
#video-platforms .ch-route-card.is-planned {
cursor: default !important;
background:
linear-gradient(
180deg,
rgba(255,255,255,.97),
rgba(248,250,252,.96)
)
!important;
}
#video-platforms .ch-route-soon {
position: absolute !important;
top: 18px !important;
right: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 5px 8px !important;
border:
1px solid rgba(245,158,11,.26)
!important;
border-radius: 999px !important;
background: #fff7ed !important;
color: #b45309 !important;
font-family: inherit !important;
font-size: 8px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
@media (max-width: 1050px) {
#video-platforms.ch-route-section {
width:
min(100% - 36px, 850px)
!important;
padding:
56px 0 68px
!important;
}
#video-platforms .ch-route-head {
grid-template-columns:
1fr
!important;
gap:
20px
!important;
}
#video-platforms .ch-route-head-side p {
max-width:
700px
!important;
}
#video-platforms .ch-route-grid {
grid-template-columns:
repeat(2, minmax(0,1fr))
!important;
}
#video-platforms .ch-route-card,
#video-platforms .ch-route-card:nth-child(5),
#video-platforms .ch-route-card:nth-child(6),
#video-platforms .ch-route-card:nth-child(7) {
grid-column:
auto
!important;
}
}
@media (max-width: 650px) {
#video-platforms.ch-route-section {
width:
calc(100% - 28px)
!important;
padding:
44px 0 56px
!important;
}
#video-platforms .ch-route-head-main h2 {
font-size:
37px
!important;
line-height:
1
!important;
}
#video-platforms .ch-route-grid {
grid-template-columns:
1fr
!important;
gap:
14px
!important;
}
#video-platforms .ch-route-card {
min-height:
225px
!important;
padding:
20px
!important;
}
}
/* chlak-source-matching-v1.css */
#source-matching.chsm-section {
width: min(1220px, calc(100% - 48px)) !important;
margin: 0 auto !important;
padding: 76px 0 84px !important;
box-sizing: border-box !important;
}
#source-matching .chsm-heading {
display: grid !important;
grid-template-columns:
minmax(0,1.3fr)
minmax(320px,.9fr)
!important;
align-items: end !important;
gap: 58px !important;
margin: 0 0 32px !important;
}
#source-matching .chsm-eyebrow {
margin: 0 0 13px !important;
color: #5367ff !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .13em !important;
text-transform: uppercase !important;
}
#source-matching .chsm-eyebrow::before {
content: "" !important;
display: inline-block !important;
width: 18px !important;
height: 1px !important;
margin: 0 9px 3px 0 !important;
background: #5367ff !important;
}
#source-matching .chsm-heading h2 {
margin: 0 !important;
max-width: 760px !important;
color: #111827 !important;
font-size:
clamp(42px,4.4vw,58px)
!important;
font-weight: 900 !important;
line-height: .98 !important;
letter-spacing: -.047em !important;
}
#source-matching .chsm-heading-copy {
padding-bottom: 6px !important;
}
#source-matching .chsm-heading-copy p {
margin: 0 !important;
color: #71809a !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
#source-matching .chsm-layout {
display: grid !important;
grid-template-columns:
minmax(300px,.78fr)
minmax(0,1.42fr)
!important;
gap: 18px !important;
align-items: stretch !important;
}
#source-matching .chsm-info {
padding: 28px !important;
border:
1px solid rgba(148,163,184,.22)
!important;
border-radius: 22px !important;
background:
linear-gradient(
145deg,
#ffffff 0%,
#fbfcff 100%
)
!important;
box-shadow:
0 14px 38px
rgba(15,23,42,.05)
!important;
}
#source-matching .chsm-info-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
margin-bottom: 21px !important;
border-radius: 14px !important;
background:
linear-gradient(
135deg,
#7c3aed,
#ec4899
)
!important;
color: white !important;
box-shadow:
0 10px 24px
rgba(124,58,237,.18)
!important;
}
#source-matching .chsm-info h3 {
margin: 0 0 14px !important;
color: #172033 !important;
font-size: 20px !important;
font-weight: 850 !important;
line-height: 1.28 !important;
letter-spacing: -.025em !important;
}
#source-matching .chsm-info > p {
margin: 0 0 17px !important;
color: #71809a !important;
font-size: 14px !important;
line-height: 1.65 !important;
}
#source-matching .chsm-trust {
display: grid !important;
grid-template-columns:
1fr
!important;
gap: 8px !important;
margin-top: 24px !important;
}
#source-matching .chsm-trust span {
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 38px !important;
padding: 8px 11px !important;
border:
1px solid rgba(148,163,184,.22)
!important;
border-radius: 11px !important;
background: #f8fafc !important;
color: #506078 !important;
font-size: 12px !important;
font-weight: 700 !important;
}
#source-matching .chsm-trust b {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: #ecfdf5 !important;
color: #059669 !important;
font-size: 11px !important;
}
#source-matching .chsm-router {
overflow: hidden !important;
border:
1px solid rgba(148,163,184,.22)
!important;
border-radius: 22px !important;
background: #fff !important;
box-shadow:
0 14px 38px
rgba(15,23,42,.05)
!important;
}
#source-matching .chsm-router-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
min-height: 72px !important;
padding: 16px 20px !important;
border-bottom:
1px solid rgba(226,232,240,.92)
!important;
background:
linear-gradient(
180deg,
#fcfdff,
#f8fafc
)
!important;
}
#source-matching .chsm-router-head div {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
#source-matching .chsm-router-head span {
color: #1e293b !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .03em !important;
}
#source-matching .chsm-router-head small {
color: #94a3b8 !important;
font-size: 10px !important;
}
#source-matching .chsm-router-label {
color: #94a3b8 !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: .09em !important;
text-transform: uppercase !important;
}
#source-matching .chsm-row {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
min-height: 67px !important;
padding: 11px 20px !important;
border-bottom:
1px solid rgba(226,232,240,.9)
!important;
background: #fff !important;
color: inherit !important;
text-decoration: none !important;
transition:
background .18s ease,
transform .18s ease
!important;
}
#source-matching .chsm-row:last-child {
border-bottom: 0 !important;
}
#source-matching a.chsm-row:hover {
background:
#f8faff
!important;
}
#source-matching .chsm-source {
display: flex !important;
align-items: center !important;
gap: 13px !important;
min-width: 0 !important;
}
#source-matching .chsm-brand {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
border-radius: 11px !important;
}
#source-matching .chsm-brand img {
display: block !important;
width: 18px !important;
height: 18px !important;
filter:
brightness(0) invert(1)
!important;
}
#source-matching .chsm-instagram {
background:
linear-gradient(
135deg,
#833ab4,
#e1306c 63%,
#fcaf45
)
!important;
}
#source-matching .chsm-facebook {
background:
#1877f2
!important;
}
#source-matching .chsm-pinterest {
background:
#e60023
!important;
}
#source-matching .chsm-tiktok {
background:
#000
!important;
box-shadow:
-1px 0 0 #25f4ee,
1px 0 0 #fe2c55
!important;
}
#source-matching .chsm-youtube {
background:
#ff0000
!important;
}
#source-matching .chsm-url {
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
gap: 3px !important;
}
#source-matching .chsm-url strong {
overflow: hidden !important;
color: #273449 !important;
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
monospace
!important;
font-size: 11px !important;
font-weight: 650 !important;
line-height: 1.3 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
#source-matching .chsm-url small {
color: #94a3b8 !important;
font-size: 10px !important;
line-height: 1.2 !important;
}
#source-matching .chsm-action {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex: 0 0 auto !important;
color: #334155 !important;
font-size: 12px !important;
font-weight: 800 !important;
white-space: nowrap !important;
transition:
color .18s ease
!important;
}
#source-matching a.chsm-row:hover .chsm-action {
color:
#6366f1
!important;
}
#source-matching .chsm-action b {
font-size:
15px
!important;
font-weight:
500
!important;
}
#source-matching .chsm-row.is-planned {
background:
#fbfcfe
!important;
cursor:
default
!important;
}
#source-matching .chsm-coming {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
padding: 5px 8px !important;
border:
1px solid rgba(245,158,11,.24)
!important;
border-radius:
999px
!important;
background:
#fff7ed
!important;
color:
#b45309
!important;
font-size:
8px
!important;
font-weight:
900
!important;
line-height:
1
!important;
letter-spacing:
.045em
!important;
text-transform:
uppercase
!important;
white-space:
nowrap
!important;
}
@media (max-width: 1050px) {
#source-matching.chsm-section {
width:
min(100% - 36px,850px)
!important;
padding:
58px 0 70px
!important;
}
#source-matching .chsm-heading {
grid-template-columns:
1fr
!important;
gap:
20px
!important;
}
#source-matching .chsm-layout {
grid-template-columns:
1fr
!important;
}
}
@media (max-width: 650px) {
#source-matching.chsm-section {
width:
calc(100% - 28px)
!important;
padding:
46px 0 58px
!important;
}
#source-matching .chsm-heading h2 {
font-size:
37px
!important;
line-height:
1
!important;
}
#source-matching .chsm-info {
padding:
22px
!important;
}
#source-matching .chsm-router-head {
padding:
15px
!important;
}
#source-matching .chsm-router-label {
display:
none
!important;
}
#source-matching .chsm-row {
padding:
12px 15px
!important;
gap:
10px
!important;
}
#source-matching .chsm-brand {
width:
34px
!important;
height:
34px
!important;
flex-basis:
34px
!important;
}
#source-matching .chsm-url strong {
max-width:
190px
!important;
}
#source-matching .chsm-action {
font-size:
0
!important;
}
#source-matching .chsm-action b {
font-size:
18px
!important;
}
}
/* chlak-planned-workflow-v1.css */
#planned-workflow.chpw-section {
width: min(1220px, calc(100% - 48px)) !important;
margin: 0 auto !important;
padding: 76px 0 84px !important;
box-sizing: border-box !important;
}
#planned-workflow .chpw-head {
display: grid !important;
grid-template-columns:
minmax(0,1.28fr)
minmax(320px,.9fr)
!important;
gap: 58px !important;
align-items: end !important;
margin: 0 0 34px !important;
}
#planned-workflow .chpw-eyebrow {
margin: 0 0 13px !important;
color: #5367ff !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .13em !important;
text-transform: uppercase !important;
}
#planned-workflow .chpw-eyebrow::before {
content: "" !important;
display: inline-block !important;
width: 18px !important;
height: 1px !important;
margin: 0 9px 3px 0 !important;
background: #5367ff !important;
}
#planned-workflow .chpw-head h2 {
margin: 0 !important;
max-width: 730px !important;
color: #111827 !important;
font-size:
clamp(42px,4.4vw,58px)
!important;
font-weight: 900 !important;
line-height: .98 !important;
letter-spacing: -.048em !important;
}
#planned-workflow .chpw-head-side {
padding-bottom: 6px !important;
}
#planned-workflow .chpw-head-side p {
margin: 12px 0 0 !important;
color: #71809a !important;
font-size: 14px !important;
line-height: 1.68 !important;
}
#planned-workflow .chpw-status {
display: inline-flex !important;
align-items: center !important;
padding: 6px 10px !important;
border:
1px solid rgba(245,158,11,.24)
!important;
border-radius: 999px !important;
background: #fff7ed !important;
color: #b45309 !important;
font-size: 9px !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
}
#planned-workflow .chpw-flow {
position: relative !important;
display: grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr))
!important;
gap: 18px !important;
}
#planned-workflow .chpw-flow::before {
content: "" !important;
position: absolute !important;
top: 43px !important;
left: 15% !important;
right: 15% !important;
height: 1px !important;
background:
linear-gradient(
90deg,
rgba(99,102,241,.15),
rgba(99,102,241,.38),
rgba(99,102,241,.15)
)
!important;
z-index: 0 !important;
}
#planned-workflow .chpw-step {
position: relative !important;
z-index: 1 !important;
display: flex !important;
flex-direction: column !important;
min-height: 260px !important;
padding: 22px !important;
border:
1px solid rgba(148,163,184,.23)
!important;
border-radius: 20px !important;
background:
rgba(255,255,255,.97)
!important;
box-shadow:
0 12px 32px rgba(15,23,42,.05)
!important;
}
#planned-workflow .chpw-step-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 26px !important;
}
#planned-workflow .chpw-number {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
border:
1px solid rgba(99,102,241,.18)
!important;
border-radius: 12px !important;
background:
#f4f6ff
!important;
color:
#5367ff
!important;
font-size:
11px
!important;
font-weight:
900
!important;
}
#planned-workflow .chpw-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
background:
#111827
!important;
color:
#fff
!important;
box-shadow:
0 8px 20px rgba(15,23,42,.12)
!important;
}
#planned-workflow .chpw-copy {
min-height: 132px !important;
}
#planned-workflow .chpw-copy h3 {
margin: 0 0 10px !important;
color: #172033 !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1.32 !important;
letter-spacing: -.02em !important;
}
#planned-workflow .chpw-copy p {
margin: 0 !important;
color: #71809a !important;
font-size: 13px !important;
line-height: 1.6 !important;
}
#planned-workflow .chpw-foot {
display: inline-flex !important;
align-items: center !important;
align-self: flex-start !important;
margin-top: auto !important;
padding: 6px 9px !important;
border:
1px solid rgba(148,163,184,.28)
!important;
border-radius: 999px !important;
background: #f8fafc !important;
color: #8896aa !important;
font-size: 9px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .07em !important;
text-transform: uppercase !important;
}
@media (max-width: 1050px) {
#planned-workflow.chpw-section {
width:
min(100% - 36px,850px)
!important;
padding:
58px 0 70px
!important;
}
#planned-workflow .chpw-head {
grid-template-columns:
1fr
!important;
gap:
20px
!important;
}
#planned-workflow .chpw-flow {
grid-template-columns:
1fr
!important;
}
#planned-workflow .chpw-flow::before {
display:
none
!important;
}
#planned-workflow .chpw-step {
min-height:
225px
!important;
}
}
@media (max-width: 650px) {
#planned-workflow.chpw-section {
width:
calc(100% - 28px)
!important;
padding:
46px 0 58px
!important;
}
#planned-workflow .chpw-head h2 {
font-size:
37px
!important;
line-height:
1
!important;
}
#planned-workflow .chpw-step {
padding:
20px
!important;
}
}
/* chlak-limits-v1.css */
#limits.chlim-section {
width: min(1220px, calc(100% - 48px)) !important;
margin: 0 auto !important;
padding: 72px 0 82px !important;
box-sizing: border-box !important;
}
#limits .chlim-shell {
display: grid !important;
grid-template-columns:
minmax(0,1.22fr)
minmax(360px,.9fr)
!important;
overflow: hidden !important;
border:
1px solid rgba(148,163,184,.22)
!important;
border-radius:
24px
!important;
background:
#fff
!important;
box-shadow:
0 16px 42px rgba(15,23,42,.055)
!important;
}
#limits .chlim-main {
padding:
34px
!important;
background:
linear-gradient(
145deg,
#ffffff 0%,
#fafbff 100%
)
!important;
}
#limits .chlim-kicker {
margin-bottom:
13px
!important;
color:
#5367ff
!important;
font-size:
11px
!important;
font-weight:
800
!important;
line-height:
1
!important;
letter-spacing:
.13em
!important;
text-transform:
uppercase
!important;
}
#limits .chlim-kicker::before {
content: "" !important;
display: inline-block !important;
width: 18px !important;
height: 1px !important;
margin:
0 9px 3px 0
!important;
background:
#5367ff
!important;
}
#limits .chlim-main h2 {
margin:
0 0 18px
!important;
max-width:
620px
!important;
color:
#172033
!important;
font-size:
27px
!important;
font-weight:
850
!important;
line-height:
1.2
!important;
letter-spacing:
-.025em
!important;
}
#limits .chlim-main > p {
margin:
0 0 16px
!important;
max-width:
690px
!important;
color:
#71809a
!important;
font-size:
14px
!important;
line-height:
1.7
!important;
}
#limits .chlim-rules {
display: grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr))
!important;
gap:
10px
!important;
margin-top:
26px
!important;
}
#limits .chlim-rule {
display: flex !important;
align-items:
flex-start
!important;
gap:
10px
!important;
min-height:
70px
!important;
padding:
12px
!important;
border:
1px solid rgba(148,163,184,.23)
!important;
border-radius:
13px
!important;
background:
rgba(255,255,255,.85)
!important;
}
#limits .chlim-rule > span {
display: flex !important;
align-items:
center
!important;
justify-content:
center
!important;
width:
22px
!important;
height:
22px
!important;
flex:
0 0 22px
!important;
border-radius:
50%
!important;
background:
#ecfdf5
!important;
color:
#059669
!important;
font-size:
11px
!important;
font-weight:
900
!important;
}
#limits .chlim-rule div {
display:
flex
!important;
flex-direction:
column
!important;
gap:
3px
!important;
}
#limits .chlim-rule strong {
color:
#334155
!important;
font-size:
12px
!important;
font-weight:
800
!important;
line-height:
1.3
!important;
}
#limits .chlim-rule small {
color:
#94a3b8
!important;
font-size:
10px
!important;
line-height:
1.4
!important;
}
#limits .chlim-responsible {
position:
relative
!important;
padding:
34px
!important;
background:
#111827
!important;
color:
#fff
!important;
}
#limits .chlim-responsible::after {
content:
""
!important;
position:
absolute
!important;
right:
-80px
!important;
bottom:
-90px
!important;
width:
230px
!important;
height:
230px
!important;
border-radius:
50%
!important;
background:
radial-gradient(
circle,
rgba(99,102,241,.18),
rgba(99,102,241,0) 68%
)
!important;
pointer-events:
none
!important;
}
#limits .chlim-shield {
display:
flex
!important;
align-items:
center
!important;
justify-content:
center
!important;
width:
48px
!important;
height:
48px
!important;
margin-bottom:
25px
!important;
border-radius:
14px
!important;
background:
rgba(99,102,241,.16)
!important;
color:
#a5b4fc
!important;
border:
1px solid rgba(165,180,252,.14)
!important;
}
#limits .chlim-label {
margin-bottom:
12px
!important;
color:
#93a7d7
!important;
font-size:
10px
!important;
font-weight:
800
!important;
line-height:
1
!important;
letter-spacing:
.14em
!important;
text-transform:
uppercase
!important;
}
#limits .chlim-responsible h3 {
margin:
0 0 14px
!important;
max-width:
430px
!important;
color:
#fff
!important;
font-size:
27px
!important;
font-weight:
850
!important;
line-height:
1.16
!important;
letter-spacing:
-.03em
!important;
}
#limits .chlim-responsible > p {
margin:
0
!important;
max-width:
430px
!important;
color:
#b5c0d4
!important;
font-size:
13px
!important;
line-height:
1.65
!important;
}
#limits .chlim-responsible-points {
display:
grid
!important;
gap:
9px
!important;
margin-top:
30px
!important;
}
#limits .chlim-responsible-points > div {
display:
flex
!important;
align-items:
center
!important;
gap:
11px
!important;
min-height:
42px
!important;
padding:
9px 11px
!important;
border:
1px solid rgba(255,255,255,.08)
!important;
border-radius:
11px
!important;
background:
rgba(255,255,255,.035)
!important;
color:
#cbd5e1
!important;
font-size:
11px
!important;
font-weight:
650
!important;
}
#limits .chlim-responsible-points span {
color:
#818cf8
!important;
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
monospace
!important;
font-size:
10px
!important;
font-weight:
800
!important;
}
@media (max-width: 1050px) {
#limits.chlim-section {
width:
min(100% - 36px,850px)
!important;
padding:
58px 0 70px
!important;
}
#limits .chlim-shell {
grid-template-columns:
1fr
!important;
}
}
@media (max-width: 650px) {
#limits.chlim-section {
width:
calc(100% - 28px)
!important;
padding:
46px 0 58px
!important;
}
#limits .chlim-main,
#limits .chlim-responsible {
padding:
24px
!important;
}
#limits .chlim-rules {
grid-template-columns:
1fr
!important;
}
#limits .chlim-main h2,
#limits .chlim-responsible h3 {
font-size:
24px
!important;
}
}
/* chlak-other-media-v1.css */
#other-media.chom-section {
width: min(1220px, calc(100% - 48px)) !important;
margin: 0 auto !important;
padding: 76px 0 84px !important;
box-sizing: border-box !important;
}
#other-media .chom-head {
display: grid !important;
grid-template-columns:
minmax(0,1.3fr)
minmax(320px,.9fr)
!important;
gap: 58px !important;
align-items: end !important;
margin: 0 0 34px !important;
}
#other-media .chom-eyebrow {
margin: 0 0 13px !important;
color: #5367ff !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: .13em !important;
text-transform: uppercase !important;
}
#other-media .chom-eyebrow::before {
content: "" !important;
display: inline-block !important;
width: 18px !important;
height: 1px !important;
margin: 0 9px 3px 0 !important;
background: #5367ff !important;
}
#other-media .chom-head h2 {
margin: 0 !important;
max-width: 760px !important;
color: #111827 !important;
font-size:
clamp(42px,4.4vw,58px)
!important;
font-weight: 900 !important;
line-height: .98 !important;
letter-spacing: -.047em !important;
}
#other-media .chom-head-side {
padding-bottom: 6px !important;
}
#other-media .chom-head-side p {
margin: 0 !important;
color: #71809a !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
#other-media .chom-grid {
display: grid !important;
grid-template-columns:
repeat(8,minmax(0,1fr))
!important;
gap: 18px !important;
width: 100% !important;
}
#other-media .chom-card {
position: relative !important;
grid-column:
span 2
!important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
min-height: 245px !important;
padding: 22px !important;
overflow: hidden !important;
border:
1px solid rgba(148,163,184,.23)
!important;
border-radius: 20px !important;
background:
rgba(255,255,255,.97)
!important;
box-shadow:
0 12px 32px rgba(15,23,42,.05)
!important;
color: inherit !important;
text-decoration: none !important;
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease
!important;
}
#other-media .chom-card:nth-child(5) {
grid-column:
4 / span 2
!important;
}
#other-media .chom-card:hover {
transform:
translateY(-4px)
!important;
border-color:
rgba(99,102,241,.27)
!important;
box-shadow:
0 20px 46px rgba(15,23,42,.09)
!important;
text-decoration:
none
!important;
}
#other-media .chom-top {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
margin-bottom:
20px
!important;
}
#other-media .chom-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
flex: 0 0 46px !important;
border-radius:
14px
!important;
box-shadow:
0 9px 22px rgba(15,23,42,.11)
!important;
}
#other-media .chom-icon img {
display: block !important;
width: 22px !important;
height: 22px !important;
filter:
brightness(0) invert(1)
!important;
}
#other-media .chom-instagram {
background:
linear-gradient(
135deg,
#833ab4,
#c13584 35%,
#e1306c 65%,
#fcaf45
)
!important;
}
#other-media .chom-pinterest {
background:
#e60023
!important;
}
#other-media .chom-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding:
6px 9px
!important;
border:
1px solid rgba(99,102,241,.13)
!important;
border-radius:
999px
!important;
background:
#f5f6ff
!important;
color:
#6975d8
!important;
font-size:
8px
!important;
font-weight:
900
!important;
line-height:
1
!important;
letter-spacing:
.07em
!important;
text-transform:
uppercase
!important;
}
#other-media .chom-body {
min-height:
105px
!important;
}
#other-media .chom-body h3 {
margin:
0 0 9px
!important;
min-height:
43px
!important;
color:
#172033
!important;
font-size:
16px
!important;
font-weight:
800
!important;
line-height:
1.34
!important;
letter-spacing:
-.018em
!important;
}
#other-media .chom-body p {
margin:
0
!important;
color:
#71809a
!important;
font-size:
13px
!important;
line-height:
1.55
!important;
}
#other-media .chom-open {
display: inline-flex !important;
align-items: center !important;
gap:
7px
!important;
align-self:
flex-start
!important;
margin-top:
auto
!important;
color:
#4f5fbf
!important;
font-size:
11px
!important;
font-weight:
800
!important;
}
#other-media .chom-open b {
font-size:
15px
!important;
font-weight:
500
!important;
transition:
transform .2s ease
!important;
}
#other-media .chom-card:hover .chom-open b {
transform:
translateX(3px)
!important;
}
@media (max-width: 1050px) {
#other-media.chom-section {
width:
min(100% - 36px,850px)
!important;
padding:
58px 0 70px
!important;
}
#other-media .chom-head {
grid-template-columns:
1fr
!important;
gap:
20px
!important;
}
#other-media .chom-grid {
grid-template-columns:
repeat(2,minmax(0,1fr))
!important;
}
#other-media .chom-card,
#other-media .chom-card:nth-child(5) {
grid-column:
auto
!important;
}
}
@media (max-width: 650px) {
#other-media.chom-section {
width:
calc(100% - 28px)
!important;
padding:
46px 0 58px
!important;
}
#other-media .chom-head h2 {
font-size:
37px
!important;
line-height:
1
!important;
}
#other-media .chom-grid {
grid-template-columns:
1fr
!important;
gap:
14px
!important;
}
#other-media .chom-card {
min-height:
220px
!important;
padding:
20px
!important;
}
}