/* ================================================================== SynchroDynamic 2024 — interactive effects ("fun but polite") Loaded after fracture-zone.css. All motion is gated on prefers-reduced-motion. Targets existing fz* classes + block nav. ================================================================== */ :root { --sd-green:#37d67a; --sd-green-2:#5aaaff; } /* ================================================================== LAYOUT OVERRIDES — consolidated, applies on EVERY page. WordPress prints `.is-layout-constrained > :where(...){max-width:content-size}` as inline CSS in the head; it clamps the fz* page layouts (front page, heroes, leaderboard) and makes them look narrow. We can't edit that inline rule, so we override it here once instead of per-page. The fz* markup controls its own width via .fzcontainer (max 1180px), so dropping the clamp simply lets those layouts breathe. ================================================================== */ .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: none !important; } /* Leaderboard result badges (WIN/LOSS/DRAW) need a consistent min width. */ .fz-match__result { min-width: 66px; } /* Guard: with the global clamp gone, keep ORDINARY article prose readable (~820px measure). The fz* page layouts wrap themselves in .fzow / .fz-lb (divs, not bare prose), so they stay full-width — only loose paragraphs, headings and lists inside post/page bodies get a comfortable line length. To make blog posts full-bleed too, delete this block. */ .wp-block-post-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre):not(.alignwide):not(.alignfull) { max-width: 820px !important; margin-left: auto !important; margin-right: auto !important; } /* Studio home — "Our Games" cards: two-up, stacking on small screens. */ .fzow .sd-game-card { grid-column: span 6; } @media (max-width: 720px) { .fzow .sd-game-card { grid-column: span 12; } } /* App-store badges (bundled in the theme; relative url() works on local + live). Box heights tuned so the Apple and Google buttons line up visually. */ .sd-badges { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .sd-badge { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; transition: opacity .15s ease, transform .15s ease; } .sd-badge:hover { opacity: .85; transform: translateY(-1px); } .sd-badge-apple { width: 120px; height: 40px; background-image: url(../img/app-store-badge.svg); } .sd-badge-google { width: 135px; height: 52px; background-image: url(../img/google-play-badge.png); } /* Studio home — Latest News horizontal scroller (the post list becomes a snap row). */ .sd-news-scroller .wp-block-latest-posts { display: flex; gap: 16px; margin: 16px 0 0; padding: 2px 4px 16px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 4px; -webkit-overflow-scrolling: touch; } .sd-news-scroller .wp-block-latest-posts > li { flex: 0 0 300px; max-width: 300px; scroll-snap-align: start; background: #212a33; border: 1px solid #2b343d; border-radius: 14px; overflow: hidden; transition: border-color .2s ease, transform .2s ease; } .sd-news-scroller .wp-block-latest-posts > li:hover { border-color: #37d67a; transform: translateY(-3px); } .sd-news-scroller .wp-block-latest-posts__featured-image img { width: 100%; height: 165px; object-fit: cover; display: block; } .sd-news-scroller .wp-block-latest-posts__post-title { display: block; padding: 14px 14px 6px; font-weight: 700; font-size: 1rem; line-height: 1.3; } .sd-news-scroller .wp-block-latest-posts__post-date { display: block; padding: 0 14px 16px; font-size: 0.78rem; color: #9aa4b2; } .sd-news-scroller > h2 { margin-bottom: 0; } /* Align the news block with the 1180px content above + give it edge padding (the global max-width override otherwise lets it run to the edges). */ .sd-news-scroller { box-sizing: border-box; max-width: 1180px !important; padding-left: 16px; padding-right: 16px; } /* Single post — theme-felt previous / next navigation (cards) */ .sd-post-nav { border-top: 1px solid #2b343d; padding-top: 1.5rem; gap: 1rem; } .sd-post-nav .wp-block-post-navigation-link { flex: 1 1 240px; background: #212a33; border: 1px solid #2b343d; border-radius: 12px; padding: 14px 18px; transition: border-color .2s ease, transform .2s ease; } .sd-post-nav .wp-block-post-navigation-link:hover { border-color: #37d67a; transform: translateY(-2px); } .sd-post-nav .wp-block-post-navigation-link a { text-decoration: none; color: #fff; font-weight: 700; } .sd-post-nav .post-navigation-link-next { text-align: right; } /* Hide an empty prev/next card when there is no adjacent post. */ .sd-post-nav .wp-block-post-navigation-link:not(:has(a[href])) { display: none; } /* Single post — theme-felt comments */ .sd-comments { border-top: 1px solid #2b343d; padding-top: 2rem; } .sd-comments .wp-block-comment-template { list-style: none; padding-left: 0; margin: 1.25rem 0 0; } .sd-comments .wp-block-comment-template > li { background: #212a33; border: 1px solid #2b343d; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; } .sd-comments .wp-block-comment-author-name, .sd-comments .wp-block-comment-author-name a { color: #fff; font-weight: 700; text-decoration: none; } .sd-comments .wp-block-comment-date a, .sd-comments .wp-block-comment-edit-link a, .sd-comments .wp-block-comment-reply-link a { color: #9aa4b2; text-decoration: none; } .sd-comments .wp-block-comment-reply-link a:hover { color: #37d67a; } .sd-comments .comment-reply-title { color: #fff; } /* Comment form on dark */ .sd-comments .comment-form input[type="text"], .sd-comments .comment-form input[type="email"], .sd-comments .comment-form input[type="url"], .sd-comments .comment-form textarea { width: 100%; background: #17212a; border: 1px solid #2b343d; color: #fff; border-radius: 10px; padding: 10px 12px; font: inherit; } .sd-comments .comment-form input::placeholder, .sd-comments .comment-form textarea::placeholder { color: #8a94a3; } .sd-comments .comment-form label { color: #c7ced8; font-size: .9rem; } .sd-comments .comment-form .form-submit input[type="submit"] { background: #37d67a; color: #04130a; border: none; cursor: pointer; border-radius: 10px; padding: 11px 22px; font-weight: 700; } .sd-comments .comment-form .form-submit input[type="submit"]:hover { background: #2fca6f; } /* ---- Green selection + scrollbar (global) ---------------------- */ ::selection { background: rgba(55,214,122,.30); color:#fff; } html { scrollbar-color: #37d67a #17212a; scrollbar-width: thin; } ::-webkit-scrollbar { width:12px; height:12px; } ::-webkit-scrollbar-track { background:#17212a; } ::-webkit-scrollbar-thumb { background:#2b343d; border:3px solid #17212a; border-radius:999px; } ::-webkit-scrollbar-thumb:hover { background: var(--sd-green); } /* ---- Scroll progress bar (injected by JS) ---------------------- */ .sd-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:99999; background:linear-gradient(90deg, var(--sd-green), var(--sd-green-2)); box-shadow:0 0 10px rgba(55,214,122,.6); pointer-events:none; transition:width .1s linear; } /* ---- Card hover: lift + green glow ----------------------------- */ .fzow .fzcard, .fzow .fzfeat, .fzow .fzrole, .fzow .fzmode { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } @media (prefers-reduced-motion: no-preference) { .fzow .fzcard:hover, .fzow .fzfeat:hover, .fzow .fzrole:hover, .fzow .fzmode:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(55,214,122,.18); border-color: rgba(55,214,122,.55); } } /* ---- Buttons: shine sweep + primary neon glow ------------------ */ .fzow .fzbtn { position:relative; overflow:hidden; } .fzow .fzbtn::after { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); pointer-events:none; transition:left .6s ease; } .fzow .fzbtnPrimary { transition: box-shadow .25s ease, transform .15s ease; } @media (prefers-reduced-motion: no-preference) { .fzow .fzbtn:hover::after { left:140%; } .fzow .fzbtnPrimary:hover { box-shadow:0 0 0 1px rgba(55,214,122,.5), 0 14px 30px rgba(55,214,122,.35); } } /* ---- Nav: underline grows from center -------------------------- */ .wp-block-navigation .wp-block-navigation-item__content { position:relative; } .wp-block-navigation .wp-block-navigation-item__content::after { content:""; position:absolute; left:50%; right:50%; bottom:-5px; height:2px; background: var(--sd-green); transition:left .25s ease, right .25s ease; } .wp-block-navigation .wp-block-navigation-item__content:hover::after, .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after { left:0; right:0; } /* ---- Hero: drifting aurora + parallax-ready art ---------------- */ .fzow .fzhero { position:relative; } .fzow .fzhero::before { content:""; position:absolute; inset:-12%; z-index:0; pointer-events:none; background: radial-gradient(1000px 520px at 18% 12%, rgba(55,214,122,.20), transparent 55%), radial-gradient(820px 460px at 88% 24%, rgba(90,170,255,.16), transparent 60%); filter:blur(8px); } .fzow .fzhero > * { position:relative; z-index:1; } .fzow .fzheroBanner img { will-change: transform; } @media (prefers-reduced-motion: no-preference) { .fzow .fzhero::before { animation: sdAurora 16s ease-in-out infinite alternate; } } @keyframes sdAurora { 0% { transform:translate3d(-2%,-1%,0) scale(1); opacity:.85; } 100% { transform:translate3d(3%, 2%, 0) scale(1.08); opacity:1; } } /* ---- Scroll reveal (progressive enhancement; .sd-js only) ------ */ .sd-js .fzow .fzsection { opacity:0; transform:translateY(22px); } .sd-js .fzow .fzsection.sd-inview { opacity:1; transform:none; } @media (prefers-reduced-motion: no-preference) { .sd-js .fzow .fzsection { transition: opacity .6s ease, transform .6s ease; } } @media (prefers-reduced-motion: reduce) { .sd-js .fzow .fzsection { opacity:1 !important; transform:none !important; } } /* ================================================================== ROUND 2 — the rest of the menu. "Arcade" layer (crosshair, scanlines, glitch) is gated on the body class .sd-arcade. Remove that one class in functions.php to disable all three at once while keeping everything else. ================================================================== */ /* ---- Hero: animated "tron" grid (behind aurora & content) ------ */ .fzow .fzhero::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(to right, rgba(55,214,122,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(55,214,122,.07) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%); mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%); } @media (prefers-reduced-motion: no-preference) { .fzow .fzhero::after { animation: sdGrid 8s linear infinite; } } @keyframes sdGrid { from { background-position:0 0,0 0; } to { background-position:44px 0,0 44px; } } /* ---- CRT scanlines overlay (arcade layer; very faint) ---------- */ .sd-scanlines { position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.5; background:repeating-linear-gradient( to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.06) 2px 3px); mix-blend-mode:multiply; } /* ---- Crosshair cursor (arcade layer) --------------------------- */ .sd-arcade, .sd-arcade * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Ccircle%20cx='16'%20cy='16'%20r='10'%20fill='none'%20stroke='%2337d67a'%20stroke-width='1.5'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='9'%20stroke='%2337d67a'%20stroke-width='1.5'/%3E%3Cline%20x1='16'%20y1='23'%20x2='16'%20y2='30'%20stroke='%2337d67a'%20stroke-width='1.5'/%3E%3Cline%20x1='2'%20y1='16'%20x2='9'%20y2='16'%20stroke='%2337d67a'%20stroke-width='1.5'/%3E%3Cline%20x1='23'%20y1='16'%20x2='30'%20y2='16'%20stroke='%2337d67a'%20stroke-width='1.5'/%3E%3Ccircle%20cx='16'%20cy='16'%20r='1.5'%20fill='%2337d67a'/%3E%3C/svg%3E") 16 16, crosshair; } .sd-arcade a, .sd-arcade button, .sd-arcade [role="button"], .sd-arcade .wp-block-navigation-item__content, .sd-arcade summary { cursor:pointer; } .sd-arcade input, .sd-arcade textarea, .sd-arcade [contenteditable] { cursor:text; } /* ---- Sticky-header prerequisite -------------------------------- */ /* fracture-zone.css sets `html,body{overflow-x:hidden}`, which makes its own scroll container (overflow-y computes to auto) and breaks position:sticky. Keep the horizontal clip on only; free so the viewport scrolls. */ body { overflow-x: visible; } /* ---- Sticky header that condenses on scroll -------------------- */ /* Sticky must live on the template-part wrapper (a direct child of the tall .wp-site-blocks), NOT the inner .site-header — that inner element's containing block is only as tall as the header, so it can't travel. Targeting the
tag avoids catching the