/* assets/styles/base/variables.css */ :root { /* layout */ --container-max: 1100px; /* radii */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; /* shadows */ --shadow-sm: 0 2px 6px rgba(2,6,23,0.06); --shadow-md: 0 10px 30px rgba(2,6,23,0.08); /* primary */ --primary-color: #1f5fe0; --color-primary: var(--primary-color); /* light (default) colors */ --color-bg: #f8fafc; --color-surface: #ffffff; --color-text: #111827; --color-muted: #6b7280; --color-border: #e5e7eb; /* aliases used throughout the project */ --bg-card: var(--color-surface); --bg-hover: #f3f4f6; --text-primary: var(--color-text); --text-secondary: var(--color-muted); --border-color: var(--color-border); } /* Thème sombre — activé quand */ :root[data-theme="dark"] { /* primary */ --primary-color: #3b82f6; --color-primary: var(--primary-color); /* dark colors */ --color-bg: #0b1220; /* page background */ --color-surface: #111827; /* surface / cards */ --color-text: #f9fafb; /* main text */ --color-muted: #9ca3af; /* secondary text */ --color-border: #263244; /* aliases */ --bg-card: #1f2937; /* used in several components */ --bg-hover: #374151; --text-primary: var(--color-text); --text-secondary: var(--color-muted); --border-color: var(--color-border); /* shadows adapted to dark */ --shadow-sm: 0 2px 8px rgba(2,6,23,0.6); --shadow-md: 0 10px 30px rgba(2,6,23,0.55); } /* Safe defaults for components that expect specific names */ [data-theme="light"] { --color-surface: var(--color-surface); } .page-3d { .page-3d { --page-perspective: 1200px; --page-tilt-x: 6deg; --page-tilt-y: -6deg; --page-raise: 24px; --page-shadow: 0 30px 60px rgba(2,6,23,0.45); --page-shadow-hover: 0 50px 90px rgba(2,6,23,0.55); perspective: var(--page-perspective); perspective-origin: 50% 20%; } /* wrapper card that will receive the 3D transform */ .page-3d__card { position: relative; background: var(--bg-card, var(--color-surface)); border-radius: var(--radius-md); box-shadow: var(--page-shadow); transform-style: preserve-3d; transition: transform 380ms cubic-bezier(.2,.9,.3,1), box-shadow 300ms; transform-origin: center; will-change: transform; overflow: hidden; } /* hover / focus effect */ .page-3d:hover .page-3d__card, .page-3d:focus-within .page-3d__card { transform: rotateX(var(--page-tilt-x)) rotateY(var(--page-tilt-y)) translateZ(var(--page-raise)); box-shadow: var(--page-shadow-hover); } /* subtle glossy layer to enhance depth */ .page-3d__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12)); transform: translateZ(calc(var(--page-raise) / 2)); pointer-events: none; } /* optional inner layers for parallax: use data-depth="10" (lower = closer) */ .page-3d__layer { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; } .page-3d__layer[data-depth="10"] { transform: translateZ(10px); } .page-3d__layer[data-depth="20"] { transform: translateZ(20px); } .page-3d__layer[data-depth="40"] { transform: translateZ(40px); } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { .page-3d__card, .page-3d__card::before { transition: none; transform: none; } .page-3d { perspective: none; } } }