/* ================================================================ FPFX — home page Thirteen sections, alternating ground, leading with proof rather than illustration. Replaces the inherited eighteen-section layout. Two of the thirteen deliberately break the alternation: 09 AFFILIATE CUT takes its own ground, like the hero and the closing panel, and 12 KNOWLEDGE BASE takes the alt ground but splits into two columns. GROUND VALUES ARE HARDCODED HERE AND THEY TRACK fpfx-theme.css EXACTLY. This file predates the tokens and writes literals rather than var(). That is left alone rather than churned into var() calls in the same pass that moves the ladder, but it means the literals have to be migrated by hand whenever the ladder moves, and a stale one shows up as a panel that no longer matches the panel beside it. 110 values migrated in this pass, and what each one is FOR — the mapping is the point, not the arithmetic: #050505 -> #0A0806 --bg page ground: proof cells, marquee fade masks, the step-number dot #090806 -> #100C08 --bg-2 .fx-alt, the alternating section band #0B0906 -> #100C08 --bg-2 affiliate rail track ends, focus ring #0D0B08 -> #100C08 --bg-2 recessed controls: selects, inputs, phase chips, small pills #0E0B07 -> #171109 --surface affiliate rail track midpoint #11100E -> #171109 --surface THE RESTING PANEL — 18 of them: cards, features, rules, reviews, FAQ, plans #17130D -> #211810 --surface-2 hover and active #221A11 -> #2E2116 --surface-3 featured plan / price plinth #8E8A82 -> #C4BCB1 --muted 21 selectors, every one a `color:` #948C82 -> #AEA8A1 --muted-2 42 — the contrast floor Two of those need justifying rather than just listing. #0D0B08 and #090806 were 1.03:1 apart, which is not a level — it is a rounding error — so the recessed-control ground and the section band collapse onto one rung; what separates an input from the band it sits on is its 1px gold line, and always was. And the muted pair went UP, not down, even though the ground went dark: they are now measured against the atmosphere ceiling (#261F12, see fpfx-aurora.css) rather than against a token that nothing actually renders, and at the old values they measured 3.49:1 and 3.61:1 against the ground this page was really painting. Both were failing WCAG AA in production. All seven #8A6B3A occurrences in this file are gradient STOPS, never a `color:`, so none of them needed the --gold-meta migration that the affiliate, checkout, legal and help sheets do. ================================================================ */ .fx-wrap{max-width:1240px;margin:0 auto;padding:0 26px;position:relative;z-index:2} .fx-sec{padding:96px 0;position:relative} .fx-alt{background:#100C08} .fx-gold{background:linear-gradient(100deg,#F3DBB2,#EEB762 44%,#8A6B3A); -webkit-background-clip:text;background-clip:text;color:transparent} .fx-eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#EEB762} .fx-eyebrow::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,#EEB762,transparent)} .fx-head{max-width:660px;margin-bottom:52px} .fx-head h2{margin:16px 0 15px;font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800; letter-spacing:-.035em;line-height:1.08;text-wrap:balance;color:#F8F8F8} .fx-head p{margin:0;color:#C4BCB1;font-size:1.02rem} [data-rise]{opacity:0;transform:translateY(26px); transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1)} [data-rise].in{opacity:1;transform:none} [data-stagger] > *{opacity:0;transform:translateY(22px); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)} [data-stagger].in > *{opacity:1;transform:none} /* ---------- buttons ---------- */ .fx-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:10px; font-size:.92rem;font-weight:600;text-decoration:none;cursor:pointer;position:relative; overflow:hidden;isolation:isolate;border:1px solid rgba(238,183,98,.42);color:#EEB762; background:transparent;transition:color .3s ease,transform .24s cubic-bezier(.16,1,.3,1),box-shadow .3s ease} .fx-btn span{position:relative;z-index:2} .fx-btn.solid{background:linear-gradient(100deg,#EEB762,#F3DBB2);color:#120E06;border-color:transparent; box-shadow:0 12px 34px -14px rgba(238,183,98,.7)} .fx-btn.solid::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,#F3DBB2,#fff3de);transform:translateX(-101%); transition:transform .44s cubic-bezier(.16,1,.3,1)} .fx-btn.solid:hover{transform:translateY(-2px);box-shadow:0 20px 46px -16px rgba(238,183,98,.9)} .fx-btn.solid:hover::before{transform:translateX(0)} .fx-btn.ghost{border-color:rgba(238,183,98,.15);color:#C4BCB1} .fx-btn.ghost:hover{color:#F8F8F8;border-color:rgba(238,183,98,.42);background:#171109} .fx-btn.lg{padding:17px 38px;font-size:1rem} /* ---------- hero ---------- */ .fx-hero{position:relative;overflow:hidden;padding:96px 0 84px;min-height:88vh;display:flex;align-items:center} .fx-hero-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .fx-aura{position:absolute;border-radius:50%;filter:blur(8px)} .fx-aura.a{left:-12%;top:-20%;width:900px;height:740px; background:radial-gradient(closest-side,rgba(238,183,98,.19),transparent 72%); animation:fxDrift 13s cubic-bezier(.22,.61,.36,1) infinite alternate} .fx-aura.b{right:-14%;top:22%;width:760px;height:640px; background:radial-gradient(closest-side,rgba(243,219,178,.1),transparent 70%); animation:fxDrift 17s cubic-bezier(.22,.61,.36,1) infinite alternate-reverse} @keyframes fxDrift{to{transform:translate3d(3%,-3%,0) scale(1.09)}} .fx-candles{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;opacity:.42} .fx-candles .w{stroke:rgba(238,183,98,.3);stroke-width:1} .fx-candles .b{fill:rgba(238,183,98,.17)} .fx-candles .b.dn{fill:rgba(138,107,58,.17)} .fx-trend{fill:none;stroke:url(#fxTrend);stroke-width:2;stroke-linecap:round; stroke-dasharray:2400;stroke-dashoffset:2400;animation:fxDraw 3s cubic-bezier(.16,1,.3,1) .4s forwards} @keyframes fxDraw{to{stroke-dashoffset:0}} /* THREE BANDS, NOT TWO COLUMNS. `.fx-hero-grid{grid-template-columns:1.04fr .96fr}` was the inherited 50/50 copy-left / art-right split. The replacement is a positioned composition: .fx-hero-copy is normal flow and owns the full 1240px measure, so the h1 runs edge to edge; .fx-hero-scene is taken OUT of flow and pinned to the right, overlapping the headline's right half and bleeding past the wrap padding. The headline crossing the artwork is the whole point and is exactly what a two-column grid cannot express. */ /* width:100% is load-bearing. .fx-hero is `display:flex`, so this wrap is a FLEX ITEM: with no width it shrink-to-fits its content and the 1240px measure collapses (measured at 610px). The old .fx-hero-grid escaped this only because its explicit grid columns gave it an intrinsic width. */ .fx-hero-lay{position:relative;width:100%;min-height:min(620px,72vh)} .fx-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:30px; border:1px solid rgba(238,183,98,.42);background:rgba(238,183,98,.07);color:#EEB762; font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase} .fx-pill i{width:6px;height:6px;border-radius:50%;background:#22C55E;animation:fxPing 2s ease-in-out infinite} @keyframes fxPing{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.55)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(34,197,94,0)}} .fx-hero-copy h1{margin:22px 0 0;font-size:clamp(2.6rem,6.4vw,4.7rem);font-weight:900; letter-spacing:-.045em;line-height:1.04;color:#F8F8F8} .fx-hero-copy h1 span{display:block;overflow:hidden;padding-bottom:.05em} .fx-hero-copy h1 i{display:block;font-style:normal;transform:translateY(110%); transition:transform .9s cubic-bezier(.16,1,.3,1)} body.fx-ready .fx-hero-copy h1 span:nth-child(1) i{transform:none;transition-delay:.12s} body.fx-ready .fx-hero-copy h1 span:nth-child(2) i{transform:none;transition-delay:.22s} /* The copy column sits ABOVE the scene and only claims the width it needs, so the artwork behind it stays visible on the right. z-index 2 over the scene's 1; the scene is decoration and never takes a pointer event. */ .fx-hero-copy{position:relative;z-index:2} /* BAND 3. The lede and the buttons drop into a narrow column under the LEFT half of the headline — the asymmetry is the composition, not a leftover. */ .fx-hero-lower{max-width:min(52%,560px)} .fx-hero-lower > p{margin:24px 0 32px;max-width:47ch;color:#C4BCB1;font-size:1.08rem; opacity:0;transform:translateY(14px);transition:all .7s cubic-bezier(.16,1,.3,1) .38s} body.fx-ready .fx-hero-lower > p{opacity:1;transform:none} @media(max-width:1020px){.fx-hero-lower{max-width:none}} .fx-hero-act{display:flex;gap:13px;flex-wrap:wrap;opacity:0;transform:scale(.96); transition:all .64s cubic-bezier(.16,1,.3,1) .54s} body.fx-ready .fx-hero-act{opacity:1;transform:none} /* ---------- proof band (01a) ---------- The stopped ticker. .fx-hero-stats and .fx-star were deleted with the
they styled; these rules replace them. AURORA AT .38. This band is nothing but small tabular figures, and full strength puts moving light under them. That is the documented split: 1 for marketing and empty states, .38 for anything carrying numbers. THE HAIRLINES ARE A 1px GRID GAP, NOT BORDERS. `gap:1px` over a hairline background lets the ground show through as the rule, so the separators are correct for ANY column count and — unlike border-left — draw the horizontal rule between wrapped rows too, with no first-child exceptions to maintain. The column count comes from --n (set by PHP from the row count), so an operator adding an eighth row in Office gets eight columns, not seven plus an orphan. */ .fx-proof{--aurora-strength:.38;position:relative;padding:0 0 8px} .fx-proof-grid{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr)); gap:1px;margin:0;background:rgba(238,183,98,.15); border:1px solid rgba(238,183,98,.15);border-radius:14px;overflow:hidden} .fx-proof-cell{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;min-width:0;padding:20px 10px;text-align:center;background:#0A0806} /* Figures are the one thing on this band that must not shrink to fit: clamp keeps "$12,458,670+" — the longest of the seven — inside a 1/7 column at 1240px without dropping below a readable size on a phone. */ .fx-proof-cell dd{margin:0;max-width:100%;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:clamp(.92rem,1.32vw,1.18rem);font-weight:700;letter-spacing:-.02em; font-variant-numeric:tabular-nums;color:#F8F8F8;line-height:1.15; overflow-wrap:anywhere} .fx-proof-cell dt{max-width:100%;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#AEA8A1;line-height:1.4} @media(max-width:1100px){.fx-proof-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:900px){.fx-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:600px){.fx-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .fx-proof-cell{padding:16px 8px}} /* ---------- hero scene + proof ledger ---------- OUT OF FLOW AND BLEEDING PAST THE WRAP. .fx-wrap has 26px of padding and a 1240px cap; `right` goes negative so the crest runs past that edge, which is what stops the artwork reading as "the picture in the right-hand column". inset-inline-end is clamped so it never pushes the document wider than the viewport — the page must not gain a horizontal scrollbar to make art bleed. */ .fx-hero-scene{position:absolute;z-index:1;top:50%;translate:0 -50%; right:clamp(-70px,-3vw,0px);width:min(58%,660px);pointer-events:none; opacity:0;transform:translateY(28px) scale(.97); transition:opacity 1s cubic-bezier(.16,1,.3,1) .36s,transform 1s cubic-bezier(.16,1,.3,1) .36s} body.fx-ready .fx-hero-scene{opacity:1;transform:none} .fx-crest{position:relative;display:block; filter:drop-shadow(0 26px 56px rgba(238,183,98,.34)); animation:fxFloat 7s cubic-bezier(.22,.61,.36,1) infinite alternate} @keyframes fxFloat{to{transform:translateY(-15px)}} /* MANDATORY. bull-candlestick.webp is a render on a SOLID BLACK ground, so it must be screen-blended or it lands as a black rectangle over the aurora. Same treatment as index.php:173 and fpfx-loader.css:99. */ .fx-crest img{display:block;width:100%;height:auto} /* THE LEDGER replaces the four orbiting cards. One column, pinned to the right edge of the scene, three rows deep. Because it is ONE positioned element instead of four independently placed ones, there is no per-card coordinate left to drift — which is what produced the misalignment the user reported. */ /* The inset is clamped in px, not left at a bare %, because the scene bleeds PAST the wrap edge: at 2% of a 640px scene the panel's right edge measured 1268px against a 1265px viewport and .fx-hero{overflow:hidden} sliced 3px off its border. Percentages here are measured from a box that is deliberately wider than the page. */ .fx-ledger-wrap{position:absolute;z-index:3;right:clamp(30px,6%,64px);bottom:-4%;width:min(268px,84%); pointer-events:auto;padding:10px;border-radius:14px; background:rgba(13,11,10,.58);backdrop-filter:blur(14px); border:1px solid rgba(238,183,98,.22);box-shadow:0 30px 64px -26px rgba(0,0,0,.95)} .fx-ledger-head{display:flex;align-items:center;gap:7px;padding:2px 4px 9px; font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.14em; text-transform:uppercase;color:#AEA8A1;border-bottom:1px solid rgba(238,183,98,.15)} .fx-ledger-dot{width:6px;height:6px;border-radius:50%;background:#22C55E;flex:none; animation:fxPing 2s ease-in-out infinite} .fx-ledger-toggle{position:relative;margin-left:auto;width:20px;height:20px;flex:none; display:grid;place-items:center;padding:0;border-radius:5px;cursor:pointer; border:1px solid rgba(238,183,98,.28);background:rgba(238,183,98,.07);color:#EEB762} /* WCAG 2.5.8 (Target Size, Minimum) wants 24x24 CSS px of POINTER target. The button is drawn at 20x20 because a chunkier chip unbalances a 9px meta row, so the target is grown instead of the chrome: a transparent ::after makes the hit area larger while the visible control keeps its size. Without this the one control that earns the rotating list its 2.2.2 conformance would itself fail 2.5.8 — a fix for one success criterion breaking another. THE INSET IS -4px, NOT -2px, BECAUSE THE SCENE IS SCALED. .fx-hero-scene carries a transform that measures matrix(0.97, ...), so local CSS px are not rendered px: at inset -2px the 24px box measured 22px wide in the document and still failed. 20 + 2*4 = 28 local, which lands at 27.2 rendered — clear of 24 with room for the scale to change. Measured by hit-testing elementFromPoint at the corners, not by reading the box back. The hit area is also SQUARE (radius 4, not the button's 5+4) so the whole 24x24 bounding box is live: at radius 9 the on-axis extent measured 24 but the four corners fell outside the rounding and returned the parent. */ .fx-ledger-toggle::after{content:"";position:absolute;inset:-5px;border-radius:4px} .fx-ledger-toggle:hover{border-color:#EEB762;background:rgba(238,183,98,.15)} /* Visible focus is not optional: this is the control that makes the rotating list WCAG 2.2.2 conformant, so it has to be findable by keyboard. */ .fx-ledger-toggle:focus-visible{outline:2px solid #EEB762;outline-offset:2px} /* PAUSE and PLAY are drawn as two different SHAPES, never as colour alone — colour must never be the only signal. aria-pressed carries the same state to assistive technology and the accessible name changes with it. */ .fx-ledger-ico{display:block;width:7px;height:8px;background:currentColor; clip-path:polygon(0 0,2.5px 0,2.5px 8px,0 8px,0 0,4.5px 0,7px 0,7px 8px,4.5px 8px)} .fx-ledger-toggle[aria-pressed="true"] .fx-ledger-ico{clip-path:polygon(0 0,7px 4px,0 8px)} .fx-ledger{list-style:none;margin:0;padding:0;overflow:hidden} .fx-ledger-row{display:flex;align-items:center;gap:9px;padding:9px 4px; border-bottom:1px solid rgba(238,183,98,.09)} .fx-ledger-row:last-child{border-bottom:0} /* A queued row is genuinely absent from the box, not transparent — a 0-opacity row still takes height and would make the panel jump. */ .fx-ledger-row[data-queued]{display:none} /* The entry animation is one-shot and applied only by the script, so the FIRST PAINT is three fully opaque rows with no JS-applied opening state. That is what keeps the hero correct in a background tab, where rAF never fires. */ .fx-ledger-row.fx-ledger-in{animation:fxLedgerIn .52s cubic-bezier(.2,.8,.3,1) both} @keyframes fxLedgerIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} .fx-ledger-flag{flex:none;width:22px;height:15px;border-radius:2px;overflow:hidden; display:block;background:rgba(238,183,98,.1)} .fx-ledger-flag svg{display:block;width:22px;height:15px} .fx-ledger-who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .fx-ledger-who b{font-size:.78rem;font-weight:700;color:#F8F8F8; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-ledger-who small{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px; letter-spacing:.1em;text-transform:uppercase;color:#AEA8A1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-ledger-amt{flex:none;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums;color:#EEB762} /* BELOW 1020px the composition folds: the scene returns to the flow underneath the copy, because an overlapping headline needs width to stay readable. */ @media(max-width:1020px){ /* The scene is FIRST in the DOM so that, on desktop, the copy can paint over it without a z-index fight. Once the composition folds that source order would put the artwork above the headline and push the h1 under the fold, so the flow order is corrected here — with `order`, not by moving the markup, since the desktop overlap depends on the scene coming first. */ .fx-hero-lay{display:flex;flex-direction:column;min-height:0} .fx-hero-copy{order:1} .fx-hero-scene{order:2;position:relative;top:auto;right:auto;translate:none; width:min(460px,100%);margin:44px auto 0} .fx-ledger-wrap{position:relative;right:auto;bottom:auto;width:100%;margin-top:18px} } @media(max-width:600px){ .fx-hero-scene{width:100%;margin-top:32px} .fx-crest img{width:min(300px,72%);margin:0 auto} } /* ---------- marquees ---------- */ .fx-mask{position:relative;overflow:hidden} .fx-mask::before,.fx-mask::after{content:"";position:absolute;top:0;bottom:0;width:130px;z-index:3;pointer-events:none} .fx-mask::before{left:0;background:linear-gradient(90deg,#0A0806,transparent)} .fx-mask::after{right:0;background:linear-gradient(270deg,#0A0806,transparent)} .fx-certs .fx-mask::before{background:linear-gradient(90deg,#0A0806,transparent)} .fx-track{display:flex;width:max-content;gap:16px;animation:fxMarq 62s linear infinite} .fx-mask:hover .fx-track{animation-play-state:paused} @keyframes fxMarq{to{transform:translateX(-50%)}} /* ---------- certificates ---------- 300px is the tile width the Design B study itself assumed for this wall. It is also what keeps the marquee a sane height now the certificate is square: a 392px tile stands 392 + the ~47px meta strip = 439px tall, against a measured 347px at 300. It fits a 360px viewport too, which 392 never did. The cards are server-rendered by CertificateService::render() (index.php); the 880x550 client-side drawing that used to fill this track is gone. */ .fx-cert{width:300px;flex:none;border:1px solid rgba(238,183,98,.15);border-radius:15px; overflow:hidden;background:#171109;transition:transform .32s cubic-bezier(.16,1,.3,1), border-color .32s ease,box-shadow .32s ease} .fx-cert:hover{transform:translateY(-8px) scale(1.01);border-color:rgba(238,183,98,.42); box-shadow:0 30px 60px -28px rgba(238,183,98,.55)} /* DIRECT CHILD ONLY. As a descendant selector this claimed every inside the card, including the country flag in the meta strip, and stretched a 26x17 flag to 204x134 — which is what made the wall's flags look broken. The certificate artwork is the card's only direct child, so `>` keeps the intended rule and stops it reaching the flag or the 11px art glyphs. */ .fx-cert > svg{width:100%;height:auto;display:block} /* FPFX.flag() emits a viewBox'd SVG with no intrinsic size, so it needs an explicit one; flex:none stops the meta row's flex layout stretching it. */ .fx-cert-m svg.flag{flex:none;width:26px;height:17px;border-radius:2px} .fx-cert-m{display:flex;align-items:center;gap:9px;padding:13px 16px;font-size:.78rem;color:#AEA8A1; border-top:1px solid rgba(238,183,98,.15)} .fx-cert-v{margin-left:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px; letter-spacing:.1em;color:#22C55E;border:1px solid rgba(34,197,94,.3);background:rgba(34,197,94,.08); padding:3px 8px;border-radius:20px} /* ---------- feature grid ---------- */ .fx-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:880px){.fx-grid3{grid-template-columns:1fr}} .fx-feat{position:relative;overflow:hidden;padding:26px;border-radius:15px;background:#171109; border:1px solid rgba(238,183,98,.15); transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .32s ease} .fx-feat::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(320px 180px at var(--mx,50%) var(--my,0%),rgba(238,183,98,.13),transparent 70%); transition:opacity .42s ease} .fx-feat:hover{transform:translateY(-6px);border-color:rgba(238,183,98,.42)} .fx-feat:hover::after{opacity:1} .fx-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:15px;border-radius:11px; color:#EEB762;border:1px solid rgba(238,183,98,.42); background:linear-gradient(150deg,rgba(238,183,98,.2),rgba(238,183,98,.05)); transition:transform .32s cubic-bezier(.16,1,.3,1)} .fx-feat:hover .fx-ic{transform:translateY(-3px) rotate(-5deg)} .fx-feat h3{margin:0 0 8px;font-size:1.04rem;font-weight:700;color:#F8F8F8} .fx-feat p{margin:0;color:#C4BCB1;font-size:.88rem;line-height:1.65} /* ---------- plan builder ---------- */ .fx-builder{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start} @media(max-width:1000px){.fx-builder{grid-template-columns:1fr}} .fx-pick{padding:28px;border-radius:18px;background:#171109;border:1px solid rgba(238,183,98,.15)} .fx-step{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px} .fx-step > span{flex:none;padding:5px 9px;border-radius:7px;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;color:#EEB762;border:1px solid rgba(238,183,98,.42)} .fx-step b{display:block;font-size:.97rem;color:#F8F8F8} .fx-step small{color:#AEA8A1;font-size:.8rem} .fx-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:28px} .fx-opts-4{grid-template-columns:repeat(4,1fr)} @media(max-width:560px){.fx-opts,.fx-opts-4{grid-template-columns:repeat(2,1fr)}} .fx-opt{display:block;position:relative;overflow:hidden;text-align:left;cursor:pointer;padding:14px;border-radius:12px; background:#100C08;border:1px solid rgba(238,183,98,.15);color:#C4BCB1;font-family:inherit; transition:all .3s cubic-bezier(.16,1,.3,1)} .fx-opt:hover{transform:translateY(-3px);border-color:rgba(238,183,98,.42);color:#F8F8F8} .fx-opt.on{background:#2E2116;border-color:rgba(238,183,98,.42);color:#F8F8F8} .fx-opt.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,#F3DBB2,#8A6B3A)} .fx-opt em{display:block;font-style:normal;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;letter-spacing:.14em;color:#AEA8A1} .fx-opt strong{display:block;margin-top:3px;font-size:1rem;font-weight:700;letter-spacing:-.025em} .fx-opt i{display:block;margin-top:3px;font-style:normal;font-size:.72rem;color:#AEA8A1;line-height:1.3} .fx-opt.on i{color:#C09553} .fx-opt u{display:inline-block;margin-top:7px;text-decoration:none;padding:2px 6px;border-radius:4px; font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:.08em; background:rgba(239,68,68,.14);color:#ff8b8b;border:1px solid rgba(239,68,68,.3)} .fx-opt.on u{background:rgba(238,183,98,.16);color:#EEB762;border-color:rgba(238,183,98,.42)} .fx-quote{position:relative;overflow:hidden;padding:26px;border-radius:18px; border:1px solid rgba(238,183,98,.42);background:linear-gradient(165deg,#2E2116,#171109)} .fx-quote-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px} .fx-quote-top span{padding:5px 11px;border-radius:7px;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px;letter-spacing:.1em;color:#EEB762;border:1px solid rgba(238,183,98,.42)} .fx-quote-top b{padding:5px 11px;border-radius:6px;font-family:"JetBrains Mono",ui-monospace,monospace; /* #DC2626 not --bad #EF4444: white on #EF4444 measures 3.76:1, which fails WCAG AA for 10.5px text. #DC2626 measures 4.83:1 and reads as the same red at this size. --bad stays #EF4444 everywhere it is used as a FILL BAR or a BORDER, where no text sits on it. */ font-size:10.5px;letter-spacing:.08em;background:#DC2626;color:#fff; animation:fxPulse 2.6s ease-in-out infinite} @keyframes fxPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}} /* EVERY FIGURE TAKES JetBrains Mono. This was inverted: .fx-price del, .fx-save small and .fx-quote > small -- the LABELS beside the numbers -- already carried the mono face, while the numbers themselves rendered in DM Sans. Measured on the homepage: 23 HTML figures in DM Sans, including the whole price ladder and all twelve payout amounts, which are the most figure-like content on the page. Grouped in one rule so the next figure added to this file has an obvious place to go. tabular-nums is set alongside because these are columns of money that must align; the mono face alone does not guarantee it for the currency glyph. The SVG inside .fx-cert is deliberately NOT here -- that is certificate artwork with its own approved typography. */ .fx-opt strong, .fx-quote-size, .fx-price strong, .fx-save b, .fx-pay strong, .fx-rw-meta span{ font-family:var(--au-mono,"JetBrains Mono",ui-monospace,monospace); font-variant-numeric:tabular-nums; } .fx-quote-size{font-size:2.1rem;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#F8F8F8} .fx-quote > small{display:block;margin-top:2px;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#AEA8A1} .fx-quote-blurb{margin:10px 0 0;color:#C4BCB1;font-size:.84rem;line-height:1.55} .fx-price{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-top:20px;padding:17px 0; border-block:1px solid rgba(238,183,98,.1)} .fx-price strong{font-size:2.6rem;font-weight:900;letter-spacing:-.045em;line-height:1; font-variant-numeric:tabular-nums;color:#F8F8F8} .fx-price del{color:#AEA8A1;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1rem;padding-bottom:4px} .fx-save{margin-left:auto;text-align:right} .fx-save small{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px; letter-spacing:.14em;text-transform:uppercase;color:#AEA8A1} .fx-save b{font-size:1.2rem;font-weight:800;color:#22C55E;font-variant-numeric:tabular-nums} /* minmax(0,1fr), not 1fr: a grid item's default min-width is auto, so with a bare 1fr the three phase cards refused to shrink below their min-content width, ran 296px wide inside a 239px container and had the third card - the Funded column, the one carrying the em-dash target - clipped off by .fx-quote's overflow:hidden at 360px. Below 620px they stack instead: three columns of figures in 90px each was unreadable even before it overflowed. */ .fx-phases{display:grid;gap:9px;margin:16px 0;grid-template-columns:repeat(2,minmax(0,1fr))} .fx-phases.c1{grid-template-columns:minmax(0,1fr)} .fx-phases.c3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:620px){ .fx-phases,.fx-phases.c1,.fx-phases.c3{grid-template-columns:minmax(0,1fr)} } .fx-phase{padding:14px;border-radius:11px;background:#100C08;border:1px solid rgba(238,183,98,.15); transition:border-color .3s ease,transform .3s cubic-bezier(.16,1,.3,1)} .fx-phase:hover{border-color:rgba(238,183,98,.42);transform:translateY(-2px)} .fx-phase.funded{background:linear-gradient(160deg,rgba(238,183,98,.11),#100C08);border-color:rgba(238,183,98,.42)} .fx-phase h4{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:.86rem;font-weight:700;color:#F8F8F8} .fx-phase h4 em{font-style:normal;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;color:#EEB762} .fx-phase div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-size:.78rem;color:#AEA8A1} .fx-phase div b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:600;color:#F8F8F8} .fx-facts{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px} .fx-facts span{padding:6px 10px;border-radius:20px;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px;color:#C4BCB1;background:#100C08;border:1px solid rgba(238,183,98,.15); transition:all .3s ease} .fx-facts span:hover{border-color:rgba(238,183,98,.42);color:#EEB762} .fx-secure{margin:13px 0 0;text-align:center;font-size:.75rem;color:#AEA8A1;line-height:1.5} /* ---------- rules ---------- */ .fx-rules{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} @media(max-width:900px){.fx-rules{grid-template-columns:repeat(2,1fr)}} .fx-rule{padding:24px;border-radius:15px;background:#171109;border:1px solid rgba(238,183,98,.15); transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .32s ease} .fx-rule:hover{transform:translateY(-5px);border-color:rgba(238,183,98,.42)} .fx-rule b{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:2.5rem;font-weight:800;letter-spacing:-.045em; font-variant-numeric:tabular-nums;color:#F8F8F8} .fx-rule h3{margin:5px 0 4px;font-size:.9rem;font-weight:600;color:#F8F8F8} .fx-rule p{margin:0;font-size:.79rem;color:#AEA8A1;line-height:1.5} .fx-bar{height:3px;border-radius:2px;background:rgba(238,183,98,.12);margin-top:16px;overflow:hidden} .fx-bar i{display:block;height:100%;width:0;border-radius:2px; background:linear-gradient(90deg,#8A6B3A,#F3DBB2);transition:width 1.3s cubic-bezier(.16,1,.3,1)} /* ---------- process ---------- */ .fx-proc{position:relative} .fx-proc-rail{position:absolute;left:0;right:0;top:33px;height:2px;border-radius:2px; background:rgba(238,183,98,.13)} .fx-proc-rail i{display:block;height:100%;width:0;border-radius:2px; background:linear-gradient(90deg,#8A6B3A,#F3DBB2);transition:width .18s linear} @media(max-width:1080px){.fx-proc-rail{display:none}} .fx-proc-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} @media(max-width:1080px){.fx-proc-cards{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){.fx-proc-cards{grid-template-columns:1fr}} .fx-pcard{position:relative;padding:56px 20px 22px;border-radius:15px;background:#171109; border:1px solid rgba(238,183,98,.15);transition:all .32s cubic-bezier(.16,1,.3,1)} .fx-pcard:hover{transform:translateY(-7px);border-color:rgba(238,183,98,.42); box-shadow:0 28px 56px -30px rgba(238,183,98,.5)} .fx-pn{position:absolute;top:20px;left:20px;display:grid;place-items:center;width:28px;height:28px; border-radius:50%;background:#0A0806;border:1px solid rgba(238,183,98,.42); font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;color:#EEB762} .fx-pic{position:absolute;top:19px;right:20px;color:#EEB762;opacity:.5; transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1)} .fx-pcard:hover .fx-pic{opacity:1;transform:translateY(-2px) rotate(-6deg)} .fx-pcard h3{margin:0 0 8px;font-size:1rem;font-weight:700;color:#F8F8F8} .fx-pcard p{margin:0;color:#C4BCB1;font-size:.85rem;line-height:1.6} .fx-pmeta{display:inline-block;margin-top:13px;padding:4px 9px;border-radius:20px; font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.12em; text-transform:uppercase;color:#C09553;border:1px solid rgba(238,183,98,.15)} .fx-pcard:hover .fx-pmeta{color:#EEB762;border-color:rgba(238,183,98,.42)} /* ---------- flags ---------- */ .fx-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px} .fx-flag{display:grid;place-items:center;gap:9px;padding:15px 10px 13px;border-radius:12px; background:#171109;border:1px solid rgba(238,183,98,.15);text-align:center; transition:all .3s cubic-bezier(.16,1,.3,1)} .fx-flag:hover{transform:translateY(-5px) scale(1.05);border-color:rgba(238,183,98,.42);background:#2E2116;z-index:2} .fx-flag svg{border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.55); transition:transform .3s cubic-bezier(.16,1,.3,1)} .fx-flag:hover svg{transform:scale(1.14)} .fx-flag > span:last-child{font-size:.73rem;line-height:1.3;color:#AEA8A1;transition:color .3s ease} .fx-flag:hover > span:last-child{color:#F8F8F8} /* ---------- payouts ---------- */ .fx-bigstats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:42px} @media(max-width:880px){.fx-bigstats{grid-template-columns:repeat(2,1fr)}} .fx-bigstat{padding:26px;border-radius:15px;background:#171109;border:1px solid rgba(238,183,98,.15); transition:all .32s cubic-bezier(.16,1,.3,1)} .fx-bigstat:hover{transform:translateY(-6px);border-color:rgba(238,183,98,.42)} .fx-bigstat b{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;display:block;font-size:2.2rem;font-weight:800;letter-spacing:-.04em; font-variant-numeric:tabular-nums;color:#F8F8F8} .fx-bigstat span{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px; letter-spacing:.14em;text-transform:uppercase;color:#AEA8A1} .fx-payrow{animation-duration:58s} .fx-pay{width:268px;flex:none;position:relative;overflow:hidden;padding:19px;border-radius:14px; background:#171109;border:1px solid rgba(238,183,98,.15);transition:all .32s cubic-bezier(.16,1,.3,1)} .fx-pay:hover{transform:translateY(-6px);border-color:rgba(238,183,98,.42); box-shadow:0 24px 50px -24px rgba(238,183,98,.5)} .fx-pay-w{display:flex;align-items:center;gap:9px;margin-bottom:11px} .fx-pay-w svg{border-radius:3px;filter:grayscale(1);opacity:.55;transition:all .3s ease} .fx-pay:hover .fx-pay-w svg{filter:none;opacity:1} .fx-pay-w b{font-size:.9rem;font-weight:600;color:#F8F8F8} .fx-pay-w em{display:block;font-style:normal;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;letter-spacing:.1em;color:#AEA8A1} .fx-pay p{margin:0;min-height:66px;font-size:.83rem;color:#C4BCB1;line-height:1.55} .fx-pay strong{display:block;margin-top:12px;font-size:1.32rem;font-weight:800; font-variant-numeric:tabular-nums;color:#F8F8F8;transition:color .3s ease} .fx-pay:hover strong{color:#EEB762} .fx-pay u{display:inline-block;margin-top:7px;text-decoration:none;padding:3px 9px;border-radius:20px; font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#22C55E; background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28)} /* ---------- reviews ---------- */ .fx-rw{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px;border-radius:14px; background:#100C08;border:1px solid rgba(238,183,98,.15);transition:border-color .3s ease} .fx-rw:hover{border-color:rgba(238,183,98,.42)} .fx-rw-score{display:flex;flex-direction:column;gap:5px} .fx-rw-score b{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:1.8rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:#F8F8F8} .fx-stars{position:relative;display:inline-flex;gap:2px} .fx-stars i{width:14px;height:14px;display:block;background:rgba(238,183,98,.2); clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} .fx-stars span{position:absolute;inset:0;display:inline-flex;gap:2px;overflow:hidden} .fx-stars span i{background:linear-gradient(180deg,#F3DBB2,#EEB762)} .fx-stars.sm i{width:11px;height:11px} .fx-rw-meta{flex:1;min-width:150px} .fx-rw-meta b{display:block;font-size:.96rem;color:#F8F8F8} .fx-rw-meta small{color:#AEA8A1;font-size:.8rem} .fx-rw-act{display:flex;gap:8px;flex-wrap:wrap} .fx-rw-btn{padding:9px 15px;border-radius:8px;font-size:.8rem;text-decoration:none;color:#C4BCB1; border:1px solid rgba(238,183,98,.15);transition:all .3s cubic-bezier(.16,1,.3,1)} .fx-rw-btn:hover{color:#EEB762;border-color:rgba(238,183,98,.42);background:#171109;transform:translateY(-2px)} .fx-rw-btn.primary{color:#EEB762;border-color:rgba(238,183,98,.42)} .fx-rw-btn.primary:hover{background:linear-gradient(100deg,#EEB762,#F3DBB2);color:#120E06} .fx-reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px} @media(max-width:880px){.fx-reviews{grid-template-columns:1fr}} .fx-review{padding:20px;border-radius:14px;background:#171109;border:1px solid rgba(238,183,98,.15); transition:all .32s cubic-bezier(.16,1,.3,1)} .fx-review:hover{transform:translateY(-5px);border-color:rgba(238,183,98,.42)} .fx-review-top{display:flex;align-items:center;gap:10px;margin-bottom:11px} .fx-av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none; background:linear-gradient(140deg,#EEB762,#8A6B3A);color:#120E06;font-weight:800} .fx-review-top b{font-size:.88rem;font-weight:600;color:#F8F8F8} .fx-review-top small{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;color:#AEA8A1} .fx-review p{margin:9px 0 0;font-size:.85rem;color:#C4BCB1;line-height:1.6} /* ---------- faq ---------- */ .fx-faq{display:flex;flex-direction:column;gap:9px;max-width:840px} .fx-faq details{border-radius:12px;background:#171109;border:1px solid rgba(238,183,98,.15); overflow:hidden;transition:border-color .3s ease} .fx-faq details[open]{border-color:rgba(238,183,98,.42)} .fx-faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:.95rem;font-weight:600; display:flex;justify-content:space-between;align-items:center;gap:14px;color:#F8F8F8; transition:background .3s ease} .fx-faq summary::-webkit-details-marker{display:none} .fx-faq summary:hover{background:#211810} .fx-faq summary::after{content:"+";flex:none;font-family:"JetBrains Mono",ui-monospace,monospace; font-size:1.3rem;color:#EEB762;transition:transform .32s cubic-bezier(.16,1,.3,1)} .fx-faq details[open] summary::after{transform:rotate(45deg)} .fx-faq-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1)} .fx-faq details[open] .fx-faq-b{grid-template-rows:1fr} .fx-faq-b > div{overflow:hidden} .fx-faq-b p{margin:0;padding:0 22px 19px;color:#C4BCB1;font-size:.89rem;line-height:1.7} /* ---------- final ---------- */ .fx-final{position:relative;overflow:hidden;padding:110px 0;text-align:center} .fx-final::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(680px 340px at 50% 44%,rgba(238,183,98,.17),transparent 70%); animation:fxDrift 9s cubic-bezier(.22,.61,.36,1) infinite alternate} .fx-final h2{margin:18px auto;max-width:16ch;font-size:clamp(2.1rem,5vw,3.5rem);font-weight:900; letter-spacing:-.045em;line-height:1.06;color:#F8F8F8} .fx-final p{margin:0 auto 32px;max-width:52ch;color:#C4BCB1} @media (prefers-reduced-motion:reduce){ .fx-hero *,.fx-track,.fx-aura,.fx-final::before{animation:none !important} [data-rise],[data-stagger] > *{opacity:1 !important;transform:none !important} .fx-hero-copy h1 i{transform:none !important} *,*::before,*::after{transition-duration:.001ms !important} } /* ---------- 09 · affiliate cut ---------- Own ground, not a band in the alternation. One rail, the tiers printed on it as stops, and a readout that moves with the thumb. Colours, radii and the easing curve are the ones already in this file; nothing new is introduced and --muted-2 (#AEA8A1) is not touched — the 10-11px meta below uses #AEA8A1, which is this page's contrast floor. */ .fx-cut{position:relative;overflow:hidden;padding:104px 0; background:linear-gradient(180deg,#100C08,#171109 46%,#100C08)} .fx-cut::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(760px 380px at 18% 32%,rgba(238,183,98,.13),transparent 68%), radial-gradient(560px 300px at 88% 78%,rgba(238,183,98,.08),transparent 70%)} .fx-cut > .fx-wrap{position:relative;z-index:2} .fx-cut-head{max-width:640px;margin-bottom:46px} .fx-cut-head h2{margin:16px 0 15px;font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800; letter-spacing:-.035em;line-height:1.08;text-wrap:balance;color:#F8F8F8} .fx-cut-head p{margin:0;color:#C4BCB1;font-size:1.02rem;max-width:56ch} /* The rig: control on the left, readout on the right, one panel. */ .fx-cut-rig{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0; border:1px solid rgba(238,183,98,.15);border-radius:18px;overflow:hidden; background:rgba(13,11,8,.86);backdrop-filter:blur(12px); transition:border-color .3s ease,box-shadow .3s ease} .fx-cut-rig:hover,.fx-cut-rig:focus-within{border-color:rgba(238,183,98,.42); box-shadow:0 34px 72px -34px rgba(238,183,98,.5)} .fx-cut-ctl{padding:34px 34px 26px;min-width:0} .fx-cut-ctl-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px} .fx-cut-lab{font-size:.9rem;font-weight:600;color:#F8F8F8} .fx-cut-n{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:1.5rem; font-weight:700;color:#EEB762;font-variant-numeric:tabular-nums;line-height:1} /* The rail. --fill is a percentage the script rewrites; the track gradient reads it, so dragging repaints without a layout pass. */ .fx-cut-range{-webkit-appearance:none;appearance:none;width:100%;height:26px; background:transparent;cursor:pointer;display:block;margin:0} .fx-cut-range::-webkit-slider-runnable-track{height:6px;border-radius:99px; background:linear-gradient(90deg,#EEB762 0,#F3DBB2 var(--fill,0%),rgba(238,183,98,.14) var(--fill,0%))} .fx-cut-range::-moz-range-track{height:6px;border-radius:99px;background:rgba(238,183,98,.14)} .fx-cut-range::-moz-range-progress{height:6px;border-radius:99px; background:linear-gradient(90deg,#EEB762,#F3DBB2)} .fx-cut-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:22px;height:22px;margin-top:-8px;border-radius:50%;border:2px solid #120E06; background:linear-gradient(140deg,#F3DBB2,#EEB762); box-shadow:0 6px 18px -4px rgba(238,183,98,.85); transition:transform .24s cubic-bezier(.16,1,.3,1)} .fx-cut-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;border:2px solid #120E06; background:linear-gradient(140deg,#F3DBB2,#EEB762); box-shadow:0 6px 18px -4px rgba(238,183,98,.85); transition:transform .24s cubic-bezier(.16,1,.3,1)} .fx-cut-range:hover::-webkit-slider-thumb, .fx-cut-range:active::-webkit-slider-thumb{transform:scale(1.14)} .fx-cut-range:hover::-moz-range-thumb, .fx-cut-range:active::-moz-range-thumb{transform:scale(1.14)} /* Focus is drawn on the thumb, not on the 26px-tall transparent box, so keyboard focus is visible exactly where the control is. */ .fx-cut-range:focus{outline:none} .fx-cut-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #100C08,0 0 0 6px #EEB762} .fx-cut-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #100C08,0 0 0 6px #EEB762} /* Printed stops. --at is the position along the rail, set in PHP from the tier unlock threshold, so a changed threshold moves the label. */ .fx-cut-stops{list-style:none;margin:14px 0 0;padding:0;position:relative;height:46px} .fx-cut-stop{position:absolute;top:0;left:var(--at,0%);transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center; min-width:64px;transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1)} .fx-cut-stop::before{content:"";width:1px;height:9px;background:rgba(238,183,98,.3);margin-bottom:2px} .fx-cut-stop b{font-size:.76rem;font-weight:600;color:#AEA8A1;letter-spacing:.01em; transition:color .3s ease} .fx-cut-stop i{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-style:normal; font-size:10.5px;letter-spacing:.08em;color:#AEA8A1;transition:color .3s ease} .fx-cut-stop:first-child{transform:translateX(-20%)} .fx-cut-stop.on{transform:translateX(-50%) translateY(-2px)} .fx-cut-stop:first-child.on{transform:translateX(-20%) translateY(-2px)} .fx-cut-stop.on::before{background:#EEB762;height:12px} .fx-cut-stop.on b{color:#F8F8F8} .fx-cut-stop.on i{color:#EEB762} .fx-cut-read{padding:34px 30px;min-width:0;display:flex;flex-direction:column;gap:6px; border-left:1px solid rgba(238,183,98,.15);background:rgba(238,183,98,.045)} .fx-cut-k{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10.5px; letter-spacing:.2em;text-transform:uppercase;color:#AEA8A1} .fx-cut-tier{font-size:1.22rem;font-weight:700;color:#F8F8F8;letter-spacing:-.01em;margin-bottom:14px} .fx-cut-out{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:clamp(2rem,4.4vw,2.9rem); font-weight:700;line-height:1;font-variant-numeric:tabular-nums; background:linear-gradient(100deg,#F3DBB2,#EEB762 44%,#8A6B3A); -webkit-background-clip:text;background-clip:text;color:transparent} .fx-cut-basis{margin:16px 0 0;font-size:.8rem;line-height:1.65;color:#AEA8A1} .fx-cut-avg{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;color:#EEB762; font-variant-numeric:tabular-nums} .fx-cut-note{margin:20px 0 0;max-width:70ch;font-size:.8rem;line-height:1.7;color:#AEA8A1} .fx-cut-act{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px} @media (max-width:900px){ .fx-cut{padding:82px 0} .fx-cut-rig{grid-template-columns:1fr} .fx-cut-read{border-left:0;border-top:1px solid rgba(238,183,98,.15)} } /* Below this width the rail is ~320px and the first two thresholds sit 47px apart, so absolutely-positioned labels overlap — measured at 375px, VIP 36-100 against Elite 83-147. Rather than shrink the type under the contrast floor, the stops stop pretending to be positioned and become a legend: the rail still fills and the thumb still moves, and the active tier is still the one lit up, which is the information the labels were carrying. */ @media (max-width:560px){ .fx-cut-ctl{padding:26px 22px 20px} .fx-cut-read{padding:26px 22px} .fx-cut-stops{position:static;height:auto;display:flex;justify-content:space-between; gap:8px;margin-top:16px} .fx-cut-stop{position:static;left:auto;transform:none;min-width:0; flex-direction:row;align-items:baseline;gap:6px} .fx-cut-stop:first-child,.fx-cut-stop:first-child.on,.fx-cut-stop.on{transform:none} .fx-cut-stop::before{display:none} .fx-cut-stop b{font-size:.74rem} } /* ---------- 12 · knowledge base ---------- Alt ground, two columns. The split is the point: every other band on this page is a full-width header over a grid, and after six accordion rows the change of shape is what says this is a different kind of thing. */ .fx-kb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start} .fx-kb-l{min-width:0} .fx-kb-l .fx-head{margin-bottom:30px} .fx-kb-form{margin:0 0 28px} .fx-kb-lab{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10.5px; letter-spacing:.2em;text-transform:uppercase;color:#AEA8A1;margin-bottom:10px} .fx-kb-field{display:flex;gap:10px;flex-wrap:wrap} .fx-kb-input{flex:1 1 220px;min-width:0;padding:14px 16px;border-radius:10px; border:1px solid rgba(238,183,98,.15);background:#100C08;color:#F8F8F8; font-family:inherit;font-size:.95rem; transition:border-color .3s ease,box-shadow .3s ease} .fx-kb-input::placeholder{color:#AEA8A1} .fx-kb-input:hover{border-color:rgba(238,183,98,.3)} .fx-kb-input:focus{outline:none;border-color:#EEB762;box-shadow:0 0 0 3px rgba(238,183,98,.18)} .fx-kb-input::-webkit-search-cancel-button{filter:grayscale(1) brightness(2.4)} .fx-kb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:30px} .fx-kb-stat{padding:16px 14px;border-radius:12px;border:1px solid rgba(238,183,98,.15); background:rgba(238,183,98,.045)} .fx-kb-stat b{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:1.5rem;font-weight:700;color:#EEB762;font-variant-numeric:tabular-nums;line-height:1} .fx-kb-stat span{display:block;margin-top:7px;font-size:.76rem;line-height:1.4;color:#AEA8A1} .fx-kb-h{margin:0 0 14px;display:flex;align-items:baseline;gap:10px; font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:#AEA8A1} .fx-kb-n{font-size:11px;font-weight:700;color:#EEB762;font-variant-numeric:tabular-nums} .fx-kb-chips ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:9px} .fx-kb-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:99px; border:1px solid rgba(238,183,98,.15);background:#100C08;color:#C4BCB1; font-size:.82rem;text-decoration:none; transition:color .3s ease,border-color .3s ease,transform .24s cubic-bezier(.16,1,.3,1)} .fx-kb-chip em{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-style:normal; font-size:10.5px;color:#AEA8A1;transition:color .3s ease} .fx-kb-chip:hover,.fx-kb-chip:focus-visible{color:#F8F8F8;border-color:rgba(238,183,98,.42); transform:translateY(-2px);outline:none} .fx-kb-chip:hover em,.fx-kb-chip:focus-visible em{color:#EEB762} .fx-kb-chip:focus-visible{box-shadow:0 0 0 3px rgba(238,183,98,.28)} .fx-kb-cta{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600; color:#EEB762;text-decoration:none;border-bottom:1px solid rgba(238,183,98,.3);padding-bottom:2px; transition:border-color .3s ease,color .3s ease} .fx-kb-cta:hover,.fx-kb-cta:focus-visible{color:#F3DBB2;border-color:#EEB762;outline:none} .fx-kb-cta:focus-visible{box-shadow:0 0 0 3px rgba(238,183,98,.28);border-radius:3px} .fx-kb-r{min-width:0;border:1px solid rgba(238,183,98,.15);border-radius:16px; background:rgba(13,11,8,.86);padding:24px 22px} .fx-kb-list{list-style:none;margin:0;padding:0;max-height:432px;overflow-y:auto; scrollbar-width:thin;scrollbar-color:rgba(238,183,98,.3) transparent} .fx-kb-list::-webkit-scrollbar{width:6px} .fx-kb-list::-webkit-scrollbar-thumb{background:rgba(238,183,98,.3);border-radius:99px} .fx-kb-row + .fx-kb-row{border-top:1px solid rgba(238,183,98,.09)} .fx-kb-row a{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:11px 10px;border-radius:8px;text-decoration:none;color:#C4BCB1; font-size:.89rem;line-height:1.45; transition:color .26s ease,background .26s ease,transform .26s cubic-bezier(.16,1,.3,1)} .fx-kb-row a:hover,.fx-kb-row a:focus-visible{color:#F8F8F8;background:#211810; transform:translateX(3px);outline:none} .fx-kb-row a:focus-visible{box-shadow:0 0 0 2px rgba(238,183,98,.55)} .fx-kb-row i{flex:none;font-style:normal;color:#AEA8A1;opacity:0;transform:translateX(-4px); transition:opacity .26s ease,transform .26s ease} .fx-kb-row a:hover i,.fx-kb-row a:focus-visible i{opacity:1;transform:translateX(0);color:#EEB762} .fx-kb-t mark{background:rgba(238,183,98,.22);color:#F3DBB2;border-radius:3px;padding:0 1px} /* Available to assistive technology, never painted. Used for the affiliate calculator's tier ladder, which is drawn as absolutely positioned decoration and therefore aria-hidden. Not display:none — that would hide it from screen readers too, which is the whole point of the element. */ .fx-a11y{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .fx-kb-empty{margin:14px 10px;font-size:.86rem;color:#AEA8A1} /* The empty state became an anchor: it must READ as one. Gold rather than the #AEA8A1 meta colour because this is the action, not a caption, and it clears the contrast floor comfortably at this size. */ .fx-kb-empty a{color:#EEB762;text-decoration:none;border-bottom:1px solid rgba(238,183,98,.35); padding-bottom:1px;transition:border-color .3s cubic-bezier(.2,.8,.3,1),color .3s cubic-bezier(.2,.8,.3,1)} .fx-kb-empty a:hover,.fx-kb-empty a:focus-visible{color:#F3C46A;border-bottom-color:#F3C46A;outline:none} .fx-kb-empty a:focus-visible{outline:2px solid #EEB762;outline-offset:3px;border-radius:2px} .fx-kb-all{display:inline-flex;align-items:center;gap:7px;margin-top:16px; font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:#AEA8A1;text-decoration:none;transition:color .3s ease} .fx-kb-all:hover,.fx-kb-all:focus-visible{color:#EEB762;outline:none} .fx-kb-all:focus-visible{box-shadow:0 0 0 3px rgba(238,183,98,.28);border-radius:3px} @media (max-width:960px){ .fx-kb{grid-template-columns:1fr;gap:38px} .fx-kb-list{max-height:none} } @media (max-width:560px){ .fx-kb-stats{grid-template-columns:1fr;gap:10px} .fx-kb-stat{display:flex;align-items:baseline;gap:12px} .fx-kb-stat span{margin-top:0} } /* The page-wide reduce block above already kills every transition and the rise animation. These are the two pieces of motion these sections add on top of it: the thumb scale and the row nudge. */ @media (prefers-reduced-motion:reduce){ .fx-cut-range:hover::-webkit-slider-thumb, .fx-cut-range:active::-webkit-slider-thumb{transform:none !important} .fx-cut-range:hover::-moz-range-thumb, .fx-cut-range:active::-moz-range-thumb{transform:none !important} .fx-kb-row a:hover,.fx-kb-row a:focus-visible, .fx-kb-chip:hover,.fx-kb-chip:focus-visible{transform:none !important} .fx-kb-row i{opacity:1 !important;transform:none !important} } /* ================================================================ PORTED FROM _design/home-preview.html Four blocks the approved design carried and the live page never received: the centred section head, the first-party mark row, the complete rule book, and the filtered single-open FAQ. The globe is appended AFTER all of them, at the very end of this file, because .fx-flag.fx-globe-lit and .fx-flag:hover are both specificity 0,2,0 and source order is the only thing separating them. Easing is cubic-bezier(.16,1,.3,1) throughout, matching every rule above it in this file rather than Aurora's canonical .2,.8,.3,1. Sweeping the whole sheet to the canon is a separate task; mixing the two inside one stylesheet would read as an accident. ================================================================ */ /* ---------- centred section head ---------- */ /* The rule before the eyebrow is a left-hand lead-in. Centred, it points at nothing and reads as a stray line, so it goes. */ .fx-head.fx-mid{max-width:760px;margin-left:auto;margin-right:auto;text-align:center} .fx-head.fx-mid .fx-eyebrow::before{display:none} /* ---------- 01b first-party marks ---------- */ #marks{padding:74px 0 58px} .fx-awards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:820px){.fx-awards{grid-template-columns:1fr}} .fx-award{position:relative;overflow:hidden;text-align:center;padding:26px 22px; border-radius:15px;background:#171109;border:1px solid rgba(238,183,98,.15); transition:transform .34s cubic-bezier(.16,1,.3,1),border-color .3s ease} /* The sheen is a pseudo-element on an overflow:hidden card, so it needs no extra node and cannot be reached by the flag-wall or certificate cascades. */ .fx-award::after{content:"";position:absolute;top:-60%;left:-40%;width:60%;height:220%; background:linear-gradient(100deg,transparent,rgba(243,219,178,.09),transparent); transform:rotate(18deg) translateX(-120%); transition:transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none} .fx-award:hover{transform:translateY(-6px);border-color:rgba(238,183,98,.42)} .fx-award:hover::after{transform:rotate(18deg) translateX(320%)} /* Width AND height are both explicit in the markup and repeated here: the three marks are square 96x96 canvases and the row needs one badge baseline. */ .fx-award-badge{display:block;width:78px;height:78px;margin:0 auto 14px; transition:transform .34s cubic-bezier(.16,1,.3,1)} .fx-award:hover .fx-award-badge{transform:scale(1.09) rotate(-3deg)} .fx-award b{display:block;font-size:.95rem;font-weight:600;color:#F8F8F8;margin-bottom:6px} .fx-award small{display:block;color:#C4BCB1;font-size:.78rem;line-height:1.55} /* ---------- 05b the complete rule book ---------- */ /* #rules now carries a tabular matrix, so the aurora behind it drops to the figure-screen intensity. Full strength puts drifting light under small numbers, which is exhausting on a page opened repeatedly. */ #rules{--aurora-strength:.38} .fx-rulebook{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;padding:26px 24px 24px; border-radius:18px;background:rgba(13,11,10,.58);border:1px solid rgba(238,183,98,.15); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .fx-rulebook-h{order:0;flex:1 0 100%;margin:0 0 4px;font-size:1.05rem;font-weight:700; letter-spacing:-.015em;color:#F8F8F8} /* The radio is clipped, not display:none, so it keeps its focus ring and its place in the accessibility tree. order:1 sits it with the tabs; it has no size, so it takes no room in the row. */ .fx-rulebook-radio{order:1;position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .fx-rulebook-tab{order:1;flex:1 1 150px;min-width:0;cursor:pointer; display:flex;align-items:center;gap:9px;flex-wrap:wrap; padding:11px 14px;border-radius:11px;border:1px solid transparent; background:transparent;color:#C4BCB1; transition:background .28s ease,border-color .28s ease,color .28s ease} .fx-rulebook-tab b{font-size:.88rem;font-weight:600;color:inherit} .fx-rulebook-tab small{flex:1 0 100%;padding-left:21px;font-size:.71rem;color:#AEA8A1;line-height:1.3} /* State is never carried by colour alone: the mark fills, the border appears and the weight lifts, all three together. */ .fx-rulebook-mark{flex:none;width:12px;height:12px;border-radius:50%; border:1px solid rgba(238,183,98,.42); transition:box-shadow .28s ease,border-color .28s ease} .fx-rulebook-tab:hover{background:#211810;color:#F8F8F8} /* THE TWO GENERIC RULES. No programme name appears in either, so a sixth programme activated in Office switches with no CSS edit. */ .fx-rulebook-radio:checked + .fx-rulebook-tab{background:#2E2116; border-color:rgba(238,183,98,.42);color:#EEB762} .fx-rulebook-radio:checked + .fx-rulebook-tab b{font-weight:700} .fx-rulebook-radio:checked + .fx-rulebook-tab .fx-rulebook-mark{ border-color:#EEB762;box-shadow:inset 0 0 0 3px #EEB762} .fx-rulebook-radio:focus-visible + .fx-rulebook-tab{outline:2px solid #EEB762;outline-offset:2px} .fx-rulebook-panel{order:2;flex:1 0 100%;min-width:0;display:none;margin-top:6px} .fx-rulebook-radio:checked + .fx-rulebook-tab + .fx-rulebook-panel{display:block} /* Six columns of figures. The matrix scrolls INSIDE this box on a narrow viewport; the page body must never scroll sideways. */ .fx-rulebook-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; border-radius:12px;border:1px solid rgba(238,183,98,.15);background:#171109} .fx-rulebook-matrix{width:100%;border-collapse:collapse;min-width:560px} .fx-rulebook-matrix th,.fx-rulebook-matrix td{padding:11px 14px;text-align:right; border-bottom:1px solid rgba(238,183,98,.1);white-space:nowrap} .fx-rulebook-matrix thead th{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#AEA8A1; font-weight:500;background:#211810} .fx-rulebook-matrix tbody th{text-align:left;font-size:.85rem;font-weight:600;color:#F8F8F8} .fx-rulebook-matrix thead th:first-child{text-align:left} .fx-rulebook-matrix td{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:.86rem;font-variant-numeric:tabular-nums;color:#F8F8F8} .fx-rulebook-matrix tbody tr:last-child th, .fx-rulebook-matrix tbody tr:last-child td{border-bottom:0} /* The funded stage is marked by the word in its row header first; the tint is a second, redundant signal, never the only one. */ .fx-rulebook-funded th,.fx-rulebook-funded td{background:rgba(238,183,98,.05)} .fx-rulebook-funded th{color:#EEB762} .fx-rulebook-intro{order:3;flex:1 0 100%;margin:16px 0 0;font-size:.8rem;color:#AEA8A1} .fx-rulebook-const{order:4;flex:1 0 100%;list-style:none;margin:10px 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px} .fx-rulebook-chip{padding:12px 14px;border-radius:11px;background:#171109; border:1px solid rgba(238,183,98,.15)} .fx-rulebook-chip b{display:block;font-size:.82rem;font-weight:600;color:#EEB762;margin-bottom:4px} .fx-rulebook-chip span{display:block;font-size:.75rem;color:#C4BCB1;line-height:1.5} .fx-rulebook-out{order:5;margin-top:18px;padding:11px 20px;font-size:.85rem} @media(max-width:700px){ .fx-rulebook{padding:20px 16px 18px} .fx-rulebook-tab{flex:1 1 100%} } /* ---------- 11 FAQ: centred, filtered, single-open ---------- */ .fx-faq-wrap{display:grid;grid-template-columns:1fr;gap:20px;max-width:860px;margin-inline:auto} /* .fx-faq caps itself at 840px for the left-aligned layout it used to have. Inside the wrap, the wrap is the constraint. */ .fx-faq-wrap .fx-faq{max-width:none} .fx-faq-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .fx-faq-cats:empty{display:none} .fx-fcat{font:inherit;cursor:pointer;background:transparent;border:1px solid transparent; border-radius:10px;padding:9px 13px;color:#C4BCB1;font-size:.85rem; display:inline-flex;align-items:center;gap:9px; transition:background .28s ease,border-color .28s ease,color .28s ease} .fx-fcat:hover{color:#F8F8F8;background:#171109} .fx-fcat:focus-visible{outline:2px solid #EEB762;outline-offset:2px} /* aria-pressed carries the state for AT; the border and the gold carry it visually. Both are set, so neither is doing the job alone. */ .fx-fcat[aria-pressed="true"]{background:#2E2116;border-color:rgba(238,183,98,.42);color:#EEB762} .fx-fcat b{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:9px; font-weight:500;color:#AEA8A1} .fx-fcat[aria-pressed="true"] b{color:#C09553} /* Namespaced to .fx-faq. A bare details{} rule here would reach the knowledge base section 200px below and the plinth footer on every surface. */ .fx-faq details{position:relative} .fx-faq details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:linear-gradient(180deg,#F3DBB2,#8A6B3A);transform:scaleY(0);transform-origin:top; transition:transform .32s cubic-bezier(.16,1,.3,1)} .fx-faq details[open]::before{transform:scaleY(1)} .fx-faq details.fx-hide{display:none} @media (prefers-reduced-motion:reduce){ .fx-award:hover{transform:none} .fx-award:hover::after{transform:rotate(18deg) translateX(-120%)} .fx-award:hover .fx-award-badge{transform:none} .fx-faq details::before{transition:none} } /* ================================================================ 07 WORLDWIDE NETWORK — globe stage Ported from _design/partials/globe-module.html (FPFX-GLOBE:CSS). THIS BLOCK IS LAST IN THE FILE ON PURPOSE. .fx-flag.fx-globe-lit and .fx-flag:hover are both specificity 0,2,0, so the only thing that makes a globe-driven highlight beat a stale hover state is source order. Nothing may be appended after it. Two renames against the module as written, applied to the CSS and to the JS in the same change: #flags -> .fx-flags and .fl -> .fx-flag, which are the class names this page has always used. A CSS-only rename would leave wireTiles() and tileCode() looking for elements that do not exist, and they fail silently with no console error. Every var() the module used is substituted for its literal. --mono, --sans, --ease, --ease-out, --t-base, --green and --ink-2 are NOT declared on the live document; --green in particular would have left the live indicator dot with no background at all. ================================================================ */ .fx-globe-stage{display:grid;grid-template-columns:minmax(280px,420px) 1fr; gap:52px;align-items:start} @media(max-width:1040px){ .fx-globe-stage{grid-template-columns:1fr;gap:38px} } /* --- the orb --- */ .fx-globe-orb{position:relative;margin:0;width:100%;max-width:420px; aspect-ratio:1;justify-self:center;touch-action:pan-y} .fx-globe-canvas{width:100%;height:100%;display:block;cursor:grab; border-radius:50%;outline-offset:6px} .fx-globe-canvas.fx-globe-dragging{cursor:grabbing} .fx-globe-canvas:focus-visible{outline:2px solid #EEB762;outline-offset:6px} /* --- caption chip --- */ .fx-globe-cap{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%); display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:#AEA8A1; border:1px solid rgba(238,183,98,.15);border-radius:20px;padding:6px 13px; background:rgba(13,11,10,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .fx-globe-cap b{color:#EEB762;font-weight:500;font-variant-numeric:tabular-nums} .fx-globe-dot{width:5px;height:5px;border-radius:50%;background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.16); animation:fxGlobeBlink 2.4s cubic-bezier(.16,1,.3,1) infinite} @keyframes fxGlobeBlink{0%,100%{opacity:.35}50%{opacity:1}} /* --- marker tooltip --- Two nodes on purpose: the outer node carries the per-frame position (fed as custom properties and never transitioned, so it tracks the drifting marker exactly); the inner node carries the fade and scale. One node doing both would leave the tooltip lagging 180ms behind its own marker. */ .fx-globe-tip{position:absolute;left:0;top:0;width:0;height:0; pointer-events:none;z-index:4; transform:translate(var(--fx-globe-x,0px),var(--fx-globe-y,0px))} .fx-globe-tip-in{position:absolute;left:0;bottom:0; transform:translate(-50%,-14px) scale(.94);transform-origin:50% 100%; opacity:0;display:flex;align-items:center;gap:9px;white-space:nowrap; border:1px solid rgba(238,183,98,.42);border-radius:11px;padding:8px 12px; background:rgba(13,11,10,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 16px 34px -14px rgba(0,0,0,.85); transition:opacity .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1); will-change:transform,opacity} .fx-globe-tip-on .fx-globe-tip-in{opacity:1;transform:translate(-50%,-14px) scale(1)} .fx-globe-tip-name{font-size:.83rem;font-weight:600;color:#F8F8F8;line-height:1} .fx-globe-tip-cc{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:9.5px;letter-spacing:.14em;color:#C09553;line-height:1} .fx-globe-tip-flag svg{border-radius:3px;display:block;box-shadow:0 1px 4px rgba(0,0,0,.55)} .fx-globe-cc-fb{display:inline-block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:11px;line-height:1;color:#EEB762;border:1px solid rgba(238,183,98,.42); border-radius:3px;padding:3px 5px;letter-spacing:.06em} /* --- right-hand column --- */ .fx-globe-side{display:flex;flex-direction:column;gap:14px;min-width:0} .fx-globe-list-h{display:block;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#AEA8A1} /* --- screen-reader text equivalent for the canvas --- */ .fx-globe-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0; border:0;overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%); list-style:none} .fx-globe-sr li{display:inline} /* --- cross-highlight: globe marker <-> flag tile --- */ .fx-flag{cursor:default} .fx-flag.fx-globe-lit{transform:translateY(-5px) scale(1.06); border-color:rgba(238,183,98,.42);background:#2E2116; box-shadow:0 0 0 1px rgba(238,183,98,.22),0 18px 34px -18px rgba(238,183,98,.5); z-index:3} .fx-flag.fx-globe-lit svg{transform:scale(1.14)} .fx-flag.fx-globe-lit > span:last-child{color:#F8F8F8} .fx-flag:focus-visible{outline:2px solid #EEB762;outline-offset:2px;border-color:#EEB762} @media (prefers-reduced-motion:reduce){ .fx-globe-dot{animation:none;opacity:.85} .fx-globe-tip-in{transition-duration:.001ms} .fx-globe-canvas{cursor:default} .fx-flag.fx-globe-lit{transform:none} .fx-flag.fx-globe-lit svg{transform:none} } /* ---------- 04b · full rule spec table ---------- The table under the price builder, with the plain-English column the user remembers. It re-renders from the same model selection as the builder. --aurora-strength:.38 because this block is nothing but tabular figures; full strength puts drifting light under small numbers. THE DESCRIPTION COLUMN NEVER CHANGES THE ROW HEIGHT. It holds a fixed 32% whether it is revealed or not — mirroring the row heading's width — and is hidden with opacity, not display. Revealing on hover with display:none would make every row jump under the pointer and the table reflow as you read it. */ .fx-spec{--aurora-strength:.38;margin-top:22px;border:1px solid rgba(238,183,98,.15); border-radius:15px;background:#171109;overflow:hidden} .fx-spec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:17px 22px;border-bottom:1px solid rgba(238,183,98,.15)} .fx-spec-head b{font-size:.94rem;color:#F8F8F8} .fx-spec-head small{color:#AEA8A1;font-size:.78rem} .fx-spec-scroll{overflow-x:auto} .fx-spec-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:560px} .fx-spec-table th,.fx-spec-table td{padding:12px 22px;text-align:left; border-bottom:1px solid rgba(238,183,98,.06)} .fx-spec-table tr:last-child th,.fx-spec-table tr:last-child td{border-bottom:0} .fx-spec-table th[scope=row]{width:32%;font-weight:500;padding:0} /* The row heading is a real button so the description is reachable by keyboard. It is styled to read as the cell it replaces, not as a control, but it keeps a genuine focus ring — this is the only keyboard route to the copy. */ .fx-spec-btn{display:block;width:100%;padding:12px 22px;border:0;background:none; font:inherit;color:#C4BCB1;text-align:left;cursor:pointer; transition:color .2s cubic-bezier(.2,.8,.3,1)} .fx-spec-btn:hover{color:#F8F8F8} .fx-spec-btn:focus-visible{outline:2px solid #EEB762;outline-offset:-2px;color:#F8F8F8} .fx-spec-why{width:32%;font-size:.79rem;color:#AEA8A1;opacity:0; transition:opacity .24s cubic-bezier(.2,.8,.3,1)} .fx-spec-val{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px; text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:#F8F8F8} .fx-spec-table tr{transition:background .2s cubic-bezier(.2,.8,.3,1)} .fx-spec-table tr:hover{background:#211810} /* THREE REVEAL TRIGGERS, not one. Pointer, keyboard (focus-within and the button's own expanded state) and — below — touch. */ .fx-spec-table tr:hover .fx-spec-why, .fx-spec-table tr:focus-within .fx-spec-why{opacity:1} /* :has() and not `~`. The description cell is a sibling of the , NOT of the button inside it, so `.fx-spec-btn[aria-expanded=true] ~ .fx-spec-why` never matches. This is what keeps a row open after the button is tabbed away from; :focus-within already covers the focused state, so a browser without :has() degrades to reveal-while-focused rather than to nothing. */ .fx-spec-table th:has(.fx-spec-btn[aria-expanded="true"]) + .fx-spec-why{opacity:1} /* TOUCH HAS NO HOVER, so it does not get a hover affordance. Every description is simply visible, and the hint line that tells a pointer user to select a row is removed rather than left lying. */ @media (hover:none){ .fx-spec-why{opacity:1} .fx-spec-head small{display:none} } @media(max-width:900px){ .fx-spec-table th[scope=row],.fx-spec-why{width:auto} .fx-spec-head{padding:14px 16px} .fx-spec-table th,.fx-spec-table td{padding:10px 16px} .fx-spec-btn{padding:10px 16px} } /* A certificate tile that links to its own verifier. Only real, signed certificates get this class; CMS showcase cards stay inert
s. */ .fx-cert.is-link{display:block;text-decoration:none;color:inherit;cursor:pointer; transition:transform .38s cubic-bezier(.2,.8,.3,1),filter .38s cubic-bezier(.2,.8,.3,1)} .fx-cert.is-link:hover{transform:translateY(-4px);filter:brightness(1.06)} .fx-cert.is-link:focus-visible{outline:2px solid #EEB762;outline-offset:4px;border-radius:12px}