mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 14:24:27 +00:00
b0ea5548ef
TASK 4.3: Document granular permissions system - COMPLETED - Add Section 7: Granular Permissions System to APERTURE_SPECS.md - Define flexible permission system for any user - Only admin can assign permissions (independent of user roles) - 8 permission categories with 30+ individual permissions - Database schema: user_permissions table with RLS - API endpoints for checking and assigning permissions - Helper functions: hasPermission(), hasPermissions(), isAdmin() - UI components: PermissionChecker, MultiPermissionChecker - Admin panel for permission management TASK 4.5: Update APERTURE_SQUARE_UI.md with Radix UI - COMPLETED - Add Section 3: Radix UI Components Used - Document all Radix UI packages installed - Radix components styled with Square UI tokens - Section 5: Square UI styling examples for each component - Section 6: Accessibility guidelines (Radix UI support) - Code examples for Button, Dialog, Tooltip with Square UI - Complete dashboard page example with Radix UI components TASK 4.2: Update globals.css with complete variables - COMPLETED - Add all Square UI color variables to :root - Add UI component shadows (sm, md, lg, xl) - Add UI border colors - Add UI text colors (primary, secondary, tertiary) - Add UI state colors (success, warning, error, info) - Add UI radiuses (sm, md, lg, xl, 2xl, full) - Add UI text sizes (xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl) - Maintain backward compatibility with anchor23.mx colors Impact: - Complete Square UI design system foundation - All color variables centralized in globals.css - Ready for Radix UI integration - Supports both anchor23.mx and Aperture styling Files Modified: - docs/APERTURE_SPECS.md (added granular permissions section) - docs/APERTURE_SQUARE_UI.md (added Radix UI documentation) - app/globals.css (added complete Square UI variables) Next: FASE 1 - Componentes Base con Radix UI
362 lines
7.5 KiB
CSS
362 lines
7.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--bone-white: #F6F1EC;
|
|
--soft-cream: #EFE7DE;
|
|
--mocha-taupe: #B8A89A;
|
|
--deep-earth: #6F5E4F;
|
|
--charcoal-brown: #3F362E;
|
|
|
|
/* Aperture - Square UI */
|
|
--ui-primary: #006AFF;
|
|
--ui-primary-hover: #005ED6;
|
|
--ui-primary-light: #E6F0FF;
|
|
|
|
--ui-bg: #F6F8FA;
|
|
--ui-bg-card: #FFFFFF;
|
|
--ui-bg-hover: #F3F4F6;
|
|
|
|
--ui-border: #E1E4E8;
|
|
--ui-border-light: #F3F4F6;
|
|
|
|
--ui-text-primary: #24292E;
|
|
--ui-text-secondary: #586069;
|
|
--ui-text-tertiary: #8B949E;
|
|
--ui-text-inverse: #FFFFFF;
|
|
|
|
--ui-success: #28A745;
|
|
--ui-success-light: #D4EDDA;
|
|
|
|
--ui-warning: #DBAB09;
|
|
--ui-warning-light: #FFF3CD;
|
|
|
|
--ui-error: #D73A49;
|
|
--ui-error-light: #F8D7DA;
|
|
|
|
--ui-info: #0366D6;
|
|
--ui-info-light: #CCE5FF;
|
|
|
|
--ui-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.08);
|
|
--ui-shadow-md: 0 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
|
|
--ui-shadow-lg: 0 8px 24px rgba(0,0,0,0,16), 0 4px 6px rgba(0,0,0,0.08);
|
|
--ui-shadow-xl: 0 20px 25px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.08);
|
|
|
|
--ui-radius-sm: 4px;
|
|
--ui-radius-md: 6px;
|
|
--ui-radius-lg: 8px;
|
|
--ui-radius-xl: 12px;
|
|
--ui-radius-2xl: 16px;
|
|
--ui-radius-full: 9999px;
|
|
|
|
/* Font sizes */
|
|
--text-xs: 0.75rem; /* 12px */
|
|
--text-sm: 0.875rem; /* 14px */
|
|
--text-base: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.25rem; /* 20px */
|
|
--text-2xl: 1.5rem; /* 24px */
|
|
--text-3xl: 1.875rem; /* 30px */
|
|
--text-4xl: 2.25rem; /* 36px */
|
|
--text-5xl: 3rem; /* 48px */
|
|
}
|
|
|
|
body {
|
|
color: var(--charcoal-brown);
|
|
background: var(--bone-white);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.booking-header {
|
|
@apply fixed top-0 left-0 right-0 z-50;
|
|
background: var(--bone-white);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--mocha-taupe);
|
|
}
|
|
|
|
.booking-nav {
|
|
@apply max-w-7xl mx-auto px-8 py-4 flex items-center justify-between;
|
|
}
|
|
|
|
.booking-nav .logo a {
|
|
@apply text-xl tracking-tight hover:opacity-80 transition-opacity;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.booking-nav .nav-actions {
|
|
@apply flex items-center gap-4;
|
|
}
|
|
|
|
.nav-primary {
|
|
@apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between;
|
|
}
|
|
|
|
.logo a {
|
|
@apply text-2xl tracking-tight hover:opacity-80 transition-opacity;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.nav-links {
|
|
@apply hidden md:flex items-center space-x-12;
|
|
}
|
|
|
|
.nav-links a {
|
|
@apply hover:opacity-70 transition-opacity font-medium;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.nav-actions {
|
|
@apply flex items-center;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
|
|
background: var(--deep-earth);
|
|
color: var(--bone-white);
|
|
border-color: var(--deep-earth);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
|
|
background: var(--soft-cream);
|
|
color: var(--charcoal-brown);
|
|
border-color: var(--mocha-taupe);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--mocha-taupe);
|
|
}
|
|
|
|
.hero {
|
|
@apply min-h-screen flex items-center justify-center pt-24;
|
|
background: var(--bone-white);
|
|
}
|
|
|
|
.hero-content {
|
|
@apply max-w-7xl mx-auto px-8 text-center;
|
|
}
|
|
|
|
.logo-mark {
|
|
@apply w-24 h-24 mx-auto mb-12;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.hero h1 {
|
|
@apply text-7xl md:text-9xl mb-6 tracking-tight;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.hero h2 {
|
|
@apply text-2xl md:text-3xl mb-8;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.hero p {
|
|
@apply text-xl mb-12 max-w-2xl mx-auto leading-relaxed;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.hero-actions {
|
|
@apply flex items-center justify-center gap-6 flex-wrap;
|
|
}
|
|
|
|
.hero-image {
|
|
@apply mt-16 rounded-2xl overflow-hidden;
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.foundation {
|
|
@apply max-w-7xl mx-auto px-8 py-32 grid md:grid-cols-2 gap-16 items-center;
|
|
}
|
|
|
|
.foundation article {
|
|
@apply space-y-8;
|
|
}
|
|
|
|
.foundation h3 {
|
|
@apply text-sm font-semibold tracking-widest uppercase mb-4;
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.foundation h4 {
|
|
@apply text-4xl md:text-5xl mb-6;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.foundation p {
|
|
@apply text-xl leading-relaxed;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.foundation-image {
|
|
@apply rounded-2xl overflow-hidden h-96;
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.services-preview {
|
|
@apply max-w-7xl mx-auto px-8 py-32;
|
|
}
|
|
|
|
.services-preview h3 {
|
|
@apply text-4xl md:text-5xl mb-16 text-center;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.service-cards {
|
|
@apply grid md:grid-cols-3 gap-12 mb-16;
|
|
}
|
|
|
|
.service-card {
|
|
@apply p-10 rounded-2xl transition-shadow;
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.service-card h4 {
|
|
@apply text-2xl mb-6;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.service-card p {
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.testimonials {
|
|
@apply max-w-7xl mx-auto px-8 py-32 rounded-3xl mb-12;
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.testimonials h3 {
|
|
@apply text-4xl md:text-5xl mb-16 text-center;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.testimonial-grid {
|
|
@apply grid md:grid-cols-2 gap-12 mb-16;
|
|
}
|
|
|
|
.testimonial {
|
|
@apply p-10 rounded-2xl;
|
|
background: var(--bone-white);
|
|
}
|
|
|
|
.testimonial .stars {
|
|
@apply text-2xl mb-6;
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.testimonial p {
|
|
@apply text-xl mb-6 italic leading-relaxed;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.testimonial cite {
|
|
@apply font-semibold not-italic block;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.site-footer {
|
|
@apply py-16;
|
|
background: var(--charcoal-brown);
|
|
}
|
|
|
|
.site-footer a {
|
|
@apply hover:opacity-70 transition-opacity;
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.footer-brand {
|
|
@apply max-w-7xl mx-auto px-8 mb-12;
|
|
}
|
|
|
|
.footer-brand span {
|
|
@apply text-2xl block mb-3;
|
|
color: var(--bone-white);
|
|
}
|
|
|
|
.footer-brand p {
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.footer-links {
|
|
@apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
|
|
}
|
|
|
|
.footer-legal {
|
|
@apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
|
|
}
|
|
|
|
.footer-contact {
|
|
@apply max-w-7xl mx-auto px-8 flex flex-wrap gap-8;
|
|
color: var(--mocha-taupe);
|
|
}
|
|
|
|
.section {
|
|
@apply py-32;
|
|
}
|
|
|
|
.section-header {
|
|
@apply max-w-7xl mx-auto px-8 mb-16;
|
|
}
|
|
|
|
.section-title {
|
|
@apply text-4xl md:text-5xl mb-6;
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.section-subtitle {
|
|
@apply text-xl max-w-2xl leading-relaxed;
|
|
color: var(--charcoal-brown);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.select-content {
|
|
background: var(--bone-white);
|
|
border: 1px solid var(--mocha-taupe);
|
|
}
|
|
|
|
.select-item {
|
|
color: var(--charcoal-brown);
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.select-item:hover,
|
|
.select-item[data-highlighted] {
|
|
background: var(--soft-cream);
|
|
}
|
|
|
|
.select-item[data-state="checked"] {
|
|
background: var(--soft-cream);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.select-trigger {
|
|
background: var(--bone-white);
|
|
border: 1px solid var(--mocha-taupe);
|
|
color: var(--charcoal-brown);
|
|
}
|
|
|
|
.select-trigger:hover {
|
|
border-color: var(--deep-earth);
|
|
}
|
|
|
|
.select-trigger[data-state="open"] {
|
|
border-color: var(--deep-earth);
|
|
}
|
|
}
|