/* ===================================================================== Fallback tokens (used only if data-theme is ever missing on — in normal operation lib/theme.php always sets one of the 10 named themes below via PHP, server-side, before first paint). ===================================================================== */ :root { --paper: #F1F4EC; --paper-raised: #FAFBF6; --card-border: #DEE5D5; --ink: #24352B; --ink-soft: #64735F; --rule: #DEE5D5; --rule-strong: #AEBBA0; --stamp: #C97B5B; --stamp-ink: #FFF7F1; --today: #5C7A79; --today-ink: #FFFFFF; --missed: #B99A4F; --missed-ink: #FFFBEE; --danger: #B0362A; --focus: #5C7A79; --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace; --radius-card: 18px; --radius-btn: 10px; --radius-badge: 6px; --radius-seg: 6px; --border-w: 1px; --seg-border-w: 1px; --shadow-card: 0 1px 2px rgba(36,53,43,.05), 0 10px 30px rgba(36,53,43,.06); --wordmark-weight: 700; --wordmark-tracking: -0.01em; --wordmark-case: none; --name-weight: 700; --label-w: 230px; color-scheme: light; } /* ===================================================================== 1. Monday.com Professional — light, colorful SaaS pills ===================================================================== */ :root[data-theme="monday"] { --paper: #F6F7FB; --paper-raised: #FFFFFF; --card-border: #E4E6EE; --ink: #1D2130; --ink-soft: #6B7086; --rule: #E4E6EE; --rule-strong: #C7CBDA; --stamp: #00C875; --stamp-ink: #FFFFFF; --today: #0086C0; --today-ink: #FFFFFF; --missed: #FDAB3D; --missed-ink: #3A2A0A; --danger: #E53E5C; --focus: #0086C0; --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Cascadia Mono", Consolas, monospace; --radius-card: 16px; --radius-btn: 10px; --radius-badge: 999px; --radius-seg: 999px; --border-w: 1px; --seg-border-w: 1.5px; --shadow-card: 0 1px 3px rgba(29,33,48,.06), 0 8px 24px rgba(29,33,48,.05); --wordmark-weight: 800; --wordmark-tracking: -0.01em; --wordmark-case: none; --name-weight: 700; color-scheme: light; } /* ===================================================================== 2. Fintech Neobank — dark, sleek balance-app ===================================================================== */ :root[data-theme="fintech"] { --paper: #0B0E14; --paper-raised: #131722; --card-border: #202636; --ink: #EDEFF4; --ink-soft: #8891A5; --rule: #202636; --rule-strong: #303952; --stamp: #24E5A0; --stamp-ink: #06231A; --today: #7C5CFC; --today-ink: #FFFFFF; --missed: #FF7A6E; --missed-ink: #2B0805; --danger: #FF5470; --focus: #7C5CFC; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Cascadia Mono", Consolas, monospace; --radius-card: 14px; --radius-btn: 8px; --radius-badge: 5px; --radius-seg: 5px; --border-w: 1px; --seg-border-w: 1px; --shadow-card: 0 16px 40px rgba(0,0,0,.5); --wordmark-weight: 700; --wordmark-tracking: -0.02em; --wordmark-case: none; --name-weight: 600; color-scheme: dark; } :root[data-theme="fintech"] .segment[data-state="poked"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--stamp) 30%, transparent); } :root[data-theme="fintech"] .goal-stats, :root[data-theme="fintech"] .stage-subtitle { font-family: var(--font-mono); } /* ===================================================================== 3. Bloomberg Terminal — dark, amber-on-black data feed ===================================================================== */ :root[data-theme="bloomberg"] { --paper: #050505; --paper-raised: #0A0A0A; --card-border: #262620; --ink: #FFB000; --ink-soft: #B98600; --rule: #262620; --rule-strong: #4A4838; --stamp: #00FF66; --stamp-ink: #00230C; --today: #FFB000; --today-ink: #050505; --missed: #FF3B30; --missed-ink: #2B0805; --danger: #FF3B30; --focus: #FFB000; --font-display: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace; --font-body: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace; --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace; --radius-card: 0px; --radius-btn: 0px; --radius-badge: 0px; --radius-seg: 0px; --border-w: 1px; --seg-border-w: 1px; --shadow-card: none; --wordmark-weight: 700; --wordmark-tracking: 0.04em; --wordmark-case: uppercase; --name-weight: 700; color-scheme: dark; } :root[data-theme="bloomberg"] .type-badge, :root[data-theme="bloomberg"] .goal-name, :root[data-theme="bloomberg"] .add-goal-btn, :root[data-theme="bloomberg"] .gp-subtitle { text-transform: uppercase; letter-spacing: .04em; } :root[data-theme="bloomberg"] .segment[data-state="today"] { animation: pulse 2.2s ease-in-out infinite, blbBlink 1.1s steps(2) infinite; } @keyframes blbBlink { 50% { opacity: .45; } } /* ===================================================================== 4. Minimal Swiss — light, monochrome, hairlines only ===================================================================== */ :root[data-theme="minimal"] { --paper: #FFFFFF; --paper-raised: #FFFFFF; --card-border: #E9E9E9; --ink: #111111; --ink-soft: #8A8A8A; --rule: #E9E9E9; --rule-strong: #CFCFCF; --stamp: #111111; --stamp-ink: #FFFFFF; --today: #111111; --today-ink: #FFFFFF; --missed: #B9B9B9; --missed-ink: #FFFFFF; --danger: #B9433A; --focus: #111111; --font-display: Helvetica, "Helvetica Neue", Arial, sans-serif; --font-body: Helvetica, "Helvetica Neue", Arial, sans-serif; --font-mono: Helvetica, "Helvetica Neue", Arial, sans-serif; --radius-card: 0px; --radius-btn: 0px; --radius-badge: 0px; --radius-seg: 0px; --border-w: 1px; --seg-border-w: 1px; --shadow-card: none; --wordmark-weight: 500; --wordmark-tracking: -0.02em; --wordmark-case: none; --name-weight: 500; color-scheme: light; } :root[data-theme="minimal"] .segment[data-state="missed"] { background: repeating-linear-gradient(135deg, var(--missed), var(--missed) 2px, #fff 2px, #fff 5px); } /* ===================================================================== 5. Fun Cartoon — light, bubbly, thick outlines, sticker energy ===================================================================== */ :root[data-theme="cartoon"] { --paper: #EAF4FF; --paper-raised: #FFFFFF; --card-border: #2B2250; --ink: #2B2250; --ink-soft: #6C63A6; --rule: #DCE9FB; --rule-strong: #2B2250; --stamp: #FF5FA2; --stamp-ink: #FFFFFF; --today: #4EA8FF; --today-ink: #FFFFFF; --missed: #FFD23F; --missed-ink: #4A3900; --danger: #FF5FA2; --focus: #4EA8FF; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: -apple-system, "Segoe UI", Roboto, sans-serif; --radius-card: 22px; --radius-btn: 14px; --radius-badge: 8px; --radius-seg: 8px; --border-w: 3px; --seg-border-w: 2.5px; --shadow-card: 6px 6px 0 #2B2250; --wordmark-weight: 900; --wordmark-tracking: 0; --wordmark-case: none; --name-weight: 800; color-scheme: light; } :root[data-theme="cartoon"] .segment { border-color: var(--card-border) !important; } :root[data-theme="cartoon"] .segment[data-state="future"] { color: transparent; } :root[data-theme="cartoon"] .segment[data-state="poked"], :root[data-theme="cartoon"] .segment[data-state="missed"] { box-shadow: 2px 2px 0 var(--card-border); } :root[data-theme="cartoon"] .add-goal-btn, :root[data-theme="cartoon"] .btn.primary { box-shadow: 3px 3px 0 var(--card-border); border-color: var(--card-border); } :root[data-theme="cartoon"] .type-badge, :root[data-theme="cartoon"] .lock-toggle, :root[data-theme="cartoon"] .row-action-btn { border-width: 2px; border-color: var(--card-border); font-weight: 700; } /* ===================================================================== 6. Developer Dark — dark, familiar code-editor dark mode ===================================================================== */ :root[data-theme="devdark"] { --paper: #0D1117; --paper-raised: #161B22; --card-border: #21262D; --ink: #E6EDF3; --ink-soft: #8B949E; --rule: #21262D; --rule-strong: #30363D; --stamp: #3FB950; --stamp-ink: #04140A; --today: #58A6FF; --today-ink: #FFFFFF; --missed: #F85149; --missed-ink: #2B0805; --danger: #F85149; --focus: #58A6FF; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", monospace; --radius-card: 8px; --radius-btn: 6px; --radius-badge: 4px; --radius-seg: 4px; --border-w: 1px; --seg-border-w: 1px; --shadow-card: none; --wordmark-weight: 700; --wordmark-tracking: -0.01em; --wordmark-case: none; --name-weight: 600; color-scheme: dark; } :root[data-theme="devdark"] .goal-stats, :root[data-theme="devdark"] .type-badge { font-family: var(--font-mono); } /* ===================================================================== 7. Zen Wellness — light, calm sage & terracotta (site default) ===================================================================== */ :root[data-theme="zen"] { --paper: #F1F4EC; --paper-raised: #FAFBF6; --card-border: #DEE5D5; --ink: #24352B; --ink-soft: #64735F; --rule: #DEE5D5; --rule-strong: #AEBBA0; --stamp: #C97B5B; --stamp-ink: #FFF7F1; --today: #5C7A79; --today-ink: #FFFFFF; --missed: #B99A4F; --missed-ink: #FFFBEE; --danger: #B0362A; --focus: #5C7A79; --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", Consolas, monospace; --radius-card: 18px; --radius-btn: 10px; --radius-badge: 6px; --radius-seg: 6px; --border-w: 1px; --seg-border-w: 1px; --shadow-card: 0 1px 2px rgba(36,53,43,.05), 0 10px 30px rgba(36,53,43,.06); --wordmark-weight: 700; --wordmark-tracking: -0.01em; --wordmark-case: none; --name-weight: 700; color-scheme: light; } /* ===================================================================== 8. Vaporwave — dark, neon retro-futurism ===================================================================== */ :root[data-theme="vaporwave"] { --paper: #1A1030; --paper-raised: #241A42; --card-border: #3D2D66; --ink: #F1E9FF; --ink-soft: #B39DDB; --rule: #3D2D66; --rule-strong: #6B4FB0; --stamp: #FF4FD8; --stamp-ink: #2A0020; --today: #4DFFEA; --today-ink: #00201C; --missed: #4DFFEA; --missed-ink: #00201C; --danger: #FF4FD8; --focus: #4DFFEA; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", Consolas, monospace; --radius-card: 12px; --radius-btn: 999px; --radius-badge: 999px; --radius-seg: 4px; --border-w: 1px; --seg-border-w: 1px; --shadow-card: 0 0 0 1px rgba(255,79,216,.15), 0 20px 50px rgba(0,0,0,.5); --wordmark-weight: 800; --wordmark-tracking: 0.06em; --wordmark-case: uppercase; --name-weight: 600; color-scheme: dark; } :root[data-theme="vaporwave"] .gp-page { background: radial-gradient(ellipse at 50% -10%, #3A2568 0%, var(--paper) 55%); } :root[data-theme="vaporwave"] .segment[data-state="poked"] { box-shadow: 0 0 10px var(--stamp), 0 0 2px var(--stamp); } :root[data-theme="vaporwave"] .segment[data-state="today"] { box-shadow: 0 0 10px var(--today); } :root[data-theme="vaporwave"] .add-goal-btn { box-shadow: 0 0 14px color-mix(in srgb, var(--stamp) 60%, transparent); } :root[data-theme="vaporwave"] .goal-name, :root[data-theme="vaporwave"] .gp-wordmark { text-shadow: 0 0 18px color-mix(in srgb, var(--stamp) 40%, transparent); } /* ===================================================================== 9. Editorial Newspaper — light, broadsheet serif, red ink ===================================================================== */ :root[data-theme="editorial"] { --paper: #F4EFE4; --paper-raised: #FAF7EF; --card-border: #D8CFB8; --ink: #1A1A1A; --ink-soft: #6B6353; --rule: #D8CFB8; --rule-strong: #B0A483; --stamp: #B32424; --stamp-ink: #FDF1E9; --today: #1A1A1A; --today-ink: #FFFFFF; --missed: #A8862E; --missed-ink: #FFFCF2; --danger: #B32424; --focus: #1A1A1A; --font-display: Georgia, "Times New Roman", serif; --font-body: Georgia, "Times New Roman", serif; --font-mono: "SF Mono", Consolas, monospace; --radius-card: 2px; --radius-btn: 2px; --radius-badge: 2px; --radius-seg: 1px; --border-w: 2px; --seg-border-w: 1px; --shadow-card: none; --wordmark-weight: 700; --wordmark-tracking: -0.01em; --wordmark-case: none; --name-weight: 700; color-scheme: light; } :root[data-theme="editorial"] .gp-masthead { border-bottom-style: double; border-bottom-width: 4px; } :root[data-theme="editorial"] .gp-subtitle { font-style: italic; letter-spacing: 0.05em; } :root[data-theme="editorial"] .type-badge, :root[data-theme="editorial"] .scope-badge { font-style: italic; } /* ===================================================================== 10. High Contrast — dark, max-contrast accessibility ===================================================================== */ :root[data-theme="highcontrast"] { --paper: #000000; --paper-raised: #000000; --card-border: #FFFFFF; --ink: #FFFFFF; --ink-soft: #FFFFFF; --rule: #FFFFFF; --rule-strong: #FFFFFF; --stamp: #FFD500; --stamp-ink: #000000; --today: #FFD500; --today-ink: #000000; --missed: #FFFFFF; --missed-ink: #000000; --danger: #FF6B6B; --focus: #FFD500; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", Consolas, monospace; --radius-card: 4px; --radius-btn: 4px; --radius-badge: 3px; --radius-seg: 2px; --border-w: 3px; --seg-border-w: 3px; --shadow-card: none; --wordmark-weight: 800; --wordmark-tracking: 0; --wordmark-case: none; --name-weight: 700; color-scheme: dark; } :root[data-theme="highcontrast"] .gp-page { font-size: 1.08rem; } :root[data-theme="highcontrast"] .segment[data-state="missed"] { background: repeating-linear-gradient(135deg, #fff, #fff 3px, #000 3px, #000 6px); } :root[data-theme="highcontrast"] .type-badge, :root[data-theme="highcontrast"] .goal-stats { font-weight: 700; } :root[data-theme="highcontrast"] .segment:focus-visible, :root[data-theme="highcontrast"] .add-goal-btn:focus-visible, :root[data-theme="highcontrast"] .btn:focus-visible { outline-width: 3px; } /* ===================================================================== Structure (shared across every theme — only the tokens above change) ===================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); } .gp-page { background: var(--paper); color: var(--ink); font-family: var(--font-body); padding: 28px 20px 60px; min-height: 100vh; } .gp-shell { max-width: 1180px; margin: 0 auto; } .gp-masthead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 2px solid var(--rule-strong); } .gp-wordmark { font-family: var(--font-display); font-weight: var(--wordmark-weight); font-size: 2.1rem; letter-spacing: var(--wordmark-tracking); text-transform: var(--wordmark-case); line-height: 1; } .gp-wordmark .w-goal { color: var(--ink); } .gp-wordmark .w-poke { color: var(--stamp); } .gp-subtitle { font-size: 0.72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.11em; margin-top: 5px; } .gp-masthead-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .gp-year-switcher { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .gp-year-btn { width: 26px; height: 26px; border: var(--border-w) solid var(--rule-strong); background: var(--paper-raised); color: var(--ink-soft); border-radius: var(--radius-badge); font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .gp-year-btn:disabled { cursor: not-allowed; opacity: .4; } .gp-year-btn:not(:disabled):hover { border-color: var(--today); color: var(--today); } .gp-year-label { font-size: 1rem; font-weight: 600; min-width: 3.2em; text-align: center; } .gp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.76rem; color: var(--ink-soft); } .gp-legend-item { display: flex; align-items: center; gap: 6px; } .gp-dot { width: 11px; height: 11px; border-radius: var(--radius-badge); display: inline-block; flex: none; } .gp-dot.d-poked { background: var(--stamp); } .gp-dot.d-missed { background: repeating-linear-gradient(135deg, var(--missed), var(--missed) 2px, color-mix(in srgb, var(--missed) 60%, transparent) 2px, color-mix(in srgb, var(--missed) 60%, transparent) 4px); } .gp-dot.d-today { background: var(--paper-raised); border: 2px solid var(--today); } .gp-dot.d-future { background: transparent; border: 1px solid var(--rule-strong); } .sound-btn, .theme-btn, .add-goal-btn, .btn { font-family: var(--font-body); cursor: pointer; border-radius: var(--radius-btn); text-decoration: none; } .sound-btn, .theme-btn { width: 30px; height: 30px; border: var(--border-w) solid var(--rule-strong); background: var(--paper-raised); font-size: .95rem; display: flex; align-items: center; justify-content: center; } .sound-btn:hover, .theme-btn:hover { border-color: var(--today); } .add-goal-btn { font-size: .8rem; font-weight: 600; padding: 7px 14px; border: var(--seg-border-w) solid var(--stamp); background: var(--stamp); color: var(--stamp-ink); display: inline-flex; align-items: center; } .add-goal-btn:hover { filter: brightness(1.06); } .add-goal-btn:disabled { opacity: .4; cursor: not-allowed; filter: none; } .gp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .gp-hint { font-size: 0.82rem; color: var(--ink-soft); margin: 0; font-style: italic; } .gp-zoom-indicator { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: .75rem; color: var(--ink-soft); } .gp-zoom-indicator[hidden] { display: none; } .gp-zoom-indicator button { font-family: var(--font-body); font-size: .7rem; padding: 3px 9px; border-radius: var(--radius-badge); border: var(--border-w) solid var(--rule-strong); background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; } .gp-zoom-indicator button:hover { border-color: var(--today); color: var(--today); } .gp-banner { background: color-mix(in srgb, var(--today) 14%, var(--paper-raised)); border: var(--border-w) solid var(--today); color: var(--ink); font-size: .82rem; padding: 9px 14px; border-radius: var(--radius-btn); margin-bottom: 14px; } .gp-banner[hidden] { display: none; } .gp-completed[hidden] { display: none; } .completed-heading { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; text-transform: var(--wordmark-case); } .completed-badge { font-size: 0.64rem; font-weight: 600; color: var(--stamp); border: var(--border-w) solid var(--stamp); border-radius: var(--radius-badge); padding: 2px 7px; } .gp-ledger-wrap { position: relative; } .gp-scroll { overflow-x: auto; overscroll-behavior-x: contain; } .zoom-wrap { width: calc(100% * var(--zoom, 1)); } .gp-minimap-row { display: flex; column-gap: 20px; margin-bottom: 8px; } .gp-minimap-row[hidden] { display: none; } .minimap-spacer { flex: 0 0 var(--label-w); } .minimap-track { flex: 1 1 auto; position: relative; height: 12px; background: var(--rule); border-radius: var(--radius-btn); cursor: pointer; } .minimap-thumb { position: absolute; top: 0; height: 100%; min-width: 18px; background: var(--today); border-radius: var(--radius-btn); cursor: grab; touch-action: none; } .minimap-thumb:active { cursor: grabbing; } /* The month ruler is its own card, separated from the goal list, but still lives inside .zoom-wrap so it stretches and pans in lockstep with every goal-card's timeline during shift+scroll zoom. (Note: true viewport- pinned sticky isn't possible here without a separate synced-scroll header, because .gp-scroll's overflow-x:auto forces overflow-y to compute as auto too per the CSS Overflow spec, which would scope position:sticky to this scroll container instead of the page.) */ .gp-ruler-bar { display: grid; grid-template-columns: var(--label-w) 1fr; column-gap: 20px; align-items: center; background: var(--paper-raised); border: var(--border-w) solid var(--card-border); border-radius: var(--radius-card); /* Extra bottom padding gives the today-flag its own band below the month labels (see .ruler-today-flag) so the two never share a row. */ padding: 10px 20px 28px; box-shadow: var(--shadow-card); margin-bottom: 14px; } .gp-rows { display: flex; flex-direction: column; gap: 14px; } .goal-card { display: grid; grid-template-columns: var(--label-w) 1fr; column-gap: 20px; align-items: stretch; background: var(--paper-raised); border: var(--border-w) solid var(--card-border); border-radius: var(--radius-card); padding: 13px 20px; box-shadow: var(--shadow-card); } .goal-card > * { min-width: 0; } .goal-card.dragging { opacity: .4; } .ruler-track { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); } .ruler-month { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } /* Sits in the ruler bar's own bottom-padding band (below the month-label row) so it never overlaps the month names — see .gp-ruler-bar padding. */ .ruler-today-flag { position: absolute; top: 100%; margin-top: 4px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; } .ruler-today-flag .flag-line { width: 2px; height: 9px; background: var(--today); } .ruler-today-flag .flag-label { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--today); background: var(--paper-raised); padding: 0 3px; margin-top: 1px; } .goal-row-inner { display: flex; align-items: center; gap: 6px; height: 100%; } .drag-handle { flex: none; width: 16px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--rule-strong); cursor: grab; font-size: .9rem; touch-action: none; border-radius: var(--radius-badge); } .drag-handle:hover { color: var(--today); background: var(--rule); } .drag-handle:active { cursor: grabbing; } .goal-label-main { display: flex; flex-direction: column; justify-content: center; gap: 5px; flex: 1 1 auto; min-width: 0; } .goal-title-row { display: flex; align-items: baseline; gap: 7px; } .goal-icon { font-size: 1.05rem; line-height: 1; } .goal-name { font-family: var(--font-display); font-size: 1.02rem; font-weight: var(--name-weight); color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goal-meta-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .type-badge { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); border: var(--border-w) solid var(--rule-strong); border-radius: var(--radius-badge); padding: 2px 6px; } .scope-badge { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; } .lock-toggle, .row-action-btn { font-size: 0.64rem; border: var(--border-w) solid var(--rule-strong); background: var(--paper); color: var(--ink-soft); border-radius: var(--radius-badge); padding: 2px 7px; cursor: pointer; font-family: var(--font-body); } .lock-toggle:hover, .row-action-btn:hover { border-color: var(--today); color: var(--today); } .lock-toggle[aria-pressed="false"] { border-color: var(--stamp); color: var(--stamp); } .row-action-btn.danger:hover { border-color: var(--danger); color: var(--danger); } .goal-stats { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.74rem; color: var(--ink-soft); } .goal-streak { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.7rem; color: var(--stamp); min-height: 1em; } @keyframes flashRow { 0%, 100% { background: transparent; } 25% { background: color-mix(in srgb, var(--stamp) 20%, transparent); } } .goal-label-main.flash { animation: flashRow 1.6s ease; border-radius: var(--radius-badge); } .goal-strip-cell { display: flex; align-items: center; position: relative; } .goal-strip { display: flex; width: 100%; } .segment-spacer { flex: 1 1 0; height: 30px; } .segment { flex: 1 1 0; position: relative; border-radius: var(--radius-seg); border: var(--seg-border-w) solid transparent; background: transparent; padding: 0; height: 30px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; } .segment:hover { filter: brightness(1.05); } .segment:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; z-index: 2; } .segment[data-state="poked"] { background: var(--stamp); color: var(--stamp-ink); border-color: var(--stamp); } .segment[data-state="missed"] { background: repeating-linear-gradient(135deg, var(--missed), var(--missed) 3px, color-mix(in srgb, var(--missed) 55%, var(--paper-raised)) 3px, color-mix(in srgb, var(--missed) 55%, var(--paper-raised)) 6px); color: var(--missed-ink); border-color: var(--missed); } .segment[data-state="today"] { background: var(--paper-raised); border-color: var(--today); border-width: calc(var(--seg-border-w) + 1px); color: var(--today); font-weight: 600; animation: pulse 2.2s ease-in-out infinite; } .segment[data-state="future"] { background: transparent; border-color: var(--rule); color: transparent; cursor: not-allowed; } .segment[data-state="inactive"] { background: repeating-linear-gradient(135deg, var(--rule), var(--rule) 2px, transparent 2px, transparent 6px); border-color: var(--rule); color: transparent; cursor: default; } .goal-strip.unlocked .segment[data-state="future"]:not(:disabled) { border-style: dashed; border-color: var(--rule-strong); cursor: pointer; opacity: .9; } .goal-strip.unlocked .segment[data-state="future"]:not(:disabled):hover { background: color-mix(in srgb, var(--stamp) 14%, transparent); } .segment.pop { animation: pop .38s cubic-bezier(.34,1.9,.4,1); } @keyframes pop { 0% { transform: scale(1); } 30% { transform: scale(.82, .78); } 62% { transform: scale(1.32); } 82% { transform: scale(.94); } 100% { transform: scale(1); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--today) 35%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--today) 0%, transparent); } } @keyframes wavePop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 75% { transform: scale(.9); } 100% { transform: scale(1); } } .segment.wave-pop { animation-name: wavePop; animation-duration: .42s; animation-timing-function: ease; animation-fill-mode: both; } .poke-ring { position: fixed; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid; border-radius: 50%; pointer-events: none; z-index: 999; animation: ringOut .5s ease-out forwards; } @keyframes ringOut { from { transform: scale(1); opacity: .9; } to { transform: scale(7); opacity: 0; } } .poke-spark { position: fixed; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; pointer-events: none; z-index: 999; animation: sparkOut .5s ease-out forwards; } @keyframes sparkOut { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .segment { transition: none; } .segment.pop, .segment.wave-pop, .segment[data-state="today"], .goal-label-main.flash { animation: none; } } /* --- magnifier lens --- */ .lens { position: absolute; bottom: 100%; margin-bottom: 8px; background: var(--paper-raised); border: var(--border-w) solid var(--rule-strong); border-radius: var(--radius-btn); box-shadow: 0 10px 26px rgba(10, 16, 10, .22); padding: 9px 10px 8px; z-index: 30; display: none; } .lens.open { display: block; } .lens.flip-below { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 8px; } .lens-date { font-family: var(--font-mono); font-size: .68rem; text-align: center; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; white-space: nowrap; } .lens-strip { display: flex; gap: 3px; } .lens-seg { width: 27px; height: 36px; flex: none; border-radius: var(--radius-badge); border: 1px solid var(--rule); background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: .62rem; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; transition: transform .1s ease; } .lens-seg[data-state="poked"] { background: var(--stamp); border-color: var(--stamp); color: var(--stamp-ink); } .lens-seg[data-state="missed"] { background: repeating-linear-gradient(135deg, var(--missed), var(--missed) 3px, color-mix(in srgb, var(--missed) 55%, var(--paper-raised)) 3px, color-mix(in srgb, var(--missed) 55%, var(--paper-raised)) 6px); color: var(--missed-ink); border-color: var(--missed); } .lens-seg[data-state="today"] { border: 2px solid var(--today); color: var(--today); font-weight: 700; } .lens-seg[data-state="future"] { border: 1px dashed var(--rule-strong); color: var(--ink-soft); opacity: .65; cursor: not-allowed; } .lens-seg[data-state="future"]:not(:disabled) { cursor: pointer; opacity: .85; } .lens-seg[data-state="inactive"] { border-color: var(--rule); color: transparent; cursor: default; opacity: .5; } .lens-seg.center { outline: 2px solid var(--focus); outline-offset: 2px; transform: scale(1.06); } .lens-seg:disabled { cursor: not-allowed; } /* --- theme picker --- */ .theme-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; background: var(--paper-raised); border: var(--border-w) solid var(--rule-strong); border-radius: var(--radius-card); box-shadow: 0 16px 40px rgba(0,0,0,.28); padding: 12px; width: 300px; } .theme-popover[hidden] { display: none; } .theme-popover-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 8px; } .theme-swatch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .theme-swatch-item { display: flex; flex-direction: column; gap: 5px; background: var(--paper); border: 2px solid var(--rule); border-radius: var(--radius-btn); padding: 7px; cursor: pointer; text-align: left; font-family: var(--font-body); } .theme-swatch-item:hover { border-color: var(--rule-strong); } .theme-swatch-item.active { border-color: var(--today); } .theme-swatch-strip { display: flex; height: 16px; border-radius: 4px; overflow: hidden; } .theme-swatch-strip span { flex: 1; } .theme-swatch-name { font-size: .68rem; font-weight: 700; color: var(--ink); } /* --- modals (add/edit goal, delete confirm) --- */ .modal-overlay { position: fixed; inset: 0; background: rgba(10, 14, 10, .45); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal-overlay[hidden] { display: none; } .modal-card { background: var(--paper-raised); border: var(--border-w) solid var(--card-border); border-radius: var(--radius-card); padding: 22px 24px 20px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); } .modal-card h2 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 16px; } .modal-field { margin-bottom: 15px; } .modal-field > label:first-child, .modal-field-label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 5px; } .modal-field input[type="text"], .modal-field input[type="date"], .modal-field select { width: 100%; font-family: var(--font-body); font-size: .92rem; padding: 8px 10px; border: var(--border-w) solid var(--rule-strong); border-radius: var(--radius-btn); background: var(--paper); color: var(--ink); } .field-hint { font-size: .72rem; color: var(--ink-soft); margin: 5px 0 0; } .icon-grid { display: flex; flex-wrap: wrap; gap: 6px; } .icon-choice { width: 34px; height: 34px; font-size: 1.05rem; border: var(--border-w) solid var(--rule-strong); background: var(--paper); border-radius: var(--radius-btn); cursor: pointer; display: flex; align-items: center; justify-content: center; } .icon-choice.selected { border-color: var(--stamp); background: color-mix(in srgb, var(--stamp) 16%, var(--paper)); } fieldset.modal-field { border: var(--border-w) solid var(--rule); border-radius: var(--radius-btn); padding: 9px 12px 4px; margin: 0 0 15px; } fieldset.modal-field legend { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 0 4px; } fieldset.modal-field label { display: flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--ink); margin: 0 0 8px; cursor: pointer; } .modal-error { color: var(--stamp); font-size: .78rem; margin: -7px 0 12px; } .modal-error[hidden] { display: none; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } .btn { font-size: .85rem; padding: 8px 16px; border-radius: var(--radius-btn); border: var(--border-w) solid var(--rule-strong); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; } .btn:hover { filter: brightness(1.05); } .btn.primary { background: var(--stamp); border-color: var(--stamp); color: var(--stamp-ink); font-weight: 600; } .btn.primary.danger { background: var(--danger); border-color: var(--danger); } /* --- anonymous / signup dialog --- */ .gp-body.is-anonymous .gp-ruler-bar, .gp-body.is-anonymous .goal-card { filter: saturate(.85); } .signup-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; pointer-events: none; } .signup-dialog { pointer-events: auto; background: var(--paper-raised); border: var(--border-w) solid var(--card-border); border-radius: var(--radius-card); padding: 28px 30px; max-width: 400px; width: 100%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .signup-eyebrow { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--stamp); font-weight: 700; margin-bottom: 8px; } .signup-dialog h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 10px; text-wrap: balance; } .signup-dialog p { font-size: .88rem; color: var(--ink-soft); margin: 0 0 18px; } .signup-form { display: flex; gap: 8px; flex-wrap: wrap; } .signup-form input[type="email"] { flex: 1 1 200px; font-family: var(--font-body); font-size: .92rem; padding: 10px 12px; border: var(--border-w) solid var(--rule-strong); border-radius: var(--radius-btn); background: var(--paper); color: var(--ink); } .signup-form .btn { flex: none; padding: 10px 18px; } .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .signup-error { color: var(--danger); font-size: .8rem; margin: 12px 0 0; } .signup-error[hidden] { display: none; } .signup-footnote { font-size: .8rem; color: var(--ink-soft); margin: 16px 0 0 !important; } .signup-footnote a, .auth-form a { color: var(--today); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --- auth pages (login / set-password) --- */ .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--paper); padding: 20px; } .auth-card { background: var(--paper-raised); border: var(--border-w) solid var(--card-border); border-radius: var(--radius-card); padding: 32px 30px; max-width: 380px; width: 100%; box-shadow: 0 12px 32px rgba(0,0,0,.16); } .auth-wordmark { font-family: var(--font-display); font-weight: var(--wordmark-weight); font-size: 1.6rem; margin-bottom: 18px; text-transform: var(--wordmark-case); } .auth-wordmark .w-goal { color: var(--ink); } .auth-wordmark .w-poke { color: var(--stamp); } .auth-card h1 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 4px; } .auth-sub { font-size: .82rem; color: var(--ink-soft); margin: 0 0 18px; } .auth-error { color: var(--danger); font-size: .82rem; background: color-mix(in srgb, var(--danger) 10%, transparent); border: var(--border-w) solid var(--danger); border-radius: var(--radius-btn); padding: 8px 12px; margin: 0 0 16px; } .auth-form { display: flex; flex-direction: column; gap: 4px; } .auth-form label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-top: 10px; } .auth-form input { font-family: var(--font-body); font-size: .95rem; padding: 9px 11px; border: var(--border-w) solid var(--rule-strong); border-radius: var(--radius-btn); background: var(--paper); color: var(--ink); } .auth-form .btn { margin-top: 18px; } .auth-footnote { font-size: .82rem; color: var(--ink-soft); margin: 18px 0 0; text-align: center; } .gp-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); background: var(--ink); color: var(--paper); font-size: .85rem; padding: 10px 18px; border-radius: var(--radius-btn); box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 500; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .gp-toast.show { opacity: 1; transform: translate(-50%, 0); } .gp-toast.error { background: var(--danger); } @media (max-width: 720px) { :root { --label-w: 132px; } .goal-stats, .goal-streak, .scope-badge { display: none; } .gp-wordmark { font-size: 1.6rem; } .signup-dialog { padding: 20px; } .theme-popover { width: 260px; right: -20px; } }