/* ============================================================ App do Ivo - estetica editorial inspirada nos temas do ano Night 1 "furnished" (objetos domesticos, veludo teal/clay) Night 2 "swamp" (pantano, musgo/oliva) ============================================================ */ /* Fonts are loaded via a in (not @import here) so they download in parallel with this stylesheet instead of after it. */ :root { --paper: #e7e3d6; --paper-2: #efece1; --paper-3: #f4f1e8; --ink: #2b2721; --ink-soft: #635d4f; --line: #cbc4b2; --line-2: #ded7c6; /* Night 1 - furnished */ --rata: #3f5b54; --rata-2: #52756c; /* Night 2 - swamp */ --outfit: #59662f; --outfit-2: #6f7d42; /* acento quente */ --clay: #a96b4b; --clay-2: #bd8062; --danger: #9c4a3c; --radius: 4px; --shadow: 0 12px 40px rgba(43, 39, 33, 0.12); --serif: 'Cormorant Garamond', Georgia, serif; --body: 'EB Garamond', Georgia, serif; --script: 'Italianno', cursive; } /* ==================== Dark / light mode (UI chrome) ====================== A global preference for screens with no active night theme (settings.html, and the main app before/without a specific Best Outfit/Rata look). Declared on (not body) as plain custom properties, so it only ever wins through normal inheritance: the moment a night theme is active, body.theme-rata/furnished/swamp sets these same variables directly on body itself, and a direct declaration on an element always wins over an inherited one - no specificity fight needed, and the furnished/swamp/rata looks stay exactly as distinctive as before. #login is unaffected by design (it has its own fixed palette over a photo, set directly on #login itself, same protection). */ html.mode-light { --paper: #f5eef1; --paper-2: #faf5f7; --paper-3: #fdfafc; --ink: #4a3f4d; --ink-soft: #8d7f92; --line: #e3d4e0; --line-2: #ecdfe8; --rata: #8fbfae; --rata-2: #aad4c5; --outfit: #a7abdb; --outfit-2: #c1c4e6; --clay: #e2a798; --clay-2: #ecc0b4; --danger: #d98a7a; --brand: #6b3420; --role-owner: #8a4630; } html.mode-dark { --paper: #17131f; --paper-2: #1f1a2b; --paper-3: #261f35; --ink: #e9e1f0; --ink-soft: #a897bb; --line: #382f4d; --line-2: #453a5e; --rata: #7c6bb0; --rata-2: #9686c8; --outfit: #5c7fb8; --outfit-2: #7898cc; --clay: #cf9a5c; --clay-2: #dcb27c; --danger: #c4685a; --brand: #e2a878; --role-owner: #a96b4b; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: scroll; } body { margin: 0; font-family: var(--body); font-size: 18px; line-height: 1.55; color: var(--ink); text-transform: lowercase; background-color: var(--paper); /* textura de papel subtil */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); -webkit-font-smoothing: antialiased; } .hidden { display: none !important; } .muted { color: var(--ink-soft); font-size: 0.92rem; font-style: italic; } .error { color: var(--danger); min-height: 1.2em; font-style: italic; } /* Sits directly on the busy cover photo (not a paper/card surface like #auth-error), so plain italic text was too easy to miss - a solid chip gives it real contrast regardless of what's behind it. */ #login-error:not(:empty) { color: #7a2416; font-style: normal; font-weight: 700; text-align: center; } .view { max-width: 620px; margin: 0 auto; padding: 22px 20px 48px; } /* ------------------------------- Tipografia ------------------------------ */ h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em; margin: 0; } /* --------------------------------- Login --------------------------------- */ /* Fundo provisorio ate termos a arte final em alta resolucao. */ #login { position: relative; overflow: hidden; max-width: none; width: 100vw; min-height: 100vh; min-height: 100dvh; margin-left: calc(50% - 50vw); padding: 0; /* Fallback for any sliver the cover photo doesn't reach (aspect-ratio edge cases, overscroll) - same warm brown as the key-entry field's own background (--paper-3 below), so an overscroll bounce reads as part of the same design instead of a stray white/dark flash. The min-height above is what actually stops body (still theme-rata pre-login) from ever showing below a shorter #login box. */ background-color: #241d17; --ink: #ece5d5; --ink-soft: #c7bca3; --line: rgba(236, 229, 213, 0.35); --paper-3: #241d17; } /* Zoom controlado (a partir do topo) em vez de recortar o ficheiro de origem - mantem a letra "twenty-nine divine" sempre visivel. */ #login::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(180deg, rgba(12, 16, 8, 0.30) 0%, rgba(12, 16, 8, 0.12) 38%, rgba(8, 11, 6, 0.62) 100%), url('/images/login-bg.png'); background-size: cover; background-position: top center; background-repeat: no-repeat; transform: scale(1.22); transform-origin: top center; } #login .cover { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; padding: 22px 20px 48px; min-height: 88vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; gap: 6px; } .cover .tagline { font-family: var(--serif); font-size: 1.35rem; font-style: italic; color: var(--ink-soft); margin-bottom: 26px; } #login-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; } /* -------------------------------- Inputs --------------------------------- */ input, textarea, select { width: 100%; padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-3); color: var(--ink); font-family: var(--body); font-size: 1rem; text-transform: lowercase; transition: border-color 0.2s; } input[type="password"] { text-transform: none; } ::placeholder { text-transform: lowercase; font-weight: 600; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--rata); } textarea { resize: vertical; } /* Show/hide toggle inside a password input (e.g. the login access key). */ .password-field { position: relative; } .password-field input { padding-right: 46px; } button.password-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--ink-soft); } button.password-toggle:hover { background: transparent; color: var(--ink); } .password-toggle svg { width: 19px; height: 19px; } .password-toggle .icon-eye-off { display: none; } .password-toggle.visible .icon-eye { display: none; } .password-toggle.visible .icon-eye-off { display: block; } select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a96b4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; } select:hover { border-color: var(--clay); } label.field { display: block; margin: 4px 0 2px; font-size: 0.72rem; font-weight: 600; text-transform: lowercase; letter-spacing: 0.16em; color: var(--ink-soft); } /* -------------------------------- Botoes --------------------------------- */ button, .btn { cursor: pointer; border: 1px solid var(--ink); border-radius: var(--radius); padding: 12px 20px; font-family: var(--body); font-size: 0.78rem; font-weight: 600; text-transform: lowercase; letter-spacing: 0.16em; background: var(--ink); color: var(--paper-3); transition: background 0.2s, color 0.2s, opacity 0.2s; text-decoration: none; display: inline-block; text-align: center; } button:hover, .btn:hover { background: transparent; color: var(--ink); } button:disabled { opacity: 0.45; cursor: default; } button.ghost, a.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 7px 12px; font-size: 0.66rem; } button.ghost:hover, a.ghost:hover { border-color: var(--ink); background: transparent; } button.small { padding: 7px 12px; font-size: 0.64rem; letter-spacing: 0.14em; } button.danger { border-color: var(--danger); background: transparent; color: var(--danger); } button.danger:hover { background: var(--danger); color: var(--paper-3); } /* -------------------------------- Topbar --------------------------------- */ .topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 18px; gap: 12px; } /* align-items: center, not baseline - the cursive brand-name font (line-height: 0.8) doesn't have predictable baseline metrics, so baseline-aligning it against the small role badge could put the badge noticeably off relative to the logo depending on font-load timing/ rendering engine. Center alignment doesn't depend on font metrics at all, so it's consistent everywhere. */ .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } /* Uses --brand (declared on alongside mode-light/mode-dark, not var(--clay)): the logo keeps one identity color regardless of active tab or night theme, but still adapts to light/dark mode so it never washes out against either background. The fallback matches the old fixed color, for the brief moment before applyMode() runs. */ .brand .brand-name { font-family: var(--script); font-weight: 700; font-size: 2.2rem; line-height: 0.8; white-space: nowrap; color: var(--brand, #a96b4b); } .brand .badge, .user-row-name .badge { font-family: var(--body); text-transform: lowercase; letter-spacing: 0.16em; font-size: 0.64rem; font-weight: 700; border: 1.5px solid var(--clay); color: var(--clay); padding: 3px 9px; border-radius: 999px; } /* Role badges: owner / admin / user, each its own color. */ /* Hardcoded, not var(--clay/--outfit/--rata): each role keeps exactly one color everywhere it appears, regardless of night theme or light/dark mode. */ .badge.role-owner { border-color: var(--role-owner, #a96b4b); color: var(--role-owner, #a96b4b); } .badge.role-admin { border-color: #59662f; color: #59662f; } .badge.role-user { border-color: #3f5b54; color: #3f5b54; } /* margin-left: auto keeps this pinned to the right even when it wraps onto its own line below the brand (a lone flex item ignores justify-content). */ .topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } /* Botoes de icone (tema, notificacoes, idioma, gerir, sair) na topbar - todos a mesma caixa quadrada. Auto-suficiente (nao depende de .ghost) para nao entrar em conflito de especificidade com "button.ghost". */ button.icon-btn, a.icon-btn { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); border: 1px solid var(--line); font-size: 1.05rem; line-height: 1; } button.icon-btn:hover, a.icon-btn:hover { border-color: var(--ink); background: transparent; } .icon-btn svg { width: 19px; height: 19px; display: block; } .lang-toggle { font-size: 0.7rem; letter-spacing: 0.06em; font-weight: 600; text-transform: none; } /* Theme toggle: shows the icon for what you'll switch TO. Light (default) shows the moon (switch to dark); dark mode shows the sun (switch to light). */ #theme-toggle .icon-sun { display: none; } html.mode-dark #theme-toggle .icon-sun { display: block; } html.mode-dark #theme-toggle .icon-moon { display: none; } /* Notification bell: when ON, it looks like every other icon button (conformity - nothing to act on). When OFF, a soft accent tint draws the eye, signaling "click to turn this on" instead of the reverse. Uses --clay (the app's warm brand accent, same as the logo/badges), not --rata - --rata is minty green in light mode, an odd, unrelated color for this button. */ #notif-btn:not(.active):not(.hidden) { background: color-mix(in srgb, var(--clay) 18%, transparent); } /* --------------------------------- Tabs ---------------------------------- */ .tabs { display: flex; gap: 26px; margin-bottom: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; } /* In light mode, --line is pale enough to blend into the paper background on its own. In dark mode it reads as a bright, hard "limit" line across the whole tab row - blend it toward the background so it stays a subtle separator instead of a stark bar. */ html.mode-dark .tabs { border-bottom-color: color-mix(in srgb, var(--line) 45%, var(--paper)); } .tab { flex: 0 0 auto; background: transparent; border: none; color: var(--ink-soft); padding: 4px 0 12px; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; text-transform: lowercase; letter-spacing: 0.01em; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { background: transparent; color: var(--ink); } .tab.active { color: var(--ink); border-bottom-color: var(--clay); } /* A Rata shares --clay with every other tab, making its active underline indistinguishable from Wall's right next to it. Rats are grey - give it its own neutral grey accent instead. */ [data-tab="rata"].active, [data-atab="rata"].active { border-bottom-color: #83807a; } /* Sub-tabs: smaller, nested tab groups inside a card (e.g. Furnished/Swamp under "Votos da noite" in admin). The page-level .tab component above is sized for primary navigation and reads as oversized/heavy at this secondary, in-card scale. */ #votes-night-tabs { gap: 16px; margin-bottom: 14px; } #votes-night-tabs .tab { font-size: 0.95rem; padding: 2px 0 8px; border-bottom-width: 1.5px; } /* --------------------------------- Cards --------------------------------- */ .card { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; } /* In light mode, --line-2 is pale enough to blend into the card's own --paper-2 background. In dark mode it reads as a bright, hard outline - most visible at the rounded corners, where a small radius zoomed in looks like a stray bracket rather than a subtle edge. Blend it toward the card's own background, same treatment as the tab-row border. */ html.mode-dark .card { border-color: color-mix(in srgb, var(--line-2) 22%, var(--paper-2)); } .card h2 { font-size: 1.15rem; font-style: italic; font-weight: 500; margin-bottom: 6px; } .hero-line { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.5rem; color: var(--ink-soft); margin: 2px 0 20px; line-height: 1.3; } /* --ink-soft is deliberately muted for de-emphasized text, but that reads as too faint for this subtitle-sized line in light mode specifically (dark mode's --ink-soft already has enough contrast on its own). Use the full --ink there instead. */ html.mode-light .hero-line { color: var(--ink); } /* bloco de destaque (consequencia atual) */ .highlight { background: var(--paper-3); border-left: 2px solid var(--rata); padding: 18px 20px; font-family: var(--serif); font-size: 1.5rem; line-height: 1.35; color: var(--ink); } #tab-outfit .highlight { border-left-color: var(--outfit); } /* ----------------------------- Rata / Outfit ----------------------------- */ .vote-option { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: var(--paper-3); color: var(--ink); border: 1px solid var(--line); padding: 15px 18px; margin-bottom: 10px; font-family: var(--serif); font-size: 1.25rem; text-transform: lowercase; letter-spacing: 0; } .vote-option::after { content: '\2192'; opacity: 0; transition: opacity 0.2s; color: var(--outfit); } .vote-option:hover { background: var(--paper-3); color: var(--ink); border-color: var(--outfit); } .vote-option:hover::after { opacity: 1; } /* --------------------------------- Tier ---------------------------------- */ .tier { list-style: none; padding: 0; margin: 0; counter-reset: rank; } .tier li { counter-increment: rank; display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); } .tier li:last-child { border-bottom: none; } .tier li::before { content: counter(rank, decimal-leading-zero); font-family: var(--serif); font-size: 1.5rem; color: var(--clay); min-width: 40px; } .tier .name { flex: 1; font-family: var(--serif); font-size: 1.35rem; } .tier .votes { font-family: var(--body); font-size: 0.72rem; text-transform: lowercase; letter-spacing: 0.16em; color: var(--ink-soft); } .tier li:nth-child(-n+3) .name { font-weight: 600; } /* Podium reveal in progress (before "all"): the row already states its own rank in the name ("3rd place · X"), so the auto counter would be wrong for a partial list - hide it and just bold every revealed row. */ .tier.podium-reveal li::before { content: none; } .tier.podium-reveal .name { font-weight: 600; } .tier li:first-child::before { color: var(--outfit); } /* --------------------------------- Admin --------------------------------- */ .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .row-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; } table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-top: 8px; } th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } th { font-family: var(--body); text-transform: lowercase; letter-spacing: 0.12em; font-size: 0.66rem; color: var(--ink-soft); font-weight: 600; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Lista de utilizadores em cartoes (evita colunas espremidas em mobile) */ .user-list { margin-top: 8px; } .user-row { padding: 12px 0; border-bottom: 1px solid var(--line); } .user-row:last-child { border-bottom: none; } .user-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .user-row-name { font-weight: 600; } .user-row-name .badge { margin-left: 6px; } .user-row-token { font-family: 'SFMono-Regular', ui-monospace, monospace; font-size: 0.8rem; color: var(--rata); word-break: break-all; text-align: right; cursor: pointer; } .user-row-token.censored { letter-spacing: 2px; } .user-row .row-actions { justify-content: flex-end; flex-wrap: wrap; white-space: normal; margin-top: 8px; } .inline { display: flex; gap: 8px; margin-bottom: 8px; } .inline input { margin-bottom: 0; } .inline button { white-space: nowrap; } .help { font-size: 0.95rem; font-style: italic; color: var(--ink-soft); margin: 0 0 14px; } /* ------------------------------ Responsivo ------------------------------- */ @media (max-width: 480px) { body { font-size: 17px; } .brand .brand-name { font-size: 1.9rem; } .tabs { gap: 20px; } .tab { font-size: 1.2rem; } .card { padding: 18px; } .highlight, .hero-line { font-size: 1.3rem; } } /* ===================== Transicao suave ao trocar de tema ================ */ body { transition: background-color 0.45s ease; } .card, .vote-option, .highlight, .outfit-banner, .topbar, .tabs { transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; } /* ================= Controlo de votacao (painel admin) =================== */ .voting-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .voting-controls button { width: 100%; } .voting-state { font-family: var(--serif); font-style: italic; font-size: 1.2rem; } .voting-state.is-open { color: var(--rata); } .voting-state.is-closed { color: var(--danger); } /* ============ Best Outfit: tema comutavel (furnished / swamp) =========== */ /* O tema e aplicado a (pagina TODA) apenas quando o Best Outfit esta ativo. As restantes divisoes ficam limpas (sem classe de tema). */ /* --- FURNISHED: interior domestico, veludo teal, papel de parede quente --- */ body.theme-furnished { --paper: #d6ded7; --paper-2: #e2e8e1; --paper-3: #ebefe9; --ink: #22302b; --ink-soft: #566a62; --line: #a9bab2; --line-2: #c0cec6; --clay: #305049; --clay-2: #43655c; --rata: #305049; --ot: #305049; --ot-2: #43655c; --ot-tint: #e2e8e1; --ot-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%23e2e8e1'/%3E%3Cg fill='none' stroke='%23305049' stroke-opacity='0.30'%3E%3Cpath d='M15 0V60M45 0V60'/%3E%3C/g%3E%3Cg fill='%23305049' fill-opacity='0.22'%3E%3Cpath d='M30 10 L38 22 L30 34 L22 22 Z'/%3E%3Ccircle cx='0' cy='45' r='3'/%3E%3Ccircle cx='60' cy='45' r='3'/%3E%3C/g%3E%3C/svg%3E"); background-color: #c7d2ca; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160'%3E%3Crect width='120' height='160' fill='%23cdd8d0'/%3E%3Cg stroke='%23305049' stroke-opacity='0.16' fill='none'%3E%3Cpath d='M20 0V160M60 0V160M100 0V160'/%3E%3C/g%3E%3Cg fill='%23305049' fill-opacity='0.13'%3E%3Cpath d='M60 30 L74 55 L60 80 L46 55 Z'/%3E%3Cpath d='M60 45 L67 55 L60 65 L53 55 Z' fill='%23cdd8d0'/%3E%3Ccircle cx='20' cy='120' r='3'/%3E%3Ccircle cx='100' cy='120' r='3'/%3E%3Cpath d='M0 130 L10 145 L0 160 M120 130 L110 145 L120 160'/%3E%3C/g%3E%3C/svg%3E"); } /* --- SWAMP: pantano, musgo/oliva, aguas paradas, juncos e nenufares --- */ body.theme-swamp { --paper: #ccd4b3; --paper-2: #d7dcc0; --paper-3: #e0e4cd; --ink: #242a17; --ink-soft: #55613a; --line: #aab291; --line-2: #bfc7a4; --clay: #55632c; --clay-2: #6c7b3c; --rata: #55632c; --ot: #55632c; --ot-2: #6c7b3c; --ot-tint: #d7dcc0; --ot-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Crect width='80' height='60' fill='%23d7dcc0'/%3E%3Cg fill='none' stroke='%2355632c' stroke-opacity='0.26'%3E%3Cpath d='M0 45 Q20 38 40 45 T80 45'/%3E%3Cpath d='M0 54 Q20 47 40 54 T80 54'/%3E%3C/g%3E%3Cg stroke='%2355632c' stroke-opacity='0.42' stroke-width='1.4'%3E%3Cpath d='M18 42 V18'/%3E%3Cpath d='M24 42 V24'/%3E%3Cpath d='M58 42 V20'/%3E%3Cpath d='M64 42 V26'/%3E%3C/g%3E%3C/svg%3E"); background-color: #bfc8a3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Crect width='140' height='140' fill='%23c5cea8'/%3E%3Cg fill='none' stroke='%2355632c' stroke-opacity='0.15'%3E%3Cpath d='M0 30 Q35 22 70 30 T140 30'/%3E%3Cpath d='M0 44 Q35 36 70 44 T140 44'/%3E%3Cpath d='M0 110 Q35 102 70 110 T140 110'/%3E%3C/g%3E%3Cg stroke='%2355632c' stroke-opacity='0.28' stroke-width='1.6' fill='none'%3E%3Cpath d='M24 92 V58'/%3E%3Cpath d='M31 92 V66'/%3E%3Cpath d='M104 96 V62'/%3E%3Cpath d='M111 96 V70'/%3E%3C/g%3E%3Cg fill='%2355632c' fill-opacity='0.12'%3E%3Cellipse cx='62' cy='84' rx='16' ry='6'/%3E%3Cellipse cx='116' cy='120' rx='13' ry='5'/%3E%3C/g%3E%3C/svg%3E"); } /* Flourishes tematicos aplicados a pagina inteira quando ha tema */ body.theme-furnished .hero-line, body.theme-swamp .hero-line { color: var(--ot-2); } body.theme-furnished .card, body.theme-swamp .card { box-shadow: 0 12px 34px rgba(34, 48, 43, 0.12); } body.theme-swamp .card { box-shadow: 0 12px 34px rgba(36, 42, 23, 0.14); } /* ================= A Rata: sinistro, mesma simplicidade dos temas ======== */ /* Aplicado a apenas quando o separador A Rata esta ativo (ver applyNight() em app.js), mesmo mecanismo dos temas Furnished/Swamp. */ body.theme-rata { --paper: #1c1712; --paper-2: #241d17; --paper-3: #2c231b; --ink: #e8ddd0; --ink-soft: #a8998a; --line: #453a2e; --line-2: #55483a; --clay: #a8452f; --clay-2: #c25a3f; --rata: #a8452f; background-color: #16120e; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%2318130f'/%3E%3Cg fill='%23a8452f' fill-opacity='0.12'%3E%3Cg transform='translate(28,176) rotate(-20)'%3E%3Cellipse rx='9' ry='7'/%3E%3Cellipse cx='-8' cy='-12' rx='3.6' ry='4.6'/%3E%3Cellipse cy='-15' rx='3.6' ry='5'/%3E%3Cellipse cx='8' cy='-12' rx='3.6' ry='4.6'/%3E%3C/g%3E%3Cg transform='translate(58,148) rotate(-10)'%3E%3Cellipse rx='9' ry='7'/%3E%3Cellipse cx='-8' cy='-12' rx='3.6' ry='4.6'/%3E%3Cellipse cy='-15' rx='3.6' ry='5'/%3E%3Cellipse cx='8' cy='-12' rx='3.6' ry='4.6'/%3E%3C/g%3E%3Cg transform='translate(96,168) rotate(15)'%3E%3Cellipse rx='9' ry='7'/%3E%3Cellipse cx='-8' cy='-12' rx='3.6' ry='4.6'/%3E%3Cellipse cy='-15' rx='3.6' ry='5'/%3E%3Cellipse cx='8' cy='-12' rx='3.6' ry='4.6'/%3E%3C/g%3E%3Cg transform='translate(150,60) rotate(160)'%3E%3Cellipse rx='11' ry='8.5'/%3E%3Cellipse cx='-9' cy='-14' rx='4.2' ry='5.4'/%3E%3Cellipse cy='-17' rx='4.2' ry='6'/%3E%3Cellipse cx='9' cy='-14' rx='4.2' ry='5.4'/%3E%3C/g%3E%3Cg transform='translate(172,30) rotate(150)'%3E%3Cellipse rx='9' ry='7'/%3E%3Cellipse cx='-8' cy='-12' rx='3.6' ry='4.6'/%3E%3Cellipse cy='-15' rx='3.6' ry='5'/%3E%3Cellipse cx='8' cy='-12' rx='3.6' ry='4.6'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%23a8452f' stroke-opacity='0.10' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M160 110 Q145 95 155 80 Q165 68 152 62'/%3E%3C/g%3E%3C/svg%3E"); } body.theme-rata .hero-line { color: var(--clay-2); } body.theme-rata .card { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); } /* --- Variantes noturnas para modo escuro/claro: cada tema ganha um par --- */ html.mode-dark body.theme-furnished { --paper: #182420; --paper-2: #1f2e29; --paper-3: #253630; --ink: #dce8e2; --ink-soft: #8fa89d; --line: #35493f; --line-2: #43594d; --clay: #4a8f76; --clay-2: #5fae91; --rata: #4a8f76; --ot: #4a8f76; --ot-2: #5fae91; --ot-tint: #1f2e29; --ot-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='60' height='60' fill='%231f2e29'/%3E%3Cg fill='none' stroke='%234a8f76' stroke-opacity='0.30'%3E%3Cpath d='M15 0V60M45 0V60'/%3E%3C/g%3E%3Cg fill='%234a8f76' fill-opacity='0.24'%3E%3Cpath d='M30 10 L38 22 L30 34 L22 22 Z'/%3E%3Ccircle cx='0' cy='45' r='3'/%3E%3Ccircle cx='60' cy='45' r='3'/%3E%3C/g%3E%3C/svg%3E"); background-color: #121c18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='160'%3E%3Crect width='120' height='160' fill='%23172420'/%3E%3Cg stroke='%234a8f76' stroke-opacity='0.20' fill='none'%3E%3Cpath d='M20 0V160M60 0V160M100 0V160'/%3E%3C/g%3E%3Cg fill='%234a8f76' fill-opacity='0.16'%3E%3Cpath d='M60 30 L74 55 L60 80 L46 55 Z'/%3E%3Cpath d='M60 45 L67 55 L60 65 L53 55 Z' fill='%23172420'/%3E%3Ccircle cx='20' cy='120' r='3'/%3E%3Ccircle cx='100' cy='120' r='3'/%3E%3Cpath d='M0 130 L10 145 L0 160 M120 130 L110 145 L120 160'/%3E%3C/g%3E%3C/svg%3E"); } html.mode-dark body.theme-swamp { --paper: #1a2010; --paper-2: #212912; --paper-3: #283114; --ink: #e2e6d0; --ink-soft: #9aa580; --line: #3a4420; --line-2: #47542a; --clay: #8a9c52; --clay-2: #a3b768; --rata: #8a9c52; --ot: #8a9c52; --ot-2: #a3b768; --ot-tint: #212912; --ot-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Crect width='80' height='60' fill='%23212912'/%3E%3Cg fill='none' stroke='%238a9c52' stroke-opacity='0.30'%3E%3Cpath d='M0 45 Q20 38 40 45 T80 45'/%3E%3Cpath d='M0 54 Q20 47 40 54 T80 54'/%3E%3C/g%3E%3Cg stroke='%238a9c52' stroke-opacity='0.46' stroke-width='1.4'%3E%3Cpath d='M18 42 V18'/%3E%3Cpath d='M24 42 V24'/%3E%3Cpath d='M58 42 V20'/%3E%3Cpath d='M64 42 V26'/%3E%3C/g%3E%3C/svg%3E"); background-color: #141a0c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Crect width='140' height='140' fill='%23192010'/%3E%3Cg fill='none' stroke='%238a9c52' stroke-opacity='0.18'%3E%3Cpath d='M0 30 Q35 22 70 30 T140 30'/%3E%3Cpath d='M0 44 Q35 36 70 44 T140 44'/%3E%3Cpath d='M0 110 Q35 102 70 110 T140 110'/%3E%3C/g%3E%3Cg stroke='%238a9c52' stroke-opacity='0.32' stroke-width='1.6' fill='none'%3E%3Cpath d='M24 92 V58'/%3E%3Cpath d='M31 92 V66'/%3E%3Cpath d='M104 96 V62'/%3E%3Cpath d='M111 96 V70'/%3E%3C/g%3E%3Cg fill='%238a9c52' fill-opacity='0.16'%3E%3Cellipse cx='62' cy='84' rx='16' ry='6'/%3E%3Cellipse cx='116' cy='120' rx='13' ry='5'/%3E%3C/g%3E%3C/svg%3E"); } html.mode-dark body.theme-furnished .card, html.mode-dark body.theme-swamp .card { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); } html.mode-light body.theme-rata { --paper: #f3e6e0; --paper-2: #f7ece7; --paper-3: #faf1ed; --ink: #4a2b1f; --ink-soft: #8a6656; --line: #e0c3b6; --line-2: #ead6cc; --clay: #8a3f2c; --clay-2: #6e3122; --rata: #8a3f2c; background-color: #f6ebe6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' fill='%23f7ece6'/%3E%3Cg fill='%238a3f2c' fill-opacity='0.10'%3E%3Cg transform='translate(28,176) rotate(-20)'%3E%3Cellipse rx='9' ry='7'/%3E%3Cellipse cx='-8' cy='-12' rx='3.6' ry='4.6'/%3E%3Cellipse cy='-15' rx='3.6' ry='5'/%3E%3Cellipse cx='8' cy='-12' rx='3.6' ry='4.6'/%3E%3C/g%3E%3Cg transform='translate(58,148) rotate(-10)'%3E%3Cellipse rx='9' ry='7'/%3E%3Cellipse cx='-8' cy='-12' rx='3.6' ry='4.6'/%3E%3Cellipse cy='-15' rx='3.6' ry='5'/%3E%3Cellipse cx='8' cy='-12' rx='3.6' ry='4.6'/%3E%3C/g%3E%3Cg transform='translate(96,168) rotate(15)'%3E%3Cellipse rx='9' ry='7'/%3E%3Cellipse cx='-8' cy='-12' rx='3.6' ry='4.6'/%3E%3Cellipse cy='-15' rx='3.6' ry='5'/%3E%3Cellipse cx='8' cy='-12' rx='3.6' ry='4.6'/%3E%3C/g%3E%3Cg transform='translate(150,60) rotate(160)'%3E%3Cellipse rx='11' ry='8.5'/%3E%3Cellipse cx='-9' cy='-14' rx='4.2' ry='5.4'/%3E%3Cellipse cy='-17' rx='4.2' ry='6'/%3E%3Cellipse cx='9' cy='-14' rx='4.2' ry='5.4'/%3E%3C/g%3E%3Cg transform='translate(172,30) rotate(150)'%3E%3Cellipse rx='9' ry='7'/%3E%3Cellipse cx='-8' cy='-12' rx='3.6' ry='4.6'/%3E%3Cellipse cy='-15' rx='3.6' ry='5'/%3E%3Cellipse cx='8' cy='-12' rx='3.6' ry='4.6'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%238a3f2c' stroke-opacity='0.12' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M160 110 Q145 95 155 80 Q165 68 152 62'/%3E%3C/g%3E%3C/svg%3E"); } html.mode-light body.theme-rata .card { box-shadow: 0 12px 34px rgba(138, 63, 44, 0.16); } /* ================ Mural: parede de tijolo, mesma logica dos outros ======= */ /* Aplicado a apenas quando o separador Mural esta ativo (ver applyNight() em app.js), mesmo mecanismo dos temas Furnished/Swamp/Rata. */ body.theme-mural { --paper: #cf9b7c; --paper-2: #d9ac8f; --paper-3: #e3bfa5; --ink: #3d2216; --ink-soft: #7a5138; --line: #a9744f; --line-2: #bd8964; --clay: #8f3a26; --clay-2: #a84631; --rata: #8f3a26; background-color: #c48f6d; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' fill='%23c48f6d'/%3E%3Cg stroke='%238f3a26' stroke-opacity='0.30' stroke-width='2.5' fill='none'%3E%3Cpath d='M0 0H120M0 20H120M0 40H120'/%3E%3Cpath d='M0 0V20M60 0V20M120 0V20'/%3E%3Cpath d='M30 20V40M90 20V40'/%3E%3C/g%3E%3C/svg%3E"); } body.theme-mural .hero-line { color: var(--clay-2); } body.theme-mural .card { box-shadow: 0 12px 34px rgba(61, 34, 22, 0.2); } html.mode-dark body.theme-mural { --paper: #241512; --paper-2: #2e1c17; --paper-3: #38241d; --ink: #e8d3c4; --ink-soft: #a8836e; --line: #4a2e22; --line-2: #5c3b2a; --clay: #c2603f; --clay-2: #d97a52; --rata: #c2603f; background-color: #180e0c; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' fill='%231c110e'/%3E%3Cg stroke='%23c2603f' stroke-opacity='0.22' stroke-width='2.5' fill='none'%3E%3Cpath d='M0 0H120M0 20H120M0 40H120'/%3E%3Cpath d='M0 0V20M60 0V20M120 0V20'/%3E%3Cpath d='M30 20V40M90 20V40'/%3E%3C/g%3E%3C/svg%3E"); } html.mode-dark body.theme-mural .card { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); } /* Banner com motivo tematico + interruptor de tema */ .outfit-banner { position: relative; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--ot-tint); } .theme-motif { height: 84px; background-image: var(--ot-motif); background-repeat: repeat; border-bottom: 1px solid var(--line-2); } .outfit-banner-body { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; } .outfit-theme-eyebrow { margin: 0; font-family: var(--body); text-transform: lowercase; letter-spacing: 0.22em; font-size: 0.66rem; color: var(--ot); } .outfit-theme-eyebrow #outfit-theme-name { font-weight: 600; } .theme-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-3); } .theme-switch button { display: flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--ink-soft); padding: 8px 14px; font-size: 0.64rem; letter-spacing: 0.12em; border-radius: 0; } .theme-switch button:hover { background: transparent; color: var(--ink); } .theme-switch button.active { background: var(--ot); color: var(--paper-3); } .theme-switch button.active:hover { background: var(--ot); color: var(--paper-3); } /* Elementos do Best Outfit seguem o acento do tema ativo */ #tab-outfit .card { background: var(--ot-tint); } #tab-outfit .highlight { border-left-color: var(--ot); } #tab-outfit .vote-option::after { color: var(--ot); } #tab-outfit .vote-option:hover { border-color: var(--ot); } #tab-outfit .tier li:first-child::before { color: var(--ot); } #tab-outfit input:focus, #tab-outfit textarea:focus { border-color: var(--ot); } /* ----------------------------- Tutorial overlay --------------------------- */ .tutorial-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(20, 16, 12, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .tutorial-card { width: 100%; max-width: 360px; padding: 26px 24px; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .tutorial-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; } .tutorial-dots .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--line); } .tutorial-dots .dot.active { background: var(--clay); } .tutorial-card h2 { font-size: 1.4rem; margin-bottom: 10px; } .tutorial-card p { color: var(--ink-soft); line-height: 1.5; margin: 0 0 20px; } .tutorial-actions { display: flex; align-items: center; gap: 10px; } .tutorial-actions button { flex: 1; } /* .ghost (skip) has smaller padding/font than the primary button by design elsewhere in the app - override it here so skip/next actually match, not just share a flex-basis. */ .tutorial-actions button.ghost { padding: 12px 20px; font-size: 0.78rem; } /* ----------------------------------- Chat ---------------------------------- */ .chat-messages { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; } .chat-msg { padding: 8px 0; border-bottom: 1px solid var(--line); } .chat-msg:last-child { border-bottom: none; } .chat-msg-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; } .chat-msg-author { font-family: var(--body); font-size: 0.66rem; text-transform: lowercase; letter-spacing: 0.14em; font-weight: 600; color: var(--clay); } .chat-msg-time { font-family: var(--body); font-size: 0.62rem; color: var(--ink-soft); white-space: nowrap; } .chat-msg-text { font-family: var(--serif); font-size: 1.05rem; word-wrap: break-word; } .chat-empty { color: var(--ink-soft); font-style: italic; font-weight: 600; font-size: 0.92rem; } html.mode-light .chat-empty { color: var(--ink); }