/* Black / purple / blue — a single dark galaxy theme everywhere (no light mode). */ :root { color-scheme: dark; --bg: #06050d; /* near-black with a faint purple cast */ --panel: #100e20; /* deep purple-navy panel */ --panel-2: #17142e; --line: #2a2552; /* purple-tinted border */ --text: #ecebf9; --muted: #9c98ca; --accent: #6b8cff; /* blue */ --accent-2: #a26cff; /* purple */ --hard: #ff6b6b; --medium: #ffb454; --easy: #4ecb8d; --shadow: 0 14px 40px rgba(0, 0, 0, 0.55); --radius: 14px; } /* Light mode — white with blue & purple. Toggled via [data-theme] on . */ :root[data-theme="light"] { color-scheme: light; --bg: #f3f5ff; /* white with a blue tint */ --panel: #ffffff; --panel-2: #eef1ff; --line: #dde2fb; --text: #1b1a30; --muted: #5c6091; --accent: #5a6cff; /* blue */ --accent-2: #8b5cff; /* purple */ --hard: #ef5b5b; --medium: #e8992f; --easy: #34b877; --shadow: 0 12px 34px rgba(90, 90, 170, 0.16); } * { box-sizing: border-box; } html, body { margin: 0; } /* Ensure the [hidden] attribute always wins over display:flex/grid rules below */ [hidden] { display: none !important; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: radial-gradient(1200px 600px at 80% -10%, rgba(108, 140, 255, 0.18), transparent 60%), radial-gradient(1000px 500px at -10% 10%, rgba(138, 108, 255, 0.14), transparent 55%), var(--bg); color: var(--text); min-height: 100vh; line-height: 1.5; } .wrap { max-width: 820px; margin: 0 auto; padding: 24px 20px calc(112px + env(safe-area-inset-bottom)); } /* top bar + nav */ header.app { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 21px; box-shadow: var(--shadow); } h1 { font-size: 18px; margin: 0; letter-spacing: -0.3px; line-height: 1.15; } /* ---- floating bottom dock ---------------------------------------------- Fixed, glassy pill centred at the bottom of the screen. A gradient indicator slides between the four tabs; the buttons themselves stay transparent so the pill reads as the selection. */ nav.tabs { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(430px, calc(100vw - 28px)); display: flex; gap: 0; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 74%, transparent); border: 1px solid color-mix(in srgb, var(--line) 85%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: 0 20px 46px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .09); } :root[data-theme="light"] nav.tabs { box-shadow: 0 18px 40px rgba(80, 84, 170, .22), 0 3px 10px rgba(80, 84, 170, .12), inset 0 1px 0 rgba(255, 255, 255, .8); } /* the sliding selection pill (one quarter of the inner width) */ nav.tabs::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 4); border-radius: 999px; pointer-events: none; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent-2) 32%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 18px rgba(108, 140, 255, .35); transition: left .42s cubic-bezier(.62, .02, .3, 1), opacity .2s ease; } /* Slide with `left`, not a percentage transform: a percentage translate resolves against the pseudo-element's own box, which does not match the button pitch, and the pill drifted off the active tab. These calcs share the exact expression used for the width, so pill and button always line up. */ nav.tabs:has(button:nth-child(2).active)::before { left: calc(6px + (100% - 12px) / 4); } nav.tabs:has(button:nth-child(3).active)::before { left: calc(6px + (100% - 12px) / 2); } nav.tabs:has(button:nth-child(4).active)::before { left: calc(6px + (100% - 12px) * 0.75); } nav.tabs:not(:has(button.active))::before { opacity: 0; } nav.tabs button { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; border: none; border-radius: 999px; cursor: pointer; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .2px; transition: color .18s ease; } nav.tabs .tabicon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.2, .9, .3, 1.5), filter .25s ease; } nav.tabs button:hover { color: var(--text); } nav.tabs button:hover .tabicon { transform: translateY(-2px); } nav.tabs button:active .tabicon { transform: translateY(0) scale(.9); } nav.tabs button.active { color: var(--text); } nav.tabs button.active .tabicon { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 3px 9px color-mix(in srgb, var(--accent) 75%, transparent)); } nav.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 360px) { nav.tabs button span { font-size: 10px; } } /* shared day bar */ .daybar { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; } .daybar .lbl { flex: 1; text-align: center; font-weight: 700; font-size: 15px; } .daybar .lbl small { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .5px; margin-left: 6px; } .navbtn { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 9px; cursor: pointer; padding: 8px 13px; font-size: 15px; } .navbtn:hover { border-color: var(--accent); } .navbtn.today { font-size: 12px; font-weight: 600; padding: 8px 12px; } section.view { display: none; margin-top: 12px; } section.view.active { display: block; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card + .card { margin-top: 16px; } .card h2 { font-size: 15px; margin: 0 0 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); } label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; } input, select, textarea { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 15px; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit; } textarea { resize: vertical; min-height: 74px; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(108,140,255,.2); } .row { display: flex; gap: 12px; align-items: stretch; } .row > div { flex: 1; } /* In a row, let labels grow so inputs bottom-align even when one label wraps. */ .row > .field { display: flex; flex-direction: column; } .row > .field > label { flex: 1 0 auto; } .row > .field > input, .row > .field > select { margin-top: auto; } .field { margin-bottom: 14px; } .seg { display: flex; gap: 8px; } .seg button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 600; transition: all .12s; } .seg button.active { background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); border-color: var(--accent); color: var(--text); } .seg button[data-diff="hard"].active { background: rgba(255,107,107,.16); border-color: var(--hard); color: var(--hard); } .seg button[data-diff="medium"].active { background: rgba(255,180,84,.16); border-color: var(--medium); color: var(--medium); } .seg button[data-diff="easy"].active { background: rgba(78,203,141,.16); border-color: var(--easy); color: var(--easy); } .btn { width: 100%; padding: 12px; border: none; border-radius: 11px; cursor: pointer; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; font-size: 15px; font-weight: 700; margin-top: 6px; box-shadow: var(--shadow); transition: transform .08s, filter .12s; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .55; cursor: default; filter: none; } .btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); box-shadow: none; } .btn.small { width: auto; padding: 8px 14px; font-size: 13px; margin: 0; } /* list header + progress bar */ .listhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .listhead h2 { margin: 0; } .taskcount { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; } .progressbar { height: 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; margin-bottom: 14px; } .progressbar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: color-mix(in srgb, var(--muted) 65%, var(--text)); transition: width .5s cubic-bezier(.4,0,.2,1); } .task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .task-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; } .chk { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; color: var(--easy); font-size: 14px; font-weight: 900; line-height: 1; transition: border-color .12s, background .12s, transform .1s; } .chk:hover { border-color: var(--easy); } .chk:active { transform: scale(.9); } .chk.on { background: rgba(78,203,141,.16); border-color: var(--easy); } .ti-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .task-item .name { font-weight: 650; font-size: 14.5px; min-width: 0; word-break: break-word; letter-spacing: -.1px; } .task-item.done { opacity: .62; } .task-item.done .name { text-decoration: line-through; color: var(--muted); } .ti-meta { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .chip.pin { color: var(--muted); } .chip.dur { font-variant-numeric: tabular-nums; } /* difficulty: a small colour dot, neutral text — keeps meaning, drops the colour blocks */ .chip.diff { display: inline-flex; align-items: center; gap: 6px; } .chip.diff::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .chip.diff.hard::before { background: var(--text); } .chip.diff.medium::before { background: var(--muted); } .chip.diff.easy::before { background: color-mix(in srgb, var(--muted) 45%, transparent); } .ti-actions { display: flex; gap: 2px; flex: none; align-self: flex-start; } .iconbtn { cursor: pointer; color: var(--muted); border: none; background: none; font-size: 15px; padding: 5px 7px; border-radius: 7px; line-height: 1; } .iconbtn:hover { color: var(--accent); background: rgba(108,140,255,.12); } .iconbtn.del:hover { color: var(--hard); background: rgba(255,107,107,.1); } .empty { color: var(--muted); font-size: 14px; text-align: center; padding: 26px 0; } details.ai { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } details.ai > summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 600; list-style: none; } details.ai > summary::-webkit-details-marker { display: none; } details.ai > summary::before { content: "✨ "; } .hint { font-size: 12px; color: var(--muted); margin: 8px 0; } .typehint { font-size: 12px; color: var(--accent); margin-top: 7px; display: none; } .slot.fixed .slot-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } .status { font-size: 13px; margin-top: 8px; min-height: 18px; } .status.err { color: var(--hard); } .status.ok { color: var(--easy); } .lead { color: var(--muted); font-size: 15px; margin: 0 0 4px; } .steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .steps li { display: flex; gap: 12px; align-items: flex-start; } .steps .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--accent); } .steps .txt b { color: var(--text); } .steps .txt { color: var(--muted); font-size: 14px; } .stats { display: flex; gap: 12px; flex-wrap: wrap; } .stat { flex: 1; min-width: 120px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; } .stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; } .stat .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; } .glancebtns { display: flex; gap: 10px; margin-top: 14px; } .glancebtns .btn { margin-top: 0; } /* ---- "Add to your plan" tiles (Tasks tab) ---- One quiet grid instead of a stack of competing forms. Every tile is the same shape so nothing shouts; the accent only appears on hover/focus. */ .addgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .addtile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 14px; border-radius: var(--radius); cursor: pointer; text-align: left; background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--line); color: var(--text); font: inherit; line-height: 1.3; transition: border-color .15s ease, background .15s ease, transform .1s ease; } .addtile:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); } .addtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .addtile:active { transform: scale(.98); } .addtile .at-ic { font-size: 19px; line-height: 1.1; margin-bottom: 3px; } .addtile b { font-size: 14px; font-weight: 700; } .addtile .at-sub { font-size: 11.5px; color: var(--muted); } @media (max-width: 560px) { .addgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .addtile { padding: 11px 12px; } .addtile .at-sub { font-size: 11px; } } /* Brief highlight on the Settings card a tile jumps you to, so it's obvious where you landed. */ .jumped { animation: jumpFlash 1.6s ease-out 1; } @keyframes jumpFlash { 0%, 12% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } 100% { border-color: var(--line); box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .jumped { animation: none; } } .glance { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .ring { position: relative; width: 136px; height: 136px; flex: none; } .ring svg { width: 136px; height: 136px; display: block; } .ring .ringc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring .big { font-size: 30px; font-weight: 800; letter-spacing: -1px; } .ring .sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .ginfo { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 12px; } .streak { display: flex; align-items: center; gap: 12px; } .streak .flame { font-size: 32px; line-height: 1; filter: grayscale(1) opacity(0.5); } .streak.on .flame { filter: none; } .streak .sv { font-size: 26px; font-weight: 800; letter-spacing: -.5px; } .streak .sk { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; } .legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); } .legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .giline { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; } .giline b { color: var(--text); } /* work-hours presets + summary */ .presetrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; } .preset { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .12s, color .12s; } .preset:hover { color: var(--text); border-color: color-mix(in srgb, var(--muted) 40%, var(--line)); } .preset.active { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); } .worksum { color: var(--text); font-weight: 600; } /* working-days selector */ .daysel { display: flex; flex-wrap: wrap; gap: 6px; } .daysel button { flex: 1; min-width: 42px; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .12s, color .12s, background .12s; } .daysel button:hover { color: var(--text); border-color: color-mix(in srgb, var(--muted) 40%, var(--line)); } .daysel button.on { background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); border-color: var(--accent); color: var(--text); } .curvewrap { margin: 4px 0 18px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .curvewrap .cap { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } svg.curve { width: 100%; height: 52px; display: block; } .banner { padding: 13px 15px; border-radius: 12px; font-size: 14px; margin: 0 0 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .banner.ok { background: rgba(78,203,141,.12); border: 1px solid rgba(78,203,141,.4); color: var(--easy); } .banner.warn { background: rgba(255,180,84,.12); border: 1px solid rgba(255,180,84,.45); color: var(--medium); } .banner .grow { flex: 1; min-width: 160px; } /* ---- Proportional day grid: hour ruler + duration-sized blocks ---- */ .daygrid { position: relative; margin-top: 4px; --gutter: 60px; } /* the vertical rail between ruler and blocks */ .dg-rail { position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + 6px); width: 2px; background: var(--line); border-radius: 2px; } /* hour ruler: label on the left, a faint line across the grid */ .dg-hour { position: absolute; left: 0; right: 0; height: 0; } .dg-hour::after { content: ""; position: absolute; left: calc(var(--gutter) + 7px); right: 0; top: 0; border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); } .dg-hl { position: absolute; left: 0; top: -7px; width: var(--gutter); text-align: right; font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -.2px; } /* live "now" line (today only) */ .dg-now { position: absolute; left: 0; right: 0; height: 0; z-index: 4; pointer-events: none; } .dg-now::after { content: ""; position: absolute; left: calc(var(--gutter) + 7px); right: 0; top: 0; height: 2px; background: var(--hard); border-radius: 2px; transform: translateY(-1px); box-shadow: 0 0 8px color-mix(in srgb, var(--hard) 55%, transparent); } .dg-now-dot { position: absolute; left: calc(var(--gutter) + 7px); top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--hard); transform: translate(-50%, -50%); box-shadow: 0 0 8px color-mix(in srgb, var(--hard) 55%, transparent); } .dg-now-lbl { position: absolute; left: calc(var(--gutter) + 16px); top: 0; transform: translateY(-50%); font-size: 10px; font-weight: 800; letter-spacing: .2px; color: #fff; background: var(--hard); padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; } /* the blocks live to the right of the rail */ .dg-body { position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + 20px); right: 0; } .dg-block { position: absolute; left: 0; right: 0; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 8px 13px; display: flex; align-items: flex-start; gap: 11px; } .dg-block.tight { padding-top: 4px; padding-bottom: 4px; align-items: center; } /* short slots: one line only — the subtitle can't fit and would be sliced */ .dg-block.tight .info .s { display: none; } .dg-block.micro { padding-top: 2px; padding-bottom: 2px; } .dg-block.micro .info .t { font-size: 12.5px; line-height: 1.35; } .dg-block.micro .badge { display: none; } .dg-block.micro .brk-label { font-size: 12.5px; } /* start time on the right of each block */ .dg-when { flex: none; margin-left: auto; align-self: center; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -.2px; white-space: nowrap; } /* a node where the block meets the rail */ .dg-block::before { content: ""; position: absolute; left: -14px; top: 13px; width: 11px; height: 11px; border-radius: 50%; background: var(--panel); border: 2px solid var(--muted); } .dg-block.tight::before { top: 50%; transform: translateY(-50%); } .dg-block.task::before { border-color: color-mix(in srgb, var(--text) 45%, var(--line)); } /* task blocks open their detail page on click */ .dg-block.task[data-task] { cursor: pointer; transition: border-color .12s, background .12s; } .dg-block.task[data-task]:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); } .dg-block.fixed { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } .dg-block.break, .dg-block.free { background: transparent; border-style: dashed; color: var(--muted); font-size: 13px; } .dg-block.free { opacity: .82; } .dg-block.break::before, .dg-block.free::before { border-color: var(--line); background: var(--line); } .dg-block.lunch { border-style: solid; } .brk-label { flex: 1; font-weight: 600; } .brk-dur { font-variant-numeric: tabular-nums; font-size: 12px; } /* commitments */ .dg-block.commit { background: color-mix(in srgb, var(--accent-2) 12%, var(--panel-2)); border-color: color-mix(in srgb, var(--accent-2) 42%, var(--line)); } .dg-block.commit::before { border-color: var(--accent-2); background: var(--accent-2); } /* goals */ .dg-block.goal { background: color-mix(in srgb, var(--easy) 10%, var(--panel-2)); border-color: color-mix(in srgb, var(--easy) 40%, var(--line)); } .dg-block.goal::before { border-color: var(--easy); background: var(--easy); } .goaltag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--easy); border: 1px solid color-mix(in srgb, var(--easy) 45%, var(--line)); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; } .gchk { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid color-mix(in srgb, var(--easy) 55%, var(--line)); background: transparent; cursor: pointer; transition: all .12s; } .gchk:hover { background: color-mix(in srgb, var(--easy) 22%, transparent); } .dg-block .info { flex: 1; min-width: 0; } .dg-block .info .t { font-weight: 650; font-size: 14px; letter-spacing: -.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dg-block .info .t .pinicon { font-size: 12px; } .dg-block .info .s { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-top: 3px; } .dg-block .info .s .dchip { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .dg-block .info .s .tsep::before { content: "· "; color: var(--muted); } .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; align-self: flex-start; color: var(--muted); background: var(--panel); border: 1px solid var(--line); } .badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .badge.hard::before { background: var(--text); } .badge.medium::before { background: var(--muted); } .badge.easy::before { background: color-mix(in srgb, var(--muted) 45%, transparent); } /* "Now / Next" glance line */ .nownext { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .nn { flex: 1 1 180px; min-width: 0; display: block; font-size: 13px; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nn b { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-right: 7px; } .nn small { color: var(--muted); } .nn.now { border-color: color-mix(in srgb, var(--hard) 45%, var(--line)); background: color-mix(in srgb, var(--hard) 10%, transparent); } .nn.now b { color: var(--hard); } .nn.next b { color: var(--accent); } /* task check-off circle (neutral accent, vs the goal's green) */ .taskchk { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 50%; } .taskchk:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } /* time-of-day states: past fades, the current block glows */ .dg-block.past { opacity: .5; } .dg-block.past .badge { opacity: .7; } .dg-block.live { border-color: var(--hard); box-shadow: 0 0 0 1px var(--hard), 0 4px 18px color-mix(in srgb, var(--hard) 30%, transparent); } .dg-block.live::before { border-color: var(--hard); background: var(--hard); box-shadow: 0 0 8px color-mix(in srgb, var(--hard) 60%, transparent); } .nowtag { display: inline-block; margin-left: 7px; vertical-align: middle; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: var(--hard); padding: 1px 6px; border-radius: 999px; } /* rest bands (sleep / off-hours) — dashed, dimmer, shaded */ .dg-block.rest { border-style: dashed; color: var(--muted); background: color-mix(in srgb, var(--panel-2) 40%, transparent); } .dg-block.rest .info .t { font-weight: 700; color: var(--text); } .dg-block.rest::before { border-color: var(--line); background: var(--line); } .dg-block.rest.sleep { background: color-mix(in srgb, var(--accent-2) 9%, transparent); border-color: color-mix(in srgb, var(--accent-2) 32%, var(--line)); } .dg-block.rest.sleep::before { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 40%, var(--panel)); } .dg-block.rest .btn.small { margin: 0; } .rest-ic { font-size: 15px; line-height: 1.3; flex: none; } @media (max-width: 520px) { .daygrid { --gutter: 50px; } } .why { margin-top: 18px; font-size: 13.5px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; } .why b { color: var(--text); } .why ul { margin: 10px 0 0; padding-left: 18px; } .why li { margin-bottom: 5px; } /* ---- Task detail page ---- */ .td-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .td-top .btn { margin: 0; } .td-card { border-left: 4px solid var(--muted); } .td-card.hard { border-left-color: var(--hard); } .td-card.medium { border-left-color: var(--medium); } .td-card.easy { border-left-color: var(--easy); } .td-card.done { opacity: .82; } .td-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .td-donetag { font-size: 11px; font-weight: 700; color: var(--easy); } .td-name { width: 100%; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--text); background: transparent; border: none; border-bottom: 1px dashed transparent; border-radius: 0; padding: 2px 0 6px; margin: 0 0 14px; } .td-name:hover { border-bottom-color: var(--line); } .td-name:focus { outline: none; border-bottom-color: var(--accent); box-shadow: none; } .td-card.done .td-name { text-decoration: line-through; color: var(--muted); } .td-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .td-row { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; background: var(--panel); } .td-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .td-v { font-size: 14.5px; font-weight: 600; color: var(--text); } .td-v.warn { color: var(--hard); } .td-insight { margin-top: 14px; font-size: 13px; color: var(--muted); background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 10px; padding: 10px 13px; } .td-insight b { color: var(--text); } .td-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 18px 0 7px; } /* sub-steps checklist */ .td-check { margin-top: 18px; } .tc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .tc-count { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .tc-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tc-item { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 55%, transparent); } .tc-chk { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--line); background: transparent; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; transition: all .12s; } .tc-chk.on { background: var(--easy); border-color: var(--easy); } .tc-text { flex: 1; min-width: 0; font-size: 14px; word-break: break-word; } .tc-item.done .tc-text { text-decoration: line-through; color: var(--muted); } .tc-del { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; transition: all .12s; } .tc-del:hover { color: var(--hard); border-color: var(--hard); } .tc-add { display: flex; gap: 8px; } .tc-add .tc-input { flex: 1; margin: 0; padding: 9px 12px; font-size: 14px; } .tc-add .btn.small { margin: 0; flex: none; } .td-notes { width: 100%; min-height: 120px; resize: vertical; font-size: 14px; line-height: 1.55; } .td-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .td-foot .btn { width: auto; margin: 0; flex: 0 1 auto; } @media (max-width: 480px) { .td-grid { grid-template-columns: 1fr; } .td-foot .btn { flex: 1 1 100%; } } @media (max-width: 560px) { .slot { grid-template-columns: 58px 1fr; column-gap: 18px; } .timeline::before { left: 66px; } .slot::before { left: 60px; } .slot-time .st { font-size: 12px; } } footer { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 40px; } /* trademark superscript on brand wordmarks */ .tm { font-size: .5em; font-weight: 700; vertical-align: super; letter-spacing: 0; opacity: .7; margin-left: 1px; } /* in-app footer — legal links present on every app screen */ .appfooter { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 40px; } .appfooter .af-note { margin: 0; } .appfooter .af-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; } .appfooter .af-links a { color: var(--muted); text-decoration: none; font-size: 12.5px; transition: color .18s ease; } .appfooter .af-links a:hover { color: var(--text); } .appfooter .af-copy { margin: 0; font-size: 11.5px; opacity: .85; } /* ===================== AUTH / LANDING ===================== */ .auth { position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; background: radial-gradient(1000px 700px at 15% 10%, rgba(108,140,255,.25), transparent 55%), radial-gradient(900px 600px at 90% 90%, rgba(138,108,255,.22), transparent 55%), var(--bg); /* The landing is one continuous dark cinematic stage — the hero, the phone mock and every section below share it. It deliberately does NOT follow the app's light/dark toggle (that governs the signed-in app), so the dark palette is pinned here. Without this, light mode left a hard-coded dark hero sitting on white sections, with washed-out buttons. Re-declaring the custom properties on .auth makes every var()-driven surface and control inside the landing dark, whatever data-theme is on . */ color-scheme: dark; --bg: #06050d; --panel: #100e20; --panel-2: #17142e; --line: #2a2552; --text: #ecebf9; --muted: #9c98ca; --accent: #6b8cff; --accent-2: #a26cff; --hard: #ff6b6b; --medium: #ffb454; --easy: #4ecb8d; --shadow: 0 14px 40px rgba(0, 0, 0, 0.55); } /* persistent top bar — brand left, Log in + theme right — stays pinned while scrolling */ .authbar { position: fixed; top: 0; left: 0; right: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; } .authbar-brand { display: flex; align-items: center; gap: 10px; } .authbar-actions { display: flex; align-items: center; gap: 10px; } /* The landing is always dark, so the theme toggle here would be a control that does nothing visible. Hide it — the app carries its own toggle (header + settings). */ .authbar .theme-toggle { display: none; } .blogo.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 19px; } .brandname.sm { font-size: 19px; letter-spacing: -.4px; } .barlogin { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); border-radius: 10px; padding: 8px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease; } .barlogin:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); } .barlogin:active { transform: scale(.96); } /* back-to-top — fixed to the viewport (no transformed ancestor between it and the root, so `fixed` really is the viewport here), hidden until you're a screen in. Living inside #auth means it disappears with the landing on sign-in. */ .totop { position: fixed; right: 18px; bottom: 18px; z-index: 20; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; line-height: 1; cursor: pointer; color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); /* No backdrop-filter: this is fixed over the scrolling content, so a blurred backdrop has to be re-rasterised every single scrolled frame. An opaque background costs nothing and looks the same on a dark page. */ background: color-mix(in srgb, var(--panel-2) 97%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, border-color .15s ease, background .15s ease; } .totop.show { opacity: 1; transform: none; pointer-events: auto; } .totop:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); } .totop.show:active { transform: scale(.94); } @media (max-width: 640px) { .totop { right: 14px; bottom: 14px; width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .totop { transition: opacity .25s ease; transform: none; } } /* choice = first full-height screen (in flow); form = fixed overlay revealed on choice */ .authpanel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 72px 24px 40px; text-align: center; } .authpanel.choice { position: relative; min-height: 100vh; } .authpanel.form { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: radial-gradient(1000px 700px at 15% 10%, rgba(108,140,255,.25), transparent 55%), radial-gradient(900px 600px at 90% 90%, rgba(138,108,255,.22), transparent 55%), var(--bg); } .authpanel > * { position: relative; z-index: 1; } /* above the star canvas */ .authhero { max-width: 620px; width: 100%; } .authhero .blogo { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 30px; box-shadow: var(--shadow); } .authhero h1 { font-size: 31px; font-weight: 700; margin: 8px auto 12px; letter-spacing: -.5px; line-height: 1.12; max-width: 460px; } .authhero p { color: var(--muted); font-size: 16px; margin: 0 auto; max-width: 430px; line-height: 1.55; } /* choice screen — two big buttons */ .choicebtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .choicebtns .btn { min-width: 180px; font-size: 15px; padding: 13px 22px; } /* =============== CINEMATIC HERO (easemize port, re-themed) =============== */ /* Tall wrapper: its height is the scroll distance over which the hero stays stuck. The hero sticks for (wrapper height − 100vh), so this is 100vh of scrolling for the dive. It was 360vh (260vh of dive), which put the hero at roughly half the whole landing page — you were still diving when you expected to be reading. One screen of scroll is enough to read as cinematic. */ .hero-scroll { position: relative; height: 200vh; z-index: 3; } .authpanel.choice.cinematic { background: radial-gradient(120% 80% at 50% -10%, #162C6D 0%, #0A101D 46%, #050914 100%); overflow: hidden; padding: 96px 24px 60px; justify-content: center; /* Native compositor pinning — no GSAP transform pin, so no wheel jitter. */ position: sticky; top: 0; height: 100vh; } /* faint grid */ .cine-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(color-mix(in srgb, #3B82F6 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #3B82F6 22%, transparent) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%); } /* film grain */ .film-grain { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: .10; mix-blend-mode: overlay; } /* The glow is a soft radial. It used to get there with `filter: blur(70px)` over a 780x520 box — and the dive animates this element's opacity three separate times, so Chrome re-rasterised a 70px blur across half the viewport on every scrolled frame. Profiling the dive, that single declaration owned the stutter: dropping it took p90 frame time 14.0ms -> 7.2ms and removed every frame over 33ms. A gradient is already soft, so the blur was buying nothing a longer stop ramp can't do for free. Box is enlarged to cover the spread the blur used to add. */ .cine-glow { position: absolute; left: 50%; top: 4%; width: 940px; height: 660px; transform: translateX(-50%); z-index: 0; pointer-events: none; opacity: .55; background: radial-gradient(50% 50% at 50% 50%, rgba(59, 130, 246, .40) 0%, rgba(59, 130, 246, .27) 30%, rgba(59, 130, 246, .14) 52%, rgba(59, 130, 246, .05) 72%, rgba(59, 130, 246, 0) 88%); } .cine-inner { position: relative; z-index: 2; width: 100%; max-width: 1080px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .hero-text-wrapper { text-align: left; } .cine-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #E2E8F0; margin-bottom: 20px; } .cine-kicker .blogo.xs { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 17px; } .cine-title { font-size: clamp(34px, 5.4vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -1.6px; margin: 0 0 20px; } .cine-title span { display: block; } /* The bottom stop used to be #A1A1AA, which dropped the headline's second line to a mid grey — over the star canvas and the grid it stopped reading as bright text. It still ramps (that's the "matte silver" look) but now bottoms out light enough to stay clearly legible against anything behind it. NB a dark text-shadow is NOT an option here: with background-clip:text the background paints first and the shadow paints over it, so a dark halo would darken the glyphs themselves. Separation comes from .cine-copy's scrim instead. */ .text-silver-matte { background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 46%, #CBD5E1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 0 rgba(255,255,255,.04); } /* plain text, so a dark halo is safe here and lifts it off the constellations */ .cine-sub { color: #CBD5E1; font-size: clamp(15px, 1.5vw, 19px); font-weight: 300; line-height: 1.6; max-width: 460px; margin: 0 0 30px; text-shadow: 0 1px 12px rgba(5, 9, 20, .85); } .cta-wrapper { display: flex; gap: 14px; flex-wrap: wrap; } .cta-wrapper .btn { min-width: 168px; font-size: 15px; padding: 14px 24px; } /* phone mockup */ .phone-widget { position: relative; justify-self: center; width: 290px; height: 590px; border-radius: 42px; padding: 12px; background: linear-gradient(160deg, #1b2540, #0b1120); border: 1px solid rgba(148,163,255,.18); box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 6px rgba(10,16,29,.6); /* preserve-3d lets the ::after back-plate sit behind the face in real depth so the slanted phone shows a chunky side edge (see below). will-change is left off deliberately — in Chromium it flattens preserve-3d, collapsing that edge. */ transform-style: preserve-3d; backface-visibility: hidden; transform: translateZ(0); } /* Real thickness: a dark back-plate parented into the phone's 3D space. When the phone is slanted, its receding edges reveal this plate as the device's side, so it reads as a solid object instead of a paper-thin sheet. As the dive straightens the phone to flat, the plate hides directly behind the face. */ .phone-widget::after { content: ""; position: absolute; inset: -1px; border-radius: 43px; /* a lit top-left → dark bottom-right ramp so the exposed side catches light and the thickness reads against the dark page instead of vanishing into it */ background: linear-gradient(125deg, #33477a 0%, #1a2442 26%, #0a1020 58%, #04060c 100%); transform: translateZ(-38px); box-shadow: 0 0 0 2px #05070d, 0 34px 60px rgba(0,0,0,.5); } /* thin machined highlight along the rim where the face meets the side */ .phone-widget::before { content: ""; position: absolute; inset: -1px; border-radius: 43px; z-index: 4; pointer-events: none; border: 1px solid rgba(150,170,255,.22); transform: translateZ(-6px); } .phone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 116px; height: 22px; background: #050914; border-radius: 0 0 16px 16px; z-index: 3; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: radial-gradient(120% 60% at 50% 0%, #16204a, #0A101D 70%); } /* discrete full-screen pages, swapped via translateY */ .phone-pages { position: absolute; inset: 0; display: flex; flex-direction: column; will-change: transform; } .phone-page { flex: 0 0 100%; height: 100%; padding: 40px 17px 20px; display: flex; flex-direction: column; justify-content: center; gap: 13px; } .pp-title { font-size: 15px; font-weight: 800; color: #F1F5F9; letter-spacing: -.2px; } .pp-title.big { font-size: 19px; margin-top: 4px; } .pp-cap { font-size: 11.5px; color: #A1A1AA; line-height: 1.5; margin: 2px 0 0; } .pp-step { display: flex; align-items: center; gap: 10px; background: rgba(148,163,255,.06); border: 1px solid rgba(148,163,255,.12); border-radius: 12px; padding: 11px; } .pp-step .pp-num { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .pp-step div { display: flex; flex-direction: column; text-align: left; } .pp-step b { font-size: 12.5px; color: #E2E8F0; } .pp-step span { font-size: 10.5px; color: #A1A1AA; } /* PAGE 1 home dashboard inside the phone — mirrors the real app Home: greeting + streak, a small·big·small ring scoreboard, an up-next card and a mini momentum strip. */ .pp-home { justify-content: flex-start; gap: 11px; padding-top: 30px; } .ph-tabs { display: flex; gap: 15px; justify-content: center; font-size: 11px; font-weight: 700; color: #7c86b8; } .ph-tabs .on { color: #F1F5F9; position: relative; } .ph-tabs .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--accent); } /* greeting + streak header */ .ph-hero { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .ph-greet { display: flex; flex-direction: column; gap: 2px; text-align: left; font-size: 15px; font-weight: 800; color: #F1F5F9; letter-spacing: -.3px; } .ph-greet .ph-date { font-size: 9.5px; font-weight: 600; color: #94a3d6; letter-spacing: .2px; } .ph-greet .ph-date b { color: var(--accent); font-weight: 700; } .ph-streak { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(148,163,255,.06); border: 1px solid rgba(255,180,84,.35); } .ph-streak .flame { font-size: 15px; line-height: 1; } .ph-stk-b { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .ph-stk-b b { font-size: 11px; font-weight: 800; color: #fff; } .ph-stk-b span { font-size: 8.5px; color: #A1A1AA; } /* scoreboard: small · big lead · small, like the real Home */ .ph-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 4px; margin: 2px 0; } .ph-metric { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; } .ph-metric em { font-size: 8.5px; font-style: normal; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #94a3d6; } .ph-metric.lead em { color: #E2E8F0; } .ph-rank { font-size: 8.5px; font-weight: 800; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ph-ring { position: relative; display: grid; place-items: center; } .ph-ring svg { display: block; width: 100%; height: 100%; } .ph-ring.sm { width: 52px; height: 52px; } .ph-ring.big { width: 96px; height: 96px; } /* soft rotating halo behind the lead ring, echoing the real Home */ .ph-ring.big::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; z-index: -1; opacity: .4; filter: blur(13px); background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent)); } @media (prefers-reduced-motion: no-preference) { .ph-ring.big::before { animation: phHalo 9s linear infinite; } @keyframes phHalo { to { transform: rotate(360deg); } } } .ph-trk { fill: none; stroke: rgba(148,163,255,.14); stroke-width: 6; } .ph-arc { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 157.1; stroke-dashoffset: var(--o); } .ph-rc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ph-rc b { font-weight: 800; color: #fff; line-height: 1; } .ph-ring.sm .ph-rc b { font-size: 13px; } .ph-ring.big .ph-rc b { font-size: 30px; letter-spacing: -1px; } .ph-rc span { font-size: 8px; color: #A1A1AA; margin-top: 2px; } /* up-next card */ .ph-next { display: flex; align-items: center; gap: 9px; background: rgba(148,163,255,.06); border: 1px solid rgba(148,163,255,.14); border-radius: 12px; padding: 9px 11px; } .ph-nic { font-size: 13px; line-height: 1; flex: none; } .ph-nbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; } .ph-nwhen { font-size: 8px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); } .ph-nbody b { font-size: 12px; font-weight: 700; color: #E2E8F0; } .ph-narr { font-size: 15px; color: #7c86b8; font-weight: 700; flex: none; } /* mini momentum strip */ .ph-mo { display: flex; flex-direction: column; gap: 6px; margin-top: 1px; } .ph-mo-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #94a3d6; } .ph-mo-head .up { color: #4ecb8d; } .ph-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; } .ph-bars i { flex: 1; height: var(--h); min-height: 3px; border-radius: 3px; background: rgba(148,163,255,.16); } .ph-bars i.on { background: linear-gradient(180deg, #4ecb8d, rgba(78,203,141,.4)); } /* home screen cards (📅 Day planned / 🔥 streak / ✅ Task complete) */ .pp-cards { justify-content: flex-start; gap: 11px; } .pp-card { display: flex; align-items: center; gap: 11px; text-align: left; background: rgba(148,163,255,.06); border: 1px solid rgba(148,163,255,.12); border-radius: 13px; padding: 12px 13px; } .pp-card .pc-ico { font-size: 22px; line-height: 1; flex: none; } .pp-card div { display: flex; flex-direction: column; } .pp-card b { font-size: 13px; color: #E2E8F0; font-weight: 700; line-height: 1.25; } .pp-card div span { font-size: 11px; color: #A1A1AA; } .pp-start { align-items: center; justify-content: center; text-align: center; gap: 12px; } .pp-logo { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; box-shadow: 0 12px 28px rgba(59,130,246,.5); } .pp-cta { width: 100%; margin-top: 6px; font-size: 14px; padding: 12px; } .pw-head { display: flex; align-items: center; justify-content: space-between; } .pw-label { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: #E2E8F0; text-transform: uppercase; } .pw-live { font-size: 10px; font-weight: 700; color: #3B82F6; } .pw-metric { position: relative; display: grid; place-items: center; height: 150px; } .progress-ring { width: 150px; height: 150px; } .pr-track { stroke: rgba(148,163,255,.14); } .pr-arc { stroke: #3B82F6; stroke-dasharray: 327; stroke-dashoffset: 327; filter: drop-shadow(0 0 8px rgba(59,130,246,.6)); } .pw-counter { position: absolute; display: flex; flex-direction: column; align-items: center; } .counter-val { font-size: 46px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -1.5px; } .pw-unit { font-size: 12px; color: #A1A1AA; margin-top: 2px; } .mockup-scroll-wrapper { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); } .text-track { display: flex; flex-direction: column; gap: 9px; } .pw-row { display: flex; align-items: center; gap: 9px; background: rgba(148,163,255,.06); border: 1px solid rgba(148,163,255,.12); border-radius: 11px; padding: 9px 11px; font-size: 12px; font-weight: 600; color: #E2E8F0; } .pw-row .pw-t { color: #94a3d6; font-size: 10.5px; font-weight: 700; min-width: 30px; } .pw-row .pw-bar { width: 3px; align-self: stretch; min-height: 14px; border-radius: 2px; background: var(--accent); } .pw-bar.hard { background: #ff6b6b; } .pw-bar.med { background: #ffb454; } .pw-bar.easy { background: #4ecb8d; } .pw-bar.brk { background: #3f3f6b; } .pw-brk { color: #94a3d6; font-style: italic; font-weight: 500; } .floating-badge { position: absolute; display: flex; align-items: center; gap: 9px; z-index: 5; background: rgba(17,24,45,.92); border: 1px solid rgba(148,163,255,.2); border-radius: 13px; padding: 9px 12px; box-shadow: 0 18px 40px rgba(0,0,0,.5); font-size: 12px; } .floating-badge div { display: flex; flex-direction: column; text-align: left; } .floating-badge b { font-size: 12px; color: #fff; font-weight: 700; line-height: 1.2; } .floating-badge span { font-size: 10.5px; color: #A1A1AA; } .floating-badge.fb1 { top: 40px; left: -66px; } .floating-badge.fb2 { top: 300px; right: -58px; } .floating-badge.fb3 { bottom: 66px; left: -54px; } @media (max-width: 900px) { .cine-inner { grid-template-columns: 1fr; gap: 44px; justify-items: center; text-align: center; } .hero-text-wrapper { text-align: center; } .cine-sub { margin-left: auto; margin-right: auto; } .cta-wrapper { justify-content: center; } .floating-badge.fb1 { left: -20px; } .floating-badge.fb2 { right: -18px; } .floating-badge.fb3 { left: -14px; } } /* --------------------------------------------------------------------------- PHONE LAYOUT — the hero becomes two discrete "pages" instead of one crowded stage. The old layout stacked the headline block AND the tall phone mock inside a single 100vh sticky panel with overflow:hidden. On a phone that meant the mock sat entirely below the clip and was never visible at all — the dive zoomed something you couldn't see — and the "scroll to learn more" cue, laid out after the (viewport-tall) text block, was clipped away too. Now the two occupy the SAME stage and are shown in sequence by the scroll scene in fx.js: page 1 — motto + buttons, spread evenly down the screen, cue pinned bottom page 2 — text parts away, the phone rises into the centre The phone is absolutely centred rather than laid out in flow, so it is always inside the 100vh clip. Centring uses left/top + negative margins, NOT a translate — GSAP owns `transform` on the mock and would overwrite it. --------------------------------------------------------------------------- */ @media (max-width: 640px) { /* svh, not vh: on a phone 100vh is the height with the browser chrome HIDDEN, so a 100vh stage hangs under the address/tab bars and anything pinned to its bottom edge (the cue) sits behind them. svh is the with-chrome height, which is what's actually on screen at rest. */ .authpanel.choice.cinematic { justify-content: flex-start; padding: 0 18px; height: 100svh; } /* the stage's full height, so the phone's top:50% is the viewport's centre */ .cine-inner { display: block; gap: 0; min-height: 100svh; } /* page 1: three rows — brand, copy, buttons — spread down the screen. Padding clears the fixed authbar at the top and the pinned cue at the bottom. */ .hero-text-wrapper { min-height: 100svh; padding: 76px 0 104px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } /* The authbar's brand and the hero kicker are the same wordmark ~60px apart on a phone, which reads as a duplication bug. The kicker is the bigger, nicer one and belongs to page 1's rhythm, so the bar drops its copy and keeps just the Log in button. */ .authbar-brand { display: none; } /* flex-end because space-between would shove Log in to the left once the brand is gone. The scrim matters too: the bar floats over every section, and without it section headings scroll straight through the Log in button. Gradient rather than a solid bar so there's no hard edge where it ends. */ .authbar { justify-content: flex-end; padding-bottom: 28px; background: linear-gradient(180deg, rgba(6, 5, 13, .92) 42%, rgba(6, 5, 13, 0)); } .cine-kicker { margin: 0; font-size: 14px; text-shadow: 0 1px 10px rgba(5, 9, 20, .9); } .cine-copy { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 14px; } /* Legibility scrim. The star canvas, the grid and the film grain all sit at z-index 0-1 inside the panel; .cine-inner is z-index 2, so a -1 layer here lands above all three but still behind the words — the constellations stop running through the headline. Soft-edged radial so there's no visible box. It rides .cine-copy, which the dive fades as one unit, so it leaves with the text instead of lingering as a dark smudge. */ .cine-copy::before { content: ""; position: absolute; z-index: -1; inset: -16% -22%; pointer-events: none; background: radial-gradient(58% 54% at 50% 50%, rgba(5, 9, 20, .86), rgba(5, 9, 20, .55) 56%, rgba(5, 9, 20, 0) 80%); } .cine-title { font-size: clamp(30px, 9vw, 44px); letter-spacing: -1px; margin: 0; } /* Phone: drop the silver ramp entirely and go solid white. The gradient runs 180deg across the WHOLE h1, so with the motto on two lines the first line gets the white end and the second gets the #CBD5E1 end — which is why "praiseach dheth." read as greyed out. Narrow screens always wrap it to two lines, so on a phone the effect is guaranteed, not incidental. Solid fill also frees up a real dark halo: with background-clip:text the shadow paints over the glyphs, but plain colour takes it behind them, so the words sit off the star map without the scrim having to do all the work. */ .cine-title.text-silver-matte { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; text-shadow: 0 2px 16px rgba(5, 9, 20, .92), 0 1px 3px rgba(5, 9, 20, .7); } .cine-sub { font-size: 15px; line-height: 1.55; margin: 0 auto; max-width: 20rem; } .cta-wrapper { width: 100%; flex-direction: column; align-items: stretch; gap: 11px; } .cta-wrapper .btn { width: 100%; padding: 14px 20px; } /* the cue is pinned to the stage, not laid out after the viewport-tall text */ .scrollcue { position: absolute; z-index: 6; left: 0; right: 0; bottom: 26px; width: max-content; margin: 0 auto; } /* page 2: the phone, dead centre of the same stage (see note above) */ .phone-widget { position: absolute; left: 50%; top: 50%; width: 250px; height: 508px; margin: -254px 0 0 -125px; z-index: 3; pointer-events: none; } .phone-page { padding: 34px 14px 16px; } .pp-home { padding-top: 26px; } .floating-badge { display: none; } } @media (max-width: 380px) { .phone-widget { width: 224px; height: 456px; margin: -228px 0 0 -112px; } } /* Full-width normal pages the phone dissolves into on dive-in. Positioned over the pinned hero (inset:0), cross-faded in by GSAP. The `.cinematic` prefix lifts specificity above `.authpanel > *`, which would otherwise force these back to position:relative. Typography is sized for a full screen, not a phone. */ .cinematic .appscreens { position: absolute; inset: 0; z-index: 4; overflow: hidden; opacity: 0; pointer-events: none; will-change: opacity, transform; background: radial-gradient(120% 80% at 50% 0%, #16204a 0%, #0A101D 55%, #050914 100%); } .appscreen-track { position: absolute; inset: 0; display: flex; flex-direction: column; will-change: transform; } .appscreen { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 8vh 6vw; } .as-inner { width: 100%; max-width: 840px; text-align: left; } .as-title { font-size: clamp(30px, 5vw, 52px); font-weight: 800; letter-spacing: -1.4px; margin: 0 0 30px; line-height: 1.02; background: linear-gradient(180deg, #FFFFFF 0%, #E2E8F0 42%, #A1A1AA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Overview cards */ .as-cards { display: flex; flex-direction: column; gap: 16px; } .as-card { display: flex; align-items: center; gap: 18px; background: rgba(148,163,255,.06); border: 1px solid rgba(148,163,255,.14); border-radius: 18px; padding: 20px 22px; } .as-card .as-ico { font-size: 32px; line-height: 1; flex: none; } .as-card > div { display: flex; flex-direction: column; gap: 3px; } .as-card b { font-size: clamp(17px, 2vw, 21px); color: #F1F5F9; font-weight: 700; } .as-card > div span { font-size: clamp(13px, 1.4vw, 15px); color: #A1A1AA; } /* Today schedule rows */ .as-rows { display: flex; flex-direction: column; } .as-row { display: flex; align-items: center; gap: 18px; padding: 16px 4px; border-bottom: 1px solid rgba(148,163,255,.12); font-size: clamp(16px, 1.8vw, 20px); color: #E2E8F0; font-weight: 600; } .as-row .as-t { color: #94a3d6; font-weight: 700; min-width: 74px; font-variant-numeric: tabular-nums; } .as-row .as-bar { width: 4px; align-self: stretch; min-height: 22px; border-radius: 2px; background: var(--accent); } .as-bar.hard { background: #ff6b6b; } .as-bar.med { background: #ffb454; } .as-bar.easy { background: #4ecb8d; } .as-bar.brk { background: #3f3f6b; } .as-name { flex: 1; } .as-brk { color: #94a3d6; font-style: italic; font-weight: 500; } /* How-it-works steps */ .as-steps { display: flex; flex-direction: column; gap: 16px; } .as-step { display: flex; align-items: center; gap: 18px; background: rgba(148,163,255,.06); border: 1px solid rgba(148,163,255,.14); border-radius: 18px; padding: 20px 22px; } .as-step .as-num { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 18px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .as-step > div { display: flex; flex-direction: column; gap: 3px; } .as-step b { font-size: clamp(17px, 2vw, 21px); color: #E2E8F0; } .as-step > div span { font-size: clamp(13px, 1.4vw, 15px); color: #A1A1AA; } /* Static fallback (reduced-motion / no GSAP): the scroll scene never arms, so there is no pinned spacer to scroll through and the 100vh hero would be frozen. Let the phone grow to its natural height with all pages stacked, giving the #auth scroller real content height so the page scrolls normally. */ /* Collapse the tall sticky wrapper and un-stick the hero in the static fallback. */ .hero-scroll:has(.static-hero) { height: auto; } /* Selector has to out-specify `.authpanel.choice.cinematic` (three classes), which otherwise pins this to a clipped 100vh box no matter how tall the stack gets. */ .authpanel.choice.cinematic.static-hero { position: static; height: auto; min-height: 100vh; overflow: visible; } /* height:auto lets the stacked pages grow; the position/margin resets undo the phone-width rule that absolutely centres the mock in the scroll scene. */ .static-hero .phone-widget { position: static; left: auto; top: auto; margin: 0 auto; height: auto; } .static-hero .hero-text-wrapper { min-height: 0; padding-bottom: 40px; } .static-hero .scrollcue { position: static; margin: 0 auto; } .static-hero .phone-screen { height: auto; overflow: visible; } .static-hero .phone-pages { position: static; } .static-hero .phone-page { flex: none; height: auto; min-height: 260px; justify-content: flex-start; border-top: 1px solid rgba(148,163,255,.10); } .static-hero .phone-page:first-child { border-top: none; } /* badges are pinned to fixed offsets on the (now tall) phone — hide them here */ .static-hero .floating-badge { display: none; } /* Normal closing screen — scrolled into after the pinned zoom sequence releases. A plain full-height CTA in normal flow (no phone / no zoom). */ .authpanel.outro { position: relative; min-height: 100vh; gap: 0; background: radial-gradient(120% 80% at 50% 115%, #162C6D 0%, #0A101D 46%, #050914 100%); } .outro-inner { max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .outro-inner .blogo { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 14px 34px rgba(59,130,246,.5); } .outro-inner h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 800; letter-spacing: -1px; line-height: 1.05; margin: 6px 0 0; } .outro-inner p { color: #A1A1AA; font-size: 16px; line-height: 1.55; margin: 0; } .outro .cta-wrapper { margin-top: 12px; justify-content: center; } .outro .cta-wrapper .btn { min-width: 168px; font-size: 15px; padding: 14px 24px; } .outro-foot { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 12.5px; } /* form screen — the login/signup card, revealed with an iris clip on choice */ .authcard { width: 100%; max-width: 400px; flex: none; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: var(--shadow); } .authback { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; padding: 0 0 12px; margin: 0; transition: color .15s ease; } .authback:hover { color: var(--text); } /* iris reveal: a circle clip-path grows from the click point */ @media (prefers-reduced-motion: no-preference) { .authpanel.form.revealing { animation: irisReveal .55s cubic-bezier(.3, .7, .2, 1) both; } @keyframes irisReveal { from { clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); opacity: .4; } to { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); opacity: 1; } } .authpanel.form.revealing .authcard { animation: cardRise .5s cubic-bezier(.2, .8, .3, 1.1) .12s both; } @keyframes cardRise { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } } } @media (max-width: 820px) { .authpanel { gap: 22px; padding: 68px 20px 32px; } .brandname { font-size: 38px; letter-spacing: -1px; } .authhero .blogo { width: 50px; height: 50px; font-size: 29px; } .authhero h1 { font-size: 23px; } .authhero p { font-size: 15.5px; } .choicebtns .btn { min-width: 150px; } } .authtabs { display: flex; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 5px; margin-bottom: 18px; } .authtabs button { flex: 1; padding: 9px; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .12s; } .authtabs button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2); } .autherr { color: var(--hard); font-size: 13px; min-height: 16px; margin-top: 8px; } .authnote { font-size: 11px; color: var(--muted); margin-top: 16px; text-align: center; line-height: 1.5; } /* account button + modal */ .accountbtn { margin-left: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .accountbtn:hover { border-color: var(--accent); } /* light/dark theme toggle */ .theme-toggle { border: 1px solid var(--line); background: var(--panel-2); color: var(--text); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 16px; display: grid; place-items: center; flex: none; line-height: 1; transition: border-color .15s ease, transform .1s ease; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle:active { transform: scale(.92); } header.app .theme-toggle { margin-left: auto; } .brandrow .theme-toggle { margin-left: auto; } /* daily motivational quote */ .quote { position: relative; margin-top: 22px; padding: 14px 16px 14px 40px; border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--panel) 45%, transparent); color: var(--text); font-size: 14.5px; font-style: italic; line-height: 1.5; max-width: 440px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .quote .qmark { position: absolute; left: 12px; top: 2px; font-size: 34px; line-height: 1; font-style: normal; color: color-mix(in srgb, var(--accent) 70%, transparent); font-family: Georgia, "Times New Roman", serif; } .quote.home { margin: 4px auto 0; text-align: center; padding: 14px 18px; border-left: none; border-top: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); max-width: 520px; } .quote.home .qmark { position: static; display: block; margin-bottom: -8px; } @media (max-width: 820px) { .quote { margin-left: auto; margin-right: auto; } } /* dancing skeleton logo (original art; limbs animated via SMIL in the SVG) */ .skelly { width: 82%; height: 82%; display: block; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); } .modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; overflow-y: auto; } /* Zoomed in (or on a short window) the box can outgrow the viewport. A centred flex child would then be clipped at BOTH ends with no way to reach the close button, so cap its height and let it scroll inside instead. */ .modalbox { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px; width: 100%; max-width: 420px; box-shadow: var(--shadow); max-height: 100%; overflow-y: auto; } .modalbox h2 { font-size: 18px; margin: 0 0 14px; letter-spacing: -0.2px; } .acctavatar { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 14px; } .acctrow { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; } .acctrow:first-child { border-top: none; padding-top: 0; } .acctrow .k { color: var(--muted); } .acctrow .v { font-weight: 600; text-align: right; word-break: break-word; } .modalbtns { display: flex; gap: 10px; margin-top: 18px; } .btn.danger { background: linear-gradient(135deg, #ff6b6b, #e0554f); } /* ===================== ONBOARDING WIZARD ===================== */ .onboard { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3,2,10,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .onboard-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px 20px; width: 100%; max-width: 460px; box-shadow: var(--shadow); animation: obin .28s cubic-bezier(.2,.7,.3,1) both; /* Fixed size across all steps so the box never jumps between questions. */ height: min(86vh, 600px); display: flex; flex-direction: column; } @keyframes obin { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .ob-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } /* Scrollable body: short steps centre (no top-loaded white space), tall steps scroll. */ .ob-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px; } .ob-body-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } /* Each step fills the body so its illustration can occupy the space below the question. */ .ob-body { scroll-behavior: smooth; overscroll-behavior: contain; } .ob-body .ob-step { flex: 1 1 auto; display: flex; flex-direction: column; } .ob-body::-webkit-scrollbar { width: 8px; } .ob-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } .ob-progress { display: flex; gap: 6px; } .ob-dot { width: 26px; height: 5px; border-radius: 999px; background: var(--line); transition: background .25s; } .ob-dot.on { background: var(--accent); } .ob-count { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .ob-step h2 { font-size: 21px; margin: 0 0 6px; letter-spacing: -.3px; } .ob-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; } /* Per-question illustration filling the space beneath the inputs */ .ob-art { margin-top: auto; padding-top: 16px; display: flex; align-items: flex-end; justify-content: center; min-height: 0; } .ob-art svg { width: 100%; max-width: 280px; height: auto; max-height: 200px; overflow: visible; } .ob-art.art-compact svg { max-height: 104px; max-width: 240px; } /* All animations use transform/opacity only (compositor-friendly) to stay smooth. */ .art-wave, .art-peak, .art-spark, .art-halo, .art-steam, .art-bar { will-change: transform, opacity; } @keyframes artWaveFlow { from { transform: translate3d(0,0,0); } to { transform: translate3d(-110px,0,0); } } .art-wave { animation: artWaveFlow 7s linear infinite; } .art-peak, .art-spark { transform-box: fill-box; transform-origin: center; } .art-peak { animation: artPulse 2.6s ease-in-out infinite; } .art-spark { animation: artPulse 2.1s ease-in-out infinite; } @keyframes artPulse { 0%,100% { transform: scale(.82); opacity: .6; } 50% { transform: scale(1.2); opacity: 1; } } .art-halo { animation: artHalo 3.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes artHalo { 0%,100% { transform: scale(1); opacity: .16; } 50% { transform: scale(1.28); opacity: .26; } } .art-steam { opacity: 0; animation: artSteam 3.6s ease-in-out infinite; } .art-steam.s2 { animation-delay: 1.2s; } .art-steam.s3 { animation-delay: 2.4s; } @keyframes artSteam { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .5; } 100% { opacity: 0; transform: translateY(-12px); } } .art-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: artGrow 3.4s ease-in-out infinite alternate; } .art-bar.b2 { animation-delay: .3s; } .art-bar.b3 { animation-delay: .6s; } .art-bar.b4 { animation-delay: .9s; } @keyframes artGrow { from { transform: scaleY(.55); } to { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .ob-art *, .art-wave { animation: none !important; } } .ob-choices, .ob-yesno { display: flex; flex-direction: column; gap: 10px; } .ob-choices button, .ob-yesno button { display: grid; grid-template-columns: 34px 1fr; grid-auto-rows: auto; column-gap: 12px; align-items: center; text-align: left; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; } .ob-choices button:hover, .ob-yesno button:hover { border-color: color-mix(in srgb, var(--muted) 40%, var(--line)); } .ob-choices button.on, .ob-yesno button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); } .ob-choices .obc-ic, .ob-yesno .obc-ic { grid-row: 1 / 3; font-size: 24px; } .ob-choices b, .ob-yesno b { font-size: 15px; font-weight: 700; } .ob-choices span:last-child, .ob-yesno span:last-child { font-size: 12.5px; color: var(--muted); } /* Weekly-pattern editor (Settings + onboarding) */ .weekeditor { display: flex; flex-direction: column; gap: 7px; } .we-flex { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--text); cursor: pointer; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 55%, transparent); margin-bottom: 6px; transition: border-color .15s; } .we-flex:hover { border-color: color-mix(in srgb, var(--muted) 35%, var(--line)); } .we-flex input { width: 17px; height: 17px; flex: none; accent-color: var(--accent); margin: 0; cursor: pointer; } .weekrow, .we-anyday { display: grid; grid-template-columns: 44px 46px 1fr; gap: 12px; align-items: center; padding: 9px 13px; border-radius: 12px; border: 1px solid transparent; background: color-mix(in srgb, var(--panel-2) 55%, transparent); transition: border-color .15s, opacity .15s; } .we-anyday { grid-template-columns: 46px 1fr; } .weekrow:hover { border-color: color-mix(in srgb, var(--muted) 30%, var(--line)); } .weekrow.off { opacity: .5; } .weekrow .wd-name, .we-anyday .wd-name { font-weight: 600; font-size: 13px; letter-spacing: .2px; } /* toggle switch */ .wd-toggle { width: 42px; height: 24px; padding: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); position: relative; cursor: pointer; transition: background .18s, border-color .18s; } .wd-toggle .wd-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .2s cubic-bezier(.3,.8,.3,1), background .18s; } .wd-toggle.on { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .wd-toggle.on .wd-knob { transform: translateX(18px); background: #fff; } /* time range */ .wd-times { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; } .wd-time { width: 100%; padding: 8px 10px; margin: 0; font-size: 13px; } .wd-sep { color: var(--muted); font-size: 13px; text-align: center; } .we-hint { font-size: 12px; color: var(--muted); margin: 8px 2px 0; line-height: 1.5; } /* End-of-day check-in (feedback loop) */ /* Flexes inside the fixed-height wizard card rather than claiming a fixed 52vh, which overflowed the card once the viewport got short (high zoom). */ .ci-list { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .ci-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 55%, transparent); cursor: pointer; transition: all .12s; } .ci-item.on { border-color: color-mix(in srgb, var(--easy) 50%, var(--line)); background: color-mix(in srgb, var(--easy) 10%, transparent); } .ci-item input { width: 18px; height: 18px; flex: none; accent-color: var(--easy); margin: 0; } .ci-item .ci-name { flex: 1; font-size: 14px; font-weight: 600; } .ci-item.on .ci-name { text-decoration: line-through; color: var(--muted); } .ci-item .ci-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .hs-wrap { margin-top: 14px; } .hs-carry { padding: 11px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 13px; color: var(--text); border: 1px solid color-mix(in srgb, var(--medium) 40%, var(--line)); background: color-mix(in srgb, var(--medium) 12%, transparent); } /* Person-model editors: commitments, goals, priorities */ .planeditor { display: flex; flex-direction: column; gap: 8px; } .pe-empty { font-size: 12.5px; color: var(--muted); margin: 2px 2px 6px; line-height: 1.5; } .pe-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 11px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 55%, transparent); } .pe-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pe-main b { font-size: 14px; font-weight: 700; } .pe-main span { font-size: 12px; color: var(--muted); } .pe-del { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; transition: all .12s; } .pe-del:hover { color: var(--hard); border-color: var(--hard); } .pe-add { display: flex; flex-direction: column; gap: 9px; padding: 12px 13px; border-radius: 11px; border: 1px dashed var(--line); background: color-mix(in srgb, var(--panel-2) 35%, transparent); margin-top: 2px; } .pe-add .pe-name { width: 100%; } .pe-days { display: flex; flex-wrap: wrap; gap: 6px; } .pe-day { flex: 1; min-width: 42px; padding: 7px 0; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .12s; } .pe-day.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); color: var(--text); } .pe-times { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; } .pe-times input, .pe-add input, .pe-add select { margin: 0; } .pe-grid { display: grid; grid-template-columns: 1.2fr .8fr .9fr 1fr; gap: 8px; } .pe-grid input, .pe-grid select { padding: 9px 8px; font-size: 13px; } .pe-add .btn.small { align-self: flex-start; } /* priority sliders */ .weighteditor { display: flex; flex-direction: column; gap: 13px; } .pe-weight { display: grid; grid-template-columns: 1fr 150px; gap: 12px 16px; align-items: center; } .pw-head b { font-size: 13.5px; font-weight: 700; display: block; margin-bottom: 2px; } .pw-head span { font-size: 11.5px; color: var(--muted); display: block; line-height: 1.35; } /* Custom filled slider with a percentage bubble that follows the thumb */ .pw-slide { position: relative; padding-top: 4px; } .pe-weight input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; padding: 0; border: none; border-radius: 999px; cursor: pointer; background: linear-gradient(to right, var(--accent) 0%, var(--accent-2) var(--p,50%), var(--line) var(--p,50%), var(--line) 100%); } .pe-weight input[type=range]:focus { outline: none; box-shadow: none; } .pe-weight input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 5px rgba(0,0,0,.4); cursor: pointer; transition: transform .1s ease; } .pe-weight input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); } .pe-weight input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: pointer; } .pw-bubble { position: absolute; top: -16px; transform: translateX(-50%); font-size: 10px; font-weight: 700; letter-spacing: .2px; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line)); padding: 1px 6px; border-radius: 999px; pointer-events: none; white-space: nowrap; transition: left .08s ease; } .pe-check { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--muted); cursor: pointer; line-height: 1.5; } .pe-check input { width: 16px; height: 16px; flex: none; margin-top: 1px; accent-color: var(--accent); } @media (max-width: 560px) { .pe-grid { grid-template-columns: 1fr 1fr; } .pe-weight { grid-template-columns: 1fr; gap: 6px; } } /* Per-day hours override panel (Schedule) */ .dayhours { background: color-mix(in srgb, var(--panel-2) 60%, transparent); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; margin-bottom: 16px; } .dh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .dh-label { font-size: 13px; color: var(--muted); } .dh-label b { color: var(--text); font-weight: 700; } .dh-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; } .dh-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); } .dh-edit input[type=time] { width: auto; margin: 0; padding: 8px 10px; font-size: 13px; } .ob-actions { flex: none; display: flex; gap: 10px; margin-top: 18px; } .ob-actions .btn { margin-top: 0; } .ob-actions #obBack { flex: 0 0 auto; width: auto; padding-left: 18px; padding-right: 18px; } .ob-actions #obNext { flex: 1; } .ob-skip { flex: none; display: block; width: 100%; margin-top: 12px; background: none; border: none; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 6px; } .ob-skip:hover { color: var(--text); } /* =================================================================== Visual polish — aurora bg, glass panels, gradient text, micro-motion =================================================================== */ /* animated aurora behind everything */ body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(38% 38% at 20% 20%, rgba(108,140,255,.30), transparent 62%), radial-gradient(34% 34% at 82% 14%, rgba(150,100,255,.30), transparent 62%), radial-gradient(44% 44% at 72% 82%, rgba(90,110,255,.20), transparent 62%), radial-gradient(40% 40% at 24% 86%, rgba(170,120,255,.18), transparent 62%); filter: blur(28px); } @media (prefers-reduced-motion: no-preference) { body::before { animation: aurora 24s ease-in-out infinite alternate; } @keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -2.5%, 0) scale(1.09); } 100% { transform: translate3d(-2%, 2%, 0) scale(1.05); } } } /* frosted-glass panels */ .card, .authcard, .modalbox { background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); border-color: color-mix(in srgb, var(--line) 75%, transparent); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); } .card { transition: border-color .18s ease, transform .18s ease; } .card:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } /* gradient headings */ header.app h1 { background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .authhero h1 { background: linear-gradient(120deg, var(--text), var(--accent) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* logos / avatars glow + gentle float */ .logo, .authhero .blogo, .acctavatar { box-shadow: 0 10px 26px rgba(108,140,255,.45); } @media (prefers-reduced-motion: no-preference) { .logo, .authhero .blogo { animation: floaty 5.5s ease-in-out infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* dock rises into place once the app is shown */ nav.tabs { animation: dockin .5s cubic-bezier(.2, .9, .3, 1.1) both; } @keyframes dockin { from { opacity: 0; transform: translate(-50%, 26px); } to { opacity: 1; transform: translate(-50%, 0); } } } /* primary buttons — glow + sweeping sheen on hover */ .btn { position: relative; overflow: hidden; box-shadow: 0 8px 22px rgba(108,140,255,.38); } .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-130%); transition: transform .6s ease; } .btn:hover::after { transform: translateX(130%); } .btn.secondary { box-shadow: none; } .btn.secondary::after { display: none; } /* active auth-tab as a gradient pill */ .authtabs button.active { background: linear-gradient(135deg, rgba(108,140,255,.22), rgba(138,108,255,.22)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); } /* view + modal entrance transitions */ @media (prefers-reduced-motion: no-preference) { section.view.active { animation: viewin .34s ease both; } @keyframes viewin { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .authcard { animation: pop .42s ease both; } .authhero { animation: viewin .5s ease both; } .modal { animation: fadein .2s ease both; } .modalbox { animation: pop .26s cubic-bezier(.2, .9, .3, 1.2) both; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } } } /* subtle glow on data viz + hover on list rows */ svg.curve { filter: drop-shadow(0 3px 9px rgba(108,140,255,.35)); } .ring svg { filter: drop-shadow(0 4px 16px rgba(78,203,141,.28)); } .task-item { transition: border-color .15s ease, transform .15s ease; } .task-item:hover { border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); } .stat, .slot-card { transition: border-color .15s ease; } /* nicer scrollbars (WebKit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } ::-webkit-scrollbar-track { background: transparent; } /* ----- landing page refinements ----- */ .brandrow { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; } .authhero .blogo { width: 62px; height: 62px; font-size: 35px; border-radius: 18px; } .brandname { font-weight: 800; font-size: 56px; letter-spacing: -1.5px; line-height: 1; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .feat { gap: 11px; } .feat .chip { display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--panel) 62%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 12px; padding: 11px 13px; color: var(--text); font-size: 13.5px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .15s ease, transform .15s ease; } .feat .chip:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transform: translateX(2px); } .feat .ci { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; flex: none; } .feat .ci.c1, .hpill .ci.c1 { background: rgba(108,140,255,.18); } .feat .ci.c2, .hpill .ci.c2 { background: rgba(138,108,255,.18); } .feat .ci.c3, .hpill .ci.c3 { background: rgba(255,180,84,.18); } /* ---- compact value pills (replace the old text chips) ---- */ .heropills { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; } .hpill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); padding: 7px 13px 7px 8px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 60%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .15s ease, transform .15s ease; } .hpill:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); } .hpill .ci { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; flex: none; } .authcard { position: relative; overflow: hidden; } .authcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--easy), var(--accent-2), var(--accent)); background-size: 200% 100%; } @media (prefers-reduced-motion: no-preference) { .authcard::before { animation: barsheen 6s linear infinite; } @keyframes barsheen { to { background-position: -200% 0; } } } .authcardhead { margin-bottom: 16px; text-align: center; } .authcardhead h3 { margin: 0 0 4px; font-size: 19px; letter-spacing: -.3px; } .authcardhead p { margin: 0; color: var(--muted); font-size: 13.5px; } @media (max-width: 820px) { .feat { display: flex; } .brandrow { justify-content: center; } } /* =================================================================== FX layer (fx.js) — particles, spotlight cards, tilt, shiny text, count-up glow. Inspired by reactbits.dev / 21st.dev, done in vanilla. =================================================================== */ /* particle constellation canvas sits behind the landing content */ #auth .fx-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .authwrap { position: relative; z-index: 1; } /* galaxy canvas behind the dashboard — runs in both themes (stars recolour per theme) */ .dashfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* soften the aurora a touch in light mode so it reads cleanly on white */ :root[data-theme="light"] body::before { opacity: .6; filter: blur(36px); } /* cursor-following spotlight glow on cards (fed --spot-x/--spot-y by fx.js) */ .card, .authcard { position: relative; } .card::after, .authcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s ease; background: radial-gradient(90px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%); } .card.spot::after, .authcard.spot::after { opacity: 1; } /* keep the glow behind the form controls so it never washes over what you're typing in */ .card label, .card input, .card select, .card textarea, .card .seg, .card .btn, .authcard label, .authcard input, .authcard select, .authcard textarea, .authcard .btn { position: relative; z-index: 3; } /* login card leans toward the cursor (fx.js sets inline transform) */ .authcard { transition: transform .2s ease, box-shadow .2s ease; transform-style: preserve-3d; } /* shiny sweep across the big headings */ @media (prefers-reduced-motion: no-preference) { .authhero h1, .brandname, header.app h1 { background-size: 220% auto; animation: shine 7s linear infinite; } @keyframes shine { to { background-position: 220% center; } } } /* rotating aurora glow behind the completion ring */ .ring::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: -1; background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--easy), var(--accent)); filter: blur(13px); opacity: .5; } @media (prefers-reduced-motion: no-preference) { .ring::before { animation: spin 9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } } /* count-up numbers get a tabular figure so width doesn't jitter mid-animation */ .ring .big, .streak .sv { font-variant-numeric: tabular-nums; } /* =================================================================== Dashboard "daily challenge" — three progress rings =================================================================== */ /* Home dashboard: hero, rings, an actionable "up next" card, quick stat tiles */ .home-stage { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; padding: 22px 2px 40px; } /* hero row — greeting + date on the left, streak pill on the right */ .hs-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .hs-greet-big { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; } .hs-date { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--muted); } .hs-today { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 2px 8px; border-radius: 999px; } .hs-rest { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; } .hs-streak { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px 8px 13px; box-shadow: var(--shadow); } .hs-streak .st-body { display: flex; flex-direction: column; line-height: 1.15; } .hs-streak b { color: var(--text); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; } .hs-streak .flame { font-size: 20px; line-height: 1; filter: grayscale(1) opacity(.4); } .hs-streak.on { border-color: color-mix(in srgb, var(--medium) 40%, var(--line)); } .hs-streak.on .flame { filter: none; } /* ---- scoreboard: deep work · day score · consistency ------------------- */ .ringdefs { position: absolute; width: 0; height: 0; overflow: hidden; } .scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 10px; width: 100%; max-width: 580px; margin: 2px auto 0; } .metric { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; } .metric .mlabel { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); } .metric .mnote { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.35; margin-top: -4px; } .ring.sm { width: 116px; height: 116px; } .ring.sm svg { width: 100%; height: 100%; filter: none; } .ring.sm::before { display: none; } /* no rotating conic glow on the flanking rings */ .ring.sm .big { font-size: 21px; letter-spacing: -.5px; } .ring.sm .sub { font-size: 10.5px; } .ring.sm circle.prog { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .25)); } /* the lead ring carries the headline score — bigger, lit, with a soft halo */ .metric.lead { gap: 11px; } .metric.lead .ring.sm { width: 168px; height: 168px; } .metric.lead .ring.sm::before { display: block; inset: -10px; opacity: .28; background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent)); filter: blur(18px); } /* qualified with .ring.sm so it always outranks the flanking-ring type sizes, whichever order the two rules end up in */ .metric.lead .ring.sm .big { font-size: 44px; font-weight: 800; letter-spacing: -1.6px; line-height: 1; } .metric.lead .ring.sm .sub { font-size: 11.5px; margin-top: 4px; } .metric.lead .mlabel { color: var(--text); } .metric.lead .mnote { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: -5px; } .sc-rank { font-size: 13px; font-weight: 800; letter-spacing: -.2px; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* the deadline ring carries a "done / total" pair rather than a single figure */ .metric.wide .ring.sm .big { font-size: 14px; letter-spacing: -.3px; font-weight: 800; } /* a ring centre must never wrap — it would spill outside the circle */ .ring .ringc { padding: 0 9px; } .ring .big, .ring .sub { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .due-verdict { font-weight: 700; } .due-verdict.ok { color: var(--easy); } .due-verdict.warn { color: var(--medium); } .due-verdict.bad { color: var(--hard); } .sc-delta, .hp-trend { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .sc-delta.up, .hp-trend.up { color: var(--easy); } .sc-delta.down, .hp-trend.down { color: var(--medium); } /* score-band tint: the halo warms up as the day gets better */ .scoreboard.low .metric.lead .ring.sm::before, .scoreboard.none .metric.lead .ring.sm::before { opacity: .1; } .scoreboard.elite .metric.lead .ring.sm::before { opacity: .45; } /* ---- panels shared by momentum + goals --------------------------------- */ .hs-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 14px; box-shadow: var(--shadow); } .hp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .hp-head h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); } .hp-sub { font-size: 11.5px; font-weight: 700; color: var(--muted); } /* momentum — 14 days of day-scores as bars */ .mo-bars { display: flex; align-items: flex-end; gap: 5px; height: 74px; } /* every day keeps a faint column, so a day with nothing planned reads as "no data" rather than as a missing bar */ .mo-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 6px; background: color-mix(in srgb, var(--line) 32%, transparent); } :root[data-theme="light"] .mo-bar { background: color-mix(in srgb, var(--line) 70%, transparent); } .mo-bar i { display: block; width: 100%; height: var(--h, 0%); border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, var(--accent-2)), color-mix(in srgb, var(--accent-2) 55%, transparent)); transition: height .5s cubic-bezier(.3, .9, .3, 1); } .mo-bar.on i { background: linear-gradient(180deg, var(--easy), color-mix(in srgb, var(--easy) 45%, transparent)); box-shadow: 0 0 14px color-mix(in srgb, var(--easy) 45%, transparent); } /* after .on, so the selected day with nothing planned still reads as "no data" */ .mo-bar.empty i { height: 5px; box-shadow: none; background: color-mix(in srgb, var(--muted) 45%, transparent); } .mo-foot { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11.5px; color: var(--muted); } .mo-foot b { color: var(--text); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; } /* weekly goals — target vs done, worst-first */ .gl-list { display: flex; flex-direction: column; gap: 10px; } .gl-row { display: grid; grid-template-columns: minmax(80px, 1fr) 2.1fr auto; align-items: center; gap: 12px; } .gl-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gl-bar { height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; } .gl-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .55s cubic-bezier(.3, .9, .3, 1); } .gl-row.hit .gl-bar i { background: linear-gradient(90deg, var(--easy), color-mix(in srgb, var(--easy) 60%, var(--accent))); } .gl-num { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; } .gl-num span { color: var(--muted); font-weight: 600; } .gl-row.hit .gl-num { color: var(--easy); } .gl-empty { font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer; } .gl-empty b { color: var(--accent); white-space: nowrap; } /* ---- outcomes editor (Settings) --------------------------------------- */ .oc-row .pe-main { flex: 1; min-width: 0; } .oc-verdict { font-style: normal; font-weight: 700; } .oc-verdict.ok { color: var(--easy); } .oc-verdict.warn { color: var(--medium); } .oc-verdict.bad { color: var(--hard); } .oc-slide { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .oc-slide input[type=range] { flex: 1; min-width: 0; } .oc-pct { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; } .oc-lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 8px; } .chip.outcome { background: color-mix(in srgb, var(--accent-2) 16%, transparent); border-color: color-mix(in srgb, var(--accent-2) 40%, var(--line)); } /* ---- horizon: zoom bar + week / month / year --------------------------- */ .zoombar { display: flex; gap: 4px; margin: 12px 0 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 4px; box-shadow: var(--shadow); } .zoombar button { flex: 1; padding: 8px 6px; border: none; border-radius: 8px; cursor: pointer; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; transition: color .15s, background .15s; } .zoombar button:hover { color: var(--text); } .zoombar button.active { color: var(--text); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent-2) 24%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent); } .hz-card { padding: 18px; } .hz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .hz-head h3 { margin: 0; font-size: 17px; letter-spacing: -.3px; } .hz-head span { font-size: 12.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; } .hz-empty { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.5; } /* score ramp shared by week / month / year */ .s-none { background: color-mix(in srgb, var(--line) 45%, transparent); } .s1 { background: color-mix(in srgb, var(--accent) 22%, transparent); } .s2 { background: color-mix(in srgb, var(--accent) 42%, transparent); } .s3 { background: color-mix(in srgb, var(--accent) 62%, transparent); } .s4 { background: color-mix(in srgb, var(--accent-2) 72%, transparent); } .s5 { background: linear-gradient(135deg, var(--accent), var(--accent-2)); } /* week */ .wk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .wk-col { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; padding: 9px 5px; text-align: center; cursor: pointer; transition: border-color .14s, transform .14s; } .wk-col:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); } .wk-col.today { border-color: color-mix(in srgb, var(--easy) 55%, var(--line)); } .wk-col.off { opacity: .55; } .wk-head { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); } .wk-head b { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; } .wk-head span { font-size: 15px; font-weight: 700; color: var(--text); } .wk-score { margin: 7px auto 5px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .wk-meta { font-size: 10.5px; color: var(--muted); } /* month */ .mo-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; } .mo-dow span { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: var(--muted); } .mo-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .mo-cell { position: relative; aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--line); display: grid; place-items: center; cursor: pointer; transition: transform .12s, border-color .12s; } .mo-cell:hover { transform: scale(1.07); border-color: var(--accent); } .mo-cell.blank { background: none; border: none; cursor: default; } .mo-cell.blank:hover { transform: none; } .mo-cell.today { border-color: var(--easy); box-shadow: 0 0 0 1px var(--easy); } .mo-n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .mo-dot { position: absolute; right: 3px; bottom: 2px; font-size: 9px; font-weight: 800; color: var(--muted); } /* year */ .yr-grid { display: flex; flex-direction: column; gap: 5px; } .yr-row { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px; cursor: pointer; } .yr-row:hover .yr-m { color: var(--accent); } .yr-m { font-size: 11.5px; font-weight: 800; color: var(--muted); } .yr-days { display: flex; gap: 2px; } .yr-days i { flex: 1; height: 15px; border-radius: 3px; min-width: 0; } .yr-days i.today { box-shadow: 0 0 0 1.5px var(--easy); } .yr-avg { font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); } .hz-legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 10.5px; color: var(--muted); } .hz-legend i { width: 14px; height: 14px; border-radius: 3px; } .hz-legend span:last-child { margin-left: 2px; } /* outcomes strip inside a horizon view */ .hz-oc { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; } .hz-oc h4 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); } .hz-ocrow { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line); margin-bottom: 8px; } .hz-ocrow.warn { border-color: color-mix(in srgb, var(--medium) 40%, var(--line)); } .hz-ocrow.bad { border-color: color-mix(in srgb, var(--hard) 45%, var(--line)); } .hz-octop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .hz-octop b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hz-octop span { font-size: 11.5px; color: var(--muted); white-space: nowrap; } .hz-ocfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); } .hz-ocrow.warn .gl-bar i { background: linear-gradient(90deg, var(--medium), var(--accent-2)); } .hz-ocrow.bad .gl-bar i { background: linear-gradient(90deg, var(--hard), var(--medium)); } @media (max-width: 560px) { .wk-grid { gap: 3px; } .wk-col { padding: 7px 2px; } .wk-score { width: 30px; height: 30px; font-size: 12px; } .wk-meta { font-size: 9px; } .yr-row { grid-template-columns: 28px 1fr 24px; gap: 5px; } .yr-days i { height: 12px; } } /* deadlines — one block per due date, carrying task completion and pace */ .dl-row { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--line); } .dl-row.warn { border-color: color-mix(in srgb, var(--medium) 40%, var(--line)); } .dl-row.bad { border-color: color-mix(in srgb, var(--hard) 45%, var(--line)); } .dl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .dl-top b { font-size: 14px; font-weight: 700; letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-when { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; } .dl-row.bad .dl-when { color: var(--hard); } .dl-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .dl-more { font-size: 12.5px; font-weight: 700; color: var(--accent); cursor: pointer; padding: 2px 2px 0; } .dl-more:hover { text-decoration: underline; } .dl-row.warn .gl-bar i { background: linear-gradient(90deg, var(--medium), var(--accent-2)); } .dl-row.bad .gl-bar i { background: linear-gradient(90deg, var(--hard), var(--medium)); } /* "up next" — the single most useful thing to look at */ .hs-next { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .15s, transform .12s; } .hs-next[data-goto] { cursor: pointer; } .hs-next[data-goto]:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--muted) 40%, var(--line)); } .hs-next.live { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } .hs-next .hn-when { font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); align-self: flex-start; padding-top: 2px; min-width: 52px; } .hs-next.live .hn-when { color: var(--accent); } .hs-next .hn-ic { font-size: 22px; line-height: 1; width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); } .hs-next .hn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .hs-next .hn-body b { font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; word-break: break-word; } .hs-next .hn-body span { font-size: 12.5px; color: var(--muted); } .hs-next .hn-cta { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; } /* quick stat tiles */ .hs-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .hs-tile { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; text-align: center; } .hs-tile b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.3px; } .hs-tile span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; } .hs-tile.warn b { color: var(--medium); } @media (max-width: 560px) { .home-stage { padding: 18px 2px 32px; gap: 18px; } .hs-greet-big { font-size: 22px; } /* score leads on its own row; the two supporting rings sit underneath */ .scoreboard { grid-template-columns: 1fr 1fr; gap: 14px 6px; } .metric.lead { grid-column: 1 / -1; order: -1; } .metric.lead .ring.sm { width: 152px; height: 152px; } .metric.lead .ring.sm .big { font-size: 40px; } .ring.sm { width: 30vw; height: 30vw; max-width: 116px; max-height: 116px; } .ring.sm .big { font-size: 18px; } .ring.sm .sub { font-size: 10px; } .metric .mlabel { font-size: 10px; letter-spacing: .4px; } .metric .mnote { font-size: 10px; } .hs-panel { padding: 14px 15px 12px; } .mo-bars { height: 62px; gap: 4px; } .gl-row { grid-template-columns: minmax(70px, 1fr) 1.5fr auto; gap: 9px; } .hs-tiles { grid-template-columns: repeat(2, 1fr); } .hs-tile b { font-size: 17px; } .dl-foot { flex-direction: column; gap: 2px; } } /* ===================== LANDING — visual screens below the choice ===================== */ /* "scroll to learn more" — the control that moves you off page 1. Styled as a real pill button (it is the only affordance on the phone's first screen), but it stays an so it still navigates with JS off. */ .scrollcue { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; padding: 9px 18px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); /* sits on the opaque hero, so a blur buys nothing and costs a frame */ background: color-mix(in srgb, var(--accent) 12%, var(--panel)); transition: color .15s ease, border-color .15s ease, background .15s ease; } .scrollcue:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 15%, transparent); } .scrollcue:active { transform: scale(.97); } .scrollcue .cue-arrow { font-size: 18px; line-height: 1; } /* NOTE: page 3 used to carry `margin-top: -100vh`, meant to close a gap after the dive. It did the opposite. The hero panel is sticky inside a taller wrapper, so once it un-sticks it comes to rest over the wrapper's LAST viewport — exactly the 100vh the negative margin pulled page 3 into. The panel is opaque and sits at z-index 3 above .visualscreen's z-index 1, so page 3 was parked underneath it and never became visible at any scroll position; you went from the dive straight into "How it works". Without the margin the two are simply adjacent: the panel slides up and page 3 rises in behind it, which is the intended hand-off and leaves no gap, because there is nothing between them to leave one. */ /* Screens 2-4 — full-height centred visual sections */ .visualscreen { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 80px 24px; max-width: 760px; margin: 0 auto; text-align: center; } .vs-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); } .vs-title { font-size: 46px; line-height: 1.08; letter-spacing: -1px; margin: 0; max-width: 680px; } .vs-sub { color: var(--muted); font-size: 16px; margin: 0 auto 6px; max-width: 470px; } .visualscreen .herofx { margin: 12px auto 8px; } .visualscreen .snapsched { margin: 0 auto; max-width: 380px; } .visualscreen .heropills { justify-content: center; } .visualscreen.cta .blogo.big { width: 74px; height: 74px; border-radius: 20px; margin-bottom: 4px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; box-shadow: 0 14px 34px rgba(108,140,255,.45); } .ctabtn { width: 100%; max-width: 320px; margin-top: 8px; font-size: 15px; padding: 13px; } /* ---- PAGE 3 — the phone's home screen, blown up to full screen ---- The dive ends by dissolving the phone; this is what you land on, so it shows the SAME content. It reuses the mock's .ph-* markup verbatim and only scales the type/rings up, so the two stay in sync by construction. */ .fullapp { max-width: 620px; } .fa-board { width: 100%; margin-top: 10px; display: flex; flex-direction: column; gap: 20px; background: linear-gradient(180deg, rgba(148,163,255,.08), rgba(148,163,255,.02)); border: 1px solid rgba(148,163,255,.16); border-radius: 26px; padding: 24px 22px 26px; box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); } .fa-board .ph-hero { margin-top: 0; } .fa-board .ph-greet { font-size: 23px; } .fa-board .ph-greet .ph-date { font-size: 12px; } .fa-board .ph-streak { padding: 8px 14px; gap: 9px; } .fa-board .ph-streak .flame { font-size: 21px; } .fa-board .ph-stk-b b { font-size: 15px; } .fa-board .ph-stk-b span { font-size: 11px; } .fa-board .ph-score { gap: 10px; margin: 2px 0; } .fa-board .ph-metric { gap: 8px; } .fa-board .ph-metric em { font-size: 11px; } .fa-board .ph-rank { font-size: 12px; } .fa-board .ph-ring.sm { width: 82px; height: 82px; } .fa-board .ph-ring.big { width: 152px; height: 152px; } .fa-board .ph-ring.big::before { inset: -14px; filter: blur(20px); } .fa-board .ph-ring.sm .ph-rc b { font-size: 20px; } .fa-board .ph-ring.big .ph-rc b { font-size: 48px; letter-spacing: -1.6px; } .fa-board .ph-rc span { font-size: 11px; margin-top: 4px; } .fa-board .ph-next { padding: 14px 16px; gap: 13px; border-radius: 16px; } .fa-board .ph-nic { font-size: 20px; } .fa-board .ph-nwhen { font-size: 10.5px; } .fa-board .ph-nbody b { font-size: 16px; } .fa-board .ph-narr { font-size: 22px; } .fa-board .ph-mo { gap: 10px; } .fa-board .ph-mo-head { font-size: 11.5px; } .fa-board .ph-bars { height: 62px; gap: 5px; } /* feature "wall" — parallax columns of glass tiles (fx.js drives --data-speed) */ .wallscreen { gap: 14px; max-width: 820px; } .portrait-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 12px; } .wall-col { display: flex; flex-direction: column; gap: 16px; will-change: transform; } .wall-col:nth-child(2) { margin-top: 34px; } /* offset middle column for a woven look */ .wall-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; /* nine of these are parallaxed on every scroll frame by initWall — a blurred backdrop on each one is nine backdrop re-rasters per frame, for a blur you can't see behind an almost-opaque tile */ background: color-mix(in srgb, var(--panel-2) 96%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 14px; padding: 15px 16px; text-align: left; box-shadow: 0 14px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color .15s ease, transform .15s ease; } .wall-tile:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); } .wall-tile .wt-ic { font-size: 22px; line-height: 1.2; } .wall-tile b { font-size: 14px; font-weight: 700; } .wall-tile span { font-size: 12px; color: var(--muted); line-height: 1.4; } @media (max-width: 640px) { .portrait-wall { gap: 11px; } .wall-col { gap: 11px; } .wall-col:nth-child(2) { margin-top: 22px; } .wall-tile { padding: 12px; border-radius: 12px; } .wall-tile .wt-ic { font-size: 19px; } .wall-tile b { font-size: 12.5px; } .wall-tile span { font-size: 11px; } } @media (prefers-reduced-motion: no-preference) { .scrollcue .cue-arrow { animation: cueBounce 1.8s ease-in-out infinite; } .visualscreen.cta .blogo.big { animation: floaty 5.5s ease-in-out infinite; } @keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } } /* Each screen snaps into place, and fades/​rises in as it enters the viewport, fading back out as it leaves — so moving down reads as changing screens rather than scrolling. Reveal is gated on `.reveal-ready` (added by fx.js) so the page still shows everything if JS is off; disabled entirely under reduced-motion. */ @media (prefers-reduced-motion: no-preference) { #auth.reveal-ready > .visualscreen, #auth.reveal-ready > .showcase { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; } #auth.reveal-ready > .inview { opacity: 1; transform: none; } } @media (max-width: 820px) { .vs-title { font-size: 31px; } } /* Phone: the landing reads as six discrete pages, each one screen tall — 1 motto · 2 phone · 3 the app full screen · 4 how it works · 5 the lineup · 6 the closing CTA + footer. .hero-scroll's height budgets that: the sticky panel is pinned for the first (height − 100svh) = 180svh, which is what fx.js scrubs the dive over — part the motto and raise the phone, hold on the phone, then zoom-and-dissolve — and the last 100svh is the panel sliding up to hand over to page 3. That final screen is structural, not padding: a sticky element always trails its own height. */ @media (max-width: 640px) { /* svh throughout, to match the sticky stage — see the note on the hero above */ .hero-scroll { height: 280svh; } .visualscreen { min-height: 100svh; padding: 78px 22px 60px; gap: 13px; } .showcase { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 60px 22px; margin: 0 auto; } .vs-sub { font-size: 15px; } /* page 3 has the tallest content of any section — trim it to fit one screen */ .fullapp .vs-title { font-size: 26px; } .fullapp { gap: 8px; } .fa-board { margin-top: 4px; gap: 14px; padding: 16px 14px 18px; border-radius: 20px; } .fa-board .ph-greet { font-size: 18px; } .fa-board .ph-score { gap: 4px; } .fa-board .ph-ring.sm { width: 64px; height: 64px; } .fa-board .ph-ring.big { width: 118px; height: 118px; } .fa-board .ph-ring.sm .ph-rc b { font-size: 16px; } .fa-board .ph-ring.big .ph-rc b { font-size: 37px; } .fa-board .ph-next { padding: 11px 13px; } .fa-board .ph-nbody b { font-size: 14px; } .fa-board .ph-bars { height: 42px; } } /* ---- hero animated product display (energy curve + slotted tasks) ---- */ .herofx { position: relative; margin: 24px 0 20px; max-width: 460px; } /* soft glow pool so the floating cards sit in light */ .herofx::before { content: ""; position: absolute; inset: -14% -8%; z-index: -1; pointer-events: none; filter: blur(28px); background: radial-gradient(52% 56% at 32% 52%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%), radial-gradient(44% 52% at 66% 40%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 72%); } .snapsched { display: flex; flex-direction: column; gap: 9px; max-width: 340px; } .snaprow { position: relative; display: flex; align-items: center; gap: 11px; text-align: left; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%), color-mix(in srgb, var(--panel-2) 90%, transparent); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text); box-shadow: 0 16px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .snaprow .st { color: var(--muted); font-size: 11.5px; font-weight: 700; min-width: 37px; } .snaprow .sbar { width: 4px; align-self: stretch; min-height: 16px; border-radius: 3px; background: var(--accent); } .snaprow .sbar.hard { background: var(--hard); } .snaprow .sbar.med { background: var(--medium); } .snaprow .sbar.easy { background: var(--easy); } .snaprow .sbar.brk { background: color-mix(in srgb, var(--line) 90%, transparent); } .snaprow .sn { flex: 1; } .snaprow .sd { font-size: 12.5px; } .snaprow .brkname { color: var(--muted); font-style: italic; font-weight: 500; } /* jumbled → snapped-into-order loop (see index.html hero) */ @media (prefers-reduced-motion: no-preference) { .snaprow { animation: snapIn 7.5s cubic-bezier(.2,.8,.3,1) infinite both; will-change: transform, opacity; } .snaprow.r2 { animation-delay: .1s; } .snaprow.r3 { animation-delay: .2s; } .snaprow.r4 { animation-delay: .3s; } @keyframes snapIn { 0% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.9); } 7% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.9); } 22% { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.9); animation-timing-function: cubic-bezier(.34, 1.5, .4, 1); } 36% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 97% { opacity: 0; transform: none; } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.9); } } } /* =================================================================== Feature carousel (fx.js initCarousel) — "How it works" showcase =================================================================== */ .showcase { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 40px 24px 96px; } .showcase-head { text-align: center; max-width: 640px; margin: 0 auto 30px; } .showcase-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .showcase-title { font-size: 27px; line-height: 1.15; letter-spacing: -.6px; margin: 0; } .carousel { display: flex; flex-direction: column; gap: 26px; } .carousel-card { position: relative; border-radius: 22px; overflow: hidden; outline: none; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); } /* cursor-following glow (fed --x/--y by fx.js) */ .carousel-card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(230px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%); } .carousel-inner { position: relative; min-height: 340px; padding: 36px; } .carousel-text { position: relative; z-index: 3; max-width: 46%; } .carousel-text .c-step { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .carousel-text .c-title { font-size: 25px; line-height: 1.15; letter-spacing: -.4px; margin: 10px 0 12px; } .carousel-text .c-desc { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 440px; margin: 0; } .carousel-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 32px 32px 32px 48%; } .carousel-nav { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; } .carousel-nav button { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); cursor: pointer; border-radius: 999px; padding: 7px 14px 7px 8px; font-size: 13.5px; font-weight: 600; background: var(--panel-2); color: var(--muted); transition: background .25s, color .25s, border-color .25s, transform .25s; } .carousel-nav button:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .carousel-nav button.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; transform: scale(1.04); box-shadow: 0 8px 20px rgba(108,140,255,.35); } .carousel-nav .c-num { width: 21px; height: 21px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--line); color: var(--text); } .carousel-nav .c-num.done { background: var(--accent); color: #fff; } .carousel-nav button.active .c-num { background: rgba(255,255,255,.28); color: #fff; } /* entrance animations (re-run because fx.js rebuilds the nodes each step) */ @media (prefers-reduced-motion: no-preference) { .carousel-text .c-step { animation: cText .45s .04s both; } .carousel-text .c-title { animation: cText .45s .1s both; } .carousel-text .c-desc { animation: cText .45s .16s both; } .carousel-stage .c-img { animation: cImg .55s both; } @keyframes cText { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } @keyframes cImg { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } } /* ---- animated mockups shown in the carousel stage ---- */ .mock { width: 100%; max-width: 302px; } .mock .mset, .mtasks .mai, .mchip, .mslot { background: color-mix(in srgb, var(--panel-2) 88%, transparent); border: 1px solid color-mix(in srgb, var(--line) 82%, transparent); box-shadow: 0 16px 38px rgba(0,0,0,.30); } /* step 1 — setup card */ .mset { border-radius: 16px; padding: 15px 16px 13px; } .mset .mrow { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); } .mset .mrow:first-child { border-top: none; padding-top: 2px; } .mset .mk { color: var(--muted); font-size: 12.5px; } .mset .mv { font-weight: 700; font-size: 12.5px; } .mset .mcurve { width: 100%; height: 46px; margin-top: 10px; } .mset .mc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; } /* step 2 — AI parse */ .mai { position: relative; border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--text); } .mcaret { display: inline-block; width: 2px; height: 13px; background: var(--accent); vertical-align: -2px; margin-left: 1px; } .mchips { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .mchip { display: flex; align-items: center; gap: 9px; border-radius: 10px; padding: 9px 11px; font-size: 12.5px; font-weight: 600; } .mchip em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 11px; color: var(--muted); } .mchip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot.hard { background: var(--hard); } .dot.med { background: var(--medium); } .dot.easy { background: var(--easy); } /* step 3 — schedule timeline */ .msched { display: flex; flex-direction: column; gap: 8px; } .mslot { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); border-left: 3px solid var(--accent); } .mslot em { font-style: normal; color: var(--muted); font-size: 11px; font-weight: 700; min-width: 36px; } .mslot b { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .4px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; } .mslot.hard { border-left-color: var(--hard); } .mslot.hard b { background: color-mix(in srgb, var(--hard) 18%, transparent); color: var(--hard); } .mslot.med { border-left-color: var(--medium); } .mslot.med b { background: color-mix(in srgb, var(--medium) 20%, transparent); color: var(--medium); } .mslot.easy { border-left-color: var(--easy); } .mslot.brk { border-left-color: color-mix(in srgb, var(--line) 90%, transparent); color: var(--muted); font-style: italic; box-shadow: none; opacity: .8; } /* step 4 — streak rings + week */ .mstreak { text-align: center; } .mrings { display: flex; justify-content: center; gap: 16px; } .mring { display: flex; flex-direction: column; align-items: center; gap: 1px; } .mring svg { width: 62px; height: 62px; } .mring-v { font-weight: 800; font-size: 13px; } .mring-s { font-size: 10.5px; color: var(--muted); } .mring-p { stroke-dashoffset: var(--o); } .mweek { display: flex; justify-content: center; gap: 7px; margin-top: 16px; } .mweek .d { width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); } .mweek .d.on { background: color-mix(in srgb, var(--easy) 22%, transparent); border-color: color-mix(in srgb, var(--easy) 40%, var(--line)); } .mweek .d.today { background: color-mix(in srgb, var(--medium) 22%, transparent); border-color: color-mix(in srgb, var(--medium) 45%, var(--line)); } /* mockup entrance animations — replay each cycle because fx.js rebuilds the nodes */ @media (prefers-reduced-motion: no-preference) { .mset .mrow { animation: mIn .5s ease both; } .mset .mrow:nth-child(2) { animation-delay: .08s; } .mset .mrow:nth-child(3) { animation-delay: .16s; } .mset .mc-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hfDraw 1.3s cubic-bezier(.4,0,.2,1) .3s forwards; } .mcaret { animation: mBlink 1s steps(1) infinite; } .mchip { animation: mPop .5s cubic-bezier(.2,.9,.3,1.3) both; } .mchip.c1 { animation-delay: .35s; } .mchip.c2 { animation-delay: .5s; } .mchip.c3 { animation-delay: .65s; } .mslot { animation: mIn .5s cubic-bezier(.2,.9,.3,1.1) both; } .mslot.s1 { animation-delay: .1s; } .mslot.s2 { animation-delay: .22s; } .mslot.s3 { animation-delay: .34s; } .mslot.s4 { animation-delay: .46s; } .mring-p { stroke-dashoffset: var(--c); animation: mRing 1.1s cubic-bezier(.4,0,.2,1) .25s forwards; } .mweek .d { animation: mPop .45s cubic-bezier(.2,.9,.3,1.3) both; } .mweek .d:nth-child(1){animation-delay:.1s} .mweek .d:nth-child(2){animation-delay:.17s} .mweek .d:nth-child(3){animation-delay:.24s} .mweek .d:nth-child(4){animation-delay:.31s} .mweek .d:nth-child(5){animation-delay:.38s} .mweek .d:nth-child(6){animation-delay:.45s} .mweek .d:nth-child(7){animation-delay:.55s} @keyframes mIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } @keyframes mPop { 0% { opacity: 0; transform: translateY(9px) scale(.85); } 100% { opacity: 1; transform: none; } } @keyframes mBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } } @keyframes mRing { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--o); } } } @media (max-width: 720px) { .carousel-inner { min-height: 0; padding: 24px; } .carousel-text { max-width: 100%; } .carousel-stage { position: relative; inset: auto; padding: 0; height: auto; margin-top: 22px; } .mock { margin: 0 auto; } .showcase-title { font-size: 22px; } .carousel-nav .c-name { display: none; } .carousel-nav button { padding: 7px; } } /* =================================================================== Landing site footer — brand, legal links, contact =================================================================== */ .sitefooter { position: relative; z-index: 1; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sitefooter-inner { max-width: 1000px; margin: 0 auto; padding: 30px 24px calc(40px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .sitefooter .sf-brand { display: inline-flex; align-items: center; gap: 9px; } .sitefooter .sf-brand .blogo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; box-shadow: var(--shadow); } .sitefooter .sf-brand .skelly { width: 19px; height: 19px; } .sitefooter .sf-name { font-weight: 800; letter-spacing: -.3px; font-size: 16px; color: var(--text); } .sitefooter .sf-name sup { font-size: 9px; font-weight: 700; color: var(--muted); } .sitefooter .sf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; } .sitefooter .sf-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .18s ease; } .sitefooter .sf-links a:hover { color: var(--text); } .sitefooter .sf-copy { margin: 0; color: var(--muted); font-size: 12.5px; } .sitefooter .sf-tm { margin: 0; color: var(--muted); font-size: 11.5px; opacity: .85; } .sitefooter .sf-tm a { color: var(--muted); text-decoration: none; } .sitefooter .sf-tm a:hover { color: var(--text); }