@livenetworks/ashlar 2.0.7 → 2.0.8

package/theme/presentation/_pricing.scss

@@ -1,262 +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;
-}
+// ==========================================================================
+// 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;
+}