/* ==========================================================================
NOIRX SERVICES — MAIN STYLESHEET
File: css/main.css
── HOW THEMES WORK ─────────────────────────────────────────────────────
Dark theme → defined in :root, active by default on all pages.
Light theme → body.theme-light overrides ONLY what needs to change.
KEY DESIGN DECISION — GOLD IN LIGHT THEME:
Bright gold (#F0C040) is unreadable on a white background.
In light mode we use TWO gold values:
--color-gold → deep rich amber #8B6914 (text, eyebrows, headings)
--color-gold-bright → bright #F0C040 (buttons, fills, backgrounds only)
This preserves the brand while ensuring WCAG-AA contrast on white.
Light theme defaults on: pages/noirx-clean.html ()
Dark theme defaults on: index.html, pages/noirx-tech.html
Users can toggle either way via the nav button — js/theme.js handles that.
========================================================================== */
/* ── GOOGLE FONTS ─────────────────────────────────────────────────────────
Playfair Display — elegant serif for headings (luxury feel)
DM Sans — clean sans-serif for body (modern, readable)
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME (default — :root applies everywhere)
══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Backgrounds ─────────────────────────────────────────────────── */
--color-bg: #050505; /* Page background — near black */
--color-bg-2: #0E0E0E; /* Section backgrounds */
--color-bg-3: #141414; /* Cards / panels */
--color-bg-card: #1C1C1C; /* Card hover state */
/* ── Text ────────────────────────────────────────────────────────── */
--color-text: #F8F6F0; /* Primary — off-white */
--color-text-muted: rgba(248,246,240,0.52); /* Subdued secondary text */
--color-text-on-btn: #0A0A0A; /* Text sitting ON a gold button*/
/* ── Gold (accent) ───────────────────────────────────────────────── */
/* In dark theme, bright gold works on dark backgrounds */
--color-gold: #F0C040; /* Primary gold — headings, labels, borders */
--color-gold-bright: #F0C040; /* Same in dark — only differs in light theme */
--color-gold-dim: #C9A227; /* Darker gold for hover/pressed states */
--color-gold-light: #FFE270; /* Lighter gold for highlights */
--color-gold-subtle: rgba(240,192,64,0.08); /* Very faint gold wash */
/* ── Borders ─────────────────────────────────────────────────────── */
--color-border: rgba(240,192,64,0.12);
--color-border-med: rgba(240,192,64,0.28);
--color-border-strong: rgba(240,192,64,0.55);
/* ── Buttons ─────────────────────────────────────────────────────── */
--color-btn-bg: #F0C040; /* Gold fill */
--color-btn-text: #0A0A0A; /* Always dark — readable on gold */
--color-btn-hover: #FFE270; /* Lighter gold on hover */
/* ── Navigation ──────────────────────────────────────────────────── */
--color-nav-bg: rgba(5,5,5,0.97);
--color-nav-bg-solid: rgba(5,5,5,1.00);
/* ── Footer ──────────────────────────────────────────────────────── */
--color-footer-border: rgba(240,192,64,0.10);
--color-footer-copy: rgba(248,246,240,0.22);
/* ── Ribbon ──────────────────────────────────────────────────────── */
--color-ribbon-bg: #F0C040;
--color-ribbon-text: #0A0A0A;
/* ── Dividers & Shadows ──────────────────────────────────────────── */
--color-divider: rgba(240,192,64,0.15);
--shadow-card: 0 4px 32px rgba(0,0,0,0.6);
/* ── Image Overlays (fade images into the page background) ──────── */
--overlay-hero: linear-gradient(to top, #050505 0%, rgba(5,5,5,0.55) 45%, rgba(5,5,5,0.1) 100%);
--overlay-card: linear-gradient(to top, rgba(5,5,5,0.97) 0%, rgba(5,5,5,0.45) 55%, rgba(5,5,5,0.05) 100%);
--overlay-split: linear-gradient(to right, #050505 0%, transparent 40%);
/* ── Theme toggle icon ───────────────────────────────────────────── */
--theme-icon: '☀'; /* Shows sun (= click to go light) when dark is active */
}
/* ══════════════════════════════════════════════════════════════════════════
LIGHT THEME (body.theme-light)
Only overrides what MUST change. Everything else inherits from :root.
THE READABILITY FIX:
- Bright gold #F0C040 has a contrast ratio of only ~1.4:1 on white — unusable.
- We replace --color-gold with deep amber #7A5800 for text/labels/borders.
- We keep --color-gold-bright at #F0C040 for gold FILLS (buttons, ribbon bg).
- This gives the brand a warm "daytime gold" feel that's still unmistakably Noirx.
══════════════════════════════════════════════════════════════════════════ */
body.theme-light {
/* ── Backgrounds ─────────────────────────────────────────────────── */
--color-bg: #FAFAF7; /* Warm white — not stark pure white */
--color-bg-2: #F2EFE8; /* Warm cream for alternate sections */
--color-bg-3: #EAE7DE; /* Cards — warm light tan */
--color-bg-card: #E1DECE; /* Card hover — slightly deeper warm tan */
/* ── Text ────────────────────────────────────────────────────────── */
--color-text: #1A1611; /* Near-black with warm undertone */
--color-text-muted: rgba(26,22,17,0.55); /* Subdued warm grey */
--color-text-on-btn:#1A1611; /* Text on gold buttons */
/* ── Gold — SPLIT INTO TWO ROLES ────────────────────────────────── */
/* --color-gold is used for TEXT, borders, labels — must be dark enough */
--color-gold: #7A5800; /* Deep amber — 4.7:1 contrast on white ✓ WCAG AA */
/* --color-gold-bright is used for FILLS only (buttons, ribbon bg) */
--color-gold-bright: #F0C040; /* Bright gold for backgrounds only */
/* Hover/dim variants scaled to match the deeper amber */
--color-gold-dim: #5C4100; /* Darker amber for hover on text */
--color-gold-light: #A87C10; /* Lighter amber for highlights */
--color-gold-subtle: rgba(122,88,0,0.07); /* Very faint amber wash */
/* ── Borders ─────────────────────────────────────────────────────── */
/* Use deep amber so borders are visible on warm-white background */
--color-border: rgba(122,88,0,0.18);
--color-border-med: rgba(122,88,0,0.30);
--color-border-strong: rgba(122,88,0,0.55);
/* ── Buttons — bright gold fill, dark text ────────────────────────
Buttons use --color-gold-bright (NOT --color-gold) so they stay
vivid and feel like the same brand. Text stays dark for contrast. */
--color-btn-bg: #F0C040; /* Bright gold fill — same as dark theme */
--color-btn-text: #1A1611; /* Dark warm text */
--color-btn-hover: #FFE270; /* Lighter gold hover */
/* ── Navigation ──────────────────────────────────────────────────── */
--color-nav-bg: rgba(250,250,247,0.97);
--color-nav-bg-solid: rgba(250,250,247,1.00);
/* ── Footer ──────────────────────────────────────────────────────── */
--color-footer-border: rgba(122,88,0,0.15);
--color-footer-copy: rgba(26,22,17,0.40);
/* ── Ribbon ──────────────────────────────────────────────────────── */
--color-ribbon-bg: #F0C040; /* Bright gold ribbon — stays vivid */
--color-ribbon-text: #1A1611; /* Dark text on ribbon */
/* ── Dividers & Shadows ──────────────────────────────────────────── */
--color-divider: rgba(122,88,0,0.18);
--shadow-card: 0 4px 24px rgba(0,0,0,0.09);
/* ── Image Overlays — fade to warm white instead of black ────────── */
--overlay-hero: linear-gradient(to top, #FAFAF7 0%, rgba(250,250,247,0.60) 45%, rgba(250,250,247,0.12) 100%);
--overlay-card: linear-gradient(to top, rgba(250,250,247,0.97) 0%, rgba(250,250,247,0.50) 55%, rgba(250,250,247,0.05) 100%);
--overlay-split: linear-gradient(to right, #FAFAF7 0%, transparent 40%);
/* ── Theme toggle icon ───────────────────────────────────────────── */
--theme-icon: '◑'; /* Shows half-moon (= click to go dark) when light active */
}
/* ── Extra specificity fix: section-eyebrow uses --color-gold for text.
In light mode that must also resolve to the deep amber.
This is already handled since --color-gold IS deep amber in light mode,
but we add this rule for any component that directly references the
hardcoded bright-gold value via a one-off inline style. */
body.theme-light .section-eyebrow,
body.theme-light .nav-links a.is-active,
body.theme-light .ribbon__track { color: var(--color-gold); }
/* Cursor ring uses a hardcoded rgba in :root — override for light mode */
body.theme-light .cursor-ring {
border-color: rgba(122,88,0,0.35);
}
/* ══════════════════════════════════════════════════════════════════════════
RESET & BASE
══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: 'DM Sans', sans-serif;
font-weight: 400;
line-height: 1.6;
overflow-x: hidden;
cursor: none;
-webkit-font-smoothing: antialiased;
/* Smooth colour fade when toggling themes */
transition: background-color 0.45s ease, color 0.45s ease;
}
img { max-width:100%; display:block; }
ul, ol { list-style:none; }
a { color:inherit; text-decoration:none; }
/* ══════════════════════════════════════════════════════════════════════════
CUSTOM CURSOR
A gold dot tracks the mouse exactly. A hollow ring lerps behind it.
Movement in js/main.js — hover states toggled via .is-hovering class.
══════════════════════════════════════════════════════════════════════════ */
.cursor-dot {
position: fixed;
width: 10px; height: 10px;
background: var(--color-gold-bright); /* Always bright gold — it's a dot, not text */
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%,-50%);
transition: width 0.2s, height 0.2s;
}
.cursor-ring {
position: fixed;
width: 32px; height: 32px;
border: 1.5px solid rgba(240,192,64,0.45);
border-radius: 50%;
pointer-events: none;
z-index: 9998;
transform: translate(-50%,-50%);
transition: width 0.25s, height 0.25s;
}
.cursor-dot.is-hovering { width: 5px; height: 5px; }
.cursor-ring.is-hovering { width: 50px; height: 50px; }
/* ══════════════════════════════════════════════════════════════════════════
NAVIGATION
Fixed top bar. js/nav.js adds .is-scrolled after 80px of scroll.
══════════════════════════════════════════════════════════════════════════ */
.site-nav {
position: fixed;
top:0; left:0; right:0;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 72px;
background: linear-gradient(to bottom, var(--color-nav-bg) 0%, transparent 100%);
transition: background 0.4s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
/* After scrolling: fully opaque + subtle shadow */
.site-nav.is-scrolled {
background: var(--color-nav-bg-solid);
padding-top: 18px;
padding-bottom: 18px;
box-shadow: 0 1px 0 var(--color-border);
}
/* Logo image container */
.nav-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
/* Logo ![]()
— fixed height, auto width */
.nav-brand__img {
height: 100px; /* Slightly taller so the real logos breathe properly */
width: auto;
display: block;
object-fit: contain;
transition: opacity 0.3s ease;
/* No filter needed — logos are gold-on-black PNGs, work on dark nav.
Light theme: the nav background is white/cream, black areas of the PNG
will show. If this looks wrong, replace with a transparent-bg PNG logo. */
}
.nav-brand__img:hover { opacity: 0.85; }
/* Light theme: add a soft drop-shadow so the gold logo reads on cream bg */
body.theme-light .nav-brand__img {
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}
.nav-brand__sub {
font-size: 0.5rem;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--color-text-muted);
line-height: 1;
}
/* Centre navigation links */
.nav-links {
display: flex;
gap: 48px;
}
.nav-links a {
font-size: 0.68rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-text-muted);
transition: color 0.3s ease;
}
.nav-links a:hover,
.nav-links a.is-active {
color: var(--color-gold); /* deep amber in light mode — readable ✓ */
}
/* Right group: CTA button + toggle */
.nav-right {
display: flex;
align-items: center;
gap: 14px;
}
/* Outlined CTA button in nav */
.nav-cta {
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
border: 1px solid var(--color-border-med);
color: var(--color-gold); /* deep amber in light = readable */
padding: 12px 26px;
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.nav-cta:hover {
background: var(--color-gold-bright); /* bright gold fill on hover */
color: var(--color-btn-text);
border-color: var(--color-gold-bright);
}
/* Back link on sub-pages */
.nav-back {
font-size: 0.65rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 8px;
transition: color 0.3s;
}
.nav-back::before { content: '←'; }
.nav-back:hover { color: var(--color-gold); }
/* ══════════════════════════════════════════════════════════════════════════
THEME TOGGLE BUTTON
Small circular button. Icon is CSS content from --theme-icon variable.
Click logic in js/theme.js.
══════════════════════════════════════════════════════════════════════════ */
.theme-toggle {
background: none;
border: 1px solid var(--color-border-med);
cursor: none;
border-radius: 50%;
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
/* In dark: gold. In light: deep amber — both readable on their backgrounds */
color: var(--color-gold);
font-size: 1rem;
flex-shrink: 0;
transition: background 0.3s, border-color 0.3s, transform 0.25s;
}
.theme-toggle:hover {
background: var(--color-gold-subtle);
border-color: var(--color-gold);
transform: rotate(20deg);
}
/* Icon is inserted purely via CSS — updates with the CSS variable */
.theme-toggle::before {
content: var(--theme-icon);
}
/* ══════════════════════════════════════════════════════════════════════════
BUTTONS
══════════════════════════════════════════════════════════════════════════ */
/* Primary — bright gold fill in BOTH themes (fills are not text, always readable) */
.btn-primary {
display: inline-block;
background: var(--color-btn-bg); /* --color-btn-bg = #F0C040 in both themes */
color: var(--color-btn-text);
padding: 18px 44px;
font-family: 'DM Sans', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
border: none;
transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
}
.btn-primary:hover {
background: var(--color-btn-hover);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(240,192,64,0.3);
}
/* Ghost — outlined, gold text */
.btn-ghost {
display: inline-block;
color: var(--color-gold); /* deep amber in light = readable ✓ */
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
border: 1px solid var(--color-border-med);
padding: 18px 36px;
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.btn-ghost:hover {
background: var(--color-gold-subtle);
border-color: var(--color-gold);
box-shadow: 0 4px 16px rgba(122,88,0,0.12);
}
/* ══════════════════════════════════════════════════════════════════════════
SECTION LABELS & TITLES
══════════════════════════════════════════════════════════════════════════ */
/* Small all-caps eyebrow label, e.g. "Our Mission" */
.section-eyebrow {
display: block;
font-size: 0.58rem;
letter-spacing: 0.52em;
text-transform: uppercase;
/* Uses --color-gold:
dark mode → bright #F0C040 on dark bg ✓
light mode → deep amber #7A5800 on warm white ✓ */
color: var(--color-gold);
margin-bottom: 18px;
}
/* Large Playfair heading */
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 400;
line-height: 1.1;
margin-bottom: 72px;
color: var(--color-text);
}
/* italic inside headings — gold in dark, amber in light */
.section-title em, h1 em, h2 em {
font-style: italic;
color: var(--color-gold);
}
/* ══════════════════════════════════════════════════════════════════════════
TICKER RIBBON
══════════════════════════════════════════════════════════════════════════ */
.ribbon {
background: var(--color-ribbon-bg); /* bright gold in both themes */
color: var(--color-ribbon-text);
overflow: hidden;
padding: 16px 0;
white-space: nowrap;
}
.ribbon__track {
display: inline-flex;
gap: 60px;
animation: ticker 22s linear infinite;
}
.ribbon__track span { font-size:0.65rem; letter-spacing:0.35em; text-transform:uppercase; font-weight:500; }
.ribbon__track .ribbon__dot { opacity:0.4; }
@keyframes ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ══════════════════════════════════════════════════════════════════════════
SCROLL REVEAL
Elements start invisible and slide up into view.
js/main.js adds .reveal--visible via IntersectionObserver.
══════════════════════════════════════════════════════════════════════════ */
.reveal,
.reveal--delay {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal--delay { transition-delay: 0.15s; }
.reveal.reveal--visible,
.reveal--delay.reveal--visible {
opacity: 1;
transform: translateY(0);
}
/* ══════════════════════════════════════════════════════════════════════════
FOOTER
══════════════════════════════════════════════════════════════════════════ */
.site-footer {
border-top: 1px solid var(--color-footer-border);
padding: 48px 72px;
background: var(--color-bg-2);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
transition: background 0.45s ease;
}
.site-footer__logo-img {
height: 44px; width: auto;
object-fit: contain;
/* No filter — gold-on-black PNG reads fine on dark footer backgrounds */
}
body.theme-light .site-footer__logo-img {
/* Light theme: soft shadow so gold reads on cream background */
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}
.site-footer__copy {
font-size: 0.6rem;
letter-spacing: 0.2em;
color: var(--color-footer-copy);
}
.site-footer__links { display:flex; gap:36px; flex-wrap:wrap; }
.site-footer__links a { font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--color-text-muted); transition:color 0.3s; }
.site-footer__links a:hover { color: var(--color-gold); }
/* ══════════════════════════════════════════════════════════════════════════
UTILITIES
══════════════════════════════════════════════════════════════════════════ */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.divider {
width:100%; height:1px;
background: linear-gradient(to right, transparent, var(--color-divider), transparent);
}
/* ══════════════════════════════════════════════════════════════════════════
HERO ENTRANCE ANIMATIONS
anim-delay-N classes stagger each hero element's fade-in.
══════════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
from { opacity:0; transform:translateY(28px); }
to { opacity:1; transform:translateY(0); }
}
.anim-delay-1 { opacity:0; animation: fadeUp 0.9s ease 0.10s forwards; }
.anim-delay-2 { opacity:0; animation: fadeUp 0.9s ease 0.30s forwards; }
.anim-delay-3 { opacity:0; animation: fadeUp 0.9s ease 0.50s forwards; }
.anim-delay-4 { opacity:0; animation: fadeUp 0.9s ease 0.70s forwards; }
.anim-delay-5 { opacity:0; animation: fadeUp 0.9s ease 0.90s forwards; }
/* ══════════════════════════════════════════════════════════════════════════
RESPONSIVE — MOBILE (max-width: 900px)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.site-nav { padding: 18px 24px; }
.nav-links, .nav-cta { display: none; } /* TODO: add hamburger menu */
.theme-toggle { display: flex; } /* Keep toggle visible on mobile */
.site-footer { flex-direction:column; align-items:flex-start; padding:40px 24px; }
}