/* Keyframes for the spinner *//*
* Outfit CSS fallback — for non-Meteor contexts (static sites, browser extension,
* email templates, OBS overlays). Import this file; stamp the data attributes.
*
* Usage:
*
* or
* Juno
*
* For dynamic hue/saturation, inject:
*
* and the selectors below will pick them up.
*
* CSS variable contract (VESTA-SPEC-063 §5):
* --entity-hue Level 0 — hue in degrees
* --entity-saturation Level 0 — saturation %
* --entity-font-heading Level 1 — heading font family
* --entity-font-body Level 1 — body font family
* --entity-font-mono Level 1 — mono font family
* --entity-easing Level 3 — CSS easing function
* --entity-duration Level 3 — transition duration (ms value)
*
* Dark Passenger migration note (SPEC-063 §5):
* --shadow-hue, --shadow-saturation, --shadow-brightness alias to --entity-*
* during transition. New code uses --entity-* only.
*/
@-webkit-keyframes iron-router-progress-before {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes iron-router-progress-before {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes iron-router-progress-before {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes iron-router-progress-before {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes iron-router-progress-before {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Main progress bar */
#iron-router-progress {
display: block;
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background-color: rgba(160, 160, 160, 0.6);
box-shadow: 0 0 5px rgba(160, 160, 160, 0.6);
opacity: 1;
z-index: 10000;
}
/* CSS-only spinner */
/* The spinner only shows after 0.5 seconds of load time */
#iron-router-progress.spinner:before {
content: "";
display: block;
position: fixed;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
background-color: transparent;
border: 3px solid rgba(160, 160, 160, 0.6);
border-radius: 100px;
border-right-color: transparent !important;
opacity: 0;
z-index: 10000;
pointer-events: none;
transition: 0.5s opacity;
transition-delay: 0.5s;
}
/* Loading state transitions */
#iron-router-progress.loading {
transition: 1s width, 1s opacity;
transition-delay: 0s, 1s;
}
#iron-router-progress.loading.spinner:before {
opacity: 1;
-webkit-animation: iron-router-progress-before 0.5s linear infinite;
-moz-animation: iron-router-progress-before 0.5s linear infinite;
-o-animation: iron-router-progress-before 0.5s linear infinite;
-ms-animation: iron-router-progress-before 0.5s linear infinite;
animation: iron-router-progress-before 0.5s linear infinite;
}
/* Done state - fade out */
#iron-router-progress.done {
opacity: 0;
}
#iron-router-progress.done.spinner:before {
opacity: 0;
}
:root {
--entity-hue: 0;
--entity-saturation: 0%;
--entity-font-heading: inherit;
--entity-font-body: inherit;
--entity-font-mono: monospace;
--entity-easing: ease;
--entity-duration: 200ms;
/* Dark Passenger legacy aliases */
--shadow-hue: var(--entity-hue);
--shadow-saturation: var(--entity-saturation);
}
/* ---------------------------------------------------------------------------
* Entity chip — inline name badge with entity color
* Name
* (color injected via --entity-hue / --entity-saturation at :root or parent)
* --------------------------------------------------------------------------- */
.entity-chip {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 3px;
font-size: 0.85em;
font-weight: 500;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 45%);
color: #fff;
white-space: nowrap;
transition: opacity var(--entity-duration) var(--entity-easing);
}
.entity-chip:hover {
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
* Entity card — L2 capsule: name + color + role one-liner
* ...
* --------------------------------------------------------------------------- */
.entity-card {
display: flex;
flex-direction: column;
gap: 4px;
border-radius: 6px;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 11%);
color: #fff;
font-family: var(--entity-font-body);
}
.entity-card__name {
font-family: var(--entity-font-heading);
font-weight: 700;
font-size: 1em;
color: #fff;
}
.entity-card__role {
font-size: 0.8em;
color: hsl(var(--entity-hue), var(--entity-saturation), 90%);
}
.entity-card__greeting {
font-style: italic;
font-size: 0.8em;
color: hsl(var(--entity-hue), var(--entity-saturation), 90%);
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
* Outfit swatch — color-only block for palettes/style guides
*
* --------------------------------------------------------------------------- */
.outfit-swatch {
width: 40px;
height: 40px;
border-radius: 4px;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 50%);
display: inline-block;
}
/* ---------------------------------------------------------------------------
* Entity avatar wrapper — clips to circle, consistent sizing
*
* --------------------------------------------------------------------------- */
.entity-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
border: 1px solid hsla(var(--entity-hue), var(--entity-saturation), 10%, 0.5);
display: inline-flex;
align-items: center;
justify-content: center;
background-color: hsla(var(--entity-hue), var(--entity-saturation), 30%, 0.25);
}
.entity-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------------------------------------------------------------------------
* Outfit transition — applies entity motion values to an element
* ...
* --------------------------------------------------------------------------- */
.outfit-transition {
transition: all var(--entity-duration) var(--entity-easing);
}.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.truncate-start {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
text-align: left;
}.application-containment {
z-index: 369;
position: fixed;
inset:0;
overflow: hidden;
isolation: isolate;
}
/* center container - panels slide over this */
.content-containment {
position: relative;
z-index: 1;
height: 100%;
overflow: auto;
overflow-x: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
padding-top: 88px;
}
.content-containment.left-open {
transform: translateX(var(--panel-width, 280px));
}
.content-containment.right-open {
transform: translateX(calc(-1 * var(--panel-width, 280px)));
}
.content-containment.both-open {
transform: translateX(calc(var(--panel-width, 280px) - var(--panel-width, 280px)));
}
/* panel containers */
.panel-containment {
position: absolute;
top: 0;
bottom: 0;
width: var(--panel-width, 280px);
min-width: var(--panel-min-width, 200px);
max-width: var(--panel-max-width, 85vw);
z-index: 20;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
width 0.1s ease;
will-change: transform;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background: var(--panel-bg, #fff);
box-shadow: var(--panel-shadow, 2px 0 10px rgba(0,0,0,0.15));
}
.panel-handle {
position: absolute;
top: 0;
bottom: 0;
width: 8px;
cursor: col-resize;
z-index: 25;
}
.panel-handle:hover {
background: rgba(0, 0, 0, 0.05);
}
.panel-handle:active {
background: rgba(0, 0, 0, 0.1);
}
/* LEFT PANELS */
.panel-containment.left {
left: 0;
transform: translateX(-100%);
}
.panel-handle.left {
right: 0;
}
.panel-containment.left.open {
transform: translateX(0);
}
/* RIGHT PANELS */
.panel-containment.right {
right: 0;
transform: translateX(100%);
}
.panel-handle.right {
left: 0;
}
.panel-containment.right.open {
transform: translateX(0);
}
/* Panel header */
.panel-header {
position: sticky;
top: 0;
z-index: 5;
background: inherit;
padding: var(--panel-padding, 16px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.panel-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s ease;
}
.panel-close:hover {
background: rgba(0, 0, 0, 0.1);
}
.panel-close:focus-visible {
outline: 2px solid var(--focus-color, #0066cc);
outline-offset: 2px;
}
/* History navigation */
.panel-nav {
display: flex;
gap: 4px;
}
.panel-nav button {
width: 28px;
height: 28px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s, background 0.2s;
}
.panel-nav button:hover:not(:disabled) {
opacity: 1;
background: rgba(0, 0, 0, 0.1);
}
.panel-nav button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* back-to-top link */
.back-to-top {
position: absolute;
bottom: 16px;
right: 16px;
display: none;
padding: 8px 12px;
font-size: var(--font-sm);
background: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 16px;
text-decoration: none;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
}
.back-to-top.show {
display: flex;
align-items: center;
gap: 4px;
opacity: 0.8;
}
.back-to-top:hover {
opacity: 1;
transform: translateY(-2px);
}
/* Mobile optimizations */
@media (max-width: 768px) {
:root {
--panel-width: 85vw;
--panel-min-width: 280px;
--panel-max-width: 85vw;
}
.panel-handle {
display: none;
}
.back-to-top {
bottom: 24px;
right: 24px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.content-containment,
.panel-containment,
.back-to-top {
transition: none;
}
}
/* Focus management for accessibility */
.panel-containment:focus-within {
z-index: 22;
}
/* Print styles */
@media print {
.panel-containment,
.back-to-top {
display: none !important;
}
.content-containment {
transform: none !important;
}
}
.spirit-row-model { font-size: 12px; }
.spirit-row-harness { font-size: 12px; }
.spirit-row-runtime { font-size: 12px; }body{
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
background-color: #f8f7f3;
font-family: 'Lato', sans-serif;
}
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.topBanner {
color: white;
height: 34px;
font-size: 12px;
text-align: right;
font-weight: 400;
padding-top: 10px;
padding-right: 45px;
text-transform: uppercase;
background-color: #90191C;
}
.toolbar{
display: flex;
align-items: center;
justify-content: space-between;
min-height: 53px;
background-color: rgba(0, 0, 0, 0.90);
}
.footer{
background-color: rgba(0, 0, 0, 0.10);
margin-top: 75px;
border-top: 1px solid rgba(0, 0, 0, 0.20);
}
.logo{
margin-top: -72px;
}
#iron-router-progress.spinner:before {
border-color : white;
}
#iron-router-progress {
background-color : white;
box-shadow : 0 0 5px white;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
a {
color: #90191C;
}
.whitewashed{
position: fixed;
left: 0;
top: 0;
opacity: 0.1;
width: 3500px;
z-index: -12;
}