.home-page { max-width: 1200px; } .home-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; } .home-logo { margin-bottom: 16px; transition: filter 0.3s ease; } :global(.dark) .home-logo { /* This mathematical flip turns black -> white while rotating red/blue back to their original brand values */ filter: invert(1) hue-rotate(180deg) saturate(1.4); } .home-left h1 { font-size: 1.5rem; margin-bottom: 12px; color: var(--text-main); } .home-left h2 { font-size: 1.1rem; margin-top: 20px; margin-bottom: 8px; color: var(--text-main); } .home-left h3 { font-size: 0.95rem; margin-top: 16px; margin-bottom: 6px; color: var(--text-main); } .home-left p { color: var(--text-main); } .home-info-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .home-project-img { border-radius: var(--radius); transition: transform 0.3s ease; max-width: 100%; height: auto; border: 1px solid var(--border); } .home-project-img:hover { transform: scale(1.03); } .home-qr-col { display: flex; flex-direction: column; align-items: center; gap: 12px; } .qr-item { text-align: center; } .qr-item img { border: 1px solid var(--border); border-radius: 4px; background: white; /* Keep QR code backgrounds white for scanning */ } .qr-label { display: block; font-size: 9px; color: var(--text-muted); margin-top: 2px; } .home-about-link { color: var(--primary); margin-bottom: 8px; font-weight: 600; } .home-instructions { padding-left: 20px; margin-bottom: 12px; } .home-instructions li { margin-bottom: 4px; font-size: 12px; color: var(--text-main); } .home-error { background: #fdecea; color: var(--danger); padding: 8px 12px; border-radius: var(--radius); margin-bottom: 8px; font-size: 12px; } .home-success { background: #eafbf0; color: var(--success); padding: 8px 12px; border-radius: var(--radius); margin-bottom: 8px; font-size: 12px; } .home-right { /* placeholder for future right column content */ }