20 lines
16 KiB
CSS
20 lines
16 KiB
CSS
|
:root{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#233d43;background:#f3f6f6;--accent:#087e72;--muted:#73878b;--line:#e0e8e8;--surface:#fff;color-scheme:light}
|
||
|
|
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;min-height:100vh;padding:28px 24px 32px;background:radial-gradient(ellipse at 90% 0,#dfedeb70,transparent 60%),#f3f6f6}main{max-width:1120px;margin:auto}button,input,textarea{font:inherit}button{min-height:44px;border:1px solid transparent;border-radius:12px;padding:12px 16px;background:#087e72;color:white;font-weight:650;cursor:pointer;transition:background .18s,transform .18s}button:hover:not(:disabled){background:#06695f}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.38;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #53bdac;outline-offset:3px}a{color:#087e72;text-decoration:none}h1,h2,h3,p{margin-top:0}h1{font-size:23px;letter-spacing:-.8px;margin:2px 0 0}h2{font-size:17px;letter-spacing:-.4px;margin:0}p{line-height:1.6}.eyebrow{display:block;font-size:9px;font-weight:750;letter-spacing:1.6px;color:#71868a}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.app-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid #dfe8e7}.brand{display:flex;align-items:center;gap:13px}.brand-mark{display:grid;place-content:center;position:relative;width:48px;height:48px;border-radius:15px;background:#113f42;color:white;font-size:28px;font-weight:750;box-shadow:0 5px 12px #153c4015}.brand-mark span{position:absolute;right:6px;bottom:1px;color:#66dbb8;font-size:25px}.brand-subtitle{display:block;font-size:11px;letter-spacing:0;font-weight:400;color:#7d9194;margin-top:4px}#connection{max-width:100%;border:1px solid #dce7e4;border-radius:30px;padding:9px 13px;font-size:10px;color:#4e7470;background:#fff;display:flex;align-items:center;gap:7px}#connection:before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--connection-dot,#087e72)}#controls{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"heading heading" "hero today" "hero cases" "manual cases" "phone messages" "footer footer";gap:20px;align-items:start}.workspace-heading{grid-area:heading;display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}.workspace-heading h2{font-size:30px;letter-spacing:-1px;margin-top:7px;font-weight:650}#remote-date{font-size:12px;color:#71868a;text-transform:capitalize}section{background:white;border:1px solid #e0e8e8;border-radius:22px;padding:24px;box-shadow:0 5px 20px #1d484104;min-width:0}.section-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:20px}.section-icon{display:grid;place-content:center;width:34px;height:34px;border-radius:11px;background:#eef5f3;color:#247f73}.section-icon .icon{width:19px;height:19px}.section-hint{margin-left:auto;font-size:10px;color:#809497}.hero{grid-area:hero;position:relative;overflow:hidden;background:radial-gradient(ellipse at 90% 10%,#28585960,transparent 65%),#123639;color:#eefaf7;border-color:#123639;box-shadow:0 14px 35px #153c4018;padding:26px}.hero .eyebrow{color:#86aaa6}#active-case{font-size:23px;line-height:1.35;margin:17px 0 12px;letter-spacing:-.6px;font-weight:600}#desktop{font-size:9px;color:#96b9b3;display:flex;align-items:center;gap:5px}#desktop:before{content:"";height:5px;width:5px;flex-shrink:0;border-radius:50%;background:#607f79}#desktop.connected:before{background:#75d9b6}#deadline{display:inline-block;font-size:10px;color:#a5c8bf;padding:6px 10px;border:1px solid #46716a;border-radius:8px;margin:0;background:#ffffff06}.timer-dial{width:244px;height:244px;border-radius:50%;border:1px solid #7ba69b38;display:grid;place-items:center;margin:22px auto 24px;position:relative;background:radial-gradient(circle,#28534d44,transparent 66%)}.timer-dial:before{content:"";position:absolute;inset:8px;border:1px dashed #93b5aa20;border-radius
|
||
|
|
@media(min-width:700px){.remote-mobile{padding-bottom:105px}.remote-nav{bottom:20px}.hero{min-height:535px}}
|
||
|
|
@media(max-width:699px){html{scroll-padding-top:24px}body{padding:22px 18px calc(105px + env(safe-area-inset-bottom))}.app-header{gap:12px;margin-bottom:22px;padding-bottom:19px;align-items:start}.brand-mark{width:42px;height:42px;font-size:25px;border-radius:13px}.brand{gap:10px}.brand .eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:20px}.brand-subtitle{font-size:9px;margin-top:5px}#connection{font-size:8px;padding:8px;gap:5px;max-width:125px;line-height:1.5}#connection:before{width:5px;height:5px;flex-basis:5px}#controls{display:flex;flex-direction:column;gap:16px}#controls>section{width:100%;padding:21px;border-radius:20px}.workspace-heading{width:100%;order:-1;margin:0 0 1px}.workspace-heading h2{font-size:26px;margin-top:5px}#remote-date{font-size:10px;max-width:105px;text-align:right}.workspace-heading .eyebrow{font-size:8px;letter-spacing:1.4px}.hero{order:0}.today-card{order:1}.phone-card{order:2}.cases-card{order:3}.manual-card{order:4}.messages-card{order:5}.remote-footer{order:6;width:100%;font-size:8px}.remote-footer button{font-size:8px}#active-case{font-size:20px;margin:15px 0 10px}.timer-dial{width:226px;height:226px;margin:18px auto 21px}.clock{font-size:44px;letter-spacing:-1.8px}.buttons button{font-size:10px;padding:12px 5px;border-radius:11px}.hero label{margin-top:21px}.section-heading{margin-bottom:18px}.section-hint{font-size:9px}.section-heading h2{font-size:15px}#today{font-size:16px}.today-card h2{font-size:12px}.today-card .eyebrow{font-size:7px}.today-card .icon{width:11px;height:11px}.remote-nav{bottom:calc(12px + env(safe-area-inset-bottom))}#login{margin:35px auto;padding:27px}.remote-manage h1{font-size:17px}.remote-manage .brand .eyebrow{font-size:8px}.back-link{font-size:10px}}
|
||
|
|
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
|
||
|
|
|
||
|
|
@media(max-width:359px){.app-header{flex-wrap:wrap}#connection{max-width:100%;margin-left:52px}}
|
||
|
|
|
||
|
|
/* Day plan leads the remote workspace; avoid fixed blurred layers on mobile. */
|
||
|
|
#controls{grid-template-areas:"heading heading" "day hero" "day today" "cases manual" "phone messages" "footer footer"}
|
||
|
|
.day-card{grid-area:day}.day-card .section-heading{margin-bottom:12px}
|
||
|
|
.day-plan-item{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
|
||
|
|
.day-plan-item:last-child{border-bottom:0}.day-plan-time{flex:0 0 86px;font-size:12px;font-weight:650;color:var(--accent)}
|
||
|
|
.day-plan-item strong{font-size:14px;display:block}.day-plan-item small{display:block;font-size:11px;color:var(--muted);margin:4px 0}
|
||
|
|
.day-plan-item button{font-size:11px;padding:7px 11px;min-height:32px;margin-top:6px}
|
||
|
|
#day-status,#screen-awake-status{display:block;font-size:11px;color:var(--muted);margin:8px 0}
|
||
|
|
#screen-awake{font-size:11px;min-height:32px;padding:7px 10px}
|
||
|
|
.remote-nav{background:#fff;backdrop-filter:none}
|
||
|
|
@media(max-width:699px){.day-card{order:-1}.workspace-heading{order:-2}.remote-nav{position:sticky;transform:none;left:auto;bottom:0;width:100%;max-width:none;order:7;margin-top:10px}.timer-dial{width:170px;height:170px;margin:12px auto}.timer-dial .clock{font-size:33px}}
|