/* ============================================================================
RavenCoreX — Base (v4)
Font loading + base element styles. Depends on design-tokens.css + reset.css.
NOTE on fonts: this @import is the production-simple path. For best LCP the
page should also add:
styleguide-v4.html and all pages include those preconnects directly.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Montserrat:wght@400;500;600&family=JetBrains+Mono:wght@400;700&display=swap');
html {
font-family: var(--font-body);
color: var(--color-text);
background-color: var(--color-bg);
scroll-behavior: smooth;
}
body {
font-size: var(--text-body);
line-height: var(--leading-body);
font-weight: var(--weight-regular);
color: var(--color-text);
background-color: var(--color-bg);
}
/* ---- Headings — Sora -------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--color-text);
}
h1 { /* default H1 == Display L; hero uses .rcx-display-xl utility */
font-weight: var(--weight-bold);
font-size: var(--text-h1);
line-height: var(--leading-h1);
letter-spacing: var(--tracking-h1);
}
h2 {
font-weight: var(--weight-bold);
font-size: var(--text-h2);
line-height: var(--leading-h2);
letter-spacing: var(--tracking-h2);
}
h3 {
font-weight: var(--weight-semibold);
font-size: var(--text-h3);
line-height: var(--leading-h3);
letter-spacing: var(--tracking-h3);
}
h4 {
font-weight: var(--weight-semibold);
font-size: var(--text-h4);
line-height: var(--leading-h4);
letter-spacing: var(--tracking-h4);
}
h5 {
font-weight: var(--weight-semibold);
font-size: var(--text-h5);
line-height: var(--leading-h5);
letter-spacing: var(--tracking-normal);
}
h6 {
font-weight: var(--weight-regular);
font-size: var(--text-overline);
line-height: var(--leading-h5);
letter-spacing: var(--tracking-overline);
text-transform: uppercase;
}
/* Responsive heading down-scale */
@media (max-width: 768px) {
h1 { font-size: 3rem; } /* ~48px */
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
}
/* ---- Body text -------------------------------------------------------------- */
p {
font-size: var(--text-body);
line-height: var(--leading-body);
max-width: var(--measure);
}
/* ---- Links ------------------------------------------------------------------ */
a {
color: var(--color-link);
transition: color var(--duration-hover) var(--easing-out);
}
/* Content links only. Buttons (any *btn* class) keep the color their own
component defines (inheriting the hover color would tank contrast on a
filled button). */
a:not([class*="btn"]):hover {
color: var(--color-azure-500);
}
/* :visited is differentiated ONLY inside long-form editorial content
(blog / mag / legal). A fixed dark "visited" color is invisible on dark
surfaces (footer, dark CTAs) and on filled buttons, so it must never apply
to UI links site-wide — UI links keep their normal/override color. */
.rcx-prose a:visited {
color: var(--color-azure-900);
}
/* Inline content links: underline draws in left→right on hover */
.rcx-prose a,
a.rcx-link {
position: relative;
color: var(--color-azure-700);
}
.rcx-prose a::after,
a.rcx-link::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-tooltip) var(--easing-out);
}
.rcx-prose a:hover::after,
a.rcx-link:hover::after {
transform: scaleX(1);
}
/* ---- Code ------------------------------------------------------------------- */
code, kbd, samp, pre {
font-family: var(--font-mono);
}
code {
font-size: 0.9em;
background: var(--color-neutral-50);
border: var(--icon-stroke) solid var(--color-border);
padding: 0.1em 0.35em;
}
pre {
font-size: var(--text-code);
line-height: var(--leading-body);
background: var(--color-neutral-950);
color: var(--color-neutral-200);
padding: var(--space-md);
overflow-x: auto;
border: var(--icon-stroke) solid var(--color-neutral-800);
}
pre code {
background: none;
border: 0;
padding: 0;
color: inherit;
}
/* ---- Selection -------------------------------------------------------------- */
::selection {
background: var(--color-azure-500);
color: var(--color-neutral-0);
}
/* ---- Horizontal rule -------------------------------------------------------- */
hr {
border: 0;
border-top: var(--icon-stroke) solid var(--color-border);
margin: var(--space-lg) 0;
}