/* ------------------------------- cute code theme (variables) ------------------------------- */ :root { --bg: #fff7fb; /* pastel pink */ --bg-2: #f5fbff; /* pastel blue */ --ink: #2f2a33; /* cotton-candy pink */ --accent-2: #ff7bac; /* comfy dark text */ --accent: #7bb6ff; /* sky sprinkle */ --accent-3: #a1ffdc; /* mint */ --chip-bg: #ffffffcc; /* code chip background */ --chip-ink: #6b5f77; --ring: #ffd7e6; /* soft focus ring */ --shadow: 0 8px 30px rgba(0, 0, 0, .06); } /* opt in to both color schemes for consistent form controls and scrollbars */ :root { color-scheme: light dark; } /* dark tokens: follow your existing variable naming */ @media (prefers-color-scheme: dark) { :root { --bg: #0f0e12; --bg-2: #0b1220; --ink: #e8e4ee; --accent: #8fc2ff; --accent-2: #ff8bb8; /* sky sprinkle */ --accent-3: #9affd2; /* mint */ --chip-bg: #1b1a20cc; /* translucent panel */ --chip-ink: #bfb6cb; /* muted code ink */ --ring: #5b2a3a; /* subtle focus ring */ --shadow: 0 8px 30px rgba(0, 0, 0, .35); /* gitea color */ --color-nav-text: white; } body { background: radial-gradient(1200px 800px at 10% 10%, var(--bg), transparent 60%), radial-gradient(1000px 600px at 90% 20%, var(--bg-2), transparent 60%), linear-gradient(180deg, #0b0a0e, var(--bg)); color: var(--ink); } .custom-description p.large { color: #bfb6cb; } .chip { background: var(--chip-bg); color: var(--chip-ink); border-color: #2a2432; box-shadow: 0 8px 30px rgba(0, 0, 0, .45); } .chip:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .6); } .floater { opacity: .22; } #navbar { background: #121017; box-shadow: 0 2px 18px rgba(0, 0, 0, .5); border-radius: 12px; } #navbar .item { color: white !important; } } /* manual override via data-theme on . leave after the media query so it wins */ html[data-theme="dark"] { --bg: #0f0e12; --bg-2: #0b1220; --ink: #e8e4ee; --accent: #ff8bb8; --accent-2: #8fc2ff; --accent-3: #9affd2; --chip-bg: #1b1a20cc; --chip-ink: #bfb6cb; --ring: #5b2a3a; --shadow: 0 8px 30px rgba(0, 0, 0, .35); --color-nav-text: white; --color-nav-hover-bg: linear-gradient(90deg, #23202a 0%, #3a3642 100%); --color-footer: #121017; --color-secondary: #231e30; } html[data-theme="dark"] body { background: radial-gradient(1200px 800px at 10% 10%, var(--bg), transparent 60%), radial-gradient(1000px 600px at 90% 20%, var(--bg-2), transparent 60%), linear-gradient(180deg, #0b0a0e, var(--bg)); color: var(--ink); } html[data-theme="dark"] .custom-description p.large { color: #bfb6cb; } html[data-theme="dark"] .chip { background: var(--chip-bg); color: var(--chip-ink); border-color: #2a2432; box-shadow: 0 8px 30px rgba(0, 0, 0, .45); } html[data-theme="dark"] #navbar { background: #121017; box-shadow: 0 2px 18px rgba(0, 0, 0, .5); } /* leaveme */ html[data-theme="light"] { /* NAUR!*/ } button[data-theme-toggle] { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } button[data-theme-toggle]:hover { background: var(--accent-2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); } /* ------------------------------- layout ------------------------------- */ body { background: radial-gradient(1200px 800px at 10% 10%, var(--bg), transparent 60%), radial-gradient(1000px 600px at 90% 20%, var(--bg-2), transparent 60%), linear-gradient(180deg, #fff, var(--bg)); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.6; } .home { min-height: calc(100vh - 6rem); display: grid; place-items: center; padding: 3rem 1rem; position: relative; overflow: hidden; } /* subtle moving shimmer */ .home::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .55) 30%, transparent 60%); transform: rotate(8deg) translateX(-10%); animation: shimmer 12s linear infinite; pointer-events: none; } /* ------------------------------- logo ------------------------------- */ .logo { width: 128px; height: 128px; display: inline-block; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .08)); animation: bob 4s ease-in-out infinite; } .logo image { width: 100%; height: 100%; rx: 12px; } /* ------------------------------- hero title with typing caret ------------------------------- */ .hero { margin-top: 1rem; } .title { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; letter-spacing: .5px; text-wrap: balance; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; } .title .caret { /* blinking cursor */ display: inline-block; width: 0.25ch; margin-left: .1ch; border-radius: 1px; background: currentColor; color: #ff3b77; animation: blink 1s steps(1, end) infinite; transform: translateY(2px); } /* typing reveal line (clipped width) */ .typing { display: inline-block; overflow: hidden; border-right: .12em solid transparent; /* reserved space */ white-space: nowrap; animation: type 3.8s steps(30, end) 0.3s 1 both; } /* ------------------------------- tagline + chips ------------------------------- */ .custom-description { margin-top: .75rem; } .custom-description p.large { font-size: 1.05rem; color: #6b5f77; margin: .25rem 0 1rem; } .chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .chip { padding: .45rem .7rem; background: var(--chip-bg); color: var(--chip-ink); border: 1px solid #efe7f5; border-radius: 999px; box-shadow: var(--shadow); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .9rem; letter-spacing: .2px; transition: transform .2s ease, box-shadow .2s ease; } .chip:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .08); } /* ------------------------------- floating code glyphs ------------------------------- */ .floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .floater { position: absolute; font-family: ui-monospace, monospace; font-size: clamp(14px, 2.4vw, 22px); opacity: .18; animation: drift 14s linear infinite; will-change: transform; } /* distribute a few by class */ .floater.f1 { top: 10%; left: 8%; animation-duration: 18s; } .floater.f2 { top: 25%; left: 88%; animation-duration: 22s; } .floater.f3 { top: 70%; left: 12%; animation-duration: 16s; } .floater.f4 { top: 82%; left: 72%; animation-duration: 20s; } .floater.f5 { top: 40%; left: 45%; animation-duration: 24s; } /* ------------------------------- focus/links ------------------------------- */ a:focus-visible, button:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; } #navbar { background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .04); border-radius: 12px; padding: .75rem 2rem; display: flex; align-items: center; gap: 1.5rem; position: relative; z-index: 10; } /* ------------------------------- keyframes ------------------------------- */ @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* type uses steps to feel like a terminal */ @keyframes type { from { width: 0; } to { width: 100%; } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes shimmer { 0% { transform: rotate(8deg) translateX(-15%); } 100% { transform: rotate(8deg) translateX(115%); } } @keyframes drift { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 100% { transform: translateY(-120vh) translateX(10vw) rotate(360deg); } } /* ------------------------------- responsive tweaks ------------------------------- */ @media (max-width: 640px) { .chip { font-size: .85rem; } } /* ------------------------------- reduced motion: dial it down ------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .home::before { display: none; } }