progresspulse-pwa/src/index.css

A modern PWA for tracking progress and achieving goals with iPhone-style design

@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@100;200;300;400;500;600;700;800;900&family=SF+Pro+Text:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Ensure full width pages use complete screen width */
.w-full {
  width: 100% !important;
  max-width: none !important;
}

/* Mobile: Prevent horizontal overflow and ensure proper scrolling */
@media (max-width: 768px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }
  
  /* Ensure all content fits within viewport */
  * {
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  /* Fix specific components that might overflow */
  .grid {
    max-width: 100%;
    overflow-x: auto;
  }
  
  .card {
    max-width: calc(100vw - 2rem);
  }
  
  table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    white-space: nowrap;
  }
  
  /* Ensure dialogs fit on mobile */
  [role="dialog"] {
    max-width: 95vw;
    margin: 0.5rem auto;
  }
  
  /* Fix for mobile navigation spacing */
  main {
    padding-bottom: 5rem; /* Space for mobile nav */
  }
  
  /* Mobile button sizing */
  button {
    font-size: 0.875rem; /* 14px */
    padding: 0.5rem 1rem;
  }
  
  /* Ensure buttons don't stretch on mobile */
  .flex button {
    flex-shrink: 0;
  }
  
  /* Mobile-specific adjustments */
  .content-section {
    @apply px-4 py-3;
  }
  
  /* Ensure proper text sizing on mobile */
  .content-section h1 {
    @apply text-2xl;
  }
}



:root {
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.47;
  font-weight: 400;
  letter-spacing: -0.022em;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #000000;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

@layer base {
  :root {
    /* iPhone-style Light Mode Colors */
    --background: 0 0% 98%;
    --foreground: 0 0% 7%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 7%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 7%;
    --primary: 211 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 0 0% 7%;
    --muted: 210 40% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 210 40% 96%;
    --accent-foreground: 0 0% 7%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 211 100% 50%;
    --chart-1: 211 100% 50%;
    --chart-2: 142 76% 36%;
    --chart-3: 346 87% 43%;
    --chart-4: 262 83% 58%;
    --chart-5: 47 96% 53%;
    --radius: 0.75rem;
    
    /* iPhone-style spacing and sizing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* iPhone-style typography scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    
    /* iPhone-style shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* iPhone-style blur effects */
    --blur-sm: 4px;
    --blur: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
  }
  
  .dark {
    /* iPhone-style Dark Mode Colors */
    --background: 0 0% 6%;
    --foreground: 0 0% 98%;
    --card: 0 0% 8%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 98%;
    --primary: 211 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 217 33% 17%;
    --secondary-foreground: 0 0% 98%;
    --muted: 217 33% 17%;
    --muted-foreground: 0 0% 65%;
    --accent: 217 33% 17%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 217 33% 17%;
    --input: 217 33% 17%;
    --ring: 211 100% 50%;
    --chart-1: 211 100% 50%;
    --chart-2: 142 76% 36%;
    --chart-3: 346 87% 43%;
    --chart-4: 262 83% 58%;
    --chart-5: 47 96% 53%;
    
    /* Dark mode shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  html {
    height: 100%;
    overflow-x: hidden;
  }
  
  body {
    @apply bg-background text-foreground;
    margin: 0;
    padding: 0;
    min-width: 320px;
    height: 100%;
    overflow-x: hidden;
  }
  
  #root {
    width: 100%;
    height: 100%;
    min-height: 100vh;
  }
}

@layer components {
  /* iPhone-style Typography */
  .text-ios-title {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 2.125rem;
    line-height: 1.2;
    letter-spacing: -0.03em;
    @apply text-foreground;
  }
  
  .text-ios-headline {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    @apply text-foreground;
  }
  
  .text-ios-body {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.47;
    letter-spacing: -0.022em;
    @apply text-foreground;
  }
  
  .text-ios-caption {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.33;
    letter-spacing: -0.01em;
    @apply text-muted-foreground;
  }
  
  /* iPhone-style Cards */
  .card-ios {
    @apply bg-card/80 backdrop-blur-xl border border-border/50 rounded-2xl shadow-lg;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .card-ios:hover {
    @apply shadow-xl scale-[1.02];
    transform: translateY(-2px) scale(1.02);
  }
  
  .card-ios-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    @apply rounded-2xl shadow-2xl;
  }
  
  /* iPhone-style Buttons */
  .btn-ios-primary {
    @apply bg-primary text-primary-foreground font-semibold rounded-2xl px-6 py-3;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -0.022em;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.3);
  }
  
  .btn-ios-primary:hover {
    @apply scale-105;
    box-shadow: 0 6px 20px 0 rgba(59, 130, 246, 0.4);
  }
  
  .btn-ios-primary:active {
    @apply scale-95;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .btn-ios-secondary {
    @apply bg-secondary text-secondary-foreground font-medium rounded-2xl px-6 py-3;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .btn-ios-secondary:hover {
    @apply scale-105 bg-secondary/80;
  }
  
  /* iPhone-style Animations */
  .animate-ios-fade-in {
    animation: iosFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  
  .animate-ios-slide-up {
    animation: iosSlideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  
  .animate-ios-bounce {
    animation: iosBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  }
  
  .animate-ios-scale {
    animation: iosScale 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  
  /* iPhone-style Layout */
  .container-ios {
    @apply w-full max-w-sm mx-auto px-4;
  }
  
  .page-ios {
    @apply w-full h-full min-h-screen bg-background;
    background: linear-gradient(135deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
  }
  
  .content-section-ios {
    @apply px-6 py-4 space-y-4;
  }
  
  /* iPhone-style Navigation */
  .nav-ios {
    @apply bg-card/80 backdrop-blur-xl border-t border-border/50;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .nav-item-ios {
    @apply flex flex-col items-center justify-center p-2 rounded-xl;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .nav-item-ios:hover {
    @apply bg-primary/10 scale-110;
  }
  
  .nav-item-ios.active {
    @apply bg-primary/20 text-primary;
  }
  
  /* iPhone-style Form Elements */
  .input-ios {
    @apply bg-card border border-border/50 rounded-2xl px-4 py-3;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .input-ios:focus {
    @apply border-primary/50 ring-2 ring-primary/20 scale-[1.02];
  }
  
  /* iPhone-style Progress */
  .progress-ios {
    @apply bg-secondary rounded-full overflow-hidden;
    height: 8px;
  }
  
  .progress-ios-bar {
    @apply bg-gradient-to-r from-primary to-primary/80 h-full rounded-full;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* iPhone-style Shadows and Effects */
  .shadow-ios {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .shadow-ios-lg {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  }
  
  .blur-ios {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  /* iPhone-style Grid */
  .grid-ios {
    @apply grid gap-4;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  /* iPhone-style Status Elements */
  .status-ios-success {
    @apply bg-green-500/10 text-green-600 border border-green-500/20 rounded-2xl px-3 py-1;
  }
  
  .status-ios-warning {
    @apply bg-yellow-500/10 text-yellow-600 border border-yellow-500/20 rounded-2xl px-3 py-1;
  }
  
  .status-ios-error {
    @apply bg-red-500/10 text-red-600 border border-red-500/20 rounded-2xl px-3 py-1;
  }
}

@layer utilities {
  /* Responsive spacing utilities */
  .p-responsive {
    @apply p-4 sm:p-6 lg:p-8;
  }
  
  .m-responsive {
    @apply m-4 sm:m-6 lg:m-8;
  }
  
  /* Responsive width utilities */
  .w-responsive {
    @apply w-full max-w-full;
  }
  
  /* Safe area utilities for mobile */
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }
  
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .safe-left {
    padding-left: env(safe-area-inset-left);
  }
  
  .safe-right {
    padding-right: env(safe-area-inset-right);
  }
}

/* iPhone-style Keyframe Animations */
@keyframes iosFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes iosSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes iosBounce {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  70% {
    transform: scale(0.95) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes iosScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes iosPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes iosShimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* iPhone-style Haptic Feedback Simulation */
@keyframes iosHaptic {
  0% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

.animate-ios-haptic {
  animation: iosHaptic 0.1s ease-in-out;
}

/* iPhone-style Loading States */
.loading-ios {
  background: linear-gradient(90deg, 
    hsl(var(--muted)) 25%, 
    hsl(var(--muted-foreground) / 0.1) 50%, 
    hsl(var(--muted)) 75%
  );
  background-size: 200px 100%;
  animation: iosShimmer 1.5s infinite;
}

/* iPhone-style Scroll Behavior */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* iPhone-style Selection */
::selection {
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary-foreground));
}

::-moz-selection {
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary-foreground));
}

/* iPhone-style Scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* iPhone-style Focus States */
.focus-ios:focus {
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2);
  border-color: hsl(var(--primary));
}

/* iPhone-style Disabled States */
.disabled-ios {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.5);
}