/* ============================================================================ DJ LifeHack — amber CRT Tokens live in :root. Change --amber to reskin the whole site. ==========================================================================*/ :root { --bg: #080603; --bg-lift: #100b05; --amber: #ffab35; --amber-hot: #ff7a18; --amber-dim: #c98d3e; --ink: #f6e6d2; --ink-soft: #a8937c; --hairline: rgba(255, 171, 53, 0.16); --font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --shell: min(1100px, 90vw); --ease: cubic-bezier(0.22, 0.68, 0.24, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100svh; /* Column flex so the hero and the footer can share one screen exactly. */ display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--font-display); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------------------------------------------------------------- CRT layer */ .crt-scanlines, .crt-vignette, .glow-field { position: fixed; inset: 0; pointer-events: none; z-index: 2; } .crt-scanlines { background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.28) 3px, rgba(0, 0, 0, 0.28) 4px ); opacity: 0.55; mix-blend-mode: multiply; } .crt-vignette { background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100% ); } /* Warm bloom behind the logo — sits *under* the content. */ .glow-field { z-index: 0; background: radial-gradient( circle at 50% 34%, rgba(255, 122, 24, 0.16) 0%, rgba(255, 122, 24, 0.05) 32%, rgba(0, 0, 0, 0) 62% ); } /* Screen-wide flicker, applied to when CRT effects are on. */ body.crt-on { animation: crt-flicker 5.5s steps(1, end) infinite; } @keyframes crt-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: 0.94; } 98% { opacity: 1; } 98.6% { opacity: 0.97; } } body.crt-off .crt-scanlines, body.crt-off .crt-vignette { display: none; } /* ------------------------------------------------------------------- layout */ /* Positioned so it paints above .glow-field, which is fixed at z-index 0. */ main { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; } .hero { flex: 1 0 auto; min-height: 100svh; display: grid; place-items: center; padding: clamp(1.5rem, 5vh, 4rem) 1.25rem; position: relative; } /* While the hero is the only section, it shares the screen with the footer rather than claiming a full 100svh of its own — otherwise the page is always exactly one footer taller than the viewport and scrolls for no reason. `flex: 1 0 auto` still lets it grow to fill whatever is left, and to overflow honestly if the window is too short for the content. Add a .section and the hero goes back to a full screen automatically. */ body:not(:has(.section)) .hero { min-height: 0; } .hero-inner { width: var(--shell); max-width: 720px; text-align: center; } /* --------------------------------------------------------------------- logo */ .logo-wrap { margin: 0 auto clamp(0.75rem, 2.2vh, 1.75rem); max-width: min(440px, 72vw, 44vh); } .logo { display: block; width: 100%; height: auto; /* The artwork ships with un-premultiplied alpha baked in — the black frame of the original photo is genuinely transparent — so it composites onto the warm glow field with no rectangle and no blend mode needed. */ filter: blur(0); } /* ------------------------------------------------------------------ tagline */ .tagline { margin: 0 0 clamp(1rem, 3vh, 2.25rem); font-family: var(--font-mono); font-size: clamp(0.72rem, 1.6vw, 0.86rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--amber); text-shadow: 0 0 18px rgba(255, 171, 53, 0.45); } .tagline:empty { display: none; } /* ------------------------------------------------------------------ socials */ .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.6rem, 2.4vw, 1.1rem); margin-bottom: clamp(1.15rem, 3.2vh, 2.5rem); } .social { --size: clamp(48px, 12vw, 58px); width: var(--size); height: var(--size); display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: 14px; color: var(--amber-dim); background: linear-gradient(180deg, rgba(255,171,53,0.05), rgba(255,171,53,0.01)); transition: color 0.28s var(--ease), border-color 0.28s var(--ease), transform 0.28s var(--ease), box-shadow 0.28s var(--ease); } .social svg { width: 43%; height: 43%; fill: currentColor; } .social:hover, .social:focus-visible { color: var(--amber); border-color: rgba(255, 171, 53, 0.55); transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 171, 53, 0.18), 0 10px 34px rgba(255, 122, 24, 0.28), inset 0 0 22px rgba(255, 122, 24, 0.12); outline: none; } .social:focus-visible { box-shadow: 0 0 0 2px var(--amber); } /* ------------------------------------------------------------------ contact */ .contact { display: grid; gap: clamp(0.3rem, 0.9vh, 0.55rem); font-family: var(--font-mono); font-size: clamp(0.85rem, 2vw, 0.95rem); margin-bottom: clamp(1.15rem, 3.2vh, 2.5rem); } .contact-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.6rem; } .contact-label { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); } .contact-value { color: var(--ink); } a.contact-value { text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 1px; transition: color 0.22s var(--ease), border-color 0.22s var(--ease); } a.contact-value:hover, a.contact-value:focus-visible { color: var(--amber); border-color: var(--amber); } /* ---------------------------------------------------------------------- CTA */ .cta { display: inline-block; padding: clamp(0.6rem, 1.5vh, 0.85rem) 2.1rem; border: 1px solid rgba(255, 171, 53, 0.45); border-radius: 999px; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: var(--amber); background: rgba(255, 122, 24, 0.06); transition: all 0.28s var(--ease); } .cta:hover, .cta:focus-visible { color: var(--bg); background: var(--amber); border-color: var(--amber); box-shadow: 0 8px 40px rgba(255, 122, 24, 0.4); outline: none; } /* --------------------------------------------------------------- scroll cue */ .scroll-cue { position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%); width: 22px; height: 42px; display: grid; place-items: start center; border: 1px solid var(--hairline); border-radius: 999px; padding-top: 7px; } .scroll-cue[hidden] { display: none; } .scroll-cue-line { width: 2px; height: 7px; border-radius: 2px; background: var(--amber); animation: cue 1.9s var(--ease) infinite; } @keyframes cue { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } } /* -------------------------------------------------- extra sections (future) */ .section { padding: clamp(4rem, 14vh, 9rem) 1.25rem; border-top: 1px solid var(--hairline); } .section-inner { width: var(--shell); max-width: 760px; margin: 0 auto; } .section-title { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 5vw, 2.4rem); letter-spacing: -0.02em; color: var(--amber); } .section-body { margin: 0; color: var(--ink-soft); } /* ------------------------------------------------------------------- footer */ .footer { position: relative; z-index: 1; flex-shrink: 0; padding: clamp(1.25rem, 3vh, 2rem) 1.25rem clamp(1.5rem, 3.5vh, 2.5rem); text-align: center; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(168, 147, 124, 0.55); } .footer-sep { margin: 0 0.5rem; } /* --------------------------------------------------------- reveal animation */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-visible { opacity: 1; transform: none; } /* The logo gets a slower, softer entrance than everything else: it warms up out of focus, the way a CRT does. */ .logo-wrap.reveal { transform: translateY(18px) scale(0.965); transition-duration: 1.8s; } .logo-wrap.reveal.is-visible { transform: none; } .logo-wrap.reveal .logo { filter: blur(7px); transition: filter 1.8s var(--ease); transition-delay: inherit; } .logo-wrap.reveal.is-visible .logo { filter: blur(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .logo-wrap.reveal { opacity: 1; transform: none; transition: none; } .logo-wrap.reveal .logo { filter: blur(0); transition: none; } body.crt-on { animation: none; } .scroll-cue-line { animation: none; opacity: 1; } }