/* * Peak Form Web * Android Design Bridge · Home + Bottom Navigation V1 * * Design-Master: * Peak Form Android v0.13.36-dev * * Keine Backend-/DB-/Sync-Logik. */ /* ---------------------------------------------------------- HOME · SCREEN Android: pf_screen_bg #071C2A -> #04131E -> #020B12 20dp horizontal ---------------------------------------------------------- */ body.pf-android-home { background: linear-gradient( 180deg, #071C2A 0%, #04131E 52%, #020B12 100% ) !important; color: #F8FBFD; } body.pf-android-home .dashboard-shell { padding-left: 20px; padding-right: 20px; padding-top: 16px; /* * Die Navigation liegt wie bei Android außerhalb * des scrollenden Inhalts. */ padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* ---------------------------------------------------------- HOME · HEADER ---------------------------------------------------------- */ body.pf-android-home .dashboard-hero { padding: 0 0 20px 0; } body.pf-android-home .dashboard-hero .eyebrow { color: #22E5D3; font-size: 13px; line-height: 1.25; font-weight: 800; letter-spacing: .18em; } /* * Android Home überschreibt PF.HeroTitle bewusst auf 26sp. * * KEIN clamp(). * KEIN vw(). * Dadurch kann der Titel auf kleinen Displays nicht wieder * unkontrolliert wachsen. */ body.pf-android-home .dashboard-hero h1 { margin: 8px 0 10px; max-width: 100%; color: #F8FBFD; font-family: "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", sans-serif; font-size: 26px !important; line-height: 1.04; font-weight: 800; letter-spacing: 0; overflow-wrap: normal; word-break: normal; } body.pf-android-home .dashboard-hero-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 5px; } body.pf-android-home .motto { color: #FF9D24; font-size: 12px; line-height: 1.25; font-weight: 800; font-style: italic; letter-spacing: .05em; } body.pf-android-home .phase-badge { flex: 0 0 auto; margin: 0; padding: 5px 12px; border: 1px solid rgba(34, 229, 211, .45); border-radius: 999px; background: rgba(34, 229, 211, .08); color: #22E5D3; font-size: 10px; font-weight: 800; letter-spacing: .04em; } /* ---------------------------------------------------------- HOME · ABSCHNITTSTITEL ---------------------------------------------------------- */ body.pf-android-home .pf-home-overview-title, body.pf-android-home .pf-home-system-title { margin: 16px 0 8px; color: #22E5D3; font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: .09em; } /* ---------------------------------------------------------- HOME · KARTEN PF Card Surface Android: #091F2D -> #061925 -> #04131E radius 17dp border #12384C ---------------------------------------------------------- */ body.pf-android-home .dashboard-flow { gap: 12px; } body.pf-android-home .dashboard-card { border: 1px solid #12384C; border-radius: 17px; background: linear-gradient( 135deg, #091F2D 0%, #061925 52%, #04131E 100% ); box-shadow: none; padding: 15px; } /* Android Hero Card für Gewicht */ body.pf-android-home .dashboard-duo .dashboard-card:first-child { border-color: #2D728C; background: linear-gradient( 135deg, #164A63 0%, #0D3348 50%, #061D2B 100% ); } body.pf-android-home .dashboard-duo { gap: 10px; } /* ---------------------------------------------------------- HOME · KARTEN-TYPOGRAFIE ---------------------------------------------------------- */ body.pf-android-home .dashboard-card .card-head { margin-bottom: 10px; color: #22E5D3; font-size: 12px; line-height: 1.25; font-weight: 800; letter-spacing: .09em; } body.pf-android-home .dashboard-card .card-head small { color: #6F8DA1; font-size: 10px; font-weight: 600; } body.pf-android-home .compact-primary { margin: 5px 0 12px; color: #F8FBFD; font-family: "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", sans-serif; font-size: 38px; line-height: 1; font-weight: 800; } body.pf-android-home .compact-primary small { color: #F8FBFD; font-size: 20px; } body.pf-android-home .compact-subline { color: #A8C0D1; font-size: 12px; } body.pf-android-home .compact-subline strong { color: #F8FBFD; } /* ---------------------------------------------------------- HOME · INNERE METRIK-KARTEN Android PF metric tile ---------------------------------------------------------- */ body.pf-android-home .dashboard-macro-grid > div, body.pf-android-home .daily-check-compact-grid > div, body.pf-android-home .recovery-metrics > div, body.pf-android-home .cardio-metrics > div { border: 1px solid #12384A; border-radius: 13px; background: linear-gradient( 135deg, #081E2B, #051722 ); box-shadow: none; } /* ---------------------------------------------------------- HOME · LINKS ---------------------------------------------------------- */ body.pf-android-home .card-link, body.pf-android-home .mini-link, body.pf-android-home .compact-link { color: #22E5D3; } /* ---------------------------------------------------------- HOME · NUTRITION PROGRESS ---------------------------------------------------------- */ body.pf-android-home .nutrition-progress { background: #123248; } body.pf-android-home .nutrition-progress span { background: #22E5D3; } /* ---------------------------------------------------------- HOME · SYSTEM-ZUGANG System verschwindet aus der Primary Navigation, bleibt aber vollständig erreichbar. ---------------------------------------------------------- */ body.pf-android-home .pf-home-system-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; margin-bottom: 4px; padding: 14px 15px; text-decoration: none; border: 1px solid #12384C; border-radius: 17px; background: linear-gradient( 135deg, #091F2D, #04131E ); } body.pf-android-home .pf-home-system-entry strong { color: #F8FBFD; font-size: 15px; } body.pf-android-home .pf-home-system-entry small { grid-column: 1; color: #A8C0D1; font-size: 11px; } body.pf-android-home .pf-home-system-entry b { grid-column: 2; grid-row: 1 / span 2; color: #22E5D3; font-size: 22px; } /* ========================================================== BOTTOM NAVIGATION Android view_bottom_nav.xml: 72dp 5 Primary Tabs getrennt vom Scrollbereich ========================================================== */ .bottom-nav { position: fixed !important; z-index: 1000 !important; left: 50% !important; right: auto !important; bottom: 0 !important; transform: translateX(-50%) !important; width: min(860px, 100%) !important; min-height: calc( 72px + env(safe-area-inset-bottom) ); grid-template-columns: repeat( 5, minmax(0, 1fr) ) !important; gap: 0 !important; padding: 7px max( 8px, env(safe-area-inset-left) ) calc( 6px + env(safe-area-inset-bottom) ) max( 8px, env(safe-area-inset-right) ) !important; background: #03101A !important; border-top: 1px solid #103449 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* * System ist in Android kein Primary Tab. * * Der Zugriff bleibt über Home erhalten. */ .bottom-nav a[href="/system"] { display: none !important; } .bottom-nav a { position: relative; min-width: 0; min-height: 59px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 1px !important; text-decoration: none; border: 1px solid transparent; border-radius: 13px !important; background: transparent; color: #A8C0D1 !important; opacity: .76; font-size: 7px !important; line-height: 1; font-weight: 800 !important; text-align: center; } /* Android-Navigation heißt Home statt Dashboard */ .bottom-nav a[href="/"] { font-size: 0 !important; } .bottom-nav a[href="/"]::after { content: "Home"; font-size: 7px; line-height: 1; font-weight: 800; } /* Icons */ .bottom-nav a::before { content: ""; display: block; width: 22px; height: 22px; flex: 0 0 22px; background-color: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .bottom-nav a[href="/"]::before { mask-image: url("/static/pf-icons/home.svg"); -webkit-mask-image: url("/static/pf-icons/home.svg"); } .bottom-nav a[href="/body"]::before { mask-image: url("/static/pf-icons/body.svg"); -webkit-mask-image: url("/static/pf-icons/body.svg"); } .bottom-nav a[href="/nutrition"]::before { mask-image: url("/static/pf-icons/food.svg"); -webkit-mask-image: url("/static/pf-icons/food.svg"); } .bottom-nav a[href="/training"]::before { mask-image: url("/static/pf-icons/training.svg"); -webkit-mask-image: url("/static/pf-icons/training.svg"); } .bottom-nav a[href="/progress"]::before { mask-image: url("/static/pf-icons/progress.svg"); -webkit-mask-image: url("/static/pf-icons/progress.svg"); } /* Android active nav */ .bottom-nav a.active { color: #22E5D3 !important; opacity: 1; background: rgba( 34, 229, 211, .063 ) !important; border-color: rgba( 34, 229, 211, .333 ) !important; } /* * Reservierter Scrollbereich. * Navigation liegt niemals am Ende des Dokumentflusses. */ .app-shell { padding-bottom: calc( 96px + env(safe-area-inset-bottom) ); } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media (max-width: 560px) { body.pf-android-home .dashboard-shell { width: 100%; } body.pf-android-home .dashboard-duo { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } body.pf-android-home .compact-stat-card { min-width: 0; } body.pf-android-home .compact-primary { font-size: 32px; } body.pf-android-home .compact-primary small { font-size: 17px; } } /* ---------------------------------------------------------- SEHR KLEINE DISPLAYS ---------------------------------------------------------- */ @media (max-width: 360px) { body.pf-android-home .dashboard-shell { padding-left: 14px; padding-right: 14px; } body.pf-android-home .dashboard-hero h1 { font-size: 25px !important; } body.pf-android-home .dashboard-duo { gap: 8px; } } /* ---------------------------------------------------------- DESKTOP Auf großen Bildschirmen nur moderat vergrößern. Mobile PF-Geometrie bleibt Designreferenz. ---------------------------------------------------------- */ @media (min-width: 720px) { body.pf-android-home .dashboard-hero h1 { font-size: 31px !important; } } /* ========================================================== FUNKTIONSERHALTUNG · NAVIGATION Webapp-Struktur bleibt vollständig erhalten: Dashboard · Körper · Essen · Training · Verlauf · System Keine Buttons entfernen, umbenennen oder verstecken. ========================================================== */ .bottom-nav { grid-template-columns: repeat( 6, minmax(0, 1fr) ) !important; } /* SYSTEM bleibt regulärer bestehender Navigationseintrag */ .bottom-nav a[href="/system"] { display: flex !important; } /* DASHBOARD bleibt DASHBOARD – keine Umbenennung zu Home */ .bottom-nav a[href="/"] { font-size: 7px !important; } .bottom-nav a[href="/"]::after { content: none !important; } /* Auch System erhält ein optisch passendes Icon, ohne Bezeichnung oder Funktion zu verändern. */ .bottom-nav a[href="/system"]::before { mask-image: none !important; -webkit-mask-image: none !important; content: "⚙"; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: none; font-size: 20px; line-height: 1; } /* Bei sechs Punkten etwas kompakter, Funktion und Beschriftung bleiben identisch. */ @media (max-width: 560px) { .bottom-nav a { font-size: 6.5px !important; } .bottom-nav a[href="/"] { font-size: 6.5px !important; } } /* ========================================================== NAVIGATION · FIXED VIEWPORT STABILISIERUNG Keine Funktions-/Buttonänderungen. Verhindert leichtes vertikales Springen beim Scrollen. ========================================================== */ .bottom-nav { position: fixed !important; /* Kein left:50% + translate mehr */ left: 0 !important; right: 0 !important; bottom: 0 !important; transform: none !important; margin-left: auto !important; margin-right: auto !important; width: min(860px, 100%) !important; /* feste Android-PF-Navigationshöhe */ height: 72px !important; min-height: 72px !important; max-height: 72px !important; padding: 6px max(8px, env(safe-area-inset-left)) 6px max(8px, env(safe-area-inset-right)) !important; box-sizing: border-box !important; /* eigener stabiler Compositor-Layer */ isolation: isolate; contain: layout paint; /* keine Animation / kein Layout-Nachfedern */ transition: none !important; animation: none !important; } /* Navigationseinträge dürfen ihre Höhe nicht verändern */ .bottom-nav a { height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin: 0 !important; transition: none !important; } /* Auch ACTIVE darf keine Geometrie verändern */ .bottom-nav a.active { transform: none !important; } /* Content endet zuverlässig oberhalb der Navigation */ body { padding-bottom: 0 !important; } .app-shell { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; } /* ========================================================== HOME HERO · MOBILE FIT Nur Schriftgröße des Home-Slogans. Keine Funktions- oder Layoutänderungen. ========================================================== */ @media (max-width: 560px) { body.pf-android-home .dashboard-hero h1 { font-size: 23px !important; line-height: 1.04 !important; letter-spacing: 0 !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; } } /* sehr schmale Displays */ @media (max-width: 380px) { body.pf-android-home .dashboard-hero h1 { font-size: 22px !important; } } /* ========================================================== PEAK FORM HOME CARDS V2 Designquelle: Android v0.13.36-dev NUR DARSTELLUNG. Keine Inhalte, Buttons, Links oder Funktionen verändert. ========================================================== */ /* ---------------------------------------------------------- ALLGEMEINE HOME-KARTE Android: pf_card_surface.xml #091F2D -> #061925 -> #04131E Border #12384C Radius 17dp ---------------------------------------------------------- */ body.pf-android-home .dashboard-card { background: linear-gradient( 135deg, #091F2D 0%, #061925 52%, #04131E 100% ) !important; border: 1px solid #12384C !important; border-radius: 17px !important; padding: 15px !important; box-shadow: none !important; } /* Kartenabstand wie Android */ body.pf-android-home .dashboard-flow { gap: 12px !important; } /* ---------------------------------------------------------- GEWICHT · HERO CARD Android: pf_card_hero.xml ---------------------------------------------------------- */ body.pf-android-home .dashboard-duo .dashboard-card:first-child { background: linear-gradient( 135deg, #164A63 0%, #0D3348 50%, #061D2B 100% ) !important; border-color: #2D728C !important; } /* Gewichtstitel */ body.pf-android-home .dashboard-duo .dashboard-card:first-child .card-head { color: #22E5D3 !important; } /* ---------------------------------------------------------- AKTIVITÄT Android benutzt hier den blauen Akzent. ---------------------------------------------------------- */ body.pf-android-home .dashboard-duo .dashboard-card:nth-child(2) .card-head { color: #58C1FF !important; } body.pf-android-home .dashboard-duo .dashboard-card:nth-child(2) .compact-subline strong { color: #58C1FF; } /* ---------------------------------------------------------- GEWICHT + AKTIVITÄT Gleiche Kartenhöhe, aber keinerlei Inhalt entfernen. ---------------------------------------------------------- */ body.pf-android-home .dashboard-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px !important; } body.pf-android-home .compact-stat-card { height: 100%; min-width: 0; min-height: 154px; display: flex; flex-direction: column; } /* große Werte entsprechend Android PF.BigValue */ body.pf-android-home .compact-primary { margin: 5px 0 10px !important; color: #F8FBFD; font-family: "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", sans-serif; font-size: 38px; line-height: 1; font-weight: 800; } body.pf-android-home .compact-primary small { color: #F8FBFD; font-size: 18px; font-weight: 700; } /* ---------------------------------------------------------- KARTENKÖPFE Android PF.SectionTitle / PF.KpiLabel ---------------------------------------------------------- */ body.pf-android-home .dashboard-card .card-head { color: #22E5D3; font-size: 12px !important; line-height: 1.25; font-weight: 800; letter-spacing: .09em; margin-bottom: 10px !important; } body.pf-android-home .dashboard-card .card-head small { color: #6F8DA1; font-size: 10px; font-weight: 600; letter-spacing: 0; } /* ---------------------------------------------------------- ERNÄHRUNG ---------------------------------------------------------- */ body.pf-android-home .nutrition-dashboard-card { background: linear-gradient( 135deg, #091F2D, #061925 52%, #04131E ) !important; } /* kcal Hauptwert – Android PF.CardHeading */ body.pf-android-home .nutrition-kcal strong { color: #F8FBFD; font-family: "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", sans-serif; font-size: 25px; line-height: 1; font-weight: 800; } body.pf-android-home .nutrition-kcal span { color: #A8C0D1; font-size: 13px; } /* kcal frei */ body.pf-android-home .nutrition-remaining { color: #22E5D3; font-size: 12px; font-weight: 800; } /* Android Progressbar: 6dp */ body.pf-android-home .nutrition-progress { height: 6px !important; margin-top: 8px; background: #123248 !important; border: 0 !important; border-radius: 999px; } body.pf-android-home .nutrition-progress span { background: linear-gradient( 90deg, #22E5D3, #6AFFF1 ) !important; } /* ---------------------------------------------------------- MAKROS Android: Protein pf_metric_tile Fett pf_metric_tile_orange Ballaststoffe pf_metric_tile_green KH pf_metric_tile_blue ---------------------------------------------------------- */ body.pf-android-home .dashboard-macro-grid { gap: 8px !important; margin-top: 10px; } body.pf-android-home .dashboard-macro-grid > div { min-width: 0; min-height: 70px; padding: 10px !important; border-radius: 13px !important; box-shadow: none !important; } /* Protein */ body.pf-android-home .dashboard-macro-grid > div:nth-child(1) { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; } /* Fett */ body.pf-android-home .dashboard-macro-grid > div:nth-child(2) { background: linear-gradient( 135deg, #382617, #111D24 ) !important; border: 1px solid #81521F !important; } /* Ballaststoffe */ body.pf-android-home .dashboard-macro-grid > div:nth-child(3) { background: linear-gradient( 135deg, #10362F, #071F27 ) !important; border: 1px solid #246956 !important; } /* Kohlenhydrate */ body.pf-android-home .dashboard-macro-grid > div:nth-child(4) { background: linear-gradient( 135deg, #13334B, #081F30 ) !important; border: 1px solid #225B7B !important; } /* Makro-Labels */ body.pf-android-home .dashboard-macro-grid > div > span { color: #6F8DA1; font-size: 9px; font-weight: 800; letter-spacing: .06em; } body.pf-android-home .dashboard-macro-grid > div > strong { color: #F8FBFD; font-size: 17px; line-height: 1.15; margin-top: 3px; } body.pf-android-home .dashboard-macro-grid > div > small { color: #A8C0D1; font-size: 9px; } /* ---------------------------------------------------------- DAILY CHECK Bleibt als eigene bestehende Webapp-Karte. Wird NICHT mit Erholung zusammengelegt. ---------------------------------------------------------- */ body.pf-android-home .daily-check-dashboard-card { background: #04141E !important; border-color: #0E3041 !important; } body.pf-android-home .daily-check-compact-grid { gap: 8px; } body.pf-android-home .daily-check-compact-grid > div { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; border-radius: 13px !important; padding: 10px !important; } /* ---------------------------------------------------------- ERHOLUNG Android: pf_hero_glow.xml ---------------------------------------------------------- */ body.pf-android-home .recovery-focus-card { background: linear-gradient( 90deg, rgba(34, 229, 211, .10), #091F2D 48%, #131C3A 100% ) !important; border: 1px solid #315F72 !important; border-radius: 13px !important; } /* Status größer wie Android PF.SignalValue */ body.pf-android-home .recovery-status-main strong { color: #F8FBFD; font-size: 24px; font-weight: 800; } /* Erholungsmetriken */ body.pf-android-home .recovery-metrics { gap: 8px !important; } body.pf-android-home .recovery-metrics > div { min-width: 0; min-height: 64px; padding: 9px !important; border-radius: 13px !important; } /* Schlaf · Purple */ body.pf-android-home .recovery-metrics > div:nth-child(1) { background: linear-gradient( 135deg, #282447, #0D1E2C ) !important; border: 1px solid #4D4673 !important; } /* HRV · Green */ body.pf-android-home .recovery-metrics > div:nth-child(2) { background: linear-gradient( 135deg, #10362F, #071F27 ) !important; border: 1px solid #246956 !important; } /* Ruhepuls · Neutral */ body.pf-android-home .recovery-metrics > div:nth-child(3) { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; } /* Body Battery · Blue */ body.pf-android-home .recovery-metrics > div:nth-child(4) { background: linear-gradient( 135deg, #13334B, #081F30 ) !important; border: 1px solid #225B7B !important; } /* ---------------------------------------------------------- TRAINING ---------------------------------------------------------- */ body.pf-android-home .training-dashboard-card { background: linear-gradient( 135deg, #091F2D, #061925 52%, #04131E ) !important; } /* Tabellenkopf etwas dezenter */ body.pf-android-home .dashboard-exercise-head { color: #6F8DA1; font-size: 9px; font-weight: 800; } /* einzelne Übungszeilen */ body.pf-android-home .dashboard-exercise-row { border-bottom-color: #123142 !important; } /* ---------------------------------------------------------- CARDIO ---------------------------------------------------------- */ body.pf-android-home .cardio-dashboard-card { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; } /* ---------------------------------------------------------- HOME LINKS Vorhandene Beschriftungen bleiben unverändert. Nur optisch näher am Android Ghost Button. ---------------------------------------------------------- */ body.pf-android-home .dashboard-card .card-link, body.pf-android-home .dashboard-card .mini-link { color: #22E5D3 !important; font-size: 12px; font-weight: 800; text-decoration: none; } /* ---------------------------------------------------------- MOBILE FEINSCHLIFF ---------------------------------------------------------- */ @media (max-width: 560px) { body.pf-android-home .dashboard-card { padding: 14px !important; } body.pf-android-home .compact-primary { font-size: 32px; } body.pf-android-home .dashboard-macro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.pf-android-home .dashboard-macro-grid > div { padding: 8px !important; min-height: 66px; } body.pf-android-home .dashboard-macro-grid > div > strong { font-size: 15px; } body.pf-android-home .dashboard-macro-grid > div > small { font-size: 8px; } body.pf-android-home .recovery-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body.pf-android-home .recovery-metrics > div { padding: 7px !important; } } /* sehr schmale Geräte */ @media (max-width: 380px) { body.pf-android-home .dashboard-macro-grid > div > span { font-size: 8px; } body.pf-android-home .dashboard-macro-grid > div > strong { font-size: 14px; } body.pf-android-home .recovery-metrics > div span { font-size: 8px; } } /* PF_REST_CARDS_V3_START */ /* ========================================================== PEAK FORM WEB · ANDROID CARD SYSTEM V3 Gilt für alle Seiten AUSSER Home. Design-Master: Peak Form Android v0.13.36-dev KEINE: - Button-Entfernung - Umbenennung - Funktionsänderung - Navigationsänderung - Reihenfolgeänderung ========================================================== */ /* ========================================================== 1. NORMALE PF-KARTE Android: #091F2D → #061925 → #04131E Border #12384C Radius 17dp ========================================================== */ .app-shell:not(.dashboard-shell) .card { background: linear-gradient( 135deg, #091F2D 0%, #061925 52%, #04131E 100% ) !important; border: 1px solid #12384C !important; border-radius: 17px !important; box-shadow: none !important; padding: 14px !important; } /* Abstand zwischen Karten */ .app-shell:not(.dashboard-shell) .page-card, .app-shell:not(.dashboard-shell) .chart-card { margin-bottom: 12px !important; } /* ========================================================== 2. KARTENÜBERSCHRIFTEN Android PF.SectionTitle ========================================================== */ .app-shell:not(.dashboard-shell) .card-head { margin-bottom: 10px !important; color: #22E5D3 !important; font-size: 12px !important; line-height: 1.25; font-weight: 800 !important; letter-spacing: .09em; } .app-shell:not(.dashboard-shell) .card-head small { color: #6F8DA1 !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0; } /* ========================================================== 3. INNERE METRIK-KARTEN Android pf_metric_tile ========================================================== */ .app-shell:not(.dashboard-shell) .metric-row > div, .app-shell:not(.dashboard-shell) .macro-grid > div, .app-shell:not(.dashboard-shell) .compact-metrics-grid > div, .app-shell:not(.dashboard-shell) .training-summary > div, .app-shell:not(.dashboard-shell) .week-stat-pair > div, .app-shell:not(.dashboard-shell) .activity-hero-grid > div, .app-shell:not(.dashboard-shell) .provenance-grid > div, .app-shell:not(.dashboard-shell) .macro-derived-grid > div { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; border-radius: 13px !important; box-shadow: none !important; padding: 10px !important; } /* Labels */ .app-shell:not(.dashboard-shell) .compact-metrics-grid span, .app-shell:not(.dashboard-shell) .metric-row span, .app-shell:not(.dashboard-shell) .macro-grid span, .app-shell:not(.dashboard-shell) .week-stat-pair span { color: #A8C0D1; } /* Werte */ .app-shell:not(.dashboard-shell) .compact-metrics-grid strong, .app-shell:not(.dashboard-shell) .metric-row strong, .app-shell:not(.dashboard-shell) .macro-grid strong, .app-shell:not(.dashboard-shell) .week-stat-pair strong { color: #F8FBFD; } /* ========================================================== 4. KÖRPER ========================================================== */ /* AKTUELL = Android Hero Card */ .body-page .body-current-card { background: linear-gradient( 135deg, #164A63 0%, #0D3348 50%, #061D2B 100% ) !important; border-color: #2D728C !important; } /* großes Gewicht */ .body-page .body-current-weight strong { color: #F8FBFD; font-family: "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", sans-serif; font-size: 38px; line-height: 1; font-weight: 800; } .body-page .body-current-weight span { color: #A8C0D1; } /* Aktuelle Körpermetriken */ .body-page .body-current-metrics > div:nth-child(1) { background: linear-gradient( 135deg, #0E3947, #071F2D ) !important; border-color: #1C6170 !important; } .body-page .body-current-metrics > div:nth-child(2) { background: linear-gradient( 135deg, #10362F, #071F27 ) !important; border-color: #246956 !important; } .body-page .body-current-metrics > div:nth-child(3) { background: linear-gradient( 135deg, #13334B, #081F30 ) !important; border-color: #225B7B !important; } /* Umfangs- und SECA-Werte */ .body-page .body-measure-grid > div:nth-child(4n+1), .body-page .seca-metrics-grid > div:nth-child(4n+1) { background: linear-gradient( 135deg, #0E3947, #071F2D ) !important; border-color: #1C6170 !important; } .body-page .body-measure-grid > div:nth-child(4n+2), .body-page .seca-metrics-grid > div:nth-child(4n+2) { background: linear-gradient( 135deg, #13334B, #081F30 ) !important; border-color: #225B7B !important; } .body-page .body-measure-grid > div:nth-child(4n+3), .body-page .seca-metrics-grid > div:nth-child(4n+3) { background: linear-gradient( 135deg, #10362F, #071F27 ) !important; border-color: #246956 !important; } .body-page .body-measure-grid > div:nth-child(4n), .body-page .seca-metrics-grid > div:nth-child(4n) { background: linear-gradient( 135deg, #282447, #0D1E2C ) !important; border-color: #4D4673 !important; } /* Fotos */ .body-page .photo-card { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; border-radius: 13px !important; box-shadow: none !important; } /* ========================================================== 5. ERNÄHRUNG ========================================================== */ /* Tagesbudget = Hero Card */ .nutrition-page .nutrition-day-card { background: linear-gradient( 135deg, #164A63 0%, #0D3348 50%, #061D2B 100% ) !important; border-color: #2D728C !important; } /* kcal */ .nutrition-page .nutrition-page-kcal strong { color: #F8FBFD; font-family: "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", sans-serif; font-size: 26px; font-weight: 800; } /* Progress */ .nutrition-page .nutrition-progress { height: 6px !important; border: 0 !important; border-radius: 999px; background: #123248 !important; } .nutrition-page .nutrition-progress span { background: linear-gradient( 90deg, #22E5D3, #6AFFF1 ) !important; } /* ---------------------------------- Live-Makros ---------------------------------- */ .nutrition-page .nutrition-live-macros > div { border-radius: 13px !important; padding: 10px !important; box-shadow: none !important; } /* Protein */ .nutrition-page .nutrition-live-macros > div:nth-child(1) { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; } /* Fett */ .nutrition-page .nutrition-live-macros > div:nth-child(2) { background: linear-gradient( 135deg, #382617, #111D24 ) !important; border: 1px solid #81521F !important; } /* Ballaststoffe */ .nutrition-page .nutrition-live-macros > div:nth-child(3) { background: linear-gradient( 135deg, #10362F, #071F27 ) !important; border: 1px solid #246956 !important; } /* Kohlenhydrate */ .nutrition-page .nutrition-live-macros > div:nth-child(4) { background: linear-gradient( 135deg, #13334B, #081F30 ) !important; border: 1px solid #225B7B !important; } /* Mahlzeiten */ .nutrition-page .meal-compact-card { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; } /* Schnellrezepte */ .nutrition-page .template-quick-button { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; border-radius: 13px !important; box-shadow: none !important; } /* Tagesabschluss – Android Insight Card */ .nutrition-page .final-card { background: linear-gradient( 90deg, #0D3038, #092630, #061C29 ) !important; border: 1px solid #287F78 !important; } /* Ernährungswoche */ .nutrition-page .nutrition-week-card { background: #04141E !important; border-color: #0E3041 !important; } /* ========================================================== 6. TRAINING ========================================================== */ /* Neueste Einheit = Android Hero Card */ .training-page .training-session-card.latest-session-card { background: linear-gradient( 135deg, #164A63 0%, #0D3348 50%, #061D2B 100% ) !important; border-color: #2D728C !important; } /* ältere Einheiten */ .training-page .training-session-card:not(.latest-session-card) { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; } /* Session-Metriken: Dauer / HF / etc. */ .training-page .training-session-metrics > div:nth-child(3n+1) { background: linear-gradient( 135deg, #0E3947, #071F2D ) !important; border-color: #1C6170 !important; } .training-page .training-session-metrics > div:nth-child(3n+2) { background: linear-gradient( 135deg, #13334B, #081F30 ) !important; border-color: #225B7B !important; } .training-page .training-session-metrics > div:nth-child(3n) { background: linear-gradient( 135deg, #382617, #111D24 ) !important; border-color: #81521F !important; } /* Trainingswoche */ .training-page .training-week-card { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; } .training-page .week-stat-pair > div:first-child { background: linear-gradient( 135deg, #0E3947, #071F2D ) !important; border-color: #1C6170 !important; } .training-page .week-stat-pair > div:last-child { background: linear-gradient( 135deg, #13334B, #081F30 ) !important; border-color: #225B7B !important; } /* Trainingspläne */ .training-page .plan-launch { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; border-radius: 13px !important; box-shadow: none !important; } /* ========================================================== 7. VERLAUF ========================================================== */ /* Übersicht oben */ .progress-page .progress-overview-grid .card { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; border: 1px solid #12384C !important; } /* Chart-Karten */ .progress-page .chart-card, .progress-page .exercise-progress-card { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; border: 1px solid #12384C !important; } /* Android Chart Panel */ .progress-page .chart-canvas { background: linear-gradient( 180deg, #051824, #020E16 ) !important; border: 1px solid #0D3042; border-radius: 13px; padding: 4px; } /* Übungsauswahl */ .progress-page .exercise-progress-toolbar { background: transparent; } /* ========================================================== 8. SYSTEM Android My Data / Backup Stil. Funktionen und Bezeichnungen bleiben exakt erhalten. ========================================================== */ .system-page .system-action-card { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; border: 1px solid #12384C !important; border-radius: 17px !important; box-shadow: none !important; } /* Primäre bestehende Systemkarte */ .system-page .system-action-card.primary { background: linear-gradient( 135deg, #0E3947, #071F2D ) !important; border-color: #1C6170 !important; } /* bestehende Secondary-Karte */ .system-page .system-action-card.secondary { background: linear-gradient( 135deg, #382617, #111D24 ) !important; border-color: #81521F !important; } /* System Statuskarten */ .system-page .system-status-grid .card { background: #04141E !important; border-color: #0E3041 !important; } /* aufklappbare Bereiche */ .system-page .system-disclosure { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; } /* Speicherprinzip */ .system-page .system-note { background: linear-gradient( 90deg, #0D3038, #092630, #061C29 ) !important; border: 1px solid #287F78 !important; border-radius: 13px; } /* ========================================================== 9. AKTIVITÄT / SONSTIGE WEB-SEITEN Alle vorhandenen Karten bekommen PF-Grunddesign. Keine Strukturänderungen. ========================================================== */ .app-shell:not(.dashboard-shell) .activity-history-row, .app-shell:not(.dashboard-shell) .daily-driver-row, .app-shell:not(.dashboard-shell) .audit-row, .app-shell:not(.dashboard-shell) .food-editor, .app-shell:not(.dashboard-shell) .exercise-editor, .app-shell:not(.dashboard-shell) .recipe-item-editor { background: linear-gradient( 135deg, #081E2B, #051722 ) !important; border: 1px solid #12384A !important; border-radius: 13px !important; box-shadow: none !important; } /* ========================================================== 10. FORMULAR-KARTEN Unterseiten behalten ALLE vorhandenen Felder und Buttons. Nur Oberfläche. ========================================================== */ .app-shell:not(.dashboard-shell) .form-card { background: linear-gradient( 135deg, #091F2D, #061925, #04131E ) !important; border: 1px solid #12384C !important; border-radius: 17px !important; box-shadow: none !important; } /* ========================================================== 11. TABELLEN INNERHALB DER KARTEN ========================================================== */ .app-shell:not(.dashboard-shell) .data-table th { color: #22E5D3 !important; } .app-shell:not(.dashboard-shell) .data-table th, .app-shell:not(.dashboard-shell) .data-table td { border-bottom-color: #123142 !important; } /* ========================================================== 12. EINGABEFELDER Android pf_input_bg. Keine Feld-/Formularlogik geändert. ========================================================== */ .app-shell:not(.dashboard-shell) input, .app-shell:not(.dashboard-shell) select, .app-shell:not(.dashboard-shell) textarea { background: #071C2A !important; border: 1px solid #103449 !important; border-radius: 13px !important; color: #F8FBFD !important; box-shadow: none; } .app-shell:not(.dashboard-shell) input:focus, .app-shell:not(.dashboard-shell) select:focus, .app-shell:not(.dashboard-shell) textarea:focus { background: #0A2A3B !important; border-color: #22E5D3 !important; box-shadow: 0 0 0 1px rgba(34, 229, 211, .20); } /* ========================================================== 13. MOBILE FEINSCHLIFF ========================================================== */ @media (max-width: 560px) { .app-shell:not(.dashboard-shell) .card { padding: 14px !important; } .app-shell:not(.dashboard-shell) .compact-metrics-grid { gap: 8px; } .body-page .body-current-weight strong { font-size: 34px; } .nutrition-page .nutrition-live-macros { gap: 8px !important; } .progress-page .chart-canvas { border-radius: 13px; } } /* PF_REST_CARDS_V3_END */ /* PF_ANDROID_TYPO_BUTTONS_V4_START */ /* ========================================================== PEAK FORM WEB · ANDROID TYPOGRAFIE + BUTTONS Design-Master: Peak Form Android v0.13.36-dev BESTEHENDE TEXTE BLEIBEN EXAKT UNVERÄNDERT. KEINE LINKS/FUNKTIONEN/REIHENFOLGEN WERDEN VERÄNDERT. Android bestätigt: ScreenTitle 30sp BrandKicker 13sp Motto 12sp SectionTitle 12sp Primary Button 50dp / 15sp Secondary Button 44dp / 14sp Ghost Button 38dp / 13sp Radius 13dp ========================================================== */ /* ========================================================== SEITEN-HEADER Home ausdrücklich ausgeschlossen. ========================================================== */ .app-shell:not(.dashboard-shell) .hero { padding: 10px 0 20px !important; } /* PEAK FORM 2.0 */ .app-shell:not(.dashboard-shell) .hero .eyebrow { color: #22E5D3 !important; font-family: sans-serif; font-size: 13px !important; line-height: 1.25; font-weight: 800 !important; letter-spacing: .18em !important; } /* Seitentitel: Körper Essen Training Verlauf System Aktivität usw. BEZEICHNUNGEN WERDEN NICHT VERÄNDERT. */ .app-shell:not(.dashboard-shell) .hero h1 { margin: 8px 0 6px !important; color: #F8FBFD !important; font-family: "sans-serif-condensed", "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", sans-serif !important; font-size: 30px !important; line-height: 1.02 !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; } /* vorhandener Untertitel / Motto */ .app-shell:not(.dashboard-shell) .hero .motto { color: #FF9D24 !important; font-family: sans-serif; font-size: 12px !important; line-height: 1.25; font-weight: 800 !important; font-style: italic; letter-spacing: .05em !important; } /* ========================================================== BEREICHSÜBERSCHRIFTEN KEIN TEXT WIRD GEÄNDERT. ========================================================== */ .app-shell:not(.dashboard-shell) .section-head, .app-shell:not(.dashboard-shell) .weekly-section-title { border-color: #103449; } .app-shell:not(.dashboard-shell) .section-head h2, .app-shell:not(.dashboard-shell) .section-head strong, .app-shell:not(.dashboard-shell) .weekly-section-title { color: #22E5D3 !important; font-family: sans-serif; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .09em !important; } /* Kartenüberschriften aus vorherigem Patch absichern */ .app-shell:not(.dashboard-shell) .card-head { color: #22E5D3 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .09em !important; } /* ========================================================== PRIMARY BUTTON Android PF.Button.Primary: Accent #22E5D3 Text #03101A 50dp 15sp Radius 13dp ========================================================== */ .app-shell:not(.dashboard-shell) .action-button:not(.secondary):not(.ghost), .app-shell:not(.dashboard-shell) .button:not(.ghost):not(.danger) { display: inline-flex; align-items: center; justify-content: center; min-height: 50px !important; padding: 12px 18px !important; border: 0 !important; border-radius: 13px !important; background: #22E5D3 !important; color: #03101A !important; font-family: sans-serif; font-size: 15px !important; font-weight: 800 !important; line-height: 1.15; text-decoration: none; box-shadow: none !important; text-transform: none !important; } /* Hover / Touch */ .app-shell:not(.dashboard-shell) .action-button:not(.secondary):not(.ghost):hover, .app-shell:not(.dashboard-shell) .button:not(.ghost):not(.danger):hover { background: #6AFFF1 !important; color: #03101A !important; } /* ========================================================== SECONDARY BUTTON Android PF.Button.Secondary: #0B3438 Accent Text 44dp 14sp ========================================================== */ .app-shell:not(.dashboard-shell) .action-button.secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px !important; padding: 10px 16px !important; border: 0 !important; border-radius: 13px !important; background: #0B3438 !important; color: #22E5D3 !important; font-family: sans-serif; font-size: 14px !important; font-weight: 800 !important; line-height: 1.15; text-decoration: none; box-shadow: none !important; text-transform: none !important; } .app-shell:not(.dashboard-shell) .action-button.secondary:hover { background: #0D3342 !important; color: #22E5D3 !important; } /* ========================================================== GHOST BUTTON Android PF.Button.Ghost: transparent Accent Text 38dp 13sp ========================================================== */ .app-shell:not(.dashboard-shell) .action-button.ghost, .app-shell:not(.dashboard-shell) .button.ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 38px !important; padding: 8px 13px !important; border: 1px solid rgba(34,229,211,.22) !important; border-radius: 13px !important; background: transparent !important; color: #22E5D3 !important; font-family: sans-serif; font-size: 13px !important; font-weight: 800 !important; line-height: 1.15; text-decoration: none; box-shadow: none !important; text-transform: none !important; } .app-shell:not(.dashboard-shell) .action-button.ghost:hover, .app-shell:not(.dashboard-shell) .button.ghost:hover { background: rgba(34,229,211,.06) !important; border-color: rgba(34,229,211,.40) !important; } /* ========================================================== DANGER BUTTON Android PF.Button.Danger: Surface Orange + Red ========================================================== */ .app-shell:not(.dashboard-shell) .button.danger, .app-shell:not(.dashboard-shell) .danger-action { border: 1px solid rgba(255,99,119,.26) !important; border-radius: 13px !important; background: #302417 !important; color: #FF6377 !important; font-family: sans-serif; font-weight: 800 !important; box-shadow: none !important; text-transform: none !important; } /* ========================================================== KLEINE ACTION-LINKS Texte bleiben: Bearbeiten Verwalten Ansehen Ziele usw. ========================================================== */ .app-shell:not(.dashboard-shell) .table-action { color: #22E5D3 !important; font-family: sans-serif; font-size: 13px !important; font-weight: 800 !important; text-decoration: none !important; text-transform: none !important; } .app-shell:not(.dashboard-shell) .table-action:hover { color: #6AFFF1 !important; } /* bestehende Link-Buttons */ .app-shell:not(.dashboard-shell) .link-button { color: #22E5D3; font-family: sans-serif; font-size: 13px; font-weight: 800; text-decoration: none; } /* ========================================================== FORMULAR-ACTIONS Nur Geometrie – vorhandene Buttons bleiben erhalten. ========================================================== */ .app-shell:not(.dashboard-shell) .form-actions { gap: 10px !important; margin-top: 16px !important; } /* ========================================================== QUICK ACTIONS Keine Buttons entfernen / umordnen. ========================================================== */ .app-shell:not(.dashboard-shell) .quick-actions { gap: 8px !important; margin-bottom: 16px !important; flex-wrap: wrap; } /* ========================================================== DISABLED Android pf_disabled Verhalten. ========================================================== */ .app-shell:not(.dashboard-shell) button:disabled, .app-shell:not(.dashboard-shell) .button:disabled { opacity: .45 !important; cursor: not-allowed !important; } /* ========================================================== MOBILE Keine Textänderung. Keine Button-Entfernung. ========================================================== */ @media (max-width: 560px) { .app-shell:not(.dashboard-shell) .hero h1 { font-size: 30px !important; } /* * Mehrere vorhandene Aktionen dürfen weiterhin umbrechen, * werden aber NICHT entfernt. */ .app-shell:not(.dashboard-shell) .quick-actions { display: grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 8px !important; } .app-shell:not(.dashboard-shell) .quick-actions .action-button { width: 100%; min-width: 0; } } /* sehr schmale Geräte */ @media (max-width: 380px) { .app-shell:not(.dashboard-shell) .hero h1 { font-size: 28px !important; } } /* PF_ANDROID_TYPO_BUTTONS_V4_END */ /* ========================================================== DASHBOARD SPACING ALIGNMENT Ziel: Dashboard verwendet dieselben Außenabstände wie die übrigen Peak-Form-Seiten. Keine Inhalte / Buttons / Funktionen verändert. ========================================================== */ /* gleiche Seitenränder wie Körper / Essen / Training / Verlauf */ body.pf-android-home .dashboard-shell { padding-left: 14px !important; padding-right: 14px !important; } /* Header vertikal an die übrigen Seiten angleichen */ body.pf-android-home .dashboard-hero { padding-top: 10px !important; padding-bottom: 20px !important; } /* Kartenabstand entspricht den übrigen Seiten */ body.pf-android-home .dashboard-flow { gap: 12px !important; } /* Gewicht + Aktivität bleiben als zusammengehöriges Paar etwas kompakter, aber nicht gequetscht */ body.pf-android-home .dashboard-duo { gap: 10px !important; } /* bestehender Überblickstitel: sauberer Übergang Header → Karten */ body.pf-android-home .pf-home-overview-title { margin-top: 12px !important; margin-bottom: 8px !important; } /* sehr kleine Geräte ebenfalls identischer Seitenrand */ @media (max-width: 380px) { body.pf-android-home .dashboard-shell { padding-left: 14px !important; padding-right: 14px !important; } } /* ========================================================== HOME HERO → MOTTO SPACING Andere PF-Seiten: Titel → Motto = 6px Home wird daran angeglichen. Keine Texte / Funktionen verändert. ========================================================== */ body.pf-android-home .dashboard-hero h1 { margin-bottom: 6px !important; } body.pf-android-home .dashboard-hero-meta { margin-top: 0 !important; } /* ========================================================== SEITENTITEL = DASHBOARD-HERO-GRÖSSE Dashboard mobil: 23px sehr schmal: 22px Keine Texte / Funktionen verändert. ========================================================== */ @media (max-width: 560px) { .app-shell:not(.dashboard-shell) .hero h1 { font-size: 23px !important; line-height: 1.04 !important; } } @media (max-width: 380px) { .app-shell:not(.dashboard-shell) .hero h1 { font-size: 22px !important; } } /* Desktop moderat größer, analog zum Dashboard */ @media (min-width: 720px) { .app-shell:not(.dashboard-shell) .hero h1 { font-size: 31px !important; } }