/* ============================================ FINAL FANTASY — THE ADVENTURER'S QUEST LOG Crystals, starlight, and ancient magic ============================================ */ /* ---- CSS Custom Properties ---- */ :root { --bg-abyss: #0B0E1A; --bg-deep: #101428; --bg-panel: #1A1F3D; --bg-card: rgba(26, 31, 61, 0.85); --bg-card-solid: #1E2347; --bg-input: #12162E; --crystal: #4ECDC4; --gold: #FFD700; --hp-red: #E05555; --mp-blue: #5B8DEF; --cure-green: #50C878; --xp-purple: #A855F7; --phoenix: #FF7B4F; --crystal-dim: rgba(78, 205, 196, 0.12); --gold-dim: rgba(255, 215, 0, 0.10); --red-dim: rgba(224, 85, 85, 0.10); --blue-dim: rgba(91, 141, 239, 0.10); --green-dim: rgba(80, 200, 120, 0.10); --purple-dim: rgba(168, 85, 247, 0.10); --text-parchment: #E8DCC8; --text-secondary: #8A94B2; --text-muted: #5A6380; --border-subtle: rgba(78, 205, 196, 0.10); --border-medium: rgba(78, 205, 196, 0.18); --border-glow: rgba(78, 205, 196, 0.35); --font-heading: 'Cinzel', 'Palatino', 'Georgia', serif; --font-body: 'Rajdhani', 'Exo 2', -apple-system, BlinkMacSystemFont, sans-serif; --font-stat: 'Exo 2', 'Rajdhani', monospace; --radius: 4px; --radius-sm: 3px; --transition: 0.25s ease; --shadow-panel: 0 0 20px rgba(78, 205, 196, 0.06), 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 12px rgba(78, 205, 196, 0.15), 0 0 30px rgba(78, 205, 196, 0.05); --shadow-gold: 0 0 12px rgba(255, 215, 0, 0.15), 0 0 30px rgba(255, 215, 0, 0.05); } /* ============================================ .hack//GU theme — cyber-noir terminal Activated via ============================================ */ [data-theme="hack"] { --bg-abyss: #05060A; --bg-deep: #0A0C12; --bg-panel: #11141C; --bg-card: rgba(17, 20, 28, 0.92); --bg-card-solid: #14171F; --bg-input: #0C0E15; --crystal: #FFC400; --gold: #F0A500; --hp-red: #FF3355; --mp-blue: #38B6FF; --cure-green: #6EE7B7; --xp-purple: #FF2E97; --phoenix: #FF6A1F; --crystal-dim: rgba(255, 196, 0, 0.12); --gold-dim: rgba(240, 165, 0, 0.10); --red-dim: rgba(255, 51, 85, 0.10); --blue-dim: rgba(56, 182, 255, 0.10); --green-dim: rgba(110, 231, 183, 0.10); --purple-dim: rgba(255, 46, 151, 0.10); --text-parchment: #E6E1CC; --text-secondary: #8C8FA3; --text-muted: #4A4D5E; --border-subtle: rgba(255, 196, 0, 0.12); --border-medium: rgba(255, 196, 0, 0.22); --border-glow: rgba(255, 46, 151, 0.40); --font-heading: 'Orbitron', 'Share Tech Mono', monospace; --font-body: 'Share Tech Mono', 'Exo 2', monospace; --font-stat: 'Share Tech Mono', 'Exo 2', monospace; --radius: 0px; --radius-sm: 0px; --shadow-panel: 0 0 0 1px rgba(255, 196, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 8px rgba(255, 196, 0, 0.35), 0 0 24px rgba(255, 46, 151, 0.10); --shadow-gold: 0 0 10px rgba(240, 165, 0, 0.30), 0 0 24px rgba(240, 165, 0, 0.08); } /* ============================================ Ocarina of Time theme — Hyrule twilight Triforce gold, twilight field, parchment scrolls Activated via ============================================ */ [data-theme="oot"] { --bg-abyss: #0F1A2A; --bg-deep: #142035; --bg-panel: #1B2A3F; --bg-card: rgba(27, 42, 63, 0.85); --bg-card-solid: #1F2E45; --bg-input: #0E1828; --crystal: #F4C842; /* Triforce gold — primary accent */ --gold: #D4A03A; /* Hylian bronze — secondary */ --hp-red: #E63946; /* Heart container red */ --mp-blue: #7BB6E0; /* Hylian shield / Navi blue */ --cure-green: #5BAA52; /* Kokiri tunic green */ --xp-purple: #7B4FAB; /* Shadow Temple purple */ --phoenix: #E07A2F; /* Din's Fire orange */ --crystal-dim: rgba(244, 200, 66, 0.12); --gold-dim: rgba(212, 160, 58, 0.10); --red-dim: rgba(230, 57, 70, 0.10); --blue-dim: rgba(123, 182, 224, 0.10); --green-dim: rgba(91, 170, 82, 0.10); --purple-dim: rgba(123, 79, 171, 0.10); --text-parchment: #F0E4C2; /* Aged scroll parchment */ --text-secondary: #A89B7A; /* Bronze ink */ --text-muted: #6B6450; /* Faded ink */ --border-subtle: rgba(244, 200, 66, 0.10); --border-medium: rgba(244, 200, 66, 0.22); --border-glow: rgba(244, 200, 66, 0.40); --font-heading: 'Cinzel', 'Palatino', 'Georgia', serif; --font-body: 'EB Garamond', 'Cinzel', 'Palatino', serif; --font-stat: 'Cinzel', 'EB Garamond', serif; --radius: 6px; --radius-sm: 4px; --shadow-panel: 0 0 22px rgba(244, 200, 66, 0.08), 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 14px rgba(244, 200, 66, 0.25), 0 0 36px rgba(244, 200, 66, 0.08); --shadow-gold: 0 0 14px rgba(244, 200, 66, 0.30), 0 0 36px rgba(212, 160, 58, 0.10); } /* ============================================ Ragnarok Online theme — Prontera dusk Iconic blue rooftops, gold trim, parchment UI Activated via ============================================ */ [data-theme="ro"] { --bg-abyss: #0B1A2E; --bg-deep: #122644; --bg-panel: #1A3252; /* iconic Prontera blue */ --bg-card: rgba(26, 50, 82, 0.85); --bg-card-solid: #1F3A5C; --bg-input: #0E1A30; --crystal: #5BAEDC; /* Prontera rooftop blue */ --gold: #E8C97D; /* cathedral gold trim */ --hp-red: #E04545; /* RO HP-bar red */ --mp-blue: #4A7AC8; /* RO SP-bar blue */ --cure-green: #7FCB6E; /* heal green */ --xp-purple: #A87CC8; /* purple potion */ --phoenix: #F0974A; /* warm orange accent */ --crystal-dim: rgba(91, 174, 220, 0.12); --gold-dim: rgba(232, 201, 125, 0.12); --red-dim: rgba(224, 69, 69, 0.10); --blue-dim: rgba(74, 122, 200, 0.10); --green-dim: rgba(127, 203, 110, 0.10); --purple-dim: rgba(168, 124, 200, 0.10); --text-parchment: #F5EDD8; /* RO UI cream */ --text-secondary: #9DB3C8; --text-muted: #5C7390; --border-subtle: rgba(91, 174, 220, 0.12); --border-medium: rgba(91, 174, 220, 0.24); --border-glow: rgba(232, 201, 125, 0.40); --font-heading: 'Cinzel', 'Trajan Pro', 'Palatino', serif; --font-body: 'EB Garamond', 'Cinzel', 'Palatino', serif; --font-stat: 'Cinzel', 'Exo 2', serif; --radius: 4px; --radius-sm: 3px; --shadow-panel: 0 0 22px rgba(91, 174, 220, 0.10), 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-glow: 0 0 14px rgba(91, 174, 220, 0.25), 0 0 36px rgba(232, 201, 125, 0.10); --shadow-gold: 0 0 14px rgba(232, 201, 125, 0.30), 0 0 36px rgba(232, 201, 125, 0.10); } /* ---- Reset & Base ---- */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg-abyss); color: var(--text-parchment); height: 100vh; overflow: hidden; position: relative; font-weight: 500; } /* ---- Fantasy Night Sky ---- */ .ff-sky { position: fixed; inset: 0; background: radial-gradient(ellipse 120% 80% at 50% 0%, #141833 0%, #0B0E1A 60%), linear-gradient(180deg, #0D1025 0%, #0B0E1A 100%); z-index: 0; } /* ---- Aurora / Crystal Energy Band ---- */ .ff-aurora { position: fixed; top: 0; left: 0; right: 0; height: 35%; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(78, 205, 196, 0.05) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 70% 10%, rgba(168, 85, 247, 0.04) 0%, transparent 60%), radial-gradient(ellipse 50% 30% at 50% 5%, rgba(91, 141, 239, 0.03) 0%, transparent 50%); animation: auroraShift 20s ease-in-out infinite alternate; } @keyframes auroraShift { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.7; } } /* ---- Twinkling Stars ---- */ .ff-stars { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .star { position: absolute; border-radius: 50%; background: #fff; animation: starTwinkle var(--dur, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); } .star-1 { width: 2px; height: 2px; top: 5%; left: 8%; --dur: 3.2s; --delay: 0s; } .star-2 { width: 1px; height: 1px; top: 12%; left: 22%; --dur: 4.1s; --delay: -1.5s; } .star-3 { width: 2px; height: 2px; top: 8%; left: 38%; --dur: 2.8s; --delay: -0.8s; } .star-4 { width: 1px; height: 1px; top: 18%; left: 52%; --dur: 3.6s; --delay: -2.1s; } .star-5 { width: 3px; height: 3px; top: 3%; left: 65%; --dur: 4.5s; --delay: -0.3s; opacity: 0.7; } .star-6 { width: 1px; height: 1px; top: 15%; left: 78%; --dur: 3.0s; --delay: -1.8s; } .star-7 { width: 2px; height: 2px; top: 7%; left: 90%; --dur: 3.8s; --delay: -2.5s; } .star-8 { width: 1px; height: 1px; top: 22%; left: 15%; --dur: 4.2s; --delay: -0.5s; } .star-9 { width: 2px; height: 2px; top: 25%; left: 45%; --dur: 3.4s; --delay: -1.2s; } .star-10 { width: 1px; height: 1px; top: 20%; left: 60%; --dur: 2.9s; --delay: -2.8s; } .star-11 { width: 1px; height: 1px; top: 28%; left: 33%; --dur: 3.7s; --delay: -0.9s; } .star-12 { width: 2px; height: 2px; top: 10%; left: 4%; --dur: 4.0s; --delay: -1.7s; } .star-13 { width: 1px; height: 1px; top: 6%; left: 72%; --dur: 3.3s; --delay: -2.3s; } .star-14 { width: 2px; height: 2px; top: 30%; left: 85%; --dur: 3.9s; --delay: -0.6s; } .star-15 { width: 1px; height: 1px; top: 16%; left: 95%; --dur: 4.3s; --delay: -1.4s; } @keyframes starTwinkle { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } /* ---- Crystal Energy Wisps ---- */ .ff-wisps { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .wisp { position: absolute; border-radius: 50% / 30%; opacity: 0; filter: blur(2px); animation: wispDrift var(--dur, 25s) ease-in-out infinite; animation-delay: var(--delay, 0s); } .wisp-1 { width: 120px; height: 3px; top: 15%; left: -130px; background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.25), transparent); --dur: 30s; --delay: 0s; } .wisp-2 { width: 180px; height: 2px; top: 25%; left: -200px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.2), transparent); --dur: 40s; --delay: -15s; } .wisp-3 { width: 100px; height: 2px; top: 8%; left: -120px; background: linear-gradient(90deg, transparent, rgba(91, 141, 239, 0.2), transparent); --dur: 35s; --delay: -8s; } .wisp-4 { width: 150px; height: 3px; top: 35%; left: -170px; background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.15), transparent); --dur: 45s; --delay: -25s; } @keyframes wispDrift { 0% { transform: translateX(0) translateY(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateX(calc(100vw + 250px)) translateY(-30px); opacity: 0; } } /* ---- App Container ---- */ #app { display: flex; flex-direction: column; height: 100vh; position: relative; z-index: 5; } /* ---- Animations ---- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes goldShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes scanLine { from { left: -100%; } to { left: 200%; } } @keyframes glowPulse { 0%, 100% { box-shadow: var(--shadow-panel); } 50% { box-shadow: var(--shadow-glow); } } /* ---- FF Double-Border Panel Mixin (via pseudo-elements) ---- */ .ff-panel { position: relative; background: var(--bg-card); border: 1px solid var(--border-glow); box-shadow: var(--shadow-panel); } .ff-panel::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.08); border-radius: inherit; pointer-events: none; } /* ---- Scrollbar Styling ---- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgba(11, 14, 26, 0.5); } ::-webkit-scrollbar-thumb { background: rgba(78, 205, 196, 0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(78, 205, 196, 0.4); } /* ---- Hidden utility ---- */ .hidden { display: none !important; } /* ---- Views ---- */ .view { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* ---- Landing / Home Page ---- */ /* ---- FF Menu System: Home Layout ---- */ #home-view { justify-content: center; align-items: center; padding: 32px; } .home-container { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: 1fr auto; gap: 16px; width: 100%; max-width: 960px; height: 100%; max-height: 640px; animation: fadeIn 0.8s ease both; } /* ---- FF Panel (Classic blue window) ---- */ .ff-panel { background: linear-gradient(135deg, #0a0f2e 0%, #111842 50%, #0d1233 100%); border: 2px solid #6e7fba; border-radius: 8px; position: relative; box-shadow: inset 0 0 0 2px #1a2255, inset 0 0 0 3px rgba(110, 127, 186, 0.25), 0 4px 20px rgba(0, 0, 0, 0.5); } .ff-panel-inner { padding: 16px 20px; height: 100%; display: flex; flex-direction: column; } /* ---- Left Panel: Menu Commands ---- */ .ff-menu-panel { grid-row: 1 / 2; grid-column: 1 / 2; } .ff-menu-panel .ff-panel-inner { justify-content: space-between; } /* ---- Right Column ---- */ .ff-right-column { grid-row: 1 / 2; grid-column: 2 / 3; display: flex; flex-direction: column; gap: 16px; min-height: 0; } /* ---- Stats Panel ---- */ .ff-stats-panel { flex-shrink: 0; } /* ---- Skills Panel ---- */ .ff-skills-panel { flex: 1; min-height: 0; } .ff-skills-panel .skills-legend { margin: 0; padding: 0; max-width: none; height: 100%; } .ff-skills-panel .skills-panel { background: transparent; border: none; box-shadow: none; padding: 0; height: 100%; } .ff-skills-panel .skills-panel::after { display: none; } .ff-skills-panel .skills-panel-title { font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); margin: 0 0 10px 0; text-align: left; } /* ---- Epitaph Panel ---- */ .ff-epitaph-panel { flex-shrink: 0; } .ff-epitaph-panel .ff-panel-inner { text-align: center; padding: 12px 20px; } /* ---- Bottom Title Bar ---- */ .ff-title-panel { grid-column: 1 / -1; grid-row: 2 / 3; } .ff-title-panel .ff-panel-inner { padding: 10px 20px; flex-direction: row; align-items: center; justify-content: center; } .home-title { font-family: var(--font-heading); font-size: 22px; font-weight: 800; letter-spacing: 6px; text-transform: uppercase; color: var(--gold); margin: 0; background: linear-gradient(90deg, #B8860B, #FFD700 30%, #FFF8DC 50%, #FFD700 70%, #B8860B); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShimmer 6s linear infinite; text-shadow: none; filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.2)); } /* ---- Dashboard Stats (inside FF panel) ---- */ .dashboard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .stat-card { background: transparent; border: none; border-radius: 0; padding: 4px 0; display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; transition: all var(--transition); box-shadow: none; position: relative; } .stat-card::after { display: none; } .stat-card:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, 0.03); } .stat-cyan .stat-value { color: var(--crystal); text-shadow: 0 0 8px rgba(78, 205, 196, 0.3); } .stat-lime .stat-value { color: var(--cure-green); text-shadow: 0 0 8px rgba(80, 200, 120, 0.3); } .stat-pink .stat-value { color: var(--hp-red); text-shadow: 0 0 8px rgba(224, 85, 85, 0.3); } .stat-orange .stat-value { color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); } .stat-green .stat-value { color: var(--cure-green); text-shadow: 0 0 8px rgba(80, 200, 120, 0.3); } .stat-cyan, .stat-lime, .stat-pink, .stat-orange, .stat-green, .stat-purple { border-color: transparent; } .stat-pulse { animation: glowPulse 3s ease-in-out infinite; } .stat-icon { font-size: 16px; opacity: 0.9; flex-shrink: 0; } .stat-value { font-family: var(--font-stat); font-size: 16px; font-weight: 700; letter-spacing: 0.5px; } .stat-label { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); } /* ---- Quick Actions (inside menu panel) ---- */ .dashboard-quick-actions { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(110, 127, 186, 0.2); } .dash-action-btn { font-family: var(--font-heading); font-size: 11px; font-weight: 600; padding: 6px 16px; border-radius: var(--radius-sm); background: transparent; border: 1px solid rgba(110, 127, 186, 0.3); color: var(--crystal); cursor: pointer; transition: all var(--transition); letter-spacing: 1.5px; text-transform: uppercase; flex: 1; position: relative; overflow: hidden; } /* Hover scan-line effect */ .dash-action-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.08), transparent); transition: none; } .dash-action-btn:hover::before { animation: scanLine 0.6s ease forwards; } .dash-action-btn:hover { background: var(--crystal-dim); border-color: var(--crystal); box-shadow: var(--shadow-glow); } /* ---- Menu Cards (vertical list) ---- */ .home-cards { display: flex; flex-direction: column; gap: 2px; } .home-card { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; padding: 10px 12px 10px 28px; background: transparent; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s ease; animation: fadeIn 0.4s ease both; position: relative; overflow: visible; box-shadow: none; } .home-card::after { display: none; } /* FF cursor arrow */ .home-card::before { content: '\25B6'; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 10px; opacity: 0; transition: opacity 0.15s ease; text-shadow: 0 0 6px rgba(255, 215, 0, 0.5); } .home-card:nth-child(1) { animation-delay: 0.05s; } .home-card:nth-child(2) { animation-delay: 0.10s; } .home-card:nth-child(3) { animation-delay: 0.15s; } .home-card:nth-child(4) { animation-delay: 0.20s; } .home-card:nth-child(5) { animation-delay: 0.25s; } .home-card:nth-child(6) { animation-delay: 0.30s; } .home-card:nth-child(7) { animation-delay: 0.35s; } .home-card:nth-child(8) { animation-delay: 0.40s; } .home-card:nth-child(9) { animation-delay: 0.45s; } .home-card:nth-child(10) { animation-delay: 0.50s; } .home-card:hover { background: rgba(110, 127, 186, 0.1); transform: none; box-shadow: none; border-color: transparent; } .home-card:hover::before { opacity: 1; } .home-card:hover .home-card-label { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); } .home-card:nth-child(1):hover, .home-card:nth-child(2):hover, .home-card:nth-child(3):hover, .home-card:nth-child(4):hover, .home-card:nth-child(5):hover, .home-card:nth-child(6):hover, .home-card:nth-child(7):hover, .home-card:nth-child(8):hover, .home-card:nth-child(9):hover, .home-card:nth-child(10):hover { border-color: transparent; } .home-card-icon { font-size: 22px; line-height: 1; flex-shrink: 0; width: 28px; text-align: center; } .home-card-label { font-family: var(--font-heading); font-size: 15px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-parchment); transition: all 0.15s ease; white-space: nowrap; } .home-card-desc { display: none; } /* ---- Epitaph (inside FF panel) ---- */ .epitaph-display { /* inherits from .ff-panel */ } .epitaph-icon { display: none; } .epitaph-text { font-family: var(--font-body); font-size: 13px; font-style: italic; color: var(--text-parchment); line-height: 1.5; margin-bottom: 6px; } .epitaph-source { font-family: var(--font-heading); font-size: 10px; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase; font-style: normal; } /* ---- View Top Bar ---- */ .view-topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); background: rgba(26, 31, 61, 0.6); backdrop-filter: blur(8px); } .view-topbar-title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 16px rgba(255, 215, 0, 0.2); } .back-btn { font-family: var(--font-heading); background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); padding: 5px 14px; font-size: 11px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all var(--transition); } .back-btn:hover { background: var(--crystal-dim); border-color: var(--crystal); color: var(--crystal); } .topbar-action-btn { font-family: var(--font-heading); background: transparent; border: 1px solid rgba(255, 215, 0, 0.25); color: var(--gold); padding: 5px 14px; font-size: 11px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all var(--transition); } .topbar-action-btn:hover { background: var(--gold-dim); border-color: var(--gold); box-shadow: var(--shadow-gold); transform: translateY(-1px); } .topbar-action-btn:active { transform: translateY(0); } .topbar-nav-btn { border-color: rgba(168, 85, 247, 0.25) !important; color: var(--xp-purple) !important; position: relative; overflow: hidden; } .topbar-nav-btn::before { content: '\25B6'; margin-right: 6px; font-size: 8px; opacity: 0; transition: opacity 0.2s ease; } .topbar-nav-btn:hover { background: var(--purple-dim) !important; border-color: var(--xp-purple) !important; box-shadow: 0 0 12px rgba(168, 85, 247, 0.15) !important; } .topbar-nav-btn:hover::before { opacity: 1; } /* ---- Do Work View wrapper ---- */ #dowork-view { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* ---- Week View (Top Half) ---- */ #week-view { flex: 0 0 auto; height: 50vh; min-height: 120px; display: flex; flex-direction: column; padding: 12px 24px 8px; animation: fadeIn 0.5s ease both; } .week-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 14px; } .week-nav button { font-family: var(--font-heading); background: var(--bg-card); border: 1px solid var(--border-medium); color: var(--crystal); padding: 7px 18px; font-size: 12px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all var(--transition); box-shadow: var(--shadow-panel); } .week-nav button:hover { background: var(--crystal-dim); border-color: var(--crystal); box-shadow: var(--shadow-glow); transform: translateY(-1px); } .week-nav button:active { transform: translateY(0); } #week-label, #plan-week-label, #ts-week-label { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--gold); text-shadow: 0 0 16px rgba(255, 215, 0, 0.2); letter-spacing: 2px; } .day-boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; flex: 1; min-height: 0; } .day-box { border: 1px solid var(--border-medium); border-radius: var(--radius); display: flex; flex-direction: column; background: var(--bg-card); min-height: 0; transition: all var(--transition); box-shadow: var(--shadow-panel); animation: fadeIn 0.5s ease both; position: relative; } /* Inner border */ .day-box::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.05); border-radius: 2px; pointer-events: none; } .day-box:nth-child(1) { animation-delay: 0.05s; } .day-box:nth-child(2) { animation-delay: 0.1s; } .day-box:nth-child(3) { animation-delay: 0.15s; } .day-box:nth-child(4) { animation-delay: 0.2s; } .day-box:nth-child(5) { animation-delay: 0.25s; } .day-box:hover { border-color: var(--border-glow); box-shadow: var(--shadow-glow); transform: scale(1.01); } .day-box.drag-over { background: rgba(80, 200, 120, 0.06); border-color: var(--cure-green); box-shadow: 0 0 16px rgba(80, 200, 120, 0.2), 0 0 40px rgba(80, 200, 120, 0.06); transform: scale(1.02); } .day-label { font-family: var(--font-heading); padding: 10px 12px 6px; font-size: 12px; font-weight: 700; color: var(--crystal); text-shadow: 0 0 10px rgba(78, 205, 196, 0.3); letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; } .day-tasks { flex: 1; overflow-y: auto; padding: 6px 8px 8px; } .day-task-item { background: linear-gradient(135deg, rgba(78, 205, 196, 0.06), rgba(91, 141, 239, 0.04)); border: 1px solid rgba(78, 205, 196, 0.12); border-radius: var(--radius-sm); padding: 5px 8px; margin-bottom: 5px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; transition: all var(--transition); cursor: grab; user-select: none; } .day-task-item:active { cursor: grabbing; } .day-task-item.dragging { opacity: 0.3; } .day-task-item:hover { background: linear-gradient(135deg, rgba(78, 205, 196, 0.12), rgba(91, 141, 239, 0.08)); border-color: rgba(78, 205, 196, 0.25); } .day-task-item .task-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-parchment); font-weight: 500; } .day-task-item .undo-btn { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--text-muted); padding: 0 2px; margin-left: 6px; line-height: 1; transition: color var(--transition); } .day-task-item .undo-btn:hover { color: var(--hp-red); text-shadow: 0 0 8px rgba(224, 85, 85, 0.5); } /* ---- Resize Handle ---- */ .resize-handle { flex: 0 0 10px; margin: 0 24px; cursor: row-resize; position: relative; display: flex; align-items: center; justify-content: center; user-select: none; z-index: 10; } .resize-handle::before { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.3) 15%, rgba(168, 85, 247, 0.3) 50%, rgba(255, 215, 0, 0.3) 85%, transparent ); box-shadow: 0 0 8px rgba(78, 205, 196, 0.1); transition: all var(--transition); } .resize-handle::after { content: ''; width: 40px; height: 4px; border-radius: 2px; background: rgba(78, 205, 196, 0.2); position: relative; z-index: 1; transition: all var(--transition); } .resize-handle:hover::before { box-shadow: 0 0 14px rgba(78, 205, 196, 0.2); } .resize-handle:hover::after { background: rgba(78, 205, 196, 0.4); box-shadow: 0 0 8px rgba(78, 205, 196, 0.2); width: 50px; } .resize-handle.dragging::before { background: linear-gradient(90deg, transparent, rgba(80, 200, 120, 0.4) 15%, rgba(78, 205, 196, 0.4) 50%, rgba(80, 200, 120, 0.4) 85%, transparent ); box-shadow: 0 0 16px rgba(80, 200, 120, 0.2); } .resize-handle.dragging::after { background: var(--cure-green); box-shadow: 0 0 10px rgba(80, 200, 120, 0.3); } body.resizing { cursor: row-resize !important; user-select: none !important; } body.resizing * { cursor: row-resize !important; user-select: none !important; } /* ---- Task Section (Bottom Half) ---- */ #task-section { flex: 1; display: flex; flex-direction: column; padding: 14px 24px 16px; min-height: 0; animation: fadeIn 0.5s ease 0.2s both; border-left: 2px solid rgba(168, 85, 247, 0.15); margin-left: 24px; margin-right: 24px; } .task-header { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; } .task-header #new-task-btn { margin-left: auto; } .task-header h2 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 14px rgba(255, 215, 0, 0.2); } /* ---- Task Filters ---- */ .task-filters { display: flex; gap: 4px; margin-left: 8px; } .filter-btn { font-family: var(--font-heading); background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); padding: 4px 12px; font-size: 11px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; transition: all var(--transition); white-space: nowrap; position: relative; overflow: hidden; } .filter-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.06), transparent); } .filter-btn:hover::before { animation: scanLine 0.5s ease forwards; } .filter-btn:hover { background: var(--purple-dim); border-color: rgba(168, 85, 247, 0.3); color: var(--xp-purple); } .filter-btn.active { background: var(--purple-dim); border-color: rgba(168, 85, 247, 0.4); color: var(--xp-purple); text-shadow: 0 0 8px rgba(168, 85, 247, 0.3); box-shadow: 0 0 10px rgba(168, 85, 247, 0.1); } #new-task-btn { font-family: var(--font-heading); background: transparent; border: 1px solid rgba(78, 205, 196, 0.3); color: var(--crystal); padding: 6px 16px; font-size: 12px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all var(--transition); position: relative; overflow: hidden; } #new-task-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.08), transparent); } #new-task-btn:hover::before { animation: scanLine 0.5s ease forwards; } #new-task-btn:hover { background: var(--crystal-dim); border-color: var(--crystal); box-shadow: var(--shadow-glow); transform: translateY(-1px); } #new-task-btn:active { transform: translateY(0); } #task-list { flex: 1; overflow-y: auto; min-height: 0; } .task-item { display: flex; align-items: center; padding: 10px 14px; margin-bottom: 6px; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius); cursor: grab; user-select: none; gap: 14px; transition: all var(--transition); position: relative; overflow: hidden; } /* Hover scan-line on task items */ .task-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.04), transparent); pointer-events: none; } .task-item:hover::before { animation: scanLine 0.8s ease forwards; } .task-item:hover { border-color: var(--border-glow); box-shadow: var(--shadow-glow); background: rgba(26, 31, 61, 0.95); } .task-item:active { cursor: grabbing; } .task-item.dragging { opacity: 0.3; border-color: var(--cure-green); box-shadow: 0 0 16px rgba(80, 200, 120, 0.15); } .task-item .task-name { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-parchment); font-size: 14px; } /* ---- Subtasks ---- */ .task-item-wrapper { margin-bottom: 2px; } .subtask-list { margin-left: 28px; border-left: 2px solid rgba(168, 85, 247, 0.15); padding-left: 0; } .subtask-list .task-item { padding: 6px 10px; font-size: 12px; background: rgba(26, 31, 61, 0.5); border-color: var(--border-subtle); } .subtask-progress { font-family: var(--font-stat); font-size: 10px; color: var(--cure-green); background: var(--green-dim); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(80, 200, 120, 0.2); margin-left: 8px; } .add-subtask-btn { font-family: var(--font-heading); font-size: 10px; padding: 2px 8px; border-radius: var(--radius-sm); background: transparent; border: 1px solid rgba(168, 85, 247, 0.25); color: var(--xp-purple); cursor: pointer; letter-spacing: 0.5px; text-transform: uppercase; transition: all var(--transition); } .add-subtask-btn:hover { background: var(--purple-dim); border-color: var(--xp-purple); } .task-recurring-icon { margin-left: 6px; font-size: 13px; color: var(--cure-green); text-shadow: 0 0 6px rgba(80, 200, 120, 0.4); opacity: 0.85; cursor: default; } .task-notes-icon { margin-left: 6px; font-size: 12px; opacity: 0.5; cursor: default; } .task-item .task-client { color: var(--text-secondary); font-size: 12px; flex-shrink: 0; font-family: var(--font-body); font-style: italic; letter-spacing: 0.3px; } .task-item .task-status { font-family: var(--font-heading); font-size: 10px; padding: 3px 10px; border-radius: 2px; flex-shrink: 0; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; } .task-status.not-started { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.06); } .task-status.in-progress { background: var(--blue-dim); color: var(--mp-blue); border: 1px solid rgba(91, 141, 239, 0.2); text-shadow: 0 0 8px rgba(91, 141, 239, 0.3); } .task-skill-badge { font-family: var(--font-stat); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; flex-shrink: 0; padding: 2px 8px; border-radius: 2px; border: 1px solid currentColor; opacity: 0.8; white-space: nowrap; } .task-item .task-actions { display: flex; gap: 6px; flex-shrink: 0; } .task-actions button { font-family: var(--font-heading); background: transparent; border: 1px solid var(--border-medium); cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 10px; color: var(--text-secondary); letter-spacing: 0.8px; text-transform: uppercase; transition: all var(--transition); } .task-actions button:hover { background: var(--crystal-dim); border-color: var(--crystal); color: var(--crystal); } .task-actions .delete-btn:hover { background: var(--red-dim); border-color: rgba(224, 85, 85, 0.35); color: var(--hp-red); box-shadow: 0 0 10px rgba(224, 85, 85, 0.1); } /* ---- Modal ---- */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: flex; align-items: center; justify-content: center; } .modal.hidden { display: none; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 5, 15, 0.65); backdrop-filter: blur(6px); } .modal-content { position: relative; background: var(--bg-panel); border: 1px solid var(--border-glow); border-radius: var(--radius); padding: 28px; width: 420px; max-width: 90%; box-shadow: 0 0 30px rgba(78, 205, 196, 0.1), 0 0 60px rgba(78, 205, 196, 0.03), 0 8px 32px rgba(0, 0, 0, 0.4); animation: fadeIn 0.25s ease both; } /* FF double border on modal */ .modal-content::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(78, 205, 196, 0.08); border-radius: 2px; pointer-events: none; } .modal-content h3 { font-family: var(--font-heading); margin-bottom: 20px; font-size: 16px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 14px rgba(255, 215, 0, 0.2); } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-family: var(--font-heading); font-size: 10px; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); letter-spacing: 2px; text-transform: uppercase; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; background: var(--bg-input); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font-body); color: var(--text-parchment); transition: all var(--transition); } .form-group textarea { resize: vertical; min-height: 60px; } .form-group select { cursor: pointer; } .form-group select option { background: var(--bg-deep); color: var(--text-parchment); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--crystal); box-shadow: 0 0 12px rgba(78, 205, 196, 0.15), inset 0 0 8px rgba(78, 205, 196, 0.03); } .recurrence-interval-row { display: flex; align-items: center; gap: 10px; } .recurrence-interval-row input[type="number"] { width: 70px; } .recurrence-unit { font-family: var(--font-heading); font-size: 11px; color: var(--text-secondary); letter-spacing: 1px; text-transform: uppercase; } .form-actions { display: flex; gap: 10px; margin-top: 20px; } .btn-save { font-family: var(--font-heading); background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(80, 200, 120, 0.15)); color: var(--crystal); border: 1px solid rgba(78, 205, 196, 0.4); padding: 9px 24px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all var(--transition); position: relative; overflow: hidden; } .btn-save::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(78, 205, 196, 0.1), transparent); } .btn-save:hover::before { animation: scanLine 0.5s ease forwards; } .btn-save:hover { background: linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(80, 200, 120, 0.25)); border-color: var(--crystal); box-shadow: var(--shadow-glow); transform: translateY(-1px); } .btn-save:active { transform: translateY(0); } .btn-cancel { font-family: var(--font-heading); background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); padding: 9px 24px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all var(--transition); } .btn-cancel:hover { background: var(--red-dim); border-color: rgba(224, 85, 85, 0.3); color: var(--hp-red); } /* ---- Planning View ---- */ #planning-view { padding: 0 24px 16px; animation: fadeIn 0.4s ease both; } #planning-view .week-nav { margin-bottom: 12px; padding-top: 8px; } .planning-grid { display: grid; grid-template-columns: 1fr repeat(5, 1fr); gap: 10px; flex: 1; min-height: 0; } .planning-column { display: flex; flex-direction: column; border: 1px solid rgba(168, 85, 247, 0.15); border-radius: var(--radius); background: var(--bg-card); min-height: 0; transition: all var(--transition); box-shadow: var(--shadow-panel); animation: fadeIn 0.4s ease both; position: relative; } /* Inner border */ .planning-column::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(168, 85, 247, 0.04); border-radius: 2px; pointer-events: none; } .planning-column:nth-child(1) { animation-delay: 0s; } .planning-column:nth-child(2) { animation-delay: 0.05s; } .planning-column:nth-child(3) { animation-delay: 0.1s; } .planning-column:nth-child(4) { animation-delay: 0.15s; } .planning-column:nth-child(5) { animation-delay: 0.2s; } .planning-column:nth-child(6) { animation-delay: 0.25s; } .planning-column:hover { border-color: rgba(168, 85, 247, 0.3); box-shadow: 0 0 14px rgba(168, 85, 247, 0.1); } .planning-column.is-today { border-color: rgba(78, 205, 196, 0.35); box-shadow: 0 0 12px rgba(78, 205, 196, 0.1); } .planning-column.drag-over { background: rgba(80, 200, 120, 0.06); border-color: var(--cure-green); box-shadow: 0 0 16px rgba(80, 200, 120, 0.2), 0 0 40px rgba(80, 200, 120, 0.06); transform: scale(1.01); } .planning-column-header { font-family: var(--font-heading); padding: 10px 12px 6px; font-size: 11px; font-weight: 700; color: var(--xp-purple); text-shadow: 0 0 10px rgba(168, 85, 247, 0.3); letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; } .planning-column.is-today .planning-column-header { color: var(--crystal); text-shadow: 0 0 10px rgba(78, 205, 196, 0.3); } .planning-count { font-family: var(--font-stat); font-size: 10px; background: rgba(168, 85, 247, 0.12); color: var(--xp-purple); padding: 1px 7px; border-radius: 2px; border: 1px solid rgba(168, 85, 247, 0.2); } .planning-column.is-today .planning-count { background: var(--crystal-dim); color: var(--crystal); border-color: rgba(78, 205, 196, 0.2); } .planning-column-body { flex: 1; overflow-y: auto; padding: 6px 8px 8px; } .planning-task-item { background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(78, 205, 196, 0.04)); border: 1px solid rgba(168, 85, 247, 0.12); border-radius: var(--radius-sm); padding: 6px 8px; margin-bottom: 5px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; transition: all var(--transition); cursor: grab; user-select: none; } .planning-task-item:active { cursor: grabbing; } .planning-task-item.dragging { opacity: 0.3; } .planning-task-item:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(78, 205, 196, 0.08)); border-color: rgba(168, 85, 247, 0.25); } .planning-task-item .task-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-parchment); font-weight: 500; font-size: 12px; } .planning-task-client { font-family: var(--font-body); font-size: 10px; color: var(--text-secondary); font-style: italic; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .planning-task-item .task-status { font-size: 10px; padding: 1px 6px; border-radius: 2px; align-self: flex-start; } /* Planning subtask styles */ .planning-subtask-progress { font-family: var(--font-stat); font-size: 9px; color: var(--cure-green); background: var(--green-dim); padding: 1px 6px; border-radius: 8px; border: 1px solid rgba(80, 200, 120, 0.2); margin-left: 6px; white-space: nowrap; } .planning-subtask-list { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(168, 85, 247, 0.1); display: flex; flex-direction: column; gap: 2px; } .planning-subtask-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-secondary); padding: 1px 0; } .planning-subtask-item.subtask-done { opacity: 0.45; } .planning-subtask-item.subtask-done .planning-subtask-name { text-decoration: line-through; } .planning-subtask-check { font-size: 9px; flex-shrink: 0; width: 12px; text-align: center; color: var(--cure-green); } .planning-subtask-item:not(.subtask-done) .planning-subtask-check { color: var(--text-secondary); } .planning-subtask-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Timesheets View ---- */ #timesheets-view { padding: 0 24px 16px; animation: fadeIn 0.4s ease both; } #timesheets-view .week-nav { margin-bottom: 16px; padding-top: 8px; } .ts-summary { margin-bottom: 20px; } .ts-summary-row { display: flex; gap: 8px; } .ts-summary-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); transition: all var(--transition); box-shadow: var(--shadow-panel); position: relative; } .ts-summary-cell::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.04); border-radius: 1px; pointer-events: none; } .ts-summary-cell.is-today { border-color: rgba(78, 205, 196, 0.35); box-shadow: 0 0 10px rgba(78, 205, 196, 0.1); } .ts-summary-cell.ts-summary-total { border-color: rgba(255, 215, 0, 0.35); background: var(--gold-dim); } .ts-summary-day { font-family: var(--font-heading); font-size: 10px; font-weight: 700; color: var(--text-secondary); letter-spacing: 1.5px; text-transform: uppercase; } .ts-summary-cell.is-today .ts-summary-day { color: var(--crystal); } .ts-summary-cell.ts-summary-total .ts-summary-day { color: var(--gold); } .ts-summary-hours { font-family: var(--font-stat); font-size: 18px; font-weight: 700; color: var(--text-parchment); } .ts-summary-cell.ts-summary-total .ts-summary-hours { color: var(--gold); text-shadow: 0 0 12px rgba(255, 215, 0, 0.3); } .ts-entries { flex: 1; overflow-y: auto; min-height: 0; } .ts-day-section { margin-bottom: 16px; animation: fadeIn 0.3s ease both; } .ts-day-header { font-family: var(--font-heading); display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--crystal); text-shadow: 0 0 10px rgba(78, 205, 196, 0.2); letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px; } .ts-day-total { font-family: var(--font-stat); font-size: 12px; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); } .ts-entry { display: flex; align-items: center; gap: 14px; padding: 8px 14px; margin-bottom: 4px; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); transition: all var(--transition); } .ts-entry:hover { border-color: rgba(255, 215, 0, 0.25); box-shadow: 0 0 10px rgba(255, 215, 0, 0.06); } .ts-entry-client { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--text-parchment); min-width: 120px; letter-spacing: 1px; } .ts-entry-duration { font-family: var(--font-stat); font-size: 14px; font-weight: 700; color: var(--gold); min-width: 50px; text-shadow: 0 0 8px rgba(255, 215, 0, 0.2); } .ts-entry-note { flex: 1; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Empty state ---- */ .empty-state { color: var(--text-muted); font-family: var(--font-heading); font-size: 12px; padding: 24px 0; text-align: center; letter-spacing: 2px; text-transform: uppercase; } /* ---- Custom Date Picker ---- */ .datepicker-wrapper { position: relative; } .datepicker-wrapper input { cursor: pointer; } .datepicker-dropdown { position: absolute; top: calc(100% + 6px); left: 0; width: 280px; background: var(--bg-panel); border: 1px solid var(--border-glow); border-radius: var(--radius); padding: 12px; z-index: 200; box-shadow: 0 0 24px rgba(78, 205, 196, 0.1), 0 12px 32px rgba(0, 0, 0, 0.5); animation: fadeIn 0.15s ease both; } /* Inner border */ .datepicker-dropdown::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(78, 205, 196, 0.06); border-radius: 2px; pointer-events: none; } .dp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .dp-title { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 0, 0.2); letter-spacing: 1.5px; } .dp-nav { background: transparent; border: 1px solid var(--border-medium); color: var(--crystal); width: 28px; height: 28px; border-radius: var(--radius-sm); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .dp-nav:hover { background: var(--crystal-dim); border-color: var(--crystal); box-shadow: 0 0 8px rgba(78, 205, 196, 0.15); } .dp-days-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .dp-day-label { font-family: var(--font-heading); font-size: 9px; font-weight: 700; color: var(--text-muted); text-align: center; padding: 4px 0; letter-spacing: 1px; text-transform: uppercase; } .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-cell { background: transparent; border: 1px solid transparent; color: var(--text-parchment); font-family: var(--font-body); font-size: 13px; padding: 6px 0; text-align: center; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s ease; } .dp-cell:hover:not(:disabled) { background: var(--crystal-dim); border-color: rgba(78, 205, 196, 0.3); color: var(--crystal); } .dp-cell.dp-today { border-color: rgba(78, 205, 196, 0.4); color: var(--crystal); font-weight: 600; text-shadow: 0 0 8px rgba(78, 205, 196, 0.3); } .dp-cell.dp-selected { background: linear-gradient(135deg, rgba(78, 205, 196, 0.2), rgba(91, 141, 239, 0.15)); border-color: var(--crystal); color: var(--crystal); font-weight: 700; box-shadow: 0 0 10px rgba(78, 205, 196, 0.15); } .dp-cell.dp-other-month { color: var(--text-muted); opacity: 0.3; cursor: default; } .dp-footer { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); } .dp-footer-btn { flex: 1; font-family: var(--font-heading); background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); padding: 5px 0; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); } .dp-footer-btn.dp-today-btn:hover { background: var(--crystal-dim); border-color: var(--crystal); color: var(--crystal); } .dp-footer-btn.dp-clear-btn:hover { background: var(--red-dim); border-color: rgba(224, 85, 85, 0.3); color: var(--hp-red); } /* ---- Toast Notifications ---- */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 300; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; } .toast { font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 20px; border-radius: var(--radius-sm); pointer-events: auto; animation: toastIn 0.3s ease both; } .toast-success { background: rgba(80, 200, 120, 0.12); border: 1px solid rgba(80, 200, 120, 0.3); color: var(--cure-green); box-shadow: 0 0 16px rgba(80, 200, 120, 0.15); } .toast-error { background: rgba(224, 85, 85, 0.12); border: 1px solid rgba(224, 85, 85, 0.3); color: var(--hp-red); box-shadow: 0 0 16px rgba(224, 85, 85, 0.15); } @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .toast-fade-out { animation: toastOut 0.3s ease forwards; } @keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } } /* ---- Day Count Badge ---- */ .day-count { font-family: var(--font-stat); font-size: 10px; background: var(--crystal-dim); color: var(--crystal); padding: 1px 7px; border-radius: 2px; border: 1px solid rgba(78, 205, 196, 0.2); } /* ---- Task Search ---- */ #task-search { font-family: var(--font-body); background: var(--bg-input); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); color: var(--text-parchment); padding: 4px 12px; font-size: 13px; width: 180px; transition: all var(--transition); letter-spacing: 0.3px; } #task-search::placeholder { color: var(--text-muted); } #task-search:focus { outline: none; border-color: var(--xp-purple); box-shadow: 0 0 10px rgba(168, 85, 247, 0.15); } /* ---- Bulk Operations ---- */ .selection-toggle-btn { font-family: var(--font-heading); font-size: 10px; padding: 6px 14px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); letter-spacing: 1px; text-transform: uppercase; } .selection-toggle-btn:hover, .selection-toggle-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } .bulk-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 8px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.06), rgba(255, 123, 79, 0.06)); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: var(--radius); animation: fadeIn 0.2s ease; } .bulk-count { font-family: var(--font-stat); font-size: 12px; color: var(--gold); letter-spacing: 0.5px; min-width: 80px; } .bulk-btn { font-family: var(--font-heading); font-size: 10px; padding: 4px 12px; border-radius: var(--radius-sm); cursor: pointer; background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); transition: all var(--transition); letter-spacing: 0.8px; text-transform: uppercase; } .bulk-btn:hover { background: var(--crystal-dim); border-color: var(--crystal); color: var(--crystal); } .bulk-complete:hover { background: var(--green-dim); border-color: var(--cure-green); color: var(--cure-green); } .bulk-reschedule:hover { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); } .bulk-delete:hover { background: var(--red-dim); border-color: var(--hp-red); color: var(--hp-red); } .task-select-cb { accent-color: var(--crystal); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } /* ---- Client Filter ---- */ .client-filter-select { font-family: var(--font-body); background: var(--bg-input); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); color: var(--text-parchment); padding: 6px 10px; font-size: 12px; letter-spacing: 0.3px; transition: all var(--transition); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A94B2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; min-width: 120px; } .client-filter-select:focus { outline: none; border-color: var(--xp-purple); box-shadow: 0 0 10px rgba(168, 85, 247, 0.15); } .client-filter-select option { background: var(--bg-deep); color: var(--text-parchment); } /* ---- Priority Badge ---- */ .priority-badge { font-family: var(--font-heading); font-size: 9px; padding: 2px 8px; border-radius: 2px; flex-shrink: 0; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; } .priority-low { background: rgba(255, 255, 255, 0.04); color: var(--text-muted); border: 1px solid rgba(255, 255, 255, 0.06); } .priority-medium { background: var(--blue-dim); color: var(--mp-blue); border: 1px solid rgba(91, 141, 239, 0.2); } .priority-high { background: var(--red-dim); color: var(--hp-red); border: 1px solid rgba(224, 85, 85, 0.25); text-shadow: 0 0 8px rgba(224, 85, 85, 0.3); } /* Planning view priority borders */ .planning-task-item.priority-high-border { border-left: 3px solid var(--hp-red); } .planning-task-item.priority-low-border { border-left: 3px solid var(--text-muted); } /* ---- Timesheet Client Breakdown ---- */ .ts-client-breakdown { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .ts-client-card { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--bg-card); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: var(--radius-sm); box-shadow: var(--shadow-panel); transition: all var(--transition); } .ts-client-card:hover { border-color: rgba(255, 215, 0, 0.4); box-shadow: var(--shadow-gold); } .ts-client-card.ts-client-active { background: var(--gold-dim); border-color: var(--gold); box-shadow: var(--shadow-gold); } .ts-client-name { font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: var(--text-parchment); letter-spacing: 1px; } .ts-client-hours { font-family: var(--font-stat); font-size: 14px; font-weight: 700; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.2); } /* ---- Export Button Variant ---- */ .topbar-actions { display: flex; gap: 8px; } .export-btn { background: transparent !important; border-color: rgba(78, 205, 196, 0.25) !important; color: var(--crystal) !important; } .export-btn:hover { background: var(--crystal-dim) !important; border-color: var(--crystal) !important; box-shadow: var(--shadow-glow) !important; } /* ============================================ DAY PLANNER VIEW — Block-based schedule ============================================ */ #dayplanner-view { padding: 0; animation: fadeIn 0.4s ease both; } .dp-day-nav { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 12px 24px 8px; } .dp-day-nav button { font-family: var(--font-heading); background: var(--bg-card); border: 1px solid var(--border-medium); color: var(--crystal); padding: 7px 18px; font-size: 12px; cursor: pointer; border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; transition: all var(--transition); box-shadow: var(--shadow-panel); } .dp-day-nav button:hover { background: var(--crystal-dim); border-color: var(--crystal); box-shadow: var(--shadow-glow); transform: translateY(-1px); } #dp-day-label { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--gold); text-shadow: 0 0 16px rgba(255, 215, 0, 0.2); letter-spacing: 2px; } /* ---- Layout: Schedule left, Notes right ---- */ .dp-layout { display: flex; flex: 1; min-height: 0; gap: 16px; padding: 8px 24px 16px; } .dp-schedule-panel { flex: 3; display: flex; flex-direction: column; min-height: 0; } .dp-schedule-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .dp-schedule-header h3 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--crystal); text-shadow: 0 0 10px rgba(78, 205, 196, 0.2); } /* ---- Schedule Grid: time col + content area ---- */ .dp-schedule-grid { flex: 1; overflow-y: auto; min-height: 0; display: flex; } .dp-time-col { width: 74px; flex-shrink: 0; border-right: 1px solid var(--border-subtle); } .dp-time-label { font-family: var(--font-stat); font-size: 11px; font-weight: 500; color: var(--text-muted); display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; border-bottom: 1px solid rgba(78, 205, 196, 0.04); } .dp-time-label.dp-time-hour { color: var(--text-secondary); font-weight: 700; border-bottom-color: var(--border-subtle); } .dp-time-label.dp-time-now { color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); } /* ---- Content area: relative container for blocks ---- */ .dp-content-area { flex: 1; position: relative; cursor: pointer; } /* Grid lines */ .dp-grid-line { position: absolute; left: 0; right: 0; border-bottom: 1px solid rgba(78, 205, 196, 0.04); } .dp-grid-line.dp-grid-hour { border-bottom-color: var(--border-subtle); } .dp-grid-line.dp-grid-now { background: rgba(255, 215, 0, 0.03); border-left: 2px solid var(--gold); } /* ---- Blocks (draggable, resizable) ---- */ .dp-block { position: absolute; left: 4px; right: 4px; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(78, 205, 196, 0.12), rgba(91, 141, 239, 0.08)); border: 1px solid rgba(78, 205, 196, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); z-index: 10; transition: box-shadow 0.15s ease; overflow: hidden; } .dp-block:hover { border-color: rgba(78, 205, 196, 0.5); box-shadow: 0 2px 12px rgba(78, 205, 196, 0.15), 0 4px 16px rgba(0, 0, 0, 0.25); } /* Completed quest block */ .dp-block.dp-block-complete { background: linear-gradient(135deg, rgba(80, 200, 120, 0.08), rgba(78, 205, 196, 0.05)); border-color: rgba(80, 200, 120, 0.3); } .dp-block-complete .dp-block-label { text-decoration: line-through; text-decoration-color: rgba(80, 200, 120, 0.4); opacity: 0.7; } .dp-block-done-tag { font-family: var(--font-heading); font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--cure-green); background: var(--green-dim); border: 1px solid rgba(80, 200, 120, 0.25); padding: 0px 5px; border-radius: 2px; flex-shrink: 0; white-space: nowrap; } .dp-block.dp-block-dragging { opacity: 0.85; box-shadow: 0 8px 28px rgba(78, 205, 196, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3); z-index: 20; cursor: grabbing; } .dp-block.dp-block-resizing { border-color: var(--crystal); box-shadow: 0 4px 20px rgba(78, 205, 196, 0.2); z-index: 20; } .dp-block-inner { padding: 4px 28px 4px 10px; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 0; cursor: grab; position: relative; overflow: hidden; } .dp-block-inner:active { cursor: grabbing; } /* Single inline row: label, quest tag, time — all side by side */ .dp-block-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .dp-block-label { font-size: 13px; font-weight: 600; color: var(--text-parchment); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; line-height: 1.3; } .dp-block-guild { font-family: var(--font-heading); font-size: 10px; font-weight: 700; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.2); letter-spacing: 0.5px; white-space: nowrap; flex-shrink: 0; } .dp-block-time { font-family: var(--font-stat); font-size: 10px; color: var(--text-muted); letter-spacing: 0.3px; white-space: nowrap; flex-shrink: 0; } .dp-block-skill-tag { font-family: var(--font-stat); font-size: 9px; font-weight: 700; letter-spacing: 0.5px; border: 1px solid currentColor; padding: 0 4px; border-radius: 2px; flex-shrink: 0; white-space: nowrap; opacity: 0.8; } .dp-slot-quest-tag { font-family: var(--font-heading); font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--xp-purple); background: var(--purple-dim); border: 1px solid rgba(168, 85, 247, 0.2); padding: 0px 5px; border-radius: 2px; align-self: flex-start; } .dp-block-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; opacity: 0; transition: all 0.15s ease; z-index: 5; } .dp-block:hover .dp-block-clear { opacity: 0.7; } .dp-block-clear:hover { color: var(--hp-red); opacity: 1 !important; } .dp-block-complete-btn, .dp-block-undo-btn { background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; padding: 0 5px; font-size: 11px; line-height: 1.4; flex-shrink: 0; opacity: 0; transition: all var(--transition); } .dp-block:hover .dp-block-complete-btn, .dp-block:hover .dp-block-undo-btn { opacity: 0.7; } .dp-block-complete-btn:hover { color: var(--cure-green); border-color: var(--cure-green); opacity: 1 !important; } .dp-block-undo-btn:hover { color: var(--gold); border-color: var(--gold); opacity: 1 !important; } /* Resize handle at bottom */ .dp-block-resize { position: absolute; bottom: 0; left: 0; right: 0; height: 8px; cursor: ns-resize; z-index: 5; display: flex; align-items: center; justify-content: center; } .dp-block-resize::after { content: ''; width: 30px; height: 3px; border-radius: 2px; background: rgba(78, 205, 196, 0.2); transition: background 0.15s ease; } .dp-block:hover .dp-block-resize::after { background: rgba(78, 205, 196, 0.4); } .dp-block-resizing .dp-block-resize::after { background: var(--crystal); } /* ---- Notes Panel (right side) ---- */ .dp-notes-panel { flex: 2; display: flex; flex-direction: column; min-height: 0; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-panel); position: relative; } .dp-notes-panel::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.05); border-radius: 2px; pointer-events: none; } .dp-notes-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .dp-notes-panel h3 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 0, 0.2); } .dp-notes-toggle-btn { font-family: var(--font-heading); font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 3px 12px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); } .dp-notes-toggle-btn:hover { border-color: var(--crystal); color: var(--crystal); background: var(--crystal-dim); } .dp-notes-toggle-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } .dp-notes-textarea { flex: 1; width: 100%; min-height: 0; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-parchment); font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 12px; resize: none; line-height: 1.6; transition: border-color var(--transition); } .dp-notes-textarea::placeholder { color: var(--text-muted); } .dp-notes-textarea:focus { outline: none; border-color: var(--crystal); box-shadow: 0 0 8px rgba(78, 205, 196, 0.1); } /* ---- Markdown Preview ---- */ .dp-notes-preview { flex: 1; width: 100%; min-height: 0; overflow-y: auto; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-parchment); font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 12px; line-height: 1.6; } .dp-notes-preview h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 0, 0.15); letter-spacing: 1px; margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); } .dp-notes-preview h3:first-child { margin-top: 0; } .dp-notes-preview h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--crystal); letter-spacing: 0.5px; margin: 10px 0 4px; } .dp-notes-preview h5 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--text-parchment); letter-spacing: 0.5px; margin: 8px 0 4px; } .dp-notes-preview p { margin: 2px 0; } .dp-notes-preview strong { color: var(--text-parchment); font-weight: 700; } .dp-notes-preview em { color: var(--text-secondary); font-style: italic; } .dp-notes-preview ul { margin: 4px 0; padding-left: 20px; } .dp-notes-preview li { margin: 2px 0; position: relative; } .dp-notes-preview li::marker { color: var(--crystal); } .dp-notes-preview br { display: block; content: ''; margin: 4px 0; } .dp-notes-status { font-family: var(--font-heading); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); text-align: right; padding-top: 6px; min-height: 20px; } .dp-notes-status.saved { color: var(--cure-green); } /* ---- Habits View ---- */ .habits-today-section { max-width: 700px; margin: 0 auto 32px; padding: 0 16px; } .habits-date-header { font-family: var(--font-heading); font-size: 18px; color: var(--crystal); text-align: center; margin-bottom: 20px; letter-spacing: 1px; text-shadow: 0 0 12px rgba(78, 205, 196, 0.3); } .habits-checklist { display: flex; flex-direction: column; gap: 8px; } .habits-empty { text-align: center; color: var(--text-muted); font-family: var(--font-body); font-size: 15px; padding: 40px 16px; } .habit-item { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius); padding: 12px 16px; position: relative; overflow: hidden; transition: all var(--transition); box-shadow: var(--shadow-panel); } .habit-item::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.06); border-radius: 2px; pointer-events: none; } .habit-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); } .habit-item.habit-complete { background: linear-gradient(135deg, rgba(80, 200, 120, 0.08), rgba(78, 205, 196, 0.05)); border-color: rgba(80, 200, 120, 0.3); opacity: 0.75; } .habit-item.habit-complete .habit-name { text-decoration: line-through; text-decoration-color: rgba(80, 200, 120, 0.4); opacity: 0.7; } .habit-color-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius) 0 0 var(--radius); } .habit-check-btn { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; margin-left: 8px; } .habit-check-circle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--text-muted); font-size: 14px; color: transparent; transition: all var(--transition); } .habit-complete .habit-check-circle { background: var(--cure-green); border-color: var(--cure-green); color: #fff; box-shadow: 0 0 8px rgba(80, 200, 120, 0.4); } .habit-check-btn:hover .habit-check-circle { border-color: var(--cure-green); box-shadow: 0 0 8px rgba(80, 200, 120, 0.2); } .habit-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .habit-name { font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-parchment); letter-spacing: 0.5px; } .habit-week-progress { font-family: var(--font-stat); font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; } .habit-streak { font-family: var(--font-stat); font-size: 14px; font-weight: 700; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.3); white-space: nowrap; min-width: 60px; text-align: right; } .habit-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--transition); } .habit-item:hover .habit-actions { opacity: 1; } .habit-edit-btn, .habit-archive-btn { background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; padding: 4px 8px; font-size: 13px; transition: all var(--transition); } .habit-edit-btn:hover { color: var(--crystal); border-color: var(--crystal); } .habit-archive-btn:hover { color: var(--hp-red); border-color: var(--hp-red); } /* Skill Badge on habit items */ .habit-skill-badge { font-family: var(--font-stat); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; margin-left: 6px; opacity: 0.9; } /* Skills Legend Panel */ .skills-legend { max-width: 700px; margin: 0 auto 24px; padding: 0 16px; } .skills-panel { background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-panel); position: relative; } .skills-panel::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.06); border-radius: 2px; pointer-events: none; } .skills-panel-title { font-family: var(--font-heading); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); margin: 0 0 14px 0; text-align: center; } .skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .skill-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); transition: all var(--transition); } .skill-card:hover { border-color: var(--border-medium); background: rgba(255, 255, 255, 0.04); } .skill-icon { font-size: 22px; flex-shrink: 0; width: 30px; text-align: center; } .skill-details { flex: 1; min-width: 0; } .skill-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .skill-name { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-parchment); letter-spacing: 0.5px; } .skill-level { font-family: var(--font-stat); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; } .skill-xp-bar { height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; margin-bottom: 3px; } .skill-xp-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; box-shadow: 0 0 6px currentColor; opacity: 0.8; } .skill-xp-text { font-family: var(--font-stat); font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; } @media (max-width: 500px) { .skills-grid { grid-template-columns: 1fr; } } /* Archived Habits */ .habits-archived-section { max-width: 700px; margin: 0 auto 24px; padding: 0 16px; } .habits-archived-section.hidden { display: none; } .habits-archived-toggle { background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius); color: var(--text-muted); font-family: var(--font-heading); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; padding: 8px 16px; width: 100%; text-align: left; transition: all var(--transition); } .habits-archived-toggle:hover { color: var(--text-secondary); border-color: var(--border-medium); } .habit-archived-item { opacity: 0.6; } .habit-archived-item:hover { opacity: 0.9; } .habit-restore-btn, .habit-delete-btn { background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; padding: 4px 8px; font-size: 13px; transition: all var(--transition); } .habit-restore-btn:hover { color: var(--cure-green); border-color: var(--cure-green); } .habit-delete-btn:hover { color: var(--hp-red); border-color: var(--hp-red); } /* Modal delete button */ .btn-delete { background: rgba(224, 85, 85, 0.15); color: var(--hp-red); border: 1px solid rgba(224, 85, 85, 0.3); border-radius: var(--radius); padding: 8px 16px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition); margin-left: auto; } .btn-delete:hover { background: rgba(224, 85, 85, 0.25); border-color: var(--hp-red); } .btn-delete.hidden { display: none; } /* Streak Calendar */ .habits-calendar-section { max-width: 900px; margin: 0 auto; padding: 0 16px 32px; } .habits-calendar-title { font-family: var(--font-heading); font-size: 14px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; text-align: center; } .streak-grid { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; padding-bottom: 8px; } .streak-row { display: flex; align-items: center; gap: 2px; } .streak-header-row { margin-bottom: 2px; } .streak-label { font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); min-width: 100px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; padding-right: 8px; } .streak-cell { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; background: rgba(255, 255, 255, 0.03); transition: background var(--transition); } .streak-cell.streak-done { background: var(--habit-color, var(--crystal)); box-shadow: 0 0 4px color-mix(in srgb, var(--habit-color, var(--crystal)) 40%, transparent); } .streak-cell.streak-missed { background: rgba(255, 255, 255, 0.06); } .streak-cell.streak-na { background: transparent; } .streak-clickable { cursor: pointer; } .streak-clickable:hover { outline: 1px solid rgba(255, 255, 255, 0.4); transform: scale(1.4); z-index: 1; } .streak-month-label { font-family: var(--font-stat); font-size: 9px; color: var(--text-muted); background: none !important; width: auto; min-width: 10px; } /* Habit Modal extras */ .habit-days-picker { display: flex; flex-wrap: wrap; gap: 8px; } .habit-day-check { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; cursor: pointer; } .habit-day-check input[type="checkbox"] { accent-color: var(--crystal); } .habit-color-picker { display: flex; gap: 8px; } .habit-color-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all var(--transition); padding: 0; } .habit-color-swatch:hover { transform: scale(1.15); } .habit-color-swatch.active { border-color: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } /* ---- XP Float Animation ---- */ .xp-float { position: fixed; font-family: var(--font-stat); font-size: 16px; font-weight: 700; letter-spacing: 1px; pointer-events: none; z-index: 10001; text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; white-space: nowrap; } .xp-float-up { animation: xpFloatUp 1.2s ease-out forwards; } .xp-float-down { animation: xpFloatDown 1.2s ease-out forwards; } @keyframes xpFloatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 30% { opacity: 1; transform: translateY(-20px) scale(1.2); } 100% { opacity: 0; transform: translateY(-60px) scale(0.8); } } @keyframes xpFloatDown { 0% { opacity: 1; transform: translateY(0) scale(1); } 30% { opacity: 1; transform: translateY(10px) scale(1.1); } 100% { opacity: 0; transform: translateY(40px) scale(0.8); } } /* ---- Level Up Overlay ---- */ .levelup-overlay { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); animation: levelupOverlayIn 0.5s ease both; cursor: pointer; } @keyframes levelupOverlayIn { from { opacity: 0; } to { opacity: 1; } } .levelup-overlay.levelup-fade-out { animation: levelupOverlayOut 0.5s ease forwards; } @keyframes levelupOverlayOut { from { opacity: 1; } to { opacity: 0; } } .levelup-content { text-align: center; position: relative; animation: levelupBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes levelupBounce { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .levelup-flash { position: absolute; inset: -80px; border-radius: 50%; opacity: 0.08; filter: blur(40px); animation: levelupFlash 1.5s ease-in-out infinite alternate; } @keyframes levelupFlash { from { opacity: 0.05; transform: scale(0.9); } to { opacity: 0.15; transform: scale(1.1); } } .levelup-icon { font-size: 64px; margin-bottom: 8px; animation: levelupIconPulse 1s ease-in-out infinite alternate; } @keyframes levelupIconPulse { from { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255,255,255,0.3)); } to { transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(255,255,255,0.5)); } } .levelup-title { font-family: var(--font-heading); font-size: 36px; font-weight: 800; letter-spacing: 6px; text-transform: uppercase; text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; margin-bottom: 4px; } .levelup-skill { font-family: var(--font-body); font-size: 20px; font-weight: 600; color: var(--text-parchment); letter-spacing: 2px; margin-bottom: 4px; } .levelup-level { font-family: var(--font-stat); font-size: 28px; font-weight: 700; text-shadow: 0 0 12px currentColor; } .levelup-particles { position: absolute; inset: 0; pointer-events: none; } .levelup-particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--color); top: 50%; left: 50%; box-shadow: 0 0 6px var(--color); animation: levelupParticle 1.5s ease-out forwards; animation-delay: calc(var(--angle) * 0.002); } @keyframes levelupParticle { 0% { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-120px); opacity: 0; } } /* ---- Focus Mode / Pomodoro Timer ---- */ .focus-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(5, 5, 15, 0.92); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease both; } .focus-overlay.hidden { display: none; } .focus-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; position: relative; padding: 40px; } .focus-phase-indicator { font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; padding: 6px 24px; border-radius: var(--radius); border: 1px solid; animation: focusPhasePulse 2s ease-in-out infinite; } .focus-phase-indicator.phase-work { color: var(--crystal); border-color: rgba(78, 205, 196, 0.3); background: rgba(78, 205, 196, 0.08); text-shadow: 0 0 12px rgba(78, 205, 196, 0.4); } .focus-phase-indicator.phase-short_break { color: var(--cure-green); border-color: rgba(80, 200, 120, 0.3); background: rgba(80, 200, 120, 0.08); text-shadow: 0 0 12px rgba(80, 200, 120, 0.4); } .focus-phase-indicator.phase-long_break { color: var(--xp-purple); border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.08); text-shadow: 0 0 12px rgba(168, 85, 247, 0.4); } .focus-ring-container { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; } .focus-ring-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .focus-ring-track { stroke: rgba(168, 85, 247, 0.1); } .focus-ring-progress { stroke: var(--crystal); transition: stroke-dashoffset 0.3s linear; } .focus-ring-progress.phase-work { stroke: var(--crystal); filter: drop-shadow(0 0 8px rgba(78, 205, 196, 0.4)); } .focus-ring-progress.phase-short_break { stroke: var(--cure-green); filter: drop-shadow(0 0 8px rgba(80, 200, 120, 0.4)); } .focus-ring-progress.phase-long_break { stroke: var(--xp-purple); filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4)); } .focus-timer-display { display: flex; flex-direction: column; align-items: center; z-index: 1; } .focus-time { font-family: var(--font-stat); font-size: 48px; font-weight: 700; color: var(--gold); text-shadow: 0 0 20px rgba(255, 215, 0, 0.3); line-height: 1; } .focus-session-count { font-family: var(--font-body); font-size: 11px; color: var(--text-secondary); margin-top: 6px; letter-spacing: 1px; } .focus-task-info { display: flex; align-items: center; gap: 8px; max-width: 320px; } .focus-skill-icon { font-size: 20px; } .focus-task-name { font-family: var(--font-heading); font-size: 16px; color: var(--text-parchment); letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .focus-controls { display: flex; gap: 12px; margin-top: 8px; } .focus-btn { font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 28px; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); border: 1px solid; } .focus-btn-pause { color: var(--crystal); background: rgba(78, 205, 196, 0.1); border-color: rgba(78, 205, 196, 0.3); } .focus-btn-pause:hover { background: rgba(78, 205, 196, 0.2); box-shadow: 0 0 16px rgba(78, 205, 196, 0.2); } .focus-btn-stop { color: var(--hp-red); background: rgba(224, 85, 85, 0.1); border-color: rgba(224, 85, 85, 0.3); } .focus-btn-stop:hover { background: rgba(224, 85, 85, 0.2); box-shadow: 0 0 16px rgba(224, 85, 85, 0.2); } #focus-settings-modal, #focus-complete-modal { z-index: 9500; } .focus-complete-message { font-size: 14px; color: var(--text-parchment); margin-bottom: 16px; line-height: 1.5; } .focus-complete-stats { display: flex; gap: 16px; justify-content: center; margin-bottom: 20px; } .focus-complete-stat { text-align: center; padding: 10px 16px; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .focus-complete-stat-value { display: block; font-family: var(--font-stat); font-size: 22px; font-weight: 700; color: var(--crystal); } .focus-complete-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } .focus-settings-toggle { position: absolute; top: 12px; right: 12px; background: transparent; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; opacity: 0.5; transition: opacity var(--transition); } .focus-settings-toggle:hover { opacity: 1; color: var(--text-parchment); } /* Focus trigger buttons */ .dp-block-focus-btn { font-size: 11px; padding: 1px 5px; border-radius: var(--radius-sm); background: transparent; border: 1px solid rgba(78, 205, 196, 0.25); color: var(--crystal); cursor: pointer; transition: all var(--transition); flex-shrink: 0; } .dp-block-focus-btn:hover { background: rgba(78, 205, 196, 0.15); border-color: rgba(78, 205, 196, 0.5); box-shadow: 0 0 8px rgba(78, 205, 196, 0.2); } .dp-block-resched-btn { font-size: 11px; padding: 1px 5px; border-radius: var(--radius-sm); background: transparent; border: 1px solid rgba(255, 215, 0, 0.25); color: rgba(255, 215, 0, 0.6); cursor: pointer; transition: all var(--transition); flex-shrink: 0; opacity: 0; } .dp-block:hover .dp-block-resched-btn { opacity: 0.7; } .dp-block-resched-btn:hover { background: rgba(255, 215, 0, 0.15); border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 0 8px rgba(255, 215, 0, 0.2); opacity: 1 !important; } .task-focus-btn { font-family: var(--font-heading); font-size: 10px; padding: 2px 8px; border-radius: var(--radius-sm); background: transparent; border: 1px solid rgba(78, 205, 196, 0.25); color: var(--crystal); cursor: pointer; transition: all var(--transition); } .task-focus-btn:hover { background: rgba(78, 205, 196, 0.15); border-color: rgba(78, 205, 196, 0.5); box-shadow: 0 0 8px rgba(78, 205, 196, 0.2); } /* Dashboard focus stat card */ .stat-purple { border-color: rgba(168, 85, 247, 0.3); } .stat-purple .stat-value { color: var(--xp-purple); text-shadow: 0 0 12px rgba(168, 85, 247, 0.4); } @keyframes focusPhasePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @media (max-width: 600px) { .focus-ring-container { width: 160px; height: 160px; } .focus-time { font-size: 36px; } .focus-task-name { font-size: 13px; } .focus-btn { padding: 8px 20px; font-size: 11px; } } /* ============================================ GRIMOIRE — Scrolls, Waypoints & Tome ============================================ */ /* Epitaph styles are defined in the home layout section above */ /* ---- Grimoire Tabs ---- */ .grimoire-tabs { display: flex; gap: 8px; justify-content: center; padding: 12px 24px; flex-shrink: 0; } .grimoire-tab { font-family: var(--font-heading); background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); padding: 6px 18px; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; border-radius: var(--radius-sm); transition: all var(--transition); position: relative; overflow: hidden; } .grimoire-tab:hover { background: var(--blue-dim); border-color: rgba(91, 141, 239, 0.3); color: var(--mp-blue); } .grimoire-tab.active { background: var(--blue-dim); border-color: rgba(91, 141, 239, 0.4); color: var(--mp-blue); text-shadow: 0 0 8px rgba(91, 141, 239, 0.3); box-shadow: 0 0 10px rgba(91, 141, 239, 0.1); } /* ---- Grimoire Section Containers ---- */ .grimoire-section { flex: 1; overflow-y: auto; padding: 0 24px 24px; max-width: 800px; margin: 0 auto; width: 100%; } .grimoire-section-header { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; } .grimoire-search { flex: 1; padding: 8px 14px; background: var(--bg-input); border: 1px solid var(--border-medium); border-radius: var(--radius-sm); color: var(--text-parchment); font-family: var(--font-body); font-size: 14px; } .grimoire-search::placeholder { color: var(--text-muted); } .grimoire-search:focus { outline: none; border-color: var(--mp-blue); box-shadow: 0 0 12px rgba(91, 141, 239, 0.15); } .grimoire-empty { text-align: center; color: var(--text-muted); font-size: 15px; padding: 48px 0; } /* ---- Scroll Cards (Quotes) ---- */ .scrolls-list { display: flex; flex-direction: column; gap: 12px; } .scroll-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 16px 20px; position: relative; transition: all var(--transition); box-shadow: var(--shadow-panel); } .scroll-card::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.06); border-radius: 2px; pointer-events: none; } .scroll-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-glow); } .scroll-card.scroll-favorite { border-color: rgba(255, 215, 0, 0.25); } .scroll-content { font-size: 15px; font-style: italic; line-height: 1.5; color: var(--text-parchment); margin-bottom: 8px; } .scroll-attribution { display: flex; gap: 8px; align-items: center; } .scroll-oracle { font-family: var(--font-heading); font-size: 12px; color: var(--gold); letter-spacing: 1px; } .scroll-source { font-size: 12px; color: var(--text-muted); } .scroll-category { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--mp-blue); background: var(--blue-dim); padding: 2px 8px; border-radius: var(--radius-sm); display: inline-block; margin-top: 8px; } .scroll-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity var(--transition); } .scroll-card:hover .scroll-actions { opacity: 1; } /* ---- Waypoint Cards (Bookmarks) ---- */ .waypoints-list { display: flex; flex-direction: column; gap: 8px; } .waypoint-card { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 12px 16px; position: relative; transition: all var(--transition); box-shadow: var(--shadow-panel); } .waypoint-card::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.06); border-radius: 2px; pointer-events: none; } .waypoint-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-glow); } .waypoint-icon { font-size: 24px; min-width: 36px; text-align: center; flex-shrink: 0; } .waypoint-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .waypoint-name { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-parchment); letter-spacing: 1px; } .waypoint-url { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .waypoint-notes { font-size: 12px; color: var(--text-secondary); } .waypoint-category { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--xp-purple); background: var(--purple-dim); padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; flex-shrink: 0; } .waypoint-visits { font-size: 10px; color: var(--text-muted); white-space: nowrap; } .waypoint-actions { display: flex; gap: 6px; flex-shrink: 0; } .waypoint-launch-btn { background: transparent; border: 1px solid rgba(78, 205, 196, 0.25); color: var(--crystal); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; transition: all var(--transition); } .waypoint-launch-btn:hover { background: var(--crystal-dim); border-color: var(--crystal); box-shadow: var(--shadow-glow); } /* ---- Tome Cards (Notes) ---- */ .tome-list { display: flex; flex-direction: column; gap: 10px; } .tome-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 14px 18px; position: relative; transition: all var(--transition); box-shadow: var(--shadow-panel); cursor: pointer; } .tome-card::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.06); border-radius: 2px; pointer-events: none; } .tome-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-glow); } .tome-card.tome-pinned { border-color: rgba(255, 215, 0, 0.2); } .tome-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .tome-pin-indicator { font-size: 12px; color: var(--gold); } .tome-title { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-parchment); letter-spacing: 1px; flex: 1; } .tome-preview { font-size: 13px; color: var(--text-secondary); line-height: 1.4; max-height: 2.8em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tome-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .tome-category { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--cure-green); background: var(--green-dim); padding: 2px 8px; border-radius: var(--radius-sm); } .tome-date { font-size: 10px; color: var(--text-muted); margin-left: auto; } .tome-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; opacity: 0; transition: opacity var(--transition); } .tome-card:hover .tome-actions { opacity: 1; } /* ---- Grimoire Shared Buttons ---- */ .grimoire-edit-btn, .grimoire-fav-btn, .grimoire-pin-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 4px; transition: color var(--transition); position: relative; z-index: 2; } .grimoire-edit-btn:hover { color: var(--crystal); } .grimoire-fav-btn:hover, .grimoire-fav-btn.active { color: var(--gold); } .grimoire-pin-btn:hover, .grimoire-pin-btn.active { color: var(--gold); } /* ---- Grimoire Responsive ---- */ @media (max-width: 600px) { .grimoire-tabs { padding: 8px 12px; gap: 4px; } .grimoire-tab { padding: 5px 10px; font-size: 10px; letter-spacing: 1px; } .grimoire-section { padding: 0 12px 16px; } .scroll-card { padding: 12px 14px; } .waypoint-card { padding: 10px 12px; } } /* ============================================ JOURNAL — Daily Summary ============================================ */ .journal-content { flex: 1; overflow-y: auto; padding: 0 24px 24px; max-width: 800px; margin: 0 auto; width: 100%; } .journal-section { margin-bottom: 24px; } .journal-section-title { font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 215, 0, 0.15); display: flex; align-items: center; gap: 8px; } .journal-section-count { font-family: var(--font-stat); font-size: 12px; color: var(--text-muted); font-weight: 400; letter-spacing: 0; text-transform: none; } .journal-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 4px; font-size: 13px; color: var(--text-parchment); position: relative; } .journal-item::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.04); border-radius: 2px; pointer-events: none; } .journal-item-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; } .journal-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .journal-item-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .journal-item-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 1px 6px; border-radius: var(--radius-sm); flex-shrink: 0; } .journal-item-tag.tag-client { color: var(--crystal); background: var(--crystal-dim); } .journal-item-tag.tag-priority-High { color: var(--hp-red); background: var(--red-dim); } .journal-item-tag.tag-priority-Medium { color: var(--gold); background: var(--gold-dim); } .journal-item-tag.tag-priority-Low { color: var(--text-muted); background: rgba(255, 255, 255, 0.04); } .journal-item.journal-complete { border-left: 3px solid var(--cure-green); } .journal-item.journal-missed { border-left: 3px solid var(--hp-red); opacity: 0.7; } .journal-stat-bar { display: flex; gap: 16px; margin-bottom: 10px; padding: 8px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .journal-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); } .journal-stat-value { font-family: var(--font-stat); font-weight: 700; color: var(--crystal); } .journal-empty { font-size: 13px; color: var(--text-muted); padding: 8px 14px; font-style: italic; } .journal-notes { padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; } .journal-day-empty { text-align: center; color: var(--text-muted); font-size: 15px; padding: 60px 0; } /* ============================================ GUILD HALL — Client/Project Management ============================================ */ .guild-view-body { flex: 1; overflow-y: auto; padding: 0 24px 24px; max-width: 800px; margin: 0 auto; width: 100%; } .guild-list-header { margin-bottom: 16px; } .guild-list { display: flex; flex-direction: column; gap: 8px; } .guild-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); box-shadow: var(--shadow-panel); position: relative; overflow: hidden; } .guild-card::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.04); border-radius: 2px; pointer-events: none; } .guild-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-glow); transform: translateY(-1px); } .guild-color-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .guild-icon { font-size: 24px; flex-shrink: 0; width: 32px; text-align: center; margin-left: 8px; } .guild-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .guild-name { font-family: var(--font-heading); font-size: 15px; font-weight: 600; color: var(--text-parchment); letter-spacing: 1px; } .guild-rank-badge { font-family: var(--font-stat); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius-sm); display: inline-block; width: fit-content; } .guild-xp-row { display: flex; align-items: center; gap: 8px; } .guild-xp-bar { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; max-width: 120px; } .guild-xp-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; } .guild-xp-text { font-family: var(--font-stat); font-size: 10px; color: var(--text-muted); } .guild-stats-inline { display: flex; gap: 12px; flex-shrink: 0; } .guild-stat-chip { font-family: var(--font-stat); font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; } .guild-stat-chip-value { font-weight: 700; color: var(--text-parchment); } /* ---- Guild Profile ---- */ .guild-profile { animation: fadeIn 0.3s ease both; } .guild-profile-back { background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); padding: 5px 14px; font-size: 11px; font-family: var(--font-heading); letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); margin-bottom: 16px; } .guild-profile-back:hover { background: var(--crystal-dim); border-color: var(--crystal); color: var(--crystal); } .guild-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius); box-shadow: var(--shadow-panel); position: relative; overflow: hidden; } .guild-profile-color-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; } .guild-profile-info { flex: 1; margin-left: 8px; } .guild-profile-name { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--text-parchment); letter-spacing: 2px; margin-bottom: 4px; } .guild-profile-rank { display: flex; align-items: center; gap: 12px; } .guild-profile-xp-bar { width: 160px; height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; } .guild-profile-xp-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; box-shadow: 0 0 6px currentColor; } .guild-profile-xp-text { font-family: var(--font-stat); font-size: 11px; color: var(--text-muted); } .guild-profile-actions { display: flex; gap: 6px; flex-shrink: 0; } .guild-profile-edit-btn { background: transparent; border: 1px solid rgba(255, 215, 0, 0.25); color: var(--gold); padding: 5px 14px; font-size: 11px; font-family: var(--font-heading); letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); } .guild-profile-edit-btn:hover { background: var(--gold-dim); border-color: var(--gold); box-shadow: var(--shadow-gold); } .guild-profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .guild-profile-stat-card { text-align: center; padding: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .guild-profile-stat-value { font-family: var(--font-stat); font-size: 24px; font-weight: 700; color: var(--crystal); display: block; } .guild-profile-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } .guild-profile-section { margin-bottom: 20px; } .guild-profile-section-title { font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 215, 0, 0.15); } .guild-profile-item { padding: 6px 12px; font-size: 13px; color: var(--text-parchment); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .guild-profile-item-meta { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; } .guild-profile-text { padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; } .guild-empty { text-align: center; color: var(--text-muted); font-size: 15px; padding: 48px 0; } /* ============================================ BESTIARY — Issue/Problem Tracker ============================================ */ .bestiary-view-body { flex: 1; overflow-y: auto; padding: 0 24px 24px; max-width: 800px; margin: 0 auto; width: 100%; } .bestiary-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; } .bestiary-tabs { display: flex; gap: 6px; } .bestiary-list { display: flex; flex-direction: column; gap: 8px; } .bestiary-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); box-shadow: var(--shadow-panel); position: relative; overflow: hidden; } .bestiary-card::after { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(78, 205, 196, 0.04); border-radius: 2px; pointer-events: none; } .bestiary-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-glow); transform: translateY(-1px); } .bestiary-card.bestiary-defeated { opacity: 0.6; } .bestiary-severity-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .bestiary-type-icon { font-size: 22px; flex-shrink: 0; width: 30px; text-align: center; margin-left: 8px; } .bestiary-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bestiary-name { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-parchment); letter-spacing: 1px; } .bestiary-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .bestiary-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 1px 6px; border-radius: var(--radius-sm); } .severity-Common { color: var(--text-secondary); background: rgba(255,255,255,0.06); } .severity-Uncommon { color: var(--cure-green); background: var(--green-dim); } .severity-Rare { color: var(--mp-blue); background: var(--blue-dim); } .severity-Legendary { color: var(--gold); background: var(--gold-dim); } .bestiary-status-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 1px 6px; border-radius: var(--radius-sm); } .status-Active { color: var(--hp-red); background: var(--red-dim); } .status-Dormant { color: var(--text-muted); background: rgba(255,255,255,0.04); } .status-Defeated { color: var(--cure-green); background: var(--green-dim); } .bestiary-meta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; font-size: 11px; color: var(--text-muted); } .bestiary-defeat-count { font-family: var(--font-stat); font-weight: 700; color: var(--text-secondary); } /* ---- Monster Detail ---- */ .bestiary-detail { animation: fadeIn 0.3s ease both; } .bestiary-detail-back { background: transparent; border: 1px solid var(--border-medium); color: var(--text-secondary); padding: 5px 14px; font-size: 11px; font-family: var(--font-heading); letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); margin-bottom: 16px; } .bestiary-detail-back:hover { background: var(--crystal-dim); border-color: var(--crystal); color: var(--crystal); } .bestiary-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: var(--radius); box-shadow: var(--shadow-panel); position: relative; overflow: hidden; } .bestiary-detail-severity-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; } .bestiary-detail-icon { font-size: 32px; margin-left: 8px; } .bestiary-detail-info { flex: 1; } .bestiary-detail-name { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--text-parchment); letter-spacing: 2px; margin-bottom: 6px; } .bestiary-detail-badges { display: flex; gap: 8px; align-items: center; } .bestiary-detail-actions { display: flex; gap: 8px; flex-shrink: 0; } .bestiary-action-btn { border: 1px solid; padding: 6px 14px; font-size: 11px; font-family: var(--font-heading); letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); background: transparent; } .bestiary-dormant-btn { border-color: rgba(160, 160, 170, 0.3); color: var(--text-muted); } .bestiary-dormant-btn:hover { background: rgba(160, 160, 170, 0.08); border-color: var(--text-muted); box-shadow: 0 0 10px rgba(160, 160, 170, 0.1); } .bestiary-defeat-btn { border-color: rgba(80, 200, 120, 0.3); color: var(--cure-green); } .bestiary-defeat-btn:hover { background: var(--green-dim); border-color: var(--cure-green); box-shadow: 0 0 10px rgba(80, 200, 120, 0.15); } .bestiary-reactivate-btn { border-color: rgba(224, 85, 85, 0.3); color: var(--hp-red); } .bestiary-reactivate-btn:hover { background: var(--red-dim); border-color: var(--hp-red); } .bestiary-edit-btn { border-color: rgba(255, 215, 0, 0.25); color: var(--gold); } .bestiary-edit-btn:hover { background: var(--gold-dim); border-color: var(--gold); } .bestiary-detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .bestiary-detail-stat { text-align: center; padding: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .bestiary-detail-stat-value { font-family: var(--font-stat); font-size: 22px; font-weight: 700; color: var(--crystal); display: block; } .bestiary-detail-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); } .bestiary-detail-section { margin-bottom: 20px; } .bestiary-detail-section-title { font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 215, 0, 0.15); display: flex; align-items: center; justify-content: space-between; } .bestiary-detail-text { padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; } .bestiary-quest-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 4px; font-size: 13px; color: var(--text-parchment); } .bestiary-quest-item-meta { font-size: 11px; color: var(--text-muted); margin-left: auto; } .bestiary-unlink-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; padding: 2px 6px; transition: color var(--transition); } .bestiary-unlink-btn:hover { color: var(--hp-red); } .bestiary-link-btn { font-size: 10px; background: transparent; border: 1px solid rgba(78, 205, 196, 0.25); color: var(--crystal); padding: 3px 10px; border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font-heading); letter-spacing: 1px; text-transform: uppercase; transition: all var(--transition); } .bestiary-link-btn:hover { background: var(--crystal-dim); border-color: var(--crystal); } .bestiary-empty { text-align: center; color: var(--text-muted); font-size: 15px; padding: 48px 0; } /* ---- Random Encounters ---- */ .encounters-capture-bar { display: flex; gap: 8px; padding: 12px 24px; background: var(--bg-panel); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .encounters-input { flex: 1; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius); color: var(--text-parchment); font-family: var(--font-body); font-size: 14px; transition: border-color var(--transition); } .encounters-input:focus { outline: none; border-color: var(--phoenix); box-shadow: 0 0 8px rgba(255, 123, 79, 0.15); } .encounters-capture-bar .guild-ac-wrapper { width: 160px; flex: none; } .encounters-client-input { width: 100%; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius); color: var(--text-parchment); font-family: var(--font-body); font-size: 14px; transition: border-color var(--transition); } .encounters-client-input:focus { outline: none; border-color: var(--gold); } .encounters-log-btn { padding: 8px 18px; background: rgba(255, 123, 79, 0.12); border: 1px solid rgba(255, 123, 79, 0.3); color: var(--phoenix); font-family: var(--font-heading); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); white-space: nowrap; } .encounters-log-btn:hover { background: rgba(255, 123, 79, 0.2); border-color: var(--phoenix); box-shadow: 0 0 12px rgba(255, 123, 79, 0.2); } .encounters-body { flex: 1; overflow-y: auto; padding: 16px 24px; } .encounters-period-select { padding: 6px 10px; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius); color: var(--text-parchment); font-family: var(--font-body); font-size: 13px; cursor: pointer; } .encounters-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .encounters-stat-card { text-align: center; padding: 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px; } .encounters-stat-value { font-family: var(--font-stat); font-size: 20px; font-weight: 700; color: var(--phoenix); } .encounters-stat-label { font-family: var(--font-heading); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); } .encounters-guild-bars { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; } .encounters-guild-bar-row { display: flex; align-items: center; gap: 10px; } .encounters-guild-bar-name { width: 100px; font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.5px; color: var(--text-secondary); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .encounters-guild-bar-track { flex: 1; height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-subtle); } .encounters-guild-bar-fill { height: 100%; background: var(--phoenix); border-radius: 4px; transition: width 0.3s ease; min-width: 4px; } .encounters-guild-bar-count { font-family: var(--font-stat); font-size: 11px; color: var(--text-muted); width: 28px; } .encounters-list { display: flex; flex-direction: column; gap: 4px; } .encounter-date-group { font-family: var(--font-heading); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); padding: 12px 0 4px; } .encounter-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-left: 3px solid var(--phoenix); border-radius: var(--radius); transition: all var(--transition); } .encounter-item:hover { background: rgba(255, 123, 79, 0.04); border-color: var(--border-medium); border-left-color: var(--phoenix); } .encounter-item.resolved { opacity: 0.5; border-left-color: var(--cure-green); } .encounter-time { font-family: var(--font-stat); font-size: 11px; color: var(--text-muted); min-width: 42px; } .encounter-body { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } .encounter-desc { font-family: var(--font-body); font-size: 14px; color: var(--text-parchment); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .encounter-guild { font-family: var(--font-heading); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.15); flex-shrink: 0; } .encounter-actions { display: flex; gap: 4px; opacity: 0; transition: opacity var(--transition); } .encounter-item:hover .encounter-actions { opacity: 1; } .encounter-resolve-btn, .encounter-delete-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; transition: all var(--transition); } .encounter-resolve-btn:hover { border-color: var(--cure-green); color: var(--cure-green); } .encounter-resolve-btn.resolved { background: var(--cure-green); border-color: var(--cure-green); color: #fff; opacity: 1; } .encounter-delete-btn:hover { border-color: var(--hp-red); color: var(--hp-red); } .encounters-empty { text-align: center; color: var(--text-muted); font-size: 15px; padding: 48px 0; } /* ---- Guild Autocomplete Dropdown ---- */ .guild-ac-wrapper { position: relative; display: flex; flex: inherit; } .guild-ac-wrapper > input { width: 100%; } .guild-ac-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin-top: 2px; max-height: 180px; overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--border-glow); border-radius: var(--radius); box-shadow: var(--shadow-panel), 0 8px 24px rgba(0, 0, 0, 0.5); } .guild-ac-dropdown.hidden { display: none; } .guild-ac-option { padding: 8px 12px; font-family: var(--font-body); font-size: 13px; color: var(--text-parchment); cursor: pointer; border-bottom: 1px solid var(--border-subtle); transition: background 0.1s ease; } .guild-ac-option:last-child { border-bottom: none; } .guild-ac-option:hover, .guild-ac-option.active { background: var(--crystal-dim); color: var(--crystal); } .guild-ac-dropdown::-webkit-scrollbar { width: 4px; } .guild-ac-dropdown::-webkit-scrollbar-track { background: transparent; } .guild-ac-dropdown::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 2px; } /* ============================================ THEME SWITCHER — atmosphere & UI ============================================ */ /* GU decorative layers — hidden by default, shown only under the .hack//GU theme */ .gu-grid, .gu-scanlines { display: none; } /* When .hack//GU is active, hide the FF magical atmosphere */ [data-theme="hack"] .ff-sky, [data-theme="hack"] .ff-aurora, [data-theme="hack"] .ff-stars, [data-theme="hack"] .ff-wisps { display: none; } /* And reveal the GU layers */ [data-theme="hack"] .gu-grid, [data-theme="hack"] .gu-scanlines { display: block; } /* GU base background — near-black with a subtle radial vignette */ [data-theme="hack"] body { background: radial-gradient(ellipse at top, #0E1018 0%, #05060A 55%, #020306 100%); } /* Faint amber grid */ .gu-grid { position: fixed; inset: 0; pointer-events: none; z-index: -3; background-image: linear-gradient(rgba(255, 196, 0, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 196, 0, 0.045) 1px, transparent 1px); background-size: 48px 48px, 48px 48px; mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 85%); } /* CRT scan lines */ .gu-scanlines { position: fixed; inset: 0; pointer-events: none; z-index: -2; background: repeating-linear-gradient( 0deg, rgba(255, 196, 0, 0.025) 0px, rgba(255, 196, 0, 0.025) 1px, transparent 1px, transparent 3px ); mix-blend-mode: screen; animation: gu-scan-drift 8s linear infinite; } @keyframes gu-scan-drift { 0% { background-position: 0 0; } 100% { background-position: 0 6px; } } /* GU theme — sharper modal borders, drop FF double-border softness */ [data-theme="hack"] .modal-content::after { border-color: rgba(255, 196, 0, 0.18); } [data-theme="hack"] .modal-content h3 { color: var(--crystal); text-shadow: 0 0 10px rgba(255, 196, 0, 0.35); letter-spacing: 4px; } /* Title gear button (lives in home title bar) */ .title-gear-btn { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius); font-size: 18px; cursor: pointer; transition: all var(--transition); } .title-gear-btn:hover { color: var(--crystal); border-color: var(--border-glow); box-shadow: var(--shadow-glow); transform: translateY(-50%) rotate(45deg); } /* Make sure the title panel inner can host the gear absolutely */ .ff-title-panel .ff-panel-inner { position: relative; } /* Settings modal */ .settings-modal-content { width: 520px; max-width: 92%; } .theme-tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .theme-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius); color: var(--text-parchment); cursor: pointer; text-align: left; transition: all var(--transition); } .theme-tile:hover { border-color: var(--border-medium); background: var(--bg-card-solid); } .theme-tile.is-active { border-color: var(--crystal); box-shadow: var(--shadow-glow); background: var(--bg-card-solid); } .theme-tile-name { font-family: var(--font-heading); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); } .theme-tile.is-active .theme-tile-name { color: var(--crystal); text-shadow: 0 0 8px var(--border-glow); } .theme-tile-desc { font-family: var(--font-body); font-size: 11px; color: var(--text-secondary); letter-spacing: 1px; } .theme-tile-swatches { display: inline-flex; gap: 4px; margin-top: 4px; } .theme-tile-swatches i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.08); display: inline-block; } /* ============================================ .hack//GU OVERRIDES — replace hardcoded FF colors that bypass the CSS-var system. ============================================ */ /* --- Scrollbars --- */ [data-theme="hack"] ::-webkit-scrollbar-track { background: rgba(5, 6, 10, 0.7); } [data-theme="hack"] ::-webkit-scrollbar-thumb { background: rgba(255, 196, 0, 0.18); border-radius: 0; } [data-theme="hack"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 46, 151, 0.40); } /* --- FF home panel chrome (linear-gradient blue + double-border) --- */ [data-theme="hack"] .ff-panel { background: linear-gradient(135deg, #08090F 0%, #11141C 50%, #0A0C12 100%); border: 1px solid rgba(255, 196, 0, 0.30); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.06), inset 0 0 0 2px rgba(255, 46, 151, 0.05), 0 4px 20px rgba(0, 0, 0, 0.7); } [data-theme="hack"] .ff-panel::after { border-color: rgba(255, 196, 0, 0.10); } /* --- Home title shimmer (was a hardcoded gold gradient) --- */ [data-theme="hack"] .home-title { background: linear-gradient(90deg, #B07A00, #FFC400 30%, #FFE680 50%, #FFC400 70%, #B07A00); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 14px rgba(255, 196, 0, 0.30)); } /* --- Dashboard stats text-shadows --- */ [data-theme="hack"] .stat-cyan .stat-value { text-shadow: 0 0 8px rgba(255, 196, 0, 0.45); } [data-theme="hack"] .stat-lime .stat-value { text-shadow: 0 0 8px rgba(110, 231, 183, 0.45); } [data-theme="hack"] .stat-pink .stat-value { text-shadow: 0 0 8px rgba(255, 51, 85, 0.45); } [data-theme="hack"] .stat-orange .stat-value { text-shadow: 0 0 8px rgba(240, 165, 0, 0.45); } [data-theme="hack"] .stat-green .stat-value { text-shadow: 0 0 8px rgba(110, 231, 183, 0.45); } [data-theme="hack"] .stat-purple .stat-value { text-shadow: 0 0 12px rgba(255, 46, 151, 0.50); } [data-theme="hack"] .stat-card:hover { background: rgba(255, 196, 0, 0.05); } /* --- Quick action row + buttons in home menu --- */ [data-theme="hack"] .dashboard-quick-actions { border-top: 1px solid rgba(255, 196, 0, 0.18); } [data-theme="hack"] .dash-action-btn { border: 1px solid rgba(255, 196, 0, 0.30); } [data-theme="hack"] .dash-action-btn::before { background: linear-gradient(90deg, transparent, rgba(255, 196, 0, 0.12), transparent); } /* --- Home menu cards (FF cursor arrow + hover) --- */ [data-theme="hack"] .home-card::before { color: var(--crystal); text-shadow: 0 0 6px rgba(255, 196, 0, 0.55); } [data-theme="hack"] .home-card:hover { background: rgba(255, 196, 0, 0.07); } [data-theme="hack"] .home-card:hover .home-card-label { color: #FFE680; text-shadow: 0 0 10px rgba(255, 196, 0, 0.30); } /* --- Epitaph quote glow --- */ [data-theme="hack"] .ff-epitaph-panel .ff-panel-inner h2, [data-theme="hack"] .ff-epitaph-panel h2 { text-shadow: 0 0 14px rgba(255, 196, 0, 0.25); } /* --- View topbar (every non-home view) --- */ [data-theme="hack"] .view-topbar { background: rgba(10, 12, 18, 0.75); border-bottom: 1px solid rgba(255, 196, 0, 0.15); } [data-theme="hack"] .view-topbar-title { color: var(--crystal); text-shadow: 0 0 14px rgba(255, 196, 0, 0.30); } [data-theme="hack"] .topbar-action-btn { border: 1px solid rgba(255, 196, 0, 0.30); color: var(--crystal); } [data-theme="hack"] .topbar-action-btn:hover { background: rgba(255, 196, 0, 0.10); border-color: var(--crystal); box-shadow: var(--shadow-gold); } [data-theme="hack"] .topbar-nav-btn { border-color: rgba(255, 46, 151, 0.35) !important; color: var(--xp-purple) !important; } [data-theme="hack"] .topbar-nav-btn:hover { background: rgba(255, 46, 151, 0.10) !important; border-color: var(--xp-purple) !important; box-shadow: 0 0 12px rgba(255, 46, 151, 0.30) !important; } /* --- Week view + day boxes --- */ [data-theme="hack"] #week-label, [data-theme="hack"] #plan-week-label, [data-theme="hack"] #ts-week-label { color: var(--crystal); text-shadow: 0 0 14px rgba(255, 196, 0, 0.30); } [data-theme="hack"] .day-box::after { border-color: rgba(255, 196, 0, 0.06); } [data-theme="hack"] .day-box.drag-over { background: rgba(110, 231, 183, 0.07); box-shadow: 0 0 16px rgba(110, 231, 183, 0.25), 0 0 40px rgba(110, 231, 183, 0.06); } [data-theme="hack"] .day-label { color: var(--crystal); text-shadow: 0 0 10px rgba(255, 196, 0, 0.35); } /* --- Modal chrome --- */ [data-theme="hack"] .modal-overlay { background: rgba(0, 0, 0, 0.75); } [data-theme="hack"] .modal-content { box-shadow: 0 0 30px rgba(255, 196, 0, 0.10), 0 0 60px rgba(255, 46, 151, 0.06), 0 8px 32px rgba(0, 0, 0, 0.6); } /* --- Generic FF gold-glow text-shadow leaks (h3, week-label, etc.) --- */ [data-theme="hack"] [class*="-title"], [data-theme="hack"] [class*="-label"] { /* No-op base; specific titles overridden above */ } /* --- Body fallback under hack — already handled by [data-theme="hack"] body rule earlier; retained here for clarity --- */ /* ============================================ Ocarina of Time atmosphere & overrides ============================================ */ /* OOT decorative layers — hidden by default */ .oot-sky, .oot-triforce, .oot-horizon { display: none; } /* When OOT is active: hide FF magical layers (sky/aurora/wisps), keep stars (Hyrule night sky), reveal OOT layers */ [data-theme="oot"] .ff-sky, [data-theme="oot"] .ff-aurora, [data-theme="oot"] .ff-wisps, [data-theme="oot"] .gu-grid, [data-theme="oot"] .gu-scanlines { display: none; } [data-theme="oot"] .oot-sky, [data-theme="oot"] .oot-triforce, [data-theme="oot"] .oot-horizon { display: block; } /* OOT body — twilight horizon glow */ [data-theme="oot"] body { background: radial-gradient(ellipse at bottom, #2A1B3A 0%, #1B1F38 30%, #0F1A2A 60%, #08101C 100%); } /* Twilight Hyrule sky — sunset rim at the horizon, fading up to deep navy */ .oot-sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient(180deg, #08101C 0%, #0F1A2A 30%, #1B1F38 55%, #3A2548 75%, #6B3A40 90%, #C97A3A 100%); } /* Distant horizon glow (sunset/sunrise warm band) */ .oot-horizon { position: fixed; bottom: 0; left: 0; right: 0; height: 28%; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(244, 200, 66, 0.18) 0%, rgba(224, 122, 47, 0.08) 35%, transparent 70%); animation: ootHorizonShift 18s ease-in-out infinite alternate; } @keyframes ootHorizonShift { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.85; } } /* Faint Triforce watermark — large, low-opacity, drifts gently */ .oot-triforce { position: fixed; top: 50%; left: 50%; width: 320px; height: 280px; transform: translate(-50%, -55%); z-index: -2; pointer-events: none; opacity: 0.06; color: #F4C842; font-family: serif; text-align: center; animation: ootTriforceFloat 14s ease-in-out infinite alternate; } .oot-triforce::before { content: '\25B2\A\25B2 \25B2'; white-space: pre; display: block; font-size: 110px; letter-spacing: -2px; line-height: 0.85; text-align: center; filter: drop-shadow(0 0 24px rgba(244, 200, 66, 0.45)); } @keyframes ootTriforceFloat { 0% { opacity: 0.05; transform: translate(-50%, -55%) scale(1); } 100% { opacity: 0.10; transform: translate(-50%, -57%) scale(1.04); } } /* Recolor stars to warm gold for OOT (instead of white FF stars) */ [data-theme="oot"] .star { background: #F4C842; box-shadow: 0 0 4px rgba(244, 200, 66, 0.5); } /* --- Scrollbars --- */ [data-theme="oot"] ::-webkit-scrollbar-track { background: rgba(15, 26, 42, 0.6); } [data-theme="oot"] ::-webkit-scrollbar-thumb { background: rgba(244, 200, 66, 0.25); border-radius: 3px; } [data-theme="oot"] ::-webkit-scrollbar-thumb:hover { background: rgba(244, 200, 66, 0.5); } /* --- FF home panel chrome (replace cobalt blue with stone-and-gold) --- */ [data-theme="oot"] .ff-panel { background: linear-gradient(135deg, #16243A 0%, #1F2E45 50%, #18253B 100%); border: 2px solid rgba(244, 200, 66, 0.45); border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(212, 160, 58, 0.18), inset 0 0 0 3px rgba(244, 200, 66, 0.08), 0 4px 22px rgba(0, 0, 0, 0.55); } [data-theme="oot"] .ff-panel::after { border-color: rgba(244, 200, 66, 0.12); } /* --- Home title shimmer — Triforce gold gradient --- */ [data-theme="oot"] .home-title { background: linear-gradient(90deg, #8C6620, #D4A03A 30%, #F4C842 50%, #FFEFA8 60%, #F4C842 70%, #8C6620); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 16px rgba(244, 200, 66, 0.35)); } /* --- Dashboard stats text-shadows --- */ [data-theme="oot"] .stat-cyan .stat-value { text-shadow: 0 0 8px rgba(244, 200, 66, 0.40); } [data-theme="oot"] .stat-lime .stat-value { text-shadow: 0 0 8px rgba(91, 170, 82, 0.45); } [data-theme="oot"] .stat-pink .stat-value { text-shadow: 0 0 8px rgba(230, 57, 70, 0.45); } [data-theme="oot"] .stat-orange .stat-value { text-shadow: 0 0 8px rgba(212, 160, 58, 0.45); } [data-theme="oot"] .stat-green .stat-value { text-shadow: 0 0 8px rgba(91, 170, 82, 0.45); } [data-theme="oot"] .stat-purple .stat-value { text-shadow: 0 0 12px rgba(123, 79, 171, 0.50); } [data-theme="oot"] .stat-card:hover { background: rgba(244, 200, 66, 0.05); } /* --- Quick action row + buttons in home menu --- */ [data-theme="oot"] .dashboard-quick-actions { border-top: 1px solid rgba(244, 200, 66, 0.20); } [data-theme="oot"] .dash-action-btn { border: 1px solid rgba(244, 200, 66, 0.30); } [data-theme="oot"] .dash-action-btn::before { background: linear-gradient(90deg, transparent, rgba(244, 200, 66, 0.14), transparent); } /* --- Home menu cards (FF cursor arrow + hover) --- */ [data-theme="oot"] .home-card::before { color: var(--crystal); text-shadow: 0 0 8px rgba(244, 200, 66, 0.6); } [data-theme="oot"] .home-card:hover { background: rgba(244, 200, 66, 0.07); } [data-theme="oot"] .home-card:hover .home-card-label { color: #FFEFA8; text-shadow: 0 0 10px rgba(244, 200, 66, 0.35); } /* --- Epitaph quote glow --- */ [data-theme="oot"] .ff-epitaph-panel .ff-panel-inner h2, [data-theme="oot"] .ff-epitaph-panel h2 { text-shadow: 0 0 14px rgba(244, 200, 66, 0.28); } /* --- View topbar (every non-home view) --- */ [data-theme="oot"] .view-topbar { background: rgba(20, 32, 53, 0.7); border-bottom: 1px solid rgba(244, 200, 66, 0.20); backdrop-filter: blur(8px); } [data-theme="oot"] .view-topbar-title { color: var(--crystal); text-shadow: 0 0 14px rgba(244, 200, 66, 0.35); } [data-theme="oot"] .topbar-action-btn { border: 1px solid rgba(244, 200, 66, 0.30); color: var(--crystal); } [data-theme="oot"] .topbar-action-btn:hover { background: rgba(244, 200, 66, 0.10); border-color: var(--crystal); box-shadow: var(--shadow-gold); } [data-theme="oot"] .topbar-nav-btn { border-color: rgba(123, 79, 171, 0.35) !important; color: var(--xp-purple) !important; } [data-theme="oot"] .topbar-nav-btn:hover { background: rgba(123, 79, 171, 0.10) !important; border-color: var(--xp-purple) !important; box-shadow: 0 0 12px rgba(123, 79, 171, 0.25) !important; } /* --- Week view + day boxes --- */ [data-theme="oot"] #week-label, [data-theme="oot"] #plan-week-label, [data-theme="oot"] #ts-week-label { color: var(--crystal); text-shadow: 0 0 14px rgba(244, 200, 66, 0.32); } [data-theme="oot"] .day-box::after { border-color: rgba(244, 200, 66, 0.08); } [data-theme="oot"] .day-box.drag-over { background: rgba(91, 170, 82, 0.07); box-shadow: 0 0 16px rgba(91, 170, 82, 0.22), 0 0 40px rgba(91, 170, 82, 0.06); } [data-theme="oot"] .day-label { color: var(--crystal); text-shadow: 0 0 10px rgba(244, 200, 66, 0.35); } /* --- Modal chrome --- */ [data-theme="oot"] .modal-overlay { background: rgba(8, 10, 20, 0.70); } [data-theme="oot"] .modal-content { box-shadow: 0 0 30px rgba(244, 200, 66, 0.12), 0 0 60px rgba(244, 200, 66, 0.04), 0 8px 32px rgba(0, 0, 0, 0.5); } /* ============================================ Ragnarok Online atmosphere & overrides ============================================ */ /* RO decorative layers — hidden by default */ .ro-sky, .ro-horizon, .ro-clouds { display: none; } [data-theme="ro"] .ff-sky, [data-theme="ro"] .ff-aurora, [data-theme="ro"] .ff-wisps, [data-theme="ro"] .gu-grid, [data-theme="ro"] .gu-scanlines, [data-theme="ro"] .oot-sky, [data-theme="ro"] .oot-horizon, [data-theme="ro"] .oot-triforce { display: none; } [data-theme="ro"] .ro-sky, [data-theme="ro"] .ro-horizon, [data-theme="ro"] .ro-clouds { display: block; } [data-theme="ro"] body { background: radial-gradient(ellipse at top, #1A3252 0%, #0F2240 35%, #0B1A2E 70%, #061224 100%); } /* Prontera evening sky — softer blue with golden horizon */ .ro-sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient(180deg, #06121F 0%, #0B1A2E 25%, #122644 50%, #1A3252 75%, #2C4F7A 90%, #E8C97D 100%); } /* Golden horizon glow at the bottom (sunset over Prontera) */ .ro-horizon { position: fixed; bottom: 0; left: 0; right: 0; height: 22%; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(232, 201, 125, 0.22) 0%, rgba(91, 174, 220, 0.10) 40%, transparent 75%); } /* Drifting cloud streaks */ .ro-clouds { position: fixed; top: 8%; left: 0; right: 0; height: 30%; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 280px 16px at 18% 35%, rgba(245, 237, 216, 0.10), transparent 70%), radial-gradient(ellipse 220px 12px at 58% 22%, rgba(245, 237, 216, 0.08), transparent 70%), radial-gradient(ellipse 320px 18px at 86% 48%, rgba(245, 237, 216, 0.07), transparent 70%); animation: roCloudDrift 60s linear infinite; } @keyframes roCloudDrift { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: -300px 0, -240px 0, -350px 0; } } /* RO stars — soft cream */ [data-theme="ro"] .star { background: #F5EDD8; box-shadow: 0 0 4px rgba(245, 237, 216, 0.35); } /* --- Scrollbars --- */ [data-theme="ro"] ::-webkit-scrollbar-track { background: rgba(11, 26, 46, 0.6); } [data-theme="ro"] ::-webkit-scrollbar-thumb { background: rgba(91, 174, 220, 0.25); border-radius: 3px; } [data-theme="ro"] ::-webkit-scrollbar-thumb:hover { background: rgba(232, 201, 125, 0.45); } /* --- FF home panel chrome → blue-and-gold Prontera plating --- */ [data-theme="ro"] .ff-panel { background: linear-gradient(135deg, #14253E 0%, #1F3A5C 50%, #16294A 100%); border: 2px solid rgba(232, 201, 125, 0.50); border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(91, 174, 220, 0.25), inset 0 0 0 3px rgba(232, 201, 125, 0.10), 0 4px 22px rgba(0, 0, 0, 0.50); } [data-theme="ro"] .ff-panel::after { border-color: rgba(232, 201, 125, 0.14); } /* --- Home title — gold cathedral inscription --- */ [data-theme="ro"] .home-title { background: linear-gradient(90deg, #8C6B30, #D4A85A 30%, #F8E5A0 50%, #FFF7C9 60%, #F8E5A0 70%, #8C6B30); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 14px rgba(232, 201, 125, 0.40)); } /* --- Dashboard stats text-shadows --- */ [data-theme="ro"] .stat-cyan .stat-value { text-shadow: 0 0 8px rgba(91, 174, 220, 0.45); } [data-theme="ro"] .stat-lime .stat-value { text-shadow: 0 0 8px rgba(127, 203, 110, 0.45); } [data-theme="ro"] .stat-pink .stat-value { text-shadow: 0 0 8px rgba(224, 69, 69, 0.45); } [data-theme="ro"] .stat-orange .stat-value { text-shadow: 0 0 8px rgba(232, 201, 125, 0.45); } [data-theme="ro"] .stat-green .stat-value { text-shadow: 0 0 8px rgba(127, 203, 110, 0.45); } [data-theme="ro"] .stat-purple .stat-value { text-shadow: 0 0 12px rgba(168, 124, 200, 0.50); } [data-theme="ro"] .stat-card:hover { background: rgba(91, 174, 220, 0.06); } /* --- Quick action row + buttons --- */ [data-theme="ro"] .dashboard-quick-actions { border-top: 1px solid rgba(232, 201, 125, 0.22); } [data-theme="ro"] .dash-action-btn { border: 1px solid rgba(91, 174, 220, 0.32); } [data-theme="ro"] .dash-action-btn::before { background: linear-gradient(90deg, transparent, rgba(91, 174, 220, 0.14), transparent); } /* --- Home menu cards --- */ [data-theme="ro"] .home-card::before { color: var(--gold); text-shadow: 0 0 8px rgba(232, 201, 125, 0.6); } [data-theme="ro"] .home-card:hover { background: rgba(91, 174, 220, 0.08); } [data-theme="ro"] .home-card:hover .home-card-label { color: #F8E5A0; text-shadow: 0 0 10px rgba(232, 201, 125, 0.35); } /* --- Epitaph quote glow --- */ [data-theme="ro"] .ff-epitaph-panel .ff-panel-inner h2, [data-theme="ro"] .ff-epitaph-panel h2 { text-shadow: 0 0 14px rgba(232, 201, 125, 0.30); } /* --- View topbar --- */ [data-theme="ro"] .view-topbar { background: rgba(15, 34, 64, 0.72); border-bottom: 1px solid rgba(232, 201, 125, 0.22); backdrop-filter: blur(8px); } [data-theme="ro"] .view-topbar-title { color: var(--gold); text-shadow: 0 0 14px rgba(232, 201, 125, 0.35); } [data-theme="ro"] .topbar-action-btn { border: 1px solid rgba(232, 201, 125, 0.32); color: var(--gold); } [data-theme="ro"] .topbar-action-btn:hover { background: rgba(232, 201, 125, 0.10); border-color: var(--gold); box-shadow: var(--shadow-gold); } [data-theme="ro"] .topbar-nav-btn { border-color: rgba(168, 124, 200, 0.35) !important; color: var(--xp-purple) !important; } [data-theme="ro"] .topbar-nav-btn:hover { background: rgba(168, 124, 200, 0.10) !important; border-color: var(--xp-purple) !important; box-shadow: 0 0 12px rgba(168, 124, 200, 0.25) !important; } /* --- Week view + day boxes --- */ [data-theme="ro"] #week-label, [data-theme="ro"] #plan-week-label, [data-theme="ro"] #ts-week-label { color: var(--gold); text-shadow: 0 0 14px rgba(232, 201, 125, 0.32); } [data-theme="ro"] .day-box::after { border-color: rgba(91, 174, 220, 0.08); } [data-theme="ro"] .day-box.drag-over { background: rgba(127, 203, 110, 0.07); box-shadow: 0 0 16px rgba(127, 203, 110, 0.22), 0 0 40px rgba(127, 203, 110, 0.06); } [data-theme="ro"] .day-label { color: var(--crystal); text-shadow: 0 0 10px rgba(91, 174, 220, 0.40); } /* --- Modal chrome --- */ [data-theme="ro"] .modal-overlay { background: rgba(8, 16, 30, 0.72); } [data-theme="ro"] .modal-content { box-shadow: 0 0 30px rgba(91, 174, 220, 0.12), 0 0 60px rgba(232, 201, 125, 0.05), 0 8px 32px rgba(0, 0, 0, 0.5); } /* ============================================ HOME SCENE — per-theme home-city silhouette Shows behind the home panels, evokes each theme's iconic home city/region. ============================================ */ #home-view { position: relative; } .home-scene { position: absolute; bottom: 0; left: 0; right: 0; height: 240px; pointer-events: none; z-index: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; } .home-container { position: relative; z-index: 2; } .home-scene-svg { display: none; width: 100%; max-width: 1400px; height: 100%; opacity: 0.32; filter: drop-shadow(0 0 18px currentColor); } /* FF default → Rabanastre */ .home-scene-ff { display: block; color: var(--gold); } [data-theme="hack"] .home-scene-ff, [data-theme="oot"] .home-scene-ff, [data-theme="ro"] .home-scene-ff { display: none; } /* .hack//GU → Mac Anu */ [data-theme="hack"] .home-scene-hack { display: block; color: var(--crystal); opacity: 0.40; } /* OOT → Hyrule Castle */ [data-theme="oot"] .home-scene-oot { display: block; color: var(--crystal); opacity: 0.38; } /* RO → Prontera */ [data-theme="ro"] .home-scene-ro { display: block; color: var(--crystal); opacity: 0.42; } /* Subtle ground haze beneath all scenes — sells the silhouette */ .home-scene::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 100%); pointer-events: none; } /* ============================================ GUILD MEMBERS — Structured contact tracking ============================================ */ .guild-members-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .guild-member-add-btn { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: var(--gold-dim); border: 1px solid rgba(255, 215, 0, 0.35); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; transition: background var(--transition), box-shadow var(--transition); } .guild-member-add-btn:hover { background: rgba(255, 215, 0, 0.18); box-shadow: var(--shadow-gold); } .guild-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .guild-member-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .guild-member-card:hover { border-color: var(--border-medium); background: var(--bg-card-solid); box-shadow: var(--shadow-glow); } .guild-member-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 14px; font-weight: 700; letter-spacing: 1px; border: 1px solid; } .guild-member-body { flex: 1; min-width: 0; } .guild-member-name { font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text-parchment); letter-spacing: 0.5px; margin-bottom: 4px; } .guild-member-notes { font-size: 12px; color: var(--text-secondary); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .guild-member-notes-empty { color: var(--text-muted); font-style: italic; } .form-row { display: flex; gap: 12px; } .form-row-2col > .form-group { flex: 1; min-width: 0; } /* ============================================ LOGIN OVERLAY ============================================ */ .login-view { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.85) 100%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .login-view.hidden { display: none; } body.login-active #app { visibility: hidden; } .login-panel { width: 100%; max-width: 380px; padding: 32px 28px 28px; background: var(--bg-panel); border: 1px solid var(--border-medium); border-radius: var(--radius); box-shadow: var(--shadow-panel), var(--shadow-glow); display: flex; flex-direction: column; gap: 14px; } .login-title { font-family: var(--font-heading); font-size: 26px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; text-align: center; color: var(--gold); text-shadow: 0 0 12px rgba(255, 215, 0, 0.35); margin-bottom: 2px; } .login-subtitle { font-family: var(--font-body); font-size: 12px; color: var(--text-secondary); text-align: center; letter-spacing: 1px; margin-bottom: 10px; } .login-panel .form-group { margin-bottom: 0; } .login-error { font-size: 12px; color: var(--hp-red); background: var(--red-dim); border: 1px solid rgba(224, 85, 85, 0.35); border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; } .login-error.hidden { display: none; } .login-submit { width: 100%; margin-top: 4px; } /* ============================================ SETTINGS — Account row ============================================ */ .settings-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; margin-top: 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); } .settings-account-label { font-size: 12px; color: var(--text-secondary); letter-spacing: 0.5px; } .settings-account-label strong { color: var(--text-parchment); font-weight: 600; } /* ============================================ CHRONICLE — Adventure history & trend charts ============================================ */ .chronicle-content { padding: 20px 24px 40px; max-width: 1100px; margin: 0 auto; } .chronicle-loading { text-align: center; padding: 60px 20px; color: var(--text-secondary); font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.05em; } .chronicle-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; } /* Summary stat cards row */ .chronicle-summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; } .chronicle-stat-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 16px 18px; text-align: center; box-shadow: var(--shadow-panel); transition: border-color var(--transition), box-shadow var(--transition); } .chronicle-stat-card:hover { border-color: var(--border-medium); box-shadow: var(--shadow-glow); } .csc-icon { font-size: 22px; margin-bottom: 6px; } .csc-value { font-family: var(--font-stat); font-size: 1.9rem; font-weight: 700; color: var(--crystal); line-height: 1; margin-bottom: 4px; } .csc-label { font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); } /* Chart panels */ .chronicle-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .chronicle-charts-full { grid-template-columns: 1fr; } .chronicle-panel { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-panel); } .chronicle-panel-title { font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 14px; } @media (max-width: 680px) { .chronicle-charts-row { grid-template-columns: 1fr; } .chronicle-content { padding: 12px 14px 32px; } }