@livenetworks/ashlar 1.6.1 → 2.0.0

package/theme/presentation/_pricing.scss

@@ -0,0 +1,262 @@
+// ==========================================================================
+// Presentation Pricing Tables & Tiers — ln-ashlar
+// ==========================================================================
+// Responsive tiered pricing cards with feature checklists and popular badge.
+// ==========================================================================
+
+.pricing-switcher {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--size-sm);
+	margin-block-end: clamp(2rem, 4vw, 3.5rem);
+
+	.switcher-label {
+		font-size: var(--text-sm);
+		font-weight: 500;
+		color: var(--color-fg);
+	}
+
+	.discount-pill {
+		font-size: var(--text-xs);
+		font-weight: 600;
+		padding: 0.125rem 0.5rem;
+		border-radius: var(--radius-full);
+		background-color: color-mix(in srgb, hsl(var(--color-primary)) 15%, var(--bg-base));
+		color: hsl(var(--color-primary));
+	}
+}
+
+// ==========================================================================
+// Presentation Pricing Tables & Tiers — ln-ashlar
+// ==========================================================================
+// Responsive tiered pricing cards with feature checklists and popular badge.
+// Provided as mixins, semantic selectors (#pricing-list li), and classes.
+// ==========================================================================
+
+.pricing-switcher {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--size-sm);
+	margin-block-end: clamp(2rem, 4vw, 3.5rem);
+
+	.switcher-label {
+		font-size: var(--text-sm);
+		font-weight: 500;
+		color: var(--color-fg);
+	}
+
+	.discount-pill {
+		font-size: var(--text-xs);
+		font-weight: 600;
+		padding: 0.125rem 0.5rem;
+		border-radius: var(--radius-full);
+		background-color: color-mix(in srgb, hsl(var(--color-primary)) 15%, var(--bg-base));
+		color: hsl(var(--color-primary));
+	}
+}
+
+@mixin pricing-grid {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--size-lg);
+
+	@media (min-width: 960px) {
+		grid-template-columns: repeat(3, 1fr);
+		align-items: stretch;
+	}
+}
+
+@mixin pricing-card {
+	list-style: none;
+	margin: 0;
+	position: relative;
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-xl);
+	padding: clamp(1.75rem, 3vw, 2.5rem);
+	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);
+
+	&[data-popular],
+	&.pricing-popular {
+		border-color: hsl(var(--color-primary));
+		box-shadow: 0 12px 35px -10px hsl(var(--color-primary) / 0.22), var(--shadow-md);
+
+		@media (min-width: 960px) {
+			transform: scale(1.03);
+			z-index: 2;
+		}
+
+		&:hover {
+			@media (min-width: 960px) {
+				transform: scale(1.04) translateY(-2px);
+			}
+		}
+	}
+
+	&:hover:not([data-popular]):not(.pricing-popular) {
+		transform: translateY(-2px);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 35%, var(--color-border));
+		box-shadow: var(--shadow-md);
+	}
+
+	> [data-badge],
+	.pricing-popular-badge {
+		position: absolute;
+		top: -0.75rem;
+		inset-inline-start: 50%;
+		transform: translateX(-50%);
+		background-color: hsl(var(--color-primary));
+		color: hsl(var(--color-ink));
+		font-size: var(--text-xs);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		padding: 0.25rem 0.875rem;
+		border-radius: var(--radius-full);
+		box-shadow: 0 4px 12px hsl(var(--color-primary) / 0.4);
+		white-space: nowrap;
+	}
+
+	h3,
+	.pricing-title {
+		font-size: var(--text-heading-sm);
+		font-weight: 700;
+		color: var(--color-fg);
+		margin-block-start: 0;
+		margin-block-end: var(--size-2xs);
+	}
+
+	p:first-of-type,
+	.pricing-desc {
+		font-size: var(--text-sm);
+		color: var(--fg-muted);
+		margin-block-end: var(--size-md);
+	}
+
+	data,
+	.pricing-amount {
+		display: flex;
+		align-items: baseline;
+		gap: 0.25rem;
+		margin-block: var(--size-md);
+
+		.currency,
+		span:first-child {
+			font-size: var(--text-heading-sm);
+			font-weight: 600;
+			color: var(--color-fg);
+		}
+
+		.value,
+		strong,
+		b {
+			font-size: clamp(2.5rem, 4vw, 3.25rem);
+			font-weight: 800;
+			letter-spacing: -0.03em;
+			color: var(--color-fg);
+			line-height: 1;
+		}
+
+		.period,
+		small,
+		span:last-child {
+			font-size: var(--text-sm);
+			color: var(--fg-muted);
+		}
+	}
+
+	ul,
+	.pricing-features {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: var(--size-sm);
+		margin-block-start: var(--size-md);
+		margin-block-end: var(--size-xl);
+
+		li {
+			display: flex;
+			align-items: center;
+			gap: var(--size-xs-up);
+			font-size: var(--text-sm);
+			color: var(--color-fg);
+			margin: 0;
+
+			svg,
+			.ln-icon {
+				width: 1.125rem;
+				height: 1.125rem;
+				color: hsl(var(--color-primary));
+				flex-shrink: 0;
+			}
+
+			&[aria-disabled="true"],
+			&.disabled {
+				color: var(--fg-muted);
+				text-decoration: line-through;
+
+				svg,
+				.ln-icon {
+					color: var(--fg-muted);
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	footer,
+	.pricing-cta {
+		margin-block-start: auto;
+		width: 100%;
+
+		.btn {
+			width: 100%;
+			justify-content: center;
+			padding-block: var(--size-md);
+			font-size: var(--text-sm);
+			font-weight: 600;
+			border-radius: var(--radius-lg);
+			transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
+
+			&:hover {
+				transform: translateY(-2px);
+			}
+
+			&.btn-outline {
+				border-color: color-mix(in srgb, hsl(var(--color-primary)) 30%, var(--color-border));
+				background-color: var(--bg-base);
+
+				&:hover {
+					background-color: var(--bg-hover);
+					border-color: hsl(var(--color-primary));
+					box-shadow: 0 4px 14px hsl(var(--color-primary) / 0.2);
+				}
+			}
+		}
+	}
+}
+
+// ─── Declarative Selectors ───────────────────────────────────────────────────
+
+#pricing-list,
+#pricing > .landing-container > ul,
+.pricing-grid {
+	@include pricing-grid;
+}
+
+#pricing-list > li,
+#pricing > .landing-container > ul > li,
+.pricing-card {
+	@include pricing-card;
+}

package/theme/presentation/_stats.scss

@@ -0,0 +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;
+}

package/theme/presentation/_testimonials.scss

@@ -0,0 +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;
+			}
+		}
+	}
+}

package/theme/presentation/_tokens.scss

@@ -0,0 +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;
+}

package/theme/presentation/_typography.scss

@@ -0,0 +1,163 @@
+// ==========================================================================
+// Presentation Typography — ln-ashlar
+// ==========================================================================
+// Fluid display typography, gradient headlines, balanced text, and badges.
+// ==========================================================================
+
+.hero-title {
+	font-size: var(--text-hero);
+	line-height: var(--lh-hero);
+	font-weight: 800;
+	letter-spacing: -0.035em;
+	color: var(--color-fg);
+	text-wrap: balance;
+	margin-block-start: 0;
+	margin-block-end: var(--size-md);
+}
+
+.hero-lead {
+	font-size: var(--text-lead);
+	line-height: var(--lh-lead);
+	color: var(--fg-muted);
+	font-weight: 400;
+	text-wrap: pretty;
+	margin-block-start: 0;
+	margin-block-end: var(--size-xl);
+	max-width: var(--max-w-prose);
+}
+
+.section-title {
+	font-size: var(--text-section-title);
+	line-height: var(--lh-section-title);
+	font-weight: 750;
+	letter-spacing: -0.03em;
+	color: var(--color-fg);
+	text-wrap: balance;
+	margin-block-start: 0;
+	margin-block-end: var(--size-sm-up);
+}
+
+.section-sub {
+	font-size: var(--text-section-sub);
+	line-height: var(--lh-section-sub);
+	font-weight: 650;
+	letter-spacing: -0.02em;
+	color: var(--color-fg);
+	margin-block-start: 0;
+	margin-block-end: var(--size-sm);
+}
+
+.section-lead {
+	font-size: var(--text-lead);
+	line-height: var(--lh-lead);
+	color: var(--fg-muted);
+	text-wrap: pretty;
+	margin-block-start: 0;
+	margin-block-end: var(--size-lg);
+	max-width: var(--max-w-prose);
+}
+
+.section-eyebrow,
+.eyebrow,
+.kicker {
+	display: inline-block;
+	font-size: var(--text-xs);
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: hsl(var(--color-primary));
+	margin-block-end: var(--size-sm);
+}
+
+// ---------------------------------------------------------------------------
+// Pill Badges (Announcement / Status banners above headlines)
+// ---------------------------------------------------------------------------
+.badge-pill {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--size-xs);
+	padding: var(--size-2xs) var(--size-sm-up);
+	border-radius: var(--radius-full);
+	font-size: var(--text-xs);
+	font-weight: 500;
+	line-height: 1.4;
+	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);
+	text-decoration: none;
+	transition: var(--transition-fast);
+
+	&:hover {
+		background-color: color-mix(in srgb, hsl(var(--color-primary)) 18%, var(--bg-base));
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 40%, transparent);
+		color: hsl(var(--color-primary));
+	}
+
+	.badge-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: var(--radius-full);
+		background-color: hsl(var(--color-primary));
+		box-shadow: 0 0 8px hsl(var(--color-primary));
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Gradient Text
+// ---------------------------------------------------------------------------
+.text-gradient {
+	background: linear-gradient(135deg, hsl(var(--color-primary)), hsl(var(--color-secondary, var(--color-primary))));
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	color: transparent;
+	display: inline-block;
+}
+
+// High-impact multi-stop gradient for Hero headlines
+.text-gradient-vibrant {
+	background: linear-gradient(
+		135deg,
+		hsl(var(--color-primary)),
+		hsl(from hsl(var(--color-primary)) calc(h + 35) 90% 60%),
+		hsl(from hsl(var(--color-primary)) calc(h + 70) 95% 70%)
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-clip: text;
+	color: transparent;
+	display: inline-block;
+}
+
+.text-balance {
+	text-wrap: balance;
+}
+
+.text-pretty {
+	text-wrap: pretty;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-muted {
+	color: var(--fg-muted);
+}
+
+// ---------------------------------------------------------------------------
+// Refined presentation inline links
+// ---------------------------------------------------------------------------
+.landing-section p a:not(.btn),
+.landing-section li a:not(.btn) {
+	color: hsl(var(--color-primary));
+	text-decoration: underline;
+	text-decoration-color: hsl(var(--color-primary) / 0.4);
+	text-underline-offset: 3px;
+	transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
+
+	&:hover {
+		color: hsl(from hsl(var(--color-primary)) h s calc(l + 6));
+		text-decoration-color: hsl(var(--color-primary));
+	}
+}