223 lines
17 KiB
HTML
223 lines
17 KiB
HTML
<!DOCTYPE html><html lang="en" style=""><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet"><link href="https://fonts.googleapis.com" rel="preconnect"><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"><link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap" rel="stylesheet"><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: 'class', theme: { extend: { colors: { 'on-tertiary-container': '#e1f9db', 'surface-container': '#f1ede6', 'on-primary-container': '#ffefe1', 'primary-fixed-dim': '#d9c3ac', 'tertiary-fixed-dim': '#b5cdb0', 'surface': '#fdf9f2', 'on-secondary-fixed-variant': '#713714', 'surface-container-lowest': '#ffffff', 'error-container': '#ffdad6', 'primary': '#635341', 'outline-variant': '#d0c4ba', 'tertiary': '#465b44', 'surface-dim': '#dddad3', 'primary-container': '#7d6b58', 'outline': '#7f756d', 'on-error-container': '#93000a', 'surface-bright': '#fdf9f2', 'background': '#fdf9f2', 'secondary-container': '#feaa7f', 'tertiary-container': '#5e745c', 'surface-tint': '#6c5b49', 'on-secondary-container': '#783d1a', 'on-primary-fixed-variant': '#544433', 'on-primary-fixed': '#25190b', 'tertiary-fixed': '#d1e9cc', 'on-error': '#ffffff', 'on-secondary': '#ffffff', 'on-tertiary-fixed-variant': '#374c36', 'on-surface': '#1c1c18', 'surface-container-high': '#ece8e1', 'secondary': '#8e4d2a', 'secondary-fixed-dim': '#ffb691', 'secondary-fixed': '#ffdbcb', 'inverse-surface': '#31302c', 'inverse-on-surface': '#f4f0e9', 'on-primary': '#ffffff', 'primary-fixed': '#f6dfc7', 'on-surface-variant': '#4d453e', 'surface-container-highest': '#e6e2db', 'on-tertiary-fixed': '#0d200d', 'on-secondary-fixed': '#341100', 'on-background': '#1c1c18', 'surface-variant': '#e6e2db', 'on-tertiary': '#ffffff', 'error': '#ba1a1a', 'inverse-primary': '#d9c3ac', 'surface-container-low': '#f7f3ec' }, borderRadius: { DEFAULT: '1rem', lg: '2rem', xl: '3rem', full: '9999px' }, spacing: { 'space-xs': '0.25rem', 'margin': '1.5rem', 'gutter': '1rem', 'space-xl': '2.5rem', 'margin-mobile': '1.25rem', 'gutter-mobile': '0.75rem', 'space-sm': '0.5rem', 'space-lg': '1.5rem', 'space-md': '1rem' }, fontFamily: { 'label-lg': ['Plus Jakarta Sans'], 'label-sm': ['Plus Jakarta Sans'], 'headline-xl-mobile': ['Newsreader'], 'body-lg': ['Plus Jakarta Sans'], 'body-sm': ['Plus Jakarta Sans'], 'headline-lg-mobile': ['Newsreader'], 'headline-md': ['Newsreader'], 'headline-lg': ['Newsreader'], 'body-md': ['Plus Jakarta Sans'], 'headline-xl': ['Newsreader'], 'label-md': ['Plus Jakarta Sans'] }, fontSize: { 'label-lg': ['15px', { lineHeight: '20px', letterSpacing: '0.01em', fontWeight: '600' }], 'label-sm': ['11px', { lineHeight: '16px', letterSpacing: '0.04em', fontWeight: '600' }], 'headline-xl-mobile': ['32px', { lineHeight: '40px', letterSpacing: '-0.01em', fontWeight: '400' }], 'body-lg': ['18px', { lineHeight: '28px', fontWeight: '400' }], 'body-sm': ['14px', { lineHeight: '20px', fontWeight: '400' }], 'headline-lg-mobile': ['26px', { lineHeight: '34px', letterSpacing: '0em', fontWeight: '400' }], 'headline-md': ['22px', { lineHeight: '30px', fontWeight: '400' }], 'headline-lg': ['30px', { lineHeight: '38px', letterSpacing: '-0.01em', fontWeight: '400' }], 'body-md': ['16px', { lineHeight: '24px', fontWeight: '400' }], 'headline-xl': ['40px', { lineHeight: '48px', letterSpacing: '-0.02em', fontWeight: '400' }], 'label-md': ['13px', { lineHeight: '18px', letterSpacing: '0.02em', fontWeight: '500' }] } } } };</script><style>@layer base { html, body { width: 100vw; margin: 0; padding: 0; } body { overscroll-behavior: none; } .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); } .pt-safe { padding-top: env(safe-area-inset-top, 0px); } main > :first-child { margin-top: 0 !important; } main > :last-child { margin-bottom: 0 !important; } } ::-webkit-scrollbar { display: none; }</style></head><body class="bg-surface font-body-md text-body-md text-on-surface min-h-screen flex flex-col pt-safe pb-safe"><main class="flex-1 flex flex-col relative w-full bg-surface"><div class="flex flex-col w-full px-margin-mobile pb-space-lg select-none">
|
||
<!-- Top Subtle Brand Navigation -->
|
||
<header class="flex items-center justify-between w-full pt-space-xs pb-space-md">
|
||
<div class="flex items-center gap-space-sm">
|
||
<img alt="Values Sort Emblem" class="w-8 h-8 rounded-full shadow-sm object-cover" src="https://lh3.googleusercontent.com/aida/AEtjO1VxhUd_UEQbNaJg7xz-AiOrtZWLiZw7oiFfgI1iGc4Ag2ZSYEnTYF5NR-_fX5fUGLeepg5mkonGjOR6YHa8M8yyNFuATrjW9mPC6x2-vKmbEJcHjBBLGkpOS7K6xhYyywXBgsdSreZcpJKeqZnLlO4wl5TMdHrEjkAUmiOLwouqlqtRx9PwJhZ26tf1an8bI8c8QO6wdhCvMD1L757xSkIFnXkAyvRbwt-YkTQcykj8FJaDytqPf0zYxA">
|
||
<span class="font-label-sm text-label-sm tracking-widest uppercase text-on-surface-variant">VALUES SORT</span>
|
||
</div>
|
||
</header>
|
||
<!-- Central Tactile Cards Composition -->
|
||
<section class="relative w-full py-space-sm flex items-center justify-center overflow-hidden my-space-xs">
|
||
<!-- Ambient organic gradient glow -->
|
||
<div class="absolute inset-0 bg-gradient-to-b from-primary/5 via-tertiary/5 to-transparent rounded-lg blur-2xl pointer-events-none"></div>
|
||
<div class="relative w-full max-w-[320px] h-[210px] flex items-center justify-center">
|
||
<!-- Background Card 1 (Left Tilt: Curiosity) -->
|
||
<div class="absolute w-[180px] h-[135px] rounded-lg p-space-md bg-surface-container shadow-sm -rotate-12 -translate-x-12 translate-y-3 transition-transform duration-500 ease-out hover:-rotate-14 hover:-translate-y-1">
|
||
<span class="font-label-sm text-label-sm text-outline uppercase tracking-wider block mb-1">Inquiry</span>
|
||
<h4 class="font-headline-md text-headline-md text-on-surface mb-1 leading-none">Curiosity</h4>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant text-[11px] leading-tight line-clamp-2">Seeking wonder, exploring questions without immediate answers.</p>
|
||
</div>
|
||
<!-- Background Card 2 (Right Tilt: Connection) -->
|
||
<div class="absolute w-[180px] h-[135px] rounded-lg p-space-md bg-surface-container shadow-sm rotate-12 translate-x-12 translate-y-2 transition-transform duration-500 ease-out hover:rotate-14 hover:-translate-y-1">
|
||
<span class="font-label-sm text-label-sm text-outline uppercase tracking-wider block mb-1">Belonging</span>
|
||
<h4 class="font-headline-md text-headline-md text-on-surface mb-1 leading-none">Connection</h4>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant text-[11px] leading-tight line-clamp-2">Nurturing deep kinship and seeing others as they truly are.</p>
|
||
</div>
|
||
<!-- Foreground Card 3 (Elevated Hero Card: Authenticity) -->
|
||
<div class="relative z-10 w-[210px] h-[155px] rounded-lg p-space-md bg-surface-container-lowest shadow-md rotate-1 translate-y-1 transition-transform duration-500 hover:rotate-0 hover:scale-105 cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<span class="font-label-sm text-label-sm text-secondary tracking-widest uppercase">Core Ground</span>
|
||
<span class="material-symbols-outlined text-[16px] text-primary" style="font-variation-settings: "FILL" 1;">spa</span>
|
||
</div>
|
||
<h3 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface mb-1">Authenticity</h3>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant leading-snug">Living in honest alignment with who you are, without performance.</p>
|
||
<div class="mt-3 flex items-center gap-1.5">
|
||
<span class="h-1 w-6 rounded-full bg-secondary"></span>
|
||
<span class="h-1 w-1.5 rounded-full bg-surface-container-highest"></span>
|
||
<span class="h-1 w-1.5 rounded-full bg-surface-container-highest"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Editorial Headline & Thoughtful Copy -->
|
||
<section class="flex flex-col text-center px-1 mt-space-sm mb-space-md">
|
||
<h1 class="font-headline-xl-mobile text-headline-xl-mobile text-on-surface tracking-tight mb-space-xs">
|
||
Discover what matters most to you
|
||
</h1>
|
||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed px-1">
|
||
Through a gentle, guided card-sort practice, clarify your intrinsic values and illuminate the principles that guide your everyday decisions.
|
||
</p>
|
||
<!-- Introspective Trust & Rhythm Metadata -->
|
||
<div class="flex items-center justify-center flex-wrap gap-x-2 gap-y-1 mt-space-md text-on-surface-variant font-label-md text-label-md">
|
||
<div class="flex items-center gap-1">
|
||
<span class="material-symbols-outlined text-[15px] text-tertiary">schedule</span>
|
||
<span class="">10–15 min</span>
|
||
</div>
|
||
<span class="text-outline-variant">•</span>
|
||
<div class="flex items-center gap-1">
|
||
<span class="material-symbols-outlined text-[15px] text-tertiary">pace</span>
|
||
<span class="">Self-paced</span>
|
||
</div>
|
||
<span class="text-outline-variant">•</span>
|
||
<div class="flex items-center gap-1">
|
||
<span class="material-symbols-outlined text-[15px] text-tertiary">lock</span>
|
||
<span class="">Private & reflective</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Primary Actions / Grounded CTAs -->
|
||
<footer class="mt-auto flex flex-col gap-space-xs pt-space-xs">
|
||
<button class="w-full py-2.5 px-4 rounded-full bg-transparent text-on-surface-variant font-label-md text-label-md active:bg-surface-container transition-colors flex items-center justify-center gap-1.5" id="open-sheet-btn" type="button">
|
||
<span class="">How this practice works</span>
|
||
<span class="material-symbols-outlined text-[18px]">info</span>
|
||
</button><button class="w-full py-3.5 px-6 rounded-full bg-primary text-on-primary font-label-lg text-label-lg shadow-sm active:scale-[0.985] active:bg-primary-container transition-all flex items-center justify-center gap-2" id="start-btn" style="opacity: 1;" type="button">
|
||
<span class="">Begin Reflection</span>
|
||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||
</button>
|
||
<!-- Anchored quiet psychological micro-copy -->
|
||
</footer>
|
||
</div>
|
||
<!-- Serene Bottom Sheet / Explanation Drawer Modal -->
|
||
<div aria-labelledby="sheet-title" aria-modal="true" class="fixed inset-0 z-50 pointer-events-none flex flex-col justify-end transition-opacity duration-300 opacity-0" id="explanation-sheet-container" role="dialog">
|
||
<!-- Backdrop -->
|
||
<div class="absolute inset-0 bg-inverse-surface/40 backdrop-blur-[2px] transition-opacity duration-300 cursor-pointer opacity-0" id="sheet-backdrop"></div>
|
||
<!-- Sheet Panel -->
|
||
<div class="relative w-full max-w-lg mx-auto bg-surface rounded-t-[2rem] p-space-lg shadow-2xl transition-transform duration-300 ease-out transform translate-y-full flex flex-col max-h-[85vh] overflow-y-auto border-t border-outline-variant/30" id="sheet-panel">
|
||
<!-- Drag Handle Indicator -->
|
||
<div class="w-10 h-1 rounded-full bg-outline-variant/60 mx-auto mb-space-md shrink-0"></div>
|
||
<!-- Sheet Header -->
|
||
<div class="flex items-center justify-between pb-space-sm border-b border-outline-variant/20 mb-space-md">
|
||
<div class="flex items-center gap-2">
|
||
<span class="material-symbols-outlined text-[20px] text-tertiary" style="font-variation-settings: 'FILL' 1;">nature_people</span>
|
||
<h3 class="font-headline-md text-headline-md text-on-surface" id="sheet-title">The Practice of Sorting</h3>
|
||
</div>
|
||
<button aria-label="Close details" class="w-8 h-8 rounded-full flex items-center justify-center text-on-surface-variant hover:bg-surface-container active:scale-95 transition-all" id="close-sheet-btn" type="button">
|
||
<span class="material-symbols-outlined text-[20px]">close</span>
|
||
</button>
|
||
</div>
|
||
<!-- Explanation Steps -->
|
||
<div class="flex flex-col gap-space-md">
|
||
<p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
|
||
Grounded in contemplative psychology, this sorting practice helps clarify the core tenets that give your life meaning and direction.
|
||
</p>
|
||
<ol class="space-y-space-md my-space-xs">
|
||
<!-- Step 1 -->
|
||
<li class="flex items-start gap-space-sm">
|
||
<div class="w-6 h-6 rounded-full bg-surface-container-high text-primary font-label-md text-label-md flex items-center justify-center shrink-0 mt-0.5 font-semibold">
|
||
1
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<h4 class="font-label-lg text-label-lg text-on-surface font-semibold">One card at a time</h4>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mt-0.5">
|
||
Review cards with diverse values one at a time, checking in with your intuition without overthinking.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<!-- Step 2 -->
|
||
<li class="flex items-start gap-space-sm">
|
||
<div class="w-6 h-6 rounded-full bg-surface-container-high text-secondary font-label-md text-label-md flex items-center justify-center shrink-0 mt-0.5 font-semibold">
|
||
2
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<h4 class="font-label-lg text-label-lg text-on-surface font-semibold">Sort into intuitive piles</h4>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mt-0.5">
|
||
Sort each into: <strong class="font-medium text-on-surface">‘Always Important’</strong>, <strong class="font-medium text-on-surface">‘Sometimes Important’</strong>, and <strong class="font-medium text-on-surface">‘Not as Important’</strong>.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<!-- Step 3 -->
|
||
<li class="flex items-start gap-space-sm">
|
||
<div class="w-6 h-6 rounded-full bg-surface-container-high text-tertiary font-label-md text-label-md flex items-center justify-center shrink-0 mt-0.5 font-semibold">
|
||
3
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<h4 class="font-label-lg text-label-lg text-on-surface font-semibold">Distill your top 5</h4>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mt-0.5">
|
||
Narrow down to your core top 5 values to illuminate and guide your daily decisions with clarity.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
<div class="bg-surface-container-low rounded-lg p-space-sm px-space-md border border-outline-variant/30 flex items-center gap-space-sm mt-space-xs">
|
||
<span class="material-symbols-outlined text-[18px] text-tertiary shrink-0">spa</span>
|
||
<p class="font-body-sm text-body-sm text-on-surface-variant italic">
|
||
There are no right or wrong answers—only your authentic presence.
|
||
</p>
|
||
</div>
|
||
<!-- Action inside sheet -->
|
||
<button class="mt-space-sm w-full py-3 px-6 rounded-full bg-primary text-on-primary font-label-lg text-label-lg shadow-sm active:bg-primary-container transition-all flex items-center justify-center gap-2" id="sheet-start-btn" type="button">
|
||
<span>Got it, let's begin</span>
|
||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
(function() {
|
||
const openBtn = document.getElementById('open-sheet-btn');
|
||
const closeBtn = document.getElementById('close-sheet-btn');
|
||
const sheetContainer = document.getElementById('explanation-sheet-container');
|
||
const sheetBackdrop = document.getElementById('sheet-backdrop');
|
||
const sheetPanel = document.getElementById('sheet-panel');
|
||
const sheetStartBtn = document.getElementById('sheet-start-btn');
|
||
const startBtn = document.getElementById('start-btn');
|
||
|
||
function openSheet() {
|
||
sheetContainer.classList.remove('pointer-events-none');
|
||
sheetContainer.classList.add('pointer-events-auto', 'opacity-100');
|
||
sheetContainer.classList.remove('opacity-0');
|
||
|
||
sheetBackdrop.classList.remove('opacity-0');
|
||
sheetBackdrop.classList.add('opacity-100');
|
||
|
||
sheetPanel.classList.remove('translate-y-full');
|
||
sheetPanel.classList.add('translate-y-0');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeSheet() {
|
||
sheetBackdrop.classList.remove('opacity-100');
|
||
sheetBackdrop.classList.add('opacity-0');
|
||
|
||
sheetPanel.classList.remove('translate-y-0');
|
||
sheetPanel.classList.add('translate-y-full');
|
||
|
||
setTimeout(() => {
|
||
sheetContainer.classList.remove('pointer-events-auto', 'opacity-100');
|
||
sheetContainer.classList.add('pointer-events-none', 'opacity-0');
|
||
document.body.style.overflow = '';
|
||
}, 300);
|
||
}
|
||
|
||
if (openBtn) openBtn.addEventListener('click', openSheet);
|
||
if (closeBtn) closeBtn.addEventListener('click', closeSheet);
|
||
if (sheetBackdrop) sheetBackdrop.addEventListener('click', closeSheet);
|
||
|
||
if (sheetStartBtn) {
|
||
sheetStartBtn.addEventListener('click', () => {
|
||
closeSheet();
|
||
if (startBtn) {
|
||
startBtn.click();
|
||
}
|
||
});
|
||
}
|
||
|
||
if (startBtn) {
|
||
startBtn.addEventListener('click', () => {
|
||
startBtn.style.opacity = '0.85';
|
||
setTimeout(() => {
|
||
startBtn.style.opacity = '1';
|
||
}, 150);
|
||
});
|
||
}
|
||
|
||
// Keyboard support (Escape to close)
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && !sheetContainer.classList.contains('pointer-events-none')) {
|
||
closeSheet();
|
||
}
|
||
});
|
||
})();
|
||
</script></main>
|
||
</body></html> |