@livenetworks/ashlar 2.0.7 → 2.0.8

package/theme/presentation/_stats.scss

@@ -1,87 +1,87 @@
-// ==========================================================================
-// Presentation Metrics & Statistics — ln-ashlar
-// ==========================================================================
-// Large fluid metrics callouts for social proof and product benchmarks.
-// Provided as mixins, semantic selectors (#stats-list li), and classes.
-// ==========================================================================
-
-@mixin stat-grid {
-	list-style: none;
-	margin: 0;
-	padding: 0;
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: var(--size-lg);
-
-	@media (min-width: 600px) {
-		grid-template-columns: repeat(2, 1fr);
-	}
-
-	@media (min-width: 1024px) {
-		grid-template-columns: repeat(4, 1fr);
-	}
-}
-
-@mixin stat-item {
-	list-style: none;
-	margin: 0;
-	padding: clamp(1.25rem, 2.5vw, 2rem);
-	background-color: var(--bg-elevated);
-	border: var(--border-width) solid var(--color-border);
-	border-radius: var(--radius-xl);
-	text-align: center;
-	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
-
-	&:hover {
-		transform: translateY(-2px);
-		border-color: color-mix(in srgb, hsl(var(--color-primary)) 40%, var(--color-border));
-		box-shadow: var(--shadow-sm);
-	}
-
-	strong,
-	b,
-	data,
-	.stat-number {
-		display: block;
-		font-size: clamp(2.25rem, 4.5vw, 3.5rem);
-		font-weight: 800;
-		letter-spacing: -0.03em;
-		line-height: 1.1;
-		margin-block-start: 0;
-		margin-block-end: var(--size-xs);
-		color: var(--color-fg);
-	}
-
-	span,
-	label,
-	.stat-label {
-		display: block;
-		font-size: var(--text-sm);
-		font-weight: 600;
-		color: var(--color-fg);
-		margin-block-start: 0;
-		margin-block-end: var(--size-2xs);
-	}
-
-	p,
-	small,
-	.stat-desc {
-		font-size: var(--text-xs);
-		color: var(--fg-muted);
-		margin: 0;
-	}
-}
-
-// ─── Declarative Selectors ───────────────────────────────────────────────────
-
-#stats-list,
-#stats ul,
-.stat-grid {
-	@include stat-grid;
-}
-
-#stats-list > li,
-#stats ul > li,
-.stat-item {
-	@include stat-item;
-}
+// ==========================================================================
+// Presentation Metrics & Statistics — ln-ashlar
+// ==========================================================================
+// Large fluid metrics callouts for social proof and product benchmarks.
+// Provided as mixins, semantic selectors (#stats-list li), and classes.
+// ==========================================================================
+
+@mixin stat-grid {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--size-lg);
+
+	@media (min-width: 600px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	@media (min-width: 1024px) {
+		grid-template-columns: repeat(4, 1fr);
+	}
+}
+
+@mixin stat-item {
+	list-style: none;
+	margin: 0;
+	padding: clamp(1.25rem, 2.5vw, 2rem);
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-xl);
+	text-align: center;
+	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+
+	&:hover {
+		transform: translateY(-2px);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 40%, var(--color-border));
+		box-shadow: var(--shadow-sm);
+	}
+
+	strong,
+	b,
+	data,
+	.stat-number {
+		display: block;
+		font-size: clamp(2.25rem, 4.5vw, 3.5rem);
+		font-weight: 800;
+		letter-spacing: -0.03em;
+		line-height: 1.1;
+		margin-block-start: 0;
+		margin-block-end: var(--size-xs);
+		color: var(--color-fg);
+	}
+
+	span,
+	label,
+	.stat-label {
+		display: block;
+		font-size: var(--text-sm);
+		font-weight: 600;
+		color: var(--color-fg);
+		margin-block-start: 0;
+		margin-block-end: var(--size-2xs);
+	}
+
+	p,
+	small,
+	.stat-desc {
+		font-size: var(--text-xs);
+		color: var(--fg-muted);
+		margin: 0;
+	}
+}
+
+// ─── Declarative Selectors ───────────────────────────────────────────────────
+
+#stats-list,
+#stats ul,
+.stat-grid {
+	@include stat-grid;
+}
+
+#stats-list > li,
+#stats ul > li,
+.stat-item {
+	@include stat-item;
+}

package/theme/presentation/_testimonials.scss

@@ -1,124 +1,124 @@
-// ==========================================================================
-// Presentation Testimonials & Social Proof — ln-ashlar
-// ==========================================================================
-// Customer quote cards, star ratings, and author avatars.
-// Supports both semantic section selector (#testimonials) and reusable .cards-grid / .testimonial-card.
-// ==========================================================================
-
-#testimonials,
-.testimonial-section {
-	ul,
-	.cards-grid,
-	.testimonial-grid {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: grid;
-		grid-template-columns: 1fr;
-		gap: var(--size-lg);
-
-		@media (min-width: 768px) {
-			grid-template-columns: repeat(2, 1fr);
-		}
-
-		@media (min-width: 1024px) {
-			grid-template-columns: repeat(3, 1fr);
-		}
-	}
-
-	li,
-	.testimonial-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, 2.25rem);
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		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: var(--shadow-md);
-			border-color: color-mix(in srgb, hsl(var(--color-primary)) 35%, var(--color-border));
-		}
-	}
-
-	.testimonial-rating {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		margin-block-end: var(--size-md);
-		color: #f59e0b; // Warm amber star color
-
-		svg,
-		.ln-icon {
-			width: 1.125rem;
-			height: 1.125rem;
-		}
-	}
-
-	blockquote,
-	.testimonial-quote {
-		font-size: var(--text-body-md);
-		line-height: 1.6;
-		color: var(--color-fg);
-		font-style: normal;
-		margin: 0;
-		margin-block-end: var(--size-xl);
-
-		p {
-			margin: 0;
-		}
-	}
-
-	footer,
-	.testimonial-author {
-		display: flex;
-		align-items: center;
-		gap: var(--size-md);
-		margin-block-start: auto;
-
-		.author-avatar,
-		figure {
-			width: 2.75rem;
-			height: 2.75rem;
-			border-radius: var(--radius-full);
-			background-color: var(--bg-recessed);
-			border: var(--border-width) solid var(--color-border);
-			overflow: hidden;
-			flex-shrink: 0;
-			margin: 0;
-
-			img {
-				width: 100%;
-				height: 100%;
-				object-fit: cover;
-				display: block;
-			}
-		}
-
-		.author-info {
-			cite,
-			.author-name {
-				display: block;
-				font-size: var(--text-sm);
-				font-weight: 700;
-				font-style: normal;
-				color: var(--color-fg);
-				margin: 0;
-			}
-
-			.author-title,
-			span {
-				display: block;
-				font-size: var(--text-xs);
-				color: var(--fg-muted);
-				margin: 0;
-			}
-		}
-	}
-}
+// ==========================================================================
+// Presentation Testimonials & Social Proof — ln-ashlar
+// ==========================================================================
+// Customer quote cards, star ratings, and author avatars.
+// Supports both semantic section selector (#testimonials) and reusable .cards-grid / .testimonial-card.
+// ==========================================================================
+
+#testimonials,
+.testimonial-section {
+	ul,
+	.cards-grid,
+	.testimonial-grid {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: var(--size-lg);
+
+		@media (min-width: 768px) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@media (min-width: 1024px) {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
+
+	li,
+	.testimonial-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, 2.25rem);
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		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: var(--shadow-md);
+			border-color: color-mix(in srgb, hsl(var(--color-primary)) 35%, var(--color-border));
+		}
+	}
+
+	.testimonial-rating {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		margin-block-end: var(--size-md);
+		color: #f59e0b; // Warm amber star color
+
+		svg,
+		.ln-icon {
+			width: 1.125rem;
+			height: 1.125rem;
+		}
+	}
+
+	blockquote,
+	.testimonial-quote {
+		font-size: var(--text-body-md);
+		line-height: 1.6;
+		color: var(--color-fg);
+		font-style: normal;
+		margin: 0;
+		margin-block-end: var(--size-xl);
+
+		p {
+			margin: 0;
+		}
+	}
+
+	footer,
+	.testimonial-author {
+		display: flex;
+		align-items: center;
+		gap: var(--size-md);
+		margin-block-start: auto;
+
+		.author-avatar,
+		figure {
+			width: 2.75rem;
+			height: 2.75rem;
+			border-radius: var(--radius-full);
+			background-color: var(--bg-recessed);
+			border: var(--border-width) solid var(--color-border);
+			overflow: hidden;
+			flex-shrink: 0;
+			margin: 0;
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				display: block;
+			}
+		}
+
+		.author-info {
+			cite,
+			.author-name {
+				display: block;
+				font-size: var(--text-sm);
+				font-weight: 700;
+				font-style: normal;
+				color: var(--color-fg);
+				margin: 0;
+			}
+
+			.author-title,
+			span {
+				display: block;
+				font-size: var(--text-xs);
+				color: var(--fg-muted);
+				margin: 0;
+			}
+		}
+	}
+}

package/theme/presentation/_tokens.scss

@@ -1,39 +1,39 @@
-// ==========================================================================
-// Presentation Design Tokens — ln-ashlar
-// ==========================================================================
-// Scales for marketing, landing pages, hero sections, and feature showcases.
-// Supplements core tokens with fluid typography and marketing layout variables.
-// ==========================================================================
-
-:root {
-	// -----------------------------------------------------------------------
-	// Presentation Containers & Section Rhythm
-	// -----------------------------------------------------------------------
-	--container-landing-max-w: 80rem;       // 1280px
-	--container-narrow-max-w:  56rem;       // 896px
-	--container-padding-x:     clamp(1rem, 3.5vw, 2.5rem);
-
-	--section-spacing-y:       clamp(4rem, 8vw, 7.5rem);
-	--section-spacing-sm:      clamp(2.5rem, 5vw, 4rem);
-
-	// -----------------------------------------------------------------------
-	// Presentation Fluid Typography (clamp-based)
-	// -----------------------------------------------------------------------
-	--text-hero:          clamp(2.5rem, 5.5vw + 0.5rem, 4.75rem);
-	--lh-hero:            1.08;
-
-	--text-section-title: clamp(2rem, 3.8vw + 0.25rem, 3.25rem);
-	--lh-section-title:   1.15;
-
-	--text-section-sub:   clamp(1.25rem, 2.2vw, 1.75rem);
-	--lh-section-sub:     1.25;
-
-	--text-lead:          clamp(1.0625rem, 1.2vw + 0.5rem, 1.3rem);
-	--lh-lead:            1.6;
-
-	// -----------------------------------------------------------------------
-	// Ambient & Lighting Tokens
-	// -----------------------------------------------------------------------
-	--spotlight-opacity: 0.15;
-	--hero-glow-spread:  40rem;
-}
+// ==========================================================================
+// Presentation Design Tokens — ln-ashlar
+// ==========================================================================
+// Scales for marketing, landing pages, hero sections, and feature showcases.
+// Supplements core tokens with fluid typography and marketing layout variables.
+// ==========================================================================
+
+:root {
+	// -----------------------------------------------------------------------
+	// Presentation Containers & Section Rhythm
+	// -----------------------------------------------------------------------
+	--container-landing-max-w: 80rem;       // 1280px
+	--container-narrow-max-w:  56rem;       // 896px
+	--container-padding-x:     clamp(1rem, 3.5vw, 2.5rem);
+
+	--section-spacing-y:       clamp(4rem, 8vw, 7.5rem);
+	--section-spacing-sm:      clamp(2.5rem, 5vw, 4rem);
+
+	// -----------------------------------------------------------------------
+	// Presentation Fluid Typography (clamp-based)
+	// -----------------------------------------------------------------------
+	--text-hero:          clamp(2.5rem, 5.5vw + 0.5rem, 4.75rem);
+	--lh-hero:            1.08;
+
+	--text-section-title: clamp(2rem, 3.8vw + 0.25rem, 3.25rem);
+	--lh-section-title:   1.15;
+
+	--text-section-sub:   clamp(1.25rem, 2.2vw, 1.75rem);
+	--lh-section-sub:     1.25;
+
+	--text-lead:          clamp(1.0625rem, 1.2vw + 0.5rem, 1.3rem);
+	--lh-lead:            1.6;
+
+	// -----------------------------------------------------------------------
+	// Ambient & Lighting Tokens
+	// -----------------------------------------------------------------------
+	--spotlight-opacity: 0.15;
+	--hero-glow-spread:  40rem;
+}