, until the
plugin launches and gre-lite/ goes up. It keeps the .product-row-last grid
and rule, but must not offer the link cursor or the link text colour. */
.product-row-soon {
cursor: default;
color: #14130f;
}
.page-spacer {
margin-top: auto;
min-height: 64px;
}
.site-footer { border-top: 1px solid #14130f; }
.footer-bar {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
padding: 32px 0;
font: 400 11px/1.6 'JetBrains Mono',monospace;
letter-spacing: .06em;
color: #8a8880;
}
.footer-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.footer-muted { color: #8a8880; }
.footer-sep { color: #cfcdc4; }
.footer-link {
color: #8a8880;
cursor: pointer;
}
.menu-button {
display: none;
margin-left: auto;
background: none;
border: 0;
padding: 10px;
cursor: pointer;
color: #14130f;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
.menu-icon {
width: 22px;
height: 22px;
display: block;
}
.site-nav {
margin-left: auto;
display: flex;
align-items: center;
gap: 20px;
}
.nav-link {
font: 700 11px/1 'JetBrains Mono',monospace;
letter-spacing: .12em;
padding: 4px 0;
border-bottom: 1px solid transparent;
cursor: pointer;
}
.nav-cta {
background: #14130f;
color: #f2f1ec;
padding: 9px 18px;
font: 700 11px/1 'JetBrains Mono',monospace;
letter-spacing: .12em;
cursor: pointer;
}
.full-width { width: 100%; }
/* .hero is the page-header band: the padding that clears the fixed .site-header
(58px) and the black rule under the headline. It absorbs what .page-head and
.about-head used to carry as separate wrapper classes, so a page opens with
one instead of two nested divs. Its children need no class
of their own — the bare h1 / p rules below style them. */
.hero {
padding: 88px 0 40px;
border-bottom: 1px solid #14130f;
}
/* Every
is a page headline, so it is styled on the element and carries no
class. This replaced seven near-identical title classes (.page-title,
.hero-title, .download-title, .contact-title, .about-title, .doc-title,
.changelog-title) that differed only in font-size and line-height. The two
sizes that were genuinely different are now .hero-large and .hero-small,
set on the wrapper. */
h1 {
margin: 0;
font: 800 clamp(34px,6vw,84px)/1.02 'JetBrains Mono',monospace;
letter-spacing: -0.045em;
}
/* Headline size modifiers. .hero alone gives the 84px headline used by most
pages; these two are the outliers. No max-width anywhere — every headline
runs the full page width. */
.hero-large h1 { font-size: clamp(40px,7.4vw,104px); }
.hero-small h1 { font-size: clamp(30px,5vw,68px); }
/* The lede paragraph, the button row and the format note that follow the
headline inside .hero. These replace .hero-lede/.download-lede/.thanks-lede/
.manual-lede, .hero-actions/.download-actions, and .buy-note/.tagline. */
.hero > p {
margin: 30px 0 0;
font: 400 16px/1.65 'JetBrains Mono',monospace;
color: #5c5a52;
}
.hero-actions {
margin: 40px 0 0;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.hero-note {
margin: 22px 0 0;
font: 700 12px/1 'JetBrains Mono',monospace;
letter-spacing: .06em;
color: #8a8880;
}
/* .tagline and .buy-note are the same two notes used OUTSIDE .hero — in the
buy sections of gre/index.html and gre-lite/index.html, where there is no
.hero wrapper to inherit from. .buy-note matches .hero-note exactly; .tagline
is the smaller, wider-tracked variant. */
.buy-note {
margin: 22px 0 0;
font: 700 12px/1 'JetBrains Mono',monospace;
letter-spacing: .06em;
color: #8a8880;
}
.tagline {
margin: 30px 0 0;
font: 700 11px/1.9 'JetBrains Mono',monospace;
letter-spacing: .16em;
color: #8a8880;
}
.hero-mark {
background: #9b74f6;
color: #14130f;
padding: 0.06em .09em;
white-space: nowrap;
display: inline-block;
}
.hero-actions {
margin: 40px 0 0;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.button-primary {
background: #14130f;
color: #f2f1ec;
padding: 16px 30px;
font: 700 12px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
}
.button-secondary {
border: 1px solid #14130f;
padding: 16px 30px;
font: 700 12px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
cursor: pointer;
}
.video-section {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 80px 28px 0;
box-sizing: border-box;
}
.video-frame {
border: 1px solid #14130f;
aspect-ratio: 16/9;
background: #14130f;
}
.video-embed {
width: 100%;
height: 100%;
display: block;
border: 0;
}
.shots-section {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 28px 28px 0;
box-sizing: border-box;
}
.shots-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
gap: 20px;
}
.shot { margin: 0; }
.shot-image {
width: 100%;
display: block;
border: 1px solid #14130f;
cursor: zoom-in;
}
.shot-caption {
margin-top: 8px;
font: 400 10px/1.4 'JetBrains Mono',monospace;
letter-spacing: .1em;
color: #8a8880;
}
/* Horizontal video strip on the GRE product page. The track is a flex row that
overflows sideways; .clip has a fixed basis so roughly five thumbnails sit in
the 1240px column and the rest scroll. Order is shuffled on load by the
inline script on gre/index.html. */
.clips-section {
--clip-w: 232px;
--arrow-w: 34px;
position: relative;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 12px 28px 0;
box-sizing: border-box;
}
/* The two arrows are full-height bars over the left and right edges of the
thumbnail row. --clip-w is the clip width, so a 16/9 thumbnail is
--clip-w * 9/16 tall and the bar matches it exactly. The media query below
re-declares --clip-w, so the bars follow the narrower mobile thumbnail
without a second height rule. */
.clips-arrow {
position: absolute;
top: 12px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #14130f;
background: #f2f1ec;
color: #14130f;
width: var(--arrow-w);
height: calc(var(--clip-w) * 9 / 16);
cursor: pointer;
}
.clips-arrow-icon {
width: 20px;
height: 20px;
display: block;
}
.clips-arrow-prev { left: 28px; }
.clips-arrow-next { right: 28px; }
.clips-arrow:hover { background: #14130f; color: #f2f1ec; }
.clips-arrow[disabled] { opacity: 0; pointer-events: none; }
/* The two arrows are the only scroll control, so the bar itself is hidden in
every engine. The scroller still scrolls by trackpad, wheel and touch. */
.clips-scroller {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.clips-scroller::-webkit-scrollbar { display: none; }
/* The two arrow bars overlay the row's edges, so the track carries matching
side padding and no thumbnail ever sits under a bar. */
.clips-track {
display: flex;
gap: 16px;
padding: 0 var(--arrow-w);
}
.clip {
margin: 0;
flex: 0 0 var(--clip-w);
/* A flex item defaults to min-width:auto, so a long caption would override
the basis and widen the clip. The captions carry full channel and video
titles, so the floor is pinned to the basis instead. */
min-width: 0;
width: var(--clip-w);
}
.clip-button {
display: block;
position: relative;
width: 100%;
padding: 0;
border: 1px solid #14130f;
background: #14130f;
aspect-ratio: 16/9;
cursor: pointer;
overflow: hidden;
}
.clip-thumb {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.clip-play {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
margin: -11px 0 0 -7px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 18px solid #f2f1ec;
}
.clip-button:hover .clip-thumb { opacity: .72; }
/* The clip now playing in the frame above — its thumbnail dims and its caption
goes to the body colour, so the strip shows which one is on screen. */
.clip-current .clip-thumb { opacity: .38; }
.clip-current .clip-button:hover .clip-thumb { opacity: .38; }
.clip-current .clip-caption { color: #14130f; }
/* The channel name alone — the thumbnail identifies the video, so the title is
not repeated here. Clamped to two lines, because a few channel names wrap at
the clip width, and the height is reserved so every clip in the row matches. */
.clip-caption {
margin-top: 8px;
font: 400 10px/1.4 'JetBrains Mono',monospace;
letter-spacing: .1em;
color: #8a8880;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
min-height: calc(10px * 1.4 * 2);
}
@media (max-width: 640px) {
.clips-section { --clip-w: 208px; }
}
.features-section {
width: 100%;
max-width: 1240px;
margin: 96px auto 0;
padding: 0 28px;
box-sizing: border-box;
}
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-bottom: 22px;
border-bottom: 1px solid #14130f;
}
.section-title {
margin: 0;
font: 800 clamp(24px,3vw,40px)/1.05 'JetBrains Mono',monospace;
letter-spacing: -0.035em;
max-width: 26ch;
}
.feature-row {
display: grid;
grid-template-columns: 70px minmax(0,1.1fr) minmax(0,1.6fr);
gap: 28px;
padding: 34px 0;
border-bottom: 1px solid #cfcdc4;
}
.feature-index {
font: 700 11px/1.4 'JetBrains Mono',monospace;
letter-spacing: .14em;
color: #8a8880;
}
.feature-name {
margin: 0;
font: 700 clamp(18px,2vw,26px)/1.15 'JetBrains Mono',monospace;
letter-spacing: -0.025em;
}
.feature-desc {
margin: 0;
font: 400 14px/1.65 'JetBrains Mono',monospace;
color: #4a4841;
}
.tag-row {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
border: 1px solid #cfcdc4;
padding: 5px 9px;
font: 700 10px/1 'JetBrains Mono',monospace;
letter-spacing: .12em;
color: #5c5a52;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
gap: 20px;
padding-top: 28px;
}
.section-title-plain {
margin: 0;
font: 800 clamp(24px,3vw,40px)/1.05 'JetBrains Mono',monospace;
letter-spacing: -0.035em;
}
.split-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
gap: 0;
border-bottom: 1px solid #14130f;
}
.split-cell {
padding: 30px 26px 30px 0;
border-bottom: 1px solid #cfcdc4;
}
.split-text {
margin: 0;
font: 400 15px/1.6 'JetBrains Mono',monospace;
text-wrap: pretty;
}
.split-label {
margin: 16px 0 0;
font: 700 11px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
color: #8a8880;
}
.title-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
padding-bottom: 4px;
}
.title-with-icon {
display: flex;
align-items: center;
gap: 22px;
}
.title-icon {
width: 64px;
height: 64px;
display: block;
flex: none;
}
.buy-grid {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
gap: 0;
border: 1px solid #14130f;
}
.buy-cell {
padding: 36px 32px;
border-right: 1px solid #14130f;
display: flex;
flex-direction: column;
gap: 16px;
}
.buy-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.buy-name {
margin: 0;
font: 700 20px/1.2 'JetBrains Mono',monospace;
letter-spacing: -0.02em;
}
.buy-badge {
border: 1px solid #14130f;
padding: 4px 8px;
font: 700 10px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
}
.buy-desc {
margin: 0;
font: 400 14px/1.6 'JetBrains Mono',monospace;
color: #5c5a52;
}
.buy-price {
font: 800 clamp(40px,5vw,64px)/1 'JetBrains Mono',monospace;
letter-spacing: -0.05em;
margin-top: auto;
}
.store-badge {
background: #14130f;
color: #f2f1ec;
padding: 16px 26px;
font: 700 12px/1 'JetBrains Mono',monospace;
letter-spacing: 0;
padding: 0;
width: 180px;
height: 54px;
border-radius: 9px;
border: 1px solid rgba(242,241,236,0.5);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
box-sizing: border-box;
}
.store-badge-inner {
display: flex;
align-items: center;
gap: 3px;
}
.store-glyph {
width: 20px;
height: 20px;
display: block;
}
.store-glyph-small {
width: 17px;
height: 17px;
display: block;
}
.store-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
}
.store-text-top {
font: 400 9px/1 'JetBrains Mono',monospace;
letter-spacing: .02em;
}
.store-text-bottom {
font: 400 18px/1.15 'JetBrains Mono',monospace;
letter-spacing: -0.01em;
margin-top: 3px;
}
.buy-cell-last {
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.store-link {
display: block;
width: 180px;
height: 60px;
background: #14130f;
border-radius: 0;
overflow: hidden;
}
.store-image {
width: 100%;
height: 100%;
display: block;
}
.buy-link {
cursor: pointer;
border-bottom: 1px solid #14130f;
}
.spec-grid {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
gap: 1px;
background: #cfcdc4;
border: 1px solid #14130f;
}
.spec-cell {
padding: 30px 26px 34px;
background: #f2f1ec;
}
.spec-head {
display: flex;
align-items: baseline;
gap: 10px;
}
.spec-name {
margin: 0;
font: 700 16px/1.2 'JetBrains Mono',monospace;
letter-spacing: -0.01em;
}
.spec-label {
font: 700 10px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
color: #8a8880;
}
.spec-list {
margin: 18px 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.spec-item {
font: 400 13px/1.5 'JetBrains Mono',monospace;
color: #4a4841;
padding-left: 16px;
text-indent: -16px;
}
.media-frame {
margin: 64px 0 0;
border: 1px solid #14130f;
}
.media-placeholder {
aspect-ratio: 16/9;
background: #14130f;
}
.downloads-section { margin: 96px 0 0; }
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
border-bottom: 1px solid #14130f;
}
.stats-cell {
padding: 30px 26px 34px 0;
border-right: 1px solid #cfcdc4;
}
.stats-label {
font: 700 10px/1 'JetBrains Mono',monospace;
letter-spacing: .2em;
color: #8a8880;
}
.stats-value {
margin-top: 14px;
font: 800 44px/1 'JetBrains Mono',monospace;
letter-spacing: -0.05em;
}
.stats-cell-last { padding: 30px 0 34px 26px; }
.stats-note {
margin: 24px 0 0;
font: 700 12px/1 'JetBrains Mono',monospace;
}
.badge-new {
display: inline-block;
vertical-align: middle;
background: #9b74f6;
color: #fff;
padding: 4px 7px;
font: 700 10px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
}
.nav-link-current {
font: 700 11px/1 'JetBrains Mono',monospace;
letter-spacing: .12em;
padding: 4px 0;
border-bottom: 1px solid #14130f;
cursor: pointer;
}
.download-label {
margin: 28px 0 0;
font: 700 11px/1 'JetBrains Mono',monospace;
letter-spacing: .2em;
color: #8a8880;
}
.download-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
padding: 28px 0;
border-bottom: 1px solid #cfcdc4;
}
.download-name {
margin: 0;
font: 700 15px/1.3 'JetBrains Mono',monospace;
letter-spacing: -0.01em;
word-break: break-all;
}
.download-meta {
margin: 8px 0 0;
font: 400 11px/1 'JetBrains Mono',monospace;
letter-spacing: .1em;
color: #8a8880;
}
.download-button {
border: 1px solid #14130f;
padding: 13px 24px;
font: 700 11px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
gap: 0;
border-bottom: 1px solid #14130f;
}
.contact-form {
padding: 40px 40px 48px 0;
border-right: 1px solid #cfcdc4;
display: flex;
flex-direction: column;
gap: 14px;
}
.form-honeypot { display: none; }
.form-input {
background: none;
border: 0;
border-bottom: 1px solid #14130f;
padding: 12px 0;
font: 400 14px/1 'JetBrains Mono',monospace;
color: #14130f;
outline: none;
}
.form-select {
background: none;
border: 0;
border-bottom: 1px solid #14130f;
padding: 12px 0;
font: 400 14px/1 'JetBrains Mono',monospace;
color: #14130f;
outline: none;
border-radius: 0;
}
.form-textarea {
background: none;
border: 1px solid #14130f;
padding: 14px;
font: 400 14px/1.6 'JetBrains Mono',monospace;
color: #14130f;
outline: none;
resize: vertical;
margin-top: 8px;
}
.form-submit {
background: #14130f;
color: #f2f1ec;
border: 0;
padding: 16px 30px;
font: 700 12px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
cursor: pointer;
width: fit-content;
margin-top: 8px;
}
.contact-aside { padding: 40px 0 48px 40px; }
.aside-label {
font: 700 11px/1 'JetBrains Mono',monospace;
letter-spacing: .2em;
color: #8a8880;
}
.aside-title {
margin: 16px 0 0;
font: 800 clamp(22px,2.6vw,34px)/1.1 'JetBrains Mono',monospace;
letter-spacing: -0.035em;
}
.aside-text {
margin: 18px 0 0;
font: 400 14px/1.65 'JetBrains Mono',monospace;
color: #5c5a52;
}
.newsletter-form {
margin-top: 26px;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 420px;
}
.newsletter-submit {
background: #9b74f6;
color: #14130f;
border: 1px solid #14130f;
padding: 16px 30px;
font: 700 12px/1 'JetBrains Mono',monospace;
letter-spacing: .14em;
cursor: pointer;
width: fit-content;
}
.brand-link {
cursor: pointer;
color: #14130f;
background: none;
}
.thanks-note {
margin: 28px 0 0;
font: 400 12px/1.8 'JetBrains Mono',monospace;
letter-spacing: .06em;
color: #8a8880;
}
.faq-strong { color: #14130f; }
.faq-list {
max-width: 860px;
padding: 8px 0 0;
}
.faq-item { border-bottom: 1px solid #cfcdc4; }
.faq-question {
cursor: pointer;
padding: 22px 18px;
font: 700 17px/1.45 'JetBrains Mono',monospace;
letter-spacing: -0.01em;
}
.faq-answer { padding: 0 18px 26px; }
.faq-text {
margin: 0;
font: 400 15px/1.7 'JetBrains Mono',monospace;
color: #4a4841;
}
.faq-answer-stack {
padding: 0 18px 26px;
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-steps {
margin: 0;
padding-left: 22px;
display: flex;
flex-direction: column;
gap: 10px;
font: 400 15px/1.7 'JetBrains Mono',monospace;
color: #4a4841;
}
.faq-item-last { border-bottom: 1px solid #14130f; }
.about-link { cursor: pointer; }
.manual-note {
margin: 24px 0 0;
font: 400 12px/1.8 'JetBrains Mono',monospace;
letter-spacing: .06em;
color: #8a8880;
}
.doc-grid {
display: grid;
grid-template-columns: 220px minmax(0,1fr);
gap: 56px;
align-items: start;
}
.doc-toc {
position: sticky;
top: 80px;
padding: 34px 0 0;
}
.toc-label {
font: 700 10px/1 'JetBrains Mono',monospace;
letter-spacing: .2em;
color: #8a8880;
padding-bottom: 12px;
border-bottom: 1px solid #14130f;
}
.toc-nav {
display: flex;
flex-direction: column;
padding-top: 8px;
}
.toc-link {
display: flex;
gap: 10px;
padding: 7px 0;
font: 400 12px/1.4 'JetBrains Mono',monospace;
color: #4a4841;
border-bottom: 1px solid transparent;
}
.doc-body { min-width: 0; }
.manual-section {
padding: 28px 0;
border-bottom: 1px solid #cfcdc4;
}
.manual-heading {
margin: 0;
font: 800 clamp(22px,2.6vw,32px)/1.15 'JetBrains Mono',monospace;
letter-spacing: -0.035em;
}
.manual-subheading {
margin: 26px 0 0;
font: 700 13px/1.4 'JetBrains Mono',monospace;
letter-spacing: .08em;
text-transform: uppercase;
color: #5c5a52;
}
.manual-table-scroll { overflow-x: auto; }
.manual-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0 0;
font: 400 13px/1.55 'JetBrains Mono',monospace;
}
.table-header {
text-align: left;
padding: 10px 12px;
border: 1px solid #cfcdc4;
/* Same ground as .remember-this-block — the 2.0 --accent-soft, resolved. */
background: rgba(116,49,217,0.08);
font-weight: 700;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
}
.table-cell {
padding: 10px 12px;
border: 1px solid #cfcdc4;
color: #4a4841;
vertical-align: top;
}
.manual-image {
width: 100%;
display: block;
margin: 24px 0 0;
cursor: zoom-in;
}
.manual-code {
margin: 20px 0 0;
padding: 18px;
border: 1px solid #cfcdc4;
background: #e9e7e0;
overflow-x: auto;
font: 400 12px/1.7 'JetBrains Mono',monospace;
color: #14130f;
}
.flow-diagram-box {
margin: 24px 0 0;
display: flex;
flex-direction: column;
border: 1px solid #14130f;
padding: 18px 0;
}
.flow-step-row {
padding: 12px 16px;
font: 400 13px/1.5 'JetBrains Mono',monospace;
color: #4a4841;
}
.flow-arrow-row {
text-align: center;
padding: 6px 0;
font: 400 13px/1 'JetBrains Mono',monospace;
color: #a8a69d;
}
.flow-result-row {
padding: 14px 16px;
font: 700 13px/1.5 'JetBrains Mono',monospace;
color: #14130f;
background: #9b74f6;
}
.manual-section-plain { padding: 64px 0 0; }
.toc-note {
margin: 18px 0 0;
font: 400 13px/1.5 'JetBrains Mono',monospace;
letter-spacing: .06em;
color: #8a8880;
}
.toc-link-plain {
display: block;
padding: 7px 0;
font: 400 12px/1.4 'JetBrains Mono',monospace;
color: #4a4841;
border-bottom: 1px solid transparent;
}
.changelog-release {
padding: 52px 0;
border-bottom: 1px solid #cfcdc4;
}
.changelog-version {
margin: 0;
font: 800 clamp(24px,3vw,34px)/1.1 'JetBrains Mono',monospace;
letter-spacing: -0.035em;
}
.changelog-date {
margin: 12px 0 0;
font: 400 12px/1.6 'JetBrains Mono',monospace;
letter-spacing: .06em;
color: #8a8880;
}
.changelog-group {
margin: 30px 0 0;
font: 700 12px/1.4 'JetBrains Mono',monospace;
letter-spacing: .14em;
text-transform: uppercase;
color: #5c5a52;
}
.changelog-link { color: inherit; }
.doc-section {
padding: 40px 0;
border-bottom: 1px solid #cfcdc4;
}
.doc-text {
margin: 0;
font: 400 15px/1.75 'JetBrains Mono',monospace;
color: #4a4841;
}
.doc-heading {
margin: 0;
font: 800 clamp(20px,2.4vw,28px)/1.15 'JetBrains Mono',monospace;
letter-spacing: -0.03em;
}
.doc-subheading {
margin: 26px 0 0;
font: 700 14px/1.4 'JetBrains Mono',monospace;
letter-spacing: -0.01em;
}
.doc-body-text {
margin: 14px 0 0;
font: 400 15px/1.75 'JetBrains Mono',monospace;
color: #4a4841;
}
.doc-section-plain { padding: 40px 0; }
.about-body {
max-width: 68ch;
padding: 44px 0 0;
display: flex;
flex-direction: column;
gap: 26px;
}
.about-text {
margin: 0;
font: 400 16px/1.75 'JetBrains Mono',monospace;
color: #2c2a24;
text-wrap: pretty;
}
.about-code {
font-family: inherit;
background: #e9e7e0;
padding: 2px 6px;
}
.about-footnote {
margin: 14px 0 0;
font: 400 14px/1.7 'JetBrains Mono',monospace;
color: #5c5a52;
}
/* interaction states */
.brand:hover {
background: none !important;
color: #14130f !important;
}
.brand:hover .brand-name {
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.about-link:hover {
background: none !important;
color: #14130f !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.product-row-link:hover {
background: #9b74f6 !important;
color: #14130f !important;
text-decoration: none !important;
}
.footer-link-hover:hover {
background: none !important;
color: #14130f !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.nav-link-hover:hover {
border-bottom-color: #14130f !important;
background: none !important;
text-decoration: none !important;
}
/* .feature-row-alt is the row-hover tint. The feature rows (.feature-row) opt out — they are not
clickable, so a hover there suggested an action that does not exist. The
download rows (.download-row .feature-row-alt) keep it, since each one does lead to a download. */
.feature-row-alt:hover {
background: #9b74f6 !important;
text-decoration: none !important;
}
.feature-row.feature-row-alt:hover { background: none !important; }
.store-badge-hover:hover {
background: #f2f1ec !important;
color: #14130f !important;
text-decoration: none !important;
}
.newsletter-submit-hover:hover {
background: #14130f !important;
color: #f2f1ec !important;
text-decoration: none !important;
}
.brand-link-hover:hover {
background: none !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.toc-link-hover:hover {
border-bottom-color: #14130f !important;
text-decoration: none !important;
}
/* back to top */
/* mobile menu (built by site.js) */
#mobile-menu {
position: fixed;
top: 58px;
left: 0;
right: 0;
z-index: 49;
background: #f2f1ec;
border-bottom: 1px solid #14130f;
display: none;
flex-direction: column;
max-height: calc(100vh - 58px);
overflow-y: auto;
}
#mobile-menu.is-open { display: flex; }
#mobile-menu a {
padding: 0 28px;
min-height: 52px;
display: flex;
align-items: center;
font: 700 12px/1 'JetBrains Mono',monospace;
letter-spacing: .12em;
border-bottom: 1px solid #cfcdc4;
text-decoration: none;
}
#mobile-menu a.is-cta {
min-height: 56px;
background: #14130f;
color: #f2f1ec;
border-bottom: 0;
}
@media (min-width: 721px) {
#mobile-menu { display: none !important; }
}
/* zoom overlay */
#zoom-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(20,19,15,0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
cursor: zoom-out;
}
#zoom-overlay img {
max-width: 100%;
max-height: 100%;
display: block;
}
@media (max-width: 720px) {
#zoom-overlay { padding: 14px; }
}
/* ---------- Buy button (store-btn), ported from www/1.2/resources/css/site.css.
That stylesheet expresses colours as custom properties (--text, --bg, --accent,
--r-md); this one uses no custom properties at all, so the four are resolved to
the literal values the neighbouring .store-badge button already uses. ---------- */
.store-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 60px;
width: 180px;
padding: 0 18px;
border-radius: 0;
font: 700 0.95rem/1 'JetBrains Mono', monospace;
background: #14130f;
color: #f2f1ec;
text-decoration: none;
box-sizing: border-box;
}
/* No hover effect. The !important flags are required, not stylistic: the global
`a:hover` rule at the top of this file sets `background:none; color:#14130f`,
which on the page's #f2f1ec ground would render the button invisible. Every
other button here defends itself the same way — see .store-badge-hover:hover. */
.store-btn:hover {
background: #14130f !important;
color: #f2f1ec !important;
text-decoration: none !important;
}
.store-btn:focus-visible {
outline: 2px solid #f2f1ec;
outline-offset: 3px;
border-radius: 0;
}
.store-btn svg {
width: 26px;
height: 26px;
fill: currentColor;
}
/* ---------- User-manual constructs, ported from the 2.0 generation — the
carousel, signal-flow and parameter-table styles in
www/2.0/resources/css/site.css, and the callout, .auto pill and table.param
styles from the inline block in www/2.0/gre/user-manual/index.html. First
used by www/1.2-lite/gre-lite/user-manual/index.html; they live here so the
other 1.2-lite documents can use them too.
The 2.0 rules are written against CSS custom properties. This generation
defines none, so each var() is resolved here to the literal value of the 2.0
LIGHT palette:
--surface #ffffff --surface-2 #f6f5f9 --border #e5e4ea
--border-strong #d4d3dc --text #1b1b21 --text-2 #55555f
--text-3 #8b8b96 --accent #7431d9 --accent-strong #5f21bd
--accent-dim #9a6ce0 --accent-contrast #ffffff
--accent-soft rgba(116,49,217,0.08) ---------- */
/* ---- Callout box (.remember-this-block) ---- */
.remember-this-block {
border: 1px solid #e5e4ea;
border-radius: 12px;
overflow: hidden;
margin: 1.4rem 0 1.6rem;
padding: 1.05rem 1.6rem;
background: rgba(116,49,217,0.08);
color: #1b1b21;
}
.remember-this-block p {
margin: 0;
color: #1b1b21;
font-size: 1rem;
font-weight: 500;
line-height: 1.65;
}
.remember-this-block p+p { margin-top: 0.7rem; }
.remember-this-block code {
padding: 1px 5px;
border-radius: 5px;
}
/* ---- Signal-flow diagram ---- */
.flow-diagram {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
margin: 1.5rem 0;
}
.flow-step {
/* Same ground as .remember-this-block — the 2.0 --accent-soft, resolved. */
background: rgba(116,49,217,0.08);
border: 1px solid #e5e4ea;
color: #1b1b21;
padding: 0.4rem 0.85rem;
border-radius: 6px;
font-size: 0.9rem;
line-height: 1.6;
max-width: 100%;
}
.flow-step.accent {
background: rgba(116,49,217,0.08);
border-color: #9a6ce0;
font-weight: 700;
}
.flow-arrow {
color: #8b8b96;
padding-left: 1rem;
line-height: 1;
font-size: 0.9rem;
}
/* ---- DAW quick-jump list ---- */
.daw-jump { margin: 0 0 28px; }
.daw-jump-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.daw-jump-list a {
display: inline-block;
font-size: 0.85rem;
font-weight: 600;
padding: 5px 12px;
border-radius: 999px;
background: rgba(116,49,217,0.08);
color: #7431d9;
border: 1px solid #9a6ce0;
text-decoration: none;
}
.daw-jump-list a:hover {
background: #7431d9;
color: #fff;
}
.daw-jump-list a .plat {
opacity: 0.6;
font-weight: 400;
}
/* ---- Parameter reference table ---- */
.table-scroll {
overflow-x: auto;
padding-top: 1rem;
}
table.param {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
table.param th,table.param td {
text-align: left;
padding: 0.55rem 0.8rem;
border-bottom: 1px solid #e5e4ea;
vertical-align: top;
}
table.param thead th {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #8b8b96;
border-bottom: 2px solid #d4d3dc;
white-space: nowrap;
}
table.param td.range,table.param td.def { color: #55555f; }
table.param code {
padding: 0.05rem 0.3rem;
border-radius: 4px;
font-size: 0.86em;
}
.scope {
color: #8b8b96;
font-size: 0.8rem;
font-weight: 400;
}
.auto {
display: inline-block;
padding: 0.1rem 0.5rem;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
white-space: nowrap;
}
.auto-yes,.auto-part {
background: rgba(116,49,217,0.08);
color: #5f21bd;
}
.auto-no {
background: #f6f5f9;
color: #8b8b96;
border: 1px solid #e5e4ea;
}
.param-note {
color: #8b8b96;
font-size: 0.86rem;
margin: 0.1rem 0 0.9rem;
}
/* ---- Screenshot carousel ---- */
.carousel {
position: relative;
margin: 24px 0 0;
}
.carousel-frame {
position: relative;
overflow: hidden;
}
.carousel-item {
display: none;
animation: carousel-fade 0.45s ease;
}
.carousel-item.active { display: block; }
@keyframes carousel-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.screenshot-carousel {
max-width: 960px;
margin: 32px auto 0;
}
.screenshot-carousel .carousel-item {
height: 560px;
position: relative;
flex-direction: column;
}
.screenshot-carousel .carousel-item.active { display: flex; }
.screenshot-carousel .carousel-item img {
flex: 1 1 auto;
min-height: 0;
margin: 0;
align-self: center;
max-width: 100%;
max-height: 505px;
width: auto;
height: auto;
border-radius: 12px;
border: 1px solid #e5e4ea;
box-shadow: 0 10px 40px rgba(24,18,43,0.10);
object-fit: contain;
}
.screenshot-carousel.sc-h400 .carousel-item { height: 450px; }
.screenshot-carousel.sc-h400 .carousel-item img { max-height: 400px; }
.screenshot-carousel.sc-h400 .carousel-arrow {
color: #7431d9;
border-color: #7431d9;
background: rgba(116,49,217,0.08);
opacity: 1;
}
.screenshot-carousel.sc-h400 .carousel-arrow:hover {
color: #fff;
background: #7431d9;
border-color: #7431d9;
}
.carousel-caption {
flex: 0 0 auto;
margin-top: 18px;
text-align: center;
font-size: 0.9rem;
color: #55555f;
font-weight: 500;
}
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
appearance: none;
background: #fff;
border: 1px solid #e5e4ea;
color: #55555f;
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.75;
transition: opacity .15s,color .15s,border-color .15s;
z-index: 2;
}
.carousel-arrow:hover {
opacity: 1;
color: #1b1b21;
border-color: #d4d3dc;
}
.carousel-arrow svg {
width: 18px;
height: 18px;
}
.carousel-arrow.prev { left: -6px; }
.carousel-arrow.next { right: -6px; }
.carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.carousel-dots button {
appearance: none;
border: none;
padding: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #8b8b96;
opacity: 0.45;
cursor: pointer;
transition: opacity .15s,background-color .15s,transform .15s;
}
.carousel-dots button.active {
background: #7431d9;
opacity: 1;
transform: scale(1.25);
}
/* ---- Inline helpers ---- */
.term {
font-size: 1em;
font-weight: inherit;
font-style: normal;
text-decoration: underline;
text-underline-offset: 3px;
}
.icon-inline {
width: 1.1em;
height: 1.1em;
vertical-align: -0.15em;
stroke-width: 2;
display: inline-block;
}
@media (max-width:640px) {
.screenshot-carousel .carousel-item { height: 300px; }
.screenshot-carousel .carousel-item img { max-height: 250px; }
.screenshot-carousel.sc-h400 .carousel-item { height: 320px; }
.screenshot-carousel.sc-h400 .carousel-item img { max-height: 270px; }
.carousel-arrow.prev { left: 2px; }
.carousel-arrow.next { right: 2px; }
}
/* renders in ExtraBold. The JetBrains Mono link in each document loads
the 800 face; without this rule the browser synthesises a bold from 400. The
`font-weight` is set with `!important` because most text here is styled by the
`font:` shorthand on the parent (e.g. .doc-text, .faq-text), which resets
weight for the whole subtree. */
strong, b { font-weight: 800 !important; }
/* A bare carries what .manual-heading-sub used to carry by class. The user
manuals in www/1.2-lite/gre/ and www/1.2-lite/gre-lite/ wrote that class on
every one of their 135 sub-headings; the class was removed from the markup and
the rule moved here, so the same headings style themselves with no attribute.
Restricted to h3 with no class, so .feature-name, .doc-subheading, .spec-name,
.changelog-group, .buy-name and .download-name keep their own rules. The 29
headings that also carry an id for the table of contents keep it — an id is
not a class, so they match this selector too. */
h3:not([class]) {
margin: 34px 0 0;
font: 700 24px/1.3 'JetBrains Mono',monospace;
letter-spacing: -0.02em;
}
/* A bare carries what .manual-heading carries, plus the top padding of
.manual-section (28px — that rule's `padding: 28px 0`), so an written
with no attribute opens a section the way a classed one does. Restricted to
h2 with no class, so .doc-heading, .changelog-version, .section-title,
.section-title-plain and .aside-title keep their own rules. */
h2:not([class]) {
margin: 0;
padding-top: 28px;
font: 800 clamp(22px,2.6vw,32px)/1.15 'JetBrains Mono',monospace;
letter-spacing: -0.035em;
}
/* ---------- Hero load animation, ported from www-hero.md (the Augmatic Audio
1.2 site.css hero intro). Pure CSS, no JavaScript.
Two departures from the source, both forced by this stylesheet:
1. `rise` is NOT redefined. The source's `rise` starts at translateY(22px);
the one at the top of this file starts at 18px and is already consumed by
the [data-reveal] scroll-reveal block. Redefining it would shift every
scroll reveal on the site, so the hero children reuse the existing 18px
keyframe and only `rise-blur` is added.
2. The source expresses easing as var(--ease-out). This generation defines no
custom properties, so it is written out as its literal cubic-bezier.
`hue-drift` and the gradient .hero-mark are NOT ported: .hero-mark here is a
solid #9b74f6 block, not gradient text, so there is nothing to drift.
The is deliberately unanimated. `.hero > * + *` matches only siblings
after the first, so the headline moves as part of the container's rise-blur
and appears at t=0, with the lede, actions and note cascading in behind it.
Child order is load-bearing — both www/1.2-lite/gre/index.html and
www/1.2-lite/gre-lite/index.html put the first and carry four children.
`both` fill-mode holds each element at its `from` state before the animation
starts, so nothing flashes unstyled on load. ---------- */
@keyframes rise-blur {
from {
opacity: 0;
transform: translateY(28px) scale(.985);
filter: blur(6px);
}
to {
opacity: 1;
transform: none;
filter: blur(0);
}
}
.hero { animation: rise-blur 1s cubic-bezier(.16,1,.3,1) both; }
.hero > * + * { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
.hero > *:nth-child(2) { animation-delay: .12s; }
.hero > *:nth-child(3) { animation-delay: .22s; }
.hero > *:nth-child(4) { animation-delay: .32s; }
/* This stylesheet carries no global prefers-reduced-motion block, so the hero
scopes its own — www-hero.md §7. Without it the hero still animates for a
reader who asked the operating system for reduced motion. */
@media (prefers-reduced-motion: reduce) {
.hero, .hero > * {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
/* A product chooser row on index.html carries .product-row-link for its
cursor and colour, but not its purple hover fill — the rows are large
surfaces, and #9b74f6 across one reads as a selection rather than a link.
Two classes beat the single-class .product-row-link:hover above. The
BUY/DOWNLOAD/SEND buttons that share the class keep the fill.
Only the Augmatic GRE row is a link today; the .product-row-last selector
below covers the Augmatic GRE Lite row for when it becomes one at launch. */
.product-row.product-row-link:hover,
.product-row-last.product-row-link:hover {
background: none !important;
}