/* ============================================================ pluto-style.css — shared visual system for Pluto-branded widgets ============================================================ Link this file from any new widget's to automatically match this widget's look: 4 switchable themes, Open Sans (thin, spaced-out) typography, and a small set of reusable card/button/meter components. See STYLE-GUIDE.md (in this same repo) for a plain-language rundown of the design tokens and copy-paste snippets for each component. Required alongside this file, in every widget's : And set a theme on , e.g.: ============================================================ */ :root{ --radius: 16px; --radius-sm: 10px; --gap: 14px; } /* ===== THEME: space (default) ===== */ [data-theme="space"]{ --bg-0:#0a0713; --bg-1:#140b28; --bg-2:#1d1038; --card:#150c2a; --card-border:#3a2664; --text-hi:#f3ecff; --text-lo:#b6a4dd; --text-faint:#7a6aa3; --accent:#c084fc; --accent-2:#67e8f9; --font-display: 'Open Sans', sans-serif; --font-body: 'Open Sans', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; } /* ===== THEME: dashboard (minimalist dark) ===== */ [data-theme="dashboard"]{ --bg-0:#0d0f12; --bg-1:#14171b; --bg-2:#181c21; --card:#15181d; --card-border:#2a2f36; --text-hi:#eef1f4; --text-lo:#9aa4af; --text-faint:#5d6670; --accent:#7dd3fc; --accent-2:#94a3b8; --font-display: 'Open Sans', sans-serif; --font-body: 'Open Sans', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; } /* ===== THEME: celestial (navy & gold) ===== */ [data-theme="celestial"]{ --bg-0:#0b1024; --bg-1:#0f1730; --bg-2:#131d3d; --card:#111a36; --card-border:#3a3567; --text-hi:#fdf6e3; --text-lo:#c9b98a; --text-faint:#7d754f; --accent:#e7c368; --accent-2:#a7c4d9; --font-display: 'Open Sans', sans-serif; --font-body: 'Open Sans', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; } /* ===== THEME: synth (retro-futuristic) ===== */ [data-theme="synth"]{ --bg-0:#0a0512; --bg-1:#1a0b2e; --bg-2:#230f3f; --card:#170a29; --card-border:#5b2a8c; --text-hi:#fdf0ff; --text-lo:#e2a9ff; --text-faint:#8c5fb0; --accent:#ff5fc4; --accent-2:#38f3d0; --font-display: 'Open Sans', sans-serif; --font-body: 'Open Sans', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ min-height:100vh; background: transparent; color:var(--text-hi); font-family:var(--font-body); font-weight:300; letter-spacing:1.5px; padding:14px 12px 20px; position:relative; overflow-x:hidden; } .app{ position:relative; z-index:1; max-width:520px; margin:0 auto; background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:16px; } /* ---- header ---- */ header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; } .title-block h1{ font-family:var(--font-display); font-weight:300; font-size:clamp(24px,6vw,32px); margin:0; letter-spacing:.02em; background:linear-gradient(120deg, var(--text-hi), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; } .clock-block{ text-align:right; font-family:var(--font-mono); flex-shrink:0; cursor:pointer; padding:2px 4px; border-radius:8px; transition:.15s; } .clock-block:hover{ background:var(--bg-1); } .clock-block .time{ font-size:13px; color:var(--text-hi); font-weight:600; } .clock-block .date{ font-size:10px; color:var(--text-faint); margin-top:1px; } .header-right{ display:flex; align-items:center; gap:10px; } .header-refresh-btn{ width:44px; height:44px; border-radius:50%; flex-shrink:0; border:1px solid var(--card-border); background:var(--accent); color:var(--bg-0); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.2s; } .header-refresh-btn svg{ width:28px; height:28px; } .header-refresh-btn:hover{ filter:brightness(1.08); } .header-refresh-btn.spin svg{ animation:spin .6s linear; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ---- collapsible panels (moment + theme) ---- */ .collapsible-panel{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:12px; margin-bottom:12px; display:none; gap:12px; flex-direction:column; animation:fadeIn .25s ease; } .collapsible-panel.open{ display:flex; } @keyframes fadeIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);} } .theme-grid{ display:flex; justify-content:center; gap:14px; } .theme-swatch{ width:34px; height:34px; border-radius:50%; padding:0; cursor:pointer; background:var(--dot-color); border:2px solid transparent; transition:.2s; } .theme-swatch.active{ border-color:var(--text-hi); box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--dot-color); } .gender-toggle, .datemode-toggle{ display:flex; gap:8px; } .toggle-btn{ flex:1; padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--card-border); background:var(--bg-1); color:var(--text-lo); cursor:pointer; font-size:13px; font-weight:700; transition:.2s; letter-spacing:.03em; } .toggle-btn.active{ background:var(--accent); color:var(--bg-0); border-color:var(--accent); } input[type="datetime-local"]{ background:var(--bg-1); border:1px solid var(--card-border); color:var(--text-hi); border-radius:var(--radius-sm); padding:8px 10px; font-family:var(--font-mono); font-size:13px; width:100%; color-scheme:dark; } /* ---- meter ---- */ .meter-card{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:18px 16px 14px; margin-bottom:12px; text-align:center; position:relative; overflow:hidden; } .meter-pct{ font-family:var(--font-display); font-size:44px; font-weight:600; line-height:1; margin-bottom:2px; letter-spacing:.01em; transition:color .4s ease; } .meter-status{ font-size:12.5px; color:var(--text-lo); margin-bottom:12px; min-height:16px; } .meter-track{ position:relative; height:18px; border-radius:9px; background:var(--bg-1); border:1px solid var(--card-border); overflow:hidden; } .meter-fill{ height:100%; width:0%; border-radius:9px 0 0 9px; transition:width .8s cubic-bezier(.22,.9,.3,1), background .5s ease; position:relative; } .meter-fill::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25)); } .meter-marker{ position:absolute; top:-3px; width:2px; height:24px; background:var(--text-faint); opacity:.5; } .meter-scale{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--text-faint); margin-top:4px; font-family:var(--font-mono); } /* ---- zodiac / system card ---- */ .zodiac-card{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:12px; margin-bottom:12px; } .gender-row{ display:flex; gap:8px; margin-bottom:8px; } .gender-row .toggle-btn{ text-transform:uppercase; } .hint-box{ text-align:center; font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--accent); background:var(--bg-1); border:1px solid var(--card-border); border-radius:var(--radius-sm); padding:8px 8px; margin-bottom:10px; text-transform:uppercase; } .zodiac-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .zbtn{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--card-border); background:var(--bg-1); color:var(--text-lo); font-size:26px; line-height:1; cursor:pointer; transition:.15s; padding:0; } .zbtn:hover{ border-color:var(--accent); color:var(--text-hi); } .zbtn.active{ background:var(--accent); border-color:var(--accent); color:var(--bg-0); box-shadow:0 0 14px var(--accent); } /* ---- breakdown ---- */ .breakdown-card{ background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:10px 8px; margin-bottom:12px; } .bd-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .bd-item{ text-align:center; padding:3px 2px; border-radius:10px; border:2px solid transparent; } .bd-item.penalty{ border-color:rgba(239,68,68,.45); } .bd-item .bd-num{ font-family:var(--font-mono); font-size:14px; font-weight:700; color:var(--text-hi); } .bd-item .bd-label{ font-size:8px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.02em; margin-top:2px; } /* ---- footer ---- */ footer{ text-align:center; font-size:11.5px; color:var(--text-faint); padding-top:4px; } footer a{ color:var(--text-lo); text-decoration:none; border-bottom:1px dotted var(--text-faint); } footer a:hover{ color:var(--accent); } footer .sep{ margin:0 8px; opacity:.5; } .disclaimer-line{ font-size:10.5px; margin-top:6px; line-height:1.4; opacity:.75; } .out-of-range{ text-align:center; padding:8px; font-size:12px; color:#fca5a5; display:none; } .out-of-range.show{ display:block; } @media (max-width:380px){ .zodiac-row{ grid-template-columns:repeat(5,1fr); } }