/* SkinOS web app */ body.skinos-canvas--app { background: var(--sk-white); } .ska { min-height: 100vh; min-height: 100dvh; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; padding-bottom: calc(84px + env(safe-area-inset-bottom)); } .ska[data-view="intro"], .ska[data-view="quiz"], .ska[data-view="analyzing"] { padding-bottom: 24px; } .ska h1, .ska h2, .ska h3 { font-family: var(--sk-display); letter-spacing: -.025em; } /* Top bar */ .ska-top { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 20px; } .ska-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 600 18px/1 var(--sk-display); letter-spacing: -.03em; } .ska-link { padding: 8px 14px; border-radius: 999px; background: var(--sk-stone); font-size: 14px; font-weight: 500; text-decoration: none; } .ska-link:hover { background: var(--sk-stone-2); } .ska-who { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sk-iris); color: #fff; font-size: 14px; font-weight: 600; } .ska-main { flex: 1; padding: 8px 20px 24px; outline: none; } .ska-main h1 { margin: 0 0 8px; font-weight: 500; font-size: 32px; line-height: 1.08; } .ska-h2 { margin: 32px 0 12px; font-size: 19px; font-weight: 600; } .ska-sub { margin: 0 0 20px; color: var(--sk-ink-50); } .ska-hint { margin: -2px 0 20px; color: var(--sk-ink-50); } .ska-fine { margin: 16px 0 0; font-size: 13px; color: var(--sk-ink-50); text-align: center; } .ska-fine a { color: var(--sk-blue); font-weight: 500; } .ska-empty { padding: 20px; border-radius: var(--sk-r-md); background: var(--sk-stone); color: var(--sk-ink-70); } .ska-wide { width: 100%; } .ska-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .ska-actions .sk-btn { flex: 1 1 auto; } .ska-link-btn { display: block; margin: 16px auto 0; padding: 8px; border: 0; background: none; font: 500 14px var(--sk-sans); color: var(--sk-ink-50); cursor: pointer; } .ska-link-btn:hover { color: var(--sk-ink); } /* Bottom tabs */ .ska-tabs { position: fixed; left: 50%; bottom: 0; z-index: 20; width: 100%; max-width: 520px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(var(--sk-card-rgb), .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--sk-ink-06); } .ska-tabs[hidden] { display: none; } .ska-tabs button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; padding: 6px 0; border: 0; background: none; border-radius: 14px; font: 500 11px/1 var(--sk-sans); color: var(--sk-ink-50); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ska-tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ska-tabs button.is-on { color: var(--sk-ink); } .ska-tabs button.is-on svg { stroke: var(--sk-blue); stroke-width: 2; } /* Toast */ .ska-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; width: calc(100% - 32px); max-width: 460px; transform: translateX(-50%); padding: 14px 18px; border-radius: var(--sk-r-md); background:var(--sk-solid); color: #fff; font-size: 15px; box-shadow: 0 16px 40px -16px rgba(41, 40, 36, .5); } .ska-toast[hidden] { display: none; } /* Face markers in the app */ .ska-mk { opacity: 0; scale: .5; animation: ska-mk .45s var(--sk-ease) forwards; animation-delay: calc(300ms + var(--d, 0ms)); } @keyframes ska-mk { to { opacity: 1; scale: 1; } } .sk-face__frame.is-mirrored img { transform: scaleX(-1); } /* Intro */ .ska-intro { padding-top: 4px; } .ska-intro__face { aspect-ratio: 4 / 4.2; margin-bottom: 28px; border-radius: var(--sk-r-xl); } .ska-intro__faces { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 28px; } .ska-intro__faces img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; border-radius: var(--sk-r-lg); background: var(--sk-stone); } .ska-intro__faces img:nth-child(1) { border-top-left-radius: var(--sk-r-xl); } .ska-intro__faces img:nth-child(2) { border-top-right-radius: var(--sk-r-xl); } .ska-intro__faces img:nth-child(3) { border-bottom-left-radius: var(--sk-r-xl); } .ska-intro__faces img:nth-child(4) { border-bottom-right-radius: var(--sk-r-xl); } .ska-intro h1 { font-size: 36px; margin-bottom: 10px; } .ska-intro > p { margin: 0 0 28px; font-size: 17px; color: var(--sk-ink-70); } .ska-intro > p.ska-fine { margin: 16px 0 0; font-size: 13px; } /* Quiz */ .ska-quiz__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; } .ska-quiz__count { margin: 0; font-size: 14px; font-weight: 500; color: var(--sk-ink-50); } .ska-back { width: 44px; height: 44px; margin-left: -10px; border: 0; background: none; border-radius: 50%; cursor: pointer; } .ska-back svg { width: 24px; height: 24px; margin: auto; fill: none; stroke: var(--sk-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ska-back:hover { background: var(--sk-stone); } .ska-meter { height: 4px; margin: 4px 0 28px; border-radius: 2px; background: var(--sk-stone); overflow: hidden; } .ska-meter i { display: block; height: 100%; border-radius: 2px; background: var(--sk-iris); transition: width .3s var(--sk-ease); } .ska-quiz h1 { font-size: 28px; margin-bottom: 20px; } .ska-opts { display: grid; gap: 8px; margin-bottom: 24px; } .ska-opts--multi { grid-template-columns: 1fr 1fr; } .ska-opt { min-height: 56px; padding: 14px 18px; border: 0; border-radius: var(--sk-r-md); background: var(--sk-stone); font: 500 16px/1.3 var(--sk-sans); color: var(--sk-ink); text-align: left; box-shadow: inset 0 0 0 1.5px transparent; cursor: pointer; transition: background-color .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; } .ska-opt:hover { background: var(--sk-stone-2); } .ska-opt.is-on { background: var(--sk-blue-lt); box-shadow: inset 0 0 0 1.5px var(--sk-blue); color: var(--sk-on-blue); } .ska-opts--multi .ska-opt { min-height: 52px; padding: 12px 14px; font-size: 15px; } .ska-quiz--tone .ska-opts { grid-template-columns: 1fr 1fr; } .ska-quiz--tone .ska-opt:last-child { grid-column: 1 / -1; } .ska-opt--swatch { display: flex; align-items: center; gap: 12px; } .ska-opt--swatch i { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(var(--sk-ink-rgb), .12); } /* Camera */ .ska-cam { position: relative; aspect-ratio: 1 / 1; border-radius: var(--sk-r-xl); overflow: hidden; background: #1D1C19; } .ska-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .ska-cam__guide { position: absolute; inset: 0; width: 100%; height: 100%; } .ska-cam__shade { fill: rgba(20, 19, 17, .5); } .ska-cam__oval { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 2; stroke-dasharray: 2 6; transition: stroke .2s; } .ska-cam__oval.is-ok { stroke: #8FA0FF; stroke-dasharray: none; stroke-width: 3; } .ska-cam__status { position: absolute; left: 50%; top: 16px; margin: 0; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(var(--sk-card-rgb), .92); color: var(--sk-ink); font-size: 14px; font-weight: 500; white-space: nowrap; } .ska-cam__status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--sk-amber); } .ska-cam__status.is-ok::before { background: var(--sk-mint); } .ska-cam__off { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; background: #1D1C19; color: #fff; text-align: center; } .ska-cam__off[hidden] { display: none; } .ska-scan__controls { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px; } .ska-shutter { width: 80px; height: 80px; padding: 5px; border: 0; border-radius: 50%; background: var(--sk-iris); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ska-shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background:var(--sk-solid); box-shadow: inset 0 0 0 4px var(--sk-white); transition: transform .12s var(--sk-ease); } .ska-shutter:active i { transform: scale(.92); } .ska-shutter[disabled] { opacity: .35; cursor: default; } .ska-upload { min-height: 44px; font-size: 15px; } .ska-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; } .ska-tips li { padding: 12px; border-radius: var(--sk-r-sm); background: var(--sk-stone); font-size: 13px; line-height: 1.35; color: var(--sk-ink-70); text-align: center; } /* Analysing */ .ska-analyzing { padding-top: 8px; text-align: center; } .ska-shot { position: relative; aspect-ratio: 1 / 1; border-radius: var(--sk-r-xl); overflow: hidden; background: #1D1C19; margin-bottom: 24px; } .ska-shot img { width: 100%; height: 100%; object-fit: cover; } .ska-shot.is-mirrored img { transform: scaleX(-1); } .ska-shot__grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, .7) 1.2px, transparent 1.6px); background-size: 22px 22px; -webkit-mask: radial-gradient(ellipse 36% 44% at 50% 54%, #000 60%, transparent 100%); mask: radial-gradient(ellipse 36% 44% at 50% 54%, #000 60%, transparent 100%); opacity: .8; } .ska-shot__beam { position: absolute; left: 0; right: 0; top: -25%; height: 25%; background: linear-gradient(to bottom, rgba(102, 127, 255, 0), rgba(102, 127, 255, .3) 80%, rgba(206, 162, 255, .95)); animation: ska-beam 1.8s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes ska-beam { to { top: 100%; } } .ska-analyzing h1 { font-size: 26px; } .ska-analyzing p { color: var(--sk-ink-50); margin: 0; } /* Retake */ .ska-retake { padding-top: 32px; text-align: center; } .ska-retake__icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--sk-amber-lt); } .ska-retake__icon svg { width: 40px; height: 40px; fill: none; stroke: var(--sk-amber); stroke-width: 2.4; stroke-linecap: round; } .ska-retake p { margin: 0 0 28px; font-size: 17px; color: var(--sk-ink-70); } /* Results */ .ska-hero-card { margin-bottom: 16px; } .ska-hero-card__face { aspect-ratio: 1 / 1; border-radius: var(--sk-r-xl); } .ska-hero-card__note { margin: 8px 0 0; font-size: 12px; color: var(--sk-ink-50); text-align: center; } .ska-score { display: flex; align-items: center; gap: 20px; padding: 20px; border-radius: var(--sk-r-lg); background: var(--sk-stone); } .ska-score__ring { position: relative; flex: none; } .ska-score__ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ska-score__ring b { font: 500 46px/1 var(--sk-display); letter-spacing: -.04em; } .ska-score__ring small { font-size: 12px; color: var(--sk-ink-50); margin-top: 4px; } .ska-ring__track { fill: none; stroke: var(--sk-white); stroke-width: 11; } .ska-ring__value { fill: none; stroke: url(#ska-iris); stroke-width: 11; stroke-linecap: round; animation: ska-ring 1.1s var(--sk-ease) both; } @keyframes ska-ring { from { stroke-dashoffset: 420; } } .ska-score__meta p { margin: 0 0 6px; } .ska-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--sk-white); font-size: 14px; font-weight: 500; } .ska-delta { font-weight: 600; font-size: 15px; } .ska-delta.is-up { color: var(--sk-mint); } .ska-delta.is-down { color: var(--sk-rose); } .ska-source { font-size: 13px; color: var(--sk-ink-50); } .ska-summary { margin: 20px 0 0; font-size: 17px; line-height: 1.5; } .ska-focus { margin-top: 20px; } .ska-focus h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--sk-ink-50); } .ska-focus p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .ska-focus span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--sk-stone); font-weight: 500; font-size: 15px; } .ska-focus span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .ska-concerns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ska-concerns li { padding: 14px 14px 16px; border-radius: var(--sk-r-md); background: var(--sk-stone); } .ska-concerns li:has(p) { grid-column: 1 / -1; } .ska-concerns__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .ska-concerns__head span { font-weight: 500; font-size: 15px; } .ska-concerns__head b { font-size: 13px; font-weight: 600; color: var(--c); } .ska-concerns p { margin: 10px 0 0; font-size: 14px; color: var(--sk-ink-70); } .ska-bar { height: 6px; border-radius: 3px; background: var(--sk-white); overflow: hidden; } .ska-bar i { display: block; height: 100%; border-radius: 3px; background: var(--c); } .ska-strengths { margin-top: 24px; padding: 18px 20px; border-radius: var(--sk-r-md); background: var(--sk-mint-lt); } .ska-strengths h2 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--sk-on-mint); } .ska-strengths ul { margin: 0; padding-left: 18px; } .ska-strengths li { margin: 4px 0; font-size: 15px; } .ska-note { margin: 20px 0 0; padding: 14px 16px; border-radius: var(--sk-r-md); background: var(--sk-blue-lt); font-size: 14px; color: var(--sk-on-blue); } /* Routine */ .ska-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 999px; background: var(--sk-stone); } .ska-seg button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; font: 500 15px/1 var(--sk-sans); color: var(--sk-ink-50); cursor: pointer; } .ska-seg button.is-on { background: var(--sk-white); color: var(--sk-ink); box-shadow: 0 1px 3px rgba(41, 40, 36, .12); } .ska-steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; gap: 8px; } .ska-steps > li { counter-increment: st; position: relative; padding: 18px 18px 18px 64px; border-radius: var(--sk-r-md); background: var(--sk-stone); } .ska-steps > li::before { content: counter(st); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sk-white); color: var(--sk-ink); font-weight: 600; font-size: 14px; } .ska-steps > li.is-key::before { background: var(--sk-iris); color: #fff; } .ska-steps h3 { margin: 4px 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.015em; } .ska-steps h3 em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--sk-white); font-style: normal; font-size: 12px; font-weight: 500; color: var(--sk-ink-50); vertical-align: 2px; } .ska-steps p { margin: 0 0 4px; font-size: 14px; color: var(--sk-ink-70); } .ska-steps .ska-steps__look { color: var(--sk-ink); } .ska-steps__look span { font-weight: 600; } .ska-steps .ska-steps__freq { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--sk-blue-lt); color: var(--sk-on-blue); font-size: 13px; font-weight: 500; } .ska-tipbox { margin-top: 24px; padding: 20px; border-radius: var(--sk-r-md); background: var(--sk-amber-lt); } .ska-tipbox h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--sk-on-amber); } .ska-tipbox ul { margin: 0; padding-left: 18px; } .ska-tipbox li { margin: 8px 0; font-size: 14px; } /* Skin coach */ .ska-thread { display: flex; flex-direction: column; gap: 8px; } .ska-msg { max-width: 86%; padding: 12px 16px; border-radius: 20px; font-size: 15px; line-height: 1.45; white-space: normal; } .ska-msg--bot { align-self: flex-start; background: var(--sk-stone); border-bottom-left-radius: 6px; } .ska-msg--me { align-self: flex-end; background:var(--sk-solid); color: #fff; border-bottom-right-radius: 6px; } .ska-replies { display: flex; gap: 6px; } .ska-replies button, .ska-prompts button { padding: 10px 16px; border: 0; border-radius: 999px; background: var(--sk-white); box-shadow: inset 0 0 0 1px var(--sk-ink-10); font: 500 14px/1.2 var(--sk-sans); color: var(--sk-ink); cursor: pointer; } .ska-replies button:hover, .ska-prompts button:hover { box-shadow: inset 0 0 0 1px var(--sk-blue); color: var(--sk-blue); } .ska-prompts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; } .ska-prompts button { background: var(--sk-blue-lt); box-shadow: none; color: var(--sk-on-blue); text-align: left; } .ska-typing { display: flex; gap: 4px; padding: 16px 18px; } .ska-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--sk-ink-50); animation: ska-dot 1s infinite ease-in-out; } .ska-typing i:nth-child(2) { animation-delay: .15s; } .ska-typing i:nth-child(3) { animation-delay: .3s; } @keyframes ska-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } .ska-compose { position: sticky; bottom: calc(78px + var(--ska-nav-gap)); display: flex; align-items: flex-end; gap: 8px; margin-top: 20px; padding: 6px 6px 6px 18px; border-radius: 28px; background: var(--sk-white); box-shadow: inset 0 0 0 1px var(--sk-ink-10), 0 10px 30px -14px rgba(41, 40, 36, .3); } .ska-compose textarea { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 0; border: 0; background: none; resize: none; font: 16px/1.4 var(--sk-sans); color: var(--sk-ink); outline: none; } .ska-send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background:var(--sk-solid); cursor: pointer; } .ska-send svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Product check */ .ska-check textarea { width: 100%; min-height: 140px; padding: 16px; border: 0; border-radius: var(--sk-r-md); background: var(--sk-stone); color: var(--sk-ink); font: 16px/1.5 var(--sk-sans); resize: vertical; } .ska-check textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sk-blue); } .ska-check .ska-actions label { cursor: pointer; } .ska-loading { padding: 24px 0; color: var(--sk-ink-50); font-weight: 500; } .ska-verdict { display: flex; gap: 16px; align-items: center; margin: 28px 0 8px; padding: 18px; border-radius: var(--sk-r-lg); background: var(--sk-stone); scroll-margin-top: 16px; } .ska-verdict > span { flex: none; font: 500 44px/1 var(--sk-display); letter-spacing: -.04em; background: var(--sk-iris); -webkit-background-clip: text; background-clip: text; color: transparent; } .ska-verdict.is-care > span { background: none; color: var(--sk-amber); } .ska-verdict.is-poor > span, .ska-verdict.is-bad > span { background: none; color: var(--sk-rose); } .ska-verdict h2 { margin: 0 0 2px; font-size: 18px; font-weight: 600; } .ska-verdict p { margin: 0; font-size: 14px; color: var(--sk-ink-50); } .ska-ing h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 600; } .ska-ing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ska-ing li { display: flex; flex-direction: column; padding: 12px 16px; border-radius: 14px; background: var(--sk-stone); } .ska-ing b { font-weight: 600; } .ska-ing span { font-size: 14px; color: var(--sk-ink-50); } .ska-ing--match h3, .ska-ing--good h3 { color: var(--sk-on-mint); } .ska-ing--warn h3 { color: var(--sk-on-amber); } .ska-ing--avoid h3 { color: var(--sk-rose); } .ska-ing--avoid li { background: var(--sk-rose-lt); } /* Progress */ .ska-card { padding: 16px; border-radius: var(--sk-r-lg); background: var(--sk-stone); } .ska-chart { width: 100%; height: auto; overflow: visible; } .ska-chart__grid { stroke: var(--sk-white); stroke-width: 1.5; } .ska-chart__axis { fill: var(--sk-ink-50); font-size: 10px; text-anchor: end; font-family: var(--sk-sans); } .ska-chart__line { fill: none; stroke: var(--sk-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .ska-chart__dot { fill: var(--sk-white); stroke: var(--sk-blue); stroke-width: 2; } .ska-chart__dot.is-last { fill: var(--sk-blue); } .ska-compare, .ska-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ska-compare li, .ska-history li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--sk-stone); } .ska-compare b { font-size: 14px; font-weight: 500; color: var(--sk-ink-50); } .ska-compare .is-better b { color: var(--sk-mint); } .ska-compare .is-worse b { color: var(--sk-rose); } .ska-history span { display: flex; flex-direction: column; } .ska-history small { font-size: 13px; color: var(--sk-ink-50); } .ska-history b { font: 500 26px/1 var(--sk-display); letter-spacing: -.03em; } .ska-settings { margin-top: 12px; } .ska-danger { color: var(--sk-rose); } @media (min-width: 560px) { .ska-main { padding: 12px 24px 32px; } .ska-top { padding: 0 24px; } } @media (max-width: 360px) { .ska-opts--multi, .ska-concerns { grid-template-columns: 1fr; } .ska-score { flex-direction: column; align-items: flex-start; } .ska-tips { grid-template-columns: 1fr; } } /* ---------- Detected tone and type ---------- */ .ska-detect { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .ska-detect .ska-chip { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; margin: 0; padding: 12px 14px; border: 0; border-radius: var(--sk-r-md); background: var(--sk-stone); text-align: left; cursor: pointer; font: inherit; line-height: 1.2; } .ska-detect .ska-chip span { font-size: 15px; font-weight: 600; } .ska-detect .ska-chip small { flex-basis: 100%; font-size: 12px; color: var(--sk-ink-50); } .ska-detect .ska-chip i { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(var(--sk-ink-rgb), .15); } .ska-detect .ska-chip:hover small { color: var(--sk-blue); } .ska-opt--swatch i.is-scan { background: var(--sk-iris); } .ska-quiz--tone .ska-opt:first-child { grid-column: 1 / -1; } .ska-quiz--tone .ska-opt:last-child { grid-column: auto; } /* ---------- Guide ---------- */ .ska-guidecard { margin-top: 24px; padding: 20px; border-radius: var(--sk-r-lg); background: var(--sk-stone); } .ska-guidecard h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; } .ska-guidecard__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; } .ska-guidecard__row b { width: 72px; font-size: 13px; font-weight: 600; color: var(--sk-ink-50); } .ska-guidecard__row span { padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 500; } .ska-guidecard__row .is-want { background: var(--sk-mint-lt); color: var(--sk-on-mint); } .ska-guidecard__row .is-avoid { background: var(--sk-rose-lt); color: var(--sk-on-rose); } .ska-guidecard .sk-btn { margin-top: 6px; background: var(--sk-white); } .ska-guide { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ska-guide li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--sk-stone); } .ska-guide b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; } .ska-guide span { font-size: 13px; color: var(--sk-ink-50); line-height: 1.35; } .ska-guide--want li { background: var(--sk-mint-lt); } .ska-guide--want b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sk-mint); } .ska-guide--avoid li { background: var(--sk-stone); } .ska-guide--avoid em { padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; background: var(--sk-amber-lt); color: var(--sk-on-amber); } .ska-guide--avoid .is-avoid em { background: var(--sk-rose-lt); color: var(--sk-on-rose); } .ska-guide--avoid .is-never { background: var(--sk-rose-lt); } .ska-guide--avoid .is-never em { background: var(--sk-rose); color: #fff; } /* ---------- Product lists ---------- */ .ska-seg--two { grid-template-columns: 1fr 1fr; margin-bottom: 16px; } .ska-cat { margin: 20px 0 8px; font-size: 14px; font-weight: 600; color: var(--sk-ink-50); } .ska-prods { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ska-prod { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; border: 0; border-radius: 16px; background: var(--sk-stone); text-align: left; font: inherit; color: inherit; cursor: pointer; } .ska-prod:hover { background: var(--sk-stone-2); } .ska-thumb { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--t, var(--sk-white)); font: 600 18px/1 var(--sk-display); color: var(--sk-ink-70); } .ska-thumb img { width: 100%; height: 100%; object-fit: cover; } .ska-prod__text { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ska-prod__text b { font-weight: 600; font-size: 15px; line-height: 1.25; } .ska-prod__text small { font-size: 12px; color: var(--sk-ink-50); } .ska-fit { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 52px; padding: 6px 8px; border-radius: 12px; background: var(--sk-white); } .ska-fit b { font: 600 17px/1 var(--sk-display); } .ska-fit small { font-size: 10px; color: var(--sk-ink-50); margin-top: 2px; } .ska-fit.is-great b { background: var(--sk-iris); -webkit-background-clip: text; background-clip: text; color: transparent; } .ska-fit.is-good b { color: var(--sk-mint); } .ska-fit.is-care b { color: var(--sk-amber); } .ska-fit.is-poor b, .ska-fit.is-bad b { color: var(--sk-rose); } .ska-prods--mini { margin-top: 10px; } .ska-prods--mini .ska-prod { background: var(--sk-white); padding: 8px 10px 8px 8px; } .ska-prods--mini .ska-thumb { width: 40px; height: 40px; font-size: 15px; } .ska-prods--mini .ska-fit { background: var(--sk-stone); } /* ---------- Scan a product ---------- */ .ska-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ska-methods > :only-child { grid-column: 1 / -1; } .ska-method { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border: 0; border-radius: var(--sk-r-md); background:var(--sk-solid); color: #fff; text-align: left; font: inherit; cursor: pointer; } .ska-method + .ska-method { background: var(--sk-stone); color: var(--sk-ink); } .ska-method svg { width: 28px; height: 28px; margin-bottom: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ska-method b { font-size: 15px; font-weight: 600; } .ska-method small { font-size: 12px; opacity: .65; } .ska-field { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 8px; } .ska-field span { font-size: 14px; font-weight: 600; } .ska-field input, .ska-field select { min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--sk-stone); font: 16px var(--sk-sans); color: var(--sk-ink); -webkit-appearance: none; appearance: none; } .ska-field input:focus, .ska-field select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sk-blue); } .ska-paste { margin-top: 20px; border-radius: var(--sk-r-md); background: var(--sk-stone); } .ska-paste summary { padding: 16px 18px; font-weight: 600; cursor: pointer; list-style: none; } .ska-paste summary::-webkit-details-marker { display: none; } .ska-paste summary::after { content: "+"; float: right; color: var(--sk-ink-50); } .ska-paste[open] summary::after { content: "–"; } .ska-paste[open] { padding: 0 14px 14px; } .ska-paste[open] summary { padding-left: 4px; } .ska-paste textarea { width: 100%; min-height: 120px; padding: 14px; border: 0; border-radius: 14px; background: var(--sk-white); font: 16px/1.5 var(--sk-sans); color: var(--sk-ink); resize: vertical; } .ska-paste .ska-field { margin-top: 12px; } .ska-paste .ska-field select { background: var(--sk-white); } .ska-paste .sk-btn { margin-top: 6px; } /* ---------- Barcode ---------- */ .ska-barcode .ska-back, .ska-product .ska-back { margin: 0 0 4px -10px; } .ska-cam--wide { aspect-ratio: 4 / 3; margin-top: 12px; } .ska-cam--wide video { transform: none; } .ska-bc-frame { position: absolute; inset: 0; display: grid; place-items: center; } .ska-bc-frame i { width: 72%; height: 38%; border-radius: 16px; box-shadow: 0 0 0 999px rgba(20, 19, 17, .45), inset 0 0 0 2px rgba(var(--sk-card-rgb), .9); position: relative; overflow: hidden; } .ska-bc-frame i::after { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #FF85B1; box-shadow: 0 0 12px #FF85B1; animation: ska-bc 1.6s ease-in-out infinite alternate; } @keyframes ska-bc { from { transform: translateY(-40px); } to { transform: translateY(40px); } } .ska-cam--wide .ska-cam__status { top: auto; bottom: 14px; } .ska-bc-manual { margin-top: 8px; } .ska-bc-manual .sk-btn { width: 100%; } /* ---------- Product result ---------- */ .ska-product__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .ska-product__head .ska-thumb { width: 72px; height: 72px; border-radius: 18px; font-size: 26px; } .ska-product__head small { font-size: 13px; color: var(--sk-ink-50); } .ska-product__head h1 { margin: 2px 0 4px; font-size: 24px; line-height: 1.15; } .ska-product__head .ska-source { margin: 0; } .ska-fitcard { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: var(--sk-r-lg); background: var(--sk-stone); } .ska-fitcard__ring { position: relative; flex: none; } .ska-fitcard__ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ska-fitcard__ring b { font: 500 36px/1 var(--sk-display); letter-spacing: -.04em; } .ska-fitcard__ring small { font-size: 11px; color: var(--sk-ink-50); margin-top: 3px; } .ska-fitcard h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; } .ska-fitcard p { margin: 0; font-size: 14px; color: var(--sk-ink-70); } .ska-fitcard.is-good .ska-ring__value { stroke: var(--sk-mint); } .ska-fitcard.is-care .ska-ring__value { stroke: var(--sk-amber); } .ska-fitcard.is-poor .ska-ring__value, .ska-fitcard.is-bad .ska-ring__value { stroke: var(--sk-rose); } .ska-fitcard.is-bad { background: var(--sk-rose-lt); } .ska-ing b em { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; background: var(--sk-white); color: var(--sk-on-rose); vertical-align: 1px; } .ska-ing--match li { background: var(--sk-mint-lt); } .ska-ing--neutral li { padding: 10px 14px; } .ska-ing--neutral span { font-size: 13px; } @media (max-width: 380px) { .ska-guide, .ska-methods { grid-template-columns: 1fr; } .ska-fitcard { flex-direction: column; align-items: flex-start; } } /* ---------- Photo product scanner ---------- */ .ska-photo-tips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--sk-ink-50); } .ska-photo-tips li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--sk-blue); } .ska-method + .ska-method { background: var(--sk-stone); color: var(--sk-ink); } .ska-paste + .ska-paste { margin-top: 8px; } .ska-pscan .ska-back, .ska-review .ska-back { margin: 0 0 4px -10px; } .ska-cam--label { aspect-ratio: 3 / 4; margin-top: 12px; } .ska-cam--label video { transform: none; } .ska-label-frame { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .ska-label-frame i { width: 82%; height: 62%; border-radius: 18px; box-shadow: 0 0 0 999px rgba(20, 19, 17, .4); position: relative; } .ska-label-frame i::before, .ska-label-frame i::after { content: ""; position: absolute; width: 34px; height: 34px; border: 3px solid #fff; } .ska-label-frame i::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; } .ska-label-frame i::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; } .ska-cam--label .ska-cam__status { top: auto; bottom: 14px; } .ska-cam--label .ska-cam__status::before { background: var(--sk-blue); } .ska-reading { text-align: center; padding-top: 8px; } .ska-reading__photo { position: relative; aspect-ratio: 3 / 4; max-height: 52vh; margin: 0 auto 24px; border-radius: var(--sk-r-xl); overflow: hidden; background: #1D1C19; } .ska-reading__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .85; } .ska-reading h1 { font-size: 24px; } .ska-reading .ska-progress { height: 6px; margin: 12px auto; max-width: 280px; border-radius: 3px; background: var(--sk-stone); overflow: hidden; } .ska-reading .ska-progress i { display: block; height: 100%; width: 6%; border-radius: 3px; background: var(--sk-iris); transition: width .3s var(--sk-ease); } .ska-review__head { display: flex; gap: 14px; align-items: center; } .ska-review__head img { flex: none; width: 76px; height: 100px; object-fit: cover; border-radius: 14px; background: var(--sk-stone); } .ska-review__head img[src=""] { display: none; } .ska-review__head h1 { font-size: 24px; margin-bottom: 4px; } .ska-review__head .ska-sub { margin: 0; font-size: 14px; } .ska-review .ska-field { margin: 16px 0 6px; } .ska-review__list { width: 100%; min-height: 160px; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--sk-stone); font: 15px/1.55 var(--sk-sans); color: var(--sk-ink); resize: vertical; } .ska-review__list:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--sk-blue); } /* ---------- Product info ---------- */ .ska-fitcard__label { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--sk-ink-50); } .ska-about h3, .ska-ing h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 600; } .ska-about__lead { margin: 0; font-size: 16px; line-height: 1.5; } .ska-about > p { margin: 0; font-size: 15px; color: var(--sk-ink-70); } .ska-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; } .ska-flags li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; } .ska-flags li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; } .ska-flags .is-ok { background: var(--sk-mint-lt); color: var(--sk-on-mint); } .ska-flags .is-ok::before { background: var(--sk-mint); } .ska-flags .is-warn { background: var(--sk-amber-lt); color: var(--sk-on-amber); } .ska-flags .is-warn::before { background: var(--sk-amber); } .ska-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ska-keys li { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: var(--sk-blue-lt); } .ska-keys b { font-weight: 600; color: var(--sk-on-blue); } .ska-keys span { font-size: 13px; color: var(--sk-ink-70); } .ska-about__notes { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--sk-ink-70); } .ska-about__notes li { margin: 4px 0; } .ska-linkish { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--sk-blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* ===================================================================== App experience: splash, shell, navigation feel, Today, notifications ===================================================================== */ html { background: var(--sk-white); } body.skinos-canvas--app { overscroll-behavior-y: none; } .ska { padding-bottom: calc(118px + var(--ska-nav-gap)); } .ska[data-view="intro"], .ska[data-view="quiz"], .ska[data-view="analyzing"], .ska[data-view="reading"] { padding-bottom: 32px; } /* ---------- Splash ---------- */ .ska-splash { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #F7F5FF; overflow: hidden; transition: opacity .5s var(--sk-ease), transform .5s var(--sk-ease); animation: ska-splash-failsafe .4s ease 6s forwards; } .ska-splash__glow { position: absolute; inset: -20%; background: radial-gradient(40% 35% at 30% 30%, rgba(102, 127, 255, .28), transparent 70%), radial-gradient(40% 35% at 70% 65%, rgba(255, 133, 177, .26), transparent 70%), radial-gradient(45% 40% at 55% 40%, rgba(206, 162, 255, .3), transparent 70%); animation: ska-glow 6s ease-in-out infinite alternate; } .ska-splash__mark { position: relative; width: 104px; height: 104px; animation: ska-mark-in .7s cubic-bezier(.2, 1.3, .4, 1) both; } .ska-splash__mark svg { width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgba(102, 127, 255, .35)); } .ska-splash__oval { stroke-dasharray: 100; stroke-dashoffset: 100; animation: ska-draw 1s .25s var(--sk-ease) forwards; } .ska-splash__dot { transform-box: fill-box; transform-origin: center; scale: 0; animation: ska-spark .5s .9s cubic-bezier(.2, 1.6, .4, 1) forwards; } .ska-splash__name { position: relative; margin: 22px 0 4px; font: 600 30px/1 var(--sk-display); letter-spacing: -.035em; color: var(--sk-ink); animation: ska-rise .6s .35s var(--sk-ease) both; } .ska-splash__tag { position: relative; margin: 0; font-size: 15px; color: var(--sk-ink-50); animation: ska-rise .6s .5s var(--sk-ease) both; } .ska-splash__bar { position: absolute; bottom: calc(56px + env(safe-area-inset-bottom)); width: 120px; height: 4px; border-radius: 2px; background: rgba(var(--sk-ink-rgb), .08); overflow: hidden; } .ska-splash__bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--sk-iris); animation: ska-load 1.1s ease-in-out infinite; } .ska-splash.is-done { opacity: 0; transform: scale(1.04); pointer-events: none; } @keyframes ska-mark-in { from { opacity: 0; transform: scale(.6) rotate(-8deg); } } @keyframes ska-draw { to { stroke-dashoffset: 0; } } @keyframes ska-spark { to { scale: 1; } } @keyframes ska-rise { from { opacity: 0; transform: translateY(10px); } } @keyframes ska-load { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } } @keyframes ska-glow { to { transform: translate(4%, -3%) scale(1.06); } } @keyframes ska-splash-failsafe { to { opacity: 0; visibility: hidden; } } /* ---------- Header ---------- */ .ska-top { position: sticky; top: 0; z-index: 15; height: auto; min-height: 60px; padding: env(safe-area-inset-top) 16px 0 20px; background: rgba(var(--sk-bg-rgb), .86); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); view-transition-name: ska-top; } .ska-top__actions { display: flex; align-items: center; gap: 8px; } .ska-iconbtn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sk-stone); cursor: pointer; transition: transform .15s var(--sk-ease), background-color .15s; } .ska-iconbtn:hover { background: var(--sk-stone-2); } .ska-iconbtn svg { width: 21px; height: 21px; fill: none; stroke: var(--sk-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ska-dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #FF5A8A; box-shadow: 0 0 0 2px var(--sk-white); } .ska-dot[hidden] { display: none; } .ska-link { background:var(--sk-solid); color: #fff; } .ska-link:hover { background: #000; } /* ---------- Floating tab bar ---------- */ /* Lifted clear of rounded screen corners and gesture bars: at least 20px, more where the phone reports a safe area. */ :root { --ska-nav-gap: max(20px, calc(env(safe-area-inset-bottom) + 12px)); } .ska-tabs { left: 50%; right: auto; bottom: var(--ska-nav-gap); width: calc(100% - 32px); max-width: 496px; padding: 6px; border-radius: 26px; background: rgba(var(--sk-card-rgb), .88); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); box-shadow: 0 0 0 1px rgba(var(--sk-ink-rgb), .06), 0 16px 40px -14px rgba(41, 40, 36, .28); view-transition-name: ska-tabs; } .ska-tabs__pill { position: absolute; left: 0; top: 6px; bottom: 6px; width: 60px; border-radius: 20px; background: #EEEFFF; transition: transform .42s cubic-bezier(.3, 1.35, .5, 1), width .3s var(--sk-ease), opacity .2s; opacity: 0; pointer-events: none; } .ska-tabs button { position: relative; z-index: 1; min-height: 54px; border-radius: 20px; transition: color .2s, transform .15s var(--sk-ease); } .ska-tabs button.is-on { color: var(--sk-on-blue); } .ska-tabs button.is-on svg { stroke: #3443C9; } .ska-tabs button:active { transform: scale(.92); } .ska-tabs__scan i { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -24px; border-radius: 20px; background: var(--sk-iris); box-shadow: 0 10px 22px -8px rgba(102, 127, 255, .7), 0 0 0 4px rgba(var(--sk-card-rgb), .95); transition: transform .2s var(--sk-ease); } .ska-tabs .ska-tabs__scan svg { width: 26px; height: 26px; stroke: #fff; stroke-width: 2; } .ska-tabs .ska-tabs__scan.is-on svg { stroke: #fff; } .ska-tabs__scan:active i { transform: scale(.9) rotate(-4deg); } .ska-toast { bottom: calc(96px + var(--ska-nav-gap)); } /* ---------- Movement between screens ---------- */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); } ::view-transition-group(ska-top), ::view-transition-group(ska-tabs) { animation: none; } html[data-nav="next"]::view-transition-old(root) { animation-name: ska-out-left; } html[data-nav="next"]::view-transition-new(root) { animation-name: ska-in-right; } html[data-nav="prev"]::view-transition-old(root) { animation-name: ska-out-right; } html[data-nav="prev"]::view-transition-new(root) { animation-name: ska-in-left; } html[data-nav="push"]::view-transition-old(root) { animation-name: ska-push-out; } html[data-nav="push"]::view-transition-new(root) { animation-name: ska-push-in; } html[data-nav="pop"]::view-transition-old(root) { animation-name: ska-pop-out; } html[data-nav="pop"]::view-transition-new(root) { animation-name: ska-pop-in; } html[data-nav="fade"]::view-transition-old(root) { animation-name: ska-fade-out; animation-duration: .18s; } html[data-nav="fade"]::view-transition-new(root) { animation-name: ska-fade-in; animation-duration: .24s; } @keyframes ska-out-left { to { transform: translateX(-12%); opacity: 0; } } @keyframes ska-in-right { from { transform: translateX(12%); opacity: 0; } } @keyframes ska-out-right { to { transform: translateX(12%); opacity: 0; } } @keyframes ska-in-left { from { transform: translateX(-12%); opacity: 0; } } @keyframes ska-push-out { to { transform: translateX(-24%); opacity: .2; } } @keyframes ska-push-in { from { transform: translateX(100%); } } @keyframes ska-pop-out { to { transform: translateX(100%); } } @keyframes ska-pop-in { from { transform: translateX(-24%); opacity: .2; } } @keyframes ska-fade-out { to { opacity: 0; } } @keyframes ska-fade-in { from { opacity: 0; transform: translateY(6px); } } /* Browsers without view transitions: a light entrance on the content only. */ .ska-main.is-enter { animation: ska-enter .32s cubic-bezier(.2, .7, .2, 1); } html[data-nav="next"] .ska-main.is-enter, html[data-nav="push"] .ska-main.is-enter { animation-name: ska-enter-right; } html[data-nav="prev"] .ska-main.is-enter, html[data-nav="pop"] .ska-main.is-enter { animation-name: ska-enter-left; } @keyframes ska-enter { from { opacity: 0; transform: translateY(8px); } } @keyframes ska-enter-right { from { opacity: 0; transform: translateX(28px); } } @keyframes ska-enter-left { from { opacity: 0; transform: translateX(-28px); } } /* Press feedback everywhere it helps */ .sk-btn, .ska-prod, .ska-opt, .ska-method, .ska-quick button, .ska-tick, .ska-hero--first, .ska-chip, .ska-inbox button { transition: transform .14s var(--sk-ease), background-color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; } .sk-btn:active, .ska-prod:active, .ska-opt:active, .ska-method:active, .ska-quick button:active, .ska-hero--first:active, .ska-chip:active, .ska-inbox button:active { transform: scale(.97); } html.is-standalone .ska-tabs, html.is-standalone .ska-top { -webkit-user-select: none; user-select: none; } /* ---------- Today ---------- */ .ska-today { padding-top: 4px; } .ska-hello p { margin: 0; font-size: 14px; color: var(--sk-ink-50); } .ska-hello h1 { margin: 2px 0 18px; font-size: 30px; } .ska-hero { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; padding: 20px; border: 0; border-radius: 28px; background: linear-gradient(135deg, #6B7BFF 0%, #B48CFF 52%, #FF8DB8 100%); color: #fff; text-align: left; font: inherit; overflow: hidden; box-shadow: 0 18px 40px -20px rgba(107, 123, 255, .8); } .ska-hero::before { content: ""; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .ska-hero > * { position: relative; } .ska-hero__ring { position: relative; flex: none; } .ska-hero__ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ska-hero__ring b { font: 500 40px/1 var(--sk-display); letter-spacing: -.04em; } .ska-hero__ring small { margin-top: 3px; font-size: 11px; opacity: .85; } .ska-hero .ska-ring__track { stroke: rgba(255, 255, 255, .25); } .ska-hero .ska-ring__value { stroke: #fff; } .ska-hero__text { flex: 1; min-width: 0; } .ska-hero__when { margin: 4px 0 12px; font-size: 14px; opacity: .9; } .ska-hero__btns { display: flex; flex-wrap: wrap; gap: 6px; } .ska-hero__btns .sk-btn { min-height: 38px; padding: 0 14px; font-size: 14px; } .sk-btn--onglass { background: var(--sk-card); color: var(--sk-ink); } .sk-btn--glass { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--sk-card-rgb), .35); } .ska-badge { display: inline-block; margin: 0; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .22); } .ska-badge--due { background: var(--sk-card); color: var(--sk-on-rose); } .ska-hero--first { cursor: pointer; padding: 18px; } .ska-hero__faces { display: flex; flex: none; } .ska-hero__faces img { width: 46px; height: 46px; margin-left: -14px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 3px rgba(var(--sk-card-rgb), .85); background: var(--sk-card); } .ska-hero__faces img:first-child { margin-left: 0; } .ska-hero--first .ska-hero__text b { display: block; font: 600 18px/1.2 var(--sk-display); letter-spacing: -.02em; } .ska-hero--first .ska-hero__text small { display: block; margin-top: 4px; font-size: 13px; opacity: .9; } .ska-hero__go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .22); } .ska-hero__go svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ska-card { margin-top: 14px; padding: 18px; border-radius: 24px; background: var(--sk-stone); } .ska-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ska-card__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; } .ska-card__head h2 svg { width: 20px; height: 20px; fill: none; stroke: #E09A2B; stroke-width: 1.8; stroke-linecap: round; } .ska-mini-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sk-white); } .ska-mini-seg button { min-width: 42px; min-height: 30px; border: 0; border-radius: 999px; background: none; font: 600 12px var(--sk-sans); color: var(--sk-ink-50); cursor: pointer; } .ska-mini-seg button.is-on { background:var(--sk-solid); color: #fff; } .ska-meter2 { height: 6px; margin: 14px 0 8px; border-radius: 3px; background: var(--sk-white); overflow: hidden; } .ska-meter2 i { display: block; height: 100%; border-radius: 3px; background: var(--sk-iris); transition: width .45s cubic-bezier(.3, 1.2, .5, 1); } .ska-check-card__sub { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 13px; color: var(--sk-ink-50); } .ska-check-card__sub b { color: var(--sk-mint); } .ska-streak { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 7px; border-radius: 999px; background: var(--sk-amber-lt); color: var(--sk-on-amber); font-weight: 600; } .ska-streak svg { width: 15px; height: 15px; fill: #E09A2B; stroke: none; } .ska-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ska-tick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 12px; border: 0; border-radius: 16px; background: var(--sk-white); text-align: left; font: inherit; color: inherit; cursor: pointer; } .ska-tick > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--sk-stone-2); transition: background .2s, box-shadow .2s, transform .3s cubic-bezier(.2, 1.6, .4, 1); } .ska-tick > i svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s .05s var(--sk-ease); } .ska-tick > span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ska-tick b { font-weight: 600; font-size: 15px; transition: color .2s; } .ska-tick small { font-size: 12px; color: var(--sk-ink-50); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ska-tick em { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--sk-stone); font-style: normal; font-size: 11px; color: var(--sk-ink-50); } .ska-tick.is-done > i { background: var(--sk-iris); box-shadow: none; transform: scale(1.06); } .ska-tick.is-done > i svg { stroke-dashoffset: 0; } .ska-tick.is-done b { color: var(--sk-ink-50); text-decoration: line-through; text-decoration-color: rgba(var(--sk-ink-rgb), .3); } .ska-check-card.is-complete { animation: ska-complete .7s var(--sk-ease); } @keyframes ska-complete { 40% { box-shadow: 0 0 0 6px rgba(206, 162, 255, .35); } } .ska-ask-card { display: flex; gap: 14px; background: var(--sk-blue-lt); } .ska-ask-card__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--sk-white); } .ska-ask-card__ic svg, .ska-state__ic svg { width: 22px; height: 22px; fill: none; stroke: var(--sk-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ska-ask-card h2 { margin: 2px 0 4px; font-size: 17px; font-weight: 600; } .ska-ask-card p { margin: 0; font-size: 14px; color: var(--sk-ink-70); } .ska-ask-card__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ska-ask-card__btns .sk-btn { min-height: 40px; padding: 0 16px; font-size: 14px; } .ska-ask-card__btns .sk-btn--quiet { background: var(--sk-white); } .ska-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .ska-quick button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border: 0; border-radius: 22px; background: var(--sk-stone); text-align: left; font: inherit; color: inherit; cursor: pointer; } .ska-quick i { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 12px; background: var(--t); } .ska-quick i svg { width: 21px; height: 21px; fill: none; stroke: var(--sk-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ska-quick b { font-size: 15px; font-weight: 600; } .ska-quick small { font-size: 12px; color: var(--sk-ink-50); } .ska-tip { position: relative; margin-top: 14px; padding: 16px 18px; border-radius: 22px; background: var(--sk-white); box-shadow: inset 0 0 0 1px var(--sk-ink-10); } .ska-tip small { font-size: 12px; font-weight: 600; background: var(--sk-iris); -webkit-background-clip: text; background-clip: text; color: transparent; } .ska-tip p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; } /* ---------- Notifications screen ---------- */ .ska-notify .ska-back { margin: 0 0 4px -10px; } .ska-state { text-align: center; padding: 24px 20px; } .ska-state__ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--sk-white); } .ska-state h2 { margin: 12px 0 6px; font-size: 18px; font-weight: 600; } .ska-state p { margin: 0 0 16px; font-size: 15px; color: var(--sk-ink-70); } .ska-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .ska-switchrow b { display: block; font-weight: 600; font-size: 15px; } .ska-switchrow small { font-size: 13px; color: var(--sk-ink-50); } .ska-switchrow--main h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; } .ska-switchrow--main p { margin: 0; font-size: 14px; color: var(--sk-ink-70); } .ska-switchrow--main { background: linear-gradient(135deg, #EEF0FF, #FBEFF6); } .ska-prefs { padding: 6px 18px; } .ska-prefs .ska-switchrow { padding: 14px 0; border-top: 1px solid var(--sk-stone-2); } .ska-prefs .ska-switchrow:first-child { border-top: 0; } .ska-switch { position: relative; flex: none; width: 52px; height: 32px; cursor: pointer; } .ska-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .ska-switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--sk-stone-2); transition: background .25s; } .ska-switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--sk-card); box-shadow: 0 2px 6px rgba(41, 40, 36, .25); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); } .ska-switch input:checked + i { background: var(--sk-iris); } .ska-switch input:checked + i::after { transform: translateX(20px); } .ska-switch input:focus-visible + i { outline: 2px solid var(--sk-blue); outline-offset: 3px; } .ska-switch input:disabled + i { opacity: .45; } .ska-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 0 14px; transition: opacity .2s; } .ska-times.is-off { opacity: .4; pointer-events: none; } .ska-times label { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--sk-white); font-size: 12px; font-weight: 600; color: var(--sk-ink-50); } .ska-times label svg { display: none; } .ska-times input { border: 0; padding: 0; background: none; font: 600 20px var(--sk-display); color: var(--sk-ink); } .ska-times input:focus { outline: none; } .ska-inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .ska-inbox button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--sk-stone); text-align: left; font: inherit; color: inherit; cursor: pointer; } .ska-inbox b { font-weight: 600; } .ska-inbox span { font-size: 14px; color: var(--sk-ink-70); } .ska-inbox small { font-size: 12px; color: var(--sk-ink-50); } .ska-inbox .is-new button { background: var(--sk-blue-lt); box-shadow: inset 3px 0 0 var(--sk-blue); } @media (max-width: 360px) { .ska-hero { flex-direction: column; align-items: flex-start; } .ska-quick { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ska-splash, .ska-splash * { animation: none !important; } .ska-splash__oval { stroke-dashoffset: 0; } .ska-splash__dot { scale: 1; } } .ska-test { margin-top: 12px; } /* Keep long text inside cards; never scroll sideways */ .ska { overflow-x: clip; } .ska-main { min-width: 0; } .ska-ticks li { min-width: 0; } .ska-tick { min-width: 0; } /* ---------- v1.6 Daily habits ---------- */ .ska-habits .ska-card__head h2 svg { stroke: #3D8BFF; } .ska-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border: 0; border-radius: 999px; background: var(--sk-white); font: 600 13px var(--sk-font, inherit); color: var(--sk-ink); cursor: pointer; } .ska-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ska-water { margin-top: 14px; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, #E6F1FF, #F1F7FF); } .ska-water__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ska-water__top p { margin: 0; font-size: 14px; color: var(--sk-ink-70); } .ska-water__top b { font: 600 26px var(--sk-display); color: var(--sk-ink); margin-right: 2px; } .ska-water__btns { display: flex; gap: 6px; } .ska-round { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #3D8BFF; color: #fff; cursor: pointer; transition: transform .15s, opacity .2s; } .ska-round:active { transform: scale(.9); } .ska-round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .ska-round--quiet { background: var(--sk-white); color: var(--sk-ink); } .ska-round:disabled { opacity: .35; cursor: default; } .ska-glasses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ska-glass { display: block; width: 22px; height: 29px; } .ska-glass svg { width: 100%; height: 100%; fill: rgba(61, 139, 255, .08); stroke: rgba(61, 139, 255, .45); stroke-width: 1.6; stroke-linejoin: round; transition: fill .3s; } .ska-glass.is-full svg { fill: #3D8BFF; stroke: #3D8BFF; } .ska-glass.is-new { animation: ska-pour .5s cubic-bezier(.3, 1.5, .5, 1); } @keyframes ska-pour { 0% { transform: translateY(-8px) scale(.7); } 100% { transform: none; } } .ska-habit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .ska-habit { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 14px; border: 0; border-radius: 20px; background: var(--sk-white); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .15s, background .25s; } .ska-habit:active { transform: scale(.97); } .ska-habit i { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 11px; background: var(--t); } .ska-habit i svg { width: 20px; height: 20px; fill: none; stroke: var(--sk-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ska-habit b { font-size: 14px; font-weight: 600; line-height: 1.25; } .ska-habit small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--sk-ink-50); } .ska-habit em { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(var(--sk-ink-rgb), .15); } .ska-habit em svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: all .3s cubic-bezier(.3, 1.5, .5, 1); } .ska-habit.is-done { background: #EFFAF3; } .ska-habit.is-done em { border-color: transparent; background: #2FB36B; } .ska-habit.is-done em svg { opacity: 1; transform: none; } .ska-habit.is-done small { color: var(--sk-on-mint); font-weight: 600; } .ska-times select { border: 0; padding: 0; background: none; font: 600 17px var(--sk-display); color: var(--sk-ink); -webkit-appearance: none; appearance: none; } .ska-times select:focus { outline: none; } .ska-prefs .ska-times { padding-top: 2px; } @media (prefers-reduced-motion: reduce) { .ska-glass.is-new { animation: none; } } /* ---------- v1.7 Proven picks (product research) ---------- */ .ska-rs-teaser { display: flex; align-items: center; gap: 14px; width: 100%; margin: 16px 0 4px; padding: 16px; border: 0; border-radius: 22px; background: linear-gradient(120deg, #2B2A6B, #5B3E8F 55%, #A04F86); color: #fff; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 14px 30px -18px rgba(60, 40, 120, .8); transition: transform .15s; } .ska-rs-teaser:active { transform: scale(.98); } .ska-rs-teaser__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .16); } .ska-rs-teaser__ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ska-rs-teaser__text { flex: 1; min-width: 0; } .ska-rs-teaser__text b { display: block; font: 600 17px/1.25 var(--sk-display); letter-spacing: -.01em; } .ska-rs-teaser__text small { display: block; margin-top: 3px; font-size: 13px; opacity: .85; } .ska-results .ska-rs-teaser { margin-top: 14px; } .ska-rs h1 { margin: 6px 0 10px; } .ska-rs-brief { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; } .ska-rs-brief span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--sk-stone); font-size: 13px; font-weight: 500; } .ska-rs-brief i { width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); } .ska-rs-brief .is-concern::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .ska-rs-intro { padding: 22px 18px; border-radius: 26px; background: linear-gradient(170deg, #F1EEFF, #FFF4F8); } .ska-rs-intro h2 { margin: 18px 0 8px; font: 600 22px/1.2 var(--sk-display); letter-spacing: -.02em; } .ska-rs-intro > p { margin: 0; font-size: 15px; color: var(--sk-ink-70); line-height: 1.5; } .ska-rs-sources { display: flex; gap: 8px; } .ska-rs-sources span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 18px; background: var(--sk-card); animation: ska-rs-float 3.2s ease-in-out infinite; } .ska-rs-sources span:nth-child(2) { animation-delay: .4s; } .ska-rs-sources span:nth-child(3) { animation-delay: .8s; } .ska-rs-sources svg { width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--t); fill: none; stroke: var(--sk-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; } .ska-rs-sources b { font-size: 12px; font-weight: 600; } @keyframes ska-rs-float { 50% { transform: translateY(-4px); } } .ska-rs-points { margin: 16px 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; } .ska-rs-points li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; } .ska-rs-points svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #2FB36B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ska-rs-loading { padding: 10px 0; text-align: center; } .ska-rs-loading h2 { margin: 20px 0 6px; font: 600 20px var(--sk-display); } .ska-rs-orbit { position: relative; width: 120px; height: 120px; margin: 10px auto 0; } .ska-rs-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #667FFF; animation: ska-spin 1.6s linear infinite; } .ska-rs-orbit i:nth-child(2) { inset: 14px; border-top-color: #CEA2FF; animation-duration: 2.2s; animation-direction: reverse; } .ska-rs-orbit i:nth-child(3) { inset: 28px; border-top-color: #FF85B1; animation-duration: 1.2s; } .ska-rs-orbit span { position: absolute; inset: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--sk-iris); } .ska-rs-orbit span svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } @keyframes ska-spin { to { transform: rotate(360deg); } } .ska-rs-stages { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; } .ska-rs-stages li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--sk-stone); opacity: .45; transition: opacity .4s, background .4s; } .ska-rs-stages li.is-on { opacity: 1; background: var(--sk-blue-lt); } .ska-rs-stages li.is-done { opacity: 1; } .ska-rs-stages li > i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(var(--sk-ink-rgb), .15); } .ska-rs-stages li > i svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .ska-rs-stages li.is-on > i { border-color: #5163FF; border-top-color: transparent; animation: ska-spin 1s linear infinite; } .ska-rs-stages li.is-done > i { border-color: #2FB36B; background: #2FB36B; animation: none; } .ska-rs-stages li.is-done > i svg { opacity: 1; } .ska-rs-stages b { display: block; font-size: 14px; font-weight: 600; } .ska-rs-stages small { display: block; font-size: 12.5px; color: var(--sk-ink-50); } .ska-rs-stale { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 14px 16px; border-radius: 18px; background: var(--sk-amber-lt); } .ska-rs-stale p { margin: 0; font-size: 14px; font-weight: 500; color: var(--sk-on-amber); } .ska-rs-stale .sk-btn { min-height: 40px; padding: 0 16px; font-size: 14px; } .ska-rs-summary { padding: 16px; border-radius: 22px; background: linear-gradient(170deg, #F1EEFF, #FFF4F8); } .ska-rs-summary p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--sk-ink-70); } .ska-rs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ska-rs-stats span { padding: 10px 8px; border-radius: 14px; background: rgba(var(--sk-card-rgb), .8); text-align: center; font-size: 11.5px; color: var(--sk-ink-50); } .ska-rs-stats b { display: block; font: 600 22px/1.1 var(--sk-display); color: var(--sk-ink); } .ska-rs-step { margin-top: 26px; } .ska-rs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .ska-rs-card { position: relative; padding: 16px; border-radius: 22px; background: var(--sk-card); box-shadow: 0 0 0 1px rgba(var(--sk-ink-rgb), .07), 0 10px 24px -18px rgba(41, 40, 36, .4); animation: ska-rs-in .5s var(--sk-ease, ease) both; animation-delay: calc(var(--i) * 60ms); } @keyframes ska-rs-in { from { opacity: 0; transform: translateY(12px); } } .ska-rs-card__top { display: flex; align-items: center; gap: 12px; } .ska-rs-card__name { flex: 1; min-width: 0; } .ska-rs-card__name small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--sk-ink-50); } .ska-rs-card__name b { display: block; font: 600 16px/1.25 var(--sk-display); } .ska-rs-price { flex: none; align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--sk-stone); font-size: 11.5px; font-weight: 600; } .ska-rs-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .ska-rs-badge { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .ska-rs-badge.is-strong, .ska-rs-badge.is-loved { background: #E3F6EC; color: var(--sk-on-mint); } .ska-rs-badge.is-good { background: var(--sk-blue-lt); color: var(--sk-on-blue); } .ska-rs-badge.is-emerging, .ska-rs-badge.is-mixed { background: var(--sk-amber-lt); color: var(--sk-on-amber); } .ska-rs-badge.is-few { background: var(--sk-stone); color: var(--sk-ink-70); } .ska-rs-why { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; } .ska-rs-ings { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 0; } .ska-rs-ings span { padding: 4px 9px; border-radius: 8px; background: var(--sk-stone); font-size: 12px; font-weight: 500; } .ska-rs-guide { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 13px; font-weight: 500; } .ska-rs-guide svg { flex: none; width: 16px; height: 16px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ska-rs-guide.is-match { color: var(--sk-on-mint); } .ska-rs-guide.is-match svg { stroke: #2FB36B; } .ska-rs-guide.is-clash { color: var(--sk-on-rose); } .ska-rs-guide.is-clash svg { stroke: #E5566F; } .ska-rs-more { margin-top: 12px; border-top: 1px solid rgba(var(--sk-ink-rgb), .08); } .ska-rs-more summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 2px; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; } .ska-rs-more summary::-webkit-details-marker { display: none; } .ska-rs-more summary svg { width: 16px; height: 16px; fill: none; stroke: var(--sk-ink); stroke-width: 2; transform: rotate(90deg); transition: transform .25s; } .ska-rs-more[open] summary svg { transform: rotate(-90deg); } .ska-rs-more__body { display: grid; gap: 12px; padding-top: 10px; } .ska-rs-more__body b { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--sk-ink-50); } .ska-rs-more__body p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; } .ska-rs-src { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .ska-rs-src a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 10px 12px; border-radius: 12px; background: var(--sk-stone); color: inherit; text-decoration: none; } .ska-rs-src span { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ska-rs-src small { flex-basis: 100%; font-size: 11.5px; color: var(--sk-ink-50); } .ska-rs-src em { font-style: normal; padding: 2px 7px; border-radius: 6px; background: #FDE8EC; color: var(--sk-on-rose); font-size: 10.5px; font-weight: 700; text-transform: uppercase; } .ska-rs-actions { display: flex; gap: 6px; margin-top: 12px; } .ska-rs-actions .sk-btn { flex: 1; min-height: 40px; padding: 0 10px; font-size: 13.5px; } .ska-rs-forum { position: absolute; top: 14px; right: 14px; display: none; } .ska-rs-pro { display: flex; gap: 10px; margin-top: 20px; padding: 14px 16px; border-radius: 18px; background: var(--sk-rose-lt); } .ska-rs-pro svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #B23A51; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ska-rs-pro p { margin: 0; font-size: 14px; color: var(--sk-on-rose); } @media (prefers-reduced-motion: reduce) { .ska-rs-sources span, .ska-rs-card, .ska-rs-orbit i, .ska-rs-stages li.is-on > i { animation: none; } } .ska-error { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--sk-rose-lt); color: var(--sk-on-rose); font-size: 14px; } /* ---------- v1.8 Skin plan: discoverable research, picks per step, food ---------- */ .ska-seg--three { grid-template-columns: 1.15fr 1fr 1.1fr; margin-bottom: 16px; } .ska-seg--three button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding-inline: 6px; white-space: nowrap; font-size: 13.5px; } .ska-seg--three svg { width: 15px; height: 15px; fill: #E9A23B; stroke: none; } .ska-rs-tabs { margin: 0 0 16px; } .ska-plan { display: block; width: 100%; margin-top: 14px; padding: 16px; border: 0; border-radius: 24px; background: linear-gradient(150deg, #262556, #4B3488 50%, #9A4C86); color: #fff; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 18px 36px -20px rgba(60, 40, 120, .9); transition: transform .15s; overflow: hidden; position: relative; } .ska-plan::after { content: ""; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 133, 177, .45), transparent); pointer-events: none; } .ska-plan:active { transform: scale(.985); } .ska-plan__head { display: flex; align-items: center; gap: 12px; } .ska-plan__head > div { flex: 1; min-width: 0; } .ska-plan__head h2 { margin: 0; font: 600 18px/1.2 var(--sk-display); color: #fff; letter-spacing: -.01em; } .ska-plan__head small { display: block; margin-top: 3px; font-size: 13px; opacity: .85; line-height: 1.35; } .ska-plan__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, .16); } .ska-plan__ic svg { width: 22px; height: 22px; fill: #FFD27A; stroke: none; } .ska-plan__spin { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: ska-spin .9s linear infinite; } .ska-plan__busy { margin: 12px 0 0; font-size: 13.5px; opacity: .85; } .ska-plan__row { margin-top: 12px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .1); } .ska-plan__part { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .85; } .ska-plan__part svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } .ska-plan__row ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .ska-plan__row li { display: flex; align-items: center; gap: 10px; min-width: 0; } .ska-plan__row .ska-thumb { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; } .ska-plan__row li > span:last-child { min-width: 0; } .ska-plan__row small { display: block; font-size: 11px; opacity: .7; } .ska-plan__row b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ska-plan__food { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .15); } .ska-plan__food > b { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .85; } .ska-plan__food > b svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; } .ska-plan__food span { padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; } .ska-plan__food .is-more { background: rgba(120, 230, 170, .2); } .ska-plan__food .is-less { background: rgba(255, 190, 120, .2); } .ska-results .ska-plan { margin: 4px 0 16px; } .ska-rs-part { margin-top: 22px; } .ska-rs-part__h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 20px var(--sk-display); letter-spacing: -.01em; } .ska-rs-part__h svg { width: 22px; height: 22px; fill: none; stroke: #E09A2B; stroke-width: 1.8; stroke-linecap: round; } .ska-rs .ska-rs-step { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 15px; font-weight: 600; } .ska-rs-step b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background:var(--sk-solid); color: #fff; font-size: 12px; } .ska-rs-card { padding-top: 34px; } .ska-rs-ribbon { position: absolute; left: 16px; top: 12px; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sk-on-amber); } .ska-rs-ribbon svg { width: 13px; height: 13px; fill: #E9A23B; stroke: none; } .ska-rs-ribbon--alt { color: var(--sk-ink-50); } .ska-rs-card.is-top { box-shadow: 0 0 0 2px #F3C979, 0 14px 30px -18px rgba(178, 106, 0, .5); } .ska-rs-card.is-alt { background: #FCFBFA; } .ska-food__summary { margin: 0 0 6px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(170deg, #EFFAF3, #FFF8EC); font-size: 15px; line-height: 1.5; } .ska-food__h { display: flex; align-items: center; gap: 8px; } .ska-food__h i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; } .ska-food__h i svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; } .ska-food__h.is-more i { background: #2FB36B; } .ska-food__h.is-less i { background: #E09A2B; } .ska-food__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .ska-food__item { padding: 14px 16px; border-radius: 20px; background: var(--sk-stone); border-left: 4px solid transparent; } .ska-food__item.is-more { border-left-color: #2FB36B; } .ska-food__item.is-less { border-left-color: #E09A2B; } .ska-food__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .ska-food__head b { font: 600 16px/1.3 var(--sk-display); } .ska-food__head .ska-rs-badge { flex: none; font-size: 11px; padding: 4px 8px; } .ska-food__eg { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--sk-ink); } .ska-food__why { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--sk-ink-70); } .ska-food__for, .ska-food__src { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; } .ska-food__for span { padding: 3px 8px; border-radius: 8px; background: var(--sk-card); font-size: 11.5px; font-weight: 500; color: var(--sk-ink-70); } .ska-food__src a { font-size: 12px; color: var(--sk-blue); } .ska-toppick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; margin-top: 10px; padding: 10px 12px; border: 0; border-radius: 14px; background: #FFF6E5; text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px #F3C979; } .ska-toppick span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sk-on-amber); } .ska-toppick span svg { width: 12px; height: 12px; fill: #E9A23B; } .ska-toppick b { font-size: 14px; font-weight: 600; } .ska-toppick small { font-size: 12px; color: var(--sk-ink-50); } @media (prefers-reduced-motion: reduce) { .ska-plan__spin { animation: none; } } /* Alternatives start collapsed to keep the list short */ button.ska-rs-ribbon { border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer; } .ska-rs-ribbon--alt { right: 16px; justify-content: flex-start; } .ska-rs-ribbon--alt::after { content: ""; position: absolute; inset: -12px -16px; } .ska-rs-ribbon--alt i { display: inline-grid; margin-left: auto; } .ska-rs-ribbon--alt svg { width: 14px; height: 14px; fill: none; stroke: var(--sk-ink-50); stroke-width: 2; transform: rotate(90deg); transition: transform .25s; } .ska-rs-card.is-alt { padding-bottom: 14px; } .ska-rs-card.is-alt:not(.is-open) .ska-rs-why, .ska-rs-card.is-alt:not(.is-open) .ska-rs-ings, .ska-rs-card.is-alt:not(.is-open) .ska-rs-guide, .ska-rs-card.is-alt:not(.is-open) .ska-rs-more, .ska-rs-card.is-alt:not(.is-open) .ska-rs-actions { display: none; } .ska-rs-card.is-alt.is-open .ska-rs-ribbon--alt svg { transform: rotate(-90deg); } .ska-toppick { flex-direction: column; align-items: flex-start; gap: 2px; } /* ---------- v1.9 Simpler Today, guided routine, goals ---------- */ .ska-hello { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ska-hello__score { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; } .ska-hello__score .ska-ring { position: absolute; inset: 0; width: 56px; height: 56px; } .ska-hello__score b { position: relative; font: 600 17px var(--sk-display); } .ska-now { margin-top: 16px; padding: 18px; border-radius: 26px; background: linear-gradient(160deg, #FFF6E6, #FFFDF8 60%); box-shadow: inset 0 0 0 1px rgba(224, 154, 43, .18); } .ska-now--pm { background: linear-gradient(160deg, #EEEAFF, #FBFAFF 60%); box-shadow: inset 0 0 0 1px rgba(81, 99, 255, .14); } .ska-now__head { display: flex; align-items: center; gap: 12px; } .ska-now__head > div { flex: 1; min-width: 0; } .ska-now__head h2 { margin: 0; font: 600 21px/1.2 var(--sk-display); letter-spacing: -.02em; } .ska-now__head small { font-size: 13.5px; color: var(--sk-ink-50); } .ska-now__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--sk-card); box-shadow: 0 4px 12px -6px rgba(41, 40, 36, .25); } .ska-now__ic svg { width: 24px; height: 24px; fill: none; stroke: #E09A2B; stroke-width: 1.8; stroke-linecap: round; } .ska-now--pm .ska-now__ic svg { stroke: #5163FF; } .ska-now__streak { display: inline-flex; align-items: center; gap: 3px; padding: 6px 10px; border-radius: 999px; background: var(--sk-card); font-weight: 700; font-size: 14px; color: var(--sk-on-orange); } .ska-now__streak svg { width: 16px; height: 16px; fill: #F28A3B; stroke: none; } .ska-now__steps { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .ska-now__steps button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: rgba(var(--sk-card-rgb), .8); text-align: left; font: 500 15px var(--sk-sans); color: var(--sk-ink); cursor: pointer; transition: background .2s; } .ska-now__steps button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ska-now__steps i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(var(--sk-ink-rgb), .18); transition: all .25s; } .ska-now__steps i svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .ska-now__steps .is-done button { color: var(--sk-ink-50); } .ska-now__steps .is-done button > span { text-decoration: line-through; text-decoration-color: rgba(var(--sk-ink-rgb), .3); } .ska-now__steps .is-done i { border-color: #2FB36B; background: #2FB36B; } .ska-now__steps .is-done i svg { opacity: 1; } .ska-now__extra { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--sk-card); font-size: 14px; font-weight: 500; } .ska-now__extra svg { width: 16px; height: 16px; fill: #E9A23B; } .ska-now__extra .ska-link-btn { margin-left: auto; } .ska-now__start { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; margin-top: 14px; border: 0; border-radius: 999px; background:var(--sk-solid); color: #fff; font: 600 17px var(--sk-sans); cursor: pointer; } .ska-now__start i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); } .ska-now__start svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ska-now__done { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: #E3F6EC; color: var(--sk-on-mint); font-weight: 600; } .ska-now__done svg { width: 20px; height: 20px; fill: none; stroke: #2FB36B; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .ska-now__switch { display: block; margin: 10px auto 0; padding: 6px 10px; border: 0; background: none; font: 500 14px var(--sk-sans); color: var(--sk-ink-50); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .ska-now__remind { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 16px; background: var(--sk-card); text-align: left; font: inherit; color: inherit; cursor: pointer; } .ska-now__remind > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--sk-blue); stroke-width: 1.8; } .ska-now__remind span { flex: 1; min-width: 0; } .ska-now__remind b { display: block; font-size: 14.5px; } .ska-now__remind small { display: block; font-size: 12.5px; color: var(--sk-ink-50); } .ska-now__remind em { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--sk-blue); color: #fff; font-style: normal; font-size: 13px; font-weight: 600; } .ska-due { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px 16px; border: 0; border-radius: 20px; background: var(--sk-rose-lt); text-align: left; font: inherit; color: inherit; cursor: pointer; } .ska-due > svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #B23A51; stroke-width: 1.8; } .ska-due span { flex: 1; } .ska-due b { display: block; font-size: 15px; } .ska-due small { font-size: 13px; color: var(--sk-ink-50); } .ska-due i svg { width: 16px; height: 16px; fill: none; stroke: var(--sk-ink); stroke-width: 2; } /* Goals */ .ska-goalset { margin-top: 14px; padding: 18px; border-radius: 24px; background: linear-gradient(160deg, #E9F7F0, #F7FCF9); box-shadow: inset 0 0 0 1px rgba(47, 163, 107, .18); } .ska-goalset h2 { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 19px var(--sk-display); } .ska-goalset h2 svg { width: 22px; height: 22px; fill: none; stroke: #2FA36B; stroke-width: 1.8; } .ska-goalset > p { margin: 6px 0 12px; font-size: 14.5px; color: var(--sk-ink-70); } .ska-goalset__opts, .ska-goalgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ska-goalset__opts button, .ska-goalgrid button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border: 0; border-radius: 18px; background: var(--sk-card); text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(41, 40, 36, .06); transition: transform .15s; } .ska-goalset__opts button:active, .ska-goalgrid button:active { transform: scale(.97); } .ska-goalset__opts b, .ska-goalgrid b { font: 600 15px/1.25 var(--sk-display); } .ska-goalset__opts small, .ska-goalgrid small { font-size: 12.5px; color: var(--sk-ink-50); } .ska-goalgrid button { background: var(--sk-stone); box-shadow: none; } .ska-goalgrid .is-suggested { background: #E9F7F0; box-shadow: inset 0 0 0 1px rgba(47, 163, 107, .3); } .ska-goalset .ska-link-btn { margin-top: 10px; } .ska-goal { display: block; width: 100%; margin-top: 14px; padding: 16px; border: 0; border-radius: 24px; background: var(--sk-card); text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 0 0 1px rgba(var(--sk-ink-rgb), .08), 0 12px 28px -20px rgba(41, 40, 36, .45); } .ska-goal__top { display: flex; align-items: center; gap: 14px; } .ska-goal__top > div { min-width: 0; } .ska-goal__top small { font-size: 12.5px; color: var(--sk-ink-50); } .ska-goal__top h2 { margin: 1px 0 2px; font: 600 19px/1.2 var(--sk-display); } .ska-goal__ring { flex: none; position: relative; display: grid; place-content: center; width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(#2FB36B calc(var(--p) * 1%), #E7F2EC 0); text-align: center; } .ska-goal__ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--sk-card); } .ska-goal__ring b, .ska-goal__ring small { position: relative; line-height: 1; } .ska-goal__ring b { font: 600 19px var(--sk-display); } .ska-goal__ring small { font-size: 10px; color: var(--sk-ink-50); } .ska-goal__ring--big { width: 84px; height: 84px; } .ska-goal__ring--big::before { inset: 8px; } .ska-goal__ring--big b { font-size: 26px; } .ska-goal__state { display: inline-block; margin: 0; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sk-stone); } .ska-goal__state.is-good, .ska-goal__state.is-done { background: #E3F6EC; color: var(--sk-on-mint); } .ska-goal__state.is-slow { background: var(--sk-amber-lt); color: var(--sk-on-amber); } .ska-goal__state.is-scan { background: var(--sk-rose-lt); color: var(--sk-on-rose); } .ska-goal__state.is-early { background: var(--sk-blue-lt); color: var(--sk-on-blue); } .ska-goal__now { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--sk-ink-70); } .ska-goal__now b { color: var(--sk-ink); } .ska-goal__foot { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .ska-goal__delta, .ska-goal__due { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--sk-stone); font-size: 12.5px; font-weight: 600; } .ska-goal__delta.is-up { background: #E3F6EC; color: var(--sk-on-mint); } .ska-goal__due { background: var(--sk-rose-lt); color: var(--sk-on-rose); } .ska-goal__due svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } .ska-goal__more { display: block; margin: 8px auto 0; } .ska-goaldetail { margin-top: 16px; padding: 18px; border-radius: 26px; background: var(--sk-stone); } .ska-goaldetail__head { display: flex; align-items: center; gap: 16px; } .ska-goaldetail__head h2 { margin: 0 0 4px; font: 600 22px/1.15 var(--sk-display); } .ska-goaldetail__head small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--sk-ink-50); } .ska-goaldetail__chart { margin-top: 16px; padding: 14px; border-radius: 18px; background: var(--sk-card); } .ska-goaldetail__bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; } .ska-goaldetail__bars span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; max-width: 46px; } .ska-goaldetail__bars i { display: block; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(#FFB28A, #F26D85); } .ska-goaldetail__bars span:last-child i { background: var(--sk-iris); } .ska-goaldetail__bars small { margin-top: 4px; font-size: 10.5px; text-align: center; color: var(--sk-ink-50); white-space: nowrap; } .ska-goaldetail__chart p { margin: 10px 0 0; font-size: 13px; color: var(--sk-ink-70); } .ska-goaldetail__h { margin: 20px 0 8px; font-size: 15px; font-weight: 600; } .ska-timeline { margin: 0; padding: 0; list-style: none; } .ska-timeline li { position: relative; display: flex; gap: 12px; padding-bottom: 14px; } .ska-timeline li::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: rgba(var(--sk-ink-rgb), .12); } .ska-timeline li:last-child::before { display: none; } .ska-timeline li > i { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--sk-card); box-shadow: inset 0 0 0 2px rgba(var(--sk-ink-rgb), .2); } .ska-timeline .is-past > i { background: #2FB36B; box-shadow: none; } .ska-timeline .is-now > i { background: var(--sk-card); box-shadow: inset 0 0 0 5px #2FB36B, 0 0 0 4px rgba(47, 179, 107, .2); } .ska-timeline small { font-size: 12px; font-weight: 600; color: var(--sk-ink-50); } .ska-timeline .is-now small { color: var(--sk-on-mint); } .ska-timeline b { display: block; font-size: 15px; } .ska-timeline p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--sk-ink-70); } .ska-goaldetail__keys { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .ska-goaldetail__keys li { display: flex; gap: 8px; font-size: 14.5px; } .ska-goaldetail__keys svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #2FB36B; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ska-goaldetail__see { display: flex; gap: 8px; margin: 14px 0 0; padding: 12px; border-radius: 14px; background: var(--sk-card); font-size: 13.5px; color: var(--sk-ink-70); } .ska-goaldetail__see svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #E09A2B; stroke-width: 2; stroke-linecap: round; } .ska-goaldetail__actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; } .ska-goaldetail__actions .sk-btn { width: 100%; } .ska-progress__sub { margin-top: 18px; } /* Guided routine */ .ska-do { display: flex; flex-direction: column; } .ska-do__top { display: flex; align-items: center; gap: 12px; } .ska-do__top small { font-size: 13px; font-weight: 600; color: var(--sk-ink-50); } .ska-do__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sk-stone); cursor: pointer; } .ska-do__close svg { width: 18px; height: 18px; fill: none; stroke: var(--sk-ink); stroke-width: 2; stroke-linecap: round; } .ska-do__dots { display: flex; gap: 5px; margin-top: 5px; } .ska-do__dots i { width: 26px; height: 6px; border-radius: 3px; background: rgba(var(--sk-ink-rgb), .12); transition: background .3s; } .ska-do__dots .is-done { background: #2FB36B; } .ska-do__dots .is-on { background:var(--sk-solid); } .ska-do__card { margin-top: 18px; padding: 22px 20px; border-radius: 28px; background: linear-gradient(170deg, #F4F1FF, #FFF7F9); animation: ska-do-in .38s cubic-bezier(.2, .8, .2, 1) both; } .ska-do__card[data-dir="back"] { animation-name: ska-do-back; } @keyframes ska-do-in { from { opacity: 0; transform: translateX(40px); } } @keyframes ska-do-back { from { opacity: 0; transform: translateX(-40px); } } .ska-do__count { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sk-on-violet); } .ska-do__card h1 { margin: 6px 0 10px; font-size: 30px; line-height: 1.1; } .ska-do__how { margin: 0; font-size: 17px; line-height: 1.5; } .ska-do__look { margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(var(--sk-card-rgb), .8); } .ska-do__look small { font-size: 12px; font-weight: 600; color: var(--sk-ink-50); text-transform: uppercase; letter-spacing: .04em; } .ska-do__look p { margin: 2px 0 0; font-size: 14.5px; } .ska-do__pick { display: flex; flex-direction: column; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: #FFF6E5; box-shadow: inset 0 0 0 1px #F3C979; } .ska-do__pick span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sk-on-amber); } .ska-do__pick span svg { width: 12px; height: 12px; fill: #E9A23B; } .ska-do__pick b { font-size: 15px; } .ska-do__pick small { font-size: 12.5px; color: var(--sk-ink-50); } .ska-do__freq { margin: 12px 0 0; font-size: 13.5px; font-weight: 500; color: var(--sk-on-amber); } .ska-do__wait { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(var(--sk-card-rgb), .8); } .ska-do__wait p { margin: 0; font-size: 14px; } .ska-do__wait .ska-link-btn { display: block; margin-top: 4px; padding: 0; } .ska-do__waitring { position: relative; flex: none; display: grid; place-items: center; width: 52px; height: 52px; } .ska-do__waitring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .ska-do__waitring circle { fill: none; stroke: rgba(var(--sk-ink-rgb), .1); stroke-width: 4; } .ska-do__waitring circle.v { stroke: #6A55D8; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; } .ska-do__waitring b { position: relative; font: 600 15px var(--sk-display); } .ska-do__waitring b svg { position: static; width: 20px; height: 20px; transform: none; fill: none; stroke: #2FB36B; stroke-width: 2.6; } .ska-do__bar { position: sticky; bottom: calc(92px + var(--ska-nav-gap)); display: flex; gap: 8px; margin-top: 16px; } .ska-do__bar .sk-btn { min-height: 56px; } .ska-do__bar [data-do-back] { flex: none; width: 56px; padding: 0; } .ska-do__bar [data-do-back] svg { width: 22px; height: 22px; fill: none; stroke: var(--sk-ink); stroke-width: 2; } .ska-do__bar [data-do-skip] { flex: 1; } .ska-do__bar [data-do-done] { flex: 2; font-size: 17px; } .ska-do__bar [data-do-done] svg { width: 20px; height: 20px; margin-right: 6px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .ska-do__end { min-height: 60dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 0; text-align: center; } .ska-do__end h1 { margin: 10px 0 0; } .ska-do__end .sk-btn { margin-top: 8px; } .ska-do__end .sk-btn svg { width: 18px; height: 18px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ska-do__streak { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 6px 12px; border-radius: 999px; background: #FFF1E6; color: var(--sk-on-orange); font-weight: 700; } .ska-do__streak svg { width: 18px; height: 18px; fill: #F28A3B; } .ska-do__burst { position: relative; display: grid; place-items: center; width: 120px; height: 120px; } .ska-do__burst > span { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #2FB36B; animation: ska-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; } .ska-do__burst > span svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .ska-do__burst i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #FF85B1; animation: ska-spray .7s .15s ease-out both; } .ska-do__burst i:nth-child(3n) { background: #667FFF; } .ska-do__burst i:nth-child(3n+1) { background: #F3C979; } .ska-do__burst i:nth-child(1) { --a: 0deg; } .ska-do__burst i:nth-child(2) { --a: 33deg; } .ska-do__burst i:nth-child(3) { --a: 66deg; } .ska-do__burst i:nth-child(4) { --a: 99deg; } .ska-do__burst i:nth-child(5) { --a: 132deg; } .ska-do__burst i:nth-child(6) { --a: 165deg; } .ska-do__burst i:nth-child(7) { --a: 198deg; } .ska-do__burst i:nth-child(8) { --a: 231deg; } .ska-do__burst i:nth-child(9) { --a: 264deg; } .ska-do__burst i:nth-child(10) { --a: 297deg; } .ska-do__burst i:nth-child(11) { --a: 330deg; } @keyframes ska-pop { from { transform: scale(0); } } @keyframes ska-spray { from { transform: rotate(var(--a)) translateY(0); opacity: 1; } to { transform: rotate(var(--a)) translateY(-62px); opacity: 0; } } .ska-routine__start { flex-direction: column; gap: 2px; min-height: 60px; margin: 0 0 14px; } .ska-routine__start svg { display: none; } .ska-routine__start small { font-size: 12.5px; font-weight: 400; opacity: .75; } .ska-routine__wkday { margin: -6px 0 12px; font-size: 14px; } details.ska-tipbox summary { font-size: 16px; font-weight: 600; color: var(--sk-on-amber); cursor: pointer; } details.ska-tipbox ul { margin-top: 10px; } @media (prefers-reduced-motion: reduce) { .ska-do__card, .ska-do__burst > span, .ska-do__burst i { animation: none; } .ska-do__burst i { display: none; } } .ska-now__extra .ska-link-btn, .ska-goalset .ska-link-btn { margin: 0 0 0 auto; padding: 4px 8px; color: var(--sk-blue); font-weight: 600; } .ska-goalset .ska-link-btn { margin: 10px 0 0; padding: 4px 0; } /* ---------- v2.0 Points, questions, weather ---------- */ .ska-xp-pop { position: fixed; left: 50%; bottom: calc(104px + var(--ska-nav-gap)); z-index: 60; display: flex; align-items: baseline; gap: 6px; padding: 9px 16px; border-radius: 999px; background: linear-gradient(100deg, #FFB547, #FF7A59); color: #fff; box-shadow: 0 10px 24px -10px rgba(255, 122, 89, .8); transform: translateX(-50%); pointer-events: none; animation: ska-xp 1.7s cubic-bezier(.2, .8, .2, 1) forwards; } .ska-xp-pop b { font: 700 18px var(--sk-display); } .ska-xp-pop span { font-size: 13px; font-weight: 600; opacity: .95; } @keyframes ska-xp { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } } .ska-celebrate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(20, 19, 17, .45); animation: ska-fade .2s ease both; } .ska-celebrate.is-out { opacity: 0; transition: opacity .2s; } @keyframes ska-fade { from { opacity: 0; } } .ska-celebrate__card { width: 100%; max-width: 360px; padding: 26px 22px 20px; border-radius: 28px; background: var(--sk-card); text-align: center; animation: ska-pop .4s cubic-bezier(.2, 1.4, .4, 1) both; } .ska-celebrate__card .ska-do__burst { margin: 0 auto; } .ska-celebrate__card .ska-do__burst > span { background: linear-gradient(135deg, #FFB547, #FF7A59); } .ska-celebrate__card h2 { margin: 10px 0 6px; font: 600 22px var(--sk-display); } .ska-celebrate__card p { margin: 0 0 16px; color: var(--sk-ink-70); } .ska-lvl { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 8px 12px 8px 8px; border: 0; border-radius: 999px; background: var(--sk-stone); text-align: left; font: inherit; color: inherit; cursor: pointer; } .ska-lvl__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #FFB547, #FF7A59); color: #fff; font: 700 14px var(--sk-display); } .ska-lvl__t { flex: 1; min-width: 0; } .ska-lvl__t b { display: block; font-size: 13.5px; } .ska-lvl__t i { display: block; height: 5px; margin-top: 3px; border-radius: 3px; background: rgba(var(--sk-ink-rgb), .1); overflow: hidden; } .ska-lvl__t em { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #FFB547, #FF7A59); } .ska-lvl__fz { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 999px; background: #E6F1FF; color: var(--sk-on-sky); font-size: 12.5px; font-weight: 700; } .ska-lvl__fz svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .ska-rewards__hero { margin-top: 4px; padding: 24px 20px; border-radius: 28px; background: linear-gradient(150deg, #FFF3E2, #FFE6EA); text-align: center; } .ska-rewards__lv { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #FFB547, #FF7A59); color: #fff; font: 700 32px var(--sk-display); box-shadow: 0 12px 26px -12px rgba(255, 122, 89, .9); } .ska-rewards__hero small { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--sk-on-orange); } .ska-rewards__hero h1 { margin: 2px 0 12px; font-size: 28px; } .ska-rewards__bar { height: 10px; border-radius: 5px; background: rgba(var(--sk-card-rgb), .8); overflow: hidden; } .ska-rewards__bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #FFB547, #FF7A59); } .ska-rewards__hero p { margin: 8px 0 0; font-size: 14px; color: var(--sk-ink-70); } .ska-rewards__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .ska-rewards__stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 18px; background: var(--sk-stone); font-size: 12px; color: var(--sk-ink-50); text-align: center; } .ska-rewards__stats svg { width: 20px; height: 20px; fill: none; stroke: #FF7A59; stroke-width: 1.8; stroke-linecap: round; } .ska-rewards__stats b { font: 600 22px var(--sk-display); color: var(--sk-ink); } .ska-earn { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .ska-earn li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sk-stone); font-size: 14.5px; } .ska-earn b { flex: none; color: var(--sk-on-orange); } .ska-left { text-align: left; } .ska-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ska-badge2 { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border-radius: 18px; background: var(--sk-stone); text-align: center; opacity: .55; } .ska-badge2 span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #E8E5E1; } .ska-badge2 svg { width: 22px; height: 22px; fill: none; stroke: #8E8A84; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ska-badge2 b { font-size: 12.5px; line-height: 1.2; } .ska-badge2 small { font-size: 11px; line-height: 1.25; color: var(--sk-ink-50); } .ska-badge2.is-got { opacity: 1; background: #FFF5EA; } .ska-badge2.is-got span { background: linear-gradient(135deg, #FFB547, #FF7A59); box-shadow: 0 8px 18px -10px rgba(255, 122, 89, .9); } .ska-badge2.is-got svg { stroke: #fff; } .ska-qwrap { margin-top: 14px; } .ska-q--card { padding: 18px; border-radius: 24px; background: linear-gradient(160deg, #EAF3FF, #F6F2FF); box-shadow: inset 0 0 0 1px rgba(81, 99, 255, .12); } .ska-q__eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sk-on-blue); } .ska-q__eyebrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .ska-q__eyebrow span { margin-left: auto; padding: 3px 8px; border-radius: 999px; background: linear-gradient(100deg, #FFB547, #FF7A59); color: #fff; font-size: 11px; letter-spacing: 0; } .ska-q h3 { margin: 0; font: 600 19px/1.3 var(--sk-display); letter-spacing: -.01em; } .ska-q__opts { display: grid; gap: 8px; margin-top: 14px; } .ska-q__opts button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: 16px; background: var(--sk-card); text-align: left; font: 500 15.5px/1.35 var(--sk-sans); color: var(--sk-ink); cursor: pointer; box-shadow: 0 1px 2px rgba(41, 40, 36, .08); transition: transform .15s, background .25s; } .ska-q__opts button:active { transform: scale(.98); } .ska-q__opts i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sk-stone); font-style: normal; font-weight: 700; font-size: 13px; } .ska-q__opts .is-right { background: #E3F6EC; box-shadow: inset 0 0 0 2px #2FB36B; } .ska-q__opts .is-right i { background: #2FB36B; color: #fff; } .ska-q__opts .is-wrong { background: var(--sk-rose-lt); box-shadow: inset 0 0 0 2px #E5566F; animation: ska-shake .35s; } .ska-q__opts .is-wrong i { background: #E5566F; color: #fff; } .ska-q__opts .is-dim { opacity: .55; } .ska-q__opts button:disabled { cursor: default; } @keyframes ska-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .ska-q__why { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(var(--sk-card-rgb), .85); font-size: 14.5px; line-height: 1.5; color: var(--sk-ink-70); animation: ska-rise .3s ease both; } .ska-q__why b { color: var(--sk-ink); } .ska-q__more { margin: 8px auto 0; color: var(--sk-blue); font-weight: 600; } .ska-play h1 { margin-top: 6px; } .ska-play__top small { font-size: 13px; font-weight: 600; color: var(--sk-ink-50); } .ska-play__top { margin-bottom: 14px; } .ska-play .ska-q { padding: 18px; border-radius: 24px; background: linear-gradient(160deg, #EAF3FF, #F6F2FF); } .ska-play__next { margin-top: 14px; } .ska-do__dots .is-miss { background: #E5566F; } .ska-play__end { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 0; text-align: center; } .ska-play__end .sk-btn { margin-top: 6px; } .ska-play__score { display: grid; place-content: center; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#FF7A59, #FFB547, #FF7A59); text-align: center; } .ska-play__score b { font: 700 44px/1 var(--sk-display); color: #fff; } .ska-play__score small { color: #fff; font-weight: 600; } .ska-wx { margin-top: 12px; padding: 14px 16px; border-radius: 22px; background: linear-gradient(160deg, #E8F4FF, #F5FAFF); box-shadow: inset 0 0 0 1px rgba(61, 139, 255, .14); } .ska-wx.is-high { background: linear-gradient(160deg, #FFF0DF, #FFF9F2); box-shadow: inset 0 0 0 1px rgba(224, 154, 43, .25); } .ska-wx.is-vhigh { background: linear-gradient(160deg, #FFE3E0, #FFF5F3); box-shadow: inset 0 0 0 1px rgba(229, 86, 111, .25); } .ska-wx__head { display: flex; align-items: center; gap: 12px; } .ska-wx__head > div { flex: 1; min-width: 0; } .ska-wx__head b, .ska-wx--ask b { display: block; font-size: 15.5px; } .ska-wx__head small, .ska-wx--ask small { display: block; font-size: 13px; color: var(--sk-ink-70); } .ska-wx__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--sk-card); } .ska-wx__ic svg { width: 22px; height: 22px; fill: none; stroke: #E09A2B; stroke-width: 1.8; stroke-linecap: round; } .ska-wx__change { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(var(--sk-card-rgb), .8); cursor: pointer; } .ska-wx__change svg { width: 17px; height: 17px; fill: none; stroke: var(--sk-ink-70); stroke-width: 1.8; } .ska-wx__list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .ska-wx__list:empty { display: none; } .ska-wx__list li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--sk-card-rgb), .85); font-size: 14px; line-height: 1.4; color: var(--sk-ink-70); } .ska-wx__list li > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #E09A2B; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ska-wx__list b { display: block; color: var(--sk-ink); font-size: 14.5px; } .ska-wx__credit { margin: 8px 0 0; font-size: 11px; color: var(--sk-ink-50); text-align: right; } .ska-wx__credit a { color: inherit; } .ska-wx--ask { display: flex; gap: 12px; align-items: flex-start; } .ska-wx--ask > div { flex: 1; min-width: 0; } .ska-wx__btns { display: flex; gap: 8px; margin-top: 10px; } .ska-wx__btns .sk-btn { flex: 1; min-height: 40px; padding: 0 10px; font-size: 14px; } .ska-wx--ask .ska-link-btn { margin: 6px 0 0; padding: 4px 0; } .ska-town__card { text-align: left; } .ska-town__card h2 { margin: 0 0 12px; font: 600 20px var(--sk-display); } .ska-town__field input { width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--sk-stone); font: 500 16px var(--sk-sans); } .ska-town__list { max-height: 260px; overflow: auto; margin: 10px 0; padding: 0; list-style: none; display: grid; gap: 6px; } .ska-town__list button { display: flex; flex-direction: column; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--sk-stone); text-align: left; font: inherit; cursor: pointer; } .ska-town__list small { color: var(--sk-ink-50); font-size: 12.5px; } @media (prefers-reduced-motion: reduce) { .ska-xp-pop, .ska-celebrate__card, .ska-q__opts .is-wrong { animation: none; } } .ska-badge-toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 65; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 0; border-radius: 999px; background: var(--sk-card); box-shadow: 0 14px 34px -14px rgba(41, 40, 36, .45), 0 0 0 1px rgba(var(--sk-ink-rgb), .06); font: inherit; text-align: left; cursor: pointer; transform: translateX(-50%); animation: ska-drop-in .5s cubic-bezier(.2, 1.3, .4, 1) both; transition: opacity .35s, transform .35s; } .ska-badge-toast.is-out { opacity: 0; transform: translate(-50%, -20px); } .ska-badge-toast > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #FFB547, #FF7A59); } .ska-badge-toast svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ska-badge-toast small { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sk-on-orange); } .ska-badge-toast b { display: block; font-size: 15px; color: var(--sk-ink); } @keyframes ska-drop-in { from { opacity: 0; transform: translate(-50%, -30px); } } @media (prefers-reduced-motion: reduce) { .ska-badge-toast { animation: none; } } .ska-upload { display: inline-flex; align-items: center; gap: 8px; } .ska-upload svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ska-theme { display: flex; } .ska-theme button { flex: 1; justify-content: center; min-height: 42px; font-size: 14.5px; } /* ---------- Dark mode overrides (generated) ---------- */ html.is-dark /* ---------- Splash ---------- */ .ska-splash { background: #201845; } html.is-dark .ska-tabs__pill { background: #181A45; } html.is-dark .sk-btn--onglass { background: #1C1C21; } html.is-dark .ska-badge--due { background: #1C1C21; } html.is-dark .ska-hero__faces img { background: #1C1C21; } html.is-dark .ska-switchrow--main { background: linear-gradient(135deg, #181C45, #3B1D33); } html.is-dark .ska-switch i::after { background: #1C1C21; } html.is-dark .ska-water { background: linear-gradient(160deg, #182945, #182945); } html.is-dark .ska-habit.is-done { background: #1E3A2C; } html.is-dark .ska-rs-intro { background: linear-gradient(170deg, #1F1845, #40182B); } html.is-dark .ska-rs-sources span { background: #1C1C21; } html.is-dark .ska-rs-summary { background: linear-gradient(170deg, #1F1845, #40182B); } html.is-dark .ska-rs-card { background: #1C1C21; } html.is-dark .ska-rs-badge.is-strong, html.is-dark .ska-rs-badge.is-loved { background: #1E392F; } html.is-dark .ska-rs-src em { background: #3F1824; } html.is-dark .ska-rs-card.is-alt { background: #352C27; } html.is-dark .ska-food__summary { background: linear-gradient(170deg, #1E3A2C, #40311C); } html.is-dark .ska-food__for span { background: #1C1C21; } html.is-dark .ska-toppick { background: #40321C; } html.is-dark .ska-now { background: linear-gradient(160deg, #40321C, #40351C 60%); } html.is-dark .ska-now--pm { background: linear-gradient(160deg, #1F1845, #201845 60%); } html.is-dark .ska-now__ic { background: #1C1C21; } html.is-dark .ska-now__streak { background: #1C1C21; } html.is-dark .ska-now__extra { background: #1C1C21; } html.is-dark .ska-now__done { background: #1E392F; } html.is-dark .ska-now__remind { background: #1C1C21; } html.is-dark /* Goals */ .ska-goalset { background: linear-gradient(160deg, #1F3930, #1F382E); } html.is-dark .ska-goalset__opts button, html.is-dark .ska-goalgrid button { background: #1C1C21; } html.is-dark .ska-goalgrid .is-suggested { background: #1F3930; } html.is-dark .ska-goal { background: #1C1C21; } html.is-dark .ska-goal__ring::before { background: #1C1C21; } html.is-dark .ska-goal__state.is-good, html.is-dark .ska-goal__state.is-done { background: #1E392F; } html.is-dark .ska-goal__delta.is-up { background: #1E392F; } html.is-dark .ska-goaldetail__chart { background: #1C1C21; } html.is-dark .ska-timeline li > i { background: #1C1C21; } html.is-dark .ska-timeline .is-now > i { background: #1C1C21; } html.is-dark .ska-goaldetail__see { background: #1C1C21; } html.is-dark .ska-do__card { background: linear-gradient(170deg, #201845, #401826); } html.is-dark .ska-do__pick { background: #40321C; } html.is-dark .ska-do__streak { background: #40291C; } html.is-dark .ska-celebrate__card { background: #1C1C21; } html.is-dark .ska-lvl__fz { background: #182945; } html.is-dark .ska-rewards__hero { background: linear-gradient(150deg, #402F1C, #401822); } html.is-dark .ska-badge2 span { background: #322D2A; } html.is-dark .ska-badge2.is-got { background: #402D1C; } html.is-dark .ska-q--card { background: linear-gradient(160deg, #182945, #241845); } html.is-dark .ska-q__opts button { background: #1C1C21; } html.is-dark .ska-q__opts .is-right { background: #1E392F; } html.is-dark .ska-play .ska-q { background: linear-gradient(160deg, #182945, #241845); } html.is-dark .ska-wx { background: linear-gradient(160deg, #182D45, #182C45); } html.is-dark .ska-wx.is-high { background: linear-gradient(160deg, #402D1C, #402D1C); } html.is-dark .ska-wx.is-vhigh { background: linear-gradient(160deg, #401B1C, #401E1C); } html.is-dark .ska-wx__ic { background: #1C1C21; } html.is-dark .ska-badge-toast { background: #1C1C21; } /* ---------- Dark mode: hand-tuned (keep after the generated block) ---------- */ /* Dark mode: pastel icon tiles keep their hue as a soft tint */ html.is-dark .ska-thumb, html.is-dark .ska-quick i, html.is-dark .ska-habit i, html.is-dark .ska-rs-sources svg { background: color-mix(in srgb, var(--t, #F6F5F4) 18%, #1C1C21); } html.is-dark .ska-thumb { color: var(--sk-ink-70); } html.is-dark .ska-tabs__pill { background: rgba(110, 125, 255, .22); } html.is-dark .ska-splash { background: #111114; } /* ---------- Premium (v2.5) ---------- */ .ska-pro-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--sk-iris); color: #fff; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 18px -10px rgba(102, 80, 220, .9); animation: ska-pill-in .5s cubic-bezier(.2, 1.4, .4, 1) both; } .ska-pro-pill svg { width: 16px; height: 16px; fill: #FFE08A; stroke: none; } .ska-pro-pill.is-trial { background: linear-gradient(120deg, #2C2A5C, #6A55D8); } .ska-pro-pill.is-wait { background: var(--sk-stone); color: var(--sk-ink); box-shadow: none; } .ska-pro-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: #E09A2B; animation: ska-blink 1.4s ease-in-out infinite; } .ska-pro-pill[hidden] { display: none; } @keyframes ska-pill-in { from { opacity: 0; transform: scale(.7); } } @keyframes ska-blink { 50% { opacity: .3; } } @media (max-width: 360px) { .ska-pro-pill { padding: 0 10px 0 9px; font-size: 12px; } } /* Upgrade sheet */ .ska-pw { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 14, 30, 0); transition: background-color .25s; } .ska-pw.is-open { background: rgba(15, 14, 30, .55); } .ska-pw__panel { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--sk-card); transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .3, 1); } .ska-pw.is-open .ska-pw__panel { transform: none; } @media (min-width: 560px) { .ska-pw { align-items: center; } .ska-pw__panel { border-radius: 28px; } } .ska-pw__x { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--sk-stone); cursor: pointer; } .ska-pw__x svg { width: 18px; height: 18px; fill: none; stroke: var(--sk-ink); stroke-width: 2; stroke-linecap: round; } .ska-pw__hero, .ska-pw__wait, .ska-pw__redeem { text-align: center; } .ska-pw__crown { display: inline-grid; place-items: center; width: 60px; height: 60px; margin: 4px 0 10px; border-radius: 20px; background: var(--sk-iris); box-shadow: 0 14px 28px -14px rgba(102, 80, 220, .9); } .ska-pw__crown svg { width: 30px; height: 30px; fill: #FFE08A; } .ska-pw__crown.is-wait { animation: ska-float 2.6s ease-in-out infinite; } @keyframes ska-float { 50% { transform: translateY(-5px); } } .ska-pw h2 { margin: 0 24px 6px; font: 600 24px/1.15 var(--sk-display); letter-spacing: -.02em; } .ska-pw__hero p, .ska-pw__wait > p, .ska-pw__redeem > p { margin: 0 auto 14px; max-width: 380px; color: var(--sk-ink-70); font-size: 15px; } .ska-pw__feats { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 1px; } .ska-pw__feats li { display: flex; gap: 10px; align-items: center; padding: 5px 4px; text-align: left; } .ska-pw__feats li.is-key { padding: 9px 10px; border-radius: 14px; background: color-mix(in srgb, #6A55D8 10%, var(--sk-card)); } .ska-pw__feats i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--sk-mint-lt); } .ska-pw__feats i svg { width: 14px; height: 14px; fill: none; stroke: var(--sk-on-mint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .ska-pw__feats b { display: block; font-size: 14.5px; font-weight: 600; } .ska-pw__feats small { color: var(--sk-ink-50); font-size: 13px; } .ska-pw__plans { display: grid; gap: 8px; margin-bottom: 12px; } .ska-pw__plan { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--sk-stone); cursor: pointer; transition: box-shadow .15s, background-color .15s; } .ska-pw__plan input { position: absolute; opacity: 0; pointer-events: none; } .ska-pw__plan.is-on { background: var(--sk-card); box-shadow: inset 0 0 0 2px #6A55D8, 0 10px 24px -16px rgba(102, 80, 220, .8); } .ska-pw__plan:focus-within { outline: 2px solid var(--sk-blue); outline-offset: 2px; } .ska-pw__plan em { position: absolute; top: -9px; left: 14px; padding: 2px 9px; border-radius: 999px; background: var(--sk-iris); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; } .ska-pw__radio { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--sk-ink-rgb), .25); } .ska-pw__plan.is-on .ska-pw__radio { box-shadow: inset 0 0 0 6px #6A55D8; } .ska-pw__pl { flex: 1; min-width: 0; text-align: left; } .ska-pw__pl b, .ska-pw__pr b { display: block; font-size: 16px; } .ska-pw__pl small, .ska-pw__pr small { color: var(--sk-ink-50); font-size: 12.5px; } .ska-pw__pr { text-align: right; white-space: nowrap; } .ska-pw__cta { min-height: 54px; font-size: 16px; } .ska-pw__fine { margin: 8px 0 0; text-align: center; color: var(--sk-ink-50); font-size: 12.5px; } .ska-pw__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; } .ska-pw__links button { min-height: 40px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--sk-ink-70); cursor: pointer; } .ska-pw__code { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--sk-stone); text-align: left; } .ska-pw__code small { display: block; color: var(--sk-ink-50); font-size: 12px; } .ska-pw__code b { font-size: 20px; letter-spacing: .03em; font-variant-numeric: tabular-nums; } .ska-pw__wa { gap: 8px; background: #1FA855 !important; color: #fff !important; } .ska-pw__wa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } .ska-pw__check { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; color: var(--sk-ink-50); font-size: 13px; } .ska-pw__check i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(var(--sk-ink-rgb), .15); border-top-color: #6A55D8; animation: ska-spin .9s linear infinite; } @keyframes ska-spin { to { transform: rotate(360deg); } } .ska-pw__input { width: 100%; height: 54px; margin-bottom: 10px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--sk-stone); color: var(--sk-ink); font: 600 20px/1 var(--sk-font, inherit); letter-spacing: .08em; text-align: center; text-transform: uppercase; } .ska-pw__input:focus { outline: 2px solid #6A55D8; } .ska-pw__redeem .ska-error { margin: 0 0 10px; } /* Locked content */ .ska-locked { position: relative; margin-top: 12px; border-radius: 22px; overflow: hidden; cursor: pointer; } .ska-locked__blur { filter: blur(6px) saturate(.8); opacity: .7; pointer-events: none; user-select: none; max-height: 260px; overflow: hidden; } .ska-locked__blur > :first-child { margin-top: 0; } .ska-locked__cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; text-align: center; background: linear-gradient(to bottom, rgba(var(--sk-bg-rgb), .2), rgba(var(--sk-bg-rgb), .75) 55%); } .ska-locked__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--sk-solid); } .ska-locked__ic svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } .ska-locked__cta b { font-size: 17px; } .ska-locked__cta small { color: var(--sk-ink-70); font-size: 13.5px; margin-bottom: 8px; } .ska-locked__cta .sk-btn { pointer-events: none; min-height: 44px; } /* Upsell banners */ .ska-upsell { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px; border: 0; border-radius: 22px; background: linear-gradient(135deg, #2C2A5C, #5B45C4 55%, #B0569A); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 16px 30px -20px rgba(70, 50, 160, .9); } .ska-upsell > span:nth-child(2) { flex: 1; min-width: 0; } .ska-upsell b { display: block; font-size: 15.5px; } .ska-upsell small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .82); font-size: 13px; line-height: 1.35; } .ska-upsell__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, .16); } .ska-upsell__ic svg { width: 22px; height: 22px; fill: #FFE08A; stroke: none; } .ska-upsell--block .ska-upsell__ic svg { fill: none; stroke: #FFE08A; stroke-width: 2; } .ska-upsell__go { flex: none; padding: 9px 13px; border-radius: 999px; background: #fff; color: #2C2A5C; font-size: 13px; font-weight: 700; } .ska-upsell > i { flex: none; width: 20px; height: 20px; } .ska-upsell > i svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } .ska-upsell.is-trial { background: linear-gradient(135deg, #1F3B66, #3E62C9 60%, #7D5BD6); } .ska-upsell.is-wait { background: var(--sk-stone); color: var(--sk-ink); box-shadow: none; } .ska-upsell.is-wait small { color: var(--sk-ink-70); } .ska-upsell.is-wait .ska-upsell__ic { background: var(--sk-card); } .ska-upsell.is-wait .ska-upsell__ic svg { fill: #E09A2B; } .ska-upsell.is-wait > i svg { stroke: var(--sk-ink); } .ska-left-chip { display: inline-block; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, #6A55D8 12%, var(--sk-card)); font-size: 13px; font-weight: 600; cursor: pointer; } .ska-left-chip u { color: #6A55D8; text-decoration: none; } html.is-dark .ska-left-chip u { color: #B7A9FF; } /* Scan lock */ .ska-scanlock { padding: 40px 8px 20px; text-align: center; } .ska-scanlock__ic { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; border-radius: 24px; background: var(--sk-stone); } .ska-scanlock__ic svg { width: 32px; height: 32px; fill: none; stroke: var(--sk-ink); stroke-width: 1.8; stroke-linecap: round; } .ska-scanlock h1 { font-size: 26px; } .ska-scanlock .sk-btn { margin-top: 10px; gap: 8px; } .ska-scanlock .sk-btn svg { width: 18px; height: 18px; fill: #FFE08A; } /* Locked skin plan, research and weather */ .ska-plan--locked .ska-plan__lock { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .ska-plan--locked .ska-plan__lock svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; } .ska-plan__ghost { position: relative; margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; filter: blur(3.5px); opacity: .8; } .ska-plan__ghost li { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .12); } .ska-plan__ghost small { display: block; font-size: 11.5px; opacity: .8; } .ska-plan__ghost b { font-size: 14px; } .ska-plan--locked .ska-plan__busy { display: flex; align-items: center; gap: 6px; } .ska-plan--locked .ska-plan__busy svg { width: 15px; height: 15px; fill: #FFE08A; } .ska-rs-ghost { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .ska-rs-ghost li { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--sk-stone); } .ska-rs-ghost small { display: block; color: var(--sk-ink-50); font-size: 12px; } .ska-rs-ghost b { display: block; } .ska-rs-ghost i { display: block; font-style: normal; font-size: 12px; color: var(--sk-on-mint); } .ska-rs-intro--locked { padding-bottom: 0; } .ska-wx--locked { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .ska-wx--locked > span:nth-child(2) { flex: 1; min-width: 0; } .ska-wx--locked b { display: block; } .ska-wx--locked small { color: var(--sk-ink-70); font-size: 13px; } .ska-wx__lock svg { width: 20px; height: 20px; fill: none; stroke: var(--sk-ink-70); stroke-width: 2; stroke-linecap: round; } html.is-dark .ska-wx--locked { background: linear-gradient(160deg, #1D2A3A, #1C2230); } @media (prefers-reduced-motion: reduce) { .ska-pro-pill, .ska-pw__crown.is-wait, .ska-pro-pill__dot { animation: none; } .ska-pw__panel { transition: none; } } .ska-installcard { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 10px 12px 12px; border-radius: 22px; background: var(--sk-card); box-shadow: inset 0 0 0 1px rgba(var(--sk-ink-rgb), .08), 0 10px 24px -18px rgba(0, 0, 0, .4); } .ska-installcard > span:nth-child(2) { flex: 1; min-width: 0; } .ska-installcard b { display: block; font-size: 14.5px; } .ska-installcard small { display: block; margin-top: 2px; color: var(--sk-ink-50); font-size: 12.5px; line-height: 1.35; } .ska-installcard__ic img { display: block; width: 44px; height: 44px; border-radius: 12px; } .ska-installcard .sk-btn { flex: none; min-height: 40px; padding: 0 16px; } .ska-installcard__x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: -4px; border: 0; border-radius: 50%; background: none; cursor: pointer; } .ska-installcard__x svg { width: 16px; height: 16px; fill: none; stroke: var(--sk-ink-50); stroke-width: 2; stroke-linecap: round; } .ska-top__account .ska-link { white-space: nowrap; } @media (max-width: 400px) { .ska-top__actions { gap: 8px; } } .ska-pw__foot { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); z-index: 1; margin: 0 -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(var(--sk-card-rgb), 0), var(--sk-card) 14px); } .ska-pw__hero p { font-size: 14.5px; } .ska-pw__crown { width: 52px; height: 52px; border-radius: 17px; } .ska-pw__crown svg { width: 26px; height: 26px; } .ska-pw__alt { margin-top: 8px; gap: 8px; } .ska-pw__alt svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; } /* ---------- v2.6: coach pop-up, check-ins, AI routine, treatments ---------- */ html.ska-noscroll, html.ska-noscroll body { overflow: hidden; } .ska-fab { position: fixed; z-index: 26; right: max(16px, calc(50% - 244px)); bottom: calc(var(--ska-nav-gap) + 84px); display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: var(--sk-iris); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(90, 70, 210, .85); transition: transform .15s; animation: ska-pill-in .5s cubic-bezier(.2, 1.4, .4, 1) both; } .ska-fab:active { transform: scale(.94); } .ska-fab svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; } .ska-fab[hidden] { display: none; } .ska-fab__bubble { position: fixed; z-index: 26; right: max(16px, calc(50% - 244px)); bottom: calc(var(--ska-nav-gap) + 146px); max-width: 250px; padding: 12px 14px; border: 0; border-radius: 18px 18px 6px 18px; background: var(--sk-card); color: var(--sk-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .4), 0 0 0 1px rgba(var(--sk-ink-rgb), .06); animation: ska-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 90% 100%; transition: opacity .35s, transform .35s; } .ska-fab__bubble b { display: block; font-size: 14px; } .ska-fab__bubble span { display: block; margin-top: 2px; font-size: 13px; color: var(--sk-ink-70); } .ska-fab__bubble.is-out { opacity: 0; transform: translateY(8px) scale(.95); } .ska[data-view="ask"] ~ .ska-fab { display: none; } .ska-coachpop { position: fixed; inset: 0; z-index: 88; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 14, 30, 0); transition: background-color .25s; } .ska-coachpop.is-open { background: rgba(15, 14, 30, .45); } .ska-coachpop__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 520px; height: min(88dvh, 760px); border-radius: 28px 28px 0 0; background: var(--sk-white); transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .3, 1); overflow: hidden; } .ska-coachpop.is-open .ska-coachpop__panel { transform: none; } @media (min-width: 560px) { .ska-coachpop { align-items: center; } .ska-coachpop__panel { border-radius: 28px; } } .ska-ask--pop { display: flex; flex-direction: column; height: 100%; min-height: 0; } .ska-coachpop__head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 64px 14px 18px; border-bottom: 1px solid rgba(var(--sk-ink-rgb), .07); } .ska-coachpop__head h2 { margin: 0; font-size: 18px; } .ska-coachpop__head small { color: var(--sk-ink-50); font-size: 12.5px; } .ska-coachpop__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--sk-iris); } .ska-coachpop__av svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; } .ska-ask--pop .ska-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 8px; } .ska-ask--pop .ska-ask__foot { padding: 6px 16px calc(14px + env(safe-area-inset-bottom)); } .ska-ask--pop .ska-compose { position: static; margin-top: 8px; } .ska-ask--pop .ska-prompts { margin-top: 0; } .ska-ask--pop .ska-link-btn { display: block; margin: 8px auto 0; } .ska-checkin { position: fixed; z-index: 27; left: 50%; top: calc(env(safe-area-inset-top) + 66px); display: flex; gap: 12px; width: calc(100% - 24px); max-width: 496px; padding: 14px; border-radius: 22px; background: var(--sk-card); box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .38), 0 0 0 1px rgba(var(--sk-ink-rgb), .07); transform: translate(-50%, -140%); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.2, .3, 1), opacity .3s; } .ska-checkin.is-in { transform: translate(-50%, 0); opacity: 1; } .ska-checkin__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; background: #FDF1DD; } .ska-checkin--pm .ska-checkin__ic, .ska-checkin--pillow .ska-checkin__ic { background: #EFEAFF; } .ska-checkin--water .ska-checkin__ic { background: #E6F3FF; } .ska-checkin--rescan .ska-checkin__ic { background: #EEEFFF; } html.is-dark .ska-checkin__ic { background: color-mix(in srgb, #E09A2B 22%, var(--sk-card)); } html.is-dark .ska-checkin--pm .ska-checkin__ic, html.is-dark .ska-checkin--pillow .ska-checkin__ic { background: color-mix(in srgb, #6A55D8 26%, var(--sk-card)); } .ska-checkin__ic svg { width: 23px; height: 23px; fill: none; stroke: #E09A2B; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ska-checkin--pm .ska-checkin__ic svg, .ska-checkin--pillow .ska-checkin__ic svg { stroke: #6A55D8; } .ska-checkin--water .ska-checkin__ic svg { stroke: #2A6BD6; } .ska-checkin--rescan .ska-checkin__ic svg { stroke: #5163FF; } .ska-checkin__text { flex: 1; min-width: 0; } .ska-checkin__text b { display: block; font-size: 15.5px; } .ska-checkin__text small { display: block; margin-top: 2px; color: var(--sk-ink-70); font-size: 13px; line-height: 1.35; } .ska-checkin__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .ska-checkin__btns .sk-btn { min-height: 38px; padding: 0 14px; font-size: 14px; gap: 6px; } .ska-checkin__btns .sk-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ska-checkin__later { margin-left: auto; min-height: 38px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--sk-ink-50); cursor: pointer; } .ska-aisrc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, #6A55D8 9%, var(--sk-card)); font-size: 13.5px; color: var(--sk-ink-70); } .ska-aisrc p { margin: 0; flex: 1 1 220px; } .ska-aisrc b { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--sk-ink); font-size: 14px; } .ska-aisrc b svg { width: 15px; height: 15px; fill: #6A55D8; stroke: none; } .ska-aisrc em { font-style: normal; color: var(--sk-ink-50); } .ska-aisrc .ska-link-btn { margin: 0; padding: 4px 0; } .ska-aisrc.is-busy { justify-content: flex-start; } .ska-routine .ska-upsell { margin: 0 0 14px; } .ska-clinics { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .ska-clinics li { padding: 14px; border-radius: 18px; background: var(--sk-stone); } .ska-clinics b { display: block; font-size: 15px; } .ska-clinics small { color: var(--sk-ink-50); font-size: 12.5px; } .ska-clinics__note { margin: 6px 0 0; font-size: 13px; color: var(--sk-ink-70); } .ska-clinics__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .ska-clinics__btns .sk-btn { min-height: 36px; padding: 0 12px; font-size: 13px; background: var(--sk-card); } .ska-tr.is-no { opacity: .7; } .ska-tr-ask { margin-top: 14px; padding: 14px 16px; } .ska-tr-ask ul { margin: 6px 0 0; padding-left: 18px; } @media (prefers-reduced-motion: reduce) { .ska-fab, .ska-fab__bubble { animation: none; } .ska-checkin, .ska-coachpop__panel { transition: none; } } .ska-rs-guide.is-tone { color: var(--sk-ink-70); background: var(--sk-stone); padding: 9px 11px; border-radius: 12px; } .ska-rs-guide.is-tone svg { stroke: #E09A2B; } .ska-rs-guide.is-tone b { color: var(--sk-ink); font-weight: 600; } /* Check-in pop-up: everything due now, one row each. */ .ska-chk__sub { margin: 0 24px 14px; color: var(--sk-ink-70); font-size: 14px; line-height: 1.4; } .ska-chk__body { display: grid; gap: 10px; margin-bottom: 14px; } .ska-chk__row { display: flex; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(var(--sk-ink-rgb), .04); } .ska-chk__row .ska-checkin__text { min-width: 0; } .ska-pw__then { margin: 0 0 10px; text-align: center; font-size: 14px; color: var(--sk-ink-70); }