/* Variable declaration */ /* WARNING: "-" in the name is unsupported! */ /* WARNING: As used in Javascript no space after ":" is allowed */ :root { /* Ratio of the responsiveness Its usage: calc(rem + * var(--RESPONSIVE-RATIO)). Ex: calc(1.2rem + 0.7 * var(--RESPONSIVE-RATIO)) Its syntax (important): 100vw for the current screen width, 120rem for 1920px, 31rem for 496px */ --RESPONSIVE-RATIO: (100vw - 31rem) / (120 - 31); --MARKERS_SIZE:40; --FONT-FAMILY:"Figtree",sans-serif; --COLOR_FONT: white; --SHADE_SURFACE: 233; --SAT_SURFACE: 27%; --COLOR_SURFACE_10: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),15%); /* = Azur 10/2025 #1D2033; */ --COLOR_SURFACE_20: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),25%); --COLOR_SURFACE_30: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),35%); --COLOR_SURFACE_40: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),45%); --COLOR_SURFACE_50: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),55%); --COLOR_SURFACE_60: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),65%); --COLOR_SURFACE_70: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),75%); --COLOR_SURFACE_80: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),85%); --COLOR_SURFACE_90: hsl(var(--SHADE_SURFACE),var(--SAT_SURFACE),95%); --COLOR_POI_LABEL: hsl(233,27%,25%); --SHADE_ACTION: 22; /* 24=EsayJet, 80=nice green */ --SAT_ACTION: 100%; --COLOR_ACTION_40: hsl(var(--SHADE_ACTION),var(--SAT_ACTION),40%); --COLOR_ACTION_50: hsl(var(--SHADE_ACTION),var(--SAT_ACTION),50%); --COLOR_ACTION_60: hsl(var(--SHADE_ACTION),var(--SAT_ACTION),60%); --COLOR_ACTION_70: hsl(var(--SHADE_ACTION),var(--SAT_ACTION),70%); --COLOR_ACTION_80: hsl(var(--SHADE_ACTION),var(--SAT_ACTION),80%); --COLOR_ACTION_90: hsl(var(--SHADE_ACTION),var(--SAT_ACTION),90%); --SHADE_BLUE : 195; --SAT_BLUE : 100%; --BLUE_50:hsl(var(--SHADE_BLUE),var(--SAT_BLUE),50%); /*DEEP_SKY_BLUE:#00BFFF*/ --WHITE: #ffffff; --BEIGE: #FCF2ED; --BLACK: #000000; --DARKER_BLUE: #0A1C2A; --LIGHTER_BLUE: #1A3A4F; --DAY_PINK: #E85490;/* hsl(336, 76%, 62%) */ --DAY_YELLOW:#ffd500;/* #FFCC00D9=hsl(48, 100%, 50%) */ --DAY_CYAN:#07DBF2;/*hsl(185.9,94.4%,48.8%) */ --DAY_GREEN:#8EC800;/* hsl(77.4,100%,39.2%) */ --DAY_PURPLE:#8E76D5;/*#c941ff/*#B233E5= hsl(283, 77%, 55%) */ --WARNING_RED:hsl(0, 100%, 50%); --MARKER_TEXT_COLOR: var(--COLOR_SURFACE_10); --EXC_MARKER_FILL_COLOR: #ffffff; --NAVBAR_DEFAULT_FILL_COLOR: var(--COLOR_SURFACE_30); --NAVBAR_HOVER_FILL_COLOR: var(--COLOR_SURFACE_50); /* ############################################################################################################################################################### INPUT NEUMORPHISM EFFECT ############################################################################################################################################################### */ --NEUMORPHISM_BOX_SHADOW: inset 6px 6px 12px rgba(0, 0, 0, 0.35), inset -6px -6px 12px rgba(255, 255, 255, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.3), -3px -3px 6px rgba(255, 255, 255, 0.2); /* ############################################################################################################################################################### HEADER ############################################################################################################################################################### */ --HEADER_HEIGHT: 52px; --HEADER_BUTTON_HEIGHT: 40px; /* ############################################################################################################################################################### SEARCH BAR ############################################################################################################################################################### */ --SEARCH_BAR_BACKGROUND_COLOR: rgba(26, 58, 79, 0.25); --SEARCH_BAR_BOX_SHADOW: -5px 0 25px rgba(0, 0, 0, 0.3), inset 0 0 2px rgba(255, 255, 255, 0.35), -20px 0 50px rgba(0, 0, 0, 0.2); --SEARCH_BAR_ELEMENTS_ACTIVE: linear-gradient(to right, var(--COLOR_ACTION_40), var(--COLOR_ACTION_60)); --REQUIRED_FIELD_COLOR: #FF4500; /* Orange-red color for required field indicators */ /* ############################################################################################################################################################### SETTINGS WINDOW ############################################################################################################################################################### */ --SETTINGS_WINDOW_WIDTH: 100%; /* ############################################################################################################################################################### SIDER / TIMELINE ############################################################################################################################################################### */ --RIGHT_BAR_WIDTH:448px; /* 03/05/2023 22% 28rem */ /* Damien Suggestion: 490px */ /* Google Maps: 408px */ --DOUBLED_RIGHT_BAR_WIDTH: calc(var(--RIGHT_BAR_WIDTH) * 2); /* ############################################################################################################################################################### PLANNER PAGE ############################################################################################################################################################### */ /* --RIGHT_BAR_WIDTH: 33%; --POI_PAGE_WIDTH: 33%; */ /* TOTAL 100% */ /* ############################################################################################################################################################### PLANNER PAGE (ON MOBILE) ############################################################################################################################################################### */ --MOBILE_NAV_HEIGHT: 7%; /* Values at planification */ --MOBILE_MAP_HEIGHT: 50%; --MOBILE_SIDER_HEIGHT: 43%; /* Values at navigation */ --MOBILE_MAP_HEIGHT_AT_NAV: 61%; --MOBILE_SIDER_HEIGHT_AT_NAV: 32%; /* TOTAL 100% */ /* ############################################################################################################################################################### LANDING BAR ############################################################################################################################################################### */ --LANDING_BAR_RATIO:1.4; /* ############################################################################################################################################################### BUTTONS ############################################################################################################################################################### */ --BUTTON_BORDER_RADIUS: 32px /* Airbnb 32px */; --FORM_SHADOW_BLACK: 3px 0px 10px 0 rgb(0 0 0); --FORM_SHADOW_WHITE: 0px 0px 2px 2px var(--COLOR_SURFACE_90); --FORM_SHADOW_ORANGE: 0px 0px 2px 2px var(--COLOR_ACTION_50); --FORM_SHADOW_RED: 0px 0px 2px 2px var(--WARNING_RED); /* Shadow for warnings */ /* ############################################################################################################################################################### BADGES ############################################################################################################################################################### */ /* Badge Nouveau */ --BADGE_NEW_GRADIENT_FROM: #FF5252; /* Rouge clair */ --BADGE_NEW_GRADIENT_TO: #B71C1C; /* Rouge foncé */ --BADGE_NEW_TEXT_COLOR: var(--WHITE); --BADGE_NEW_BORDER: rgba(183, 28, 28, 0.3); /* Badge Bientôt */ --BADGE_COMING_SOON_GRADIENT_FROM: #E0E0E0; /* Argent clair */ --BADGE_COMING_SOON_GRADIENT_TO: #A9A9A9; /* Argent foncé */ --BADGE_COMING_SOON_TEXT_COLOR: var(--COLOR_SURFACE_10); --BADGE_COMING_SOON_BORDER: rgba(169, 169, 169, 0.3); /* Badge Populaire */ --BADGE_POPULAR_GRADIENT_FROM: #FFD700; /* Jaune doré */ --BADGE_POPULAR_GRADIENT_TO: #FFA500; /* Jaune orangé */ --BADGE_POPULAR_TEXT_COLOR: var(--COLOR_SURFACE_10); --BADGE_POPULAR_BORDER: rgba(255, 165, 0, 0.3); /* Badge Beta */ --BADGE_BETA_GRADIENT_FROM: #E85490; /* Rose clair */ --BADGE_BETA_GRADIENT_TO: #D13B7B; /* Rose foncé */ --BADGE_BETA_TEXT_COLOR: var(--WHITE); --BADGE_BETA_BORDER: rgba(209, 59, 123, 0.3); /* ############################################################################################################################################################### GEOCODER ############################################################################################################################################################### */ --GEOCODER_WIDTH: 250px; --GEOCODER_POI_WIDTH: 250px; --GEOCODER_POI_WIDTH_MOBILE: 60%; /* ############################################################################################################################################################### RANGE CONTAINER ############################################################################################################################################################### */ --RANGE_CONTAINER_WIDTH: 100%; /* ############################################################################################################################################################### SIDE BAR ############################################################################################################################################################### */ --SIDE_BAR_TRANSITION: 1s; --TIME1: 0s; /* Duration of the spinner gear1 rotation */ --TIME2: 0s; /* Duration of the spinner gear2 rotation */ /* ############################################################################################################################################################### MAP SIDER TABLE ############################################################################################################################################################### */ --TABLE_COL1_WIDTH: 6%; --TABLE_COL2_WIDTH: 34%; --TABLE_COL3_WIDTH: 9%; --TABLE_COL4_WIDTH: 21%; --TABLE_COL5_WIDTH: 23%; --TABLE_COL6_WIDTH: 7%; /* TOTAL 100% */ /* Before the adaptation to small mobile --TABLE_COL1_WIDTH: 6%; --TABLE_COL2_WIDTH: 30%; --TABLE_COL3_WIDTH: 13%; --TABLE_COL4_WIDTH: 22%; --TABLE_COL5_WIDTH: 23%; --TABLE_COL6_WIDTH: 6%; TOTAL 100% */ /* ############################################################################################################################################################### MAP ############################################################################################################################################################### */ --MAP_ELEMENT_MARGIN: 8px; --MAP_FILTERS_HEIGHT: 32px; --MAP_FILTERS_WIDTH: 32px; /* ############################################################################################################################################################### DATE PICKER ############################################################################################################################################################### */ --DATE_PICKER_FONT_COEF: 1.2; --DATE_PICKER_BACKGROUND_COLOR: var(--COLOR_SURFACE_20); /* ############################################################################################################################################################### LOGIN ############################################################################################################################################################### */ --login-primary-color: var(--COLOR_ACTION_50); --login-secondary-color: var(--COLOR_ACTION_40); --login-bg-color: var(--COLOR_SURFACE_90); --login-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); --login-border-radius: 12px; /* ############################################################################################################################################################### NOTIFICATION SETTINGS MODAL (notification preferences) ############################################################################################################################################################### */ /* Notification Modal */ --NOTIFICATION_MODAL_OVERLAY_BG: rgba(0, 0, 0, 0.75); --NOTIFICATION_MODAL_BACKDROP_BLUR: blur(5px); --NOTIFICATION_MODAL_CONTENT_BG: rgba(255, 255, 255, 0.65); --NOTIFICATION_MODAL_CONTENT_PADDING: 40px 30px 30px; --NOTIFICATION_MODAL_BORDER_RADIUS: 20px; --NOTIFICATION_MODAL_MAX_WIDTH: 500px; --NOTIFICATION_MODAL_SHADOW: 0 25px 50px rgba(0, 0, 0, 0.4); --NOTIFICATION_MODAL_ANIMATION: modalScaleIn 0.4s ease-out; /* Notification Modal Header */ --NOTIFICATION_HEADER_TITLE_COLOR: #333; --NOTIFICATION_HEADER_TITLE_SIZE: 24px; --NOTIFICATION_HEADER_TITLE_WEIGHT: 600; --NOTIFICATION_HEADER_DESC_COLOR: #666; --NOTIFICATION_HEADER_DESC_SIZE: 15px; --NOTIFICATION_HEADER_LINE_HEIGHT: 1.5; /* Notification List */ --NOTIFICATION_LIST_COLOR: #666; --NOTIFICATION_LIST_LINE_HEIGHT: 1.6; --NOTIFICATION_LIST_MARGIN_BOTTOM: 25px; --NOTIFICATION_LIST_ITEM_GAP: 10px; --NOTIFICATION_LIST_ITEM_MARGIN: 8px; /* Notification Buttons */ --NOTIFICATION_BTN_PADDING: 12px 25px; --NOTIFICATION_BTN_BORDER_RADIUS: 25px; --NOTIFICATION_BTN_FONT_SIZE: 14px; --NOTIFICATION_BTN_FONT_WEIGHT: 500; --NOTIFICATION_BTN_TRANSITION: all 0.3s ease; --NOTIFICATION_BTN_GAP: 10px; /* Notification Button Primary (Activate) */ --NOTIFICATION_BTN_PRIMARY_BG: linear-gradient(135deg, #28a745, #20c997); --NOTIFICATION_BTN_PRIMARY_COLOR: var(--WHITE); --NOTIFICATION_BTN_PRIMARY_SHADOW: 0 8px 20px rgba(40, 167, 69, 0.3); /* Notification Button Test */ --NOTIFICATION_BTN_TEST_BG: #007bff; --NOTIFICATION_BTN_TEST_COLOR: var(--WHITE); --NOTIFICATION_BTN_TEST_SHADOW: 0 8px 20px rgba(0, 123, 255, 0.3); /* Notification Button Vibration */ --NOTIFICATION_BTN_VIBRATION_BG: #ff6b35; --NOTIFICATION_BTN_VIBRATION_COLOR: var(--WHITE); --NOTIFICATION_BTN_VIBRATION_SHADOW: 0 8px 20px rgba(255, 107, 53, 0.3); /* Notification Responsive */ --NOTIFICATION_BREAKPOINT_MOBILE: 768px; /* ############################################################################################################################################################### NOTIFICATION CACHE UPDATE ############################################################################################################################################################### */ /* Cache Update Modal - Z-Index & Layout */ --CACHE_UPDATE_MODAL_Z_INDEX: 10000; --CACHE_UPDATE_MODAL_FONT_FAMILY: "Figtree", sans-serif; /* Cache Update Modal - Background & Colors */ --CACHE_UPDATE_MODAL_BG: #28a76cc2; --CACHE_UPDATE_MODAL_COLOR: var(--WHITE); /* Cache Update Modal - Spacing & Sizing */ --CACHE_UPDATE_MODAL_PADDING: 1rem 1.25rem; --CACHE_UPDATE_MODAL_BORDER_RADIUS: 0.75rem; --CACHE_UPDATE_MODAL_GAP: 0.5rem; --CACHE_UPDATE_MODAL_MIN_WIDTH_DESKTOP: 23.75rem; --CACHE_UPDATE_MODAL_MAX_WIDTH: 31.25rem; /* Cache Update Modal - Desktop Positioning */ --CACHE_UPDATE_MODAL_DESKTOP_BOTTOM: 1.25rem; --CACHE_UPDATE_MODAL_DESKTOP_RIGHT: 1.25rem; --CACHE_UPDATE_MODAL_BOX_SHADOW_DESKTOP: 0 0.5rem 1.5625rem rgba(40, 167, 69, 0.3); /* Cache Update Modal - Mobile Positioning */ --CACHE_UPDATE_MODAL_MOBILE_TOP: 0; --CACHE_UPDATE_MODAL_MOBILE_LEFT: 0; --CACHE_UPDATE_MODAL_MOBILE_RIGHT: 0; --CACHE_UPDATE_MODAL_BOX_SHADOW_MOBILE: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3); /* Cache Update Modal - Typography */ --CACHE_UPDATE_MODAL_TITLE_SIZE: 1rem; --CACHE_UPDATE_MODAL_TITLE_WEIGHT: 700; --CACHE_UPDATE_MODAL_MESSAGE_SIZE: 0.875rem; --CACHE_UPDATE_MODAL_MESSAGE_OPACITY: 0.9; --CACHE_UPDATE_MODAL_HINT_SIZE: 0.75rem; --CACHE_UPDATE_MODAL_HINT_OPACITY: 0.8; --CACHE_UPDATE_MODAL_HINT_ICON_MARGIN: 0.375rem; /* Cache Update Modal - Action Button */ --CACHE_UPDATE_MODAL_ACTION_BG: rgba(255, 255, 255, 0.2); --CACHE_UPDATE_MODAL_ACTION_BG_HOVER: rgba(255, 255, 255, 0.3); --CACHE_UPDATE_MODAL_ACTION_BORDER: 1px solid rgba(255, 255, 255, 0.3); --CACHE_UPDATE_MODAL_ACTION_COLOR: var(--WHITE); --CACHE_UPDATE_MODAL_ACTION_PADDING: 0.5rem 1rem; --CACHE_UPDATE_MODAL_ACTION_RADIUS: 1.25rem; --CACHE_UPDATE_MODAL_ACTION_FONT_SIZE: 0.875rem; --CACHE_UPDATE_MODAL_ACTION_FONT_WEIGHT: 500; --CACHE_UPDATE_MODAL_ACTION_TRANSITION: all 0.3s ease; /* Cache Update Modal - Animations */ --CACHE_UPDATE_MODAL_ANIMATION_DESKTOP: slideInUp 0.5s ease-out; --CACHE_UPDATE_MODAL_ANIMATION_MOBILE: slideDown 0.5s ease-out; /* ############################################################################################################################################################### NOTIFICATIONS SENSOR CHECK SYSTEM ############################################################################################################################################################### */ /* SENSOR CHECK - FONT & OVERLAY */ --SENSOR_FONT_FAMILY: "Figtree", sans-serif; --SENSOR_MODAL_OVERLAY_BG: rgba(0, 0, 0, 0.75); --SENSOR_MODAL_OVERLAY_Z_INDEX: 10002; --SENSOR_MODAL_OVERLAY_PADDING: 20px; --SENSOR_MODAL_OVERLAY_BACKDROP: blur(5px); --SENSOR_MODAL_OVERLAY_ANIMATION: sensorFadeIn 0.3s ease-out; /* SENSOR CHECK - MODAL CONTENT */ --SENSOR_MODAL_CONTENT_RADIUS: 20px; --SENSOR_MODAL_CONTENT_MAX_WIDTH: 500px; --SENSOR_MODAL_CONTENT_BOX_SHADOW: 0 25px 50px rgba(0, 0, 0, 0.4); --SENSOR_MODAL_CONTENT_BORDER: 2px solid rgba(255, 255, 255, 0.3); --SENSOR_MODAL_CONTENT_PADDING: 40px 30px; --SENSOR_MODAL_CONTENT_ANIMATION: sensorModalScaleIn 0.4s ease-out; --SENSOR_MODAL_CONTENT_COLOR: var(--WHITE); /* SENSOR CHECK - MODAL THEMES */ --SENSOR_MODAL_CRITICAL_BG: #ff3300; --SENSOR_MODAL_ERROR_BG: #ff9100; --SENSOR_MODAL_WARNING_BG: #e7d000; --SENSOR_MODAL_INSTRUCTIONS_BG: var(--WHITE); --SENSOR_MODAL_INSTRUCTIONS_COLOR: #333; /* SENSOR CHECK - CLOSE BUTTON */ --SENSOR_CLOSE_BTN_TOP: 15px; --SENSOR_CLOSE_BTN_RIGHT: 15px; --SENSOR_CLOSE_BTN_BG: rgba(0, 0, 0, 0.2); --SENSOR_CLOSE_BTN_COLOR: var(--WHITE); --SENSOR_CLOSE_BTN_FONT_SIZE: 32px; --SENSOR_CLOSE_BTN_SIZE: 35px; --SENSOR_CLOSE_BTN_TRANSITION: all 0.2s ease; --SENSOR_CLOSE_BTN_BG_HOVER: rgba(0, 0, 0, 0.4); --SENSOR_CLOSE_BTN_INSTRUCTIONS_BG: rgba(0, 0, 0, 0.05); --SENSOR_CLOSE_BTN_INSTRUCTIONS_COLOR: #666; --SENSOR_CLOSE_BTN_INSTRUCTIONS_BG_HOVER: rgba(0, 0, 0, 0.1); --SENSOR_CLOSE_BTN_INSTRUCTIONS_COLOR_HOVER: #333; /* SENSOR CHECK - MODAL ICON & TITLE */ --SENSOR_MODAL_ICON_SIZE: 70px; --SENSOR_MODAL_ICON_MARGIN: 20px; --SENSOR_MODAL_ICON_ANIMATION: sensorPulse 2s ease-in-out infinite; --SENSOR_MODAL_TITLE_SIZE: 24px; --SENSOR_MODAL_TITLE_WEIGHT: 700; --SENSOR_MODAL_TITLE_MARGIN: 25px; --SENSOR_MODAL_TITLE_SHADOW: 0 2px 10px rgba(0, 0, 0, 0.2); --SENSOR_MODAL_INSTRUCTIONS_TITLE_COLOR: #dc3545; --SENSOR_MODAL_INSTRUCTIONS_TITLE_SIZE: 22px; /* SENSOR CHECK - WARNINGS LIST */ --SENSOR_WARNINGS_LIST_MARGIN_BOTTOM: 30px; --SENSOR_WARNING_ITEM_PADDING: 15px; --SENSOR_WARNING_ITEM_MARGIN_BOTTOM: 12px; --SENSOR_WARNING_ITEM_BG: rgba(255, 255, 255, 0.15); --SENSOR_WARNING_ITEM_BORDER_RADIUS: 12px; --SENSOR_WARNING_ITEM_BACKDROP: blur(10px); --SENSOR_WARNING_ITEM_BORDER_LEFT_WIDTH: 4px; --SENSOR_WARNING_ITEM_BORDER_LEFT_COLOR: rgba(255, 255, 255, 0.5); --SENSOR_WARNING_ITEM_TRANSITION: all 0.3s ease; --SENSOR_WARNING_ITEM_BG_HOVER: rgba(255, 255, 255, 0.2); --SENSOR_WARNING_ITEM_TRANSLATE: 5px; --SENSOR_WARNING_ICON_SIZE: 24px; --SENSOR_WARNING_ICON_MARGIN: 15px; --SENSOR_WARNING_MESSAGE_FONT_SIZE: 15px; --SENSOR_WARNING_MESSAGE_LINE_HEIGHT: 1.5; --SENSOR_WARNING_MESSAGE_FONT_WEIGHT: 500; /* SENSOR CHECK - SEVERITY COLORS */ --SENSOR_COLOR_CRITICAL: #dc3545; --SENSOR_COLOR_HIGH: #ff6b35; --SENSOR_COLOR_MEDIUM: #ffc107; --SENSOR_COLOR_WARNING: #ff9800; --SENSOR_COLOR_LOW: #17a2b8; --SENSOR_WARNING_BG_CRITICAL: rgba(220, 53, 69, 0.2); --SENSOR_WARNING_BG_HIGH: rgba(255, 107, 53, 0.2); --SENSOR_WARNING_BG_MEDIUM: rgba(255, 193, 7, 0.2); --SENSOR_WARNING_BG_WARNING: rgba(255, 152, 0, 0.2); --SENSOR_WARNING_BG_LOW: rgba(23, 162, 184, 0.2); /* SENSOR CHECK - ACTION BUTTONS */ --SENSOR_ACTIONS_GAP: 12px; --SENSOR_ACTIONS_MARGIN_TOP: 25px; --SENSOR_ACTION_BTN_PADDING: 14px 28px; --SENSOR_ACTION_BTN_RADIUS: 25px; --SENSOR_ACTION_BTN_FONT_SIZE: 16px; --SENSOR_ACTION_BTN_FONT_WEIGHT: 600; --SENSOR_ACTION_BTN_GAP: 10px; --SENSOR_ACTION_BTN_TRANSITION: all 0.3s ease; /* SENSOR CHECK - Primary Button */ --SENSOR_ACTION_BTN_PRIMARY_BG: var(--WHITE); --SENSOR_ACTION_BTN_PRIMARY_COLOR: #dc3545; --SENSOR_ACTION_BTN_PRIMARY_COLOR_WARNING: #ff9800; --SENSOR_ACTION_BTN_PRIMARY_BG_INSTRUCTIONS: linear-gradient(135deg, #28a745, #20c997); --SENSOR_ACTION_BTN_PRIMARY_COLOR_INSTRUCTIONS: var(--WHITE); --SENSOR_ACTION_BTN_PRIMARY_SHADOW: 0 4px 15px rgba(0, 0, 0, 0.2); --SENSOR_ACTION_BTN_PRIMARY_SHADOW_HOVER: 0 6px 20px rgba(0, 0, 0, 0.3); /* SENSOR CHECK - Secondary Button */ --SENSOR_ACTION_BTN_SECONDARY_BG: rgba(255, 255, 255, 0.2); --SENSOR_ACTION_BTN_SECONDARY_COLOR: var(--WHITE); --SENSOR_ACTION_BTN_SECONDARY_BORDER: 1px solid rgba(255, 255, 255, 0.3); --SENSOR_ACTION_BTN_SECONDARY_BG_HOVER: rgba(255, 255, 255, 0.3); --SENSOR_ACTION_BTN_SECONDARY_BG_INSTRUCTIONS: rgba(0, 0, 0, 0.05); --SENSOR_ACTION_BTN_SECONDARY_COLOR_INSTRUCTIONS: #666; --SENSOR_ACTION_BTN_SECONDARY_BORDER_INSTRUCTIONS: 1px solid #ddd; --SENSOR_ACTION_BTN_SECONDARY_BG_INSTRUCTIONS_HOVER: rgba(0, 0, 0, 0.08); --SENSOR_ACTION_BTN_SECONDARY_COLOR_INSTRUCTIONS_HOVER: #333; /* SENSOR CHECK - Tertiary Button */ --SENSOR_ACTION_BTN_TERTIARY_COLOR: rgba(255, 255, 255, 0.8); --SENSOR_ACTION_BTN_TERTIARY_FONT_SIZE: 14px; --SENSOR_ACTION_BTN_TERTIARY_PADDING: 10px 20px; --SENSOR_ACTION_BTN_TERTIARY_COLOR_HOVER: var(--WHITE); --SENSOR_ACTION_BTN_TERTIARY_COLOR_INSTRUCTIONS: #999; --SENSOR_ACTION_BTN_TERTIARY_COLOR_INSTRUCTIONS_HOVER: #666; /* SENSOR CHECK - INSTRUCTIONS */ --SENSOR_INSTRUCTIONS_MARGIN: 20px 0; --SENSOR_INSTRUCTIONS_TITLE_COLOR: #dc3545; --SENSOR_INSTRUCTIONS_TITLE_MARGIN: 20px; --SENSOR_INSTRUCTIONS_TITLE_SIZE: 18px; --SENSOR_INSTRUCTIONS_TITLE_WEIGHT: 600; --SENSOR_INSTRUCTIONS_TITLE_ALIGN: center; --SENSOR_INSTRUCTIONS_TITLE_ICON_MARGIN: 8px; --SENSOR_INSTRUCTION_STEP_PADDING: 12px 15px; --SENSOR_INSTRUCTION_STEP_MARGIN: 10px; --SENSOR_INSTRUCTION_STEP_BG: #f8f9fa; --SENSOR_INSTRUCTION_STEP_BORDER: 4px solid #dc3545; --SENSOR_STEP_NUMBER_BG: #dc3545; --SENSOR_STEP_NUMBER_COLOR: var(--WHITE); --SENSOR_STEP_NUMBER_RADIUS: 50%; --SENSOR_STEP_NUMBER_SIZE: 28px; --SENSOR_STEP_NUMBER_FONT_SIZE: 14px; --SENSOR_STEP_NUMBER_FONT_WEIGHT: 700; --SENSOR_STEP_NUMBER_MARGIN: 15px; --SENSOR_INSTRUCTION_TEXT_FONT_SIZE: 15px; --SENSOR_INSTRUCTION_TEXT_COLOR: #333; /* SENSOR CHECK - SUCCESS BANNER */ --SENSOR_SUCCESS_BANNER_TOP: 20px; --SENSOR_SUCCESS_BANNER_BG: linear-gradient(135deg, #28a745, #20c997); --SENSOR_SUCCESS_BANNER_COLOR: var(--WHITE); --SENSOR_SUCCESS_BANNER_PADDING: 16px 24px; --SENSOR_SUCCESS_BANNER_RADIUS: 12px; --SENSOR_SUCCESS_BANNER_SHADOW: 0 8px 25px rgba(40, 167, 69, 0.3); --SENSOR_SUCCESS_BANNER_Z_INDEX: 10003; --SENSOR_SUCCESS_BANNER_ANIMATION: slideDownSuccess 0.5s ease-out; --SENSOR_SUCCESS_BANNER_MAX_WIDTH: 90%; --SENSOR_SUCCESS_BANNER_GAP: 12px; --SENSOR_SUCCESS_ICON_SIZE: 20px; /* SENSOR CHECK - CONNECTION STATUS */ --SENSOR_CONNECTION_GAP: 8px; --SENSOR_CONNECTION_PADDING: 8px 16px; --SENSOR_CONNECTION_RADIUS: 20px; --SENSOR_CONNECTION_FONT_SIZE: 14px; --SENSOR_CONNECTION_FONT_WEIGHT: 500; --SENSOR_CONNECTION_MARGIN: 10px 0; --SENSOR_CONNECTION_ICON_SIZE: 16px; --SENSOR_CONNECTION_ONLINE_BG: rgba(40, 167, 69, 0.2); --SENSOR_CONNECTION_ONLINE_COLOR: #28a745; --SENSOR_CONNECTION_OFFLINE_BG: rgba(220, 53, 69, 0.2); --SENSOR_CONNECTION_OFFLINE_COLOR: #dc3545; --SENSOR_CONNECTION_SLOW_BG: rgba(255, 193, 7, 0.2); --SENSOR_CONNECTION_SLOW_COLOR: #ffc107; /* SENSOR CHECK - STATUS BADGES */ --SENSOR_STATUS_BADGE_GAP: 6px; --SENSOR_STATUS_BADGE_PADDING: 6px 12px; --SENSOR_STATUS_BADGE_RADIUS: 15px; --SENSOR_STATUS_BADGE_FONT_SIZE: 13px; --SENSOR_STATUS_BADGE_FONT_WEIGHT: 500; --SENSOR_STATUS_BADGE_MARGIN: 5px; --SENSOR_STATUS_AVAILABLE_BG: rgba(40, 167, 69, 0.2); --SENSOR_STATUS_AVAILABLE_COLOR: #28a745; --SENSOR_STATUS_DENIED_BG: rgba(220, 53, 69, 0.2); --SENSOR_STATUS_DENIED_COLOR: #dc3545; --SENSOR_STATUS_UNAVAILABLE_BG: rgba(108, 117, 125, 0.2); --SENSOR_STATUS_UNAVAILABLE_COLOR: #6c757d; /* SENSOR CHECK - MOBILE RESPONSIVE */ --SENSOR_MODAL_MOBILE_MAX_WIDTH: 90%; --SENSOR_MODAL_MOBILE_PADDING: 30px 20px; --SENSOR_MODAL_ICON_SIZE_MOBILE: 50px; --SENSOR_MODAL_TITLE_SIZE_MOBILE: 20px; --SENSOR_WARNING_MESSAGE_FONT_SIZE_MOBILE: 14px; --SENSOR_ACTION_BTN_PADDING_MOBILE: 12px 24px; --SENSOR_ACTION_BTN_FONT_SIZE_MOBILE: 15px; /* ############################################################################################################################################################### NOTIFICATIONS PWA INSTALLATION SYSTEM - MODALS & BANNERS ############################################################################################################################################################### */ /* PWA System - Colors */ --PWA_COLOR_INSTALL: linear-gradient(135deg, #FF6B35, #F7931E); --PWA_COLOR_INSTALL_SHADOW: 0 8px 25px rgba(255, 107, 53, 0.3); --PWA_COLOR_OPEN_APP: linear-gradient(135deg, #28a745, #20c997); --PWA_COLOR_OPEN_APP_SHADOW: 0 8px 25px rgba(40, 167, 69, 0.3); --PWA_COLOR_INCOGNITO: linear-gradient(135deg, #6c5ce7, #a29bfe); --PWA_COLOR_INCOGNITO_SHADOW: 0 8px 25px rgba(108, 92, 231, 0.3); --PWA_COLOR_WHITE: var(--WHITE); /* PWA Banners */ --PWA_BANNER_PADDING: 30px 20px 20px 20px; --PWA_BANNER_BORDER_RADIUS: 12px; --PWA_BANNER_BORDER: 2px solid rgba(255,255,255,0.3); --PWA_BANNER_SHADOW: 0 4px 12px rgba(0,0,0,0.3); --PWA_BANNER_DESKTOP_BOTTOM: 20px; --PWA_BANNER_DESKTOP_RIGHT: 20px; --PWA_BANNER_ANIMATION_DURATION: 0.5s; --PWA_BANNER_TITLE_SIZE: 16px; --PWA_BANNER_TITLE_WEIGHT: 600; --PWA_BANNER_MESSAGE_SIZE: 14px; --PWA_BANNER_MESSAGE_OPACITY: 0.95; /* PWA Close Button */ --PWA_CLOSE_BTN_TOP: 12px; --PWA_CLOSE_BTN_RIGHT: 12px; --PWA_CLOSE_BTN_BG: rgba(0,0,0,0.1); --PWA_CLOSE_BTN_BG_HOVER: rgba(0,0,0,0.2); --PWA_CLOSE_BTN_SIZE: 30px; --PWA_CLOSE_BTN_FONT_SIZE: 32px; --PWA_CLOSE_BTN_RADIUS: 50%; --PWA_CLOSE_BTN_TRANSITION: all 0.2s ease; /* PWA Close Button (Modal context) */ --PWA_MODAL_CLOSE_BTN_TOP: 15px; --PWA_MODAL_CLOSE_BTN_RIGHT: 15px; --PWA_MODAL_CLOSE_BTN_BG: rgba(0,0,0,0.2); --PWA_MODAL_CLOSE_BTN_BG_HOVER: rgba(0,0,0,0.4); --PWA_MODAL_CLOSE_BTN_SIZE: 35px; --PWA_MODAL_CLOSE_BTN_FONT_SIZE: 28px; /* PWA Close Button (Instructions context) */ --PWA_INSTRUCTIONS_CLOSE_BTN_BG: rgba(0,0,0,0.05); --PWA_INSTRUCTIONS_CLOSE_BTN_BG_HOVER: rgba(0,0,0,0.1); --PWA_INSTRUCTIONS_CLOSE_BTN_COLOR: #666; --PWA_INSTRUCTIONS_CLOSE_BTN_COLOR_HOVER: #333; --PWA_INSTRUCTIONS_CLOSE_BTN_SIZE: 40px; --PWA_INSTRUCTIONS_CLOSE_BTN_FONT_SIZE: 32px; /* PWA Action Button */ --PWA_ACTION_BTN_BG: rgba(255,255,255,0.2); --PWA_ACTION_BTN_BG_HOVER: rgba(255,255,255,0.3); --PWA_ACTION_BTN_BORDER: 1px solid rgba(255,255,255,0.3); --PWA_ACTION_BTN_PADDING: 10px 32px; --PWA_ACTION_BTN_RADIUS: 25px; --PWA_ACTION_BTN_FONT_SIZE: 15px; --PWA_ACTION_BTN_FONT_WEIGHT: 600; --PWA_ACTION_BTN_TRANSITION: all 0.3s ease; /* PWA Modal */ --PWA_MODAL_OVERLAY_BG: rgba(0,0,0,0.75); --PWA_MODAL_BACKDROP_BLUR: blur(5px); --PWA_MODAL_PADDING: 20px; --PWA_MODAL_ANIMATION: fadeIn 0.3s ease-out; /* PWA Modal Content */ --PWA_MODAL_CONTENT_RADIUS: 20px; --PWA_MODAL_CONTENT_MAX_WIDTH: 500px; --PWA_MODAL_CONTENT_PADDING: 40px 30px; --PWA_MODAL_CONTENT_SHADOW: 0 25px 50px rgba(0,0,0,0.4); --PWA_MODAL_CONTENT_BORDER: 2px solid rgba(255,255,255,0.3); --PWA_MODAL_CONTENT_ANIMATION: modalScaleIn 0.4s ease-out; /* PWA Modal Instructions */ --PWA_INSTRUCTIONS_BG: var(--WHITE); --PWA_INSTRUCTIONS_COLOR: #333; --PWA_INSTRUCTIONS_MAX_WIDTH: 600px; --PWA_INSTRUCTIONS_MAX_HEIGHT: 90vh; --PWA_INSTRUCTIONS_PADDING: 30px 20px; --PWA_INSTRUCTIONS_ANIMATION: modalFadeIn 0.4s ease-out; /* PWA Modal Icon */ --PWA_MODAL_ICON_SIZE: 60px; --PWA_MODAL_ICON_MARGIN: 20px; /* PWA Modal Title */ --PWA_MODAL_TITLE_SIZE: 24px; --PWA_MODAL_TITLE_WEIGHT: 700; --PWA_MODAL_TITLE_MARGIN: 15px; --PWA_MODAL_TITLE_SHADOW: 0 2px 10px rgba(0,0,0,0.2); /* PWA Instructions Title */ --PWA_INSTRUCTIONS_TITLE_COLOR: #FF6B35; --PWA_INSTRUCTIONS_TITLE_COLOR_GREEN: #28a745; --PWA_INSTRUCTIONS_TITLE_COLOR_PURPLE: #6c5ce7; --PWA_INSTRUCTIONS_TITLE_SIZE: 20px; --PWA_INSTRUCTIONS_TITLE_WEIGHT: 600; --PWA_INSTRUCTIONS_TITLE_MARGIN: 25px; /* PWA Modal Description */ --PWA_MODAL_DESC_SIZE: 16px; --PWA_MODAL_DESC_OPACITY: 0.95; --PWA_MODAL_DESC_MARGIN: 30px; --PWA_MODAL_DESC_LINE_HEIGHT: 1.5; --PWA_INSTRUCTIONS_DESC_COLOR: #555; /* PWA Primary Button */ --PWA_PRIMARY_BTN_BG: var(--WHITE); --PWA_PRIMARY_BTN_COLOR_INSTALL: #FF6B35; --PWA_PRIMARY_BTN_COLOR_OPEN_APP: #28a745; --PWA_PRIMARY_BTN_PADDING: 16px 48px; --PWA_PRIMARY_BTN_RADIUS: 30px; --PWA_PRIMARY_BTN_FONT_SIZE: 18px; --PWA_PRIMARY_BTN_FONT_WEIGHT: 700; --PWA_PRIMARY_BTN_SHADOW: 0 8px 20px rgba(0,0,0,0.2); --PWA_PRIMARY_BTN_SHADOW_HOVER: 0 12px 30px rgba(0,0,0,0.3); --PWA_PRIMARY_BTN_TRANSITION: all 0.3s ease; --PWA_PRIMARY_BTN_GAP: 12px; /* PWA Footer Note */ --PWA_FOOTER_NOTE_MARGIN: 25px; --PWA_FOOTER_NOTE_SIZE: 13px; --PWA_FOOTER_NOTE_OPACITY: 0.8; /* PWA Instruction Steps */ --PWA_STEP_MARGIN: 20px; --PWA_STEP_PADDING: 15px; --PWA_STEP_BG: #f8f9fa; --PWA_STEP_RADIUS: 10px; --PWA_STEP_BORDER_LEFT_WIDTH: 4px; --PWA_STEP_BORDER_COLOR: #FF6B35; --PWA_STEP_BORDER_COLOR_GREEN: #28a745; --PWA_STEP_BORDER_COLOR_PURPLE: #6c5ce7; /* PWA Step Number */ --PWA_STEP_NUMBER_BG: #FF6B35; --PWA_STEP_NUMBER_BG_GREEN: #28a745; --PWA_STEP_NUMBER_BG_PURPLE: #6c5ce7; --PWA_STEP_NUMBER_COLOR: var(--WHITE); --PWA_STEP_NUMBER_SIZE: 28px; --PWA_STEP_NUMBER_FONT_SIZE: 14px; --PWA_STEP_NUMBER_WEIGHT: bold; --PWA_STEP_NUMBER_MARGIN: 15px; /* PWA Step Text */ --PWA_STEP_TEXT_COLOR: #333; --PWA_STEP_TEXT_SIZE: 15px; /* PWA Highlight Box */ --PWA_HIGHLIGHT_RADIUS: 10px; --PWA_HIGHLIGHT_PADDING: 15px; --PWA_HIGHLIGHT_MARGIN: 25px; --PWA_HIGHLIGHT_COLOR: var(--WHITE); /* PWA Info Box */ --PWA_INFO_BOX_BG: #e8f4fd; --PWA_INFO_BOX_BG_YELLOW: #fff3cd; --PWA_INFO_BOX_BORDER: 1px solid #bee5eb; --PWA_INFO_BOX_BORDER_YELLOW: 1px solid #ffeaa7; --PWA_INFO_BOX_RADIUS: 12px; --PWA_INFO_BOX_PADDING: 20px; --PWA_INFO_BOX_MARGIN: 25px; --PWA_INFO_BOX_COLOR: #0c5460; --PWA_INFO_BOX_COLOR_YELLOW: #856404; --PWA_INFO_BOX_ICON_SIZE: 16px; --PWA_INFO_BOX_ICON_MARGIN: 6px; /* PWA Copy Button */ --PWA_COPY_BTN_BG: linear-gradient(135deg, #6c5ce7, #a29bfe); --PWA_COPY_BTN_BG_SUCCESS: linear-gradient(135deg, #28a745, #20c997); --PWA_COPY_BTN_COLOR: var(--WHITE); --PWA_COPY_BTN_PADDING: 10px 18px; --PWA_COPY_BTN_RADIUS: 20px; --PWA_COPY_BTN_FONT_SIZE: 13px; --PWA_COPY_BTN_FONT_WEIGHT: 500; --PWA_COPY_BTN_SHADOW: 0 3px 8px rgba(108, 92, 231, 0.3); --PWA_COPY_BTN_SHADOW_HOVER: 0 6px 16px rgba(108, 92, 231, 0.4); --PWA_COPY_BTN_TRANSITION: all 0.3s; /* PWA Browser Box */ --PWA_BROWSER_BOX_MARGIN: 18px; --PWA_BROWSER_BOX_PADDING: 15px; --PWA_BROWSER_BOX_BG: #f8f9fa; --PWA_BROWSER_BOX_RADIUS: 10px; --PWA_BROWSER_BOX_BORDER_WIDTH: 4px; --PWA_BROWSER_BOX_BORDER_CHROME: #4285F4; --PWA_BROWSER_BOX_BORDER_FIREFOX: #FF9500; --PWA_BROWSER_BOX_BORDER_SAFARI: #007AFF; --PWA_BROWSER_BOX_BORDER_ANDROID: #34A853; --PWA_BROWSER_BOX_HEADER_MARGIN: 8px; --PWA_BROWSER_BOX_ICON_SIZE: 18px; --PWA_BROWSER_BOX_ICON_MARGIN: 10px; --PWA_BROWSER_BOX_TITLE_SIZE: 16px; --PWA_BROWSER_BOX_CONTENT_SIZE: 14px; --PWA_BROWSER_BOX_CONTENT_MARGIN: 30px; /* PWA Open App Steps */ --PWA_OPEN_APP_STEP_RADIUS: 15px; --PWA_OPEN_APP_STEP_PADDING: 25px; --PWA_OPEN_APP_STEP_MARGIN: 25px; --PWA_OPEN_APP_STEP_SECONDARY_BG: #f8f9fa; --PWA_OPEN_APP_STEP_SECONDARY_BORDER: 2px solid #28a745; --PWA_OPEN_APP_STEP_NUMBER_SIZE: 40px; --PWA_OPEN_APP_STEP_NUMBER_FONT_SIZE: 20px; --PWA_OPEN_APP_STEP_NUMBER_MARGIN: 15px; --PWA_OPEN_APP_STEP_TITLE_SIZE: 18px; --PWA_OPEN_APP_STEP_TITLE_WEIGHT: 600; --PWA_OPEN_APP_STEP_SUBTITLE_SIZE: 14px; --PWA_OPEN_APP_HELP_BOX_BG: var(--WHITE); --PWA_OPEN_APP_HELP_BOX_PADDING: 15px; --PWA_OPEN_APP_HELP_BOX_RADIUS: 10px; --PWA_OPEN_APP_HELP_BOX_MARGIN: 15px; --PWA_OPEN_APP_HELP_BOX_BORDER: 1px dashed #dee2e6; --PWA_OPEN_APP_HELP_TITLE_SIZE: 13px; --PWA_OPEN_APP_HELP_TITLE_COLOR: #666; --PWA_OPEN_APP_HELP_CONTENT_SIZE: 14px; --PWA_OPEN_APP_HELP_CONTENT_COLOR: #333; /* PWA App Icon */ --PWA_APP_ICON_SIZE: 22px; --PWA_APP_ICON_RADIUS: 6px; --PWA_APP_ICON_SHADOW: 0 2px 8px rgba(0,0,0,0.15); /* PWA Success Banner */ --PWA_SUCCESS_BANNER_TOP: 20px; --PWA_SUCCESS_BANNER_PADDING: 16px 24px; --PWA_SUCCESS_BANNER_RADIUS: 12px; --PWA_SUCCESS_BANNER_MAX_WIDTH: 90%; --PWA_SUCCESS_BANNER_ICON_SIZE: 18px; --PWA_SUCCESS_BANNER_ICON_MARGIN: 8px; --PWA_SUCCESS_BANNER_ANIMATION: slideDownSuccess 0.5s ease-out; /* PWA Safari Share Icon */ --PWA_SAFARI_SHARE_ICON_SIZE: 17px; --PWA_SAFARI_SHARE_ICON_MARGIN: 4px; /* PWA Responsive */ --PWA_BREAKPOINT_DESKTOP: 769px; --PWA_BREAKPOINT_MOBILE: 768px; /* PWA Common Values */ --PWA_FONT_FAMILY: 'Figtree', sans-serif; --PWA_Z_INDEX_MODAL_OVERLAY: 10002; --PWA_Z_INDEX_BANNER: 10000; --PWA_Z_INDEX_CLOSE_BTN: 10; /* PWA Common Spacings */ --PWA_SPACING_XXS: 4px; --PWA_SPACING_XS: 5px; --PWA_SPACING_SM: 6px; --PWA_SPACING_MD: 8px; --PWA_SPACING_LG: 10px; --PWA_SPACING_XL: 15px; --PWA_SPACING_2XL: 16px; --PWA_SPACING_3XL: 18px; --PWA_SPACING_4XL: 20px; /* PWA Common Sizes */ --PWA_WIDTH_FULL: 100%; --PWA_WIDTH_90: 90%; --PWA_WIDTH_ICON: 20px; --PWA_MAX_WIDTH_BANNER_INNER: 1200px; --PWA_MAX_WIDTH_INSTRUCTIONS_DESKTOP: 600px; --PWA_MAX_WIDTH_INSTRUCTIONS_MOBILE: 450px; --PWA_MAX_WIDTH_MODAL_MOBILE: 90%; --PWA_LINE_HEIGHT_TIGHT: 1; --PWA_LINE_HEIGHT_NORMAL: 1.6; --PWA_TEXT_SHADOW_NONE: none; /* PWA Opacity values */ --PWA_OPACITY_FULL: 1; --PWA_OPACITY_HIGH: 0.9; /* PWA Border radius values */ --PWA_RADIUS_CIRCLE: 50%; /* PWA Browser Edge color */ --PWA_BROWSER_BOX_BORDER_EDGE: #0078D4; /* PWA Modal Responsive Padding */ --PWA_MODAL_CONTENT_PADDING_MOBILE: 30px 20px; --PWA_INSTRUCTIONS_PADDING_DESKTOP: 30px; /* PWA Margin values */ --PWA_MARGIN_ZERO: 0; --PWA_MARGIN_AUTO: 0 auto; /* PWA Gap values */ --PWA_GAP_SM: 10px; /* ############################################################################################################################################################### FORMS UNIFIED VARIABLES ############################################################################################################################################################### */ /* Form containers */ --FORM_CONTAINER_MAX_WIDTH: 1300px; --FORM_CONTAINER_WIDTH: 90%; --FORM_CONTAINER_PADDING: 1.5rem 3rem; --FORM_CONTAINER_PADDING_MOBILE: 0.5rem 1.5rem; --FORM_CONTAINER_BORDER_RADIUS: var(--BUTTON_BORDER_RADIUS); --FORM_CONTAINER_SHADOW: 0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.2); --FORM_CONTAINER_BACKGROUND: linear-gradient(135deg, var(--COLOR_SURFACE_20) 0%, var(--COLOR_SURFACE_10) 100%); /* Form headers */ --FORM_HEADER_BACKGROUND: linear-gradient(to right, var(--COLOR_ACTION_40), var(--COLOR_ACTION_60)); --FORM_HEADER_PADDING: 2rem 1.5rem; --FORM_HEADER_TEXT_COLOR: var(--WHITE); --FORM_HEADER_TITLE_SIZE: 2.2rem; --FORM_HEADER_SUBTITLE_SIZE: 1.2rem; /* Form inputs */ --FORM_INPUT_BACKGROUND: var(--WHITE); --FORM_INPUT_BACKGROUND_DARK: #4a5568; --FORM_INPUT_BORDER_RADIUS: 12px; --FORM_INPUT_PADDING: 0.8rem 1rem; --FORM_INPUT_PADDING_WITH_ICON: 0.8rem 1rem 0.8rem 45px; --FORM_INPUT_FONT_SIZE: 1rem; --FORM_INPUT_BORDER_COLOR: transparent; --FORM_INPUT_BORDER_COLOR_FOCUS: var(--COLOR_ACTION_50); --FORM_INPUT_SHADOW: inset 4px 4px 8px rgba(0, 0, 0, 0.1), inset -4px -4px 8px rgba(255, 255, 255, 0.8), 4px 4px 10px rgba(0, 0, 0, 0.05); --FORM_INPUT_SHADOW_FOCUS: inset 2px 2px 5px rgba(0, 0, 0, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(255, 94, 0, 0.2); --FORM_INPUT_TEXT_COLOR: var(--COLOR_SURFACE_10); --FORM_INPUT_TEXT_COLOR_DARK: #e2e8f0; /* Form labels */ --FORM_LABEL_COLOR: var(--COLOR_SURFACE_70); --FORM_LABEL_FONT_WEIGHT: 500; --FORM_LABEL_MARGIN_BOTTOM: 0.5rem; --FORM_LABEL_FONT_SIZE: 1rem; /* Form icons */ --FORM_ICON_COLOR: var(--COLOR_ACTION_40); --FORM_ICON_COLOR_FOCUS: var(--COLOR_ACTION_60); --FORM_ICON_POSITION_LEFT: 15px; --FORM_ICON_SIZE: 20px; /* Form buttons */ --FORM_BUTTON_BACKGROUND: linear-gradient(135deg, var(--COLOR_ACTION_40), var(--COLOR_ACTION_60)); --FORM_BUTTON_COLOR: var(--WHITE); --FORM_BUTTON_HEIGHT: 50px; --FORM_BUTTON_FONT_SIZE: 1rem; --FORM_BUTTON_FONT_WEIGHT: 600; --FORM_BUTTON_BORDER_RADIUS: var(--BUTTON_BORDER_RADIUS); --FORM_BUTTON_SHADOW: 6px 6px 12px rgba(0, 0, 0, 0.25), -4px -4px 12px rgba(255, 255, 255, 0.1), inset 1px 1px 2px rgba(255, 255, 255, 0.2), inset 4px 4px 8px rgba(255, 255, 255, 0.2), inset -4px -4px 8px rgba(0, 0, 0, 0.2); --FORM_BUTTON_SHADOW_HOVER: 8px 8px 16px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.3); --FORM_BUTTON_SHADOW_ACTIVE: 3px 3px 6px rgba(0, 0, 0, 0.2), -2px -2px 6px rgba(255, 255, 255, 0.1), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.05); /* Form checkboxes */ --FORM_CHECKBOX_SIZE: 22px; --FORM_CHECKBOX_BORDER_COLOR: var(--COLOR_SURFACE_60); --FORM_CHECKBOX_BORDER_COLOR_CHECKED: var(--COLOR_ACTION_50); --FORM_CHECKBOX_BACKGROUND_CHECKED: var(--COLOR_ACTION_50); --FORM_CHECKBOX_BORDER_RADIUS: 4px; --FORM_CHECKBOX_CHECK_COLOR: var(--WHITE); --FORM_CHECKBOX_CHECK_SIZE: 22px; /* Form spacing */ --FORM_FIELD_MARGIN_BOTTOM: 1.5rem; --FORM_SECTION_MARGIN_BOTTOM: 2rem; /* Form errors */ --FORM_ERROR_COLOR: #dc3545; --FORM_ERROR_FONT_SIZE: 0.875rem; --FORM_ERROR_MARGIN_TOP: 0.25rem; --FORM_ERROR_BORDER_COLOR: #dc3545; --FORM_ERROR_SHADOW: inset 2px 2px 5px rgba(220, 53, 69, 0.1), inset -2px -2px 5px rgba(255, 255, 255, 0.8), 0 0 0 3px rgba(220, 53, 69, 0.2); /* Form alerts */ --FORM_ALERT_PADDING: 1.25rem 1.5rem 1.25rem 3rem; --FORM_ALERT_BORDER_RADIUS: 12px; --FORM_ALERT_MARGIN_BOTTOM: 1.5rem; --FORM_ALERT_FONT_WEIGHT: 500; --FORM_ALERT_FONT_SIZE: 1rem; --FORM_ALERT_SHADOW: 0 4px 12px rgba(0, 0, 0, 0.15); --FORM_ALERT_SUCCESS_BACKGROUND: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%); --FORM_ALERT_SUCCESS_COLOR: #155724; --FORM_ALERT_SUCCESS_BORDER: 4px solid #28a745; --FORM_ALERT_ERROR_BACKGROUND: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%); --FORM_ALERT_ERROR_COLOR: #721c24; --FORM_ALERT_ERROR_BORDER: 4px solid #dc3545; /* Form responsive breakpoints */ --FORM_BREAKPOINT_TABLET: 896px; --FORM_BREAKPOINT_MOBILE: 480px; --FORM_BREAKPOINT_SMALL_MOBILE: 320px; /* Form animations */ --FORM_TRANSITION_DURATION: 0.3s; --FORM_ANIMATION_DURATION: 0.8s; --FORM_ANIMATION_DELAY: 0.1s; }