OpenTimelineIO · jhodges10 · Apr 14, 2026 · Apr 14, 2026 · Apr 14, 2026
diff --git a/content/homepage/timelines/introduction.md b/content/homepage/timelines/introduction.md
@@ -36,5 +36,3 @@ Join a collaborative community of developers and media professionals! Contribute
 ## Resources & Documentation
 Access the full [documentation](#), API references, and community forums to unlock OTIO’s full potential.
 
----
-
diff --git a/next.config.ts b/next.config.ts
@@ -41,10 +41,6 @@ const nextConfig: NextConfig = {
       {
         source: "/(.*)",
         headers: [
-          {
-            key: "Cross-Origin-Embedder-Policy",
-            value: "require-corp",
-          },
           {
             key: "Cross-Origin-Opener-Policy",
             value: "same-origin",

diff --git a/package.json b/package.json
@@ -84,5 +84,6 @@
   },
   "resolutions": {
     "string-width": "4.2.3"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -187,19 +187,19 @@
 
     --top-nav-height: 73px;
     --track-height: 38px;
-    --track-header-width: 120px;
-
-    /* Track label colors - light mode matching clip colors (blue-250, teal-250, violet-250, rose-250, slate-250) */
-    --track-label-h1: oklch(0.75 0.12 250); /* Blue - matches blue-200/300 gradient */
-    --track-label-h2: oklch(0.75 0.10 180); /* Teal - matches teal-200/300 gradient */
-    --track-label-h3: oklch(0.75 0.12 300); /* Violet - matches violet-200/300 gradient */
-    --track-label-img: oklch(0.75 0.10 15); /* Rose - matches rose-200/300 gradient */
-    --track-label-p: oklch(0.70 0.02 250); /* Slate - matches slate-200/300 gradient */
-    --track-label-ul: oklch(0.75 0.12 85); /* Amber - matches amber-200/300 gradient */
-    --track-label-embed: oklch(0.75 0.15 25); /* Red - matches red-200/300 gradient */
-    
+    --track-header-width: 88px;
+
+    /* Track label colors - light mode */
+    --track-label-h1: oklch(0.72 0.14 250); /* Blue */
+    --track-label-h2: oklch(0.72 0.12 175); /* Teal */
+    --track-label-h3: oklch(0.72 0.14 295); /* Violet */
+    --track-label-img: oklch(0.72 0.12 15); /* Rose */
+    --track-label-p: oklch(0.72 0.03 250); /* Slate */
+    --track-label-ul: oklch(0.72 0.14 85); /* Amber */
+    --track-label-embed: oklch(0.72 0.16 25); /* Red */
+
     /* Track header background - light mode */
-    --track-header-bg: oklch(0.85 0.01 240); /* Light gray-blue */
+    --track-header-bg: oklch(0.94 0.005 250); /* Light cool gray */
   }
 
   .dark {
@@ -231,17 +231,17 @@
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
 
-    /* Track label colors - dark mode matching clip colors */
-    --track-label-h1: oklch(0.50 0.15 250); /* Blue - matches dark mode blue-600/40-20 */
-    --track-label-h2: oklch(0.50 0.12 180); /* Teal - matches dark mode teal-600/40-20 */
-    --track-label-h3: oklch(0.50 0.15 300); /* Violet - matches dark mode violet-600/40-20 */
-    --track-label-img: oklch(0.50 0.12 15); /* Rose - matches dark mode rose-600/40-20 */
-    --track-label-p: oklch(0.45 0.08 250); /* Slate - matches dark mode slate-600/40-20 */
-    --track-label-ul: oklch(0.50 0.15 85); /* Amber - matches dark mode amber-600/40-20 */
-    --track-label-embed: oklch(0.50 0.18 25); /* Red - matches dark mode red-600/40-20 */
-    
+    /* Track label colors - dark mode */
+    --track-label-h1: oklch(0.48 0.16 250); /* Blue */
+    --track-label-h2: oklch(0.48 0.13 175); /* Teal */
+    --track-label-h3: oklch(0.48 0.16 295); /* Violet */
+    --track-label-img: oklch(0.48 0.13 15); /* Rose */
+    --track-label-p: oklch(0.43 0.06 250); /* Slate */
+    --track-label-ul: oklch(0.48 0.16 85); /* Amber */
+    --track-label-embed: oklch(0.48 0.19 25); /* Red */
+
     /* Track header background - dark mode */
-    --track-header-bg: oklch(0.18 0.02 240); /* Darker gray-blue */
+    --track-header-bg: oklch(0.15 0.015 260); /* Deep blue-gray */
   }
 }
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -47,15 +47,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={cn("min-h-screen bg-background text-foreground antialiased", openSans.className)}>
+      <body className={cn("min-h-dvh bg-background text-foreground antialiased", openSans.className)}>
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="dark"
           disableTransitionOnChange={false}
         >
           <NavWidthProvider>
-          <div className="flex flex-col min-h-screen">
+          <div className="flex flex-col min-h-dvh">
             <TopNav />
             <main className="flex-1 flex flex-col">
               {children}

diff --git a/src/components/layout/dark-mode.tsx b/src/components/layout/dark-mode.tsx
@@ -5,36 +5,20 @@ import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 
 export function ModeToggle({ style }: { style?: React.CSSProperties }) {
-  const { setTheme } = useTheme();
+  const { resolvedTheme, setTheme } = useTheme();
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon" style={style}>
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <Button
+      variant="outline"
+      size="icon"
+      style={style}
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
   );
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,5 +36,3 @@ Join a collaborative community of developers and media professionals! Contribute
		## Resources & Documentation
		Access the full [documentation](#), API references, and community forums to unlock OTIO’s full potential.

		---