/* ArcForge Designs - Custom Accents, Dark/Light Themes & Electric Plasma Blue Styling Precision CNC Plasma Cutting & Custom Metal Fabrication */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap'); :root { /* Default Dark Mode Tokens */ --plasma-cyan: #00e5ff; --plasma-sky: #0284c7; --plasma-glow: rgba(0, 229, 255, 0.4); --plasma-glow-subtle: rgba(0, 229, 255, 0.12); --bg-main: #0b1015; --bg-secondary: #11161d; --panel-bg: rgba(30, 41, 59, 0.75); --panel-border: rgba(255, 255, 255, 0.08); --text-heading: #e6edf3; --text-body: #94a3b8; --text-muted: #64748b; --grid-dot: rgba(255, 255, 255, 0.06); } /* Light Mode Tokens Override */ html.light { --plasma-cyan: #0369a1; --plasma-sky: #075985; --plasma-glow: rgba(3, 105, 161, 0.25); --plasma-glow-subtle: rgba(2, 132, 199, 0.08); --bg-main: #f8fafc; --bg-secondary: #f1f5f9; --panel-bg: rgba(255, 255, 255, 0.92); --panel-border: rgba(226, 232, 240, 0.9); --text-heading: #0f172a; --text-body: #475569; --text-muted: #94a3b8; --grid-dot: rgba(15, 23, 42, 0.06); } /* Base styling */ html { scroll-behavior: smooth; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* Android Chrome ignores overflow-x on alone, so the oversized absolute ambient glows would widen the page and force sideways scrolling */ overflow-x: hidden; } body { overflow-x: hidden; max-width: 100%; background-color: var(--bg-main); color: var(--text-body); transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, .brand-font { font-family: 'Outfit', system-ui, -apple-system, sans-serif; } /* Dark mode heading/primary-text tone: soft steel off-white instead of pure white. Only applies in dark mode - html.light overrides these same classes below with higher specificity, so light mode is unaffected. */ .text-white, .text-slate-100 { color: #e6edf3 !important; } /* Light mode text & element transitions */ html.light body { background-color: #f8fafc; color: #475569; } html.light h1, html.light h2, html.light h3, html.light h4, html.light .text-white { color: #0f172a !important; } html.light .text-slate-100 { color: #0f172a !important; } html.light .text-slate-200 { color: #1e293b !important; } html.light .text-slate-300 { color: #334155 !important; } html.light .text-slate-400 { color: #64748b !important; } html.light .text-slate-500 { color: #94a3b8 !important; } /* Light mode backgrounds */ html.light .bg-\[\#0b1015\] { background-color: #f8fafc !important; } html.light .bg-\[\#11161d\] { background-color: #f1f5f9 !important; } html.light .bg-slate-900, html.light .bg-slate-900\/90, html.light .bg-slate-900\/80, html.light .bg-slate-900\/60, html.light .bg-slate-900\/50, html.light .bg-slate-900\/40 { background-color: #ffffff !important; } html.light .bg-slate-950, html.light .bg-slate-950\/95, html.light .bg-slate-950\/98 { background-color: rgba(255, 255, 255, 0.98) !important; } /* Light mode borders */ html.light .border-slate-800, html.light .border-slate-800\/80, html.light .border-slate-800\/60, html.light .border-slate-800\/90, html.light .border-slate-700\/80, html.light .border-slate-700\/70, html.light .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; } /* Light mode: dial back how much accent-tinted fill/border area appears. Text colors are untouched above - this only softens background/border/shadow tints so the accent still reads as "reserved for CTAs and key highlights" rather than washing across every card and icon on a light background. */ html.light .bg-\[\#00e5ff\]\/10, html.light .bg-\[\#00e5ff\]\/15, html.light .bg-\[\#00e5ff\]\/20 { background-color: rgba(2, 132, 199, 0.06) !important; } html.light .border-\[\#00e5ff\]\/30, html.light .border-\[\#00e5ff\]\/40, html.light .border-\[\#00e5ff\]\/50 { border-color: rgba(2, 132, 199, 0.18) !important; } html.light .shadow-\[\#00e5ff\]\/10, html.light .shadow-\[\#00e5ff\]\/20 { --tw-shadow-color: rgba(2, 132, 199, 0.1) !important; } html.light .ring-\[\#00e5ff\] { --tw-ring-color: rgba(2, 132, 199, 0.4) !important; } /* Light mode: darker accent blue for text, solid fills and hover states */ html.light .text-\[\#00e5ff\], html.light .hover\:text-\[\#00e5ff\]:hover, html.light .group:hover .group-hover\:text-\[\#00e5ff\] { color: #075985 !important; } html.light .bg-\[\#00e5ff\] { background-color: #0369a1 !important; color: #ffffff !important; } html.light .btn-plasma-primary { background: linear-gradient(135deg, #0284c7 0%, #075985 100%); color: #ffffff !important; box-shadow: 0 0 16px -2px rgba(3, 105, 161, 0.35); } html.light .btn-plasma-primary:hover { background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 100%); box-shadow: 0 0 22px 0 rgba(3, 105, 161, 0.45); } /* Light mode: darker accent in the hero headline gradient and card/step icons */ html.light .bg-gradient-to-r.bg-clip-text { background-image: linear-gradient(to right, #0369a1, #075985, #0c4a6e) !important; filter: none !important; } html.light .text-\[\#38f5ff\] { color: #075985 !important; } html.light .bg-\[\#0284c7\]\/15, html.light .bg-\[\#0284c7\]\/20 { background-color: rgba(3, 105, 161, 0.08) !important; } html.light .border-\[\#0284c7\]\/40 { border-color: rgba(3, 105, 161, 0.25) !important; } /* Light mode: gallery filter buttons (inactive state) */ html.light .gallery-filter-btn.bg-slate-800\/80 { background-color: #e2e8f0 !important; color: #334155 !important; } html.light .gallery-filter-btn.bg-slate-800\/80:hover { background-color: #cbd5e1 !important; } /* Light mode: gallery preview boxes match the other light cards */ html.light .gallery-item .bg-gradient-to-br { background-image: none !important; background-color: #f1f5f9 !important; } /* Custom Scrollbar with Plasma Glow */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-main); } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; } ::-webkit-scrollbar-thumb:hover { background: var(--plasma-cyan); box-shadow: 0 0 10px var(--plasma-glow); } /* Glassmorphic Industrial Panels */ .plasma-panel { background: var(--panel-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--panel-border); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } html.light .plasma-panel { box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05); } .plasma-panel-hover { transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .plasma-panel-hover:hover { transform: translateY(-4px); border-color: var(--plasma-cyan); box-shadow: 0 14px 34px -10px var(--plasma-glow); } /* Electric Plasma Glow Button */ .btn-plasma-primary { background: linear-gradient(135deg, #00e5ff 0%, #0284c7 100%); color: #040812 !important; font-weight: 700; transition: all 0.25s ease; box-shadow: 0 0 20px -2px rgba(0, 229, 255, 0.45); } .btn-plasma-primary:hover { background: linear-gradient(135deg, #38f5ff 0%, #0ea5e9 100%); box-shadow: 0 0 28px 2px rgba(0, 229, 255, 0.7); transform: translateY(-2px); } /* Secondary Button in Light Mode */ html.light .btn-secondary-mode { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.light .btn-secondary-mode:hover { border-color: #0284c7 !important; color: #0284c7 !important; } /* Glowing Border Accent */ .plasma-border-glow { border: 1px solid var(--plasma-border); box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.05), 0 0 15px rgba(0, 229, 255, 0.1); } html.light .plasma-border-glow { border-color: rgba(2, 132, 199, 0.3); box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.1); } /* Ambient Arc Lighting */ .plasma-ambient { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; z-index: 0; transition: opacity 0.5s ease; } html.light .plasma-ambient { opacity: 0.35; } /* Cutting Arc Beam Animation */ @keyframes plasma-torch-glow { 0%, 100% { opacity: 0.3; transform: scale(1); filter: blur(80px); } 50% { opacity: 0.55; transform: scale(1.08); filter: blur(100px); } } .animate-plasma-torch { animation: plasma-torch-glow 5s ease-in-out infinite; } /* Interactive File Upload Zone */ .upload-dropzone { border: 2px dashed rgba(0, 229, 255, 0.35); transition: all 0.25s ease; background: rgba(15, 23, 42, 0.4); } html.light .upload-dropzone { border-color: rgba(2, 132, 199, 0.4); background: #f8fafc; } .upload-dropzone:hover, .upload-dropzone.dragover { border-color: var(--plasma-cyan); background: rgba(0, 229, 255, 0.08); box-shadow: 0 0 20px var(--plasma-glow); } html.light .upload-dropzone:hover, html.light .upload-dropzone.dragover { border-color: #0284c7; background: rgba(2, 132, 199, 0.08); box-shadow: 0 0 20px rgba(2, 132, 199, 0.2); } /* Form Inputs in Light Mode */ html.light input, html.light textarea, html.light select { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.light input::placeholder, html.light textarea::placeholder { color: #94a3b8 !important; } /* Toast Notification Styles */ #toast-notification { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } #toast-notification.hidden-toast { transform: translateY(120px); opacity: 0; pointer-events: none; } #toast-notification.visible-toast { transform: translateY(0); opacity: 1; pointer-events: auto; } html.light #toast-notification { background-color: #ffffff !important; border-color: rgba(2, 132, 199, 0.5) !important; box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15) !important; } /* Grid Pattern Background Overlay */ .metal-grid-bg { background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px); background-size: 32px 32px; } /* Navbar Scrolled State Styles for Smooth Theme Handling */ .navbar-scrolled-dark { background-color: rgba(11, 16, 21, 0.95) !important; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6) !important; border-color: #1e293b !important; } .navbar-scrolled-light { background-color: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important; border-color: #e2e8f0 !important; } /* Unobtrusive Theme Toggle Button */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; transition: all 0.2s ease; cursor: pointer; border: 1px solid var(--panel-border); background-color: rgba(15, 23, 42, 0.5); color: #94a3b8; } .theme-toggle-btn:hover { color: var(--plasma-cyan); border-color: var(--plasma-cyan); box-shadow: 0 0 12px var(--plasma-glow-subtle); transform: scale(1.05); } html.light .theme-toggle-btn { background-color: #ffffff; border-color: #e2e8f0; color: #475569; } html.light .theme-toggle-btn:hover { color: #0284c7; border-color: #0284c7; box-shadow: 0 0 12px rgba(2, 132, 199, 0.2); } /* Terms & Conditions page: clean black-on-white output when printed / saved as PDF */ @media print { #main-navbar, footer, .plasma-ambient, .terms-cta { display: none !important; } body { background: #ffffff !important; color: #000000 !important; } .terms-document .plasma-panel { background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; } .terms-document *, main h1, main p, main span, main time { color: #000000 !important; } .terms-section { break-inside: avoid-page; } } /* Disabled submit button (e.g. quote form before the Terms box is ticked) */ .btn-plasma-primary:disabled { background: #334155; color: #94a3b8 !important; box-shadow: none; transform: none; cursor: not-allowed; opacity: 0.7; } html.light .btn-plasma-primary:disabled { background: #cbd5e1; color: #64748b !important; box-shadow: none; }