/* ── kurl.click "blueprint" theme v4 ────────────────────────────────── Cloudflare-site inspired: subtle dot grid background, clean Inter type, white cards with hairline borders, brand-blue accent, flares. Inter is loaded async via in each page's . */ :root { --p-bg: #fdfdfd; --p-surface: #ffffff; --p-surface-2: #f4f5f7; --p-ink: #1d1f20; --p-dim: #62676c; --p-faint: #a8adb3; --p-line: #e4e6e8; --p-dot: rgba(29, 31, 32, 0.13); --p-accent: #3b82f6; /* brand blue */ --p-accent-deep: #2563eb; --p-ok: #2f7d4f; --p-warn: #a56a00; --p-err: #c62f2f; } html { background: var(--p-bg); color-scheme: light; } body { background: var(--p-bg) !important; color: var(--p-ink) !important; font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; position: relative; } /* subtle dot grid, faded toward the edges */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(var(--p-dot) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 55%, transparent 100%); } body > * { position: relative; z-index: 1; } .font-display { font-family: inherit !important; } .font-mono-custom, .font-logo, code, .chip { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace !important; } h1, h2, h3 { letter-spacing: -0.02em; } /* ── Surfaces: white cards, hairline, soft radius, flare on hover ── */ .animate-blob { display: none !important; } .bg-white, .bg-white\/80, .bg-slate-800, .bg-slate-800\/50 { background: var(--p-surface) !important; } .bg-slate-50, .bg-slate-900:not(button):not([class*="text-white"]) { background: var(--p-bg) !important; } .bg-slate-100, .bg-slate-200, .bg-slate-700\/50 { background: var(--p-surface-2) !important; } .rounded-xl, .rounded-lg { border-radius: 8px !important; } .rounded-md { border-radius: 6px !important; } .shadow-sm, .shadow-lg, .shadow-xl, .shadow-2xl, .hover\:shadow-sm:hover, .hover\:shadow-md:hover { box-shadow: none !important; } .backdrop-blur-sm, .backdrop-blur { backdrop-filter: none !important; } /* cursor-following flare on cards (position set by /public/theme.js) */ .terminal-window { position: relative; /* no overflow:hidden — it clips dropdown menus; the flare clips itself below */ transition: border-color 0.25s ease; } .terminal-window::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(59, 130, 246, 0.09), transparent 65%); } .terminal-window:hover { border-color: rgba(59, 130, 246, 0.45) !important; } .terminal-window:hover::before { opacity: 1; } .terminal-window::after { content: none !important; } .terminal-window > * { position: relative; } /* ── Text ── */ .text-white, .text-slate-50, .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-700, .text-slate-800, .text-slate-900 { color: var(--p-ink) !important; } .text-slate-400, .text-slate-500, .text-slate-600 { color: var(--p-dim) !important; } .text-emerald-300, .text-emerald-600, .text-emerald-700, .text-emerald-900 { color: var(--p-ok) !important; } .text-rose-400, .text-rose-500, .text-rose-600, .text-rose-900 { color: var(--p-err) !important; } .text-amber-600, .text-amber-700 { color: var(--p-warn) !important; } [class*="text-blue"], [class*="text-sky"], [class*="text-indigo"] { color: var(--p-accent-deep) !important; } a:hover, .hover\:text-slate-900:hover, .hover\:text-white:hover, .hover\:underline:hover { color: var(--p-accent) !important; } /* ── Borders ── */ [class*="border-slate"], [class*="border-emerald"], [class*="border-rose"], [class*="border-amber"], [class*="border-blue"] { border-color: var(--p-line) !important; } /* ── Inputs ── */ input, select, textarea { background: var(--p-surface) !important; color: var(--p-ink) !important; border: 1px solid var(--p-line) !important; border-radius: 6px !important; font-family: inherit !important; } input::placeholder, textarea::placeholder { color: var(--p-faint) !important; } input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--p-accent) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; } input:focus-visible, select:focus-visible, textarea:focus-visible { --tw-ring-color: transparent !important; } /* ── Buttons ── */ /* primary buttons keep the brand blue→indigo gradient; just soften shape */ button[class*="bg-gradient-to-r"], a[class*="bg-gradient-to-r"] { border-radius: 6px !important; transition: opacity 0.2s ease, transform 0.2s ease !important; } button[class*="bg-gradient-to-r"]:hover, a[class*="bg-gradient-to-r"]:hover { transform: translateY(-1px); } button.bg-slate-900\/80, button.bg-slate-900 { background: var(--p-surface) !important; color: var(--p-ink) !important; border: 1px solid var(--p-line) !important; } button.bg-slate-900\/80:hover, .hover\:bg-slate-800:hover { background: var(--p-surface-2) !important; border-color: var(--p-accent) !important; } .hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover { background: var(--p-surface-2) !important; border-color: var(--p-accent) !important; color: var(--p-ink) !important; } .hover\:bg-slate-200:hover { background: #ebe8df !important; } /* ── Badges / alerts ── */ .bg-emerald-50, .bg-emerald-500\/10, .bg-emerald-100 { background: #edf4ee !important; } .bg-rose-50, .bg-rose-100, .bg-rose-500\/10 { background: #f9ecec !important; } .bg-amber-100, .bg-amber-50 { background: #f7f1e2 !important; } .bg-emerald-400 { background: var(--p-ok) !important; } [class*="bg-blue-50"], [class*="bg-sky-50"], [class*="bg-indigo-50"] { background: var(--p-surface-2) !important; } /* ── Charts / analytics bars: keep the brand gradient ── */ /* ── Header / footer / modals ── */ header, footer { background: rgba(253, 253, 253, 0.85) !important; border-color: var(--p-line) !important; } header { backdrop-filter: blur(8px) !important; } .bg-slate-900\/50, .bg-black\/50 { background: rgba(29, 31, 32, 0.35) !important; } /* dark-mode toggle is redundant under this theme */ .dark body { background: var(--p-bg) !important; color: var(--p-ink) !important; } button[title="Toggle dark mode"] { display: none !important; } /* ── Details ── */ ::selection { background: rgba(59, 130, 246, 0.2); } * { scrollbar-width: thin; scrollbar-color: var(--p-faint) var(--p-bg); } /* quiet blinking cursor on the hero tagline */ .blink-cursor::after { content: "_"; color: var(--p-accent); margin-left: 2px; animation: p-blink 1.2s steps(1) infinite; } @keyframes p-blink { 50% { opacity: 0; } } /* uppercase micro-labels */ [class*="uppercase"][class*="tracking"] { color: var(--p-dim) !important; } /* ── Shared components: outlined display type + parallax chips ── */ .big-outline { font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; font-weight: 700; /* fill with the page background: hides overlapping glyph contours (e.g. the k) that show as seams when the fill is transparent */ color: var(--p-bg); -webkit-text-stroke: 2px var(--p-ink); user-select: none; transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease; } .big-outline:hover { color: var(--p-accent); -webkit-text-stroke-color: var(--p-accent); } /* hovering the wordmark fills all its letters together */ .logo-egg:hover .big-outline { color: var(--p-accent); } /* SVG wordmark: real outline with round joins (text-stroke miters spike on the k) */ .logo-svg { height: 1.05em; width: auto; overflow: visible; cursor: pointer; } .logo-egg, .logo-egg * { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .logo-svg text { font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.04em; fill: var(--p-bg); stroke: var(--p-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke; transition: fill 0.4s ease, stroke 0.4s ease; } .logo-egg:hover .logo-svg text { fill: var(--p-accent); } /* cookie-clicker wordmark counter */ .click-counter { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; color: var(--p-dim); margin: -0.25rem 0 0.5rem; opacity: 0; transition: opacity 0.4s ease; user-select: none; } .click-counter.show { opacity: 1; } .click-pop { position: fixed; z-index: 60; pointer-events: none; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 0.9rem; color: var(--p-accent); transform: translate(-50%, -100%); animation: click-pop 0.9s ease-out forwards; } @keyframes click-pop { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -44px; } } .logo-svg.wobble { animation: logo-wobble 0.35s ease-in-out infinite; } @keyframes logo-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: 1.6deg; } 75% { rotate: -1.6deg; } } .logo-svg.shiver { animation: logo-shiver 0.12s linear infinite; } @keyframes logo-shiver { 0%, 100% { translate: 0 0; } 25% { translate: 2px -1px; } 50% { translate: -2px 1px; } 75% { translate: 1px 2px; } } .gif-pop { position: fixed; bottom: 1.5rem; right: 1.5rem; width: min(240px, 40vw); border-radius: 10px; border: 1px solid var(--p-line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); z-index: 80; /* above the sudo shell overlay too */ pointer-events: none; animation: my-eyes-in 0.35s cubic-bezier(.2,1.4,.4,1); transition: opacity 0.5s ease, translate 0.5s ease; } .gif-pop.bye { opacity: 0; translate: 0 20px; } .gif-pop.pos-bl { right: auto; left: 1.5rem; } .gif-pop.pos-center { bottom: auto; right: auto; top: 50%; left: 50%; width: min(340px, 70vw); transform: translate(-50%, -50%); animation: gif-center-in 0.35s cubic-bezier(.2,1.4,.4,1); } .gif-pop.pos-center.bye { opacity: 0; translate: 0 0; scale: 0.92; } @keyframes gif-center-in { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } } @keyframes my-eyes-in { from { opacity: 0; translate: 0 30px; scale: 0.8; } to { opacity: 1; translate: 0 0; scale: 1; } } .boom-bit { position: fixed; z-index: 60; pointer-events: none; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; color: var(--p-accent); transform: translate(-50%, -50%); animation: boom-bit 0.9s cubic-bezier(.2,.7,.4,1) forwards; } @keyframes boom-bit { from { opacity: 1; translate: 0 0; scale: 1.4; } to { opacity: 0; translate: var(--bx) var(--by); scale: 0.3; } } .chip { position: absolute; padding: 0.4rem 0.9rem; border: 1px solid var(--p-line); border-radius: 6px; background: var(--p-surface); color: var(--p-faint); font-size: 0.8rem; user-select: none; cursor: default; transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.6s ease; opacity: 0; /* faded in by theme.js once laid out */ will-change: transform; z-index: 0; } .chip:hover { color: var(--p-accent) !important; border-color: var(--p-accent) !important; transform: translateY(-6px) rotate(-2deg) !important; z-index: 5; } @media (max-width: 640px) { .chip { display: none; } } /* chips are real links: reveal a "claim it" hint on hover */ a.chip { text-decoration: none !important; cursor: pointer; } .chip.claimed { color: var(--p-dim); } .chip.claimed::before { content: "●"; color: var(--p-ok); font-size: 0.55rem; margin-right: 0.45rem; vertical-align: middle; } .chip.claimed:hover { color: var(--p-ok) !important; border-color: var(--p-ok) !important; } .chip.claimed .chip-hint { color: var(--p-ok); } .chip-hint { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; opacity: 0; color: var(--p-accent); transition: max-width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease; } .chip:hover .chip-hint { max-width: 6rem; opacity: 1; margin-left: 0.5rem; } /* cursor spotlight: dots glow blue near the pointer */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(59, 130, 246, 0.55) 1px, transparent 1.5px); background-size: 22px 22px; opacity: var(--spot-o, 0); transition: opacity 0.4s ease; -webkit-mask-image: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 50%), #000, transparent 70%); mask-image: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 50%), #000, transparent 70%); } /* magnetic buttons (transform set by theme.js) */ .magnetic { transition: transform 0.15s ease-out; will-change: transform; } /* easter egg: logo barrel roll after 5 clicks */ .logo-egg { cursor: default; } .logo-egg.spin { animation: egg-spin 0.9s cubic-bezier(0.35, 0, 0.25, 1); } @keyframes egg-spin { to { transform: rotate(360deg); } } /* easter egg: konami link-rain */ .link-drop { position: fixed; top: -2rem; z-index: 50; pointer-events: none; font-size: 1.4rem; animation: link-fall linear forwards; } @keyframes link-fall { to { transform: translateY(110vh) rotate(360deg); opacity: 0.7; } } /* easter-egg toast */ #eggToast { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 1rem); z-index: 60; padding: 0.6rem 1.2rem; border-radius: 999px; background: var(--p-ink); color: var(--p-bg); font-family: "JetBrains Mono", monospace; font-size: 0.8rem; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } #eggToast.show { opacity: 1; transform: translate(-50%, 0); } /* cheat code: chips go weapons-hot */ .chip.armed { color: #f6821f !important; border-color: #f6821f !important; box-shadow: 0 0 12px rgba(246, 130, 31, 0.35); } /* LED burnout after rapid flicking */ .power-switch.burnout .ps-led { animation: led-flicker 1.2s steps(2) 3; } @keyframes led-flicker { 0%, 40%, 80% { background: var(--p-ok); box-shadow: 0 0 8px 2px rgba(63, 185, 80, 0.6); } 20%, 60%, 100% { background: #3a4048; box-shadow: none; } } @media (max-width: 1023px) { .page-cord { display: none; } } /* ── sudo shell: fake terminal easter egg ── */ #sudoShell { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } #sudoShell .win { width: min(40rem, 92vw); border-radius: 8px; overflow: hidden; border: 1px solid #2a3038; background: #0d1117; font-family: "JetBrains Mono", monospace; font-size: 0.85rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } #sudoShell .bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; background: #161b22; border-bottom: 1px solid #2a3038; color: #9aa1a9; font-size: 0.75rem; } #sudoShell .bar i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } #sudoShell .out { padding: 0.9rem 1rem 0.4rem; max-height: 50vh; overflow-y: auto; color: #3fb950; white-space: pre-wrap; word-break: break-word; } #sudoShell .out .sys { color: #9aa1a9; } #sudoShell .out .warn { color: #f6821f; } #sudoShell .in { display: flex; gap: 0.5rem; padding: 0.2rem 1rem 0.9rem; color: #3fb950; } #sudoShell .in input { flex: 1; background: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; color: #3fb950 !important; font-family: inherit !important; font-size: inherit; padding: 0; } /* ── "Turn off the lights": PSU-style rocker power switch, bottom-left ── */ .power-switch { position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.5rem 0.55rem 0.35rem; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 8px; cursor: pointer; font-family: "JetBrains Mono", monospace; transition: border-color 0.2s ease, transform 0.2s ease; } .power-switch:hover { border-color: var(--p-accent); transform: translateY(-2px); } .power-switch .ps-led { position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--p-ok); box-shadow: 0 0 6px 1px rgba(63, 185, 80, 0.55); transition: background 0.3s ease, box-shadow 0.3s ease; } .power-switch .ps-rocker { display: flex; flex-direction: column; width: 26px; border: 1px solid var(--p-line); border-radius: 5px; overflow: hidden; background: var(--p-bg); } .power-switch .ps-rocker i { font-style: normal; font-size: 0.6rem; font-weight: 700; line-height: 20px; text-align: center; color: var(--p-faint); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* lights ON: "I" pressed in */ .power-switch .ps-rocker i:first-child { background: var(--p-surface-2); color: var(--p-accent-deep); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.18); } /* lights OFF: "O" pressed in, LED goes standby-dead */ .lights-off .power-switch .ps-rocker i:first-child { background: transparent; color: var(--p-faint); box-shadow: none; } .lights-off .power-switch .ps-rocker i:last-child { background: var(--p-surface-2); color: var(--p-accent); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35); } .lights-off .power-switch .ps-led { background: #3a4048; box-shadow: none; } .power-switch .ps-label { font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-dim); } .power-switch.tug { animation: ps-flick 0.3s ease; } @keyframes ps-flick { 40% { transform: translateY(2px) scale(0.94); } } /* keep clear of the footer on small screens */ @media (max-width: 640px) { .power-switch { bottom: 4rem; } } /* compact inline variant: lives in the header next to Logout */ .power-switch.ps-inline { position: static; padding: 0.3rem 0.35rem; gap: 0; border-radius: 6px; } .power-switch.ps-inline:hover { transform: none; } .power-switch.ps-inline .ps-led { top: 3px; right: 3px; width: 4px; height: 4px; } .power-switch.ps-inline .ps-rocker { width: 20px; } .power-switch.ps-inline .ps-rocker i { font-size: 0.5rem; line-height: 14px; } @media (max-width: 640px) { .power-switch.ps-inline { bottom: auto; } } /* ── Lights off: dark palette (vars drive most of the theme) ── */ body, .bg-white, input, select, textarea { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } .lights-off { --p-bg: #0e1116; --p-surface: #161b22; --p-surface-2: #1f242c; --p-ink: #e6e8ea; --p-dim: #9aa1a9; --p-faint: #565e67; --p-line: #2a3038; --p-dot: rgba(230, 232, 234, 0.10); color-scheme: dark; } .lights-off header, .lights-off footer { background: rgba(14, 17, 22, 0.85) !important; } .lights-off .bg-emerald-50, .lights-off .bg-emerald-500\/10, .lights-off .bg-emerald-100 { background: rgba(47, 125, 79, 0.15) !important; } .lights-off .bg-rose-50, .lights-off .bg-rose-100, .lights-off .bg-rose-500\/10 { background: rgba(198, 47, 47, 0.15) !important; } .lights-off .bg-amber-100, .lights-off .bg-amber-50 { background: rgba(165, 106, 0, 0.15) !important; } .lights-off .hover\:bg-slate-200:hover { background: #262c35 !important; } .lights-off .bg-slate-900\/50, .lights-off .bg-black\/50 { background: rgba(0, 0, 0, 0.55) !important; } .lights-off .text-emerald-300, .lights-off .text-emerald-600, .lights-off .text-emerald-700, .lights-off .text-emerald-900 { color: #58c98a !important; } .lights-off .text-rose-400, .lights-off .text-rose-500, .lights-off .text-rose-600, .lights-off .text-rose-900 { color: #f07f7f !important; } .lights-off [class*="text-blue"], .lights-off [class*="text-sky"], .lights-off [class*="text-indigo"] { color: #6ca5f8 !important; } .lights-off .terminal-window::before { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(96, 156, 248, 0.10), transparent 65%); } .lights-off .cf-turnstile, .lights-off iframe { color-scheme: light; }