thumbcode/global.css at main · jbcom/thumbcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
@import "tailwindcss";

/* Load existing theme config (colors, fonts, shadows, border-radius) */
@config "./tailwind.config.ts";

/* ============================================
   ThumbCode Global Styles — Native Mobile Feel
   Capacitor app targeting iOS & Android stores
   ============================================ */

/* Dark mode via class strategy (Tailwind v4) */
@custom-variant dark (&:where(.dark *));

@layer base {
  /* Font smoothing — antialiased rendering */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Touch behavior — prevent 300ms tap delay, remove highlight */
  html {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Overscroll — prevent pull-to-refresh and elastic bounce */
  body {
    overscroll-behavior-y: contain;
  }

  /* Smooth scrolling */
  * {
    scroll-behavior: smooth;
  }

  /* Selection color — brand teal */
  ::selection {
    background-color: rgba(13, 148, 136, 0.3);
    color: white;
  }

  /* Scrollbar hiding for app-like feel (content remains scrollable) */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Focus ring — branded coral */
  :focus-visible {
    outline: 2px solid #ff7059;
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  /* Tap feedback — CSS active state for interactive elements */
  .tap-feedback {
    transition:
      transform 0.1s ease,
      opacity 0.1s ease;
  }
  .tap-feedback:active {
    transform: scale(0.97);
    opacity: 0.85;
  }

  /* Glassmorphism utility */
  .glass {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    will-change: backdrop-filter;
  }

  /* Page transition */
  @keyframes fadeSlideUp {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-page-enter {
    animation: fadeSlideUp 0.25s ease-out;
  }

  /* Safe area padding for notch / home indicator */
  .safe-bottom {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
  .safe-top {
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }
}

/* Organic design system custom utilities */
@layer utilities {
  .min-h-dvh {
    min-height: 100dvh;
  }

  .organic-card {
    border-radius: 1rem 0.75rem 1.25rem 0.5rem;
  }

  .organic-button {
    border-radius: 0.5rem 0.75rem 0.625rem 0.875rem;
  }

  .organic-badge {
    border-radius: 0.375rem 0.5rem 0.625rem 0.25rem;
  }

  .organic-input {
    border-radius: 0.5rem 0.625rem 0.5rem 0.75rem;
  }
}