/* ============================================================= 1414.pl — strona główna Tokeny i baza przychodzą z systemu d1414 (pełny bundle w ). Lokalne zostaje: animacja #matrix, easter egg klawiszy 1-4 (dynamiczne HSL przez --bg-h/--bg-l) i layout kafelków nawigacji. ============================================================= */ :root { /* 1414141414141414141414141414 */ /* dynamiczne tło easter egga — JS podmienia --bg-h/--bg-l */ --bg-h: 0; --bg-s: 0%; --bg-l: 8%; --color-bg-home: hsl(var(--bg-h), var(--bg-s), var(--bg-l)); /* kolor kontrastowy podmieniany przez JS przy jasnym tle */ --color-contact: var(--c-white); /* parametry dekoracyjnego matrixa */ --matrix-weight: 140; --width-matrix: 141vw; } body, html { background-color: var(--color-bg-home); color: var(--color-muted); transition: background-color var(--transition) ease; justify-content: center; } /* Background Matrix */ #matrix { position: fixed; top: 0; left: 0; height: 100%; z-index: 0; pointer-events: none; opacity: 0; user-select: none; word-break: break-all; font-weight: var(--matrix-weight); font-size: clamp(14px, 4.14vw, 41.4px); line-height: 1.4; width: var(--width-matrix); transition: opacity 1.4s ease; } #matrix.visible { opacity: 0.04; } /* Main Wrapper - Centers everything */ #wrapper { position: relative; z-index: var(--z-base); min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } /* Heading */ #heading { font-weight: var(--font-thin); font-size: clamp(3rem, 14vw, 8rem); color: var(--color-contact); letter-spacing: 0.14em; text-align: center; margin-bottom: 60px; user-select: none; } #heading .dot-pl { opacity: 0.4; } /* Navigation */ #nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; max-width: 1200px; margin-bottom: 60px; } /* Hover/lift/glow daje systemowe .interactive (na ); tu tylko wygląd kafla. */ .nav-btn { text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-lg) var(--space-xl); background: rgba(var(--bg-h), 8%, 8%, 0.8); border: var(--border-width) solid var(--color-muted); border-radius: var(--radius); box-shadow: var(--shadow-1); backdrop-filter: blur(4px); min-width: 200px; } .nav-path { font-size: 1.4rem; font-weight: var(--font-semibold); letter-spacing: var(--letter-spacing); line-height: 1; margin-bottom: var(--space-sm); } .nav-path .domain { color: var(--color-muted); } .nav-path .slug { color: var(--color-contact); } .nav-desc { font-size: var(--text-sm); font-weight: var(--font-thin); color: var(--color-text-muted); letter-spacing: var(--letter-spacing); } /* Contact Button — hover/lift/glow z systemowego .interactive */ #contact { text-decoration: none; font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--color-contact); padding: var(--space-md) var(--space-lg); background: rgba(var(--bg-h), 8%, 8%, 0.8); border: var(--border-width) solid var(--color-muted); border-radius: var(--radius); letter-spacing: var(--letter-spacing); box-shadow: var(--shadow-1); backdrop-filter: blur(4px); } /* Mobile specific adjustments */ @media (max-width: 700px) { #heading { margin-top: 40px; margin-bottom: 40px; font-size: clamp(3rem, 15vw, 5rem); } #nav { flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 400px; } .nav-btn { width: 100%; padding: 20px; min-width: 0; } #contact { margin-top: auto; /* Push slightly down if flex space allows */ margin-bottom: 20px; } }