/* ══════════════════════════════════════════════════════════════════════════ AEON — EVALUATION CARD ENHANCED (eval-card-enhanced.css) Drop this AFTER style.css and desktop-shell.css in . Enhances: 1. Price card visual polish — production-grade depth & contrast 2. Fibonacci proximity gauge — live bar showing distance to levels 3. Live-line ↔ Fib integration — chart draws fib bands + price thread 4. Enhanced session header bands ← session pill polish added here 5. Active Fib level call-out tooltip ══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── 1. CARD BASE — richer depth, stronger identity ───────────────────────────────────────────────────────────────────────── */ #swPriceCard { /* Background moved to style.css's #bentoDashboard #swPriceCard rule (2-ID specificity — it was already winning over this rule's old background regardless of !important, since specificity is compared before !important tie-breaking kicks in). Kept here: border/position/ overflow, which weren't being overridden and are still in effect. */ border: 1px solid var(--border) !important; border-top: 1px solid var(--border2) !important; position: relative !important; overflow: hidden !important; } /* All direct children sit above the pseudo-element layers */ #swPriceCard > * { position: relative; z-index: 1; } /* ───────────────────────────────────────────────────────────────────────── 2. EVAL HEADER — tighter, more professional Overrides style.css (.bd-eval-head padding:18px 22px, .bd-ev-label 18px) ───────────────────────────────────────────────────────────────────────── */ .bd-eval-head { padding: 13px 18px 8px !important; background: linear-gradient(180deg, rgb(0 12 220 / 3%) 0%, transparent 100%) !important; border-bottom: 1px solid rgba(255,255,255,.035) !important; } .bd-ev-label { font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: rgba(0,220,200,.5) !important; } /* ───────────────────────────────────────────────────────────────────────── 3. PRICE HERO — refined colour, tighter letter-spacing Overrides style.css (#pMain color, letter-spacing) ───────────────────────────────────────────────────────────────────────── */ .bd-ev-price-row { padding: 4px 18px 2px !important; gap: 10px !important; align-items: baseline !important; } #pMain.bd-ev-price, .bd-ev-price-row #pMain { font-family: 'Inter', 'Rajdhani', sans-serif !important; color: rgba(225,235,248,.97) !important; letter-spacing: -.04em !important; text-shadow: 0 0 60px rgba(0,220,200,.12) !important; } /* change / trend badges */ #pChg, .price-badge { font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .04em !important; padding: 3px 9px !important; border-radius: 4px !important; border-width: 1px !important; border-style: solid !important; } /* OHLC stats row */ .bd-ev-stats { font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important; font-size: 8px !important; color: rgba(155,170,192,.45) !important; gap: 14px !important; flex-wrap: nowrap !important; white-space: nowrap !important; } .bd-ev-stats span { color: rgba(200,210,225,.65) !important; font-weight: 600 !important; } /* ───────────────────────────────────────────────────────────────────────── 4. FIB PROXIMITY GAUGE — horizontal bar below price row Filled by eval-fib-chart.js · shows: level labels + live position ───────────────────────────────────────────────────────────────────────── */ #evalFibGauge { position: relative; margin: 0 18px 6px; height: 28px; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; flex-shrink: 0; } /* Track fill — shows 24h range position */ #evalFibGaugeTrack { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,220,200,.08) 0%, rgba(0,220,200,.18) 100%); border-radius: 3px; transition: width .6s ease; z-index: 1; } /* Zone color bands — injected by JS */ .efg-zone { position: absolute; top: 0; bottom: 0; opacity: .55; z-index: 0; } /* Level tick marks */ .efg-tick { position: absolute; top: 0; bottom: 0; width: 1px; z-index: 2; pointer-events: none; } .efg-tick-lbl { position: absolute; top: 2px; font-family: 'JetBrains Mono', 'Share Tech Mono', monospace; font-size: 5.5px; letter-spacing: .04em; white-space: nowrap; transform: translateX(-50%); color: rgba(155,170,192,.55); pointer-events: none; z-index: 3; } /* Live price cursor */ #evalFibLiveCursor { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(225,235,248,.9); box-shadow: 0 0 8px rgba(225,235,248,.55); z-index: 10; transition: left .35s ease; pointer-events: none; } #evalFibLiveCursor::after { content: attr(data-price); position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); font-family: 'JetBrains Mono', 'Share Tech Mono', monospace; font-size: 6px; color: rgba(225,235,248,.85); white-space: nowrap; background: rgba(4,6,12,.9); padding: 1px 4px; border-radius: 2px; pointer-events: none; } /* Nearest-level call-out — floats left of cursor */ #evalFibNearLbl { position: absolute; top: 50%; transform: translateY(-50%); font-family: 'JetBrains Mono', 'Share Tech Mono', monospace; font-size: 7px; font-weight: 700; letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; white-space: nowrap; z-index: 11; pointer-events: none; transition: left .35s ease, color .3s, background .3s; border: 1px solid currentColor; opacity: .9; } /* ───────────────────────────────────────────────────────────────────────── 5. EVAL CHART — clean canvas container Overrides style.css (min-height:100px → 0, adds overflow:hidden) ───────────────────────────────────────────────────────────────────────── */ .bd-ev-chart { min-height: 0 !important; overflow: hidden !important; } #bdEvalChart { z-index: 5 !important; } /* ───────────────────────────────────────────────────────────────────────── 6. FIB RAY ENHANCEMENTS Overrides style.css (opacity values, label sizes, adds .fused-fib-live, .fused-fib-ray-lbl-left, @keyframes name change) ───────────────────────────────────────────────────────────────────────── */ /* Base ray — tighter opacity than style.css (.22 vs .22 — same, kept for explicit control) */ .fused-fib-ray { opacity: .20 !important; transition: opacity .4s, border-color .3s !important; } .fused-fib-ray.fused-fib-near { opacity: .75 !important; border-top-style: dashed !important; animation: fib-ray-pulse 2s ease-in-out infinite !important; } .fused-fib-ray.fused-fib-active { opacity: 1 !important; border-top-style: solid !important; border-top-width: 1.5px !important; } @keyframes fib-ray-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } } /* RIGHT label — level name + price */ .fused-fib-ray-lbl { right: 10px !important; top: -9px !important; font-size: 7px !important; padding: 1px 5px !important; background: rgba(4,6,12,.78) !important; border-radius: 2px !important; opacity: .55 !important; } .fused-fib-ray.fused-fib-near .fused-fib-ray-lbl { opacity: .92 !important; font-size: 7.5px !important; } .fused-fib-ray.fused-fib-active .fused-fib-ray-lbl { opacity: 1 !important; font-size: 8px !important; font-weight: 700 !important; } /* LEFT level name badge — new, not in style.css */ .fused-fib-ray-lbl-left { position: absolute !important; left: 10px !important; top: -9px !important; font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important; font-size: 6px !important; letter-spacing: .09em !important; white-space: nowrap !important; padding: 1px 4px !important; background: rgba(4,6,12,.72) !important; border-radius: 2px !important; opacity: .45 !important; pointer-events: none !important; z-index: 2 !important; } .fused-fib-ray.fused-fib-near .fused-fib-ray-lbl-left { opacity: .8 !important; } .fused-fib-ray.fused-fib-active .fused-fib-ray-lbl-left { opacity: 1 !important; font-weight: 700 !important; } /* Live price ray — new state, not in style.css */ .fused-fib-ray.fused-fib-live { border-top-style: solid !important; border-top-width: 1.5px !important; border-top-color: rgba(225,235,248,.75) !important; opacity: 1 !important; z-index: 22 !important; } .fused-fib-ray.fused-fib-live .fused-fib-ray-lbl { opacity: 1 !important; font-weight: 700 !important; font-size: 8px !important; background: rgba(4,6,12,.9) !important; color: rgba(225,235,248,.95) !important; } /* ───────────────────────────────────────────────────────────────────────── 7. FIB DISTANCE READOUT — appears below nearest-level badge ───────────────────────────────────────────────────────────────────────── */ #evalFibDistReadout { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 4px 18px 5px; font-family: 'JetBrains Mono', 'Share Tech Mono', monospace; font-size: 7px; letter-spacing: .08em; color: rgba(155,170,192,.4); border-bottom: 1px solid rgb(255 255 255 / 0%); overflow: visible; flex-wrap: nowrap; min-height: 22px; } #evalFibDistReadout .efdr-sep { width: 1px; height: 10px; background: rgba(255,255,255,.1); flex-shrink: 0; } #evalFibDistReadout .efdr-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; } #evalFibDistReadout .efdr-lbl { color: rgba(155,170,192,.3); } #evalFibDistReadout .efdr-val { font-weight: 700; font-size: 8px; } #evalFibDistReadout .efdr-above { color: rgba(0,220,200,.75); } #evalFibDistReadout .efdr-below { color: rgba(255,100,80,.75); } #evalFibDistReadout .efdr-at { color: rgba(255,200,0,.9); } /* ───────────────────────────────────────────────────────────────────────── 8. SESSION BANDS — production polish + enhanced pill hierarchy ───────────────────────────────────────────────────────────────────────── */ /* ── 8a. Container + sizing ── */ .fused-sess-bands { height: 64px !important; align-items: flex-start !important; gap: 1px !important; padding: 0 !important; } /* ── All pills base — one rule block, no splits ── */ .fused-sess-band { height: 52px !important; border-radius: 0 !important; border-top: none !important; /* monochrome top line removed — only the live pill gets a border-top signal now */ border-right: none !important; border-bottom: none !important; border-left: none !important; background: transparent !important; } /* Kill the ::before coloured gradient wash on all pills */ .fused-sess-band::before { opacity: 0 !important; } /* Outer corner rounding only */ .fused-sess-band:first-child { border-radius: 5px 0 0 0 !important; } .fused-sess-band:last-child { border-radius: 0 5px 0 0 !important; } /* ── Live pill — sole carrier of session colour ── */ .fused-sess-band.fused-sess-live { height: 64px !important; border-top: 2px solid rgba(var(--fsb-rgb), .90) !important; border-right: none !important; border-bottom: none !important; /* no bottom line */ border-left: none !important; background: transparent !important; box-shadow: 0 0 18px rgba(var(--fsb-rgb),.10), inset 0 0 28px rgba(var(--fsb-rgb),.04) !important; } /* Restore gradient wash on live pill only */ .fused-sess-band.fused-sess-live::before { opacity: 1 !important; } /* Closed/future pills — recede further */ .fused-sess-band.fused-sess-closed { opacity: .50 !important; background: transparent !important; border-top-color: transparent !important; } /* ── 8b. Progress bar — only meaningful on live pill ── */ .fused-sess-prog { height: 1px !important; background: transparent !important; /* no track — let fill speak */ } .fused-sess-prog-fill { background: rgba(var(--fsb-rgb, 155,170,192), .65) !important; height: 100% !important; } /* ── 8c. Session name — monochrome on inactive, coloured on live ── */ .fused-sess-lbl > span:first-child { padding-left: 12px !important; color: rgba(155,170,192,.35) !important; /* dim on inactive */ } .fused-sess-band.fused-sess-live .fused-sess-lbl > span:first-child { color: rgba(var(--fsb-rgb), .70) !important; /* session colour on live */ } /* ── 8d. Delta — Rajdhani, monochrome inactive / bright live ── */ .fused-sess-delta { font-family: 'Inter', -apple-system, sans-serif !important; font-weight: 700 !important; font-size: 17px !important; color: rgba(180,188,200,.50) !important; /* neutral on inactive */ } .fused-sess-band.fused-sess-live .fused-sess-delta { font-size: 22px !important; color: rgba(var(--fsb-rgb), 1) !important; /* full session colour on live */ } .fused-sess-band:not(.fused-sess-live) .fused-sess-delta { font-size: 17px !important; opacity: 1 !important; /* opacity handled by color above */ } /* ── 8e. Live dot — left-anchored ── */ .fused-sess-dot { top: 6px !important; left: 8px !important; right: auto !important; width: 5px !important; height: 5px !important; } /* ── 8f. LIVE micro-badge ── */ .fused-sess-badge { position: absolute !important; top: 7px !important; right: 8px !important; font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important; font-size: 6px !important; font-weight: 700 !important; letter-spacing: .08em !important; padding: 2px 5px !important; border-radius: 3px !important; background: rgba(var(--fsb-rgb), .12) !important; border: 0.5px solid rgba(var(--fsb-rgb), .35) !important; color: rgba(var(--fsb-rgb), .8) !important; pointer-events: none !important; z-index: 3 !important; white-space: nowrap !important; } /* ── 8g. Sub mood text — monochrome inactive, muted colour on live ── */ .fused-sess-sub { color: rgba(155,170,192,.25) !important; } .fused-sess-band.fused-sess-live .fused-sess-sub { color: rgba(var(--fsb-rgb), .45) !important; } /* Session time sub-label */ .fused-sess-time { font-family: 'JetBrains Mono', 'Share Tech Mono', monospace; font-size: 5.5px; letter-spacing: .07em; text-transform: uppercase; color: rgba(155,170,192,.20); line-height: 1; margin-top: 1px; white-space: nowrap; } .fused-sess-band.fused-sess-live .fused-sess-time { color: rgba(var(--fsb-rgb), .38); } /* ───────────────────────────────────────────────────────────────────────── 9. DELTA BAR — richer background Overrides style.css (height:26px → 28px, gap:16px → 14px, bg tweak) ───────────────────────────────────────────────────────────────────────── */ .fused-delta-bar { background: linear-gradient(0deg, rgba(4,6,12,.98) 0%, rgba(6,8,16,.85) 100%) !important; height: 28px !important; gap: 14px !important; } /* ───────────────────────────────────────────────────────────────────────── 10. STRIP COLUMNS — FIB | SESS | DOW | MACRO Overrides style.css (min-height:110px → 100px, bg tint, hd color tweak) ───────────────────────────────────────────────────────────────────────── */ .bd-ev-strip { min-height: 10px !important; background: rgba(4,6,12,.85) !important; } .bd-ev-strip-hd { color: rgba(0,220,200,.3) !important; } .bd-ev-strip-hd::before { content: '// '; opacity: .5; } /* Fib table rows inside strip — weight enhancement only */ .bd-fib-inner .fib-row { padding: 3px 0 !important; border-bottom: 1px solid rgba(255,255,255,.03) !important; } .bd-fib-inner .fib-row:last-child { border-bottom: none !important; } .bd-fib-inner .fib-price { font-weight: 700 !important; } /* ───────────────────────────────────────────────────────────────────────── 11. RESPONSIVE — tighten on smaller viewports ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 1300px) { #evalFibGauge { margin: 0 14px 5px; } #evalFibDistReadout { padding: 3px 14px 4px; font-size: 6.5px; } } @media (max-width: 1023px) { /* Mobile: hide gauge (space-constrained) */ #evalFibGauge, #evalFibDistReadout { display: none !important; } } /* ───────────────────────────────────────────────────────────────────────── 12. INLINE TIMEFRAME SWITCHER Injected by JS as the last flex child of #evalFibDistReadout. margin-left:auto pushes it flush to the right end of the strip. ───────────────────────────────────────────────────────────────────────── */ #evalTfSwitcher { display: inline-flex; align-items: center; gap: 0; margin-left: auto; flex-shrink: 0; } .etf-item { font-family: 'JetBrains Mono', 'Share Tech Mono', monospace; font-size: 7px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(155,170,192,.25); cursor: pointer; padding: 0 5px; transition: color .15s; user-select: none; white-space: nowrap; } .etf-item:hover { color: rgba(0,245,255,.55); } .etf-item.etf-on { color: rgba(0,245,255,.9); } .etf-sep { display: inline-block; width: 1px; height: 8px; background: rgba(255,255,255,.1); flex-shrink: 0; align-self: center; } @media (max-width: 1023px) { #evalTfSwitcher { display: none !important; } } /* ───────────────────────────────────────────────────────────────────────── 13. TF RANGE READOUT — sits below trend pill when 1H/4H/1D is active ───────────────────────────────────────────────────────────────────────── */ /* Badges area: switch to row so pChg stays left, column sits beside it */ .bd-ev-badges { align-items: center !important; } /* Column wrapper: trend pill centred + range below */ .bd-ev-badges-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } /* TF expected range strip */ #evalTfRange { font-family: 'JetBrains Mono', 'Share Tech Mono', monospace; font-size: 8px; letter-spacing: .06em; color: rgba(155,170,192,.45); white-space: nowrap; line-height: 1; padding: 0 1px; } #evalTfRange .etr-label { color: rgba(155,170,192,.28); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; } #evalTfRange .etr-lo { color: rgba(255,85,75,.75); font-weight: 700; } #evalTfRange .etr-hi { color: rgba(0,210,130,.75); font-weight: 700; } #evalTfRange .etr-sep { color: rgba(155,170,192,.25); margin: 0 3px; } #evalTfRange .etr-atr { color: rgba(155,170,192,.32); font-size: 7px; margin-left: 6px; } /* ───────────────────────────────────────────────────────────────────────── 14. IMPRINTED / DEBOSSED TYPOGRAPHY "EVALUATION" label + price hero feel carved into the card surface — like a name pressed into concrete or a factory stamp on metal. ───────────────────────────────────────────────────────────────────────── */ /* ── EVALUATION label — stamped into the panel like cast metal lettering ── */ #swPriceCard .bd-ev-label { font-family: 'Inter', -apple-system, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .32em !important; text-transform: uppercase !important; /* Mid-tone base — visible but not glowing, like oxidised metal */ color: rgba(155,168,185,.55) !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; -webkit-text-stroke: 0px !important; /* Deboss stack: 1. Hard dark shadow below-right — the shadow cast inside the carved groove 2. Soft dark blur — deepens the recess 3. Bright upper-left sliver — light catching the top rim of the indent 4. No glow — zero ambient bleed keeps it looking inert/physical */ text-shadow: 1px 1px 0px rgba(0,0,0,.95), 1px 2px 4px rgba(0,0,0,.85), 2px 3px 6px rgba(0,0,0,.7), -0.5px -0.5px 0px rgba(255,255,255,.10), -1px -1px 0px rgba(255,255,255,.06) !important; } /* ── Price hero — heavy letterpress into the panel ── */ #swPriceCard #pMain.bd-ev-price, #swPriceCard .bd-ev-price-row #pMain { /* Transparent fill — the text-shadow does all the work */ color: transparent !important; background: linear-gradient( 175deg, rgba(190,200,215,.22) 0%, rgba(140,155,175,.12) 45%, rgba(80,95,115,.06) 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; text-shadow: /* deep recess — punched into the surface */ 2px 4px 6px rgba(0,0,0,.95), 1px 2px 2px rgba(0,0,0,.85), 2px 3px 0px rgba(0,0,0,.7), /* thin light catch on the upper-left edge of each letterform */ -1px -1px 0px rgba(255,255,255,.06) !important; letter-spacing: -.04em !important; } /* ───────────────────────────────────────────────────────────────────────── 15. PUZZLE-PIECE SESSION PILLS — v3 Pattern: Asia(male-right) → London(female-both) ← NY(male-both) → Dead(female-left) Key fixes over v2: - Tab top-border carries the pill's --fsb-top colour so the accent line appears to continue through the joint - Tab bg is slightly LIGHTER than the pill to read as a protrusion - Socket is reinforced with a darker inset shadow on the receiving pill's edge so the indent reads as a physical cavity - Live pill height (64px) accounted for — tab uses CSS var height ───────────────────────────────────────────────────────────────────────── */ .fused-sess-bands { gap: 0 !important; overflow: visible !important; } .fused-sess-band { overflow: visible !important; position: relative !important; } /* Z-index — NY highest (male both sides), then Asia, London, Dead */ #fusedBandNY { z-index: 4 !important; } #fusedBandAsia { z-index: 3 !important; } #fusedBandLondon { z-index: 2 !important; } #fusedBandDead { z-index: 1 !important; } .fused-sess-band.fused-sess-live { z-index: 10 !important; } /* ── Puzzle tabs removed — clean flush joins between pills ── */ .sess-tab, .sess-tab-right, .sess-tab-left { display: none !important; } /* Clean live pill glow without socket shadow interference */ #fusedBandLondon.fused-sess-live, #fusedBandDead.fused-sess-live { box-shadow: 0 0 18px rgba(var(--fsb-rgb),.10), inset 0 0 28px rgba(var(--fsb-rgb),.04) !important; } /* ═══════════════════════════════════════════════════════════════════ SESSION PILL LIVE — aesthetic fix Problem: height jump (52→64px) + font size bump (17→22px) cause jarring layout shift when the live pill activates. Fix: lock all pills to the same height, signal LIVE through colour + glow only — zero physical enlargement. ═══════════════════════════════════════════════════════════════════ */ /* All pills — unified height, no exceptions */ .fused-sess-band, .fused-sess-band.fused-sess-live { height: 56px !important; align-self: stretch !important; } /* Container — match the fixed pill height */ .fused-sess-bands { height: 56px !important; align-items: stretch !important; } /* Live pill — colour signal only, no size change */ .fused-sess-band.fused-sess-live { border-top: 2px solid rgba(var(--fsb-rgb), .85) !important; box-shadow: 0 0 14px rgba(var(--fsb-rgb), .08), inset 0 0 20px rgba(var(--fsb-rgb), .03) !important; } /* Delta — same font size across all pills, live gets colour only */ .fused-sess-band.fused-sess-live .fused-sess-delta, .fused-sess-band:not(.fused-sess-live) .fused-sess-delta { font-size: 19px !important; } /* Live delta — full session colour replaces the neutral tone */ .fused-sess-band.fused-sess-live .fused-sess-delta { color: rgba(var(--fsb-rgb), 1) !important; }