redesign the homepage
Build & Deploy / Build & Push Docker Image (push) Failing after 47s
Build & Deploy / Deploy to VPS (push) Has been skipped
Test / API Unit Tests (push) Failing after 5m4s
Test / Marketplace Unit Tests (push) Failing after 4m55s
Test / Admin Unit Tests (push) Successful in 9m37s
Test / Dashboard Unit Tests (push) Successful in 9m37s
Test / API Integration Tests (push) Successful in 9m54s
Build & Deploy / Build & Push Docker Image (push) Failing after 47s
Build & Deploy / Deploy to VPS (push) Has been skipped
Test / API Unit Tests (push) Failing after 5m4s
Test / Marketplace Unit Tests (push) Failing after 4m55s
Test / Admin Unit Tests (push) Successful in 9m37s
Test / Dashboard Unit Tests (push) Successful in 9m37s
Test / API Integration Tests (push) Successful in 9m54s
This commit is contained in:
root
@@ -0,0 +1,127 @@
|
||||
/*
|
||||
* Phase 11 component-facing token layer.
|
||||
* Raw palette values remain in the immutable Phase 9 token source. Components consume only
|
||||
* the semantic aliases below. Added roles are documented in docs/TOKEN_IMPLEMENTATION_v1.0.md.
|
||||
*/
|
||||
:root {
|
||||
--surface-page: var(--color-canvas);
|
||||
--surface-primary: var(--color-surface);
|
||||
--surface-elevated: var(--color-surface-raised);
|
||||
--surface-muted: var(--color-surface-muted);
|
||||
--surface-strong: var(--color-surface-strong);
|
||||
--text-primary: var(--color-text);
|
||||
--text-secondary: var(--color-text-muted);
|
||||
--text-subdued: var(--color-gray-500);
|
||||
--text-inverse: var(--color-on-inverse);
|
||||
--border-standard: var(--color-border);
|
||||
--border-strong: var(--color-border-strong);
|
||||
--interactive-primary: var(--color-action-primary);
|
||||
--interactive-primary-hover: var(--color-action-primary-hover);
|
||||
--interactive-conversion: var(--color-action-conversion);
|
||||
--interactive-conversion-hover: var(--color-action-conversion-hover);
|
||||
--interactive-danger: var(--color-red-700);
|
||||
--link-default: var(--color-action-primary);
|
||||
--link-hover: var(--color-action-primary-hover);
|
||||
--focus-ring: var(--color-focus);
|
||||
--status-success-surface: var(--color-green-100);
|
||||
--status-success-text: var(--color-green-700);
|
||||
--status-warning-surface: var(--color-amber-100);
|
||||
--status-warning-text: var(--color-amber-800);
|
||||
--status-error-surface: var(--color-red-100);
|
||||
--status-error-text: var(--color-red-700);
|
||||
--status-info-surface: var(--color-soft-blue);
|
||||
--status-info-text: var(--color-blue-800);
|
||||
--overlay-scrim: color-mix(in srgb, var(--color-navy-950) 72%, transparent);
|
||||
--control-disabled-surface: var(--color-gray-100);
|
||||
--control-disabled-text: var(--color-gray-600);
|
||||
--selection-surface: var(--color-blue-200);
|
||||
--selection-text: var(--color-gray-900);
|
||||
--skeleton-base: var(--color-surface-strong);
|
||||
--skeleton-highlight: var(--color-surface-raised);
|
||||
--shadow-subtle: 0 1px 2px var(--shadow-color);
|
||||
--shadow-card: 0 20px 60px var(--shadow-color);
|
||||
--shadow-overlay: 0 28px 80px var(--shadow-color);
|
||||
--container-wide: var(--size-container-max);
|
||||
--container-content: 960px;
|
||||
--container-reading: 720px;
|
||||
--layout-gutter: clamp(var(--space-4), 4vw, var(--space-10));
|
||||
--section-space: clamp(var(--space-12), 8vw, var(--space-24));
|
||||
--header-min-block-size: 76px;
|
||||
--header-offset: 92px;
|
||||
--layer-base: 0;
|
||||
--layer-sticky: 100;
|
||||
--layer-overlay: 500;
|
||||
--layer-skip-link: 1000;
|
||||
--opacity-disabled: 0.62;
|
||||
--type-display-size: clamp(2.25rem, 6vw, 4.75rem);
|
||||
--type-heading-1-size: clamp(2rem, 5vw, 4rem);
|
||||
--type-heading-2-size: clamp(1.75rem, 3vw, 2.75rem);
|
||||
--type-heading-3-size: clamp(1.25rem, 2vw, 1.75rem);
|
||||
--type-body-large-size: clamp(1.0625rem, 1.5vw, 1.25rem);
|
||||
--type-body-size: 1rem;
|
||||
--type-label-size: 0.875rem;
|
||||
--type-caption-size: 0.8125rem;
|
||||
--line-display: 1.05;
|
||||
--line-heading: 1.18;
|
||||
--line-body: 1.65;
|
||||
--line-arabic-body: 1.85;
|
||||
--tracking-display: -0.035em;
|
||||
--tracking-label: 0.04em;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--text-subdued: var(--color-gray-300);
|
||||
--status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
|
||||
--status-success-text: var(--color-green-100);
|
||||
--status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
|
||||
--status-warning-text: var(--color-amber-100);
|
||||
--status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
|
||||
--status-error-text: var(--color-red-100);
|
||||
--status-info-text: var(--color-blue-100);
|
||||
--control-disabled-surface: var(--color-navy-800);
|
||||
--control-disabled-text: var(--color-gray-300);
|
||||
--selection-surface: var(--color-blue-800);
|
||||
--selection-text: var(--color-gray-25);
|
||||
}
|
||||
|
||||
/* CSS-only fallback for system theme when JavaScript is unavailable or delayed. */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html[data-theme-preference='system'] {
|
||||
--surface-page: var(--color-navy-950);
|
||||
--surface-primary: var(--color-navy-900);
|
||||
--surface-elevated: var(--color-navy-850);
|
||||
--surface-muted: var(--color-navy-900);
|
||||
--surface-strong: var(--color-navy-800);
|
||||
--text-primary: var(--color-blue-50);
|
||||
--text-secondary: var(--color-gray-300);
|
||||
--text-subdued: var(--color-gray-300);
|
||||
--text-inverse: var(--color-navy-950);
|
||||
--border-standard: var(--color-navy-800);
|
||||
--border-strong: var(--color-gray-600);
|
||||
--interactive-primary: var(--color-blue-200);
|
||||
--interactive-primary-hover: var(--color-blue-100);
|
||||
--interactive-conversion: var(--color-orange-400);
|
||||
--interactive-conversion-hover: var(--color-orange-100);
|
||||
--link-default: var(--color-blue-200);
|
||||
--link-hover: var(--color-blue-100);
|
||||
--focus-ring: var(--color-orange-400);
|
||||
--status-success-surface: color-mix(in srgb, var(--color-green-700) 24%, var(--color-navy-900));
|
||||
--status-success-text: var(--color-green-100);
|
||||
--status-warning-surface: color-mix(in srgb, var(--color-amber-800) 30%, var(--color-navy-900));
|
||||
--status-warning-text: var(--color-amber-100);
|
||||
--status-error-surface: color-mix(in srgb, var(--color-red-700) 28%, var(--color-navy-900));
|
||||
--status-error-text: var(--color-red-100);
|
||||
--status-info-surface: var(--color-navy-800);
|
||||
--status-info-text: var(--color-blue-100);
|
||||
--control-disabled-surface: var(--color-navy-800);
|
||||
--control-disabled-text: var(--color-gray-300);
|
||||
--selection-surface: var(--color-blue-800);
|
||||
--selection-text: var(--color-gray-25);
|
||||
--skeleton-base: var(--color-navy-800);
|
||||
--skeleton-highlight: var(--color-navy-850);
|
||||
--shadow-subtle: 0 1px 2px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
|
||||
--shadow-card: 0 20px 60px color-mix(in srgb, var(--color-navy-950) 70%, transparent);
|
||||
--shadow-overlay: 0 28px 80px color-mix(in srgb, var(--color-navy-950) 78%, transparent);
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-inline-size: 320px;
|
||||
background: var(--surface-page);
|
||||
color: var(--text-primary);
|
||||
color-scheme: light;
|
||||
scroll-behavior: smooth;
|
||||
scroll-padding-block-start: var(--header-offset);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
min-block-size: 100dvh;
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
background: var(--surface-page);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-latin);
|
||||
font-size: var(--type-body-size);
|
||||
line-height: var(--line-body);
|
||||
}
|
||||
|
||||
body[data-navigation-open='true'] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html[lang='ar'] body {
|
||||
font-family: var(--font-arabic);
|
||||
line-height: var(--line-arabic-body);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
select,
|
||||
a {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
img,
|
||||
picture,
|
||||
svg,
|
||||
video {
|
||||
display: block;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
line-height: var(--line-heading);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
p {
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-default);
|
||||
text-underline-offset: 0.18em;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--selection-surface);
|
||||
color: var(--selection-text);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--focus-ring);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
:target {
|
||||
scroll-margin-block-start: var(--header-offset);
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
z-index: var(--layer-skip-link);
|
||||
inset-block-start: var(--space-2);
|
||||
inset-inline-start: var(--space-2);
|
||||
padding-block: var(--space-3);
|
||||
padding-inline: var(--space-4);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--interactive-primary);
|
||||
color: var(--text-inverse);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
transform: translateY(-160%);
|
||||
transition: transform var(--duration-fast) var(--easing-productive);
|
||||
}
|
||||
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
inline-size: 1px;
|
||||
block-size: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
clip-path: inset(50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[aria-disabled='true'] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
bdi,
|
||||
[data-bidi-isolate='true'] {
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:focus-visible {
|
||||
outline: 3px solid CanvasText;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
border: 1px solid CanvasText;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
:root {
|
||||
--color-blue-50: #eff6ff;
|
||||
--color-blue-100: #dbeafe;
|
||||
--color-blue-200: #bfdbfe;
|
||||
--color-blue-500: #2874e8;
|
||||
--color-blue-600: #1b5dd8;
|
||||
--color-blue-700: #174bb5;
|
||||
--color-blue-800: #183d88;
|
||||
--color-orange-100: #ffedd5;
|
||||
--color-orange-400: #fb923c;
|
||||
--color-orange-600: #ea580c;
|
||||
--color-orange-700: #c2410c;
|
||||
--color-navy-950: #081426;
|
||||
--color-navy-900: #0d1b2e;
|
||||
--color-navy-850: #11233b;
|
||||
--color-navy-800: #162b46;
|
||||
--color-gray-25: #fbfdff;
|
||||
--color-gray-50: #f7f9fc;
|
||||
--color-gray-100: #eef2f7;
|
||||
--color-gray-200: #dbe3ed;
|
||||
--color-gray-300: #c6d0dc;
|
||||
--color-gray-500: #64748b;
|
||||
--color-gray-600: #475569;
|
||||
--color-gray-700: #334155;
|
||||
--color-gray-800: #1e293b;
|
||||
--color-gray-900: #0f172a;
|
||||
--color-green-100: #dcfce7;
|
||||
--color-green-700: #15803d;
|
||||
--color-amber-100: #fef3c7;
|
||||
--color-amber-800: #92400e;
|
||||
--color-red-100: #fee2e2;
|
||||
--color-red-700: #b91c1c;
|
||||
--space-0: 0px;
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-7: 28px;
|
||||
--space-8: 32px;
|
||||
--space-9: 36px;
|
||||
--space-10: 40px;
|
||||
--space-11: 44px;
|
||||
--space-12: 48px;
|
||||
--space-13: 52px;
|
||||
--space-14: 56px;
|
||||
--space-15: 60px;
|
||||
--space-16: 64px;
|
||||
--space-17: 68px;
|
||||
--space-18: 72px;
|
||||
--space-19: 76px;
|
||||
--space-20: 80px;
|
||||
--space-21: 84px;
|
||||
--space-22: 88px;
|
||||
--space-23: 92px;
|
||||
--space-24: 96px;
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 24px;
|
||||
--radius-xl: 32px;
|
||||
--radius-pill: 999px;
|
||||
--size-touch-min: 44px;
|
||||
--size-container-max: 1280px;
|
||||
--duration-fast: 120ms;
|
||||
--duration-standard: 160ms;
|
||||
--duration-overlay: 220ms;
|
||||
--easing-standard: ease;
|
||||
--easing-productive: cubic-bezier(0.2, 0, 0, 1);
|
||||
--font-latin: Inter Variable, Inter, Arial, sans-serif;
|
||||
--font-arabic: Noto Sans Arabic, Arial, sans-serif;
|
||||
--breakpoint-medium: 768px;
|
||||
--breakpoint-wide: 1120px;
|
||||
}
|
||||
|
||||
html[data-theme='light'] {
|
||||
--color-canvas: var(--color-gray-25);
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-raised: #ffffff;
|
||||
--color-surface-muted: #f2f6fb;
|
||||
--color-surface-strong: #e8f0fa;
|
||||
--color-text: #102035;
|
||||
--color-text-muted: #52647a;
|
||||
--color-border: #d8e2ee;
|
||||
--color-border-strong: #bdcad9;
|
||||
--color-action-primary: var(--color-blue-700);
|
||||
--color-action-primary-hover: var(--color-blue-800);
|
||||
--color-action-conversion: var(--color-orange-700);
|
||||
--color-action-conversion-hover: #9a3412;
|
||||
--color-focus: #f97316;
|
||||
--color-on-inverse: #f8fafc;
|
||||
--color-soft-blue: #eef5ff;
|
||||
--color-soft-orange: #fff7ed;
|
||||
--shadow-color: rgba(8, 20, 38, 0.12);
|
||||
color-scheme: light;
|
||||
}
|
||||
html[data-theme='dark'] {
|
||||
--color-canvas: var(--color-navy-950);
|
||||
--color-surface: var(--color-navy-900);
|
||||
--color-surface-raised: var(--color-navy-850);
|
||||
--color-surface-muted: #0b1a2d;
|
||||
--color-surface-strong: #172d48;
|
||||
--color-text: #eef5ff;
|
||||
--color-text-muted: #adbed2;
|
||||
--color-border: #263c56;
|
||||
--color-border-strong: #3a536e;
|
||||
--color-action-primary: #76a9ff;
|
||||
--color-action-primary-hover: #9bc2ff;
|
||||
--color-action-conversion: var(--color-orange-400);
|
||||
--color-action-conversion-hover: #fdba74;
|
||||
--color-focus: var(--color-orange-400);
|
||||
--color-on-inverse: var(--color-navy-950);
|
||||
--color-soft-blue: #10284a;
|
||||
--color-soft-orange: #3a2015;
|
||||
--shadow-color: rgba(0, 0, 0, 0.36);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user