diff --git a/shared/stack-layout.css b/shared/stack-layout.css index 13c6743..e67d41f 100644 --- a/shared/stack-layout.css +++ b/shared/stack-layout.css @@ -1,19 +1,6 @@ -.scroll-section { - height: var(--stack-slot); - position: relative; -} - -.scroll-section + .scroll-section { - margin-top: calc(-1 * var(--stack-pull)); -} - -.scroll-section--final { - height: var(--stack-slot-last); - min-height: 280px; -} - +/* Spacer after L6 so scroll can stop */ .stack-stop, .stop { - height: 2rem; - margin-bottom: 3rem; + height: 1px; + margin-bottom: 4rem; } diff --git a/shared/stack-scroll.js b/shared/stack-scroll.js index 33ede73..85dba7d 100644 --- a/shared/stack-scroll.js +++ b/shared/stack-scroll.js @@ -1,7 +1,7 @@ -/** Scroll depth + jump-to-layer for stack variants */ +/** Scroll depth + jump — panels are [data-layer] sticky cards */ export function initStackScroll(options = {}) { const { - sectionSelector = '.scroll-section', + sectionSelector = '.layer[data-layer], .folder[data-layer], .frame[data-layer], .unit[data-layer]', depthEl = document.getElementById('depth'), depthPrefix = 'L', tabSelector = '[data-goto], .jump', @@ -10,30 +10,30 @@ export function initStackScroll(options = {}) { const sections = document.querySelectorAll(sectionSelector); if (!sections.length) return; - const mid = () => window.innerHeight * 0.42; + const mid = () => window.innerHeight * 0.45; function updateDepth() { let active = 0; - sections.forEach((sec) => { - const r = sec.getBoundingClientRect(); - if (r.top <= mid() && r.bottom > mid()) active = Number(sec.dataset.layer); + sections.forEach((el) => { + const r = el.getBoundingClientRect(); + if (r.top <= mid() && r.bottom > mid()) active = Number(el.dataset.layer); }); if (depthEl) depthEl.textContent = `${depthPrefix}${active}`; - document.querySelectorAll('.stack-ruler button, .stack-ruler [data-goto], .tab-rail button, .tab[data-goto]').forEach((el) => { - const n = el.dataset.layer ?? el.dataset.goto; + document.querySelectorAll('.stack-ruler button, .stack-ruler [data-goto], .tab-rail button, .tab[data-goto]').forEach((tab) => { + const n = tab.dataset.layer ?? tab.dataset.goto; if (n === undefined) return; - el.classList.toggle('active', Number(n) === active); + tab.classList.toggle('active', Number(n) === active); }); } document.querySelectorAll(tabSelector).forEach((tab) => { tab.addEventListener('click', (e) => { e.preventDefault(); - const layer = tab.dataset.goto; + const layer = tab.dataset.goto ?? tab.dataset.layer; const target = document.querySelector(`${sectionSelector}[data-layer="${layer}"]`); if (!target) return; - const y = target.getBoundingClientRect().top + window.scrollY - 48; + const y = target.getBoundingClientRect().top + window.scrollY - 56; window.scrollTo({ top: Math.max(0, y), behavior: 'smooth' }); }); }); diff --git a/shared/stack-vars.css b/shared/stack-vars.css index 0e5439c..ea6bb6e 100644 --- a/shared/stack-vars.css +++ b/shared/stack-vars.css @@ -1,12 +1,7 @@ -/* Sticky card stack — enough scroll per layer for cover effect */ +/* Original working sticky stack (cfca7aa) */ :root { --stack-nav: 2.5rem; - --stack-stick: 3rem; + --stack-stick: 3.5rem; --stack-step: 2.75rem; - --stack-slot: 100vh; - --stack-slot-last: 55vh; - /* ~70vh scroll per layer before the next card slides over */ - --stack-scroll-step: 70vh; - --stack-pull: calc(var(--stack-slot) - var(--stack-scroll-step)); - --stack-body-h: calc(100dvh - var(--stack-stick) - var(--stack-step) * 6 - 3rem); + --stack-card-min: 52vh; } diff --git a/stack-folder/folder.css b/stack-folder/folder.css index 0552425..39d3ff6 100644 --- a/stack-folder/folder.css +++ b/stack-folder/folder.css @@ -49,10 +49,7 @@ body { font-family: var(--sans); background: #2a2824; color: #1a1814; } } .rail-tab:hover, -.rail-tab.active { - background: #c9a86c; - color: #2a2824; -} +.rail-tab.active { background: #c9a86c; color: #2a2824; } .mount { width: min(640px, 100%); @@ -60,9 +57,11 @@ body { font-family: var(--sans); background: #2a2824; color: #1a1814; } padding: var(--stack-nav) 1rem 0; } -/* Card = tab + body; sticky with stepped top; higher z covers previous */ +/* Same pattern as /stack/ — one sticky card, next covers previous */ .folder { position: sticky; + min-height: var(--stack-card-min); + margin-bottom: 1.25rem; width: 100%; } @@ -81,7 +80,7 @@ body { font-family: var(--sans); background: #2a2824; color: #1a1814; } border-radius: 8px 8px 0 0; cursor: pointer; text-align: left; - z-index: 60; + z-index: 80; box-shadow: 0 -2px 8px rgba(0,0,0,0.12); } @@ -92,30 +91,29 @@ body { font-family: var(--sans); background: #2a2824; color: #1a1814; } border: 1px solid #c4b8a8; border-top: none; border-radius: 0 10px 10px 10px; - padding: 1.25rem 1.4rem 2rem; - min-height: var(--stack-body-h); + padding: 1.25rem 1.4rem 1.5rem; box-shadow: 0 10px 32px rgba(0,0,0,0.25); } -.f0 { top: calc(var(--stack-stick) + var(--stack-step) * 0); z-index: 10; } -.f0 .tab { top: calc(var(--stack-stick) + var(--stack-step) * 0); margin-left: calc(var(--tab-offset) * 0); background: #c9a86c; color: #2a2824; } +.f0 { top: var(--stack-stick); z-index: 1; } +.f0 .tab { top: var(--stack-stick); margin-left: calc(var(--tab-offset) * 0); background: #c9a86c; color: #2a2824; } -.f1 { top: calc(var(--stack-stick) + var(--stack-step) * 1); z-index: 11; } -.f1 .tab { top: calc(var(--stack-stick) + var(--stack-step) * 1); margin-left: calc(var(--tab-offset) * 1); background: #a8c4d4; color: #1a2830; } +.f1 { top: calc(var(--stack-stick) + var(--stack-step)); z-index: 2; } +.f1 .tab { top: calc(var(--stack-stick) + var(--stack-step)); margin-left: calc(var(--tab-offset) * 1); background: #a8c4d4; color: #1a2830; } -.f2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); z-index: 12; } +.f2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); z-index: 3; } .f2 .tab { top: calc(var(--stack-stick) + var(--stack-step) * 2); margin-left: calc(var(--tab-offset) * 2); background: #b8d4a8; color: #1a2818; } -.f3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); z-index: 13; } +.f3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); z-index: 4; } .f3 .tab { top: calc(var(--stack-stick) + var(--stack-step) * 3); margin-left: calc(var(--tab-offset) * 3); background: #d4b8c4; color: #2a1820; } -.f4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); z-index: 14; } +.f4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); z-index: 5; } .f4 .tab { top: calc(var(--stack-stick) + var(--stack-step) * 4); margin-left: calc(var(--tab-offset) * 4); background: #d4c8a8; color: #2a2418; } -.f5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); z-index: 15; } +.f5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); z-index: 6; } .f5 .tab { top: calc(var(--stack-stick) + var(--stack-step) * 5); margin-left: calc(var(--tab-offset) * 5); background: #c4c4c4; color: #2a2a2a; } -.f6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); z-index: 16; } +.f6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); z-index: 7; margin-bottom: 4rem; } .f6 .tab { top: calc(var(--stack-stick) + var(--stack-step) * 6); margin-left: calc(var(--tab-offset) * 6); background: #2a4a6b; color: #e8e2d4; } .body h1 { font-size: 1.65rem; margin-bottom: 0.35rem; } @@ -139,7 +137,7 @@ body { font-family: var(--sans); background: #2a2824; color: #1a1814; } @media (max-width: 720px) { .tab-rail { display: none; } - :root { --tab-offset: 1.4rem; --stack-step: 2.25rem; } + :root { --stack-step: 1.75rem; --tab-offset: 1.4rem; --stack-card-min: 48vh; } .f5 .tab { margin-left: calc(var(--tab-offset) * 4); } .f6 .tab { margin-left: calc(var(--tab-offset) * 3); } } diff --git a/stack-folder/index.html b/stack-folder/index.html index b51554c..3fab136 100644 --- a/stack-folder/index.html +++ b/stack-folder/index.html @@ -28,71 +28,64 @@
-
-
- -
-

Levkin

-

Software development · Canada · remote

-

Taking new engagements · 15+ yrs · 8h→2m

-
-
-
-
-
- -
-

Custom software

-

Web apps, APIs, tools — TypeScript · Python · .NET · PostgreSQL

-
-
-
-
-
- -
-

Automation

-

n8n · Zapier · CI/CD · LLMs · auto.levkin.ca

-
-
-
-
-
- -
-

CaseWare & CaseView

-

15+ years · CaseWare Intl, MNP, JazzIt · caseware.levkin.ca

-
-
-
-
-
- -
-

Quality engineering

-

Senior SDET · iliadobkin.com

-
-
-
-
-
- -
-

Job Ops

-

Internal hiring orchestrator · jobs.levkin.ca

-
-
-
-
- -
+
+ +
+

Levkin

+

Software development · Canada · remote

+

Taking new engagements · 15+ yrs · 8h→2m

+
+
+ +
+ +
+

Custom software

+

Web apps, APIs, tools — TypeScript · Python · .NET · PostgreSQL

+
+
+ +
+ +
+

Automation

+

n8n · Zapier · CI/CD · LLMs · auto.levkin.ca

+
+
+ +
+ +
+

CaseWare & CaseView

+

15+ years · CaseWare Intl, MNP, JazzIt · caseware.levkin.ca

+
+
+ +
+ +
+

Quality engineering

+

Senior SDET · iliadobkin.com

+
+
+ +
+ +
+

Job Ops

+

Internal hiring orchestrator · jobs.levkin.ca

+
+
+ +
+ +
+

Engage

+

Discover → Proposal → Ship → Maintain

+

Book 15 min hello@levkine.ca

+
+
+
diff --git a/stack-rack/index.html b/stack-rack/index.html index dd1cb4d..0f00e9d 100644 --- a/stack-rack/index.html +++ b/stack-rack/index.html @@ -13,13 +13,34 @@
LEV-RACK-01
-
Levkin

Software dev · CA · 15+ yrs

-
custom_software

TS · Python · .NET

-
auto↗
pipeline

n8n · CI/CD

-
case↗
caseware

MNP · JazzIt

-
sdet↗
sdet_suite

iliadobkin.com

-
-
+
+
+
Levkin

Software dev · CA · 15+ yrs

+
+
+
+
custom_software

TS · Python · .NET

+
+
+
auto↗
+
pipeline

n8n · CI/CD

+
+
+
case↗
+
caseware

MNP · JazzIt

+
+
+
sdet↗
+
sdet_suite

iliadobkin.com

+
+ +
+
+
engage()

book · mail

+
diff --git a/stack-rack/rack.css b/stack-rack/rack.css index e886e89..7d6a083 100644 --- a/stack-rack/rack.css +++ b/stack-rack/rack.css @@ -38,7 +38,8 @@ body { .unit { position: sticky; - margin: 0; + min-height: var(--stack-card-min); + margin-bottom: 1.25rem; border: 1px solid #2a3448; background: #161a22; border-radius: 2px; @@ -51,7 +52,7 @@ body { padding: 0.4rem 0.65rem; background: #1a2030; border-bottom: 1px solid #2a3448; - z-index: 60; + z-index: 80; } .unit-head button.jump { @@ -72,30 +73,29 @@ body { .unit-head a.ext { color: #60a5fa; text-decoration: none; font-size: 0.58rem; } .unit-body { - padding: 0.6rem 0.7rem 2rem; - min-height: var(--stack-body-h); + padding: 0.6rem 0.7rem 1.5rem; background: #161a22; } -.u0 { top: calc(var(--stack-stick) + var(--stack-step) * 0); z-index: 10; } -.u0 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 0); } +.u0 { top: var(--stack-stick); z-index: 1; } +.u0 .unit-head { top: var(--stack-stick); } -.u1 { top: calc(var(--stack-stick) + var(--stack-step) * 1); z-index: 11; } -.u1 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 1); } +.u1 { top: calc(var(--stack-stick) + var(--stack-step)); z-index: 2; } +.u1 .unit-head { top: calc(var(--stack-stick) + var(--stack-step)); } -.u2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); z-index: 12; } +.u2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); z-index: 3; } .u2 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 2); } -.u3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); z-index: 13; } +.u3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); z-index: 4; } .u3 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 3); } -.u4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); z-index: 14; } +.u4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); z-index: 5; } .u4 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 4); } -.u5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); z-index: 15; } +.u5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); z-index: 6; } .u5 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 5); } -.u6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); z-index: 16; } +.u6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); z-index: 7; margin-bottom: 4rem; } .u6 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 6); } .unit-body strong { color: #e5e7eb; display: block; margin-bottom: 0.2rem; } diff --git a/stack-trace/index.html b/stack-trace/index.html index ef3d037..e3240b8 100644 --- a/stack-trace/index.html +++ b/stack-trace/index.html @@ -11,13 +11,34 @@
-
Levkin

Canadian software practice · 15+ yrs · remote

-
custom_software()

TS · Python · .NET · APIs

-
automation_pipeline()

n8n · CI/CD · LLMs

-
enterprise_module()

CaseWare · MNP · JazzIt

-
sdet_suite()

iliadobkin.com — traces · Playwright

-
job_ops()

internal · auth required

-
+
+ +
Levkin

Canadian software practice · 15+ yrs · remote

+
+
+ +
custom_software()

TS · Python · .NET · APIs

+
+
+ +
automation_pipeline()

n8n · CI/CD · LLMs

+
+
+ +
enterprise_module()

CaseWare · MNP · JazzIt

+
+
+ +
sdet_suite()

iliadobkin.com — traces · Playwright

+
+
+ +
job_ops()

internal · auth required

+
+
+ + +
diff --git a/stack-trace/trace.css b/stack-trace/trace.css index c3f5e32..25e7f45 100644 --- a/stack-trace/trace.css +++ b/stack-trace/trace.css @@ -28,7 +28,8 @@ body { .frame { position: sticky; - margin: 0 0.5rem; + min-height: var(--stack-card-min); + margin: 0 0.5rem 1.25rem; border-left: 3px solid #3a3a44; background: #141418; box-shadow: 0 8px 0 #0a0a0c, 0 14px 28px rgba(0,0,0,0.45); @@ -46,36 +47,35 @@ body { width: 100%; padding: 0.65rem 0 0.35rem 1rem; background: #141418; - z-index: 60; + z-index: 80; } .frame-line:hover { color: #9fdf9f; text-decoration: underline; } .frame-body { - padding: 0 0 2rem 1rem; - min-height: var(--stack-body-h); + padding: 0 0 1.5rem 1rem; background: #141418; } -.f0 { top: calc(var(--stack-stick) + var(--stack-step) * 0); z-index: 10; border-color: #c4a574; } -.f0 .frame-line { top: calc(var(--stack-stick) + var(--stack-step) * 0); } +.f0 { top: var(--stack-stick); z-index: 1; border-color: #c4a574; } +.f0 .frame-line { top: var(--stack-stick); } -.f1 { top: calc(var(--stack-stick) + var(--stack-step) * 1); z-index: 11; } -.f1 .frame-line { top: calc(var(--stack-stick) + var(--stack-step) * 1); } +.f1 { top: calc(var(--stack-stick) + var(--stack-step)); z-index: 2; } +.f1 .frame-line { top: calc(var(--stack-stick) + var(--stack-step)); } -.f2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); z-index: 12; } +.f2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); z-index: 3; } .f2 .frame-line { top: calc(var(--stack-stick) + var(--stack-step) * 2); } -.f3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); z-index: 13; } +.f3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); z-index: 4; } .f3 .frame-line { top: calc(var(--stack-stick) + var(--stack-step) * 3); } -.f4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); z-index: 14; border-color: #6b8b9b; } +.f4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); z-index: 5; border-color: #6b8b9b; } .f4 .frame-line { top: calc(var(--stack-stick) + var(--stack-step) * 4); } -.f5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); z-index: 15; } +.f5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); z-index: 6; } .f5 .frame-line { top: calc(var(--stack-stick) + var(--stack-step) * 5); } -.f6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); z-index: 16; border-color: #7eb87a; } +.f6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); z-index: 7; border-color: #7eb87a; margin-bottom: 4rem; } .f6 .frame-line { top: calc(var(--stack-stick) + var(--stack-step) * 6); } .frame-body strong { color: #e8e6e3; font-weight: 500; display: block; margin-bottom: 0.2rem; } diff --git a/stack/index.html b/stack/index.html index 9d41c74..8df7548 100644 --- a/stack/index.html +++ b/stack/index.html @@ -19,55 +19,69 @@
-
-
foundation
-

Levkin

-

Software · Canada · remote

-

Boutique engineering — production systems, automation, enterprise.

-
15+ yrs8h→2m24/7
-

Taking new engagements

-
- -
-
application
-

Custom software

-

Web apps, APIs, internal tools — TS · Python · .NET

-
- -
-
automationauto.levkin.ca ↗
-

Automation

-

n8n · Zapier · CI/CD · webhooks · LLMs

-
- -
-
enterprisecaseware.levkin.ca ↗
-

CaseWare & CaseView

-

15+ years · CaseWare Intl, MNP, JazzIt

-
- -
-
qualityiliadobkin.com ↗
-

Quality engineering

-

Senior SDET · test automation · CI/CD · trace-driven QA

-
- -
-
operationsjobs.levkin.ca ↗
-

Job Ops

-

Internal hiring orchestrator (auth required)

-
- -
-
interface
-

Engage

-

Discover → Proposal → Ship → Maintain

-
- Book 15 min - hello@levkine.ca +
+
+
foundation
+

Levkin

+

Software · Canada · remote

+

Boutique engineering — production systems, automation, enterprise.

+
15+ yrs8h→2m24/7
+

Taking new engagements

-

Retries · docs · tests first

-
+ + +
+
+
application
+

Custom software

+

Web apps, APIs, internal tools — TS · Python · .NET

+
+
+ +
+
+
automationauto.levkin.ca ↗
+

Automation

+

n8n · Zapier · CI/CD · webhooks · LLMs

+
+
+ +
+
+
enterprisecaseware.levkin.ca ↗
+

CaseWare & CaseView

+

15+ years · CaseWare Intl, MNP, JazzIt

+
+
+ +
+
+
qualityiliadobkin.com ↗
+

Quality engineering

+

Senior SDET · test automation · CI/CD · trace-driven QA

+
+
+ +
+
+
operationsjobs.levkin.ca ↗
+

Job Ops

+

Internal hiring orchestrator (auth required)

+
+
+ +
+
+
interface
+

Engage

+

Discover → Proposal → Ship → Maintain

+ +

Retries · docs · tests first

+
+
diff --git a/stack/stack.css b/stack/stack.css index b8b5f5d..9eb614e 100644 --- a/stack/stack.css +++ b/stack/stack.css @@ -8,6 +8,8 @@ * { box-sizing: border-box; margin: 0; padding: 0; } +html { scroll-behavior: smooth; } + body { font-family: var(--sans); background: #0e0e10; @@ -16,7 +18,7 @@ body { } .nav { - position: fixed; top: 0; left: 0; right: 0; z-index: 200; + position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; gap: 1rem; padding: 0.55rem 1rem; font-family: var(--mono); font-size: 0.62rem; background: rgba(14, 14, 16, 0.92); backdrop-filter: blur(8px); @@ -29,42 +31,30 @@ body { .depth { color: #c4a574; font-weight: 600; } .stack-mount { - width: min(560px, 100%); - margin: 0 auto; padding: var(--stack-nav) 1rem 0; + max-width: 560px; + margin: 0 auto; } +/* Each card sticks; next scrolls over previous */ .layer { position: sticky; - margin: 0; - border-radius: 8px 8px 6px 6px; + min-height: var(--stack-card-min); + margin-bottom: 1.25rem; + border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 12px 36px rgba(0,0,0,0.5); } -.layer-tab { - position: absolute; - top: -6px; left: 10px; right: 10px; height: 6px; - border-radius: 5px 5px 0 0; - background: inherit; - filter: brightness(1.12); - border: 1px solid rgba(255,255,255,0.07); - border-bottom: none; - pointer-events: none; -} +.layer-0 { top: var(--stack-stick); z-index: 1; background: #1c1c20; } +.layer-1 { top: calc(var(--stack-stick) + var(--stack-step)); z-index: 2; background: #24242c; } +.layer-2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); z-index: 3; background: #2c2c36; } +.layer-3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); z-index: 4; background: #343440; } +.layer-4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); z-index: 5; background: #3c3c4a; } +.layer-5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); z-index: 6; background: #444454; } +.layer-6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); z-index: 7; background: #4c4c5e; margin-bottom: 4rem; } -.layer-inner { - padding: 1.2rem 1.35rem 2rem; - min-height: var(--stack-body-h); -} - -.layer-0 { background: #1c1c20; top: calc(var(--stack-stick) + var(--stack-step) * 0); z-index: 10; } -.layer-1 { background: #24242c; top: calc(var(--stack-stick) + var(--stack-step) * 1); z-index: 11; } -.layer-2 { background: #2c2c36; top: calc(var(--stack-stick) + var(--stack-step) * 2); z-index: 12; } -.layer-3 { background: #343440; top: calc(var(--stack-stick) + var(--stack-step) * 3); z-index: 13; } -.layer-4 { background: #3c3c4a; top: calc(var(--stack-stick) + var(--stack-step) * 4); z-index: 14; } -.layer-5 { background: #444454; top: calc(var(--stack-stick) + var(--stack-step) * 5); z-index: 15; } -.layer-6 { background: #4c4c5e; top: calc(var(--stack-stick) + var(--stack-step) * 6); z-index: 16; } +.layer-inner { padding: 1.2rem 1.35rem 1.5rem; } .layer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; @@ -99,7 +89,7 @@ body { .guarantees { font-family: var(--mono); font-size: 0.58rem; color: #5a5854; } .site-foot { display: flex; justify-content: space-between; - width: min(560px, 100%); margin: 0 auto; + max-width: 560px; margin: 0 auto; padding: 0 1.5rem 2.5rem; font-family: var(--mono); font-size: 0.6rem; color: #4a4844; } .site-foot a { color: #4a4844; text-decoration: none; } @@ -114,4 +104,7 @@ body { .stack-ruler button:hover, .stack-ruler button.active { color: #c4a574; } -@media (max-width: 700px) { .variants { display: none; } } +@media (max-width: 700px) { + :root { --stack-step: 1.75rem; --stack-card-min: 48vh; } + .variants { display: none; } +}