mirror of
https://github.com/SamyRai/turash.git
synced 2025-12-26 23:01:33 +00:00
6347f42e20
- Remove nested git repository from bugulma/frontend/.git - Add all frontend files to main repository tracking - Convert from separate frontend/backend repos to unified monorepo - Preserve all frontend code and development history as tracked files - Eliminate nested repository complexity for simpler development workflow This creates a proper monorepo structure with frontend and backend coexisting in the same repository for easier development and deployment.
574 lines
13 KiB
CSS
574 lines
13 KiB
CSS
@import 'tailwindcss';
|
|
@plugin "@tailwindcss/forms";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
/* ============================================================================
|
|
Theme Configuration - Tailwind CSS 4.1
|
|
============================================================================ */
|
|
|
|
@theme {
|
|
/* Font families */
|
|
--font-sans: 'Inter', sans-serif;
|
|
--font-serif: 'Lora', serif;
|
|
|
|
/* Font sizes */
|
|
--font-size-2xs: 0.625rem;
|
|
--line-height-2xs: 0.875rem;
|
|
--font-size-xs: 0.75rem;
|
|
--line-height-xs: 1rem;
|
|
--font-size-sm: 0.875rem;
|
|
--line-height-sm: 1.25rem;
|
|
--font-size-base: 1rem;
|
|
--line-height-base: 1.5rem;
|
|
--font-size-lg: 1.125rem;
|
|
--line-height-lg: 1.75rem;
|
|
--font-size-xl: 1.25rem;
|
|
--line-height-xl: 1.75rem;
|
|
--font-size-2xl: 1.5rem;
|
|
--line-height-2xl: 2rem;
|
|
--font-size-3xl: 1.875rem;
|
|
--line-height-3xl: 2.25rem;
|
|
--font-size-4xl: 2.25rem;
|
|
--line-height-4xl: 2.5rem;
|
|
--font-size-5xl: 3rem;
|
|
--line-height-5xl: 1;
|
|
--font-size-6xl: 3.75rem;
|
|
--line-height-6xl: 1;
|
|
--font-size-7xl: 4.5rem;
|
|
--line-height-7xl: 1;
|
|
|
|
/* Colors - Light mode (Nature-inspired palette) */
|
|
--color-background: #f5f5e8;
|
|
--color-foreground: #1a2e0f;
|
|
--color-overlay: #0f1a08;
|
|
--color-shadow: #1a1a0f;
|
|
|
|
--color-card: #fefef9;
|
|
--color-card-foreground: #1a2e0f;
|
|
|
|
--color-popover: #fefef9;
|
|
--color-popover-foreground: #1a2e0f;
|
|
|
|
--color-primary: #2e7d32;
|
|
--color-primary-foreground: #f5f5e8;
|
|
|
|
--color-secondary: #6b8e23;
|
|
--color-secondary-foreground: #1a2e0f;
|
|
|
|
--color-muted: #e8e8d3;
|
|
--color-muted-foreground: #5a7a3a;
|
|
|
|
--color-accent: #4a90a4;
|
|
--color-accent-foreground: #1a2e0f;
|
|
|
|
--color-destructive: #c62828;
|
|
--color-destructive-foreground: #fefef9;
|
|
|
|
--color-border: #c8d5b9;
|
|
--color-input: #e0e8d8;
|
|
--color-ring: #2e7d32;
|
|
|
|
--color-sector-construction: #5d7c9a;
|
|
--color-sector-production: #2e7d32;
|
|
--color-sector-recreation: #d97757;
|
|
--color-sector-logistics: #7b68b8;
|
|
--color-success: #2e7d32;
|
|
--color-warning: #f57c00;
|
|
--color-warning-foreground: #2d5016;
|
|
|
|
/* Border radius */
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
--radius: 0.5rem;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(45, 45, 26, 0.06);
|
|
--shadow: 0 2px 4px rgba(45, 45, 26, 0.07), 0 1px 2px -1px rgba(45, 45, 26, 0.08);
|
|
--shadow-md: 0 4px 6px -1px rgba(45, 45, 26, 0.08), 0 2px 4px -2px rgba(45, 45, 26, 0.08);
|
|
--shadow-lg: 0 10px 15px -3px rgba(45, 45, 26, 0.08), 0 4px 6px -4px rgba(45, 45, 26, 0.09);
|
|
--shadow-xl: 0 20px 25px -5px rgba(45, 45, 26, 0.09), 0 8px 10px -6px rgba(45, 45, 26, 0.1);
|
|
--shadow-2xl: 0 25px 50px -12px rgba(45, 45, 26, 0.2);
|
|
|
|
/* Scale */
|
|
--scale-98: 0.98;
|
|
--scale-102: 1.02;
|
|
|
|
/* Animations */
|
|
--animate-spin-slow: spin 20s linear infinite;
|
|
--animate-spin-slower: spin 30s linear infinite;
|
|
--animate-spin-slow-reverse: spin-reverse 30s linear infinite;
|
|
}
|
|
|
|
@theme dark {
|
|
/* Colors - Dark mode (Nature-inspired palette) */
|
|
--color-background: #0f1a0f;
|
|
--color-foreground: #f0f0e3;
|
|
--color-overlay: #0a0f0a;
|
|
--color-shadow: #050805;
|
|
|
|
--color-card: #1a2e1a;
|
|
--color-card-foreground: #f0f0e3;
|
|
|
|
--color-popover: #1a2e1a;
|
|
--color-popover-foreground: #f0f0e3;
|
|
|
|
--color-primary: #4caf50;
|
|
--color-primary-foreground: #0f1a0f;
|
|
|
|
--color-secondary: #558b2f;
|
|
--color-secondary-foreground: #f0f0e3;
|
|
|
|
--color-muted: #2e3d2e;
|
|
--color-muted-foreground: #d4d4c4;
|
|
|
|
--color-accent: #5c9ead;
|
|
--color-accent-foreground: #f0f0e3;
|
|
|
|
--color-destructive: #ef5350;
|
|
--color-destructive-foreground: #f0f0e3;
|
|
|
|
--color-border: #3e4e3e;
|
|
--color-input: #2e3d2e;
|
|
--color-ring: #4caf50;
|
|
|
|
--color-sector-construction: #7a9fc4;
|
|
--color-sector-production: #4caf50;
|
|
--color-sector-recreation: #e68a6a;
|
|
--color-sector-logistics: #9b7fc8;
|
|
--color-success: #66bb6a;
|
|
--color-warning: #ffb74d;
|
|
--color-warning-foreground: #1a2e1a;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Base Layer - Backward Compatibility & Core Styles
|
|
============================================================================ */
|
|
|
|
@layer base {
|
|
/* Backward compatibility CSS variables (using hex colors) */
|
|
:root {
|
|
--background: #f5f5e8;
|
|
--foreground: #1a2e0f;
|
|
--overlay: #0f1a08;
|
|
--shadow-color: #1a1a0f;
|
|
|
|
--card: #fefef9;
|
|
--card-foreground: #1a2e0f;
|
|
|
|
--popover: #fefef9;
|
|
--popover-foreground: #1a2e0f;
|
|
|
|
--primary: #2e7d32;
|
|
--primary-foreground: #f5f5e8;
|
|
|
|
--secondary: #6b8e23;
|
|
--secondary-foreground: #1a2e0f;
|
|
|
|
--muted: #e8e8d3;
|
|
--muted-foreground: #5a7a3a;
|
|
|
|
--accent: #4a90a4;
|
|
--accent-foreground: #1a2e0f;
|
|
|
|
--destructive: #c62828;
|
|
--destructive-foreground: #fefef9;
|
|
|
|
--border: #c8d5b9;
|
|
--input: #e0e8d8;
|
|
--ring: #2e7d32;
|
|
|
|
--radius: 0.5rem;
|
|
--radius-sm: 0.25rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
|
|
--sector-construction: #5d7c9a;
|
|
--sector-production: #2e7d32;
|
|
--sector-recreation: #d97757;
|
|
--sector-logistics: #7b68b8;
|
|
--success: #2e7d32;
|
|
--warning: #f57c00;
|
|
--warning-foreground: #1a2e0f;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(45, 45, 26, 0.06);
|
|
--shadow: 0 2px 4px rgba(45, 45, 26, 0.07), 0 1px 2px -1px rgba(45, 45, 26, 0.08);
|
|
--shadow-md: 0 4px 6px -1px rgba(45, 45, 26, 0.08), 0 2px 4px -2px rgba(45, 45, 26, 0.08);
|
|
--shadow-lg: 0 10px 15px -3px rgba(45, 45, 26, 0.08), 0 4px 6px -4px rgba(45, 45, 26, 0.09);
|
|
--shadow-xl: 0 20px 25px -5px rgba(45, 45, 26, 0.09), 0 8px 10px -6px rgba(45, 45, 26, 0.1);
|
|
--shadow-2xl: 0 25px 50px -12px rgba(45, 45, 26, 0.2);
|
|
}
|
|
|
|
.dark {
|
|
--background: #0f1a0f;
|
|
--foreground: #f0f0e3;
|
|
--overlay: #0a0f0a;
|
|
--shadow-color: #050805;
|
|
|
|
--card: #1a2e1a;
|
|
--card-foreground: #f0f0e3;
|
|
|
|
--popover: #1a2e1a;
|
|
--popover-foreground: #f0f0e3;
|
|
|
|
--primary: #4caf50;
|
|
--primary-foreground: #0f1a0f;
|
|
|
|
--secondary: #558b2f;
|
|
--secondary-foreground: #f0f0e3;
|
|
|
|
--muted: #2e3d2e;
|
|
--muted-foreground: #d4d4c4;
|
|
|
|
--accent: #5c9ead;
|
|
--accent-foreground: #f0f0e3;
|
|
|
|
--destructive: #ef5350;
|
|
--destructive-foreground: #f0f0e3;
|
|
|
|
--border: #3e4e3e;
|
|
--input: #2e3d2e;
|
|
--ring: #4caf50;
|
|
|
|
--sector-construction: #7a9fc4;
|
|
--sector-production: #4caf50;
|
|
--sector-recreation: #e68a6a;
|
|
--sector-logistics: #9b7fc8;
|
|
--success: #66bb6a;
|
|
--warning: #ffb74d;
|
|
--warning-foreground: #0f1a0f;
|
|
}
|
|
|
|
/* Core HTML elements */
|
|
* {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
html {
|
|
position: relative;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 4rem; /* Account for sticky header */
|
|
scroll-snap-type: y proximity;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Typography - Headings inherit color from parent, only set font-weight */
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: 600;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Text elements inherit color from parent */
|
|
p,
|
|
span,
|
|
div,
|
|
li,
|
|
td,
|
|
th,
|
|
label,
|
|
small,
|
|
strong,
|
|
em,
|
|
b,
|
|
i,
|
|
dt,
|
|
dd {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Links */
|
|
a {
|
|
color: var(--primary);
|
|
transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--primary);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Form elements - inherit text color from parent */
|
|
input,
|
|
textarea,
|
|
select {
|
|
border-color: var(--border);
|
|
color: inherit;
|
|
background-color: var(--background);
|
|
}
|
|
|
|
/* Select options need explicit styling */
|
|
select option {
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
/* Interactive elements */
|
|
button {
|
|
color: inherit;
|
|
transition-property: color, background-color, border-color, opacity, box-shadow, transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 150ms;
|
|
}
|
|
|
|
/* SVG icons */
|
|
svg {
|
|
color: currentColor;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* Focus rings */
|
|
[class*='ring-ring']:focus-visible {
|
|
--tw-ring-color: var(--ring);
|
|
}
|
|
|
|
/* Scrollbar utilities */
|
|
.scrollbar-none::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-none {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
/* Hide Leaflet attribution */
|
|
.leaflet-control-attribution {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Respect user preference for reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Components Layer - Prose Typography
|
|
============================================================================ */
|
|
|
|
@layer components {
|
|
/* Typography plugin integration - enhance base prose styles */
|
|
.prose {
|
|
color: var(--foreground);
|
|
opacity: 0.85;
|
|
line-height: var(--line-height-lg);
|
|
max-width: 65ch;
|
|
}
|
|
|
|
/* Custom heading styles that work with typography plugin */
|
|
.prose h1,
|
|
.prose h2,
|
|
.prose h3 {
|
|
font-family: var(--font-serif);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose h1 {
|
|
font-size: var(--font-size-4xl);
|
|
line-height: var(--line-height-4xl);
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.prose h2 {
|
|
font-size: var(--font-size-2xl);
|
|
line-height: var(--line-height-2xl);
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
margin-top: 3rem;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.prose p {
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
}
|
|
|
|
.prose p.lead {
|
|
font-size: var(--font-size-xl);
|
|
line-height: var(--line-height-xl);
|
|
color: var(--foreground);
|
|
opacity: 0.7;
|
|
text-align: center;
|
|
}
|
|
|
|
.prose a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.prose a:hover {
|
|
opacity: 0.8;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
margin-top: 1.25em;
|
|
margin-bottom: 1.25em;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.prose ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.prose li {
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.prose strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose code {
|
|
background-color: var(--muted);
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.prose pre {
|
|
background-color: var(--muted);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left-color: var(--border);
|
|
color: var(--foreground);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Scroll snap utilities */
|
|
.scroll-snap-container {
|
|
scroll-snap-type: y proximity;
|
|
overflow-y: scroll;
|
|
height: 100vh;
|
|
}
|
|
|
|
.scroll-snap-align-start {
|
|
scroll-snap-align: start;
|
|
scroll-margin-top: 4rem; /* Account for sticky header */
|
|
}
|
|
|
|
.scroll-snap-align-center {
|
|
scroll-snap-align: center;
|
|
}
|
|
|
|
.scroll-snap-align-end {
|
|
scroll-snap-align: end;
|
|
}
|
|
|
|
/* Smooth scrolling for main content - scroll snap handled by individual sections */
|
|
main {
|
|
position: relative;
|
|
}
|
|
|
|
/* Ensure sections are properly spaced on mobile */
|
|
@media (max-width: 640px) {
|
|
.scroll-snap-align-start {
|
|
scroll-margin-top: 3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Leaflet Marker Cluster Styles
|
|
============================================================================ */
|
|
|
|
.marker-cluster {
|
|
background-color: hsl(var(--primary));
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: hsl(var(--primary-foreground));
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
border: 2px solid hsl(var(--background));
|
|
box-shadow: 0 2px 8px hsl(var(--color-shadow) / 0.3);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.marker-cluster:hover {
|
|
transform: scale(1.1);
|
|
box-shadow: 0 4px 12px hsl(var(--color-shadow) / 0.4);
|
|
}
|
|
|
|
.marker-cluster-small {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.marker-cluster-medium {
|
|
width: 50px;
|
|
height: 50px;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.marker-cluster-large {
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.marker-cluster div {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Custom organization marker styles */
|
|
.custom-organization-marker {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.custom-historical-marker {
|
|
background: transparent;
|
|
border: none;
|
|
}
|