inside
tag */
.uno-css code:not(pre code) {
padding: 0.35rem 0.5rem 0.35rem 0.5rem;
margin-left: 0.2em;
margin-right: 0.2em;
}
/* ---------------------------------------- */
/* Code :: Standalone Code */
.uno-css pre {
margin-top: 1.5rem;
margin-bottom: 1.5rem; /* Unstyling Canvas Defaults */
padding: unset;
border: none;
background-color: unset;
}
.uno-css pre code {
/* line-height: var(--uno-line-height--body); */
display: block;
white-space: pre;
padding: 0.75rem 1rem 0.75rem 1.25rem;
box-sizing: border-box;
overflow-x: auto; /* Scroll only when overflowing */
clear: both; /* Clear previous floats to force full width */
}
/* Code :: Standalone Code :: Adjacent */
.uno-css pre + pre {
margin-top: -1rem;
}
/* ======================================== */
/* Canvas Equation Editor (LaTeX/MathJax) */
/* Space Between Paragraph & Equation */
p + .math_equation_latex {
margin-top: 1rem;
}
/* ======================================== */
/* Step Numbers */
/* Step Numbers :: Container */
.uno-number {
/* May be adjusted below */
font-size: 0.8em; /* May be changed below */
border: 3px solid; /* Circle outline */
padding-top: 0; /* Center digit vertically in circle */
bottom: 0.1em; /* Center relative to text baseline */
/* Always */
font-family: var(--uno-font-family--bold); /* Override Canvas font */
font-weight: var(--uno-font-weight--extrabold);
text-align: center;
width: 1.75em;
height: 1.75em; /* em scales with parent */
color: inherit;
box-sizing: border-box;
border-radius: 50%; /* Circle */
display: inline-block;
margin-right: 0.35em;
margin-left: -0.15em; /* Negative offset for visual alignment */
position: relative; /* Center relative to adjacent text */
}
/* Step Numbers :: Context Adjustments */
p .uno-number {
font-size: 0.65em;
bottom: 0.05em; /* Center relative to text baseline */
}
/* ======================================== */
/* Pull Quotes */
/* -- Native inside .uno-css inherits the pullquote default look */
/* -- Modifiers (--left/--right, --white, custom hex) require the classed form; mirrors the .uno-css table convention */
/* -- Container */
:is([class*="uno-pullquote"], .uno-css blockquote) {
padding: 1.5rem var(--uno-padding--wide) 1.25rem var(--uno-padding--medium);
background-color: var(--uno-block-color--tint);
border-radius: var(--uno-border--radius);
box-sizing: border-box;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
/* -- Text */
:is([class*="uno-pullquote"], .uno-css blockquote) p {
font-family: var(--uno-font-family--bold);
font-weight: var(--uno-font-weight--semibold);
font-size: var(--uno-font-size--h4);
line-height: 1.4;
color: var(--uno-block-color);
/* text-wrap: balance; */
}
/* -- Pull Quote + Horizontal Rule */
:is([class*="uno-pullquote"], .uno-css blockquote) p:last-of-type:after {
content: "";
border-bottom: var(--uno-border--divider) dotted;
border-bottom-color: var(--uno-block-color);
margin-top: 1.25rem;
margin-left: auto;
margin-right: auto; /* Center */
width: 4.5rem;
display: block;
}
/* ======================================== */
/* Captions */
p.uno-caption {
font-family: var(--uno-font-family--bold);
font-weight: var(--uno-font-weight--normal);
font-size: 0.85rem !important; /* Always this size, regardless of context */
line-height: calc(
var(--uno-line-height--body) * 0.9
); /* Reduce line height */
opacity: 0.75; /* Affecting accessibility contrast ratio */
}
/* Media margins around Captions */
/* -- Gap lives on the media element, not the caption */
img:has(+ p.uno-caption) {
margin-bottom: 0.85rem;
}
/*-- Video + Caption */
/* -- .uno-video is a container that includes .uno-video__iframe */
.uno-video:has(+ p.uno-caption) {
margin-bottom: 0.85rem;
}
/*-- Table + Caption */
:is([class*="uno-table"], .uno-css table):has(+ p.uno-caption) {
margin-bottom: 0.85rem;
}
:is([class*="uno-table"], .uno-css table) + p.uno-caption {
margin-bottom: 2.2rem;
}
/* ======================================== */
/* Images */
.uno-css img {
height: auto; /* Retain proportion */
box-sizing: border-box; /* Ensure width matches intent */
display: block; /* block is consistent with other elements → Images are inline by default */
width: 100%;
border-radius: calc(var(--uno-border--radius) * 0.6);
}
/* -- Top-level images only */
.uno-css > img {
border: var(--uno-border--outline) solid
color-mix(in srgb, var(--uno-block-color), white 85%);
margin-top: 1.2rem;
}
/* -- Paragraph + Image */
.uno-css p + img {
margin-top: 1.2rem; /* Added space between text and following image */
}
/* -- Scroll reveal */
.uno-css img {
transition: opacity 0.8s ease;
}
/* -- Hidden until JS observer fires */
.uno-image--reveal {
visibility: hidden;
opacity: 0;
}
/* ---------------------------------------- */
/* Reduce whitepoint for images with white borders */
/* -- Automatically differentiate white backgrounds from white borders */
[class*="uno-callout"]>[class*="uno-callout"] img,
/* -- Images in nested Callouts */
.uno-accordion__panel>[class*="uno-callout"] img,
.uno-tabs__panel>[class*="uno-callout"] img,
[class*="uno-callout"] .uno-cards__card img,
/* -- Images in nested Cards */
.uno-accordion__panel .uno-cards__card img,
.uno-tabs__panel .uno-cards__card img {
filter: brightness(0.975) contrast(0.975);
}
/* ======================================== */
/* Videos */
/* ---------------------------------------- */
/* Videos :: Container */
.uno-video,
.uno-video--portrait {
/* background-color: var(--uno-color--black-tint); /* ❌ */
border-radius: var(--uno-border--radius);
box-sizing: border-box; /* Ensure width matches intent */
margin-top: 1.2rem;
}
/* Videos :: Container :: Portrait */
.uno-video--portrait {
max-width: calc(
var(--uno-width--max) * 0.4
); /* Ensure portrait videos are a reasonable size */
}
/* ---------------------------------------- */
/* Videos :: Responsive */
/* -- via → W3Schools @ https://www.w3schools.com/howto/howto_css_responsive_iframes.asp */
/* -- Padding value changes dynamically with size of Video Container */
/* Videos :: Responsive ::