<body class="bg-gradient-to-r from-violet-300 via-amber-200 to-violet-300 text-black flex flex-col justify-center items-center min-h-screen px-4 [&_*]:transition-all [&_*]:ease-in-out [&_*]:duration-500 X[&:has(button:focus-visible)_*]:!duration-150">
<!-- theme toggle radio -->
<input type="checkbox" id="theme" class="sr-only peer" checked>
<section class=" max-w-md size-24 rounded-3xl bg-white p-2 cursor-pointer shadow-xl origin-top relative flex flex-col items-center text-center gap-8 overflow-hidden relative
hover:p-4
[&:focus-within]:p-4
sm:hover:p-8
sm:[&:focus-within]:p-8
hover:size-[14rem]
[&:focus-within:size-[14rem]
sm:hover:size-[22rem]
sm:[&:focus-within]:size-[22rem]
[&:hover>div]:translate-y-0
[&:focus-within>div]:translate-y-0
[&:hover_img]:size-32
[&:focus-within_img]:size-32
// delays - hover only
[&:hover>div]:delay-500
[&:hover_img]:delay-500
[&:hover_hgroup]:delay-1000
[&:hover_#buttons]:delay-1000
// theme
peer-checked:bg-violet-300
peer-checked:delay-150
peer-checked:shadow-violet-950
">
<img src="https://i.pravatar.cc/120?img=21" class="size-20 rounded-2xl shadow-md shadow-violet-950" alt="Frances S. Cady">
<div class="space-y-4 translate-y-96 ">
<hgroup class="w-60 mx-auto delay-200 0">
<h2 class="font-semibold">Frances S. Cady</h2>
<p class="text-sm opacity-70 mb-8">Building nex-gen energy tech product at Company</p>
</hgroup>
<div id="buttons" class="grid min-[400px]:grid-cols-2 gap-4 delay-200
*:border-none
*:outline-none
*:ring-0
*:flex
*:items-center
*:justify-center
*:gap-2
*:rounded-full
*:text-xs
*:whitespace-nowrap
*:py-2
*:px-4
*:relative
*:isolate
[&>button>span]:text-base
first:[&>button>span]:translate-x-3
first:[&>button>span]:opacity-0
last:[&>button>span]:-translate-x-3
first:[&>button:hover>span]:!opacity-100
first:[&>button:focus-visible>span]:!opacity-100
[&>button:hover>span]:!translate-x-0
[&>button:focus-visible>span]:!translate-x-0
before:*:absolute
before:*:inset-0
before:*:rounded-full
before:*:bg-violet-400/50
before:*:transition-all
before:*:duration-300
before:*:-z-10
hover:before:*:-inset-2
focus-visible:before:*:-inset-2
after:*:absolute
after:*:inset-0
after:*:rounded-full
after:*:bg-amber-100
after:*:transition-all
after:*:duration-300
after:[&>button]:-z-10
">
<button type="button">
<span class="material-symbols-outlined">person_add</span>
<span>Follow</span>
</button>
<button type="button">
<span class="material-symbols-outlined">chat</span>
<span>Message</span>
</button>
</div>
</div>
</section>
<!-- theme toggle switch -->
<label for="theme" class="absolute top-5 grid [grid-template-areas:'stack'] place-items-center cursor-pointer w-10 h-10 rounded-full text-violet-700 transition z-10 border border-violet-500/50 hover:bg-amber-200 hover:scale-125 peer-focus-visible:bg-amber-200 peer-focus-visible:scale-125
*:[grid-area:stack]
*:text-lg
*:text-white
last:*:scale-0
first:*:text-violet-500
peer-checked:first:*:scale-0
peer-checked:last:*:scale-100
peer-checked:hover:bg-violet-600
">
<span class="material-symbols-outlined">dark_mode</span>
<span class="material-symbols-outlined">light_mode</span>
</label>
</div>
<!-- bg mask -->
<div id="theme-mask" class="fixed inset-0 -z-10 transition-all duration-500 ease-in-out
before:absolute
before:inset-[0_100%_0_0]
before:bg-gradient-to-r
before:from-violet-950
before:to-violet-800
before:-z-10
before:transition-all
before:duration-500
before:ease-in-out
peer-checked:before:inset-[0_50%_0_0]
after:absolute
after:inset-[0_0_0_100%]
after:bg-gradient-to-l
after:from-violet-950
after:to-violet-800
after:-z-10
after:transition-all
after:duration-500
after:ease-in-out
peer-checked:after:inset-[0_0_0_50%]
">
</div>
</body>// toggle theme switch if user prefers "dark"
let theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
if (theme == 'light') {
const maskEl = document.querySelector("#theme-mask");
// remove transition so user doesn't get flicker
maskEl.style.transition ="0ms";
document.querySelector("#theme").checked = false;
// add transition hack after short delay
setTimeout(() => maskEl.style.transition ="500ms",1000);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.