Spaces:
Running
Running
File size: 3,779 Bytes
52247e1 9c2b8d6 52247e1 59df2f2 52247e1 59df2f2 52247e1 9c2b8d6 52247e1 59df2f2 52247e1 59df2f2 52247e1 9c2b8d6 52247e1 9c2b8d6 52247e1 9c2b8d6 52247e1 9c2b8d6 52247e1 9c2b8d6 59df2f2 52247e1 59df2f2 9c2b8d6 52247e1 59df2f2 52247e1 9c2b8d6 52247e1 9c2b8d6 52247e1 9c2b8d6 59df2f2 52247e1 59df2f2 52247e1 59df2f2 9c2b8d6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
/* assets/site.css
SILENTPATTERN — shared site styles
Keep page-specific styling in Tailwind classes when possible.
*/
:root {
--bg: #000000;
--panel: rgba(17, 24, 39, 0.35); /* gray-900-ish with alpha */
--border: rgba(31, 41, 55, 0.85); /* gray-800-ish */
--indigo: rgba(99, 102, 241, 1);
--purple: rgba(139, 92, 246, 1);
--pink: rgba(236, 72, 153, 1);
--ring: rgba(99, 102, 241, 0.65);
}
/* Small reset to prevent layout weirdness across pages */
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
min-height: 100vh;
background: var(--bg);
color: #ffffff;
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Gradient text used in hero headings */
.gradient-text {
background: linear-gradient(90deg, var(--indigo), var(--purple), var(--pink));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Subtle “lab aura” background treatment for panels/cards */
.aura {
background:
radial-gradient(circle at 25% 15%, rgba(99,102,241,0.20), transparent 42%),
radial-gradient(circle at 70% 70%, rgba(236,72,153,0.12), transparent 46%),
radial-gradient(circle at 50% 45%, rgba(139,92,246,0.10), transparent 55%);
}
/* Lab surface grid */
.lab-grid {
background-image:
linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
background-size: 44px 44px;
background-position: center;
}
/* Micro-interaction */
.conscious-element {
transition: transform 0.28s ease, background-color 0.28s ease, border-color 0.28s ease, opacity 0.28s ease;
}
.conscious-element:hover {
transform: translateY(-2px);
}
/* Accessible focus ring (prefer focus-visible when available) */
.focus-ring:focus {
outline: none;
box-shadow: 0 0 0 2px var(--ring);
}
@supports selector(:focus-visible) {
.focus-ring:focus {
box-shadow: none;
}
.focus-ring:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--ring);
}
}
/* Modal animation helpers */
.modal {
transition: opacity 0.3s ease, transform 0.3s ease;
will-change: opacity, transform;
}
.modal-hidden {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
.modal-visible {
opacity: 1;
transform: translateY(0);
}
/* Thin scrollbars (Firefox + WebKit) */
.thin-scroll {
scrollbar-width: thin;
scrollbar-color: #4f46e5 #1e1b4b;
}
.thin-scroll::-webkit-scrollbar {
width: 6px;
}
.thin-scroll::-webkit-scrollbar-track {
background: #1e1b4b;
}
.thin-scroll::-webkit-scrollbar-thumb {
background-color: #4f46e5;
border-radius: 3px;
}
/* Chat container standard height */
.chat-container {
height: 520px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #4f46e5 #1e1b4b;
}
.chat-container::-webkit-scrollbar {
width: 6px;
}
.chat-container::-webkit-scrollbar-track {
background: #1e1b4b;
}
.chat-container::-webkit-scrollbar-thumb {
background-color: #4f46e5;
border-radius: 3px;
}
/* Typing indicator used in chat.html
Avoid animating `content:` (unreliable). Animate width instead. */
.typing-indicator::after {
content: "...";
display: inline-block;
overflow: hidden;
vertical-align: bottom;
width: 0ch;
animation: typingDots 1.2s steps(3, end) infinite;
}
@keyframes typingDots {
0% { width: 0ch; }
33% { width: 1ch; }
66% { width: 2ch; }
100% { width: 3ch; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.conscious-element,
.modal {
transition: none !important;
}
.typing-indicator::after {
animation: none !important;
width: 3ch;
}
}
|