@livenetworks/ashlar 1.6.0 → 2.0.0

package/theme/presentation/_features.scss

@@ -0,0 +1,108 @@
+// ==========================================================================
+// Presentation Feature Grid & Cards — ln-ashlar
+// ==========================================================================
+// Multi-column responsive feature cards with icons and hover highlights.
+// Provided as mixins, semantic selectors (#features-list li), and classes.
+// ==========================================================================
+
+@mixin feature-grid {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: var(--size-lg);
+
+	@media (min-width: 640px) {
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+	@media (min-width: 1024px) {
+		grid-template-columns: repeat(3, 1fr);
+	}
+
+	&.feature-grid-4 {
+		@media (min-width: 1024px) {
+			grid-template-columns: repeat(4, 1fr);
+		}
+	}
+}
+
+@mixin feature-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, 2rem);
+	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow:
+			0 10px 25px -8px hsl(var(--color-primary) / 0.14),
+			var(--shadow-md);
+		border-color: color-mix(in srgb, hsl(var(--color-primary)) 35%, var(--color-border));
+
+		> div:first-child,
+		> figure:first-child,
+		.feature-icon-wrap {
+			transform: scale(1.05);
+			background-color: color-mix(in srgb, hsl(var(--color-primary)) 18%, var(--bg-base));
+		}
+	}
+
+	> div:first-child,
+	> figure:first-child,
+	.feature-icon-wrap {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 3.25rem;
+		height: 3.25rem;
+		border-radius: var(--radius-lg);
+		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);
+		margin-block-end: var(--size-md);
+		transition: transform var(--transition-fast), background-color var(--transition-fast);
+
+		svg,
+		.ln-icon {
+			width: 1.5rem;
+			height: 1.5rem;
+		}
+	}
+
+	h3,
+	.feature-title {
+		font-size: var(--text-heading-sm);
+		font-weight: 700;
+		letter-spacing: -0.015em;
+		color: var(--color-fg);
+		margin-block-start: 0;
+		margin-block-end: var(--size-xs-up);
+	}
+
+	p,
+	.feature-desc {
+		font-size: var(--text-body-md);
+		color: var(--fg-muted);
+		line-height: 1.55;
+		margin: 0;
+	}
+}
+
+// ─── Declarative Selectors ───────────────────────────────────────────────────
+
+#features-list,
+#features ul,
+.feature-grid {
+	@include feature-grid;
+}
+
+#features-list > li,
+#features ul > li,
+.feature-card {
+	@include feature-card;
+}

package/theme/presentation/_footer.scss

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

package/theme/presentation/_hero.scss

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

package/theme/presentation/_layout.scss

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

package/theme/presentation/_navbar.scss

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