@livenetworks/ashlar 2.0.6 → 2.0.8

package/theme/presentation/_footer.scss

@@ -1,129 +1,129 @@
-// ==========================================================================
-// Presentation Footer — ln-ashlar
-// ==========================================================================
-// Multi-column responsive marketing footer, brand column, and copyright row.
-// ==========================================================================
-
-.site-footer {
-	background-color: var(--bg-base);
-	border-top: var(--border-width) solid var(--color-border);
-	padding-block-start: clamp(3rem, 6vw, 5rem);
-	padding-block-end: clamp(2rem, 4vw, 3rem);
-	margin-block-start: clamp(3rem, 6vw, 6rem);
-
-	.footer-grid,
-	> .landing-container > div:first-child {
-		display: grid;
-		grid-template-columns: 1fr;
-		gap: clamp(2rem, 4vw, 3.5rem);
-
-		@media (min-width: 640px) {
-			grid-template-columns: repeat(2, 1fr);
-		}
-
-		@media (min-width: 960px) {
-			grid-template-columns: 2fr repeat(3, 1fr);
-		}
-	}
-
-	.footer-brand,
-	.footer-grid > div:first-child {
-		.brand-name,
-		> a:first-child {
-			display: flex;
-			align-items: center;
-			gap: var(--size-xs-up);
-			font-weight: 750;
-			font-size: var(--text-base);
-			color: var(--color-fg);
-			text-decoration: none;
-			margin-block-end: var(--size-sm);
-
-			.brand-logo,
-			span:first-child {
-				width: 1.75rem;
-				height: 1.75rem;
-				font-size: var(--text-xs);
-			}
-		}
-
-		.brand-desc,
-		p {
-			font-size: var(--text-sm);
-			color: var(--fg-muted);
-			line-height: 1.6;
-			max-width: 24rem;
-			margin: 0;
-			margin-block-end: var(--size-md);
-		}
-	}
-
-	.footer-col,
-	nav {
-		.footer-title,
-		h4 {
-			font-size: var(--text-xs);
-			font-weight: 700;
-			text-transform: uppercase;
-			letter-spacing: 0.08em;
-			color: var(--color-fg);
-			margin-block-start: 0;
-			margin-block-end: var(--size-md);
-		}
-
-		.footer-links,
-		ul {
-			list-style: none;
-			margin: 0;
-			padding: 0;
-			display: flex;
-			flex-direction: column;
-			gap: var(--size-xs-up);
-
-			li {
-				margin: 0;
-				padding: 0;
-			}
-
-			a {
-				font-size: var(--text-sm);
-				color: var(--fg-muted);
-				text-decoration: none;
-				transition: color var(--transition-fast);
-
-				&:hover {
-					color: var(--color-fg);
-				}
-			}
-		}
-	}
-
-	.footer-bottom,
-	> .landing-container > div:last-child {
-		margin-block-start: clamp(2.5rem, 5vw, 4rem);
-		padding-block-start: var(--size-lg);
-		border-top: var(--border-width) solid color-mix(in srgb, var(--color-border) 60%, transparent);
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-wrap: wrap;
-		gap: var(--size-md);
-		font-size: var(--text-xs);
-		color: var(--fg-muted);
-
-		.footer-legal,
-		nav {
-			display: flex;
-			gap: var(--size-md);
-
-			a {
-				color: var(--fg-muted);
-				text-decoration: none;
-
-				&:hover {
-					color: var(--color-fg);
-				}
-			}
-		}
-	}
-}
+// ==========================================================================
+// Presentation Footer — ln-ashlar
+// ==========================================================================
+// Multi-column responsive marketing footer, brand column, and copyright row.
+// ==========================================================================
+
+.site-footer {
+	background-color: var(--bg-base);
+	border-top: var(--border-width) solid var(--color-border);
+	padding-block-start: clamp(3rem, 6vw, 5rem);
+	padding-block-end: clamp(2rem, 4vw, 3rem);
+	margin-block-start: clamp(3rem, 6vw, 6rem);
+
+	.footer-grid,
+	> .landing-container > div:first-child {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: clamp(2rem, 4vw, 3.5rem);
+
+		@media (min-width: 640px) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@media (min-width: 960px) {
+			grid-template-columns: 2fr repeat(3, 1fr);
+		}
+	}
+
+	.footer-brand,
+	.footer-grid > div:first-child {
+		.brand-name,
+		> a:first-child {
+			display: flex;
+			align-items: center;
+			gap: var(--size-xs-up);
+			font-weight: 750;
+			font-size: var(--text-base);
+			color: var(--color-fg);
+			text-decoration: none;
+			margin-block-end: var(--size-sm);
+
+			.brand-logo,
+			span:first-child {
+				width: 1.75rem;
+				height: 1.75rem;
+				font-size: var(--text-xs);
+			}
+		}
+
+		.brand-desc,
+		p {
+			font-size: var(--text-sm);
+			color: var(--fg-muted);
+			line-height: 1.6;
+			max-width: 24rem;
+			margin: 0;
+			margin-block-end: var(--size-md);
+		}
+	}
+
+	.footer-col,
+	nav {
+		.footer-title,
+		h4 {
+			font-size: var(--text-xs);
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.08em;
+			color: var(--color-fg);
+			margin-block-start: 0;
+			margin-block-end: var(--size-md);
+		}
+
+		.footer-links,
+		ul {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			flex-direction: column;
+			gap: var(--size-xs-up);
+
+			li {
+				margin: 0;
+				padding: 0;
+			}
+
+			a {
+				font-size: var(--text-sm);
+				color: var(--fg-muted);
+				text-decoration: none;
+				transition: color var(--transition-fast);
+
+				&:hover {
+					color: var(--color-fg);
+				}
+			}
+		}
+	}
+
+	.footer-bottom,
+	> .landing-container > div:last-child {
+		margin-block-start: clamp(2.5rem, 5vw, 4rem);
+		padding-block-start: var(--size-lg);
+		border-top: var(--border-width) solid color-mix(in srgb, var(--color-border) 60%, transparent);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: var(--size-md);
+		font-size: var(--text-xs);
+		color: var(--fg-muted);
+
+		.footer-legal,
+		nav {
+			display: flex;
+			gap: var(--size-md);
+
+			a {
+				color: var(--fg-muted);
+				text-decoration: none;
+
+				&:hover {
+					color: var(--color-fg);
+				}
+			}
+		}
+	}
+}

package/theme/presentation/_hero.scss

@@ -1,158 +1,158 @@
-// ==========================================================================
-// Presentation Hero Section — ln-ashlar
-// ==========================================================================
-// Centered and split hero sections, prominent CTAs, and app preview frames.
-// ==========================================================================
-
-.hero-section {
-	position: relative;
-	padding-block-start: clamp(3.5rem, 8vw, 6.5rem);
-	padding-block-end: clamp(4rem, 9vw, 8rem);
-	overflow: hidden;
-
-	&.hero-centered {
-		text-align: center;
-
-		.hero-badge-wrap {
-			display: flex;
-			justify-content: center;
-			margin-block-end: var(--size-md);
-		}
-
-		.hero-lead {
-			margin-inline: auto;
-		}
-
-		.hero-actions {
-			justify-content: center;
-		}
-	}
-}
-
-.hero-actions {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--size-md);
-	margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
-}
-
-.hero-preview {
-	position: relative;
-	width: 100%;
-	max-width: 72rem;
-	margin-inline: auto;
-}
-
-// ---------------------------------------------------------------------------
-// Hero Specific Button Polish
-// ---------------------------------------------------------------------------
-.btn-hero {
-	--btn-padding-y: clamp(0.75rem, 1.6vw, 0.9375rem);
-	--btn-padding-x: clamp(1.25rem, 2.8vw, 2rem);
-	font-size: var(--text-base);
-	font-weight: 600;
-	border-radius: var(--radius-full, 9999px);
-	letter-spacing: -0.01em;
-
-	svg,
-	.ln-icon {
-		width: 1.25rem;
-		height: 1.25rem;
-		transition: transform var(--transition-base);
-	}
-
-	&:hover {
-		svg,
-		.ln-icon {
-			transform: translateX(3px);
-		}
-	}
-
-	&.btn-outline {
-		background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
-		-webkit-backdrop-filter: blur(12px);
-		backdrop-filter: blur(12px);
-		border-color: color-mix(in srgb, hsl(var(--color-primary)) 25%, var(--color-border));
-		color: var(--color-fg);
-		box-shadow: var(--shadow-sm);
-
-		&:hover {
-			background: var(--bg-hover);
-			border-color: hsl(var(--color-primary));
-			color: var(--color-fg);
-			transform: translateY(-2px);
-			box-shadow: 0 6px 20px -4px hsl(var(--color-primary) / 0.25);
-		}
-	}
-}
-
-.btn-glow {
-	position: relative;
-	background: hsl(var(--color-primary));
-	color: hsl(var(--color-white));
-	border-color: hsl(from hsl(var(--color-primary)) h s calc(l - 5));
-	box-shadow: 0 4px 20px hsl(var(--color-primary) / 0.4);
-	transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
-
-	&:hover {
-		background: hsl(from hsl(var(--color-primary)) h s calc(l - 5));
-		color: hsl(var(--color-white));
-		border-color: hsl(from hsl(var(--color-primary)) h s calc(l - 8));
-		box-shadow: 0 8px 30px hsl(var(--color-primary) / 0.6);
-		transform: translateY(-2px);
-	}
-
-	&:active {
-		transform: translateY(0);
-		box-shadow: 0 2px 12px hsl(var(--color-primary) / 0.35);
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Social Proof / Logo Strip (under Hero)
-// ---------------------------------------------------------------------------
-.hero-social-proof {
-	margin-block-start: clamp(3rem, 6vw, 5rem);
-	text-align: center;
-
-	.proof-label {
-		font-size: var(--text-xs);
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--fg-muted);
-		margin-block-end: var(--size-md);
-	}
-
-	ul,
-	.logo-grid {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-wrap: wrap;
-		gap: clamp(1.5rem, 4vw, 3.5rem);
-		opacity: 0.75;
-		filter: grayscale(1);
-		transition: opacity var(--transition-base), filter var(--transition-base);
-
-		&:hover {
-			opacity: 1;
-			filter: grayscale(0.2);
-		}
-
-		li,
-		.logo-item {
-			list-style: none;
-			margin: 0;
-			display: flex;
-			align-items: center;
-			gap: var(--size-xs);
-			font-weight: 600;
-			font-size: var(--text-sm);
-			color: var(--fg-muted);
-		}
-	}
-}
+// ==========================================================================
+// Presentation Hero Section — ln-ashlar
+// ==========================================================================
+// Centered and split hero sections, prominent CTAs, and app preview frames.
+// ==========================================================================
+
+.hero-section {
+	position: relative;
+	padding-block-start: clamp(3.5rem, 8vw, 6.5rem);
+	padding-block-end: clamp(4rem, 9vw, 8rem);
+	overflow: hidden;
+
+	&.hero-centered {
+		text-align: center;
+
+		.hero-badge-wrap {
+			display: flex;
+			justify-content: center;
+			margin-block-end: var(--size-md);
+		}
+
+		.hero-lead {
+			margin-inline: auto;
+		}
+
+		.hero-actions {
+			justify-content: center;
+		}
+	}
+}
+
+.hero-actions {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--size-md);
+	margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
+}
+
+.hero-preview {
+	position: relative;
+	width: 100%;
+	max-width: 72rem;
+	margin-inline: auto;
+}
+
+// ---------------------------------------------------------------------------
+// Hero Specific Button Polish
+// ---------------------------------------------------------------------------
+.btn-hero {
+	--btn-padding-y: clamp(0.75rem, 1.6vw, 0.9375rem);
+	--btn-padding-x: clamp(1.25rem, 2.8vw, 2rem);
+	font-size: var(--text-base);
+	font-weight: 600;
+	border-radius: var(--radius-full, 9999px);
+	letter-spacing: -0.01em;
+
+	svg,
+	.ln-icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		transition: transform var(--transition-base);
+	}
+
+	&:hover {
+		svg,
+		.ln-icon {
+			transform: translateX(3px);
+		}
+	}
+
+	&.btn-outline {
+		background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
+		-webkit-backdrop-filter: blur(12px);
+		backdrop-filter: blur(12px);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 25%, var(--color-border));
+		color: var(--color-fg);
+		box-shadow: var(--shadow-sm);
+
+		&:hover {
+			background: var(--bg-hover);
+			border-color: hsl(var(--color-primary));
+			color: var(--color-fg);
+			transform: translateY(-2px);
+			box-shadow: 0 6px 20px -4px hsl(var(--color-primary) / 0.25);
+		}
+	}
+}
+
+.btn-glow {
+	position: relative;
+	background: hsl(var(--color-primary));
+	color: hsl(var(--color-white));
+	border-color: hsl(from hsl(var(--color-primary)) h s calc(l - 5));
+	box-shadow: 0 4px 20px hsl(var(--color-primary) / 0.4);
+	transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
+
+	&:hover {
+		background: hsl(from hsl(var(--color-primary)) h s calc(l - 5));
+		color: hsl(var(--color-white));
+		border-color: hsl(from hsl(var(--color-primary)) h s calc(l - 8));
+		box-shadow: 0 8px 30px hsl(var(--color-primary) / 0.6);
+		transform: translateY(-2px);
+	}
+
+	&:active {
+		transform: translateY(0);
+		box-shadow: 0 2px 12px hsl(var(--color-primary) / 0.35);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Social Proof / Logo Strip (under Hero)
+// ---------------------------------------------------------------------------
+.hero-social-proof {
+	margin-block-start: clamp(3rem, 6vw, 5rem);
+	text-align: center;
+
+	.proof-label {
+		font-size: var(--text-xs);
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--fg-muted);
+		margin-block-end: var(--size-md);
+	}
+
+	ul,
+	.logo-grid {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		gap: clamp(1.5rem, 4vw, 3.5rem);
+		opacity: 0.75;
+		filter: grayscale(1);
+		transition: opacity var(--transition-base), filter var(--transition-base);
+
+		&:hover {
+			opacity: 1;
+			filter: grayscale(0.2);
+		}
+
+		li,
+		.logo-item {
+			list-style: none;
+			margin: 0;
+			display: flex;
+			align-items: center;
+			gap: var(--size-xs);
+			font-weight: 600;
+			font-size: var(--text-sm);
+			color: var(--fg-muted);
+		}
+	}
+}