/* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Courier New', monospace; background: #fafafa; color: #333; line-height: 1.6; font-size: 14px; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } /* Header */ .header { text-align: center; padding: 40px 20px 30px; border-bottom: 2px solid #333; } .logo { font-size: 32px; font-weight: bold; margin-bottom: 10px; letter-spacing: 2px; } .tagline { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 1px; } /* Main content */ .main { max-width: 800px; margin: 0 auto; padding: 40px 20px; } /* Timeline */ .timeline { position: relative; } .timeline::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: #333; } .week-item { position: relative; margin-bottom: 40px; padding-left: 60px; } .week-item::before { content: ''; position: absolute; left: 14px; top: 6px; width: 14px; height: 14px; background: #333; border: 2px solid #fafafa; } .week-header { margin-bottom: 15px; } .week-number { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .week-date { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 1px; } .products-grid { display: grid; gap: 20px; } .product-card { background: white; border: 2px solid #333; padding: 20px; text-decoration: none; color: inherit; display: block; transition: all 0.2s ease; } .product-card:hover { background: #333; color: #fafafa; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #333; } .product-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .product-description { font-size: 12px; line-height: 1.5; color: #666; } .product-card:hover .product-description { color: #ccc; } .product-url { font-size: 10px; color: #999; margin-top: 10px; word-break: break-all; } .product-card:hover .product-url { color: #aaa; } /* Footer */ .footer { text-align: center; padding: 30px 20px; border-top: 2px solid #333; font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 1px; } /* Responsive design */ @media (max-width: 600px) { .timeline::before { left: 10px; } .week-item { padding-left: 40px; } .week-item::before { left: 4px; } .header { padding: 30px 15px 20px; } .main { padding: 30px 15px; } .logo { font-size: 24px; } .product-card { padding: 15px; } }