:root { --paper: #E7E4DA; --paper-raised: #F4F1E8; --ink: #232C33; --ink-soft: #5B6570; --line: #CFC9B8; --a: #2D6A4F; /* Walter */ --b: #1B1B1B; /* Estelle */ --us: #C25E86; /* shared moments */ --danger: #A8452F; /* Whoever is logged in tints the chrome: the top bar, the primary button, the marker on today. Set from JS as [data-user] on . The neutral ink below is what the login screen uses, before we know who it is. */ --accent: var(--ink); --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace; --radius: 6px; } [data-user="a"] { --accent: var(--a); } [data-user="b"] { --accent: var(--b); } * { box-sizing: border-box; } /* Every screen, drawer and modal is toggled by the [hidden] attribute (see CLAUDE.md). The browser hides those via a built-in [hidden]{display:none} rule, but ANY author rule with more specificity silently beats it - so #login-screen{display:flex} below would keep the login form on screen after a successful login, making the button look dead. One !important here means a new screen cannot re-introduce that bug by adding a display rule of its own. */ [hidden] { display: none !important; } html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--serif); } button, input, select, textarea { font-family: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1, h2, h3 { font-weight: 600; margin: 0; } /* ---------- Screens ---------- */ .screen { min-height: 100%; } /* ---------- Login ---------- */ #login-screen { display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 320px; text-align: center; display: flex; flex-direction: column; gap: 14px; } .login-card h1 { font-size: 1.7rem; font-style: italic; margin-bottom: 2px; } .login-card .tagline { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; } .login-card label { display: block; text-align: left; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); } .login-card input, .event-form input, .event-form select, .event-form textarea { width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); font-size: 1rem; } .login-card button { margin-top: 6px; padding: 12px; border: none; border-radius: var(--radius); background: var(--us); color: var(--paper-raised); font-family: var(--mono); font-size: 0.95rem; cursor: pointer; } /* ---------- Top bar ---------- */ .topbar { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--accent); color: var(--paper); position: sticky; top: 0; z-index: 5; } .topbar .brand { flex: 1; font-size: 1.05rem; font-style: italic; } .nav-btn, .add-btn, .logout-btn, .plain-btn { font-family: var(--mono); border: 1px solid rgba(231, 228, 218, 0.35); background: transparent; color: inherit; border-radius: var(--radius); padding: 6px 10px; font-size: 0.9rem; cursor: pointer; } .topbar .logout-btn { font-size: 0.75rem; opacity: 0.8; } /* ---------- Section switcher (Calendar / Our Moments) ---------- */ .sectionbar { display: flex; gap: 4px; flex: 1; justify-content: center; } .sectionbar button { font-family: var(--mono); font-size: 0.78rem; padding: 5px 10px; background: transparent; color: var(--paper); border: none; border-bottom: 2px solid transparent; cursor: pointer; opacity: 0.7; } .sectionbar button[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--paper); } /* ---------- Moments bar on the calendar ---------- */ .moment-bar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; background: var(--paper-raised); border: none; border-bottom: 1px solid var(--line); font: inherit; font-size: 0.9rem; text-align: left; color: var(--ink); cursor: pointer; } .moment-bar-icon { font-size: 1.1rem; line-height: 1; flex: none; } .moment-bar-text { flex: 1; } /* The text swaps every few seconds. A short crossfade is the exception to the no-fade-ins rule in CLAUDE.md: text that changes underneath you with no transition reads as a glitch rather than a rotation. */ .moment-bar-text.swapping { opacity: 0; } .moment-bar-text { transition: opacity 0.18s ease-out; } /* One dot per moment in the rotation, so it is obvious there is more than one and roughly where you are in the cycle. */ .moment-bar-dots { display: flex; gap: 4px; flex: none; } .moment-bar-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--line); display: block; } .moment-bar-dots i.on { background: var(--accent); } @media (prefers-reduced-motion: reduce) { .moment-bar-text { transition: none; } } /* ---------- Our Moments section ---------- */ .moments-head { display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px; } .moments-head h2 { flex: 1; font-size: 1.15rem; font-style: italic; } .moments-head .add-btn { background: var(--accent); color: var(--paper); border-color: var(--accent); } .moments-intro { margin: 0; padding: 0 14px 12px; font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); } .moment-card { border-top: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 8px; } .moment-card-head { display: flex; align-items: baseline; gap: 8px; } .moment-card-icon { font-size: 1.2rem; line-height: 1; flex: none; } .moment-card-name { flex: 1; font-size: 1.05rem; } .moment-card-freq { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft); text-transform: lowercase; flex: none; } .moment-line { font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); margin: 0; } .moment-card.is-done .moment-line { color: var(--a); } /* Six dots: the recent history of this moment. Filled means it happened. */ .moment-history { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft); } .moment-history i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); display: block; flex: none; } .moment-history i.done { background: var(--accent); border-color: var(--accent); } .moment-history i.before-start { opacity: 0.3; border-style: dotted; } .moment-actions { display: flex; gap: 8px; flex-wrap: wrap; } .moment-actions button { font-family: var(--mono); font-size: 0.78rem; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); cursor: pointer; } .moment-actions .primary { background: var(--accent); border-color: var(--accent); color: var(--paper); } .moment-actions .quiet { color: var(--ink-soft); } /* ---------- Celebration ---------- */ .celebrate { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(35, 44, 51, 0.4); padding: 24px; } .celebrate-card { position: relative; background: var(--paper-raised); border-radius: var(--radius); padding: 28px 24px 20px; max-width: 340px; width: 100%; text-align: center; overflow: hidden; } .celebrate-text { font-size: 1.15rem; line-height: 1.45; margin: 0 0 18px; } .celebrate-card button { font-family: var(--mono); font-size: 0.85rem; padding: 10px 20px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--paper); cursor: pointer; } /* Confetti: a handful of spans thrown outward. Pure CSS, no library, and it removes itself when the card closes. */ .confetti { position: absolute; inset: 0; pointer-events: none; } .confetti span { position: absolute; top: 40%; left: 50%; font-size: 1rem; animation: confetti-fly 1100ms ease-out forwards; } @keyframes confetti-fly { from { transform: translate(0, 0) rotate(0deg); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .confetti { display: none; } } /* ---------- View switcher ---------- */ .viewbar { display: flex; background: var(--accent); padding: 0 12px 10px; } .viewbar button { flex: 1; font-family: var(--mono); font-size: 0.78rem; padding: 7px 4px; background: transparent; color: var(--paper); border: 1px solid rgba(231, 228, 218, 0.3); border-right: none; cursor: pointer; opacity: 0.75; } .viewbar button:first-child { border-radius: var(--radius) 0 0 var(--radius); } .viewbar button:last-child { border-right: 1px solid rgba(231, 228, 218, 0.3); border-radius: 0 var(--radius) var(--radius) 0; } .viewbar button[aria-pressed="true"] { background: var(--paper); color: var(--accent); opacity: 1; } /* ---------- Period bar: prev / label / next / add ---------- */ .periodbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .periodbar h2 { flex: 1; text-align: center; font-size: 1rem; font-style: italic; } .periodbar .nav-btn, .periodbar .plain-btn { border-color: var(--line); color: var(--ink); } .periodbar .add-btn { background: var(--accent); color: var(--paper); border-color: var(--accent); } /* ---------- Weekday header ---------- */ .weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); text-align: center; padding: 8px 0 4px; border-bottom: 1px solid var(--line); } /* ---------- Month grid ---------- */ .grid { display: grid; grid-template-columns: repeat(7, 1fr); } .day-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 76px; padding: 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; background: none; text-align: left; font: inherit; overflow: hidden; } .grid .day-cell:nth-child(7n) { border-right: none; } .day-cell.other-month { color: var(--ink-soft); opacity: 0.45; } .day-cell .date-num { font-family: var(--mono); font-size: 0.75rem; } .day-cell.today .date-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--paper); } .chip { font-size: 0.68rem; padding: 1px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--paper-raised); } .chip.owner-a { background: var(--a); } .chip.owner-b { background: var(--b); } .chip.owner-us { background: var(--us); } /* A repeating occurrence gets a hairline edge rather than a second colour: the colour already means "whose", and overloading it breaks the legend. */ .chip.repeats { box-shadow: inset 2px 0 0 rgba(244, 241, 232, 0.8); } /* A planned moment is still an event, but a different kind of one: a dashed ring marks it without spending a colour, since colour already means whose. */ .chip.is-moment { outline: 1px dashed rgba(244, 241, 232, 0.85); outline-offset: -3px; } .chip-more { font-family: var(--mono); font-size: 0.65rem; color: var(--ink-soft); } /* ---------- Week view ---------- */ /* Stacked day by day on a phone, seven columns once there is room. */ .week-list { display: flex; flex-direction: column; } .week-day { border-bottom: 1px solid var(--line); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; background: none; text-align: left; font: inherit; width: 100%; } .week-day-head { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; } .week-day.today .week-day-head { color: var(--accent); font-weight: 700; } /* ---------- Day view ---------- */ .day-view { padding: 8px 16px 24px; } .day-view .event-list { gap: 0; } /* ---------- Year view ---------- */ .year-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 14px; } .mini-month { background: none; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer; } .mini-month h3 { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 4px; } .mini-month.current-month h3 { color: var(--accent); font-weight: 700; } .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .mini-day { font-family: var(--mono); font-size: 0.58rem; text-align: center; padding: 2px 0; border-radius: 2px; color: var(--ink-soft); } .mini-day.blank { visibility: hidden; } .mini-day.has-events { background: var(--accent); color: var(--paper); } .mini-day.today { outline: 1px solid var(--accent); font-weight: 700; } /* ---------- Legend ---------- */ .legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; padding: 14px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dot.owner-a { background: var(--a); } .dot.owner-b { background: var(--b); } .dot.owner-us { background: var(--us); } /* ---------- Backdrop ---------- */ .backdrop { position: fixed; inset: 0; background: rgba(35, 44, 51, 0.35); z-index: 10; } /* ---------- Drawer and form: a bottom sheet on a phone ---------- */ .drawer, .event-form { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; background: var(--paper-raised); border-radius: 16px 16px 0 0; z-index: 11; overflow-y: auto; } .drawer { padding: 8px 20px 20px; max-height: 70vh; } .event-form { padding: 20px; max-height: 85vh; z-index: 12; display: flex; flex-direction: column; gap: 12px; } /* The one deliberate motion in the app: the sheet slides up from the edge it is anchored to. */ @keyframes slide-up { from { transform: translateY(12%); } to { transform: translateY(0); } } .drawer:not([hidden]), .event-form:not([hidden]) { animation: slide-up 0.22s ease-out; } @media (prefers-reduced-motion: reduce) { .drawer:not([hidden]), .event-form:not([hidden]) { animation: none; } } .drawer-handle { width: 36px; height: 4px; background: var(--line); border-radius: 2px; margin: 6px auto 14px; } .drawer h2 { font-size: 1.1rem; margin-bottom: 10px; } .event-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .event-row { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; } .event-row .event-main { display: flex; align-items: baseline; gap: 8px; } /* Notes are something a person wrote, so they stay in the serif face, indented to line up under the title past the time column. */ .event-row .event-notes { margin: 0 0 0 76px; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); white-space: pre-wrap; } .event-row .time { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); min-width: 68px; flex: none; } .event-row .title { flex: 1; } .event-row .repeat-mark { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-soft); flex: none; } .event-row .badge { font-family: var(--mono); font-size: 0.65rem; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--paper-raised); flex: none; } .event-row .badge.owner-a { background: var(--a); } .event-row .badge.owner-b { background: var(--b); } .event-row .badge.owner-us { background: var(--us); } .empty-note { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); } /* ---------- Event form ---------- */ .event-form label { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); } .event-form .hint { opacity: 0.7; } .event-form .row { display: flex; gap: 10px; } .event-form .row label { flex: 1; } .checkbox-label { display: flex; align-items: center; gap: 8px; } .checkbox-label input { width: auto; margin: 0; } /* ---------- Icon picker ---------- */ /* Scrolls rather than growing without limit: the list only gets longer as icons are added, and the form still has to fit on a phone screen. */ .icon-picker { display: flex; flex-wrap: wrap; gap: 4px; max-height: 132px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .icon-picker button { font-size: 1.15rem; line-height: 1; width: 36px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius); background: transparent; cursor: pointer; padding: 0; } .icon-picker button[aria-pressed="true"] { border-color: var(--accent); background: var(--paper-raised); } /* "None" and "+" are interface chrome, not content, so they take the mono face rather than sitting at emoji size. */ .icon-picker button.icon-none, .icon-picker button.icon-more { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); border-color: var(--line); width: auto; padding: 0 8px; } .icon-add { display: flex; gap: 6px; margin-top: 8px; } .icon-add input { margin-top: 0; } .icon-add #new-icon-emoji { width: 68px; flex: none; text-align: center; font-size: 1.1rem; } .icon-add #new-icon-label { flex: 1; } .icon-add button { font-family: var(--mono); font-size: 0.75rem; padding: 0 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--paper); cursor: pointer; } /* An icon on a chip or a row: sized to sit with the text, never so large it competes with the title. */ .chip .chip-icon { font-style: normal; } .event-row .event-icon { font-size: 0.95rem; line-height: 1; flex: none; } .field-label { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 6px; } #weekly-options, #monthly-options { display: flex; flex-direction: column; gap: 10px; } /* Weekday and day-of-month pickers. Toggle buttons rather than a multi-select: on a phone a native multi-select is close to unusable, and seven or thirty-one small targets fit fine. */ .day-toggles { display: flex; flex-wrap: wrap; gap: 4px; } .day-toggles button { font-family: var(--mono); font-size: 0.72rem; padding: 6px 8px; min-width: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink-soft); cursor: pointer; } .day-toggles button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); } .day-toggles.month-days button { min-width: 30px; padding: 5px 4px; font-size: 0.68rem; } /* Plain-English readback of whatever the pickers add up to, so a rule like "the last Friday, until December" can be checked at a glance. */ .rule-summary { font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; color: var(--ink); margin: 0; padding: 8px 10px; background: var(--paper); border-left: 2px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; } .repeat-note { font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; color: var(--ink-soft); margin: 0; padding: 8px 10px; border-left: 2px solid var(--line); } .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .form-actions button { font-family: var(--mono); padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); cursor: pointer; } .form-actions button[type="submit"] { background: var(--accent); color: var(--paper); border-color: var(--accent); } .form-actions .danger { margin-right: auto; border-color: var(--danger); color: var(--danger); background: transparent; } .error { font-family: var(--mono); font-size: 0.8rem; color: var(--danger); } /* ---------- Wider screens ---------- */ /* This is a website you open at a URL before it is anything you install, so a desktop browser is a first-class case: the calendar sits in a centered column, and the two sheets stop being bottom-anchored phone drawers and become centered dialogs. */ @media (min-width: 620px) { #app-screen { max-width: 920px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; } .day-cell { min-height: 96px; } .week-list { display: grid; grid-template-columns: repeat(7, 1fr); } .week-day { border-right: 1px solid var(--line); min-height: 200px; padding: 8px 6px; } .week-list .week-day:nth-child(7n) { border-right: none; } .year-grid { grid-template-columns: repeat(4, 1fr); } .drawer, .event-form { top: 50%; bottom: auto; transform: translateY(-50%); border-radius: var(--radius); max-height: 84vh; } /* Re-stated inside the query so the centered dialog animates from its own resting position instead of jumping to translateY(0). */ @keyframes slide-up { from { transform: translateY(-46%); } to { transform: translateY(-50%); } } .drawer-handle { display: none; } }