/* ============================================================ JKWeb — themes.css One token set per app. The attribute selects the palette + background treatment for a whole page. Palettes are lifted directly from each app's own Theme file. ============================================================ */ /* ---------------- HOME · neutral hub ---------------- */ :root, [data-theme="home"] { --bg-base: #0c0d10; --text-strong: #f3f5f8; --text: #c9ced6; --text-dim: #8b93a0; --text-faint: #5c6371; --accent: #9fb2c2; --accent-2: #E4C579; --on-accent: #0c0d10; --accent-glow: rgba(159,178,194,.5); --hairline: rgba(255,255,255,.10); --surface-soft: rgba(255,255,255,.05); --nav-bg: rgba(12,13,16,.6); --glass-bg: rgba(255,255,255,.05); --glass-stroke: rgba(255,255,255,.12); --glass-highlight: rgba(255,255,255,.5); --glass-sheen: rgba(255,255,255,.14); --glass-rim: rgba(255,255,255,.22); --glass-inner: rgba(0,0,0,.12); --glass-shadow: 0 30px 64px -30px rgba(0,0,0,.72); --glass-blend: screen; --glass-solid: #16181d; --input-bg: rgba(255,255,255,.04); --input-bg-focus: rgba(255,255,255,.07); --danger: #ca5b4f; --focus: #9fb2c2; } [data-theme="home"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(60% 50% at 18% 8%, rgba(159,178,194,.16), transparent 60%), radial-gradient(55% 45% at 85% 12%, rgba(199,154,75,.14), transparent 60%), radial-gradient(70% 60% at 60% 100%, rgba(201,55,44,.12), transparent 60%), linear-gradient(180deg, #0d0f13, #08090b); } [data-theme="home"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 44px 44px; } /* ---------------- JK METRONOME · precision black glass ---------------- */ [data-theme="jkmetronome"] { --bg-base: #0E0F12; --text-strong: #EDF1F5; --text: #C4CCD4; --text-dim: #8A94A0; --text-faint: #59626e; --accent: #9FB2C2; --accent-2: #B4C5D1; --on-accent: #0b0c0f; --accent-glow: rgba(159,178,194,.45); --hairline: rgba(180,197,209,.12); --surface-soft: rgba(180,197,209,.06); --nav-bg: rgba(10,11,14,.62); --glass-bg: rgba(22,26,32,.44); --glass-stroke: rgba(180,197,209,.16); --glass-highlight: rgba(180,197,209,.42); --glass-sheen: rgba(200,215,225,.12); --glass-rim: rgba(220,232,240,.25); --glass-inner: rgba(0,0,0,.16); --glass-shadow: 0 34px 72px -30px rgba(0,0,0,.82); --glass-blend: screen; --glass-solid: #16181C; --input-bg: rgba(180,197,209,.05); --input-bg-focus: rgba(180,197,209,.08); --danger: #CA5B4F; --focus: #B4C5D1; } [data-theme="jkmetronome"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(70% 55% at 50% -8%, rgba(180,197,209,.16), transparent 60%), linear-gradient(180deg, #16181C 0%, #0E0F12 46%, #080809 100%); } [data-theme="jkmetronome"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0 55px, rgba(180,197,209,.035) 55px 56px), repeating-linear-gradient(0deg, transparent 0 55px, rgba(180,197,209,.02) 55px 56px); mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 82%); -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 82%); } /* ---------------- FRETMASTER · vintage tube amp ---------------- */ [data-theme="fretmaster"] { --bg-base: #14100B; --text-strong: #F3ECDC; --text: #D6C9AE; --text-dim: #9A8C74; --text-faint: #6d6350; --accent: #C79A4B; --accent-2: #E4C579; --on-accent: #1a1207; --accent-glow: rgba(199,154,75,.5); --hairline: rgba(199,154,75,.20); --surface-soft: rgba(199,154,75,.08); --nav-bg: rgba(15,11,7,.66); --glass-bg: rgba(36,27,18,.5); --glass-stroke: rgba(199,154,75,.24); --glass-highlight: rgba(228,197,121,.34); --glass-sheen: rgba(240,220,160,.12); --glass-rim: rgba(240,220,170,.22); --glass-inner: rgba(0,0,0,.24); --glass-shadow: 0 34px 72px -28px rgba(0,0,0,.86); --glass-blend: screen; --glass-solid: #241B12; --input-bg: rgba(199,154,75,.06); --input-bg-focus: rgba(199,154,75,.10); --danger: #D8624B; --focus: #E4C579; } [data-theme="fretmaster"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(120% 78% at 50% 6%, #241A11, #14100B 52%, #0c0a06 100%); } /* tweed grille cloth: fine warm crosshatch + vignette */ [data-theme="fretmaster"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: repeating-linear-gradient(45deg, rgba(199,154,75,.05) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 2px, transparent 2px 5px); background-size: 7px 7px, 7px 7px; mask-image: radial-gradient(130% 100% at 50% 40%, #000 35%, transparent 90%); -webkit-mask-image: radial-gradient(130% 100% at 50% 40%, #000 35%, transparent 90%); } /* ---------------- JAMKIN 吉伴 · manuscript paper ---------------- */ [data-theme="jamkin"] { --bg-base: #FBF8F0; --text-strong: #26221B; --text: #4a4438; --text-dim: #8A8171; --text-faint: #A69C84; --accent: #C9372C; --accent-2: #8A8171; --on-accent: #FBF8F0; --accent-glow: rgba(201,55,44,.32); --hairline: rgba(38,34,27,.14); --surface-soft: rgba(38,34,27,.045); --nav-bg: rgba(251,248,240,.72); --glass-bg: rgba(255,254,249,.55); --glass-stroke: rgba(38,34,27,.14); --glass-highlight: rgba(255,255,255,.85); --glass-sheen: rgba(255,255,255,.5); --glass-rim: rgba(255,255,255,.85); --glass-inner: rgba(38,34,27,.035); --glass-shadow: 0 26px 56px -28px rgba(56,48,33,.34); --glass-blend: normal; --glass-solid: #FFFEF9; --input-bg: rgba(255,255,255,.6); --input-bg-focus: #ffffff; --danger: #C9372C; --focus: #C9372C; } [data-theme="jamkin"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(80% 60% at 80% -5%, rgba(201,55,44,.06), transparent 55%), linear-gradient(180deg, #FFFDF7, #FBF8F0 40%, #F5F0E4 100%); } /* faint staff lines + notebook margin rule */ [data-theme="jamkin"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient(0deg, transparent 0 13px, rgba(38,34,27,.05) 13px 14px, transparent 14px 40px), linear-gradient(90deg, transparent 0 68px, rgba(201,55,44,.16) 68px 69px, transparent 69px); background-size: auto, auto; opacity: .8; mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 100%); } /* ---------------- Home app-card art (mini theme swatches) ---------------- */ .art-metro { background: radial-gradient(80% 90% at 50% -20%, rgba(180,197,209,.35), transparent 60%), linear-gradient(180deg,#16181C,#0b0c0f); } .art-metro::after { content:"120"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:58px; font-weight:600; letter-spacing:-.04em; color:rgba(237,241,245,.9); } .art-fret { background: radial-gradient(90% 90% at 50% 0%, #2a1e12, #120d07); } .art-fret::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, rgba(199,154,75,.08) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(232,220,192,.16) 0 1px, transparent 1px 26px); } .art-jam { background: linear-gradient(180deg,#fffdf7,#f3ecdb); } .art-jam::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent 0 11px, rgba(38,34,27,.12) 11px 12px, transparent 12px 34px); } .art-jam .chip { position:absolute; top:22px; left:22px; font-family:var(--font-serif); font-style:italic; font-size:40px; color:#26221B; } .art-jam .chip::after { content:""; position:absolute; inset:-8px -12px; border:2px solid #C9372C; border-radius:50%; transform:rotate(-8deg); }