@livenetworks/ashlar 2.0.7 → 2.0.9

package/theme/presentation/_layout.scss

@@ -1,170 +1,170 @@
-// ==========================================================================
-// Presentation Layout & Containers — ln-ashlar
-// ==========================================================================
-// Full-width responsive containers, section rhythm, and split layout grids.
-// ==========================================================================
-
-html,
-body {
-	min-height: 100%;
-	background-color: var(--bg-base);
-}
-
-.landing-container {
-	width: 100%;
-	max-width: var(--container-landing-max-w);
-	margin-inline: auto;
-	padding-inline: var(--container-padding-x);
-}
-
-.landing-container-narrow {
-	width: 100%;
-	max-width: var(--container-narrow-max-w);
-	margin-inline: auto;
-	padding-inline: var(--container-padding-x);
-}
-
-.landing-section {
-	padding-block: var(--section-spacing-y);
-	position: relative;
-}
-
-.landing-section-sm {
-	padding-block: var(--section-spacing-sm);
-	position: relative;
-}
-
-// ---------------------------------------------------------------------------
-// Section Headers (Title + Eyebrow + Lead)
-// ---------------------------------------------------------------------------
-.section-header {
-	margin-block-end: clamp(2.5rem, 4.5vw, 4rem);
-
-	&.text-center {
-		text-align: center;
-
-		.section-lead {
-			margin-inline: auto;
-		}
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Split Presentation Layout (Side-by-side text & graphic)
-// ---------------------------------------------------------------------------
-.split-layout {
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: clamp(2rem, 5vw, 4.5rem);
-	align-items: center;
-
-	@media (min-width: 960px) {
-		grid-template-columns: 1fr 1fr;
-	}
-
-	&.split-reverse {
-		@media (min-width: 960px) {
-			> :first-child {
-				order: 2;
-			}
-			> :last-child {
-				order: 1;
-			}
-		}
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Responsive Flex Rows / Actions
-// ---------------------------------------------------------------------------
-.actions-row {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--size-md);
-
-	&.justify-center {
-		justify-content: center;
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Semantic Presentation Checklist
-// ---------------------------------------------------------------------------
-.checklist {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	margin-block-end: var(--size-xl);
-	display: flex;
-	flex-direction: column;
-	gap: var(--size-sm);
-
-	li {
-		display: flex;
-		align-items: center;
-		gap: var(--size-xs-up);
-		font-size: var(--text-body-md);
-		color: var(--color-fg);
-		margin: 0;
-
-		svg,
-		.ln-icon {
-			color: hsl(var(--color-primary));
-			flex-shrink: 0;
-			width: 1.125rem;
-			height: 1.125rem;
-		}
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Reusable Presentation Card Grids
-// ---------------------------------------------------------------------------
-.cards-grid,
-.grid-3 {
-	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);
-	}
-}
-
-.grid-2 {
-	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);
-	}
-}
-
-.grid-4 {
-	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);
-	}
-}
+// ==========================================================================
+// Presentation Layout & Containers — ln-ashlar
+// ==========================================================================
+// Full-width responsive containers, section rhythm, and split layout grids.
+// ==========================================================================
+
+html,
+body {
+	min-height: 100%;
+	background-color: var(--bg-base);
+}
+
+.landing-container {
+	width: 100%;
+	max-width: var(--container-landing-max-w);
+	margin-inline: auto;
+	padding-inline: var(--container-padding-x);
+}
+
+.landing-container-narrow {
+	width: 100%;
+	max-width: var(--container-narrow-max-w);
+	margin-inline: auto;
+	padding-inline: var(--container-padding-x);
+}
+
+.landing-section {
+	padding-block: var(--section-spacing-y);
+	position: relative;
+}
+
+.landing-section-sm {
+	padding-block: var(--section-spacing-sm);
+	position: relative;
+}
+
+// ---------------------------------------------------------------------------
+// Section Headers (Title + Eyebrow + Lead)
+// ---------------------------------------------------------------------------
+.section-header {
+	margin-block-end: clamp(2.5rem, 4.5vw, 4rem);
+
+	&.text-center {
+		text-align: center;
+
+		.section-lead {
+			margin-inline: auto;
+		}
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Split Presentation Layout (Side-by-side text & graphic)
+// ---------------------------------------------------------------------------
+.split-layout {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: clamp(2rem, 5vw, 4.5rem);
+	align-items: center;
+
+	@media (min-width: 960px) {
+		grid-template-columns: 1fr 1fr;
+	}
+
+	&.split-reverse {
+		@media (min-width: 960px) {
+			> :first-child {
+				order: 2;
+			}
+			> :last-child {
+				order: 1;
+			}
+		}
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Responsive Flex Rows / Actions
+// ---------------------------------------------------------------------------
+.actions-row {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--size-md);
+
+	&.justify-center {
+		justify-content: center;
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Semantic Presentation Checklist
+// ---------------------------------------------------------------------------
+.checklist {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	margin-block-end: var(--size-xl);
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-sm);
+
+	li {
+		display: flex;
+		align-items: center;
+		gap: var(--size-xs-up);
+		font-size: var(--text-body-md);
+		color: var(--color-fg);
+		margin: 0;
+
+		svg,
+		.ln-icon {
+			color: hsl(var(--color-primary));
+			flex-shrink: 0;
+			width: 1.125rem;
+			height: 1.125rem;
+		}
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Reusable Presentation Card Grids
+// ---------------------------------------------------------------------------
+.cards-grid,
+.grid-3 {
+	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);
+	}
+}
+
+.grid-2 {
+	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);
+	}
+}
+
+.grid-4 {
+	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);
+	}
+}

package/theme/presentation/_navbar.scss

@@ -1,140 +1,140 @@
-// ==========================================================================
-// Presentation Header & Navigation — ln-ashlar
-// ==========================================================================
-// Sticky frosted glass header, brand mark, navigation links, and action bar.
-// ==========================================================================
-
-.site-header {
-	position: sticky;
-	top: 0;
-	z-index: 100;
-	width: 100%;
-	-webkit-backdrop-filter: blur(16px);
-	backdrop-filter: blur(16px);
-	background-color: color-mix(in srgb, var(--bg-base) 80%, transparent);
-	border-bottom: var(--border-width) solid color-mix(in srgb, var(--color-border) 60%, transparent);
-	transition: background-color var(--transition-base), border-color var(--transition-base);
-
-	.site-nav {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 4.25rem;
-	}
-
-	.nav-brand {
-		display: flex;
-		align-items: center;
-		gap: var(--size-sm);
-		font-weight: 750;
-		font-size: var(--text-lg);
-		letter-spacing: -0.02em;
-		color: var(--color-fg);
-		text-decoration: none;
-
-		.brand-logo {
-			display: inline-flex;
-			align-items: center;
-			justify-content: center;
-			width: 2.25rem;
-			height: 2.25rem;
-			border-radius: var(--radius-md);
-			background: linear-gradient(135deg, hsl(var(--color-primary)), hsl(var(--color-secondary, var(--color-primary))));
-			color: #fff;
-			box-shadow: 0 4px 12px hsl(var(--color-primary) / 0.3);
-		}
-
-		small {
-			font-weight: 400;
-			font-size: var(--text-xs);
-			color: var(--fg-muted);
-			opacity: 0.8;
-		}
-	}
-
-	.nav-menu {
-		display: flex;
-		align-items: center;
-		gap: var(--size-xs);
-		list-style: none;
-		margin: 0;
-		padding: 0;
-
-		@media (max-width: 820px) {
-			display: none;
-		}
-
-		li {
-			margin: 0;
-			padding: 0;
-		}
-
-		.nav-link {
-			display: inline-flex;
-			align-items: center;
-			padding: var(--size-xs-up) var(--size-md);
-			font-size: var(--text-sm);
-			font-weight: 500;
-			color: var(--fg-muted);
-			text-decoration: none;
-			border-radius: var(--radius-md);
-			transition: color var(--transition-fast), background-color var(--transition-fast);
-
-			&:hover {
-				color: var(--color-fg);
-				background-color: var(--bg-hover);
-			}
-
-			&.active {
-				color: hsl(var(--color-primary));
-				background-color: color-mix(in srgb, hsl(var(--color-primary)) 10%, transparent);
-			}
-		}
-	}
-
-	.nav-actions {
-		display: flex;
-		align-items: center;
-		gap: var(--size-sm);
-	}
-}
-
-// ---------------------------------------------------------------------------
-// Theme & Skin Picker Popover Panel
-// ---------------------------------------------------------------------------
-.landing-theme-popover {
-	padding: var(--size-md);
-	width: 16rem;
-	display: flex;
-	flex-direction: column;
-	gap: var(--size-xs);
-	background-color: var(--bg-elevated);
-	border: var(--border-width) solid var(--color-border);
-	border-radius: var(--radius-xl);
-	box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35), var(--shadow-xl);
-	z-index: 1000;
-
-	&:not(:popover-open):not(.open) {
-		display: none !important;
-	}
-
-	.picker-section-title {
-		font-size: var(--text-xs);
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: var(--fg-muted);
-		margin-block-start: var(--size-xs);
-		margin-block-end: var(--size-2xs);
-
-		&:first-child {
-			margin-block-start: 0;
-		}
-	}
-
-	.picker-grid {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: var(--size-2xs);
-	}
-}
+// ==========================================================================
+// Presentation Header & Navigation — ln-ashlar
+// ==========================================================================
+// Sticky frosted glass header, brand mark, navigation links, and action bar.
+// ==========================================================================
+
+.site-header {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	width: 100%;
+	-webkit-backdrop-filter: blur(16px);
+	backdrop-filter: blur(16px);
+	background-color: color-mix(in srgb, var(--bg-base) 80%, transparent);
+	border-bottom: var(--border-width) solid color-mix(in srgb, var(--color-border) 60%, transparent);
+	transition: background-color var(--transition-base), border-color var(--transition-base);
+
+	.site-nav {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 4.25rem;
+	}
+
+	.nav-brand {
+		display: flex;
+		align-items: center;
+		gap: var(--size-sm);
+		font-weight: 750;
+		font-size: var(--text-lg);
+		letter-spacing: -0.02em;
+		color: var(--color-fg);
+		text-decoration: none;
+
+		.brand-logo {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			width: 2.25rem;
+			height: 2.25rem;
+			border-radius: var(--radius-md);
+			background: linear-gradient(135deg, hsl(var(--color-primary)), hsl(var(--color-secondary, var(--color-primary))));
+			color: #fff;
+			box-shadow: 0 4px 12px hsl(var(--color-primary) / 0.3);
+		}
+
+		small {
+			font-weight: 400;
+			font-size: var(--text-xs);
+			color: var(--fg-muted);
+			opacity: 0.8;
+		}
+	}
+
+	.nav-menu {
+		display: flex;
+		align-items: center;
+		gap: var(--size-xs);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		@media (max-width: 820px) {
+			display: none;
+		}
+
+		li {
+			margin: 0;
+			padding: 0;
+		}
+
+		.nav-link {
+			display: inline-flex;
+			align-items: center;
+			padding: var(--size-xs-up) var(--size-md);
+			font-size: var(--text-sm);
+			font-weight: 500;
+			color: var(--fg-muted);
+			text-decoration: none;
+			border-radius: var(--radius-md);
+			transition: color var(--transition-fast), background-color var(--transition-fast);
+
+			&:hover {
+				color: var(--color-fg);
+				background-color: var(--bg-hover);
+			}
+
+			&.active {
+				color: hsl(var(--color-primary));
+				background-color: color-mix(in srgb, hsl(var(--color-primary)) 10%, transparent);
+			}
+		}
+	}
+
+	.nav-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--size-sm);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Theme & Skin Picker Popover Panel
+// ---------------------------------------------------------------------------
+.landing-theme-popover {
+	padding: var(--size-md);
+	width: 16rem;
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-xs);
+	background-color: var(--bg-elevated);
+	border: var(--border-width) solid var(--color-border);
+	border-radius: var(--radius-xl);
+	box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35), var(--shadow-xl);
+	z-index: 1000;
+
+	&:not(:popover-open):not(.open) {
+		display: none !important;
+	}
+
+	.picker-section-title {
+		font-size: var(--text-xs);
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--fg-muted);
+		margin-block-start: var(--size-xs);
+		margin-block-end: var(--size-2xs);
+
+		&:first-child {
+			margin-block-start: 0;
+		}
+	}
+
+	.picker-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: var(--size-2xs);
+	}
+}