make website blue

app/components/tvone-site-nav.tsx

@@ -118,7 +118,7 @@ export function TvoneSiteNav() {
 
       <div className="sticky top-0 z-50">
         <nav
-          className={`border-b border-white/15 bg-[#0066D4] text-white transition-shadow duration-200 ${
+          className={`border-b border-white/15 bg-[#0066D4] pt-[env(safe-area-inset-top)] text-white transition-shadow duration-200 ${
             navIsStuck ? "shadow-[0_4px_16px_rgba(0,0,0,0.18)]" : "shadow-none"
           }`}
           aria-label="Navegação principal"
@@ -196,13 +196,13 @@ export function TvoneSiteNav() {
           <>
             <button
               type="button"
-              className="fixed top-[52px] right-0 bottom-0 left-0 z-40 bg-black/25 sm:top-[58px] md:top-[64px] lg:hidden"
+              className="fixed right-0 bottom-0 left-0 z-40 bg-black/25 top-[calc(env(safe-area-inset-top,0px)+52px)] sm:top-[calc(env(safe-area-inset-top,0px)+58px)] md:top-[calc(env(safe-area-inset-top,0px)+64px)] lg:hidden"
               aria-label="Fechar menu"
               onClick={closeMenu}
             />
             <div
               id={menuId}
-              className="fixed top-[52px] right-0 left-0 z-50 max-h-[min(75dvh,calc(100dvh-52px))] overflow-y-auto rounded-b-xl border-b border-white/15 bg-[#0066D4] shadow-xl sm:top-[58px] sm:max-h-[min(75dvh,calc(100dvh-58px))] md:top-[64px] md:max-h-[min(75dvh,calc(100dvh-64px))] lg:hidden"
+              className="fixed right-0 left-0 z-50 max-h-[min(75dvh,calc(100dvh-52px-env(safe-area-inset-top,0px)))] overflow-y-auto rounded-b-xl border-b border-white/15 bg-[#0066D4] shadow-xl top-[calc(env(safe-area-inset-top,0px)+52px)] sm:top-[calc(env(safe-area-inset-top,0px)+58px)] sm:max-h-[min(75dvh,calc(100dvh-58px-env(safe-area-inset-top,0px)))] md:top-[calc(env(safe-area-inset-top,0px)+64px)] md:max-h-[min(75dvh,calc(100dvh-64px-env(safe-area-inset-top,0px)))] lg:hidden"
               role="dialog"
               aria-modal="true"
               aria-label="Menu"

app/globals.css

@@ -4,6 +4,8 @@
   --background: #ffffff;
   --foreground: #171717;
   --tvone-blue: #0066cc;
+  /** Same as site header / `theme-color` in layout.tsx — iPhone notch + Safari UI */
+  --tvone-header: #0066d4;
   --tvone-magenta: #d9468f;
   --tvone-muted: #f5f5f7;
 }

app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
@@ -7,9 +7,23 @@ const inter = Inter({
   subsets: ["latin"],
 });
 
+/** Matches `TvoneSiteNav` — Safari/iOS uses this for the browser chrome tint from the first paint. */
+const TVONE_HEADER_BLUE = "#0066D4";
+
+export const viewport: Viewport = {
+  themeColor: TVONE_HEADER_BLUE,
+  colorScheme: "light",
+  viewportFit: "cover",
+};
+
 export const metadata: Metadata = {
   title: "tvone — Notícias e entretenimento",
   description: "O seu portal de notícias, música e cultura.",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "black-translucent",
+    title: "tvone",
+  },
 };
 
 export default function RootLayout({