/* style-app.css: the U.CASH app-page layer (pay, swap, buy, names, agents, ... 18 pillar pages). These pages carry and load style35.css + this file. Everything here is scoped under .pg so hub pages (64) can never be affected. Design language: style35 tokens, PLATELESS (radius 0 via --radius), gold accents, transparent fills, hairline borders. Classes covered: app-hero, pg-split, pg-panel(-bar/-title/-body), uc-matrix(-row/ -head/-label/-simple), uc-divider, uc-wiring(-diagram/-list), uc-ring, uc-wire, uc-node-*, cta-band, reveal/from-left. No em dashes. */ /* ---- hero: split layout (text | panel), canvas already fixed behind via style35 ---- */ .pg .app-hero{position:relative;min-height:84svh;display:flex;align-items:center;padding:clamp(48px,6vw,72px) 0 clamp(40px,5vw,64px);overflow:hidden} .pg .app-hero .container{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} .pg .pg-split-text{position:relative;z-index:1} .pg .app-hero h1{max-width:640px} .pg .app-hero .lead{max-width:560px} /* ---- panel: bordered terminal card (checkout mock, etc) ---- */ .pg .pg-panel{position:relative;z-index:1;border:1px solid var(--line);background:color-mix(in srgb,var(--bg-2) 92%,transparent);box-shadow:var(--shadow)} .pg .pg-panel-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)} .pg .pg-panel-bar i{width:8px;height:8px;border-radius:50%;background:var(--text-3);opacity:.45} .pg .pg-panel-bar i:first-child{background:var(--gold);opacity:1} .pg .pg-panel-title{margin-left:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pg .pg-panel-body{padding:18px} /* entrance (subtle, reduced-motion safe) */ .pg .reveal.from-left{opacity:0;transform:translateX(-14px);animation:pg-app-in .7s ease .15s forwards} @keyframes pg-app-in{to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){.pg .reveal.from-left{opacity:1;transform:none;animation:none}} /* ---- matrix: pricing / capability table ---- */ .pg .uc-matrix{border:1px solid var(--line);overflow-x:auto} .pg .uc-matrix-row{display:grid;grid-template-columns:1.1fr 1fr .9fr 1.7fr;gap:0 18px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);min-width:640px} .pg .uc-matrix-row:last-child{border-bottom:0} .pg .uc-matrix-head{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);background:var(--panel)} .pg .uc-matrix-label{font-weight:700;color:var(--gold-2)} .pg .uc-matrix-row:not(.uc-matrix-head){font-size:14px;color:var(--text-2)} .pg .uc-matrix-simple{display:flex;flex-wrap:wrap;gap:8px} /* ---- divider: hairline + diamond ---- */ .pg .uc-divider{display:flex;align-items:center;gap:14px;max-width:560px;margin:6px auto;padding:8px 24px} .pg .uc-divider span{flex:1;height:1px;background:var(--line)} .pg .uc-divider .ic{width:13px;height:13px;color:var(--gold);flex:none} /* ---- wiring: network diagram + list ---- */ .pg .uc-wiring{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;margin-top:8px} .pg .uc-wiring-diagram{width:100%;height:auto;display:block} .pg .uc-ring{fill:none;stroke:var(--line-gold);stroke-width:1} .pg .uc-wire{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:3 5} .pg .uc-node-rect{fill:var(--bg-2);stroke:var(--line);transition:stroke .15s} .pg .uc-wiring-diagram a{text-decoration:none} .pg .uc-wiring-diagram a:hover .uc-node-rect,.pg .uc-wiring-diagram a:focus .uc-node-rect{stroke:var(--gold)} .pg .uc-node-rect-self{fill:var(--bg-3);stroke:var(--gold);stroke-width:1.4} .pg .uc-node-rect-self-glow{fill:none;stroke:var(--gold-glow);stroke-width:1} .pg .uc-node-t{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;fill:var(--text)} .pg .uc-node-d{font-family:var(--font);font-size:11px;fill:var(--text-3)} .pg .uc-node-ico{color:var(--gold-2)} .pg .uc-node-t-self{fill:var(--gold-2);font-size:13px} .pg .uc-node-d-self{fill:var(--text-2)} .pg .uc-wiring-list{list-style:none;display:flex;flex-direction:column;gap:12px} .pg .uc-wiring-list li{border-left:2px solid var(--line-gold);padding:2px 0 2px 14px;font-size:14px;color:var(--text-2)} .pg .uc-wiring-list b{color:var(--text);font-weight:600} /* ---- CTA band ---- */ .pg .cta-band{border:1px solid var(--line-gold);padding:clamp(30px,5vw,58px);text-align:center;background:transparent} .pg .cta-band h2{margin:0 auto 12px;max-width:640px} .pg .cta-band p{max-width:520px;margin:0 auto 24px;color:var(--text-2)} /* ---- responsive ---- */ @media (max-width: 980px) { .pg .app-hero{min-height:auto;padding:clamp(40px,7vw,56px) 0 48px} .pg .app-hero .container{grid-template-columns:1fr;gap:40px} .pg .uc-wiring{grid-template-columns:1fr;gap:28px} } /* ---- dashboard stats hero (swap, buy, bridge) ---- */ .pg .pg-stats{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px} .pg .pg-stat{border:1px solid var(--line);padding:16px 22px 14px;min-width:118px;text-align:center;background:transparent} .pg .pg-big{font-family:var(--font-display);font-size:clamp(26px,2.6vw,38px);line-height:1;color:var(--gold-2)} .pg .pg-lbl{margin-top:7px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} /* ---- terminal hero (agents, bounties, sdks) ---- */ .pg .pg-term{border:1px solid var(--line);background:var(--bg-2);width:100%;max-width:560px;box-shadow:var(--shadow)} .pg .pg-term-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)} .pg .pg-term-bar i{width:8px;height:8px;border-radius:50%;background:var(--text-3);opacity:.45} .pg .pg-term-bar i:first-child{background:var(--gold);opacity:1} .pg .pg-term-path{margin-left:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pg .pg-term-body{padding:18px 20px;font-family:var(--font-mono);font-size:13px;line-height:2;color:var(--text-2);display:flex;flex-direction:column;min-height:230px} .pg .pg-term-body .ln{white-space:pre-wrap;word-break:break-word} .pg .pg-term-body .ln.k{color:var(--gold-2)} .pg .pg-term-body .ln.ok{color:#4cba82} .pg .pg-term-body .ln.out{color:var(--text-3)} .pg .pg-term-body .u{color:var(--gold-2);border-bottom:1px dashed var(--line-gold)} .pg .pg-term-body .prompt{color:var(--gold);font-weight:600} [data-theme="light"] .pg .pg-term-body .ln.ok{color:#1f7a4d} .pg .pg-caret{display:inline-block;width:8px;height:15px;background:var(--gold);margin-left:6px;vertical-align:-2px;animation:pg-caret 1.1s steps(1) infinite} @keyframes pg-caret{50%{opacity:0}} /* ---- chat hero (una, uantum) ---- */ .pg .pg-thread{display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px} .pg .pg-msg{border:1px solid var(--line);padding:14px 16px;font-size:14px;color:var(--text-2);line-height:1.65} .pg .pg-msg .who{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px} .pg .pg-msg.user{border-left:2px solid var(--gold);background:var(--panel)} .pg .pg-msg.bot{border-left:2px solid var(--line-gold)} /* ---- bento hero (send, mobile) ---- */ .pg .pg-bento-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%} .pg .pg-bento-tile{border:1px solid var(--line);padding:22px;background:transparent;min-height:96px} .pg .pg-bento-tile.pg-bento-a{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;min-height:0} .pg .pg-bento-k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} .pg .pg-bento-v{font-family:var(--font-display);font-size:clamp(30px,3vw,44px);color:var(--gold-2);line-height:1;margin-top:8px} /* ---- editorial index marker (names, prime, landers) ---- */ .pg .pg-index{font-family:var(--font-mono);font-size:11px;letter-spacing:.34em;color:var(--text-3);margin-bottom:16px} .pg .pg-index::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px} /* ---- viz hero (portal, verify) ---- */ .pg .pg-vizband{position:relative;z-index:1} .pg .pg-vizframe{border:1px solid var(--line);background:var(--bg-2);padding:clamp(20px,3vw,34px);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)} .pg .pg-vizframe svg{max-width:100%;height:auto} /* ---- entrance: scale variant (parallel to from-left) ---- */ .pg .reveal.scale{transform:scale(.96)} .pg .reveal.scale.in{transform:none} /* ---- uc-viz: network diagram panels (#wiring on the 17) ---- */ .pg .uc-viz{border:1px solid var(--line);padding:clamp(22px,3vw,34px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;background:transparent} .pg .uc-viz .uc-list{flex:1 1 340px;list-style:none;margin:0;padding:0;text-align:left} .pg .uc-list li{border-left:2px solid var(--line-gold);padding:2px 0 2px 14px;margin:10px 0;font-size:14px;color:var(--text-2)} .pg .uc-list b{color:var(--text);font-weight:600} .pg .uc-viz svg.ic{width:18px;height:18px;color:var(--gold-2)} /* chips + nodes shared by the variants */ .pg .uc-tk,.pg .uc-flow-stage,.pg .uc-cc-chip,.pg .uc-fo-source,.pg .uc-fo-targets>*,.pg .uc-hs-door,.pg .uc-hs-bubble,.pg .cy-node,.pg .uc-viz .tile{border:1px solid var(--line);background:var(--bg-2);padding:14px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:13px;color:var(--text-2);min-width:96px} .pg .uc-tk b,.pg .uc-flow-stage b,.pg .uc-fo-source b{font-weight:700;color:var(--gold-2)} .pg .uc-tk span,.pg .uc-flow-stage span,.pg .uc-fo-source span{font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.06em} /* swap: token tiles around a center exchange glyph */ .pg .uc-swap-mid{font-family:var(--font-mono);font-size:30px;color:var(--gold);line-height:1;padding:0 4px} /* flow: numbered stages */ .pg .uc-flow-n{font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.12em} .pg .uc-viz .uc-arrow,.pg .uc-swap-x,.pg .uc-fo-t,.pg .uc-hs-arrow{font-family:var(--font-mono);color:var(--gold);font-size:18px;line-height:1} /* crosschain: rails of chips joined by a midpoint */ .pg .uc-cc-rail{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center} .pg .uc-cc-mid{font-family:var(--font-mono);color:var(--gold);font-size:20px;padding:0 6px} /* fanout: one source fanning to many targets */ .pg .uc-fo-source{min-width:150px} .pg .uc-fo-targets{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} /* handshake: two lanes + spine */ .pg .uc-hs-lane{display:flex;flex-direction:column;gap:10px;align-items:center} .pg .uc-hs-spine{width:1px;align-self:stretch;background:linear-gradient(180deg,transparent,var(--gold),transparent);opacity:.6} .pg .uc-hs-cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} /* cycle: nodes + arcs */ .pg .cy-node{min-width:110px} .pg .cy-arc{font-family:var(--font-mono);color:var(--text-3);font-size:13px} .pg .cy-self{border-color:var(--line-gold);color:var(--gold-2)} /* tiles: plain icon grid */ .pg .uc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;flex:1 1 100%} .pg .uc-tiles .tile-ico{color:var(--gold-2)} /* pyramid: stacked bands */ .pg .uc-band{border:1px solid var(--line);border-left:2px solid var(--gold);padding:12px 18px;text-align:center;font-size:13px;color:var(--text-2);flex:1 1 100%} .pg .uc-band b{color:var(--gold-2)} .pg .uc-band.cap{border-left-width:2px;border-color:var(--line-gold)} /* ladder: rungs scaled by --h */ .pg .uc-ladder{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center} .pg .uc-rung{border:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2);width:calc(var(--h,1) * 34% + 40%);justify-content:center} .pg .uc-rung b{color:var(--gold-2)} .pg .uc-rung span{font-family:var(--font-mono);font-size:11px;color:var(--text-3)} .pg .uc-rung.top{border-color:var(--gold);box-shadow:var(--glow)} /* ---- responsive additions ---- */ @media (max-width: 980px) { .pg .pg-bento-grid{grid-template-columns:1fr 1fr} .pg .pg-bento-tile.pg-bento-a{grid-column:span 2;grid-row:auto} .pg .uc-viz{flex-direction:column;align-items:stretch} .pg .uc-viz .uc-list{text-align:left} } @media (max-width: 560px) { .pg .pg-bento-grid{grid-template-columns:1fr} .pg .pg-bento-tile.pg-bento-a{grid-column:auto} .pg .pg-stats{gap:8px} .pg .pg-stat{min-width:calc(50% - 8px);padding:12px 10px} } /* ---- steps with icon markers (pillar pages: .num carries an svg, not "Step 01") ---- */ .pg .step .num{width:48px;height:48px;border:1px solid var(--line-gold);display:grid;place-items:center;color:var(--gold-2);margin-bottom:14px} .pg .step .num .ic{width:22px;height:22px} /* ---- FAQ chevron variant (pillar pages carry svg.ic.chev in summary; homepage uses the +/- text toggle) ---- */ .pg .faq summary{padding:20px 0} .pg .faq summary .ic.chev{width:18px;height:18px;color:var(--gold-2);flex:none;transition:transform .25s var(--ease)} .pg .faq details[open] summary .ic.chev{transform:rotate(180deg)} .pg .faq summary::after{content:none} /* Matrices are CARD GRIDS at every size: each row is a card in the family card language (gold hairline, gradient top line, hover lift). Column names ride on data-l mini-labels; the head row is hidden. One column on phones, auto-fill 2-4 up. */ .pg .uc-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;border:0;overflow:visible} .pg .uc-matrix-row.uc-matrix-head{display:none} .pg .uc-matrix-row{min-width:0;display:flex;flex-direction:column;gap:14px;padding:20px 22px 18px;margin:0; border:1px solid var(--line-gold);background:var(--bg);position:relative;overflow:hidden; transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .pg .uc-matrix-row::before{content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5} .pg .uc-matrix-row:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--glow),var(--shadow)} /* Card borders: lighter in dark theme, darker in light theme (operator 9/4). */ .pg .uc-matrix-row{border-color:rgba(204,153,51,.38)} [data-theme="light"] .pg .uc-matrix-row{border-color:rgba(153,114,38,.55)} .pg .uc-matrix-row .uc-matrix-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);font-weight:700;padding-bottom:12px;border-bottom:1px solid var(--line)} .pg .uc-matrix-row .uc-matrix-label:empty{display:none} .pg .uc-matrix-row>div:not(.uc-matrix-label){display:flex;flex-direction:column;gap:4px;min-width:0} .pg .uc-matrix-row>div:not(.uc-matrix-label)::before{content:attr(data-l);font:500 9.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} .pg .uc-matrix-row>div:not([data-l]):not(.uc-matrix-label)::before{content:none} .pg .uc-matrix-row>div:not(.uc-matrix-label),.pg .uc-matrix-row>div:not(.uc-matrix-label) *{font-size:16px;color:var(--text);font-weight:600;text-align:left} /* The trailing derived-value line (e.g. "With 50% UCASH discount") centers under the hero fee. */ .pg .uc-matrix-row>div[data-l="With 50% UCASH discount"]{text-align:center} /* Money lines (Price / Fee / Platform fee values) are the card's hero: large, gold, left-justified. */ .pg .uc-matrix-row>div[data-l="Price"],.pg .uc-matrix-row>div[data-l="Price"]>*,.pg .uc-matrix-row>div[data-l="Fee"],.pg .uc-matrix-row>div[data-l="Fee"]>*,.pg .uc-matrix-row>div[data-l="Platform fee"],.pg .uc-matrix-row>div[data-l="Platform fee"]>*{font-size:21px;font-weight:700;color:var(--gold-2);text-align:left;line-height:1.25} @media (max-width:700px){ .pg .uc-matrix{grid-template-columns:1fr} .pg .uc-matrix-row{padding:16px 18px 14px;gap:12px} }