/* ============================================================ OpenCloudBot — Welcome / Landing page Sci-fi green hero. Shares the brand palette (mint/emerald green + Inter typeface) with the chat page, rendered on a dark canvas so the animated green glow reads as "sci-fi". ============================================================ */ :root { /* Brand greens (consistent with the chat app's mint/green theme) */ --wp-green: #2bffa3; /* neon accent */ --wp-green-soft: #59e6a0; --wp-green-deep: #0c7d57; --wp-mint: #dbffe0; /* matches chat --bg-main */ --wp-bg: #03100b; /* near-black with a green tint */ --wp-bg-2: #061b13; --wp-text: #eafff3; --wp-text-strong: #ffffff; /* headings / emphasised text (flips on light) */ --wp-text-dim: #8fb6a4; --wp-border: rgba(120, 255, 190, 0.14); --wp-panel-2: #020a07; /* deep stop of card/panel gradients */ --wp-shadow: var(--wp-shadow); /* elevation shadow */ --wp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ---------------------------------------------------------------- Light theme — pale mint scheme mirroring the chat app's "light". Applied via (set by the Settings toggle and the per-page theme-boot script). Overrides the palette tokens plus the few component surfaces that don't read straight from them. ---------------------------------------------------------------- */ :root[data-theme="light"] { --wp-green: #0aa06d; /* deeper green so it reads on a pale canvas */ --wp-green-soft: #12b884; --wp-green-deep: #0a8a5e; --wp-mint: #0c7d57; /* link/accent text — dark enough on light */ --wp-bg: #dbffe0; /* pale mint canvas (matches chat --bg-main) */ --wp-bg-2: #effff4; /* card/panel light stop */ --wp-text: #102a1e; --wp-text-strong: #06150e; --wp-text-dim: #4a6b5b; --wp-border: rgba(10, 90, 56, 0.18); --wp-panel-2: #d6f4e1; /* card/panel deep stop */ --wp-shadow: rgba(20, 70, 50, 0.16); } /* Component surfaces with literal colours the tokens above don't reach. */ /* The index hero/feature "screens" stay dark (glowing display panels) in both themes, so their title must stay light rather than flip with --wp-text-strong. */ :root[data-theme="light"] .wp-hero-frame .wp-title { color: #ffffff; } :root[data-theme="light"] .set-switch .set-slider { background: rgba(0, 0, 0, 0.16); border-color: rgba(0, 0, 0, 0.2); } :root[data-theme="light"] .set-seg { background: rgba(0, 0, 0, 0.06); } :root[data-theme="light"] .settings-card.danger { border-color: rgba(200, 40, 40, 0.38); } :root[data-theme="light"] .settings-card.danger h2 { color: #b3261e; } :root[data-theme="light"] .auth-msg.error, :root[data-theme="light"] .set-btn:not(.set-btn-link) { color: #a11722; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Paint the root canvas dark so the first (uncached) frame never flashes the browser's default white background before the body composites. */ html { background: var(--wp-bg); } .welcome-body { font-family: var(--wp-font); background: var(--wp-bg); color: var(--wp-text); min-height: 100dvh; overflow-x: hidden; display: flex; flex-direction: column; /* faint ambient green wash on the page background */ background-image: radial-gradient(60% 50% at 50% 0%, rgba(43, 255, 163, 0.08), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(12, 125, 87, 0.10), transparent 70%); } /* ---------------------------------------------------------------- Top navigation ---------------------------------------------------------------- */ .wp-nav { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem 2rem; } .wp-nav-left { display: flex; align-items: center; gap: 3rem; } .wp-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--wp-text); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; white-space: nowrap; } .wp-brand-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--wp-border), 0 0 14px rgba(43, 255, 163, 0.35); } /* Artistic wordmark (Alogo4.png) used in place of the live "OpenCloudBot" text. */ .wp-brand-wordmark { height: 22px; width: auto; display: block; } .wp-links { display: flex; align-items: center; gap: 2.4rem; } .wp-link { text-decoration: none; color: var(--wp-text-dim); font-size: 1.02rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.18s ease; } .wp-link:hover { color: var(--wp-text); } .wp-nav-right { display: flex; align-items: center; gap: 1rem; } /* Auth buttons — light-green Log In + deep-green Sign Up */ .wp-auth { display: flex; align-items: center; gap: 0.6rem; } .wp-auth-btn { display: inline-flex; align-items: center; text-decoration: none; font-family: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1; padding: 0.55rem 1.15rem; border-radius: 9999px; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } /* Light green — soft tinted fill */ .wp-auth-login { color: var(--wp-green); background: rgba(43, 255, 163, 0.1); border: 1px solid rgba(43, 255, 163, 0.35); } .wp-auth-login:hover { color: var(--wp-bg); background: linear-gradient(180deg, var(--wp-green), var(--wp-green-soft)); border-color: transparent; box-shadow: 0 0 16px rgba(43, 255, 163, 0.3); } /* Deep green — solid filled */ .wp-auth-signup { color: var(--wp-mint); background: linear-gradient(180deg, var(--wp-green-deep), #0a6647); border: 1px solid rgba(43, 255, 163, 0.35); box-shadow: 0 0 14px rgba(12, 125, 87, 0.35); } .wp-auth-signup:hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(43, 255, 163, 0.4); border-color: rgba(43, 255, 163, 0.6); } .wp-nav-toggle { display: none; background: none; border: none; color: var(--wp-text); font-size: 1.5rem; cursor: pointer; line-height: 1; } /* Mobile dropdown (hidden on desktop) */ .wp-mobile-menu { display: none; flex-direction: column; gap: 0.25rem; padding: 0 2rem 1rem; position: relative; z-index: 20; } .wp-mobile-menu.open { display: flex; } .wp-mobile-menu .wp-link { padding: 0.65rem 0; border-bottom: 1px solid var(--wp-border); } /* ---------------------------------------------------------------- Hero ---------------------------------------------------------------- */ .wp-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem 2rem 3.5rem; gap: 2rem; } .wp-hero-frame { position: relative; width: min(1180px, 100%); height: min(64vh, 560px); border-radius: 28px; overflow: hidden; border: 1px solid var(--wp-border); background: radial-gradient(120% 120% at 50% 50%, var(--wp-bg-2), var(--wp-panel-2) 70%); box-shadow: 0 30px 80px var(--wp-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.02); display: flex; align-items: center; justify-content: center; } /* ---------------------------------------------------------------- Animated sci-fi green effect (layered) ---------------------------------------------------------------- */ .wp-fx { position: absolute; inset: 0; overflow: hidden; } /* Flowing rotating aurora — the main "wormhole" sweep */ .wp-fx-aurora { position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); background: conic-gradient( from 0deg, transparent 0deg, rgba(43, 255, 163, 0.0) 20deg, rgba(43, 255, 163, 0.55) 70deg, rgba(89, 230, 160, 0.15) 120deg, transparent 170deg, transparent 200deg, rgba(12, 125, 87, 0.45) 250deg, rgba(43, 255, 163, 0.30) 300deg, transparent 340deg ); border-radius: 50%; filter: blur(60px); opacity: 0.8; animation: wp-spin 22s linear infinite; } /* Drifting glow blobs */ .wp-fx-glow { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; } .wp-fx-glow-a { width: 46%; aspect-ratio: 1 / 1; left: 18%; top: 30%; background: radial-gradient(circle, rgba(43, 255, 163, 0.55), transparent 65%); animation: wp-drift-a 16s ease-in-out infinite; } .wp-fx-glow-b { width: 50%; aspect-ratio: 1 / 1; right: 14%; bottom: 22%; background: radial-gradient(circle, rgba(12, 200, 130, 0.5), transparent 65%); animation: wp-drift-b 19s ease-in-out infinite; } /* Bright pulsing core in the very center */ .wp-fx-core { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(220, 255, 224, 0.9), rgba(43, 255, 163, 0.35) 35%, transparent 70%); border-radius: 50%; filter: blur(30px); animation: wp-pulse 6s ease-in-out infinite; } /* Subtle sci-fi grid overlay */ .wp-fx-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(43, 255, 163, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(43, 255, 163, 0.06) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(120% 120% at 50% 50%, #000 35%, transparent 75%); -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 35%, transparent 75%); opacity: 0.5; } /* Edge vignette so the glow is pinched toward the centre */ .wp-fx-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(3, 16, 11, 0.85) 85%); } /* Hero text overlaid on the effect */ .wp-hero-content { position: relative; z-index: 5; text-align: center; padding: 1rem; } .wp-title { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--wp-text-strong); text-shadow: 0 0 24px rgba(43, 255, 163, 0.45), 0 2px 30px var(--wp-shadow); } /* ---------------------------------------------------------------- CTA button ---------------------------------------------------------------- */ .wp-cta { display: flex; justify-content: center; } .wp-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1rem; font-weight: 600; color: #04130d; padding: 0.9rem 2.4rem; border-radius: 9999px; background: linear-gradient(180deg, var(--wp-green), var(--wp-green-soft)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 8px 30px rgba(43, 255, 163, 0.35); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .wp-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 12px 40px rgba(43, 255, 163, 0.5); } .wp-btn:active { transform: translateY(0); } /* ---------------------------------------------------------------- Stacked feature panels below the hero (blog / finance / game). Each reuses the same animated green frame + centered CTA button as the hero, replicated downward. ---------------------------------------------------------------- */ .wp-sections { display: flex; flex-direction: column; } .wp-section { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 3.5rem 2rem; } /* Flavor line under a panel title */ .wp-subtitle { margin-top: 1rem; font-size: clamp(0.95rem, 2vw, 1.2rem); font-weight: 400; color: rgba(234, 255, 243, 0.82); text-shadow: 0 2px 18px var(--wp-shadow); } /* ---------------------------------------------------------------- Keyframes ---------------------------------------------------------------- */ @keyframes wp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes wp-pulse { 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.92); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } } @keyframes wp-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12%, -8%) scale(1.12); } } @keyframes wp-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10%, 8%) scale(1.1); } } /* ---------------------------------------------------------------- Footer ---------------------------------------------------------------- */ .wp-footer { position: relative; z-index: 10; border-top: 1px solid var(--wp-border); padding: 3.5rem 2rem 2rem; background: linear-gradient(180deg, transparent, rgba(6, 27, 19, 0.55)); } .wp-footer-inner { max-width: 1180px; margin: 0 auto; } .wp-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; gap: 2.5rem; } .wp-footer-brand h3 { font-size: 1.15rem; font-weight: 700; color: var(--wp-text); margin-bottom: 0.9rem; } .wp-footer-brand p { color: var(--wp-text-dim); font-size: 0.9rem; line-height: 1.7; max-width: 38ch; } .wp-footer-col { display: flex; flex-direction: column; } .wp-footer-col h4 { font-size: 1rem; font-weight: 600; color: var(--wp-text); margin-bottom: 1.1rem; } .wp-footer-link { color: var(--wp-text-dim); text-decoration: none; font-size: 0.9rem; padding: 0.35rem 0; transition: color 0.18s ease; width: fit-content; } .wp-footer-link:hover { color: var(--wp-green); } /* Contact column: icon + label, aligned with a small gap. */ .wp-footer-contact { display: inline-flex; align-items: center; gap: 0.5rem; } .wp-footer-contact i { font-size: 1.05rem; flex-shrink: 0; } /* Uppercase the footer nav columns — "Links" (2nd grid child) and "Explore" (3rd) — leaving Legal labels and the contact email untouched. */ .wp-footer-grid > .wp-footer-col:nth-of-type(2) .wp-footer-link, .wp-footer-grid > .wp-footer-col:nth-of-type(3) .wp-footer-link { text-transform: uppercase; letter-spacing: 0.05em; } .wp-footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--wp-border); text-align: center; color: var(--wp-text-dim); font-size: 0.85rem; } /* ---------------------------------------------------------------- Responsive ---------------------------------------------------------------- */ @media (max-width: 760px) { .wp-nav { padding: 0.9rem 1.1rem; } .wp-links { display: none; } .wp-auth { display: none; } .wp-nav-toggle { display: block; } .wp-nav-left { gap: 0; } .wp-hero { padding: 0.5rem 1.1rem 2.5rem; gap: 1.5rem; } .wp-hero-frame { height: min(58vh, 460px); border-radius: 20px; } .wp-section { padding: 2.5rem 1.1rem; gap: 1.5rem; } .wp-footer { padding: 2.5rem 1.5rem 1.75rem; } .wp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .wp-footer-brand { grid-column: 1 / -1; } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .wp-fx-aurora, .wp-fx-glow-a, .wp-fx-glow-b, .wp-fx-core { animation: none; } } /* ============================================================ Blog (blog.html) Reference card-grid layout (sidebar filter + cards) rendered in the site's sci-fi green palette. Reuses .wp-nav / .wp-footer. Posts are Markdown files under /posts, listed by /posts/index.json and rendered client-side via marked + DOMPurify. ============================================================ */ .blog-wrap { flex: 1; width: min(1180px, 100%); margin: 0 auto; padding: 1.75rem 2rem 4rem; } .blog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.5rem; margin-bottom: 1.9rem; border-bottom: 1px solid var(--wp-border); } .blog-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; letter-spacing: -0.02em; color: var(--wp-text-strong); text-shadow: 0 0 22px rgba(43, 255, 163, 0.35); } .blog-head p { color: var(--wp-text-dim); font-size: 0.95rem; } /* Two-column: filter sidebar + card grid */ .blog-layout { display: grid; grid-template-columns: 230px 1fr; gap: 2.5rem; align-items: start; } .blog-sidebar { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.75rem; } .blog-side-title { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp-text-dim); margin-bottom: 0.85rem; } .blog-search-box { position: relative; } .blog-search-box > i { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--wp-text-dim); font-size: 1rem; pointer-events: none; } .blog-search { width: 100%; font-family: inherit; font-size: 0.9rem; color: var(--wp-text); padding: 0.6rem 0.9rem 0.6rem 2.4rem; background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 10px; outline: none; transition: border-color 0.18s ease; } .blog-search:focus { border-color: rgba(43, 255, 163, 0.5); } .blog-search::placeholder { color: var(--wp-text-dim); } .blog-cats { display: flex; flex-direction: column; gap: 0.2rem; } .blog-cat { text-align: left; font-family: inherit; font-size: 0.9rem; color: var(--wp-text-dim); background: none; border: none; cursor: pointer; padding: 0.5rem 0.7rem; border-radius: 8px; transition: color 0.15s ease, background 0.15s ease; } .blog-cat:hover { color: var(--wp-text); background: rgba(43, 255, 163, 0.05); } .blog-cat.active { color: var(--wp-green); background: rgba(43, 255, 163, 0.08); font-weight: 600; } /* Card grid */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } .blog-card { display: flex; flex-direction: column; text-decoration: none; cursor: pointer; background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 16px; overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .blog-card:hover { transform: translateY(-4px); border-color: rgba(43, 255, 163, 0.4); box-shadow: 0 16px 40px var(--wp-shadow), 0 0 22px rgba(43, 255, 163, 0.12); } .blog-card-cover { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--cover, #0c7d57), #03100b); } /* faint sci-fi grid echo over each cover */ .blog-card-cover::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(120% 120% at 50% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 30%, transparent 80%); } .blog-card-cover > i { position: relative; z-index: 1; font-size: 2.6rem; color: rgba(255, 255, 255, 0.92); } /* Cover thumbnail (front-matter `cover:`) fills the block instead of an icon */ .blog-card-cover.has-image { background: var(--wp-bg-2); } .blog-card-cover.has-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .blog-card-cover.has-image::after { opacity: 0.6; } .blog-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .blog-card-date { font-size: 0.78rem; color: var(--wp-text-dim); } .blog-card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--wp-text); } .blog-card-tag { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--wp-green-soft); } .blog-empty { grid-column: 1 / -1; padding: 3rem 0; text-align: center; color: var(--wp-text-dim); } /* ---- Article detail view ---- */ .blog-article { max-width: 760px; margin: 0 auto; } .blog-back { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--wp-text-dim); font-size: 0.9rem; margin-bottom: 1.75rem; transition: color 0.15s ease; } .blog-back:hover { color: var(--wp-green); } .blog-article-meta { display: flex; align-items: center; gap: 0.7rem; color: var(--wp-text-dim); font-size: 0.85rem; margin-bottom: 0.75rem; } .blog-article-meta .blog-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--wp-text-dim); } .blog-article-title { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--wp-text-strong); margin-bottom: 1.9rem; } /* Rendered Markdown body */ @supports (animation-timeline: scroll()) { html:has(.blog-article)::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(to right, var(--wp-green-soft), var(--wp-green)); z-index: 9999; transform: scaleX(0); transform-origin: 0 50%; animation: scroll-progress linear; animation-timeline: scroll(); } @keyframes scroll-progress { to { transform: scaleX(1); } } } .blog-article-body { color: var(--wp-text); line-height: 1.85; font-size: 1.05rem; letter-spacing: 0.01em; } .blog-article-body strong { color: var(--wp-text-strong); font-weight: 700; } .blog-article-body h2 { font-size: 1.65rem; font-weight: 700; color: var(--wp-text-strong); margin: 2.8rem 0 1rem; position: relative; padding-left: 0.9rem; } .blog-article-body h2::before { content: ''; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 3px; background: linear-gradient(to bottom, var(--wp-green), var(--wp-green-deep)); border-radius: 2px; box-shadow: 0 0 8px rgba(43, 255, 163, 0.4); } .blog-article-body h3 { font-size: 1.25rem; font-weight: 600; color: var(--wp-text-strong); margin: 2rem 0 0.8rem; } .blog-article-body p { margin-bottom: 1.25rem; } .blog-article-body a { color: var(--wp-green-soft); text-decoration: none; border-bottom: 1px dashed var(--wp-green-soft); transition: all 0.2s ease; } .blog-article-body a:hover { color: var(--wp-green); border-bottom: 1px solid var(--wp-green); text-shadow: 0 0 8px rgba(43, 255, 163, 0.3); } .blog-article-body ul { list-style: none; padding-left: 0.2rem; margin: 0 0 1.25rem; } .blog-article-body ul li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; line-height: 1.7; } .blog-article-body ul li::before { content: ""; position: absolute; left: 0.2rem; top: 0.6em; width: 5px; height: 5px; background: var(--wp-green-soft); border-radius: 50%; box-shadow: 0 0 6px var(--wp-green); } .blog-article-body ol { padding-left: 1.2rem; margin: 0 0 1.25rem; } .blog-article-body ol li { margin-bottom: 0.5rem; line-height: 1.7; padding-left: 0.2rem; } .blog-article-body blockquote { background: linear-gradient(135deg, var(--wp-bg-2), var(--wp-panel-2)); border-left: 3px solid var(--wp-green); border-radius: 0 12px 12px 0; padding: 1.25rem 1.6rem; margin: 2rem 0; color: var(--wp-text-dim); font-style: italic; line-height: 1.75; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.15); } .blog-article-body blockquote p:last-child { margin-bottom: 0; } .blog-article-body code { background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 6px; padding: 0.15rem 0.4rem; font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; color: var(--wp-green-soft); } .blog-article-body pre { background: #020a07; border: 1px solid var(--wp-border); border-radius: 12px; padding: 1.2rem 1.4rem; overflow-x: auto; margin: 2rem 0; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.2); } .blog-article-body pre code { background: none; border: none; padding: 0; color: var(--wp-text); font-size: 0.85em; } .blog-article-body img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); display: block; margin: 2.2rem auto; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; } .blog-article-body img:hover { transform: translateY(-2px) scale(1.005); box-shadow: 0 12px 40px rgba(43, 255, 163, 0.12); } /* In-article media: video, audio, and
captions */ .blog-article-body video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--wp-border); background: #000; display: block; margin: 0 0 0.6rem; } .blog-article-body audio { width: 100%; margin: 0 0 0.6rem; } .blog-article-body figure { margin: 0 0 1.4rem; } .blog-article-body figcaption { margin-top: 0.5rem; font-size: 0.85rem; color: var(--wp-text-dim); text-align: center; } .blog-article-body hr { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--wp-border), transparent); margin: 3rem 0; position: relative; overflow: visible; } .blog-article-body hr::after { content: '◇'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--wp-bg); padding: 0 1rem; color: var(--wp-green-soft); font-size: 0.8rem; } @media (max-width: 760px) { .blog-wrap { padding: 1.25rem 1.1rem 3rem; } .blog-layout { grid-template-columns: 1fr; gap: 1.5rem; } .blog-sidebar { position: static; } .blog-cats { flex-direction: row; flex-wrap: wrap; } .blog-cat { padding: 0.45rem 0.8rem; border: 1px solid var(--wp-border); border-radius: 9999px; } } /* ======================================================================== Auth pages (login / signup / recover) — centred card on the sci-fi shell ======================================================================== */ .auth-wrap { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; padding: 3rem 1.25rem; position: relative; overflow: hidden; } /* Reuse the hero glow behind the card */ .auth-wrap .wp-fx { position: absolute; inset: 0; z-index: 0; } .auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 2.25rem 2rem; background: radial-gradient(120% 120% at 50% 0%, var(--wp-bg-2), var(--wp-panel-2) 80%); border: 1px solid var(--wp-border); border-radius: 18px; box-shadow: 0 24px 60px var(--wp-shadow), 0 0 26px rgba(43, 255, 163, 0.08); } .auth-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--wp-text-strong); text-shadow: 0 0 18px rgba(43, 255, 163, 0.3); margin-bottom: 0.35rem; } .auth-sub { color: var(--wp-text-dim); font-size: 0.9rem; margin-bottom: 1.6rem; } .auth-form { display: flex; flex-direction: column; gap: 1rem; } .auth-field { display: flex; flex-direction: column; gap: 0.4rem; } .auth-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-text-dim); } .auth-input { width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--wp-text); padding: 0.7rem 0.9rem; background: var(--wp-bg); border: 1px solid var(--wp-border); border-radius: 10px; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .auth-input:focus { border-color: rgba(43, 255, 163, 0.55); box-shadow: 0 0 0 3px rgba(43, 255, 163, 0.1); } .auth-input::placeholder { color: var(--wp-text-dim); } .auth-submit { margin-top: 0.4rem; width: 100%; justify-content: center; font-size: 0.95rem; padding: 0.75rem 1.15rem; color: var(--wp-bg); background: linear-gradient(180deg, var(--wp-green), var(--wp-green-soft)); border: none; border-radius: 9999px; font-weight: 600; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } .auth-submit:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(43, 255, 163, 0.4); } .auth-submit:disabled { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; } .auth-alt { margin-top: 1.4rem; font-size: 0.88rem; color: var(--wp-text-dim); text-align: center; } .auth-alt a { color: var(--wp-green); text-decoration: none; } .auth-alt a:hover { text-decoration: underline; } /* Inline messages */ .auth-msg { font-size: 0.86rem; line-height: 1.5; padding: 0.7rem 0.85rem; border-radius: 10px; display: none; } .auth-msg.show { display: block; } .auth-msg.error { color: #ffd5d5; background: rgba(255, 70, 70, 0.1); border: 1px solid rgba(255, 70, 70, 0.3); } .auth-msg.ok { color: var(--wp-mint); background: rgba(43, 255, 163, 0.08); border: 1px solid rgba(43, 255, 163, 0.3); } /* Turnstile widget sits left-aligned under the fields */ .auth-turnstile { min-height: 65px; } /* Recovery codes panel shown once after signup */ .auth-recovery { text-align: left; } .auth-recovery h2 { font-size: 1.25rem; color: var(--wp-text-strong); margin-bottom: 0.5rem; } .auth-recovery p { color: var(--wp-text-dim); font-size: 0.88rem; line-height: 1.6; margin-bottom: 1rem; } .auth-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.2rem; } .auth-code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.04em; color: var(--wp-green); text-align: center; padding: 0.65rem 0.4rem; background: var(--wp-bg); border: 1px solid rgba(43, 255, 163, 0.25); border-radius: 10px; } .auth-recovery-actions { display: flex; gap: 0.6rem; } .auth-ghost-btn { flex: 1; text-align: center; font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.65rem 1rem; color: var(--wp-green); background: rgba(43, 255, 163, 0.1); border: 1px solid rgba(43, 255, 163, 0.35); border-radius: 9999px; cursor: pointer; text-decoration: none; transition: background 0.18s ease; } .auth-ghost-btn:hover { background: rgba(43, 255, 163, 0.18); } /* Logged-in user menu (username + gear dropdown) in the top nav */ .wp-usermenu { position: relative; } .wp-user-trigger { display: inline-flex; align-items: center; gap: 0.5rem; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--wp-text); padding: 0.45rem 0.85rem; border: 1px solid var(--wp-border); border-radius: 9999px; background: none; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; } .wp-user-trigger:hover { border-color: rgba(43, 255, 163, 0.5); background: rgba(43, 255, 163, 0.06); } .wp-user-avatar { color: var(--wp-green); font-size: 1.15rem; } img.wp-user-avatar { width: 24px; height: 24px; border-radius: 7px; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(43, 255, 163, 0.25); } .wp-user-name-text { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wp-user-gear { font-size: 1rem; color: var(--wp-text-dim); transition: transform 0.2s ease, color 0.18s ease; } .wp-usermenu.open .wp-user-gear { transform: rotate(90deg); color: var(--wp-green); } .wp-usermenu-dropdown { position: absolute; top: calc(100% + 0.55rem); right: 0; min-width: 200px; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.1rem; background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 14px; box-shadow: 0 16px 40px var(--wp-shadow), 0 0 18px rgba(43, 255, 163, 0.08); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 30; } .wp-usermenu.open .wp-usermenu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .wp-usermenu-item { display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: left; text-decoration: none; font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--wp-text); padding: 0.6rem 0.75rem; background: none; border: none; border-radius: 9px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .wp-usermenu-item i { font-size: 1.1rem; color: var(--wp-text-dim); transition: color 0.15s ease; } .wp-usermenu-item:hover { background: rgba(43, 255, 163, 0.08); color: var(--wp-green); } .wp-usermenu-item:hover i { color: var(--wp-green); } .wp-usermenu-logout { border-top: 1px solid var(--wp-border); border-radius: 0 0 9px 9px; margin-top: 0.15rem; } .wp-usermenu-logout:hover { background: rgba(255, 70, 70, 0.1); color: #ffb3b3; } .wp-usermenu-logout:hover i { color: #ffb3b3; } /* Mobile menu: username heading when signed in */ .wp-mobile-user { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp-text-dim); padding: 0.4rem 0 0.2rem; } /* ======================================================================== Account settings / Artifacts / Settings pages ======================================================================== */ .settings-wrap { max-width: 600px; margin: 0 auto; padding: 2.75rem 1.25rem 4rem; } .settings-head { margin-bottom: 1.75rem; } .settings-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--wp-text-strong); text-shadow: 0 0 20px rgba(43, 255, 163, 0.3); } .settings-head p { color: var(--wp-text-dim); font-size: 0.92rem; margin-top: 0.3rem; } .settings-card { background: radial-gradient(120% 120% at 50% 0%, var(--wp-bg-2), var(--wp-panel-2) 85%); border: 1px solid var(--wp-border); border-radius: 16px; padding: 1.6rem 1.5rem; margin-bottom: 1.25rem; } .settings-card h2 { font-size: 1.1rem; font-weight: 600; color: var(--wp-text-strong); margin-bottom: 0.35rem; } .settings-card .settings-desc { color: var(--wp-text-dim); font-size: 0.86rem; line-height: 1.55; margin-bottom: 1.1rem; } .settings-card.danger { border-color: rgba(255, 70, 70, 0.35); } .settings-card.danger h2 { color: #ffb3b3; } /* Inline button sizing inside settings cards */ .settings-card .auth-form { gap: 0.9rem; } .settings-card .auth-submit { width: auto; align-self: flex-start; padding: 0.6rem 1.4rem; } .auth-danger-btn { align-self: flex-start; font-family: inherit; font-size: 0.92rem; font-weight: 600; padding: 0.6rem 1.4rem; color: #ffd5d5; background: rgba(255, 70, 70, 0.12); border: 1px solid rgba(255, 70, 70, 0.4); border-radius: 9999px; cursor: pointer; transition: background 0.18s ease; } .auth-danger-btn:hover { background: rgba(255, 70, 70, 0.22); } .auth-danger-btn:disabled { opacity: 0.55; cursor: progress; } /* ── settings.html controls ─────────────────────────────────────────── */ /* Segmented control (theme picker) */ .set-seg { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--wp-border); border-radius: 9999px; } .set-seg button { font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--wp-text-dim); background: transparent; border: none; padding: 0.5rem 1.25rem; border-radius: 9999px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .set-seg button.active { color: #04130d; background: var(--wp-green); } /* Toggle switch */ .set-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .set-toggle-row .settings-desc { margin-bottom: 0; } .set-switch { position: relative; width: 48px; height: 27px; flex: none; } .set-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .set-switch .set-slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--wp-border); border-radius: 9999px; transition: background 0.18s ease, border-color 0.18s ease; } .set-switch .set-slider::before { content: ''; position: absolute; width: 19px; height: 19px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: transform 0.18s ease; } .set-switch input:checked + .set-slider { background: var(--wp-green); border-color: var(--wp-green); } .set-switch input:checked + .set-slider::before { transform: translateX(21px); } /* Per-feature data rows (online + local data) */ .set-row { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--wp-border); } .set-row:first-of-type { border-top: none; padding-top: 0.2rem; } .set-row-main { flex: 1 1 auto; min-width: 0; } .set-row-title { font-size: 0.94rem; font-weight: 600; color: var(--wp-text-strong); display: flex; align-items: center; gap: 0.5rem; } .set-row-title i { color: var(--wp-green); font-size: 1.05rem; } .set-row-desc { font-size: 0.82rem; color: var(--wp-text-dim); margin-top: 0.2rem; line-height: 1.45; } .set-row-action { flex: none; } .set-btn { font-family: inherit; font-size: 0.84rem; font-weight: 600; white-space: nowrap; padding: 0.5rem 1.05rem; color: #ffd5d5; background: rgba(255, 70, 70, 0.12); border: 1px solid rgba(255, 70, 70, 0.4); border-radius: 9999px; cursor: pointer; transition: background 0.18s ease; } .set-btn:hover { background: rgba(255, 70, 70, 0.22); } .set-btn.armed { background: rgba(255, 70, 70, 0.32); border-color: rgba(255, 70, 70, 0.7); color: var(--wp-text-strong); } .set-btn:disabled { opacity: 0.5; cursor: default; background: rgba(255, 255, 255, 0.05); border-color: var(--wp-border); color: var(--wp-text-dim); } .set-btn.set-btn-link { color: var(--wp-mint); background: rgba(43, 255, 163, 0.08); border-color: rgba(43, 255, 163, 0.35); text-decoration: none; display: inline-block; } .set-btn.set-btn-link:hover { background: rgba(43, 255, 163, 0.18); } .set-note { font-size: 0.84rem; color: var(--wp-text-dim); } .set-note a { color: var(--wp-mint); } /* "Coming soon" placeholder (legacy) */ .coming-soon { min-height: calc(100vh - 70px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; gap: 0.6rem; } .coming-soon i { font-size: 3rem; color: var(--wp-green); text-shadow: 0 0 24px rgba(43, 255, 163, 0.4); margin-bottom: 0.4rem; } .coming-soon h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; color: var(--wp-text-strong); letter-spacing: -0.02em; } .coming-soon p { color: var(--wp-text-dim); font-size: 0.95rem; max-width: 420px; } .coming-soon .wp-btn { margin-top: 1rem; } @media (max-width: 760px) { .auth-card { padding: 1.75rem 1.4rem; } .auth-codes { grid-template-columns: 1fr; } } /* ======================================================================== Avatar picker (Account page) ======================================================================== */ .avatar-current { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; } .avatar-current img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(43, 255, 163, 0.3), 0 0 18px rgba(43, 255, 163, 0.12); } .avatar-current .avatar-current-name { font-size: 0.86rem; color: var(--wp-text-dim); } .avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem; } .avatar-option { position: relative; padding: 0; border: 1px solid var(--wp-border); border-radius: 12px; background: var(--wp-bg); cursor: pointer; line-height: 0; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .avatar-option img { width: 100%; height: auto; border-radius: 11px; display: block; } .avatar-option:hover { transform: translateY(-2px); border-color: rgba(43, 255, 163, 0.5); } .avatar-option.selected { border-color: var(--wp-green); box-shadow: 0 0 0 2px rgba(43, 255, 163, 0.45), 0 0 16px rgba(43, 255, 163, 0.25); } .avatar-option.selected::after { content: '\2713'; position: absolute; right: 4px; bottom: 2px; font-size: 0.7rem; color: var(--wp-bg); background: var(--wp-green); width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; } @media (max-width: 520px) { .avatar-grid { grid-template-columns: repeat(4, 1fr); } } /* ======================================================================== Blog comments ======================================================================== */ .comments { max-width: 760px; margin: 2.5rem auto 0; padding-top: 2rem; border-top: 1px solid var(--wp-border); } .comments h2 { font-size: 1.2rem; font-weight: 700; color: var(--wp-text-strong); margin-bottom: 1.25rem; } .comments h2 span { color: var(--wp-text-dim); font-weight: 500; } /* Composer */ .comment-compose { margin-bottom: 1.75rem; } .comment-compose textarea { width: 100%; min-height: 92px; resize: vertical; font-family: inherit; font-size: 0.95rem; line-height: 1.5; color: var(--wp-text); padding: 0.8rem 0.95rem; background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 12px; outline: none; transition: border-color 0.18s ease; } .comment-compose textarea:focus { border-color: rgba(43, 255, 163, 0.5); } .comment-compose-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 0.6rem; gap: 1rem; } .comment-count { font-size: 0.8rem; color: var(--wp-text-dim); } .comment-count.over { color: #ff9b9b; } .comment-submit { font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.55rem 1.3rem; color: var(--wp-bg); background: linear-gradient(180deg, var(--wp-green), var(--wp-green-soft)); border: none; border-radius: 9999px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .comment-submit:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(43, 255, 163, 0.35); } .comment-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } /* Login prompt for logged-out visitors */ .comment-login-note { font-size: 0.9rem; color: var(--wp-text-dim); background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 1.75rem; } .comment-login-note a { color: var(--wp-green); text-decoration: none; font-weight: 600; } .comment-login-note a:hover { text-decoration: underline; } /* Status message */ .comment-msg { font-size: 0.85rem; margin-top: 0.6rem; display: none; } .comment-msg.show { display: block; } .comment-msg.error { color: #ff9b9b; } .comment-msg.ok { color: var(--wp-green); } /* List */ .comment-list { display: flex; flex-direction: column; gap: 1.1rem; } .comment-empty { color: var(--wp-text-dim); font-size: 0.9rem; } .comment-item { display: flex; gap: 0.85rem; } .comment-item img.comment-avatar { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(43, 255, 163, 0.2); } .comment-body { flex: 1; min-width: 0; } .comment-meta { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.25rem; } .comment-author { font-weight: 600; color: var(--wp-text); font-size: 0.92rem; } .comment-date { font-size: 0.76rem; color: var(--wp-text-dim); } .comment-text { color: var(--wp-text); font-size: 0.94rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; } /* ======================================================================== Arcade (game.html) — a card-grid hub of mini-games on the sci-fi shell, a per-game detail view (intro + personal stats + Start), and a full-screen play overlay. Reuses .wp-nav / .wp-footer and the blog card language. ======================================================================== */ .arcade-wrap { flex: 1; width: min(1180px, 100%); margin: 0 auto; padding: 1.75rem 2rem 4rem; } .arcade-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.5rem; margin-bottom: 1.9rem; border-bottom: 1px solid var(--wp-border); } .arcade-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; letter-spacing: -0.02em; color: var(--wp-text-strong); text-shadow: 0 0 22px rgba(43, 255, 163, 0.35); } .arcade-head p { color: var(--wp-text-dim); font-size: 0.95rem; } /* ---- Card grid ---- */ .arcade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .arcade-card { position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 16px; overflow: hidden; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .arcade-card.is-live { cursor: pointer; } .arcade-card.is-live:hover { transform: translateY(-4px); border-color: rgba(43, 255, 163, 0.4); box-shadow: 0 16px 40px var(--wp-shadow), 0 0 22px rgba(43, 255, 163, 0.12); } .arcade-card.is-soon { cursor: default; opacity: 0.85; } .arcade-card-cover { position: relative; /* 16:9 to match the cover art's ratio — fills the frame edge-to-edge with no crop and no letterboxing. */ aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--cover, #0c7d57), #03100b); overflow: hidden; } .arcade-card-cover::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(120% 120% at 50% 50%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 30%, transparent 80%); z-index: 1; } .arcade-card-cover > i { position: relative; z-index: 2; font-size: 2.8rem; color: rgba(255, 255, 255, 0.92); } .arcade-card-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .arcade-card.is-soon .arcade-card-cover > img, .arcade-card.is-soon .arcade-card-cover > i { filter: grayscale(0.6) brightness(0.7); } /* Play hint that fades in on hover of a live card */ .arcade-card-play { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(3, 16, 11, 0.45); opacity: 0; transition: opacity 0.18s ease; } .arcade-card.is-live:hover .arcade-card-play { opacity: 1; } .arcade-card-play i { font-size: 3.2rem; color: var(--wp-text-strong); text-shadow: 0 0 18px rgba(43, 255, 163, 0.8); } .arcade-badge { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.6rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; backdrop-filter: blur(4px); } .arcade-badge.live { color: var(--wp-bg); background: var(--wp-green); box-shadow: 0 0 14px rgba(43, 255, 163, 0.5); } .arcade-badge.soon { color: var(--wp-text-dim); background: rgba(3, 16, 11, 0.7); border: 1px solid var(--wp-border); } .arcade-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .arcade-card-cat { font-size: 0.78rem; color: var(--wp-green-soft); } .arcade-card-title { font-size: 1.08rem; font-weight: 600; line-height: 1.35; color: var(--wp-text); } .arcade-card-excerpt { font-size: 0.86rem; line-height: 1.5; color: var(--wp-text-dim); margin-top: auto; } /* ---- Detail view ---- */ .arcade-detail { max-width: 880px; margin: 0 auto; } .arcade-back { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--wp-text-dim); font-size: 0.9rem; margin-bottom: 1.5rem; transition: color 0.15s ease; } .arcade-back:hover { color: var(--wp-green); } .arcade-detail-hero { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--wp-border); aspect-ratio: 16 / 9; background: linear-gradient(140deg, var(--cover, #0c7d57), #03100b); } /* 16:9 cover art fills the 16:9 banner edge-to-edge — no crop, no letterboxing. */ .arcade-detail-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .arcade-detail-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 16, 11, 0.9) 0%, rgba(3, 16, 11, 0.15) 55%, transparent 100%); } .arcade-detail-hero-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1.4rem 1.6rem; } .arcade-detail-hero-text .arcade-card-cat { font-size: 0.82rem; } .arcade-detail-hero-text h1 { font-size: clamp(1.5rem, 3.5vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; color: var(--wp-text-strong); text-shadow: 0 2px 18px var(--wp-shadow); } .arcade-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.75rem; margin-top: 1.75rem; align-items: start; } .arcade-section-title { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp-text-dim); margin-bottom: 0.85rem; } .arcade-about p { color: var(--wp-text); line-height: 1.65; font-size: 0.95rem; margin-bottom: 1.2rem; } .arcade-rules { margin: 0 0 1.2rem; padding-left: 1.1rem; list-style: none; } .arcade-rules li { position: relative; color: var(--wp-text); line-height: 1.6; font-size: 0.92rem; margin-bottom: 0.55rem; padding-left: 0.4rem; } .arcade-rules li::before { content: "▸"; position: absolute; left: -0.9rem; color: var(--wp-green); } .arcade-rules code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em; color: var(--wp-green-soft); background: rgba(43, 255, 163, 0.1); padding: 1px 5px; border-radius: 4px; } .arcade-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; } .arcade-control { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; color: var(--wp-text-dim); } .arcade-key { flex-shrink: 0; min-width: 2.1rem; text-align: center; padding: 0.2rem 0.5rem; font-size: 0.76rem; font-weight: 600; color: var(--wp-green); background: rgba(43, 255, 163, 0.08); border: 1px solid var(--wp-border); border-radius: 7px; } /* ---- Stats panel ---- */ .arcade-stats { background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 16px; padding: 1.4rem 1.5rem; } .arcade-best { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--wp-border); } .arcade-best-label { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-text-dim); } .arcade-best-value { font-size: 2.4rem; font-weight: 700; color: var(--wp-green); text-shadow: 0 0 22px rgba(43, 255, 163, 0.35); line-height: 1.1; } .arcade-best-value small { font-size: 1rem; font-weight: 600; color: var(--wp-text-dim); } .arcade-recent-title { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-text-dim); margin-bottom: 0.6rem; } .arcade-attempts { display: flex; flex-direction: column; gap: 0.4rem; } .arcade-attempt { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; font-size: 0.88rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: rgba(120, 255, 190, 0.04); } .arcade-attempt-score { color: var(--wp-text); font-weight: 600; } .arcade-attempt-score small { font-weight: 500; color: var(--wp-text-dim); } .arcade-attempt-date { font-size: 0.76rem; color: var(--wp-text-dim); } .arcade-stats-note { font-size: 0.85rem; line-height: 1.55; color: var(--wp-text-dim); } .arcade-stats-note a { color: var(--wp-green); text-decoration: none; } .arcade-stats-note a:hover { text-decoration: underline; } /* ---- Start button ---- */ .arcade-start { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; margin-top: 1.3rem; padding: 0.95rem 1.5rem; font-family: inherit; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; color: var(--wp-bg); background: linear-gradient(135deg, var(--wp-green), var(--wp-green-deep)); border: none; border-radius: 12px; cursor: pointer; box-shadow: 0 8px 24px rgba(43, 255, 163, 0.25); transition: transform 0.12s ease, box-shadow 0.12s ease; } .arcade-start:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(43, 255, 163, 0.4); } .arcade-start:active { transform: translateY(0); } @media (max-width: 760px) { .arcade-wrap { padding: 1.25rem 1.1rem 3rem; } .arcade-detail-grid { grid-template-columns: 1fr; gap: 1.4rem; } .arcade-controls { grid-template-columns: 1fr; } } /* ======================================================================== Document pages (help.html, privacy-policy.html, terms-of-service.html) — long-form content on the sci-fi green shell. Reuses .wp-nav / .wp-footer. ======================================================================== */ .doc-wrap { flex: 1; width: min(840px, 100%); margin: 0 auto; padding: 2.25rem 2rem 4rem; } .doc-back { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--wp-text-dim); font-size: 0.9rem; margin-bottom: 1.75rem; transition: color 0.15s ease; } .doc-back:hover { color: var(--wp-green); } .doc-head { padding-bottom: 1.5rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--wp-border); } .doc-head h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700; letter-spacing: -0.02em; color: var(--wp-text-strong); text-shadow: 0 0 22px rgba(43, 255, 163, 0.35); } .doc-head .doc-sub { margin-top: 0.5rem; color: var(--wp-text-dim); font-size: 0.95rem; } .doc-body section { margin-bottom: 1.9rem; } .doc-body h2 { font-size: 1.2rem; font-weight: 600; color: var(--wp-text); margin-bottom: 0.75rem; } .doc-body h2 .ph, .doc-body h2 .ph-fill { color: var(--wp-green); margin-right: 0.5rem; } .doc-body p, .doc-body li { color: var(--wp-text-dim); line-height: 1.7; font-size: 0.95rem; } .doc-body p { margin-bottom: 0.85rem; } .doc-body strong { color: var(--wp-text); } .doc-body ul { margin: 0 0 0.85rem 1.3rem; } .doc-body li { margin-bottom: 0.45rem; } .doc-body a { color: var(--wp-green); text-decoration: none; } .doc-body a:hover { text-decoration: underline; } .doc-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 6px; padding: 0.1em 0.4em; color: var(--wp-green-soft); } .doc-updated { color: var(--wp-text-dim); font-size: 0.88rem; margin-bottom: 1.75rem; } .doc-note { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--wp-border); font-size: 0.85rem; color: var(--wp-text-dim); } /* Help "feature card" callouts */ .doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin: 1.1rem 0 0.5rem; } .doc-card { background: var(--wp-bg-2); border: 1px solid var(--wp-border); border-radius: 14px; padding: 1.1rem 1.2rem; } .doc-card h3 { display: flex; align-items: center; gap: 0.55rem; font-size: 1rem; font-weight: 600; color: var(--wp-text); margin-bottom: 0.5rem; } .doc-card h3 .ph, .doc-card h3 .ph-fill { color: var(--wp-green); font-size: 1.2rem; } .doc-card p { font-size: 0.88rem; line-height: 1.6; color: var(--wp-text-dim); margin: 0; } @media (max-width: 760px) { .doc-wrap { padding: 1.5rem 1.1rem 3rem; } } /* Call-to-action block used on the satirical Explore pages (donate/subscription/careers) */ .doc-cta { margin-top: 1.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; } .doc-fake-btn { border: none; font-family: inherit; cursor: pointer; } .doc-cta-note { font-size: 0.85rem; color: var(--wp-text-dim); margin: 0; max-width: 52ch; line-height: 1.55; } /* ============================================================ Landing scroll-reveal motion (index.html feature blocks) Progressive enhancement: the hidden/transform state only applies once JS adds `reveal-ready` to , so no-JS users see everything. Each block materialises (blur→sharp + scale), the stacked feature frames swing in with an alternating 3D tilt, and a one-shot green light sweep passes across each frame as it appears. ============================================================ */ .wp-sections { perspective: 1500px; } html.reveal-ready .wp-anim { opacity: 0; filter: blur(14px); transition: opacity 1s cubic-bezier(0.22, 0.68, 0.16, 1), transform 1.05s cubic-bezier(0.22, 0.68, 0.16, 1), filter 1.1s ease-out; will-change: opacity, transform, filter; } html.reveal-ready .wp-anim.up { transform: translateY(72px) scale(0.96); } html.reveal-ready .wp-anim.left { transform: translateX(-80px) translateY(42px) rotateY(12deg) scale(0.94); transform-origin: left center; } html.reveal-ready .wp-anim.right { transform: translateX(80px) translateY(42px) rotateY(-12deg) scale(0.94); transform-origin: right center; } /* Revealed state (placed last so it wins over the direction transforms) */ html.reveal-ready .wp-anim.is-visible { opacity: 1; filter: blur(0); transform: none; } /* The CTA trails its frame slightly for a two-beat entrance */ html.reveal-ready .wp-cta.wp-anim { transition-delay: 0.14s; } /* One-shot light sweep across a frame as it materialises ("幻化") */ .wp-hero-frame::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(43, 255, 163, 0.28) 50%, transparent 62%); transform: translateX(-130%); opacity: 0; } html.reveal-ready .wp-hero-frame.wp-anim.is-visible::after { animation: wp-sweep 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.15s 1; } @keyframes wp-sweep { 0% { transform: translateX(-130%); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } } /* Reduced-motion: skip the entrance choreography entirely. */ @media (prefers-reduced-motion: reduce) { html.reveal-ready .wp-anim { opacity: 1; filter: none; transform: none; transition: none; } .wp-hero-frame::after { display: none; } } /* Site version label in the footer bottom (driven by ./VERSION via tools/build_shell.py) */ .wp-ver { opacity: .85; font-variant-numeric: tabular-nums; letter-spacing: .02em; }