/* Global Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* * ----------------------------------------------------------------------------- * Theme Variables * ----------------------------------------------------------------------------- * This section defines the color schemes for the light and dark themes using * CSS custom properties (variables). This makes it easy to manage and update * the themes. */ /* * Light Theme (Default) * The :root selector defines the default theme, which is the light theme. * These variables are used throughout the stylesheet to ensure a consistent * look and feel. */ :root { --header-bg: linear-gradient(45deg, #6366f1, #a78bfa); --header-text: white; --real-life-bg: oklch(92.9% 0.013 255.508deg); --furry-life-bg: oklch(88.2% 0.059 254.128deg); --link-text: #1f2937; --profile-image-bg: rgb(0 0 0 / 5%); --profile-image-border: rgb(0 0 0 / 10%); --profile-image-hover-border: rgb(0 0 0 / 20%); --name-text: 0.7; --subtitle-opacity: 0.5; --footer-bg: #f8f9fa; --footer-text: #6c757d; --dropdown-bg: #fff; --dropdown-border: #ccc; --dropdown-text: #000; --dropdown-hover-bg: #f0f0f0; } /* * Dark Theme * The html[data-theme="dark"] selector overrides the default light theme * variables when the `data-theme` attribute on the element is set to * "dark". This is a more specific selector, which ensures that the dark theme * is applied correctly. */ html[data-theme="dark"] { --header-bg: linear-gradient(45deg, #4f46e5, #8b5cf6); --header-text: white; --real-life-bg: oklch(27.8% 0.033 256.848deg); --furry-life-bg: #1a2b55; --link-text: white; --profile-image-bg: rgb(255 255 255 / 10%); --profile-image-border: rgb(255 255 255 / 20%); --profile-image-hover-border: rgb(255 255 255 / 40%); --name-text: 0.8; --subtitle-opacity: 0.7; --footer-bg: oklch(21% 0.034 264.665deg); --footer-text: #fff; --dropdown-bg: oklch(21% 0.034 264.665deg); --dropdown-border: #444; --dropdown-text: #fff; --dropdown-hover-bg: oklch(44.6% 0.03 256.802deg); } body { font-family: "Chiron GoRound TC", sans-serif; font-optical-sizing: auto; font-style: normal; min-height: 100vh; display: flex; flex-direction: column; } /* Header */ .main-header { text-align: center; padding: 2rem; /* we are in ai era, of course our favorite color is purple gradient (no i hate it, so fucking bright) */ background: var(--header-bg); color: var(--header-text); } /* Main Container */ .main-container { flex: 1; display: flex; flex-direction: column; } /* Layout */ .desktop-layout { display: flex; flex: 1; min-height: 101vh; } .life-section { flex: 1; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; transition: flex 0.5s ease; border: none; margin: 0; border-radius: 0; } .life-section.expanded { flex-grow: 2.5; } .real-life { background-color: var(--real-life-bg); } .furry-life { background-color: var(--furry-life-bg); } /* Content */ .section-title { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: -0.025em; text-transform: uppercase; } .profile-container { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .profile-image { width: 180px; height: 180px; border-radius: 50%; background: var(--profile-image-bg); border: 0 solid var(--profile-image-border); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; } .profile-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .profile-image:hover { transform: scale(1.05); border-color: var(--profile-image-hover-border); } .profile-image .material-symbols-rounded { font-size: 80px; opacity: 0.7; } .name-section { text-align: center; } .name-text { font-size: 2.5rem; font-weight: 500; opacity: var(--name-text); margin-bottom: 0.5rem; } .subtitle-text { font-size: 1.1rem; font-weight: 400; opacity: var(--subtitle-opacity); } /* Links */ a.life-section { text-decoration: none; color: var(--link-text); } /* Footer */ .footer { display: flex; justify-content: center; align-items: center; padding: 2rem 0; background-color: var(--footer-bg); color: var(--footer-text); position: relative; } .footer p { margin: 0; display: flex; align-items: center; } .cat-emoji { position: relative; display: inline-block; width: 24px; height: 24px; margin: 0 0.25em; vertical-align: middle; } .cat-emoji img { position: absolute; top: 0; left: 0; opacity: 1; transition: opacity 0.1s ease-in-out; } .theme-switcher { position: absolute; left: 1rem; padding-top: 0.5rem; } .theme-button { background: none; border: none; cursor: pointer; color: var(--footer-text); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; transition: background-color 0.2s ease; } .theme-button:hover { background-color: var(--profile-image-bg); } .theme-icon { font-size: 24px; } .theme-dropdown { display: none; position: absolute; bottom: 100%; left: 0; background-color: var(--dropdown-bg); border: 1px solid var(--dropdown-border); border-radius: 8px; padding: 0.5rem; box-shadow: 0 4px 8px rgb(0 0 0 / 10%); } .theme-switcher.show-dropdown .theme-dropdown { display: block; } .theme-dropdown button { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; color: var(--dropdown-text); border-radius: 5px; background: none; border: none; font: inherit; text-align: left; cursor: pointer; width: 100%; } .theme-dropdown button:hover { background-color: var(--dropdown-hover-bg); } /* Responsive Design */ @media (width <= 768px) { .desktop-layout { flex-direction: column; min-height: auto; } .life-section { min-height: 50vh; } .theme-switcher { position: fixed; bottom: 1rem; right: 1rem; left: auto; transform: translateY(150%); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; z-index: 1000; opacity: 0.8; } .theme-switcher:hover { opacity: 1; } .theme-switcher.visible { transform: translateY(0); } .theme-button { background-color: var(--dropdown-bg); border: 1px solid var(--dropdown-border); box-shadow: 0 4px 12px rgb(0 0 0 / 15%); width: 3.5rem; height: 3.5rem; border-radius: 12px; } .theme-button .theme-icon { font-size: 28px; color: var(--dropdown-text); } .theme-dropdown { right: 0; left: auto; } } @media (width <= 768px) and (width >= 769px) { .profile-image { width: 100px; height: 100px; } .profile-image .material-symbols-rounded { font-size: 40px; } } /* Theme Icon Animation */ .theme-icon-animation { animation: weight-pulse 0.5s ease-in-out; } @keyframes weight-pulse { 0% { transform: rotate(0deg); font-variation-settings: 'FILL' 1, 'wght' 200; } 50% { font-variation-settings: 'FILL' 1, 'wght' 900; } 100% { transform: rotate(360deg); font-variation-settings: 'FILL' 1, 'wght' 200; } } /* Selector Icon Animation */ .selector-icon-animation { animation: selector-weight-pulse 0.5s ease-in-out; } @keyframes selector-weight-pulse { 0% { font-variation-settings: 'FILL' 1, 'wght' 400; } 50% { font-variation-settings: 'FILL' 1, 'wght' 100; } 100% { font-variation-settings: 'FILL' 1, 'wght' 400; } }