/* Generated from scripts/templates/showcase.css. */
@layer reset, base, components, sections, responsive, motion, ocean;
@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body,
h1,
h2,
h3,
p,
dl,
dd,
figure,
pre {
margin: 0;
}
img,
svg {
display: block;
max-width: 100%;
}
button,
input {
font: inherit;
}
a {
color: inherit;
}
}
@layer base {
:root {
color-scheme: dark;
--content: min(1180px, calc(100vw - 48px));
--display: "Segoe UI Variable Display", "Aptos Display", "Segoe UI", system-ui, sans-serif;
--body: "Segoe UI Variable Text", "Aptos", "Segoe UI", system-ui, sans-serif;
--mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
--border-quiet: var(--dsf-overlay-separator);
--ease-out: cubic-bezier(.16, 1, .3, 1);
}
body {
min-width: 320px;
overflow-x: hidden;
background: var(--dsf-solid-base);
color: var(--dsf-solid-text);
font-family: var(--body);
font-size: 16px;
line-height: 1.65;
text-rendering: optimizeLegibility;
}
body::before {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 2px;
content: "";
transform: scaleX(0);
transform-origin: left;
background: var(--dsf-solid-accent);
pointer-events: none;
}
::selection {
background: var(--dsf-derived-text-selection);
color: var(--dsf-solid-warm);
}
:focus-visible {
outline: 2px solid var(--dsf-solid-accent);
outline-offset: 4px;
}
.section-shell {
width: var(--content);
margin-inline: auto;
}
.skip-link {
position: fixed;
z-index: 200;
top: 12px;
left: 12px;
padding: 9px 14px;
transform: translateY(-160%);
border: 1px solid var(--dsf-solid-accent);
border-radius: 4px;
background: var(--dsf-solid-base);
color: var(--dsf-solid-warm);
text-decoration: none;
}
.skip-link:focus {
transform: translateY(0);
}
.sr-only,
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.eyebrow {
display: flex;
align-items: center;
gap: 10px;
color: var(--dsf-solid-accent);
font-family: var(--mono);
font-size: .72rem;
font-weight: 650;
letter-spacing: .16em;
line-height: 1.3;
text-transform: uppercase;
}
.eyebrow > span {
width: 22px;
height: 1px;
background: currentColor;
}
.section-intro {
max-width: 780px;
}
.section-intro.compact {
max-width: 700px;
margin: 0;
}
.section-intro h2,
.hierarchy h2,
.final-cta h2 {
max-width: 850px;
margin-top: 20px;
color: var(--dsf-solid-warm);
font-family: var(--display);
font-size: clamp(2.35rem, 5vw, 5.25rem);
font-weight: 560;
letter-spacing: -.055em;
line-height: .98;
}
.section-intro > p:last-child {
max-width: 700px;
margin-top: 25px;
font-size: 1.06rem;
line-height: 1.8;
}
}
@layer components {
.site-header {
position: relative;
z-index: 20;
display: grid;
width: var(--content);
min-height: 86px;
margin-inline: auto;
grid-template-columns: 1fr auto 1fr;
align-items: center;
border-bottom: 1px solid var(--border-quiet);
}
.brand {
display: inline-flex;
width: fit-content;
align-items: center;
gap: 11px;
color: var(--dsf-solid-warm);
font-family: var(--display);
font-size: .96rem;
font-weight: 680;
letter-spacing: -.02em;
text-decoration: none;
}
.brand-mark {
width: 30px;
height: 30px;
flex-shrink: 0;
}
.site-header nav {
display: flex;
align-items: center;
gap: 34px;
}
.site-header nav a,
.footer-links a {
position: relative;
color: var(--dsf-solid-text);
font-size: .83rem;
text-decoration: none;
}
.site-header nav a::after {
position: absolute;
right: 0;
bottom: -8px;
left: 0;
height: 1px;
content: "";
transform: scaleX(0);
transform-origin: right;
background: var(--dsf-solid-accent);
transition: transform .25s var(--ease-out);
}
.site-header nav a:hover {
color: var(--dsf-solid-warm);
}
.site-header nav a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.header-download {
display: inline-flex;
justify-self: end;
align-items: center;
gap: 9px;
color: var(--dsf-solid-warm);
font-size: .83rem;
font-weight: 620;
text-decoration: none;
}
.header-download svg,
.button svg {
width: 16px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
}
.button {
display: inline-flex;
min-height: 49px;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 19px;
border: 1px solid transparent;
border-radius: 5px;
font-size: .88rem;
font-weight: 680;
text-decoration: none;
transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.button:hover {
transform: translateY(-2px);
}
.button-primary {
background: var(--dsf-solid-accent);
color: var(--dsf-solid-base);
}
.button-primary:hover {
background: var(--dsf-solid-text);
}
.button-secondary {
border-color: var(--dsf-solid-border);
background: var(--dsf-solid-base);
color: var(--dsf-solid-text);
}
.button-secondary:hover {
border-color: var(--dsf-solid-accent);
color: var(--dsf-solid-warm);
}
.button-applications {
background: var(--dsf-solid-document);
color: var(--dsf-solid-base);
}
.button-applications:hover {
background: var(--dsf-solid-text);
}
.hero-browse {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 11px;
max-width: 100%;
}
.hero-browse .button {
padding-inline: 14px;
font-size: .82rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 11px;
}
.hero-actions.centered {
justify-content: center;
}
.section-intro {
padding-top: 135px;
}
}
@layer sections {
.hero {
display: grid;
min-height: calc(100svh - 86px);
padding: 85px 0 110px;
grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr);
align-items: center;
gap: 7vw;
}
.hero-copy h1 {
margin: 25px 0 28px;
color: var(--dsf-solid-text);
font-family: var(--display);
font-size: clamp(4.15rem, 7.8vw, 8.3rem);
font-weight: 520;
letter-spacing: -.075em;
line-height: .82;
}
.hero-copy h1 em {
display: block;
margin-top: .14em;
color: var(--dsf-solid-warm);
font-style: normal;
}
.hero-lede {
max-width: 630px;
margin-bottom: 37px;
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.85;
}
.hero-facts {
display: flex;
margin-top: 53px;
gap: 0;
}
.hero-facts div {
min-width: 118px;
padding: 0 28px;
border-left: 1px solid var(--border-quiet);
}
.hero-facts div:first-child {
padding-left: 0;
border-left: 0;
}
.hero-facts dt {
color: var(--dsf-solid-warm);
font-family: var(--mono);
font-size: 1.3rem;
font-weight: 600;
line-height: 1;
}
.hero-facts dd {
margin-top: 7px;
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .63rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.workstation-wrap {
min-width: 0;
}
.workstation {
position: relative;
overflow: hidden;
border: 1px solid var(--dsf-solid-border);
border-radius: 9px;
background: var(--dsf-solid-panel);
box-shadow: 0 40px 100px var(--dsf-overlay-shadow-strong);
}
.workstation::before,
.workstation::after {
position: absolute;
z-index: 3;
width: 13px;
height: 13px;
content: "";
pointer-events: none;
}
.workstation::before {
top: 9px;
left: 9px;
border-top: 1px solid var(--dsf-solid-accent);
border-left: 1px solid var(--dsf-solid-accent);
}
.workstation::after {
right: 9px;
bottom: 9px;
border-right: 1px solid var(--dsf-solid-accent);
border-bottom: 1px solid var(--dsf-solid-accent);
}
.workstation-titlebar {
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-bottom: 1px solid var(--border-quiet);
}
.wordmark {
display: flex;
align-items: center;
gap: 9px;
color: var(--dsf-solid-text);
font-size: .7rem;
font-weight: 620;
}
.wordmark img {
width: 18px;
height: 18px;
}
.window-actions {
display: flex;
gap: 13px;
}
.window-actions i {
display: block;
width: 8px;
height: 8px;
border: 1px solid var(--dsf-solid-border);
border-radius: 50%;
}
.window-actions i:last-child {
border-color: var(--dsf-solid-accent);
}
.workstation-body {
display: flex;
min-height: 520px;
}
.workstation-rail {
display: flex;
width: 50px;
flex: 0 0 50px;
flex-direction: column;
align-items: center;
gap: 22px;
padding: 20px 0 15px;
border-right: 1px solid var(--border-quiet);
background: var(--dsf-solid-panel);
}
.rail-icon {
position: relative;
display: grid;
width: 30px;
height: 30px;
place-items: center;
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .65rem;
}
.rail-icon.active {
color: var(--dsf-solid-accent);
}
.rail-icon.active::before {
position: absolute;
top: 4px;
left: -10px;
width: 2px;
height: 22px;
border-radius: 3px;
background: var(--dsf-solid-accent);
content: "";
}
.rail-icon.active i {
position: absolute;
width: 14px;
height: 10px;
border: 1px solid currentColor;
}
.rail-icon.active i:nth-child(1) { transform: translate(-3px, -4px); }
.rail-icon.active i:nth-child(2) { transform: translate(0, 0); }
.rail-icon.active i:nth-child(3) { transform: translate(3px, 4px); }
.rail-icon.branch::before {
width: 18px;
height: 18px;
border-top: 1px solid currentColor;
border-left: 1px solid currentColor;
border-radius: 9px 0 0;
content: "";
transform: rotate(45deg);
}
.rail-spacer { flex: 1; }
.rail-icon.small {
border: 1px solid var(--dsf-solid-border);
border-radius: 50%;
font-size: .7rem;
}
.workstation-main {
display: grid;
min-width: 0;
flex: 1;
background: var(--dsf-solid-base);
grid-template-rows: 38px 1fr 145px;
}
.workstation-tabs {
display: flex;
overflow: hidden;
border-bottom: 1px solid var(--border-quiet);
background: var(--dsf-solid-panel);
}
.workstation-tabs span {
position: relative;
display: flex;
min-width: 118px;
align-items: center;
gap: 7px;
padding: 0 13px;
border-right: 1px solid var(--border-quiet);
color: var(--dsf-solid-faint-text);
font-size: .62rem;
white-space: nowrap;
}
.workstation-tabs span.active {
background: var(--dsf-solid-base);
color: var(--dsf-solid-warm);
}
.workstation-tabs span.active::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 2px;
background: var(--dsf-solid-accent);
content: "";
}
.workstation-tabs i {
width: 7px;
height: 7px;
border-radius: 2px;
background: var(--dsf-solid-accent);
}
.workstation-tabs b {
margin-left: auto;
color: var(--dsf-solid-faint-text);
font-weight: 400;
}
.editor-grid {
display: grid;
overflow: hidden;
padding: 25px 18px 15px 0;
grid-template-columns: 46px 1fr;
background: var(--dsf-solid-base);
}
.editor-grid pre,
.line-numbers {
font-family: var(--mono);
font-size: clamp(.65rem, .88vw, .77rem);
line-height: 1.72;
}
.line-numbers {
padding-right: 14px;
color: var(--dsf-solid-faint-text);
text-align: right;
user-select: none;
}
.editor-grid pre {
overflow: hidden;
color: var(--dsf-solid-text);
}
.editor-grid code { font: inherit; }
.syntax-comment { color: var(--dsf-solid-faint-text); font-style: italic; }
.syntax-selector { color: var(--dsf-heritage-blue); }
.syntax-property { color: var(--dsf-heritage-violet); }
.syntax-string { color: var(--dsf-solid-accent); }
.syntax-keyword { color: var(--dsf-solid-document); }
.terminal {
overflow: hidden;
padding: 0 18px 13px;
border-top: 1px solid var(--border-quiet);
background: var(--dsf-solid-base);
color: var(--dsf-terminal-foreground);
font-family: var(--mono);
font-size: .66rem;
}
.terminal-head {
display: flex;
height: 38px;
align-items: center;
gap: 20px;
color: var(--dsf-solid-faint-text);
font-size: .55rem;
letter-spacing: .09em;
}
.terminal-head span:first-child {
position: relative;
color: var(--dsf-solid-warm);
}
.terminal-head span:first-child::after {
position: absolute;
right: 0;
bottom: -10px;
left: 0;
height: 1px;
background: var(--dsf-solid-accent);
content: "";
}
.terminal-head i {
height: 1px;
flex: 1;
background: var(--border-quiet);
}
.terminal p {
line-height: 1.8;
}
.terminal p b {
color: var(--dsf-terminal-cyan);
}
.terminal p > span {
color: var(--dsf-terminal-white);
}
.terminal .terminal-success {
color: var(--dsf-terminal-green);
}
.terminal-cursor {
display: inline-block;
width: 6px;
height: 12px;
background: var(--dsf-terminal-cursor-color);
vertical-align: middle;
animation: cursor-blink 1.1s steps(1) infinite;
}
.terminal ::selection { background: var(--dsf-terminal-selection-background); color: var(--dsf-terminal-foreground); }
.workstation-status {
display: flex;
height: 27px;
align-items: center;
gap: 16px;
padding: 0 12px;
border-top: 1px solid var(--border-quiet);
background: var(--dsf-solid-base);
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .5rem;
}
.workstation-status > span:first-child {
color: var(--dsf-solid-accent);
}
.workstation-status i {
display: inline-block;
width: 5px;
height: 5px;
margin-right: 5px;
border-radius: 50%;
background: var(--dsf-solid-accent);
}
.status-spacer { flex: 1; }
.workstation-caption {
display: flex;
margin-top: 15px;
justify-content: space-between;
gap: 20px;
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .04em;
}
.workstation-caption span {
color: var(--dsf-solid-accent);
letter-spacing: .13em;
}
.surface-decision {
position: relative;
padding-bottom: 145px;
border-top: 1px solid var(--border-quiet);
background: var(--dsf-solid-panel);
}
.surface-stage {
display: grid;
width: min(1380px, calc(100vw - 48px));
margin: 80px auto 0;
grid-template-columns: 1fr 92px 1fr;
align-items: stretch;
}
.surface-card {
display: flex;
min-height: 460px;
flex-direction: column;
justify-content: space-between;
padding: 24px 28px 33px;
border: 1px solid var(--dsf-solid-border);
border-radius: 6px;
}
.surface-base { background: var(--dsf-solid-base); }
.surface-panel { background: var(--dsf-solid-panel); }
.surface-card-head {
display: flex;
justify-content: space-between;
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .61rem;
letter-spacing: .12em;
}
.surface-card-head code {
color: var(--dsf-solid-text);
font: inherit;
letter-spacing: .04em;
}
.surface-card-copy p {
margin-bottom: 14px;
color: var(--dsf-solid-accent);
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .16em;
}
.surface-card-copy h3 {
max-width: 590px;
color: var(--dsf-solid-warm);
font-family: var(--display);
font-size: clamp(2rem, 3.4vw, 4rem);
font-weight: 520;
letter-spacing: -.05em;
line-height: 1.02;
}
.surface-card-copy span {
display: block;
margin-top: 35px;
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .05em;
}
.surface-relationship {
display: flex;
min-height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .55rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.surface-relationship span {
width: 1px;
height: 82px;
background: var(--dsf-solid-border);
}
.surface-relationship b {
padding: 13px 0;
font-weight: 500;
writing-mode: vertical-rl;
}
.principles {
padding: 150px 0 165px;
}
.design-story {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(32px, 6vw, 80px);
margin-top: 55px;
}
.design-story h3 {
color: var(--dsf-solid-warm);
font-family: var(--display);
font-size: 1.45rem;
font-weight: 560;
}
.design-story-copy p {
margin-top: 22px;
line-height: 1.85;
}
.design-story-copy h3:not(:first-child) {
margin-top: 32px;
}
.design-evidence {
display: grid;
align-content: start;
gap: 32px;
}
.design-evidence blockquote {
margin: 0;
padding-left: 24px;
border-left: 2px solid var(--dsf-solid-accent);
}
.design-evidence blockquote p {
color: var(--dsf-solid-warm);
font-family: var(--display);
font-size: 1.05rem;
line-height: 1.65;
}
.design-evidence cite {
display: block;
margin-top: 13px;
font-size: .76rem;
font-style: normal;
line-height: 1.7;
}
.research-note {
max-width: 92ch;
margin-top: 42px;
color: var(--dsf-solid-text);
font-size: .82rem;
line-height: 1.8;
}
.palette-section {
padding-bottom: 150px;
border-top: 1px solid var(--border-quiet);
background: var(--dsf-solid-panel);
}
.palette-groups {
margin-top: 78px;
}
.daylight-companion { margin-top: 100px; scroll-margin-top: 30px; }
.daylight-study { overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--background); color: var(--text); }
.daylight-study header, .daylight-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 18px 28px; background: var(--surface); color: var(--muted); font: .65rem var(--mono); letter-spacing: .12em; }
.daylight-study header { border-bottom: 1px solid var(--separator); }
.daylight-caption { border-top: 1px solid var(--separator); line-height: 1.6; }
.daylight-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; padding: 36px; }
.daylight-paper { padding: 36px; background: var(--paper); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 18px var(--shadow); }
.daylight-kicker { color: var(--muted); font: .65rem var(--mono); letter-spacing: .12em; }
.daylight-study h4 { margin: 20px 0; color: var(--heading); font: 500 clamp(2rem, 4vw, 3.5rem)/1.08 Georgia, serif; letter-spacing: -.04em; }
.daylight-study p + p { margin-top: 20px; }
.daylight-study mark { background: var(--selection); color: var(--heading); }
.daylight-action { display: inline-block; margin-top: 26px; padding: 12px 20px; border-radius: 4px; background: var(--accent); color: var(--button-text); font-weight: 600; text-decoration: none; }
.daylight-action:hover { background: var(--accent-hover); }
.daylight-study :focus-visible { outline-color: var(--accent); }
.daylight-sidebar { padding: 22px; background: var(--surface); border-radius: 4px; }
.daylight-sidebar h4 { font-size: 2rem; }
.daylight-sidebar hr { margin: 28px 0; border: 0; border-top: 1px solid var(--separator); }
.daylight-document { color: var(--document); }
.daylight-warning { color: var(--warning); }
.daylight-error { color: var(--error); }
.daylight-note { margin-top: 22px; font-size: .85rem; }
.color-swatch.light-overlay .swatch-preview { background: linear-gradient(var(--swatch-color), var(--swatch-color)), var(--surface); }
.palette-group + .palette-group {
margin-top: 88px;
}
.palette-group-header {
display: grid;
margin-bottom: 25px;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: end;
}
.palette-group-header h3 {
color: var(--dsf-solid-warm);
font-family: var(--display);
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -.02em;
}
.palette-group-header p {
justify-self: end;
max-width: 540px;
color: var(--dsf-solid-faint-text);
font-size: .81rem;
text-align: right;
}
.swatch-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border-quiet);
border-left: 1px solid var(--border-quiet);
}
.color-swatch {
position: relative;
display: grid;
min-width: 0;
min-height: 185px;
padding: 0;
overflow: hidden;
grid-template-rows: 105px 1fr;
border: 0;
border-right: 1px solid var(--border-quiet);
border-bottom: 1px solid var(--border-quiet);
border-radius: 0;
background: var(--dsf-solid-base);
color: var(--dsf-solid-text);
cursor: pointer;
text-align: left;
}
.swatch-preview {
position: relative;
overflow: hidden;
background-color: var(--swatch-color);
}
.color-swatch.overlay .swatch-preview {
background-color: var(--dsf-preview-checker-light);
background-image:
linear-gradient(45deg, var(--dsf-preview-checker-dark) 25%, transparent 25%),
linear-gradient(-45deg, var(--dsf-preview-checker-dark) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--dsf-preview-checker-dark) 75%),
linear-gradient(-45deg, transparent 75%, var(--dsf-preview-checker-dark) 75%);
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
background-size: 16px 16px;
}
.color-swatch.overlay .swatch-preview::after {
position: absolute;
inset: 0;
background: var(--swatch-color);
content: "";
}
.swatch-info {
display: grid;
padding: 15px 16px 16px;
grid-template-columns: 1fr auto;
gap: 5px 12px;
transition: background .2s var(--ease-out);
}
.swatch-info strong {
overflow: hidden;
color: var(--dsf-solid-warm);
font-size: .78rem;
font-weight: 620;
text-overflow: ellipsis;
white-space: nowrap;
}
.swatch-info code {
color: var(--dsf-solid-accent);
font-family: var(--mono);
font-size: .67rem;
}
.swatch-info small {
overflow: hidden;
grid-column: 1 / -1;
color: var(--dsf-solid-faint-text);
font-size: .67rem;
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
}
.color-swatch:hover .swatch-info,
.color-swatch:focus-visible .swatch-info {
background: var(--dsf-overlay-hover);
}
.color-swatch::after {
position: absolute;
top: 10px;
right: 10px;
padding: 4px 7px;
border: 1px solid var(--dsf-overlay-separator);
border-radius: 3px;
background: var(--dsf-overlay-backdrop);
color: var(--dsf-solid-warm);
content: "COPY";
font-family: var(--mono);
font-size: .48rem;
letter-spacing: .1em;
opacity: 0;
transform: translateY(-4px);
transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.color-swatch:hover::after,
.color-swatch:focus-visible::after {
opacity: 1;
transform: translateY(0);
}
.noscript-note {
padding: 20px;
border: 1px solid var(--dsf-solid-warning);
background: var(--dsf-solid-base);
color: var(--dsf-solid-warm);
}
.hierarchy {
display: grid;
padding: 155px 0;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 9vw;
}
.hierarchy-copy > p:not(.eyebrow) {
max-width: 590px;
margin-top: 27px;
line-height: 1.8;
}
.control-study {
overflow: hidden;
border: 1px solid var(--dsf-solid-border);
border-radius: 8px;
background: var(--dsf-solid-panel);
box-shadow: 0 30px 80px var(--dsf-overlay-shadow-strong);
}
.control-head {
display: flex;
height: 52px;
align-items: center;
justify-content: space-between;
padding: 0 20px;
border-bottom: 1px solid var(--border-quiet);
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .58rem;
letter-spacing: .1em;
}
.control-head span:first-child {
color: var(--dsf-solid-accent);
}
.control-row {
display: grid;
min-height: 88px;
padding: 15px 20px;
grid-template-columns: 1fr minmax(180px, .9fr);
align-items: center;
border-bottom: 1px solid var(--border-quiet);
font-size: .75rem;
}
.control-row:last-child { border-bottom: 0; }
.control-row > span:first-child { color: var(--dsf-solid-faint-text); }
.control-row .demo-control {
display: inline-flex;
justify-self: end;
min-width: 145px;
min-height: 36px;
align-items: center;
justify-content: center;
padding: 6px 13px;
border-radius: 4px;
}
.demo-primary {
border: 1px solid var(--dsf-solid-accent);
background: var(--dsf-solid-accent);
color: var(--dsf-solid-base);
font-weight: 680;
}
.demo-primary:hover { background: var(--dsf-solid-text); border-color: var(--dsf-solid-text); }
.demo-selected {
border: 1px solid var(--dsf-solid-accent);
background: var(--dsf-solid-base);
color: var(--dsf-solid-accent);
}
.demo-selected i {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 7px;
border-radius: 50%;
background: currentColor;
}
.demo-input {
justify-self: end;
}
.demo-input code {
display: flex;
width: 180px;
min-height: 38px;
align-items: center;
padding: 7px 10px;
border: 1px solid var(--dsf-solid-border);
border-radius: 4px;
background: var(--dsf-solid-base);
color: var(--dsf-solid-text);
font-family: var(--mono);
font-size: .72rem;
}
.demo-error {
position: relative;
display: grid;
justify-self: end;
width: 225px;
min-height: 54px;
padding: 9px 12px 9px 29px;
border: 1px solid var(--dsf-solid-error);
border-radius: 4px;
background: var(--dsf-solid-base);
}
.demo-error i {
position: absolute;
top: 12px;
left: 11px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dsf-solid-error);
}
.demo-error b {
color: var(--dsf-solid-warm);
font-size: .68rem;
font-weight: 620;
}
.demo-error small {
color: var(--dsf-solid-faint-text);
font-size: .58rem;
}
.applications {
padding-bottom: 155px;
border-top: 1px solid var(--border-quiet);
background: var(--dsf-solid-panel);
}
.application-grid {
display: grid;
margin-top: 82px;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 300px;
gap: 12px;
}
.app-card {
position: relative;
display: flex;
overflow: hidden;
padding: 24px;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--border-quiet);
border-radius: 6px;
background: var(--dsf-solid-base);
text-decoration: none;
transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.app-card:hover {
z-index: 2;
border-color: var(--dsf-solid-accent);
transform: translateY(-5px);
}
.app-card-top {
display: flex;
align-items: start;
justify-content: space-between;
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .58rem;
}
.app-card-top img {
width: 48px;
height: 48px;
padding: 7px;
object-fit: contain;
flex-shrink: 0;
border: 1px solid var(--dsf-solid-border);
border-radius: 8px;
}
.app-github-pages .app-card-top img {
background: #fff;
}
.app-card h3 {
color: var(--dsf-solid-warm);
font-family: var(--display);
font-size: clamp(1.55rem, 2.3vw, 2.35rem);
font-weight: 560;
letter-spacing: -.04em;
line-height: 1;
}
.app-card p {
max-width: 390px;
margin-top: 13px;
color: var(--dsf-solid-text);
font-size: .8rem;
line-height: 1.65;
}
.app-link {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 17px;
border-top: 1px solid var(--border-quiet);
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .59rem;
letter-spacing: .07em;
text-transform: uppercase;
}
.app-link b {
color: var(--dsf-solid-accent);
font-size: .9rem;
}
.final-cta {
position: relative;
overflow: hidden;
padding: 155px 0 165px;
border-top: 1px solid var(--border-quiet);
background: var(--dsf-solid-panel);
text-align: center;
}
.final-cta .eyebrow {
justify-content: center;
}
.final-cta h2 {
max-width: 900px;
margin-inline: auto;
}
.final-cta .section-shell > p:not(.eyebrow) {
max-width: 640px;
margin: 28px auto 36px;
font-size: 1.05rem;
}
.final-mark {
position: absolute;
top: 50%;
left: 50%;
width: min(950px, 85vw);
aspect-ratio: 2 / 1;
transform: translate(-50%, -50%);
pointer-events: none;
}
.final-mark span {
position: absolute;
inset: 0;
border: 1px solid var(--dsf-overlay-separator);
border-radius: 50%;
}
.final-mark span:nth-child(2) { inset: 15%; }
.final-mark span:nth-child(3) { inset: 30%; border-color: var(--dsf-solid-border); }
.final-cta .section-shell {
position: relative;
z-index: 1;
}
footer {
border-top: 1px solid var(--border-quiet);
background: var(--dsf-solid-base);
}
.footer-grid {
display: grid;
padding: 75px 0;
grid-template-columns: 1fr 1fr;
}
.footer-brand {
font-size: 1rem;
}
.footer-grid > div:first-child > p {
margin-top: 16px;
color: var(--dsf-solid-faint-text);
font-size: .78rem;
}
.footer-links {
display: grid;
grid-template-columns: 1fr 1fr;
}
.footer-links > div {
display: grid;
align-content: start;
gap: 10px;
}
.footer-links strong {
margin-bottom: 6px;
color: var(--dsf-solid-warm);
font-family: var(--mono);
font-size: .62rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.footer-links a:hover {
color: var(--dsf-solid-accent);
}
.footer-bottom {
display: flex;
min-height: 68px;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top: 1px solid var(--border-quiet);
color: var(--dsf-solid-faint-text);
font-family: var(--mono);
font-size: .56rem;
letter-spacing: .04em;
}
.copy-toast {
position: fixed;
z-index: 90;
right: 20px;
bottom: 20px;
max-width: calc(100vw - 40px);
padding: 10px 14px;
border: 1px solid var(--dsf-solid-accent);
border-radius: 4px;
background: var(--dsf-solid-panel);
color: var(--dsf-solid-warm);
box-shadow: 0 12px 45px var(--dsf-overlay-shadow-strong);
font-family: var(--mono);
font-size: .65rem;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.copy-toast.visible {
opacity: 1;
transform: translateY(0);
}
}
@layer responsive {
@media (max-width: 1100px) {
.hero {
min-height: auto;
padding-top: 100px;
grid-template-columns: 1fr;
gap: 80px;
}
.hero-copy {
max-width: 800px;
}
.hero-copy h1 {
font-size: clamp(4.4rem, 12vw, 8.5rem);
}
.workstation-wrap {
width: min(850px, 100%);
margin-inline: auto;
}
.hierarchy {
grid-template-columns: 1fr;
}
.control-study {
width: min(680px, 100%);
}
.swatch-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 780px) {
.daylight-layout { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
.daylight-paper { padding: 24px; }
.daylight-study header, .daylight-caption { padding: 18px 20px; }
:root {
--content: min(100% - 32px, 1180px);
}
.site-header {
grid-template-columns: 1fr auto;
}
.site-header nav {
display: none;
}
.section-intro {
padding-top: 100px;
}
.hero {
padding: 75px 0 90px;
}
.hero-copy h1 {
font-size: clamp(3.6rem, 17vw, 6.8rem);
}
.hero-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.hero-facts div {
min-width: 0;
padding: 0 15px;
}
.workstation-body {
min-height: 450px;
}
.workstation-rail {
display: none;
}
.workstation-main {
grid-template-rows: 38px 1fr 130px;
}
.workstation-tabs span:nth-child(n+3) {
display: none;
}
.surface-stage {
grid-template-columns: 1fr;
gap: 15px;
}
.surface-relationship {
min-height: 55px;
flex-direction: row;
}
.surface-relationship span {
width: 70px;
height: 1px;
}
.surface-relationship b {
padding: 0 12px;
writing-mode: initial;
}
.surface-card {
min-height: 370px;
}
.principles {
padding: 110px 0;
}
.palette-group-header {
grid-template-columns: 1fr;
}
.palette-group-header p {
justify-self: start;
text-align: left;
}
.swatch-grid {
grid-template-columns: repeat(2, 1fr);
}
.hierarchy {
padding: 110px 0;
}
.application-grid {
grid-template-columns: 1fr;
grid-auto-rows: 270px;
}
.design-story {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.footer-bottom {
padding: 20px 0;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
}
@media (max-width: 520px) {
.header-download {
padding: 8px 10px;
border: 1px solid var(--dsf-solid-border);
border-radius: 4px;
font-size: .7rem;
}
.hero-actions {
display: grid;
}
.button {
width: 100%;
}
.hero-facts {
gap: 18px 0;
}
.hero-facts dt {
font-size: 1.05rem;
}
.hero-facts dd {
font-size: .52rem;
}
.workstation {
border-radius: 5px;
}
.workstation-titlebar {
height: 44px;
}
.window-actions { display: none; }
.editor-grid {
padding-right: 10px;
grid-template-columns: 35px 1fr;
}
.editor-grid pre,
.line-numbers {
font-size: .55rem;
}
.workstation-status span:nth-child(n+3) {
display: none;
}
.workstation-caption {
display: none;
}
.surface-card {
min-height: 330px;
padding: 20px;
}
.swatch-grid {
grid-template-columns: 1fr;
}
.color-swatch {
grid-template-rows: 85px 1fr;
min-height: 160px;
}
.control-row {
grid-template-columns: 1fr;
gap: 12px;
}
.control-row .demo-control,
.demo-input,
.demo-error {
width: 100%;
justify-self: stretch;
}
.demo-input code {
width: 100%;
}
.final-cta {
padding: 120px 0;
}
}
}
@layer motion {
@keyframes cursor-blink {
50% { opacity: 0; }
}
@keyframes scroll-progress {
to { transform: scaleX(1); }
}
@keyframes enter-section {
from {
transform: translateY(28px);
}
to {
transform: translateY(0);
}
}
@supports (animation-timeline: scroll()) {
body::before {
animation: scroll-progress linear both;
animation-timeline: scroll(root);
}
}
@supports (animation-timeline: view()) {
.section-intro,
.design-story,
.palette-group,
.hierarchy-copy,
.control-study,
.application-grid {
animation: enter-section linear both;
animation-range: entry 5% entry 30%;
animation-timeline: view();
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .001ms !important;
}
body::before {
display: none;
}
}
}