.wa-fc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; } /* Two boxes, one edge. The brand mark is positioned against .wa-fc__card below, so what matters here is only that the widget stops at a Turnstile-sized width instead of stretching to whatever the host form's field happens to be: measured 448px on the stand's login form, against the 300px of Cloudflare Turnstile's `normal` widget the operator named as the target. width:100% keeps it shrinking on a narrow viewport, where a fixed 300px would overflow. */ .wa-fc.wa-fc--show { position: relative; width: 100%; height: auto; max-width: 300px; overflow: visible; clip: auto; clip-path: none; white-space: normal; margin: 0.75rem 0; padding: 0; font-size: 0.875rem; line-height: 1.4; } .wa-fc { --altcha-color-base: #ffffff; --altcha-color-base-content: #16181d; --altcha-color-text: #4b5563; --altcha-color-neutral: #e5e7eb; --altcha-border-color: #e5e7eb; --altcha-color-border: #e5e7eb; --altcha-border-width: 1px; --altcha-border-radius: 12px; --altcha-color-primary: #2563eb; --altcha-color-primary-content: #ffffff; --altcha-color-success: #16a34a; --altcha-color-error: #dc2626; --altcha-spinner-color: #2563eb; --altcha-checkbox-border-color: #9ca3af; --altcha-shadow: none; /* The card fills .wa-fc__card, whose own width is capped above - so the two boxes always share one edge and the brand mark can never sit outside the visible card (operator screenshot 10.08.2026). */ --altcha-max-width: 100%; /* Never declared here before, so the vendor's :root value (0.75rem) decided the height and the card came out 50.9px against Turnstile's 65px - the "half height" the operator reported. */ --altcha-padding: 0.875rem; --wa-fc-accent: #2563eb; } /* THREE states, not two. The host theme may say nothing (follow the system), or it may say light, or dark - and Webasyst themes say it with `data-theme` on , whose VALUE is the theme's own id (`kaktak_selfproduction`, `kaktak_selfproduction-dark`), not the words "light"/"dark". So the test is substring-on-"dark", and a declared theme without it counts as light and must WIN over the system preference. Measured 18.08.2026 on kaktak.net: the visitor had switched the site to light while the OS stayed dark, the page turned white and this card stayed black, because it listened to the OS and nothing else. */ [data-theme*="dark"] .wa-fc { --altcha-color-base: #1c1f26; --altcha-color-base-content: #e6e8ec; --altcha-color-text: #aab1bd; --altcha-color-neutral: #2b303a; --altcha-border-color: #343b47; --altcha-color-border: #343b47; --altcha-color-primary: #5b8cff; --altcha-spinner-color: #5b8cff; --altcha-checkbox-border-color: #5a6472; --wa-fc-accent: #5b8cff; } @media (prefers-color-scheme: dark) { .wa-fc { --altcha-color-base: #1c1f26; --altcha-color-base-content: #e6e8ec; --altcha-color-text: #aab1bd; --altcha-color-neutral: #2b303a; --altcha-border-color: #343b47; --altcha-color-border: #343b47; --altcha-color-primary: #5b8cff; --altcha-spinner-color: #5b8cff; --altcha-checkbox-border-color: #5a6472; --wa-fc-accent: #5b8cff; } /* The host declared a theme and it is not a dark one - that beats the OS preference. */ [data-theme]:not([data-theme*="dark"]) .wa-fc { --altcha-color-base: #ffffff; --altcha-color-base-content: #16181d; --altcha-color-text: #4b5563; --altcha-color-neutral: #e5e7eb; --altcha-border-color: #e5e7eb; --altcha-color-border: #e5e7eb; --altcha-color-primary: #2563eb; --altcha-spinner-color: #2563eb; --altcha-checkbox-border-color: #9ca3af; --wa-fc-accent: #2563eb; } } .wa-fc .altcha-logo, .wa-fc .altcha-footer { display: none !important; } .wa-fc .altcha { width: 100%; max-width: 100%; border: 0; background: none; padding: 0; } /* The card box. .wa-fc also carries the footer, so the mark below is positioned against THIS element rather than the wrapper - otherwise adding a footer line pushes 50% off the card. */ .wa-fc__card { position: relative; } /* Turnstile's `normal` widget is 65px tall. The vendor lays .altcha-main out as a column with `justify-content: space-between`, which is a no-op for the single row we render, so the row is centred instead - min-height alone would leave it stuck to the top edge. */ .wa-fc .altcha-main { position: relative; min-height: 65px; justify-content: center; } /* The vendor lays its label out with no knowledge of our column, so the room is reserved here. Measured against the widest label the column carries ("FormGuard" at 0.625rem) plus clearance. */ .wa-fc .altcha-checkbox-wrap { padding-right: 4.75rem; } /* The right-hand column: the mark, then the links under it, flush right - the arrangement Turnstile uses. It is positioned OVER the card rather than inside it: the card's interior is rendered by a Svelte component that owns its own subtree, so a node injected there is discarded the moment the widget re-renders on a state change. Everything here lives outside and survives, which the mark has been proving since it was first added. */ .wa-fc__side { position: absolute; /* Centred, not pinned to the top: the card is 65px when the label fits on one line and 72.6px when it does not, and a top-anchored column leaves 1.7px of clearance in the taller case - close enough to the border to read as a mistake. */ top: 50%; transform: translateY(-50%); right: 0.875rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; max-width: 45%; text-align: right; } .wa-fc__brand { width: 1.5rem; height: 1.5rem; pointer-events: none; display: block; color: var(--wa-fc-accent); } .wa-fc__brand svg { width: 100%; height: 100%; display: block; } .wa-fc__brand img { width: 100%; height: 100%; object-fit: contain; display: block; max-width: 1.5rem; max-height: 1.5rem; } /* Turnstile puts its attribution inside the card; ours sits under it, because the card's interior belongs to the vendor component and anything we inject there is one upstream release away from being overwritten. No separator glyph between the links. Both labels are full Russian phrases, so at the card's 300px they wrap to two lines more often than not - and a "\00b7" rendered with ::before then lands at the START of the second line, which reads as a bullet list nobody asked for. The gap below spaces them on one line and indents nothing when they wrap. */ /* Three tiers, the way Turnstile stacks them: the mark, then the NAME, then the small print. Before this the product name was just another underlined link at the links' size, so the column read as two equal rows and the mark looked undersized next to them. The name is not small print - it is the signature. */ .wa-fc__wordmark { font-size: 0.625rem; font-weight: 500; line-height: 1.15; letter-spacing: 0.01em; color: var(--altcha-color-base-content); text-decoration: none; opacity: 0.85; } .wa-fc__wordmark:hover { opacity: 1; color: var(--altcha-color-primary); } .wa-fc__foot { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.5625rem; line-height: 1.3; color: var(--altcha-color-text); opacity: 0.9; } .wa-fc__foot a { color: var(--altcha-color-text); text-decoration: underline; text-underline-offset: 2px; } .wa-fc__foot a:hover { color: var(--altcha-color-primary); }