/* ============================================================ NIGHTFALL EXPRESS — STEEL & GOLD THEME Apply by adding class="theme-sy" to element. Palette: #1E2328 / #2A2E34 / #3B3F46 + #F5B301 / #FED053 Vibe: heavy machinery, caution tape, industrial warning. ============================================================ */ .theme-sy { /* Yellow accent palette */ --yellow: #F5B301; --yellow-lit: #FED053; --yellow-dim: #c48e00; --yellow-deep: #8a6200; --yellow-glow: rgba(245,179,1,0.20); --yellow-edge: rgba(245,179,1,0.40); /* Override dark base to the charcoal palette from the image */ --black: #0f1114; --abyss: #1E2328; --iron: #2A2E34; --charcoal: #3B3F46; --slate: #484d56; --ash: #585e68; --fog: #72788a; --mist: #9199a8; --silver: #b8bec8; --bone: #dde0e8; --ghost: #f0f2f6; /* Override semantic tokens */ --bg-primary: var(--abyss); --bg-secondary: var(--iron); --bg-card: var(--charcoal); --bg-hover: var(--slate); --border: rgba(245,179,1,0.12); --border-hover: rgba(245,179,1,0.40); --text-primary: var(--bone); --text-secondary: var(--silver); --text-muted: var(--mist); --text-accent: var(--yellow); /* Accent overrides (replaces pumpkin everywhere) */ --pumpkin: var(--yellow); --pumpkin-deep: var(--yellow-dim); --pumpkin-dim: var(--yellow-deep); --pumpkin-glow: var(--yellow-glow); --pumpkin-edge: var(--yellow-edge); --frost: var(--yellow-dim); --moonlit: var(--yellow-lit); --moon: #fff0a0; } /* ── Body texture — warm charcoal tint ────────────────────── */ .theme-sy body::before { background-image: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(245,179,1,0.05) 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 80% 90%, rgba(245,179,1,0.03) 0%, transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E"); } /* ── Nav ──────────────────────────────────────────────────── */ .theme-sy .site-nav.scrolled { background: rgba(30,35,40,0.95); border-bottom-color: rgba(245,179,1,0.25); box-shadow: 0 4px 40px rgba(0,0,0,0.7), 0 1px 0 rgba(245,179,1,0.15); } .theme-sy .site-nav::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--yellow-dim) 20%, var(--yellow) 50%, var(--yellow-dim) 80%, transparent); opacity: 0; transition: opacity var(--transition-mid); pointer-events: none; } .theme-sy .site-nav.scrolled::after { opacity: 1; } .theme-sy .nav-logo-img { filter: drop-shadow(0 0 8px rgba(245,179,1,0.25)); } .theme-sy .nav-logo:hover .nav-logo-img { filter: drop-shadow(0 0 14px rgba(245,179,1,0.5)); } .theme-sy .nav-links a { color: var(--mist); } .theme-sy .nav-links a:hover { color: var(--yellow-lit); background: rgba(245,179,1,0.06); } .theme-sy .nav-links a::after { background: var(--yellow); } .theme-sy .nav-links a.active { color: var(--yellow); } /* ── Buttons ──────────────────────────────────────────────── */ .theme-sy .btn-primary { background: var(--yellow); color: #0f1114; border-color: var(--yellow); font-weight: 700; } .theme-sy .btn-primary:hover { background: var(--yellow-lit); border-color: var(--yellow-lit); color: #0f1114; box-shadow: 0 0 28px var(--yellow-glow), 0 0 8px var(--yellow-edge); transform: translateY(-1px); } .theme-sy .btn-outline { color: var(--yellow); border-color: var(--yellow-dim); } .theme-sy .btn-outline:hover { background: var(--yellow-glow); color: var(--yellow-lit); border-color: var(--yellow); box-shadow: 0 0 20px var(--yellow-glow); transform: translateY(-1px); } .theme-sy .btn-ghost:hover { background: rgba(245,179,1,0.06); border-color: var(--yellow-edge); color: var(--bone); } .theme-sy :focus-visible { outline-color: var(--yellow); } .theme-sy .skip-link { background: var(--yellow); color: #0f1114; } .theme-sy .spinner { border-top-color: var(--yellow); } /* ── Section labels & titles ──────────────────────────────── */ .theme-sy .section-label { color: var(--yellow-dim); } .theme-sy .section-title::after { background: linear-gradient(90deg, transparent, var(--yellow-dim), var(--yellow), var(--yellow-dim), transparent); } /* ── Divider ──────────────────────────────────────────────── */ .theme-sy .divider { background: linear-gradient(90deg, transparent, var(--yellow-deep) 20%, var(--yellow) 50%, var(--yellow-deep) 80%, transparent); opacity: 0.4; } /* ── Hero ─────────────────────────────────────────────────── */ .theme-sy .hero-bg { background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(18,20,24,0.95) 0%, transparent 60%), radial-gradient(ellipse 40% 30% at 15% 50%, rgba(245,179,1,0.06) 0%, transparent 60%), radial-gradient(ellipse 35% 25% at 50% 40%, rgba(245,179,1,0.04) 0%, transparent 60%), linear-gradient(180deg, #0f1114 0%, #161a1e 40%, #1a1e22 100%); } .theme-sy .hero-eyebrow { color: var(--yellow-dim); } .theme-sy .hero-eyebrow::before { background: var(--yellow-dim); } .theme-sy .hero-title { text-shadow: 0 0 60px rgba(245,179,1,0.10), 0 2px 12px rgba(0,0,0,0.8); } .theme-sy .hero-title .accent { background: linear-gradient(135deg, var(--yellow-lit) 0%, var(--yellow) 50%, var(--yellow-dim) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 12px rgba(245,179,1,0.3)); } .theme-sy .hero-desc { border-left: 2px solid rgba(245,179,1,0.25); padding-left: var(--space-lg); } /* Moon: yellow corona */ .theme-sy .hero-moon { background: radial-gradient(circle, rgba(245,179,1,0.12) 0%, rgba(245,179,1,0.06) 35%, rgba(245,140,0,0.04) 60%, transparent 75%); box-shadow: 0 0 60px rgba(245,179,1,0.08), 0 0 140px rgba(245,179,1,0.04); } .theme-sy .hero-moon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(254,208,83,0.25) 0%, rgba(245,179,1,0.12) 50%, transparent 100%); box-shadow: 0 0 30px rgba(245,179,1,0.2); } .theme-sy .hero-logo-main { filter: drop-shadow(0 0 32px rgba(245,179,1,0.50)) drop-shadow(0 0 10px rgba(245,179,1,0.25)); } .theme-sy .hero-scroll-line { background: linear-gradient(180deg, rgba(245,179,1,0.4) 0%, transparent 100%); } .theme-sy .hero-fog { background: linear-gradient(180deg, transparent 0%, rgba(18,20,24,0.6) 60%, #1a1e22 100%); } /* ── Stat cards ───────────────────────────────────────────── */ .theme-sy .stat-card { border-top: 2px solid var(--yellow-dim); } .theme-sy .stat-card:hover { border-color: var(--yellow); box-shadow: 0 0 20px var(--yellow-glow); } .theme-sy .stat-value { color: var(--yellow); } /* ── Freight cards ────────────────────────────────────────── */ .theme-sy .freight-card::before { background: linear-gradient(90deg, var(--yellow-deep), var(--yellow), var(--yellow-deep)); } .theme-sy .freight-card:hover { border-color: rgba(245,179,1,0.30); box-shadow: var(--shadow-md), 0 0 24px var(--yellow-glow); } .theme-sy .freight-title { color: var(--yellow); } .theme-sy .service-areas { border-top-color: rgba(245,179,1,0.15); } .theme-sy .service-areas-label { color: var(--yellow-dim); } .theme-sy .service-area-item:hover { border-color: var(--yellow); color: var(--yellow-lit); box-shadow: 0 0 10px var(--yellow-glow); } /* ── Gallery ──────────────────────────────────────────────── */ .theme-sy .gallery-item:hover { border-color: rgba(245,179,1,0.30); box-shadow: var(--shadow-lg), 0 0 20px var(--yellow-glow); } /* ── Forms ────────────────────────────────────────────────── */ .theme-sy .form-card::before { background: linear-gradient(90deg, transparent, var(--yellow-deep), var(--yellow), var(--yellow-deep), transparent); } .theme-sy input:focus, .theme-sy textarea:focus, .theme-sy select:focus { border-color: var(--yellow-dim); box-shadow: 0 0 0 3px rgba(245,179,1,0.12); } /* ── Footer ───────────────────────────────────────────────── */ .theme-sy .site-footer { border-top-color: rgba(245,179,1,0.20); } .theme-sy .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--yellow-deep) 20%, var(--yellow) 50%, var(--yellow-deep) 80%, transparent); opacity: 0.5; } .theme-sy .footer-col-title { color: var(--yellow-dim); } .theme-sy .footer-links a:hover { color: var(--yellow); } .theme-sy .footer-bottom { border-top-color: rgba(245,179,1,0.12); } .theme-sy .footer-logo-img { filter: drop-shadow(0 0 6px rgba(245,179,1,0.15)); } /* ── Theme switcher glow ──────────────────────────────────── */ .theme-sy #theme-switcher:hover { box-shadow: 0 0 20px rgba(245,179,1,0.35); border-color: rgba(245,179,1,0.4); } /* ── Driver application page ──────────────────────────────── */ .theme-sy .app-section-title { color: var(--yellow); border-bottom-color: rgba(245,179,1,0.2); } .theme-sy .app-section-title::before { background: var(--yellow); } .theme-sy .field-section-title { color: var(--yellow-dim); } .theme-sy .apply-role-banner { border-color: rgba(245,179,1,0.2); background: rgba(245,179,1,0.04); } .theme-sy .dot-notice { border-left-color: var(--yellow-dim); } .theme-sy .app-header-info a { color: var(--yellow); } .theme-sy .app-header-info a:hover { color: var(--yellow-lit); } .theme-sy .check-opt input[type="radio"], .theme-sy .check-opt input[type="checkbox"] { accent-color: var(--yellow); } .theme-sy .rights-list li::before { color: var(--yellow-dim); }