/** * ATS Design Tokens — WordPress bridge * * Generated from algotradingspace-ui/src/app/tailwind.css. * The Next.js app is the source of truth; see DESIGN.md at that repo root. * Regenerate rather than hand-editing, so platform. and the main site cannot drift. * * Light is :root, dark is .dark on — identical structure to the main site, * so a component styled here behaves the same on both properties. */ /* --------------------------------------------------------------- Structural tokens (theme-independent) --------------------------------------------------------------- */ :root { --font-sans: "Bahnschrift", ui-sans-serif, system-ui, sans-serif; --font-title: "Bahnschrift", ui-sans-serif, system-ui, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.75rem; --font-size-3xl: 2rem; --font-size-4xl: 3rem; --font-size-5xl: 3.75rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-2xl: 1400px; --transition-default: all 0.3s ease-out; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-brand: 0 5px 15px rgba(0, 171, 228, 0.3); --shadow-brand-lg: 0 10px 30px rgba(0, 171, 228, 0.2); --animate-float: floating 3s ease-in-out infinite alternate; --animate-rotate: rotate 10s linear infinite; --animate-fade-in-up: fadeInUp 0.6s ease-out forwards; --animate-fade-in: fadeIn 0.6s ease-out forwards; --animate-fade-in-down: fadeInDown 0.6s ease-out forwards; --animate-shimmer: shimmer 1.5s ease-in-out infinite; --animate-left-right: leftRight 3s ease-in-out infinite alternate; /* Data-dense scale for account, checkout and affiliate screens. Marketing pages keep the display scale above. */ --text-dense-title: 1.75rem; --text-dense-section: 1.125rem; --text-dense-body: 0.875rem; --text-dense-small: 0.8125rem; } /* --------------------------------------------------------------- Light theme (default) --------------------------------------------------------------- */ :root { --color-brand: #007bff; --color-brand-dark: #0062cc; --color-brand-accent: #00ff88; --color-brand-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); --color-brand-gradient-accent: linear-gradient(45deg, #00abe4, #00ff88); --gradient-btn: linear-gradient(135deg, #3b82f6, #2563eb); --gradient-btn-hover: linear-gradient(135deg, #2563eb, #1d4ed8); --color-brand-hover-border: rgba(0, 171, 228, 0.5); --color-brand-hover-shadow: rgba(0, 171, 228, 0.1); --color-secondary: #007bff; --color-tertiary: #E0FAF2; --color-tertiary-2: #F5F7FC; --color-tertiary-3: #F5F7FC; --color-tertiary-4: #6084E0; --color-body: #FFFFFF; --color-bg: #EFF1F5; --color-bg-trans: rgba(220, 228, 240, 0.28); --color-surface: #FFFFFF; --color-surface-2: #FFFFFF; --color-surface-alt: #EBF0F7; --color-surface-muted: #E5EAF3; --color-surface-deep: #124D6D; --color-surface-inverse: #FFFFFF; --color-surface-feature: #00150F; --color-surface-highlight: #E5FFAD; --color-surface-dark: #141821; --color-surface-warm: #FFF6E0; --color-surface-overlay: rgba(43, 40, 40, 0.15); --color-surface-danger: rgb(220, 53, 69); --color-surface-white: #ffffff; --color-surface-team: #d6e5ff; --color-bg-grad: #F5F7FA; --color-bg-grad-trans: rgba(240, 244, 250, 0.00); --color-bg-grad-2: #D0DFF5; --color-bg-grad-trans-2: rgba(200, 218, 245, 0.28); --color-bg-grad-3: #E2EAF4; --color-bg-grad-trans-3: rgba(220, 230, 245, 0.22); --color-bg-grad-4: rgba(0, 208, 148, 0.32); --color-bg-grad-trans-4: rgba(200, 220, 240, 0.00); --color-title: #0C263A; --color-title-alt: #0C263A; --color-text: #475569; --color-text-light: #556270; --color-text-muted: #64748B; --color-text-muted-2: #78879B; --color-border: #D1D9E6; --color-border-2: #D1D9E6; --color-border-3: #D1D9E6; --color-border-4: #D1D9E6; --color-border-5: #DEE4EE; --color-border-6: #C8E6DC; --color-border-7: #9DB9EE; --color-border-8: rgba(0, 0, 0, 0.08); --color-border-9: rgba(5, 0, 26, 0.12); --color-border-10: rgba(100, 100, 120, 0.12); --color-border-social: #D1D9E6; --color-border-social-2: #D8DFE8; --color-border-social-3: #D8DFE8; --color-header-bg: #0e352a; --color-header-bg-2: #093d47; --color-header-border: #EBE9E1; --color-header-border-2: rgba(255, 255, 255, 0.12); --color-footer-bg: #00150F; --color-form-border: #DCDFE8; --color-form-focus: #366CD5; --color-wh: #fff; --color-black: #000; --color-floating-border: rgba(0, 0, 0, 0.08); --color-floating-bg: rgba(255, 255, 255, 0.95); --color-floating-bg-2: rgba(255, 255, 255, 0.70); --color-service-border: #D1D9E6; --color-service-bg: #FFFFFF; --color-faq-btn-border: rgba(3, 49, 75, 0.1); --color-faq-bg: #FAFBFC; --color-extra-bg: #FAFBFC; --color-tag-bg: #EDFFFA; --color-section-bg: #EFF1F5; --color-section-bg-2: #F7F8FA; --color-account-bg: #EFF1F5; --color-account-bg-2: #F7F8FA; --color-pagination-bg: #E0FAF2; --color-shape: #B8CFEB; --color-shape-trans: rgba(0, 60, 120, 0.04); --color-shape-2: #D5E5F9; --color-shape-trans-2: rgba(0, 60, 120, 0.06); --color-arrow: #B5CAF2; --color-arrow-icon: #0A4FD5; --color-banner-bg: #0e241d; --color-about-shadow: #85F2D382; --color-cta-shadow: #45554b; --color-faq-shadow: #16d466; --color-error: #F04438; --color-warning: #F79009; --color-success: #12B76A; --color-danger: #FF0000; } /* --------------------------------------------------------------- Dark theme --------------------------------------------------------------- */ .dark { --color-brand: #00e68a; --color-brand-dark: #00b36b; --color-brand-accent: #00ff88; --color-brand-gradient: linear-gradient(45deg, #00abe4, #00ff88); --color-brand-gradient-accent: linear-gradient(45deg, #00abe4, #00ff88); --gradient-btn: linear-gradient(135deg, #3b82f6, #2563eb); --gradient-btn-hover: linear-gradient(135deg, #2563eb, #1d4ed8); --color-brand-hover-border: rgba(0, 171, 228, 0.5); --color-brand-hover-shadow: rgba(0, 171, 228, 0.1); --color-secondary: #8effff; --color-tertiary: #f7f7f7; --color-tertiary-2: #001A2E; --color-tertiary-3: #0E1828; --color-tertiary-4: #6084E0; --color-body: #080b14; --color-bg: rgba(220, 230, 248, 0.06); --color-bg-trans: rgba(220, 230, 248, 0.02); --color-surface: #0d1220; --color-surface-2: #0b101d; --color-surface-alt: #0f1525; --color-surface-muted: rgba(255, 255, 255, 0.06); --color-surface-deep: #124D6D; --color-surface-inverse: #000; --color-surface-feature: rgba(0, 20, 50, 0.6); --color-surface-highlight: #B4E058; --color-surface-dark: #141821; --color-surface-warm: #111827; --color-surface-overlay: rgba(30, 35, 50, 0.308); --color-surface-danger: rgb(220, 53, 69); --color-surface-white: #ffffff; --color-surface-team: #121828; --color-bg-grad: #0d1220; --color-bg-grad-trans: rgba(255, 255, 255, 0.00); --color-bg-grad-2: rgba(213, 229, 249, 0.16); --color-bg-grad-trans-2: rgba(255, 255, 255, 0.04); --color-bg-grad-3: rgba(13, 18, 32, 0.70); --color-bg-grad-trans-3: rgba(8, 11, 20, 0.00); --color-bg-grad-4: rgba(0, 120, 208, 0.24); --color-bg-grad-trans-4: rgba(0, 120, 208, 0.00); --color-title: #FFFFFF; --color-title-alt: #BBC2C7; --color-text: rgba(255, 255, 255, 0.6); --color-text-light: #FFFFFF; --color-text-muted: rgba(255, 255, 255, 0.6); --color-text-muted-2: rgba(255, 255, 255, 0.70); --color-border: rgba(255, 255, 255, 0.1); --color-border-2: rgba(255, 255, 255, 0.08); --color-border-3: #E6EDFB; --color-border-4: #1B2238; --color-border-5: rgba(255, 255, 255, 0.06); --color-border-6: rgba(255, 255, 255, 0.06); --color-border-7: #1a2538; --color-border-8: rgba(234, 219, 215, 0.06); --color-border-9: rgba(184, 182, 193, 0.12); --color-border-10: rgba(184, 182, 193, 0.12); --color-border-social: rgba(255, 255, 255, 0.1); --color-border-social-2: rgba(255, 255, 255, 0.1); --color-border-social-3: rgba(255, 255, 255, 0.1); --color-header-bg: #0e352a; --color-header-bg-2: #093d47; --color-header-border: rgba(255, 255, 255, 0.16); --color-header-border-2: rgba(255, 255, 255, 0.12); --color-footer-bg: #00150F; --color-form-border: rgba(220, 223, 232, 0.2); --color-form-focus: #366CD5; --color-wh: #1a1f2e; --color-black: #fff; --color-floating-border: rgba(0, 0, 0, 0.02); --color-floating-bg: rgba(20, 25, 45, 0.85); --color-floating-bg-2: rgba(255, 255, 255, 0.08); --color-service-border: #131927; --color-service-bg: #0f1525; --color-faq-btn-border: rgba(255, 255, 255, 0.08); --color-faq-bg: #0d1220; --color-extra-bg: #0f1525; --color-tag-bg: #090e1a; --color-section-bg: #0b101d; --color-section-bg-2: #080e18; --color-account-bg: #0b101d; --color-account-bg-2: #0d1220; --color-pagination-bg: #0b101d; --color-shape: rgba(255, 255, 255, 0.04); --color-shape-trans: rgba(255, 255, 255, 0.02); --color-shape-2: rgba(255, 255, 255, 0.06); --color-shape-trans-2: rgba(255, 255, 255, 0.03); --color-arrow: #2B3550; --color-arrow-icon: #fff; --color-banner-bg: #0e1a2e; --color-about-shadow: #8595F282; --color-cta-shadow: #454B60; --color-faq-shadow: #1666d48f; --color-error: #F04438; --color-warning: #F79009; --color-success: #12B76A; --color-danger: #FF0000; } /* --------------------------------------------------------------- Astra bridge Astra exposes nine global colour slots. Map them onto tokens so Astra's own components follow the design system instead of a second, hard-coded palette. --------------------------------------------------------------- */ :root { --ast-global-color-0: var(--color-brand); --ast-global-color-1: var(--color-brand-accent); --ast-global-color-2: var(--color-title); --ast-global-color-3: var(--color-text); --ast-global-color-4: var(--color-section-bg); --ast-global-color-5: var(--color-body); --ast-global-color-6: var(--color-border); --ast-global-color-7: var(--color-surface); --ast-global-color-8: var(--color-surface-alt); --ast-border-color: var(--color-border); --ast-comment-inputs-background: var(--color-surface); }