/* * Stanrose Stock Ticker. * * Colours come from the child theme's --sr-* tokens (finwave-child/assets/ * stanrose.css), with the same values as fallbacks so the ticker still looks * right if those tokens are ever missing. */ .smt-ticker { --smt-primary: var(--sr-primary, #006D5B); --smt-deep: var(--sr-deep, #00382F); --smt-ink: var(--sr-ink, #12211E); --smt-body: var(--sr-body, #4A5654); --smt-muted: var(--sr-muted, #6E7B78); --smt-line: var(--sr-line, #DCE5E3); --smt-ground: var(--sr-ground, #F4F7F6); --smt-danger: var(--sr-danger, #B3261E); background: var(--smt-ground); border-bottom: 1px solid var(--smt-line); color: var(--smt-body); font-size: 14px; line-height: 1.4; } /* * The Finwave sticky header is position: fixed and overlays the top of the * page, so a ticker placed directly below it needs clearance equal to the * header height. --sr-header-h is measured per breakpoint in the child theme. * No admin-bar adjustment: WordPress already offsets by the bar's * height, which moves the ticker and the fixed header down equally. */ .has-sticky-header .smt-ticker--top { padding-top: var(--sr-header-h, 136px); } .smt-ticker--inline { border: 1px solid var(--smt-line); border-radius: 6px; } .smt-inner { box-sizing: border-box; max-width: 1340px; margin: 0 auto; padding: 18px 20px; } .smt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 40px; } /* --- Identity ------------------------------------------------------- */ .smt-identity { flex: 0 1 260px; min-width: 0; } .smt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; } .smt-exchange, .smt-symbol { font-size: 12px; font-weight: 700; letter-spacing: .6px; color: var(--smt-primary); } .smt-symbol { color: var(--smt-muted); } .smt-status, .smt-test { display: inline-block; padding: 2px 7px; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .8px; line-height: 1.5; } .smt-status { border: 1px solid var(--smt-line); background: #fff; color: var(--smt-muted); } .smt-status--live { border-color: var(--smt-primary); color: var(--smt-primary); } .smt-test { background: #FFF4D6; color: #7A5300; border: 1px solid #F0D48A; } .smt-company { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--smt-ink); } /* --- Price ---------------------------------------------------------- */ .smt-quote { flex: 0 0 auto; } .smt-price { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.3px; color: var(--smt-ink); font-variant-numeric: tabular-nums; } .smt-change { margin-top: 2px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .smt-change--up { color: var(--smt-primary); } .smt-change--down { color: var(--smt-danger); } .smt-change--flat { color: var(--smt-muted); } .smt-time { margin-top: 2px; font-size: 12px; color: var(--smt-muted); } /* --- Stats ---------------------------------------------------------- */ .smt-stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; padding: 0 0 0 36px; border-left: 1px solid var(--smt-line); } .smt-stat dt { margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--smt-muted); } .smt-stat dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--smt-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- TradingView fallback ------------------------------------------- */ .smt-tradingview { flex: 1 1 320px; max-width: 420px; min-width: 0; } .smt-tradingview .tradingview-widget-container { width: 100%; } /* The widget iframe has its own fixed inner padding and height. */ .smt-mode-tradingview .smt-inner { padding-top: 6px; padding-bottom: 0; } .smt-mode-tradingview .smt-tradingview iframe { display: block; } /* --- Details link --------------------------------------------------- */ .smt-details { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--smt-primary); text-decoration: none; white-space: nowrap; } .smt-details:hover, .smt-details:focus-visible { color: var(--smt-deep); text-decoration: underline; } /* --- Admin-only notice ---------------------------------------------- */ .smt-admin-notice { margin: 0 0 12px; padding: 6px 10px; border-left: 3px solid #D9A400; background: #FFF8E1; font-size: 12.5px; color: #5C4500; } /* --- Small screens -------------------------------------------------- */ @media (max-width: 1024px) { .smt-row { gap: 14px 28px; } .smt-stats { gap: 10px 24px; padding-left: 0; border-left: 0; flex-basis: 100%; } .smt-details { margin-left: 0; } } @media (max-width: 767px) { .smt-inner { padding: 14px 16px; } .smt-row { flex-direction: column; align-items: stretch; gap: 10px; } .smt-identity { flex-basis: auto; } .smt-price { font-size: 26px; } .smt-stats { display: grid; grid-template-columns: 1fr; gap: 6px; } .smt-stat { display: flex; justify-content: space-between; gap: 12px; } .smt-stat dt { margin: 0; align-self: center; } .smt-tradingview { max-width: none; flex-basis: auto; } }