/* ========================================================================== Zendra (Chakra) theme — zendra.ro Palette "Zendra Violet #9b51e0". Mobile-first. Glamory-style product landing. Poppins (sans, UI) · Playfair Display (serif headlines, loaded in ) Keeps the advertorial machinery classes (ad-*) + adds zn-* landing sections. ========================================================================== */ :root{ --primary:#9b51e0; --primary-dk:#7c3aad; --primary-deep:#5b2d87; --cta:#9b51e0; --cta-hi:#8443c9; --urgency:#D92D20; --success:#12805C; --danger:#B42318; --text:#1a1226; --muted:#6b6478; --strike:#a49bb3; --bg:#FFFFFF; --surface:#f8f5fd; --line:#ece4f7; --field:#ded2ef; --tint:#f4edfc; --tint2:#faf7ff; --sans:"Poppins",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --serif:"Playfair Display",Georgia,"Iowan Old Style","Times New Roman","Noto Serif",serif; --col:680px; --r:14px; --shadow:0 1px 2px rgba(26,18,38,.05), 0 10px 30px -16px rgba(91,45,135,.28); --shadow-cta:0 10px 22px -8px rgba(155,81,224,.55); } *{box-sizing:border-box;} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:#efeaf6; color:var(--text); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; } img,video{ max-width:100%; height:auto; display:block; } a{ color:var(--primary-dk); } button{ font-family:inherit; } /* ---- page column ---- */ .ad-page{ max-width:var(--col); margin:0 auto; background:var(--bg); min-height:100vh; box-shadow:0 0 60px -22px rgba(0,0,0,.35); padding-bottom:76px; } .ad-pad{ padding-left:18px; padding-right:18px; } @media(min-width:560px){ .ad-pad{ padding-left:26px; padding-right:26px; } } /* ---- announce bar ---- */ .zn-announce{ background:#231533; color:#fff; text-align:center; font-size:12.5px; font-weight:600; letter-spacing:.02em; padding:9px 14px; line-height:1.4; } .zn-announce b{ color:#d9b8ff; font-weight:800; } /* ---- header ---- */ .ad-header{ display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--bg); position:relative; } .ad-logo{ font-family:var(--serif); font-weight:800; font-size:21px; color:var(--primary-dk); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; } .ad-logo span{ color:var(--primary); } .ad-logo-img{ height:26px; width:auto; max-height:none; display:block; } @media(min-width:560px){ .ad-logo-img{ height:30px; } } .ad-phone{ position:absolute; right:16px; font-size:12px; font-weight:700; color:var(--primary-dk); text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } @media(max-width:430px){ .ad-phone{ font-size:0; gap:0; width:38px; height:38px; justify-content:center; border:1px solid var(--line); border-radius:50%; right:12px; } .ad-phone i{ font-size:15px; } } /* ========================================================================== ZN LANDING SECTIONS (Glamory-style) ========================================================================== */ /* section shell */ .zn-sec{ padding:34px 18px 30px; } .zn-sec.tint{ background:var(--surface); } .zn-sec.dark-tint{ background:var(--tint); } @media(min-width:560px){ .zn-sec{ padding:42px 26px 36px; } } .zn-sec > div + div{ margin-top:12px; } .zn-kicker{ text-align:center; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin:0 0 8px; } .zn-h2{ font-family:var(--serif); text-align:center; font-weight:800; letter-spacing:-.01em; color:#16101f; font-size:clamp(23px,6vw,30px); line-height:1.18; margin:0 0 8px; text-wrap:balance; } .zn-h2 em, .zn-h2 strong{ font-style:normal; font-weight:800; color:var(--primary-dk); } .zn-secsub{ text-align:center; font-size:14px; color:var(--muted); line-height:1.55; margin:0 auto 22px; max-width:46ch; } /* ---- HERO ---- */ .zn-hero{ padding:14px 18px 26px; } @media(min-width:560px){ .zn-hero{ padding:18px 26px 30px; } } .zn-gallery{ position:relative; border-radius:16px; overflow:hidden; background:var(--surface); } .zn-gallery .main{ position:relative; } .zn-gallery .main img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; } .zn-gal-badge{ position:absolute; top:12px; left:12px; z-index:2; font-size:10.5px; font-weight:800; color:#fff; background:var(--primary-deep); padding:5px 10px; border-radius:8px; letter-spacing:.05em; } .zn-gal-seal{ position:absolute; top:10px; right:10px; z-index:2; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.92); border:1.5px dashed var(--primary); color:var(--primary-dk); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; font-size:15px; line-height:1; text-align:center; } .zn-gal-seal small{ font-size:6.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; } .zn-thumbs{ display:flex; gap:8px; margin-top:9px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; } .zn-thumbs::-webkit-scrollbar{ display:none; } .zn-thumbs button{ flex:0 0 60px; width:60px; height:60px; padding:0; border-radius:10px; overflow:hidden; border:2px solid var(--line); background:none; cursor:pointer; } .zn-thumbs button.active{ border-color:var(--primary); } .zn-thumbs img{ width:100%; height:100%; object-fit:cover; } .zn-hero-rating{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; margin:16px 0 6px; color:var(--text); flex-wrap:wrap; } .zn-stars{ color:#f59e0b; letter-spacing:1.5px; font-size:14px; } .zn-hero-rating b{ font-weight:800; } .zn-hero-rating .cnt{ color:var(--muted); font-weight:500; } .zn-h1{ font-family:var(--serif); font-weight:800; letter-spacing:-.015em; color:#16101f; margin:4px 0 10px; line-height:1.14; font-size:clamp(27px,7vw,38px); text-wrap:balance; } .zn-h1 em, .zn-h1 strong{ font-style:normal; font-weight:800; color:var(--primary-dk); } .zn-dek{ font-size:clamp(15px,4vw,17px); line-height:1.5; color:#4a4157; margin:0 0 14px; } .zn-bullets{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; } .zn-bullets li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.45; color:#2c2438; } .zn-bullets .bi{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--primary-dk); display:flex; align-items:center; justify-content:center; font-size:12px; margin-top:-1px; } .zn-bullets b{ color:#16101f; } .zn-risk{ display:flex; gap:13px; align-items:center; border:1.5px solid var(--line); border-radius:13px; padding:12px 14px; margin:14px 0 6px; } .zn-risk .seal{ flex-shrink:0; width:66px; height:66px; border-radius:50%; border:1.5px dashed var(--primary); padding:6px; color:var(--primary-dk); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-weight:800; font-size:11px; line-height:1.05; overflow:hidden; } .zn-risk .seal small{ font-size:5.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:2px; line-height:1.2; } .zn-risk p{ font-size:12.5px; line-height:1.5; color:#3c3449; margin:0; } .zn-risk b{ color:#16101f; } /* compact hero accordion (qa) */ .zn-qa-list{ margin:16px 0 4px; border-top:1px solid var(--line); } .zn-qa{ border-bottom:1px solid var(--line); } .zn-qa .q{ width:100%; text-align:left; background:none; border:none; padding:13px 0; font-size:14px; font-weight:600; color:#16101f; display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; } .zn-qa .q .sgn{ color:var(--primary); font-size:18px; flex-shrink:0; line-height:1; transition:transform .2s; } .zn-qa .a{ font-size:13.5px; color:#4a4157; line-height:1.6; max-height:0; overflow:hidden; transition:max-height .25s ease; } .zn-qa.open .a{ max-height:320px; } .zn-qa .a .inner{ padding:0 0 13px; } /* mini review under hero */ .zn-minirev{ display:flex; gap:11px; align-items:flex-start; margin:16px 0 0; } .zn-minirev .av{ flex-shrink:0; width:38px; height:38px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; } .zn-minirev .who{ font-size:13px; font-weight:700; color:#16101f; display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .zn-minirev p{ font-size:13.5px; color:#3c3449; line-height:1.5; margin:3px 0 0; } /* ---- STATS (percent rings) ---- */ .zn-stats{ display:grid; gap:11px; } @media(min-width:560px){ .zn-stats{ grid-template-columns:1fr 1fr; } } .zn-stat{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:15px; padding:16px; } .zn-sec.tint .zn-stat, .zn-sec.dark-tint .zn-stat{ background:#fff; } .zn-ring{ flex-shrink:0; width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:conic-gradient(var(--primary) calc(var(--p,80)*1%), #e9e1f5 0); position:relative; } .zn-ring::before{ content:""; position:absolute; inset:6px; background:#fff; border-radius:50%; } .zn-ring b{ position:relative; font-size:14px; font-weight:800; color:var(--primary-deep); font-variant-numeric:tabular-nums; } .zn-stat p{ font-size:13.5px; line-height:1.45; color:#2c2438; margin:0; } .zn-stat p b{ color:#16101f; } .zn-stats-note{ text-align:center; font-size:10.5px; color:var(--muted); line-height:1.5; max-width:52ch; margin-left:auto; margin-right:auto; } /* ---- REVIEWS grid ---- */ .zn-reviews{ display:grid; gap:14px; } @media(min-width:560px){ .zn-reviews{ grid-template-columns:repeat(3,1fr); } } .zn-rev{ background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; } .zn-rev img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .zn-rev .bd{ padding:13px 14px 14px; display:flex; flex-direction:column; gap:5px; flex:1; } .zn-rev h3{ font-size:14.5px; font-weight:800; color:#16101f; margin:0; letter-spacing:-.01em; } .zn-rev .stars{ color:#f59e0b; letter-spacing:1.5px; font-size:12.5px; } .zn-rev p{ font-size:13px; line-height:1.55; color:#3c3449; margin:2px 0 8px; flex:1; } .zn-rev .who{ font-size:12px; font-weight:700; color:#16101f; display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:auto; } .zn-vf{ font-size:9.5px; font-weight:700; color:var(--success); background:#dcfce7; padding:2px 7px; border-radius:6px; white-space:nowrap; } .zn-rev-note{ text-align:center; font-size:10.5px; color:var(--muted); margin-top:12px; } /* ---- ELEMENTS (mechanism 3-up) ---- */ .zn-elements{ display:grid; gap:12px; } @media(min-width:560px){ .zn-elements{ grid-template-columns:repeat(3,1fr); } } .zn-el{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:16px; text-align:center; } .zn-el .ico{ width:46px; height:46px; border-radius:50%; background:var(--tint); color:var(--primary-dk); font-size:19px; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; } .zn-el h3{ font-size:15px; font-weight:800; color:#16101f; margin:0 0 6px; } .zn-el p{ font-size:12.5px; line-height:1.55; color:#4a4157; margin:0; } /* ---- CHAKRA grid (the "ingredients" analog) ---- */ .zn-chakras{ display:grid; gap:12px; grid-template-columns:1fr 1fr; } @media(min-width:560px){ .zn-chakras{ grid-template-columns:repeat(3,1fr); } } .zn-ck{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:14px 12px 13px; text-align:center; display:flex; flex-direction:column; align-items:center; } .zn-ck img{ width:84px; height:84px; object-fit:contain; margin-bottom:9px; } .zn-ck h3{ font-size:13.5px; font-weight:800; color:#16101f; margin:0 0 3px; line-height:1.25; } .zn-ck .meta{ font-size:10.5px; font-weight:700; color:var(--primary-dk); background:var(--tint); border-radius:999px; padding:3px 9px; margin:4px 0 7px; line-height:1.35; } .zn-ck p{ font-size:11.5px; line-height:1.5; color:#4a4157; margin:0; } .zn-ck.wide{ grid-column:1 / -1; } @media(min-width:560px){ .zn-ck.wide{ grid-column:auto; } } /* ---- TIMELINE (results phases) ---- */ .zn-phases{ display:grid; gap:14px; } @media(min-width:560px){ .zn-phases{ grid-template-columns:repeat(3,1fr); } } .zn-ph{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:16px 15px; display:flex; flex-direction:column; } .zn-ph .when{ font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); margin-bottom:5px; } .zn-ph h3{ font-family:var(--serif); font-size:17.5px; font-weight:800; color:#16101f; margin:0 0 10px; line-height:1.25; } .zn-ph ul{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:7px; } .zn-ph li{ display:flex; gap:8px; font-size:12.5px; line-height:1.45; color:#2c2438; align-items:flex-start; } .zn-ph li::before{ content:"✓"; color:var(--success); font-weight:800; flex-shrink:0; } .zn-ph blockquote{ margin:auto 0 0; background:var(--surface); border-left:3px solid var(--primary); border-radius:0 10px 10px 0; padding:9px 11px; font-size:12px; line-height:1.5; color:#3c3449; font-style:italic; } .zn-ph .qwho{ font-size:11px; font-weight:700; color:#16101f; font-style:normal; display:block; margin-top:5px; } /* ---- STEPS (3-up how to use, image optional) ---- */ .zn-steps3{ display:grid; gap:14px; } @media(min-width:560px){ .zn-steps3{ grid-template-columns:repeat(3,1fr); } } .zn-st{ background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; } .zn-st img{ width:100%; aspect-ratio:1/1; object-fit:cover; } .zn-st .bd{ padding:13px 14px 15px; } .zn-st h3{ font-size:14.5px; font-weight:800; color:#16101f; margin:0 0 5px; } .zn-st h3 span{ color:var(--primary); } .zn-st p{ font-size:12.5px; line-height:1.55; color:#4a4157; margin:0; } /* ---- GUARANTEE box ---- */ .zn-guarantee{ background:linear-gradient(150deg,#2a1a3e,#5b2d87); border-radius:18px; padding:24px 20px; color:#fff; position:relative; overflow:hidden; } .zn-guarantee::after{ content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.06); } .zn-guarantee .seal{ width:64px; height:64px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.75); display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:800; font-size:17px; line-height:1; margin-bottom:14px; } .zn-guarantee .seal small{ font-size:6.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; margin-top:2px; } .zn-guarantee h3{ font-family:var(--serif); font-size:clamp(20px,5.4vw,25px); font-weight:800; margin:0 0 10px; line-height:1.2; } .zn-guarantee p{ font-size:13.5px; line-height:1.6; color:#e9ddfb; margin:0 0 8px; position:relative; } .zn-guarantee p b{ color:#fff; } /* trust badges row */ .zn-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; } .zn-tb{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px 8px; text-align:center; } .zn-tb .ico{ color:var(--primary); font-size:19px; margin-bottom:6px; } .zn-tb b{ display:block; font-size:11px; font-weight:800; color:#16101f; line-height:1.3; } .zn-tb span{ font-size:9.5px; color:var(--muted); line-height:1.3; display:block; margin-top:2px; } /* generic centered CTA (between sections) */ .zn-ctawrap{ text-align:center; margin:20px 0 2px; } .zn-sec > .zn-ctawrap + div{ margin-top:20px; } .zn-cta-btn{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; background:var(--cta); color:#fff; border:none; border-radius:999px; padding:16px 34px; cursor:pointer; box-shadow:var(--shadow-cta); min-width:min(100%,340px); } .zn-cta-btn:hover{ background:var(--cta-hi); } .zn-cta-btn b{ font-size:15.5px; font-weight:800; letter-spacing:.02em; } .zn-cta-btn small{ font-size:11px; opacity:.92; font-weight:600; } .zn-stock{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:11.5px; font-weight:700; color:var(--success); margin-top:10px; } .zn-stock::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px rgba(18,128,92,.18); } /* ========================================================================== Advertorial machinery (kept, reskinned violet) ========================================================================== */ .ad-pub{ display:inline-block; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 7px; vertical-align:middle; } .ad-kicker{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--primary); margin:16px 0 0; } .ad-headline{ font-family:var(--serif); font-weight:800; letter-spacing:-.015em; color:#16101f; margin:9px 0 10px; line-height:1.15; font-size:clamp(25px,6.4vw,34px); text-wrap:balance; } .ad-dek{ font-family:var(--serif); font-style:italic; font-size:clamp(15px,3.6vw,18px); line-height:1.45; color:#54496a; margin:0 0 15px; } .ad-byline{ display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:11px 0; margin:0 0 18px; } .ad-avatar{ width:38px; height:38px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ad-byline .bl{ font-size:12.5px; line-height:1.4; } .ad-byline .bl b{ color:#241a33; } .ad-byline .bl span{ color:var(--muted); } .ad-body{ } .ad-body p{ font-size:clamp(15px,4vw,16.5px); line-height:1.7; margin:0 0 15px; color:#241a33; } .ad-body b, .ad-body strong{ color:#16101f; } .ad-lead::first-letter{ float:left; font-family:var(--serif); font-size:58px; line-height:.78; font-weight:800; padding:6px 10px 0 0; color:var(--primary); } .ad-sub{ font-family:var(--serif); font-weight:800; letter-spacing:-.01em; color:#16101f; font-size:clamp(20px,5vw,25px); line-height:1.22; margin:26px 0 11px; text-wrap:balance; } .ad-pull{ border-left:4px solid var(--primary); margin:20px 0; padding:4px 0 4px 16px; font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(19px,5vw,23px); line-height:1.38; color:#16101f; } .ad-figure{ margin:18px 0; } .ad-figure img{ border-radius:12px; width:100%; } .ad-figure .ph{ height:clamp(180px,52vw,300px); border-radius:12px; background:radial-gradient(240px 150px at 68% 120%, rgba(155,81,224,.30), transparent 70%),linear-gradient(165deg,#2a1a3e,#5b2d87 55%,#d9c6ef); } .ad-figure figcaption{ font-size:11.5px; color:var(--muted); margin-top:7px; line-height:1.45; } .ad-steps{ list-style:none; margin:10px 0 16px; padding:0; display:grid; gap:12px; counter-reset:st; } .ad-steps li{ display:flex; gap:13px; align-items:flex-start; font-size:15px; line-height:1.5; color:#241a33; } .ad-steps li::before{ counter-increment:st; content:counter(st); flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; } .ad-steps li b{ color:#16101f; } .ad-reason{ display:flex; gap:14px; margin:18px 0; } .ad-reason .no{ font-size:34px; font-weight:800; color:var(--primary); line-height:1; letter-spacing:-.03em; flex-shrink:0; width:44px; } .ad-reason h3{ font-size:17px; font-weight:800; color:#16101f; margin:2px 0 6px; letter-spacing:-.01em; } .ad-reason p{ font-size:14.5px; line-height:1.55; color:#463c56; margin:0; } .ad-cmp{ border:1px solid var(--line); border-radius:13px; overflow:hidden; margin:20px auto 0; max-width:520px; background:#fff; } .ad-cmp .scroll-x{ overflow-x:auto; } .ad-cmp table{ width:100%; border-collapse:collapse; font-size:13px; min-width:340px; } .ad-cmp th,.ad-cmp td{ padding:11px 12px; text-align:left; border-bottom:1px solid var(--line); } .ad-cmp thead th{ background:var(--surface); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .ad-cmp thead th.us{ color:var(--primary-dk); background:var(--tint); } .ad-cmp td.f{ color:#5a5069; } .ad-cmp td.no{ color:var(--urgency); font-weight:600; } .ad-cmp td.yes{ color:var(--success); font-weight:700; background:var(--tint2); } .ad-cmp tr:last-child td{ border-bottom:none; } .ad-promise{ background:var(--tint2); border:1px solid var(--line); border-radius:13px; padding:15px 16px; margin:18px 0; } .ad-promise h4{ margin:0 0 8px; font-size:14px; color:var(--primary-deep); display:flex; align-items:center; gap:7px; } .ad-promise ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; } .ad-promise li{ font-size:13.5px; color:#3c3449; display:flex; gap:9px; line-height:1.45; align-items:flex-start; } .ad-tcard{ background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:15px; margin:18px 0; } .ad-tcard .top{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#241a33; flex-wrap:wrap; } .ad-tcard .vf{ font-size:10px; font-weight:700; color:var(--success); background:#dcfce7; padding:2px 7px; border-radius:6px; } .ad-tcard .stars{ color:#f59e0b; margin-left:auto; letter-spacing:1px; font-size:13px; } .ad-tcard p{ font-size:14px; line-height:1.55; color:#463c56; margin:8px 0 4px; } .ad-tvary{ font-size:10.5px; color:var(--muted); margin-top:4px; } .ad-founder{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:12px 14px; margin:16px 0; } .ad-founder .fav{ width:52px; height:52px; border-radius:50%; background:linear-gradient(150deg,#9b51e0,#5b2d87); color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ad-founder b{ font-size:14px; color:#16101f; } .ad-founder span{ display:block; font-size:12px; color:var(--muted); } .ad-salut{ font-family:var(--serif); font-size:19px; color:#16101f; margin:4px 0 14px; } .ad-sign{ margin-top:18px; } .ad-sign .name{ font-family:var(--serif); font-style:italic; font-size:28px; color:var(--primary-dk); line-height:1; } .ad-sign .role{ font-size:12.5px; color:var(--muted); margin-top:4px; } .ad-incta{ display:flex; align-items:center; gap:10px; background:var(--tint2); border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:11px; padding:14px 15px; margin:20px 0; font-size:14px; font-weight:700; color:var(--primary-deep); cursor:pointer; text-align:left; width:100%; } .ad-incta:hover{ background:var(--tint); } /* ---- OFFER block ---- */ .ad-offer{ background:var(--surface); border-top:10px solid var(--tint); margin-top:8px; padding:26px 18px 30px; scroll-margin-top:12px; } .ad-offer .oh{ text-align:center; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); } .ad-offer .on{ font-family:var(--serif); text-align:center; font-size:clamp(21px,5.4vw,27px); font-weight:800; letter-spacing:-.02em; margin:5px 0 6px; color:var(--text); line-height:1.2; text-wrap:balance; } .ad-offer .osub{ text-align:center; font-size:13px; color:#5a5069; margin:0 auto 16px; max-width:38ch; } .ad-ocard{ max-width:460px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); } .ad-photo{ border-radius:12px; overflow:hidden; } .ad-photo img{ border-radius:12px; width:100%; } .ad-rating{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; margin-top:13px; color:var(--text); } .ad-rating .stars{ color:#f59e0b; letter-spacing:1px; } .ad-rating .cnt{ color:var(--muted); font-weight:500; } .ad-oline{ font-size:13px; color:#5a5069; margin-top:7px; line-height:1.5; } .ad-price{ display:flex; align-items:baseline; gap:11px; margin-top:14px; flex-wrap:wrap; } .ad-now{ font-size:34px; font-weight:800; color:var(--text); letter-spacing:-.03em; font-variant-numeric:tabular-nums; } .ad-old{ font-size:18px; color:var(--strike); text-decoration:line-through; } .ad-badge{ font-size:12px; font-weight:800; color:#fff; background:var(--urgency); padding:4px 9px; border-radius:7px; } .ad-omni{ font-size:11px; color:var(--muted); margin-top:5px; line-height:1.4; } .ad-prodsel{ display:grid; gap:8px; margin-top:14px; } .ad-prodcard{ border:2px solid var(--line); border-radius:12px; padding:11px 12px; display:flex; gap:10px; align-items:center; cursor:pointer; } .ad-prodcard.selected{ border-color:var(--primary); background:var(--tint2); } .ad-prodcard .pt{ font-weight:700; font-size:13px; } .ad-prodcard .pd{ font-size:11px; color:var(--muted); } .ad-prodcard .pp{ margin-left:auto; font-weight:800; font-size:13px; } .ad-bundles-sub{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:14px; line-height:1.45; } .ad-bundles{ display:grid; gap:10px; margin-top:10px; } .ad-bundle{ border:2px solid var(--line); border-radius:13px; padding:13px 14px; display:flex; align-items:center; gap:12px; position:relative; background:#fff; cursor:pointer; } .ad-bundle.active{ border-color:var(--primary); background:var(--tint2); } .ad-bundle .radio{ width:20px; height:20px; border-radius:50%; border:2px solid #cbc0da; flex-shrink:0; } .ad-bundle .bthumb{ width:52px; height:52px; object-fit:contain; flex-shrink:0; } .ad-bundle.active .radio{ border-color:var(--primary); background:radial-gradient(circle at center,var(--primary) 42%,#fff 46%); } .ad-bundle .qn{ font-weight:800; font-size:14.5px; } .ad-bundle .per{ font-size:11.5px; color:var(--muted); } .ad-bundle .save{ font-size:11px; color:var(--success); font-weight:700; } .ad-bundle .bp{ margin-left:auto; font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; white-space:nowrap; } .ad-bundle .pop{ position:absolute; top:-10px; right:14px; font-size:9.5px; font-weight:800; color:#fff; background:var(--primary-deep); padding:3px 8px; border-radius:6px; letter-spacing:.04em; } .ad-btn{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:none; cursor:pointer; } .ad-cta-btn{ display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; margin-top:15px; background:var(--cta); color:#fff; border:none; border-radius:999px; padding:17px; cursor:pointer; box-shadow:var(--shadow-cta); } .ad-cta-btn:hover{ background:var(--cta-hi); } .ad-cta-btn b{ font-size:16.5px; font-weight:800; } .ad-cta-btn small{ font-size:11.5px; opacity:.93; font-weight:600; } .ad-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; justify-content:center; } .ad-chip{ font-size:11.5px; font-weight:600; color:var(--primary-deep); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 11px; display:flex; align-items:center; gap:6px; } .ad-oos{ display:flex; gap:12px; align-items:center; background:#fef2f2; border:1px solid #fecaca; border-radius:12px; padding:14px; color:#7f1d1d; margin:14px auto; max-width:460px; } .ad-oos strong{ display:block; } /* inline on-page checkout (inside offer card) */ .ad-inline-ck{ margin-top:18px; padding-top:18px; border-top:2px dashed var(--line); display:grid; gap:12px; scroll-margin-top:12px; } .ad-inline-ck-hd{ text-align:center; font-size:14px; font-weight:800; color:#16101f; line-height:1.4; margin:0; } .ad-inline-ck form{ display:grid; gap:10px; } .ad-inline-ck .ad-svcs-title{ margin:6px 0 0; } #adExtraFields:empty{ display:none; } .ad-inline-ck .ad-submit{ margin-top:2px; } /* ---- sticky CTA ---- */ .ad-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); box-shadow:0 -6px 22px -12px rgba(0,0,0,.3); transform:translateY(110%); transition:transform .28s ease; } .ad-sticky.show{ transform:none; } .ad-sticky .in{ max-width:var(--col); margin:0 auto; padding:9px 14px; display:flex; align-items:center; gap:12px; } .ad-sticky .sp{ font-size:13px; font-weight:800; line-height:1.15; color:var(--text); flex-shrink:0; font-variant-numeric:tabular-nums; } .ad-sticky .sp small{ display:block; font-size:9.5px; color:var(--muted); font-weight:600; } .ad-sticky button{ flex:1; background:var(--cta); color:#fff; border:none; border-radius:999px; padding:14px; font-weight:800; font-size:14px; cursor:pointer; box-shadow:var(--shadow-cta); } .ad-sticky button:hover{ background:var(--cta-hi); } /* ---- form fields ---- */ .ad-fld{ position:relative; display:flex; align-items:center; gap:9px; border:1px solid var(--field); border-radius:11px; padding:0 12px; background:#fff; transition:border-color .15s, box-shadow .15s; } .ad-fld:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(155,81,224,.14); } .ad-fld .ic{ color:#a89ac0; flex-shrink:0; display:flex; } .ad-fld input, .ad-fld select, .ad-fld textarea{ flex:1; border:none; outline:none; background:none; font-size:16px; color:var(--text); padding:14px 0; width:100%; font-family:inherit; } .ad-fld select{ appearance:none; cursor:pointer; } .ad-fld .chev{ color:#a89ac0; margin-left:auto; flex-shrink:0; } .ad-fld-error{ display:none; font-size:11.5px; color:var(--danger); font-weight:600; margin:4px 2px 0; } .ad-fld.invalid{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(180,35,24,.10); } .ad-fld.invalid + .ad-fld-error{ display:block; } .ad-fldwrap{ display:grid; gap:2px; } .select2-container .select2-selection--single{ height:auto !important; border:none !important; background:none !important; } .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:1.3 !important; padding:14px 0 !important; color:var(--text) !important; } .select2-container--default .select2-selection--single .select2-selection__arrow{ display:none !important; } .ad-toggle{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:11px; padding:11px 12px; background:#fff; cursor:pointer; } .ad-toggle .sw{ width:36px; height:21px; border-radius:999px; background:#e6ddf2; position:relative; flex-shrink:0; transition:background .18s; } .ad-toggle.on .sw, .ad-toggle.added .sw{ background:var(--success); } .ad-toggle .sw::after{ content:""; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition:left .18s; box-shadow:0 1px 2px rgba(0,0,0,.2); } .ad-toggle.on .sw::after, .ad-toggle.added .sw::after{ left:17px; } .ad-toggle .tt{ font-size:12.5px; font-weight:700; color:#16101f; } .ad-toggle .td{ font-size:10.5px; color:var(--muted); } .ad-toggle .tp{ margin-left:auto; font-size:13px; font-weight:800; } /* extra-service cards (checkout upsell) */ .ad-svcs-title{ text-align:center; font-size:14px; font-weight:800; color:var(--primary-deep); margin:8px 0 2px; } .ad-svcs-title i{ font-size:12px; color:var(--primary); } .ad-svc-card{ display:flex; gap:12px; border:1.5px solid var(--line); border-radius:14px; padding:13px 14px; background:#fff; cursor:pointer; box-shadow:var(--shadow); align-items:flex-start; transition:border-color .15s, background .15s; } .ad-svc-card.added{ border-color:var(--success); background:#f2fbf7; } .ad-svc-card .svc-ico{ flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--tint); color:var(--primary-dk); display:flex; align-items:center; justify-content:center; font-size:18px; } .ad-svc-card.added .svc-ico{ background:#dcfce7; color:var(--success); } .ad-svc-card .svc-bd{ flex:1; min-width:0; } .ad-svc-card .svc-tt{ font-size:13px; font-weight:800; color:var(--primary-deep); letter-spacing:.03em; } .ad-svc-card .svc-td{ font-size:12px; color:#4a4157; line-height:1.5; margin-top:3px; } .ad-svc-card .svc-row{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; gap:10px; } .ad-svc-card .svc-price{ font-size:15px; font-weight:800; color:var(--urgency); } .ad-svc-card .svc-btn{ border:none; border-radius:9px; background:#22a06b; color:#fff; font-weight:700; font-size:12.5px; padding:8px 18px; cursor:pointer; } .ad-svc-card .svc-btn:hover{ background:#12805C; } .ad-svc-card.added .svc-btn{ background:var(--success); } .ad-summary{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .ad-summary-hd{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; cursor:pointer; font-weight:700; font-size:13px; color:var(--primary-dk); } .ad-summary-hd .arrow{ transition:transform .2s; } .ad-summary-details{ max-height:0; overflow:hidden; transition:max-height .28s ease; } .ad-summary-details.open{ max-height:600px; } .ad-summary-row{ display:flex; justify-content:space-between; gap:10px; padding:8px 14px; font-size:12.5px; color:#463c56; border-top:1px solid var(--line); } .ad-summary-total{ display:flex; justify-content:space-between; padding:13px 14px; background:var(--primary-deep); color:#fff; font-weight:800; font-size:15px; } .ad-ebook-remove,.ad-x-inline{ border:none; background:#e6ddf2; color:#5a5069; border-radius:5px; width:18px; height:18px; font-size:11px; cursor:pointer; line-height:1; } /* ---- checkout modal ---- */ .ad-modal-backdrop{ position:fixed; inset:0; z-index:100; background:rgba(26,18,38,.55); opacity:0; visibility:hidden; transition:opacity .22s; } .ad-modal-backdrop.open{ opacity:1; visibility:visible; } .ad-modal{ position:fixed; left:0; right:0; bottom:0; z-index:101; max-width:var(--col); margin:0 auto; background:#fff; border-radius:20px 20px 0 0; max-height:94vh; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.7,.2,1); } .ad-modal.open{ transform:none; } .ad-modal-hd{ padding:14px 16px 12px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .ad-modal-hd .t{ font-size:16px; font-weight:800; } .ad-modal-hd .s{ font-size:11px; color:var(--success); font-weight:700; margin-top:3px; display:flex; align-items:center; gap:5px; } .ad-modal-x{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:#fff; color:#6b6478; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .ad-modal-body{ padding:14px 16px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:10px; } .ad-reassure{ font-size:11.5px; background:var(--tint2); color:var(--primary-deep); border:1px solid var(--line); border-radius:10px; padding:9px 11px; display:flex; gap:8px; align-items:flex-start; } .ad-gdpr{ font-size:10.5px; color:var(--muted); line-height:1.45; display:flex; gap:7px; align-items:flex-start; } .ad-modal-foot{ padding:12px 16px 16px; border-top:1px solid var(--line); display:grid; gap:9px; background:#fff; } .ad-submit{ background:var(--cta); color:#fff; border:none; border-radius:999px; padding:16px; font-weight:800; font-size:15px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; box-shadow:var(--shadow-cta); } .ad-submit:hover{ background:var(--cta-hi); } .ad-submit:disabled{ opacity:.7; cursor:default; } .ad-submit small{ font-size:10.5px; font-weight:600; opacity:.93; } .ad-trustrow{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; } .ad-badge2{ font-size:9.5px; font-weight:700; color:var(--primary-dk); border:1px solid var(--line); border-radius:6px; padding:3px 7px; } .ad-modal-legal{ font-size:9px; color:var(--muted); text-align:center; line-height:1.5; } .ad-spinner{ display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:ad-spin .7s linear infinite; } @keyframes ad-spin{ to{ transform:rotate(360deg); } } .ad-alert-error{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; border-radius:10px; padding:10px 12px; font-size:12.5px; } body.ad-noscroll{ overflow:hidden; } /* ---- FAQ ---- */ .ad-faq{ } .ad-faq h2{ font-family:var(--serif); font-size:clamp(21px,5.4vw,26px); font-weight:800; color:#16101f; margin:8px 0 10px; text-align:center; } .ad-qa{ border-bottom:1px solid var(--line); } .ad-q{ width:100%; text-align:left; background:none; border:none; padding:15px 0; font-size:15px; font-weight:700; color:#16101f; display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; } .ad-q .sgn{ color:var(--primary); font-size:20px; flex-shrink:0; line-height:1; } .ad-a{ font-size:14px; color:#463c56; line-height:1.6; max-height:0; overflow:hidden; transition:max-height .28s ease; } .ad-qa.open .ad-a{ max-height:400px; } .ad-a .inner{ padding:0 0 15px; } /* ---- footer ---- */ .ad-helpbar{ background:var(--primary-deep); color:#e9ddfb; text-align:center; font-size:12.5px; padding:12px 16px; } .ad-helpbar a{ color:#fff; font-weight:700; text-decoration:none; } .ad-footer{ background:#1c1128; color:#cfc4dd; padding:26px 18px; } .ad-footer .flogo{ font-family:var(--serif); font-weight:800; font-size:17px; letter-spacing:.12em; text-transform:uppercase; color:#fff; text-decoration:none; } .ad-footer .flogo span{ color:var(--primary); } .ad-footer nav{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:14px 0; } .ad-footer nav a{ color:#ab9cc2; font-size:12.5px; text-decoration:none; } .ad-footer nav a:hover{ color:#fff; } .ad-footer .badges{ display:flex; gap:10px; margin:14px 0; flex-wrap:wrap; align-items:center; } .ad-footer .badges img{ height:34px; width:auto; } .ad-footer .bdg{ font-size:10px; font-weight:700; color:#cfc4dd; border:1px solid #3b2a52; border-radius:7px; padding:6px 9px; } .ad-footer .idn{ font-size:11px; color:#8d7ea6; line-height:1.6; border-top:1px solid #32224a; padding-top:14px; } /* ---- separate checkout page ---- */ .ck-section{ padding:20px 0 40px; } .ck-wrap{ max-width:520px; margin:0 auto; } .ck-title{ font-family:var(--serif); font-size:24px; font-weight:800; text-align:center; margin:6px 0 16px; color:#16101f; } .ck-form{ padding:0 18px; display:grid; gap:10px; } .ck-back{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; color:var(--primary-dk); font-size:13px; font-weight:600; text-decoration:none; } .ck-errors{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; border-radius:10px; padding:10px 12px; margin:0 18px 12px; font-size:12.5px; } .ck-sum-remove{ border:none; background:#e6ddf2; color:#5a5069; border-radius:5px; width:18px; height:18px; cursor:pointer; } .ck-sum-remove-form{ display:inline; } /* ---- thank-you page ---- */ .ty-wrap{ max-width:640px; margin:0 auto; text-align:center; padding:40px 18px 60px; } .ty-check{ width:80px; height:80px; background:var(--success); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; box-shadow:0 8px 25px rgba(18,128,92,.3); color:#fff; } .ty-h1{ font-family:var(--serif); font-size:27px; font-weight:800; color:#16101f; margin:0 0 12px; } .ty-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; text-align:left; margin:20px 0; box-shadow:var(--shadow); } .ty-card-hd{ background:var(--surface); padding:16px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line); } .ty-lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; font-weight:700; letter-spacing:.04em; } .ty-num{ font-size:18px; font-weight:800; color:var(--primary-dk); } .ty-tot{ font-size:22px; font-weight:800; color:#16101f; } .ty-item{ display:flex; gap:12px; align-items:center; padding:12px 16px; border-top:1px solid var(--surface); } .ty-item img,.ty-item .ph{ width:52px; height:52px; border-radius:10px; object-fit:cover; background:var(--surface); flex-shrink:0; } .ty-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px; background:var(--surface); border-top:1px solid var(--line); font-size:13px; } .ty-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; } .ty-btn-primary{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; background:var(--cta); color:#fff; border-radius:999px; text-decoration:none; font-weight:700; box-shadow:var(--shadow-cta); } .ty-btn-sec{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; background:#fff; color:#463c56; border:2px solid var(--line); border-radius:999px; text-decoration:none; font-weight:600; } /* ---- content / legal pages ---- */ .ad-page-sec{ padding:8px 0 40px; } .ad-breadcrumb{ font-size:12px; color:var(--muted); padding:14px 0 4px; } .ad-breadcrumb a{ color:var(--muted); text-decoration:none; } .ad-page-title{ font-family:var(--serif); font-size:clamp(24px,6vw,32px); font-weight:800; color:#16101f; margin:8px 0 16px; letter-spacing:-.02em; } .ad-page-content{ font-size:16px; line-height:1.75; color:#241a33; } .ad-page-content h2{ font-size:20px; margin:24px 0 10px; color:#16101f; } .ad-page-content h3{ font-size:17px; margin:18px 0 8px; color:#16101f; } .ad-page-content p{ margin:0 0 14px; } .ad-page-content ul,.ad-page-content ol{ margin:0 0 14px; padding-left:22px; } .ad-page-content a{ color:var(--primary-dk); } .ad-contact-grid{ display:grid; gap:16px; margin:16px 0; } @media(min-width:560px){ .ad-contact-grid{ grid-template-columns:1fr 1fr; } } .ad-contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; } .ad-contact-card h3{ font-size:16px; font-weight:800; margin:0 0 10px; color:#16101f; } .ad-form-msg{ border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:10px; } .ad-form-msg.ok{ background:#dcfce7; color:#14532d; } .ad-form-msg.err{ background:#fef2f2; color:#7f1d1d; } /* ---- utilities ---- */ .ad-center{ text-align:center; } .ad-hidden{ display:none !important; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .ad-sticky,.ad-modal,.ad-modal-backdrop,.ad-a,.zn-qa .a,.ad-summary-details,.ad-toggle .sw::after{ transition:none !important; } }