/** * Nighthawk site theme — applies the casting-admin design language (Manrope, * warm near-black + brand orange, sharp CTAs) site-wide, with a light and a * dark palette switched via [data-theme] on . */ :root { --nh-bg: #0a0a0b; --nh-surface: #131315; --nh-surface-2: #1c1c1f; --nh-line: #2b2b2f; --nh-text: #f6f5f3; --nh-muted: #9c9a97; --nh-accent: #d8741a; --nh-accent-2: #b8630f; --nh-accent-soft: rgba(216, 116, 26, .14); --nh-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6); } html[data-theme="light"] { --nh-bg: #faf9f6; --nh-surface: #ffffff; --nh-surface-2: #f2efe9; --nh-line: #e6e1d8; --nh-text: #17171a; --nh-muted: #6b6862; --nh-accent: #d8741a; --nh-accent-2: #b8630f; --nh-accent-soft: rgba(216, 116, 26, .10); --nh-shadow: 0 20px 50px -20px rgba(30, 20, 10, .22); } /* Re-point WordPress's own preset colour variables so native blocks, the header and the navigation overlay follow suit without per-selector fights. !important guarantees this wins regardless of stylesheet load order, since both rules target :root and only !important breaks that tie. */ :root { --wp--preset--color--base: var(--nh-surface) !important; --wp--preset--color--contrast: var(--nh-text) !important; --wp--preset--color--accent-1: var(--nh-accent) !important; --wp--preset--color--accent-2: var(--nh-accent-2) !important; --wp--preset--color--accent-3: var(--nh-text) !important; --wp--preset--color--accent-4: var(--nh-muted) !important; --wp--preset--color--accent-5: var(--nh-surface-2) !important; } html, body { background: var(--nh-bg); color: var(--nh-text); } body { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; transition: background .25s ease, color .25s ease; } h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: -.01em; color: var(--nh-text); } a:where(:not(.wp-element-button)) { color: var(--nh-accent); } a:where(:not(.wp-element-button)):hover { color: var(--nh-accent-2); } ::selection { background: var(--nh-accent); color: #fff; } .wp-site-blocks { background: var(--nh-bg); } header.wp-block-template-part, .wp-site-blocks > header { background: var(--nh-bg); border-bottom: 1px solid var(--nh-line); } footer.wp-block-template-part, .wp-site-blocks > footer { background: var(--nh-bg); border-top: 1px solid var(--nh-line); } .wp-block-site-title a { color: var(--nh-text) !important; text-decoration: none; } /* The NHP logo (pulled from nighthawk.productions) is a dark mark meant for light backgrounds. Rather than needing a separate white asset, flip it with a CSS filter whenever the site is in dark mode. */ .wp-block-site-logo img { transition: filter .2s ease; } html[data-theme="dark"] .wp-block-site-logo img { filter: brightness(0) invert(1); } /* Homepage hero (Cover block) sits over a dark photo overlay in BOTH light and dark mode, so its text must always be light. The headline + subtext use the "base" preset colour, which we remap site-wide to the near-black surface — correct everywhere except here, where it rendered black-on-dark (invisible). Force the hero copy white; the accent-orange eyebrow + button are unaffected. */ body.nhc-home .wp-block-cover__inner-container .has-base-color, body.nhc-home .wp-block-cover__inner-container h1, body.nhc-home .wp-block-cover__inner-container h2 { color: #fff !important; } body.nhc-home .wp-block-cover__inner-container p:not(.has-accent-1-color) { color: rgba(255,255,255,.9) !important; } /* --- Homepage hero: cinematic polish --- */ body.nhc-home .wp-block-cover { min-height: 86vh !important; } body.nhc-home .wp-block-cover__image-background { filter: saturate(.92) contrast(1.05); } /* Replace the flat dim with a cinematic vertical gradient: dark top for the nav, lighter mid so the photo reads, dark bottom so it dissolves into the page. */ body.nhc-home .wp-block-cover__background { background: linear-gradient(180deg, rgba(8,8,9,.68) 0%, rgba(8,8,9,.34) 42%, rgba(8,8,9,.55) 72%, rgba(8,8,9,.96) 100%) !important; opacity: 1 !important; } body.nhc-home .wp-block-cover__inner-container { max-width: 880px; } body.nhc-home .wp-block-cover__inner-container .has-accent-1-color { text-shadow: 0 1px 14px rgba(0,0,0,.6); margin-bottom: 6px; } body.nhc-home .wp-block-cover__inner-container h1 { font-size: clamp(40px, 6.4vw, 78px) !important; letter-spacing: -.025em; line-height: 1.02; margin-bottom: 10px; text-shadow: 0 2px 44px rgba(0,0,0,.5); } body.nhc-home .wp-block-cover__inner-container h1::after { content: ""; display: block; width: 60px; height: 3px; border-radius: 2px; background: var(--nh-accent); margin: 22px auto 6px; } body.nhc-home .wp-block-cover__inner-container p:not(.has-accent-1-color) { font-size: clamp(15px, 1.5vw, 18px) !important; line-height: 1.55; max-width: 560px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 22px rgba(0,0,0,.55); } body.nhc-home .wp-block-cover .wp-block-buttons { margin-top: 28px; } body.nhc-home .wp-block-cover .wp-block-button__link { padding: 15px 36px !important; font-size: 14px !important; } .wp-block-navigation, .wp-block-navigation a, .wp-block-navigation-item__content { color: var(--nh-text) !important; } .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { fill: var(--nh-text); } .wp-element-button, .wp-block-button__link, input[type="submit"] { background: var(--nh-accent); color: #fff; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 13px; padding: 13px 24px; border: 0; cursor: pointer; transition: background .2s ease; } .wp-element-button:hover, .wp-block-button__link:hover, input[type="submit"]:hover { background: var(--nh-accent-2); } .wp-block-group.has-background, .wp-block-cover, .wp-block-table { background: var(--nh-surface); } /* ---------- Light/dark toggle (every front-end page) ---------- */ #nh-theme-toggle { position: fixed; left: 18px; bottom: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 99930; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--nh-line); background: var(--nh-surface); color: var(--nh-text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .4); font-size: 18px; line-height: 1; transition: border-color .15s ease, transform .15s ease; } #nh-theme-toggle:hover { border-color: var(--nh-accent); transform: translateY(-1px); } @media print { #nh-theme-toggle { display: none; } }