/* World theming — accent driven by --world-accent (set by /js/world.js). */ :root { --world-accent: #0d9488; } /* Header world switcher pill */ .world-switcher { position: relative; display: inline-block; } .world-switcher__btn { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 9999px; border: 2px solid var(--world-accent); color: var(--world-accent); background: color-mix(in srgb, var(--world-accent) 8%, white); font-weight: 700; font-size: .85rem; cursor: pointer; white-space: nowrap; transition: background .15s, box-shadow .15s; } .world-switcher__btn:hover { background: color-mix(in srgb, var(--world-accent) 16%, white); } .world-switcher__btn .caret { font-size: .7rem; opacity: .7; } .world-menu { position: absolute; top: calc(100% + .4rem); left: 0; z-index: 60; min-width: 240px; background: #fff; border: 1px solid #e5e7eb; border-radius: .9rem; box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: .4rem; } .world-menu[hidden] { display: none; } .world-menu__group { padding: .5rem .6rem .25rem; font-size: .68rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; } .world-item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .55rem .6rem; border-radius: .6rem; border: none; background: none; text-align: left; cursor: pointer; font-size: .9rem; color: #374151; } .world-item:hover { background: #f3f4f6; } .world-item.is-active { background: color-mix(in srgb, var(--world-accent) 12%, white); color: var(--world-accent); font-weight: 700; } .world-item .ico { font-size: 1.15rem; } .world-item .badge-soon { margin-left: auto; font-size: .62rem; background: #fef3c7; color: #92400e; padding: .1rem .4rem; border-radius: 9999px; font-weight: 700; } /* Accent ribbon under the header — only in special worlds. */ html[data-world="general"] .world-ribbon { display: none; } .world-ribbon { background: var(--world-accent); color: #fff; text-align: center; font-size: .8rem; font-weight: 600; padding: .3rem .8rem; } /* Content gating: elements marked [data-world-hide] show ONLY in the general world. Driven by html[data-world] which /js/world.js sets in before paint — no flash. */ html:not([data-world="general"]) [data-world-hide] { display: none !important; } /* Mount point for the special-world "in development" hero — hidden in general. */ .world-dev-mount { display: none; } html:not([data-world="general"]) .world-dev-mount { display: block; } /* "In development" hero for special worlds — aggressive, bold, high-contrast. */ .world-dev-hero { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, #17171d 0%, #0b0b0f 60%, #000 100%); border-radius: 1.25rem; margin: 1.5rem 0; padding: 0; box-shadow: 0 0 0 2px var(--world-accent), 0 24px 60px rgba(0,0,0,.45), 0 0 80px color-mix(in srgb, var(--world-accent) 45%, transparent); } /* Diagonal hazard stripes top & bottom */ .world-dev-hero__stripes { height: 14px; background-image: repeating-linear-gradient(45deg, var(--world-accent) 0, var(--world-accent) 16px, #0b0b0f 16px, #0b0b0f 32px); opacity: .9; } .world-dev-hero__content { padding: 3.5rem 1.5rem; text-align: center; } .world-dev-hero__tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .22em; color: #0b0b0f; background: var(--world-accent); padding: .35rem .8rem; border-radius: 9999px; text-transform: uppercase; margin-bottom: 1.25rem; animation: world-blink 1.6s steps(1) infinite; } .world-dev-hero__icon { font-size: 3.5rem; line-height: 1; filter: drop-shadow(0 0 18px var(--world-accent)); } .world-dev-hero__world { margin-top: .75rem; color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; opacity: .85; } .world-dev-hero__title { margin: .35rem 0 1rem; font-weight: 900; line-height: .95; font-size: clamp(2.75rem, 9vw, 6rem); letter-spacing: .04em; text-transform: uppercase; color: var(--world-accent); text-shadow: 0 0 24px color-mix(in srgb, var(--world-accent) 70%, transparent); } .world-dev-hero__text { max-width: 560px; margin: 0 auto 1.75rem; color: #cbd5e1; font-size: 1.05rem; line-height: 1.55; } .world-dev-hero__back { display: inline-block; font-weight: 800; font-size: .95rem; cursor: pointer; color: #0b0b0f; background: var(--world-accent); border: none; padding: .8rem 1.5rem; border-radius: 9999px; box-shadow: 0 8px 24px color-mix(in srgb, var(--world-accent) 55%, transparent); transition: transform .12s ease, box-shadow .12s ease; } .world-dev-hero__back:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 32px color-mix(in srgb, var(--world-accent) 70%, transparent); } @keyframes world-blink { 0%,60% { opacity: 1; } 61%,100% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .world-dev-hero__tag { animation: none; } }