77cc45dd83
Modules: - Chain: daemon RPC client (DaemonRpc singleton, cached queries) - Explorer: block browser, tx viewer, alias directory, search, stats API - Names: .lthn TLD registrar portal (availability check, lookup, directory) - Trade: scaffold (DEX frontend + API) - Pool: scaffold (mining pool dashboard) Replaces 5 Node.js containers (5.9GB) with one FrankenPHP app. Built on CorePHP framework pattern from host.uk.com. Co-Authored-By: Charon <charon@lethean.io>
398 lines
12 KiB
CSS
398 lines
12 KiB
CSS
@import 'tailwindcss';
|
|
@import '../../vendor/livewire/flux/dist/flux.css';
|
|
|
|
@plugin '@tailwindcss/typography';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../vendor/livewire/flux/src/resources/views/**/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
@source '../../app/**/*.blade.php';
|
|
@source '../**/*.blade.php';
|
|
@source '../**/*.js';
|
|
|
|
/*
|
|
* Safelist for dynamic color classes used in partner.blade.php
|
|
* These classes are constructed dynamically and need to be explicitly listed.
|
|
*
|
|
* Emerald (Hermes):
|
|
* border-emerald-500/30 from-emerald-900/20 to-emerald-900/20
|
|
* bg-emerald-500/20 text-emerald-400 text-emerald-200/80
|
|
* from-emerald-400 via-emerald-300 to-emerald-400
|
|
* hover:from-emerald-300 hover:via-emerald-200 hover:to-emerald-300
|
|
* text-emerald-700 bg-emerald-500/10 border-emerald-500/20
|
|
* text-emerald-200/90 text-emerald-400/50
|
|
*
|
|
* Amber (Ploutōn) - included for completeness:
|
|
* border-amber-500/30 from-amber-900/20 to-amber-900/20
|
|
* bg-amber-500/20 text-amber-400 text-amber-200/80
|
|
* from-amber-400 via-amber-300 to-amber-400
|
|
* hover:from-amber-300 hover:via-amber-200 hover:to-amber-300
|
|
* text-amber-700 bg-amber-500/10 border-amber-500/20
|
|
* text-amber-200/90 text-amber-400/50
|
|
*/
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme {
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
|
'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
/* Stellar Typography Scale */
|
|
--text-xs: 0.75rem;
|
|
--text-xs--line-height: 1.5;
|
|
--text-sm: 0.875rem;
|
|
--text-sm--line-height: 1.5715;
|
|
--text-base: 1rem;
|
|
--text-base--line-height: 1.5;
|
|
--text-base--letter-spacing: -0.017em;
|
|
--text-lg: 1.125rem;
|
|
--text-lg--line-height: 1.5;
|
|
--text-lg--letter-spacing: -0.017em;
|
|
--text-xl: 1.25rem;
|
|
--text-xl--line-height: 1.5;
|
|
--text-xl--letter-spacing: -0.017em;
|
|
--text-2xl: 1.5rem;
|
|
--text-2xl--line-height: 1.415;
|
|
--text-2xl--letter-spacing: -0.017em;
|
|
--text-3xl: 1.875rem;
|
|
--text-3xl--line-height: 1.333;
|
|
--text-3xl--letter-spacing: -0.017em;
|
|
--text-4xl: 2.25rem;
|
|
--text-4xl--line-height: 1.277;
|
|
--text-4xl--letter-spacing: -0.017em;
|
|
--text-5xl: 2.75rem;
|
|
--text-5xl--line-height: 1.1;
|
|
--text-5xl--letter-spacing: -0.017em;
|
|
--text-6xl: 3.5rem;
|
|
--text-6xl--line-height: 1;
|
|
--text-6xl--letter-spacing: -0.017em;
|
|
|
|
/* Stellar Animations */
|
|
--animate-endless: endless 20s linear infinite;
|
|
--animate-shine: shine 5s linear 500ms infinite;
|
|
--animate-shine-line: shineLine 5s ease-in-out 500ms infinite;
|
|
--animate-float: float 2s ease-in-out infinite;
|
|
--animate-pulse-slow: pulseLoop 12000ms linear infinite;
|
|
--animate-gradient: gradientMove 6s linear infinite;
|
|
|
|
@keyframes endless {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(-245px); }
|
|
}
|
|
@keyframes shine {
|
|
0% { top: 0; transform: translateY(-100%) scaleY(10); opacity: 0; }
|
|
2% { opacity: 0.5; }
|
|
40% { top: 100%; transform: translateY(0) scaleY(200); opacity: 0; }
|
|
100% { top: 100%; transform: translateY(0) scaleY(1); opacity: 0; }
|
|
}
|
|
@keyframes shineLine {
|
|
0% { top: 0; transform: scaleY(5); opacity: 0; }
|
|
10% { opacity: 0.8; }
|
|
20% { top: 100%; transform: scaleY(10); opacity: 0; }
|
|
100% { top: 100%; transform: scaleY(1); opacity: 0; }
|
|
}
|
|
@keyframes float {
|
|
0% { transform: translateY(3%); }
|
|
50% { transform: translateY(-3%); }
|
|
100% { transform: translateY(3%); }
|
|
}
|
|
@keyframes pulseLoop {
|
|
0% { opacity: 0; transform: scale(.25) translateZ(0); }
|
|
30% { opacity: .4; }
|
|
70% { opacity: 0; }
|
|
80% { transform: scale(1) translateZ(0); }
|
|
}
|
|
@keyframes gradientMove {
|
|
to { background-position: 200% center; }
|
|
}
|
|
}
|
|
|
|
/* Stellar Typography Classes */
|
|
.h1 {
|
|
@apply text-5xl font-extrabold;
|
|
}
|
|
.h2 {
|
|
@apply text-4xl font-extrabold;
|
|
}
|
|
.h3 {
|
|
@apply text-3xl font-extrabold;
|
|
}
|
|
.h4 {
|
|
@apply text-2xl font-extrabold;
|
|
}
|
|
|
|
@media (width >= 768px) {
|
|
.h1 { @apply text-6xl; }
|
|
.h2 { @apply text-5xl; }
|
|
.h3 { @apply text-4xl; }
|
|
}
|
|
|
|
/* Stellar Button Styles */
|
|
.btn,
|
|
.btn-sm {
|
|
@apply text-sm font-medium inline-flex items-center justify-center border border-transparent rounded-full whitespace-nowrap transition duration-150 ease-in-out;
|
|
}
|
|
.btn {
|
|
@apply px-4 py-1.5;
|
|
}
|
|
.btn-sm {
|
|
@apply px-3 py-1;
|
|
}
|
|
|
|
/* Button Focus Styles (Accessibility) */
|
|
.btn:focus-visible,
|
|
.btn-sm:focus-visible {
|
|
@apply outline-none ring-2 ring-offset-2 ring-offset-slate-900 ring-cyan-400;
|
|
}
|
|
|
|
/* Stellar Form Styles */
|
|
.form-input,
|
|
.form-textarea,
|
|
.form-multiselect,
|
|
.form-select,
|
|
.form-checkbox,
|
|
.form-radio {
|
|
@apply border border-transparent rounded-sm focus:ring-0 focus:ring-offset-0;
|
|
}
|
|
.form-input,
|
|
.form-textarea,
|
|
.form-multiselect,
|
|
.form-select {
|
|
@apply bg-slate-800 text-slate-200 text-sm px-3 py-1.5 focus:border-purple-500;
|
|
}
|
|
.form-input,
|
|
.form-textarea {
|
|
@apply placeholder-slate-500;
|
|
}
|
|
.form-checkbox,
|
|
.form-radio {
|
|
@apply bg-slate-800 checked:bg-purple-500 checked:border-transparent text-purple-600;
|
|
}
|
|
|
|
/* Stellar Gradient Text */
|
|
.gradient-text {
|
|
@apply bg-clip-text text-transparent bg-linear-to-r from-slate-200/60 via-slate-200 to-slate-200/60;
|
|
}
|
|
|
|
/* Stellar Card with Gradient Border */
|
|
.stellar-card {
|
|
@apply relative border border-transparent rounded-2xl;
|
|
background: linear-gradient(var(--color-slate-900), var(--color-slate-900)) padding-box,
|
|
conic-gradient(var(--color-slate-400), var(--color-slate-700) 25%, var(--color-slate-700) 75%, var(--color-slate-400) 100%) border-box;
|
|
}
|
|
.stellar-card::before {
|
|
@apply absolute inset-0 bg-slate-800/30 rounded-2xl pointer-events-none;
|
|
content: '';
|
|
}
|
|
|
|
/* Stellar Card Focus Styles (for clickable cards) */
|
|
a.stellar-card:focus-visible {
|
|
@apply outline-none ring-2 ring-offset-2 ring-offset-slate-950 ring-cyan-400;
|
|
}
|
|
|
|
/* Stellar Pulsing Animation */
|
|
.pulse {
|
|
opacity: 0;
|
|
transform-origin: center;
|
|
animation: pulseLoop 12000ms linear infinite;
|
|
}
|
|
.pulse-1 { animation-delay: -4000ms; }
|
|
.pulse-2 { animation-delay: -8000ms; }
|
|
|
|
/* Animated Gradient Text (Open Pro style) */
|
|
.gradient-text-animated {
|
|
@apply bg-clip-text text-transparent;
|
|
background-image: linear-gradient(to right, var(--color-slate-200), var(--color-purple-200), var(--color-slate-50), var(--color-purple-300), var(--color-slate-200));
|
|
background-size: 200% auto;
|
|
animation: gradientMove 6s linear infinite;
|
|
}
|
|
|
|
/* Shine Line Animation (for timeline/vertical lines) */
|
|
.shine-line {
|
|
@apply relative;
|
|
}
|
|
.shine-line::after {
|
|
content: '';
|
|
@apply absolute left-0 top-0 h-4 w-px origin-bottom -translate-y-full opacity-0;
|
|
background: linear-gradient(180deg, transparent, rgb(168 85 247 / 0.5) 25%, rgb(168 85 247) 50%, rgb(168 85 247 / 0.5) 75%, transparent);
|
|
animation: shineLine 5s ease-in-out 500ms infinite;
|
|
}
|
|
|
|
/* Workflow Card Glow Effect */
|
|
.glow-card {
|
|
@apply relative overflow-hidden rounded-2xl bg-slate-800 p-px;
|
|
}
|
|
.glow-card::before,
|
|
.glow-card::after {
|
|
content: '';
|
|
@apply pointer-events-none absolute -left-40 -top-40 z-10 h-80 w-80 rounded-full opacity-0 blur-3xl transition-opacity duration-500;
|
|
transform: translate(var(--mouse-x, 0), var(--mouse-y, 0));
|
|
}
|
|
.glow-card::before {
|
|
@apply bg-purple-500/80;
|
|
}
|
|
.glow-card::after {
|
|
@apply -left-48 -top-48 z-30 h-64 w-64 bg-purple-500;
|
|
}
|
|
.glow-card:hover::after {
|
|
@apply opacity-20;
|
|
}
|
|
.group:hover .glow-card::before {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
/* Hide scrollbar */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Alpine.js cloak */
|
|
[x-cloak=""] { display: none; }
|
|
|
|
/* ============================================
|
|
* Navigation Styling (Flux UI)
|
|
* ============================================
|
|
*/
|
|
|
|
/* Main navbar items - larger text, white colour */
|
|
[data-flux-navbar-items] {
|
|
color: white !important;
|
|
}
|
|
|
|
[data-flux-navbar-items]:hover {
|
|
color: white !important;
|
|
}
|
|
|
|
/* Override the text-sm on navbar item content */
|
|
[data-flux-navbar-items] [data-content] {
|
|
font-size: 1rem !important; /* text-base */
|
|
}
|
|
|
|
/* ============================================
|
|
* Navigation Dropdown Card Styling (Flux UI)
|
|
* ============================================
|
|
* Asymmetric gradient: solid accent left → slate right
|
|
* Each dropdown identified by data-accent attribute
|
|
*/
|
|
|
|
/* Base navmenu styling - override Flux defaults for all nav dropdowns */
|
|
[data-flux-navmenu].nav-dropdown-menu,
|
|
.nav-dropdown [data-flux-navmenu],
|
|
[data-accent] [data-flux-navmenu] {
|
|
border: 1px solid rgb(51 65 85 / 0.5) !important;
|
|
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5) !important;
|
|
backdrop-filter: blur(12px) !important;
|
|
border-radius: 0.75rem !important;
|
|
background-image: none !important; /* Hide any grid/pattern backgrounds */
|
|
}
|
|
|
|
/* All accented dropdowns - force transparent bg so gradient shows */
|
|
[data-accent] [data-flux-navmenu] {
|
|
background-color: transparent !important;
|
|
position: relative !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
/* Grid pattern overlay on dropdown menus */
|
|
[data-accent] [data-flux-navmenu]::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image: url('/vendor/stellar/images/grid.svg');
|
|
background-size: auto;
|
|
background-repeat: repeat;
|
|
opacity: 0.15;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
mask-image: linear-gradient(to right, black 50%, transparent 100%);
|
|
-webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
|
|
}
|
|
|
|
/* Ensure menu content is above grid */
|
|
[data-accent] [data-flux-navmenu] > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Purple accent (Services) */
|
|
[data-accent="purple"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(88 28 135 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(168 85 247 / 0.6) !important;
|
|
}
|
|
|
|
/* Orange accent (For) */
|
|
[data-accent="orange"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(124 45 18 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(251 146 60 / 0.6) !important;
|
|
}
|
|
|
|
/* Indigo accent (AI) */
|
|
[data-accent="indigo"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(49 46 129 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(129 140 248 / 0.6) !important;
|
|
}
|
|
|
|
/* Cyan accent (Tools) */
|
|
[data-accent="cyan"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(21 94 117 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(34 211 238 / 0.6) !important;
|
|
}
|
|
|
|
/* Slate accent (OSS) */
|
|
[data-accent="slate"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(51 65 85 / 0.7), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(148 163 184 / 0.5) !important;
|
|
}
|
|
|
|
/* Amber accent (About) */
|
|
[data-accent="amber"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(120 53 15 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(251 191 36 / 0.6) !important;
|
|
}
|
|
|
|
/* Emerald accent (AI) */
|
|
[data-accent="emerald"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(6 78 59 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(52 211 153 / 0.6) !important;
|
|
}
|
|
|
|
/* Sky accent (Apps) */
|
|
[data-accent="sky"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(12 74 110 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(56 189 248 / 0.6) !important;
|
|
}
|
|
|
|
/* Violet accent (Dashboard) */
|
|
[data-accent="violet"] [data-flux-navmenu] {
|
|
background-image: linear-gradient(to right, rgb(76 29 149 / 0.6), rgb(15 23 42 / 0.98) 50%) !important;
|
|
border-left: 3px solid rgb(139 92 246 / 0.6) !important;
|
|
}
|
|
|
|
/* Menu item text and hover - override Flux defaults */
|
|
[data-accent] [data-flux-navmenu-item] {
|
|
color: rgb(226 232 240) !important;
|
|
}
|
|
|
|
[data-accent] [data-flux-navmenu-item]:hover {
|
|
background: linear-gradient(90deg, rgb(255 255 255 / 0.08), transparent 80%) !important;
|
|
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* Menu item icons */
|
|
[data-accent] [data-flux-navmenu-item] [data-flux-icon] {
|
|
color: rgb(148 163 184) !important;
|
|
}
|
|
|
|
/* Separator styling */
|
|
[data-accent] [data-flux-separator] {
|
|
opacity: 0.3 !important;
|
|
border-color: rgb(71 85 105) !important;
|
|
}
|
|
|
|
/* Heading inside menus */
|
|
[data-accent] [data-flux-heading] {
|
|
color: rgb(148 163 184) !important;
|
|
}
|