/* funnel.css — the /test and /quick quiz teasers. Marketing-expressive (bigger, juicier than the utilitarian app) but strictly on the prava tokens, light + dark. Loaded after marketing.css so it can lean on the same shell (.mk-top, .mk-foot). */ /* Stage — centred column, generous but never wider than the viewport. */ [data-theme="prava"] .fn-stage{ flex:1; display:flex; flex-direction:column; } [data-theme="prava"] .fn-wrap{ width:100%; max-width:560px; margin:0 auto; padding:0 16px; flex:1; display:flex; flex-direction:column; } [data-theme="prava"] #funnel-root{ flex:1; display:flex; flex-direction:column; padding:20px 0 40px; } /* Ambient hero glow behind the funnel, same family as the landing. */ [data-theme="prava"] .fn-glow{ position:fixed; top:-160px; left:50%; transform:translateX(-50%); width:min(680px,120vw); height:420px; background:radial-gradient(closest-side, var(--prava-glow), transparent 72%); pointer-events:none; z-index:0; } /* Stack the real content above the fixed glow — but NOT the glow itself (same specificity as the rule above, so :not() keeps it from being reset to position:relative). */ [data-theme="prava"] .fn-stage > *:not(.fn-glow){ position:relative; z-index:1; } /* …but the header carries an OVERLAY (the language menu), and flattening every sibling to the same z-index put
above it in DOM order. The menu still painted — partially, sliced by the funnel content — while every item in it landed its clicks on the card underneath, so a Ukrainian speaker arriving on /quick could not switch language at all. The menu's own z-index:60 could not help: it is confined to the header's stacking context. Found by the interface fuzzer (D66), not by a human — no scripted probe ever clicked that control. */ [data-theme="prava"] .fn-stage > .mk-top{ z-index:30; } /* Loading */ [data-theme="prava"] .fn-load{ flex:1; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--ds-text-soft); font-size:15px; min-height:50vh; } [data-theme="prava"] .fn-spin{ width:20px; height:20px; border:2.5px solid var(--ds-border); border-top-color:var(--ds-accent); border-radius:50%; animation:fn-spin .8s linear infinite; } @keyframes fn-spin{ to{ transform:rotate(360deg); } } /* Intro */ [data-theme="prava"] .fn-intro{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:22px; min-height:56vh; padding:20px 0; } [data-theme="prava"] .fn-kicker{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ds-accent); background:var(--ds-accent-soft); padding:7px 14px; border-radius:var(--r-full); } [data-theme="prava"] .fn-intro__h{ font-size:clamp(24px,5.2vw,34px); font-weight:900; line-height:1.18; letter-spacing:-.02em; margin:0; max-width:460px; } [data-theme="prava"] .fn-note{ font-size:13px; color:var(--ds-hint); line-height:1.55; max-width:420px; margin:6px 0 0; } /* Big CTA */ [data-theme="prava"] .fn-cta{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 30px; border-radius:var(--r-full); font-size:16px; font-weight:800; cursor:pointer; border:0; background:var(--prava-cta-grad); color:#333333; box-shadow:var(--prava-sh-cta); text-decoration:none; transition:filter .15s, transform .12s; } [data-theme="prava"] .fn-cta:hover{ filter:brightness(1.05); text-decoration:none; } [data-theme="prava"] .fn-cta:active{ transform:translateY(1px) scale(.99); } [data-theme="prava"] .fn-cta svg{ width:20px; height:20px; } [data-theme="prava"] .fn-cta--block{ display:flex; width:100%; } [data-theme="prava"] .fn-cta--xl{ padding:17px 30px; font-size:17px; } /* Top progress line */ [data-theme="prava"] .fn-top{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } [data-theme="prava"] .fn-count{ font-size:13px; font-weight:700; color:var(--ds-text-soft); white-space:nowrap; } [data-theme="prava"] .fn-bar{ flex:1; height:8px; border-radius:var(--r-full); background:var(--ds-surface-2); overflow:hidden; border:1px solid var(--ds-border); } [data-theme="prava"] .fn-bar__in{ height:100%; border-radius:var(--r-full); background:var(--prava-accent-grad); transition:width .3s cubic-bezier(.4,0,.2,1); min-width:0; } /* Quiz card */ [data-theme="prava"] .fn-quiz{ flex:1; display:flex; flex-direction:column; } [data-theme="prava"] .fn-card{ background:var(--prava-elev); border:1px solid var(--ds-border); border-radius:var(--r-card); box-shadow:var(--prava-sh-card); padding:22px 20px; } [data-theme="prava"] .fn-stem{ font-size:clamp(17px,3.2vw,20px); font-weight:800; line-height:1.35; letter-spacing:-.01em; } /* Options (test mode) */ [data-theme="prava"] .fn-opts{ display:flex; flex-direction:column; gap:10px; margin-top:18px; } [data-theme="prava"] .fn-opt{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:14px 15px; border-radius:var(--r-m); border:1.5px solid var(--ds-border); background:var(--ds-surface); color:var(--ds-text); font-size:15px; font-weight:600; line-height:1.4; cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s, transform .1s; } [data-theme="prava"] .fn-opt:not([disabled]):hover{ border-color:var(--ds-accent); background:var(--ds-accent-soft); } [data-theme="prava"] .fn-opt:not([disabled]):active{ transform:scale(.99); } [data-theme="prava"] .fn-opt[disabled]{ cursor:default; } [data-theme="prava"] .fn-opt__k{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--ds-surface-2); color:var(--ds-text-soft); font-weight:800; font-size:13px; } [data-theme="prava"] .fn-opt__m{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; } [data-theme="prava"] .fn-opt__m svg{ width:18px; height:18px; } [data-theme="prava"] .fn-opt__t{ flex:1; } [data-theme="prava"] .fn-opt--right{ border-color:var(--prava-correct); background:color-mix(in srgb, var(--prava-correct) 14%, var(--ds-surface)); } [data-theme="prava"] .fn-opt--right .fn-opt__m{ background:var(--prava-correct); color:#333333; } [data-theme="prava"] .fn-opt--wrong{ border-color:var(--prava-wrong); background:color-mix(in srgb, var(--prava-wrong) 14%, var(--ds-surface)); } [data-theme="prava"] .fn-opt--wrong .fn-opt__m{ background:var(--prava-wrong); color:#fff; } [data-theme="prava"] .fn-opt--mute{ opacity:.55; } /* Review (shared by both modes) */ [data-theme="prava"] .fn-review{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--ds-border); } [data-theme="prava"] .fn-verdict{ display:flex; align-items:center; gap:8px; font-weight:900; font-size:15px; } [data-theme="prava"] .fn-verdict svg{ width:20px; height:20px; } [data-theme="prava"] .fn-review.is-ok .fn-verdict{ color:var(--prava-correct); } [data-theme="prava"] .fn-review.is-no .fn-verdict{ color:var(--prava-wrong); } [data-theme="prava"] .fn-why{ margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--ds-text); } [data-theme="prava"] .fn-law{ margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 13px; border-radius:var(--r-m); border-left:3px solid var(--ds-accent); background:color-mix(in srgb, var(--ds-accent) 8%, var(--ds-surface)); } [data-theme="prava"] .fn-law__tag{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ds-accent); } [data-theme="prava"] .fn-law__ref{ font-size:14px; font-weight:700; color:var(--ds-text); } /* Action bar under the card */ [data-theme="prava"] .fn-action{ margin-top:18px; } /* ── Swipe (quick mode) ── */ [data-theme="prava"] .fn-quiz--swipe .fn-deck{ position:relative; margin-top:6px; } [data-theme="prava"] .fn-swipe{ background:var(--prava-elev); border:1px solid var(--ds-border); border-radius:var(--r-card); box-shadow:var(--prava-sh-hero); padding:26px 22px; position:relative; overflow:hidden; touch-action:pan-y; user-select:none; min-height:230px; display:flex; flex-direction:column; } [data-theme="prava"] .fn-swipe.is-draggable{ cursor:grab; } [data-theme="prava"] .fn-swipe.is-draggable:active{ cursor:grabbing; } [data-theme="prava"] .fn-swipe__ctx{ font-size:13.5px; color:var(--ds-text-soft); line-height:1.45; margin-bottom:12px; } [data-theme="prava"] .fn-swipe__claim{ font-size:clamp(19px,4vw,23px); font-weight:800; line-height:1.3; letter-spacing:-.01em; } [data-theme="prava"] .fn-swipe__stamp{ position:absolute; top:16px; padding:6px 14px; border-radius:10px; font-weight:900; font-size:18px; letter-spacing:.04em; border:3px solid; opacity:0; z-index:3; transform:rotate(-12deg) scale(.9); pointer-events:none; } [data-theme="prava"] .fn-swipe__stamp--yes{ left:16px; color:var(--prava-correct); border-color:var(--prava-correct); rotate:-8deg; } [data-theme="prava"] .fn-swipe__stamp--no{ right:16px; color:var(--prava-wrong); border-color:var(--prava-wrong); rotate:8deg; } [data-theme="prava"] .fn-swipe.show-yes .fn-swipe__stamp--yes{ opacity:var(--stamp,1); transform:rotate(-8deg) scale(1); } [data-theme="prava"] .fn-swipe.show-no .fn-swipe__stamp--no{ opacity:var(--stamp,1); transform:rotate(8deg) scale(1); } /* True/false buttons (mouse/hybrid) */ /* Pinned to the bottom of the quiz column (owner: buttons go down). `margin-top:auto` rather than a fixed bar, because .fn-quiz is already a flex:1 column — this keeps them under the thumb without introducing chrome the funnel does not otherwise have, and it leaves the whole area above them as the gesture field (see bindDrag). */ [data-theme="prava"] .fn-tf{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto; padding-top:18px; } [data-theme="prava"] .fn-tf__b{ display:flex; align-items:center; justify-content:center; gap:9px; padding:15px; border-radius:var(--r-m); border:1.5px solid var(--ds-border); background:var(--ds-surface); color:var(--ds-text); font-size:16px; font-weight:800; cursor:pointer; font-family:inherit; transition:transform .1s, border-color .15s, background .15s; } [data-theme="prava"] .fn-tf__b svg{ width:21px; height:21px; } [data-theme="prava"] .fn-tf__b:active{ transform:scale(.97); } [data-theme="prava"] .fn-tf__b--yes:hover{ border-color:var(--prava-correct); background:color-mix(in srgb, var(--prava-correct) 12%, var(--ds-surface)); color:var(--prava-correct); } [data-theme="prava"] .fn-tf__b--no:hover{ border-color:var(--prava-wrong); background:color-mix(in srgb, var(--prava-wrong) 12%, var(--ds-surface)); color:var(--prava-wrong); } [data-theme="prava"] .fn-hint{ text-align:center; font-size:13px; color:var(--ds-hint); margin-top:16px; } /* ── Result ── */ [data-theme="prava"] .fn-result{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:14px 0 20px; } [data-theme="prava"] .fn-score{ width:132px; height:132px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--ds-accent) var(--deg,0deg), var(--ds-surface-2) 0); padding:9px; box-shadow:var(--prava-sh-card); } [data-theme="prava"] .fn-score__in{ width:100%; height:100%; border-radius:50%; background:var(--ds-bg); display:grid; place-items:center; } [data-theme="prava"] .fn-score__n{ font-size:32px; font-weight:900; letter-spacing:-.03em; background:var(--prava-accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } [data-theme="prava"] .fn-result__h{ font-size:22px; font-weight:900; margin:2px 0 0; letter-spacing:-.02em; } [data-theme="prava"] .fn-assess{ font-size:15.5px; line-height:1.55; color:var(--ds-text-soft); max-width:440px; margin:0; } [data-theme="prava"] .fn-tease{ width:100%; text-align:left; background:var(--prava-elev); border:1px solid var(--ds-border); border-radius:var(--r-card); box-shadow:var(--prava-sh-card); padding:18px 18px 20px; margin-top:6px; } [data-theme="prava"] .fn-tease__h{ font-size:15px; font-weight:800; margin-bottom:12px; } [data-theme="prava"] .fn-tease__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; } [data-theme="prava"] .fn-tease__list li{ display:flex; align-items:flex-start; gap:11px; font-size:14.5px; line-height:1.45; color:var(--ds-text); } [data-theme="prava"] .fn-tease__list svg{ flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:var(--ds-accent); } [data-theme="prava"] .fn-ctasub{ font-size:13px; color:var(--ds-text-soft); margin-top:-4px; } [data-theme="prava"] .fn-retry{ margin-top:4px; background:none; border:0; color:var(--ds-text-soft); font-size:14px; font-weight:700; cursor:pointer; text-decoration:underline; font-family:inherit; padding:8px; } [data-theme="prava"] .fn-result .fn-cta--block{ margin-top:8px; } /* Entrance */ [data-theme="prava"] .anim-fade{ animation:fn-fade .32s cubic-bezier(.2,.7,.3,1) both; } @keyframes fn-fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ [data-theme="prava"] .anim-fade{ animation:none; } [data-theme="prava"] .fn-bar__in{ transition:none; } } /* «‹ к объяснению» — compact control at the top of a fresh да/нет card to recover the previous разбор if it was swiped away unread (owner). */ [data-theme="prava"] .fn-back{ align-self:flex-start; display:inline-flex; align-items:center; gap:4px; margin:2px 0 10px; padding:6px 13px; border-radius:var(--r-full); border:1px solid var(--ds-border); background:var(--ds-surface); color:var(--ds-text-soft); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; } [data-theme="prava"] .fn-back:hover{ border-color:var(--ds-accent); color:var(--ds-accent); } /* ── term chips (D64) ─────────────────────────────────────────────────────────────────── A funnel visitor is the coldest reader we have, so a Norwegian word must be tappable here too. The chip is a SPAN, not a button: an option is itself a