/* Optima Calendar — brand tokens lifted straight from the app: ink #0C150A, sage #90CA87, product green #4CAF50, mist #EDF0EC, hairline #E7E8E7, alert #F14646, Urbanist everywhere, radius-20 cards. */ :root { --hour-px: 56px; --ink: #0C150A; --sage: #90CA87; --green: #4CAF50; --mist: #EDF0EC; --line: #E7E8E7; --red: #F14646; --bg: #FAFAF7; --card: #FFFFFF; --tan: #D9C3A5; /* the warm event tan from the app's palette */ --tan-deep: #C9AE8C; /* Mirrors EventColorService's Optima Fresh category slots. */ --event-work: #5E9C76; --event-health: #8DC9B5; --event-food: #E8B26D; --event-social: #E39B94; --event-travel: #7FB3D5; --event-learning: #9D8FD0; --event-celebration: #E7C560; --event-personal: #A9B665; --event-google: #6B9BEA; --shadow: 0 4px 10px rgba(12, 21, 10, 0.04); } /* Theme: follows the OS by default; the in-app setting stamps data-theme="light|dark" on and must win in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #F2F4F0; --bg: #121512; --card: #1E211D; --mist: #262A25; --line: #33382F; --shadow: 0 4px 10px rgba(0, 0, 0, 0.35); } } :root[data-theme="dark"] { --ink: #F2F4F0; --bg: #121512; --card: #1E211D; --mist: #262A25; --line: #33382F; --shadow: 0 4px 10px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: 'Urbanist', -apple-system, sans-serif; background: var(--bg); color: var(--ink); } .hidden { display: none !important; } .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; } .mobile-app-prompt { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(12, 21, 10, .48); backdrop-filter: blur(7px); } .mobile-app-card { position: relative; width: min(100%, 390px); padding: 30px 24px 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--card); color: var(--ink); text-align: center; box-shadow: 0 24px 70px rgba(12, 21, 10, .28); } .mobile-app-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); font: 500 28px/36px 'Urbanist'; cursor: pointer; } .mobile-app-mark { width: 64px; height: 60px; margin: 4px auto 12px; } .mobile-app-card h2 { margin: 0 20px 8px; font: 800 25px/1.12 'Urbanist'; } .mobile-app-card p { margin: 0 auto 22px; max-width: 310px; font: 500 15px/1.42 'Urbanist'; opacity: .72; } .mobile-app-download { width: 100%; min-height: 48px; font-size: 15px; } .mobile-app-card small { display: block; margin-top: 8px; font: 500 11.5px 'Urbanist'; opacity: .52; } .mobile-app-continue { margin-top: 15px; border: 0; background: transparent; color: var(--ink); font: 700 13px 'Urbanist'; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* ---- The Optima mark ---- */ .mark { width: 72px; height: 67px; } .mark-small { width: 30px; height: 28px; flex: none; } .mark-ring { stroke: var(--ink); stroke-width: 22; fill: none; } .mark-dot { fill: var(--sage); stroke: var(--bg); stroke-width: 12; } .signin-card .mark-dot { stroke: var(--card); } /* ---- Sign-in ---- */ .signin { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; } .signin-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 48px 40px; max-width: 420px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .signin-card h1 { font-size: 26px; font-weight: 800; letter-spacing: 0.2px; } .signin-card p { font-size: 15px; line-height: 1.5; opacity: 0.72; } .signin-note { font-size: 12.5px !important; opacity: 0.5 !important; } .auth-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 18px; background: var(--mist); } .auth-tabs button { border: 0; border-radius: 15px; padding: 9px; background: transparent; color: var(--ink); font: 700 13px 'Urbanist'; cursor: pointer; } .auth-tabs button.active { background: var(--card); box-shadow: var(--shadow); } .email-auth-form { width: 100%; display: grid; gap: 10px; text-align: left; } .email-auth-form label { display: grid; gap: 5px; color: var(--ink); font: 600 12px 'Urbanist'; } .email-auth-form input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--bg); color: var(--ink); font: 500 14px 'Urbanist'; } .email-auth-form input:focus { outline: 2px solid color-mix(in srgb, var(--sage) 65%, transparent); border-color: var(--green); } .email-auth-form .btn-primary { width: 100%; margin-top: 2px; } .auth-link { border: 0; background: transparent; color: var(--green); font: 700 12.5px 'Urbanist'; cursor: pointer; } .auth-divider { width: 100%; display: flex; align-items: center; gap: 9px; color: var(--ink); opacity: .48; font: 600 11.5px 'Urbanist'; } .auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); } .provider-buttons { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .provider-btn { display: grid; justify-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 14px; padding: 9px 5px; background: var(--card); color: var(--ink); font: 600 11px 'Urbanist'; cursor: pointer; } .provider-btn:hover { border-color: var(--sage); background: var(--mist); } .provider-btn svg { width: 22px; height: 22px; display: block; } /* ---- Buttons ---- */ .btn-primary { background: var(--green); color: #fff; border: none; font: 700 15px 'Urbanist'; padding: 14px 28px; border-radius: 26px; cursor: pointer; } .btn-primary:hover { filter: brightness(1.05); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font: 600 14px 'Urbanist'; padding: 12px 22px; border-radius: 22px; cursor: pointer; } .btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); font: 600 14px 'Urbanist'; padding: 12px 22px; border-radius: 22px; cursor: pointer; } /* ---- Top bar ---- */ .app { height: 100vh; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 4px; } .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .period-title { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font: 700 20px 'Urbanist'; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .period-title .chev { width: 18px; height: 18px; opacity: 0.7; } .date-jump-popover { position: fixed; top: 62px; left: 58px; z-index: 52; width: 310px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: 0 18px 50px rgba(12,21,10,.2); } .date-jump-popover header, .date-jump-popover footer { display: flex; align-items: center; justify-content: space-between; } .date-jump-popover header { margin-bottom: 12px; } .date-jump-popover header strong { font: 800 16px 'Urbanist'; } .date-jump-popover header div { display: flex; gap: 3px; } .date-jump-popover header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 500 26px/32px 'Urbanist'; cursor: pointer; } .date-jump-popover header button:hover { background: var(--mist); } .date-jump-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px 2px; } .date-jump-calendar .mini-dow { font-size: 10.5px; } .date-jump-calendar .mini-day { width: 34px; height: 34px; font-size: 12.5px; } .date-jump-calendar .mini-day.selected:not(.today) { background: color-mix(in srgb, var(--sage) 22%, var(--card)); box-shadow: inset 0 0 0 1.5px var(--green); } .date-jump-popover footer { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); } .date-jump-popover footer button { border: 0; border-radius: 18px; padding: 8px 13px; background: transparent; color: var(--ink); font: 700 12px 'Urbanist'; cursor: pointer; } .date-jump-popover footer button:first-child { color: var(--green); } .date-jump-popover footer button:last-child { background: var(--mist); } .today-chip { background: var(--mist); color: var(--ink); border: none; cursor: pointer; font: 700 11px 'Urbanist'; letter-spacing: 0.5px; padding: 7px 12px; border-radius: 20px; } .nav-arrows button { background: none; border: none; cursor: pointer; font-size: 24px; line-height: 1; color: var(--ink); opacity: 0.65; padding: 4px 8px; } .nav-arrows button:hover { opacity: 1; } .topbar-right { display: flex; align-items: center; gap: 12px; } .view-pill { display: flex; background: var(--mist); border-radius: 22px; padding: 3px; } .view-pill button { border: none; background: transparent; cursor: pointer; font: 600 13px 'Urbanist'; color: var(--ink); opacity: 0.6; padding: 8px 16px; border-radius: 19px; } .view-pill button.active { background: var(--card); opacity: 1; box-shadow: var(--shadow); } .mobile-view-picker { display: none; position: relative; } .mobile-view-picker::after { content: '⌄'; position: absolute; right: 13px; top: 50%; transform: translateY(-56%); pointer-events: none; font-size: 17px; } .mobile-view-picker select { min-width: 112px; height: 42px; padding: 0 34px 0 14px; appearance: none; border: 1px solid var(--line); border-radius: 21px; background: var(--mist); color: var(--ink); font: 700 13px 'Urbanist'; outline: none; } .mobile-view-picker select:focus { border-color: var(--sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 22%, transparent); } .tasks-toggle { display: flex; align-items: center; gap: 6px; font: 600 13px 'Urbanist'; cursor: pointer; user-select: none; } .tasks-toggle input { accent-color: var(--green); width: 15px; height: 15px; cursor: pointer; } .btn-add { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--bg); border: none; cursor: pointer; flex: none; display: grid; place-items: center; } .btn-add svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } @media (prefers-color-scheme: dark) { .btn-add { color: #121512; } } .avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 2px solid var(--sage); padding: 0; cursor: pointer; background: var(--mist); } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .account-menu { position: fixed; top: 64px; right: 18px; z-index: 48; width: 280px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 14px 38px rgba(12,21,10,.18); } .account-identity { display: flex; align-items: center; gap: 11px; padding: 2px 2px 13px; border-bottom: 1px solid var(--line); } .account-identity > img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .account-identity div { min-width: 0; display: grid; gap: 2px; } .account-identity strong, .account-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-identity strong { font: 700 13.5px 'Urbanist'; } .account-identity span { font: 500 12px 'Urbanist'; opacity: .58; } .avatar-picker { padding: 12px 2px; border-bottom: 1px solid var(--line); } .avatar-picker > span { display: block; margin-bottom: 8px; font: 700 10.5px 'Urbanist'; letter-spacing: .5px; text-transform: uppercase; opacity: .5; } .avatar-picker > div { display: flex; gap: 9px; } .avatar-picker button { width: 42px; height: 42px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; } .avatar-picker button.selected { border-color: var(--green); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--sage); } .avatar-picker img { width: 100%; height: 100%; display: block; border-radius: 50%; } .account-action { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 5px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 650 13.5px 'Urbanist'; cursor: pointer; text-align: left; } .account-action-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .account-action:hover { background: var(--mist); } .account-logout { color: var(--red); } .calendar-search { position: fixed; top: 66px; right: 18px; z-index: 49; width: min(430px, calc(100vw - 24px)); padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: 0 14px 38px rgba(12,21,10,.18); } .calendar-search-input { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-radius: 13px; background: var(--mist); } .calendar-search-input > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: .55; } .calendar-search-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 14px 'Urbanist'; } .calendar-search-input button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); font: 500 20px/28px 'Urbanist'; cursor: pointer; } .calendar-search-results { max-height: min(480px, calc(100vh - 145px)); overflow: auto; padding-top: 8px; } .calendar-search-results > p { padding: 16px 10px; font: 500 13px/1.4 'Urbanist'; opacity: .55; text-align: center; } .calendar-search-result { width: 100%; display: grid; grid-template-columns: 12px 1fr; gap: 10px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; } .calendar-search-result:hover, .calendar-search-result:focus-visible { background: var(--mist); outline: 0; } .calendar-search-result i { width: 10px; height: 10px; margin-top: 4px; border-radius: 4px; background: var(--sage); } .calendar-search-result span { min-width: 0; display: grid; gap: 2px; } .calendar-search-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px 'Urbanist'; } .calendar-search-result small { font: 500 11.5px 'Urbanist'; opacity: .58; } .faq-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; background: rgba(12,21,10,.28); backdrop-filter: blur(3px); } .faq-panel { width: min(560px, 100%); height: 100%; display: flex; flex-direction: column; padding: 22px; background: var(--card); box-shadow: -16px 0 50px rgba(12,21,10,.18); } .faq-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 15px; } .faq-header span { font: 700 10.5px 'Urbanist'; letter-spacing: .7px; text-transform: uppercase; color: var(--green); } .faq-header h2 { margin: 3px 0 0; font: 800 23px 'Urbanist'; } .faq-search { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding: 10px 13px; border-radius: 14px; background: var(--mist); } .faq-search svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; } .faq-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 550 14px 'Urbanist'; } .faq-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-question { width: 100%; display: flex; justify-content: space-between; gap: 18px; padding: 15px 3px; border: 0; background: transparent; color: var(--ink); font: 700 14px/1.3 'Urbanist'; text-align: left; cursor: pointer; } .faq-question::after { content: '+'; flex: none; color: var(--green); font-size: 20px; line-height: .8; } .faq-item.open .faq-question::after { content: '−'; } .faq-answer { display: none; margin: -4px 28px 15px 3px; color: var(--ink); opacity: .68; font: 500 13px/1.5 'Urbanist'; } .faq-item.open .faq-answer { display: block; } .faq-empty { padding: 34px 10px; text-align: center; opacity: .55; font: 550 13px 'Urbanist'; } .faq-support { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 14px 15px; border-radius: 16px; background: color-mix(in srgb, var(--green) 10%, var(--card)); } .faq-support div { display: flex; flex-direction: column; gap: 3px; } .faq-support strong { font: 750 14px 'Urbanist'; } .faq-support span { color: var(--ink); opacity: .66; font: 500 12px/1.35 'Urbanist'; } .faq-support a { flex: none; padding: 10px 15px; border-radius: 999px; background: var(--green); color: white; text-decoration: none; font: 700 12px 'Urbanist'; } .faq-mobile-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sage) 14%, var(--card)); font: 550 11.5px/1.4 'Urbanist'; opacity: .75; } .settings-app-note { margin: 12px 0 0; padding: 10px 11px; border-radius: 11px; background: var(--mist); color: var(--ink); font: 550 11.5px/1.4 'Urbanist'; opacity: .72; } /* ---- Grid shell + collapsible desktop navigation ---- */ .calendar-workspace { flex: 1; min-height: 0; display: flex; position: relative; } .grid-root { flex: 1; min-width: 0; overflow: auto; padding: 0 16px 24px; } .calendar-sidebar { width: 248px; flex: none; padding: 12px 18px 24px; border-right: 1px solid var(--line); overflow: hidden; transition: width 180ms ease, padding 180ms ease, opacity 120ms ease; } .calendar-workspace.sidebar-collapsed .calendar-sidebar { width: 0; padding-left: 0; padding-right: 0; opacity: 0; border: 0; } .sidebar-toggle { position: absolute; left: 235px; top: 14px; z-index: 8; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; transition: left 180ms ease, transform 180ms ease; } .calendar-workspace.sidebar-collapsed .sidebar-toggle { left: 8px; transform: rotate(180deg); } .sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 14px; } .sidebar-heading strong { font-size: 15px; } .mini-nav { display: flex; gap: 2px; } .mini-nav button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink); font-size: 21px; cursor: pointer; border-radius: 50%; } .mini-nav button:hover { background: var(--mist); } .mini-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; } .mini-dow { text-align: center; font: 700 10px 'Urbanist'; opacity: .45; padding-bottom: 4px; } .mini-day { width: 27px; height: 27px; justify-self: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 600 11.5px 'Urbanist'; cursor: pointer; } .mini-day:hover { background: var(--mist); } .mini-day.dim { opacity: .3; } .mini-day.selected { box-shadow: inset 0 0 0 1.5px var(--green); } .mini-day.today { background: var(--green); color: #fff; box-shadow: none; } .calendar-key { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 11px; font: 600 12px 'Urbanist'; } .calendar-key h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .5; margin-bottom: 2px; } .calendar-key div, .calendar-key button { display: flex; align-items: center; gap: 9px; } .calendar-key button { width: 100%; border: 0; padding: 3px 5px; margin: -3px -5px; border-radius: 8px; background: transparent; color: var(--ink); font: 600 12px 'Urbanist'; cursor: pointer; text-align: left; } .calendar-key button:hover, .calendar-key button.active { background: var(--mist); } .calendar-key button span { flex: 1; } .calendar-key button em { font: 700 10.5px 'Urbanist'; opacity: 0; transition: opacity 120ms ease; } .calendar-key button:hover em, .calendar-key button.active em { opacity: .72; } .calendar-key #category-summary { font: 500 11px/1.35 'Urbanist'; opacity: .58; padding-top: 5px; } .key-dot { width: 10px; height: 10px; min-width: 10px; flex: none; border-radius: 50%; display: inline-block; } .key-work { background: var(--event-work); } .key-health { background: var(--event-health); } .key-food { background: var(--event-food); } .key-social { background: var(--event-social); } .key-travel { background: var(--event-travel); } .key-learning { background: var(--event-learning); } .key-celebration { background: var(--event-celebration); } .key-personal { background: var(--event-personal); } .key-tasks { background: var(--sage); border: 1px dashed var(--ink); } .key-google { background: var(--event-google); } .key-optima { background: var(--green); } .key-apple { background: #8E8E93; } .key-outlook { background: #4FA3D1; } /* Day-of-week header row (week + month) */ .dow-row { display: grid; gap: 1px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 0 0 4px; } .dow-cell { text-align: center; font: 600 11px 'Urbanist'; opacity: 0.55; letter-spacing: 0.6px; } .dow-cell .num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 3px; border-radius: 50%; font: 700 13px 'Urbanist'; opacity: 0.9; } .dow-cell.today .num { background: var(--green); color: #fff; } /* Time grid (day + week) */ .time-grid { display: flex; position: relative; } .gutter { width: 48px; flex: none; } .gutter .hour-label { height: var(--hour-px); font: 500 11px 'Urbanist'; opacity: 0.45; transform: translateY(-6px); text-align: right; padding-right: 8px; } .grid-cols { flex: 1; display: grid; position: relative; } .grid-col { position: relative; border-left: 1px solid var(--line); } .hour-line { height: var(--hour-px); border-bottom: 1px solid var(--line); opacity: 0.55; } .now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 4; pointer-events: none; } .now-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); } /* Event + task blocks */ .ev { position: absolute; border-radius: 10px; padding: 4px 8px; font: 600 12px 'Urbanist'; color: #fff; overflow: hidden; cursor: pointer; box-shadow: var(--shadow); } .ev .ev-time { display: block; font-weight: 500; font-size: 10.5px; opacity: 0.85; } .ev-optima { background: var(--green); color: #fff; } .ev-personal { background: var(--event-personal); color: #1E2A1B; } .ev-work { background: var(--event-work); color: #fff; } .ev-health { background: var(--event-health); color: #16352C; } .ev-food { background: var(--event-food); color: #4A3418; } .ev-social { background: var(--event-social); color: #482622; } .ev-travel { background: var(--event-travel); color: #173144; } .ev-learning { background: var(--event-learning); color: #251F43; } .ev-celebration { background: var(--event-celebration); color: #42370E; } .ev-gcal { background: var(--event-google); color: #16233B; } .ev-outlook { background: #4FA3D1; color: #102B3A; } .ev-gcal-color-1 { background: #7986CB; color: #fff; } .ev-gcal-color-2 { background: #33B679; color: #102A20; } .ev-gcal-color-3 { background: #8E24AA; color: #fff; } .ev-gcal-color-4 { background: #E67C73; color: #3D1E1B; } .ev-gcal-color-5 { background: #F6BF26; color: #3D3008; } .ev-gcal-color-6 { background: #F4511E; color: #fff; } .ev-gcal-color-7 { background: #039BE5; color: #082D42; } .ev-gcal-color-8 { background: #616161; color: #fff; } .ev-gcal-color-9 { background: #3F51B5; color: #fff; } .ev-gcal-color-10 { background: #0B8043; color: #fff; } .ev-gcal-color-11 { background: #D50000; color: #fff; } .set-row em { font: 500 11px 'Urbanist'; color: var(--green); margin-left: auto; } .ev-task { /* Single readable line on a soft sage wash — the transparent dashed pill over grid lines was unreadable at short durations. */ background: color-mix(in srgb, var(--sage) 16%, var(--card)); color: var(--ink); border: 1.4px dashed var(--sage); display: flex; align-items: center; gap: 5px; padding: 2px 6px; font-size: 11.5px; line-height: 1.2; white-space: nowrap; } .ev-task .t-title { overflow: hidden; text-overflow: ellipsis; } .ev-task .tick { flex: none; width: 10px; height: 10px; border-radius: 3px; border: 1.6px solid var(--sage); } .ev.dragging { opacity: 0.85; z-index: 10; box-shadow: 0 8px 20px rgba(12,21,10,0.25); cursor: grabbing; } /* All-day strip */ .allday-strip { display: grid; grid-auto-rows: 26px; gap: 4px 0; margin: 2px 0 6px; } .sticky-allday { position: sticky; top: 0; z-index: 4; margin: 0; padding: 5px 0 7px; background: var(--bg); border-bottom: 1px solid var(--line); } .sticky-allday.under-dow { top: 50px; } .allday-ev { min-width: 0; margin: 0 3px; border-radius: 8px; padding: 4px 8px; font: 600 11.5px 'Urbanist'; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .color-menu { position: fixed; z-index: 40; width: 244px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 14px 42px rgba(12, 21, 10, .22); } .color-menu-title { margin: 1px 2px 12px; font: 700 13px 'Urbanist'; color: var(--ink); } .color-menu-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; padding: 1px 4px 14px; } .color-swatch { width: 34px; height: 34px; justify-self: center; border: 3px solid transparent; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px rgba(12, 21, 10, .06); } .color-swatch:hover { transform: scale(1.08); } .color-swatch.selected { border-color: var(--card); outline: 2px solid var(--ink); } .color-menu-default { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; padding: 10px; background: var(--mist); color: var(--ink); font: 700 13px 'Urbanist'; cursor: pointer; } .default-ring { width: 17px; height: 17px; border: 3px solid var(--green); border-radius: 50%; } .color-menu-default.selected .default-ring { background: var(--green); box-shadow: inset 0 0 0 3px var(--mist); } /* Month view */ .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(var(--month-rows, 6), minmax(72px, 1fr)); gap: 3px; min-height: 0; } .month-cell { background: var(--card); min-height: 0; padding: 7px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .month-cell.dim { opacity: 0.45; } .month-cell .d { font: 700 12.5px 'Urbanist'; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .month-cell.today .d { background: var(--green); color: #fff; } .month-chip { margin-top: 3px; border-radius: 6px; padding: 2px 6px; font: 600 10.5px 'Urbanist'; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .month-more { font: 600 10.5px 'Urbanist'; opacity: 0.55; margin-top: 3px; } .month-span { z-index: 3; align-self: start; height: 18px; margin-left: 4px; margin-right: 4px; padding: 2px 7px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 10.5px/14px 'Urbanist'; cursor: pointer; } .create-selection { position: absolute; left: 3px; right: 3px; z-index: 6; border: 1.5px solid var(--green); border-radius: 9px; background: color-mix(in srgb, var(--sage) 35%, transparent); pointer-events: none; } /* Year view */ .year-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 14px; padding: 8px 0 18px; } .year-month { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 14px; cursor: pointer; text-align: left; transition: transform 120ms ease, border-color 120ms ease; } .year-month:hover { transform: translateY(-2px); border-color: var(--sage); box-shadow: var(--shadow); } .year-month h3 { font: 700 15px 'Urbanist'; margin-bottom: 10px; } .year-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px 2px; } .year-mini span { text-align: center; font: 600 10px 'Urbanist'; min-height: 15px; } .year-mini .head { opacity: .4; font-size: 8.5px; } .year-mini .today { width: 20px; height: 20px; line-height: 20px; justify-self: center; border-radius: 50%; background: var(--green); color: #fff; } /* Calendar item details */ .detail-backdrop { position: fixed; inset: 0; z-index: 48; padding: 24px; background: rgba(12, 21, 10, 0.26); display: flex; align-items: center; justify-content: center; } .detail-card { width: min(520px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: 0 22px 60px rgba(12,21,10,.24); animation: detail-in 160ms ease-out; } @keyframes detail-in { from { opacity: 0; transform: translateY(8px) scale(.985); } } .detail-accent { height: 8px; background: var(--event-personal); } .detail-accent.ev-task { display: block; padding: 0; border: 0; border-radius: 0; background: var(--sage); } .detail-color.ev-task { display: block; padding: 0; border: 1px dashed var(--ink); background: var(--sage); } .detail-header { display: flex; align-items: flex-start; gap: 14px; padding: 24px 24px 14px; } .detail-color { width: 14px; height: 14px; flex: none; border-radius: 5px; margin-top: 7px; background: var(--event-personal); } .detail-heading { min-width: 0; flex: 1; } .detail-heading h2 { font: 700 24px/1.2 'Urbanist'; overflow-wrap: anywhere; } .detail-heading p { margin-top: 5px; font: 500 14px/1.35 'Urbanist'; opacity: .68; } .detail-heading #detail-repeat { opacity: .52; } .detail-icon-btn { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); font-size: 25px; line-height: 1; cursor: pointer; } .detail-body { padding: 4px 24px 8px 52px; display: grid; gap: 14px; } .detail-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font: 500 14px/1.45 'Urbanist'; } .detail-row > span { font-size: 18px; opacity: .52; text-align: center; } .detail-row p { white-space: pre-wrap; overflow-wrap: anywhere; } .detail-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 18px 24px 24px; } .detail-actions .btn-primary { padding: 11px 20px; } .detail-actions .btn-ghost { padding: 10px 20px; } /* ---- Modal ---- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(12, 21, 10, 0.42); display: flex; align-items: flex-end; justify-content: center; z-index: 50; } .modal { background: var(--card); width: min(560px, 100%); border-radius: 20px 20px 0 0; padding: 10px 24px 28px; display: flex; flex-direction: column; gap: 12px; max-height: 88vh; overflow: auto; } @media (min-width: 640px) { .modal-backdrop { align-items: center; } .modal { border-radius: 24px; } } .grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 6px auto 2px; } .modal h2 { font-size: 19px; font-weight: 700; } .composer-kind { display: flex; align-self: flex-start; padding: 3px; border-radius: 20px; background: var(--mist); } .composer-kind button { border: 0; border-radius: 17px; padding: 8px 18px; background: transparent; color: var(--ink); font: 700 12.5px 'Urbanist'; cursor: pointer; } .composer-kind button.active { background: var(--card); box-shadow: var(--shadow); } .modal label { display: flex; flex-direction: column; gap: 5px; font: 600 12.5px 'Urbanist'; opacity: 0.9; } #calendar-destination-note { font: 500 10.5px/1.35 'Urbanist'; opacity: .55; margin-top: -7px; } .modal input, .modal select, .modal textarea { font: 500 14px 'Urbanist'; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; outline: none; } .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--green); } .row-2 { display: flex; gap: 10px; } .row-2 label { flex: 1; } .row-check { flex-direction: row !important; align-items: center; gap: 8px !important; } .row-check input { accent-color: var(--green); width: 16px; height: 16px; } .modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .modal-actions .spacer { flex: 1; } /* ---- Toast ---- */ .toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); font: 600 13.5px 'Urbanist'; padding: 12px 22px; border-radius: 24px; box-shadow: var(--shadow); z-index: 60; animation: toast-in 180ms ease-out; } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } } /* ---- Settings popover ---- */ .btn-icon { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; background: var(--mist); color: var(--ink); display: flex; align-items: center; justify-content: center; } .btn-icon svg { width: 20px; height: 20px; } .settings-panel { position: fixed; top: 68px; right: 22px; z-index: 45; width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 34px rgba(12, 21, 10, 0.16); padding: 14px 16px; animation: chat-in 140ms ease-out; } .settings-panel h3 { font: 700 11.5px 'Urbanist'; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.5; margin: 10px 0 6px; } .settings-panel h3:first-child { margin-top: 0; } .set-row { display: flex; align-items: center; gap: 8px; font: 600 13.5px 'Urbanist'; padding: 5px 0; cursor: pointer; } .set-row input { accent-color: var(--green); width: 15px; height: 15px; } .set-disabled { cursor: default; opacity: 0.45; justify-content: space-between; } .set-disabled em { font: 500 11px 'Urbanist'; } .theme-pill { display: flex; background: var(--mist); border-radius: 18px; padding: 3px; } .theme-pill button { flex: 1; border: none; background: transparent; cursor: pointer; font: 600 12.5px 'Urbanist'; color: var(--ink); opacity: 0.6; padding: 7px 0; border-radius: 15px; } .theme-pill button.active { background: var(--card); opacity: 1; box-shadow: var(--shadow); } .palette-select { display: grid; gap: 5px; font: 600 12px 'Urbanist'; } .palette-select select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--bg); color: var(--ink); font: 600 12.5px 'Urbanist'; } /* ---- Quick-add chat ---- */ .chat-bubble { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: var(--ink); border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(12, 21, 10, 0.25); display: flex; align-items: center; justify-content: center; transition: transform 120ms ease; } .chat-bubble:hover { transform: scale(1.06); } .chat-bubble svg { width: 32px; height: 30px; } .bubble-ring { stroke: var(--bg); stroke-width: 22; fill: none; } .bubble-dot { fill: var(--sage); stroke: var(--ink); stroke-width: 12; } .chat-panel { position: fixed; right: 22px; bottom: 94px; z-index: 41; width: min(360px, calc(100vw - 44px)); background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 34px rgba(12, 21, 10, 0.18); display: flex; flex-direction: column; overflow: hidden; animation: chat-in 160ms ease-out; } @keyframes chat-in { from { opacity: 0; transform: translateY(10px); } } .chat-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .chat-header strong { display: block; font-size: 15px; } .chat-header span { font: 500 12px 'Urbanist'; opacity: 0.55; } .chat-header button { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 22px; color: var(--ink); opacity: 0.55; line-height: 1; } .chat-messages { padding: 14px; display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; } .msg { max-width: 85%; padding: 9px 13px; border-radius: 16px; font: 500 13.5px/1.45 'Urbanist'; } .msg-user { align-self: flex-end; background: var(--ink); color: var(--bg); border-bottom-right-radius: 6px; } .msg-optima { align-self: flex-start; background: var(--mist); color: var(--ink); border-bottom-left-radius: 6px; } .msg-optima .undo { color: var(--green); font-weight: 700; cursor: pointer; text-decoration: underline; margin-left: 4px; } .chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); } .chat-input input { flex: 1; font: 500 14px 'Urbanist'; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 10px 14px; outline: none; } .chat-input input:focus { border-color: var(--green); } .chat-input button { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--green); color: #fff; font-size: 18px; cursor: pointer; } @media (max-width: 520px) { .calendar-sidebar, .sidebar-toggle { display: none; } .tasks-toggle span { display: none; } .period-title { font-size: 17px; } .view-pill { display: none; } .mobile-view-picker { display: block; } .topbar-right { gap: 6px; } .btn-add, .btn-icon, .avatar { width: 38px; height: 38px; } .calendar-search { top: 60px; right: 8px; width: calc(100vw - 16px); } .date-jump-popover { top: 58px; left: 8px; width: min(310px, calc(100vw - 16px)); } .detail-backdrop { padding: 12px; align-items: flex-end; } .detail-card { border-radius: 22px 22px 12px 12px; } .detail-header { padding: 20px 18px 12px; } .detail-body { padding-left: 46px; padding-right: 18px; } .detail-actions { padding: 16px 18px 20px; } .year-grid { grid-template-columns: 1fr; } } @media (min-width: 521px) and (max-width: 820px) { .calendar-sidebar { width: 210px; padding-left: 10px; padding-right: 10px; } .sidebar-toggle { left: 197px; } .calendar-key { grid-template-columns: 1fr 1fr; gap: 8px; } .calendar-key h3 { grid-column: 1 / -1; } .calendar-key div, .calendar-key button { font-size: 10.5px; gap: 6px; } .calendar-key #category-summary { grid-column: 1 / -1; } .year-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); } } @media (min-width: 521px) { .grid-root.month-view { overflow: hidden; padding-bottom: 16px; display: flex; flex-direction: column; } .grid-root.month-view .dow-row { flex: none; } .grid-root.month-view .month-grid { flex: 1; } }