/* CanvasPro brand tokens — aligned to the real Web UI palette
* (webui/src/style.css), not the marketing brand sheet, so docs look
* like the product they describe.
* Primary #5d6ae3 Indigo (was #5865F2 in the brand spec)
* Primary light #a0abff
* Primary hover #4a4d7a (dark) / #dfe3ff (light)
* Accent #B44AFF Action Purple
* Warm violet #8B6EF5
* Deep black #0A0A0C
* Surface #111113
* Headings #F5F5F5
* Body #D4D4D4
* Muted #737373
*/
:root,
[data-md-color-scheme="default"] {
--md-primary-fg-color: #5d6ae3;
--md-primary-fg-color--light: #a0abff;
--md-primary-fg-color--dark: #45455a;
--md-accent-fg-color: #B44AFF;
--md-accent-fg-color--transparent: rgba(180, 74, 255, 0.12);
}
[data-md-color-scheme="slate"] {
--md-primary-fg-color: #5d6ae3;
--md-primary-fg-color--light: #a0abff;
--md-primary-fg-color--dark: #45455a;
--md-accent-fg-color: #B44AFF;
--md-accent-fg-color--transparent: rgba(180, 74, 255, 0.14);
--md-default-bg-color: #0A0A0C;
--md-default-bg-color--light: #111113;
--md-default-fg-color: #F5F5F5;
--md-default-fg-color--light: #D4D4D4;
--md-default-fg-color--lighter: #737373;
--md-code-bg-color: #111113;
--md-typeset-color: #D4D4D4;
--md-typeset-a-color: #8B6EF5;
}
/* Brand wordmark in the header — the wordmark already says "CanvasPro",
* so we hide the redundant site_name text next to it.
*/
.md-header__button.md-logo img {
height: 26px;
width: auto;
}
.md-header__title .md-header__topic {
display: none;
}
/* Swap to the dark wordmark when the user picks the light scheme */
[data-md-color-scheme="default"] .md-header__button.md-logo img {
content: url("../assets/canvaspro-wordmark-dark.png");
}
/* Headings use the lighter heading colour, slightly tighter tracking */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
color: #F5F5F5;
letter-spacing: -0.01em;
}
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3 {
color: #171717;
}
/* The hero is always dark-themed regardless of scheme; force its heading
* to stay white so the headline remains legible in light mode.
*/
[data-md-color-scheme="default"] .cp-hero h1,
[data-md-color-scheme="default"] .cp-hero .eyebrow { color: #FFFFFF; }
[data-md-color-scheme="default"] .cp-hero .eyebrow { color: #8B6EF5; }
[data-md-color-scheme="default"] .cp-hero p.lede { color: #D4D4D4; }
/* ============================================================================
* Hero — landing page only
* ========================================================================== */
.cp-hero {
margin: 2rem 0 3rem;
padding: 3.25rem 2rem;
border-radius: 8px;
background:
radial-gradient(1200px 420px at 12% 0%, rgba(93, 106, 227, 0.22), transparent 60%),
radial-gradient(900px 380px at 88% 100%, rgba(139, 110, 245, 0.18), transparent 60%),
linear-gradient(135deg, #111113, #0A0A0C);
color: #F5F5F5;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.cp-hero .eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #8B6EF5;
margin: 0 0 0.85rem;
}
.cp-hero h1 {
margin: 0 0 0.85rem;
font-size: clamp(2rem, 3.4vw, 2.9rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: #FFFFFF;
}
.cp-hero p.lede {
margin: 0 0 1.75rem;
max-width: 60ch;
font-size: 1.075rem;
line-height: 1.6;
color: #D4D4D4;
}
.cp-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.cp-hero-ctas a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.7rem 1.15rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.92rem;
text-decoration: none;
transition: transform 200ms ease-out, filter 200ms ease-out;
}
.cp-hero-ctas a.primary {
background: linear-gradient(105deg, #5d6ae3 20%, #8B6EF5 55%, #5d6ae3 90%);
background-size: 200% 100%;
background-position: 0% 50%;
color: #FFFFFF;
box-shadow: 0 6px 20px rgba(93, 106, 227, 0.35);
}
.cp-hero-ctas a.primary:hover { background-position: 100% 50%; }
.cp-hero-ctas a.secondary {
background: rgba(255, 255, 255, 0.05);
color: #F5F5F5;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.cp-hero-ctas a:hover { filter: brightness(1.05); }
.cp-hero-ctas a:active { transform: scale(0.98); }
/* ============================================================================
* Card grid — section overviews
* ========================================================================== */
.cp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}
/* Force a 3-column layout for landing grids that hold 6 items, so they wrap
* as 3 + 3 instead of the auto-fit 5 + 1 at wide viewports.
*/
.cp-grid.cp-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) {
.cp-grid.cp-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.cp-grid.cp-grid--3 { grid-template-columns: 1fr; }
}
.cp-grid > a.cp-card {
display: block;
padding: 1.1rem 1.25rem;
border-radius: 6px;
background: #1f1f23;
border: 1px solid rgba(255, 255, 255, 0.08);
color: inherit;
text-decoration: none;
transition: transform 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out;
}
[data-md-color-scheme="default"] .cp-grid > a.cp-card {
background: #f1f1f3;
border-color: #E5E5E5;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.cp-grid > a.cp-card:hover {
border-color: #5d6ae3;
box-shadow: 0 8px 20px rgba(93, 106, 227, 0.18);
transform: translateY(-2px);
}
.cp-card .cp-card-title {
display: block;
margin: 0 0 0.4rem;
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.005em;
color: #F5F5F5;
}
[data-md-color-scheme="default"] .cp-card .cp-card-title { color: #171717; }
.cp-card .cp-card-desc {
display: block;
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--md-default-fg-color--light, #D4D4D4);
}
/* ============================================================================
* Inline clip — full-width autoplay/loop/muted, soft drop shadow, no controls.
* Behaves like a GIF; use these to show short product interactions next to the
* prose that describes them. Pattern:
*
* ========================================================================== */
video.cp-clip {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
margin: 1.25rem 0 1.5rem;
border-radius: 6px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.45);
background:
radial-gradient(600px 240px at 20% 0%, rgba(93, 106, 227, 0.18), transparent 65%),
radial-gradient(500px 220px at 90% 100%, rgba(139, 110, 245, 0.12), transparent 60%),
linear-gradient(135deg, #111113, #0A0A0C);
}
[data-md-color-scheme="default"] video.cp-clip {
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}
/* Optional caption immediately under a clip */
video.cp-clip + .cp-clip-caption {
display: block;
margin: -0.75rem 0 1.5rem;
font-size: 0.85rem;
color: var(--md-default-fg-color--lighter, #737373);
font-style: italic;
}
/* Focus ring per brand guidelines */
:focus-visible {
outline: 2px solid #5d6ae3;
outline-offset: 2px;
border-radius: 4px;
}
/* ============================================================================
* Horizontal-rule separators — used between releases on /whats-new/. We want
* a visible section break, not the default faint line.
* ========================================================================== */
.md-typeset hr {
margin: 2.5rem 0 1.5rem;
border: 0;
height: 1px;
background: linear-gradient(
to right,
transparent,
rgba(93, 106, 227, 0.45) 20%,
rgba(93, 106, 227, 0.45) 80%,
transparent
);
}
[data-md-color-scheme="default"] .md-typeset hr {
background: linear-gradient(
to right,
transparent,
rgba(93, 106, 227, 0.35) 20%,
rgba(93, 106, 227, 0.35) 80%,
transparent
);
}
/* Pull the h2 right under an
closer so the release header reads as the
* start of the new section rather than floating mid-air. */
.md-typeset hr + h2 {
margin-top: 0.6rem;
}