/* ============================================================ HYPR-RICE THEME for gethomepage.dev Style: CachyOS x Hyprland x Imperative-dots Drop this file in your Homepage config dir as: custom.css Pair with custom.js (same folder) and the settings.yaml snippet from README.md for full effect. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { --hypr-bg: #0a0b10; --hypr-glass: rgba(20, 22, 30, 0.55); --hypr-glass-border: rgba(255, 255, 255, 0.08); --hypr-accent-a: #7dd3fc; /* cachyos-ish cyan */ --hypr-accent-b: #a78bfa; /* hyprland violet */ --hypr-accent-c: #34d399; /* mint/teal */ --hypr-text: #e6e7ec; --hypr-muted: #8b8fa3; --hypr-radius: 18px; --hypr-ease: cubic-bezier(0.16, 1, 0.3, 1); /* the classic hypr "expo out" curve */ } /* ---------- base ---------- */ html, body { background-color: var(--hypr-bg) !important; color: var(--hypr-text) !important; font-family: 'Inter', system-ui, sans-serif !important; scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6, [class*="header"], [class*="title"] { font-family: 'JetBrains Mono', monospace !important; letter-spacing: 0.02em; } /* let the injected orb background (from custom.js) show through */ body { position: relative; overflow-x: hidden; } #hypr-orb-layer { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } #hypr-orb-layer .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45; will-change: transform; } #hypr-orb-layer .orb-a { width: 42vw; height: 42vw; top: -10%; left: -8%; background: radial-gradient(circle at 30% 30%, var(--hypr-accent-a), transparent 70%); animation: hyprFloatA 22s var(--hypr-ease) infinite alternate; } #hypr-orb-layer .orb-b { width: 38vw; height: 38vw; bottom: -12%; right: -6%; background: radial-gradient(circle at 60% 40%, var(--hypr-accent-b), transparent 70%); animation: hyprFloatB 26s var(--hypr-ease) infinite alternate; } #hypr-orb-layer .orb-c { width: 26vw; height: 26vw; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, var(--hypr-accent-c), transparent 70%); animation: hyprFloatC 30s var(--hypr-ease) infinite alternate; } @keyframes hyprFloatA { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(6vw, 8vh) scale(1.12); } } @keyframes hyprFloatB { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-7vw, -6vh) scale(1.08); } } @keyframes hyprFloatC { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-4vw, 5vh) scale(1.15); } } /* subtle grain, very rice-y */ #hypr-orb-layer::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } /* ---------- whole-page entrance, like a Hyprland window-open animation ---------- */ body.hypr-loading * { animation-play-state: paused !important; } body.hypr-enter { animation: hyprPageIn 650ms var(--hypr-ease) both; } @keyframes hyprPageIn { 0% { opacity: 0; filter: blur(14px); transform: scale(0.97); } 100% { opacity: 1; filter: blur(0); transform: scale(1); } } /* ---------- glass cards ---------- Homepage renders each service/bookmark as an inside main. We scope to `main a[href]` so we don't touch the sidebar/nav/search. If your Homepage layout differs, right-click a card -> Inspect, and swap the selector below for the class you see there. */ main a[href] { border-radius: var(--hypr-radius) !important; background: var(--hypr-glass) !important; border: 1px solid var(--hypr-glass-border) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); transition: transform 380ms var(--hypr-ease), box-shadow 380ms var(--hypr-ease), border-color 380ms var(--hypr-ease); } main a[href]:hover { transform: translateY(-5px) scale(1.015); border-color: rgba(125, 211, 252, 0.45) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(125, 211, 252, 0.12), 0 0 32px rgba(125, 211, 252, 0.15); } main a[href]:active { transform: translateY(-2px) scale(0.99); transition-duration: 120ms; } /* status dots / good-warn-danger pulses, if present */ [class*="bg-emerald"], [class*="bg-green"] { box-shadow: 0 0 10px rgba(52, 211, 153, 0.6); } [class*="bg-rose"], [class*="bg-red"] { box-shadow: 0 0 10px rgba(244, 63, 94, 0.6); } /* ---------- group headers ---------- */ main [class*="header"] { color: var(--hypr-muted) !important; text-transform: uppercase; font-size: 0.78rem; font-weight: 600; } /* ---------- search / quicklaunch ---------- */ input[type="text"], input[type="search"] { background: var(--hypr-glass) !important; border: 1px solid var(--hypr-glass-border) !important; border-radius: 12px !important; backdrop-filter: blur(14px); color: var(--hypr-text) !important; transition: border-color 260ms var(--hypr-ease), box-shadow 260ms var(--hypr-ease); } input[type="text"]:focus, input[type="search"]:focus { outline: none !important; border-color: var(--hypr-accent-a) !important; box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.18); } /* ---------- scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--hypr-accent-a), var(--hypr-accent-b)); border-radius: 8px; border: 2px solid var(--hypr-bg); } * { scrollbar-width: thin; scrollbar-color: var(--hypr-accent-a) transparent; } ::selection { background: var(--hypr-accent-b); color: #0a0b10; } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { #hypr-orb-layer .orb, body.hypr-enter, main a[href] { animation: none !important; transition: none !important; } }