/* ============================================ Arcynia — Layout: Topbar, Sidebar, Cards, Hero ============================================ */ /* ── Utilities ── Small, reusable classes that don't belong to any one page. */ /* Disables text selection on an element and its descendants. Useful for "app-like" UI surfaces where the user is meant to click/drag widgets rather than highlight copy — e.g. the jukebox cabinet, game cards, the volume knob, etc. */ .no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Visually hides content but keeps it in the accessibility tree and indexable by search engines / AI crawlers. Standard a11y pattern — use for h1 suffixes, button labels next to icons, etc. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Topbar ── */ .topbar { height: 64px; background: var(--ar-topbar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ar-topbar-border); z-index: 1040; } .topbar .container-fluid { gap: 1rem; } .topbar-burger { color: var(--ar-text); font-size: 1.4rem; text-decoration: none; } .topbar-burger:hover { color: var(--ar-neon-pink); } .brand-logo { display: inline-flex; align-items: center; text-decoration: none; padding: 0; } .brand-img { height: 40px; width: auto; display: block; filter: drop-shadow(0 0 8px rgba(255, 45, 123, 0.45)); } @media (min-width: 768px) { .brand-img { height: 44px; } } /* Operator's mark — visual feedback for the long-right-press easter egg on the brand logo. .is-marking shows during the hold; .is-marked plays a one-shot chromatic-aberration glitch when the 2-second threshold is reached. The trigger logic lives in main.js. */ .brand-logo .brand-img { transition: filter 0.4s ease, transform 0.4s ease; } .brand-logo.is-marking .brand-img { filter: drop-shadow(0 0 12px rgba(255, 45, 123, 0.7)) drop-shadow(0 0 20px rgba(0, 240, 255, 0.4)); transform: scale(0.97); } .brand-logo.is-marked .brand-img { animation: brandLogoMark 1.4s steps(20) 1; } @keyframes brandLogoMark { 0% { filter: drop-shadow(2px 0 0 #ff2d7b) drop-shadow(-2px 0 0 #00f0ff); transform: translate(0, 0); } 20% { filter: drop-shadow(-3px 0 0 #ff2d7b) drop-shadow(3px 0 0 #00f0ff); transform: translate(2px, -1px); } 40% { filter: drop-shadow(2px 0 0 #ff2d7b) drop-shadow(-2px 0 0 #00f0ff); transform: translate(-2px, 1px); } 60% { filter: drop-shadow(-2px 0 0 #ff2d7b) drop-shadow(2px 0 0 #00f0ff); transform: translate(1px, 1px); } 80% { filter: drop-shadow(3px 0 0 #ff2d7b) drop-shadow(-3px 0 0 #00f0ff); transform: translate(-1px, -1px); } 100% { filter: drop-shadow(0 0 8px rgba(255, 45, 123, 0.45)); transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { /* Skip the visual mark for users who opted out of motion. The unlock still fires - the egg is findable, just less flashy. */ .brand-logo.is-marked .brand-img { animation: none; } .brand-logo .brand-img { transition: none; } } /* Konami overlay — site-wide reward fired by the keystroke trigger in main.js when the ↑↑↓↓←→←→BA sequence is entered. The overlay is injected into and auto-redirects to /konami after ~2.4s. */ .konami-overlay { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; /* Whole-overlay fade-out at the end so the redirect feels like a cut to black rather than an abrupt navigation. */ animation: konamiOverlayLife 2.4s ease-out forwards; } .konami-overlay-flash { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 45, 123, 0.65), rgba(0, 240, 255, 0.4)); opacity: 0; animation: konamiFlash 0.18s ease-out 1; } .konami-overlay-text { position: relative; text-align: center; padding: 2rem 2.5rem; background: rgba(6, 6, 15, 0.85); border: 2px solid var(--ar-neon-pink); box-shadow: 0 0 40px rgba(255, 45, 123, 0.55), inset 0 0 24px rgba(255, 45, 123, 0.18); opacity: 0; animation: konamiTextIn 0.6s ease-out 0.18s forwards; } .konami-overlay-stamp { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: rgba(0, 240, 255, 0.85); letter-spacing: 0.32em; margin-bottom: 1rem; text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); } .konami-overlay-title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.6rem, 4.5vw, 2.6rem); font-weight: 700; color: #fff; letter-spacing: 0.18em; text-shadow: 0 0 14px rgba(255, 45, 123, 0.9), 0 0 28px rgba(255, 45, 123, 0.5); } .konami-overlay-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.24em; margin-top: 1rem; } @keyframes konamiOverlayLife { 0% { background: rgba(6, 6, 15, 0); } 8% { background: rgba(6, 6, 15, 0.55); } 85% { background: rgba(6, 6, 15, 0.55); } 100% { background: rgba(6, 6, 15, 1); } } @keyframes konamiFlash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes konamiTextIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { /* Strip the visual reward for reduced-motion users. They still reach /konami because main.js runs the redirect regardless. */ .konami-overlay, .konami-overlay-flash, .konami-overlay-text { animation: none; } .konami-overlay { background: rgba(6, 6, 15, 0.85); } .konami-overlay-flash { display: none; } .konami-overlay-text { opacity: 1; } } .brand-text { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.75rem; letter-spacing: 0.18em; background: linear-gradient(180deg, #ffd1ec 0%, var(--ar-neon-pink) 50%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(255, 45, 123, 0.45); line-height: 1; } /* Topbar search */ .topbar-search { position: relative; flex: 0 1 360px; margin-left: 1rem; } .topbar-search .form-control { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ar-border); color: var(--ar-text); padding-left: 2.4rem; border-radius: 999px; height: 40px; } .topbar-search .form-control::placeholder { color: var(--ar-text-dim); } .topbar-search .form-control:focus { background: rgba(255, 45, 123, 0.06); border-color: var(--ar-neon-pink); box-shadow: 0 0 0 0.2rem rgba(255, 45, 123, 0.15); color: var(--ar-text); } .topbar-search .search-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--ar-text-muted); pointer-events: none; } /* Topbar actions */ .topbar-actions { display: flex; align-items: center; gap: 0.25rem; } .topbar-action { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ar-text-muted); text-decoration: none; font-size: 1.1rem; transition: color 0.15s, background 0.15s; } .topbar-action:hover { color: var(--ar-neon-pink); background: rgba(255, 45, 123, 0.10); } /* ── Neon buttons ── */ .btn-neon { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid transparent; text-decoration: none; transition: transform 0.15s, box-shadow 0.2s, background 0.2s; cursor: pointer; } .btn-neon-pink { background: linear-gradient(135deg, var(--ar-neon-pink), var(--ar-neon-purple)); color: #fff; box-shadow: var(--ar-glow-pink); } .btn-neon-pink:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 0 18px rgba(255, 45, 123, 0.7), 0 0 50px rgba(255, 0, 255, 0.35); } .btn-neon-cyan { background: transparent; color: var(--ar-neon-cyan); border-color: var(--ar-neon-cyan); box-shadow: 0 0 0 rgba(0, 240, 255, 0); } .btn-neon-cyan:hover { color: #06060f; background: var(--ar-neon-cyan); box-shadow: var(--ar-glow-cyan); } .btn-neon-violet { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ar-neon-violet), var(--ar-neon-purple)); color: #fff; box-shadow: var(--ar-glow-violet); animation: arcynia-violet-pulse 2.6s ease-in-out infinite; } .btn-neon-violet > * { position: relative; z-index: 1; } .btn-neon-violet::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70% ); transform: translateX(-150%); animation: arcynia-violet-shimmer 4s ease-in-out infinite; pointer-events: none; z-index: 0; } .btn-neon-violet:hover { color: #fff; transform: translateY(-1px); text-shadow: 1.5px 0 var(--ar-neon-cyan), -1.5px 0 var(--ar-neon-pink), 0 0 14px rgba(255, 255, 255, 0.75); animation-duration: 0.85s; } @keyframes arcynia-violet-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(155, 89, 182, 0.55), 0 0 24px rgba(123, 47, 247, 0.25); } 50% { box-shadow: 0 0 20px rgba(155, 89, 182, 0.95), 0 0 56px rgba(123, 47, 247, 0.55); } } @keyframes arcynia-violet-shimmer { 0%, 65% { transform: translateX(-150%); } 100% { transform: translateX(150%); } } @media (prefers-reduced-motion: reduce) { .btn-neon-violet, .btn-neon-violet::before { animation: none; } .btn-neon-violet::before { display: none; } } .btn-neon-outline { background: transparent; color: var(--ar-text); border-color: var(--ar-border); } .btn-neon-outline:hover { border-color: var(--ar-neon-pink); color: var(--ar-neon-pink); } /* ── Sidebar (desktop) ── */ .sidebar { position: fixed; top: 64px; left: 0; bottom: 0; width: 88px; background: var(--ar-sidebar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid var(--ar-sidebar-border); flex-direction: column; align-items: center; justify-content: space-between; padding: 0.75rem 0; z-index: 1030; overflow-y: auto; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: var(--ar-border); border-radius: 4px; } .sidebar-nav { width: 100%; } .sidebar-nav .nav { width: 100%; align-items: center; } .sidebar-nav .nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; padding: 0.55rem 0; margin-bottom: 0.25rem; border-radius: 0.65rem; color: var(--ar-sidebar-color); font-size: 1.2rem; text-decoration: none; position: relative; transition: color 0.15s, background 0.15s; } .sidebar-nav .nav-link:hover { background: var(--ar-sidebar-hover-bg); color: var(--ar-sidebar-hover-color); } .sidebar-nav .nav-link.active { color: var(--ar-sidebar-active-color); background: rgba(255, 45, 123, 0.10); } .sidebar-nav .nav-link.active::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--ar-neon-pink); box-shadow: 0 0 8px var(--ar-neon-pink); } .sidebar-label { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 600; margin-top: 4px; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; } .sidebar-footer { width: 100%; display: flex; justify-content: center; } /* ── Offcanvas (mobile) ── */ .arcynia-offcanvas { background: var(--ar-bg); color: var(--ar-text); border-right: 1px solid var(--ar-sidebar-border); } .arcynia-offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .arcynia-offcanvas .nav-link { color: var(--ar-sidebar-color); padding: 0.7rem 0.9rem; border-radius: 0.5rem; margin-bottom: 0.15rem; text-decoration: none; } .arcynia-offcanvas .nav-link i { margin-right: 0.6rem; } .arcynia-offcanvas .nav-link:hover { background: var(--ar-sidebar-hover-bg); color: var(--ar-sidebar-hover-color); } .arcynia-offcanvas .nav-link.active { color: var(--ar-neon-pink); background: rgba(255, 45, 123, 0.08); } .arcynia-offcanvas hr { border-color: var(--ar-border-soft); } /* ── Main content ── */ .main-content { position: relative; z-index: 1; padding-top: calc(64px + 1.25rem); padding-bottom: 2rem; padding-left: 1rem; padding-right: 1rem; min-height: 100vh; } @media (min-width: 992px) { .main-content { margin-left: 88px; padding-left: 1.5rem; padding-right: 1.5rem; } } /* Super-narrow viewports: trim the side padding so the game iframe gets the most of the available width. The 1rem default leaves two thumbnails of dead space on either side at ~360px, which on a 16:9 game means losing a noticeable slice of the playfield. */ @media (max-width: 480px) { .main-content { padding-left: 0.5rem; padding-right: 0.5rem; } } /* ── Hero ── */ .hero { position: relative; border-radius: 1.25rem; margin-bottom: 2rem; border: 1px solid var(--ar-border); overflow: hidden; box-shadow: var(--ar-glow-pink); background: var(--ar-bg-elevated); } .hero-media { background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: 16 / 9; min-height: 200px; } .hero-overlay { padding: 1.5rem 1.25rem 1.5rem; background: linear-gradient(180deg, rgba(6, 6, 15, 0.85) 0%, rgba(10, 10, 26, 0.95) 100%); } @media (min-width: 768px) { .hero-media { aspect-ratio: 16 / 7; min-height: 320px; } .hero-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 2rem; background: linear-gradient(to top, rgba(6, 6, 15, 0.92) 0%, rgba(6, 6, 15, 0.55) 35%, rgba(6, 6, 15, 0) 70%); } } .hero-inner { position: relative; z-index: 1; max-width: 720px; } .hero-eyebrow { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.75rem; letter-spacing: 0.32em; color: var(--ar-neon-cyan); margin-bottom: 0.6rem; text-transform: uppercase; text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); } .hero-tag { color: #f0f0f8; font-size: 1.05rem; max-width: 520px; margin-bottom: 1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ── Section heading ── */ .section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 1rem; } .section-head h2 { font-size: 1.25rem; margin: 0; text-transform: uppercase; letter-spacing: 0.16em; display: inline-flex; align-items: center; gap: 0.55rem; /* Let the h2 shrink inside its flex parent. Combined with the ellipsis on .section-head-label below, this keeps the see-all link pinned to the right of the row even when the title is too wide to fit (e.g. "Explore beyond games" on a narrow mobile viewport): the title truncates with "..." instead of wrapping or pushing the page out horizontally. */ min-width: 0; flex: 0 1 auto; } .section-head h2 .section-head-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .section-head h2 i { color: var(--ar-neon-pink); text-shadow: 0 0 10px var(--ar-neon-pink); } .section-head .see-all { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; letter-spacing: 0.18em; color: var(--ar-neon-cyan); text-transform: uppercase; } .section-head .see-all:hover { color: var(--ar-neon-pink); } /* ── Game grid + cards ── */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0.75rem; } @media (min-width: 768px) { .game-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; } } .game-card-wrap { position: relative; aspect-ratio: 1 / 1; } .game-card { position: absolute; inset: 0; display: block; border-radius: 0.85rem; overflow: hidden; background: var(--ar-bg-elevated); border: 1px solid var(--ar-border-soft); text-decoration: none; color: var(--ar-text); transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.25s; isolation: isolate; } .game-card-wrap:hover .game-card { transform: translateY(-4px); border-color: var(--ar-neon-pink); box-shadow: var(--ar-glow-pink); color: var(--ar-text); } /* Iframe-footer favorite button (re-uses .game-frame-btn base) */ .game-frame-btn.is-fav { color: var(--ar-neon-pink); border-color: var(--ar-neon-pink); background: rgba(255, 45, 123, 0.08); } .game-thumb { position: absolute; inset: 0; background: linear-gradient(135deg, var(--ar-neon-pink), var(--ar-neon-purple)); overflow: hidden; } .game-thumb::before { /* synthwave grid inside thumb */ content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.55) 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 1px, transparent 1px, transparent 26px), repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 1px, transparent 1px, transparent 26px); mix-blend-mode: overlay; } .game-thumb::after { content: ''; position: absolute; left: 50%; top: 38%; width: 60%; height: 60%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 65%); filter: blur(8px); mix-blend-mode: screen; } /* Per-accent thumb backgrounds */ .game-card[data-accent="pink"] .game-thumb { background: linear-gradient(135deg, #ff2d7b, #7b2ff7); } .game-card[data-accent="cyan"] .game-thumb { background: linear-gradient(135deg, #00f0ff, #2d7bff); } .game-card[data-accent="magenta"] .game-thumb { background: linear-gradient(135deg, #ff00ff, #7b2ff7); } .game-card[data-accent="violet"] .game-thumb { background: linear-gradient(135deg, #9b59b6, #2d7bff); } .game-card[data-accent="orange"] .game-thumb { background: linear-gradient(135deg, #ff6b35, #ff2d7b); } /* Text-only card label — shown when the game has no thumbnail. Centered on the gradient backdrop, large enough to act as the card's identity. */ .game-thumb-label { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(0.95rem, 2.2vw, 1.25rem); line-height: 1.18; letter-spacing: 0.04em; text-align: center; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.45); pointer-events: none; } /* Real game thumbnail image (replaces gradient + icon when uploaded) */ .game-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; background: var(--ar-bg); } /* Title overlay — only visible on hover for image-cards. Slides up from the bottom when the user hovers, so the grid stays clean by default and the title appears as a soft confirmation. */ .game-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.85rem 0.45rem; text-align: center; background: linear-gradient(to top, rgba(6, 6, 15, 0.95) 0%, rgba(6, 6, 15, 0.7) 60%, transparent 100%); z-index: 5; /* above the play-circle overlay so the title reads cleanly */ opacity: 0; transform: translateY(100%); transition: opacity 0.18s ease, transform 0.22s ease; pointer-events: none; /* hover is handled by the link itself */ } .game-card-wrap:hover .game-meta { opacity: 1; transform: translateY(0); } .game-title { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; font-weight: 700; margin: 0; color: #fff; letter-spacing: 0.04em; } @media (prefers-reduced-motion: reduce) { .game-meta { transition: none; } } .game-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, rgba(6,6,15,0.65), rgba(6,6,15,0.85)); opacity: 0; transition: opacity 0.18s; z-index: 4; } .game-card:hover .game-play { opacity: 1; } .game-play .play-circle { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--ar-neon-pink), var(--ar-neon-purple)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; box-shadow: var(--ar-glow-pink); } /* Favorites page: hide all cards by default, show only those marked is-fav-visible */ #favoritesGrid .game-card-wrap { display: none; } #favoritesGrid .game-card-wrap.is-fav-visible { display: block; } /* ── Category page ── */ .category-header { margin-bottom: 1.5rem; } .category-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0; display: inline-flex; align-items: center; gap: 0.6rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-pink) 60%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .category-title i { -webkit-text-fill-color: initial; color: var(--ar-neon-pink); text-shadow: 0 0 18px rgba(255, 45, 123, 0.55); } .category-count { display: inline-block; margin-left: 0.75rem; color: var(--ar-text-muted); font-family: 'Orbitron', sans-serif; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; vertical-align: middle; } .category-sub { margin: 0.5rem 0 0; color: var(--ar-text-muted); max-width: 640px; } .category-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 1rem; background: var(--ar-bg-elevated); border: 1px dashed var(--ar-border-soft); border-radius: 1rem; color: var(--ar-text-muted); } .category-empty i { font-size: 2.4rem; color: var(--ar-neon-pink); text-shadow: 0 0 18px rgba(255, 45, 123, 0.5); margin-bottom: 0.75rem; } .category-empty p { margin: 0 0 1rem; } /* ── 404 page ── */ .not-found { text-align: center; padding: 3rem 1rem 4rem; max-width: 640px; margin: 1rem auto; } .not-found-code { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(5rem, 14vw, 8rem); line-height: 1; letter-spacing: 0.04em; background: linear-gradient(180deg, var(--ar-neon-cyan) 0%, var(--ar-neon-pink) 60%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 32px rgba(255, 45, 123, 0.35); margin-bottom: 0.5rem; } .not-found-title { font-family: 'Orbitron', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 1rem; color: var(--ar-text); } .not-found-msg { color: var(--ar-text-muted); font-size: 1.05rem; margin: 0 auto 1.75rem; max-width: 480px; } .not-found-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* ── About page ── */ .about-intro { max-width: 820px; color: var(--ar-text); font-size: 1.05rem; line-height: 1.6; margin-bottom: 2.5rem; } .about-cards { margin-bottom: 3.5rem; } /* ── About — FAQ section ── */ .about-faq { margin-bottom: 3.5rem; } .about-faq-heading { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1.2rem; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ar-text); } .about-faq-heading i { color: var(--ar-neon-cyan); text-shadow: 0 0 10px var(--ar-neon-cyan); } .about-faq-list { display: flex; flex-direction: column; gap: 0.6rem; } .about-faq-item { border: 1px solid var(--ar-border-soft); border-radius: 0.75rem; background: var(--ar-bg-elevated); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .about-faq-item[open] { border-color: var(--ar-neon-cyan); box-shadow: 0 0 16px rgba(0, 240, 255, 0.18); } .about-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; color: var(--ar-text); font-weight: 600; user-select: none; } .about-faq-item summary::-webkit-details-marker { display: none; } .about-faq-item summary:hover { color: var(--ar-neon-cyan); } .about-faq-q { font-size: 1rem; line-height: 1.4; } .about-faq-chevron { color: var(--ar-text-dim); font-size: 0.9rem; flex-shrink: 0; transition: transform 0.25s ease, color 0.2s ease; } .about-faq-item[open] .about-faq-chevron { transform: rotate(180deg); color: var(--ar-neon-cyan); } .about-faq-a { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--ar-text-muted); font-size: 0.95rem; line-height: 1.6; } @media (prefers-reduced-motion: reduce) { .about-faq-chevron, .about-faq-item { transition: none; } } /* ── About — "Go deeper" hub ── */ .about-deeper { /* Same flat surface as the Mission/Vibe/What-you'll-find cards above so the section reads as part of the same family, not a contrasting insert. */ margin-bottom: 3.5rem; padding: 1.75rem 1.5rem; border-radius: 0.85rem; border: 1px solid var(--ar-border-soft); background: var(--ar-bg-elevated); } .about-deeper-heading { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 0.5rem; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ar-text); } .about-deeper-heading i { color: var(--ar-neon-pink); text-shadow: 0 0 10px var(--ar-neon-pink); } .about-deeper-lead { color: var(--ar-text-muted); margin: 0 0 1.2rem; line-height: 1.6; max-width: 70ch; } .about-deeper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } @media (max-width: 768px) { .about-deeper-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .about-deeper-grid { grid-template-columns: 1fr; } } .about-deeper-card { position: relative; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 0.75rem; border: 1px solid var(--ar-border-soft); /* Solid dark surface — same trick as the ecosystem cards on the Acknowledgements page. The dark cards sit visibly on top of the lighter panel background. */ background: var(--ar-bg); text-decoration: none; color: inherit; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .about-deeper-card > i { font-size: 1.4rem; color: var(--ar-neon-pink); text-shadow: 0 0 10px rgba(255, 45, 123, 0.45); margin-bottom: 0.2rem; } .about-deeper-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.05em; color: var(--ar-text); } .about-deeper-pitch { color: var(--ar-text-muted); font-size: 0.92rem; line-height: 1.5; flex: 1; } /* Active (clickable) variant — hover lift + cyan accent */ a.about-deeper-card:hover { border-color: var(--ar-neon-cyan); transform: translateY(-2px); box-shadow: 0 0 18px rgba(0, 240, 255, 0.22); } a.about-deeper-card:hover > i { color: var(--ar-neon-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.45); } .about-deeper-cta { margin-top: 0.5rem; font-family: 'Orbitron', sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ar-neon-cyan); display: inline-flex; align-items: center; gap: 0.35rem; } a.about-deeper-card:hover .about-deeper-cta i { transform: translateX(3px); } .about-deeper-cta i { transition: transform 0.2s ease; } /* "Coming soon" placeholder — muted, no hover lift, badge in corner */ .about-deeper-card.is-soon { cursor: default; opacity: 0.7; } .about-deeper-card.is-soon:hover { border-color: var(--ar-border-soft); transform: none; box-shadow: none; } .about-deeper-card.is-soon > i { color: var(--ar-text-dim); text-shadow: none; opacity: 0.7; } .about-deeper-badge { position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--ar-border-soft); font-family: 'Orbitron', sans-serif; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-text-dim); background: rgba(6, 6, 15, 0.5); } @media (prefers-reduced-motion: reduce) { .about-deeper-card, .about-deeper-cta i { transition: none; } } /* ── Atlas page (visual map of The Grid) ── */ .atlas-wrap { max-width: 1100px; margin: 0 auto; padding-bottom: 1rem; } .atlas-header { margin: 1rem 0 2rem; } .atlas-eyebrow { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ar-neon-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.55); margin-bottom: 0.9rem; } .atlas-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 4.5vw, 2.8rem); letter-spacing: 0.04em; line-height: 1.05; margin: 0 0 1rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-cyan) 70%, var(--ar-neon-blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .atlas-lead { color: var(--ar-text-muted); font-size: 1.02rem; line-height: 1.6; max-width: 60ch; margin: 0; } .atlas-map { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, minmax(110px, auto)); gap: 0.7rem; padding: 1.5rem; border-radius: 1rem; border: 1px solid var(--ar-border-soft); background: var(--ar-bg-elevated); isolation: isolate; margin-bottom: 2rem; } .atlas-grid-bg { position: absolute; inset: 0; border-radius: 1rem; background: repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.05) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(0, 240, 255, 0.05) 0 1px, transparent 1px 32px); pointer-events: none; z-index: 0; } .atlas-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; padding: 0.85rem 0.95rem; border: 1px solid var(--ar-border-soft); border-radius: 0.6rem; background: var(--ar-bg); color: var(--ar-text); text-decoration: none; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease; } .atlas-node:hover { transform: translateY(-2px); border-color: var(--ar-neon-cyan); box-shadow: 0 0 16px rgba(0, 240, 255, 0.28); } .atlas-node[data-accent="pink"]:hover { border-color: var(--ar-neon-pink); box-shadow: 0 0 16px rgba(255, 45, 123, 0.32); } .atlas-node[data-accent="cyan"]:hover { border-color: var(--ar-neon-cyan); box-shadow: 0 0 16px rgba(0, 240, 255, 0.32); } .atlas-node[data-accent="violet"]:hover { border-color: var(--ar-neon-violet); box-shadow: 0 0 16px rgba(123, 47, 247, 0.32); } .atlas-node[data-accent="orange"]:hover { border-color: var(--ar-neon-orange); box-shadow: 0 0 16px rgba(255, 107, 53, 0.32); } .atlas-node[data-accent="magenta"]:hover { border-color: var(--ar-neon-magenta, #ff00ff); box-shadow: 0 0 16px rgba(255, 0, 255, 0.32); } .atlas-node-icon { font-size: 1.2rem; color: var(--ar-neon-cyan); } .atlas-node[data-accent="pink"] .atlas-node-icon { color: var(--ar-neon-pink); } .atlas-node[data-accent="violet"] .atlas-node-icon { color: var(--ar-neon-violet); } .atlas-node[data-accent="orange"] .atlas-node-icon { color: var(--ar-neon-orange); } .atlas-node[data-accent="magenta"] .atlas-node-icon { color: var(--ar-neon-magenta, #ff00ff); } .atlas-node-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; } .atlas-node-coord { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--ar-text-dim); margin-top: auto; } .atlas-node-current { cursor: default; border-style: dashed; border-color: var(--ar-neon-cyan); background: rgba(0, 240, 255, 0.06); } .atlas-node-current:hover { transform: none; box-shadow: none; } .atlas-node-current .atlas-node-coord { color: var(--ar-neon-cyan); font-weight: 700; letter-spacing: 0.18em; } @media (max-width: 899px) { .atlas-map { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(100px, auto); } .atlas-node { grid-column: auto !important; grid-row: auto !important; } } .atlas-footer { text-align: center; margin-bottom: 2rem; } @media (prefers-reduced-motion: reduce) { .atlas-node { transition: none; } } /* ── Manifesto page ── */ .manifesto-wrap { max-width: 760px; margin: 0 auto; padding-bottom: 1rem; } .manifesto-header { margin: 1.5rem 0 4rem; } .manifesto-eyebrow { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ar-neon-pink); text-shadow: 0 0 10px rgba(255, 45, 123, 0.55); margin-bottom: 0.9rem; } .manifesto-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: 0.04em; line-height: 1.05; margin: 0 0 1.5rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-pink) 60%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 28px rgba(255, 45, 123, 0.30); } .manifesto-lead { color: var(--ar-text-muted); font-size: 1.1rem; line-height: 1.6; max-width: 60ch; margin: 0 0 1rem; } .manifesto-lead:last-child { margin-bottom: 0; } /* Stand-alone "Fast." line in the lead — short and emphatic, sits big and white. */ .manifesto-lead-punch { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0.04em; color: var(--ar-text); margin-top: 0.5rem; margin-bottom: 1.2rem; } .manifesto-section { margin: 0 0 3.5rem; } .manifesto-section-heading { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.02em; line-height: 1; margin: 0 0 1.5rem; } /* Default prefix style (used by "We don't") — pink reads as warmer and more emphatic, fitting the section listing what Arcynia rejects. The "We do" override below swaps in cyan for the positive list. */ .manifesto-section-prefix { background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .manifesto-section-do .manifesto-section-prefix { background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .manifesto-list { list-style: none; padding: 0; margin: 0; } .manifesto-list li { color: var(--ar-text); font-family: 'Rajdhani', sans-serif; font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.45; padding: 0.55rem 0; border-bottom: 1px solid var(--ar-border-soft); /* Flex with baseline alignment lets the × / ✓ pseudo-element sit on the same baseline as the text, which is what reads as "centred" typographically. Better than absolute-position + top hard-coded in pixels — that fights against per-font baseline metrics. */ display: flex; align-items: baseline; gap: 0.6rem; } .manifesto-list li:last-child { border-bottom: 0; } .manifesto-list li::before { content: '×'; flex: 0 0 auto; min-width: 1em; text-align: center; /* System-default sans so × and ✓ render the moment the page paints — avoids the brief FOUT where Orbitron loads and the glyphs shift / disappear (Orbitron doesn't include ✓ at all). */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-weight: 700; color: var(--ar-neon-pink); text-shadow: 0 0 8px rgba(255, 45, 123, 0.55); font-size: 1.1em; } .manifesto-section-do .manifesto-list li::before { content: '✓'; color: var(--ar-neon-cyan); text-shadow: 0 0 8px rgba(0, 240, 255, 0.55); } .manifesto-coda { margin: 4rem 0 3rem; padding: 2.5rem 1rem; border-top: 1px solid var(--ar-border-soft); border-bottom: 1px solid var(--ar-border-soft); text-align: center; } .manifesto-coda p { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.8rem); letter-spacing: 0.06em; color: var(--ar-text); /* Generous gap between lines — each statement lands as its own beat instead of running together. */ margin: 0 0 1.4rem; } .manifesto-coda-group p:last-child { margin-bottom: 0; } /* Subsequent groups and the final line share the same divider treatment — same generous gap, same hairline rule — so the rhythm is uniform whether you're moving between the two stanzas or into the closing tagline. */ .manifesto-coda-group + .manifesto-coda-group, .manifesto-coda-final { margin-top: 0; padding-top: 2.8rem; border-top: 1px solid var(--ar-border-soft); } .manifesto-coda-final { color: var(--ar-text-muted) !important; font-style: italic; font-weight: 600 !important; letter-spacing: 0.04em !important; } /* ── Colophon page ── */ .colophon-wrap { max-width: 880px; margin: 0 auto; padding-bottom: 1rem; } .colophon-header { margin: 1.5rem 0 3.5rem; } .colophon-eyebrow { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ar-neon-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); margin-bottom: 0.9rem; } .colophon-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.5rem); letter-spacing: 0.04em; line-height: 1.05; margin: 0 0 1.5rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-cyan) 70%, var(--ar-neon-blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 28px rgba(0, 240, 255, 0.28); } .colophon-lead { color: var(--ar-text-muted); font-size: 1.05rem; line-height: 1.6; max-width: 60ch; margin: 0; } .colophon-section { margin: 0 0 3rem; } .colophon-section-heading { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ar-text); } .colophon-section-heading i { color: var(--ar-neon-cyan); text-shadow: 0 0 10px var(--ar-neon-cyan); } .colophon-section-lead { color: var(--ar-text-muted); line-height: 1.6; margin: 0 0 1.2rem; max-width: 70ch; } /* Typography section: two big sample cards side by side */ .colophon-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .colophon-type-card { padding: 1.4rem 1.5rem; border-radius: 0.85rem; border: 1px solid var(--ar-border-soft); background: var(--ar-bg-elevated); } .colophon-type-sample { font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: #fff; margin-bottom: 1rem; line-height: 1.1; } .colophon-type-name { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ar-neon-pink); margin-bottom: 0.5rem; } .colophon-type-meta { color: var(--ar-text-muted); line-height: 1.55; margin: 0; font-size: 0.93rem; } .colophon-type-meta strong { color: var(--ar-text); } .colophon-licence { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border: 1px solid var(--ar-border-soft); border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ar-text-dim); vertical-align: middle; white-space: nowrap; } /* Palette section: colour swatches */ .colophon-palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; } .colophon-swatch { display: flex; gap: 1rem; padding: 0.85rem; border-radius: 0.75rem; border: 1px solid var(--ar-border-soft); background: var(--ar-bg-elevated); align-items: stretch; } .colophon-swatch-chip { flex: 0 0 64px; height: auto; min-height: 64px; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.08); } .colophon-swatch-meta { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .colophon-swatch-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.06em; color: var(--ar-text); } .colophon-swatch-hex { font-size: 0.78rem; color: var(--ar-text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: transparent; padding: 0; } .colophon-swatch-role { color: var(--ar-text-muted); font-size: 0.86rem; line-height: 1.45; margin: 0.25rem 0 0; } /* Stack lists (used by stack, what's-not, inspiration sections) */ .colophon-stack-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .colophon-stack-list li { color: var(--ar-text-muted); line-height: 1.55; font-size: 0.97rem; /* Flex + baseline alignment so the › / × prefix sits on the same baseline as the text. */ display: flex; align-items: baseline; gap: 0.5rem; } .colophon-stack-list li::before { content: '›'; flex: 0 0 auto; min-width: 0.7em; text-align: center; /* System sans avoids the FOUT shift when Rajdhani/Orbitron load. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: var(--ar-neon-cyan); font-weight: 700; } .colophon-stack-list strong { color: var(--ar-text); font-weight: 600; } .colophon-stack-list.colophon-stack-not li::before { content: '×'; color: var(--ar-neon-pink); } .colophon-section-final { padding: 1.5rem 1.5rem; border-radius: 0.85rem; border: 1px solid var(--ar-border-soft); background: linear-gradient(135deg, rgba(0, 240, 255, 0.07) 0%, rgba(255, 45, 123, 0.07) 100%), var(--ar-bg-elevated); } /* Love-letter section — set apart from the dry sections by softer serif-y prose feeling (bigger paragraph spacing, slightly larger line-height) and a pink-tinted accent on the heading icon. */ .colophon-love { padding: 1.75rem 1.75rem 1.5rem; border-radius: 0.85rem; border: 1px solid var(--ar-border-soft); background: linear-gradient(135deg, rgba(255, 45, 123, 0.06) 0%, rgba(123, 47, 247, 0.06) 100%), var(--ar-bg-elevated); } .colophon-love .colophon-section-heading i { color: var(--ar-neon-pink); text-shadow: 0 0 12px rgba(255, 45, 123, 0.55); } .colophon-love p { color: var(--ar-text); line-height: 1.7; font-size: 1.02rem; margin: 0 0 1rem; } .colophon-love p:last-child { margin-bottom: 0; } /* Stanza paragraphs — short lines separated by
, with tighter line-height so each line lands as its own beat rather than running into the next. */ .colophon-love-stanza { line-height: 1.45 !important; margin: 0 0 1.4rem !important; } .colophon-love-sign { margin-top: 1.4rem !important; padding-top: 1rem; border-top: 1px solid var(--ar-border-soft); color: var(--ar-text-muted) !important; font-style: italic; font-size: 0.98rem !important; } .colophon-section-final p { color: var(--ar-text); line-height: 1.6; margin: 0 0 0.8rem; } .colophon-section-final p:last-child { margin-bottom: 0; } .colophon-section-final a { color: var(--ar-neon-cyan); } .colophon-meta { color: var(--ar-text-muted) !important; font-size: 0.9rem; } /* ── Codex page ── */ .codex-wrap { max-width: 760px; margin: 0 auto; padding-bottom: 1rem; } .codex-header { margin: 1.5rem 0 3rem; } .codex-eyebrow { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ar-neon-violet); text-shadow: 0 0 10px rgba(155, 89, 182, 0.55); margin-bottom: 0.9rem; } .codex-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.5rem); letter-spacing: 0.04em; line-height: 1.05; margin: 0 0 1.5rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-violet) 70%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 28px rgba(155, 89, 182, 0.35); } .codex-lead { color: var(--ar-text-muted); font-size: 1.05rem; line-height: 1.6; max-width: 60ch; margin: 0; } .codex-list { margin-bottom: 3rem; border-top: 1px solid var(--ar-border-soft); } .codex-entry { padding: 1.4rem 0; border-bottom: 1px solid var(--ar-border-soft); } .codex-term { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.08em; margin: 0 0 0.4rem; color: var(--ar-neon-violet); text-shadow: 0 0 8px rgba(155, 89, 182, 0.35); } .codex-body { color: var(--ar-text); line-height: 1.6; margin: 0; font-size: 1rem; } /* ── Acknowledgements page ── */ .ack-intro { color: var(--ar-text); font-size: 1.05rem; line-height: 1.6; margin-bottom: 2rem; max-width: 70ch; } .ack-block { margin-bottom: 2.2rem; padding: 1.5rem 1.5rem 1.4rem; border-radius: 1rem; border: 1px solid var(--ar-border-soft); background: var(--ar-bg-elevated); } .ack-block-final { background: linear-gradient(135deg, rgba(0, 240, 255, 0.10) 0%, rgba(123, 47, 247, 0.10) 100%), var(--ar-bg-elevated); border-color: var(--ar-border); } .ack-block-title { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 0.85rem; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ar-text); } .ack-block-title i { color: var(--ar-neon-pink); text-shadow: 0 0 10px var(--ar-neon-pink); } .ack-block:nth-of-type(2) .ack-block-title i { color: var(--ar-neon-cyan); text-shadow: 0 0 10px var(--ar-neon-cyan); } .ack-block:nth-of-type(3) .ack-block-title i { color: var(--ar-neon-orange); text-shadow: 0 0 10px var(--ar-neon-orange); } .ack-block:nth-of-type(4) .ack-block-title i { color: var(--ar-neon-violet); text-shadow: 0 0 10px var(--ar-neon-violet); } .ack-block:nth-of-type(5) .ack-block-title i { color: var(--ar-neon-pink); text-shadow: 0 0 10px var(--ar-neon-pink); } .ack-block-lead { color: var(--ar-text-muted); margin: 0 0 1rem; line-height: 1.6; max-width: 70ch; } .ack-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .ack-list li { color: var(--ar-text-muted); line-height: 1.55; /* Flex + baseline alignment so the › prefix sits on the same baseline as the text, regardless of which font wins the FOUT race. */ display: flex; align-items: baseline; gap: 0.5rem; } .ack-list li::before { content: '›'; flex: 0 0 auto; min-width: 0.7em; text-align: center; /* System sans so › renders the moment the page paints. Web fonts (Rajdhani/Orbitron) load asynchronously and either don't include this glyph or shift its metrics on load. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: var(--ar-neon-cyan); font-weight: 700; } .ack-list strong { color: var(--ar-text); font-weight: 600; } .ack-list a { color: var(--ar-neon-cyan); text-decoration: none; } .ack-list a:hover { color: var(--ar-neon-pink); text-decoration: underline; } .ack-licence { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border: 1px solid var(--ar-border-soft); border-radius: 999px; font-size: 0.7rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ar-text-dim); vertical-align: middle; } .ack-eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; } .ack-eco-card { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.1rem; border-radius: 0.7rem; border: 1px solid var(--ar-border-soft); background: var(--ar-bg); text-decoration: none; color: var(--ar-text); transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .ack-eco-card:hover { border-color: var(--ar-neon-violet); transform: translateY(-2px); box-shadow: 0 0 16px rgba(123, 47, 247, 0.28); } .ack-eco-name { font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 0.06em; color: var(--ar-text); } .ack-eco-role { font-size: 0.85rem; color: var(--ar-text-muted); } @media (prefers-reduced-motion: reduce) { .ack-eco-card { transition: none; } } .about-eco { margin-bottom: 3.5rem; padding: 1.75rem 1.5rem; border-radius: 1rem; border: 1px solid var(--ar-border); background: linear-gradient(135deg, rgba(123, 47, 247, 0.10) 0%, rgba(255, 45, 123, 0.10) 100%), var(--ar-bg-elevated); box-shadow: var(--ar-glow-pink); } .about-eco-headline { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; margin: 0 0 0.85rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-pink) 60%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(255, 45, 123, 0.25); } .about-eco-lead { color: var(--ar-text); line-height: 1.6; max-width: 720px; margin: 0 0 1.5rem; } .about-eco-lead strong { color: var(--ar-neon-cyan); font-weight: 700; } .about-eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; } .about-eco-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.25rem 1rem; border-radius: 0.75rem; border: 1px solid var(--ar-border-soft); background: rgba(255, 255, 255, 0.02); color: var(--ar-text); text-decoration: none; transition: transform 0.15s, border-color 0.15s, box-shadow 0.2s; } .about-eco-card:hover { transform: translateY(-2px); border-color: var(--ar-neon-cyan); color: var(--ar-text); box-shadow: var(--ar-glow-cyan); } .about-eco-card.current { border-color: var(--ar-neon-pink); background: rgba(255, 45, 123, 0.08); box-shadow: var(--ar-glow-pink); cursor: default; } .about-eco-name { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: 0.16em; background: linear-gradient(180deg, #ffd1ec 0%, var(--ar-neon-pink) 60%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.4rem; } .about-eco-card:not(.current) .about-eco-name { background: linear-gradient(180deg, #c0e8ff 0%, var(--ar-neon-cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .about-eco-role { color: var(--ar-text-muted); font-size: 0.85rem; } .about-credits { margin-bottom: 3.5rem; padding: 1.25rem 1.5rem; border-radius: 1rem; border: 1px solid var(--ar-border-soft); background: var(--ar-bg-elevated); color: var(--ar-text); } .about-credits-title { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; } .about-credits-title i { color: var(--ar-neon-pink); text-shadow: 0 0 10px var(--ar-neon-pink); } .about-credits p { margin: 0 0 0.5rem; line-height: 1.55; } .about-credits p strong { color: var(--ar-neon-cyan); } .about-credits-copy { font-size: 0.85rem; color: var(--ar-text-muted); margin-top: 0.75rem !important; } .about-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } /* ── Media kit page ── */ .media-section { margin-bottom: 2.25rem; } .media-section-title { font-family: 'Orbitron', sans-serif; font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 0.5rem; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ar-text); } .media-section-title i { color: var(--ar-neon-pink); text-shadow: 0 0 10px var(--ar-neon-pink); } .media-tag { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ar-text-muted); } .media-copy-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 0.4rem; border: 1px solid var(--ar-border-soft); background: rgba(255, 255, 255, 0.03); color: var(--ar-text-muted); font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .media-copy-btn:hover { color: var(--ar-neon-cyan); border-color: var(--ar-neon-cyan); } .media-copy-btn.copied { color: var(--ar-neon-cyan); border-color: var(--ar-neon-cyan); background: rgba(0, 240, 255, 0.08); } .media-blurb, .media-snippet { border: 1px solid var(--ar-border-soft); border-radius: 0.7rem; background: var(--ar-bg-elevated); margin-bottom: 1rem; overflow: hidden; } .media-blurb-head, .media-snippet-head { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--ar-border-soft); background: rgba(255, 255, 255, 0.02); } .media-blurb p, .media-blurb div p { margin: 0; padding: 0.85rem 1rem; line-height: 1.6; color: var(--ar-text); } .media-blurb p + p { padding-top: 0; } .media-snippet pre { margin: 0; padding: 0.85rem 1rem; overflow-x: auto; background: rgba(0, 0, 0, 0.25); color: var(--ar-text); font-family: 'Rajdhani', monospace; font-size: 0.92rem; line-height: 1.5; } .media-snippet code { color: inherit; background: transparent; padding: 0; } .media-asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .media-asset { border: 1px solid var(--ar-border-soft); border-radius: 0.7rem; background: var(--ar-bg-elevated); overflow: hidden; } .media-asset-preview { aspect-ratio: 16 / 9; background: repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 0 0 / 24px 24px, var(--ar-bg); display: flex; align-items: center; justify-content: center; } .media-asset-preview-dark { background: var(--ar-bg); } .media-asset-preview img { max-width: 80%; max-height: 80%; object-fit: contain; } /* Wordmark logo is wide and short, so let it sit closer to the frame than the hero banner does. Otherwise the preview reads as a postage stamp instead of a logo. */ .media-asset-preview-dark img { max-width: 92%; max-height: 88%; } .media-asset-meta { padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; } .media-asset-meta strong { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; letter-spacing: 0.06em; } .media-asset-meta span { color: var(--ar-text-muted); font-size: 0.85rem; } .media-asset-meta .bo-btn { align-self: flex-start; margin-top: 0.25rem; } .media-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; } .media-color { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.75rem; border: 1px solid var(--ar-border-soft); border-radius: 0.6rem; background: var(--ar-bg-elevated); color: var(--ar-text); text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.12s; } .media-color:hover { border-color: var(--ar-neon-pink); transform: translateY(-1px); } .media-color-swatch { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 0.45rem; background: var(--swatch); box-shadow: 0 0 18px var(--swatch); border: 1px solid rgba(255, 255, 255, 0.1); } .media-color-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .media-color-name { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ar-text); } .media-color-hex { font-family: 'Rajdhani', monospace; font-size: 0.92rem; color: var(--ar-text-muted); letter-spacing: 0.04em; } .media-color-role { font-size: 0.78rem; color: var(--ar-text-dim); } /* ── Dreamscape (cinematic scroll of neon scenes) ── */ .dream-wrap { max-width: 1200px; margin: 0 auto; } .dream-header { margin-bottom: 2rem; } .dream-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: 0.12em; line-height: 1.05; margin: 0 0 0.5rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-pink) 60%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 28px rgba(255, 45, 123, 0.32); } .dream-tag { color: var(--ar-text-muted); font-size: 1.05rem; margin: 0; } .dream-scenes { display: flex; flex-direction: column; gap: clamp(4rem, 8vw, 7rem); margin-bottom: 3rem; } .dream-scene { position: relative; aspect-ratio: 16 / 9; border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--ar-border-soft); background: var(--ar-bg); isolation: isolate; opacity: 0; transform: translateY(40px) scale(0.985); transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.3s ease; } .dream-scene.is-visible { opacity: 1; transform: translateY(0) scale(1); } .dream-scene.is-visible:hover { transform: translateY(0) scale(1.022); } /* Modern browsers: scroll-linked fade — opacity and rise track the scroll position continuously as the scene enters the viewport. The IO class above is the safety-net for older browsers and odd states (hidden tab etc.) — it disables the timeline animation so the scene is fully shown. */ @supports (animation-timeline: view()) { .dream-scene:not(.is-visible) { animation: dream-scene-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; } } @keyframes dream-scene-rise { from { opacity: 0; transform: translateY(40px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .dream-scene[data-accent="pink"]:hover { box-shadow: 0 0 28px rgba(255, 45, 123, 0.45), 0 0 80px rgba(123, 47, 247, 0.22); } .dream-scene[data-accent="cyan"]:hover { box-shadow: 0 0 28px rgba(0, 240, 255, 0.45), 0 0 80px rgba(45, 123, 255, 0.22); } .dream-scene[data-accent="violet"]:hover { box-shadow: 0 0 28px rgba(155, 89, 182, 0.45), 0 0 80px rgba(123, 47, 247, 0.22); } .dream-scene[data-accent="orange"]:hover { box-shadow: 0 0 28px rgba(255, 107, 53, 0.45), 0 0 80px rgba(255, 45, 123, 0.22); } .dream-scene[data-accent="blue"]:hover { box-shadow: 0 0 28px rgba(45, 123, 255, 0.45), 0 0 80px rgba(0, 240, 255, 0.22); } .dream-scene[data-accent="green"]:hover { box-shadow: 0 0 28px rgba(0, 255, 136, 0.45), 0 0 80px rgba(0, 240, 255, 0.22); } /* Portrait-phone aspect override: the centre-cropped mobile variant is roughly 5:4 (15% trim per side of a 16:9 source). The source media query swaps the image at the same 740px breakpoint, so the container and the served image match and we get a taller scene on mobile that fills more of the portrait viewport. Scoped to .has-mobile so scenes that lack the cropped variants keep their 16:9 container and don't get top/bottom cropped by object-fit: cover. Re-upload a scene through the backoffice (or click Regenerate) to opt it in once the mobile variants exist. */ @media (max-width: 740px) { .dream-scene.has-mobile { aspect-ratio: 5 / 4; } } .dream-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background-color: var(--ar-bg); } .dream-scene-img.is-placeholder { overflow: hidden; } .dream-scene-img.is-placeholder::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 36px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 36px); pointer-events: none; } .dream-scene-img.is-placeholder[data-accent="pink"] { background: linear-gradient(135deg, var(--ar-neon-pink), var(--ar-neon-purple)); } .dream-scene-img.is-placeholder[data-accent="cyan"] { background: linear-gradient(135deg, var(--ar-neon-cyan), var(--ar-neon-blue)); } .dream-scene-img.is-placeholder[data-accent="violet"] { background: linear-gradient(135deg, var(--ar-neon-violet), var(--ar-neon-blue)); } .dream-scene-img.is-placeholder[data-accent="orange"] { background: linear-gradient(135deg, var(--ar-neon-orange), var(--ar-neon-pink)); } .dream-scene-img.is-placeholder[data-accent="blue"] { background: linear-gradient(135deg, var(--ar-neon-blue), var(--ar-neon-cyan)); } .dream-scene-img.is-placeholder[data-accent="green"] { background: linear-gradient(135deg, var(--ar-neon-green), var(--ar-neon-cyan)); } .dream-scene-text { position: absolute; left: clamp(1rem, 3vw, 2.4rem); bottom: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2.4rem); z-index: 2; } .dream-scene-text::before { content: ''; position: absolute; inset: -1.5rem -1.5rem -1.5rem -1.5rem; background: linear-gradient(to top right, rgba(6, 6, 15, 0.9) 0%, rgba(6, 6, 15, 0.5) 55%, rgba(6, 6, 15, 0) 100%); z-index: -1; border-radius: 1rem; filter: blur(8px); } .dream-scene-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: 0.06em; margin: 0 0 0.4rem; color: #fff; text-shadow: 0 0 14px rgba(255, 45, 123, 0.5), 0 0 32px rgba(123, 47, 247, 0.35), 0 1px 2px rgba(0, 0, 0, 0.6); } /* Wonders scenes are clickable cards: tags styled the same as the
tags used by Dreamscape. Reset link styles so the underlying dream-scene visuals win. */ a.dream-scene.dream-scene-link { display: block; text-decoration: none; color: inherit; } a.dream-scene.dream-scene-link:focus-visible { outline: 2px solid var(--ar-neon-cyan); outline-offset: 4px; } /* "Read more" pill that appears under the caption on linked scenes. Picks up the accent colour via the same data-accent rules below. */ .dream-scene-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-family: 'Orbitron', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); transition: transform 0.25s ease, color 0.25s ease; } .dream-scene-cta i { transition: transform 0.25s ease; } a.dream-scene-link:hover .dream-scene-cta i { transform: translateX(3px); } .dream-scene[data-accent="pink"] .dream-scene-cta { color: var(--ar-neon-pink); } .dream-scene[data-accent="cyan"] .dream-scene-cta { color: var(--ar-neon-cyan); } .dream-scene[data-accent="violet"] .dream-scene-cta { color: var(--ar-neon-violet); } .dream-scene[data-accent="orange"] .dream-scene-cta { color: var(--ar-neon-orange); } .dream-scene[data-accent="blue"] .dream-scene-cta { color: var(--ar-neon-blue); } .dream-scene[data-accent="green"] .dream-scene-cta { color: var(--ar-neon-green); } .dream-scene[data-accent="cyan"] .dream-scene-title { text-shadow: 0 0 14px rgba(0, 240, 255, 0.6), 0 0 32px rgba(45, 123, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.6); } .dream-scene[data-accent="violet"] .dream-scene-title { text-shadow: 0 0 14px rgba(155, 89, 182, 0.55), 0 0 32px rgba(123, 47, 247, 0.4), 0 1px 2px rgba(0, 0, 0, 0.6); } .dream-scene[data-accent="orange"] .dream-scene-title { text-shadow: 0 0 14px rgba(255, 107, 53, 0.55), 0 0 32px rgba(255, 45, 123, 0.35), 0 1px 2px rgba(0, 0, 0, 0.6); } .dream-scene[data-accent="blue"] .dream-scene-title { text-shadow: 0 0 14px rgba(45, 123, 255, 0.6), 0 0 32px rgba(0, 240, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.6); } .dream-scene[data-accent="green"] .dream-scene-title { text-shadow: 0 0 14px rgba(0, 255, 136, 0.6), 0 0 32px rgba(0, 240, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.6); } .dream-scene-line { color: rgba(255, 255, 255, 0.92); font-size: clamp(0.95rem, 1.4vw, 1.15rem); margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); } .dream-footer { text-align: center; margin-bottom: 2rem; } @media (prefers-reduced-motion: reduce) { .dream-scene { opacity: 1; transform: none; transition: none; } .dream-scene.is-visible:hover { transform: none; } } /* ── Grid destination (portal cards) ── */ .grid-destination { margin-bottom: 2rem; } .grid-destination-title { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ar-text); } .grid-destination-title i { color: var(--ar-neon-pink); text-shadow: 0 0 10px var(--ar-neon-pink); } .grid-portals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; } @media (max-width: 1199px) { .grid-portals { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid-portals { grid-template-columns: 1fr; } } .grid-portal { position: relative; display: block; border-radius: 0.85rem; overflow: hidden; border: 1px solid var(--ar-border-soft); background: var(--ar-bg-elevated); text-decoration: none; color: var(--ar-text); transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.25s; aspect-ratio: 16 / 9; } .grid-portal:hover { color: var(--ar-text); transform: translateY(-3px); } .grid-portal[data-accent="pink"]:hover { border-color: var(--ar-neon-pink); box-shadow: var(--ar-glow-pink); } .grid-portal[data-accent="cyan"]:hover { border-color: var(--ar-neon-cyan); box-shadow: var(--ar-glow-cyan); } .grid-portal[data-accent="violet"]:hover { border-color: var(--ar-neon-violet); box-shadow: var(--ar-glow-violet); } .grid-portal[data-accent="orange"]:hover { border-color: var(--ar-neon-orange); box-shadow: var(--ar-glow-orange); } .grid-portal[data-accent="magenta"]:hover { border-color: var(--ar-neon-magenta, #ff00ff); box-shadow: var(--ar-glow-magenta, 0 0 12px rgba(255, 0, 255, 0.55), 0 0 36px rgba(255, 0, 255, 0.25)); } .grid-portal-img { position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--ar-bg); background-size: cover; background-position: center; display: block; } img.grid-portal-img { object-fit: cover; object-position: center; } .grid-portal-img.is-placeholder { display: flex; align-items: center; justify-content: center; overflow: hidden; } .grid-portal-img.is-placeholder::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 32px); pointer-events: none; } .grid-portal-img.is-placeholder i { position: relative; z-index: 1; font-size: 4rem; color: rgba(255, 255, 255, 0.85); text-shadow: 0 0 24px rgba(255, 255, 255, 0.7), 0 0 60px rgba(255, 0, 255, 0.6); } .grid-portal-img.is-placeholder[data-accent="pink"] { background: linear-gradient(135deg, var(--ar-neon-pink), var(--ar-neon-purple)); } .grid-portal-img.is-placeholder[data-accent="cyan"] { background: linear-gradient(135deg, var(--ar-neon-cyan), var(--ar-neon-blue)); } .grid-portal-img.is-placeholder[data-accent="violet"] { background: linear-gradient(135deg, var(--ar-neon-violet), var(--ar-neon-blue)); } .grid-portal-img.is-placeholder[data-accent="orange"] { background: linear-gradient(135deg, var(--ar-neon-orange), var(--ar-neon-pink)); } .grid-portal-img.is-placeholder[data-accent="magenta"] { background: linear-gradient(135deg, var(--ar-neon-magenta, #ff00ff), var(--ar-neon-purple)); } .grid-portal-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.85rem; z-index: 1; text-align: center; background: linear-gradient(to top, rgba(6, 6, 15, 0.85) 0%, rgba(6, 6, 15, 0.30) 70%, rgba(6, 6, 15, 0) 100%); } .grid-portal-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(6, 6, 15, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s, box-shadow 0.2s; white-space: nowrap; } .grid-portal-cta i { font-size: 0.95em; transition: transform 0.18s; } .grid-portal:hover .grid-portal-cta i { transform: translateX(3px); } .grid-portal[data-accent="pink"]:hover .grid-portal-cta { background: linear-gradient(135deg, var(--ar-neon-pink), var(--ar-neon-purple)); border-color: var(--ar-neon-pink); box-shadow: 0 0 16px rgba(255, 45, 123, 0.55); } .grid-portal[data-accent="cyan"]:hover .grid-portal-cta { background: var(--ar-neon-cyan); border-color: var(--ar-neon-cyan); color: #06060f; box-shadow: 0 0 16px rgba(0, 240, 255, 0.6); } .grid-portal[data-accent="violet"]:hover .grid-portal-cta { background: linear-gradient(135deg, var(--ar-neon-violet), var(--ar-neon-purple)); border-color: var(--ar-neon-violet); box-shadow: 0 0 16px rgba(155, 89, 182, 0.6); } .grid-portal[data-accent="orange"]:hover .grid-portal-cta { background: linear-gradient(135deg, var(--ar-neon-orange), var(--ar-neon-pink)); border-color: var(--ar-neon-orange); box-shadow: 0 0 16px rgba(255, 107, 53, 0.6); } .grid-portal[data-accent="magenta"]:hover .grid-portal-cta { background: linear-gradient(135deg, var(--ar-neon-magenta, #ff00ff), var(--ar-neon-purple)); border-color: var(--ar-neon-magenta, #ff00ff); box-shadow: 0 0 16px rgba(255, 0, 255, 0.55); } /* ── Grid page blurb (long-form description after portals) ── */ .grid-blurb { max-width: 820px; margin: 1rem 0 2rem; color: var(--ar-text-muted); line-height: 1.7; font-size: 0.95rem; } .grid-blurb p { margin: 0; } /* ── Signal (transmissions list) ── */ .signal-wrap { max-width: 1200px; margin: 0 auto; } .signal-hero { position: relative; aspect-ratio: 16 / 9; border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--ar-border); box-shadow: 0 0 32px rgba(155, 89, 182, 0.25), 0 0 80px rgba(123, 47, 247, 0.15); margin-bottom: 2.5rem; isolation: isolate; background: var(--ar-bg); } .signal-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .signal-hero-img.is-placeholder { background: linear-gradient(135deg, var(--ar-neon-violet), var(--ar-neon-purple) 60%, var(--ar-neon-pink)); } /* The Signal hero art is a wide HUD panel (~2.77:1), not a 16:9 crop: its status readouts live in the corners. Let the image set the hero height so the whole panel shows instead of centre-cropping the corners away. Scoped to Signal; Lab keeps the 16:9 placeholder box. */ .signal-wrap:not(.is-lab) .signal-hero { aspect-ratio: auto; } .signal-wrap:not(.is-lab) .signal-hero-img:not(.is-placeholder) { position: static; height: auto; } .signal-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 6, 15, 0.85) 0%, rgba(6, 6, 15, 0.35) 45%, rgba(6, 6, 15, 0) 70%), linear-gradient(to right, rgba(6, 6, 15, 0.45) 0%, rgba(6, 6, 15, 0) 60%); z-index: 1; } .signal-hero-content { position: absolute; left: clamp(1.2rem, 4vw, 3rem); bottom: clamp(1.2rem, 4vw, 2.4rem); right: clamp(1.2rem, 4vw, 3rem); z-index: 2; } .signal-hero-eyebrow { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ar-neon-violet); text-shadow: 0 0 12px rgba(155, 89, 182, 0.6); margin-bottom: 0.6rem; } .signal-hero-title, .signal-hero-tag { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 2rem); letter-spacing: 0.05em; line-height: 1.2; margin: 0; max-width: 60ch; } .signal-hero-title { font-weight: 800; margin-bottom: 0.5rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-violet) 70%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 28px rgba(155, 89, 182, 0.4); } .signal-hero-tag { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); } .transmissions-section { margin-bottom: 3rem; } .transmissions-section-title { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1.2rem; display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ar-text); } .transmissions-section-title i { color: var(--ar-neon-violet); text-shadow: 0 0 10px var(--ar-neon-violet); } .transmissions-empty { color: var(--ar-text-muted); font-style: italic; margin: 0; } .transmissions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .transmission-card { position: relative; display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.2rem; border: 1px solid var(--ar-border-soft); border-radius: 0.9rem; background: linear-gradient(160deg, rgba(155, 89, 182, 0.08) 0%, rgba(6, 6, 15, 0.4) 60%), var(--ar-bg-elev, #0a0a18); text-decoration: none; color: inherit; overflow: hidden; isolation: isolate; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .transmission-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 6px); pointer-events: none; z-index: 0; } .transmission-card > * { position: relative; z-index: 1; } .transmission-card:hover { transform: translateY(-3px); border-color: var(--ar-neon-violet); box-shadow: 0 0 24px rgba(155, 89, 182, 0.32), 0 0 60px rgba(123, 47, 247, 0.18); } .transmission-card[data-accent="pink"]:hover { border-color: var(--ar-neon-pink); box-shadow: 0 0 24px rgba(255, 45, 123, 0.4); } .transmission-card[data-accent="cyan"]:hover { border-color: var(--ar-neon-cyan); box-shadow: 0 0 24px rgba(0, 240, 255, 0.4); } .transmission-card[data-accent="orange"]:hover { border-color: var(--ar-neon-orange); box-shadow: 0 0 24px rgba(255, 107, 53, 0.4); } .transmission-card[data-accent="magenta"]:hover { border-color: var(--ar-neon-magenta, #ff00ff); box-shadow: 0 0 24px rgba(255, 0, 255, 0.4); } .transmission-card-tag { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ar-neon-violet); margin-bottom: 0.6rem; } .transmission-card[data-accent="pink"] .transmission-card-tag { color: var(--ar-neon-pink); } .transmission-card[data-accent="cyan"] .transmission-card-tag { color: var(--ar-neon-cyan); } .transmission-card[data-accent="orange"] .transmission-card-tag { color: var(--ar-neon-orange); } .transmission-card[data-accent="magenta"] .transmission-card-tag { color: var(--ar-neon-magenta, #ff00ff); } .transmission-card-title { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; margin: 0 0 0.5rem; color: var(--ar-text); } .transmission-card-intro { color: var(--ar-text-muted); font-size: 0.92rem; line-height: 1.5; margin: 0 0 1rem; flex: 1; } /* Dispatch meta: kind tag + date, on the listing card and the article header. */ .transmission-card-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.55rem; } .transmission-card-meta .transmission-card-tag { margin-bottom: 0; } .transmission-meta { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.8rem; } .transmission-meta .transmission-tag { margin-bottom: 0; } .transmission-card-date, .transmission-date { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ar-text-dim); white-space: nowrap; } /* Signal feed: dispatches rendered inline, newest first. */ .signal-feed { display: flex; flex-direction: column; gap: 2.5rem; } .signal-post { border-top: 1px solid var(--ar-border-soft); padding-top: 2rem; scroll-margin-top: 5rem; } .signal-feed .signal-post:first-child { border-top: none; padding-top: 0; } .signal-post-meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.55rem; } .signal-post-meta .transmission-card-tag { margin-bottom: 0; } .signal-post[data-accent="cyan"] .transmission-card-tag { color: var(--ar-neon-cyan); } .signal-post[data-accent="orange"] .transmission-card-tag { color: var(--ar-neon-orange); } .signal-post-permalink { margin-left: auto; display: inline-flex; color: var(--ar-text-dim); opacity: 0; transition: opacity 0.15s ease, color 0.15s ease; } .signal-post:hover .signal-post-permalink, .signal-post:target .signal-post-permalink { opacity: 1; } .signal-post-permalink:hover { color: var(--ar-neon-cyan); } .signal-post-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.2; margin: 0 0 0.9rem; } .signal-post-title a { color: var(--ar-text); text-decoration: none; } .signal-post-title a:hover { color: var(--ar-neon-cyan); } .signal-post-lead { font-size: 1.08rem; line-height: 1.55; color: var(--ar-text); margin: 0 0 1rem; max-width: 70ch; } .signal-post-body { margin-bottom: 0; } .transmission-card-cta { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ar-neon-violet); display: inline-flex; align-items: center; gap: 0.45rem; margin-top: auto; } .transmission-card[data-accent="pink"] .transmission-card-cta { color: var(--ar-neon-pink); } .transmission-card[data-accent="cyan"] .transmission-card-cta { color: var(--ar-neon-cyan); } .transmission-card[data-accent="orange"] .transmission-card-cta { color: var(--ar-neon-orange); } .transmission-card[data-accent="magenta"] .transmission-card-cta { color: var(--ar-neon-magenta, #ff00ff); } .transmission-card:hover .transmission-card-cta i { transform: translateX(3px); } .transmission-card-cta i { transition: transform 0.2s ease; } .signal-footer { text-align: center; margin-bottom: 2rem; } /* ── The Lab modifier ──────────────────────────────────────────── Workshop-tema variant of the Signal templates: applied via the .is-lab class on .signal-wrap / .transmission-wrap. Re-uses the Signal CSS for layout and swaps in a "blueprint / drafting" feel (dashed card borders, technical-monospace card tag, subtle grid tint on the body background). Keeps Signal untouched. */ .signal-wrap.is-lab .transmission-card, .transmission-wrap.is-lab .transmission-stage-wrap { border-style: dashed; } .signal-wrap.is-lab .transmission-card-tag, .transmission-wrap.is-lab .transmission-tag { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; } .signal-wrap.is-lab .transmissions-section-title i, .transmission-wrap.is-lab .transmission-header[data-accent] { color: var(--ar-neon-cyan); } /* Faint blueprint grid behind the Lab list, so the workshop vibe reads even when no experiments are published yet. */ .signal-wrap.is-lab .transmissions-section { background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(0, 240, 255, 0.04) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(0, 240, 255, 0.04) 31px 32px); border-radius: 0.6rem; padding: 1rem; } /* Lab single-experiment layout tweaks (Lab only, Signal untouched): the intro runs the full width of the effect, and the description below the stage is centred. */ .transmission-wrap.is-lab .transmission-intro { max-width: none; } .transmission-wrap.is-lab .transmission-body { margin-left: auto; margin-right: auto; font-size: 1.12rem; color: var(--ar-text); } /* Lab cards (listing + prev/next): lift the intro a touch brighter and 1px larger than the shared Signal card default, which reads faint. */ .is-lab .transmission-card-intro { color: var(--ar-text); font-size: calc(0.92rem + 1px); } /* Previous / next experiment: the full listing card, one on each side, the "next" one mirrored so it reads right-to-left. */ .lab-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; } .lab-prevnext-label { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ar-text-muted); margin-bottom: 0.7rem; } .lab-prevnext-card.is-next { align-items: flex-end; text-align: right; } .lab-prevnext-card.is-next .lab-prevnext-label { flex-direction: row-reverse; } @media (max-width: 640px) { .lab-prevnext { grid-template-columns: 1fr; } .lab-prevnext-card.is-next { align-items: flex-start; text-align: left; } .lab-prevnext-card.is-next .lab-prevnext-label { flex-direction: row; } } /* ── Single transmission page ── */ .transmission-wrap { max-width: 1200px; margin: 0 auto; } .transmission-header { margin-bottom: 1.6rem; } .transmission-tag { display: inline-block; font-family: 'Orbitron', sans-serif; font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ar-neon-violet); margin-bottom: 0.6rem; } .transmission-header[data-accent="pink"] .transmission-tag { color: var(--ar-neon-pink); } .transmission-header[data-accent="cyan"] .transmission-tag { color: var(--ar-neon-cyan); } .transmission-header[data-accent="orange"] .transmission-tag { color: var(--ar-neon-orange); } .transmission-header[data-accent="magenta"] .transmission-tag { color: var(--ar-neon-magenta, #ff00ff); } .transmission-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 3.8vw, 2.8rem); letter-spacing: 0.06em; line-height: 1.1; margin: 0 0 0.4rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-violet) 70%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .transmission-header[data-accent="pink"] .transmission-title { background: linear-gradient(180deg, #fff 0%, var(--ar-neon-pink) 70%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .transmission-header[data-accent="cyan"] .transmission-title { background: linear-gradient(180deg, #fff 0%, var(--ar-neon-cyan) 70%, var(--ar-neon-blue) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .transmission-header[data-accent="orange"] .transmission-title { background: linear-gradient(180deg, #fff 0%, var(--ar-neon-orange) 70%, var(--ar-neon-pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .transmission-intro { color: var(--ar-text-muted); font-size: 1.05rem; margin: 0; max-width: 60ch; } .transmission-stage-wrap { position: relative; margin: 1.6rem 0 2rem; border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--ar-border-soft); background: var(--ar-bg); box-shadow: 0 0 24px rgba(155, 89, 182, 0.18); isolation: isolate; } .transmission-stage-wrap[data-accent="pink"] { box-shadow: 0 0 24px rgba(255, 45, 123, 0.18); } .transmission-stage-wrap[data-accent="cyan"] { box-shadow: 0 0 24px rgba(0, 240, 255, 0.18); } .transmission-stage-wrap[data-accent="orange"] { box-shadow: 0 0 24px rgba(255, 107, 53, 0.18); } .transmission-stage-wrap[data-accent="magenta"] { box-shadow: 0 0 24px rgba(255, 0, 255, 0.18); } .transmission-stage { position: relative; width: 100%; /* Fixed height, not min-height: an in-flow experiment canvas must not be able to stretch the stage. Without this, leaving fullscreen leaves a tall canvas that grows the box, which the experiment then re-measures and locks in. overflow clips any oversized canvas to the box. */ height: clamp(360px, 60vh, 720px); overflow: hidden; } /* Fullscreen toggle button, top-right of the stage. Faint until the stage is hovered / the button is focused, so it never competes with the experiment itself. */ .transmission-fs-btn { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 0.6rem; border: 1px solid var(--ar-border-soft); background: rgba(6, 6, 15, 0.55); color: var(--ar-text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease; } .transmission-stage-wrap:hover .transmission-fs-btn, .transmission-fs-btn:focus-visible { opacity: 1; } .transmission-fs-btn:hover { background: rgba(6, 6, 15, 0.82); transform: translateY(-1px); } .transmission-fs-btn:focus-visible { outline: 2px solid var(--ar-neon-cyan); outline-offset: 2px; } .transmission-fs-btn i { font-size: 1.1rem; line-height: 1; } /* iOS pseudo-fullscreen fallback: pin the stage wrapper to the viewport when the native Fullscreen API is unavailable (iPhone Safari). */ .transmission-stage-wrap.is-pseudo-fullscreen { position: fixed; inset: 0; z-index: 2000; margin: 0; } /* Lock the page behind the pseudo-fullscreen overlay so nothing scrolls under it on iOS. */ body.is-lab-fullscreen { overflow: hidden; } /* Fullscreen state (native or pseudo, flagged by .is-fullscreen from the toggle script): drop the framed look and let the stage fill the screen so the canvas goes edge to edge. */ .transmission-stage-wrap.is-fullscreen { display: flex; border-radius: 0; border-color: transparent; box-shadow: none; } .transmission-stage-wrap.is-fullscreen .transmission-stage { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; } .transmission-stage-wrap.is-fullscreen .transmission-fs-btn { top: 1rem; right: 1rem; } /* Prev/next experiment buttons, bottom-right, shown only in fullscreen. */ .transmission-fs-nav { display: none; } .transmission-stage-wrap.is-fullscreen .transmission-fs-nav { display: flex; gap: 0.5rem; position: absolute; right: 1rem; bottom: 1rem; z-index: 4; } .transmission-fs-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 0.6rem; border: 1px solid var(--ar-border-soft); background: rgba(6, 6, 15, 0.6); color: var(--ar-text); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0.7; transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease; } .transmission-fs-navbtn:hover { opacity: 1; background: rgba(6, 6, 15, 0.85); transform: translateY(-1px); color: var(--ar-text); } .transmission-fs-navbtn:focus-visible { opacity: 1; outline: 2px solid var(--ar-neon-cyan); outline-offset: 2px; } .transmission-fs-navbtn i { font-size: 1.2rem; line-height: 1; } /* ── The Lab Viewer (immersive experiment browser) ── */ .lab-view-body { margin: 0; height: 100%; background: #06060f; overflow: hidden; } .lab-view-shell { display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; background: #06060f; } .lab-view-stage { position: relative; flex: 1 1 auto; min-height: 0; } .lab-view-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .lab-view-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #06060f; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .lab-view-loading.is-on { opacity: 1; } .lab-view-spinner { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 3px solid rgba(0, 240, 255, 0.2); border-top-color: var(--ar-neon-cyan); animation: lab-view-spin 0.7s linear infinite; } @keyframes lab-view-spin { to { transform: rotate(360deg); } } .lab-view-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.5rem; padding: 0 0.9rem; padding-bottom: env(safe-area-inset-bottom, 0); border-top: 1px solid var(--ar-border-soft); background: rgba(6, 6, 15, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lab-view-logo { display: inline-flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; text-decoration: none; color: var(--ar-text); font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 0.12em; font-size: 0.9rem; } .lab-view-logo img { display: block; } .lab-view-logo span { text-transform: uppercase; } @media (max-width: 560px) { .lab-view-logo span { display: none; } } .lab-view-meta { flex: 1 1 auto; min-width: 0; text-align: center; display: flex; flex-direction: column; line-height: 1.15; } .lab-view-title { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--ar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lab-view-counter { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ar-text-muted); font-family: 'JetBrains Mono', monospace; } .lab-view-controls { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; } .lab-view-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.55rem; border: 1px solid var(--ar-border-soft); background: rgba(255, 255, 255, 0.03); color: var(--ar-text); cursor: pointer; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .lab-view-btn:hover { background: rgba(0, 240, 255, 0.12); border-color: var(--ar-neon-cyan); color: var(--ar-neon-cyan); } .lab-view-btn:disabled { opacity: 0.35; cursor: default; } .lab-view-btn:disabled:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--ar-border-soft); color: var(--ar-text); } .lab-view-close:hover { background: rgba(255, 45, 123, 0.14); border-color: var(--ar-neon-pink); color: var(--ar-neon-pink); } .lab-view-btn i { font-size: 1.15rem; line-height: 1; } /* ── Dreamscape slideshow (crossfading image layers under the viewer chrome) ── */ .ds-stage { overflow: hidden; background: #06060f; } .ds-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; will-change: opacity, transform; } .ds-img.is-front { opacity: 1; /* Slow Ken Burns drift; runs a touch longer than the slide interval so it never visibly stops before the crossfade. */ animation: ds-kenburns 8s ease-out both; } @keyframes ds-kenburns { from { transform: scale(1.02); } to { transform: scale(1.10) translate(-1.5%, -1.5%); } } .ds-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .ds-progress-fill { display: block; height: 100%; width: 0; background: var(--ar-neon-cyan); box-shadow: 0 0 8px var(--ar-neon-cyan); transform-origin: left center; } @keyframes ds-progress { from { width: 0; } to { width: 100%; } } /* Scene name + subtitle, bottom-left, matching the scroll page's look. */ .ds-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to top, rgba(6, 6, 15, 0.72), rgba(6, 6, 15, 0)); pointer-events: none; z-index: 1; } .ds-caption { position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 3.5vh, 2.4rem); max-width: min(46rem, 82vw); z-index: 2; pointer-events: none; opacity: 0; transform: translateY(10px); } .ds-caption.is-in { opacity: 1; transform: translateY(0); transition: opacity 0.8s ease, transform 0.8s ease; } .ds-caption-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4.5vw, 3rem); letter-spacing: 0.04em; margin: 0 0 0.4rem; color: #fff; text-shadow: 0 0 14px rgba(0, 240, 255, 0.6), 0 0 32px rgba(45, 123, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.7); } .ds-caption-line { font-family: 'Rajdhani', sans-serif; font-size: clamp(0.95rem, 2vw, 1.2rem); line-height: 1.4; margin: 0; color: var(--ar-text); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } .ds-caption[data-accent="violet"] .ds-caption-title { text-shadow: 0 0 14px rgba(155, 89, 182, 0.55), 0 0 32px rgba(123, 47, 247, 0.4), 0 1px 3px rgba(0, 0, 0, 0.7); } .ds-caption[data-accent="orange"] .ds-caption-title { text-shadow: 0 0 14px rgba(255, 107, 53, 0.55), 0 0 32px rgba(255, 45, 123, 0.35), 0 1px 3px rgba(0, 0, 0, 0.7); } .ds-caption[data-accent="blue"] .ds-caption-title { text-shadow: 0 0 14px rgba(45, 123, 255, 0.6), 0 0 32px rgba(0, 240, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.7); } .ds-caption[data-accent="green"] .ds-caption-title { text-shadow: 0 0 14px rgba(0, 255, 136, 0.6), 0 0 32px rgba(0, 240, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.7); } @media (prefers-reduced-motion: reduce) { .ds-img { transition: none; } .ds-img.is-front { animation: none; transform: none; } .ds-caption { opacity: 1; transform: none; } .ds-caption.is-in { transition: none; } } /* On phones the title crowds the controls, and the scene name is already shown over the image, so keep only the counter in the footer. */ @media (max-width: 600px) { .ds-bar .lab-view-title { display: none; } } .transmission-stage-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; color: var(--ar-text-muted); padding: 2rem; z-index: 0; pointer-events: none; } .transmission-stage-empty i { font-size: 2.5rem; color: var(--ar-text-dim); opacity: 0.4; } .transmission-stage-empty p { margin: 0; font-size: 0.92rem; max-width: 40ch; } .transmission-stage-empty code { color: var(--ar-neon-cyan); font-size: 0.86rem; } .transmission-body { max-width: 70ch; margin: 0 0 2rem; color: var(--ar-text); font-size: 1.05rem; line-height: 1.7; } .transmission-body p { margin: 0 0 1rem; } .transmission-body p:last-child { margin-bottom: 0; } .transmission-footer { text-align: center; margin-bottom: 2rem; } /* ── Grid page hero (synthwave portal) ── */ .grid-hero { position: relative; overflow: hidden; border-radius: 1.25rem; border: 1px solid var(--ar-border); box-shadow: var(--ar-glow-pink); margin-bottom: 2rem; background: var(--ar-bg); height: clamp(380px, 62vh, 680px); isolation: isolate; } .grid-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: #06060f; } .grid-hero-scan { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient( 0deg, transparent 0, transparent 3px, rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px ); mix-blend-mode: multiply; opacity: 0.45; } .grid-hero-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.25rem; background: linear-gradient(to top, rgba(6, 6, 15, 0.82) 0%, rgba(6, 6, 15, 0.45) 35%, rgba(6, 6, 15, 0.0) 70%); } .grid-hero-eyebrow { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ar-neon-cyan); text-shadow: 0 0 14px rgba(0, 240, 255, 0.7); margin-bottom: 0.75rem; } .grid-hero-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(2.6rem, 7.5vw, 5.6rem); letter-spacing: 0.14em; line-height: 1; margin: 0 0 1rem; color: #ffffff; text-shadow: 0 0 18px rgba(255, 0, 255, 0.7), 0 0 42px rgba(123, 47, 247, 0.55), 2px 0 0 rgba(0, 240, 255, 0.4), -2px 0 0 rgba(255, 45, 123, 0.4); animation: grid-title-flicker 6s ease-in-out infinite; } @keyframes grid-title-flicker { 0%, 100% { opacity: 1; } 47%, 49% { opacity: 1; } 48% { opacity: 0.78; text-shadow: 0 0 8px rgba(255, 0, 255, 0.3), 4px 0 0 rgba(0, 240, 255, 0.6), -4px 0 0 rgba(255, 45, 123, 0.6); } 72% { opacity: 0.92; } } .grid-hero-tag { font-size: clamp(0.95rem, 1.5vw, 1.15rem); color: rgba(255, 255, 255, 0.92); max-width: 640px; margin: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); } @media (prefers-reduced-motion: reduce) { .grid-hero-title { animation: none; } } /* ── Game page (iframe + metadata) ── */ /* Breadcrumb is rendered as an
    . Each step is its own
  1. ; chevrons live in their own li[aria-hidden] so screen readers don't announce them as content. The current page is marked with aria-current="page" instead of a wrapping (we still target span for legacy markup that hasn't been converted, but new pages use aria-current). */ .game-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; color: var(--ar-text-muted); font-size: 0.85rem; margin: 0 0 1rem; padding: 0; list-style: none; text-transform: uppercase; letter-spacing: 0.12em; font-family: 'Orbitron', sans-serif; } .game-breadcrumb li { display: inline-flex; align-items: center; margin: 0; } .game-breadcrumb a { color: var(--ar-text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; } .game-breadcrumb a:hover { color: var(--ar-neon-pink); } .game-breadcrumb .bi-chevron-right { color: var(--ar-text-dim); font-size: 0.75rem; } .game-breadcrumb [aria-current="page"], .game-breadcrumb span { color: var(--ar-text); } .game-page-header { margin-bottom: 1.25rem; } .game-page-title { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: 0 0 0.5rem; background: linear-gradient(180deg, #ffffff 0%, var(--ar-neon-pink) 60%, var(--ar-neon-purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(255, 45, 123, 0.35); } .game-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; color: var(--ar-text-muted); font-size: 0.9rem; } .game-page-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: 999px; font-family: 'Orbitron', sans-serif; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-neon-pink); background: rgba(255, 45, 123, 0.10); border: 1px solid var(--ar-border-soft); } .game-page-meta-item { display: inline-flex; align-items: center; gap: 0.35rem; } .game-page-platforms i { color: var(--ar-neon-cyan); font-size: 0.95em; } .game-page-platforms i + i { margin-left: 0.25rem; } /* Stage = iframe + info column on the left, fixed-width ad column on the right */ .game-stage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; margin-bottom: 2rem; align-items: stretch; } @media (max-width: 1199px) { .game-stage { grid-template-columns: minmax(0, 1fr) 120px; } } @media (max-width: 899px) { .game-stage { grid-template-columns: 1fr; } } /* min-width: 0 on the flex/grid chain that hangs off .game-stage so the game area is allowed to shrink below its iframe's intrinsic width. Without these, the iframe's default 300x150 plus the aspect-ratio rule creates an implicit content-min-width that stops the shell at ~600px on narrow desktop viewports. */ .game-stage-main { display: flex; flex-direction: column; min-width: 0; } .game-frame-wrap { /* Two ratios, both set inline by game.php and inherited by the shell, glow, banner and footer. Separate w/h vars (not "16 / 9") because CSS calc() needs numeric inputs; slash-syntax only works inside aspect-ratio. --frame-aspect-* is the stage BOX shape (the shell). --game-aspect-* is the GAME shape (the iframe), centred in the box; when the two differ the shell background shows as letterbox / pillarbox bars. They default equal, so a game with no frame override fills its box exactly (the original behaviour). */ --frame-aspect-w: 16; --frame-aspect-h: 9; --game-aspect-w: 16; --game-aspect-h: 9; position: relative; margin-bottom: 1.5rem; min-width: 0; } .game-frame-glow { position: absolute; inset: -3px; pointer-events: none; border-radius: 1rem; background: linear-gradient(135deg, var(--ar-neon-pink), var(--ar-neon-cyan)); opacity: 0.28; filter: blur(20px); z-index: 0; } .game-frame-shell { /* The shell is the stage BOX, so it takes the frame aspect (--frame-aspect-*, inherited from .game-frame-wrap). The game iframe inside uses --game-aspect-* and is centred, so a tall game can sit pillarboxed in a wide box. Both default 16 / 9. */ position: relative; border-radius: 1rem 1rem 0 0; overflow: hidden; border: 1px solid var(--ar-border); border-bottom: 0; background: #000; z-index: 1; /* The shell stays full column width (that's what the footer and glow visually attach to). Its height comes from the frame aspect (the box shape) but is capped by max-height on short windows. When the cap kicks in, width stays put and the iframe inside letterboxes against the black backdrop instead of dragging the footer with it. */ width: 100%; min-width: 0; aspect-ratio: var(--frame-aspect-w) / var(--frame-aspect-h); max-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center; } .game-frame { min-width: 0; /* The iframe is the part that actually scales to the per-game aspect. It fills the shell's height; width is computed from aspect-ratio (so it can be narrower than the shell when max-height has clamped the shell into a wider-than-aspect rectangle, producing horizontal black bars on either side). max-width caps the other direction so a tall window with a wide aspect doesn't overflow horizontally. */ position: relative; aspect-ratio: var(--game-aspect-w) / var(--game-aspect-h); height: 100%; width: auto; max-width: 100%; border: 0; display: block; background: #000; z-index: 1; /* iOS scroll-chaining hardening: declare the iframe non-pannable at the parent level so vertical drags inside the game are not interpreted as parent-page scrolls and stolen mid-stream from the iframe's touch handlers. The game itself still receives touch events normally; this only governs the parent's interpretation of gestures on the iframe element. */ touch-action: none; } .game-frame-shell:fullscreen, .game-frame-shell:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; max-height: none; height: 100vh; width: 100vw; } /* ============================================================ Game start poster + mobile launch flow. ============================================================ Mobile / touch visitors don't get the iframe auto-loaded. They see this poster (cover image only) inside the shell instead, plus a launch banner under the shell with a Start CTA. Tapping Start unhides the iframe and (when supported) takes the shell into fullscreen. Desktop visitors get the iframe immediately; the head