/* Nova skin — landing/marketing pages (header, hero, footer, doc pages). Consumes tokens from nova-tokens.css. Fully independent from site.css / landing-cosmos.css (classic skin) — no shared selectors, no shared files. */ * { box-sizing: border-box; } body.nova { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--font); -webkit-font-smoothing: antialiased; } .nova-shell { min-height: 100vh; display: flex; flex-direction: column; } :where(.nova-shell a) { color: inherit; text-decoration: none; } /* zero specificity: never beats a link's own color / :hover */ /* Header — deliberately NOT centered/capped to the 1200px content container like the rest of the page: kcex's own header spans the full viewport edge-to-edge (real measurement: x=0, w=1440 at their own 1440px test), only the page's content sections use the 120px- margin container. Solid --panel background (their real header is rgb(17,18,20), a flat shade lighter than their body — same relationship as our --panel vs --ink) instead of a semi-transparent echo of the page background. */ .nova-head { position: sticky; top: 0; z-index: 40; background: var(--panel); border-bottom: 1px solid var(--line); } /* Height/logo/nav sizing measured directly off kcex.com's own header at 1440px viewport: 64px tall bar, 26px logo with 24px left inset, 16px/500 nav links — real DOM values. */ .nova-head__row { width: 100%; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 24px; } .nova-burger { display: none; background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius-sm); width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--bone); cursor: pointer; } .nova-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; } .nova-brand__logo { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; } .nova-brand__mark { width: 26px; height: 26px; border-radius: 7px; background: var(--signal); color: var(--signal-ink); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; } /* Nav sits right next to the brand now, not centered in the middle of the bar. */ .nova-nav { display: flex; gap: 28px; margin: 0 0 0 40px; } .nova-nav a { color: var(--stone); font-weight: 500; font-size: 16px; transition: color .15s; } .nova-nav a:hover, .nova-nav a.is-active { color: var(--bone); } .nova-nav--mobile { display: none; flex-direction: column; gap: 2px; padding: 8px 24px 16px; border-top: 1px solid var(--line); } .nova-nav--mobile a { padding: 10px 0; color: var(--stone); font-weight: 500; } .nova-head__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .nova-head__login, .nova-head__signup { display: inline-flex; align-items: center; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; } .nova-head__login { padding: 8px 6px; } .nova-head__login:hover { color: var(--stone); } .nova-head__signup { padding: 7px 16px; border: 1.5px solid #fff; border-radius: 999px; } .nova-head__signup:hover { background: #fff; color: var(--ink); } /* Buttons */ .nova-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: opacity .15s, background .15s; } .nova-btn--lg { padding: 14px 28px; font-size: 14px; } .nova-btn--primary { background: var(--btn); color: var(--btn-ink); } .nova-btn--primary:hover { background: var(--btn-hover); } .nova-btn--ghost { background: var(--panel); color: var(--bone); border-color: var(--line); } .nova-btn--ghost:hover { background: var(--panel-3); } /* Hero — WebGL "Ferrofluid" shader background (public/js/nova/nova-hero-ferrofluid.js, GLSL ported 1:1 from React Bits' Ferrofluid component) sits behind the copy, full-bleed. */ /* Fills exactly the viewport minus the sticky header (67px, measured — stable across breakpoints since the header never wraps to a second row) so the next section never peeks in on first load; min-height (not height) so real content is never clipped if it ever needs more room than that. */ /* Sizing measured directly off kcex.com's own hero at a matching 1440px viewport (real DOM rects, not eyeballed): 1200px content inside 120px page margins, padding 112px top / 98px bottom, text column 720/1200 = 60% of content width (kept proportional here since our own page uses a 1600px container, not their 1200px one — matching the real ratio, not a literal px copy across two different container systems). min-height restored to fill the viewport: on kcex their next section is allowed to peek in at the bottom of the first screen, but here that read as the "3 Easy Steps" section intruding into the hero view — this min-height keeps the hero to itself on first load while the padding/font/pill sizing above stays exactly what was measured. */ .nova-hero { position: relative; width: 100%; max-width: 1248px; margin: 0 auto; min-height: calc(100vh - 57px); /* 57px = .lk-header height */ display: flex; align-items: center; align-content: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 0 24px 36px; overflow: hidden; } /* kcex re-measured at 1390px: 1200px content, 573px banner row, card strip right under it (no full-viewport stretch). */ .nova-hero__inner { position: relative; z-index: 1; max-width: 60%; flex: 1 1 480px; text-align: left; min-height: 573px; display: flex; flex-direction: column; justify-content: center; } /* Two-line headline cloned from kcex.com's own hero: accent-colored first line, plain second line, each its own block so they stack regardless of text length. Font-size 40px, line-height tightened from kcex's measured 1.8 to 1.15 (1.8 split wrapped lines apart), 32px gap to the subtitle, 40px gap from there to the form — all read directly off their DOM (getBoundingClientRect + getComputedStyle), not eyeballed. */ .nova-hero h1 { font-size: clamp(28px, 4.2vw, 56px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 40px; max-width: 720px; } .nova-hero__accent, .nova-hero__line2 { display: block; } .nova-hero__accent { margin-bottom: 8px; } .nova-hero__line2 { color: var(--bone); text-wrap: balance; } /* Account-holder headline is one long sentence: full column width + balanced wrap keeps it to two lines. */ .nova-hero h1.nova-hero__h--account { max-width: none; text-wrap: balance; } .nova-hero__sub { max-width: 560px; margin: 0 0 40px; color: var(--stone); font-size: 20px; line-height: 1.3; } .nova-hero .nova-btn--lg { padding: 16px 36px; font-size: 16px; font-weight: 600; } /* Subtle shimmer sweep on the accent line — a weaker version of the moving-gradient-text effect kcex.com uses on their own first line (their gradientAnimationText/…Overlay pair). Static var(--signal) base color so it still reads correctly if animations are disabled. */ .nova-hero__accent { color: #e6f7ee; /* near-white with a faint green cast */ background: linear-gradient(100deg, #e6f7ee 40%, #ffffff 50%, #e6f7ee 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nova-hero-shimmer 5s ease-in-out infinite; } /* One left-to-right pass, then hold until the 5s loop restarts — no back-and-forth bounce. */ @keyframes nova-hero-shimmer { 0% { background-position: 180% 0; } 20% { background-position: -80% 0; } 100% { background-position: -80% 0; } } @media (prefers-reduced-motion: reduce) { .nova-hero__accent { animation: none; background: none; -webkit-text-fill-color: currentColor; color: #e6f7ee; } } /* Pill dimensions measured off their own reg box: 42px tall container, 75px radius (full pill), asymmetric padding — 24px left so input text sits inset, 6px right so the button sits nearly flush with the pill's own edge. Button itself is 30px tall inside the 42px pill (not full-height), 40px radius, 8/16px left/right padding. */ .nova-join { display: flex; align-items: center; gap: 8px; max-width: 420px; height: 42px; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 75px; padding: 0 6px 0 24px; } /* Real asset pulled from kcex.com's own "KCEX Verify" banner (the glass-shield/checkmark terrarium icon only — their promo text/branding around it is theirs, not copied), same glass+moss material as this page's own why-choose-us icons, so it fits our style without needing to be regenerated. Replaces the old animated ferrofluid canvas background. */ /* Their actual visible glyph measures 379x407 (not the wider 560px guess) — real size */ /* hero-gift.png is cut from kcex's carousel banner with its opaque #111 backdrop; lighten lets the page --ink show through it. */ .nova-hero__art { flex: 0 1 379px; max-width: 379px; width: 100%; height: auto; object-fit: contain; mix-blend-mode: lighten; } /* Sunrise behind the hero: one wide, evenly soft warm light rising from under the header edge. The art is a pre-cut transparent PNG (hero-gift-cut.png), so it needs no blend mode and no backdrop box shows. */ .nova-hero { isolation: isolate; } .nova-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; left: 50%; width: 1400px; height: 520px; transform: translateX(-50%); /* Pre-rendered, dithered light (same shape the old blurred radial-gradient had): a CSS gradient on a dark screen shows visible 8-bit steps, the ±½-level dither baked into the PNG makes it one continuous glow. */ background: url('/public/icons/hero-sunrise.png?v=2') center top / 1400px 520px no-repeat; } .nova-hero__art { mix-blend-mode: normal; } /* Card strip under the hero copy/art. The banner art ships with an opaque #111 backdrop on its right half; background-blend-mode: lighten swaps that for the card's own --panel so no dark box shows. */ .nova-hero__cards { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* Art lives on ::before so hover can scale it with a transform; mix-blend-mode keeps the lighten trick against the card bg. */ .nova-hcard { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 140px; padding: 0 44% 0 20px; border-radius: 4px; overflow: hidden; background: #232224; color: var(--bone); box-shadow: inset 0 0 0 1px transparent; transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s, box-shadow .35s; } .nova-hcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hcard-art) right center / auto 100% no-repeat; mix-blend-mode: lighten; transform-origin: 85% 55%; transition: transform .5s cubic-bezier(.2,.8,.2,1); } .nova-hcard:hover { transform: translateY(-4px); background-color: #2b2a2c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .nova-hcard:hover::before { transform: scale(1.07) rotate(-2deg); } .nova-hcard__eyebrow, .nova-hcard__title, .nova-hcard__desc { transition: transform .35s cubic-bezier(.2,.8,.2,1); } .nova-hcard:hover .nova-hcard__eyebrow, .nova-hcard:hover .nova-hcard__title, .nova-hcard:hover .nova-hcard__desc { transform: translateX(3px); } .nova-hcard:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } .nova-hcard__eyebrow { color: var(--bone); font-size: 12px; line-height: 1.3; } .nova-hcard__title { font-size: 16px; font-weight: 600; line-height: 1.35; } .nova-hcard__desc { color: var(--bone); font-size: 12px; line-height: 1.4; margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .nova-hcard, .nova-hcard::before, .nova-hcard__eyebrow, .nova-hcard__title, .nova-hcard__desc { transition: none; } .nova-hcard:hover, .nova-hcard:hover::before, .nova-hcard:hover .nova-hcard__eyebrow, .nova-hcard:hover .nova-hcard__title, .nova-hcard:hover .nova-hcard__desc { transform: none; } } @media (max-width: 900px) { /* hero is a column-reverse flexbox here: order -1 keeps the strip at the bottom, flex none stops 100% basis turning into height */ .nova-hero__cards { order: -1; flex: none; align-self: stretch; text-align: left; } } @media (max-width: 900px) { .nova-hero__cards { display: flex; gap: 12px; margin: 16px -24px 0; padding: 0 24px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .nova-hero__cards::-webkit-scrollbar { display: none; } .nova-hcard { flex: 0 0 min(86%, 340px); height: auto; min-height: 140px; padding: 16px 40% 16px 18px; scroll-snap-align: start; scroll-margin-left: 24px; } } @media (max-width: 900px) { .nova-hero { flex-direction: column-reverse; text-align: center; justify-content: center; padding: 48px 24px; } .nova-hero__inner { text-align: center; max-width: 640px; flex-basis: auto; min-height: 0; } .nova-hero h1 { max-width: none; } .nova-hero__sub { margin: 0 auto 32px; } .nova-join { margin: 0 auto; } .nova-hero__art { max-width: 320px; } } .nova-join__input { flex: 1; background: none; border: none; color: var(--bone); padding: 0; font-size: 14px; outline: none; } .nova-join__input::placeholder { color: var(--faint); } .nova-join__go { flex-shrink: 0; height: 30px; padding: 0 12px; border-radius: 40px; } /* Trust strip — the risk-reducing facts, placed right after the hero and above the feature sections (proof before benefits: this is a money product, not a SaaS demo — see ux-architecture skill). Real platform facts (see about.ejs/security.ejs), nothing invented for this band. */ /* "Start Trading in Just 3 Easy Steps" band — cloned from hibt.com's own section of the same name, heading and copy included (big centered heading, 3 columns joined by a dashed connector at icon height) — bare icon instead of their icon-in-circle badge, dashed segments living only in the gap between two icons, never crossing behind one. Their icon glyphs and lime-green accent are their own illustration work, not ours to copy, so the icons reuse this skin's own icon set (user/wallet/repeat — the same "repeat" glyph the Swap nav link already uses) and the accent is nova's own --signal green, not an off-palette color. The 3 steps are this exchange's real signup flow, not fabricated. */ .nova-trust { width: 100%; max-width: 1248px; margin: 0 auto; padding: 64px 24px 56px; } .nova-trust__head { text-align: center; margin-bottom: 48px; } .nova-trust__head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; margin: 0; } .nova-trust__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .nova-trust__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Dashed connector: spans only the gap between this item's icon and the next one's — width/offset computed from the icon's own 112px box so the dash never passes behind either icon (radius 56px each side, plus the row's own gap). */ .nova-trust__item:not(:last-child)::after { /* icon radius 56px + a clear 28px on each end: start = 50% + 84px; end = next centre (100% + 28px row gap + 50%) − 84px → width = 100% − 140px. */ content: ""; position: absolute; top: 56px; left: calc(50% + 56px + 28px); width: calc(100% - 140px); border-top: 2px dashed var(--line-2); } .nova-trust__ico { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 20px; color: var(--signal); } /* These generated PNGs are transparent at the corners but bake their glow halo as semi-opaque BLACK (not real transparency) — confirmed by sampling raw pixels, e.g. step-trade.png's center hole is rgba(0,0,0,71). screen blend neutralizes black at any alpha (screen(bg,black)=bg, so it composites straight through to the page background), same fix already used for the why-choose-us videos' own baked-black backdrop. */ .nova-trust__ico img { width: 112px; height: 112px; object-fit: contain; display: block; mix-blend-mode: screen; } .nova-trust__item strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 10px; } .nova-trust__item p { max-width: 280px; color: var(--stone); font-size: 14px; margin: 0; line-height: 1.6; } /* Sections & cards */ .nova-section { width: 100%; max-width: 1248px; margin: 0 auto; padding: 48px 24px; } .nova-section__head { text-align: center; margin-bottom: 32px; } .nova-section__head h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 600; margin: 6px 0 0; } /* "Why choose us" — structure/zigzag/videos cloned 1:1 from kcex.com's own "Why Choose KCEX?" band (see the EJS's own doc comment for the real-video/real-numbers split). Sizing is adapted to this page's own type scale (kcex's own 40px/32px/22px read oversized next to everything else here) rather than copied verbatim, same treatment as .nova-trust above. No section background — same transparent-on-page-bg treatment as every other section here. */ .nova-why { width: 100%; padding: 48px 0 48px; overflow-x: hidden; } .nova-why__inner { max-width: 1248px; margin: 0 auto; padding: 0 24px; } .nova-why__head { text-align: center; margin-bottom: 32px; } .nova-why__title { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; color: var(--bone); } .nova-why__list { display: flex; flex-direction: column; gap: 0; } /* KCEX's own item never stretches full section width — .left(732) + gap(208) + .video(260) sums to exactly its 1200px container, so the "space-between" that WAS here was spreading our own (much smaller) left/video boxes across a much wider section, leaving a huge dead gap in the middle. Real fix: size the item to its own content (fit-content + auto margin, same ratio gap/left ≈ 28% that KCEX uses) so it reads as one tight block, centered. */ /* Doubled from the previous pass, but as fluid clamp()s rather than fixed px: a literal 2x (left 1208 + gap 344 + video 374 = 1926px) overflows the section horizontally on any screen under ~1974px wide (confirmed: +510px overflow at 1440, +190px still at 1920) — the exact horizontal-scroll bug class already hit (and fixed) elsewhere on this page. Each clamp reaches its literal 2x max only once the viewport is wide enough to fit it; .nova-why__left can additionally flex-shrink as a last resort so this can never overflow. */ .nova-why__item { display: flex; align-items: center; justify-content: center; gap: clamp(40px, 12vw, 344px); min-height: 0; padding: 32px 0; width: 100%; } /* Scroll reveal — odd items (1st, 3rd) slide in from the right, even (2nd) from the left, toggled by data-reveal.js's IntersectionObserver below. Removing .is-visible (scrolling back up past the item) reverses the exact same transform/opacity transition, so it retreats the way it came instead of needing a separate "hide" animation. Animated on the two CHILDREN (.nova-why__left / .nova-why__video), not on .nova-why__item itself — opacity<1 and transform on the item would create a new stacking context between the video and the real page background, which silently breaks the video's own mix-blend-mode:screen (it stops blending against the page and blends against nothing, i.e. black — the exact "black box is back" bug this caused the first time). A transform on the video element itself is fine; it only breaks when an ancestor gets it. */ .nova-why__item[data-reveal] > * { opacity: 0; transform: translateX(90px); transition: opacity .9s cubic-bezier(.16, .8, .3, 1), transform .9s cubic-bezier(.16, .8, .3, 1); will-change: transform, opacity; } .nova-why__item[data-reveal]:nth-child(even) > * { transform: translateX(-90px); } .nova-why__item[data-reveal].is-visible > * { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .nova-why__item[data-reveal] > * { opacity: 1; transform: none; transition: none; } } .nova-why__left { display: flex; flex-direction: column; justify-content: center; gap: 16px; flex: 0 1 1208px; min-width: 0; } .nova-why__item-title { display: flex; align-items: center; gap: 20px; color: var(--bone); font-size: clamp(28px, 3vw, 40px); font-weight: 600; margin: 0; } .nova-why__item-title svg { flex-shrink: 0; color: var(--faint); width: clamp(20px, 2vw, 40px); height: clamp(20px, 2vw, 40px); } .nova-why__desc { color: var(--stone); font-size: clamp(16px, 2vw, 28px); line-height: 1.5; margin: 0; } .nova-why__desc a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; } /* mp4/H.264 has no alpha channel — the black backdrop baked into these source clips can't be stripped by re-encoding, it's real pixel data, not a transparent area. screen blend mode is the real fix: for a pure-#000 source pixel, screen(bg, black) mathematically equals bg unchanged, so black areas read as fully see-through against this page's dark background, while the bright moss/glass content composites on top normally. */ .nova-why__video { width: clamp(220px, 20vw, 374px); height: auto; aspect-ratio: 374 / 346; object-fit: contain; flex: 0 0 auto; mix-blend-mode: screen; } @media (max-width: 900px) { .nova-why__item { flex-direction: column; text-align: center; gap: 32px; } .nova-why__left { align-items: center; flex-basis: auto; max-width: none; } .nova-why__item-title { justify-content: center; } .nova-why__video { width: min(300px, 70vw); } } /* Popular-markets cards — real top-4 coins (same set as the currency table above). Structure (boxed icon, price+%-top-right, chart, 2x2 stat grid) adapted from a reference "professional card" layout the user supplied, but rebuilt in this site's own flat dark-panel + thin-border language (.nova-card/.nova-currency__row) instead of that reference's white/Tailwind card — no colored gradient block, no light theme. Every number is real: price/24h% from coin_rates, market cap/24h volume from coin_rates, 24h high/low from get24hRangeMap() (same range the currency table's own "24h Range" column uses), sparkline from the same getPriceHistory() samples sparklineSvg() already draws above — nothing on this card is invented. */ #stats { width: 100%; } .nova-coins { width: 100%; max-width: 1200px; margin: 32px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .nova-coin-card { display: flex; flex-direction: column; gap: 16px; padding: 20px 0; text-decoration: none; transition: transform .2s ease; } .nova-coin-card:hover { transform: translateY(-2px); } .nova-coin-card.is-flash-up { animation: nova-row-flash-up .9s ease-out; border-radius: 12px; } .nova-coin-card.is-flash-down { animation: nova-row-flash-down .9s ease-out; border-radius: 12px; } .nova-coin-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .nova-coin-card__id { display: flex; align-items: center; gap: 10px; min-width: 0; } .nova-coin-card__ico { width: 32px; height: 32px; flex-shrink: 0; display: flex; } .nova-coin-card__ico img, .nova-coin-card__ico .nova-asset-ico, .nova-coin-card__ico .asset-ico { width: 100%; height: 100%; } .nova-coin-card__head { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; } .nova-coin-card__head strong { font-size: 14px; font-weight: 600; color: var(--bone); } .nova-coin-card__head em { font-style: normal; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nova-coin-card__quote { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; } .nova-coin-card__px { margin: 0; font-size: 20px; font-weight: 600; color: var(--bone); white-space: nowrap; } .nova-coin-card__pct { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; } .nova-coin-card__spark { display: block; } .nova-coin-card__spark svg { width: 100%; height: 44px; display: block; overflow: visible; } .nova-coin-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .nova-coin-card__stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .nova-coin-card__stat span { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; } .nova-coin-card__stat strong { font-size: 12px; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 980px) { .nova-coins { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .nova-coins { grid-template-columns: 1fr; } } /* Markets */ /* Chart on top, full width; the asset list below is a horizontal scrolling strip of pill-cards (swapuz's own PairsSection shape) instead of classic's side-by-side chart+table split. */ .nova-markets { display: flex; flex-direction: column; gap: 20px; } .nova-price-chart { min-height: 360px; } .nova-markets-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px; } .nova-markets-pair__label { display: flex; align-items: center; gap: 10px; } .nova-markets-pair__text strong { display: block; font-size: 16px; } .nova-markets-pair__text em { display: block; font-style: normal; color: var(--faint); font-size: 12px; } .nova-markets-pair__last { display: flex; flex-direction: column; } .nova-markets-pair__last strong { font-size: 20px; } .nova-markets-pair__last span { font-size: 12px; } .nova-markets-pair__last.pos span { color: var(--ok); } .nova-markets-pair__last.neg span { color: var(--down); } .nova-markets-pair__stats { display: flex; gap: 20px; margin-left: auto; font-size: 12px; color: var(--faint); } .nova-markets-pair__stats strong { display: block; color: var(--bone); font-size: 12px; } #home-chart { height: 220px; } .nova-markets__list { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .nova-markets__row { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; width: 148px; scroll-snap-align: start; padding: 16px; border-radius: var(--radius-lg); background: var(--panel); border: 1px solid var(--line); color: inherit; cursor: pointer; text-align: left; font: inherit; } .nova-markets__row:hover, .nova-markets__row.is-active { border-color: var(--signal); } .nova-markets__asset { display: flex; align-items: center; gap: 10px; } .nova-markets__asset strong { display: block; font-size: 12px; } .nova-markets__asset em { display: block; font-style: normal; color: var(--faint); font-size: 12px; } .nova-markets__quote { display: flex; flex-direction: column; gap: 2px; } .nova-markets__quote strong { display: block; font-size: 14px; } .nova-markets__quote b { font-size: 12px; font-weight: 600; align-self: flex-start; padding: 2px 6px; border-radius: var(--radius-sm); } .nova-markets__quote b.pos { color: var(--ok); background: rgba(2,192,118,.12); } .nova-markets__quote b.neg { color: var(--down); background: rgba(246,70,93,.12); } .nova-asset-ico img, .nova-asset-ico__fallback, .asset-ico img, .asset-ico__fallback { width: 28px; height: 28px; border-radius: 50%; display: block; object-fit: cover; flex-shrink: 0; } .asset-ico { display: inline-flex; } .asset-ico__fallback { align-items: center; justify-content: center; background: var(--panel-3); color: var(--bone); font-size: 12px; font-weight: 600; } .nova-asset-ico__fallback { background: var(--panel-3); color: var(--bone); align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } /* FAQ — flat rows spanning the same content width as every other section (no card/box background, per explicit request), separated by a plain hairline like .nova-currency__row uses one section up, instead of the previous boxed-panel accordion look. */ .nova-faq { width: 100%; display: flex; flex-direction: column; } .nova-faq__item { padding: 24px 0; } .nova-faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 16px; color: var(--bone); } .nova-faq__item summary::-webkit-details-marker { display: none; } .nova-faq__item summary::after { content: "+"; flex-shrink: 0; font-size: 20px; font-weight: 400; color: var(--faint); } .nova-faq__item[open] summary::after { content: "\2212"; } .nova-faq__item p { color: var(--stone); font-size: 14px; line-height: 1.6; margin: 12px 0 0; max-width: 800px; } /* Footer */ .nova-foot { background: #181719; margin-top: 40px; padding: 72px 24px 36px; } .nova-foot__top { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; } .nova-foot__brand p { color: var(--bone); font-size: 14px; line-height: 1.6; margin: 16px 0 0; max-width: 360px; } .nova-foot__col h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--bone); margin: 0 0 18px; } .nova-foot__col a { display: block; color: var(--bone); font-size: 16px; padding: 7px 0; } .nova-foot__col a:hover { color: var(--bone); } .nova-foot__legal { max-width: 1200px; margin: 48px auto 0; padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .nova-foot__legal-col h4 { font-size: 12px; text-transform: uppercase; color: var(--bone); margin: 0 0 12px; } .nova-foot__legal-col p { font-size: 14px; color: var(--bone); line-height: 1.8; margin: 0; } .nova-foot__legal-col a { color: var(--bone); } .nova-foot__ids { color: var(--bone); } .nova-foot__bottom { max-width: 1200px; margin: 32px auto 0; padding-top: 32px; } .nova-foot__copy { font-size: 14px; color: var(--bone); margin: 0 0 14px; } .nova-foot__notice { font-size: 12px; color: var(--bone); line-height: 1.7; margin: 0 0 12px; } /* Desktop order: five columns of about the same height, the legal block on the same column lines as the row above (Company under the brand, contacts under Product → Compliance), no rules — groups are separated by spacing only. */ .nova-foot__marks { display: flex; align-items: center; gap: 14px; margin-top: 22px; } .nova-foot__marks img { display: block; height: 40px; width: auto; flex: 0 0 auto; object-fit: contain; opacity: 0.72; } @media (min-width: 881px) { .nova-foot { padding: 56px 24px 32px; } .nova-foot__top, .nova-foot__legal { grid-template-columns: 1.4fr repeat(5, 1fr); column-gap: 32px; } .nova-foot__legal { margin-top: 48px; padding-top: 0; row-gap: 24px; } .nova-foot__legal-col--contact { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 40px; align-content: start; } .nova-foot__legal-col--contact h4 { grid-column: 1 / -1; } .nova-foot__contact-a { grid-column: 1 / 3; } .nova-foot__contact-b { grid-column: 3 / 5; } .nova-foot__bottom { margin-top: 40px; padding-top: 0; } } /* Currency table — tabs cloned from swapuz.com's "Currency" section (research/swapuz/currency-section.html: Popular coins/Trending up/Trending down); the 8-column layout itself (Currency/Price/24h Range/24H/7D/30D/Volume 24H/Market Cap, six of them individually sortable) is cloned 1:1 from kcex.com's markets table instead. Labels kept in English to match every other string on this page — only kcex's column set/sort behavior is cloned, not its (Russian) locale. */ .nova-currency { width: 100%; margin: 0; padding: 0; overflow: hidden; } .nova-currency__h-mobile { display: none; } .nova-currency__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px; } .nova-currency__h-desktop { font-size: 28px; font-weight: 600; margin: 0; } .nova-currency__tabs { display: flex; gap: 8px; flex-wrap: wrap; } .nova-currency__tab { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent; color: var(--faint); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer; } .nova-currency__tab:hover { color: var(--stone); } .nova-currency__tab.is-on { background: var(--panel-3); border-color: var(--line); color: var(--bone); } .nova-currency__table { overflow-x: auto; } .nova-currency__row { display: block; padding: 18px 24px; font-size: 14px; color: var(--stone); min-width: 1100px; position: relative; } /* The grid layout lives on this inner span, not on .nova-currency__row itself — scaling the row directly on hover grew its own box past the scroll container's content edge (transforms count toward scrollable overflow), which flashed a horizontal scrollbar on every hover. This inner element scales instead; the outer that sizes the scroll track never changes, and the zoom reads as a straight/centered zoom instead of a lopsided shift. */ .nova-currency__row-inner { display: grid; grid-template-columns: 2fr 0.9fr 1.3fr 0.7fr 0.7fr 0.7fr 1fr 1fr 0.8fr; align-items: center; gap: 10px; transform: scale(1); transform-origin: center; transition: transform .15s ease; } .nova-currency__row--head { color: var(--faint); font-size: 12px; text-transform: uppercase; font-weight: 600; border-bottom: none; } /* JS tab filter (Popular/Trending up/down) toggles the `hidden` attribute on rows — the attribute alone loses to `.nova-currency__row { display: block }` above (same specificity, later in source), so a filtered-out row stayed visually on screen despite being hidden. */ .nova-currency__row[hidden] { display: none; } .nova-currency__row:not(.nova-currency__row--head):hover { color: var(--bone); } /* Hover lift: the row's background and its content zoom together from the row's centre, so the whole row comes straight toward the viewer. The background is a pseudo-element inset 9px per side so that at scale 1.015 it still fits the scroll container (no horizontal scrollbar). */ .nova-currency__row::before { content: ''; position: absolute; inset: 0 9px; background: transparent; transform: scale(1); transition: transform .15s ease, background-color .15s ease; pointer-events: none; } .nova-currency__row-inner { position: relative; z-index: 1; } .nova-currency__row:not(.nova-currency__row--head):hover::before { background: var(--panel-3); transform: scale(1.015); } .nova-currency__row:not(.nova-currency__row--head):hover .nova-currency__row-inner { transform: scale(1.015); } [data-currency-body] .nova-currency__row:last-child { border-bottom: none; } .nova-currency__asset { display: flex; align-items: center; gap: 12px; } .nova-currency__asset .asset-ico img, .nova-currency__asset .asset-ico__fallback { width: 34px; height: 34px; } .nova-currency__asset strong { display: block; color: var(--bone); font-size: 14px; } .nova-currency__asset em { display: block; font-style: normal; color: var(--faint); font-size: 12px; } .nova-currency__row .pos { color: var(--ok); font-weight: 600; } .nova-currency__row .neg { color: var(--down); font-weight: 600; } @keyframes nova-row-flash-up { from { background: rgba(2,192,118,.22); } to { background: transparent; } } @keyframes nova-row-flash-down { from { background: rgba(246,70,93,.22); } to { background: transparent; } } .nova-currency__range { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Sort control per numeric header cell — reset from