/* ── Elitez Site Supervisor · Canonical theme ───────────────────────────────── PRIMARY (default) : Site Office — light, hi-vis safety-orange, Saira Condensed ALT (.theme-dark): Industrial Steel — deep concrete, sodium amber, Archivo Black Both share the same DOM. Toggle switches a single class on . ──────────────────────────────────────────────────────────────────────────── */ :root { /* ── Site Office light palette ─── */ --bg: #F2EEE8; --bg-deep: #E5DED2; --surface: #FFFFFF; --paper: #FFFFFF; --paper-soft: #FAF7F1; --card: #FFFFFF; --concrete: #C8C2B6; --steel: #5C5A56; --ink: #1A1815; --text: #1A1815; --text-soft: #2D2A24; --muted: #5C5A56; --muted2: #8A857B; --border: rgba(26, 24, 21, 0.12); --border2: rgba(26, 24, 21, 0.22); --hairline: rgba(26, 24, 21, 0.55); --accent: #FF6A1A; /* hi-vis safety orange */ --accent-deep: #C24800; --accent-2: #C24800; /* deep copper-orange for legacy hooks */ --accent-3: #FFC400; /* safety yellow */ --accent-ink: #1A1815; --safety: #FFC400; --amber: #F4B826; --good: #1F7A3A; --warn: #C24800; --bad: #B23A3A; --shadow-1: 0 1px 0 rgba(26,24,21,0.06); --shadow-2: 6px 6px 0 var(--ink); --shadow-3: 8px 8px 0 var(--ink); --r-sm: 0; /* Site Office aesthetic = sharp corners */ --r-md: 0; --r-lg: 0; --font-display: 'Saira Condensed', sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --hazard-stripe: repeating-linear-gradient(45deg, var(--safety) 0 16px, var(--ink) 16px 32px); } /* ── Industrial Steel dark theme ─── */ html.theme-dark { --bg: #1B1A1B; --bg-deep: #0F0E0F; --surface: #2A2828; --paper: #2A2828; --paper-soft: #3A3838; --card: #2A2828; --concrete: #4D4845; --steel: #6B6E72; --ink: #F5F2EE; --text: #F5F2EE; --text-soft: #C8C2BA; --muted: #807A72; --muted2: #5C5853; --border: rgba(245, 242, 238, 0.10); --border2: rgba(245, 242, 238, 0.22); --hairline: rgba(245, 242, 238, 0.55); --accent: #FF6A1A; --accent-deep: #FFB347; --accent-2: #FFB347; --accent-3: #FFB347; --accent-ink: #0F0E0F; --safety: #FFB347; --amber: #FFB347; --shadow-2: 6px 6px 0 #FF6A1A; --shadow-3: 8px 8px 0 #FF6A1A; --hazard-stripe: repeating-linear-gradient(45deg, var(--accent) 0 18px, var(--bg-deep) 18px 36px); --font-display: 'Archivo Black', sans-serif; --font-body: 'Archivo', -apple-system, sans-serif; } /* ── Reset ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: radial-gradient(circle at 18% 0%, rgba(255, 106, 26, 0.05), transparent 40%), radial-gradient(circle at 88% 96%, rgba(244, 184, 38, 0.04), transparent 50%); } html.theme-dark body { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px), radial-gradient(ellipse at 80% 0%, rgba(255, 106, 26, 0.12), transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(255, 179, 71, 0.08), transparent 50%); } a { color: var(--accent-deep); text-decoration: none; transition: color 0.18s ease; } a:hover { color: var(--ink); } html.theme-dark a:hover { color: var(--accent); } img, svg { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* ── Typography ────────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.005em; color: var(--ink); margin: 0 0 0.5em 0; line-height: 1.05; text-transform: uppercase; } h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 800; letter-spacing: -0.005em; line-height: 0.92; } h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; } h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 700; } h4 { font-size: 1.05rem; font-weight: 700; } p { margin: 0 0 1em 0; } p.lead, p.lede { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; color: var(--text-soft); max-width: 720px; } p.lead strong, p.lede strong { color: var(--ink); font-weight: 600; } .label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); display: inline-block; } .label-muted { color: var(--muted); } .numeric { font-family: var(--font-mono); font-feature-settings: 'tnum' on, 'lnum' on; } .serif { font-family: var(--font-display); } /* ── Layout ───────────────────────────────────────────────────────────────── */ .container { max-width: 1320px; margin: 0 auto; padding: 0 28px; } .container-narrow { max-width: 860px; margin: 0 auto; padding: 0 28px; } .container-wide { max-width: 1320px; margin: 0 auto; padding: 0 28px; } @media (max-width: 768px) { .container, .container-narrow, .container-wide { padding: 0 18px; } } section { padding: 80px 0; position: relative; } section.tight { padding: 56px 0; } section.compact { padding: 32px 0; } @media (max-width: 768px) { section { padding: 56px 0; } section.tight { padding: 36px 0; } } .divider { height: 1px; background: var(--border); margin: 0; } .eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--accent); } .section-num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--muted); } /* ── Hazard tape — top + bottom of every page ─────────────────────────────── */ .hazard { height: 14px; background: var(--hazard-stripe); } .hazard.thin { height: 6px; } /* ── Top banner (DRAFT marquee) ───────────────────────────────────────────── */ .top-banner { background: var(--ink); color: var(--paper); text-align: center; font-size: 0.74rem; padding: 7px 12px; font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 2px solid var(--accent); } .top-banner a { color: var(--safety); border-bottom: 1px solid var(--safety); } html.theme-dark .top-banner { background: var(--bg-deep); color: var(--paper); } /* ── Navigation — Site Office topbar ──────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 200; background: var(--paper); border-bottom: 2px solid var(--ink); } html.theme-dark .nav { background: var(--bg-deep); border-bottom-color: var(--paper); } .nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; max-width: 1320px; margin: 0 auto; gap: 24px; } @media (max-width: 768px) { .nav-inner { padding: 12px 18px; } } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--ink); letter-spacing: 0.02em; text-transform: uppercase; } .brand .brand-mark { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--accent); text-transform: uppercase; } .brand .brand-divider { width: 8px; height: 2px; background: var(--accent); display: inline-block; } html.theme-dark .brand .brand-mark { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav-links a { display: inline-block; padding: 8px 12px; font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid transparent; transition: all 0.15s ease; } .nav-links a:hover, .nav-links a.active { color: var(--accent-deep); border-bottom-color: var(--accent); } html.theme-dark .nav-links a { color: var(--paper); } html.theme-dark .nav-links a:hover, html.theme-dark .nav-links a.active { color: var(--accent); border-bottom-color: var(--accent); } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--ink); color: var(--paper) !important; border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase; transition: all 0.18s ease; } .nav-cta:hover { background: var(--accent); color: var(--paper) !important; border-color: var(--accent); } html.theme-dark .nav-cta { background: var(--accent); color: var(--bg-deep) !important; border-color: var(--accent); } html.theme-dark .nav-cta:hover { background: var(--accent-2); color: var(--bg-deep) !important; border-color: var(--accent-2); } .nav-admin { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border2); transition: all 0.18s ease; } .nav-admin::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent); } .nav-admin:hover { color: var(--accent-deep); border-color: var(--accent); background: rgba(255, 106, 26, 0.06); } html.theme-dark .nav-admin { color: var(--text-soft); border-color: var(--border2); } html.theme-dark .nav-admin:hover { color: var(--accent); border-color: var(--accent); } /* ── Theme toggle — Site Office <-> Industrial Steel ──────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 11px; background: transparent; border: 1px solid var(--border2); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); transition: all 0.18s ease; cursor: pointer; } .theme-toggle:hover { color: var(--accent-deep); border-color: var(--accent); background: rgba(255, 106, 26, 0.06); } .theme-toggle .swatch { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--ink); background: var(--paper); position: relative; } .theme-toggle .swatch::after { content: ""; position: absolute; inset: 0; background: var(--accent); clip-path: polygon(0 0, 100% 0, 0 100%); } html.theme-dark .theme-toggle { color: var(--text-soft); border-color: var(--border2); } html.theme-dark .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: rgba(255,106,26,0.10); } html.theme-dark .theme-toggle .swatch { background: var(--bg-deep); border-color: var(--paper); } .theme-toggle .label-light { display: inline; } .theme-toggle .label-dark { display: none; } html.theme-dark .theme-toggle .label-light { display: none; } html.theme-dark .theme-toggle .label-dark { display: inline; } /* Hamburger */ .hamburger { display: none; width: 28px; height: 22px; flex-direction: column; justify-content: space-between; background: transparent; border: 2px solid var(--ink); padding: 4px; cursor: pointer; } .hamburger span { display: block; width: 100%; height: 2px; background: var(--ink); transition: transform 0.25s ease, opacity 0.2s ease; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } html.theme-dark .hamburger { border-color: var(--paper); } html.theme-dark .hamburger span { background: var(--paper); } .mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--paper); padding: 80px 28px 32px 28px; display: none; flex-direction: column; gap: 0; z-index: 199; border-top: 14px solid transparent; border-image: var(--hazard-stripe) 14; } html.theme-dark .mobile-menu { background: var(--bg-deep); } .mobile-menu.open { display: flex; } .mobile-menu a { display: block; padding: 16px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--border); } html.theme-dark .mobile-menu a { color: var(--paper); border-bottom-color: var(--border); } .mobile-menu a:last-child { border-bottom: none; } .mobile-menu a.admin-link { margin-top: 10px; padding-top: 18px; border-top: 2px solid var(--accent); color: var(--accent-deep); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; display: flex; align-items: center; gap: 10px; } .mobile-menu a.admin-link::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--accent); } html.theme-dark .mobile-menu a.admin-link { color: var(--accent); } .mobile-menu .theme-toggle-mobile { margin-top: 24px; align-self: flex-start; } @media (max-width: 900px) { .nav-links { display: none; } .hamburger { display: flex; } .nav-cta { display: none; } .nav-admin { display: none; } .theme-toggle { display: none; } } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { padding: 60px 0 56px 0; position: relative; overflow: hidden; } .hero-inner { position: relative; z-index: 1; } .hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } .hero-meta > span { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .hero-meta > span:nth-child(2) { padding: 5px 10px; color: var(--paper); background: var(--accent); border: 1px solid var(--accent); } .hero-meta .dot { width: 8px; height: 8px; background: var(--accent); border: none; padding: 0; flex-shrink: 0; border-radius: 0; align-self: center; display: inline-block; } html.theme-dark .hero-meta > span { color: var(--text-soft); } html.theme-dark .hero-meta > span:nth-child(2) { background: var(--accent); color: var(--bg-deep); border-color: var(--accent); } .hero h1 { max-width: 16ch; } .hero h1 .em { color: var(--accent); font-style: normal; font-weight: 800; } .hero-deck { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; margin-top: 32px; align-items: start; } .hero-stats { display: grid; gap: 20px; border-left: 6px solid var(--accent); padding-left: 22px; margin-top: 8px; } .hero-stat .num { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.005em; color: var(--ink); display: block; line-height: 1; } .hero-stat .num em { font-style: normal; color: var(--accent); } .hero-stat .lbl { margin-top: 8px; font-size: 0.78rem; color: var(--muted); display: block; line-height: 1.5; } html.theme-dark .hero-stat .num { color: var(--paper); } .hero-cta-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } @media (max-width: 1024px) { .hero-deck { grid-template-columns: 1fr; gap: 36px; } } @media (max-width: 768px) { .hero { padding: 40px 0 48px 0; } } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 2px solid var(--ink); transition: all 0.18s ease; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--accent); color: var(--paper); border-color: var(--accent); } .btn-primary:hover { background: var(--ink); color: var(--accent); border-color: var(--ink); } html.theme-dark .btn-primary { color: var(--bg-deep); } html.theme-dark .btn-primary:hover { background: var(--paper); color: var(--bg-deep); border-color: var(--paper); } .btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); } .btn-secondary:hover { background: var(--ink); color: var(--paper); } html.theme-dark .btn-secondary { background: transparent; color: var(--paper); border-color: var(--paper); } html.theme-dark .btn-secondary:hover { background: var(--paper); color: var(--bg-deep); } .btn-copper { background: var(--accent-deep); color: var(--paper); border-color: var(--accent-deep); } .btn-copper:hover { background: var(--ink); color: var(--accent); border-color: var(--ink); } .btn-link { background: transparent; color: var(--accent-deep); padding: 8px 0; border: none; border-bottom: 2px solid var(--accent); } .btn-link:hover { color: var(--ink); } html.theme-dark .btn-link { color: var(--accent); } html.theme-dark .btn-link:hover { color: var(--paper); } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card, .card-flat, .card-deck { background: var(--paper); border: 2px solid var(--ink); padding: 26px; transition: transform 0.18s ease, box-shadow 0.18s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } html.theme-dark .card, html.theme-dark .card-flat, html.theme-dark .card-deck { background: var(--paper); border-color: var(--paper-soft); } .card-num { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--accent-deep); margin-bottom: 16px; text-transform: uppercase; } .card-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 12px 0; letter-spacing: 0.005em; text-transform: uppercase; color: var(--ink); } .card-desc { color: var(--muted); font-size: 0.94rem; line-height: 1.6; margin: 0; } html.theme-dark .card-title { color: var(--paper); } html.theme-dark .card-desc { color: var(--text-soft); } /* Grid */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ── Pillar list ─────────────────────────────────────────────────────────── */ .pillar-list { display: grid; gap: 0; } .pillar-item { display: grid; grid-template-columns: 80px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--border); align-items: start; } .pillar-item:first-child { border-top: 4px solid var(--accent); } .pillar-item:last-child { border-bottom: 1px solid var(--border); } .pillar-num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--accent); letter-spacing: -0.005em; line-height: 1; } .pillar-body h3 { font-size: 1.4rem; margin-bottom: 8px; color: var(--ink); } .pillar-body p { color: var(--muted); margin: 0; font-size: 0.95rem; line-height: 1.65; } html.theme-dark .pillar-body h3 { color: var(--paper); } html.theme-dark .pillar-body p { color: var(--text-soft); } @media (max-width: 640px) { .pillar-item { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; } .pillar-num { font-size: 1.8rem; } } /* ── Tier cards — work-order modules ─────────────────────────────────────── */ .tier-card { background: var(--paper); border: 2px solid var(--ink); padding: 26px 22px; position: relative; display: flex; flex-direction: column; height: 100%; transition: transform 0.18s ease, box-shadow 0.18s ease; } .tier-card::before { content: ""; position: absolute; top: -2px; left: 16px; width: 56px; height: 6px; background: var(--accent); } .tier-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); } html.theme-dark .tier-card { background: var(--paper); border-color: var(--paper-soft); } .tier-card .tier-cap { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--accent-deep); text-transform: uppercase; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .tier-card .tier-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; margin: 0 0 10px 0; letter-spacing: 0.005em; text-transform: uppercase; color: var(--ink); } html.theme-dark .tier-card .tier-title { color: var(--paper); } .tier-card .tier-line { font-size: 0.92rem; color: var(--muted); margin: 0 0 16px 0; line-height: 1.55; } html.theme-dark .tier-card .tier-line { color: var(--text-soft); } .tier-card ul { list-style: none; padding: 0; margin: 0 0 18px 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); } .tier-card ul li { padding: 6px 0 6px 18px; position: relative; border-top: 1px dashed var(--border); } .tier-card ul li:first-child { border-top: none; } .tier-card ul li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } html.theme-dark .tier-card ul { color: var(--text-soft); } .tier-card .tier-cta { margin-top: auto; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); padding-top: 12px; border-top: 2px solid var(--ink); } html.theme-dark .tier-card .tier-cta { color: var(--paper); border-top-color: var(--paper-soft); } /* ── Inflection timeline — change-log style ──────────────────────────────── */ .timeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 32px 0; border-top: 4px solid var(--accent); padding-top: 32px; position: relative; } .tl-step { padding: 0 16px 16px 16px; border-left: 1px solid var(--border); position: relative; } .tl-step:first-child { border-left: none; padding-left: 0; } .tl-step::before { content: ""; position: absolute; top: -38px; left: -6px; width: 11px; height: 11px; background: var(--paper); border: 2px solid var(--accent); } .tl-step:first-child::before { left: 0; } .tl-step.now::before { background: var(--accent); border-color: var(--accent); } html.theme-dark .tl-step::before { background: var(--bg); } html.theme-dark .tl-step.now::before { background: var(--accent); } .tl-step .tl-date { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; color: var(--accent-deep); text-transform: uppercase; margin-bottom: 8px; } .tl-step.now .tl-date { background: var(--accent); color: var(--paper); padding: 2px 8px; display: inline-block; } html.theme-dark .tl-step.now .tl-date { color: var(--bg-deep); } .tl-step .tl-event { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; color: var(--ink); line-height: 1.3; margin-bottom: 6px; } html.theme-dark .tl-step .tl-event { color: var(--paper); } .tl-step .tl-detail { font-size: 0.82rem; color: var(--muted); line-height: 1.55; } html.theme-dark .tl-step .tl-detail { color: var(--text-soft); } @media (max-width: 1024px) { .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 32px; padding-top: 28px; } .tl-step:nth-child(n+4)::before { top: -16px; } } @media (max-width: 640px) { .timeline { grid-template-columns: 1fr; } .tl-step { border-left: 4px solid var(--accent); padding-left: 22px; } .tl-step::before { left: -7px !important; top: 0 !important; } } /* ── Stat strip — site-board style ───────────────────────────────────────── */ .stat-strip { background: var(--ink); color: var(--paper); padding: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 6px solid var(--accent); border-bottom: 6px solid var(--accent); margin: 0 calc(50% - 50vw); padding-left: max(28px, calc((100vw - 1320px) / 2 + 28px)); padding-right: max(28px, calc((100vw - 1320px) / 2 + 28px)); } html.theme-dark .stat-strip { background: var(--bg-deep); } .stat-cell { border-left: 2px solid rgba(255,255,255,0.18); padding: 6px 0 6px 22px; } .stat-cell:first-child { border-left: none; padding-left: 0; } .stat-cell .stat-num { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; color: var(--paper); letter-spacing: -0.005em; display: block; line-height: 1; } .stat-cell .stat-num .unit { color: var(--accent); font-size: 0.72em; margin-left: 4px; font-weight: 700; } .stat-cell .stat-lbl { margin-top: 12px; font-size: 0.85rem; color: rgba(255,255,255,0.78); display: block; line-height: 1.5; } .stat-cell .stat-src { margin-top: 10px; font-family: var(--font-mono); font-size: 0.64rem; color: rgba(255,255,255,0.48); letter-spacing: 0.14em; text-transform: uppercase; } @media (max-width: 1024px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } .stat-cell { border-left: none; padding-left: 0; } } @media (max-width: 560px) { .stat-strip { grid-template-columns: 1fr; padding: 24px; } } /* ── Pull quote — full-bleed dark ────────────────────────────────────────── */ .pull-quote { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: 0.005em; line-height: 1.18; color: var(--ink); text-transform: uppercase; border-left: 6px solid var(--accent); padding: 12px 0 12px 28px; margin: 36px 0; max-width: 920px; font-style: normal; } html.theme-dark .pull-quote { color: var(--paper); } .pull-quote em { font-style: normal; color: var(--accent); } .pull-quote cite { display: block; margin-top: 18px; font-family: var(--font-mono); font-size: 0.74rem; font-style: normal; color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; } /* ── Tables ─────────────────────────────────────────────────────────────── */ table.spec { width: 100%; border-collapse: collapse; font-size: 0.92rem; border: 2px solid var(--ink); } table.spec th, table.spec td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } table.spec th { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper); background: var(--ink); border-bottom: 4px solid var(--accent); } table.spec tr:hover td { background: var(--bg-deep); } html.theme-dark table.spec { border-color: var(--paper-soft); } html.theme-dark table.spec th { background: var(--bg-deep); border-bottom-color: var(--accent); } /* ── Footer ─────────────────────────────────────────────────────────────── */ footer.site-footer { background: var(--ink); color: rgba(255,255,255,0.72); padding: 56px 0 28px 0; margin-top: 80px; border-top: 6px solid var(--accent); } html.theme-dark footer.site-footer { background: var(--bg-deep); } .site-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); } .site-footer h4 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; } .site-footer .brand { color: var(--paper); font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; } .site-footer .brand .brand-mark { color: var(--accent); } .site-footer .brand .brand-divider { background: var(--accent); } .site-footer p, .site-footer li { font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.72); } .site-footer a { color: rgba(255,255,255,0.86); } .site-footer a:hover { color: var(--accent); } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer ul li { padding: 3px 0; } .site-footer .copyline { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 0.12em; text-transform: uppercase; } @media (max-width: 768px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } .site-footer .copyline { flex-direction: column; gap: 8px; } } /* ── Animation utility ──────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.in { opacity: 1; transform: translateY(0); } /* ── Document ribbon ────────────────────────────────────────────────────── */ .doc-ribbon { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; background: var(--paper); border: 1px solid var(--ink); padding: 6px 12px; } .doc-ribbon .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; } /* ── Accent block — dark engagement panel ───────────────────────────────── */ .accent-block { background: var(--ink); color: var(--paper); padding: 56px; display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; border-top: 6px solid var(--accent); border-bottom: 6px solid var(--accent); margin: 0 calc(50% - 50vw); padding-left: max(56px, calc((100vw - 1320px) / 2 + 56px)); padding-right: max(56px, calc((100vw - 1320px) / 2 + 56px)); } html.theme-dark .accent-block { background: var(--bg-deep); } .accent-block h2 { color: var(--paper); max-width: 18ch; } .accent-block p { color: rgba(255,255,255,0.86); font-size: 1rem; max-width: 56ch; line-height: 1.6; } .accent-block .btn-primary { background: var(--accent); color: var(--paper); border-color: var(--accent); } .accent-block .btn-primary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } @media (max-width: 768px) { .accent-block { grid-template-columns: 1fr; padding: 36px 28px; } } /* ── Photo frame — Site Office CCT-style (image OR placeholder) ──────────── */ .photo-frame { position: relative; background: linear-gradient(135deg, var(--steel) 0%, var(--concrete) 100%); border: 2px solid var(--ink); overflow: hidden; display: flex; flex-direction: column; } .photo-frame.ratio-4-5 { aspect-ratio: 4 / 5; } .photo-frame.ratio-3-4 { aspect-ratio: 3 / 4; } .photo-frame.ratio-1-1 { aspect-ratio: 1 / 1; } .photo-frame.ratio-16-9 { aspect-ratio: 16 / 9; } .photo-frame.ratio-9-16 { aspect-ratio: 9 / 16; } .photo-frame.ratio-3-2 { aspect-ratio: 3 / 2; } .photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .photo-frame .head-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(26, 24, 21, 0.78); color: var(--paper); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; position: relative; z-index: 2; } .photo-frame .head-row .rec { display: flex; align-items: center; gap: 8px; color: var(--accent); } .photo-frame .head-row .rec::before { content: "●"; animation: ess-blink 1.8s infinite; } .photo-frame .legend, .photo-frame .photo-caption { position: relative; z-index: 2; margin-top: auto; padding: 12px 16px; background: rgba(255, 255, 255, 0.94); border-top: 2px solid var(--ink); font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.55; color: var(--ink); } .photo-frame .legend strong, .photo-frame .photo-caption strong { color: var(--accent-deep); } .photo-frame .legend .placeholder-mark, .photo-frame .photo-caption .frame-id { font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.16em; color: var(--accent-deep); margin-right: 10px; text-transform: uppercase; } @keyframes ess-blink { 50% { opacity: 0.3; } } /* ── Photo grid — evidence wall for sectors / about / services ──────────── */ .photo-grid { display: grid; gap: 12px; } .photo-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .photo-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .photo-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .photo-grid.cols-2, .photo-grid.cols-3 { grid-template-columns: 1fr; } } /* ── Ticket strip (hero badges) ─────────────────────────────────────────── */ .ticket-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .ticket { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); } .ticket.warn { background: var(--accent); color: var(--paper); border-color: var(--accent); } .ticket.go { background: var(--good); color: var(--paper); border-color: var(--good); } .ticket.live::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 6px; animation: ess-blink 1.6s ease-in-out infinite; } html.theme-dark .ticket { background: transparent; color: var(--paper); border-color: var(--paper); } html.theme-dark .ticket.warn { background: var(--accent); color: var(--bg-deep); border-color: var(--accent); } html.theme-dark .ticket.go { background: var(--good); color: var(--paper); border-color: var(--good); } /* ── Print ─────────────────────────────────────────────────────────────── */ @media print { .nav, .top-banner, .hazard, footer.site-footer { display: none; } body { background: #FFF; color: #000; } }