Save workspace changes

.deploy/artwork-evolution-release/resources/scss/nova.scss

@@ -0,0 +1,155 @@
+/*
+ * Nova overrides (keep minimal).
+ * The Nova layout is styled primarily via Tailwind utilities from resources/css/app.css.
+ */
+
+/* Hero radial background moved from inline styles to a class to respect Nova rules */
+.nb-hero-radial {
+	background-image: radial-gradient(circle at 20% 10%, rgba(77,163,255,.25), transparent 35%),
+										radial-gradient(circle at 70% 30%, rgba(255,196,77,.18), transparent 40%),
+										radial-gradient(circle at 30% 80%, rgba(180,77,255,.16), transparent 45%);
+}
+
+/* Nova design tokens and helper classes copied from nova.html preview
+	 These provide the same color tokens and small utilities used by the preview
+	 so `blank` renders consistently until Tailwind config is consolidated. */
+:root {
+	--sb-bg: #141416;
+	--sb-top: #1c1c1f;
+	--sb-panel: #191a1f;
+	--sb-panel2: #15161b;
+	--sb-line: #2a2a33;
+	--sb-text: #e3e3e3;
+	--sb-muted: #a6a6b0;
+	--sb-blue: #4da3ff;
+
+  /* Primary UI color tokens (Nova palette) */
+  --nova-blue: #09101acc;
+  --deep-space: #0F1724;
+  --panel-dark: #151E2E;
+  --soft-blue: #7A8CA5;
+  --accent-orange: #E07A21;
+	/* Toolbar color (Skinbase Nova) */
+	--toolbar-bg: #0F1724;
+	/* RGB variants for subtle overlays */
+	--nova-blue-rgb: 100,111,131;
+	--deep-space-rgb: 15,23,36;
+	--panel-dark-rgb: 21,30,46;
+	--toolbar-bg-rgb: 15,23,36;
+}
+
+/* Background / text helpers (used in preview markup) */
+.bg-sb-bg { background-color: var(--sb-bg) !important; }
+.bg-sb-top { background-color: var(--sb-top) !important; }
+.bg-sb-panel { background-color: var(--sb-panel) !important; }
+.bg-sb-panel2 { background-color: var(--sb-panel2) !important; }
+.text-sb-text { color: var(--sb-text) !important; }
+.text-sb-muted { color: var(--sb-muted) !important; }
+.border-sb-line { border-color: var(--sb-line) !important; }
+
+/* Small shadow token used by preview */
+.shadow-sb { box-shadow: 0 12px 30px rgba(0,0,0,.45) !important; }
+
+/* Scrollbar helpers used in preview */
+.sb-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
+.sb-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; transition: background .2s; }
+.sb-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
+.sb-scrollbar::-webkit-scrollbar-track { background: transparent; }
+.sb-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
+
+/* Ensure header and dropdowns are not clipped and render above page content */
+header {
+	overflow: visible;
+	/* Use the official toolbar background token from the Nova spec */
+	background-color: var(--toolbar-bg);
+	/* subtle divider to separate toolbar from content */
+	border-bottom: 1px solid rgba(255,255,255,0.02);
+}
+
+/* Menus may be absolute-positioned; ensure they sit above other UI layers */
+[id^="dd-"] , [data-dropdown-menu], [data-submenu-menu] {
+	z-index: 9999 !important;
+	background-color: var(--panel-dark);
+	color: var(--sb-text);
+	border: 1px solid rgba(255,255,255,0.03);
+}
+
+/* Convenience helpers for the new nova tokens */
+.bg-nova { background-color: var(--nova-blue) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(2px); }
+.bg-deep { background-color: var(--deep-space) !important; }
+.bg-panel-dark { background-color: var(--panel-dark) !important; }
+.text-soft { color: var(--soft-blue) !important; }
+.text-accent { color: var(--accent-orange) !important; }
+
+/* Dropdown section header: subtle, smaller and visually separated */
+.dd-section {
+	font-size: 11px;
+	color: rgba(166,166,176,0.65);
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	border-top: 1px solid rgba(42,42,51,0.12);
+	margin-top: 0.5rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.25rem;
+}
+
+/* ─── Dropdown animations ─────────────────────────────────────── */
+
+/**
+ * .dd-menu — base (closed) state.
+ * Invisible, shifted up slightly, non-interactive.
+ * On close the element fades out; visibility is hidden *after* the fade
+ * so the element is still rendered during the transition.
+ */
+.dd-menu {
+	opacity: 0;
+	transform: translateY(-6px) scale(0.97);
+	pointer-events: none;
+	visibility: hidden;
+	transition:
+		opacity  140ms ease,
+		transform 140ms ease,
+		visibility 0s linear 140ms;
+}
+
+/**
+ * .dd-menu.is-open — open state.
+ * Fully visible, interactive, with a snappy entrance spring.
+ * visibility is made visible immediately (0s delay), then
+ * opacity + transform animate in.
+ */
+.dd-menu.is-open {
+	opacity: 1;
+	transform: translateY(0) scale(1);
+	pointer-events: auto;
+	visibility: visible;
+	transition:
+		opacity  170ms cubic-bezier(0.16, 1, 0.3, 1),
+		transform 170ms cubic-bezier(0.16, 1, 0.3, 1),
+		visibility 0s linear 0s;
+}
+
+/* Chevron rotation indicator for open dropdowns */
+[data-dd] svg:last-child,
+[data-dropdown-toggle] svg:last-child {
+	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+[data-dd][aria-expanded="true"] svg:last-child,
+[data-dropdown-toggle][aria-expanded="true"] svg:last-child {
+	transform: rotate(180deg);
+}
+
+/* Item hover: subtle left-border accent when hovering menu links */
+.dd-menu a:hover,
+.dd-menu button:hover {
+	border-left: 2px solid rgba(77,163,255,0.4);
+	padding-left: calc(1rem - 2px);
+}
+.dd-menu a,
+.dd-menu button {
+	border-left: 2px solid transparent;
+	transition: border-color 120ms ease, background-color 120ms ease, padding-left 120ms ease;
+}
+
+
+