/* ════════════════════════════════════════════════════════════════════ FolksPat Media Group — shared inner-page treatment Carries the "Select Your World" home-page system across the site. Contents: 1. Design tokens (:root) 2. Base element resets 3. Per-page accent themes 4. Grain overlay 5. Mascot cursor companion 6. Nav 7. Shared layout (wrap, section, kicker, stamped headings, lede) 8. Buttons 9. Stat block 10. Card 11. Scroll reveal 12. Page hero (full-bleed) 13. Marquee 14. Footer 15. Tagline strip 16. Reduced-motion override ════════════════════════════════════════════════════════════════════ */ /* #region design tokens */ /* ─── design tokens ──────────────────────────────────────────────── */ :root{ /* colors — blacks/inks, brand hues, Intusic (games) hues */ --fp-black:#0c0c0c; --ink-1000:#070707; --ink-900:#0f0f0d; --ink-850:#131311; --ink-800:#1a1a17; --fp-lime:#d5e84c; --fp-lime-bright:#e2f56a; --fp-orange:#ff6136; --fp-pink:#ffa8d9; --fp-cream:#f2f1e6; --in-violet:#6642e7; --in-pink:#fc2bec; --in-green:#c9e200; /* fonts */ --disp:"Space Grotesk",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace; --stamp:"Anton","Space Grotesk",sans-serif; /* borders + layout */ --border:rgba(242,241,230,.14); --border-strong:rgba(242,241,230,.3); --max-w:1200px; /* accent — the one token pages override to reskin buttons/links/etc */ --acc:var(--fp-lime); /* per-page accent, overridden on */ } /* #endregion */ /* #region base element resets */ /* ─── base element resets ────────────────────────────────────────── */ /* box model — zero out browser default spacing */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* html/body defaults — dark theme baseline */ html{scroll-behavior:smooth;color-scheme:dark;font-size:100%;-webkit-text-size-adjust:100%} body{ background:var(--fp-black);color:var(--fp-cream);font-family:var(--disp); line-height:1.6;min-height:100dvh;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;overflow-x:hidden; } /* element defaults — strip native link/list/media/form styling */ a{color:inherit;text-decoration:none} img,video{display:block;max-width:100%;height:auto} ul,ol{list-style:none} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit} input,textarea,select{font:inherit;color:inherit} main{display:block} main:focus{outline:none} /* #endregion */ /* #region accessibility helpers */ /* ─── accessibility helpers ─────────────────────────────────────── */ /* visually-hidden text that remains available to screen readers */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* skip link — off-screen until focused, then pinned top-left */ .skip-link{position:fixed;top:-60px;left:12px;z-index:100; background:var(--fp-cream);color:var(--fp-black); font-family:var(--mono);font-size:12px;letter-spacing:.04em; padding:10px 16px;border-radius:8px;transition:top .18s ease} .skip-link:focus{top:12px} /* visible keyboard focus for every interactive element */ :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{ outline:2px solid var(--fp-cream);outline-offset:3px;border-radius:4px} /* #endregion */ /* #region per-page accent themes */ /* ─── per-page accent themes ─────────────────────────────────────── */ body.page-music{--acc:var(--fp-lime)} body.page-games{--acc:var(--in-pink)} body.page-film{--acc:var(--fp-orange)} body.page-about{--acc:var(--fp-pink)} body.page-contact{--acc:var(--fp-pink)} /* #endregion */ /* #region grain overlay */ /* ─── grain overlay (signature) ─────────────────────────────────────── */ .grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* #endregion */ /* #region mascot cursor companion */ /* ─── mascot cursor companion ───────────────────────────────────────── */ /* positioning shell — JS drives left/top to follow the pointer */ .mascot{position:fixed;left:50%;top:50%;z-index:55;width:54px;height:54px;pointer-events:none; transform:translate(-50%,-50%);opacity:0;will-change:left,top} .mascot.show{opacity:1} /* idle animation — gentle bob + rock */ .mascot img{width:100%;height:auto;transform-origin:50% 60%; animation:mascot-bob 3.2s ease-in-out infinite;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))} @keyframes mascot-bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(5deg)}} /* reactive states — glow near interactive elements, squash on click */ .mascot.near img{filter:drop-shadow(0 0 18px var(--acc)) drop-shadow(0 3px 6px rgba(0,0,0,.55))} .mascot.press img{animation:none;transform:scale(.78) rotate(0deg)} /* touch devices — no pointer to follow, so hide it */ @media (hover:none),(pointer:coarse){.mascot{display:none}} /* #endregion */ /* #region nav */ /* ─── nav (frosted glass; accent-reactive hovers) ───────────────────── */ /* bar shell — fixed, blurred glass background */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center; justify-content:space-between;padding:15px 30px; background:rgba(10,10,13,.6);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--border)} /* logo */ .nav-logo img{height:30px;width:auto;display:block} /* nav links — underline draws in on hover/active page */ .nav-links{display:flex;gap:26px;font-size:13px;font-weight:500;letter-spacing:.01em} .nav-links a{position:relative;color:var(--fp-cream);opacity:.72;padding-bottom:3px;transition:opacity .15s,color .15s} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc); border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.16,1,.3,1)} .nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current]{opacity:1;color:var(--acc)} .nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current]::after{transform:scaleX(1)} /* right side — Discord link + pill-shaped Contact button */ .nav-cta{display:flex;align-items:center;gap:16px} .nav-cta .discord{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--fp-cream);opacity:.72; transition:opacity .15s,color .15s} .nav-cta .discord:hover,.nav-cta .discord:focus-visible{opacity:1;color:var(--acc)} .nav-cta .contact{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--fp-cream); border:1.5px solid var(--fp-cream);border-radius:999px;padding:8px 16px; transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease} .nav-cta .contact:hover,.nav-cta .contact:focus-visible{background:var(--acc);border-color:var(--acc);color:var(--fp-black);box-shadow:0 0 22px -6px var(--acc)} /* hamburger toggle — hidden on desktop, shown at the mobile breakpoint */ .nav-toggle{display:none;flex:none;width:40px;height:40px;border-radius:8px; flex-direction:column;align-items:center;justify-content:center;gap:5px} .nav-toggle span{display:block;width:20px;height:2px;background:var(--fp-cream);border-radius:2px; transition:transform .2s ease,opacity .2s ease} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile — collapse the link list into a toggle-driven dropdown panel */ @media(max-width:780px){ .nav{padding:14px 20px} .nav-toggle{display:flex} .nav-cta{margin-left:auto;gap:12px} .nav-links{ position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; padding:6px 20px 14px; background:rgba(10,10,13,.94);backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--border); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .2s ease,transform .2s ease,visibility .2s} .nav-links.open{opacity:1;visibility:visible;transform:none} .nav-links a{padding:14px 0;opacity:.9;font-size:15px;border-bottom:1px solid var(--border)} .nav-links a:last-child{border-bottom:0} .nav-links a::after{display:none} } /* very narrow — drop the secondary Discord link so logo + Contact + toggle fit */ @media(max-width:520px){.nav-cta .discord{display:none}} /* #endregion */ /* #region shared layout */ /* ─── shared layout ─────────────────────────────────────────────────── */ .wrap{max-width:var(--max-w);margin:0 auto;padding:0 clamp(20px,5vw,40px);width:100%} .section{padding:clamp(64px,9vw,120px) 0} .section-tight{padding:clamp(44px,6vw,72px) 0} /* ─── kicker / eyebrow ───────────────────────────────────────────── */ .kick{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase; color:var(--acc);display:inline-flex;align-items:center;gap:10px} .kick::before{content:"";width:24px;height:1.5px;background:var(--acc);display:inline-block} .kick.center{justify-content:center} /* ─── stamped display headings ───────────────────────────────────── */ .stamp{font-family:var(--stamp);text-transform:uppercase;line-height:.9;letter-spacing:.01em} h1.stamp{font-size:clamp(44px,7.5vw,108px)} h2.stamp{font-size:clamp(32px,5vw,64px)} .lede{font-size:clamp(17px,1.7vw,21px);color:var(--fp-cream);opacity:.82;max-width:60ch;line-height:1.6} /* consistent gap when a lede follows a section kicker (replaces per-page inline margins) */ .kick + .lede{margin-top:16px} /* inline beehiiv newsletter form — full-width band above the footer. The form is responsive (stacks below ~640px) and carries its own padding, so give it room rather than boxing it in. */ .newsletter-inline{max-width:1200px;margin:0 auto;padding:0 20px} /* the embed can render in an iframe — keep the frame and any wrapper it adds from painting a light canvas behind beehiiv's transparent form */ .newsletter-inline iframe,.newsletter-inline > div{background:transparent!important;color-scheme:dark} /* the beehiiv form carries its own generous top padding, so the last block before the newsletter band doesn't need a full bottom pad — trim it so the space above the form is even with the gap below it */ main > .section:last-child, main > .section-tight:last-child, main > .tagline:last-child{padding-bottom:clamp(24px,3vw,40px)} /* #endregion */ /* #region buttons */ /* ─── buttons ─────────────────────────────────────────────────────── */ /* shared shape — pill, icon gap, press feedback */ .btn{font-size:13px;font-weight:600;letter-spacing:.03em;padding:14px 24px;border-radius:999px; display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease,background .2s,box-shadow .2s,border-color .2s,color .2s} .btn:active{transform:scale(.97)} /* fill variant — solid accent background, glow on hover */ .btn-fill{background:var(--acc);color:var(--fp-black)} .btn-fill:hover{box-shadow:0 0 26px -4px var(--acc);filter:brightness(1.06)} /* ghost variant — outline only, accent border/text on hover */ .btn-ghost{border:1.5px solid var(--border-strong);color:var(--fp-cream)} .btn-ghost:hover{border-color:var(--acc);color:var(--acc)} /* #endregion */ /* #region stat block */ /* ─── stat block ──────────────────────────────────────────────────── */ .stat b{display:block;font-family:var(--stamp);font-size:clamp(38px,4.4vw,60px);line-height:1;color:var(--acc); font-variant-numeric:tabular-nums} .stat span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.6; display:block;margin-top:8px;line-height:1.5} /* #endregion */ /* #region card */ /* ─── card ─────────────────────────────────────────────────────────── */ .card{background:var(--ink-850);border:1.5px solid var(--border);border-radius:16px;padding:28px} .card:hover{border-color:var(--border-strong)} /* #endregion */ /* #region scroll reveal */ /* ─── scroll reveal ───────────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)} .reveal.in{opacity:1;transform:none} /* #endregion */ /* #region page hero */ /* ─── page hero (full-bleed) ─────────────────────────────────────── */ /* shell — bottom-aligned content over a full-bleed background */ .phero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} /* background image layer, darkened */ .phero-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center; filter:brightness(.5) contrast(1.04)} /* gradient veil — fades the bg to black toward the bottom so text stays readable */ .phero-veil{position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(12,12,12,.5) 0%,rgba(12,12,12,.35) 40%,rgba(12,12,12,.96) 100%)} /* content spacing */ .phero .wrap{padding-bottom:clamp(48px,8vw,96px);padding-top:160px} /* accent strip along the bottom edge */ .phero-accent{position:absolute;left:0;bottom:0;width:100%;height:5px;background:var(--acc);z-index:1} /* hero heading rhythm (replaces per-page inline margin-top on .phero h1 / .lede) */ .phero .kick + h1{margin-top:18px} .phero h1 + .lede{margin-top:22px} /* #endregion */ /* #region marquee */ /* ─── marquee ─────────────────────────────────────────────────────── */ /* scroll animation — track slides left, looping at the halfway point (the track's content must be duplicated 2x in HTML for a seamless loop) */ @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* viewport — fades edges to transparent so items scroll in/out smoothly */ .marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} /* the scrolling row itself; pauses on hover */ .marquee-track{display:flex;align-items:center;gap:56px;width:max-content;animation:marquee 42s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} /* #endregion */ /* #region footer */ /* ─── footer ──────────────────────────────────────────────────────── */ /* 3-column grid — copyright | nav links | socials */ .foot{border-top:1px solid var(--border);padding:30px clamp(20px,5vw,40px); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 24px} /* left — copyright text */ .foot .cr{font-family:var(--mono);font-size:11px;opacity:.5;justify-self:start} /* center — footer nav links */ .foot .fl{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:12px;justify-self:center} .foot .fl a{opacity:.7;transition:opacity .15s,color .15s; display:inline-flex;align-items:center;min-height:24px;padding:2px 4px} .foot .fl a:hover,.foot .fl a:focus-visible{opacity:1;color:var(--acc)} /* right — social links */ .foot .fs{display:flex;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;opacity:.6;justify-self:end} .foot .fs a{display:inline-flex;align-items:center;min-height:24px;padding:2px 4px} .foot .fs a:hover,.foot .fs a:focus-visible{opacity:1;color:var(--acc)} /* mobile — stack all three columns and center them */ @media(max-width:780px){.foot{grid-template-columns:1fr;justify-items:center;text-align:center} .foot .cr,.foot .fl,.foot .fs{justify-self:center}} /* #endregion */ /* #region tagline strip */ /* ─── tagline strip ───────────────────────────────────────────────── */ .tagline{text-align:center;font-family:var(--stamp);font-size:clamp(24px,3.4vw,44px); text-transform:uppercase;letter-spacing:.02em;padding:clamp(40px,6vw,72px) 20px} .tagline .off{color:var(--fp-orange)} /* #endregion */ /* #region reduced-motion override */ /* ─── reduced-motion override ────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} /* the marquee can't "scroll slowly" — show one static, centred, wrapped row and drop the duplicate (aria-hidden) set + the edge-fade mask */ .marquee{-webkit-mask:none;mask:none} .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:24px 40px} .marquee-track [aria-hidden="true"]{display:none} } /* #endregion */