/* ============================================================ NIGHTFALL EXPRESS — IRON CATHEDRAL THEME Apply by adding class="theme-ic" to element. Overrides accent colors, textures, and key component styles. All layout, spacing, typography structure unchanged. ============================================================ */ .theme-ic { /* Iron Cathedral accent palette */ --rust: #7a2a0a; --rust-lit: #a83c10; --rust-glow: rgba(168,60,16,0.20); --rust-edge: rgba(168,60,16,0.40); --gold-ic: #9a7020; --gold-lit: #c49030; /* Override semantic accent tokens */ --pumpkin: var(--rust-lit); --pumpkin-deep: var(--rust); --pumpkin-dim: #4a1806; --pumpkin-glow: var(--rust-glow); --pumpkin-edge: var(--rust-edge); --border-hover: var(--rust-edge); --text-accent: var(--rust-lit); /* Slightly warmer dark base */ --abyss: #0d0b0b; --iron: #151210; --charcoal: #1e1a18; } /* ── Body texture — rust-tinted instead of cool blue ──────── */ .theme-ic body::before { background-image: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(122,42,10,0.07) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 80% 80%, rgba(112,144,176,0.03) 0%, transparent 60%), 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.055'/%3E%3C/svg%3E"); } /* ── Section labels — rust instead of frost ───────────────── */ .theme-ic .section-label { color: var(--rust-lit); display: block; /* keep stacked above title, same as default */ } /* ── Section title underline — rust-gold gradient ─────────── */ .theme-ic .section-title::after { background: linear-gradient(90deg, transparent, var(--rust-lit), var(--gold-lit), var(--rust-lit), transparent); } /* ── Divider — rust-gold instead of cool border ───────────── */ .theme-ic .divider { background: linear-gradient(90deg, transparent, var(--rust) 20%, var(--gold-lit) 50%, var(--rust) 80%, transparent); opacity: 0.35; } /* ── Buttons ──────────────────────────────────────────────── */ .theme-ic .btn-primary { background: linear-gradient(135deg, var(--rust) 0%, var(--rust-lit) 100%); color: var(--bone); border-color: var(--rust-lit); clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); } .theme-ic .btn-primary:hover { background: linear-gradient(135deg, var(--rust-lit) 0%, #c04820 100%); color: var(--ghost); box-shadow: 0 0 28px var(--rust-glow), 0 0 8px var(--rust-edge); border-color: var(--rust-lit); } .theme-ic .btn-outline { color: var(--rust-lit); border-color: var(--rust); } .theme-ic .btn-outline:hover { background: var(--rust-glow); color: var(--bone); border-color: var(--rust-lit); box-shadow: 0 0 20px var(--rust-glow); } .theme-ic .btn-ghost:hover { background: rgba(122,42,10,0.08); border-color: var(--rust-edge); } .theme-ic :focus-visible { outline-color: var(--rust-lit); } .theme-ic .skip-link { background: var(--rust-lit); color: var(--bone); } .theme-ic .spinner { border-top-color: var(--rust-lit); } /* ── Nav ──────────────────────────────────────────────────── */ .theme-ic .site-nav::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--rust) 20%, var(--gold-lit) 50%, var(--rust) 80%, transparent 100%); opacity: 0; transition: opacity var(--transition-mid); pointer-events: none; } .theme-ic .site-nav.scrolled { border-bottom-color: rgba(122,42,10,0.3); box-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(168,60,16,0.15); } .theme-ic .site-nav.scrolled::after { opacity: 1; } .theme-ic .nav-logo-img { filter: drop-shadow(0 0 8px rgba(168,60,16,0.30)); } .theme-ic .nav-logo:hover .nav-logo-img { filter: drop-shadow(0 0 14px rgba(168,60,16,0.55)); } .theme-ic .nav-links a::after { background: var(--rust-lit); } .theme-ic .nav-links a:hover { background: rgba(122,42,10,0.08); } .theme-ic .nav-links a.active { color: var(--rust-lit); } .theme-ic .nav-links { border-bottom-color: rgba(122,42,10,0.2); } /* ── Hero ─────────────────────────────────────────────────── */ .theme-ic .hero-bg { background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(20,16,16,0.95) 0%, transparent 60%), radial-gradient(ellipse 45% 35% at 18% 50%, rgba(122,42,10,0.10) 0%, transparent 65%), radial-gradient(ellipse 40% 30% at 50% 38%, rgba(122,42,10,0.06) 0%, transparent 65%), linear-gradient(180deg, var(--black) 0%, #0e0b0b 40%, #12100f 100%); } .theme-ic .hero-eyebrow { color: var(--rust-lit); } .theme-ic .hero-eyebrow::before { background: var(--rust-lit); } .theme-ic .hero-title { text-shadow: 0 0 60px rgba(122,42,10,0.12), 0 2px 12px rgba(0,0,0,0.8); } .theme-ic .hero-title .accent { background: linear-gradient(135deg, var(--gold-lit) 0%, var(--rust-lit) 55%, var(--gold-ic) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 10px rgba(168,60,16,0.25)); } .theme-ic .hero-desc { padding-left: var(--space-lg); border-left: 2px solid rgba(122,42,10,0.4); } .theme-ic .hero-moon { background: radial-gradient(circle, rgba(200,180,140,0.14) 0%, rgba(200,160,80,0.08) 30%, rgba(168,60,16,0.06) 55%, transparent 72%); box-shadow: 0 0 60px rgba(200,160,80,0.08), 0 0 120px rgba(168,60,16,0.06); } .theme-ic .hero-moon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(circle, rgba(220,200,160,0.20) 0%, rgba(200,160,80,0.10) 50%, transparent 100%); box-shadow: 0 0 30px rgba(200,160,80,0.15); } .theme-ic .hero-logo-main { filter: drop-shadow(0 0 32px rgba(168,60,16,0.55)) drop-shadow(0 0 10px rgba(168,60,16,0.28)) drop-shadow(0 0 2px rgba(200,160,80,0.15)); } .theme-ic .hero-scroll-line { background: linear-gradient(180deg, rgba(168,60,16,0.5) 0%, transparent 100%); } .theme-ic .hero-fog { background: linear-gradient(180deg, transparent 0%, rgba(12,9,9,0.6) 60%, #0e0b0a 100%); } /* ── Stat cards ───────────────────────────────────────────── */ .theme-ic .stat-card { border-top: 2px solid var(--rust); } .theme-ic .stat-card:hover { border-color: var(--rust-lit); box-shadow: 0 0 20px var(--rust-glow); } .theme-ic .stat-value { color: var(--gold-lit); } .theme-ic .about-img-frame { box-shadow: inset 0 0 0 1px rgba(122,42,10,0.15); } /* ── Freight cards ────────────────────────────────────────── */ .theme-ic .freight-card::before { background: linear-gradient(90deg, var(--rust), var(--gold-lit), var(--rust)); } .theme-ic .freight-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(122,42,10,0.06) 0%, transparent 60%); pointer-events: none; } .theme-ic .freight-card:hover { border-color: rgba(122,42,10,0.35); box-shadow: var(--shadow-md), 0 0 24px var(--rust-glow); } .theme-ic .freight-title { color: var(--gold-lit); } .theme-ic .service-areas { border-top-color: rgba(122,42,10,0.2); } .theme-ic .service-areas-label { color: var(--rust-lit); } .theme-ic .service-area-item:hover { border-color: var(--rust-lit); color: var(--gold-lit); box-shadow: 0 0 10px var(--rust-glow); } /* ── Gallery ──────────────────────────────────────────────── */ .theme-ic .gallery-item:hover { box-shadow: var(--shadow-lg), 0 0 20px var(--rust-glow); border-color: rgba(122,42,10,0.35); } /* ── Forms ────────────────────────────────────────────────── */ .theme-ic .form-card::before { background: linear-gradient(90deg, transparent, var(--rust), var(--gold-lit), var(--rust), transparent); } .theme-ic input:focus, .theme-ic textarea:focus, .theme-ic select:focus { border-color: var(--rust-lit); box-shadow: 0 0 0 3px rgba(122,42,10,0.15); } /* ── Footer ───────────────────────────────────────────────── */ .theme-ic .site-footer { border-top-color: rgba(122,42,10,0.25); } .theme-ic .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rust) 20%, var(--gold-lit) 50%, var(--rust) 80%, transparent); opacity: 0.5; } .theme-ic .footer-col-title { color: var(--rust-lit); } .theme-ic .footer-links a:hover { color: var(--gold-lit); } .theme-ic .footer-bottom { border-top-color: rgba(122,42,10,0.15); } .theme-ic .footer-logo-img { filter: drop-shadow(0 0 6px rgba(168,60,16,0.2)); } /* ── Driver application page ──────────────────────────────── */ .theme-ic .app-header-info a { color: var(--gold-lit); } .theme-ic .app-header-info a:hover { color: var(--rust-lit); } .theme-ic .app-section-title { color: var(--gold-lit); border-bottom-color: rgba(122,42,10,0.3); } .theme-ic .app-section-title::before { background: var(--rust-lit); } .theme-ic .field-section-title { color: var(--rust-lit); } .theme-ic .apply-role-banner { border-color: rgba(122,42,10,0.25); background: rgba(122,42,10,0.06); } .theme-ic .app-page-header { border-bottom-color: rgba(122,42,10,0.2); }