/* ======================================== JAWNS - PRIMITIVE THEME "retard-maxxing" - so basic it's cool Like someone just learned yesterday Raw HTML energy, barely any CSS ======================================== */ :root { --bg: #f0f0f0; --text: #000000; --link: #0000ee; --visited: #551a8b; --border: #000000; } body { font-family: 'Times New Roman', Times, serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.4; text-align: left; margin: 0; padding: 20px; } /* no fancy switcher styling */ .theme-switcher { background: #ffffff; border: 1px solid var(--border); padding: 5px; } .theme-btn { background: none; border: 1px solid var(--border); padding: 2px 5px; } .theme-btn.active { background: #000000; filter: invert(1); } /* nav is just links */ .navbar { background: var(--bg); border-bottom: 1px solid var(--border); padding: 10px 0; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .logo { font-size: 24px; font-weight: bold; color: var(--text); text-decoration: none; } .nav-links { gap: 10px; } .nav-links a { color: var(--link); text-decoration: underline; font-size: 16px; text-transform: none; letter-spacing: 0; } .nav-links a:visited { color: var(--visited); } .nav-links a:hover { background: var(--link); color: #ffffff; } .nav-links a.active { font-weight: bold; } .acronym { color: var(--text); font-style: italic; } /* hero is just text */ .hero { background: none; min-height: auto; padding: 40px 20px; text-align: left; } .hero-content { max-width: none; } .hero-title { font-size: 48px; font-weight: bold; color: var(--text); letter-spacing: 0; text-shadow: none; margin: 0 0 10px 0; } .hero-subtitle { font-size: 18px; color: var(--text); letter-spacing: 0; text-transform: none; margin: 0 0 5px 0; } .hero-tagline { font-size: 16px; color: var(--text); font-style: italic; margin: 0 0 20px 0; } .cta-btn { background: none; color: var(--link); border: none; padding: 0; font-size: 16px; text-decoration: underline; text-transform: none; letter-spacing: 0; display: inline; } .cta-btn:hover { background: var(--link); color: #ffffff; } /* signup */ .signup-section { background: #ffffff; border: 1px solid var(--border); padding: 20px; margin: 20px 0; text-align: left; } .signup-container { max-width: none; margin: 0; } .signup-title { font-size: 18px; font-weight: bold; margin: 0 0 10px 0; } .signup-text { margin: 0 0 15px 0; } .signup-form { justify-content: flex-start; gap: 5px; } .signup-input { border: 1px solid var(--border); padding: 5px; font-family: inherit; font-size: 16px; min-width: 250px; } .signup-btn { border: 1px solid var(--border); background: #e0e0e0; padding: 5px 15px; font-family: inherit; font-size: 16px; cursor: pointer; } .signup-btn:hover { background: #d0d0d0; } .signup-message.success { color: #008000; } .signup-message.error { color: #ff0000; } /* sections */ .featured-section { background: none; padding: 20px 0; } .section-title { font-size: 20px; font-weight: bold; text-align: left; text-transform: none; letter-spacing: 0; margin: 0 0 20px 0; border-bottom: 1px solid var(--border); padding-bottom: 5px; } .featured-grid { gap: 15px; } .view-all-btn { color: var(--link); text-decoration: underline; text-align: left; font-size: 16px; text-transform: none; letter-spacing: 0; margin-top: 20px; } /* products */ .products-main, .about-main, .cart-main, .checkout-main, .moodboard-main { padding: 0; } .products-hero, .moodboard-hero { text-align: left; margin-bottom: 20px; } .page-title { font-size: 28px; font-weight: bold; text-transform: none; letter-spacing: 0; margin: 0 0 5px 0; } .page-subtitle { font-size: 16px; font-style: italic; } .filter-section { justify-content: flex-start; gap: 5px; margin-bottom: 20px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .filter-btn { background: #e0e0e0; border: 1px solid var(--border); padding: 3px 10px; font-family: inherit; font-size: 14px; text-transform: none; cursor: pointer; } .filter-btn:hover, .filter-btn.active { background: #000000; color: #ffffff; } .products-grid { gap: 15px; } .product-card { background: #ffffff; border: 1px solid var(--border); padding: 10px; } .product-card:hover { background: #f8f8f8; } .product-image { border: 1px solid var(--border); } .product-name { font-size: 16px; font-weight: bold; margin: 10px 0 5px 0; } .product-price { font-size: 16px; font-weight: normal; color: var(--text); } /* modal */ .modal { background: rgba(0, 0, 0, 0.5); } .modal-content { background: #ffffff; border: 2px solid var(--border); } .modal-close { color: var(--text); font-size: 24px; } .modal-body { text-align: left; } .modal-info h2 { font-size: 22px; font-weight: bold; } .modal-price { font-size: 20px; font-weight: bold; } .modal-description { font-size: 16px; } .size-select { border: 1px solid var(--border); padding: 5px; font-family: inherit; font-size: 16px; } .qty-btn { border: 1px solid var(--border); background: #e0e0e0; width: 30px; height: 30px; font-size: 18px; } .add-to-cart-btn { background: #e0e0e0; border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 16px; padding: 10px 20px; text-transform: none; letter-spacing: 0; } .add-to-cart-btn:hover { background: #000000; color: #ffffff; } /* cart */ .cart-empty { text-align: left; } .empty-icon { font-size: 32px; } .cart-content { gap: 20px; } .cart-item { background: #ffffff; border: 1px solid var(--border); padding: 15px; } .cart-item-image { border: 1px solid var(--border); } .cart-item-info h3 { font-size: 16px; font-weight: bold; } .cart-summary, .checkout-summary { background: #ffffff; border: 1px solid var(--border); padding: 20px; } .cart-summary h3, .checkout-summary h3 { font-size: 18px; font-weight: bold; margin: 0 0 15px 0; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .summary-row { font-size: 16px; } .summary-row.total { border-top: 1px solid var(--border); padding-top: 10px; font-weight: bold; } .checkout-btn { background: #e0e0e0; border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 16px; text-transform: none; } .checkout-btn:hover { background: #000000; color: #ffffff; } .continue-shopping { color: var(--link); text-decoration: underline; } /* checkout */ .checkout-content { gap: 20px; } .form-section { background: #ffffff; border: 1px solid var(--border); padding: 20px; } .form-section h2 { font-size: 18px; font-weight: bold; text-transform: none; letter-spacing: 0; margin: 0 0 15px 0; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .form-group label { font-size: 14px; text-transform: none; font-weight: bold; } .form-group input, .form-group textarea { border: 1px solid var(--border); padding: 8px; font-family: inherit; font-size: 16px; } .form-group input:focus, .form-group textarea:focus { outline: 2px solid var(--link); } .place-order-btn { background: #e0e0e0; border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 18px; padding: 15px 30px; text-transform: none; letter-spacing: 0; } .place-order-btn:hover { background: #000000; color: #ffffff; } .order-success { background: #ffffff; border: 2px solid #008000; text-align: left; padding: 40px; } .success-icon { background: #008000; color: #ffffff; font-size: 24px; } .order-success h2 { font-weight: bold; } /* about */ .about-hero { text-align: left; margin-bottom: 20px; } .about-marquee { display: none; } .about-content { text-align: left; } .about-block { background: #ffffff; border: 1px solid var(--border); padding: 20px; margin-bottom: 15px; } .about-block h2 { font-size: 18px; font-weight: bold; text-transform: none; letter-spacing: 0; margin: 0 0 10px 0; border-bottom: 1px solid var(--border); padding-bottom: 5px; } .about-block p { font-size: 16px; margin: 0; } .about-stats { justify-content: flex-start; gap: 20px; margin-top: 30px; } .stat { background: #ffffff; border: 1px solid var(--border); padding: 15px 25px; text-align: center; } .stat-number { font-size: 28px; font-weight: bold; } .stat-label { font-size: 14px; } .under-construction { background: #ffff00; border: 1px solid var(--border); padding: 10px; animation: none; } .under-construction .blink { animation: none; } /* moodboard */ .moodboard-grid { gap: 10px; } .mood-item { border: 1px solid var(--border); } /* footer */ .footer { background: none; border-top: 1px solid var(--border); margin-top: 40px; padding: 20px 0; text-align: left; } .footer-content { gap: 40px; } .footer-section h3 { font-size: 18px; font-weight: bold; margin: 0 0 10px 0; } .footer-section h4 { font-size: 16px; font-weight: bold; text-transform: none; letter-spacing: 0; margin: 0 0 10px 0; } .footer-section a { color: var(--link); text-decoration: underline; } .footer-section a:visited { color: var(--visited); } .footer-bottom { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 15px; font-size: 14px; } .visitor-counter { font-family: 'Courier New', monospace; background: #000000; color: #00ff00; padding: 2px 8px; } .footer-netscape { font-size: 12px; font-style: italic; } /* page title simple hr effect */ .products-hero::after, .moodboard-hero::after { content: ''; display: block; border-bottom: 1px solid var(--border); margin-top: 15px; } /* keep it simple stupid */ ::-webkit-scrollbar { width: 16px; } ::-webkit-scrollbar-track { background: #e0e0e0; } ::-webkit-scrollbar-thumb { background: #a0a0a0; border: 2px solid #e0e0e0; } ::selection { background: var(--link); color: #ffffff; } /* links behave like links */ a { color: var(--link); } a:visited { color: var(--visited); } /* Mobile overrides */ @media (max-width: 768px) { .cta-btn-desktop { display: none !important; } .cta-btn-mobile { display: inline !important; } }