/* ============================================================ Natrustyle — calming nature wellness app Two palettes (Cool Forest / Muted Botanical) + font pairings, switched via data-attributes on . ============================================================ */ /* ---------- Palettes ---------- */ :root, [data-palette="forest"] { --bg: #e8efec; --surface: #fbfdfc; --surface-2: #eef4f1; --surface-glass: rgba(251,253,252,0.72); --ink: #1f2f29; --ink-soft: #3a4b44; --muted: #6e7d77; --muted-2: #97a39d; --primary: #437568; --primary-deep:#2f5549; --primary-soft:#dfeae5; --accent: #6d92a8; /* dawn blue */ --accent-soft: #e2ecf1; --sun: #d6a45f; --sun-soft: #f3e6d2; --line: #dbe5e0; --line-soft: #e8efeb; --good: #5a8a6f; --danger: #b4503f; /* sky / atmosphere */ --sky-top: #aec6ce; --sky-mid: #d2ddda; --sky-bot: #eef2ec; --sun-glow: rgba(231,196,150,0.55); --hill-1: #9fb6ad; --hill-2: #79988c; --hill-3: #5a7b6e; /* season strip — deep eucalyptus, translucent over the hills */ --strip-tint: rgba(40,73,62,0.58); --strip-border: rgba(255,255,255,0.22); --strip-ink: #f4faf7; --strip-ink-soft: rgba(244,250,247,0.82); } [data-palette="botanical"] { --bg: #efe9dd; --surface: #fcf8f0; --surface-2: #f4ecdd; --surface-glass: rgba(252,248,240,0.74); --ink: #2c271f; --ink-soft: #4a4236; --muted: #847a68; --muted-2: #aaa08c; --primary: #6f8b78; /* eucalyptus */ --primary-deep:#4f6a59; --primary-soft:#e6ece4; --accent: #bd7f57; /* terracotta */ --accent-soft: #f0e2d4; --sun: #d4a153; --sun-soft: #f4e7cd; --line: #e6dcc8; --line-soft: #efe7d7; --good: #7a946f; --danger: #b4503f; --sky-top: #d8c39e; --sky-mid: #ecddc2; --sky-bot: #f6efe0; --sun-glow: rgba(224,170,110,0.5); --hill-1: #cdb98f; --hill-2: #b39a6f; --hill-3: #8f9a72; --strip-tint: rgba(60,79,62,0.56); --strip-border: rgba(255,255,255,0.24); --strip-ink: #f7f3ea; --strip-ink-soft: rgba(247,243,234,0.82); } /* ---------- Font pairings ---------- */ :root, [data-font="quicksand"] { --font-head: "Quicksand", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif; --head-weight: 600; } [data-font="comfortaa"] { --font-head: "Comfortaa", system-ui, sans-serif; --font-body: "Mulish", system-ui, sans-serif; --head-weight: 600; } [data-font="baloo"] { --font-head: "Baloo 2", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --head-weight: 600; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); } /* ---------- App shell ---------- */ .app { position: relative; width: 100%; max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; display: flex; flex-direction: column; } .app-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative; scrollbar-width: none; } .app-scroll::-webkit-scrollbar { display: none; } .powered-by { flex: 0 0 auto; text-align: center; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); opacity: 0.65; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); } .powered-by a { color: inherit; text-decoration: none; } .powered-by a:hover { text-decoration: underline; } h1, h2, h3, .head { font-family: var(--font-head); font-weight: var(--head-weight); color: var(--ink); margin: 0; letter-spacing: -0.01em; } a { color: var(--primary); text-decoration: none; } .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; color: var(--muted-2); } .muted { color: var(--muted); } .center { text-align: center; } /* ---------- Atmosphere: sky + grain + hills ---------- */ .sky { position: absolute; inset: 0; background: radial-gradient(120% 70% at 78% 16%, var(--sun-glow) 0%, transparent 55%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-bot) 100%); } .grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"); } /* ---------- Weather depiction (subtle) ---------- Layers sit between the sky gradient and the hills, all very low opacity so the header text stays readable. Driven by data-weather / data-phase on .sky-wrap, set from the cached daily forecast. */ .sky-wrap > [class^="wx-"] { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* Condition tint — a faint wash that shifts the mood without hiding text. */ .wx-tint { opacity: 0.5; mix-blend-mode: soft-light; transition: opacity .6s ease; } .sky-wrap[data-weather="cloud"] .wx-tint { background: linear-gradient(180deg, rgba(120,132,138,0.55), rgba(150,160,165,0.15)); } .sky-wrap[data-weather="rain"] .wx-tint { background: linear-gradient(180deg, rgba(86,100,112,0.6), rgba(110,124,134,0.2)); } .sky-wrap[data-weather="fog"] .wx-tint { background: linear-gradient(180deg, rgba(200,205,205,0.55), rgba(210,214,212,0.3)); opacity: 0.7; } .sky-wrap[data-weather="snow"] .wx-tint { background: linear-gradient(180deg, rgba(214,224,230,0.55), rgba(230,236,240,0.2)); } .sky-wrap[data-phase="night"] .wx-tint { background: linear-gradient(180deg, rgba(28,38,58,0.55), rgba(40,52,72,0.25)); opacity: 0.62; mix-blend-mode: multiply; } /* Clear day — a soft warm glow drifting near the top-right. */ .wx-sun { background: radial-gradient(60px 60px at 80% 24%, rgba(255,228,170,0.6) 0%, rgba(255,228,170,0) 70%); animation: wxPulse 9s ease-in-out infinite; } @keyframes wxPulse { 0%,100% { opacity: .55; } 50% { opacity: .85; } } /* Clear night — a scatter of faint stars. */ .wx-stars { opacity: .8; background-image: radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,0.9), transparent), radial-gradient(1.2px 1.2px at 42% 14%, rgba(255,255,255,0.7), transparent), radial-gradient(1.6px 1.6px at 67% 28%, rgba(255,255,255,0.85), transparent), radial-gradient(1.1px 1.1px at 83% 12%, rgba(255,255,255,0.7), transparent), radial-gradient(1.3px 1.3px at 30% 34%, rgba(255,255,255,0.6), transparent), radial-gradient(1.2px 1.2px at 55% 8%, rgba(255,255,255,0.75), transparent); animation: wxTwinkle 6s ease-in-out infinite; } @keyframes wxTwinkle { 0%,100% { opacity: .55; } 50% { opacity: .9; } } /* Drifting clouds — soft blurred blobs that slide slowly across. */ .wx-clouds span { position: absolute; background: rgba(255,255,255,0.5); border-radius: 999px; filter: blur(9px); animation: wxDrift linear infinite; } .sky-wrap[data-phase="night"] .wx-clouds span { background: rgba(210,216,228,0.34); } .wx-clouds span:nth-child(1) { width: 130px; height: 36px; top: 26px; left: -140px; animation-duration: 48s; } .wx-clouds span:nth-child(2) { width: 92px; height: 28px; top: 64px; left: -120px; animation-duration: 62s; animation-delay: -18s; } .wx-clouds span:nth-child(3) { width: 150px; height: 40px; top: 16px; left: -160px; animation-duration: 74s; animation-delay: -36s; } @keyframes wxDrift { to { transform: translateX(640px); } } /* Rain — faint diagonal streaks. */ .wx-rain { opacity: .35; background-image: repeating-linear-gradient(102deg, rgba(255,255,255,0.5) 0 1px, transparent 1px 9px); background-size: 14px 60px; animation: wxRain .7s linear infinite; } @keyframes wxRain { to { background-position: -14px 60px; } } /* Snow — drifting flecks. */ .wx-snow { opacity: .6; background-image: radial-gradient(2px 2px at 20% 0, #fff, transparent), radial-gradient(2px 2px at 55% 0, #fff, transparent), radial-gradient(1.6px 1.6px at 80% 0, #fff, transparent); background-size: 90px 110px, 120px 130px, 70px 90px; animation: wxSnow 9s linear infinite; } @keyframes wxSnow { to { background-position: 8px 120px, -10px 130px, 6px 100px; } } /* Fog — a soft haze band low over the hills. */ .wx-fog { background: linear-gradient(180deg, transparent 30%, rgba(236,238,236,0.55) 78%, rgba(236,238,236,0.7) 100%); opacity: .8; animation: wxPulse 12s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .wx-sun, .wx-stars, .wx-clouds span, .wx-rain, .wx-snow, .wx-fog { animation: none; } } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 1px 2px rgba(40,55,48,0.03), 0 8px 24px rgba(40,55,48,0.05); } .glass { background: var(--surface-glass); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255,255,255,0.55); border-radius: 26px; box-shadow: 0 12px 40px rgba(30,45,38,0.14); } /* Green-tinted translucent panel — sits over the hills atmosphere but keeps text legible. Frosted so the scene shows through softly behind the words. */ .season-strip { background: var(--strip-tint); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--strip-border); border-radius: 20px; padding: 13px 16px; color: var(--strip-ink); box-shadow: 0 10px 32px rgba(30,45,38,0.18); } .season-strip .muted { color: var(--strip-ink-soft); } .season-strip .strip-div { width: 1px; align-self: stretch; background: var(--strip-border); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; padding: 14px 22px; font-family: var(--font-head); font-weight: 600; font-size: 16px; cursor: pointer; background: var(--primary); color: #fff; white-space: nowrap; text-decoration: none; transition: transform .18s ease, filter .2s ease, background .2s ease, box-shadow .2s ease; box-shadow: 0 6px 16px rgba(40,75,62,0.18); } .btn:hover { filter: brightness(1.04); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn.block { display: flex; width: 100%; } .btn.ghost { background: transparent; color: var(--primary-deep); border: 1.5px solid var(--line); box-shadow: none; } .btn.ghost:hover { background: var(--surface-2); filter: none; } .btn.soft { background: var(--primary-soft); color: var(--primary-deep); box-shadow: none; } .btn.soft:hover { background: var(--primary-soft); filter: brightness(0.98); } .btn.sm { padding: 10px 16px; font-size: 14px; } .btn.link { background: none; box-shadow: none; color: var(--primary); padding: 6px; } /* ---------- Fields ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-weight: 700; font-size: 13px; color: var(--ink-soft); margin-bottom: 7px; } .input, .field input, .field select, .field textarea { width: 100%; padding: 14px 15px; border: 1.5px solid var(--line); border-radius: 14px; font-size: 16px; font-family: var(--font-body); background: var(--surface); color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; } .input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } /* ---------- Location picker ---------- */ .loc-picker { display: flex; flex-direction: column; gap: 12px; } .loc-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12.5px; } .loc-or::before, .loc-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .loc-search-wrap { position: relative; } .loc-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(40,55,48,0.14); overflow: hidden; max-height: 260px; overflow-y: auto; } .loc-result { display: block; width: 100%; text-align: left; padding: 12px 15px; border: none; background: transparent; font: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line-soft); } .loc-result:last-child { border-bottom: none; } .loc-result:hover, .loc-result:focus { background: var(--primary-soft); outline: none; } .loc-chosen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 14px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-deep); font-weight: 700; font-size: 14px; } .loc-chosen-tz { color: var(--primary); font-weight: 600; font-size: 12.5px; } .loc-status { font-size: 12.5px; color: var(--muted); } /* ---------- Chips / pills ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap; } .chip.sun { background: var(--sun-soft); color: #8a5a1f; border-color: transparent; } .chip.leaf { background: var(--primary-soft); color: var(--primary-deep); border-color: transparent; } .chip.glass { background: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.6); color: var(--ink-soft); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ---------- Banner ---------- */ .banner { border-radius: 16px; padding: 12px 15px; margin-bottom: 14px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; background: var(--sun-soft); color: #845321; border: 1px solid rgba(214,164,95,0.3); } .banner a { color: #845321; font-weight: 700; } .banner.grace { background: var(--accent-soft); color: var(--primary-deep); border-color: rgba(109,146,168,0.3); } .banner.grace a { color: var(--primary-deep); } /* ---------- Tab bar ---------- */ .tabbar { position: relative; z-index: 30; display: flex; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); margin: 0 12px 18px; border-radius: 28px; background: var(--surface-glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 10px 30px rgba(30,45,38,0.16); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border: none; background: none; cursor: pointer; text-decoration: none; color: var(--muted-2); font-family: var(--font-body); font-size: 11px; font-weight: 700; } .tab.active { color: var(--primary-deep); } .tab .ti { transition: transform .25s ease; } .tab.active .ti { transform: translateY(-1px) scale(1.06); } /* ---------- Today guidance item ---------- */ .guide-item { position: relative; overflow: hidden; transition: opacity .35s ease, transform .35s ease; } .ico-badge { width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary-deep); } .guide-item.done { opacity: 0.55; } .guide-item.done .ico-badge { background: var(--good); color: #fff; } .why { font-size: 12.5px; color: var(--muted); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; gap: 7px; line-height: 1.45; } /* ---------- Chat ---------- */ .chat-log { display: flex; flex-direction: column; gap: 12px; } .msg { padding: 12px 15px; border-radius: 20px; max-width: 82%; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; } .msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 7px; } .msg.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 7px; box-shadow: 0 2px 8px rgba(40,55,48,0.04); } .typing { display: inline-flex; gap: 4px; align-items: center; } .typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: bob 1.1s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; } @keyframes bob { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } } .disclaimer { background: var(--surface-2); border: none; border-radius: 22px; font-size: 11.5px; color: var(--muted); text-align: center; padding: 10px 14px; margin-bottom: 14px; line-height: 1.5; } /* ---------- Progress visuals ---------- */ .bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: var(--primary); transition: width .5s ease; } .ring-num { font-family: var(--font-head); font-weight: 700; } /* ---------- Step dots ---------- */ .dots { display: flex; gap: 7px; } .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); } .dot.on { background: var(--primary); width: 22px; } /* ---------- Misc ---------- */ .divider { height: 1px; background: var(--line); margin: 4px 0; } .fade-in { animation: fadeIn .5s ease both; } @keyframes fadeIn { from { transform: translateY(12px); opacity: 0.4; } to { transform: none; opacity: 1; } } .list-row { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--line-soft); } .list-row:last-child { border-bottom: none; } .lr-ico { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--primary); flex-shrink: 0; } .avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--primary) 0%, var(--accent) 100%); color: #fff; font-family: var(--font-head); font-weight: 700; } .err { color: var(--danger); font-size: 13px; min-height: 1em; margin: 0 0 4px; } /* ---------- Onboarding domain rows (step 3) ---------- */ .domain-row { display: flex; align-items: center; gap: 13px; text-align: left; cursor: pointer; width: 100%; padding: 12px 13px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); transition: all .2s ease; font-family: var(--font-body); } .domain-row.on { border-color: var(--primary); background: var(--primary-soft); } .domain-row .ico-badge { width: 42px; height: 42px; } .domain-row.on .ico-badge { background: var(--primary); color: #fff; } .domain-row .dr-check { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); background: transparent; color: #fff; } .domain-row.on .dr-check { border: none; background: var(--primary); } .domain-row .dr-check svg { display: none; } .domain-row.on .dr-check svg { display: block; }