/* ==========================================================================
Dashboard Assistant — landing page styles
--------------------------------------------------------------------------
Everything here is scoped to `.da-*` classes used on the home page, so it
never affects the rest of the docs. Colors are pulled from Material's
palette variables (`--md-*`), which means the whole landing page adapts to
the light (`default`) and dark (`slate`) schemes automatically.
========================================================================== */
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.da-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
margin: 1rem 0 4rem;
}
/* Stack the hero on narrower viewports. */
@media screen and (max-width: 59.9em) {
.da-hero {
grid-template-columns: 1fr;
gap: 2.5rem;
text-align: center;
}
.da-hero__cta { justify-content: center; }
}
.da-hero__eyebrow {
display: inline-block;
margin: 0 0 0.75rem;
padding: 0.2rem 0.7rem;
border-radius: 2rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
/* Amber is a fill (2.2:1 on white), so the label takes the ink variant and
only the pill behind it is tinted with the fill. */
color: var(--md-accent-fg-color);
background: color-mix(in srgb, var(--md-primary-fg-color) 14%, transparent);
}
.da-hero__title {
margin: 0 0 1rem;
font-size: clamp(2rem, 1.2rem + 3.2vw, 3.2rem);
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.02em;
}
/* Accent word in the headline — ink, not fill: #E8A33D is 2.2:1 on white and
fails even the large-text threshold. */
.da-hero__title .da-accent { color: var(--md-accent-fg-color); }
.da-hero__lead {
margin: 0 0 1.75rem;
font-size: 1.05rem;
line-height: 1.6;
color: var(--md-default-fg-color--light);
}
.da-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
/* Hardware line under the hero CTA — the supported-target slot from the brand
copy table. Deliberately quiet: it answers "will it run on mine?" without
competing with the buttons above it. */
.da-hero__hardware {
margin: 1rem 0 0;
font-size: 0.78rem;
color: var(--md-default-fg-color--light);
}
/* --------------------------------------------------------------------------
Buttons
--------------------------------------------------------------------------
Selectors are scoped under `.md-typeset` so they out-specify Material's
default `.md-typeset a` link color — otherwise the button label inherits the
indigo link color and vanishes on the primary button's indigo background.
-------------------------------------------------------------------------- */
.md-typeset .da-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 1.25rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease,
color 120ms ease, border-color 120ms ease;
}
.md-typeset .da-btn:hover { transform: translateY(-1px); }
.md-typeset .da-btn--primary,
.md-typeset .da-btn--primary:hover {
color: var(--md-primary-bg-color);
background: var(--md-primary-fg-color);
}
.md-typeset .da-btn--primary {
box-shadow: 0 6px 18px color-mix(in srgb, var(--md-primary-fg-color) 35%, transparent);
}
.md-typeset .da-btn--primary:hover {
box-shadow: 0 8px 22px color-mix(in srgb, var(--md-primary-fg-color) 45%, transparent);
}
.md-typeset .da-btn--ghost {
color: var(--md-default-fg-color);
background: transparent;
border: 1px solid var(--md-default-fg-color--lighter);
}
.md-typeset .da-btn--ghost:hover {
border-color: var(--md-accent-fg-color);
color: var(--md-accent-fg-color);
}
/* --------------------------------------------------------------------------
Tablet mockup + crossfading screenshots
--------------------------------------------------------------------------
To change what shows on the screen, edit the list inside
`.da-tablet__screen` on the home page (docs/index.md). The crossfade timing
below is tuned for FIVE slides; if you add or remove images, update the
`--da-slides` count, the `:nth-child` delays, and the `da-fade` keyframe
percentages to match (each slide gets a 100% / --da-slides window).
-------------------------------------------------------------------------- */
.da-tablet {
--da-slides: 5;
--da-slide-time: 6s; /* seconds each slide stays on screen */
position: relative;
width: 100%;
max-width: 560px;
margin-inline: auto;
padding: 3%; /* uniform bezel around the screen */
border-radius: 1.4rem;
background: linear-gradient(150deg, #34343a 0%, #17171b 60%, #0e0e11 100%);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.4),
0 24px 55px -20px rgba(0, 0, 0, 0.55),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Front-facing camera dot. */
.da-tablet::before {
content: "";
position: absolute;
top: 1.6%;
left: 50%;
transform: translateX(-50%);
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #3a3a44, #0b0b0e);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* Soft contact shadow, so the panel feels like it sits on the page. */
.da-tablet::after {
content: "";
position: absolute;
left: 8%;
right: 8%;
bottom: -7%;
height: 8%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
filter: blur(14px);
z-index: -1;
}
.da-tablet__screen {
position: relative;
width: 100%;
/* Match the screenshots' native 1024x600 so they sit flush in the bezel,
with no letterboxing or cropping. The tablet body sizes itself from this
plus the uniform padding above. */
aspect-ratio: 1024 / 600;
overflow: hidden;
border-radius: 0.35rem;
background: #000;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}
.da-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
animation: da-fade calc(var(--da-slide-time) * var(--da-slides)) infinite;
}
/* A single static screenshot inside a tablet frame (e.g. the In Action
gallery). Fills the screen the same way a slide does, but without the
crossfade animation. */
.da-tablet-figure {
margin: 2.5rem auto;
}
.da-shot {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Portrait orientation — the panel rotated 90° via the integration. The
frame is narrower and its screen takes the flipped 600x1024 ratio. */
.da-tablet--portrait {
max-width: 340px;
}
.da-tablet--portrait .da-tablet__screen {
aspect-ratio: 600 / 1024;
}
.da-slide:nth-child(1) { animation-delay: calc(var(--da-slide-time) * 0); }
.da-slide:nth-child(2) { animation-delay: calc(var(--da-slide-time) * 1); }
.da-slide:nth-child(3) { animation-delay: calc(var(--da-slide-time) * 2); }
.da-slide:nth-child(4) { animation-delay: calc(var(--da-slide-time) * 3); }
.da-slide:nth-child(5) { animation-delay: calc(var(--da-slide-time) * 4); }
@keyframes da-fade {
0% { opacity: 0; }
3% { opacity: 1; }
17% { opacity: 1; }
20% { opacity: 0; }
100% { opacity: 0; }
}
/* Respect users who ask for less motion: just show the first screenshot. */
@media (prefers-reduced-motion: reduce) {
.da-slide { animation: none; }
.da-slide:nth-child(1) { opacity: 1; }
}
/* --------------------------------------------------------------------------
Feature / goal cards
-------------------------------------------------------------------------- */
.da-section-title {
margin: 3rem 0 0.4rem;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.da-section-lead {
margin: 0 0 1.5rem;
color: var(--md-default-fg-color--light);
}
.da-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.da-card {
padding: 1.4rem;
border-radius: 0.7rem;
border: 1px solid var(--md-default-fg-color--lightest);
background: var(--md-default-bg-color);
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.da-card:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--md-primary-fg-color) 40%, transparent);
box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.5);
}
/* --------------------------------------------------------------------------
Scenes — what the thing is like to live with
--------------------------------------------------------------------------
Alternating text/screenshot rows, sitting between the three steps and the
feature grid. Same two-column shape as .da-hero and the same 59.9em collapse,
so the page has one stacking point rather than two.
The screenshot reuses .da-tablet / .da-tablet__screen / .da-shot, which
in-action.md already uses for exactly this.
-------------------------------------------------------------------------- */
.da-scenes {
display: grid;
gap: 3.5rem;
margin: 1.5rem 0 1rem;
}
.da-scene {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
/* Consecutive scenes put the screenshot on opposite sides. `order` rather than
`direction`, which would also flip the text's own inline direction. */
.da-scene:nth-child(even) > .da-scene__media { order: -1; }
/* A scene with no screenshot yet — runs full width at a readable measure
instead of leaving an empty column. Zensical builds happily with a missing
image file and would ship a broken one to the live site, so a scene stays
text-only until its screenshot actually exists.
To promote one to image-led: drop this modifier from the .da-scene in
docs/index.md and give it a sibling
The music scene is waiting on docs/img/music-assistant.jpeg — a shot of the
Music Assistant page running on a device.
Note the theme's root font-size is 20px, so 1rem is 20px here, not 16 — the
cap below is 560px, which matches the column a two-column scene gives its
text, so every scene holds the same measure. */
.da-scene--text {
grid-template-columns: 1fr;
max-width: 28rem;
}
/* The scene screenshot is smaller than the hero's. A scene's text is only two
or three lines, and a full 560px tablet leaves ~190px of dead space either
side of it once align-items has centred the pair. */
.da-scene__media .da-tablet {
max-width: 23rem;
}
.da-scene__text > :first-child { margin-top: 0; }
.da-scene__text > :last-child { margin-bottom: 0; }
/* Match the feature cards' heading scale rather than the h3 default, so a scene
title and a card title read as the same level. */
.md-typeset .da-scene__text h3 {
margin: 0 0 0.6rem;
font-size: 1.25rem;
}
.da-scene__text p {
margin: 0;
line-height: 1.65;
color: var(--md-default-fg-color--light);
}
@media screen and (max-width: 59.9em) {
.da-scene {
grid-template-columns: 1fr;
gap: 2rem;
}
/* Stacked, the screenshot always follows its text — the alternation only
means anything side by side. */
.da-scene:nth-child(even) > .da-scene__media { order: 0; }
}
/* --------------------------------------------------------------------------
Card icon tile
--------------------------------------------------------------------------
The icon sits in a rounded square, not a circle: the brand mark is a grid of
rounded tiles, so the radius here is the mark's own (rx 3.5 on a 14-unit
tile, i.e. a quarter of the side). Feature cards get the washed tile with an
ink glyph; the three-step section gets the solid amber fill, which reads as
"do these in order" against the quieter feature grid.
Icons come from `:lucide-*:` shortcodes, which inline an SVG with
stroke="currentColor" — so `color` below drives the stroke. Sizing has to be
explicit; the SVG has no intrinsic size to scale with font-size.
-------------------------------------------------------------------------- */
.da-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 0.55rem;
color: var(--md-accent-fg-color);
background: color-mix(in srgb, var(--md-primary-fg-color) 16%, transparent);
}
/* Size the glyph through the theme's own --md-icon-size knob rather than
setting width/height here: its `.md-typeset .twemoji svg` rule carries a
type selector, so it outspecifies anything scoped to .da-card__icon and the
svg ends up 1.125em wide against whatever height we asked for — a non-square
box that pushes a square viewBox off-centre. The knob has to be re-declared
on .twemoji itself; the theme declares it there too, so setting it on the
tile would just lose to that. */
.da-card__icon .twemoji {
--md-icon-size: 1.15rem;
}
.da-cards--steps {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Step numbers are type, not a glyph: solid amber tile, dark ink numeral. */
.da-cards--steps .da-card__icon {
font-size: 0.95rem;
font-weight: 700;
line-height: 1;
color: var(--md-primary-bg-color);
background: var(--md-primary-fg-color);
}
.da-card h3 {
margin: 0.7rem 0 0.4rem;
font-size: 1.05rem;
}
.da-card p {
margin: 0;
font-size: 0.9rem;
line-height: 1.55;
color: var(--md-default-fg-color--light);
}
/* Inline lucide icons in body copy — the sponsor list and the hardware status
tables. Sit them on the text baseline and give the two status glyphs the
brand's semantic rails, so a table column stays scannable without colour
being the only signal (the word next to it says the same thing). */
.md-typeset li > .twemoji,
.md-typeset td > .twemoji,
.md-typeset td .twemoji {
vertical-align: -0.15em;
}
.md-typeset svg.lucide-circle-check { color: var(--da-sage); }
.md-typeset svg.lucide-clock { color: var(--md-default-fg-color--light); }
/* A list item that opens with an icon already has a marker — drop the bullet
rather than show both, and pull the row back into the bullet's column. */
.md-typeset li:has(> .twemoji:first-child) {
list-style: none;
margin-left: -1.05em;
}
.md-typeset li:has(> .twemoji:first-child) > .twemoji {
color: var(--md-accent-fg-color);
margin-right: 0.15em;
}
/* Alert glyph in the announcement banner (overrides/main.html). */
.da-announce-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
margin-right: 0.15em;
}
/* --------------------------------------------------------------------------
Beating heart on the "Sponsor" nav link
--------------------------------------------------------------------------
The tab bar renders labels as plain text — the page's `icon:` front matter
never reaches it — so the heart is added here as a pseudo-element, which
also lets it animate. Matches the Sponsor link in both the top tabs and the
sidebar, at any page depth (href ends in "sponsor/").
It is the lucide heart used as a mask rather than an emoji, so it takes the
amber ink like every other icon on the site instead of forcing the platform's
own red. Inlined as a data URI because a masked external file would be a
second request for one glyph.
-------------------------------------------------------------------------- */
.md-tabs__link[href$="sponsor/"]::before,
.md-nav__link[href$="sponsor/"]::before {
content: "";
display: inline-block;
width: 0.95em;
height: 0.95em;
margin-right: 0.4em;
vertical-align: -0.15em;
background-color: var(--md-accent-fg-color);
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209.5a5.5%205.5%200%200%201%209.591-3.676.56.56%200%200%200%20.818%200A5.49%205.49%200%200%201%2022%209.5c0%202.29-1.5%204-3%205.5l-5.492%205.313a2%202%200%200%201-3%20.019L5%2015c-1.5-1.5-3-3.2-3-5.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%209.5a5.5%205.5%200%200%201%209.591-3.676.56.56%200%200%200%20.818%200A5.49%205.49%200%200%201%2022%209.5c0%202.29-1.5%204-3%205.5l-5.492%205.313a2%202%200%200%201-3%20.019L5%2015c-1.5-1.5-3-3.2-3-5.5%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
transform-origin: center;
animation: da-heartbeat 1.3s ease-in-out infinite;
}
@keyframes da-heartbeat {
0%, 100% { transform: scale(1); }
15% { transform: scale(1.3); }
30% { transform: scale(1); }
45% { transform: scale(1.2); }
60% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.md-tabs__link[href$="sponsor/"]::before,
.md-nav__link[href$="sponsor/"]::before {
animation: none;
}
}
/* --------------------------------------------------------------------------
Footer legal links
--------------------------------------------------------------------------
The Impressum/Datenschutz links live inside the `copyright` HTML fragment in
zensical.toml, because Zensical has no config key for footer links. The
theme gives `.md-copyright` a muted color and no link styling, so without
this the links are indistinguishable from the surrounding text.
-------------------------------------------------------------------------- */
.md-copyright__highlight a {
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, currentcolor 40%, transparent);
text-underline-offset: 0.2em;
}
.md-copyright__highlight a:is(:hover, :focus-visible) {
color: var(--md-accent-fg-color);
text-decoration-color: currentcolor;
}
/* --------------------------------------------------------------------------
Analytics opt-out control (legal/datenschutz)
--------------------------------------------------------------------------
The button is built by docs/javascripts/privacy-optout.js. It reuses
.da-btn / .da-btn--ghost, which until now were only ever applied to
elements — a
