:root{ --maxw: 1024px; /* Brand */ --brand-blue: #0775AA; --brand-lime: #D8E147; /* Light mode */ --text: #111827; --muted: #6b7280; --bg: #ffffff; --line: #e5e7eb; --header-bg: #ffffff; --link: var(--brand-blue); } *{ box-sizing:border-box; } /* Base background on html */ html{ background: var(--bg); } body{ margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); background: transparent; line-height:1.65; position: relative; z-index: 0; } /* ================= WATERMARK ================= */ body::before{ content:""; position: fixed; inset: 0; background-image: url("../images/Nassington logo.png"); background-repeat: no-repeat; /* Centered but shifted down so it won't sit under sticky header */ background-position: center 58%; /* Smaller, responsive, capped */ background-size: min(520px, 55vw); opacity: 0.05; pointer-events: none; z-index: 0; } /* Ensure content sits above watermark */ body > header, body > main, body > footer{ position: relative; z-index: 1; } /* ================= LAYOUT ================= */ .container{ max-width: var(--maxw); margin: 0 auto; padding: 0 18px; } header{ border-bottom:1px solid var(--line); position: sticky; top:0; background: var(--header-bg); } .main-nav{ display:flex; align-items:center; justify-content:space-between; padding: 14px 0; gap: 18px; } /* ================= LOGO ================= */ /* Default: make inner pages visibly larger by default */ .logo-img{ height: 72px; /* IMPORTANT: bigger by default */ width: auto; display: block; object-fit: contain; /* helps if image has odd sizing */ } /* Home page – bigger than inner pages */ .home .logo-img{ height: 100px; } /* Give header extra vertical room on pages with big logo */ .services .main-nav, .about .main-nav{ padding: 18px 0; } .home .main-nav{ padding: 20px 0; } /* ================= NAV ================= */ .nav-links a{ margin-left: 14px; text-decoration:none; color:var(--text); } .nav-links a:hover{ text-decoration: underline; } .nav-links a[aria-current="page"]{ text-decoration: underline; } /* ================= HERO ================= */ .hero{ padding: 56px 0 20px; } /* Home hero spacing to match bigger logo */ .home .hero{ padding-top: 56px; } .hero h1{ font-size: clamp(28px, 3vw, 42px); line-height: 1.15; margin: 0 0 12px; max-width: 24ch; border-left: 6px solid var(--brand-lime); padding-left: 14px; } .hero-text{ margin:0; color: var(--muted); max-width: 75ch; font-size: 18px; } /* ================= SECTIONS ================= */ section{ padding: 22px 0; } .intro p{ margin:0; max-width: 85ch; } .capabilities article{ border-top:1px solid var(--line); padding-top: 16px; margin-top: 16px; } .capabilities h3{ margin: 0 0 6px; font-size: 18px; } .capabilities p{ margin:0; color: var(--muted); max-width: 90ch; } .industries ul{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); } /* ================= FOOTER ================= */ footer{ border-top:1px solid var(--line); margin-top: 42px; padding: 18px 0; color: var(--muted); font-size: 14px; } .footer-note{ margin: 10px 0 0; max-width: 95ch; } /* ================= LINKS ================= */ a{ color: var(--link); } a:hover{ text-decoration: underline; } /* ================= DARK MODE ================= */ /* Works automatically if the OS/browser is in dark mode */ @media (prefers-color-scheme: dark){ :root{ --bg: #0b1220; --text: #e5e7eb; --muted: #9ca3af; --line: #1f2937; --header-bg: #0b1220; } html{ background: var(--bg); } header{ background: var(--header-bg); border-bottom: 1px solid var(--line); } /* Make watermark visible on dark */ body::before{ opacity: 0.07; filter: invert(1) grayscale(1) brightness(1.35); } } /* Manual dark mode override (if you want it) */ /* Add: to force dark mode */ html.dark{ background: #0b1220; } html.dark body{ color: #e5e7eb; } html.dark header{ background: #0b1220; border-bottom: 1px solid #1f2937; } html.dark body::before{ opacity: 0.07; filter: invert(1) grayscale(1) brightness(1.35); } html.dark .nav-links a{ color: #e5e7eb; } html.dark .hero-text, html.dark .capabilities p, html.dark footer{ color: #9ca3af; }