summaryrefslogtreecommitdiff
path: root/makima/frontend/src/index.css
diff options
context:
space:
mode:
Diffstat (limited to 'makima/frontend/src/index.css')
-rw-r--r--makima/frontend/src/index.css390
1 files changed, 390 insertions, 0 deletions
diff --git a/makima/frontend/src/index.css b/makima/frontend/src/index.css
new file mode 100644
index 0000000..178fb9b
--- /dev/null
+++ b/makima/frontend/src/index.css
@@ -0,0 +1,390 @@
+@import "tailwindcss";
+
+@theme {
+ --color-bg-primary: #02040a;
+ --color-bg-panel: rgba(9, 13, 20, 0.92);
+ --color-bg-masthead: #08162e;
+ --color-bg-nav: #0c1729;
+ --color-bg-input: #0f1c2f;
+ --color-bg-button: #0d1b2d;
+ --color-bg-terminal: #0f3c78;
+
+ --color-blue-primary: #0f3c78;
+ --color-blue-accent: #3f6fb3;
+ --color-blue-glow: #75aafc;
+
+ --color-text-primary: #dbe7ff;
+ --color-text-secondary: #9bc3ff;
+ --color-text-muted: #e4edff;
+
+ --color-border-primary: #2f476d;
+ --color-border-accent: #3f6fb3;
+
+ --font-body: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", "MS Mincho", "Noto Serif JP", serif;
+ --font-mono: "MS Gothic", "Osaka-mono", Consolas, "Courier New", monospace;
+}
+
+html {
+ background-color: var(--color-bg-primary);
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ color: var(--color-text-primary);
+ min-height: 100vh;
+ background-color: var(--color-bg-primary);
+ background-image: linear-gradient(
+ rgba(8, 22, 46, 0.65),
+ rgba(8, 22, 46, 0.65)
+ ),
+ url("/02cdkj.jpeg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-attachment: fixed;
+ font-family: var(--font-body);
+ line-height: 1.7;
+ letter-spacing: 0.03em;
+ text-rendering: optimizeLegibility;
+ position: relative;
+ overflow-x: hidden;
+}
+
+::selection {
+ background: rgba(117, 170, 252, 0.35);
+}
+
+/* Grid overlay */
+.grid-overlay {
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: 1;
+}
+
+.grid-overlay::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+ 90deg,
+ rgba(117, 170, 252, 0.22) 1px,
+ rgba(255, 255, 255, 0.08) 1px
+ ),
+ linear-gradient(
+ 0deg,
+ rgba(117, 170, 252, 0.22) 1px,
+ rgba(255, 255, 255, 0.08) 1px
+ );
+ background-size: 28px 28px;
+ mix-blend-mode: screen;
+ opacity: 0.8;
+}
+
+.grid-overlay::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+ 180deg,
+ rgba(3, 17, 40, 0.8) 0%,
+ rgba(7, 15, 29, 0.5) 45%,
+ rgba(3, 17, 40, 0.8) 100%
+ );
+}
+
+/* Logo animations */
+@keyframes sweep-out {
+ 0% {
+ opacity: 0.45;
+ transform: scale(0.55);
+ }
+ 40% {
+ opacity: 0.7;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(1.35);
+ }
+}
+
+@keyframes ring-scan {
+ 0% {
+ stroke: #0f3c78;
+ opacity: 0.9;
+ stroke-dasharray: 400 0;
+ stroke-linecap: butt;
+ }
+ 25% {
+ stroke: #6fa0ff;
+ opacity: 1;
+ stroke-dasharray: 18 14;
+ stroke-linecap: round;
+ }
+ 55% {
+ stroke: #1e4c94;
+ opacity: 0.88;
+ stroke-dasharray: 10 18;
+ }
+ 70% {
+ stroke: #0f3c78;
+ opacity: 0.9;
+ stroke-dasharray: 6 22;
+ }
+ 90% {
+ stroke: #aac6ff;
+ opacity: 0.82;
+ stroke-dasharray: 4 26;
+ }
+ 100% {
+ stroke: #0f3c78;
+ opacity: 0.9;
+ stroke-dasharray: 400 0;
+ stroke-linecap: butt;
+ }
+}
+
+@keyframes idle-rotate {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes glow-pulse {
+ 0% {
+ opacity: 0.16;
+ transform: scale(1.02);
+ }
+ 50% {
+ opacity: 0.28;
+ transform: scale(1.12);
+ }
+ 100% {
+ opacity: 0.16;
+ transform: scale(1.02);
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+ 50% {
+ transform: scale(1.1);
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 0.6;
+ }
+}
+
+@keyframes ticker {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-50%);
+ }
+}
+
+/* Logo shell */
+.logo-shell {
+ border-radius: 50%;
+ border: 1px solid rgba(63, 111, 179, 0.6);
+ background: #070f1d;
+ display: grid;
+ place-items: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.logo-shell::before {
+ content: "";
+ position: absolute;
+ inset: 10px;
+ border-radius: 50%;
+ border: 1px solid rgba(15, 60, 120, 0.35);
+ box-shadow: 0 0 0 rgba(15, 60, 120, 0.1);
+ opacity: 0;
+ transform: scale(0.9);
+ transition: opacity 0.45s ease, transform 0.6s ease;
+}
+
+.logo-shell::after {
+ content: "";
+ position: absolute;
+ inset: -1px;
+ background: repeating-conic-gradient(
+ from 0deg,
+ rgba(15, 60, 120, 0.08) 0deg 6deg,
+ rgba(117, 170, 252, 0.1) 6deg 12deg
+ );
+ mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 80%);
+ opacity: 0.7;
+}
+
+.logo-shell.listening .ring-outer,
+.logo-shell:not(.no-hover-animation):hover .ring-outer {
+ animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+ animation-delay: 0.7s;
+}
+
+.logo-shell.listening .ring-middle,
+.logo-shell:not(.no-hover-animation):hover .ring-middle {
+ animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+ animation-delay: 0.35s;
+}
+
+.logo-shell.listening .ring-inner,
+.logo-shell:not(.no-hover-animation):hover .ring-inner {
+ animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
+ animation-delay: 0s;
+}
+
+.logo-shell.listening::before,
+.logo-shell:not(.no-hover-animation):hover::before {
+ opacity: 1;
+ transform: scale(1.08);
+ animation: glow-pulse 1.6s ease-in-out infinite;
+}
+
+.logo-shell.listening .scan-sweep,
+.logo-shell:not(.no-hover-animation):hover .scan-sweep {
+ opacity: 0.7;
+ animation: sweep-out 2.4s ease-out infinite;
+}
+
+.logo-shell.listening .logo-svg,
+.logo-shell:not(.no-hover-animation):hover .logo-svg {
+ filter: drop-shadow(0 0 10px rgba(15, 60, 120, 0.35));
+}
+
+.scan-sweep {
+ position: absolute;
+ inset: 10%;
+ border-radius: 50%;
+ background: radial-gradient(
+ circle,
+ rgba(117, 170, 252, 0.25) 0%,
+ rgba(117, 170, 252, 0.12) 38%,
+ rgba(15, 60, 120, 0.06) 64%,
+ transparent 85%
+ );
+ opacity: 0;
+ mix-blend-mode: screen;
+ filter: blur(0.8px);
+ z-index: 1;
+ transform: scale(0.65);
+}
+
+.scan-sweep.sweep-2 {
+ animation-delay: 1.2s;
+}
+
+.logo-svg {
+ z-index: 2;
+ transition: filter 0.4s ease;
+}
+
+.logo-svg .ring {
+ fill: none;
+ stroke: #0f3c78;
+ stroke-dasharray: 400 0;
+ stroke-linecap: butt;
+ transition: stroke 0.35s ease, opacity 0.35s ease;
+}
+
+.logo-svg .core {
+ fill: #0f3c78;
+}
+
+.halo {
+ position: absolute;
+ border-radius: 50%;
+ border: 1px dashed rgba(15, 60, 120, 0.5);
+ animation: idle-rotate 28s linear infinite;
+}
+
+.logo-shell.listening + .halo,
+.logo-shell:not(.no-hover-animation):hover + .halo {
+ animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* Ticker */
+.ticker-content {
+ display: inline-block;
+ padding-left: 2px;
+ animation: ticker 22s linear infinite;
+ white-space: nowrap;
+}
+
+/* Rewrite link scramble effect */
+.rewrite-link {
+ position: relative;
+ display: inline-block;
+ padding: 4px 8px;
+ border: 1px dashed rgba(117, 170, 252, 0.5);
+ background: #0f1c2f;
+ text-decoration: none;
+ color: #eef5ff;
+ font-family: var(--font-mono);
+ overflow: hidden;
+ transition: border-color 0.2s;
+}
+
+.rewrite-link:hover {
+ border-color: rgba(117, 170, 252, 0.8);
+}
+
+.rewrite-link[aria-disabled="true"] {
+ color: #9aa9c6;
+ border-color: rgba(117, 170, 252, 0.25);
+ cursor: not-allowed;
+ pointer-events: none;
+ background: #0b1423;
+}
+
+/* Panel styles */
+.panel {
+ background: var(--color-bg-panel);
+ border: 1px solid var(--color-border-primary);
+ position: relative;
+}
+
+.panel::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border: 1px dashed rgba(89, 122, 170, 0.25);
+ pointer-events: none;
+}
+
+/* Double border top decoration */
+.border-top-double {
+ border-top: 4px double #050d1f;
+}
+
+/* Stripe decoration for frame top */
+.stripe-top::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 6px;
+ background: repeating-linear-gradient(
+ 90deg,
+ #0f3c78 0px,
+ #0f3c78 40px,
+ #3f6fb3 40px,
+ #3f6fb3 44px
+ );
+ opacity: 0.7;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2026-05-21 16:42:10 +0000