init

2025-12-18 01:30:52 +01:00
commit 6438660b03
78 changed files with 14230 additions and 0 deletions
--- a/client/src/styles/pages/_collection.scss
+++ b/client/src/styles/pages/_collection.scss
@@ -0,0 +1,128 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.sticky-search {
+	position: sticky;
+	top: $spacing-sm;
+	z-index: $z-sticky;
+	box-shadow: $shadow-md;
+	border-radius: $radius-sm;
+}
+
+.fade-slide-up {
+	@include animate-fade-up;
+}
+
+.kanji-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax($size-card-min, 1fr));
+	gap: $spacing-sm;
+}
+
+.kanji-card {
+	@include card-base;
+	@include hover-lift;
+
+	aspect-ratio: 1;
+
+	@include flex-column;
+
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	overflow: hidden;
+
+	.k-char {
+		font-size: $font-2xl;
+		font-weight: $weight-medium;
+		line-height: $leading-tight;
+		transition: all 0.3s ease;
+	}
+
+	&.zen-master {
+		border: 1px solid rgb(255 215 0 / 50%);
+		background: linear-gradient(135deg, rgb(30 30 36 / 100%) 0%, rgb(45 45 55 / 100%) 100%);
+		box-shadow: 0 0 15px rgb(255 215 0 / 15%);
+		animation: zen-pulse 4s infinite ease-in-out;
+
+		.k-char {
+			text-shadow: 0 0 15px rgb(255 215 0 / 60%);
+			transform: scale(1.1);
+		}
+	}
+
+	.k-dots {
+		display: flex;
+		gap: $spacing-2xs;
+		margin-top: $spacing-xs;
+
+		.dot {
+			width: $spacing-xs;
+			height: $spacing-xs;
+			border-radius: $radius-circle;
+			background: $color-dot-base;
+		}
+	}
+
+	.k-bars {
+		display: flex;
+		gap: 3px;
+		width: 60%;
+		height: 4px;
+		margin-top: $spacing-sm;
+
+		.bar {
+			flex: 1;
+			background: rgb(255 255 255 / 10%);
+			border-radius: 2px;
+			transition: background-color 0.3s ease;
+
+			&.filled {
+				box-shadow: 0 0 4px rgb(0 0 0 / 30%);
+			}
+		}
+	}
+}
+
+@keyframes zen-pulse {
+	0% {
+		box-shadow: 0 0 10px rgb(255 215 0 / 10%);
+		border-color: rgb(255 215 0 / 30%);
+	}
+
+	50% {
+		box-shadow: 0 0 20px rgb(255 215 0 / 30%);
+		border-color: rgb(255 215 0 / 80%);
+	}
+
+	100% {
+		box-shadow: 0 0 10px rgb(255 215 0 / 10%);
+		border-color: rgb(255 215 0 / 30%);
+	}
+}
+
+.readings-container {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: $spacing-sm;
+	text-align: left;
+
+	.reading-group {
+		background: $bg-glass-dark;
+		padding: $spacing-sm $spacing-md;
+		border-radius: $radius-md;
+
+		.reading-label {
+			font-size: $font-xs;
+			color: $color-text-grey;
+			text-transform: uppercase;
+			letter-spacing: $tracking-wider;
+			margin-bottom: $spacing-2xs;
+		}
+
+		.reading-value {
+			color: $color-text-white;
+			font-size: $font-sm;
+		}
+	}
+}