/* =========================================================================== TOKENS Taken verbatim from the Claude Design prototype (Locked In.dc.html). The design's own names are declared first, because every value in the app should trace back to a line in that file; the --wa-* aliases below exist only so the screens written against the older token names keep resolving. The fonts are declared on :root as well — [data-wa] sits on .shell, a child of , so anything declared only there is invisible to body itself and the document falls back to Times New Roman. =========================================================================== */ :root{ --wa-font:-apple-system,'SF Pro Display','SF Pro Text','Helvetica Neue',system-ui,'Segoe UI',sans-serif; --wa-label:var(--wa-font); } [data-wa]{ color:var(--ink); font-family:var(--wa-font); /* --- the design's palette, night --------------------------------------- */ --bg:#03070D; --bg2:#07111D; --navy:#081625; --sky0:#16304A; --sky1:#0C1D2E; --sky2:#071320; --sky3:#030A12; --m1:#16293C; --m2:#0D1B29; --m3:#060D16; --snow:#DCEBFA; --rock:rgba(0,0,0,.34); --water1:#08151F; --water2:#03080E; --moonOp:.5; --orb1:rgba(222,243,255,.46); --orb2:rgba(92,152,216,.13); --orb3:rgba(8,24,42,.62); --orbEdge:rgba(4,12,22,.5); --rim1:rgba(230,247,255,.92); --rim2:rgba(122,182,240,.22); --veil:rgba(3,7,13,.55); --photoVeil:rgba(3,7,13,0); --halo:0 1px 12px rgba(3,7,13,.9),0 0 2px rgba(3,7,13,.9); --ink:#F5F8FC; --ink2:#AAB8C8; --ink3:#7C8B9C; --ice:#9CCBFF; --frost:#D9EDFF; --acc:#3E8FE8; --gold:#E8C88C; --g1:rgba(255,255,255,.045); --g2:rgba(255,255,255,.075); --g3:rgba(255,255,255,.13); --gb:rgba(255,255,255,.10); --gb2:rgba(217,237,255,.22); --blur:blur(28px) saturate(150%); --hair:inset 0 1px 0 rgba(217,237,255,.16); --soft:0 18px 40px -24px rgba(0,3,8,.9); --star:rgba(217,237,255,.85); --fog:rgba(120,160,200,.10); /* --- aliases the existing screens are written against ------------------ */ --wa-env:var(--bg); --wa-env2:var(--bg2); --wa-env3:var(--navy); --wa-env4:var(--sky0); --wa-c0:var(--g1); --wa-c0-brd:var(--gb); --wa-s1:var(--g1); --wa-s2:var(--g2); --wa-s3:var(--g3); --wa-brd:var(--gb); --wa-brd2:var(--gb2); --wa-ink:var(--ink); --wa-ink2:var(--ink2); --wa-ink3:var(--ink3); --wa-ivory:var(--frost); --wa-cy:var(--acc); --wa-cy2:var(--ice); --wa-cyt:var(--ice); --wa-bl:var(--acc); --wa-gold:var(--gold); --wa-gold2:var(--gold); --wa-track:var(--gb2); --wa-blur:var(--blur); --wa-grad:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,0) 52%,rgba(255,255,255,.03)); --wa-lift:var(--hair),var(--soft); --wa-lift2:var(--hair),0 28px 56px -26px rgba(0,3,8,.95); --wa-sh:0 50px 100px -40px rgba(0,4,10,.9); --wa-glow:0 0 0 1px rgba(62,143,232,.24),0 0 34px -12px rgba(62,143,232,.4); --wa-blue:linear-gradient(170deg,var(--ice),var(--acc) 58%,#2C6FBE); --wa-blueSh:0 12px 26px -10px rgba(62,143,232,.8),inset 0 1px 0 rgba(255,255,255,.35); } /* Frosted Alpine Day: the same world in daylight, not the night theme inverted. */ [data-wa="light"]{ --bg:#EEF4FA; --bg2:#F7FAFD; --navy:#DCE8F4; --sky0:#BFD9F0; --sky1:#D8E8F7; --sky2:#EDF4FB; --sky3:#F8FBFE; --m1:#AFC9E0; --m2:#C8DCEE; --m3:#DCE9F5; --snow:#FFFFFF; --rock:rgba(40,80,120,.18); --water1:#CFE1F1; --water2:#EAF2FA; --moonOp:0; --orb1:rgba(255,255,255,.9); --orb2:rgba(178,215,247,.34); --orb3:rgba(126,170,214,.3); --orbEdge:rgba(90,135,180,.26); --rim1:rgba(255,255,255,1); --rim2:rgba(130,178,226,.45); --veil:rgba(238,244,250,.6); --photoVeil:rgba(238,244,250,.42); --halo:0 1px 10px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.95); --ink:#0D2035; --ink2:#3A4D62; --ink3:#46596E; --ice:#2E6FB0; --frost:#0D2035; --acc:#2C7BE0; --gold:#A9822F; --g1:rgba(255,255,255,.55); --g2:rgba(255,255,255,.75); --g3:rgba(255,255,255,.95); --gb:rgba(13,32,53,.14); --gb2:rgba(13,32,53,.26); --hair:inset 0 1px 0 rgba(255,255,255,.9); --soft:0 18px 38px -22px rgba(20,50,80,.28); --star:rgba(255,255,255,0); --fog:rgba(255,255,255,.5); --wa-grad:linear-gradient(158deg,rgba(255,255,255,.85),rgba(255,255,255,.3) 50%,rgba(255,255,255,.6)); --wa-sh:0 44px 88px -40px rgba(20,50,80,.34); --wa-glow:0 0 0 1px rgba(44,123,224,.26),0 0 30px -12px rgba(44,123,224,.36); } [data-motion]{ --d:.6s; --d2:.34s; --e:cubic-bezier(.22,1,.36,1); --sp:cubic-bezier(.34,1.5,.5,1); --sh:18px; --wa-d:var(--d); --wa-d2:var(--d2); --wa-ease:var(--e); --wa-spring:var(--sp); --wa-shift:var(--sh); --wa-scale:.985; } [data-motion="cinematic"]{--d:1s; --d2:.54s; --e:cubic-bezier(.16,1,.3,1); --sh:32px; --wa-scale:.96} [data-motion="crisp"]{--d:.28s; --d2:.16s; --e:cubic-bezier(.3,1.2,.5,1); --sh:8px; --wa-scale:.995} /* The design's motion vocabulary. The wa* names are kept as aliases because the screens animate by name. */ @keyframes rise{from{opacity:0;transform:translate3d(0,var(--sh),0)}to{opacity:1;transform:none}} @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes zoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}} @keyframes pop{0%{transform:scale(.82);opacity:0}62%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}} @keyframes bubble{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} @keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.015);opacity:1}} @keyframes shimmer{0%,100%{opacity:.35}50%{opacity:.75}} @keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3%,-1.5%,0)}} @keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}} @keyframes trace{from{stroke-dashoffset:520}to{stroke-dashoffset:0}} @keyframes dots{0%,60%,100%{opacity:.22;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes waIn{from{opacity:0;transform:translate3d(0,var(--sh),0)}to{opacity:1;transform:none}} @keyframes waIn3d{from{opacity:0;transform:translate3d(0,var(--sh),0)}to{opacity:1;transform:none}} @keyframes waFade{from{opacity:0}to{opacity:1}} @keyframes waZoom{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}} @keyframes waPop{0%{transform:scale(.82);opacity:0}62%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}} @keyframes waBubble{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} @keyframes waBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.015);opacity:1}} @keyframes waGlowPulse{0%,100%{opacity:.35}50%{opacity:.75}} @keyframes waDrift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3%,-1.5%,0)}} @keyframes waDraw{from{stroke-dashoffset:520}to{stroke-dashoffset:0}} @keyframes waDot{0%,60%,100%{opacity:.22;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} @keyframes waSpin{to{transform:rotate(360deg)}} @keyframes waOrbit{to{transform:rotate(-360deg)}} @keyframes waSheen{0%{transform:translateX(-130%) skewX(-14deg);opacity:0}20%{opacity:.85}60%{opacity:.4}100%{transform:translateX(130%) skewX(-14deg);opacity:0}} /* Base styles */ body{ margin:0; background:var(--wa-env); -webkit-font-smoothing:antialiased; font-family:'Instrument Sans',system-ui,sans-serif; color:var(--wa-ink); } a{ color:#5FEBFF; text-decoration:none; } a:hover{ color:#9df3ff; } input{ font:inherit; color:inherit; background:none; border:0; outline:none; } input::placeholder{ color:#7E8FA1; } ::-webkit-scrollbar{ width:0; height:0; } :focus-visible{ outline:2px solid var(--wa-cy); outline-offset:2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ * { animation-duration:.01ms!important; transition-duration:.01ms!important; } } /* Page wrapper */ .page{ min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; padding:28px 16px 40px; background:radial-gradient(110% 70% at 50% -5%,var(--wa-env2),var(--wa-env) 68%); transition:background var(--wa-d) var(--wa-ease); } /* App shell frame */ .shell{ position:relative; width:100%; overflow:hidden; background:var(--wa-env); isolation:isolate; } @media (max-width: 520px){ /* A min-height shell plus .page padding pushed the tab bar below the fold on a real phone. The shell is the viewport here, not a card inside one. */ .page{ padding:0; } .shell{ height:100dvh; min-height:0; border-radius:0; border:none; box-shadow:none; } } @media (min-width: 521px){ .shell{ max-width:420px; height:880px; border-radius:46px; border:1px solid var(--wa-brd); box-shadow:var(--wa-sh); } } /* =========================================================================== THE WORLD Four layers, in the order the design stacks them: 1. an SVG sky with the moon halo and stars (built in environment.js) 2. a photographic alpine plate, masked at both ends so it dissolves into the sky rather than ending on a cut 3. a fog band drifting across the middle of the frame 4. a veil that darkens the top and bottom so content stays legible The plate is the reason the app reads as photography rather than as an illustration, and the mask is the reason it reads as part of the frame rather than as a picture placed inside it. =========================================================================== */ .env-host, .env-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; } .env-plate{ position:absolute; left:-6%; right:-6%; top:120px; height:790px; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 74%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 16%,#000 74%,transparent 100%); } .env-plate-img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; animation:drift 70s ease-in-out infinite; } .env-plate-veil{ position:absolute; inset:0; background:var(--photoVeil); } .env-fog{ position:absolute; left:0; right:0; top:520px; height:300px; background:linear-gradient(to bottom,transparent,var(--fog) 50%,transparent); pointer-events:none; animation:drift 62s ease-in-out infinite reverse; } .env-veil{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,var(--bg) 0%,transparent 18%,transparent 56%,var(--veil) 82%,var(--bg) 100%); } /* Top bar */ .topbar{ position:absolute; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between; padding:16px 22px 14px; background:linear-gradient(to bottom,var(--wa-env) 28%,transparent); } .topbar-branding{ display:flex; align-items:center; gap:9px; } .topbar-icon{ width:14px; height:14px; flex-shrink:0; animation:waSpin 80s linear infinite; } .topbar-title{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em; color:var(--wa-ink2); } .topbar-right{ display:flex; align-items:center; gap:10px; } .topbar-level{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; color:var(--wa-ink3); } .theme-toggle{ position:relative; width:46px; height:26px; border-radius:9999px; background:var(--wa-s1); border:1px solid var(--wa-brd); cursor:pointer; box-shadow:inset 0 2px 5px rgba(0,0,0,.4); backdrop-filter:var(--wa-blur); transition:background var(--wa-d2) var(--wa-ease); } .theme-toggle-thumb{ position:absolute; top:2.5px; left:2.5px; width:20px; height:20px; border-radius:9999px; background:linear-gradient(160deg,#fff,#cfd9e4); box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 1px 0 #fff; transition:transform var(--wa-d2) var(--wa-spring); } .theme-toggle-thumb.light{ transform:translateX(20px); } /* Scroll container */ .scroll{ position:absolute; inset:0; z-index:2; overflow-y:auto; overflow-x:hidden; padding:56px 18px calc(140px + env(safe-area-inset-bottom)) 18px; scrollbar-width:none; } /* The bar was a 7px-padded capsule in saturated blue glass spanning the full width — it read as a piece of furniture bolted to the bottom of the screen rather than as a layer floating over content. It is now narrower, darker, and it gets out of the way while you scroll. */ .tabbar{ position:absolute; bottom:calc(14px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(100% - 28px,420px); z-index:10; display:flex; align-items:flex-end; padding:5px; border-radius:9999px; background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 50%,rgba(255,255,255,.04)),rgba(7,16,28,.62); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(30px) saturate(180%); -webkit-backdrop-filter:blur(30px) saturate(180%); box-shadow:0 18px 40px -22px rgba(0,2,6,.95),inset 0 1px 0 rgba(255,255,255,.13); transition: opacity var(--wa-d2) var(--wa-ease), transform var(--wa-d) var(--wa-ease), padding var(--wa-d2) var(--wa-ease); } [data-wa="light"] .tabbar{ background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.62) 50%,rgba(255,255,255,.82)),rgba(245,250,255,.7); border-color:rgba(13,27,46,.10); box-shadow:0 18px 40px -24px rgba(13,40,70,.35),inset 0 1px 0 rgba(255,255,255,.9); } /* Scrolling down means the user is reading, so the bar shrinks to its glyphs and hands the space back to the content. Scrolling up means they are looking for a way out, so it returns in full. */ .tabbar.minimized{ transform:translateX(-50%) translateY(6px) scale(.9); opacity:.82; } .tabbar.minimized .tab-label, .tabbar.minimized .tab-lock-label{ opacity:0; max-height:0; padding-bottom:0; } /* The selector used to be a full-height capsule spanning the whole slot, so it read as a slab sitting behind the label rather than as focus on the icon. It is now a circle centred on the glyph; the slot-wide wrapper is only there so the existing translateX(index * 100%) keeps positioning it. */ .tabbar-pill{ position:absolute; top:5px; left:5px; bottom:5px; width:calc((100% - 10px) / 5); display:flex; align-items:flex-start; justify-content:center; pointer-events:none; transition:transform var(--wa-d2) var(--wa-spring),opacity var(--wa-d2) var(--wa-ease); } .tabbar-pill::before{ content:''; width:38px; height:38px; border-radius:9999px; background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 55%,rgba(255,255,255,.08)); border:1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 16px -10px rgba(0,2,6,.9); backdrop-filter:blur(18px) saturate(190%); -webkit-backdrop-filter:blur(18px) saturate(190%); } .tabbar-pill.hidden{ opacity:0; pointer-events:none; } /* Onboarding and auth run outside the tabbed shell. */ .topbar.hidden, .tabbar.hidden{ display:none; } .tab{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0 9px; cursor:pointer; color:var(--wa-ink3); transition:color var(--wa-d2) var(--wa-ease); border:none; background:none; font-family:inherit; font-size:inherit; -webkit-tap-highlight-color:transparent; } /* The glyph gets its own box so it can lift independently of the label. */ .tab-icon{ display:flex; align-items:center; justify-content:center; height:22px; transition:transform var(--wa-d2) var(--wa-spring); } .tab.active .tab-icon{ transform:translateY(-1px) scale(1.06); } .tab:active .tab-icon{ transform:scale(.9); } .tab.active{ color:var(--wa-ink); } /* The nav labels carry no size of their own, so without this they inherit the 16px body size and overflow the bar. They collapse when the bar minimizes. */ .tab-label{ font-size:8.5px; font-weight:590; letter-spacing:.02em; line-height:1; white-space:nowrap; overflow:hidden; max-height:12px; opacity:.7; transition: opacity var(--wa-d2) var(--wa-ease), max-height var(--wa-d2) var(--wa-ease); } .tab.active .tab-label{ opacity:1; } .tab svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; /* A soft drop shadow is what separates a flat glyph from one that sits on glass; the active tab also picks up a restrained accent halo. */ filter:drop-shadow(0 1px 2px rgba(0,2,6,.5)); transition:filter var(--wa-d2) var(--wa-ease); } .tab.active svg{ filter:drop-shadow(0 2px 4px rgba(0,2,6,.6)) drop-shadow(0 0 8px rgba(77,163,255,.3)); } .tab-lock{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; border:none; background:none; font-family:inherit; font-size:inherit; } .tab-lock-btn{ width:52px; height:52px; margin-top:-19px; border-radius:9999px; background:var(--wa-blue); border:1px solid rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 26px -16px rgba(77,163,255,.55),inset 0 1px 0 rgba(255,255,255,.34); transition:all var(--wa-d2) var(--wa-spring); color:white; } .tab-lock-btn:hover{ transform:translateY(-3px); } .tab-lock-btn:active{ transform:scale(.92); } .tab-lock-btn svg{ width:23px; height:23px; fill:none; stroke:white; stroke-width:1.5; } .tab-lock-label{ font-family:var(--wa-label); font-size:7.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--wa-ink3); padding-bottom:9px; overflow:hidden; max-height:12px; transition: color var(--wa-d2) var(--wa-ease), opacity var(--wa-d2) var(--wa-ease), max-height var(--wa-d2) var(--wa-ease), padding var(--wa-d2) var(--wa-ease); } .tab-lock.active .tab-lock-label{ color:var(--wa-ink); } /* Card utilities */ .card{ background:var(--wa-grad),var(--wa-s1); border:1px solid var(--wa-brd); backdrop-filter:var(--wa-blur); box-shadow:var(--wa-lift); } .card-strong{ background:var(--wa-grad),var(--wa-s2); border:1px solid var(--wa-brd2); backdrop-filter:var(--wa-blur); box-shadow:var(--wa-lift2); } /* Button utilities */ .btn-primary{ background:var(--wa-blue); color:white; box-shadow:var(--wa-blueSh); border:none; border-radius:8px; padding:12px 24px; font-weight:500; cursor:pointer; transition:transform var(--wa-d2) var(--wa-ease); } .btn-primary:hover{ transform:translateY(-2px); } .btn-primary:active{ transform:scale(.96); } .btn-soft{ background:var(--wa-s2); border:1px solid var(--wa-brd2); border-radius:8px; padding:12px 24px; cursor:pointer; transition:background var(--wa-d2) var(--wa-ease); } .btn-soft:hover{ background:var(--wa-s3); } /* Pill utility */ .pill{ display:inline-block; padding:6px 12px; border-radius:9999px; background:var(--wa-s2); border:1px solid var(--wa-brd2); font-size:12px; font-family:'JetBrains Mono',monospace; } /* Monospace utility */ .mono{ font-family:'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; } /* ============================================================ Coach — design lines 540-608 ============================================================ */ .coach-screen { display:flex; flex-direction:column; min-height:690px; } .coach-header { display:flex; align-items:center; gap:12px; padding:2px 2px 16px; animation:waIn var(--wa-d) var(--wa-ease) both; } .coach-avatar { position:relative; width:38px; height:38px; flex:none; border-radius:9999px; background:var(--wa-blue); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -10px rgba(61,123,255,.9); } .coach-mark { animation:waSpin 26s linear infinite; } .coach-identity { flex:1; min-width:0; } .coach-name { font-size:16px; font-weight:600; letter-spacing:-.015em; } .coach-status { display:flex; align-items:center; gap:6px; margin-top:3px; } .coach-status-dot { width:5px; height:5px; border-radius:9999px; background:var(--wa-cy); box-shadow:0 0 8px var(--wa-cy); animation:waBreathe 2.2s ease-in-out infinite; } .coach-status-text { font-size:8.5px; letter-spacing:.14em; color:var(--wa-ink3); } .coach-clear { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.12em; color:var(--wa-ink3); padding:8px 12px; border-radius:9999px; border:1px solid var(--wa-brd); background:none; cursor:pointer; transition:transform var(--wa-d2) var(--wa-spring); } .coach-clear:active { transform:scale(.94); } .coach-thread { flex:1; display:flex; flex-direction:column; gap:11px; overflow-y:auto; scrollbar-width:none; padding-bottom:6px; } .coach-empty { font-size:13.5px; line-height:1.55; color:var(--wa-ink3); padding:20px 4px; text-wrap:pretty; } .coach-row { display:flex; animation:waBubble var(--wa-d) var(--wa-spring) both; } .coach-row-user { justify-content:flex-end; } .coach-row-ai { justify-content:flex-start; } .coach-bubble { max-width:86%; backdrop-filter:var(--wa-blur); } .coach-bubble-user { border-radius:22px 22px 8px 22px; padding:13px 17px; background:var(--wa-blue); border:1px solid transparent; color:#fff; box-shadow:var(--wa-blueSh); font-size:14px; font-weight:500; } .coach-bubble-ai { border-radius:26px 26px 26px 10px; padding:20px; background:var(--wa-grad),var(--wa-s2); border:1px solid var(--wa-brd2); color:var(--wa-ink); box-shadow:var(--wa-lift2); } .coach-head { font-size:9.5px; letter-spacing:.16em; color:var(--wa-cyt); } .coach-body { font-size:15px; line-height:1.45; margin-top:12px; letter-spacing:-.01em; text-wrap:pretty; } .coach-stats { display:flex; gap:9px; margin-top:16px; } .coach-stat { flex:1; padding:12px; border-radius:16px; background:var(--wa-s1); border:1px solid var(--wa-brd); } .coach-stat-value { font-size:18px; font-weight:600; } .coach-stat-value.accent { color:var(--wa-cyt); } .coach-stat-label { font-size:8px; letter-spacing:.12em; color:var(--wa-ink3); margin-top:4px; } .coach-next { margin-top:16px; padding-top:14px; border-top:1px solid var(--wa-brd); } .coach-next-kicker { font-size:9px; letter-spacing:.2em; color:var(--wa-ink3); } .coach-move { font-size:14.5px; font-weight:500; margin-top:8px; } .coach-cta { margin-top:13px; padding:13px; border-radius:17px; text-align:center; font-size:13.5px; } .coach-typing { display:flex; align-items:center; gap:6px; padding:16px 20px; border-radius:24px 24px 24px 8px; background:var(--wa-grad),var(--wa-s1); border:1px solid var(--wa-brd); box-shadow:var(--wa-lift); } .coach-dot { width:7px; height:7px; border-radius:9999px; background:var(--wa-cy); animation:waDot 1.2s ease-in-out infinite; } .coach-typing-note { font-size:8.5px; letter-spacing:.14em; color:var(--wa-ink3); margin-left:6px; } .coach-intents { padding-top:14px; border-top:1px solid var(--wa-brd); animation:waIn var(--wa-d) var(--wa-ease) both; animation-delay:.08s; } .coach-intents-kicker { font-size:8.5px; letter-spacing:.16em; color:var(--wa-ink3); margin-bottom:10px; } .coach-chip-row { display:flex; flex-wrap:wrap; gap:8px; } .coach-chip { padding:11px 16px; border-radius:9999px; font-size:12.5px; cursor:pointer; background:var(--wa-s1); border:1px solid var(--wa-brd); color:var(--wa-ink2); font-family:inherit; backdrop-filter:var(--wa-blur); transition:all var(--wa-d2) var(--wa-spring); } .coach-chip:hover { transform:translateY(-2px); } .coach-chip:active { transform:scale(.94); } .coach-chip.active { background:var(--wa-s3); border-color:var(--wa-brd2); color:var(--wa-ink); box-shadow:var(--wa-lift); } /* =================================================================== MATERIAL TIERS The rule this encodes: content is not glass. Glass is what you touch. Screens compose from these classes instead of each inventing its own translucent rounded rectangle, which is how every section ended up looking equally important. =================================================================== */ /* Tier 0 — content. A hairline and a barely-there wash, no blur. Use for anything the user reads rather than operates. */ .surface{ background:var(--wa-c0); border:1px solid var(--wa-c0-brd); border-radius:26px; } /* Tier 0b — no container at all. Sections that need separation but not a box: the hierarchy comes from space and type, not from a border. */ .bare{ background:none; border:0; padding:0; } /* Tier 1 — functional glass. Navigation, controls, chips, buttons. */ .glass{ position:relative; background:var(--wa-grad),var(--wa-s1); border:1px solid var(--wa-brd); border-radius:22px; backdrop-filter:var(--wa-blur); -webkit-backdrop-filter:var(--wa-blur); box-shadow:var(--wa-lift); transition: background var(--wa-d2) var(--wa-ease), border-color var(--wa-d2) var(--wa-ease), box-shadow var(--wa-d2) var(--wa-ease), transform var(--wa-d2) var(--wa-spring); } /* Tier 2 — elevated glass. The orb, the timer, an expanded control: objects with enough presence to cast their own shadow. */ .glass-lg{ position:relative; background:var(--wa-grad),var(--wa-s2); border:1px solid var(--wa-brd2); border-radius:32px; backdrop-filter:blur(44px) saturate(190%); -webkit-backdrop-filter:blur(44px) saturate(190%); box-shadow:var(--wa-lift2),var(--wa-sh); } /* Resting quiet, alive on contact. A glass control that looks the same whether or not you are pressing it reads as a picture of a control. */ .glass-press{ cursor:pointer; -webkit-tap-highlight-color:transparent; } .glass-press:hover{ background:var(--wa-grad),var(--wa-s2); border-color:var(--wa-brd2); } .glass-press:active{ transform:scale(.972); background:var(--wa-grad),var(--wa-s3); box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 14px -10px rgba(0,3,8,.9); transition-duration:.08s; } /* The moving highlight that sells a surface as lit rather than painted. Pointer-events off so it never eats a tap meant for the control. */ .glass-spec::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.09) 48%,transparent 62%); opacity:0; transition:opacity var(--wa-d2) var(--wa-ease); } .glass-press:active .glass-spec::after, .glass-spec:active::after{ opacity:1; } /* =================================================================== TYPOGRAPHY SCALE Numbers are the product. Labels are metadata and should get out of the way — the old design set almost every string in tracked uppercase, which flattens hierarchy because nothing can then stand out. =================================================================== */ .t-display{ font-size:clamp(56px,17vw,76px); font-weight:600; letter-spacing:-.045em; line-height:.94; font-variant-numeric:tabular-nums; } .t-num{ font-size:34px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; } .t-title{ font-size:26px; font-weight:600; letter-spacing:-.028em; line-height:1.16; } .t-body{ font-size:15px; font-weight:400; line-height:1.5; color:var(--wa-ink2); } /* Reserved for true metadata — DAY 17 / 90, MOMENTUM, LOCK-IN. Not for section headings, not for buttons, not for labels with real words. */ .t-meta{ font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--wa-ink3); } /* =================================================================== MOTION =================================================================== */ /* A number that swaps instantly reads as a value being overwritten; one that rolls reads as a value that grew. */ @keyframes waRoll{ 0%{opacity:0;transform:translateY(.42em)} 100%{opacity:1;transform:none} } /* Confirmation of an action, not decoration: fired once on completion. */ @keyframes waSweep{ 0%{opacity:0;transform:translateX(-100%)} 35%{opacity:.7} 100%{opacity:0;transform:translateX(100%)} } @keyframes waRipple{ 0%{opacity:.5;transform:scale(.6)} 100%{opacity:0;transform:scale(2.1)} } .wa-roll{animation:waRoll var(--wa-d2) var(--wa-ease) both} /* =================================================================== FOCUS ENVIRONMENT A focus session is the one moment the app should stop being an app. The chrome goes away, the background moves slowly enough to be felt rather than watched, and the timer is the only bright object left. =================================================================== */ .shell.focus-mode .topbar{ opacity:0; pointer-events:none; transform:translateY(-10px); transition:opacity var(--wa-d) var(--wa-ease),transform var(--wa-d) var(--wa-ease); } .shell.focus-mode .tabbar{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(26px); } .shell.focus-mode .scroll{ padding-top:0; padding-bottom:0; } /* Two counter-drifting fields of light. Neither is fast enough to catch the eye on its own; together they keep the screen from ever looking frozen. */ .focus-env{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; } .focus-env::before, .focus-env::after{ content:''; position:absolute; border-radius:50%; filter:blur(60px); } .focus-env::before{ width:130%; height:70%; left:-15%; top:-12%; background:radial-gradient(50% 50% at 50% 50%,rgba(77,163,255,.20),transparent 70%); animation:waDrift 26s ease-in-out infinite; } .focus-env::after{ width:120%; height:60%; left:-10%; bottom:-14%; background:radial-gradient(50% 50% at 50% 50%,rgba(46,123,214,.16),transparent 70%); animation:waDrift 34s ease-in-out infinite reverse; } /* The completion moment: the screen drops to near-black before the result arrives, so the number lands in silence instead of on top of the UI. */ @keyframes waBlackout{ 0%{opacity:1} 22%{opacity:1} 100%{opacity:0} } @keyframes waRise{ 0%{opacity:0;transform:translateY(26px) scale(.94);filter:blur(6px)} 100%{opacity:1;transform:none;filter:blur(0)} } .wa-blackout{ position:absolute; inset:0; z-index:40; background:#02040A; pointer-events:none; animation:waBlackout 1.5s var(--wa-ease) both; } /* =========================================================================== ARC SCREEN Geometry, radii and type sizes are taken from the design prototype's Arc section rather than re-derived. =========================================================================== */ .screen-arc{display:flex;flex-direction:column} .rise{animation:rise var(--d) var(--e) both} .zoom{animation:zoom var(--d) var(--e) both;animation-delay:.06s} /* The one glass recipe the design uses for a content card. */ .glass-card{ padding:18px 20px; border-radius:24px; background:var(--g1); border:1px solid var(--gb); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--hair),var(--soft); } .glass-row{ display:flex; align-items:center; gap:14px; cursor:pointer; transition:transform var(--d2) var(--sp); } .glass-row:active{transform:scale(.99)} .section-label{ font-size:13px; color:var(--ink2); margin-top:20px; text-shadow:var(--halo); } .arc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .arc-title{ font-size:28px; font-weight:600; letter-spacing:-.03em; line-height:1.1; } .arc-sub{ font-size:13px; color:var(--ink3); line-height:1.5; margin-top:10px; } .arc-daycount{ font-size:12.5px; color:var(--ink2); flex:none; padding-top:6px; } /* =========================================================================== THE CLIMB The photograph is scenery and the journey is data, so they are separate layers here too: .journey-photo never changes with the date, and everything inside .journey-svg is rebuilt from the current day. =========================================================================== */ .journey{ position:relative; margin-top:18px; border-radius:26px; overflow:hidden; border:1px solid var(--gb); box-shadow:var(--hair),var(--soft); /* Exactly the viewBox's ratio, and the supplied photographs': any other shape crops one of the two layers and the trail stops matching the ridge it was traced onto. */ aspect-ratio:900 / 1600; background:var(--sky2); isolation:isolate; --j-dim:rgba(6,11,19,.88); --j-ahead:rgba(214,236,255,.30); --j-walked:rgba(255,250,232,.95); --j-walked-glow:rgba(255,236,178,.55); --j-dot-done:rgba(255,246,214,.92); --j-dot-ahead:rgba(214,236,255,.34); --j-dot-milestone:var(--gold); --j-here-ring:var(--ice); --j-here-halo:rgba(156,203,255,.5); --j-pill-bg:rgba(6,14,24,.84); --j-pill-brd:rgba(156,203,255,.5); --j-pill-ink:#EAF4FF; } [data-wa="light"] .journey{ --j-dim:rgba(226,236,246,.74); --j-ahead:rgba(13,32,53,.22); --j-walked:#FFFFFF; --j-walked-glow:rgba(44,123,224,.45); --j-dot-done:#FFFFFF; --j-dot-ahead:rgba(13,32,53,.26); --j-dot-milestone:var(--gold); --j-here-ring:var(--acc); --j-here-halo:rgba(44,123,224,.4); --j-pill-bg:rgba(255,255,255,.92); --j-pill-brd:rgba(44,123,224,.4); --j-pill-ink:#0D2035; } .journey-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; } /* Enough to hold the trail's contrast against a bright patch of snow, not enough to flatten the photograph. */ .journey-veil{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(3,7,13,.42) 0%, rgba(3,7,13,.10) 26%, rgba(3,7,13,.16) 62%, rgba(3,7,13,.62) 100%); } [data-wa="light"] .journey-veil{ background:linear-gradient(to bottom, rgba(238,244,250,.34) 0%, rgba(238,244,250,.06) 26%, rgba(238,244,250,.12) 62%, rgba(238,244,250,.52) 100%); } .journey-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* The trail lights up behind the climber as the arc advances. */ .journey-trail, .journey-trail-glow{ animation:trace 1.6s var(--e) both; stroke-dasharray:2400; } .journey-trail.conquered{opacity:.45} .journey-trail-glow.conquered{opacity:.25} /* The only animated thing on the mountain. A trail where every point pulses reads as a loading state. */ .journey-halo{ transform-box:fill-box; transform-origin:center; animation:breathe 3.6s ease-in-out infinite; } .journey-pill{animation:pop var(--d) var(--sp) both;animation-delay:.5s} .journey-caption{ display:flex; align-items:baseline; gap:10px; padding:12px 4px 0; text-shadow:var(--halo); } .journey-caption-status{ font-size:9.5px; letter-spacing:.16em; color:var(--ice); } .journey-caption-note{ font-size:11.5px; color:var(--ink3); } .phase-switch{ position:relative; display:flex; padding:3px; border-radius:9999px; background:var(--g1); border:1px solid var(--gb); margin-top:12px; } .phase-switch-thumb{ position:absolute; top:3px; left:3px; bottom:3px; width:calc((100% - 6px) / 3); border-radius:9999px; background:var(--g3); box-shadow:var(--hair); transition:transform var(--d2) var(--sp); } .phase-switch-opt{ position:relative; flex:1; text-align:center; padding:9px 0; font-size:12px; font-weight:600; cursor:pointer; color:var(--ink3); transition:color var(--d2) var(--e); } .phase-switch-opt.active{color:var(--ink)} .arc-progress-label{font-size:13px;color:var(--ink2)} .arc-progress-row{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:6px; } .arc-progress-pct{ font-size:34px; font-weight:600; letter-spacing:-.04em; line-height:1; } .arc-progress-of{font-size:11.5px;color:var(--ink3)} .arc-progress-track{ height:3px; border-radius:9999px; background:var(--gb2); margin-top:14px; overflow:hidden; } .arc-progress-fill{ height:100%; border-radius:9999px; background:var(--acc); box-shadow:0 0 8px var(--acc); transition:width var(--d) var(--e); } /* Rows separated by a hairline, not stacked as cards. */ .milestones{ display:flex; flex-direction:column; gap:2px; margin-top:10px; text-shadow:var(--halo); } .milestone-row{ display:flex; align-items:center; gap:14px; padding:13px 4px; border-bottom:1px solid var(--gb); cursor:pointer; } .milestone-ring{ flex:none; width:26px; height:26px; border-radius:9999px; border:1px solid var(--gb2); display:flex; align-items:center; justify-content:center; } .milestone-ring.reached{border-color:var(--gold)} .milestone-dot{ width:7px; height:7px; border-radius:9999px; background:var(--gb2); } .milestone-ring.reached .milestone-dot{background:var(--gold)} .milestone-text{flex:1;min-width:0} .milestone-day{ font-size:14px; font-weight:600; letter-spacing:-.01em; } .milestone-caption{ font-size:12px; color:var(--ink3); margin-top:3px; } .milestone-thumb{ flex:none; width:76px; height:50px; border-radius:12px; overflow:hidden; border:1px solid var(--gb); } .milestone-thumb img{width:100%;height:100%;object-fit:cover;display:block} .future-self-text{flex:1;min-width:0} .future-self-title{ font-size:14.5px; font-weight:600; letter-spacing:-.015em; } .future-self-line{ font-size:12.5px; color:var(--ink3); line-height:1.5; margin-top:6px; } /* =========================================================================== HOME Ported from the design prototype's Home section. The orb is the signature object: a photographic plate inside a sphere, a globe wireframe for volume, and the glass shell from the shared defs over the top. =========================================================================== */ .screen-home{display:flex;flex-direction:column} .home-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; text-shadow:var(--halo); } .home-greeting{font-size:14.5px;color:var(--ink2)} .home-name{ font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1.1; margin-top:2px; } .home-quote{ font-size:13px; color:var(--ink3); line-height:1.5; margin-top:10px; max-width:30ch; } .home-head-right{text-align:right;flex:none} .home-date{font-size:12.5px;color:var(--ink2)} .home-day{ font-size:10.5px; letter-spacing:.14em; color:var(--ice); margin-top:10px; } /* --- the orb -------------------------------------------------------------- */ .orb{ position:relative; width:100%; max-width:300px; margin:18px auto 0; aspect-ratio:1; } .orb-body{ position:absolute; inset:6%; border-radius:9999px; animation:breathe 9s ease-in-out infinite; } /* The landscape lives inside the sphere. Inset slightly further than the shell so the rim reads as glass over it rather than as a ring around it. */ .orb-plate{ position:absolute; inset:3.4%; border-radius:9999px; overflow:hidden; } .orb-plate img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; transform:scale(1.12); } .orb-plate-fade{ position:absolute; inset:0; background:linear-gradient(to bottom,var(--sky2) 0%,transparent 48%); } .orb-face{position:relative;width:100%;height:100%;display:block} .orb-readout{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-shadow:var(--halo); } .orb-value{ display:flex; align-items:flex-start; font-size:66px; font-weight:600; letter-spacing:-.05em; line-height:1; } .orb-unit{ font-size:24px; font-weight:500; color:var(--ink2); margin-top:8px; } .orb-label{ font-size:10.5px; letter-spacing:.3em; color:var(--ink2); margin-top:6px; } .orb-delta{ font-size:12.5px; color:var(--ice); margin-top:14px; } /* --- dimensions ----------------------------------------------------------- */ .dims{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:6px; text-shadow:var(--halo); animation-delay:.12s; } .dim{ display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; padding:6px 0; } .dim-ring-wrap{position:relative;width:34px;height:34px} .dim-ring{width:100%;height:100%;transform:rotate(-90deg)} .dim-ring circle{transition:stroke-dashoffset var(--d) var(--e),stroke var(--d2) var(--e)} .dim-core{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .dim-core::after{ content:""; width:5px; height:5px; border-radius:9999px; background:var(--ink3); transition:background var(--d2) var(--e); } .dim.active .dim-core::after{background:var(--ice)} .dim-label{ font-size:8.5px; letter-spacing:.14em; color:var(--ink3); text-transform:uppercase; } .dim.active .dim-label{color:var(--ice)} .dim-value{ font-size:16px; font-weight:600; letter-spacing:-.02em; line-height:1; color:var(--ink2); } .dim.active .dim-value{color:var(--ink)} .dim-note{ font-size:12.5px; color:var(--ink2); text-align:center; line-height:1.5; padding:12px 24px 0; min-height:38px; text-shadow:var(--halo); animation-delay:.16s; } /* --- cards ---------------------------------------------------------------- */ .glass-card{margin-top:10px;cursor:pointer;transition:transform var(--d2) var(--sp)} .glass-card:active{transform:scale(.99)} .card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .card-title{ font-size:15.5px; font-weight:600; letter-spacing:-.015em; } .card-sub{ font-size:12.5px; color:var(--ink3); margin-top:4px; } .timeline{position:relative;height:22px;margin-top:18px} .timeline-line{ position:absolute; left:2%; right:2%; top:10px; height:1px; background:var(--gb2); } .timeline-dot{ position:absolute; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:9999px; background:transparent; border:1px solid var(--gb2); transition:all var(--d2) var(--sp); } .timeline-dot.done{background:var(--acc);border-color:var(--acc)} /* The one point that is physically present: where the day is right now. */ .timeline-dot.next{ width:15px; height:15px; background:var(--frost); border-color:var(--frost); box-shadow:0 0 14px var(--ice); } .timeline-hours{ display:flex; justify-content:space-between; margin-top:6px; font-size:10.5px; letter-spacing:.1em; color:var(--ink3); } .next-mission{ display:flex; align-items:center; gap:14px; margin-top:16px; } .next-mission-check{ flex:none; width:30px; height:30px; border-radius:9999px; border:1.5px solid var(--gb2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--d2) var(--sp); } .next-mission-check:hover{border-color:var(--ice)} .next-mission-text{flex:1;min-width:0} .next-mission-title{ font-size:17px; font-weight:600; letter-spacing:-.02em; } .next-mission-meta{ font-size:12.5px; color:var(--ink3); margin-top:4px; } .next-mission-play{ flex:none; width:46px; height:46px; border-radius:9999px; background:var(--acc); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 12px 26px -10px rgba(62,143,232,.8),inset 0 1px 0 rgba(255,255,255,.35); transition:transform var(--d2) var(--sp); } .next-mission-play:hover{transform:scale(1.07)} .next-mission-play:active{transform:scale(.92)} .coach-mark{ flex:none; width:30px; height:30px; border-radius:9999px; border:1px solid var(--gb2); display:flex; align-items:center; justify-content:center; } .coach-mark span{ width:6px; height:6px; border-radius:9999px; background:var(--ice); box-shadow:0 0 10px var(--ice); animation:shimmer 3s ease-in-out infinite; } .coach-text{flex:1;min-width:0} .coach-line{ font-size:13.5px; line-height:1.45; color:var(--ink); } .coach-tag{ font-size:10px; letter-spacing:.16em; color:var(--ice); margin-top:7px; } /* =========================================================================== LOCK-IN The session is a place rather than a screen: one orb, three controls, and two cards. Everything else is the environment showing through. =========================================================================== */ .card-meta{font-size:11.5px;color:var(--ink3)} /* Focus mode removes the app's chrome, and with it the padding the header was relying on. The session supplies its own. */ .screen-lock-run{display:flex;flex-direction:column;padding:26px 0 40px} .lock-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; text-shadow:var(--halo); } .lock-title{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.1} .lock-sub{ font-size:13px; color:var(--ink3); line-height:1.5; margin-top:10px; max-width:19ch; } .lock-pill{ flex:none; display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:9999px; background:var(--g2); border:1px solid var(--gb); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--hair); font-size:11.5px; font-weight:500; } .lock-pill-dot{ width:7px; height:7px; border-radius:9999px; border:1.5px solid var(--ice); } /* --- the orb -------------------------------------------------------------- */ .lock-orb{ position:relative; width:100%; max-width:300px; margin:22px auto 0; aspect-ratio:1; animation:zoom var(--d) var(--e) both; animation-delay:.05s; } .lock-orb-body{position:absolute;inset:0;animation:breathe 8s ease-in-out infinite} /* The photograph sits inside the glass, not behind it, so the sphere reads as a thing containing a world rather than a window onto one. */ .lock-orb-plate{position:absolute;inset:8%;border-radius:9999px;overflow:hidden} .lock-orb-plate img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; transform:scale(1.1); } .lock-orb-plate-fade{ position:absolute; inset:0; background:linear-gradient(to bottom,var(--sky2) 0%,transparent 40%,transparent 70%,var(--fog) 100%); } .lock-orb-face{position:relative;width:100%;height:100%;display:block} .lock-readout{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; text-shadow:var(--halo); } .lock-readout-kicker{ font-size:10.5px; letter-spacing:.3em; color:var(--ink2); text-transform:uppercase; } .lock-time{ font-size:52px; font-weight:500; letter-spacing:-.03em; margin-top:10px; font-variant-numeric:tabular-nums; } .lock-readout-caption{font-size:12px;color:var(--ink3);margin-top:12px;text-align:center;padding:0 12%} /* --- controls ------------------------------------------------------------- */ .lock-controls{ display:flex; align-items:center; justify-content:center; gap:28px; margin-top:20px; } .lock-ctl{ width:38px; height:38px; border-radius:9999px; background:var(--g1); border:1px solid var(--gb); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform var(--d2) var(--sp); } .lock-ctl:active{transform:scale(.9)} .lock-ctl-off{opacity:.6;cursor:default} .lock-ctl-off:active{transform:none} .lock-play{ width:66px; height:66px; border-radius:9999px; background:var(--g2); border:1px solid var(--gb2); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--hair),var(--soft); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:transform var(--d2) var(--sp),background var(--d2) var(--e); } .lock-play:active{transform:scale(.93)} /* Paused is the one state that needs an invitation, so it gets the accent. */ .lock-play.paused{ background:var(--acc); border-color:transparent; box-shadow:0 14px 28px -12px rgba(62,143,232,.7); } /* --- focus environment ---------------------------------------------------- */ .lock-env-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; } .lock-env{ border-radius:14px; overflow:hidden; border:1.5px solid var(--gb); cursor:pointer; transition:transform var(--d2) var(--sp),border-color var(--d2) var(--e),box-shadow var(--d2) var(--e); } .lock-env img{width:100%;aspect-ratio:10/7;object-fit:cover;display:block} .lock-env.active{ border-color:var(--ice); box-shadow:0 0 0 1px var(--ice),0 10px 22px -12px var(--halo); transform:scale(1.04); } /* --- the setup screen ----------------------------------------------------- */ .screen-lock-pre{display:flex;flex-direction:column;padding-bottom:20px} /* These cards hold controls; the card itself is not the target. */ .lock-static{cursor:default} .lock-static:active{transform:none} .lock-field-label{ font-size:9.5px; font-weight:600; letter-spacing:.18em; color:var(--ink3); text-transform:uppercase; } .lock-goal-input{ width:100%; margin-top:12px; background:none; border:0; outline:none; color:var(--ink); font-family:inherit; font-size:19px; font-weight:500; letter-spacing:-.02em; } .lock-goal-input::placeholder{color:var(--ink3)} /* Two options, so the thumb covers half rather than a third. */ .phase-switch-2 .phase-switch-thumb{width:calc((100% - 6px) / 2)} .lock-stepper{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; } .lock-stepper-value{display:flex;align-items:baseline;gap:5px} .lock-stepper-num{font-size:40px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .lock-stepper-unit{font-size:11px;letter-spacing:.2em;color:var(--ink3)} .lock-step{ width:46px; height:46px; flex:none; border-radius:9999px; background:var(--g1); border:1px solid var(--gb); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--hair); color:var(--ink); font-family:inherit; font-size:22px; line-height:1; cursor:pointer; transition:transform var(--d2) var(--sp),opacity var(--d2) var(--e); } .lock-step:active{transform:scale(.9)} .lock-step:disabled{opacity:.35;cursor:default} .lock-step:disabled:active{transform:none} .lock-begin{ margin-top:18px; padding:17px; border-radius:22px; background:var(--acc); color:#fff; font-size:15px; font-weight:600; text-align:center; cursor:pointer; box-shadow:0 16px 30px -12px rgba(62,143,232,.7); transition:transform var(--d2) var(--sp); } .lock-begin:active{transform:scale(.97)} /* =========================================================================== COMMUNITY Proof, not posts: full-width rows rather than a wall of glass cards, so the thing you look at is the evidence and not the container around it. =========================================================================== */ .screen-community{display:flex;flex-direction:column} .community-head{display:flex;align-items:center;justify-content:space-between} .community-title{font-size:26px;font-weight:600;letter-spacing:-.03em} .community-head-icons{display:flex;gap:16px} .community-head-icons svg{cursor:pointer} .community-tabs{ position:relative; display:flex; padding:3px; border-radius:9999px; background:var(--g1); border:1px solid var(--gb); margin-top:16px; } /* Four tabs, and the accent rather than glass: this is the one control on the screen that changes what everything below it means. */ .community-tabs-thumb{ position:absolute; top:3px; left:3px; bottom:3px; width:calc((100% - 6px) / 4); border-radius:9999px; background:var(--acc); box-shadow:0 8px 18px -8px rgba(62,143,232,.7); transition:transform var(--d2) var(--sp); } .community-tab{ position:relative; flex:1; text-align:center; padding:9px 0; font-size:12px; font-weight:600; cursor:pointer; color:var(--ink3); transition:color var(--d2) var(--e); } .community-tab.active{color:#fff} /* --- live card ------------------------------------------------------------ */ .live-card{display:flex;align-items:center;gap:14px;cursor:default} .live-card:active{transform:none} .live-globe{ flex:none; width:44px; height:44px; border-radius:9999px; overflow:hidden; border:1px solid var(--gb2); } .live-globe svg{width:100%;height:100%;display:block} .live-text{flex:1;min-width:0} .live-line{font-size:13px;line-height:1.4;font-weight:500} .live-sub{font-size:10.5px;color:var(--ink3);margin-top:6px} .live-join{ flex:none; display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:9999px; background:var(--acc); color:#fff; font-size:12px; font-weight:600; cursor:pointer; box-shadow:0 10px 22px -10px rgba(62,143,232,.8); transition:transform var(--d2) var(--sp); } .live-join:active{transform:scale(.94)} /* --- feed ----------------------------------------------------------------- */ .feed{display:flex;flex-direction:column;gap:22px;margin-top:22px;text-shadow:var(--halo)} .feed-head{display:flex;align-items:center;gap:11px} .feed-avatar{ width:34px; height:34px; flex:none; border-radius:9999px; background:var(--g3); border:1px solid var(--gb); box-shadow:var(--hair); } .feed-who{flex:1;min-width:0} .feed-name{font-size:13.5px;font-weight:600;letter-spacing:-.01em} .feed-meta{font-size:11.5px;color:var(--ink3);margin-top:2px} .feed-time{font-size:11px;color:var(--ink3);flex:none} .feed-photo{ position:relative; margin-top:12px; border-radius:20px; overflow:hidden; border:1px solid var(--gb); } .feed-photo img{width:100%;aspect-ratio:246/134;object-fit:cover;display:block} .feed-actions{display:flex;align-items:center;gap:18px;margin-top:12px} .feed-action{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--ink2)} .feed-action-end{margin-left:auto} .feed-caption{font-size:12.5px;color:var(--ink2);margin-top:10px;line-height:1.45} .feed-caption-name{font-weight:600;color:var(--ink)} /* --- live list ------------------------------------------------------------ */ .live-list{display:flex;flex-direction:column;margin-top:18px} .live-row{ display:flex; align-items:center; gap:13px; padding:14px 4px; border-bottom:1px solid var(--gb); } .live-row-text{flex:1;min-width:0} .live-row-name{font-size:13.5px;font-weight:600} .live-row-task{font-size:11.5px;color:var(--ink3);margin-top:2px} .live-row-now{ display:flex; align-items:center; gap:6px; flex:none; font-size:11.5px; color:var(--ink2); font-variant-numeric:tabular-nums; } .live-dot{ width:6px; height:6px; border-radius:9999px; background:var(--ice); box-shadow:0 0 8px var(--ice); animation:shimmer 2.2s ease-in-out infinite; } /* --- challenges ----------------------------------------------------------- */ .challenge-list{display:flex;flex-direction:column;gap:11px;margin-top:18px} .challenge-card{cursor:default} .challenge-card:active{transform:none} .challenge-kicker{font-size:10px;letter-spacing:.16em;color:var(--ice)} .challenge-title{font-size:16.5px;font-weight:600;letter-spacing:-.015em;margin-top:9px} .challenge-body{font-size:12.5px;color:var(--ink3);margin-top:5px;line-height:1.45} .challenge-progress{display:flex;align-items:center;gap:12px;margin-top:14px} .challenge-track{flex:1;height:3px;border-radius:9999px;background:var(--gb2);overflow:hidden} .challenge-fill{height:100%;background:var(--acc);border-radius:9999px;box-shadow:0 0 8px var(--acc)} .challenge-pct{font-size:11px;color:var(--ink2)} .challenge-join{ margin-top:14px; padding:12px; border-radius:16px; text-align:center; background:var(--g2); border:1px solid var(--gb2); font-size:12.5px; font-weight:600; cursor:pointer; transition:transform var(--d2) var(--sp); } .challenge-join:active{transform:scale(.97)} /* --- ranks ---------------------------------------------------------------- */ .rank-list{display:flex;flex-direction:column;gap:2px;margin-top:18px} .rank-row{ display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:18px; border:1px solid transparent; } /* Your own row is the only one that needs finding at a glance. */ .rank-row.you{background:var(--g2);border-color:var(--gb2)} .rank-num{font-size:11.5px;color:var(--ink3);width:18px;flex:none} .rank-avatar{width:30px;height:30px;border-radius:9999px;background:var(--g3);border:1px solid var(--gb);flex:none} .rank-name{flex:1;min-width:0;font-size:13.5px;font-weight:500} .rank-row.you .rank-name{font-weight:700} .rank-score{font-size:15px;font-weight:600;letter-spacing:-.02em} .rank-row.you .rank-score{color:var(--ice)} /* --- empty ---------------------------------------------------------------- */ .community-empty{ text-align:center; padding:48px 24px; color:var(--ink3); font-size:13px; line-height:1.6; } .community-empty-action{ margin-top:12px; color:var(--ink2); cursor:pointer; text-decoration:underline; } /* =========================================================================== PROFILE Identity first, navigation second. The tiles and tags are claims about the person, so they sit above the list of places to go. =========================================================================== */ .screen-profile{display:flex;flex-direction:column} .profile-head{display:flex;justify-content:flex-end;cursor:pointer} .profile-identity{display:flex;flex-direction:column;align-items:center;margin-top:4px;text-align:center} .profile-portrait{position:relative;width:104px;height:104px} /* The ring is the only gradient on the screen: frost into accent, the two ends of the arc. */ .profile-ring{ position:absolute; inset:0; border-radius:9999px; padding:2px; background:linear-gradient(150deg,var(--frost),var(--acc)); } .profile-photo{ position:relative; width:100%; height:100%; border-radius:9999px; overflow:hidden; background:var(--bg); } .profile-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block} .profile-photo-hint{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; background:linear-gradient(to bottom,transparent 50%,var(--sky3) 100%); font-size:7px; letter-spacing:.14em; color:var(--ink2); } .profile-edit{ position:absolute; bottom:0; right:0; width:26px; height:26px; border-radius:9999px; background:var(--g3); border:2px solid var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--soft); transition:transform var(--d2) var(--sp); } .profile-edit:active{transform:scale(.88)} .profile-name{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-top:16px} .profile-level{font-size:12.5px;color:var(--ink2);margin-top:5px} .profile-quote{font-size:13px;color:var(--ink3);margin-top:12px;font-style:italic;padding:0 8%;line-height:1.5} /* --- the three numbers ---------------------------------------------------- */ .profile-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:22px} .profile-tile{ padding:16px 8px; border-radius:20px; text-align:center; background:var(--g1); border:1px solid var(--gb); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--hair),var(--soft); } .profile-tile-value{font-size:24px;font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums} .profile-tile-label{font-size:11px;color:var(--ink3);margin-top:6px} /* --- earned identity ------------------------------------------------------ */ .profile-tags-card{cursor:default;padding:16px 18px} .profile-tags-card:active{transform:none} .profile-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px} .profile-tag{ padding:7px 12px; border-radius:9999px; font-size:10px; letter-spacing:.12em; background:var(--g2); border:1px solid var(--gb2); color:var(--ink2); } .profile-tag-ice{color:var(--ice);border-color:var(--gb2)} /* Gold is rare on purpose: two tags in ninety days can carry it. */ .profile-tag-gold{ color:var(--gold); border-color:color-mix(in srgb,var(--gold) 45%,transparent); background:color-mix(in srgb,var(--gold) 9%,transparent); } .profile-tags-empty{font-size:12px;color:var(--ink3);margin-top:12px;line-height:1.5} /* --- navigation ----------------------------------------------------------- */ .profile-rows{display:flex;flex-direction:column;gap:9px;margin-top:11px} .profile-row{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:20px; background:var(--g1); border:1px solid var(--gb); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--hair); cursor:pointer; transition:transform var(--d2) var(--sp); } .profile-row:active{transform:scale(.99)} .profile-row-icon{ flex:none; width:30px; height:30px; border-radius:10px; background:var(--g2); border:1px solid var(--gb); display:flex; align-items:center; justify-content:center; } .profile-row-dot{width:6px;height:6px;border-radius:9999px} .profile-row-text{flex:1;min-width:0} .profile-row-title{font-size:14px;font-weight:600;letter-spacing:-.01em} .profile-row-sub{font-size:11.5px;color:var(--ink3);margin-top:3px} .profile-row-value{font-size:11.5px;color:var(--ink3);flex:none} /* --- share ---------------------------------------------------------------- */ .profile-share{ position:relative; margin-top:11px; border-radius:24px; overflow:hidden; border:1px solid var(--gb); cursor:pointer; box-shadow:var(--soft); transition:transform var(--d2) var(--sp); } .profile-share:active{transform:scale(.99)} .profile-share img{width:100%;aspect-ratio:250/90;object-fit:cover;display:block}