/* ============================================================================= FITNIZER — themeable design system. Light = the Institute print brand; Dark = the cinematic app brand (handoff 2026-06-26). Switch via . Most rules read semantic tokens so the theme flips by redefining the palette below. ============================================================================= */ :root { /* brand-fixed */ --navy: #0c1d2c; /* (LIGHT) primary ink; redefined to white in dark */ --navy-light: #2a3e52; --blush: #c4877a; /* terracotta — "before/original" */ --teal: #0a8b94; /* accent fills (buttons, stripes) — same both themes */ --teal-bright: #5fd0c5; /* accent on dark */ --rose: #b06a7b; /* themeable surfaces / text */ --canvas: #faf9f5; /* app background */ --white: #ffffff; /* card surface */ --card-solid: #ffffff; --surface-tint: #f7f8f9; /* subtle raised surface */ --gray: #4d5d6a; /* secondary text */ --line: #e4e7ea; /* borders */ --line-strong: rgba(12, 29, 44, 0.14); /* semantic helpers */ --ink: var(--navy); --good: var(--accent-on); --bad: var(--rose); --accent-on: #0a8b94; /* accent TEXT/icons (legible on the surface) */ --accent-tint: rgba(10, 139, 148, 0.12); --btn-bg: #0c1d2c; /* primary button fill */ --ghost-border: #0c1d2c; /* secondary button border */ --radius: 0px; /* LIGHT = crisp print geometry */ --shadow: 0 1px 3px rgba(12, 29, 44, 0.05); --font-head: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } :root[data-theme="dark"] { --navy: #ffffff; /* ink flips to white */ --canvas: #0c1d2c; /* deep navy app bg */ --white: #13283c; /* elevated card surface */ --card-solid: #13283c; --surface-tint: #16364b; /* raised surface */ --gray: #9fb4c0; /* secondary text */ --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.16); --accent-on: #5fd0c5; /* teal-bright text on dark */ --accent-tint: rgba(95, 208, 197, 0.14); --btn-bg: #0a8b94; /* teal button on dark */ --ghost-border: rgba(255, 255, 255, 0.16); --radius: 12px; /* DARK = rounded app geometry */ background: #0c1d2c; /* fallback behind the live-wallpaper bg */ } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: var(--canvas); color: var(--ink); line-height: 1.55; } /* ---------- header ---------- */ .site-header { padding: 26px 20px 16px; text-align: center; border-bottom: 1px solid var(--line); background: var(--canvas); } .app-logo { display: inline-flex; align-items: center; gap: 10px; } .app-logo-icon { width: 38px; height: 38px; background: var(--teal); border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; } .app-logo-icon svg { width: 22px; height: 22px; } .app-logo-word { font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; letter-spacing: 0.04em; color: var(--navy); } .eyebrow { margin: 10px 0 0; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--accent-on); } /* ---------- layout ---------- */ .container { max-width: 880px; margin: 0 auto; padding: 24px 20px 48px; } .results { margin-top: 22px; display: grid; gap: 18px; } /* Background wallpaper removed — motion now appears only during "Fitnizing". */ /* ---------- home hero (text over the wallpaper) ---------- */ .hero-band { padding: 6px 0 2px; margin-bottom: 4px; } .hero-eyebrow { color: var(--accent-on); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 6px; } .hero-h1 { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.12; color: var(--navy); margin: 0; letter-spacing: -0.01em; } .hero-subline { color: var(--gray); font-size: 0.95rem; margin: 8px 0 16px; } /* ---------- calories-saved equivalences ---------- */ .savings-card { text-align: center; } .savings-sub { color: var(--gray); font-size: 0.85rem; margin: 6px 0 12px; } .savings-eqs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .save-eq { background: var(--accent-tint); color: var(--accent-on); border-radius: var(--radius); padding: 7px 12px; font-size: 0.82rem; font-weight: 600; } .save-eq b { font-weight: 800; } /* "See the recipe" disclosure button */ .see-recipe-btn { display: block; width: 100%; margin-top: 2px; } /* My-recipes header row (title + New recipe) */ .hist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .hist-head h2 { margin: 0; } .hist-head h2::after { display: none; } /* ---------- favourite chips ---------- */ .fav-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gray); margin: 18px 0 10px; } .fav-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .recipe-pack { display: grid; gap: 8px; } .recipe-pack .fav-chip span { line-height: 1.25; } .fav-chip { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; color: var(--navy); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-align: left; box-shadow: var(--shadow); } .fav-chip svg { width: 18px; height: 18px; color: var(--accent-on); flex: 0 0 auto; } /* ---------- theme toggle ---------- */ .theme-toggle { background: none; border: none; cursor: pointer; color: var(--gray); display: inline-flex; align-items: center; padding: 6px; } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .ic-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ic-sun { display: inline; } :root[data-theme="dark"] .theme-toggle .ic-moon { display: none; } /* ---------- sign-in button (clean, on-brand) ---------- */ .btn-signin { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--navy); border: 1px solid var(--ghost-border); border-radius: var(--radius); padding: 8px 14px; font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; text-decoration: none; cursor: pointer; } .btn-signin:hover { background: var(--surface-tint); } .btn-signin svg { width: 15px; height: 15px; color: var(--accent-on); } /* ---------- compact pillar strip ---------- */ .pillar-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 16px 0 4px; } .pillar-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--gray); } .pillar-mini svg { width: 16px; height: 16px; color: var(--accent-on); flex: 0 0 auto; } .pillar-mini strong { color: var(--navy); font-weight: 700; } /* ---------- disclaimer box ---------- */ .disclaimer-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-tint); padding: 12px 16px; max-width: 600px; margin: 0 auto 16px; } .disclaimer-box p { margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--gray); } /* faster pulse for the in-app "Fitnizing" loader (elevated heart-rate feel) */ .ekg-fast .ekg-line { animation-duration: 0.5s; } /* ---------- cards ---------- */ .input-card, .block { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--blush); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .block h2 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--navy); } .block h2::after { content: ""; display: block; width: 14px; height: 14px; background: var(--blush); margin: 10px 0 14px; } .block .recipe-name { color: var(--gray); font-size: 0.9rem; margin: 0 0 16px; } /* ---------- P1 fixes (design review v3) ---------- */ /* Fix 1: feature-discovery strip on the Recipes tab */ .feature-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; } @media (max-width: 560px) { .feature-strip { grid-template-columns: 1fr; } } .feat-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--accent-tint); border: 1px solid var(--accent-on); border-radius: var(--radius); color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; text-align: left; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .feat-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } .feat-chip strong { color: var(--accent-on); } .feat-new { flex: 0 0 auto; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; background: var(--accent-on); color: #fff; padding: 3px 8px; border-radius: 999px; } .feat-text { flex: 1; } .feat-arrow { flex: 0 0 auto; color: var(--accent-on); font-weight: 700; } /* Fix 2: the brand h2 accent square reads as a glitch on the v3 app cards — keep it on the classic recipe blocks, hide it on Plan/Progress/GLP-1. */ #planRoot .block h2::after, #progressRoot .block h2::after, #glp1Root .block h2::after, .notice-card h2::after, .score-card h2::after { display: none; } #planRoot .block h2, #progressRoot .block h2, #glp1Root .block h2, .notice-card h2 { margin-bottom: 12px; } /* Fix 3: friendly signed-out call-to-action card */ .signin-card { border-left: 3px solid var(--accent-on); } .signin-cta { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 12px; text-decoration: none; } /* Fix 4: cross-tab nudges */ .xnudge { margin: 14px 0 0; padding: 11px 14px; border: 1px dashed var(--accent-on); border-radius: var(--radius); background: var(--accent-tint); font-size: 0.92rem; color: var(--ink); } /* ---------- form ---------- */ .field-label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gray); } textarea { width: 100%; resize: vertical; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 0.95rem; font-family: var(--font-body); background: var(--canvas); color: var(--ink); } textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 139, 148, 0.2); } .url-row { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .url-row input { flex: 1 1 220px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); background: var(--canvas); } .url-row input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 139, 148, 0.2); } .url-hint, .signin-hint { font-size: 0.8rem; color: var(--gray); } .button-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .btn { border: 1px solid transparent; border-radius: var(--radius); padding: 13px 22px; font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: filter 0.15s ease, background 0.15s ease; } .btn-primary { background: var(--btn-bg); color: #fff; letter-spacing: 0.04em; } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--ghost-border); } .btn-ghost:hover { background: var(--surface-tint); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .status { margin: 14px 0 0; font-size: 0.9rem; min-height: 1.2em; color: var(--gray); } .status.error { color: var(--blush); font-weight: 700; } /* ---------- substitutions ---------- */ .sub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .sub-item { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); background: var(--surface-tint); } .sub-swap { font-weight: 600; color: var(--navy); } .sub-swap .arrow { color: var(--accent-on); margin: 0 8px; font-weight: 700; } .sub-reason { color: var(--gray); font-size: 0.88rem; margin-top: 4px; } /* ---------- macros (saved-recipe view) ---------- */ .macro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .macro-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--white); } .macro-card .macro-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gray); } .macro-values { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; } .macro-before { color: var(--gray); text-decoration: line-through; font-size: 0.95rem; } .macro-after { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--navy); } .macro-unit { font-size: 0.78rem; color: var(--gray); } .macro-delta { margin-top: 6px; font-size: 0.85rem; font-weight: 700; } .macro-delta.good { color: var(--good); } .macro-delta.bad { color: var(--bad); } .macro-delta.flat { color: var(--gray); } /* ---------- provenance bar ---------- */ .provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .prov-badge { background: var(--accent-tint); color: var(--accent-on); font-weight: 700; font-size: 0.8rem; padding: 5px 12px; border-radius: var(--radius); white-space: nowrap; } .prov-note { margin: 0; color: var(--gray); font-size: 0.8rem; flex: 1 1 240px; } /* ---------- recipe comparison (saved view) ---------- */ .recipe-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .recipe-col h3 { font-family: var(--font-head); font-size: 0.95rem; margin: 0 0 8px; color: var(--navy); } .recipe-col.optimized h3 { color: var(--accent-on); } .recipe-text { white-space: pre-wrap; font-size: 0.9rem; background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0; font-family: var(--font-body); color: var(--navy); } /* ---------- ingredient sources table ---------- */ .edit-hint { font-size: 0.85rem; color: var(--gray); margin: 0 0 10px; } .ing-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.88rem; } .ing-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--navy); } .ing-table td.num { text-align: right; color: var(--gray); white-space: nowrap; } .tag { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 9px; white-space: nowrap; letter-spacing: 0.04em; border-radius: var(--radius); } .tag-db { background: var(--accent-tint); color: var(--accent-on); } .tag-est { background: var(--surface-tint); color: var(--blush); } .grams-input { width: 64px; padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; font-size: 0.86rem; text-align: right; background: var(--canvas); color: var(--navy); } .grams-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 139, 148, 0.2); } details { margin-top: 12px; } summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; padding: 4px 0; color: var(--navy); } .btn-link { background: none; border: none; color: var(--accent-on); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; } .btn-link:hover { color: var(--navy); } /* ---------- result hero + score + table (M1) ---------- */ .result-head .result-name { margin: 6px 0 0; font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; color: var(--navy); } .result-head .result-name::after { display: none; } .fitnized-badge { display: inline-block; background: var(--teal); color: #fff; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius); } .result-sub { margin: 8px 0 0; color: var(--gray); font-size: 0.95rem; } .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hero-stat { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--teal); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .hero-stat-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gray); } .hero-stat-value { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--navy); margin-top: 10px; } .hero-stat-unit { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--gray); margin-left: 5px; } .hero-stat-drop { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 0.82rem; color: var(--accent-on); background: var(--accent-tint); padding: 3px 9px; border-radius: var(--radius); } .hero-stat-was { margin-top: 6px; font-size: 0.8rem; color: var(--gray); text-decoration: line-through; } .score-card { border-left-color: var(--teal); background: var(--accent-tint); text-align: center; } .score-eyebrow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-on); } .score-value { font-family: var(--font-head); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--navy); margin-top: 10px; } .score-unit { display: block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; color: var(--gray); margin-top: 4px; } .score-label { margin-top: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--accent-on); } .score-was { margin-top: 4px; font-size: 0.82rem; color: var(--gray); } .score-disc { margin: 14px auto 0; max-width: 440px; font-size: 0.72rem; color: var(--gray); line-height: 1.45; } .macro-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 4px; } .macro-table th { text-align: right; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray); padding: 0 8px 10px; border-bottom: 1px solid var(--line); } .macro-table th:first-child { text-align: left; } .macro-table th:nth-child(2) { color: var(--blush); } .macro-table th:last-child { color: var(--accent-on); } .macro-table td { padding: 11px 8px; border-bottom: 1px solid var(--line); color: var(--navy); } .macro-table td.mt-name { font-weight: 600; } .macro-table td.mt-orig { text-align: right; color: var(--gray); text-decoration: line-through; } .macro-table td.mt-fit { text-align: right; font-weight: 700; color: var(--navy); } .macro-table .mt-unit { font-weight: 500; font-size: 0.78rem; color: var(--gray); } .macro-table tr:last-child td { border-bottom: none; } /* 3 pillars */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; } .pillar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--teal); border-radius: var(--radius); padding: 14px 10px; box-shadow: var(--shadow); } .pillar-icon { width: 24px; height: 24px; color: var(--accent-on); } .pillar-title { font-weight: 700; color: var(--navy); font-size: 0.82rem; } .pillar-sub { color: var(--gray); font-size: 0.74rem; } .trust-line { margin-top: 16px; text-align: center; font-size: 0.82rem; color: var(--gray); } /* ---------- M2: recipe toggle, ingredient list, notice ---------- */ .recipe-toggle { display: inline-flex; background: var(--surface-tint); border-radius: var(--radius); padding: 3px; margin: 4px 0 16px; } .rtoggle { background: transparent; color: var(--gray); border: none; padding: 8px 22px; border-radius: var(--radius); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; cursor: pointer; } .rtoggle.on { background: var(--white); color: var(--accent-on); box-shadow: var(--shadow); } .recipe-panel h3 { font-family: var(--font-head); font-size: 0.95rem; color: var(--navy); margin: 18px 0 8px; } .recipe-panel h3:first-child { margin-top: 0; } .ing-list { list-style: none; padding: 0; margin: 0; } .ing-li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--navy); } .ing-li:last-child { border-bottom: none; } .ing-grams { color: var(--gray); font-size: 0.85rem; } .notice-card { border-left-color: var(--blush); } /* ---------- email gate ---------- */ .hidden { display: none; } .hp-field { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; opacity: 0; } .gate-card { border-left-color: var(--teal); margin-top: 20px; } .gate-title { margin: 0 0 6px; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--navy); } .gate-sub { margin: 0 0 14px; color: var(--gray); font-size: 0.92rem; } .gate-row { display: flex; gap: 10px; flex-wrap: wrap; } .gate-row input[type="email"] { flex: 1 1 240px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); background: var(--canvas); } .gate-row input[type="email"]:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 139, 148, 0.2); } .gate-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 0.82rem; color: var(--gray); cursor: pointer; } .gate-consent input { margin-top: 3px; accent-color: var(--teal); } /* ---------- footer ---------- */ .site-footer { text-align: center; padding: 28px 20px 44px; } .tagline { font-style: italic; color: var(--gray); font-size: 1rem; margin: 0 0 12px; } .footer-note { color: var(--gray); font-size: 0.8rem; max-width: 560px; margin: 0 auto 10px; } .footer-meta { color: var(--navy); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; margin: 0; } /* ---------- loading dots (legacy) ---------- */ .loading::after { content: " "; animation: dots 1.2s steps(4, end) infinite; } @keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } /* ----- Splash / app-open loading screen (always dark) ----- */ .splash { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(120% 80% at 50% 36%, #11314a 0%, #0c1d2c 56%, #081521 100%); opacity: 1; transition: opacity 0.6s ease; } .splash-hide { opacity: 0; pointer-events: none; } .splash-inner { display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 100vh; padding: 11vh 24px 6vh; box-sizing: border-box; color: #fff; } .splash-mid { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; } .splash-logo { display: flex; align-items: center; justify-content: center; gap: 12px; } .splash-icon { width: 46px; height: 46px; background: var(--teal); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; } .splash-icon svg { width: 26px; height: 26px; } .splash-word { font-family: var(--font-head); font-weight: 700; font-size: 2rem; letter-spacing: 0.06em; color: #fff; } .splash-tag { color: #9fb4c2; font-size: 0.98rem; margin: 16px 0 0; } .splash-video { width: 100%; max-width: 360px; height: auto; display: block; } .splash-bar { width: 200px; height: 3px; background: rgba(255, 255, 255, 0.12); margin: 0 auto 18px; overflow: hidden; } .splash-bar span { display: block; height: 100%; width: 38%; background: var(--teal); animation: splash-load 1.5s ease-in-out infinite; } @keyframes splash-load { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } } .splash-status { display: flex; align-items: center; justify-content: center; gap: 8px; color: #c7d4dd; font-size: 0.9rem; margin: 0; } .splash-status svg { width: 15px; height: 15px; color: var(--teal); flex: 0 0 auto; } .splash-by { color: #5e7384; font-size: 0.72rem; letter-spacing: 0.18em; margin: 14px 0 0; } /* In-app "Fitnizing" overlay (always dark) */ .ekg { width: 100%; max-width: 280px; height: 60px; display: block; margin: 4px auto 10px; } .ekg-line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120 640; animation: ekg-run 1.4s linear infinite; } @keyframes ekg-run { to { stroke-dashoffset: -760; } } .ekg-glow { filter: drop-shadow(0 0 7px rgba(10, 139, 148, 0.65)); } .fitnizing-title { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: #fff; margin: 0; } .fitnizing-title::after { display: none; } .fitnizing-sub { color: #9fb4c2; font-size: 0.9rem; margin: 8px auto 16px; max-width: 320px; } .fitnizing-steps { list-style: none; padding: 0; margin: 0 auto; display: inline-block; text-align: left; } .fitnizing-steps li { color: #c7d4dd; font-size: 0.88rem; padding: 5px 0 5px 24px; position: relative; } .fitnizing-steps li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 2px solid var(--teal); border-radius: 50%; } /* iOS Safari auto-zooms when focusing an input with font-size < 16px (then the page stays zoomed until you double-tap). Keep all form text at 16px to stop it, and lock text scaling so layouts never inflate. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } textarea, input, select, .url-row input, .gate-row input[type="email"], .grams-input, .score-comment { font-size: 16px; } @media (max-width: 640px) { .recipe-compare { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero-stat-value { font-size: 2.2rem; } .score-value { font-size: 2.6rem; } .hero-h1 { font-size: 26px; } } /* Printing is always light + legible, regardless of the chosen theme. */ @media print { :root, :root[data-theme="dark"] { --canvas: #fff; --white: #fff; --surface-tint: #fff; --navy: #0c1d2c; --gray: #44515c; --line: #ccc; --line-strong: #bbb; --accent-on: #0a8b94; --ink: #0c1d2c; } body { background: #fff; } .site-header, .site-footer, .auth-bar, .input-card, #gateCard, #historyPanel, .result-toolbar, .score-block, .edit-hint, .hero-band, .fav-label, .fav-chips, .pillars, .trust-line, #splash { display: none !important; } } /* ============================================================ v3 — app nav, My Plan, Progress, GLP-1 ============================================================ */ /* ---------- app navigation ---------- */ .app-nav { display: flex; gap: 6px; justify-content: center; margin: 4px 0 22px; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); box-shadow: var(--shadow); } .nav-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; background: none; border: none; border-radius: var(--radius); color: var(--gray); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nav-btn svg { width: 22px; height: 22px; } .nav-btn.on { background: var(--accent-tint); color: var(--accent-on); } .nav-btn:hover { color: var(--accent-on); } @media (max-width: 720px) { .app-nav { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40; margin: 0; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); } body { padding-bottom: 96px; } .site-footer { padding-bottom: 110px; } } @media print { .app-nav { display: none; } } /* ---------- shared plan forms ---------- */ .plan-nudge p { margin: 0; font-size: 0.9rem; color: var(--gray); } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; margin: 6px 0 16px; } .pf label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); margin-bottom: 6px; } .pf label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; } .pf input[type="number"], .pf input[type="text"], .pf input[type="date"], .pf input[type="time"], .pf select { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card-solid); color: var(--ink); font-family: var(--font-body); font-size: 0.98rem; box-sizing: border-box; } .pf input:focus, .pf select:focus { outline: none; border-color: var(--accent-on); box-shadow: 0 0 0 3px var(--accent-tint); } .pf .two { display: flex; gap: 8px; } .pf-wide { grid-column: 1 / -1; } .pf-check { display: flex; gap: 10px; align-items: flex-start; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; font-size: 0.92rem !important; color: var(--ink) !important; cursor: pointer; } .pf-check input { margin-top: 3px; accent-color: var(--accent-on); width: 18px; height: 18px; } .seg { display: flex; gap: 6px; } .seg button { flex: 1; padding: 10px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card-solid); color: var(--gray); font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; cursor: pointer; } .seg button.on { background: var(--accent-tint); border-color: var(--accent-on); color: var(--accent-on); } /* ---------- targets card ---------- */ .targets-card { border-left: 3px solid var(--accent-on); } .target-hero { display: flex; gap: 22px; flex-wrap: wrap; align-items: stretch; margin-top: 4px; } .target-main { flex: 1 1 240px; } .target-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); } .target-value { font-family: var(--font-head); font-size: 3.2rem; font-weight: 900; line-height: 1.05; color: var(--accent-on); } .target-unit { font-size: 1.1rem; font-weight: 700; color: var(--gray); margin-left: 6px; } .target-range { color: var(--gray); font-size: 0.92rem; margin-top: 4px; } .target-side { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .mini-target { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-tint); font-size: 0.92rem; } .mini-target span { color: var(--gray); } .mini-target strong { color: var(--ink); } .target-glp { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-tint); color: var(--ink); font-size: 0.92rem; } .target-basis { color: var(--gray); font-size: 0.88rem; margin: 12px 0 0; } /* ---------- result chip (personal protein %) ---------- */ .target-chip { margin: 14px 0 18px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--accent-on); background: var(--accent-tint); color: var(--ink); font-size: 0.98rem; } .target-chip-cta { border-style: dashed; } /* ---------- tiers ---------- */ .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; } .tier { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface-tint); display: flex; flex-direction: column; } .tier-pro { border-color: var(--accent-on); background: var(--accent-tint); position: relative; } .tier-badge { display: inline-block; align-self: flex-start; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; background: var(--accent-on); color: #fff; } .tier-name { font-family: var(--font-head); font-weight: 900; font-size: 1.02rem; color: var(--ink); margin-bottom: 8px; } .tier ul { margin: 0 0 12px; padding-left: 18px; font-size: 0.9rem; color: var(--ink); } .tier li { margin: 5px 0; } .tier-price { margin-top: auto; font-family: var(--font-head); font-weight: 900; font-size: 1.15rem; color: var(--ink); } .tier-price span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.78rem; color: var(--gray); } /* ---------- GLP-1 ---------- */ .shot-card { border-left: 3px solid var(--accent-on); text-align: left; } .shot-count { font-family: var(--font-head); font-size: 2.6rem; font-weight: 900; color: var(--accent-on); line-height: 1.1; } .shot-meta { color: var(--gray); font-size: 0.95rem; margin: 4px 0 14px; } .glp-why { color: var(--ink); font-size: 0.98rem; line-height: 1.6; margin: 4px 0 16px; } /* ---------- progress ---------- */ .trend-chart { width: 100%; height: auto; display: block; } .trend-chart .ax { font: 700 11px var(--font-body); fill: var(--gray); } .trend-chart .axr { text-anchor: end; } .trend-chart .tl-weight { fill: none; stroke: var(--accent-on); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .trend-chart .tl-muscle { fill: none; stroke: var(--blush); stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; } .trend-chart .td-weight { fill: var(--accent-on); } .trend-chart .td-muscle { fill: var(--blush); } .chart-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 0.85rem; color: var(--gray); flex-wrap: wrap; } .lg::before { content: ""; display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .lg-weight::before { background: var(--accent-on); } .lg-muscle::before { background: var(--blush); } .lg-hint::before { display: none; } .bl-table td, .bl-table th { font-size: 0.9rem; } .adapt-card { border-left: 3px solid var(--accent-on); } .adapt-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; } .adapt-stat { flex: 1 1 140px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-tint); } .adapt-stat span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray); } .adapt-stat strong { font-family: var(--font-head); font-size: 1.25rem; color: var(--ink); } .adapt-warn { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius); background: rgba(176, 106, 123, 0.14); border: 1px solid var(--rose); color: var(--ink); font-size: 0.92rem; } .adapt-good { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-tint); color: var(--ink); font-size: 0.92rem; } /* ============================================================ v4 — capability scenes (loading) + intro tutorial ============================================================ */ .fit-scenes { position: absolute; inset: 0; overflow: hidden; } .fit-scene { position: absolute; inset: -6%; background-size: cover; background-position: center; opacity: 0; transform: scale(1); transition: opacity 1.1s ease; } .fit-scene.on { opacity: 0.34; animation: fitKenburns 9s ease-in-out infinite alternate; } @keyframes fitKenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.1) translateY(-1.5%); } } .fit-scan { position: absolute; left: 0; right: 0; top: -12%; height: 10%; background: linear-gradient(to bottom, transparent, rgba(95, 208, 197, 0.22), transparent); animation: fitScan 3.4s linear infinite; } @keyframes fitScan { from { top: -12%; } to { top: 112%; } } .fitnizing-overlay .splash-inner { position: relative; z-index: 2; } /* ---------- intro tutorial ---------- */ .tut-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(12, 29, 44, 0.86); backdrop-filter: blur(6px); animation: tutIn 0.4s ease; transition: opacity 0.4s ease; } .tut-overlay.tut-hide { opacity: 0; } @keyframes tutIn { from { opacity: 0; } to { opacity: 1; } } .tut-card { width: 100%; max-width: 420px; max-height: 92vh; overflow: auto; background: var(--card-solid); border: 1px solid var(--line-strong); border-radius: calc(var(--radius) + 10px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden; animation: tutUp 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); } @keyframes tutUp { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } } .tut-media { position: relative; height: 300px; overflow: hidden; } .tut-media img { width: 100%; height: 100%; object-fit: cover; display: block; animation: fitKenburns 8s ease-in-out infinite alternate; } .tut-media .tut-scan { position: absolute; left: 0; right: 0; top: -12%; height: 12%; background: linear-gradient(to bottom, transparent, rgba(95, 208, 197, 0.3), transparent); animation: fitScan 3s linear infinite; } .tut-body { padding: 18px 20px 20px; } .tut-kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; color: var(--accent-on); margin-bottom: 4px; } .tut-title { margin: 0 0 6px; font-family: var(--font-head); font-weight: 900; font-size: 1.3rem; color: var(--ink); } .tut-text { margin: 0 0 14px; color: var(--gray); font-size: 0.95rem; line-height: 1.5; } .tut-dots { display: flex; gap: 6px; margin-bottom: 16px; } .tut-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); transition: background 0.2s, width 0.2s; } .tut-dot.on { background: var(--accent-on); width: 22px; } .tut-actions { display: flex; justify-content: space-between; gap: 10px; } @media (max-width: 480px) { .tut-media { height: 240px; } }