@livenetworks/ashlar 2.0.6 → 2.0.8

package/theme/presentation/_effects.scss

@@ -1,216 +1,216 @@
-// ==========================================================================
-// Presentation Effects & Atmosphere — ln-ashlar
-// ==========================================================================
-// Ambient spotlight gradients, glassmorphism, glowing hover surfaces,
-// and presentation container patterns.
-// ==========================================================================
-
-// ---------------------------------------------------------------------------
-// Ambient Spotlights (CSS-only glowing background layers)
-// ---------------------------------------------------------------------------
-.ambient-glow-top {
-	position: relative;
-
-	&::before {
-		content: '';
-		position: absolute;
-		inset-inline-start: 50%;
-		top: -10rem;
-		transform: translateX(-50%);
-		width: clamp(20rem, 80vw, 65rem);
-		height: clamp(15rem, 40vw, 35rem);
-		background: radial-gradient(
-			ellipse at center,
-			hsl(var(--color-primary) / var(--spotlight-opacity, 0.18)) 0%,
-			hsl(var(--color-primary) / calc(var(--spotlight-opacity, 0.18) * 0.4)) 45%,
-			transparent 70%
-		);
-		filter: blur(60px);
-		pointer-events: none;
-		z-index: 0;
-	}
-
-	> * {
-		position: relative;
-		z-index: 1;
-	}
-}
-
-.ambient-glow-bottom {
-	position: relative;
-
-	&::after {
-		content: '';
-		position: absolute;
-		inset-inline-start: 50%;
-		bottom: -10rem;
-		transform: translateX(-50%);
-		width: clamp(20rem, 80vw, 65rem);
-		height: clamp(15rem, 40vw, 30rem);
-		background: radial-gradient(
-			ellipse at center,
-			hsl(var(--color-primary) / var(--spotlight-opacity, 0.15)) 0%,
-			transparent 70%
-		);
-		filter: blur(60px);
-		pointer-events: none;
-		z-index: 0;
-	}
-
-	> * {
-		position: relative;
-		z-index: 1;
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Background Patterns (Clean, modern dot & grid textures)
-// ---------------------------------------------------------------------------
-.pattern-dots {
-	background-image: radial-gradient(
-		color-mix(in srgb, var(--color-border) 60%, transparent) 1px,
-		transparent 1px
-	);
-	background-size: 24px 24px;
-}
-
-.pattern-grid {
-	background-image:
-		linear-gradient(to right, color-mix(in srgb, var(--color-border) 25%, transparent) 1px, transparent 1px),
-		linear-gradient(to bottom, color-mix(in srgb, var(--color-border) 25%, transparent) 1px, transparent 1px);
-	background-size: 40px 40px;
-}
-
-// ---------------------------------------------------------------------------
-// Glassmorphism Surfaces
-// ---------------------------------------------------------------------------
-@mixin glass-panel {
-	background-color: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
-	-webkit-backdrop-filter: blur(16px);
-	backdrop-filter: blur(16px);
-	border: var(--border-width) solid color-mix(in srgb, var(--color-border) 65%, transparent);
-	border-radius: var(--radius-lg);
-	box-shadow: var(--shadow-sm);
-}
-
-.glass-panel {
-	@include glass-panel;
-}
-
-// ---------------------------------------------------------------------------
-// Hover Glow & Elevation
-// ---------------------------------------------------------------------------
-@mixin glow-hover {
-	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
-
-	&:hover {
-		transform: translateY(-2px);
-		box-shadow:
-			0 12px 30px -10px hsl(var(--color-primary) / 0.18),
-			0 0 1px 1px color-mix(in srgb, hsl(var(--color-primary)) 35%, transparent),
-			var(--shadow-md);
-		border-color: color-mix(in srgb, hsl(var(--color-primary)) 45%, transparent);
-	}
-}
-
-.glow-hover {
-	@include glow-hover;
-}
-
-// ---------------------------------------------------------------------------
-// App Mockup Frame (Browser / Device Window Chrome)
-// ---------------------------------------------------------------------------
-.mockup-frame {
-	position: relative;
-	background-color: var(--bg-elevated);
-	border: var(--border-width) solid var(--color-border);
-	border-radius: var(--radius-xl);
-	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3), var(--shadow-xl);
-	overflow: hidden;
-
-	.mockup-bar {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: var(--size-xs-up) var(--size-md);
-		background-color: color-mix(in srgb, var(--bg-recessed) 80%, var(--bg-elevated));
-		border-bottom: var(--border-width) solid var(--color-border);
-
-		.mockup-dot {
-			width: 0.625rem;
-			height: 0.625rem;
-			border-radius: var(--radius-full);
-			background-color: var(--color-border);
-
-			&:nth-child(1) { background-color: #ff5f56; }
-			&:nth-child(2) { background-color: #ffbd2e; }
-			&:nth-child(3) { background-color: #27c93f; }
-		}
-
-		.mockup-url {
-			margin-inline-start: auto;
-			margin-inline-end: auto;
-			font-family: var(--font-mono);
-			font-size: var(--text-xs);
-			color: var(--fg-muted);
-			background-color: var(--bg-base);
-			padding: 0.125rem 1rem;
-			border-radius: var(--radius-sm);
-			border: var(--border-width) solid var(--color-border);
-		}
-	}
-
-	.mockup-body {
-		padding: var(--size-lg);
-		background-color: var(--bg-base);
-	}
-}
-
-.mockup-stage {
-	min-height: 17.5rem;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	text-align: center;
-	padding: clamp(2rem, 5vw, 3rem) var(--size-lg);
-}
-
-.mockup-stage-card {
-	padding: var(--size-xl);
-	max-width: 32rem;
-	width: 100%;
-
-	.stage-badge {
-		margin-block-end: var(--size-sm);
-	}
-
-	.stage-title {
-		margin-block-start: 0;
-		margin-block-end: var(--size-xs);
-		font-size: var(--text-heading-sm);
-	}
-
-	.stage-desc {
-		margin-block-start: 0;
-		margin-block-end: var(--size-md);
-		font-size: var(--text-sm);
-		color: var(--fg-muted);
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Subtle Keyframe Animations
-// ---------------------------------------------------------------------------
-@keyframes subtle-float {
-	0%, 100% {
-		transform: translateY(0);
-	}
-	50% {
-		transform: translateY(-6px);
-	}
-}
-
-.animate-float {
-	animation: subtle-float 6s ease-in-out infinite;
-}
+// ==========================================================================
+// Presentation Effects & Atmosphere — ln-ashlar
+// ==========================================================================
+// Ambient spotlight gradients, glassmorphism, glowing hover surfaces,
+// and presentation container patterns.
+// ==========================================================================
+
+// ---------------------------------------------------------------------------
+// Ambient Spotlights (CSS-only glowing background layers)
+// ---------------------------------------------------------------------------
+.ambient-glow-top {
+	position: relative;
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset-inline-start: 50%;
+		top: -10rem;
+		transform: translateX(-50%);
+		width: clamp(20rem, 80vw, 65rem);
+		height: clamp(15rem, 40vw, 35rem);
+		background: radial-gradient(
+			ellipse at center,
+			hsl(var(--color-primary) / var(--spotlight-opacity, 0.18)) 0%,
+			hsl(var(--color-primary) / calc(var(--spotlight-opacity, 0.18) * 0.4)) 45%,
+			transparent 70%
+		);
+		filter: blur(60px);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+.ambient-glow-bottom {
+	position: relative;
+
+	&::after {
+		content: '';
+		position: absolute;
+		inset-inline-start: 50%;
+		bottom: -10rem;
+		transform: translateX(-50%);
+		width: clamp(20rem, 80vw, 65rem);
+		height: clamp(15rem, 40vw, 30rem);
+		background: radial-gradient(
+			ellipse at center,
+			hsl(var(--color-primary) / var(--spotlight-opacity, 0.15)) 0%,
+			transparent 70%
+		);
+		filter: blur(60px);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Background Patterns (Clean, modern dot & grid textures)
+// ---------------------------------------------------------------------------
+.pattern-dots {
+	background-image: radial-gradient(
+		color-mix(in srgb, var(--color-border) 60%, transparent) 1px,
+		transparent 1px
+	);
+	background-size: 24px 24px;
+}
+
+.pattern-grid {
+	background-image:
+		linear-gradient(to right, color-mix(in srgb, var(--color-border) 25%, transparent) 1px, transparent 1px),
+		linear-gradient(to bottom, color-mix(in srgb, var(--color-border) 25%, transparent) 1px, transparent 1px);
+	background-size: 40px 40px;
+}
+
+// ---------------------------------------------------------------------------
+// Glassmorphism Surfaces
+// ---------------------------------------------------------------------------
+@mixin glass-panel {
+	background-color: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
+	-webkit-backdrop-filter: blur(16px);
+	backdrop-filter: blur(16px);
+	border: var(--border-width) solid color-mix(in srgb, var(--color-border) 65%, transparent);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--shadow-sm);
+}
+
+.glass-panel {
+	@include glass-panel;
+}
+
+// ---------------------------------------------------------------------------
+// Hover Glow & Elevation
+// ---------------------------------------------------------------------------
+@mixin glow-hover {
+	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow:
+			0 12px 30px -10px hsl(var(--color-primary) / 0.18),
+			0 0 1px 1px color-mix(in srgb, hsl(var(--color-primary)) 35%, transparent),
+			var(--shadow-md);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 45%, transparent);
+	}
+}
+
+.glow-hover {
+	@include glow-hover;
+}
+
+// ---------------------------------------------------------------------------
+// App Mockup Frame (Browser / Device Window Chrome)
+// ---------------------------------------------------------------------------
+.mockup-frame {
+	position: relative;
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-xl);
+	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.3), var(--shadow-xl);
+	overflow: hidden;
+
+	.mockup-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: var(--size-xs-up) var(--size-md);
+		background-color: color-mix(in srgb, var(--bg-recessed) 80%, var(--bg-elevated));
+		border-bottom: var(--border-width) solid var(--color-border);
+
+		.mockup-dot {
+			width: 0.625rem;
+			height: 0.625rem;
+			border-radius: var(--radius-full);
+			background-color: var(--color-border);
+
+			&:nth-child(1) { background-color: #ff5f56; }
+			&:nth-child(2) { background-color: #ffbd2e; }
+			&:nth-child(3) { background-color: #27c93f; }
+		}
+
+		.mockup-url {
+			margin-inline-start: auto;
+			margin-inline-end: auto;
+			font-family: var(--font-mono);
+			font-size: var(--text-xs);
+			color: var(--fg-muted);
+			background-color: var(--bg-base);
+			padding: 0.125rem 1rem;
+			border-radius: var(--radius-sm);
+			border: var(--border-width) solid var(--color-border);
+		}
+	}
+
+	.mockup-body {
+		padding: var(--size-lg);
+		background-color: var(--bg-base);
+	}
+}
+
+.mockup-stage {
+	min-height: 17.5rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	padding: clamp(2rem, 5vw, 3rem) var(--size-lg);
+}
+
+.mockup-stage-card {
+	padding: var(--size-xl);
+	max-width: 32rem;
+	width: 100%;
+
+	.stage-badge {
+		margin-block-end: var(--size-sm);
+	}
+
+	.stage-title {
+		margin-block-start: 0;
+		margin-block-end: var(--size-xs);
+		font-size: var(--text-heading-sm);
+	}
+
+	.stage-desc {
+		margin-block-start: 0;
+		margin-block-end: var(--size-md);
+		font-size: var(--text-sm);
+		color: var(--fg-muted);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Subtle Keyframe Animations
+// ---------------------------------------------------------------------------
+@keyframes subtle-float {
+	0%, 100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-6px);
+	}
+}
+
+.animate-float {
+	animation: subtle-float 6s ease-in-out infinite;
+}

package/theme/presentation/_features.scss

@@ -1,108 +1,108 @@
-// ==========================================================================
-// Presentation Feature Grid & Cards — ln-ashlar
-// ==========================================================================
-// Multi-column responsive feature cards with icons and hover highlights.
-// Provided as mixins, semantic selectors (#features-list li), and classes.
-// ==========================================================================
-
-@mixin feature-grid {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: var(--size-lg);
-
-	@media (min-width: 640px) {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	@media (min-width: 1024px) {
-		grid-template-columns: repeat(3, 1fr);
-	}
-
-	&.feature-grid-4 {
-		@media (min-width: 1024px) {
-			grid-template-columns: repeat(4, 1fr);
-		}
-	}
-}
-
-@mixin feature-card {
-	list-style: none;
-	margin: 0;
-	background-color: var(--bg-elevated);
-	border: var(--border-width) solid var(--color-border);
-	border-radius: var(--radius-xl);
-	padding: clamp(1.5rem, 2.5vw, 2rem);
-	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
-
-	&:hover {
-		transform: translateY(-2px);
-		box-shadow:
-			0 10px 25px -8px hsl(var(--color-primary) / 0.14),
-			var(--shadow-md);
-		border-color: color-mix(in srgb, hsl(var(--color-primary)) 35%, var(--color-border));
-
-		> div:first-child,
-		> figure:first-child,
-		.feature-icon-wrap {
-			transform: scale(1.05);
-			background-color: color-mix(in srgb, hsl(var(--color-primary)) 18%, var(--bg-base));
-		}
-	}
-
-	> div:first-child,
-	> figure:first-child,
-	.feature-icon-wrap {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 3.25rem;
-		height: 3.25rem;
-		border-radius: var(--radius-lg);
-		background-color: color-mix(in srgb, hsl(var(--color-primary)) 12%, var(--bg-base));
-		color: hsl(var(--color-primary));
-		border: var(--border-width) solid color-mix(in srgb, hsl(var(--color-primary)) 25%, transparent);
-		margin-block-end: var(--size-md);
-		transition: transform var(--transition-fast), background-color var(--transition-fast);
-
-		svg,
-		.ln-icon {
-			width: 1.5rem;
-			height: 1.5rem;
-		}
-	}
-
-	h3,
-	.feature-title {
-		font-size: var(--text-heading-sm);
-		font-weight: 700;
-		letter-spacing: -0.015em;
-		color: var(--color-fg);
-		margin-block-start: 0;
-		margin-block-end: var(--size-xs-up);
-	}
-
-	p,
-	.feature-desc {
-		font-size: var(--text-body-md);
-		color: var(--fg-muted);
-		line-height: 1.55;
-		margin: 0;
-	}
-}
-
-// ─── Declarative Selectors ───────────────────────────────────────────────────
-
-#features-list,
-#features ul,
-.feature-grid {
-	@include feature-grid;
-}
-
-#features-list > li,
-#features ul > li,
-.feature-card {
-	@include feature-card;
-}
+// ==========================================================================
+// Presentation Feature Grid & Cards — ln-ashlar
+// ==========================================================================
+// Multi-column responsive feature cards with icons and hover highlights.
+// Provided as mixins, semantic selectors (#features-list li), and classes.
+// ==========================================================================
+
+@mixin feature-grid {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--size-lg);
+
+	@media (min-width: 640px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	@media (min-width: 1024px) {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	&.feature-grid-4 {
+		@media (min-width: 1024px) {
+			grid-template-columns: repeat(4, 1fr);
+		}
+	}
+}
+
+@mixin feature-card {
+	list-style: none;
+	margin: 0;
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-xl);
+	padding: clamp(1.5rem, 2.5vw, 2rem);
+	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow:
+			0 10px 25px -8px hsl(var(--color-primary) / 0.14),
+			var(--shadow-md);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 35%, var(--color-border));
+
+		> div:first-child,
+		> figure:first-child,
+		.feature-icon-wrap {
+			transform: scale(1.05);
+			background-color: color-mix(in srgb, hsl(var(--color-primary)) 18%, var(--bg-base));
+		}
+	}
+
+	> div:first-child,
+	> figure:first-child,
+	.feature-icon-wrap {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 3.25rem;
+		height: 3.25rem;
+		border-radius: var(--radius-lg);
+		background-color: color-mix(in srgb, hsl(var(--color-primary)) 12%, var(--bg-base));
+		color: hsl(var(--color-primary));
+		border: var(--border-width) solid color-mix(in srgb, hsl(var(--color-primary)) 25%, transparent);
+		margin-block-end: var(--size-md);
+		transition: transform var(--transition-fast), background-color var(--transition-fast);
+
+		svg,
+		.ln-icon {
+			width: 1.5rem;
+			height: 1.5rem;
+		}
+	}
+
+	h3,
+	.feature-title {
+		font-size: var(--text-heading-sm);
+		font-weight: 700;
+		letter-spacing: -0.015em;
+		color: var(--color-fg);
+		margin-block-start: 0;
+		margin-block-end: var(--size-xs-up);
+	}
+
+	p,
+	.feature-desc {
+		font-size: var(--text-body-md);
+		color: var(--fg-muted);
+		line-height: 1.55;
+		margin: 0;
+	}
+}
+
+// ─── Declarative Selectors ───────────────────────────────────────────────────
+
+#features-list,
+#features ul,
+.feature-grid {
+	@include feature-grid;
+}
+
+#features-list > li,
+#features ul > li,
+.feature-card {
+	@include feature-card;
+}