/* * Watchtower activation surfaces — chip, popover, edge-pulse, ceremony * modal accents. Class names + tokens match the locked design * (FOP Portal/styles/wt.css §Activation theming + watchtower.css). * * The shell-wide tone shift (data-activation on or ) is * already wired in watchtower.css via :root[data-activation="..."]. * This file adds the chip/popover/edge-pulse/tab-flash primitives the * activation slice needs. */ /* ---- Activation chip (top strip) ---- */ .wt-act-chip { display: inline-grid; grid-template-columns: auto auto auto; gap: 10px; align-items: baseline; height: 32px; padding: 0 14px; border: 1px solid var(--l-2); background: var(--c-1); color: var(--t-1); font-family: var(--mono); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); } .wt-act-chip:hover { border-color: var(--act-color, var(--acc)); } .wt-act-chip .lvl { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--act-color, var(--t-0)); } .wt-act-chip .by { font-size: 10px; letter-spacing: 0.10em; color: var(--t-2); } .wt-act-chip .since { font-size: 10px; letter-spacing: 0.10em; color: var(--t-3); } .wt-act-chip[data-lvl="GREEN"] { --act-color: var(--act-green); } .wt-act-chip[data-lvl="YELLOW"] { --act-color: var(--act-yellow); background: color-mix(in oklab, var(--act-yellow) 8%, var(--c-1)); } .wt-act-chip[data-lvl="ORANGE"] { --act-color: var(--act-orange); background: color-mix(in oklab, var(--act-orange) 12%, var(--c-1)); border-color: var(--act-orange); } .wt-act-chip[data-lvl="RED"] { --act-color: var(--act-red); background: color-mix(in oklab, var(--act-red) 18%, var(--c-1)); border-color: var(--act-red); animation: wt-act-pulse 1.2s ease-in-out infinite; } @keyframes wt-act-pulse { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--act-red) 40%, transparent); } } /* ---- Level-picker popover ---- */ .wt-act-pop { position: absolute; top: 38px; left: 0; z-index: 80; width: 320px; background: var(--bg-1); border: 1px solid var(--l-2); box-shadow: 0 12px 32px rgba(0,0,0,0.6); font-family: var(--mono); } .wt-act-pop .head { padding: 10px 12px; border-bottom: 1px solid var(--l-2); } .wt-act-pop .head .k { font-size: 9.5px; letter-spacing: 0.18em; color: var(--t-3); } .wt-act-pop .head .v { font-size: 12px; color: var(--t-0); margin-top: 4px; } .wt-act-pop .head .why { font-size: 11px; color: var(--t-2); margin-top: 4px; line-height: 1.4; font-family: var(--sans); } .wt-act-pop .opts { display: flex; flex-direction: column; } .wt-act-pop .opt { display: grid; grid-template-columns: 16px 60px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--l-1); color: var(--t-1); font-family: var(--mono); cursor: pointer; text-align: left; } .wt-act-pop .opt:hover:not(:disabled) { background: var(--bg-2); } .wt-act-pop .opt:disabled { opacity: 0.5; cursor: not-allowed; } .wt-act-pop .opt .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--act-color, var(--t-3)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--act-color, var(--t-3)) 40%, transparent); } .wt-act-pop .opt[data-lvl="GREEN"] { --act-color: var(--act-green); } .wt-act-pop .opt[data-lvl="YELLOW"] { --act-color: var(--act-yellow); } .wt-act-pop .opt[data-lvl="ORANGE"] { --act-color: var(--act-orange); } .wt-act-pop .opt[data-lvl="RED"] { --act-color: var(--act-red); } .wt-act-pop .opt .k { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--act-color); } .wt-act-pop .opt .t { font-size: 11px; color: var(--t-2); font-family: var(--sans); } .wt-act-pop .opt .cur { font-size: 9.5px; letter-spacing: 0.14em; color: var(--t-3); } .wt-act-pop .foot { padding: 8px 12px; font-size: 10px; color: var(--t-3); letter-spacing: 0.10em; border-top: 1px solid var(--l-2); } .wt-act-pop .foot kbd { display: inline-block; padding: 1px 5px; margin: 0 2px; font-family: var(--mono); font-size: 9.5px; border: 1px solid var(--l-3); border-radius: 2px; color: var(--t-1); } /* ---- Edge pulse — RED activation OR T3 unacked. * Per AUDIO_VISUAL_SPEC.md: position fixed, inset 0, 8px red border, * 1.1s ease-in-out pulse, mix-blend-mode: screen, pointer-events:none. * Toggled by data-edge-pulse="1" on . */ .wt-edge-pulse { position: fixed; inset: 0; z-index: 9998; border: 8px solid transparent; box-shadow: inset 0 0 0 8px var(--crit); animation: wt-edge-pulse 1.1s ease-in-out infinite; mix-blend-mode: screen; pointer-events: none; } @keyframes wt-edge-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .wt-edge-pulse { animation: none; opacity: 1; } } /* ---- Activation tokens shorthand ---- */ :root { --act-green: #1f8f4a; --act-yellow: #d4b72c; --act-orange: #ef7d28; --act-red: #d81e1e; } /* ---- Activation theming on document root. * The base watchtower.css already shifts --act when data-activation * changes. Here we add subtle activation-aware accents to the shell * top strip + foundation surface so the shift is visible at-a-glance * even before any incident card renders. */ html[data-activation="ORANGE"] body { box-shadow: inset 0 4px 0 var(--act-orange); } html[data-activation="RED"] body { box-shadow: inset 0 4px 0 var(--act-red); } /* Ceremony modal — additional class hooks the body uses. */ .act-cer .field { font-family: var(--mono); }