| |
| :root { |
| |
| --md-primary: #1A73E8; |
| --md-primary-dark: #1557B0; |
| --md-primary-light: #4285F4; |
| --md-surface: #FFFFFF; |
| --md-background: #F8F9FA; |
| --md-on-surface: #202124; |
| --md-on-surface-variant: #5F6368; |
| --md-outline: #DADCE0; |
| --md-success: #1E8E3E; |
| --md-warning: #F9AB00; |
| --md-error: #D93025; |
| |
| |
| --md-elevation-0: none; |
| --md-elevation-1: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); |
| --md-elevation-2: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15); |
| --md-elevation-3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3); |
| --md-elevation-4: 0 6px 10px 4px rgba(60,64,67,.15), 0 2px 3px rgba(60,64,67,.3); |
| |
| |
| --spacing-xs: 4px; |
| --spacing-sm: 8px; |
| --spacing-md: 16px; |
| --spacing-lg: 24px; |
| --spacing-xl: 32px; |
| --spacing-2xl: 48px; |
| |
| |
| --radius-sm: 4px; |
| --radius-md: 8px; |
| --radius-lg: 12px; |
| --radius-xl: 16px; |
| --radius-full: 9999px; |
| |
| |
| --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); |
| --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); |
| --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); |
| |
| |
| --font-sans: 'Inter', 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif; |
| } |
|
|
| |
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| } |
|
|
| body, html, [class*="css"] { |
| font-family: var(--font-sans); |
| color: var(--md-on-surface); |
| background-color: var(--md-background); |
| } |
|
|
| |
| .stButton > button { |
| background: var(--md-primary) !important; |
| color: white !important; |
| border: none !important; |
| border-radius: var(--radius-md) !important; |
| padding: 10px 24px !important; |
| font-weight: 500 !important; |
| font-size: 14px !important; |
| letter-spacing: 0.25px !important; |
| box-shadow: var(--md-elevation-2) !important; |
| transition: all var(--transition-fast) !important; |
| min-height: 44px !important; |
| } |
|
|
| .stButton > button:hover { |
| background: var(--md-primary-dark) !important; |
| box-shadow: var(--md-elevation-3) !important; |
| transform: translateY(-1px); |
| } |
|
|
| .stButton > button:active { |
| transform: translateY(0); |
| box-shadow: var(--md-elevation-1) !important; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .stButton > button { |
| min-height: 48px !important; |
| padding: 12px 24px !important; |
| font-size: 16px !important; |
| } |
| |
| body { |
| font-size: 16px; |
| } |
| } |
|
|
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
|
|
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes slideInRight { |
| from { |
| transform: translateX(20px); |
| opacity: 0; |
| } |
| to { |
| transform: translateX(0); |
| opacity: 1; |
| } |
| } |
|
|
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--md-background); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--md-outline); |
| border-radius: var(--radius-full); |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--md-on-surface-variant); |
| } |
|
|
| |
| h1, h2, h3, h4, h5, h6 { |
| font-weight: 500; |
| color: var(--md-on-surface); |
| } |
|
|
| h1 { font-size: 32px; line-height: 40px; } |
| h2 { font-size: 24px; line-height: 32px; } |
| h3 { font-size: 20px; line-height: 28px; } |
|
|
| @media (max-width: 768px) { |
| h1 { font-size: 24px; line-height: 32px; } |
| h2 { font-size: 20px; line-height: 28px; } |
| h3 { font-size: 18px; line-height: 24px; } |
| } |
|
|
| |
| button, a, input, textarea, select, [role="button"] { |
| transition: all var(--transition-fast); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| button, a, [role="button"] { |
| min-height: 44px; |
| min-width: 44px; |
| } |
| } |
|
|
| |
| *:focus-visible { |
| outline: 2px solid var(--md-primary); |
| outline-offset: 2px; |
| } |
|
|
