/* Rosewood Arena — a self-contained theme, independent of lilacrose.dev's shared site CSS. This file defines every base layout class the templates use (container/section/nav/footer/etc.) so this product can eventually stand fully on its own (own domain, own audience) without dragging along the main site's look. */ :root { --main-bg: #1c130f; --card-bg: rgba(61, 39, 30, 0.55); --card-bg-solid: #2c1d16; --text-color: #f0e0c8; --text-muted: rgba(240, 224, 200, 0.65); --accent: #c99a44; --accent-transparent: rgba(201, 154, 68, 0.22); --accent-secondary: #a8465a; --accent-secondary-transparent: rgba(168, 70, 90, 0.22); --error-color: #d9534f; --success-color: #83a765; --warning-color: #d99a3d; --card-radius: 8px; --gap: 20px; --thin-border: 1px solid var(--accent-transparent); --font-display: 'Cinzel', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { /* Mobile browsers (especially iOS Safari's overscroll/rubber-band bounce) paint the element's own background in the gaps above/below the page when you scroll past the content - without this, that shows up as a flash of white since only had a background set. */ background: var(--main-bg); } body { font-family: var(--font-body); background: radial-gradient(ellipse at 50% 0%, #2a1c14 0%, var(--main-bg) 60%); color: var(--text-color); display: flex; justify-content: center; padding: 30px 20px; line-height: 1.5; font-size: 15px; min-height: 100vh; } a { color: var(--accent); } .hero { text-align: center; padding: 30px 0 10px; } .hero h1 { font-family: var(--font-display); font-size: 2.75rem; font-weight: 600; color: var(--accent); letter-spacing: 1px; text-shadow: 0 0 30px var(--accent-transparent); } .hero-tagline { color: var(--text-muted); font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; } .container { display: flex; flex-direction: column; gap: var(--gap); width: 100%; max-width: 1000px; } .section { display: flex; flex-direction: column; gap: 12px; } .card { background-color: var(--card-bg); border: var(--thin-border); border-radius: var(--card-radius); padding: 18px; text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .card:hover { border-color: var(--accent); box-shadow: 0 0 15px var(--accent-transparent); } .card h3 { font-family: var(--font-display); color: var(--accent); margin-bottom: 10px; letter-spacing: 0.5px; font-size: 1rem; font-weight: 600; } .card p { margin: 8px 0; } .card a { color: var(--accent); text-decoration: none; font-size: 0.85rem; display: inline-block; margin-top: 8px; transition: opacity 0.2s ease; } .card a:hover { opacity: 0.8; } .section h2 { font-family: var(--font-display); color: var(--accent); margin: 0; font-size: 1.15rem; letter-spacing: 1px; font-weight: 600; padding-bottom: 8px; border-bottom: var(--thin-border); } /* ==================== Navigation ==================== */ .nav-section { margin-bottom: 10px; } .nav-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; } .nav-card { display: flex; align-items: center; gap: 15px; background: linear-gradient(135deg, var(--card-bg), rgba(201, 154, 68, 0.06)); border: var(--thin-border); border-radius: var(--card-radius); padding: 20px; text-decoration: none; color: var(--text-color); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .nav-card:hover { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-transparent), 0 5px 20px rgba(201, 154, 68, 0.15); transform: translateY(-3px); } .nav-content { flex: 1; display: flex; flex-direction: column; gap: 4px; } .nav-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--accent); letter-spacing: 0.5px; } .nav-subtitle { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } .nav-arrow { font-size: 1.3rem; color: var(--accent); } /* ==================== Lists ==================== */ .spec-list { list-style: none; } .spec-list li { padding: 6px 0; border-bottom: var(--thin-border); letter-spacing: 0.3px; font-size: 0.9rem; } .spec-list li:last-child { border-bottom: none; } /* ==================== Forms ==================== */ input, select, textarea, button { font-family: inherit; color: var(--text-color); background: var(--card-bg-solid); border: var(--thin-border); border-radius: 4px; padding: 8px 10px; font-size: 0.95rem; } button, input[type="submit"], input[type="button"], .web1-btn { background: var(--accent-transparent); border: 1px solid var(--accent); color: var(--text-color); cursor: pointer; font-family: var(--font-display); letter-spacing: 0.5px; transition: background 0.2s ease; } button:hover, input[type="submit"]:hover, input[type="button"]:hover, .web1-btn:hover { background: var(--accent-secondary-transparent); border-color: var(--accent-secondary); } /* ==================== Footer ==================== */ .site-footer { border-top: var(--thin-border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; } .footer-row { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; text-align: center; } .footer-meta { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; } .footer-tagline { font-size: 0.65rem; color: rgba(240, 224, 200, 0.4); text-transform: uppercase; letter-spacing: 1px; padding-bottom: 8px; }