/* ============================================================ CLAREIA · LIVING CAMPUS v18 — Praças, Meu Campus, Conexões, mensageiro e Sala de Controle. Carregar DEPOIS de clareia-theme-v18.css. Cobre as classes do branch codex/living-campus-gate-20260824 (views.plaza / campus / duos / bridges / admin) + primitivas novas do mensageiro premium (prancha 8b) e da moderação (8c). ============================================================ */ /* ------------------------------------------------------------ Utilitários de vida (usar com parcimônia; nunca na Praça de estudo) ------------------------------------------------------------ */ .cl-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cl-mint-strong); animation: cl-pulse 1.8s ease-in-out infinite; } @keyframes cl-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } /* Faixa de atividade ao vivo (ticker do campus)
…×2
*/ .cl-marquee { overflow: hidden; background: rgba(0, 0, 0, .22); padding: 11px 0; } .cl-marquee-track { display: flex; gap: 40px; width: max-content; animation: cl-marquee 26s linear infinite; font: 400 14px/1 var(--cl-sans); color: rgba(223, 244, 237, .78); white-space: nowrap; } .cl-marquee-track strong { color: var(--cl-mint-strong); } @keyframes cl-marquee { to { transform: translateX(-50%); } } /* Sticker rotacionado com sombra dura */ .cl-sticker { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid var(--cl-line-strong); border-radius: 14px; background: var(--cl-yellow); box-shadow: var(--cl-pop); font: 700 13px/1 var(--cl-sans); color: var(--cl-petrol); transform: rotate(-2deg); } .cl-sticker--coral { background: var(--cl-coral); color: var(--cl-paper); transform: rotate(2deg); } .cl-sticker--paper { background: var(--cl-paper); transform: rotate(1.4deg); } /* ------------------------------------------------------------ Praças — quatro portas de entrada com propósito (view "plaza") ------------------------------------------------------------ */ .plaza-hub { background: var(--cl-forest-deep); color: var(--cl-paper); border: none; } .plaza-hub .hello, .plaza-hub h2 { color: var(--cl-paper); } .plaza-hub .plaza-copy p { color: rgba(223, 244, 237, .78); } .plaza-hub .eyebrow { color: var(--cl-mint-strong); } .plaza-arrival { margin: clamp(32px, 5vw, 58px) 0 24px; padding: clamp(24px, 3.5vw, 42px); border: 1px solid rgba(143, 224, 206, .2); border-radius: 28px; background: #0b3634; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); } .plaza-arrival > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .72fr); gap: 8px 34px; align-items: end; margin-bottom: 22px; } .plaza-arrival > header .eyebrow { grid-column: 1 / -1; } .plaza-arrival > header h3 { margin: 0; color: var(--cl-paper); font: 400 clamp(30px, 3.3vw, 48px)/1 var(--cl-serif); letter-spacing: -.035em; } .plaza-arrival > header p { margin: 0; color: rgba(223, 244, 237, .68); font-size: 13px; line-height: 1.55; } .app-studio .plaza-hub .plaza-arrival > header h3 { color: #fbfaf6; } .app-studio .plaza-hub .plaza-arrival > header p { color: #d8e9e5; } .plaza-destinations { grid-template-columns: repeat(4, minmax(0, 1fr)); border: none; background: transparent; gap: 16px; overflow: visible; } .plaza-destinations .plaza-destination { appearance: none; display: grid; grid-template-rows: auto auto minmax(54px, 1fr) auto; gap: 10px; min-width: 0; min-height: 238px; border: 2px solid var(--cl-line-strong); border-radius: 20px; padding: 22px; text-align: left; color: inherit; transition: transform 200ms var(--cl-ease), box-shadow 200ms var(--cl-ease); cursor: pointer; } .plaza-destinations .plaza-destination strong { color: inherit; font: 400 25px/1.05 var(--cl-serif); } .plaza-destinations .plaza-destination > span:not(.plaza-number) { color: currentColor; opacity: .74; font-size: 12px; line-height: 1.5; } .plaza-destinations .plaza-destination small { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 13px; border-top: 1px solid currentColor; color: currentColor; font-size: 10px; font-weight: 800; letter-spacing: .02em; } .plaza-destinations .plaza-destination small i { font-style: normal; font-size: 17px; transition: transform 180ms var(--cl-ease); } .plaza-destinations .plaza-destination:hover small i { transform: translateX(4px); } .plaza-destinations .plaza-destination:first-child:hover small i { transform: translateY(3px); } .plaza-destinations .plaza-destination:focus-visible { outline: 4px solid var(--cl-mint-strong); outline-offset: 4px; } .plaza-destinations .plaza-destination:active { transform: translateY(1px) scale(.99); } /* 01 · Praça de estudo — sempre quieta: sem pulso, sem sombra saltando */ .plaza-destinations .plaza-destination:nth-child(1) { background: #f7f5ef; color: var(--cl-ink); } .plaza-destinations .plaza-destination:nth-child(1):hover { transform: translateY(-4px); } /* 02 · Praça do campus — acesa */ .plaza-destinations .plaza-destination:nth-child(2) { background: var(--cl-yellow); color: var(--cl-petrol); box-shadow: 6px 6px 0 var(--cl-line-strong); } .plaza-destinations .plaza-destination:nth-child(2):hover { transform: translate(-3px, -4px); box-shadow: 9px 10px 0 var(--cl-line-strong); } /* 03 · Pessoas — energia social sob consentimento */ .plaza-destinations .plaza-destination:nth-child(3) { background: #ad382b; color: #fffdf8; box-shadow: 6px 6px 0 var(--cl-line-strong); } .plaza-destinations .plaza-destination:nth-child(3):hover { transform: translate(-3px, -4px) rotate(-.5deg); box-shadow: 9px 10px 0 var(--cl-line-strong); } /* 04 · Pontes — abertura nacional, sem exposição pessoal */ .plaza-destinations .plaza-destination:nth-child(4) { background: var(--cl-mint-strong); color: var(--cl-petrol); box-shadow: 6px 6px 0 var(--cl-line-strong); } .plaza-destinations .plaza-destination:nth-child(4):hover { transform: translate(-3px, -4px); box-shadow: 9px 10px 0 var(--cl-line-strong); } .plaza-destinations .plaza-number { font: 400 34px/1 var(--cl-serif); opacity: .7; } .plaza-care { border: 1px solid rgba(143, 224, 206, .25); border-radius: 14px; background: rgba(143, 224, 206, .1); color: rgba(223, 244, 237, .82); } .plaza-care strong { color: var(--cl-paper); } .plaza-study-marker { scroll-margin-top: 30px; margin: clamp(34px, 5vw, 58px) 0 8px; padding: 0 4px; outline: none; } .plaza-study-marker h3 { max-width: 760px; margin: 8px 0 9px; color: var(--cl-paper); font: 400 clamp(28px, 3vw, 42px)/1.04 var(--cl-serif); letter-spacing: -.035em; } .plaza-study-marker p { max-width: 660px; margin: 0; color: rgba(223, 244, 237, .7); font-size: 13px; line-height: 1.55; } .plaza-study-marker:focus-visible { border-radius: 12px; outline: 3px solid var(--cl-mint-strong); outline-offset: 8px; } [data-theme="dark"] .plaza-destinations .plaza-destination:nth-child(1) { color: #123c3a; } [data-theme="dark"] .plaza-destinations .plaza-destination:nth-child(3) { color: #fffdf8; } @media (max-width: 1120px) { .plaza-destinations { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .plaza-arrival { padding: 24px 18px; border-radius: 22px; } .plaza-arrival > header { grid-template-columns: 1fr; align-items: start; margin-bottom: 18px; } .plaza-arrival > header .eyebrow { grid-column: auto; } .plaza-destinations { grid-template-columns: 1fr; } .plaza-destinations .plaza-destination { grid-template-rows: auto; min-height: 0; padding: 19px 20px; } } @media (prefers-reduced-motion: reduce) { .plaza-destinations .plaza-destination, .plaza-destinations .plaza-destination small i { transition: none; } .plaza-destinations .plaza-destination:hover { transform: none; } } /* Reações finitas (sem placar de popularidade além do próprio botão) */ .plaza-react { min-height: 34px; padding: 7px 12px; border: 1.5px solid rgba(23, 59, 77, .22); border-radius: 999px; background: #fff; font: 700 12px/1 var(--cl-sans); color: var(--cl-ink); transition: transform 140ms var(--cl-ease), background 140ms ease, border-color 140ms ease; } .plaza-react:hover { transform: scale(1.06); } .plaza-react[aria-pressed="true"] { border-color: var(--cl-teal); background: var(--cl-mint); color: var(--cl-teal-deep); } /* ------------------------------------------------------------ Meu Campus / Pontes — presença e chegada ------------------------------------------------------------ */ .campus-hero, .bridge-hero { border: 2px solid var(--cl-line-strong); border-radius: var(--cl-radius-xl); overflow: hidden; } .campus-hero .hello, .bridge-hero .hello { font-family: var(--cl-serif); } .campus-privacy-note { font: 400 12px/1.5 var(--cl-sans); color: var(--cl-muted); } /* Pilha de presença: MRC+44 */ .cl-presence { display: inline-flex; align-items: center; } .cl-presence i, .cl-presence b { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--cl-sans); font-style: normal; border: 2px solid var(--cl-forest-deep); background: var(--cl-mint); color: var(--cl-teal-dark); } .cl-presence i + i, .cl-presence b { margin-left: -12px; } .cl-presence i:nth-child(2n) { background: #fde4de; color: var(--cl-coral-ink); } .cl-presence i:nth-child(3n) { background: #fdf0cd; color: #8a6410; } .cl-presence b { background: var(--cl-petrol); color: var(--cl-mint-strong); font-size: 10px; } /* ------------------------------------------------------------ Conexões — mensageiro premium (prancha 8b) ------------------------------------------------------------ */ .connections-hero .social-safety-line span { padding: 8px 13px; border-radius: 999px; border: 1.5px solid rgba(223, 244, 237, .4); background: rgba(251, 249, 246, .08); font: 700 12px/1 var(--cl-sans); color: var(--cl-mint); } /* Layout: