/* ================================================ imagemochi — Shared Design System Nav + Banner + Variables for all pages ================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap'); /* ── Page Transition (smooth navigation fade) ── */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: fadeOut 0.15s ease-out; } ::view-transition-new(root) { animation: fadeIn 0.2s ease-in; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } :root { /* ── Core palette ── */ --bg: #FFF8F5; --surface: #FFFFFF; --surface-2: #FFF0EB; --surface-3: #FFE4DB; --border: #F0D9D0; --border-hover:#E8C4B8; --text: #2D1B14; --text-dim: #6B5148; --text-muted: #9C8179; /* ── Brand accents ── */ --accent: #FF7EB3; --accent-light:#FF9AC6; --accent-dim: #E85D8F; --accent-bg: rgba(255,126,179,0.08); /* Text-safe accent — WCAG AA on --bg (#FFF8F5) ≥ 4.5:1. Use for links & emphasis in body copy. */ --accent-text: #B53A6E; /* ── Secondary accents (category colors) ── */ --peach: #FFB088; --lavender: #C4A1FF; --accent-2: #FFB088; /* peach alias — Layer 3 category color */ --accent-3: #C4A1FF; /* lavender alias — Layer 3 category color */ --danger: #EF4444; --success: #5CC9A7; /* ── Interaction tokens ── */ --glow-color: rgba(255,126,179,0.25); --confetti-1: #FF7EB3; --confetti-2: #FFB088; --confetti-3: #C4A1FF; --confetti-4: #5CC9A7; /* ── Motion tokens ── */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur-normal: 300ms; --dur-slow: 500ms; /* ── Typography ── */ --mono: 'JetBrains Mono', monospace; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --heading: 'Outfit', 'Inter', -apple-system, sans-serif; /* ── Radii ── */ --radius: 16px; --radius-sm: 12px; --radius-lg: 24px; /* ── Z-index scale (single source) ── */ --z-behind: -1; --z-base: 1; --z-orbit: 2; --z-mochi: 3; --z-nav: 100; --z-palette: 200; --z-fab: 900; --z-banner: 1000; --z-feedback: 990; --z-toast: 995; --z-drop: 9000; --z-modal: 9500; --z-glow: 9998; --z-overlay: 9999; --z-confetti: 10001; } /* ── DARK THEME ── */ [data-theme="dark"] { --bg: #1A1216; --surface: #231C20; --surface-2: #2C2226; --surface-3: #362A2E; --border: #3D2F34; --border-hover:#5A4349; --text: #FFF0EB; --text-dim: #C9AAA0; --text-muted: #8B706A; --accent: #FF7EB3; --accent-light:#FF9AC6; --accent-dim: #E85D8F; --accent-bg: rgba(255,126,179,0.10); /* Text-safe accent — on dark bg, lighter pink maintains AA */ --accent-text: #FFADD1; --danger: #EF4444; --success: #5CC9A7; --nav-bg: rgba(26,18,22,0.92); } /* ── T3D: Neon theme variant (opt-in via data-theme-variant="neon" on ) ── Applies only in dark mode. Anime/cyberpunk aesthetic — saturated accents + subtle glow. */ [data-theme="dark"][data-theme-variant="neon"] { --bg: #0A0418; --surface: #15092B; --surface-2: #1E0D3A; --border: #5E2F7C; --border-hover:#8B4BB8; --text: #FFE6FB; --text-dim: #E0B8E8; --text-muted: #9F7DAD; --accent: #FF4FA3; --accent-light:#FF7ECB; --accent-dim: #D91F88; --accent-bg: rgba(255,79,163,0.18); --accent-text: #FFB8E0; --peach: #FFA368; --lavender: #C87EFF; --success: #6FFFB4; --danger: #FF3E7F; } [data-theme="dark"][data-theme-variant="neon"] body { background-image: radial-gradient(ellipse 70% 40% at 20% 10%, rgba(255,79,163,0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 30%, rgba(200,126,255,0.10) 0%, transparent 55%); } [data-theme="dark"][data-theme-variant="neon"] .nav-logo-text, [data-theme="dark"][data-theme-variant="neon"] h1 .accent, [data-theme="dark"][data-theme-variant="neon"] .gradient { text-shadow: 0 0 18px rgba(255,79,163,0.35), 0 0 42px rgba(200,126,255,0.22); } [data-theme="dark"][data-theme-variant="neon"] .tool-btn, [data-theme="dark"][data-theme-variant="neon"] .nav-cta-btn, [data-theme="dark"][data-theme-variant="neon"] .plan-btn.primary { box-shadow: 0 0 18px rgba(255,79,163,0.45), 0 0 36px rgba(200,126,255,0.22); } /* ── ANNOUNCEMENT BANNER ── */ .ann-banner { background: linear-gradient(135deg, var(--accent) 0%, #FF9AC6 100%); color: #fff; text-align: center; padding: 10px 48px 10px 20px; font-size: 13px; font-weight: 500; font-family: var(--sans); position: relative; z-index: 1000; animation: annSlide 0.4s var(--ease); } @keyframes annSlide { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ann-text { display: inline; } .ann-cta { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; margin-left: 8px; transition: opacity 0.2s; } .ann-cta:hover { opacity: 0.8; } .ann-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.7); font-size: 20px; cursor: pointer; padding: 4px 8px; line-height: 1; transition: color 0.2s; } .ann-close:hover { color: #fff; } /* ── NAVIGATION ── */ .tool-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 56px; border-bottom: 1px solid var(--border); background: rgba(255,248,245,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 100; flex-shrink: 0; } [data-theme="dark"] .tool-nav { background: var(--nav-bg); } .nav-logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; transition: transform 0.2s var(--ease); } .nav-logo:hover { transform: scale(1.03); } .nav-logo:hover .nav-logo-mark { animation: logoWiggle 0.4s var(--ease); } @keyframes logoWiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } } .nav-logo-mark { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; font-size: 22px; line-height: 1; transition: transform 0.2s var(--ease); } .nav-logo-text { font-family: var(--heading); font-weight: 700; font-size: 15px; letter-spacing: -0.2px; } .nav-right { display: flex; align-items: center; gap: 6px; } .nav-tools-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--text-dim); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-family: var(--sans); transition: all 0.2s; } .nav-tools-btn:hover { color: var(--text); border-color: var(--border-hover); background: var(--surface); } .nav-tools-btn svg { opacity: 0.6; } .nav-tools-btn kbd { display: inline-block; font-family: var(--mono, monospace); font-size: 11px; font-weight: 600; line-height: 1; padding: 2px 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text-dim); margin-left: 2px; } a.nav-cta-btn, a.nav-cta-btn:hover, a.nav-cta-btn:visited { display: flex; align-items: center; gap: 6px; padding: 7px 16px; font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; font-family: var(--sans); transition: all 0.2s; } a.nav-cta-btn:hover { background: var(--accent-dim); color: #fff; box-shadow: 0 4px 16px rgba(255,126,179,0.25); transform: translateY(-1px); } /* ── NAV USER MENU ── */ .nav-user-menu { position: relative; } .nav-user-btn { display: flex; align-items: center; gap: 2px; padding: 7px 14px; font-size: 13px; font-weight: 500; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-dim); font-family: var(--sans); transition: all 0.2s; } .nav-user-btn:hover { border-color: var(--border-hover); color: var(--text); } .nav-user-drop { display: none; position: absolute; top: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.08); min-width: 160px; z-index: 200; overflow: hidden; } .nav-user-drop.open { display: block; } .nav-user-drop a, .nav-user-drop button { display: block; width: 100%; padding: 10px 16px; font-size: 13px; color: var(--text-dim); text-align: left; border: none; background: none; cursor: pointer; font-family: var(--sans); text-decoration: none; transition: background 0.15s; } .nav-user-drop a:hover, .nav-user-drop button:hover { background: var(--surface-2); color: var(--text); } .nav-user-drop button:last-child { color: var(--danger, #EF4444); border-top: 1px solid var(--border); } .nav-user-drop button:last-child:hover { background: rgba(239,68,68,0.06); } /* ── Command Palette (Raycast-style, replaces mega menu) ── */ .mega-overlay { position:fixed; inset:0; background:rgba(45,27,20,0.35); backdrop-filter:blur(6px); z-index:200; opacity:0; visibility:hidden; transition:opacity 0.2s,visibility 0.2s; display:flex; align-items:flex-start; justify-content:center; padding-top:min(20vh, 160px); } .mega-overlay.open { opacity:1; visibility:visible; } [data-theme="dark"] .mega-overlay { background:rgba(0,0,0,0.5); } .mega-panel { width:520px; max-width:calc(100vw - 32px); max-height:min(480px, 60vh); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 24px 80px rgba(45,27,20,0.15), 0 0 0 1px rgba(255,126,179,0.05); display:flex; flex-direction:column; transform:translateY(12px) scale(0.97); opacity:0; transition:transform 0.2s var(--ease), opacity 0.2s; overflow:hidden; } .mega-overlay.open .mega-panel { transform:translateY(0) scale(1); opacity:1; } .mega-header { display:none; } .mega-close { display:none; } .mega-search { padding:0; border-bottom:1px solid var(--border); flex-shrink:0; position:relative; } .mega-search input { width:100%; padding:16px 20px 16px 48px; background:transparent; border:none; color:var(--text); font-size:15px; font-family:var(--sans); outline:none; } .mega-search input::placeholder { color:var(--text-muted); } .mega-search::before { content:''; position:absolute; left:18px; top:50%; transform:translateY(-50%); width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239C8179' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center; } .mega-body { flex:1; overflow-y:auto; padding:4px 0; } .mega-category { padding:0 6px; } .mega-cat-title { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); padding:10px 10px 4px; } .mega-item { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--radius-sm); text-decoration:none; color:var(--text); transition:all 0.1s; cursor:pointer; } .mega-item:hover, .mega-item.kb-active { background:var(--accent-bg); } .mega-item:hover .mega-item-name, .mega-item.kb-active .mega-item-name { color:var(--accent-light); } .mega-item-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border-radius:8px; font-size:15px; flex-shrink:0; } .mega-item:hover .mega-item-icon, .mega-item.kb-active .mega-item-icon { background:rgba(255,126,179,0.12); } .mega-item-text { flex:1; min-width:0; } .mega-item-name { font-size:13px; font-weight:600; transition:color 0.1s; } .mega-item-desc { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mega-item-cat { font-size:10px; color:var(--text-muted); flex-shrink:0; font-weight:500; } /* Palette footer hint */ .mega-footer { padding:8px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-shrink:0; } .mega-footer kbd { font-family:var(--mono); font-size:10px; padding:2px 5px; background:var(--surface-2); border:1px solid var(--border); border-radius:3px; color:var(--text-muted); } .mega-footer span { font-size:10px; color:var(--text-muted); } /* No-results */ .mega-no-results { padding:32px 20px; text-align:center; color:var(--text-muted); font-size:13px; display:none; } /* FAB removed — Ctrl+K shortcut retained */ @media (max-width:768px) { .mega-panel { max-width:100vw; border-radius:var(--radius-sm); } } /* ── Theme Toggle ── */ .theme-toggle { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border); border-radius:50%; color:var(--text-dim); cursor:pointer; transition:all 0.3s var(--ease); flex-shrink:0; } .theme-toggle:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-bg,rgba(255,126,179,0.06)); transform:rotate(20deg); } .theme-toggle .icon-sun, .theme-toggle .icon-moon { transition:opacity 0.2s,transform 0.3s; } .theme-toggle .icon-moon { display:none; } [data-theme="dark"] .theme-toggle .icon-sun { display:none; } [data-theme="dark"] .theme-toggle .icon-moon { display:block; } /* ── Accessibility: respect user's reduced-motion preference (WCAG 2.3.3, 2.2.2) ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } }