/* =============================================================================
WhiteRock Lithium (ASX: WLC) - Weblink widget embed styles
-----------------------------------------------------------------------------
Hosted on the WhiteRock domain and linked from each Weblink widget template
with a SINGLE tag, e.g. placed last in the widget's :
What it does:
1. Defines the WhiteRock design-system CSS variables the widget templates
already reference via var(--wr-*). Inside the iframe these are otherwise
undefined, so anything wired to them (e.g. links) renders unstyled.
2. Corrects the handful of elements still on browser defaults (chiefly the
un-classed
section headings, which fall back to 700-weight pure
black). Everything Weblink has already put a class on matches our site.
After this link is added once, WhiteRock controls the widget styling entirely
by editing THIS file - no further Weblink change is required.
Note: the price-chart plot line/fill colours are set in the chart's own JS
config, not CSS, so they are NOT covered here - that remains a Weblink-side
config item (target: line #3890CA, up #57C98A, down #E0736A).
Version: 1.0 ยท 2026-08-21
============================================================================= */
/* 1. Design-system variables the templates reference ------------------------ */
:root {
--wr-ink: #0F1929; /* primary text / headings (not pure black) */
--wr-ink-2: #15354A; /* body copy */
--wr-text-body: #15354A;
--wr-text-muted: #6F8798; /* dates, labels, captions */
--wr-brand: #3890CA;
--wr-brand-deep: #016697; /* links, buttons, emphasis */
--wr-brand-light: #6FB5E0;
--wr-blue-grey: #9FB0BC; /* muted text on dark (chart/ticker) */
--wr-line: #D7DEE2; /* hairline rules / borders */
--wr-hairline: #D7DEE2;
--wr-bg-alt: #F7F9FA; /* off-white band (feed / section rules use this) */
--wr-white: #FFFFFF;
--wr-link: #016697;
--wr-link-hover: #3890CA;
--wr-pos: #1A8A5A; /* positive / up on light */
/* Earth-tone accents (geology rows). Their frozen rules reference these, so we
define them here to keep our current values winning over their snapshot. */
--wr-sand-60: #EFE9DD;
--wr-terracotta: #A96C4D;
--wr-terracotta-deep: #6B4B3F;
--wr-dur: 0.4s;
--wr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 2. Base - our font + body colour (Inter is already imported by the template) */
body {
font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
color: var(--wr-text-body);
}
/* 3. THE recurring fix - widget section headings ----------------------------- */
/* Un-classed
titles ("Share price", "Latest ASX announcements", "Investor
presentations", "Financial reports") fall back to browser default 700-weight
pure black. Ours are semibold on ink. border-bottom-color only recolours an
existing underline - it does not add one. Safe unscoped: the stylesheet only
ever loads inside a single-widget iframe. */
h3 {
font-weight: 600;
color: var(--wr-ink);
letter-spacing: 0.02em;
border-bottom-color: var(--wr-ink);
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
/* 4. Subscribe form ---------------------------------------------------------- */
/* Wide tracking on the uppercase button label; ink-colour the form heading. */
button[type="submit"],
.wr-btn { letter-spacing: 0.14em; }
h2 { color: var(--wr-ink); }
/* 5. Links - brand-deep, brand on hover (belt-and-braces) -------------------- */
a { color: var(--wr-link); text-decoration: none; }
a:hover,
a:focus-visible { color: var(--wr-link-hover); }
/* 6. Square corners - the WhiteRock site has no rounded corners anywhere ------ */
* { border-radius: 0 !important; }
/* 7. Remove the positional-placeholder asterisk ------------------------------ */
/* The widget markup still carries our old * marker next
to the share price. The site removed all placeholder markers, and the widget
shows live (delayed) data, so this asterisk is not wanted. */
.wr-ph { display: none !important; }