/** * CapSkip Landing Pages, self-contained, matched to capskip.com. * Loads only on pages that use the [capskip_landing] shortcode. * Brand colours: #30E87A (green) and #936DFF (purple). */ /* Trim the theme container's vertical padding on these pages, as the SDKs page does, the shortcode already provides its own rhythm. Loaded only here. */ .keydesign-container { padding-top: 0 !important; padding-bottom: 0 !important; } /* ---------------- Header, matched to the home page ---------------- */ /* The home page runs the navigation as a transparent overlay (the theme's --transparent-navigation-position is `fixed` there, `sticky` here), so its hero starts at y=0 and the menu floats on top of it. These pages were getting the sticky variant, which reserves its own 100px band and left a white strip above the hero. Matching the home page on both counts. */ /* Both variables, not just the position. The theme sizes the transparent header with `padding: var(--transparent-navigation-padding)` (inside a min-width 1024.02px query), and the home page sets that to 10px on . Setting only the position left our header 20px shorter than the home page's, so the logo and the menu items sat 10px high. */ body.capskip-landing-page { --transparent-navigation-position: fixed; --transparent-navigation-padding: 10px; } /* Elementor's own 10px inner padding was the white strip between the header and the hero. Only the container that holds our shortcode is touched. */ body.capskip-landing-page .entry-content .e-con-inner:has(.capskip-landing) { padding-top: 0; } /* Above 1024px the theme slides the header out of view on scroll-down with `.sticky-header.show-on-scroll.hide-menu .site-header-wrapper{ transform:translate3d(0,-25px,0);opacity:0;pointer-events:none}`. That rule lives inside an @media block, which is why a flat scan of the stylesheet does not turn it up. The product page and the demo gallery both already override it; these pages now do the same, so the menu stays put and stays clickable the whole way down. */ body.capskip-landing-page .site-header.sticky-header.show-on-scroll.hide-menu { pointer-events: auto; } body.capskip-landing-page .site-header.sticky-header.show-on-scroll.hide-menu .site-header-wrapper { opacity: 1; transform: none; pointer-events: auto; } /* No black bar at the top of the page. The home page runs the navigation transparent over its hero and only paints it black once you scroll (measured: rgba(255,255,255,0) at the top, rgb(0,0,0) with `.scrolled`). These pages were painting it black immediately, which put a hard band above the hero. Same selector the demo gallery already uses for this. */ body.capskip-landing-page .site-header.sticky-header:not(.scrolled):not(.mobile-menu-active) .elementor > .e-con.e-flex:last-child { background-color: transparent; border-color: transparent; box-shadow: none; } /* With the header floating over the panel rather than sitting above it, the copy has to clear it the way the home page hero does. */ /* 120px of header above 1024px (100px of chrome plus the 10px padding top and bottom), so this keeps roughly 28px of air under it. */ body.capskip-landing-page .cskl-hero__inner { padding-top: 148px; } @media (max-width: 1000px) { body.capskip-landing-page .cskl-hero__inner { padding-top: 112px; } } .capskip-landing { --csk-green: #30e87a; --csk-green-ink: #06301a; --csk-green-2: #12b464; --csk-green-text: #0a7a43; /* AA-contrast green for small text on light */ --csk-purple: #936dff; --csk-purple-2: #6f4be6; --csk-indigo: #4353ff; --csk-bg: #ffffff; --csk-surface: #f7f8fb; --csk-surface-2: #eef1f7; --csk-border: #e6e9f2; --csk-text: #12161f; --csk-muted: #5b6374; --csk-ink: #0f1222; /* Dark bands + code blocks (matched to api-docs). */ --csk-dark: #0a0d1a; --csk-code-bg: #0d1020; --csk-code-bar: #171a2e; --csk-code-line: #262a45; --csk-code-text: #e6e8f2; --csk-radius: 16px; --csk-radius-sm: 12px; --csk-shadow: 0 1px 2px rgba(18, 22, 40, .05), 0 18px 40px -22px rgba(18, 22, 40, .22); /* Follow the site's content width (the theme's container variable, same as the captcha-demos gallery) instead of a hardcoded narrower column. */ max-width: var(--container-max-width, 1240px); margin: 0 auto; padding: 0 20px 56px; color: var(--csk-text); /* Inherit the site's font so the pages match the theme instead of forcing a webfont we don't load. Headings still pick up the theme's heading font via the theme's own .entry-content h1/h2 rules. */ font-family: inherit; line-height: 1.6; -webkit-font-smoothing: antialiased; } .capskip-landing *, .capskip-landing *::before, .capskip-landing *::after { box-sizing: border-box; } .capskip-landing h1, .capskip-landing h2, .capskip-landing h3 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; text-transform: none; color: var(--csk-ink); } .capskip-landing p { margin: 0; } .capskip-landing a { text-decoration: none; } /* Theme-override guards. This stylesheet loads after the theme (priority 99), so these element resets beat a theme's `.entry-content ul/ol/table/svg` rules and stop the host theme re-adding list markers, indentation or table chrome inside our shortcode. Icons paint via CSS (which also beats the SVG presentation attributes) so a global `svg { fill }` rule can't turn them into solid blobs. */ .capskip-landing ul, .capskip-landing ol { margin: 0; padding: 0; list-style: none; } .capskip-landing li { margin: 0; } .capskip-landing table { border-collapse: collapse; margin: 0; } .capskip-landing svg { fill: none; stroke: currentColor; max-width: 100%; } .capskip-landing img { max-width: 100%; height: auto; } /* ---------------- Buttons ---------------- */ .cskl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; /* One button shape across the page. These were 999px pills everywhere except the hero, which uses the home page's 11px, so the same label had two shapes depending on where you met it. */ border-radius: 11px; font-weight: 600; font-size: 14.5px; line-height: 1; border: 1px solid transparent; cursor: pointer; /* No transform: the home page's buttons react with shadow and colour and do not move, and these lifted 1px on hover. Same reaction everywhere now. */ transition: box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease; } /* Button colours are wrapper-scoped so a theme `.entry-content a` rule (buttons are ) can't repaint the label with the theme link colour. */ .capskip-landing .cskl-btn--primary { background: var(--csk-green); color: var(--csk-green-ink); box-shadow: 0 10px 22px -12px rgba(48, 232, 122, .8); } /* The home page's solid button answers a hover by deepening its shadow rather than changing shade, so these do the same. */ .capskip-landing .cskl-btn--primary:hover { background: var(--csk-green); color: var(--csk-green-ink); box-shadow: 0 5px 16px -5px rgba(48, 232, 122, .6); } .capskip-landing .cskl-btn--purple { background: var(--csk-purple); color: #fff; box-shadow: 0 10px 22px -12px rgba(147, 109, 255, .8); } .capskip-landing .cskl-btn--purple:hover { background: var(--csk-purple); color: #fff; box-shadow: 0 5px 16px -5px rgba(147, 109, 255, .6); } .capskip-landing .cskl-btn--ghost { background: var(--csk-surface); color: var(--csk-text); border-color: var(--csk-border); } /* Green, not purple: the hero and the home page both answer a hover on an outline button by turning it brand green, and this was the odd one out. */ .capskip-landing .cskl-btn--ghost:hover { border-color: var(--csk-green-2); color: var(--csk-green-text); } .cskl-btn--block { width: 100%; margin-top: auto; } /* ---------------- Hero ---------------- */ /* The panel is painted the way the home page hero is painted, so a visitor arriving here from search lands on the same product rather than a lookalike: the same #06080e base, the same single green glow at 8% 0%, and the same drifting particle field (see capskip-landing-particles.js, which is tuned to the home page's own constants). The gradient carries the panel on its own, so it still looks right before the canvas runs, with JS off, and under prefers-reduced-motion. */ /* Full-bleed, like the home page hero. .capskip-landing is a 1240px column with its own side padding, so the panel is pulled out to the viewport edges and the copy is re-constrained inside it. 100vw is deliberately not used for the width: it counts the scrollbar and would add a horizontal scrollbar on Windows. Two negative margins of the same size do not. */ .cskl-hero { position: relative; margin-top: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; overflow: hidden; isolation: isolate; background: #06080e; } /* The glow sits above the canvas and below the copy, matching .cskh::after. */ .cskl-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(90% 62% at 8% 0%, rgba(56, 217, 150, .20), transparent 60%); } /* The particle canvas is injected as the hero's first child and carries its own inline z-index of 0. Nothing to do here but keep it muted to match the home page, where the field renders at .85. */ .cskl-hero .cap-particles { opacity: .85; } .cskl-hero__inner { position: relative; z-index: 2; display: grid; /* The floor keeps the plate and its cost bars readable between this layout's 960px breakpoint and a full-width container. */ grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); align-items: center; gap: 46px; /* The panel is full-bleed; the content inside it still lines up with every other section on the page. */ max-width: var(--container-max-width, 1240px); margin: 0 auto; padding: 64px 20px 58px; text-align: left; } /* Grid items default to min-width:auto, which lets a long unbroken string push the visual out of the panel. */ .cskl-hero__copy { min-width: 0; } /* ---------------- Eyebrow, with the CAPTCHA type's own mark ---------------- */ .cskl-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--csk-green); margin-bottom: 14px; } .cskl-mark { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 17px; height: 17px; } .cskl-mark svg { width: 100%; height: 100%; display: block; } /* A Font Awesome glyph is a single path with no fill of its own, so it takes the brand hex in --c. The generic marks (image, MCP, web scraping) have no brand behind them and fall through to the eyebrow's green. The five uploaded brand SVGs carry their own fills and are not touched: flattening them to one colour turns ALTCHA, CaptchaFox and Capy into plain discs, because they are built from white shapes cut out of a coloured circle. */ .cskl-mark--fa svg { fill: var(--c, currentColor); } .capskip-landing .cskl-hero__title { font-size: clamp(29px, 3.7vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -.028em; color: #fff; margin: 0; max-width: 24ch; text-align: left !important; } .capskip-landing .cskl-hero__lead { margin: 15px 0 0; font-size: 16px; line-height: 1.55; color: rgba(232, 238, 252, .76); max-width: 56ch; text-align: left !important; } /* ---------------- Hero buttons (the home page pair) ---------------- */ .cskl-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; } /* Shape, weight, spacing and the hover reaction now live on the shared .cskl-btn rule, which was brought in line with the home page's buttons, so the hero no longer needs to override any of it. */ .cskl-hero .cskl-btn svg { width: 16px; height: 16px; flex: 0 0 auto; } /* The wrapper sets `.capskip-landing svg{fill:none}` because nearly every icon here is a stroked outline. The Windows glyph is a solid shape and was being blanked by it, so it takes the button's own colour back. Keyed on the glyph rather than on one button variant, because the same glyph now appears on the hero's outline button and on the solid one in the closing call to action. */ .capskip-landing .cskl-winglyph { fill: currentColor; stroke: none; } /* Icons in buttons outside the hero. The shared icon helper emits 24x24, which is far too big next to a 15px label. */ .capskip-landing .cskl-btn svg { width: 16px; height: 16px; flex: 0 0 auto; } /* `a.` is load-bearing: the wrapper's `.capskip-landing a` colour rule is more specific than a bare class, and the label would otherwise vanish on the green. The footer shipped that bug once already. */ .capskip-landing a.cskl-btn--go { background: linear-gradient(100deg, #30e87a, #38d996); color: #04120b; box-shadow: 0 2px 10px -4px rgba(48, 232, 122, .45); } .capskip-landing a.cskl-btn--go:hover { background: linear-gradient(100deg, #30e87a, #38d996); color: #04120b; box-shadow: 0 5px 16px -5px rgba(48, 232, 122, .6); } .capskip-landing a.cskl-btn--win { background: transparent; border: 1px solid rgba(255, 255, 255, .18); color: #f2f4fb; } .capskip-landing a.cskl-btn--win:hover { border-color: #30e87a; color: #30e87a; background: transparent; } /* "Try the live demo" is the same outline button as Download, so it hovers the same way rather than turning purple like the in-page ghost buttons do. */ .capskip-landing .cskl-hero a.cskl-btn--ghost { background: transparent; color: #f2f4fb; border: 1px solid rgba(255, 255, 255, .18); } .capskip-landing .cskl-hero a.cskl-btn--ghost:hover { background: transparent; border-color: #30e87a; color: #30e87a; } .cskl-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 16px; font-size: 12.5px; color: #7c86a8; } .cskl-trust i { font-style: normal; color: rgba(255, 255, 255, .18); } .cskl-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 9px; margin: 22px 0 0; padding: 0; list-style: none; } .cskl-chip { font-size: 12.5px; font-weight: 600; color: rgba(240, 244, 255, .92); padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); } /* ---------------- The box: plate over the cost comparison ---------------- */ .cskl-hero__visual { position: relative; min-width: 0; } .cskl-box { border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 34px 76px -34px rgba(0, 0, 0, 1), 0 0 90px -50px rgba(48, 232, 122, .4); } .cskl-box__top { padding: 18px 20px 16px; display: grid; place-items: center; gap: 9px; border-bottom: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(80% 130% at 50% 0%, rgba(48, 232, 122, .1), transparent 62%); } .cskl-plate { display: grid; place-items: center; gap: 9px; max-width: 100%; } .cskl-plate__cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 11px; color: #8590ad; } .cskl-plate__sep { color: #3b4360; } /* ---------------- Cost comparison ---------------- */ .cskl-cost { padding: 16px 18px 18px; } .cskl-cost__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .cskl-cost__lb { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: #6f7b99; font-weight: 800; } .cskl-cost__val { font-family: var(--csk-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } /* A real range input sits invisible on top of the drawn track, so the control stays draggable, focusable and reachable by keyboard while looking like the rest of the panel. */ .cskl-track { position: relative; height: 22px; margin-top: 12px; } .cskl-track__rail { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .13); } .cskl-track__fill { position: absolute; left: 0; top: 9px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(48, 232, 122, .35), #30e87a); } .cskl-track__knob { position: absolute; top: 2px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #30e87a; border: 3px solid #06080e; box-shadow: 0 0 0 1px #30e87a, 0 0 14px rgba(48, 232, 122, .55); } .cskl-track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .cskl-track input:focus-visible ~ .cskl-track__knob, .cskl-track input:focus-visible + .cskl-track__knob { box-shadow: 0 0 0 3px #fff; } .cskl-track__sc { display: flex; justify-content: space-between; margin-top: 2px; font-size: 10px; color: #5f6885; font-family: var(--csk-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); } .cskl-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; } .cskl-bar__lb { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .cskl-bar__lb span { font-size: 11.5px; color: #8590ad; font-weight: 600; } .cskl-bar__lb b { font-family: var(--csk-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .cskl-bar--them .cskl-bar__lb b { color: #ff8585; } .cskl-bar--us .cskl-bar__lb b { color: #30e87a; } .cskl-bar__rail { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .cskl-bar__rail i { display: block; height: 100%; border-radius: 999px; } /* Only the metered bar moves. The flat one is the argument: it is drawn once and never touched again. */ .cskl-bar--them .cskl-bar__rail i { /* A block with no width fills its rail, which would show the metered bar full before the first paint: the opposite of the argument. The real width is written into the markup; this is the floor if it ever is not. */ width: 6%; background: linear-gradient(90deg, rgba(255, 133, 133, .5), #ff8585); transition: width .12s linear; } .cskl-bar__flat { width: 6%; background: linear-gradient(90deg, rgba(48, 232, 122, .5), #30e87a); } .cskl-keep { margin-top: 14px; display: flex; align-items: center; gap: 10px; border-radius: 11px; background: rgba(48, 232, 122, .1); border: 1px solid rgba(48, 232, 122, .3); padding: 11px 13px; } .cskl-keep__n { font-family: var(--csk-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 19px; font-weight: 700; color: #30e87a; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .cskl-keep__t { font-size: 12.5px; color: #8fe0b3; line-height: 1.35; } .cskl-keep__t b { display: block; color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 1px; } /* ---------------- "Also solves" strip ---------------- */ /* Eleven contextual internal links above the fold on every landing page, and the row doubles as proof that one licence covers every type rather than the one the page happens to be about. */ .cskl-typestrip { position: relative; z-index: 2; border-top: 1px solid rgba(255, 255, 255, .12); /* Rule spans the full-bleed panel; the links line up with the copy above. */ padding: 0 20px; } .cskl-typestrip__inner { max-width: var(--container-max-width, 1240px); margin: 0 auto; padding: 13px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cskl-typestrip b { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6f7b99; font-weight: 800; margin-right: 4px; } .capskip-landing .cskl-typestrip a { font-size: 11.5px; font-weight: 600; text-decoration: none; color: #93a0c0; padding: 4px 8px; border-radius: 6px; transition: color .14s ease, background .14s ease; } .capskip-landing .cskl-typestrip a:hover { color: #fff; background: rgba(255, 255, 255, .07); } .capskip-landing .cskl-typestrip a.is-on { color: #04120b; background: #30e87a; font-weight: 700; } /* The hero stacks earlier than the rest of the page. The box will not go below 360px without the cost bars becoming unreadable, so below roughly 1000px the copy column is the one that would get crushed, and two full-width rows read better than one narrow pair. */ @media (max-width: 1000px) { /* Stacked, but still reading down the left edge. The home page hero is left-aligned at this width, and centring these made the same product look like two different sites on a phone. */ .cskl-hero__inner { grid-template-columns: 1fr; gap: 30px; text-align: left; } .capskip-landing .cskl-hero__title { max-width: 18ch; margin: 0; text-align: left !important; } .capskip-landing .cskl-hero__lead { margin: 15px 0 0; text-align: left !important; } .cskl-hero__cta, .cskl-eyebrow, .cskl-trust, .capskip-landing .cskl-chips { justify-content: flex-start; } /* Buttons keep their own width rather than stretching, as on the home page, but wrap onto their own lines once there is no room. */ .cskl-hero__cta .cskl-btn { flex: 0 0 auto; } .cskl-hero__visual { max-width: 440px; margin: 0; width: 100%; } /* The strip is the flex row now, not its wrapper: the old rule here pointed at the wrapper and had stopped doing anything. */ .cskl-typestrip__inner { justify-content: flex-start; } .cskl-cost { text-align: left; } } /* ---------------- The home page pricing block, in a landing page ---------------- */ /* The component carries its own 20px gutter, which it does not need here because the wrapper already has one. Left alone it made the pricing table 40px narrower than everything else on the page. Three levels deep on purpose: the component's own rule is `.cskpr .cskpr-in` and it is printed inline in wp_head at priority 1000, so it lands AFTER this stylesheet. At equal specificity the later rule wins, and a two-level selector here silently lost. */ .capskip-landing .cskpr .cskpr-in { max-width: none; padding-left: 0; padding-right: 0; } /* Its own section padding plus the trial box's margin left a large hole between the two. The trial belongs with the prices, so it sits close. */ .capskip-landing .cskpr { padding-top: 0; padding-bottom: 18px; } /* Every other section heading on these pages is centred, so the pricing block's is too. It is left-aligned on the home page because that page centres nothing; here it was the only heading out of step. */ /* The block is capped at 880px, so centring the text inside it was not enough: the block itself still sat against the left edge of the 1080px column. */ .capskip-landing .cskpr-head { text-align: center; margin-left: auto; margin-right: auto; } .capskip-landing .cskpr-head .cskpr-lede { margin-left: auto; margin-right: auto; } .capskip-landing .cskpr-head .cskpr-eyebrow { justify-content: center; } /* ---------------- Hero visuals for the non-type pages ---------------- */ /* The box centres its contents with place-items, which sizes anything in it to its own content width. These mocks are given the full column instead, so they read as wide, shallow cards rather than tall narrow ones. */ .cskl-box__top > .cskl-hero__visual, .cskl-box__top > .cskl-mock { width: 100%; } .cskl-box__top .cskl-browser, .cskl-box__top .cskl-mock { max-width: 430px; margin: 0 auto; } /* Shorter body: the browser mock was 273x269, almost square. Tighter padding and tighter placeholder lines make it wide and shallow instead. */ .cskl-box__top .cskl-browser__body { padding: 16px 18px 52px; } .cskl-box__top .cskl-skel { height: 8px; margin-bottom: 8px; } .cskl-box__top .cskl-skel--1 { display: none; } .cskl-box__top .cskl-skel--3 { margin-bottom: 14px; } .cskl-box__top .cskl-rc { padding: 11px 14px; } .cskl-mock { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 22px 50px rgba(4, 6, 16, .45); font-family: var(--csk-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); text-align: left; } .cskl-mock__bar { display: flex; align-items: center; padding: 8px 12px; background: var(--csk-surface); border-bottom: 1px solid var(--csk-border); } .cskl-mock__lang { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--csk-muted); } /* The code sits directly on the card. A dark block inside the white card read as a box within a box, so the card is the only surface now. */ .cskl-mock__pre { margin: 0; padding: 12px 14px; background: none; overflow: hidden; } .capskip-landing .cskl-mock__pre code { display: block; font-size: 11.5px; line-height: 1.65; color: var(--csk-text); white-space: pre; background: none; padding: 0; } /* The result strip every mock ends on: one green tick, one value, one figure. */ .cskl-mock__out { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-top: 1px solid var(--csk-border); background: #f6fbf8; font-size: 11px; color: var(--csk-muted); } .cskl-mock__ok { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--csk-green-2); color: #fff; font-size: 9px; flex: none; } .capskip-landing .cskl-mock__out code { font-size: 11px; color: var(--csk-text); background: none; padding: 0; } .cskl-mock__meta { margin-left: auto; white-space: nowrap; } /* framework: a test run with the CAPTCHA step mid-flight */ .capskip-landing .cskl-run { list-style: none; margin: 0; padding: 10px 14px; } .capskip-landing .cskl-run li { display: flex; align-items: center; gap: 9px; font-size: 11.5px; line-height: 1.9; color: var(--csk-text); } .cskl-run li i { width: 13px; height: 13px; border-radius: 50%; flex: none; display: block; border: 1.5px solid var(--csk-border); } .cskl-run li.is-ok i { background: var(--csk-green-2); border-color: var(--csk-green-2); } .cskl-run li.is-run i { border-color: var(--csk-green-2); border-top-color: transparent; animation: cskl-spin .9s linear infinite; } .cskl-run li.is-idle { color: var(--csk-muted); } @keyframes cskl-spin { to { transform: rotate(360deg); } } /* usecase: a scrape working through its pages */ .cskl-scrape { padding: 12px 14px; } .cskl-scrape__row { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--csk-muted); } .cskl-scrape__bar { flex: 1; height: 6px; border-radius: 99px; background: var(--csk-surface-2); overflow: hidden; } .cskl-scrape__bar i { display: block; width: 24%; height: 100%; border-radius: 99px; background: var(--csk-green-2); } .cskl-scrape__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 11px; } .cskl-scrape__grid span { height: 8px; border-radius: 4px; background: var(--csk-surface-2); } .cskl-scrape__grid span:nth-child(4n) { background: #e9f7f0; } /* mcp: one tool call and what came back */ .cskl-agent { padding: 11px 14px; font-size: 11.5px; line-height: 1.8; } .cskl-agent__line { display: flex; align-items: baseline; gap: 8px; color: var(--csk-text); } .cskl-agent__line b { font-weight: 700; } .cskl-agent__line--call b { color: var(--csk-purple); } .cskl-agent__line--ret b { color: var(--csk-green-2); } .cskl-agent__arg { padding-left: 20px; color: var(--csk-muted); font-size: 11px; } .capskip-landing .cskl-agent code { font-size: 11.5px; color: var(--csk-text); background: none; padding: 0; } /* alternative: the one line that changes */ .cskl-swap { padding: 12px 14px; font-size: 11.5px; line-height: 1.95; } .cskl-swap__line { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; } .cskl-swap__line b { width: 9px; flex: none; font-weight: 700; } .cskl-swap__line span { color: var(--csk-muted); } .cskl-swap__line.is-out { color: #c2410c; } .cskl-swap__line.is-out b { color: #c2410c; } .cskl-swap__line.is-out span { text-decoration: line-through; text-decoration-color: rgba(194, 65, 12, .45); } .cskl-swap__line.is-in { color: var(--csk-green-text); } .cskl-swap__line.is-in b { color: var(--csk-green-text); } .cskl-swap__line.is-in span { color: var(--csk-text); } @media (prefers-reduced-motion: reduce) { .cskl-run li.is-run i { animation: none; } } /* ---------------- Hero visual: browser mock ---------------- */ .cskl-hero__visual { position: relative; } .cskl-browser { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: #fff; overflow: hidden; box-shadow: 0 26px 60px rgba(4, 6, 16, .5), 0 0 70px rgba(147, 109, 255, .18); } .cskl-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--csk-surface); border-bottom: 1px solid var(--csk-border); } .cskl-browser__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .cskl-browser__dot--r { background: #f87171; } .cskl-browser__dot--y { background: #fbbf24; } .cskl-browser__dot--g { background: var(--csk-green); } .cskl-browser__url { display: inline-flex; align-items: center; gap: 6px; flex: 1; margin-left: 10px; padding: 5px 12px; border-radius: 7px; background: var(--csk-surface-2); color: var(--csk-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; } .cskl-browser__url svg { flex: none; color: var(--csk-green-2); } .cskl-browser__body { position: relative; padding: 22px 22px 62px; } .cskl-skel { display: block; height: 9px; border-radius: 5px; background: var(--csk-surface-2); margin-bottom: 11px; } .cskl-skel--1 { width: 55%; } .cskl-skel--2 { width: 80%; } .cskl-skel--3 { width: 68%; margin-bottom: 22px; } .cskl-rc { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 9px; border: 1px solid var(--csk-border); background: #f9fafc; } .cskl-rc__box { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 5px; border: 2px solid #b9bfcc; background: #fff; animation: cskl-rc-box 8s ease infinite; } .cskl-rc__spinner { position: absolute; width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgba(147, 109, 255, .25); border-top-color: var(--csk-purple); opacity: 0; animation: cskl-spin .7s linear infinite, cskl-rc-spinner 8s ease infinite; } .cskl-rc__check { color: var(--csk-green-2); stroke-dasharray: 26; stroke-dashoffset: 26; animation: cskl-rc-check 8s ease infinite; } .cskl-rc__label { font-size: 13.5px; font-weight: 500; color: var(--csk-text); } .cskl-rc__brand { margin-left: auto; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; color: #8d95a8; font-size: 8.5px; letter-spacing: .03em; } .cskl-rc__brand svg { color: #a3abbd; } .cskl-solved { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 9px; background: var(--csk-dark); color: #fff; font-size: 12.5px; font-weight: 700; box-shadow: 0 10px 24px rgba(10, 13, 26, .34); opacity: 0; transform: translateY(10px); animation: cskl-solved 8s ease infinite; } .cskl-solved__icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(48, 232, 122, .22); color: var(--csk-green); } @keyframes cskl-spin { to { transform: rotate(360deg); } } @keyframes cskl-rc-spinner { 0%, 12% { opacity: 0; } 16%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } } @keyframes cskl-rc-check { 0%, 42% { stroke-dashoffset: 26; } 52%, 88% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 26; } } @keyframes cskl-rc-box { 0%, 42% { border-color: #b9bfcc; } 52%, 88% { border-color: rgba(18, 180, 100, .8); } 94%, 100% { border-color: #b9bfcc; } } @keyframes cskl-solved { 0%, 48% { opacity: 0; transform: translateY(10px); } 56%, 86% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(10px); } } /* Settle the mock into its solved state instead of looping. */ @media (prefers-reduced-motion: reduce) { .cskl-rc__box, .cskl-rc__spinner, .cskl-rc__check, .cskl-solved { animation: none; } .cskl-rc__spinner { opacity: 0; } .cskl-rc__check { stroke-dashoffset: 0; } .cskl-rc__box { border-color: rgba(18, 180, 100, .8); } .cskl-solved { opacity: 1; transform: none; } } /* ---------------- Intro ---------------- */ /* Full content width and left-aligned (was a centred 820px column). */ .cskl-intro { margin: 40px 0 0; text-align: left; } .capskip-landing .cskl-intro p { font-size: 16.5px; line-height: 1.72; color: var(--csk-muted); margin-bottom: 16px; text-align: left; } .cskl-intro p:last-child { margin-bottom: 0; } /* Restore the hero chips' top gap (the .capskip-landing ul reset flattens the component margin, which made the chips collide with the buttons). The trust line now sits between the two, so this is tighter than it once was. */ .capskip-landing .cskl-chips { margin: 18px 0 0; } /* Force-centre the centred copy. !important because an Elementor/keydesign theme can ship a `.entry-content p` rule whose specificity ties or beats a plain wrapper selector, which left-aligns these paragraphs. The hero lead is deliberately NOT in this list any more. The hero is split on every page now, so its copy is left-aligned beside the plate, and this rule sits later in the file than the hero block and was quietly winning. */ .capskip-landing .cskl-section__head, .capskip-landing .cskl-section__head h2, .capskip-landing .cskl-section__sub, .capskip-landing .cskl-final, .capskip-landing .cskl-final p, .capskip-landing .cskl-includes h3, .capskip-landing .cskl-includes__foot, .capskip-landing .cskl-code-caption { text-align: center !important; } /* ---------------- No-code / migration callout ---------------- */ .cskl-callout { display: flex; align-items: flex-start; gap: 14px; margin-top: 34px; padding: 20px 24px; border-radius: var(--csk-radius); background: radial-gradient(70% 160% at 0% 0%, rgba(48, 232, 122, .10) 0%, rgba(48, 232, 122, 0) 60%), radial-gradient(70% 160% at 100% 100%, rgba(147, 109, 255, .12) 0%, rgba(147, 109, 255, 0) 60%), var(--csk-surface); border: 1px solid var(--csk-border); } .cskl-callout__icon { flex: 0 0 auto; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 11px; color: var(--csk-green-2); background: rgba(48, 232, 122, .14); } .cskl-callout__icon svg { width: 22px; height: 22px; } .cskl-callout p { font-size: 14.5px; line-height: 1.62; color: var(--csk-text); } .cskl-callout strong { color: var(--csk-ink); } .cskl-callout a { color: var(--csk-indigo); font-weight: 600; } .cskl-callout a:hover { text-decoration: underline; } /* ---------------- Sections ---------------- */ .cskl-section { margin-top: 60px; } .cskl-section__head { text-align: center; margin-bottom: 30px; } .cskl-section__head h2 { font-size: clamp(24px, 3.2vw, 33px); font-weight: 800; } /* Prefixed so the `.capskip-landing p { margin:0 }` reset can't strip the auto side-margins (which centre the block) or the top margin. The auto left/right margins centre the max-width block; text-align:center (in the force-centre rule above) centres each line inside it. */ .capskip-landing .cskl-section__sub { max-width: 680px; margin: 18px auto 0; font-size: 15.5px; color: var(--csk-muted); text-align: center !important; } /* ---------------- Feature grid ---------------- */ .cskl-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cskl-feature { padding: 24px 22px; background: var(--csk-surface); border: 1px solid var(--csk-border); border-radius: var(--csk-radius); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .cskl-feature:hover { transform: translateY(-3px); box-shadow: var(--csk-shadow); border-color: rgba(147, 109, 255, .5); } .cskl-feature__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; color: var(--csk-green-2); background: rgba(48, 232, 122, .12); margin-bottom: 14px; } .cskl-feature__icon svg { width: 24px; height: 24px; } .cskl-feature h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 7px; } .cskl-feature p { font-size: 14px; line-height: 1.62; color: var(--csk-muted); } /* Alternate icon accent for visual rhythm */ .cskl-feature:nth-child(3n+2) .cskl-feature__icon { color: var(--csk-purple-2); background: rgba(147, 109, 255, .13); } /* ---------------- Ways + code ---------------- */ .cskl-codewrap { margin-bottom: 26px; } .capskip-landing .cskl-code-caption { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--csk-muted); } .cskl-ways-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cskl-way { padding: 22px 20px; background: var(--csk-bg); border: 1px solid var(--csk-border); border-radius: var(--csk-radius); box-shadow: var(--csk-shadow); } .cskl-way__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 11px; color: var(--csk-purple-2); background: rgba(147, 109, 255, .12); margin-bottom: 12px; } .cskl-way__icon svg { width: 22px; height: 22px; } .cskl-way h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; } .cskl-way p { font-size: 14px; line-height: 1.6; color: var(--csk-muted); margin-bottom: 12px; } .cskl-way__links { display: flex; flex-wrap: wrap; gap: 8px; } .cskl-way__links a { font-size: 12.5px; font-weight: 600; color: var(--csk-indigo); padding: 5px 11px; border-radius: 999px; background: var(--csk-surface-2); transition: background .14s ease, color .14s ease; } .cskl-way__links a:hover { background: var(--csk-purple); color: #fff; } /* ---------------- Code block (matched to api-docs / SDKs page) ---------------- */ .csk-code { background: var(--csk-code-bg); border: 1px solid var(--csk-code-line); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(13, 16, 32, .9); } .csk-code-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; background: var(--csk-code-bar); border-bottom: 1px solid var(--csk-code-line); } .csk-code-bar::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: 17px 0 0 #febc2e, 34px 0 0 #28c840; margin-right: 34px; } .csk-code-lang { flex: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: #aeb4d0; white-space: nowrap; } .csk-copy { margin-left: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px !important; background: transparent; border: 1px solid var(--csk-code-line); border-radius: 8px; color: #c3c8e2; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .csk-copy:hover { background: rgba(255, 255, 255, .06); color: #fff; } .csk-copy.is-copied { color: var(--csk-green); border-color: rgba(48, 232, 122, .45); } .csk-code pre { margin: 0; padding: 18px; background: var(--csk-code-bg); overflow-x: auto; scrollbar-width: thin; scrollbar-color: #2f3454 transparent; } .csk-code pre::-webkit-scrollbar { height: 8px; } .csk-code pre::-webkit-scrollbar-thumb { background: #2f3454; border-radius: 4px; } .csk-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 13.5px; line-height: 1.7; color: var(--csk-code-text); white-space: pre; background: transparent; padding: 0; } /* ---------------- Demo callout ---------------- */ .cskl-demo { margin-top: 60px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding: 34px 36px; border-radius: 20px; background: radial-gradient(80% 160% at 0% 0%, rgba(48, 232, 122, .16) 0%, rgba(48, 232, 122, 0) 60%), radial-gradient(80% 160% at 100% 100%, rgba(147, 109, 255, .18) 0%, rgba(147, 109, 255, 0) 60%), var(--csk-dark); } .cskl-demo__text { flex: 1 1 340px; } .cskl-demo__text h2 { color: #fff; font-size: 24px; font-weight: 800; } .cskl-demo__text p { margin-top: 8px; color: rgba(238, 242, 255, .82); font-size: 15px; line-height: 1.6; } .cskl-demo__cta { display: flex; gap: 10px; flex-wrap: wrap; } .cskl-demo .cskl-btn--ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); } .cskl-demo .cskl-btn--ghost:hover { background: transparent; border-color: #30e87a; color: #30e87a; } /* ---------------- How-to steps ---------------- */ .cskl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .cskl-steps li { display: flex; gap: 14px; padding: 22px 20px; background: var(--csk-surface); border: 1px solid var(--csk-border); border-radius: var(--csk-radius); } .cskl-steps__num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--csk-purple); } .cskl-steps h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 5px; } .cskl-steps p { font-size: 13.5px; line-height: 1.6; color: var(--csk-muted); } .cskl-steps a { color: var(--csk-indigo); font-weight: 600; } .cskl-steps a:hover { text-decoration: underline; } /* ---------------- Comparison table ---------------- */ .cskl-table-scroll { overflow-x: auto; border-radius: var(--csk-radius); border: 1px solid var(--csk-border); } .capskip-landing .cskl-table { width: 100%; border-collapse: collapse; background: var(--csk-bg); min-width: 560px; } .cskl-table th, .cskl-table td { padding: 14px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--csk-border); vertical-align: top; } .cskl-table thead th { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--csk-muted); background: var(--csk-surface); } .cskl-table tbody th { font-weight: 700; color: var(--csk-ink); width: 30%; } .cskl-table td { color: var(--csk-muted); } .cskl-table .is-us { background: rgba(48, 232, 122, .08); color: var(--csk-text); font-weight: 600; } .cskl-table thead .is-us { color: var(--csk-green-text); } .cskl-table tr:last-child th, .cskl-table tr:last-child td { border-bottom: 0; } /* ---------------- Pricing / licenses ---------------- */ .cskl-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 860px; margin: 0 auto; } .cskl-price { position: relative; display: flex; flex-direction: column; padding: 26px 22px; background: var(--csk-bg); border: 1px solid var(--csk-border); border-radius: var(--csk-radius); box-shadow: var(--csk-shadow); } .cskl-price.is-featured { border-color: var(--csk-purple); box-shadow: 0 20px 44px -22px rgba(147, 109, 255, .6); } .cskl-price__badge { position: absolute; top: -11px; left: 22px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--csk-purple); padding: 4px 10px; border-radius: 999px; } .cskl-price__name { font-size: 16px; font-weight: 800; color: var(--csk-purple-2); } .cskl-price__num { font-size: 34px; font-weight: 800; color: var(--csk-ink); letter-spacing: -0.03em; } .cskl-price__per { font-size: 13.5px; color: var(--csk-muted); font-weight: 600; } /* These are

elements, so prefix them to beat the `.capskip-landing p` reset and keep the card's internal spacing (and the gap above the button). */ .capskip-landing .cskl-price__setup { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--csk-muted); } .capskip-landing .cskl-price__amount { margin-top: 2px; } .capskip-landing .cskl-price__headline { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--csk-green-text); } .capskip-landing .cskl-price__devices { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--csk-muted); } .capskip-landing .cskl-price__desc { margin-top: 12px; margin-bottom: 26px; font-size: 13px; line-height: 1.55; color: var(--csk-muted); } .cskl-price .cskl-btn { font-size: 13.5px; padding: 11px 16px; } /* The CTA is bottom-aligned via margin-top:auto on .cskl-btn--block; the desc margin-bottom above sets the minimum gap so the button never crowds the text. */ /* $1 trial note below the plans */ .cskl-trialnote { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; /* Full width, to line up with the pricing block above it. */ max-width: none; margin: 0; padding: 18px 24px; border-radius: var(--csk-radius); background: var(--csk-surface); border: 1px dashed var(--csk-border); } .cskl-trialnote__text h3 { font-size: 15.5px; font-weight: 800; } .cskl-trialnote__text p { margin-top: 3px; font-size: 13.5px; color: var(--csk-muted); max-width: 62ch; } .cskl-includes { margin-top: 22px; padding: 26px 28px; background: var(--csk-surface); border: 1px solid var(--csk-border); border-radius: var(--csk-radius); } .cskl-includes h3 { font-size: 16px; font-weight: 800; margin-bottom: 14px; text-align: center; } .cskl-includes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } .cskl-includes__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--csk-text); } .cskl-includes__tick { flex: 0 0 auto; display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: var(--csk-green-2); } .cskl-includes__tick svg { width: 12px; height: 12px; } .capskip-landing .cskl-includes__foot { margin-top: 26px; text-align: center; font-size: 13.5px; color: var(--csk-muted); } .cskl-includes__foot a { color: var(--csk-indigo); font-weight: 600; } .cskl-includes__foot a:hover { text-decoration: underline; } /* ---------------- Related ---------------- */ .cskl-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .cskl-related-card { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 18px 38px 18px 18px; background: var(--csk-surface); border: 1px solid var(--csk-border); border-radius: var(--csk-radius-sm); color: var(--csk-text); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .cskl-related-card:hover { transform: translateY(-2px); box-shadow: var(--csk-shadow); border-color: var(--csk-purple); } .cskl-related-card__icon { flex: 0 0 auto; display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; color: var(--csk-purple-2); background: rgba(147, 109, 255, .12); } .cskl-related-card__icon svg { width: 20px; height: 20px; } .cskl-related-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cskl-related-card__title { font-size: 15px; font-weight: 700; color: var(--csk-ink); } .cskl-related-card__blurb { font-size: 13px; color: var(--csk-muted); } .cskl-related-card__arrow { position: absolute; top: 16px; right: 14px; color: var(--csk-purple); transition: transform .14s ease; } .cskl-related-card__arrow svg { width: 18px; height: 18px; display: block; } .cskl-related-card:hover .cskl-related-card__arrow { transform: translateX(3px); } .cskl-resource-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 22px; } .cskl-resource-row a { font-size: 13px; font-weight: 600; color: var(--csk-indigo); padding: 8px 15px; border-radius: 999px; background: var(--csk-surface-2); transition: background .14s ease, color .14s ease; } .cskl-resource-row a:hover { background: var(--csk-indigo); color: #fff; } /* ---------------- SEO copy + FAQ (cskip-* tokens, matched to demo pages) ---------------- */ .cskl-seowrap { --cs-indigo: #4353ff; --cs-ink: #0f1222; --cs-body: #4a5063; --cs-muted: #8a90a2; --cs-line: #e7e8ef; --cs-surface: #fff; --cs-soft: #f6f7fb; --cs-radius: 16px; --cs-radius-sm: 12px; margin-top: 60px; font-size: 16px; line-height: 1.6; color: var(--cs-body); } .cskl-seowrap .cskip-seo { margin-top: 22px; padding: 26px 26px 28px; background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); box-shadow: 0 20px 44px -34px rgb(20 24 60 / 50%); } .cskl-seowrap .cskip-seo:first-child { margin-top: 0; } .cskl-seowrap .cskip-seo__h2 { margin: 0 0 14px !important; font-size: clamp(23px, 3.4vw, 30px) !important; line-height: 1.2 !important; font-weight: 800; color: var(--cs-ink); } .cskl-seowrap .cskip-seo__h { margin: 0 0 12px !important; font-size: 20px !important; line-height: 1.3 !important; font-weight: 800; color: var(--cs-ink); } .cskl-seowrap .cskip-seo p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--cs-body); } .cskl-seowrap .cskip-seo p:last-child { margin-bottom: 0; } /* The prose and the questions share one card, so a rule separates them instead of a second heading. */ .cskl-seowrap .cskip-seo__body + .cskip-faq { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--cs-line); } .cskl-seowrap .cskip-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } /* Rows sit on the card rather than in their own grey boxes: quieter closed, and the open one is the only thing that lifts off the surface. */ .cskl-seowrap .cskip-faq__q { overflow: hidden; background: transparent; border: 1px solid transparent; border-radius: var(--cs-radius-sm); transition: background .16s ease, border-color .16s ease; } .cskl-seowrap .cskip-faq__q:hover { background: var(--cs-soft); } .cskl-seowrap .cskip-faq__q[open] { background: var(--cs-soft); border-color: var(--cs-line); } .cskl-seowrap .cskip-faq__q summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--cs-ink); } .cskl-seowrap .cskip-faq__q summary::-webkit-details-marker { display: none; } /* The chevron sits in its own round well, so the open state reads as a control rather than a stray tick, and it turns green when the row is open. */ .cskl-seowrap .cskip-faq__q summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 3px 0; border-right: 2px solid var(--cs-muted); border-bottom: 2px solid var(--cs-muted); transform: rotate(45deg); transition: transform .22s ease, border-color .16s ease; } .cskl-seowrap .cskip-faq__q:hover summary::after { border-color: var(--cs-ink); } .cskl-seowrap .cskip-faq__q[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); border-color: var(--csk-green-2); } .cskl-seowrap .cskip-faq__q[open] summary { color: var(--csk-green-text); } /* Pure-CSS accordion animation: the answer is a grid that transitions grid-template-rows from 0fr (collapsed) to 1fr (open). Because `display:grid` keeps the answer in the render tree even while the

is closed, the collapse/expand both animate smoothly, with no JS and no end-of-close snap. The inner element carries the padding and clips the overflow so the row can shrink to zero. */ .cskl-seowrap .cskip-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } .cskl-seowrap .cskip-faq__q[open] .cskip-faq__a { grid-template-rows: 1fr; } /* The clip element carries NO padding, so a 0fr row collapses it to exactly 0 (padding is not shrinkable and would otherwise leave a residual gap). */ .cskl-seowrap .cskip-faq__inner { overflow: hidden; min-height: 0; } .cskl-seowrap .cskip-faq__text { padding: 0 18px 16px; font-size: 14.5px; line-height: 1.62; color: var(--cs-body); } .cskl-seowrap .cskip-faq__q summary::after { transition: transform .28s ease; } @media (prefers-reduced-motion: reduce) { .cskl-seowrap .cskip-faq__a { transition: none; } .cskl-seowrap .cskip-faq__q summary::after { transition: none; } } .cskl-seowrap .cskip-faq__a a, .cskl-seowrap .cskip-seo a { color: var(--cs-indigo); font-weight: 600; } .cskl-seowrap a:hover { text-decoration: underline; } .cskl-seowrap code { padding: 2px 7px; border-radius: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: #2f3bd9; background: #eef0ff; } /* ---------------- Final CTA ---------------- */ .cskl-final { margin-top: 60px; text-align: center; padding: 48px 32px; border-radius: 22px; background: radial-gradient(60% 120% at 0% 0%, rgba(48, 232, 122, .18) 0%, rgba(48, 232, 122, 0) 58%), radial-gradient(60% 120% at 100% 100%, rgba(147, 109, 255, .22) 0%, rgba(147, 109, 255, 0) 58%), var(--csk-dark); } .cskl-final h2 { color: #fff; font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; } .cskl-final p { max-width: 620px; margin: 12px auto 0; color: rgba(238, 242, 255, .84); font-size: 16px; line-height: 1.6; } .cskl-final__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } /* ---------------- Responsive ---------------- */ @media (max-width: 900px) { .cskl-feature-grid, .cskl-ways-grid, .cskl-steps, .cskl-related-grid { grid-template-columns: repeat(2, 1fr); } .cskl-price-grid { grid-template-columns: repeat(2, 1fr); } /* The hero stacks at its own, wider breakpoint: see the hero section. */ } @media (max-width: 640px) { .capskip-landing { padding: 0 16px 44px; } .cskl-hero__inner { padding: 44px 22px 40px; } .cskl-feature-grid, .cskl-ways-grid, .cskl-steps, .cskl-related-grid, .cskl-price-grid, .cskl-includes__list { grid-template-columns: 1fr; } .cskl-demo { flex-direction: column; align-items: stretch; padding: 26px 22px; } /* The text block carries `flex: 1 1 340px` for the side-by-side layout. Once this turns the box into a column that basis becomes a HEIGHT, so the block was 340px tall around 154px of content: 186px of empty space above the buttons. Back to its natural height here. */ .cskl-demo__text { flex: 0 1 auto; } .cskl-demo__cta { width: 100%; } .cskl-demo__cta .cskl-btn { flex: 1 1 auto; justify-content: center; } .csk-code-lang { display: none; } .cskl-section { margin-top: 46px; } }