refactor: establish local frontend workspace boundaries

OpenSpec change: evolve-frontend-stack

src/app/ui/AppShell.module.css

@@ -0,0 +1,258 @@
+.content {
+	max-width: 1120px;
+	margin-inline: auto;
+}
+
+.header {
+	align-items: center;
+	display: flex;
+	padding: 0 var(--mantine-spacing-md);
+}
+
+.bottomNav {
+	display: none;
+}
+
+.navIcon {
+	display: inline-flex;
+	flex-shrink: 0;
+}
+
+.portfolioIcon {
+	color: var(--mantine-color-blue-7);
+}
+
+.cardsIcon {
+	color: var(--mantine-color-grape-7);
+
+	& svg {
+		overflow: visible;
+	}
+}
+
+.rubles {
+	pointer-events: none;
+	color: var(--mantine-color-green-8);
+	stroke: currentColor;
+
+	& path {
+		opacity: 0;
+		--flight-x: -7px;
+		--flight-rotation: -20deg;
+		--flight-delay: 0ms;
+	}
+
+	& path:nth-child(2) {
+		--flight-x: 0px;
+		--flight-rotation: 8deg;
+		--flight-delay: 120ms;
+	}
+
+	& path:nth-child(3) {
+		--flight-x: 7px;
+		--flight-rotation: 24deg;
+		--flight-delay: 240ms;
+	}
+}
+
+.stocksIcon {
+	color: var(--mantine-color-green-8);
+}
+
+.bondsIcon {
+	color: var(--mantine-color-orange-8);
+}
+
+.settingsIcon {
+	color: var(--mantine-color-gray-7);
+}
+
+.portfolioRuble {
+	stroke: var(--mantine-color-green-8);
+	opacity: 0;
+}
+
+.stockArrow {
+	transform-origin: 21px 5px;
+}
+
+.topSlider,
+.bottomSlider {
+	fill: var(--mantine-color-body);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.navLink {
+		transition: background-color 180ms ease-in-out;
+	}
+
+	.drawStroke,
+	.couponLines path {
+		stroke-dasharray: 1;
+	}
+
+	.topSlider {
+		--slider-offset: 3px;
+		--slider-delay: 0ms;
+	}
+
+	.bottomSlider {
+		--slider-offset: -3px;
+		--slider-delay: 160ms;
+	}
+
+	.couponLines path:nth-child(2) {
+		--line-delay: 140ms;
+	}
+
+	.couponLines path:nth-child(3) {
+		--line-delay: 280ms;
+	}
+
+	svg[data-icon-animating] {
+		.rubles path {
+			animation: ruble-fly 800ms ease-out var(--flight-delay) both;
+		}
+		.portfolioHandle {
+			animation: handle-lift 1200ms ease-in-out;
+		}
+		.portfolioLid {
+			animation: lid-open 1200ms ease-in-out;
+		}
+		.portfolioRuble {
+			animation: portfolio-ruble-reveal 1200ms ease-in-out;
+		}
+		.stockArrow {
+			animation: arrow-pop 300ms ease-out 400ms both;
+		}
+		.couponLines path {
+			animation: stroke-draw 300ms ease-out var(--line-delay, 0ms) both;
+		}
+		.drawStroke {
+			animation: stroke-draw 450ms ease-out;
+		}
+		:is(.topSlider, .bottomSlider) {
+			animation: slider-slide 650ms ease-in-out var(--slider-delay) both;
+		}
+	}
+}
+
+@keyframes ruble-fly {
+	0% {
+		opacity: 0;
+		transform: translate(0, 4px);
+	}
+	20%,
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+		transform: translate(var(--flight-x), -10px) rotate(var(--flight-rotation));
+	}
+}
+
+@keyframes handle-lift {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	20% {
+		transform: translateY(-3px);
+	}
+	40%,
+	75% {
+		transform: translateY(-3px);
+	}
+}
+
+@keyframes lid-open {
+	0%,
+	15%,
+	100% {
+		transform: translateY(0);
+	}
+	40%,
+	75% {
+		transform: translateY(-3px);
+	}
+}
+
+@keyframes portfolio-ruble-reveal {
+	0%,
+	25%,
+	100% {
+		opacity: 0;
+		transform: translateY(2px);
+	}
+	40%,
+	75% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes arrow-pop {
+	0% {
+		opacity: 0;
+		transform: scale(0.7);
+	}
+	60% {
+		opacity: 1;
+		transform: scale(1.2);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes stroke-draw {
+	0% {
+		stroke-dashoffset: 1;
+	}
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes slider-slide {
+	0%,
+	100% {
+		transform: translateX(0);
+	}
+	50% {
+		transform: translateX(var(--slider-offset));
+	}
+}
+
+@media (max-width: 47.99375em) {
+	.bottomNav {
+		background: var(--mantine-color-white);
+		border-top: 1px solid var(--mantine-color-gray-3);
+		bottom: 0;
+		display: flex;
+		justify-content: space-around;
+		left: 0;
+		padding: var(--mantine-spacing-xs) 2px;
+		gap: 2px;
+		font-size: 11px;
+		& a {
+			min-width: 0;
+			padding: 8px 2px;
+			text-align: center;
+		}
+		position: fixed;
+		right: 0;
+		z-index: 200;
+	}
+
+	.active {
+		color: var(--mantine-primary-color-filled);
+		font-weight: 600;
+	}
+
+	.main {
+		padding-bottom: 5rem;
+	}
+}