/* ============================================================ Blue Nose Aerial Imaging — Site CSS Design tokens per "Blue Nose - Website Style Guide 2026" (One file: tokens + shared components. No framework.) ============================================================ */ /* ---------- FONTS — self-hosted WOFF2, only the weights used ---------- */ @font-face { font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/Lato-Regular.woff2') format('woff2'); } @font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/Lato-Bold.woff2') format('woff2'); } @font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap; src:url('../fonts/Lato-Black.woff2') format('woff2'); } @font-face { font-family:'Raleway'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/Raleway-Regular.woff2') format('woff2'); } @font-face { font-family:'Raleway'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/Raleway-Medium.woff2') format('woff2'); } @font-face { font-family:'Raleway'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/Raleway-SemiBold.woff2') format('woff2'); } @font-face { font-family:'Raleway'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/Raleway-Bold.woff2') format('woff2'); } /* ---------- TOKENS (unchanged from the 2026 style guide) ---------- */ :root { --color-charcoal-black: #0A0A0A; --color-deep-forest: #0D2325; --color-warm-brown: #3A2A1A; --color-rich-gold: #886834; --color-white: #FFFFFF; --color-soft-gray: #CCCCCC; --color-forest-700: #15353A; --color-forest-500: #1E4B4F; --color-gold-400: #A0865D; --color-gold-300: #C9A86A; /* WCAG-safe gold for small text on dark */ --color-gold-600: #6E5229; --color-bone: #F4F2EE; --color-stone-300: #9A9A9A; --color-stone-500: #5E5E5E; --color-line: rgba(255,255,255,0.12); --color-line-dark: rgba(10,10,10,0.12); --font-display: 'Lato', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --container-max: 1280px; } /* ---------- BASE ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-deep-forest); color: var(--color-white); font-family: var(--font-body); font-size: 17px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-rich-gold); text-decoration: none; } img, video { max-width: 100%; } /* ---------- REVEAL — progressive enhancement. Content is visible by default; the .js class (added by a one-line script in ) opts elements into the entrance animation. If JavaScript ever fails, the page simply renders static. ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease-standard), transform .85s var(--ease-standard); } .js [data-reveal].bn-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ---------- BUTTONS & LINKS (hover states, replacing style-hover) ---------- */ .bn-btn-gold { font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 18px 40px; border-radius: 999px; background: var(--color-rich-gold); color: #fff; display: inline-block; transition: background 150ms; } .bn-btn-gold:hover { background: var(--color-gold-400); } .bn-btn-ghost { font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 18px 40px; border-radius: 999px; background: rgba(255,255,255,0.06); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); display: inline-block; transition: border-color 150ms, background 150ms; } .bn-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); } .bn-btn-ghost-dark { font-family: var(--font-body); font-weight: 600; font-size: 16px; padding: 18px 40px; border-radius: 999px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); display: inline-block; transition: border-color 150ms, color 150ms; } .bn-btn-ghost-dark:hover { border-color: var(--color-rich-gold); color: var(--color-gold-400); } .bn-link-gold { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--color-gold-400); transition: color 150ms; } .bn-link-gold:hover { color: #fff; } /* ---------- HEADER ---------- */ .bn-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background 280ms var(--ease-standard), border-color 280ms, backdrop-filter 280ms; } .bn-header.bn-scrolled { background: rgba(13,35,37,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: rgba(255,255,255,0.1); } .bn-header-inner { max-width: var(--container-max); margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; gap: 40px; } .bn-nav { display: flex; gap: 34px; margin-left: auto; align-items: center; } .bn-nav-link { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-soft-gray); transition: color 150ms; } .bn-nav-link:hover { color: #fff; } .bn-nav-link[aria-current="page"] { color: var(--color-gold-400); } .bn-nav-cta { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; padding: 12px 26px; border-radius: 999px; background: var(--color-rich-gold); color: #fff; transition: background 150ms; } .bn-nav-cta:hover { background: var(--color-gold-400); } .bn-mobile-btn { display: none; margin-left: auto; background: transparent; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; } .bn-mobile-panel { position: fixed; inset: 0; z-index: 200; background: var(--color-deep-forest); display: flex; flex-direction: column; padding: 28px 32px; opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-standard); } .bn-mobile-panel.bn-open { opacity: 1; pointer-events: auto; } .bn-mobile-panel nav { display: flex; flex-direction: column; gap: 4px; margin-top: 48px; } .bn-mobile-link { font-family: var(--font-display); font-weight: 900; font-size: 34px; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 18px 0; } .bn-mobile-link.bn-accent { color: var(--color-rich-gold); } .bn-mobile-phone { margin-top: auto; text-align: center; padding: 14px 0; font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--color-gold-300); } .bn-mobile-cta { margin-top: 12px; text-align: center; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 18px; border-radius: 999px; background: var(--color-rich-gold); color: #fff; } @media (max-width: 860px) { .bn-nav { display: none; } .bn-mobile-btn { display: block; } } /* ---------- SERVICE / PORTFOLIO CARD HOVERS ---------- */ .bn-svc .bn-svc-img { transition: transform .6s var(--ease-standard); } .bn-svc:hover .bn-svc-img { transform: scale(1.05); } .bn-svc .bn-arrow { display: inline-block; transition: transform .3s; } .bn-svc:hover .bn-arrow { transform: translateX(6px); } /* ---------- SHARED RESPONSIVE GRID COLLAPSES ---------- */ @media (max-width: 860px) { .bn-2col, .bn-svc-grid, .bn-step-grid, .bn-stat-grid, .bn-port-grid { grid-template-columns: 1fr !important; } .bn-hero-h { font-size: 48px !important; } .bn-foot-grid { grid-template-columns: 1fr 1fr !important; } } /* ---------- HOVER UTILITIES (replace the old framework's style-hover) ---------- */ .bn-hv-gold-bg { transition: background 150ms; } .bn-hv-gold-bg:hover { background: var(--color-gold-400) !important; } .bn-hv-white:hover { color: #fff !important; } .bn-hv-gold:hover { color: var(--color-gold-400) !important; } .bn-hv-ghost-light:hover { border-color: #fff !important; background: rgba(255,255,255,0.12) !important; } .bn-hv-ghost-gold:hover { border-color: var(--color-rich-gold) !important; color: var(--color-gold-400) !important; } /* ---------- FOOTER ---------- */ .bn-foot-link { font-family: var(--font-body); font-size: 14px; color: var(--color-soft-gray); transition: color 150ms; } .bn-foot-link:hover { color: #fff; } .bn-foot-button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; } .bn-foot-email { white-space: nowrap; } @media (max-width: 900px) { .bn-foot-email { white-space: normal; overflow-wrap: anywhere; } } /* ---------- OPTIONAL ANALYTICS CONSENT ---------- */ .bn-consent[hidden] { display: none; } .bn-consent { position: fixed; z-index: 500; left: 50%; bottom: 24px; width: min(920px, calc(100% - 32px)); transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 24px 26px; border: 1px solid rgba(201,168,106,.42); border-radius: 14px; background: #0D2325; color: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.38); font-family: var(--font-body); } .bn-consent__copy { max-width: 610px; } .bn-consent__eyebrow { margin-bottom: 5px; color: var(--color-gold-300); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .bn-consent h2 { margin: 0 0 6px; color: #fff; font-family: var(--font-display); font-size: 21px; font-weight: 900; line-height: 1.2; text-transform: uppercase; } .bn-consent p { margin: 0; color: #D7D7D7; font-size: 14px; line-height: 1.55; } .bn-consent a { color: var(--color-gold-300); text-decoration: underline; text-underline-offset: 3px; } .bn-consent__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .bn-consent button { appearance: none; border-radius: 999px; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 12px 18px; } .bn-consent__decline { border: 1px solid rgba(255,255,255,.46); background: transparent; color: #fff; } .bn-consent__accept { border: 1px solid var(--color-rich-gold); background: var(--color-rich-gold); color: #fff; } .bn-consent__decline:hover { border-color: #fff; background: rgba(255,255,255,.08); } .bn-consent__accept:hover { background: var(--color-gold-400); } .bn-consent button:focus-visible, .bn-consent a:focus-visible, .bn-foot-button:focus-visible { outline: 3px solid var(--color-gold-300); outline-offset: 3px; } @media (max-width: 760px) { .bn-consent { bottom: 12px; width: calc(100% - 24px); align-items: stretch; flex-direction: column; gap: 18px; padding: 22px; } .bn-consent__actions { width: 100%; } .bn-consent__actions button { flex: 1; } } @media (max-width: 430px) { .bn-consent__actions { align-items: stretch; flex-direction: column-reverse; } .bn-consent__actions button { width: 100%; } }