/* ============================================================================ HOUSE COMMON ROOMS — سالن‌های عمومی گروه‌ها ---------------------------------------------------------------------------- Each house gets its own atmosphere: Gryffindor sits by the fire, Hufflepuff in a sunlit burrow, Ravenclaw under the stars, Slytherin beneath the lake. Every ambient layer animates transform/opacity only, so the whole scene stays on the compositor and costs the CPU nothing. The particle canvas is driven by common-room/assets/js/common-room.js and stops itself when the tab is hidden. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ /* The tokens are declared on a second, layout-free selector as well, because an open «⋯» menu is parented to — outside `.wc-room` and therefore outside the palette it declares. common-room.js puts `wc-room-tokens` and the room's own `wc-room-house-*` class on that menu, so it keeps its room's colours wherever it is rendered. Copying the resolved values onto the element in JS instead would be a list that goes stale the first time a token is added. */ .wc-room, .wc-room-tokens { /* Neutral fallback (hub page). Houses override below. */ --room-primary: #a119a6; --room-secondary: #c93dd4; --room-deep: #1a0a20; --room-accent: #d8b4fe; --room-ink: #e9e6ef; --room-muted: #a9a3b8; /* Panels are opaque on purpose. Translucent cards over a fixed, animated backdrop change colour as they scroll past it, which reads as flicker. */ --room-panel: #17151f; --room-panel-2: #1f1c2a; --room-border: rgba(255, 255, 255, 0.09); --room-radius: 18px; /* The colour the page header's own gradient ends on — `.site-brand-main` in custom-pww.css (dark) / light-wc.css (light). `.wc-room::after` starts the room on it so the two never meet at a visible line. */ --room-header-fade: #09080d; } .wc-room { position: relative; z-index: 1; min-height: 60vh; padding: 10px 0 70px; font-family: 'Estedad', Tahoma, sans-serif; color: var(--room-ink); } /* The menu is not inside the room, so it inherits none of its typography. */ .wc-room-tokens { font-family: 'Estedad', Tahoma, sans-serif; color: var(--room-ink); } .wc-room-house-gryffindor { --room-primary: #DC574F; --room-secondary: #ff8a7a; --room-deep: #2a0708; --room-accent: #D3A625; } .wc-room-house-hufflepuff { --room-primary: #FCC056; --room-secondary: #ffe1a3; --room-deep: #241a0b; --room-accent: #b98a2f; } .wc-room-house-ravenclaw { --room-primary: #2B77DF; --room-secondary: #7db4ff; --room-deep: #060c1c; --room-accent: #C0A062; } .wc-room-house-slytherin { --room-primary: #5A8B80; --room-secondary: #8ed3c0; --room-deep: #061410; --room-accent: #cfd6d3; } .wc-room-inner { position: relative; /* 3, because .wc-room::after was raised to 2 to cover the canvas. */ z-index: 3; max-width: 1000px; margin: 0 auto; padding: 0 18px; } /* -------------------------------------------------------- ambient layers -- */ .wc-room-ambience, .wc-room-scene { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .wc-room-ambience { z-index: 1; } .wc-room-scene::before, .wc-room-scene::after, .wc-room::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; } /* The theme insets #page by 8px/12px, so the page background is visible as a rim along the top and sides. Left at the site default it reads as a white gap around the room, so paint it to match. */ body.wc-room-page { background: #09080d; } /* The theme caps #content at 1100px and centres it. That is right for an article, but a room's atmosphere is fixed to the *viewport*, so anything the room paints inside its own box — `.wc-room::after` below — stopped at the column edge while the ambience carried on into the gutters. On a wide screen that turned the bottom of the page header into a hard line with two lit strips either side of it. Room pages put nothing but `.wc-room` in #content, so let it run full width; `.wc-room-inner` still holds the reading column. */ body.wc-room-page #content { max-width: none; margin-inline: 0; } /* The ambience is fixed to the viewport, so once the visitor reaches the bottom of the page it would otherwise sit on top of the footer and wash it out. Lift the footer above it. */ body.wc-room-page .site-footer { position: relative; z-index: 3; } /* A house-tinted wash sits under everything and keeps the room readable whatever the page header image happens to be. Its top stays transparent so the site header still shows through. */ .wc-room::before { background: radial-gradient(120% 90% at 50% 0%, transparent 30%, var(--room-deep) 100%), linear-gradient(180deg, rgba(6, 5, 10, 0.55) 0%, rgba(6, 5, 10, 0.88) 60%, rgba(6, 5, 10, 0.96) 100%); opacity: 0.94; } /* `.site-brand-main` fades the header to a flat colour at its bottom edge (#09080d dark, #ebebeb light) while the wash right below it is house-tinted, so the two met at a hard horizontal line and the header read as a separate image pasted above the page. Start the room on that exact colour and dissolve it into the wash over the first 150px. Absolute, not fixed like the other layers: this one belongs to the top of the room, not to the viewport — it has to scroll away with the header. It is the painted above both ambient layers — the CSS scene *and* the particle canvas — so neither can meet the page header at a visible edge; `.wc-room-inner` (z-index 3) stays above it. */ .wc-room::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 150px; background: linear-gradient(180deg, var(--room-header-fade) 0%, color-mix(in srgb, var(--room-header-fade) 60%, transparent) 42%, transparent 100%); pointer-events: none; /* Above the ambience canvas (z-index 1), not merely last at z-index 0. The canvas is `position: fixed`, so it covers the whole viewport — but the page header sits above the whole room at z-index 10, so the canvas is only *visible* below the header's bottom edge. That put a hard tonal step exactly where the header ended, which is the one thing this fade exists to prevent; sitting under the canvas, it was masking the scene and nothing else. `.wc-room-inner` is bumped to 3 to stay above it. */ z-index: 2; } /* ==== Gryffindor — the fire in the hearth ================================= */ .wc-room-house-gryffindor .wc-room-scene::before { /* Firelight pooling up from the hearth, breathing. */ background: radial-gradient(70% 45% at 50% 108%, rgba(255, 158, 61, 0.55) 0%, rgba(219, 68, 42, 0.22) 40%, transparent 72%), radial-gradient(38% 26% at 22% 104%, rgba(255, 196, 92, 0.28) 0%, transparent 70%), radial-gradient(38% 26% at 80% 106%, rgba(255, 120, 60, 0.24) 0%, transparent 70%); animation: wc-room-firelight 5.5s ease-in-out infinite alternate; will-change: opacity, transform; } .wc-room-house-gryffindor .wc-room-scene::after { /* Scarlet velvet drapes down both walls, with gold thread catching light. */ background: repeating-linear-gradient(90deg, rgba(122, 12, 15, 0.40) 0px, rgba(74, 6, 9, 0.46) 26px, rgba(150, 22, 24, 0.30) 52px, rgba(74, 6, 9, 0.46) 78px), linear-gradient(180deg, rgba(40, 4, 6, 0.9) 0%, transparent 45%); -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%); opacity: 0.75; animation: wc-room-drape 14s ease-in-out infinite alternate; } /* ==== Hufflepuff — sunlight in the burrow ================================= */ .wc-room-house-hufflepuff .wc-room-scene::before { /* Honeycomb lattice, drifting slowly like light through a lattice window. Kept faint on purpose — it is a texture behind the text, not a pattern competing with it, and it fades out toward the middle of the page. */ background-image: repeating-conic-gradient(from 30deg at 50% 50%, rgba(252, 192, 86, 0.05) 0deg 60deg, transparent 60deg 120deg); background-size: 58px 58px; opacity: 0.55; -webkit-mask-image: radial-gradient(75% 60% at 50% 45%, transparent 20%, #000 100%); mask-image: radial-gradient(75% 60% at 50% 45%, transparent 20%, #000 100%); animation: wc-room-honeycomb 46s linear infinite; } .wc-room-house-hufflepuff .wc-room-scene::after { /* Warm shafts of afternoon sun, swaying. */ background: repeating-linear-gradient(105deg, rgba(255, 214, 130, 0.05) 0px, rgba(255, 214, 130, 0.05) 70px, transparent 70px, transparent 260px), radial-gradient(60% 40% at 78% -5%, rgba(255, 208, 120, 0.22) 0%, transparent 68%), radial-gradient(90% 55% at 50% 112%, rgba(74, 50, 18, 0.55) 0%, transparent 72%); opacity: 0.8; animation: wc-room-sunbeam 16s ease-in-out infinite alternate; will-change: transform, opacity; } /* ==== Ravenclaw — the night sky from the tower ============================ */ .wc-room-house-ravenclaw .wc-room-scene::before { /* Hand-placed star field; three sizes so it reads as depth, not noise. */ background-image: radial-gradient(1.6px 1.6px at 18% 12%, #ffffff, transparent), radial-gradient(1.4px 1.4px at 62% 8%, #dce9ff, transparent), radial-gradient(1.8px 1.8px at 84% 26%, #ffffff, transparent), radial-gradient(1.2px 1.2px at 34% 34%, #cfe0ff, transparent), radial-gradient(1.5px 1.5px at 8% 48%, #ffffff, transparent), radial-gradient(1.1px 1.1px at 72% 44%, #e6f0ff, transparent), radial-gradient(1.9px 1.9px at 46% 58%, #ffffff, transparent), radial-gradient(1.2px 1.2px at 92% 62%, #cfe0ff, transparent), radial-gradient(1.4px 1.4px at 26% 72%, #ffffff, transparent), radial-gradient(1.6px 1.6px at 66% 82%, #dce9ff, transparent), radial-gradient(1.1px 1.1px at 12% 88%, #ffffff, transparent), radial-gradient(1.5px 1.5px at 88% 92%, #e6f0ff, transparent); background-size: 520px 520px; animation: wc-room-twinkle 7s ease-in-out infinite alternate; } .wc-room-house-ravenclaw .wc-room-scene::after { /* Moonlight through the tower window, and a slow blue nebula behind it. */ background: radial-gradient(46% 34% at 14% 8%, rgba(150, 190, 255, 0.30) 0%, transparent 68%), radial-gradient(58% 40% at 80% 70%, rgba(43, 119, 223, 0.22) 0%, transparent 72%), radial-gradient(90% 60% at 50% 112%, rgba(6, 12, 34, 0.75) 0%, transparent 72%); opacity: 0.9; animation: wc-room-nebula 24s ease-in-out infinite alternate; will-change: transform, opacity; } /* ==== Slytherin — light through the lake above ============================ */ .wc-room-house-slytherin .wc-room-scene::before { /* Caustics: two crossed gradient grids sliding over each other at unequal spacings, so they never settle into a readable lattice. Soft-edged and masked away from the centre column where the text sits. */ background: repeating-linear-gradient(64deg, transparent 0px, rgba(120, 220, 190, 0.07) 6px, transparent 13px, transparent 41px), repeating-linear-gradient(-51deg, transparent 0px, rgba(150, 235, 205, 0.05) 5px, transparent 11px, transparent 67px); opacity: 0.75; -webkit-mask-image: radial-gradient(70% 55% at 50% 45%, transparent 10%, #000 95%); mask-image: radial-gradient(70% 55% at 50% 45%, transparent 10%, #000 95%); animation: wc-room-caustics 18s linear infinite; will-change: transform; } .wc-room-house-slytherin .wc-room-scene::after { /* Green murk, deepening toward the dungeon floor. */ background: radial-gradient(70% 44% at 50% -8%, rgba(126, 214, 184, 0.26) 0%, transparent 70%), radial-gradient(100% 70% at 50% 115%, rgba(3, 22, 16, 0.88) 0%, transparent 72%), linear-gradient(180deg, rgba(10, 40, 30, 0.28) 0%, transparent 55%); animation: wc-room-murk 12s ease-in-out infinite alternate; } /* ==== The hub — loose magic in the corridor =============================== */ /* The corridor the four rooms open off. It belongs to no house, so it wears the site's own purple and borrows no house's weather: drifting arcane dust and a slow violet haze, over the crest-and-starfield cover. */ .wc-room--hub .wc-room-scene::before { /* Fine dust hanging in the air. Two tile sizes with no common factor, so the field never settles into a readable grid. */ background-image: radial-gradient(1.5px 1.5px at 16% 14%, #f4e0ff, transparent), radial-gradient(1.2px 1.2px at 58% 9%, #d8b4fe, transparent), radial-gradient(1.7px 1.7px at 86% 28%, #ffffff, transparent), radial-gradient(1.1px 1.1px at 31% 37%, #e9d5ff, transparent), radial-gradient(1.4px 1.4px at 7% 52%, #f4e0ff, transparent), radial-gradient(1.2px 1.2px at 74% 47%, #c77dff, transparent), radial-gradient(1.8px 1.8px at 44% 61%, #ffffff, transparent), radial-gradient(1.1px 1.1px at 94% 66%, #d8b4fe, transparent), radial-gradient(1.3px 1.3px at 24% 76%, #f4e0ff, transparent), radial-gradient(1.5px 1.5px at 68% 86%, #e9d5ff, transparent), radial-gradient(1.1px 1.1px at 11% 91%, #ffffff, transparent), radial-gradient(1.4px 1.4px at 90% 95%, #c77dff, transparent); background-size: 470px 470px; animation: wc-room-arcane-dust 9s ease-in-out infinite alternate; } .wc-room--hub .wc-room-scene::after { /* Violet haze pooling at the corners, drifting. */ background: radial-gradient(48% 36% at 12% 6%, rgba(199, 125, 255, 0.26) 0%, transparent 68%), radial-gradient(56% 40% at 84% 62%, rgba(161, 25, 166, 0.24) 0%, transparent 72%), radial-gradient(90% 60% at 50% 112%, rgba(14, 6, 22, 0.78) 0%, transparent 72%); opacity: 0.9; animation: wc-room-arcane-haze 26s ease-in-out infinite alternate; will-change: transform, opacity; } /* ==== The prefects' hall — candlelight behind a closed door =============== */ /* Not a house room and not the hub: a small private study the four houses share. Gold candlelight in the corners over the hub's violet, so it reads as related to the corridor outside without borrowing any house's weather. Both selectors, because the room index writes `.wc-room--prefects` while a topic page writes `.wc-room-house-prefects` — a thread in this hall keeps the hall's atmosphere. */ .wc-room--prefects .wc-room-scene::before, .wc-room-house-prefects .wc-room-scene::before { /* Motes hanging in still air, gold shading into violet. */ background-image: radial-gradient(1.5px 1.5px at 14% 16%, #ffe6ad, transparent), radial-gradient(1.2px 1.2px at 57% 7%, #d8b4fe, transparent), radial-gradient(1.7px 1.7px at 83% 25%, #fff3d4, transparent), radial-gradient(1.1px 1.1px at 29% 39%, #f2d28a, transparent), radial-gradient(1.4px 1.4px at 6% 54%, #ffe6ad, transparent), radial-gradient(1.2px 1.2px at 71% 45%, #c9a7f5, transparent), radial-gradient(1.8px 1.8px at 42% 63%, #fff3d4, transparent), radial-gradient(1.1px 1.1px at 92% 68%, #e5c36b, transparent), radial-gradient(1.3px 1.3px at 22% 78%, #ffe6ad, transparent), radial-gradient(1.5px 1.5px at 66% 88%, #d8b4fe, transparent), radial-gradient(1.1px 1.1px at 9% 93%, #fff3d4, transparent), radial-gradient(1.4px 1.4px at 88% 97%, #e5c36b, transparent); background-size: 430px 430px; animation: wc-room-candle-motes 8s ease-in-out infinite alternate; } .wc-room--prefects .wc-room-scene::after, .wc-room-house-prefects .wc-room-scene::after { /* Two candles high on the walls, violet pooling on the floor between them. */ background: radial-gradient(42% 30% at 88% 4%, rgba(245, 205, 120, 0.22) 0%, transparent 66%), radial-gradient(38% 28% at 10% 12%, rgba(245, 205, 120, 0.16) 0%, transparent 68%), radial-gradient(58% 42% at 50% 80%, rgba(124, 77, 204, 0.20) 0%, transparent 72%), radial-gradient(90% 60% at 50% 112%, rgba(14, 9, 26, 0.82) 0%, transparent 72%); opacity: 0.9; animation: wc-room-candle-glow 20s ease-in-out infinite alternate; will-change: transform, opacity; } /* ------------------------------------------------------------ keyframes -- */ @keyframes wc-room-candle-motes { 0% { opacity: 0.38; transform: translate3d(0, 0, 0); } 50% { opacity: 0.80; } 100% { opacity: 0.52; transform: translate3d(-14px, -12px, 0); } } @keyframes wc-room-candle-glow { 0% { transform: scale(1); opacity: 0.74; } 100% { transform: scale(1.07); opacity: 1; } } @keyframes wc-room-arcane-dust { 0% { opacity: 0.4; transform: translate3d(0, 0, 0); } 50% { opacity: 0.85; } 100% { opacity: 0.55; transform: translate3d(16px, -14px, 0); } } @keyframes wc-room-arcane-haze { 0% { transform: scale(1) translateX(0); opacity: 0.72; } 100% { transform: scale(1.09) translateX(-26px); opacity: 1; } } @keyframes wc-room-firelight { 0% { opacity: 0.72; transform: translateY(0) scale(1); } 35% { opacity: 0.95; transform: translateY(-6px) scale(1.03); } 60% { opacity: 0.80; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(-9px) scale(1.05); } } @keyframes wc-room-drape { 0% { transform: translateX(0) scaleY(1); } 100% { transform: translateX(-10px) scaleY(1.02); } } @keyframes wc-room-honeycomb { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-74px, -74px, 0); } } @keyframes wc-room-sunbeam { 0% { transform: translateX(-30px) skewX(0deg); opacity: 0.65; } 100% { transform: translateX(30px) skewX(-2deg); opacity: 0.9; } } @keyframes wc-room-twinkle { 0% { opacity: 0.45; transform: translate3d(0, 0, 0); } 50% { opacity: 0.95; } 100% { opacity: 0.6; transform: translate3d(-18px, 12px, 0); } } @keyframes wc-room-nebula { 0% { transform: scale(1) translateX(0); opacity: 0.75; } 100% { transform: scale(1.08) translateX(24px); opacity: 1; } } @keyframes wc-room-caustics { 0% { transform: translate3d(0, 0, 0) scale(1.2); } 50% { transform: translate3d(-40px, 26px, 0) scale(1.25); } 100% { transform: translate3d(-80px, 0, 0) scale(1.2); } } @keyframes wc-room-murk { 0% { opacity: 0.8; } 100% { opacity: 1; } } /* ================================================================= HUB ==== */ .wc-room-hero { text-align: center; padding: 30px 0 34px; } .wc-room-eyebrow { margin: 0 0 6px; font-size: 0.78rem; color: var(--room-accent); opacity: 0.85; } .wc-room-hero-title { margin: 0 0 14px; font-size: 2.5rem; line-height: 1.35; background: linear-gradient(120deg, #fff 0%, var(--room-secondary) 55%, var(--room-primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .wc-room-hero-text { margin: 0 auto; max-width: 620px; color: var(--room-muted); font-size: 1rem; line-height: 2.1; } /* ================================================ MANAGEMENT ROOM ======= */ /* One pinned line, not a card: the announcement itself is the whole panel, so nothing here may claim more than a row of height. */ .wc-room-management-panel { display: flex; align-items: center; gap: 10px; margin: 8px 0 20px; padding: 0 14px; border: 1px solid rgba(216, 180, 254, 0.22); border-radius: var(--room-radius); background: linear-gradient(135deg, #21172d, var(--room-panel) 58%); box-shadow: 0 18px 44px -34px rgba(126, 34, 206, 0.75); } .wc-room-management-pin { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 10px 0; color: inherit; text-decoration: none; } .wc-room-management-label { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(216, 180, 254, 0.2); color: #e9d5ff; background: rgba(126, 34, 206, 0.22); font-size: 0.68rem; line-height: 1.9; white-space: nowrap; } /* The title takes the room that is left and gives up first, so a long announcement shortens instead of pushing the date onto a second line. */ .wc-room-management-title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: #fff; font-size: 0.92rem; line-height: 1.8; text-overflow: ellipsis; white-space: nowrap; } .wc-room-management-pin:hover .wc-room-management-title { color: #d8b4fe; } .wc-room-management-pin.is-empty .wc-room-management-title { color: var(--room-muted); font-size: 0.85rem; } .wc-room-management-when { flex: 0 0 auto; color: var(--room-muted); font-size: 0.72rem; white-space: nowrap; } .wc-room-management-when i { margin-inline-start: 5px; } .wc-room-management-more { flex: 0 0 auto; color: #d8b4fe; text-decoration: none; font-size: 0.78rem; white-space: nowrap; } /* Shared with the management room's own list rows, which keep the larger mark — only the pinned line shrinks it. */ .wc-room-management-seal, .wc-room-management-icon { display: grid; place-items: center; flex: 0 0 auto; color: #e9d5ff; border: 1px solid rgba(216, 180, 254, 0.25); background: rgba(126, 34, 206, 0.16); } .wc-room-management-seal { width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; } .wc-room-management-icon { width: 42px; height: 42px; border-radius: 12px; } .wc-room-management-panel .wc-room-management-icon { width: 28px; height: 28px; border-radius: 9px; font-size: 0.72rem; } .wc-room-management-banner { border-color: rgba(216, 180, 254, 0.22); } .wc-room-management-banner::before { background: linear-gradient(180deg, #c084fc, #7c3aed); } .wc-room-announcement .wc-room-management-icon { margin-top: 2px; } .wc-room-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 12px; } .wc-room-door { position: relative; padding: 28px 22px 24px; text-align: center; border-radius: var(--room-radius); border: 1px solid rgba(255, 255, 255, 0.08); background: #14121c; overflow: hidden; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.35s, border-color 0.35s; } /* The door's own house colour, so the hub previews all four atmospheres. */ .wc-room-door--gryffindor { --door: #DC574F; --door-2: #D3A625; } .wc-room-door--hufflepuff { --door: #FCC056; --door-2: #8a6a2f; } .wc-room-door--ravenclaw { --door: #2B77DF; --door-2: #C0A062; } .wc-room-door--slytherin { --door: #5A8B80; --door-2: #cfd6d3; } .wc-room-door::before { content: ''; position: absolute; inset: 0; background: radial-gradient(100% 70% at 50% 0%, color-mix(in srgb, var(--door) 26%, transparent) 0%, transparent 70%); opacity: 0.7; transition: opacity 0.35s; } .wc-room-door::after { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--door), var(--door-2), transparent); transform: scaleX(0.4); transition: transform 0.45s ease; } .wc-room-door:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--door) 55%, transparent); box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--door) 65%, transparent); } .wc-room-door:hover::after { transform: scaleX(1); } .wc-room-door:hover::before { opacity: 1; } .wc-room-door > * { position: relative; z-index: 1; } .wc-room-door.is-mine { border-color: color-mix(in srgb, var(--door) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--door) 30%, transparent), 0 18px 44px -20px color-mix(in srgb, var(--door) 70%, transparent); } .wc-room-door.is-locked { opacity: 0.62; } .wc-room-door.is-locked:hover { transform: none; } .wc-room-door-crest img { width: 96px; height: auto; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--door) 55%, transparent)); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1); } .wc-room-door:hover .wc-room-door-crest img { transform: scale(1.08) rotate(-3deg); } .wc-room-door-title { margin: 14px 0 6px; font-size: 1.22rem; color: #fff; } .wc-room-door-tagline { margin: 0 0 10px; font-size: 0.9rem; color: var(--door); } .wc-room-door-place { margin: 0 0 16px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); } .wc-room-door-stats { display: flex; justify-content: center; gap: 18px; margin: 0 0 18px; padding: 12px 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .wc-room-door-stats li, .wc-room-banner-stats li { display: flex; flex-direction: column; align-items: center; line-height: 1.5; } .wc-room-door-stats strong, .wc-room-banner-stats strong { font-size: 1.12rem; color: #fff; } .wc-room-door-stats span, .wc-room-banner-stats span { font-size: 0.74rem; color: rgba(255, 255, 255, 0.5); } .wc-room-door-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; font-size: 0.92rem; text-decoration: none; color: #12100f; background: linear-gradient(135deg, var(--door), var(--door-2)); transition: filter 0.25s, transform 0.25s; } .wc-room-door-btn:hover { filter: brightness(1.12); transform: translateY(-2px); color: #12100f; } .wc-room-door-btn.is-disabled { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } /* ========================================================== ROOM BANNER === */ .wc-room-banner { display: flex; align-items: center; gap: 22px; margin: 24px 0 22px; padding: 26px 26px; border-radius: var(--room-radius); border: 1px solid var(--room-border); background: var(--room-panel); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9); position: relative; overflow: hidden; } .wc-room-banner::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--room-primary), var(--room-accent)); } .wc-room-banner-crest img { width: 84px; height: auto; filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--room-primary) 60%, transparent)); animation: wc-room-crest-float 6s ease-in-out infinite alternate; } @keyframes wc-room-crest-float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-8px) rotate(2deg); } } .wc-room-banner-text { flex: 1 1 auto; min-width: 0; } .wc-room-title { margin: 0 0 6px; font-size: 1.75rem; line-height: 1.5; color: #fff; text-shadow: 0 2px 20px color-mix(in srgb, var(--room-primary) 55%, transparent); } .wc-room-tagline { margin: 0 0 6px; font-size: 0.95rem; color: var(--room-secondary); } .wc-room-place { margin: 0; font-size: 0.8rem; color: var(--room-muted); } .wc-room-place i { color: var(--room-accent); } .wc-room-banner-stats { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; flex: 0 0 auto; } /* ================================================================ TOOLBAR = */ .wc-room-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .wc-room-search { position: relative; flex: 1 1 240px; } .wc-room-search i { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--room-muted); font-size: 0.85rem; pointer-events: none; } .wc-room-search input[type="search"] { width: 100%; padding: 12px 44px 12px 16px; border-radius: 999px; border: 1px solid var(--room-border); background: var(--room-panel); color: var(--room-ink); font-family: inherit; font-size: 0.92rem; transition: border-color 0.25s, box-shadow 0.25s; } .wc-room-search input[type="search"]:focus { outline: none; border-color: color-mix(in srgb, var(--room-primary) 65%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--room-primary) 18%, transparent); } /* ------------------------------------------------------------------- sort */ /* One pill per order, in the same rounded language as the search field beside it. Plain links, not a