.greeting { font-size: .85rem; } .home { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; } .home-brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .home-brand img { width: 42px; height: 42px; border-radius: 14px; object-fit: cover; box-shadow: var(--shadow-sm); } .model-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; padding: 12px; border-radius: 14px; color: var(--ink-soft); text-decoration: none; font-size: .88rem; font-weight: 500; border: 1px dashed var(--line); transition: var(--t-ui), color var(--t-morph); } .model-link .ic { width: 18px; height: 18px; color: var(--accent); transition: color var(--t-morph); } .model-link:hover { color: var(--ink); border-color: var(--accent); } .today { display: flex; align-items: center; justify-content: space-between; background: var(--grad-accent); color: var(--on-accent); border: none; transition: background var(--t-morph); position: relative; overflow: hidden; } .today::after { content: ''; position: absolute; width: 110px; height: 110px; right: -42px; top: -42px; border-radius: 50%; background: rgba(255,255,255,.14); animation: orbDrift 4s ease-in-out infinite; } .today .muted { color: var(--on-accent); opacity: .8; font-size: .82rem; } .today-kcal { font-size: 2rem; font-weight: 800; line-height: 1.1; } .today-kcal small { font-size: .9rem; font-weight: 500; opacity: .8; } .today .pill { background: rgba(255,255,255,.18); color: var(--on-accent); } .action { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: var(--t-ui); position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } .action::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, var(--bg-tint), transparent); transform: translateX(-110%); transition: transform .55s ease; pointer-events: none; } .action:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); transform: translateY(-2px); } .action:hover::after { transform: translateX(110%); } .action:active { transform: scale(.98); } .action-ico { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; background: var(--bg-tint); display: grid; place-items: center; color: var(--accent); transition: background var(--t-morph), color var(--t-morph); } .action-ico .ic { width: 26px; height: 26px; } .action.big .action-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; } .action.big strong { font-size: 1.1rem; } .action.big em { font-style: normal; font-size: .82rem; color: var(--ink-soft); } .action .chev { color: var(--accent); font-size: 1.2rem; } .action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .action-row .action { flex-direction: column; align-items: flex-start; gap: 12px; } .action-row strong { font-size: .95rem; } @keyframes orbDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .75; } 50% { transform: translate3d(-8px, 8px, 0) scale(1.08); opacity: 1; } }