@livenetworks/ashlar 2.0.6 → 2.0.8

package/theme/presentation/_bento.scss

@@ -1,151 +1,151 @@
-// ==========================================================================
-// Presentation Bento Grid — ln-ashlar
-// ==========================================================================
-// Modern asymmetric bento-box grid layouts for highlighting core features.
-// Provided both as SCSS mixins (for ID/semantic composition) and classes.
-// ==========================================================================
-
-@mixin bento-grid {
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: var(--size-lg);
-
-	@media (min-width: 768px) {
-		grid-template-columns: repeat(12, 1fr);
-	}
-}
-
-@mixin bento-card {
-	position: relative;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	padding: clamp(1.5rem, 3vw, 2.25rem);
-	background-color: var(--bg-elevated);
-	border: var(--border-width) solid var(--color-border);
-	border-radius: var(--radius-xl);
-	box-shadow: var(--shadow-sm);
-	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.16),
-			var(--shadow-md);
-		border-color: color-mix(in srgb, hsl(var(--color-primary)) 40%, var(--color-border));
-	}
-
-	.bento-header {
-		margin-block-end: var(--size-md);
-
-		.bento-title {
-			font-size: var(--text-heading-md);
-			font-weight: 700;
-			letter-spacing: -0.02em;
-			color: var(--color-fg);
-			margin-block-start: 0;
-			margin-block-end: var(--size-xs-up);
-		}
-
-		.bento-desc {
-			font-size: var(--text-body-md);
-			color: var(--fg-muted);
-			margin: 0;
-			line-height: 1.55;
-		}
-	}
-
-	.bento-visual {
-		margin-block-start: var(--size-lg);
-		border-radius: var(--radius-lg);
-		overflow: hidden;
-
-		&.bento-pill-group {
-			display: flex;
-			gap: var(--size-xs);
-			flex-wrap: wrap;
-		}
-
-		&.bento-type-sample {
-			padding: var(--size-lg);
-
-			.type-display {
-				font-size: clamp(1.5rem, 3.5vw, 2.5rem);
-				font-weight: 800;
-				line-height: 1.2;
-			}
-
-			.type-code {
-				margin-block-start: var(--size-xs);
-				margin-block-end: 0;
-				font-size: var(--text-xs);
-				font-family: var(--font-mono);
-				color: var(--fg-muted);
-			}
-		}
-
-		&.bento-glass-sample {
-			padding: var(--size-md);
-			text-align: center;
-
-			.badge-dot {
-				margin-inline: auto;
-				margin-block-end: var(--size-xs);
-			}
-
-			small {
-				color: var(--fg-muted);
-			}
-		}
-
-		&.bento-code-sample {
-			padding: var(--size-md);
-			font-family: var(--font-mono);
-			font-size: var(--text-xs);
-			line-height: 1.6;
-
-			.token-tag {
-				color: hsl(var(--color-primary));
-			}
-
-			.token-attr {
-				color: hsl(var(--color-success, 150 80% 40%));
-			}
-		}
-	}
-}
-
-@mixin bento-span($cols) {
-	@media (min-width: 768px) {
-		grid-column: span #{$cols};
-	}
-}
-
-@mixin bento-row-span($rows: 2) {
-	@media (min-width: 768px) {
-		grid-row: span #{$rows};
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Component Classes
-// ---------------------------------------------------------------------------
-.bento-grid {
-	@include bento-grid;
-}
-
-.bento-card {
-	@include bento-card;
-}
-
-@media (min-width: 768px) {
-	.bento-span-4  { @include bento-span(4); }
-	.bento-span-5  { @include bento-span(5); }
-	.bento-span-6  { @include bento-span(6); }
-	.bento-span-7  { @include bento-span(7); }
-	.bento-span-8  { @include bento-span(8); }
-	.bento-span-12 { @include bento-span(12); }
-
-	.bento-row-span-2 { @include bento-row-span(2); }
-}
+// ==========================================================================
+// Presentation Bento Grid — ln-ashlar
+// ==========================================================================
+// Modern asymmetric bento-box grid layouts for highlighting core features.
+// Provided both as SCSS mixins (for ID/semantic composition) and classes.
+// ==========================================================================
+
+@mixin bento-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--size-lg);
+
+	@media (min-width: 768px) {
+		grid-template-columns: repeat(12, 1fr);
+	}
+}
+
+@mixin bento-card {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: clamp(1.5rem, 3vw, 2.25rem);
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-xl);
+	box-shadow: var(--shadow-sm);
+	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.16),
+			var(--shadow-md);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 40%, var(--color-border));
+	}
+
+	.bento-header {
+		margin-block-end: var(--size-md);
+
+		.bento-title {
+			font-size: var(--text-heading-md);
+			font-weight: 700;
+			letter-spacing: -0.02em;
+			color: var(--color-fg);
+			margin-block-start: 0;
+			margin-block-end: var(--size-xs-up);
+		}
+
+		.bento-desc {
+			font-size: var(--text-body-md);
+			color: var(--fg-muted);
+			margin: 0;
+			line-height: 1.55;
+		}
+	}
+
+	.bento-visual {
+		margin-block-start: var(--size-lg);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+
+		&.bento-pill-group {
+			display: flex;
+			gap: var(--size-xs);
+			flex-wrap: wrap;
+		}
+
+		&.bento-type-sample {
+			padding: var(--size-lg);
+
+			.type-display {
+				font-size: clamp(1.5rem, 3.5vw, 2.5rem);
+				font-weight: 800;
+				line-height: 1.2;
+			}
+
+			.type-code {
+				margin-block-start: var(--size-xs);
+				margin-block-end: 0;
+				font-size: var(--text-xs);
+				font-family: var(--font-mono);
+				color: var(--fg-muted);
+			}
+		}
+
+		&.bento-glass-sample {
+			padding: var(--size-md);
+			text-align: center;
+
+			.badge-dot {
+				margin-inline: auto;
+				margin-block-end: var(--size-xs);
+			}
+
+			small {
+				color: var(--fg-muted);
+			}
+		}
+
+		&.bento-code-sample {
+			padding: var(--size-md);
+			font-family: var(--font-mono);
+			font-size: var(--text-xs);
+			line-height: 1.6;
+
+			.token-tag {
+				color: hsl(var(--color-primary));
+			}
+
+			.token-attr {
+				color: hsl(var(--color-success, 150 80% 40%));
+			}
+		}
+	}
+}
+
+@mixin bento-span($cols) {
+	@media (min-width: 768px) {
+		grid-column: span #{$cols};
+	}
+}
+
+@mixin bento-row-span($rows: 2) {
+	@media (min-width: 768px) {
+		grid-row: span #{$rows};
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Component Classes
+// ---------------------------------------------------------------------------
+.bento-grid {
+	@include bento-grid;
+}
+
+.bento-card {
+	@include bento-card;
+}
+
+@media (min-width: 768px) {
+	.bento-span-4  { @include bento-span(4); }
+	.bento-span-5  { @include bento-span(5); }
+	.bento-span-6  { @include bento-span(6); }
+	.bento-span-7  { @include bento-span(7); }
+	.bento-span-8  { @include bento-span(8); }
+	.bento-span-12 { @include bento-span(12); }
+
+	.bento-row-span-2 { @include bento-row-span(2); }
+}

package/theme/presentation/_cta.scss

@@ -1,111 +1,111 @@
-// ==========================================================================
-// Presentation Call to Action (CTA) — ln-ashlar
-// ==========================================================================
-// High-conversion banners with ambient gradients, glows, and dual action rows.
-// Provided as mixins, semantic selectors (#cta), and classes.
-// ==========================================================================
-
-@mixin cta-box {
-	position: relative;
-	overflow: hidden;
-	background-color: var(--bg-elevated);
-	border: var(--border-width) solid color-mix(in srgb, hsl(var(--color-primary)) 28%, var(--color-border));
-	border-radius: var(--radius-2xl);
-	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
-	text-align: center;
-	box-shadow: 0 20px 50px -15px hsl(var(--color-primary) / 0.15), var(--shadow-lg);
-
-	&::before {
-		content: '';
-		position: absolute;
-		inset-inline-start: 50%;
-		top: -6rem;
-		transform: translateX(-50%);
-		width: clamp(20rem, 60vw, 45rem);
-		height: clamp(12rem, 30vw, 25rem);
-		background: radial-gradient(
-			ellipse at center,
-			hsl(var(--color-primary) / 0.22) 0%,
-			transparent 70%
-		);
-		filter: blur(50px);
-		pointer-events: none;
-		z-index: 0;
-	}
-
-	> * {
-		position: relative;
-		z-index: 1;
-	}
-
-	h2,
-	.cta-title {
-		font-size: var(--text-section-title);
-		line-height: var(--lh-section-title);
-		font-weight: 800;
-		letter-spacing: -0.03em;
-		color: var(--color-fg);
-		text-wrap: balance;
-		margin-block-start: 0;
-		margin-block-end: var(--size-md);
-	}
-
-	p,
-	.cta-lead {
-		font-size: var(--text-lead);
-		line-height: var(--lh-lead);
-		color: var(--fg-muted);
-		text-wrap: pretty;
-		margin-inline: auto;
-		margin-block-end: var(--size-xl);
-		max-width: var(--max-w-prose);
-	}
-
-	.badge-pill,
-	.cta-badge {
-		margin-block-end: var(--size-md);
-	}
-
-	nav,
-	footer,
-	.cta-actions {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-wrap: wrap;
-		gap: var(--size-md);
-	}
-
-	&.cta-island-card {
-		text-align: left;
-		padding: clamp(1.75rem, 3.5vw, 2.5rem);
-
-		.island-badge,
-		> span.badge-pill {
-			margin-block-end: var(--size-md);
-		}
-
-		.island-title,
-		h3 {
-			margin-block-start: 0;
-			margin-block-end: var(--size-xs);
-		}
-
-		.island-desc,
-		p {
-			color: var(--fg-muted);
-			font-size: var(--text-sm);
-			margin-block-start: 0;
-			margin-block-end: var(--size-lg);
-			line-height: 1.55;
-		}
-	}
-}
-
-// ─── Declarative Selectors ───────────────────────────────────────────────────
-
-#cta .cta-box,
-#cta article,
-.cta-box {
-	@include cta-box;
-}
+// ==========================================================================
+// Presentation Call to Action (CTA) — ln-ashlar
+// ==========================================================================
+// High-conversion banners with ambient gradients, glows, and dual action rows.
+// Provided as mixins, semantic selectors (#cta), and classes.
+// ==========================================================================
+
+@mixin cta-box {
+	position: relative;
+	overflow: hidden;
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid color-mix(in srgb, hsl(var(--color-primary)) 28%, var(--color-border));
+	border-radius: var(--radius-2xl);
+	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
+	text-align: center;
+	box-shadow: 0 20px 50px -15px hsl(var(--color-primary) / 0.15), var(--shadow-lg);
+
+	&::before {
+		content: '';
+		position: absolute;
+		inset-inline-start: 50%;
+		top: -6rem;
+		transform: translateX(-50%);
+		width: clamp(20rem, 60vw, 45rem);
+		height: clamp(12rem, 30vw, 25rem);
+		background: radial-gradient(
+			ellipse at center,
+			hsl(var(--color-primary) / 0.22) 0%,
+			transparent 70%
+		);
+		filter: blur(50px);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+
+	h2,
+	.cta-title {
+		font-size: var(--text-section-title);
+		line-height: var(--lh-section-title);
+		font-weight: 800;
+		letter-spacing: -0.03em;
+		color: var(--color-fg);
+		text-wrap: balance;
+		margin-block-start: 0;
+		margin-block-end: var(--size-md);
+	}
+
+	p,
+	.cta-lead {
+		font-size: var(--text-lead);
+		line-height: var(--lh-lead);
+		color: var(--fg-muted);
+		text-wrap: pretty;
+		margin-inline: auto;
+		margin-block-end: var(--size-xl);
+		max-width: var(--max-w-prose);
+	}
+
+	.badge-pill,
+	.cta-badge {
+		margin-block-end: var(--size-md);
+	}
+
+	nav,
+	footer,
+	.cta-actions {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: var(--size-md);
+	}
+
+	&.cta-island-card {
+		text-align: left;
+		padding: clamp(1.75rem, 3.5vw, 2.5rem);
+
+		.island-badge,
+		> span.badge-pill {
+			margin-block-end: var(--size-md);
+		}
+
+		.island-title,
+		h3 {
+			margin-block-start: 0;
+			margin-block-end: var(--size-xs);
+		}
+
+		.island-desc,
+		p {
+			color: var(--fg-muted);
+			font-size: var(--text-sm);
+			margin-block-start: 0;
+			margin-block-end: var(--size-lg);
+			line-height: 1.55;
+		}
+	}
+}
+
+// ─── Declarative Selectors ───────────────────────────────────────────────────
+
+#cta .cta-box,
+#cta article,
+.cta-box {
+	@include cta-box;
+}