>
/* Variables Globales & Thèmes */
:root {
--base-hue: 265;
--radius-base: .275rem;
--background-inset: oklch(.9764 .0013 var(--base-hue));
--background: oklch(100% 0 0);
--background-muted: oklch(.956 .002 var(--base-hue));
--white-fixed: oklch(100% 0 0);
--foreground: oklch(.1881 .006 var(--base-hue));
--foreground-muted: oklch(.5493 .0081 var(--base-hue));
--accent: oklch(69.96% .201959 44.4414);
--accent-secondary: oklch(50.96% .151959 44.4414);
--border: oklch(.4224 .0013 var(--base-hue) / .1);
--highlight: oklch(.4224 .0013 var(--base-hue));
/* Utilitaires spacing & fonts */
--spacing: .25rem;
--default-font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--text-base: 1rem;
}
.dark {
--background-inset: oklch(.2099 .0039 var(--base-hue));
--background: oklch(.2574 .0056 var(--base-hue));
--background-muted: oklch(.3017 .0073 var(--base-hue));
--foreground: oklch(.9674 .0013 var(--base-hue));
--foreground-muted: oklch(.669 .0107 var(--base-hue));
--accent: oklch(69.96% .181959 44.4414);
--accent-secondary: oklch(50.96% .131959 44.4414);
--border: oklch(.999 .013 var(--base-hue) / .05);
--highlight: oklch(.999 .013 var(--base-hue));
color-scheme: dark;
}
/* Reset & Base */
*, :after, :before {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
outline-offset: 2px;
outline: 2px solid #0000;
transition: outline-color .15s ease-out, outline-offset .15s ease-out;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--default-font-family);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
gap: 2rem;
flex-direction: column;
}
/* Classes utilitaires extraites de ton code */
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.flex { display: flex; }
.grid { display: grid; }
.items-start { align-items: flex-start; }
.justify-start { justify-content: flex-start; }
.rounded-lg { border-radius: calc(var(--radius-base) * 4); }
.rounded-md { border-radius: calc(var(--radius-base) * 3); }
.p-4 { padding: calc(var(--spacing) * 4); }
.p-1\.5 { padding: calc(var(--spacing) * 1.5); }
.bg-background { background-color: var(--background); }
.bg-background-inset { background-color: var(--background-inset); }
/* L'effet Inset spécifique */
.inset-shadow {
isolation: isolate;
box-shadow:
inset 0px 1px 1px -.5px #0000000f,
inset 0px 3px 3px -1.5px #0000000f,
inset 0px 6px 6px -3px #0000000f,
inset 0 -1px #ffffff14,
inset 0 0 0 1px oklch(from var(--highlight) l c h / 10%);
position: relative;
}
/* La carte principale */
.card {
width: 320px;
box-shadow:
0 -1px #ffffff0f,
0 4px 8px #0000000d,
0 0 0 1px oklch(from var(--highlight) l c h / 10%),
0 1px 6px -4px #000;
}
.toggle-btn {
padding: 0.5rem 1rem;
border-radius: var(--radius-base);
background: var(--accent);
color: white;
cursor: pointer;
font-weight: bold;
border: 1px solid var(--border);
}
::selection {
background-color: oklch(from var(--accent) l c h / .25);
color: var(--foreground);
}
Switcher Mode Clair / Sombre
Demo Card
Ceci est une carte utilisant les styles d'ombre interne (inset) et les couleurs OKLCH de ton extrait.
#OKLCH #CSS_Inset