/* ========================================================================== zguishy — Base styles & design tokens ========================================================================== */ :root { --bg-deep: #05070d; --bg-mid: #0a1020; --bg-panel: rgba(255, 255, 255, 0.04); --bg-panel-hi: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.10); --border-hi: rgba(255, 255, 255, 0.22); --text-hi: #f4f6fb; --text-mid: #b9c0d4; --text-low: #7c8399; --accent: #8ab4ff; /* soft starlight blue */ --accent-2: #c9a8ff; /* soft violet, for gradients */ /* ========================================================================== FONT CONFIG — change fonts sitewide by editing these two lines. Family name(s) here must match whatever is loaded via the Google Fonts in index.html (see the comment above that link for how to swap it). --font-display: the "zguishy" wordmark only (nav logo + hero title) --font-body: everything else — headings, section titles, buttons, social chips, nav links, body copy ========================================================================== */ --font-display: 'Moirai One', 'Space Grotesk', system-ui, sans-serif; --font-body: 'Quicksand', 'Inter', system-ui, sans-serif; --max-width: 1100px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text-mid); background: var(--bg-deep); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-body); color: var(--text-hi); font-weight: 500; letter-spacing: -0.02em; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 720px; } /* ========================================================================== Starfield background ========================================================================== */ .starfield { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 0%, #101a33 0%, var(--bg-mid) 45%, var(--bg-deep) 100%); overflow: hidden; } .stars { position: absolute; inset: 0; background-repeat: repeat; will-change: transform, opacity; } .stars-small { background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent), radial-gradient(1px 1px at 50% 15%, #fff, transparent), radial-gradient(1px 1px at 70% 55%, #fff, transparent), radial-gradient(1px 1px at 85% 30%, #fff, transparent), radial-gradient(1px 1px at 15% 85%, #fff, transparent), radial-gradient(1px 1px at 95% 75%, #fff, transparent), radial-gradient(1px 1px at 40% 40%, #fff, transparent), radial-gradient(1px 1px at 60% 90%, #fff, transparent), radial-gradient(1px 1px at 25% 50%, #fff, transparent); background-size: 600px 600px; opacity: 0.5; animation: twinkle 6s ease-in-out infinite; } .stars-medium { background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 65% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 5% 65%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 10%, #fff, transparent); background-size: 800px 800px; opacity: 0.4; animation: twinkle 8s ease-in-out infinite reverse; } .stars-large { background-image: radial-gradient(2px 2px at 35% 25%, #cfe0ff, transparent), radial-gradient(2px 2px at 75% 45%, #cfe0ff, transparent), radial-gradient(2px 2px at 15% 60%, #cfe0ff, transparent), radial-gradient(2px 2px at 55% 85%, #cfe0ff, transparent); background-size: 900px 900px; opacity: 0.6; animation: twinkle 10s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.75; } } /* faint meteor streaks, echoing the reference photo */ .shooting-star { position: absolute; width: 2px; height: 90px; background: linear-gradient(to bottom, rgba(255,255,255,0.9), transparent); border-radius: 999px; opacity: 0; transform: rotate(200deg); animation: shoot 9s linear infinite; } .shooting-star-1 { top: 15%; left: 55%; animation-delay: 1s; } .shooting-star-2 { top: 40%; left: 25%; height: 60px; animation-delay: 5.5s; } @keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(200deg); } 2% { opacity: 1; } 12% { opacity: 0; transform: translate(-160px, 220px) rotate(200deg); } 100% { opacity: 0; } } .horizon-glow { position: absolute; bottom: -20%; left: 0; right: 0; height: 50%; background: radial-gradient(ellipse at 30% 100%, rgba(138, 180, 255, 0.10), transparent 70%); } @media (prefers-reduced-motion: reduce) { .stars, .shooting-star { animation: none; } } /* ========================================================================== Nav ========================================================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 0; transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(5, 7, 13, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 14px 0; } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; } /* .logo and .hero-title are the only two places the "zguishy" wordmark itself appears — everything else uses --font-body */ .logo { font-family: var(--font-display); font-weight: 400; /* Moirai One only ships a 400 weight — avoid synthetic bold */ font-size: 1.2rem; letter-spacing: 0.08em; color: var(--text-hi); } .nav-links { display: flex; gap: 36px; } .nav-links a { font-size: 0.9rem; color: var(--text-mid); letter-spacing: 0.03em; transition: color 0.2s ease; position: relative; } .nav-links a:hover { color: var(--text-hi); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; } .nav-toggle span { display: block; height: 1.5px; width: 100%; background: var(--text-hi); transition: transform 0.25s ease, opacity 0.25s ease; } /* ========================================================================== Hero ========================================================================== */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 24px 60px; position: relative; } .eyebrow { font-size: 0.8rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--text-low); margin-bottom: 20px; } .hero-title { font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 8rem); /* line-height > 1 plus a touch of bottom padding gives descenders (g, y) room inside the box the gradient is painted into — background-clip: text only paints within the element's box, so anything tighter clips them off instead of just looking cramped. */ line-height: 1.25; padding-bottom: 0.15em; letter-spacing: -0.02em; background: linear-gradient(135deg, #ffffff 30%, var(--accent) 70%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-tagline { margin-top: 22px; font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-mid); font-weight: 300; } .hero-actions { margin-top: 44px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; } .btn { font-family: var(--font-body); padding: 14px 30px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.03em; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; display: inline-block; } .btn-primary { background: var(--text-hi); color: var(--bg-deep); } .btn-primary:hover { transform: translateY(-2px); } .btn-ghost { border: 1px solid var(--border-hi); color: var(--text-hi); } .btn-ghost:hover { background: var(--bg-panel); transform: translateY(-2px); } .scroll-cue { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 22px; height: 36px; border: 1.5px solid var(--border-hi); border-radius: 999px; } .scroll-cue span { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; border-radius: 999px; background: var(--text-hi); animation: scrollcue 1.8s ease-in-out infinite; } @keyframes scrollcue { 0% { opacity: 1; top: 6px; } 70% { opacity: 0; top: 18px; } 100% { opacity: 0; top: 6px; } } /* ========================================================================== Sections ========================================================================== */ .section { padding: 120px 0; position: relative; } .section-alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02) 15%, rgba(255,255,255,0.02) 85%, transparent); } .section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); } .section-sub { margin-top: 10px; color: var(--text-low); font-weight: 300; margin-bottom: 56px; } /* Music video embed */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 40px; border-radius: 12px; overflow: hidden; background: var(--bg-panel); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Releases */ .release-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .release-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .release-card:hover { transform: translateY(-6px); border-color: var(--border-hi); background: var(--bg-panel-hi); } .release-art { aspect-ratio: 1 / 1; background: linear-gradient(135deg, #16213f, #0a1020 60%, #1a1030); position: relative; } .release-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1px 1px at 30% 40%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1px 1px at 50% 70%, #fff, transparent); opacity: 0.6; } .release-body { padding: 22px; } .release-body h3 { font-size: 1.05rem; margin-bottom: 4px; } .release-body p { font-size: 0.85rem; color: var(--text-low); margin-bottom: 16px; } .release-links { display: flex; gap: 16px; flex-wrap: wrap; } .release-links a { font-size: 0.8rem; color: var(--accent); border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .release-links a:hover { border-color: var(--accent); } .spotify-embed { border-radius: 12px; margin-top: 40px; } /* About */ .about-text { font-size: 1.05rem; line-height: 1.8; font-weight: 300; margin-bottom: 22px; } /* Shows */ .shows-list { border-top: 1px solid var(--border); } .show-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; } .show-row-empty { color: var(--text-low); } .show-date { color: var(--accent); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.05em; } .show-venue { color: var(--text-mid); } /* Connect */ .social-icons { display: flex; flex-wrap: wrap; gap: 25px; } .social-icon { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text-hi); font-size: 1.05rem; transition: color 0.27s cubic-bezier(0.3, 0.1, 0.58, 1); } /* rotated-square "diamond" outline behind each icon, filled on hover */ .social-icon::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--border-hi); border-radius: 4px; transform: rotate(45deg); transition: background 0.27s cubic-bezier(0.3, 0.1, 0.58, 1), border-color 0.27s ease; } .social-icon i, .social-icon span { position: relative; z-index: 1; } .social-icon-text span { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.02em; } .social-icon:hover { color: var(--bg-deep); } .social-icon:hover::before { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; } /* Footer */ .footer { text-align: center; padding: 40px 24px; color: var(--text-low); font-size: 0.8rem; border-top: 1px solid var(--border); } /* ========================================================================== Scroll reveal ========================================================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 720px) { .nav-links { position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(5, 7, 13, 0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .nav-links.open { max-height: 300px; } .nav-links a { padding: 18px 24px; border-bottom: 1px solid var(--border); } .nav-toggle { display: flex; } .show-row { grid-template-columns: 1fr; gap: 4px; } }