mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 23:56:29 +03:00
373039a837
* Give DESIGN.md a real type ramp so the design hook stops crying wolf The design hook fired on nearly every CSS file we touched. The cause was DESIGN.md's typography block: it declared seven named roles rather than a scale, and two of those roles used clamp(), which the extractor skipped outright. That left an allowlist of five sizes standing against the 86 distinct font sizes actually in use, so design-system-font-size flagged roughly 500 declarations. Editing any .astro page made it worse, because the companion-stylesheet scan re-reported the whole backlog. Extractor (cli/engine/design-system.mjs): - Read a typography.scale map as the enumerated ramp. - Read both clamp() endpoints as allowed sizes. These stay additive on purpose: clamp endpoints alone cannot switch the rule on, because a fully fluid system enumerates no discrete ramp and inferring one from its endpoints would flag every intermediate size. The existing abstention test still passes, and three new tests cover the added behavior. DESIGN.md: - Document a 19-step ramp, 8px through 72px at a 16px root. - Snap the five discrete role sizes onto ramp steps. This also fixes real drift. DESIGN.md claims to mirror kinpaku-tokens.css verbatim, but wordmark was 1.15rem in the CSS against 1.3rem documented, with tracking at 0.42em against 0.15em. Both are re-synced. Standardization, 64 declarations: - Six near-identical steps between 13.7px and 15.4px collapse onto 14 and 15. - .foundation-card-label, .designing-lane-mock-title and .designing-iterate-name each existed at two different sizes in two files. Now unified. - The wordmark rendered at four sizes (20.8, 18.4, 17, 16.8px). Now 18px, plus one deliberate smaller nav variant. Exemptions, for designs that are foreign on purpose: the antipattern-example fixtures, the neo-mirai case-study build, the periodic-table cell annotations in framework-viz.js (5 to 7px diagram geometry sitting at 2 to 3px offsets), and the .why-slop-* before-state card's Inter and gradient text. Verified by computed style across ten rendered pages: every element lands on a ramp step except clamp() values mid-interpolation, which is what fluid means. Full test suite and build validators pass. Generated provider output is deliberately left out; the sync workflow owns it. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Validate clamp() endpoints in usage, not just when reading DESIGN.md Reading clamp endpoints as documented steps without also checking them in source left an asymmetry: `isAllowedFontSizeRaw` returned true for anything failing the px/rem literal test, so `clamp(99rem, 1vw, 200rem)` passed. That is how `.ptable-symbol` at `clamp(1.45rem, 1.8vw, 1.8rem)` stayed invisible until someone measured computed styles, which is not a check the hook can run. Fluid values are now judged on their min and max. The viewport term interpolates between them and is never a fixed step, so it is left alone. Endpoints that cannot be resolved, such as var() or calc() or em, abstain rather than guess. Findings name the offending endpoint and use it as the ignore-value, because the whole clamp string is not actionable on its own. Turning the check on surfaced 22 fluid declarations that had never been looked at. Three used hero sizes above the ramp's 72px cap (80, 83.2 and 88px) alongside the display role's documented 89.6px max, so the top of the ramp was genuinely incomplete. Added the 80 and 88 steps, which gives the display end consistent 8px increments instead of 48/56/64/72 plus an orphan at 89.6, and fixes two declarations outright. The other 20 are snapped by a stated rule: nearest step, ties toward the smaller step, endpoints already matching a documented fluid role left as-is, and where nearest-step would make a breakpoint override meet or exceed its base, the next smaller step so the override still reduces. That last case applies once, to .designing-page-title. Also narrows the framework-viz.js waiver. The periodic-table cell annotations now carry two `impeccable-disable-line` comments naming the reason, instead of a config entry wildcarding the whole file for the rule. Inline waivers travel with the code and cannot silence future drift elsewhere in that file. Verified at 420px, 900px and 1600px across seven pages. The pinned ends are fully on-ramp; the only off-ramp values at 900px are the vw term mid-interpolation, which is what fluid means. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Address review: wordmark tracking picked the wrong side, stale ramp count Two review findings, both fair. Wordmark tracking (greptile, bugbot). This PR moved DESIGN.md's wordmark letterSpacing from 0.15em to 0.42em on the grounds that DESIGN.md claims to mirror kinpaku-tokens.css and the token read 0.42em. That was the wrong side to trust. `--ks-type-wordmark-track` has exactly one consumer, design-system.css:570, which is the specimen page. Every production lockup (.ks-wordmark, .kinpaku-chrome .site-header-brand-name, .footer-logo) hardcodes 0.15em, so 0.15em is what every visitor actually sees and what DESIGN.md already documented correctly before this PR touched it. Reverted the doc to 0.15em and moved the token to 0.15em as well, so the specimen now renders the same lockup as production instead of a wider one nothing else uses. Verified by computed style: header and specimen both report 18px with 2.7px tracking. No production visual change. Stale ramp count (copilot). The sidecar described an "18-step ramp, 8px through 72px". It went stale twice inside this PR, once when the 8 step was added and again when 80 and 88 were added for the hero display sizes. It is 21 steps, 8px through 88px. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Strip !important from the font-size ignore value Follow-on from the waiver wiring in the hook branch. The ignoreValue is what a `hooks ignore-value` waiver has to match, and `font-size: 1.4rem !important` emitted `1.4rem !important` while a plain declaration emitted `1.4rem`. Once font-size is a direct-value rule, that means the same size needs two different waivers depending on whether it carries a priority marker. font-family already strips the marker before matching, and there is a test for that. font-size now does the same. The snippet still shows the declaration as authored. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> * Have the wordmark rules consume their tokens instead of copying the values Follow-up to the tracking fix, and the residual half of what the reviewers were pointing at. `.ks-wordmark` and the kinpaku chrome lockup each repeated `1.125rem` and `0.15em` literally rather than reading `--ks-type-wordmark-size` and `--ks-type-wordmark-track`. That duplication is exactly how the token drifted to 0.42em while every production lockup stayed at 0.15em and nobody noticed, which is the confusion that started this thread. The values already agree, so this is a no-op visually and is verified as such: computed styles across the home, design-system, docs and changelog pages all still report 18px with 2.7px tracking. What changes is that there is now one place to edit, so the next tracking change cannot silently apply to the specimen page alone. Prepared with AI assistance (Claude Code). Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
4154 lines
86 KiB
CSS
4154 lines
86 KiB
CSS
/*
|
|
* impeccable.style — Renaissance Redesign
|
|
*
|
|
* Editorial precision meets fluid motion.
|
|
* Light, high-contrast, typographically bold.
|
|
*/
|
|
|
|
/* Shared design tokens + minimal reset */
|
|
@import "./tokens.css";
|
|
|
|
/* Section partials (landing page only) */
|
|
@import "./problem-section.css";
|
|
@import "./workflow.css";
|
|
@import "./live-mode.css";
|
|
@import "./gallery.css";
|
|
@import "./skill-demos.css";
|
|
|
|
|
|
/* ============================================
|
|
SKIP LINK (Accessibility)
|
|
============================================ */
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10000;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
border-radius: 0 0 8px 8px;
|
|
transition: top 0.2s ease;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
FLOATING BOTTOM NAV
|
|
============================================ */
|
|
|
|
.section-nav {
|
|
position: fixed;
|
|
bottom: var(--spacing-md);
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(20px);
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
padding: 4px;
|
|
background: oklch(98% 0 0 / 0.85);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 100px;
|
|
box-shadow: 0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
|
|
}
|
|
|
|
.section-nav.is-visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
.section-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
text-decoration: none;
|
|
border-radius: 100px;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.section-nav-item:hover {
|
|
background: var(--color-mist);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.section-nav-item.is-active {
|
|
background: var(--color-ink);
|
|
}
|
|
|
|
.section-nav-item.is-active .section-nav-num {
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.section-nav-item.is-active .section-nav-label {
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.section-nav-num {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.5625rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
letter-spacing: 0.02em;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.section-nav-label {
|
|
font-family: var(--font-body);
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
transition: color 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.section-nav-label {
|
|
display: none;
|
|
}
|
|
.section-nav-item {
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.section-nav-item {
|
|
padding: 8px;
|
|
}
|
|
|
|
.section-nav-num {
|
|
font-size: 0.625rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
BASE STYLES
|
|
============================================ */
|
|
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
overflow-x: clip; /* Prevent horizontal scroll without breaking position:sticky */
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
font-size: 16px;
|
|
line-height: 1.625;
|
|
color: var(--color-text);
|
|
background: var(--color-paper);
|
|
overflow-x: clip;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-display);
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 2px;
|
|
transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-accent-hover);
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
/* Remove underline for buttons styled as links */
|
|
.btn,
|
|
.footer-logo,
|
|
[class*="nav-item"] {
|
|
text-decoration: none;
|
|
}
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9em;
|
|
padding: 0.15em 0.4em;
|
|
background: var(--color-accent-dim);
|
|
color: var(--color-accent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-accent-soft);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ============================================
|
|
GRAIN OVERLAY
|
|
============================================ */
|
|
|
|
.grain-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
/* ============================================
|
|
LAYOUT
|
|
============================================ */
|
|
|
|
.site-content {
|
|
max-width: var(--width-max);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-lg);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.site-content {
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SECTION HEADERS
|
|
============================================ */
|
|
|
|
.section-header {
|
|
margin-bottom: var(--spacing-lg);
|
|
position: relative;
|
|
}
|
|
|
|
.section-number {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-ash);
|
|
margin-bottom: var(--spacing-xs);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
margin-top: var(--spacing-sm);
|
|
max-width: 55ch;
|
|
}
|
|
|
|
.cheatsheet-link {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.cheatsheet-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.section-lead {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
max-width: 55ch;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
/* ============================================
|
|
HERO SECTION - Combined Layout
|
|
============================================ */
|
|
|
|
.hero-combined {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
padding: var(--spacing-lg) 0 var(--spacing-2xl);
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.github-link {
|
|
position: absolute;
|
|
top: var(--spacing-md);
|
|
right: var(--spacing-lg);
|
|
z-index: 10;
|
|
color: var(--color-ash);
|
|
transition: color 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.github-link:hover {
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.github-stars {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-ash);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.github-link:hover .github-stars {
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.hero-combined-container {
|
|
max-width: var(--width-max);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-lg);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-xl);
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-combined-container {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-lg);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-combined-right {
|
|
order: -1;
|
|
padding-top: var(--spacing-xl);
|
|
}
|
|
|
|
.hero-combined-container {
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.hero-combined-left {
|
|
gap: var(--spacing-sm);
|
|
padding-top: var(--spacing-md);
|
|
}
|
|
|
|
.hero-hook-text,
|
|
.hero-included-box,
|
|
.hero-cta-group {
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
}
|
|
|
|
.hero-combined-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.hero-combined-left {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.hero-title-combined {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(2.5rem, 7vw, 4.5rem);
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
margin: 0;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.hero-tagline-combined {
|
|
font-family: var(--font-display);
|
|
font-size: clamp(1.125rem, 2.5vw, 1.75rem);
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
margin: 0;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.hero-hook-text {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
max-width: 45ch;
|
|
margin: 0;
|
|
}
|
|
|
|
.hero-hook-text--short {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-hook-text--full {
|
|
display: none;
|
|
}
|
|
|
|
.hero-hook-text--short {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Hero Included Box - Subtle "What's included" */
|
|
.hero-included-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--color-mist);
|
|
background: transparent;
|
|
max-width: 45ch;
|
|
}
|
|
|
|
.hero-included-title {
|
|
font-family: var(--font-body);
|
|
font-size: 0.5625rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.hero-included-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hero-included-items em {
|
|
font-style: normal;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.hero-included-sep {
|
|
color: var(--color-mist);
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.hero-included-items {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.hero-included-sep {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hero-cta-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.hero-cta-group {
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
.hero-cta-combined {
|
|
display: inline-block;
|
|
padding: var(--spacing-sm) var(--spacing-xl);
|
|
font-family: var(--font-body);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
color: var(--color-paper);
|
|
background: var(--color-ink);
|
|
border: none;
|
|
transition: transform 0.2s ease, background 0.2s ease;
|
|
}
|
|
|
|
.hero-cta-combined:hover {
|
|
transform: translateY(-2px);
|
|
background: var(--color-accent);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.hero-logos-inline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.hero-logos-inline .hero-logos-label {
|
|
font-size: 0.6875rem;
|
|
color: var(--color-ash);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.hero-logos-inline .hero-logos-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hero-logos-inline .hero-logos-row img {
|
|
border-radius: 4px;
|
|
opacity: 0.7;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.hero-logos-inline .hero-logos-row img:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hero-combined-right {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-combined-right .split-comparison {
|
|
max-width: 520px;
|
|
width: 100%;
|
|
}
|
|
|
|
.hero-combined-right .split-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Bias tags at bottom of hero */
|
|
.hero-bias-tags {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
margin-top: var(--spacing-lg);
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--color-mist);
|
|
max-width: var(--width-max);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
padding-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* ============================================
|
|
PROBLEM SECTION - Clarity Lens
|
|
============================================ */
|
|
|
|
.problem-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.problem-content {
|
|
display: grid;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
|
|
/* Split Screen Comparison */
|
|
.split-comparison {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
margin-top: -20px;
|
|
margin-bottom: -20px;
|
|
}
|
|
|
|
.split-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
height: 380px;
|
|
margin: 0 auto;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
cursor: ew-resize;
|
|
user-select: none;
|
|
}
|
|
|
|
.split-before,
|
|
.split-after {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.split-before {
|
|
z-index: 1;
|
|
}
|
|
|
|
.split-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.split-after {
|
|
/* Angled clip-path matching divider's skewX(-10deg): top-right, bottom-left */
|
|
clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
|
|
z-index: 2;
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.split-divider {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 3px;
|
|
background: var(--color-accent);
|
|
transform: translateX(-50%) skewX(-10deg);
|
|
pointer-events: none;
|
|
z-index: 3;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.split-label {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) skewX(10deg);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--color-paper);
|
|
background: var(--color-accent);
|
|
padding: 6px 14px;
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
/* Slop Card - Generic AI output */
|
|
.slop-card {
|
|
width: 280px;
|
|
height: 280px;
|
|
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%);
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slop-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.slop-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.slop-text { flex: 1; }
|
|
.slop-title { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 2px; }
|
|
.slop-subtitle { font-size: 12px; color: #6b7280; }
|
|
.slop-body { font-size: 13px; line-height: 1.5; color: #4b5563; margin-bottom: auto; flex: 1; }
|
|
|
|
.slop-button {
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-family: ui-sans-serif, system-ui, sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-top: auto;
|
|
}
|
|
|
|
/* Callout labels pointing to issues */
|
|
.slop-callouts {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slop-callout {
|
|
position: absolute;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--color-accent);
|
|
background: var(--color-paper);
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
opacity: 0;
|
|
animation: calloutFadeIn 0.4s var(--ease-out) forwards;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.slop-callout[data-point="font"] {
|
|
top: 15%;
|
|
right: 5%;
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.slop-callout[data-point="gradient"] {
|
|
top: 40%;
|
|
left: 5%;
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
.slop-callout[data-point="copy"] {
|
|
bottom: 35%;
|
|
right: 8%;
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.slop-callout[data-point="rounded"] {
|
|
bottom: 12%;
|
|
left: 10%;
|
|
animation-delay: 0.55s;
|
|
}
|
|
|
|
@keyframes calloutFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Impeccable Card - With Design Skills */
|
|
.impeccable-card {
|
|
width: 280px;
|
|
height: 300px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
padding: var(--spacing-lg);
|
|
text-align: left;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.impeccable-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.15em;
|
|
text-transform: uppercase;
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.impeccable-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.75rem;
|
|
font-weight: 300;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-sm);
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.impeccable-body {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: var(--color-ash);
|
|
margin-bottom: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.impeccable-button {
|
|
display: inline-flex;
|
|
margin-top: var(--spacing-sm);
|
|
padding: 0.625rem 1.5rem;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
border: none;
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.03em;
|
|
cursor: pointer;
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.impeccable-button:hover {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* Split Labels */
|
|
.split-labels {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--spacing-xl);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.split-label-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.split-comparison {
|
|
padding: 8px;
|
|
margin-top: -8px;
|
|
margin-bottom: -8px;
|
|
}
|
|
|
|
.split-labels {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.split-label-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.split-label-dot--accent {
|
|
background: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
FOUNDATION SECTION
|
|
============================================ */
|
|
|
|
.foundation-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.foundation-content {
|
|
display: grid;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.foundation-grid {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 600px;
|
|
gap: var(--spacing-sm);
|
|
margin-top: -80px; /* Pull up into the header whitespace */
|
|
position: relative;
|
|
}
|
|
|
|
.foundation-column {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
justify-content: flex-end;
|
|
cursor: pointer;
|
|
min-width: 0;
|
|
}
|
|
|
|
.foundation-card {
|
|
padding: var(--spacing-md);
|
|
background: white;
|
|
border: 1px solid var(--color-bg);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 280px;
|
|
margin-bottom: var(--spacing-xs);
|
|
transition: transform var(--duration-slow) var(--ease-out-quint), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
|
|
position: relative;
|
|
z-index: 2;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.foundation-column:hover .foundation-card {
|
|
transform: translateY(-12px);
|
|
border-color: var(--color-accent);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.foundation-plinth {
|
|
width: 100%;
|
|
background: repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 2px, transparent 2px, transparent 10px);
|
|
border: 1px solid var(--color-mist);
|
|
border-bottom: none;
|
|
border-radius: 8px 8px 0 0;
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.foundation-column:hover .foundation-plinth {
|
|
background: var(--color-mist);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Plinth Heights - More dramatic steps */
|
|
.plinth-1 { height: 4%; }
|
|
.plinth-2 { height: 12%; }
|
|
.plinth-3 { height: 20%; }
|
|
.plinth-4 { height: 28%; }
|
|
.plinth-5 { height: 36%; }
|
|
.plinth-6 { height: 44%; }
|
|
.plinth-7 { height: 52%; }
|
|
|
|
.foundation-card-viz {
|
|
height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
color: var(--color-ink);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.foundation-card-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--spacing-xs);
|
|
margin-bottom: 8px;
|
|
overflow: visible;
|
|
padding-bottom: 0.08em;
|
|
}
|
|
|
|
.foundation-card-label {
|
|
font-family: var(--font-display);
|
|
font-size: 1.125rem;
|
|
color: var(--color-ink);
|
|
line-height: 1.16;
|
|
}
|
|
|
|
.foundation-card-count {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: var(--color-accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.foundation-card-detail {
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
line-height: 1.4;
|
|
margin: auto 0 0 0;
|
|
}
|
|
|
|
.foundation-svg {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
/* Typography & Spatial (Breathing draw + full draw on hover) */
|
|
.anim-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-breathe 4s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
|
|
.anim-draw-delay { stroke-dasharray: 100; stroke-dashoffset: 100; }
|
|
.foundation-column:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
|
|
@keyframes draw-breathe { 0%, 100% { stroke-dashoffset: 100; } 50% { stroke-dashoffset: 40; } }
|
|
@keyframes draw-in { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
|
|
|
|
/* Color & Contrast (Breathing pulse + spread on hover) */
|
|
.anim-move-x { animation: pulse-x 3s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
|
|
.anim-move-x-opp { animation: pulse-x-opp 3s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-move-x-opp { animation: spread-x-opp 0.6s var(--ease-in-out) forwards; }
|
|
.anim-fade-in { opacity: 0; transition: opacity 0.6s var(--ease-in-out); }
|
|
.foundation-column:hover .anim-fade-in { opacity: 1; }
|
|
@keyframes pulse-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
|
|
@keyframes pulse-x-opp { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-1.5px); } }
|
|
@keyframes spread-x { from { transform: translateX(0); } to { transform: translateX(4px); } }
|
|
@keyframes spread-x-opp { from { transform: translateX(0); } to { transform: translateX(-4px); } }
|
|
|
|
/* Responsive (Staggered reflow from desktop 2-col to mobile stack) */
|
|
.anim-res-frame, .anim-res-img, .anim-res-title, .anim-res-line-1, .anim-res-line-2 {
|
|
transform-box: fill-box;
|
|
transform-origin: 50% 50%;
|
|
transition: transform 0.4s var(--ease-in-out);
|
|
}
|
|
.anim-res-frame { transition-delay: 0s; }
|
|
.anim-res-img { transition-delay: 0s; }
|
|
.anim-res-title { transition-delay: 0s; }
|
|
.anim-res-line-1 { transition-delay: 0s; }
|
|
.anim-res-line-2 { transition-delay: 0s; }
|
|
.foundation-column:hover .anim-res-frame { transform: scaleX(0.57) scaleY(1.17); transition-delay: 0s; }
|
|
.foundation-column:hover .anim-res-img { transform: translate(6px, -4px) scale(0.65); transition-delay: 0.05s; }
|
|
.foundation-column:hover .anim-res-title { transform: translate(-7px, 6px) scaleX(0.65); transition-delay: 0.1s; }
|
|
.foundation-column:hover .anim-res-line-1 { transform: translate(-7px, 4.75px) scaleX(0.65); transition-delay: 0.15s; }
|
|
.foundation-column:hover .anim-res-line-2 { transform: translate(-6px, 4.25px) scaleX(0.6); transition-delay: 0.2s; }
|
|
|
|
/* Interaction (Gentle drift + full toggle on hover) */
|
|
.anim-toggle-move { animation: toggle-drift 3s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-toggle-move { animation: toggle-snap 0.35s var(--ease-in-out) forwards; }
|
|
@keyframes toggle-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
|
|
@keyframes toggle-snap { from { transform: translateX(0); fill: var(--color-mist); } to { transform: translateX(8px); fill: var(--color-accent); } }
|
|
|
|
/* Motion (Gentle bob + full bounce on hover) */
|
|
.anim-squash-ball { transform-origin: 20px 20px; animation: ball-bob 2.5s ease-in-out infinite; }
|
|
.foundation-column:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
|
|
@keyframes ball-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
|
|
@keyframes bounce-ball {
|
|
0% { transform: translateY(0); }
|
|
6% { transform: translateY(0.5px); }
|
|
18% { transform: translateY(4px); }
|
|
35% { transform: translateY(12px); }
|
|
42% { transform: translateY(12px) scaleX(1.3) scaleY(0.6); }
|
|
48% { transform: translateY(12px); }
|
|
65% { transform: translateY(4px); }
|
|
78% { transform: translateY(0.5px); }
|
|
88%, 100% { transform: translateY(0); }
|
|
}
|
|
|
|
/* UX Writing (Cursor always blinks) */
|
|
.anim-blink { animation: blink-key 1s step-end infinite; }
|
|
@keyframes blink-key { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|
|
|
/* Narrow desktop/tablet: 3-col grid before seven columns squeeze copy. */
|
|
@media (max-width: 1280px) {
|
|
.foundation-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
height: auto;
|
|
gap: var(--spacing-md);
|
|
margin-top: var(--spacing-xl);
|
|
}
|
|
.foundation-column { height: auto; }
|
|
.foundation-card { height: auto; min-height: 200px; }
|
|
.foundation-plinth { display: none; }
|
|
.foundation-column:hover .foundation-card { transform: translateY(-4px); }
|
|
|
|
/* Enable hover animations on card hover for grid */
|
|
.foundation-card:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
|
|
.foundation-card:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
|
|
.foundation-card:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
|
|
.foundation-card:hover .anim-move-x-opp { animation: spread-x-opp 0.6s var(--ease-in-out) forwards; }
|
|
.foundation-card:hover .anim-fade-in { opacity: 1; }
|
|
.foundation-card:hover .anim-res-frame { transform: scaleX(0.57) scaleY(1.17); }
|
|
.foundation-card:hover .anim-res-img { transform: translate(6px, -4px) scale(0.65); }
|
|
.foundation-card:hover .anim-res-title { transform: translate(-7px, 6px) scaleX(0.65); }
|
|
.foundation-card:hover .anim-res-line-1 { transform: translate(-7px, 4.75px) scaleX(0.65); }
|
|
.foundation-card:hover .anim-res-line-2 { transform: translate(-6px, 4.25px) scaleX(0.6); }
|
|
.foundation-card:hover .anim-toggle-move { animation: toggle-snap 0.35s var(--ease-in-out) forwards; }
|
|
.foundation-card:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
|
|
}
|
|
|
|
/* Small tablet: 2-col grid */
|
|
@media (max-width: 768px) {
|
|
.foundation-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
/* Small mobile: compact horizontal cards */
|
|
@media (max-width: 520px) {
|
|
.foundation-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
.foundation-card {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: auto auto;
|
|
align-items: start;
|
|
min-height: auto;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
gap: 0 var(--spacing-md);
|
|
}
|
|
.foundation-card-viz {
|
|
grid-row: 1 / -1;
|
|
align-self: center;
|
|
height: auto;
|
|
margin-bottom: 0;
|
|
}
|
|
.foundation-card-header { margin-bottom: 2px; }
|
|
.foundation-card-label { font-size: 1.1rem; }
|
|
.foundation-card-detail { margin: 0; font-size: 0.8125rem; }
|
|
}
|
|
|
|
.foundation-cta {
|
|
text-align: center;
|
|
}
|
|
|
|
.foundation-cta-text {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
}
|
|
|
|
.foundation-cta-text code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.foundation-slash {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
LANGUAGE SECTION (wraps periodic table + commands)
|
|
============================================ */
|
|
|
|
.language-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.language-content {
|
|
display: grid;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
/* Grid and flex items default to min-width: auto, which lets them expand to
|
|
fit their intrinsic content. The mobile commands layout has a split-compare
|
|
demo wide enough to blow out the entire section on mobile (~2400px wide).
|
|
Cascade min-width: 0 through every layer of the language section so the
|
|
intrinsic width can't propagate up the parent chain. */
|
|
.language-section,
|
|
.language-section * {
|
|
min-width: 0;
|
|
}
|
|
|
|
.language-content .section-lead {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.commands-subsection {
|
|
display: grid;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.commands-header-subtitle {
|
|
font-size: 0.9375rem;
|
|
color: var(--color-warm-gray);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ============================================
|
|
VISUAL MODE SECTION
|
|
============================================ */
|
|
|
|
.visual-mode-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.visual-mode-content {
|
|
display: grid;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.visual-mode-demo {
|
|
display: grid;
|
|
grid-template-columns: 3fr 2fr;
|
|
gap: var(--spacing-xl);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.visual-mode-demo {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Browser chrome frame for the iframe */
|
|
.visual-mode-preview {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-mist);
|
|
box-shadow: 0 8px 30px -6px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.visual-mode-preview-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 14px;
|
|
background: var(--color-cream);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.visual-mode-preview-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.visual-mode-preview-dot.red { background: #ff5f56; }
|
|
.visual-mode-preview-dot.yellow { background: #ffbd2e; }
|
|
.visual-mode-preview-dot.green { background: #27c93f; }
|
|
|
|
.visual-mode-preview-title {
|
|
margin-left: auto;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.visual-mode-iframe {
|
|
display: block;
|
|
width: 100%;
|
|
height: 480px;
|
|
border: none;
|
|
background: white;
|
|
}
|
|
|
|
/* Details sidebar — editorial blocks, no cards.
|
|
The live detection overlay (left iframe) is the visual anchor for the
|
|
whole section; the right column should be quiet text + a single image
|
|
for the Chrome extension CTA. Hierarchy via typography + space, not
|
|
bordered containers. */
|
|
.visual-mode-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xl);
|
|
padding: var(--spacing-md) 0;
|
|
}
|
|
|
|
.visual-mode-feature {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.visual-mode-feature-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.visual-mode-feature p {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.55;
|
|
color: var(--color-charcoal);
|
|
margin: 0;
|
|
}
|
|
|
|
.visual-mode-feature code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ============================================
|
|
SOLUTION SECTION (legacy styles for periodic table)
|
|
============================================ */
|
|
|
|
.solution-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
}
|
|
|
|
.solution-content {
|
|
display: grid;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.solution-content .section-lead {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Two-pillar visual layout */
|
|
.solution-visual {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
gap: var(--spacing-lg);
|
|
align-items: stretch;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.solution-visual {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* Interactive Framework Viz - Periodic Table */
|
|
.solution-visual-interactive {
|
|
width: 100%;
|
|
min-height: 380px;
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.solution-pillar {
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
padding: var(--spacing-lg);
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.solution-pillar:hover {
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 60px var(--color-accent-dim);
|
|
}
|
|
|
|
.pillar-header {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.pillar-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
background: var(--color-accent-dim);
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.pillar-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.75rem;
|
|
font-weight: 400;
|
|
margin: 0 0 var(--spacing-xs);
|
|
}
|
|
|
|
.pillar-subtitle {
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
margin: 0;
|
|
}
|
|
|
|
.pillar-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.pillar-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--spacing-sm);
|
|
background: var(--color-paper);
|
|
border-radius: 4px;
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.pillar-item:hover {
|
|
background: var(--color-accent-dim);
|
|
}
|
|
|
|
.pillar-item-name {
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.pillar-item-code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.pillar-item-desc {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.pillar-item--more {
|
|
justify-content: center;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
background: transparent;
|
|
border: 1px dashed var(--color-mist);
|
|
}
|
|
|
|
/* Connector between pillars */
|
|
.solution-connector {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.connector-plus {
|
|
font-family: var(--font-display);
|
|
font-size: 3rem;
|
|
font-weight: 300;
|
|
color: var(--color-accent);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.solution-connector {
|
|
padding: var(--spacing-sm) 0;
|
|
}
|
|
|
|
.connector-plus {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
SKILLS SECTION
|
|
============================================ */
|
|
|
|
.skills-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.skills-gallery {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
gap: var(--spacing-xl);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
.skills-gallery {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
}
|
|
|
|
.skills-nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
position: sticky;
|
|
top: var(--spacing-lg);
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
.skills-nav {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-xs);
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
.skill-nav-item {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
background: transparent;
|
|
border: none;
|
|
border-left: 2px solid transparent;
|
|
color: var(--color-ash);
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 400;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
.skill-nav-item:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.skill-nav-item.active {
|
|
color: var(--color-accent);
|
|
border-left-color: var(--color-accent);
|
|
background: var(--color-accent-dim);
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
.skill-nav-item {
|
|
border-left: none;
|
|
border-bottom: 2px solid transparent;
|
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
}
|
|
|
|
.skill-nav-item.active {
|
|
border-bottom-color: var(--color-accent);
|
|
}
|
|
}
|
|
|
|
.skills-showcase {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
gap: var(--spacing-lg);
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.skills-showcase {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.loading-state {
|
|
padding: var(--spacing-xl);
|
|
text-align: center;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE COMMANDS LAYOUT
|
|
============================================ */
|
|
|
|
.mobile-commands-layout {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.mobile-commands-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
/* Without min-width: 0, the flex container expands to fit any intrinsically
|
|
wide descendant (the split-compare demo blows it out to ~2400px otherwise).
|
|
The same constraint cascades to direct children via the next rule. */
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-commands-layout > * {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.commands-container {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mobile-carousel-wrapper {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
padding: var(--spacing-xs) 0;
|
|
}
|
|
|
|
.mobile-carousel-wrapper::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-carousel {
|
|
display: flex;
|
|
gap: var(--spacing-xs);
|
|
padding-right: var(--spacing-md);
|
|
}
|
|
|
|
.mobile-cmd-pill {
|
|
flex-shrink: 0;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
min-height: 44px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 100px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mobile-cmd-pill:hover {
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.mobile-cmd-pill.active {
|
|
color: var(--color-paper);
|
|
background: var(--color-ink);
|
|
}
|
|
|
|
.mobile-demo-area {
|
|
padding: 0;
|
|
}
|
|
|
|
.mobile-demo-area .demo-split-comparison {
|
|
width: 100%;
|
|
}
|
|
|
|
.mobile-demo-area .split-container {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 320px;
|
|
}
|
|
|
|
.mobile-demo-area .demo-caption {
|
|
font-size: 0.75rem;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.mobile-info-area {
|
|
padding-top: var(--spacing-sm);
|
|
}
|
|
|
|
.mobile-cmd-info {
|
|
display: none;
|
|
padding: var(--spacing-sm) 0;
|
|
}
|
|
|
|
.mobile-cmd-info.active {
|
|
display: block;
|
|
}
|
|
|
|
.mobile-cmd-name {
|
|
font-family: var(--font-mono);
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
margin: 0 0 var(--spacing-xs) 0;
|
|
}
|
|
|
|
.mobile-cmd-namespace {
|
|
color: var(--color-ash);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.mobile-cmd-desc {
|
|
font-size: 0.875rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.mobile-cmd-rel {
|
|
margin-top: var(--spacing-xs);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.mobile-cmd-rel code {
|
|
font-family: var(--font-mono);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* ============================================
|
|
DOWNLOADS SECTION
|
|
============================================ */
|
|
|
|
.downloads-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.downloads-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.download-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: var(--spacing-lg);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.download-card:hover {
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 60px var(--color-accent-dim);
|
|
}
|
|
|
|
.download-card-icon {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.download-card-icon img {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.download-card-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
}
|
|
|
|
.download-card-note {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.download-card .btn {
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
/* Install command box */
|
|
.install-command {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
background: var(--color-paper);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
padding: var(--spacing-sm);
|
|
margin-top: var(--spacing-sm);
|
|
width: 100%;
|
|
}
|
|
|
|
.install-command code {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ink);
|
|
background: transparent;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.copy-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
background: transparent;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 4px;
|
|
color: var(--color-ash);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.copy-btn:hover {
|
|
background: var(--color-accent-dim);
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.copy-btn.copied {
|
|
background: var(--color-accent);
|
|
border-color: var(--color-accent);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.install-hint {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
margin: var(--spacing-xs) 0 0 0;
|
|
}
|
|
|
|
.install-hint code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.download-card-details {
|
|
width: 100%;
|
|
margin-top: var(--spacing-sm);
|
|
font-size: 0.8125rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.download-card-details summary {
|
|
cursor: pointer;
|
|
color: var(--color-ash);
|
|
font-size: 0.75rem;
|
|
padding: var(--spacing-xs) 0;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.download-card-details summary::before {
|
|
content: '▶';
|
|
font-size: 0.5rem;
|
|
transition: transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.download-card-details[open] summary::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.download-card-details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.download-card-details ol {
|
|
margin: var(--spacing-sm) 0;
|
|
padding-left: var(--spacing-md);
|
|
color: var(--color-charcoal);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.download-card-details li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.download-card-details code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.download-card-details a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.download-card-details a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================
|
|
OPEN SOURCE SECTION
|
|
============================================ */
|
|
|
|
.opensource-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
text-align: center;
|
|
}
|
|
|
|
.opensource-content {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.opensource-title {
|
|
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
font-weight: 300;
|
|
}
|
|
|
|
.opensource-desc {
|
|
font-size: 1.125rem;
|
|
color: var(--color-ash);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ============================================
|
|
FOOTER
|
|
============================================ */
|
|
|
|
.site-footer {
|
|
border-top: 1px solid var(--color-mist);
|
|
padding: var(--spacing-xl) var(--spacing-lg);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
/* Single horizontal row: wordmark left, nav centered, credit right.
|
|
Three groups, no two-tier split, no dividers. */
|
|
.footer-row {
|
|
max-width: var(--width-max);
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: var(--spacing-xl);
|
|
}
|
|
|
|
.footer-logo {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 400;
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--spacing-lg);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-links a {
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.footer-credit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ash);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.footer-credit a {
|
|
color: var(--color-text);
|
|
text-decoration: none;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.footer-credit a:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.footer-social-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px;
|
|
color: var(--color-ash);
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.footer-social-link:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.footer-row {
|
|
grid-template-columns: 1fr;
|
|
justify-items: center;
|
|
text-align: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.footer-links {
|
|
justify-content: center;
|
|
gap: var(--spacing-sm) var(--spacing-md);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.site-footer {
|
|
padding: var(--spacing-lg) var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS
|
|
============================================ */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
padding: 1rem 2rem;
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all var(--duration-base) var(--ease-out);
|
|
position: relative;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--color-accent);
|
|
transform: translateY(100%);
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
z-index: 0;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.btn-primary span,
|
|
.btn-primary svg {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* For buttons without span wrapper */
|
|
.btn-primary:not(:has(span)) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: var(--color-ink);
|
|
border: 1px solid var(--color-ink);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
/* Focus styles for all buttons */
|
|
.btn:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.btn-primary:focus-visible {
|
|
outline-color: var(--color-paper);
|
|
box-shadow: 0 0 0 4px var(--color-accent);
|
|
}
|
|
|
|
.btn-secondary:focus-visible {
|
|
outline-color: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
|
|
@keyframes revealUp {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateX(-50%) translateY(0); }
|
|
50% { transform: translateX(-50%) translateY(-8px); }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(4px); }
|
|
}
|
|
|
|
/* Reveal animation for scroll */
|
|
[data-reveal] {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
|
|
}
|
|
|
|
[data-reveal].revealed {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Staggered reveals */
|
|
[data-reveal]:nth-child(1) { transition-delay: 0s; }
|
|
[data-reveal]:nth-child(2) { transition-delay: 0.1s; }
|
|
[data-reveal]:nth-child(3) { transition-delay: 0.2s; }
|
|
[data-reveal]:nth-child(4) { transition-delay: 0.3s; }
|
|
|
|
/* ============================================
|
|
REDUCED MOTION (Accessibility)
|
|
============================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
|
|
/* Allow smooth scrolling to remain for anchor links only if user explicitly triggers */
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
/* Disable hero canvas animation */
|
|
.hero-canvas {
|
|
display: none;
|
|
}
|
|
|
|
/* Disable scroll indicator animation */
|
|
.hero-scroll-indicator {
|
|
animation: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Disable reveal animations - show content immediately */
|
|
[data-reveal] {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
/* Disable gallery frame transitions */
|
|
.gallery-frame {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ERROR STATES
|
|
============================================ */
|
|
|
|
.load-error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: var(--spacing-2xl) var(--spacing-lg);
|
|
gap: var(--spacing-md);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.load-error-icon {
|
|
font-size: 2.5rem;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.load-error-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
color: var(--color-ink);
|
|
margin: 0;
|
|
}
|
|
|
|
.load-error-text {
|
|
font-size: 1rem;
|
|
color: var(--color-ash);
|
|
max-width: 40ch;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.load-error-retry {
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
/* ============================================
|
|
BIAS TAGS (Compact Problem Section)
|
|
============================================ */
|
|
|
|
.bias-tags {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
.bias-tags-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.bias-tags-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.bias-tag {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
padding: 6px 12px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
color: var(--color-charcoal);
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.bias-tag:hover {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* ============================================
|
|
ANTIDOTE SECTION
|
|
============================================ */
|
|
|
|
.antidote-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* Antidote row: patterns + gallery side by side */
|
|
.antidote-row {
|
|
display: flex;
|
|
gap: var(--spacing-xl);
|
|
align-items: stretch;
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.antidote-row .patterns-tabbed {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Gallery of Shame — 3D card stack */
|
|
.gallery-stack-container {
|
|
flex: 0 0 clamp(320px, 34vw, 420px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* Header: ← Gallery of Shame → */
|
|
.gallery-stack-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.gallery-stack-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
flex: 1;
|
|
}
|
|
|
|
.gallery-stack-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--color-mist);
|
|
background: white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.6875rem;
|
|
color: var(--color-charcoal);
|
|
flex-shrink: 0;
|
|
transition: border-color var(--duration-fast), background var(--duration-fast);
|
|
position: relative;
|
|
}
|
|
|
|
/* Invisible 44px touch target */
|
|
.gallery-stack-btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -10px;
|
|
}
|
|
|
|
.gallery-stack-btn:hover {
|
|
border-color: var(--color-charcoal);
|
|
}
|
|
|
|
/* Card stack — stacked deck offset to bottom-right */
|
|
.gallery-stack {
|
|
position: relative;
|
|
width: calc(100% - 20px);
|
|
aspect-ratio: 3 / 2;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.gallery-stack-card {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--color-mist);
|
|
text-decoration: none;
|
|
background: white;
|
|
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, box-shadow 0.35s ease;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.gallery-stack-card img {
|
|
flex: 1;
|
|
min-height: 0;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
}
|
|
|
|
.gallery-stack-label {
|
|
padding: 6px 10px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-charcoal);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Stack depth: cards peek behind at bottom-right */
|
|
.gallery-stack-card[data-offset="0"] {
|
|
z-index: 3;
|
|
transform: translate(0, 0);
|
|
opacity: 1;
|
|
box-shadow: 0 2px 12px oklch(0.2 0 0 / 0.1);
|
|
}
|
|
|
|
.gallery-stack-card[data-offset="1"] {
|
|
z-index: 2;
|
|
transform: translate(8px, 8px);
|
|
opacity: 1;
|
|
box-shadow: 0 1px 6px oklch(0.2 0 0 / 0.08);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gallery-stack-card[data-offset="2"] {
|
|
z-index: 1;
|
|
transform: translate(16px, 16px);
|
|
opacity: 1;
|
|
box-shadow: 0 1px 4px oklch(0.2 0 0 / 0.06);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gallery-stack-card:not([data-offset="0"]):not([data-offset="1"]):not([data-offset="2"]) {
|
|
z-index: 0;
|
|
transform: translate(20px, 20px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gallery-stack-link {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.gallery-stack-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.antidote-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gallery-stack-container {
|
|
flex: none;
|
|
width: 100%;
|
|
max-width: 360px;
|
|
}
|
|
|
|
}
|
|
|
|
/* ---- Pattern tabs ---- */
|
|
.patterns-tabbed {
|
|
margin-bottom: var(--spacing-xl);
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
.patterns-tabs-wrap {
|
|
position: relative;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.patterns-tabs {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-webkit-overflow-scrolling: touch;
|
|
scroll-snap-type: x proximity;
|
|
}
|
|
|
|
.patterns-tabs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Edge fade only on sides where more content exists. data-scroll is set
|
|
by JS: start | middle | end | none. */
|
|
.patterns-tabs[data-scroll="start"] {
|
|
mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
|
|
-webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent);
|
|
}
|
|
.patterns-tabs[data-scroll="middle"] {
|
|
mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 40px), transparent);
|
|
-webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 40px), transparent);
|
|
}
|
|
.patterns-tabs[data-scroll="end"] {
|
|
mask-image: linear-gradient(to right, transparent, black 32px);
|
|
-webkit-mask-image: linear-gradient(to right, transparent, black 32px);
|
|
}
|
|
.patterns-tabs[data-scroll="none"] {
|
|
mask-image: none;
|
|
-webkit-mask-image: none;
|
|
}
|
|
|
|
/* Chevrons sit on the wrapper (outside the mask) so they're always fully
|
|
opaque, regardless of edge fade. Visible only when scroll can progress
|
|
in that direction. */
|
|
.patterns-tabs-wrap::before,
|
|
.patterns-tabs-wrap::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-top: 1.5px solid var(--color-ash);
|
|
border-right: 1.5px solid var(--color-ash);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.18s ease;
|
|
}
|
|
.patterns-tabs-wrap::before {
|
|
left: 2px;
|
|
transform: translateY(-50%) rotate(-135deg);
|
|
}
|
|
.patterns-tabs-wrap::after {
|
|
right: 2px;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
}
|
|
.patterns-tabs-wrap[data-scroll="start"]::after,
|
|
.patterns-tabs-wrap[data-scroll="middle"]::after { opacity: 1; }
|
|
.patterns-tabs-wrap[data-scroll="end"]::before,
|
|
.patterns-tabs-wrap[data-scroll="middle"]::before { opacity: 1; }
|
|
|
|
.patterns-tab {
|
|
scroll-snap-align: start;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.patterns-tab {
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: var(--color-charcoal);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 100px;
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: background 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.patterns-tab:hover {
|
|
background: var(--color-mist);
|
|
}
|
|
|
|
.patterns-tab.is-active {
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
}
|
|
|
|
.patterns-content {
|
|
display: none;
|
|
}
|
|
|
|
.patterns-content.is-active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.patterns-col ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.patterns-col li {
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
padding-left: var(--spacing-sm);
|
|
position: relative;
|
|
color: var(--color-charcoal);
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.patterns-col--dont li::before {
|
|
content: '\00d7';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--color-accent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.patterns-col--do li::before {
|
|
content: '\2713';
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--color-success, var(--ks-patina));
|
|
font-weight: 600;
|
|
}
|
|
|
|
|
|
/* Detection callout — flat editorial CTA, no card chrome.
|
|
Image thumbnail on the left, NEW eyebrow + CTA stacked on the right.
|
|
The whole element is a clickable anchor. Hover shifts color, no
|
|
transform or shadow theatrics. */
|
|
.detection-callout {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding: var(--spacing-sm) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.detection-callout-image {
|
|
display: block;
|
|
width: 132px;
|
|
height: 112px;
|
|
flex-shrink: 0;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.detection-callout:hover .detection-callout-image {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.detection-callout-inner {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.detection-eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.detection-callout-title {
|
|
font-family: var(--font-display);
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.detection-callout:hover .detection-callout-title {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.detection-desc {
|
|
flex: 1;
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
color: var(--color-ash);
|
|
min-width: 200px;
|
|
}
|
|
|
|
.detection-desc code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.detection-cmd {
|
|
flex-shrink: 0;
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.detection-callout:hover .detection-cmd {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Antidote footer */
|
|
.antidote-footer {
|
|
text-align: center;
|
|
}
|
|
|
|
.antidote-suggest-link {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.antidote-suggest-link:hover {
|
|
color: var(--color-accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ============================================
|
|
SOLUTION SECTION ENHANCEMENTS
|
|
============================================ */
|
|
|
|
/* Main skill item styling */
|
|
.pillar-item--main {
|
|
background: var(--color-accent-dim);
|
|
border: 1px solid var(--color-accent);
|
|
}
|
|
|
|
.pillar-item--main .pillar-item-name {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.pillar-item--ref {
|
|
background: transparent;
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
}
|
|
|
|
.pillar-item-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
/* Reference domain tags */
|
|
.pillar-refs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-xs);
|
|
padding: 0 var(--spacing-sm);
|
|
}
|
|
|
|
.pillar-ref {
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
padding: 4px 10px;
|
|
background: var(--color-paper);
|
|
color: var(--color-ash);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 3px;
|
|
transition: all var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.pillar-ref:hover {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Command groups */
|
|
.pillar-command-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
padding: var(--spacing-sm);
|
|
background: var(--color-paper);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.pillar-group-label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-ash);
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pillar-command-group .pillar-item-code {
|
|
font-size: 0.8125rem;
|
|
padding: 4px 8px;
|
|
background: var(--color-accent-dim);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ============================================
|
|
PLATFORMS SECTION (alias for downloads)
|
|
============================================ */
|
|
|
|
.platforms-section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
@media (min-width: 1100px) {
|
|
.platforms-section {
|
|
border-top: none;
|
|
}
|
|
}
|
|
|
|
.platforms-section .section-subtitle {
|
|
max-width: 60ch;
|
|
}
|
|
|
|
/* Two-path install layout */
|
|
/* Row 1: full-width primary install card with internal 2-column split */
|
|
.install-row-primary {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-xl);
|
|
align-items: start;
|
|
margin: 0 0 var(--spacing-xl);
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: var(--spacing-lg);
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-primary-main,
|
|
.install-primary-howto {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-primary-howto {
|
|
padding-left: var(--spacing-xl);
|
|
border-left: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* The "Use it" side uses the hero body copy size so both columns feel balanced
|
|
in typographic weight, not just pixel width. */
|
|
.install-primary-howto .install-path-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-ink);
|
|
max-width: 48ch;
|
|
}
|
|
|
|
.install-primary-howto .install-path-desc em {
|
|
font-family: var(--font-display);
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-primary-alts {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* "Other install methods" is a collapsed <details> panel that sits
|
|
directly under the main install card. The alternatives are worth
|
|
keeping discoverable but don't need to be visible by default. */
|
|
.install-primary-main > .install-primary-alts {
|
|
margin-top: var(--spacing-lg);
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-primary-alts[open] > .install-alts-summary > .install-alts-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.install-alts-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
list-style: none;
|
|
cursor: pointer;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.install-alts-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.install-alts-arrow {
|
|
color: var(--color-ash);
|
|
transition: transform var(--duration-fast) var(--ease-out, ease);
|
|
}
|
|
|
|
.install-primary-alts[open] > .install-alts-summary {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.install-primary-alts[open] > .install-alt-method + .install-alt-method {
|
|
margin-top: var(--spacing-lg);
|
|
}
|
|
|
|
/* Editorial "How to use" step list on the right side of the install row.
|
|
Uses display-font numerals as prominent visual anchors, generous vertical
|
|
rhythm, and body text at the same scale as the hero copy for hierarchy
|
|
parity with the rest of the page. */
|
|
.install-howto-steps {
|
|
list-style: none;
|
|
counter-reset: howto-step;
|
|
padding: 0;
|
|
margin: var(--spacing-lg) 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.install-howto-steps > li {
|
|
counter-increment: howto-step;
|
|
position: relative;
|
|
padding-left: 3rem;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.install-howto-steps > li::before {
|
|
content: counter(howto-step, decimal-leading-zero);
|
|
position: absolute;
|
|
left: 0;
|
|
top: -0.1em;
|
|
font-family: var(--font-display);
|
|
font-size: 1.75rem;
|
|
font-weight: 400;
|
|
color: var(--color-accent);
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.install-howto-step-label {
|
|
font-family: var(--font-body);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
margin-bottom: 0.35rem;
|
|
line-height: 1.3;
|
|
letter-spacing: -0.005em;
|
|
}
|
|
|
|
.install-howto-steps > li p {
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.install-howto-steps code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
background: var(--color-accent-dim);
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-howto-steps .install-path-slash {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Compact 3-row "try it" table. Replaces the numbered sub-steps
|
|
inside step 2 to condense vertical height. Each row: mono command
|
|
example + one-line caption. Collapses to stacked on narrow screens. */
|
|
.install-howto-rows {
|
|
margin: var(--spacing-lg) 0 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.install-howto-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
|
|
gap: var(--spacing-md);
|
|
align-items: baseline;
|
|
padding: var(--spacing-sm) 0;
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-howto-row:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.install-howto-row:last-child {
|
|
padding-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.install-howto-row dt {
|
|
margin: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-howto-row dt code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--color-ink);
|
|
background: var(--color-accent-dim);
|
|
padding: 3px 8px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-howto-row dd {
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.55;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.install-howto-row dd code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125em;
|
|
background: var(--color-mist);
|
|
padding: 1px 5px;
|
|
border-radius: 3px;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-howto-row .install-path-slash {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.install-howto-row {
|
|
grid-template-columns: 1fr;
|
|
gap: 6px;
|
|
}
|
|
}
|
|
|
|
.install-howto-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-xl);
|
|
padding-top: var(--spacing-lg);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-howto-link {
|
|
font-family: var(--font-body);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 0.35em;
|
|
transition: gap 0.2s var(--ease-out-quart, ease);
|
|
}
|
|
|
|
.install-howto-link:hover {
|
|
gap: 0.6em;
|
|
}
|
|
|
|
.install-howto-link span {
|
|
display: inline-block;
|
|
transition: transform 0.2s var(--ease-out-quart, ease);
|
|
}
|
|
|
|
.install-howto-link:hover span {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* Two-tool grid inside the "Anti-pattern tools" step. */
|
|
.install-tool-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.install-tool {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Solo install-tool (no grid wrapper) — used when step 3 is Chrome-only.
|
|
The preview screenshot sits to the left of the CTA button so neither
|
|
dominates vertical space. Collapses to a stack on narrow screens. */
|
|
.install-tool--solo {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-md);
|
|
width: 100%;
|
|
}
|
|
|
|
.install-tool--solo .install-tool-preview {
|
|
flex: 0 1 260px;
|
|
min-width: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.install-tool--solo .install-tool-cta {
|
|
flex: 1 1 auto;
|
|
margin-top: 0;
|
|
width: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.install-tool--solo {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.install-tool--solo .install-tool-preview,
|
|
.install-tool--solo .install-tool-cta {
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
.install-tool-label {
|
|
font-family: var(--font-body);
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.install-tool-desc {
|
|
margin: 0;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ink);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* Chrome extension screenshot preview inside the install-tool column */
|
|
.install-tool-preview {
|
|
display: block;
|
|
margin-top: var(--spacing-sm);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
background: var(--color-paper);
|
|
transition: border-color var(--duration-fast) var(--ease-out, ease),
|
|
transform var(--duration-fast) var(--ease-out, ease);
|
|
}
|
|
|
|
.install-tool-preview:hover {
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.install-tool-preview img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.install-tool-preview-caption {
|
|
display: block;
|
|
padding: 0.4rem 0.75rem;
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
/* "Install from Chrome Web Store" uses the standard .btn .btn-primary
|
|
styles; this modifier only adds layout (full width + top spacing). */
|
|
.install-tool-cta {
|
|
margin-top: var(--spacing-sm);
|
|
width: 100%;
|
|
}
|
|
|
|
.install-alts-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.install-alt-sublabel {
|
|
font-family: var(--font-body);
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
color: var(--color-ash);
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Compact zip download links — replaces the old big black download button.
|
|
Two equal-weight options stacked vertically, each is its own affordance. */
|
|
.install-zip-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
.install-zip-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
padding: 8px 12px;
|
|
font-family: var(--font-body);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
background: transparent;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-zip-link:hover {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-zip-link svg {
|
|
flex-shrink: 0;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.install-zip-link:hover svg {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-zip-link-name {
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-zip-link:hover .install-zip-link-name {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-zip-link-examples {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 4px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.install-alt-method .install-zip-link-examples code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-accent-dim);
|
|
color: var(--color-accent);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-path {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-path-primary {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: var(--spacing-lg);
|
|
}
|
|
|
|
/* Steps 2-4: vertical accordion. Native <details name="install-steps">
|
|
gives mutual exclusion (opening one closes the others). Items are
|
|
separated by hairlines, not card chrome. */
|
|
.install-accordion {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 0 var(--spacing-xl);
|
|
}
|
|
|
|
.install-step {
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-step:last-child {
|
|
border-bottom: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-step-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md) var(--spacing-xs);
|
|
cursor: pointer;
|
|
list-style: none;
|
|
transition: background var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-step-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.install-step-summary:hover {
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.install-step-summary h3 {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.install-step-arrow {
|
|
flex-shrink: 0;
|
|
color: var(--color-ash);
|
|
transition: transform var(--duration-base) var(--ease-out);
|
|
}
|
|
|
|
.install-step[open] .install-step-arrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.install-step-body {
|
|
padding: 0 var(--spacing-xs) var(--spacing-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 56ch;
|
|
}
|
|
|
|
.install-step-body .install-path-desc {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.install-step-status {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
margin: 0 0 var(--spacing-sm);
|
|
}
|
|
|
|
.install-path-title {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin: 0 0 var(--spacing-sm);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* titles unified - no size override for step 3 */
|
|
|
|
.install-path-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.5rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-accent);
|
|
border: 1px solid var(--color-accent);
|
|
border-radius: 3px;
|
|
padding: 2px 6px;
|
|
vertical-align: middle;
|
|
margin-left: 6px;
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
.install-path-badge-muted {
|
|
color: var(--color-ash);
|
|
border-color: var(--color-mist);
|
|
}
|
|
|
|
.install-path-desc {
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
color: var(--color-charcoal);
|
|
margin: 0 0 var(--spacing-md);
|
|
}
|
|
|
|
.terminal-header-license {
|
|
margin-left: auto;
|
|
font-size: 0.6875rem;
|
|
color: oklch(65% 0.01 350);
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.terminal-header-license a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
text-decoration-color: oklch(85% 0.005 350);
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.terminal-header-license a:hover {
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
/* removed - unified font sizes across columns */
|
|
|
|
.install-path-terminal {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.install-path-terminal .glass-terminal {
|
|
height: auto;
|
|
}
|
|
|
|
.install-path-terminal .terminal-body {
|
|
padding: 0;
|
|
}
|
|
|
|
.install-path-next {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.5;
|
|
margin-top: auto;
|
|
padding-top: var(--spacing-md);
|
|
}
|
|
|
|
.install-path-next code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.install-path-slash {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
|
|
.install-path-subcommands {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.install-path-subcommand {
|
|
font-size: 0.75rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.install-path-subcommand code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
background: var(--color-mist);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.install-path-link {
|
|
margin-top: auto;
|
|
padding-top: var(--spacing-md);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.install-path-link a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.install-path-link a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Lightweight terminal block — used in row 2 (CLI) where the heavy
|
|
skeuomorphic glass-terminal would be visually too much. Just a thin
|
|
bordered code line with a copy button and an optional note below. */
|
|
.install-cmd-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-xs);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.install-cmd-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
padding: 10px 14px;
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.install-cmd-line .terminal-prompt {
|
|
flex-shrink: 0;
|
|
color: var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.install-cmd-line code {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ink);
|
|
background: transparent;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.install-cmd-line .copy-btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.install-cmd-note {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
line-height: 1.5;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.install-cmd-note code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
color: var(--color-ink);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-cmd-note a {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* Better together callout */
|
|
.install-together {
|
|
max-width: 960px;
|
|
margin: 0 0 var(--spacing-xl);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.install-together-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.install-together-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-accent);
|
|
border: 1px solid var(--color-accent);
|
|
padding: 2px 10px;
|
|
border-radius: 99px;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.install-together-text {
|
|
font-size: 0.8125rem;
|
|
line-height: 1.55;
|
|
color: var(--color-ash);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Inline step numbers — sit to the left of the title text inside each h3.
|
|
The h3 uses flex with align-items: center so the step is centered with
|
|
the text without needing vertical-align fiddling. Margin/gap is handled
|
|
by the parent flex's gap. */
|
|
.install-path-step {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--color-accent);
|
|
color: var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Stay updated (third column) */
|
|
.install-updated-subscribe {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-md);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.install-updated-substack {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 130px;
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
background: var(--color-paper);
|
|
}
|
|
|
|
.install-updated-x {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-xs);
|
|
height: 130px;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 8px;
|
|
background: var(--color-paper);
|
|
color: var(--color-ink);
|
|
text-decoration: none;
|
|
transition: border-color var(--duration-fast) var(--ease-out),
|
|
background var(--duration-fast) var(--ease-out),
|
|
transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-updated-x:hover {
|
|
border-color: var(--color-ink);
|
|
background: var(--color-cream);
|
|
}
|
|
|
|
.install-updated-x-icon {
|
|
color: var(--color-ink);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.install-updated-x-label {
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-ash);
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.install-updated-x-handle {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.install-updated-x:hover .install-updated-x-handle {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-updated-refs {
|
|
margin-top: auto;
|
|
padding-top: var(--spacing-md);
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-updated-refs-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.5625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.install-updated-ref {
|
|
display: block;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
text-decoration: none;
|
|
margin-bottom: 6px;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
a.install-updated-ref:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.install-updated-ref-terminal {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--color-charcoal);
|
|
background: var(--color-cream);
|
|
border: 1px solid var(--color-mist);
|
|
border-radius: 6px;
|
|
padding: 6px 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.install-updated-ref-terminal .terminal-prompt {
|
|
color: var(--color-ash);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.install-updated-ref-terminal code {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
background: none;
|
|
padding: 0;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.install-row-primary {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-lg);
|
|
max-width: calc(100vw - var(--spacing-md) * 2);
|
|
}
|
|
|
|
.install-primary-howto {
|
|
padding-left: 0;
|
|
padding-top: var(--spacing-lg);
|
|
border-left: none;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.install-tool-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.install-path-primary {
|
|
margin-bottom: var(--spacing-sm);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.install-path-title {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.install-path-desc {
|
|
font-size: 0.875rem;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.install-together-inner {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.install-updated-subscribe {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.install-updated-substack {
|
|
height: 130px;
|
|
}
|
|
|
|
.install-updated-x {
|
|
height: auto;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: var(--spacing-sm);
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.install-updated-x-label {
|
|
display: none;
|
|
}
|
|
|
|
.install-terminal-cmd code {
|
|
font-size: 0.75rem;
|
|
white-space: normal;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.install-alt-method {
|
|
padding: var(--spacing-sm);
|
|
}
|
|
|
|
.install-alt-method .install-terminal-cmd code {
|
|
font-size: 0.6875rem;
|
|
white-space: normal;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.install-alt-method .install-terminal-cmd .copy-btn {
|
|
display: none;
|
|
}
|
|
|
|
.install-path-terminal .glass-terminal {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.install-terminal {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.install-alternatives {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Install terminal (glass terminal style) */
|
|
.install-terminal {
|
|
max-width: 640px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.install-terminal .glass-terminal {
|
|
height: auto;
|
|
}
|
|
|
|
.install-terminal .terminal-body {
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.install-terminal-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
}
|
|
|
|
.install-terminal-label {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.install-terminal-cmd {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.install-terminal-cmd .terminal-prompt {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.install-terminal-cmd code {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9375rem;
|
|
color: var(--color-ink);
|
|
background: transparent;
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.install-terminal-cmd .copy-btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.install-terminal-cmd .btn {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.install-terminal-note {
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
padding-left: calc(0.75rem + var(--spacing-sm)); /* align with code after prompt */
|
|
}
|
|
|
|
.install-terminal-note code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.install-terminal-divider {
|
|
height: 1px;
|
|
background: var(--color-mist);
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.install-terminal-row {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
}
|
|
|
|
.install-terminal-cmd code {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Works with provider badges */
|
|
.install-providers {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.install-providers-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
}
|
|
|
|
.install-providers-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.install-provider-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.install-provider-badge img {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Install alternatives (collapsible) */
|
|
.install-alternatives {
|
|
max-width: 640px;
|
|
margin: var(--spacing-sm) auto 0;
|
|
}
|
|
|
|
.install-alternatives-toggle {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-ash);
|
|
cursor: pointer;
|
|
padding: var(--spacing-sm) 0;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
transition: color var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-alternatives-toggle::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.install-alternatives-toggle::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 5px solid currentColor;
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
transition: transform var(--duration-fast) var(--ease-out);
|
|
}
|
|
|
|
.install-alternatives[open] .install-alternatives-toggle::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.install-alternatives-toggle:hover {
|
|
color: var(--color-charcoal);
|
|
}
|
|
|
|
.install-alternatives-content {
|
|
animation: altFadeIn 0.2s var(--ease-out);
|
|
}
|
|
|
|
@keyframes altFadeIn {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.install-alt-method {
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
}
|
|
|
|
.install-alt-label {
|
|
display: block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--color-ash);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.install-alt-method .install-terminal-cmd {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.install-alt-method .terminal-prompt {
|
|
color: var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-weight: bold;
|
|
user-select: none;
|
|
}
|
|
|
|
.install-alt-method code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.install-alt-note {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: var(--color-ash);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.install-alt-note code {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--color-mist);
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
/* Visually hidden helper (kept for accessibility patterns elsewhere) */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.install-alt-method code {
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Tooltips */
|
|
.has-tooltip {
|
|
position: relative;
|
|
cursor: default;
|
|
}
|
|
|
|
.has-tooltip::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 6px 10px;
|
|
background: var(--color-ink);
|
|
color: var(--color-paper);
|
|
font-size: 0.6875rem;
|
|
line-height: 1.4;
|
|
border-radius: 6px;
|
|
white-space: nowrap;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
z-index: 100;
|
|
}
|
|
|
|
.has-tooltip:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Hero logo icon wrapper */
|
|
.hero-logo-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.download-tip {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ash);
|
|
margin-top: var(--spacing-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.download-tip a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.download-tip a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
/* ============================================
|
|
CONSULTING SECTION
|
|
============================================ */
|
|
|
|
.consulting-section {
|
|
padding: var(--spacing-xl) 0;
|
|
border-top: 1px solid var(--color-mist);
|
|
}
|
|
|
|
.consulting-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-lg);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.consulting-actions {
|
|
display: flex;
|
|
gap: var(--spacing-sm);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.consulting-text {
|
|
flex: 1;
|
|
min-width: 280px;
|
|
}
|
|
|
|
.consulting-title {
|
|
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
font-weight: 300;
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
}
|
|
|
|
.consulting-desc {
|
|
font-size: 1rem;
|
|
color: var(--color-charcoal);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
max-width: 45ch;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.consulting-content {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.consulting-actions {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.consulting-actions .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|