/* Start custom CSS *//* Advertisers page (48). Page-only layout and states. JS states come from scripts/kopou-sitewide.js (footer HTML widget); the coded graphics carry their own CSS (script block 11). */ /* 1. Hero entrance: the H1 fades up as one block (150ms), then the description and button (300ms), then the photo fades in (450ms, opacity only). CSS only, so all text is in the HTML without JS and never flashes; opacity and transform only, so nothing shifts. */ @keyframes kopou-hero-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes kopou-hero-fade { from { opacity: 0; } to { opacity: 1; } } body .elementor #hero h1 { animation: kopou-hero-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both; } body .elementor #hero .adv-hero-aside { animation: kopou-hero-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both; } body .elementor #hero .photo-duotone { animation: kopou-hero-fade 700ms cubic-bezier(0.16, 1, 0.3, 1) 450ms both; } /* 2. Right fit, desktop with JS: sticky panel on the left, one-line titles on the right. Every item is display: contents, so all panels share one grid area and cross-fade. Without JS (or below 1025px) the list stays stacked with everything inline. */ @media (min-width: 1025px) { html.kopou-js body .elementor .rf-list { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: start; border-top: 0; } html.kopou-js body .elementor .rf-item { display: contents; } html.kopou-js body .elementor .rf-head { grid-column: 2; align-items: center; padding-block: 22px; padding-inline-end: 40px; border-bottom: 1px solid var(--line); cursor: pointer; } html.kopou-js body .elementor .rf-head .rf-num { padding-top: 0; } html.kopou-js body .elementor .rf-item:first-child .rf-head { border-top: 1px solid var(--line); } html.kopou-js body .elementor .rf-panel { grid-column: 1; grid-row: 1 / span 6; align-self: start; position: sticky; top: calc(var(--header-h, 72px) + var(--space-4)); opacity: 0; pointer-events: none; transition: opacity 280ms ease; } html.kopou-js body .elementor .rf-item.is-active .rf-panel { opacity: 1; pointer-events: auto; z-index: 1; } html.kopou-js body .elementor .rf-title { color: #6E767C; } html.kopou-js body .elementor .rf-num { color: var(--text-muted-light); } html.kopou-js body .elementor .rf-item.is-active .rf-title { color: var(--fg); } html.kopou-js body .elementor .rf-item.is-active .rf-num { color: var(--royal-purple); } html.kopou-js body .elementor .rf-head::after { content: ''; position: absolute; top: 50%; right: 8px; width: 14px; height: 14px; background-color: var(--royal-purple); transform: translateY(-50%) rotate(45deg) scale(0); transition: transform 280ms ease; } html.kopou-js body .elementor .rf-item.is-active .rf-head::after { transform: translateY(-50%) rotate(45deg) scale(1); } } /* Wide tablets: graphic beside the text (graphic at least 400px wide, so its labels stay 13px+). */ @media (min-width: 900px) and (max-width: 1024px) { body .elementor .rf-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-2); align-items: start; } body .elementor .rf-panel > * { grid-column: 2; } body .elementor .rf-panel > .rf-graphic { grid-column: 1; grid-row: 1 / span 4; max-width: none; } } /* The coded graphics are drawn by the script; without it, leave no empty cards. */ html:not(.kopou-js) body .elementor .rf-graphic { display: none; } /* 3. Campaign simulator. Script adds .is-enhanced (+ .is-auto while auto-playing, .is-paused while paused: pointer over, focus inside, off screen; --sim-dur sets the step time, 5s or 8s after a click). The line on the active step shows the time left: it starts full and drains. */ body .elementor .sim-step::before { content: ''; position: absolute; top: 0; bottom: 0; left: -2px; width: 2px; background-color: var(--accent); transform: scaleY(0); transform-origin: top; } html.kopou-js body .elementor .sim.is-enhanced .sim-step.is-active::before { transform: scaleY(1); } html.kopou-js body .elementor .sim.is-enhanced.is-auto .sim-step.is-active::before { animation: kopou-sim-progress var(--sim-dur, 5s) linear both; } html.kopou-js body .elementor .sim.is-paused .sim-step::before { animation-play-state: paused; } @keyframes kopou-sim-progress { from { transform: scaleY(1); } to { transform: scaleY(0); } } html.kopou-js body .elementor .sim.is-enhanced .sim-step:not(.is-active) .sim-body { display: none; } html.kopou-js body .elementor .sim.is-enhanced .sim-step.is-active .sim-body { animation: kopou-sim-body 360ms ease both; } @keyframes kopou-sim-body { from { opacity: 0; transform: translateY(6px); } } html.kopou-js body .elementor .sim.is-enhanced .sim-step:not(.is-active) .sim-title { color: var(--fg-muted); } html.kopou-js body .elementor .sim.is-enhanced .sim-step:not(.is-active):hover .sim-title { color: var(--fg); } html.kopou-js body .elementor .sim.is-enhanced .sim-step.is-active .sim-num { color: var(--accent); } body .elementor .sim-btn { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; } body .elementor .sim-btn::after { content: ''; position: absolute; inset: -6px -4px; } body .elementor .sim-btn:focus-visible { outline: none; } body .elementor .sim-btn:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; } html:not(.kopou-js) body .elementor .sim-graphic { background: var(--surface) url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20480%20300%22%20class%3D%22kg%20kg-sim%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cstyle%3E.kg-sim%20.ks-p%7Btransform-box%3Afill-box%3Btransform-origin%3Acenter%7D.kg-sim%20text%7Bfont-size%3A18px%3Bfill%3A%23F2F3F4%7D.kg-sim%20.ks-p%20path%3Afirst-child%7Bfill%3A%231F282E%3Bstroke%3A%23A9B2B9%3Bstroke-width%3A1.5%7D.kg-sim%20.ks-p%20path%2Bpath%7Bfill%3A%23A9B2B9%7D.kg-sim%20.ks-p%3Anot%28.s%29%7Bopacity%3A.12%7D.kg-sim%20.ks-p.s%20path%3Afirst-child%7Bfill%3A%23EBEBED%3Bstroke%3A%23EBEBED%7D.kg-sim%20.ks-p.s%20path%2Bpath%7Bfill%3A%230F1417%7D.kg-sim%20.ks-ln%7Bfill%3Anone%3Bstroke%3A%23F2F3F4%3Bstroke-opacity%3A.16%3Bstroke-width%3A1.5%7D.kg-sim%20.ks-pl%2C.kg-sim%20.ks-npl%7Bfill%3Anone%3Bstroke%3A%236045F4%3Bstroke-width%3A3%3Bstroke-linecap%3Around%3Bstroke-dasharray%3A5%20100%3Bstroke-dashoffset%3A5%3Bopacity%3A0%7D.kg-sim%20.ks-nl%7Bfill%3Anone%3Bstroke%3A%23F2F3F4%3Bstroke-opacity%3A.2%3Bstroke-width%3A1.5%3Bstroke-dasharray%3A3%205%7D.kg-sim%20.ks-n%7Bfill%3A%236045F4%7D.kg-sim%20.ks-p.s%3Anot%28.w%29%7Bopacity%3A.4%7D.kg-sim%20.ks-p.w%7Btransform%3Ascale%281.6%29%7D.kg-sim%20.ks-p.w%20path%3Afirst-child%7Bfill%3A%2353E6D4%3Bstroke%3A%2353E6D4%7D.kg-sim%20.ks-ln.w%7Bstroke%3A%2353E6D4%3Bstroke-opacity%3A.45%3Bstroke-width%3A4%7D.kg-sim%20.ks-pl.w%7Bstroke%3A%2353E6D4%3Bstroke-width%3A5%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22ks-ln%22%20d%3D%22M240%20136L362.3%20156.7%22%2F%3E%3Cpath%20class%3D%22ks-ln%20w%22%20d%3D%22M240%20136L241.7%20201.1%22%2F%3E%3Cpath%20class%3D%22ks-ln%22%20d%3D%22M240%20136L116.9%20158.9%22%2F%3E%3Cpath%20class%3D%22ks-ln%20w%22%20d%3D%22M240%20136L158.2%2076.3%22%2F%3E%3Cpath%20class%3D%22ks-ln%22%20d%3D%22M240%20136L311.5%2080.5%22%2F%3E%3Cpath%20class%3D%22ks-ln%20w%22%20d%3D%22M240%20136L423.9%20194.2%22%2F%3E%3Cpath%20class%3D%22ks-ln%22%20d%3D%22M240%20136L86.2%20211%22%2F%3E%3Cpath%20class%3D%22ks-ln%20w%22%20d%3D%22M240%20136L129.2%2047.1%22%2F%3E%3Cpath%20class%3D%22ks-nl%22%20d%3D%22M240%20136L30%2034%22%2F%3E%3Cpath%20class%3D%22ks-nl%22%20d%3D%22M240%20136L454%20226%22%2F%3E%3Cpath%20class%3D%22ks-nl%22%20d%3D%22M240%20136L420%2018%22%2F%3E%3Cg%20class%3D%22ks-p%20s%22%3E%3Cpath%20d%3D%22M362.3%20149.7l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M362.3%20154.1l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M320.7%20188l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M320.7%20192.4l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%20s%20w%22%3E%3Cpath%20d%3D%22M241.7%20194.1l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M241.7%20198.5l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M163.3%20188.5l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M163.3%20192.9l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%20s%22%3E%3Cpath%20d%3D%22M116.9%20151.9l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M116.9%20156.3l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M125.2%20109.6l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M125.2%20114l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%20s%20w%22%3E%3Cpath%20d%3D%22M158.2%2069.3l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M158.2%2073.7l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M238.2%2060.9l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M238.2%2065.3l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%20s%22%3E%3Cpath%20d%3D%22M311.5%2073.5l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M311.5%2077.9l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M369.3%20104.9l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M369.3%20109.3l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M444.5%20141.2l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M444.5%20145.6l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%20s%20w%22%3E%3Cpath%20d%3D%22M423.9%20187.2l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M423.9%20191.6l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M346.6%20214.5l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M346.6%20218.9l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M260.3%20224.8l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M260.3%20229.2l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M168.4%20227.9l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M168.4%20232.3l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%20s%22%3E%3Cpath%20d%3D%22M86.2%20204l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M86.2%20208.4l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M53.2%20160.6l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M53.2%20165l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M43.1%20117.2l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M43.1%20121.6l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M57.5%2071.2l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M57.5%2075.6l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%20s%20w%22%3E%3Cpath%20d%3D%22M129.2%2040.1l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M129.2%2044.5l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M219.8%2033.4l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M219.8%2037.8l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M308.9%2033.8l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M308.9%2038.2l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M395.6%2053.1l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M395.6%2057.5l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22ks-p%22%3E%3Cpath%20d%3D%22M433.7%2096.3l7%207%20-7%207%20-7%20-7z%22%2F%3E%3Cpath%20d%3D%22M433.7%20100.7l2.6%202.6%20-2.6%202.6%20-2.6%20-2.6z%22%2F%3E%3C%2Fg%3E%3Cpath%20class%3D%22ks-n%22%20d%3D%22M30%2029l5%205%20-5%205%20-5%20-5z%22%2F%3E%3Cpath%20class%3D%22ks-n%22%20d%3D%22M454%20221l5%205%20-5%205%20-5%20-5z%22%2F%3E%3Cpath%20class%3D%22ks-n%22%20d%3D%22M420%2013l5%205%20-5%205%20-5%20-5z%22%2F%3E%3Crect%20x%3D%22219%22%20y%3D%22115%22%20width%3D%2242%22%20height%3D%2242%22%20rx%3D%225%22%20fill%3D%22%236045F4%22%2F%3E%3Cpath%20d%3D%22M240%20125l11%2011%20-11%2011%20-11%20-11z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E) center / contain no-repeat; } /* 4. FAQ: native details/summary; hide the default marker, rotate the chevron (class faq-icon) on open. */ body .elementor .faq-q::-webkit-details-marker { display: none; } body .elementor .faq-q::marker { content: ''; } body .elementor .faq-item[open] .faq-icon { transform: rotate(180deg); } body .elementor .faq-item[open] { border-color: var(--royal-purple); } /* 5. In-page anchor targets get tabindex -1 from the script; no focus ring on the whole section. */ body .elementor section[tabindex='-1']:focus { outline: none; } /* 6. Reduced motion: static hero, instant swaps, no simulator timer. (The header CTA label rules were removed in round 32A: the header says Get in Touch on every page.) */ @media (prefers-reduced-motion: reduce) { body .elementor #hero h1, body .elementor #hero .adv-hero-aside, body .elementor #hero .photo-duotone { animation: none; } html.kopou-js body .elementor .rf-panel, html.kopou-js body .elementor .rf-title, html.kopou-js body .elementor .rf-head::after, body .elementor .faq-icon { transition: none; } html.kopou-js body .elementor .sim.is-enhanced .sim-step.is-active .sim-body, html.kopou-js body .elementor .sim.is-enhanced .sim-step.is-active::before { animation: none; } body .elementor .sim-caption { transition: none; } } /* Advertiser page: 03 How we run campaigns (kopou-batch-1 timeline, same component as Home 03). Elementor's atomic default (.elementor .e-div-block-base: display block, padding 10px, min-width 30px; weight 0-2-0) beats the batch CSS's single-class rules, which left the list at the left edge. Same compat rules as Home's page CSS, at 0-2-1 (this page's CSS is printed before Elementor's base stylesheet). The checklist and FAQ heads are handled inside kopou-adv.css. */ body .elementor .kp-process { display: flex; flex-direction: column; align-items: center; padding: 100px 24px 140px; } body .elementor .kp-process .kp-sec-head { display: flex; flex-direction: column; align-items: center; } body .elementor .kp-process .e-div-block-base { min-width: 0; } body .elementor .kp-process .kp-sec-head, body .elementor .kp-process__list, body .elementor .kp-step__media, body .elementor .kp-step__text, body .elementor .kp-step__dot, body .elementor .kp-step__tile { padding: 0; } @media (max-width: 767px) { body .elementor .kp-process { padding: 48px 16px 88px; } } /* Advertiser page: 04 FAQ. The FAQ rows are