:root {
--bg: #050508;
--bg-soft: #0a0a12;
--panel: rgba(255, 255, 255, 0.035);
--panel-border: rgba(255, 255, 255, 0.08);
--cyan: #23f2ff;
--magenta: #ff2bd6;
--purple: #a855ff;
--green: #39ffb0;
--amber: #ffb23e;
--turquoise: #2dd4bf;
--red: #ff3b4a;
--text: #eef0f8;
--text-dim: #8b8ba3;
--font-display: 'Orbitron', 'Segoe UI', sans-serif;
--font-body: 'Rajdhani', 'Segoe UI', sans-serif;
--font-mono: 'Share Tech Mono', 'Consolas', 'Courier New', monospace;
}
* {
box-sizing: border-box;
}
/* Quiet scrollbars: a thin, translucent light thumb on a transparent track, a little brighter on hover. Chrome/Edge/Safari use the
::-webkit-scrollbar rules; Firefox (no such selector) gets the standard properties. Setting both would make Chrome ignore the
webkit rules, hence the @supports split. */
@supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
/* The transparent border + padding-box clip make the visible thumb 4px wide with room around it. */
background: rgba(255, 255, 255, 0.16);
background-clip: padding-box;
border: 3px solid transparent;
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
background-clip: padding-box;
}
::-webkit-scrollbar-corner {
background: transparent;
}
}
@supports not selector(::-webkit-scrollbar) {
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
}
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
min-height: 100vh;
}
body {
background: var(--bg);
overflow-x: hidden;
}
/* Ambient background layer */
/* Sized explicitly to the largest viewport (lvh) instead of inset: 0, and kept on its own compositing layer, so the
ambient background covers the whole iPhone screen while scrolling (Safari could leave the plain black page showing). */
.bg-fx {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100lvh;
z-index: 0;
overflow: hidden;
pointer-events: none;
transform: translateZ(0);
}
.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
will-change: transform;
}
.bg-orb-cyan {
width: 520px;
height: 520px;
top: -160px;
right: -140px;
background: var(--cyan);
opacity: 0.28;
animation: orbFloat1 24s ease-in-out infinite;
}
.bg-orb-magenta {
width: 460px;
height: 460px;
bottom: -160px;
left: -140px;
background: var(--magenta);
opacity: 0.22;
animation: orbFloat2 30s ease-in-out infinite;
}
.bg-orb-purple {
width: 420px;
height: 420px;
top: 38%;
left: 50%;
background: var(--purple);
opacity: 0.16;
animation: orbFloat3 36s ease-in-out infinite;
}
@keyframes orbFloat1 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-60px, 70px); }
}
@keyframes orbFloat2 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(70px, -60px); }
}
@keyframes orbFloat3 {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.18); }
}
/* Perspective neon floor grid */
.bg-grid {
position: absolute;
left: -50%;
right: -50%;
bottom: 0;
height: 55vh;
background-image:
repeating-linear-gradient(to right, rgba(35, 242, 255, 0.22) 0, rgba(35, 242, 255, 0.22) 1px, transparent 1px, transparent 64px),
repeating-linear-gradient(to top, rgba(255, 43, 214, 0.22) 0, rgba(255, 43, 214, 0.22) 1px, transparent 1px, transparent 64px);
transform: perspective(380px) rotateX(62deg);
transform-origin: bottom center;
-webkit-mask-image: linear-gradient(to top, black 0%, transparent 70%);
mask-image: linear-gradient(to top, black 0%, transparent 70%);
opacity: 0.55;
animation: gridScroll 10s linear infinite;
}
@keyframes gridScroll {
from { background-position: 0 0, 0 0; }
to { background-position: 0 0, 0 64px; }
}
/* Film-grain texture */
.bg-noise {
position: absolute;
inset: 0;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.app-shell {
position: relative;
z-index: 1;
min-height: 100vh;
}
.dashboard {
max-width: 640px;
margin: 0 auto;
padding: 28px 20px 48px;
position: relative;
}
/* Topbar */
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 36px;
}
.brand {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.brand-mark {
font-family: var(--font-display);
font-weight: 900;
font-size: 26px;
letter-spacing: 4px;
color: var(--text);
text-shadow: 0 0 6px var(--cyan), 0 0 22px rgba(35, 242, 255, 0.6);
}
.brand-sub {
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dim);
margin-top: 2px;
}
.user-pill {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 38px;
height: 38px;
padding: 0 9px;
border-radius: 10px;
background: var(--panel);
border: 1px solid var(--panel-border);
font-size: 13px;
color: var(--text-dim);
}
/* User icon inside the navbar profile pill; its colour is the account status: green = approved,
amber = waiting for a Keyholder, red = email not verified (grey while the status is still loading). */
.user-icon {
flex: none;
width: 20px;
height: 20px;
color: var(--text-dim);
}
.user-icon-ok {
color: var(--green);
filter: drop-shadow(0 0 4px var(--green));
}
.user-icon-pending {
color: var(--amber);
filter: drop-shadow(0 0 4px var(--amber));
}
.user-icon-danger {
color: var(--red);
filter: drop-shadow(0 0 4px var(--red));
}
/* The member's photo fills the whole button (a square with the same corners as the sign-out button); the status text, when there is one, sits after it. */
.user-pill-photo {
padding: 0 12px 0 0;
}
.user-pill-photo:not(:has(.user-status-text)) {
padding: 0;
}
.user-photo {
flex: none;
display: block;
width: 36px;
height: 36px;
border-radius: 9px;
object-fit: cover;
}
/* The mood smiley hangs on the top right corner of the button. */
.user-mood {
position: absolute;
top: -8px;
right: -8px;
font-size: 16px;
line-height: 1;
pointer-events: none;
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6));
}
.user-pill-pending {
border-color: rgba(255, 178, 62, 0.4);
}
.user-pill-danger {
border-color: rgba(255, 59, 74, 0.45);
}
.user-status-text {
font-size: 12.5px;
font-weight: 600;
color: var(--amber);
white-space: nowrap;
}
.user-status-text-danger {
color: var(--red);
}
/* Coin balance in the navbar, opens /wallet. Amber like a coin; the pulsing dot = a period's coins wait to be claimed. */
.coin-pill {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 178, 62, 0.06);
border: 1px solid rgba(255, 178, 62, 0.35);
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--amber);
text-decoration: none;
transition: box-shadow 0.15s ease, background 0.15s ease;
}
.coin-pill:hover {
background: rgba(255, 178, 62, 0.12);
box-shadow: 0 0 12px rgba(255, 178, 62, 0.3);
}
.coin-icon {
flex: none;
width: 18px;
height: 18px;
filter: drop-shadow(0 0 4px rgba(255, 178, 62, 0.6));
}
.coin-dot {
position: absolute;
top: -3px;
right: -3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 8px var(--green);
animation: coin-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes coin-dot-pulse {
50% { transform: scale(0.7); opacity: 0.6; }
}
/* Hero / ring */
.hero {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 44px;
}
.hero-empty {
text-align: center;
padding: 50px 20px 44px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 20px;
}
.pending-panel {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 50px 26px 44px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 20px;
}
.pending-icon {
width: 44px;
height: 44px;
color: var(--amber);
filter: drop-shadow(0 0 6px var(--amber));
margin-bottom: 16px;
}
.pending-panel-danger {
border-color: rgba(255, 59, 74, 0.35);
box-shadow: 0 0 24px rgba(255, 59, 74, 0.08);
}
.pending-icon-danger {
color: var(--red);
filter: drop-shadow(0 0 6px var(--red));
}
.pending-icon svg {
width: 100%;
height: 100%;
}
.empty-icon {
width: 44px;
height: 44px;
color: var(--text-dim);
margin-bottom: 16px;
}
.empty-icon svg {
width: 100%;
height: 100%;
}
.empty-text {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 0 0 6px;
}
.empty-hint {
font-size: 13px;
color: var(--text-dim);
margin: 0;
}
.ring-wrap {
position: relative;
width: 240px;
height: 240px;
}
.ring-wrap-ready {
cursor: pointer;
}
/* LockRing.razor: the arc is a path laid out from 12 o'clock on the server, so no rotation here. */
.ring {
width: 100%;
height: 100%;
overflow: visible;
}
.ring-track {
fill: none;
stroke: rgba(255, 255, 255, 0.06);
stroke-width: 10;
}
/* The glow is an SVG filter in LockRing.razor (iPhone Safari ignores CSS filter on SVG shapes). */
.ring-progress {
fill: none;
stroke: var(--magenta);
stroke-width: 10;
stroke-linecap: round;
}
/* While UnlocksAt changes the server redraws the arc frame by frame; only the colour is eased. */
.ring-progress-animating {
transition: stroke 0.3s ease;
}
/* On long sessions a change moves the arc by less than a pixel, so the ring also flashes in the change's colour
(with the stronger glow, LockRing's Pulse). */
.ring-pulse-up {
stroke: var(--magenta);
}
.ring-pulse-down {
stroke: var(--green);
}
/* Change notice above the clock: neon arrow carrying the amount added/removed. */
.delta-badge {
position: absolute;
left: 50%;
top: 32px;
width: 104px;
height: 60px;
pointer-events: none;
z-index: 2;
opacity: 0;
animation: deltaRise 2.4s ease-out forwards;
}
.delta-up {
color: var(--magenta);
}
.delta-down {
color: var(--green);
animation-name: deltaFall;
}
.delta-arrow {
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 14px currentColor);
}
.delta-arrow polygon {
fill: currentColor;
fill-opacity: 0.22;
stroke: currentColor;
stroke-width: 3;
stroke-linejoin: round;
}
.delta-down .delta-arrow {
transform: scaleY(-1);
}
.delta-text {
position: absolute;
left: 0;
right: 0;
font-family: var(--font-mono);
font-weight: 700;
font-size: 12px;
line-height: 16px;
text-align: center;
color: #fff;
text-shadow: 0 0 4px currentColor, 0 0 10px currentColor;
white-space: nowrap;
}
.delta-up .delta-text {
top: 33px;
}
.delta-down .delta-text {
top: 11px;
}
@keyframes deltaRise {
0% { opacity: 0; transform: translate(-50%, 16px) scale(0.85); }
14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
70% { opacity: 1; transform: translate(-50%, -6px) scale(1); }
100% { opacity: 0; transform: translate(-50%, -18px) scale(1); }
}
@keyframes deltaFall {
0% { opacity: 0; transform: translate(-50%, -16px) scale(0.85); }
14% { opacity: 1; transform: translate(-50%, 0) scale(1); }
70% { opacity: 1; transform: translate(-50%, 6px) scale(1); }
100% { opacity: 0; transform: translate(-50%, 18px) scale(1); }
}
.ring-icon-dim {
opacity: 0.08;
}
.ring-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.ring-icon {
width: 48px;
height: 48px;
color: var(--cyan);
margin-top: -10px;
margin-bottom: 8px;
/* Resting glow matches the pulse's first/last keyframe, so the gap between one pulse ending and the next tick re-keying the icon doesn't go dark. */
filter: drop-shadow(0 0 6px var(--cyan));
animation: lockPulse 1s ease-in-out 1;
}
.ring-icon svg {
width: 100%;
height: 100%;
}
/* The digits change in the same render that restarts this animation, so the icon snaps up right as the clock ticks and eases back down over the rest of the second. */
@keyframes lockPulse {
0% {
transform: scale(1);
filter: drop-shadow(0 0 6px var(--cyan));
animation-timing-function: ease-out;
}
18% {
transform: scale(1.14);
filter: drop-shadow(0 0 14px var(--cyan));
animation-timing-function: ease-in-out;
}
100% {
transform: scale(1);
filter: drop-shadow(0 0 6px var(--cyan));
}
}
/* The countdown (RingCountdown.razor): days : hrs : min : sec, a small label under each number, like chaster.app. */
.ring-time {
display: flex;
align-items: flex-start;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text);
}
.ring-seg {
display: flex;
flex-direction: column;
align-items: center;
}
.ring-num {
font-size: 32px;
line-height: 1;
text-shadow: 0 0 8px rgba(238, 240, 248, 0.5);
}
.ring-colon {
padding: 0 1px;
font-size: 26px;
line-height: 1.15;
color: var(--text-dim);
opacity: 0.6;
}
.ring-unit {
margin-top: 5px;
font-family: var(--font-body);
font-weight: 600;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dim);
}
/* Four segments have to fit inside the ring too (a three-digit day count included). */
.ring-time-days .ring-num {
font-size: 26px;
}
.ring-time-days .ring-colon {
font-size: 22px;
}
.ring-label {
margin-top: 14px;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffd76a;
text-shadow: 0 0 6px rgba(255, 215, 106, 0.5);
}
.ring-label-ready {
color: var(--amber);
text-shadow: 0 0 6px rgba(255, 178, 62, 0.5);
}
.ring-tap-hint {
margin-top: 4px;
font-size: 10px;
letter-spacing: 1px;
color: var(--text-dim);
opacity: 0.8;
}
/* Same script face as the www_Glorija header logo. */
@font-face {
font-family: 'FlemishScript';
src: url('/fonts/FlemishScript-BT.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
.keyholder-name {
--glow: var(--magenta);
margin-top: 20px;
font-family: 'FlemishScript', cursive;
font-size: 40px;
font-weight: 400;
line-height: 1.1;
color: #ffd9f6;
text-shadow:
0 0 5px var(--glow),
0 0 10px var(--glow),
0 0 20px var(--glow),
0 0 40px var(--glow),
0 0 70px var(--glow);
white-space: nowrap;
}
.keyholder-name + .status-badge {
margin-top: 8px;
}
.status-badge {
margin-top: 22px;
padding: 6px 20px;
border-radius: 999px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
color: var(--cyan);
border: 1px solid rgba(35, 242, 255, 0.5);
text-shadow: 0 0 8px var(--cyan);
box-shadow: 0 0 10px rgba(35, 242, 255, 0.35), inset 0 0 10px rgba(35, 242, 255, 0.12);
}
.status-badge-ready {
color: var(--amber);
border-color: rgba(255, 178, 62, 0.5);
text-shadow: 0 0 8px var(--amber);
box-shadow: 0 0 10px rgba(255, 178, 62, 0.35), inset 0 0 10px rgba(255, 178, 62, 0.12);
}
/* Mood smiley row under the keyholder badge (Components/Layout/MoodPicker.razor): six round buttons, the chosen one lit. */
.mood-picker {
margin-top: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.mood-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.mood-btn {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--panel-border);
background: var(--panel);
font-size: 22px;
line-height: 1;
cursor: pointer;
filter: grayscale(0.55);
opacity: 0.75;
transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.mood-btn:hover:not(:disabled) {
opacity: 1;
filter: none;
}
.mood-btn:active:not(:disabled) {
transform: scale(0.92);
}
.mood-btn:disabled {
cursor: default;
}
.mood-btn.mood-on {
opacity: 1;
filter: none;
border-color: rgba(255, 43, 214, 0.65);
box-shadow: 0 0 12px rgba(255, 43, 214, 0.45), inset 0 0 10px rgba(255, 43, 214, 0.15);
transform: scale(1.08);
}
.mood-note {
font-size: 13px;
color: var(--text-dim);
}
/* Chat card under the keyholder badge: the exclusive-site photo fills one wide button, a dark fade carries the caption. */
.chat-block {
width: 100%;
margin-top: 30px;
}
.chat-btn {
position: relative;
display: flex;
align-items: flex-end;
/* Caption bottom-right: the photo's neon "Chat with me!" sits bottom-left once the photo is moved down. */
justify-content: flex-end;
height: 190px;
padding: 16px 18px;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
/* No border: the photo would stop at the padding box and leave a thin unpainted ring, most visible along the bottom edge.
The rim is an outline drawn over the photo instead. The photo sits a little low in the frame so the head is not cut off. */
border: 0;
outline: 1px solid rgba(255, 255, 255, 0.16);
outline-offset: -1px;
background:
linear-gradient(to top, rgba(8, 8, 14, 0.85), rgba(8, 8, 14, 0) 55%),
url('/images/chat-x.jpg') center 8% / cover no-repeat;
box-shadow: 0 0 20px rgba(255, 43, 214, 0.3);
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.chat-btn:hover {
transform: scale(1.01);
box-shadow: 0 0 30px rgba(255, 43, 214, 0.55);
}
.chat-btn-arrow {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
padding: 7px;
box-sizing: border-box;
border-radius: 50%;
background: rgba(8, 8, 14, 0.6);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
}
.chat-btn-caption {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.9);
}
/* Stats */
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
margin-top: 28px;
}
/* Same cards, now below the history instead of under the badge. */
.stat-row-bottom {
margin-top: 16px;
margin-bottom: 30px;
}
.stat-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 14px;
padding: 14px 10px;
text-align: center;
}
.stat-value {
font-size: 14px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-label {
margin-top: 4px;
font-size: 10.5px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-dim);
}
/* History */
.history {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 18px;
padding: 22px 22px 10px;
}
.history-title {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dim);
margin: 0 0 16px;
}
.timeline {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.timeline::before {
content: "";
position: absolute;
left: 11px;
top: 6px;
bottom: 6px;
width: 1px;
background: linear-gradient(to bottom, var(--panel-border), transparent);
}
.timeline-item {
display: flex;
gap: 16px;
padding-bottom: 20px;
position: relative;
}
.timeline-dot {
flex: none;
width: 9px;
height: 9px;
margin: 5px 7px 0;
border-radius: 50%;
background: var(--text-dim);
z-index: 1;
}
/* Neon arrow in the counter's change-notice style, slimmer for the list; sits in the same 23px column as the dot, centred on the 1px timeline line at x=11.5. */
.timeline-arrow {
flex: none;
width: 23px;
height: 26px;
margin-top: -2px;
overflow: visible;
z-index: 1;
filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 8px currentColor);
}
.timeline-arrow polygon {
fill: currentColor;
fill-opacity: 0.22;
stroke: currentColor;
stroke-width: 1.5;
stroke-linejoin: round;
}
/* Padlock for lock/unlock events; 20px + 1.5px margins = the same 23px column as the dot and arrow. */
.timeline-lock {
flex: none;
width: 20px;
height: 20px;
margin: 1px 1.5px 0;
z-index: 1;
filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 7px currentColor);
}
.event-started .timeline-lock {
color: var(--purple);
}
.event-opened .timeline-lock {
color: var(--turquoise);
}
.event-deserted .timeline-lock {
color: var(--red);
}
.event-added .timeline-arrow {
color: var(--magenta);
}
.event-removed .timeline-arrow {
color: var(--green);
transform: scaleY(-1);
}
.event-frozen .timeline-dot {
background: var(--purple);
box-shadow: 0 0 6px var(--purple), 0 0 12px var(--purple);
}
.event-started .timeline-dot {
background: var(--purple);
box-shadow: 0 0 6px var(--purple), 0 0 12px var(--purple);
}
.event-added .timeline-dot {
background: var(--magenta);
box-shadow: 0 0 6px var(--magenta), 0 0 12px var(--magenta);
}
.event-removed .timeline-dot {
background: var(--green);
box-shadow: 0 0 6px var(--green), 0 0 12px var(--green);
}
.event-opened .timeline-dot {
background: var(--turquoise);
box-shadow: 0 0 6px var(--turquoise), 0 0 12px var(--turquoise);
}
.event-deserted .timeline-dot {
background: var(--red);
box-shadow: 0 0 6px var(--red), 0 0 12px var(--red);
}
.history-coins {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--amber);
vertical-align: bottom;
}
.history-coin {
flex: none;
width: 1.15em;
height: 1.15em;
filter: drop-shadow(0 0 4px rgba(255, 178, 62, 0.6));
}
.event-played .timeline-dot {
background: var(--cyan);
box-shadow: 0 0 6px var(--cyan), 0 0 12px var(--cyan);
}
.event-released-early .timeline-dot {
background: var(--amber);
box-shadow: 0 0 6px var(--amber), 0 0 12px var(--amber);
}
.event-verified .timeline-dot {
background: var(--amber);
box-shadow: 0 0 6px var(--amber), 0 0 12px var(--amber);
}
.event-locked .timeline-dot {
background: var(--cyan);
box-shadow: 0 0 6px var(--cyan), 0 0 12px var(--cyan);
}
.timeline-text {
font-size: 14.5px;
color: var(--text);
}
.timeline-text strong {
color: var(--text);
font-weight: 700;
}
.timeline-time {
margin-top: 2px;
font-size: 11.5px;
color: var(--text-dim);
}
/* Emergency */
.emergency-wrap {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.emergency-btn {
padding: 12px 30px;
border-radius: 999px;
background: rgba(255, 178, 62, 0.06);
border: 1px solid rgba(255, 178, 62, 0.4);
color: var(--amber);
font-family: var(--font-body);
font-weight: 700;
letter-spacing: 1px;
font-size: 13.5px;
cursor: pointer;
box-shadow: 0 0 12px rgba(255, 178, 62, 0.2);
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.emergency-btn:hover {
box-shadow: 0 0 18px rgba(255, 178, 62, 0.45);
transform: scale(1.03);
}
.emergency-hint {
margin: 10px 0 0;
font-size: 11.5px;
color: var(--text-dim);
text-align: center;
}
/* Phones keep the three cards in one row (user, 2026-10-08), just tighter. */
@media (max-width: 420px) {
.stat-row {
gap: 6px;
}
.stat-card {
padding: 12px 4px;
}
.stat-value {
font-size: 12.5px;
}
.stat-label {
font-size: 9px;
letter-spacing: 0.6px;
}
}
/* Icon test page */
.icons-page {
max-width: 820px;
margin: 0 auto;
padding: 28px 20px 60px;
position: relative;
}
.icons-header {
display: flex;
flex-direction: column;
margin-bottom: 32px;
}
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
}
.icon-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 16px;
padding: 22px 14px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--icon-color, var(--cyan));
}
.icon-box {
width: 40px;
height: 40px;
margin-bottom: 14px;
filter: drop-shadow(0 0 4px var(--icon-color, var(--cyan))) drop-shadow(0 0 12px var(--icon-color, var(--cyan)));
}
.icon-box svg {
width: 100%;
height: 100%;
}
.icon-name {
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text);
}
.icon-use {
margin-top: 4px;
font-size: 11.5px;
color: var(--text-dim);
}
.icon-cyan {
--icon-color: var(--cyan);
}
.icon-magenta {
--icon-color: var(--magenta);
}
.icon-purple {
--icon-color: var(--purple);
}
.icon-green {
--icon-color: var(--green);
}
.icon-amber {
--icon-color: var(--amber);
}
/* Navbar */
.navbar {
position: sticky;
top: 0;
z-index: 50;
background: rgba(5, 5, 8, 0.72);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--panel-border);
}
.navbar-inner {
max-width: 680px;
margin: 0 auto;
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
position: relative;
}
.navbar-brand {
text-decoration: none;
line-height: 1;
}
.navbar .brand-mark {
font-size: 20px;
letter-spacing: 3px;
}
.nav-links {
display: flex;
align-items: center;
gap: 4px;
}
.nav-link {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 10px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
color: var(--text-dim);
text-decoration: none;
transition: color 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.nav-link:hover {
color: var(--text);
background: var(--panel);
}
.nav-link.active {
color: var(--cyan);
background: rgba(35, 242, 255, 0.08);
text-shadow: 0 0 8px rgba(35, 242, 255, 0.6);
}
.nav-icon {
display: inline-flex;
width: 16px;
height: 16px;
flex: none;
}
.nav-icon svg {
width: 100%;
height: 100%;
}
.navbar-right {
display: flex;
align-items: center;
gap: 12px;
}
.nav-toggle {
display: none;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid var(--panel-border);
background: var(--panel);
color: var(--text);
cursor: pointer;
}
.nav-toggle svg {
width: 18px;
height: 18px;
}
.nav-toggle:hover {
border-color: rgba(35, 242, 255, 0.4);
color: var(--cyan);
}
/* Mobile drawer */
.nav-drawer {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: flex;
flex-direction: column;
gap: 3px;
padding: 0 20px;
max-height: 0;
overflow: hidden;
opacity: 0;
background: rgba(7, 7, 12, 0.97);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--panel-border);
transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.28s ease;
}
.nav-drawer-open {
max-height: 420px;
opacity: 1;
padding: 12px 20px 20px;
}
.drawer-link {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border-radius: 10px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
color: var(--text-dim);
text-decoration: none;
}
.drawer-link:hover {
color: var(--text);
background: var(--panel);
}
.drawer-link.active {
color: var(--cyan);
background: rgba(35, 242, 255, 0.08);
}
.drawer-link .nav-icon {
width: 18px;
height: 18px;
}
.drawer-divider {
height: 1px;
background: var(--panel-border);
margin: 8px 4px;
}
.drawer-signout {
display: flex;
align-items: center;
gap: 9px;
margin-top: 2px;
padding: 11px 12px;
border-radius: 10px;
border: 1px solid var(--panel-border);
background: transparent;
color: var(--text-dim);
font-family: var(--font-body);
font-weight: 600;
font-size: 14.5px;
cursor: pointer;
text-align: left;
}
.drawer-signout svg {
width: 17px;
height: 17px;
}
.drawer-signout:hover {
color: var(--magenta);
border-color: rgba(255, 43, 214, 0.4);
}
@media (max-width: 700px) {
.nav-links {
display: none;
}
.navbar-right .nav-signout-form {
display: none;
}
.navbar-right .coin-pill {
height: 38px;
padding: 0 10px;
border-radius: 10px;
}
/* Phone: the same button, next to the menu toggle. */
.navbar-right .user-pill {
min-width: 38px;
}
/* The icon colour already says "not approved"; the words only fit on wider phones. */
.navbar-right .user-status-text {
display: none;
}
.nav-toggle {
display: inline-flex;
}
}
.nav-signout-form {
display: inline-flex;
}
.nav-signout {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid var(--panel-border);
background: var(--panel);
color: var(--text-dim);
cursor: pointer;
}
.nav-signout svg {
width: 17px;
height: 17px;
}
.nav-signout:hover {
color: var(--magenta);
border-color: rgba(255, 43, 214, 0.4);
}
@media (min-width: 701px) {
.nav-drawer {
display: none !important;
}
}
/* History "view more" link */
.history-more {
display: inline-block;
margin-top: 16px;
font-size: 13px;
font-weight: 600;
color: var(--cyan);
text-decoration: none;
text-shadow: 0 0 6px rgba(35, 242, 255, 0.5);
}
.history-more:hover {
text-decoration: underline;
}
.history-full {
margin-top: 4px;
}
/* Generic inner page */
.page {
max-width: 640px;
margin: 0 auto;
padding: 32px 20px 60px;
}
.page-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: 1px;
color: var(--text);
margin: 0 0 6px;
text-shadow: 0 0 8px rgba(238, 240, 248, 0.35);
}
.page-sub {
font-size: 14px;
color: var(--text-dim);
margin: 0 0 26px;
}
.page-note {
margin-top: 18px;
font-size: 12.5px;
color: var(--text-dim);
text-align: center;
}
/* Profile */
.profile-head {
margin-bottom: 22px;
}
.profile-head .page-title {
margin-bottom: 4px;
overflow-wrap: anywhere;
}
.profile-meta {
font-size: 13px;
color: var(--text-dim);
overflow-wrap: anywhere;
}
.profile-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 18px;
padding: 24px 22px 22px;
margin-bottom: 18px;
}
.profile-card-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text);
margin: 0 0 18px;
}
.profile-card .field input[readonly],
.modal-form .field input[readonly] {
color: var(--text-dim);
cursor: default;
}
/* Readable key/value list on the profile page */
.info-list {
margin: 0;
display: flex;
flex-direction: column;
}
.info-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--panel-border);
}
.info-row:last-child {
border-bottom: none;
}
.info-row dt {
flex: none;
font-size: 13px;
color: var(--text-dim);
}
.info-row dd {
margin: 0;
min-width: 0;
text-align: right;
font-size: 14.5px;
color: var(--text);
overflow-wrap: anywhere;
}
.info-badge {
display: inline-block;
padding: 3px 11px;
border-radius: 999px;
border: 1px solid var(--panel-border);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
}
.info-badge-green {
color: var(--green);
border-color: rgba(57, 255, 176, 0.4);
background: rgba(57, 255, 176, 0.08);
}
.info-badge-amber {
color: var(--amber);
border-color: rgba(255, 178, 62, 0.4);
background: rgba(255, 178, 62, 0.08);
}
.info-badge-red {
color: var(--red);
border-color: rgba(255, 59, 74, 0.4);
background: rgba(255, 59, 74, 0.08);
}
.info-badge-cyan {
color: var(--cyan);
border-color: rgba(35, 242, 255, 0.4);
background: rgba(35, 242, 255, 0.08);
}
.info-badge-dim {
color: var(--text-dim);
}
.profile-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.profile-actions .btn-primary,
.profile-actions .btn-secondary {
flex: 1 1 180px;
width: auto;
}
.profile-notice {
border-radius: 14px;
padding: 14px 16px;
margin-bottom: 18px;
}
.profile-notice-warning {
--notice-color: var(--amber);
background: rgba(255, 178, 62, 0.08);
border: 1px solid rgba(255, 178, 62, 0.45);
box-shadow: 0 0 14px rgba(255, 178, 62, 0.12);
}
.profile-notice-danger {
--notice-color: var(--red);
background: rgba(255, 59, 74, 0.08);
border: 1px solid rgba(255, 59, 74, 0.45);
box-shadow: 0 0 14px rgba(255, 59, 74, 0.12);
}
.profile-notice-title {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--notice-color);
}
.profile-notice-form {
margin: 12px 0 0;
}
.profile-notice-btn {
padding: 11px 20px;
border-radius: 999px;
border: 1px solid var(--notice-color);
background: rgba(255, 59, 74, 0.12);
color: var(--notice-color);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 12px rgba(255, 59, 74, 0.25);
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.profile-notice-btn:hover {
box-shadow: 0 0 18px rgba(255, 59, 74, 0.5);
transform: scale(1.02);
}
@media (max-width: 480px) {
.profile-notice-btn {
width: 100%;
}
}
.profile-notice-note {
margin-top: 10px;
font-size: 12.5px;
color: var(--text-dim);
}
.profile-notice-text {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--text);
}
.profile-ok {
background: rgba(57, 255, 176, 0.08);
border: 1px solid rgba(57, 255, 176, 0.35);
color: var(--green);
font-size: 13px;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 18px;
}
a.user-pill {
text-decoration: none;
}
a.user-pill {
transition: border-color 0.15s ease, color 0.15s ease;
}
a.user-pill:hover {
color: var(--text);
border-color: rgba(35, 242, 255, 0.4);
}
a.user-pill-pending:hover {
border-color: rgba(255, 178, 62, 0.7);
}
a.user-pill-danger:hover {
border-color: rgba(255, 59, 74, 0.75);
}
/* Sign-in link (navbar, logged out) */
.nav-signin {
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(35, 242, 255, 0.4);
color: var(--cyan);
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
text-decoration: none;
text-shadow: 0 0 6px rgba(35, 242, 255, 0.5);
}
.nav-signin:hover {
background: rgba(35, 242, 255, 0.08);
}
/* Auth pages */
.auth-page {
max-width: 380px;
margin: 0 auto;
padding: 60px 20px 60px;
display: flex;
flex-direction: column;
align-items: center;
}
.auth-brand {
text-decoration: none;
margin-bottom: 28px;
}
.auth-card {
width: 100%;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 18px;
padding: 28px 24px;
}
.auth-title {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text);
margin: 0 0 20px;
text-align: center;
text-shadow: 0 0 8px rgba(238, 240, 248, 0.35);
}
.auth-error {
background: rgba(255, 43, 214, 0.08);
border: 1px solid rgba(255, 43, 214, 0.35);
color: var(--magenta);
font-size: 13px;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 18px;
}
.auth-success {
background: rgba(57, 255, 136, 0.08);
border: 1px solid rgba(57, 255, 136, 0.35);
color: #7dffb0;
font-size: 13px;
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 18px;
}
.auth-hint {
margin: 0 0 18px;
font-size: 13px;
color: var(--text-dim);
text-align: center;
}
.auth-forgot {
margin: -6px 0 14px;
text-align: right;
font-size: 13px;
}
.auth-forgot a {
color: var(--text-dim);
text-decoration: none;
}
.auth-forgot a:hover {
color: var(--cyan);
text-decoration: underline;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
font-size: 12.5px;
color: var(--text-dim);
}
.field input,
.field textarea {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 11px 13px;
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea {
resize: vertical;
min-height: 120px;
line-height: 1.5;
}
.field input:focus,
.field textarea:focus {
border-color: rgba(35, 242, 255, 0.55);
box-shadow: 0 0 0 3px rgba(35, 242, 255, 0.12);
}
.field-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
font-size: 12.5px;
color: var(--text-dim);
line-height: 1.4;
}
.field-checkbox a {
color: var(--cyan);
text-decoration: none;
border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}
.field-checkbox input {
margin-top: 2px;
accent-color: var(--cyan);
width: 16px;
height: 16px;
flex: none;
}
.btn-primary {
width: 100%;
padding: 12px 20px;
border-radius: 10px;
border: 1px solid rgba(35, 242, 255, 0.5);
background: rgba(35, 242, 255, 0.08);
color: var(--cyan);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 10px rgba(35, 242, 255, 0.2);
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-with-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-tall {
padding-top: 20px;
padding-bottom: 20px;
font-size: 18px;
gap: 12px;
}
.btn-tall .btn-icon {
width: 28px;
height: 28px;
}
.btn-icon {
width: 20px;
height: 20px;
flex: none;
filter: drop-shadow(0 0 4px currentColor);
}
/* Chrome draws a default focus ring on buttons after a click/submit; the neon glow is the affordance here. */
button:focus,
button:focus-visible {
outline: none;
}
/* No browser focus ring anywhere (same as www_Glorija). Also covers , which focuses the page h1 after every navigation. Inputs/checkboxes/upload button show their own neon focus styles. */
:focus,
:focus-visible {
outline: none;
}
.btn-primary:hover {
box-shadow: 0 0 16px rgba(35, 242, 255, 0.4);
transform: scale(1.01);
}
.btn-primary:disabled,
.btn-primary:disabled:hover {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.auth-switch {
margin: 18px 0 0;
text-align: center;
font-size: 13px;
color: var(--text-dim);
}
.auth-switch a {
color: var(--cyan);
text-decoration: none;
font-weight: 600;
}
.auth-switch a:hover {
text-decoration: underline;
}
/* Dev-only test account list on /login */
.dev-accounts {
width: 100%;
margin-top: 18px;
background: var(--panel);
border: 1px dashed rgba(255, 178, 62, 0.4);
border-radius: 14px;
padding: 14px 14px 10px;
}
.dev-accounts-title {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 10px;
text-align: center;
}
.dev-account {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--panel-border);
border-radius: 8px;
padding: 8px 12px;
margin-bottom: 6px;
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.dev-account:hover {
border-color: rgba(35, 242, 255, 0.5);
background: rgba(35, 242, 255, 0.06);
}
.dev-account-email {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dev-account-state {
flex: none;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dev-account-state.state-red { color: var(--red); }
.dev-account-state.state-amber { color: var(--amber); }
.dev-account-state.state-magenta { color: var(--magenta); }
.dev-account-state.state-green { color: var(--green); }
/* Start-lock form */
.start-lock-form {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 18px;
padding: 22px 22px 26px;
}
.duration-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.duration-chip {
position: relative;
}
.duration-chip input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.duration-chip span {
display: inline-flex;
padding: 9px 16px;
border-radius: 999px;
border: 1px solid var(--panel-border);
background: rgba(255, 255, 255, 0.03);
color: var(--text-dim);
font-family: var(--font-body);
font-weight: 600;
font-size: 13.5px;
cursor: pointer;
transition: all 0.15s ease;
}
.duration-chip input:checked + span {
color: var(--cyan);
border-color: rgba(35, 242, 255, 0.55);
background: rgba(35, 242, 255, 0.1);
text-shadow: 0 0 6px rgba(35, 242, 255, 0.5);
}
/* Locktober: a full-width, bigger card that stands out from the pills. Purple, with a slow flowing colour shift
(the gradient is wider than the card and drifts back and forth) and a faint sheen sweeping across. */
.duration-chip-featured {
flex: 1 0 100%;
}
.duration-chip-featured span {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
width: 100%;
box-sizing: border-box;
padding: 20px 20px 18px;
border-radius: 18px;
border-color: rgba(168, 85, 255, 0.65);
background: linear-gradient(120deg, rgba(168, 85, 255, 0.34), rgba(88, 36, 190, 0.3), rgba(214, 100, 255, 0.34), rgba(120, 60, 230, 0.3), rgba(168, 85, 255, 0.34));
background-size: 300% 100%;
box-shadow: 0 0 18px rgba(168, 85, 255, 0.35);
text-align: center;
animation: locktoberFlow 9s ease-in-out infinite;
}
.duration-chip-featured span::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
transform: translateX(-120%);
animation: locktoberSheen 6s ease-in-out infinite;
pointer-events: none;
}
.featured-title,
.featured-note {
position: relative;
z-index: 1;
}
.featured-title {
font-family: var(--font-display);
font-size: 21px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #e9d5ff;
text-shadow: 0 0 10px rgba(168, 85, 255, 0.9);
}
/* Icon and text share one flex row centred on the cross axis; line-height 1 keeps the text box no taller than the icon. The text is a bare text node on purpose: any in here would pick up the pill styling of .duration-chip span. */
.featured-note {
display: inline-flex;
align-items: center;
gap: 7px;
font-style: normal;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
line-height: 1;
color: #dcc2ff;
}
.featured-icon {
display: block;
width: 16px;
height: 16px;
flex: none;
color: #c084ff;
filter: drop-shadow(0 0 4px var(--purple));
}
.duration-chip-featured input:checked + span {
border-color: var(--purple);
background: linear-gradient(120deg, rgba(168, 85, 255, 0.55), rgba(88, 36, 190, 0.48), rgba(214, 100, 255, 0.55), rgba(120, 60, 230, 0.48), rgba(168, 85, 255, 0.55));
background-size: 300% 100%;
box-shadow: 0 0 28px rgba(168, 85, 255, 0.65);
}
.duration-chip-featured input:checked + span .featured-title {
color: #fff;
}
@keyframes locktoberFlow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes locktoberSheen {
0%, 55% { transform: translateX(-120%); }
100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
.duration-chip-featured span,
.duration-chip-featured span::after {
animation: none;
}
}
.file-input-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.file-upload-btn {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 10px;
border: 1px dashed rgba(35, 242, 255, 0.35);
background: rgba(255, 255, 255, 0.03);
color: var(--text-dim);
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.file-upload-btn:hover {
border-color: rgba(35, 242, 255, 0.6);
color: var(--cyan);
background: rgba(35, 242, 255, 0.06);
}
.file-upload-icon {
width: 20px;
height: 20px;
flex: none;
}
/* Bubble under the photo button with a tail pointing up at it; shown by the form's submit handler when no photo is chosen. */
.field-tip {
position: relative;
margin-top: 10px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 178, 62, 0.6);
background: rgba(40, 28, 8, 0.96);
color: var(--amber);
font-size: 13px;
line-height: 1.4;
box-shadow: 0 0 14px rgba(255, 178, 62, 0.25);
animation: tipIn 0.25s ease-out;
}
.field-tip[hidden] {
display: none;
}
.field-tip::before {
content: "";
position: absolute;
top: -6px;
left: 26px;
width: 10px;
height: 10px;
background: rgba(40, 28, 8, 1);
border-left: 1px solid rgba(255, 178, 62, 0.6);
border-top: 1px solid rgba(255, 178, 62, 0.6);
transform: rotate(45deg);
}
/* Same specificity as :hover and later in the file, so the amber warning also wins while the pointer is over the button. */
.file-upload-btn.file-upload-btn-attn {
border-color: var(--amber);
color: var(--amber);
background: rgba(255, 178, 62, 0.06);
}
@keyframes tipIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.file-input-hidden:focus-visible + .file-upload-btn {
outline: 2px solid var(--cyan);
outline-offset: 2px;
}
.start-lock-form .btn-primary {
margin-top: 6px;
}
/* Step 2 of the start form: confirm duration + hidden photo, then a switch unlocks the real submit button. */
.confirm-title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
color: var(--text);
margin: 0 0 16px;
}
.confirm-title,
.confirm-row {
text-align: center;
}
.confirm-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-bottom: 20px;
}
.confirm-row-label {
font-size: 12.5px;
color: var(--text-dim);
}
.confirm-row-value {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--cyan);
text-shadow: 0 0 10px rgba(35, 242, 255, 0.5);
}
.confirm-photo-wrap {
position: relative;
max-width: 320px;
margin: 0 auto 16px;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--panel-border);
box-shadow: 0 0 22px rgba(57, 255, 176, 0.15);
user-select: none;
-webkit-user-select: none;
}
/* Drawn from a 24px-wide canvas, so it stays unreadable even if the CSS blur is removed. */
.confirm-photo {
display: block;
width: 100%;
height: auto;
filter: blur(6px);
transform: scale(1.08);
pointer-events: none;
}
.confirm-photo-badge {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(8, 8, 14, 0.78);
border: 1px solid rgba(57, 255, 176, 0.5);
color: var(--green);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 0 10px rgba(57, 255, 176, 0.3);
}
.confirm-badge-icon {
width: 16px;
height: 16px;
flex: none;
}
.confirm-note {
margin: 0 0 18px;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-dim);
text-align: center;
}
.confirm-back {
width: 100%;
margin-top: 10px;
}
/* Toggle switch: real checkbox visually hidden, track + thumb drawn by the sibling span. */
.switch {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 18px;
cursor: pointer;
}
.switch input {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 1px;
height: 1px;
}
/* Left-aligned variant for forms (registration, sign-in): long labels wrap next to a top-aligned track. */
.switch-left {
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 16px;
}
.switch-left .switch-track {
margin-top: 1px;
}
/* 4px pushes the first line to the vertical centre of the 26px track; a one-line switch centres itself below. */
.switch-left .switch-label {
padding-top: 4px;
font-size: 13px;
color: var(--text-dim);
}
.switch-left.remember-switch {
align-items: center;
}
.switch-left.remember-switch .switch-track {
margin-top: 0;
}
.switch-left.remember-switch .switch-label {
padding-top: 0;
}
.switch-left .switch-label a {
color: var(--cyan);
text-decoration: none;
border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}
/* "Keep me signed in" needs a persistent cookie, so it is inert until cookies are accepted. */
.remember-hint {
margin: -8px 0 16px;
font-size: 12px;
color: var(--text-dim);
}
html[data-cookie-consent="accepted"] .remember-hint {
display: none;
}
html:not([data-cookie-consent="accepted"]) .remember-switch {
opacity: 0.45;
pointer-events: none;
}
/* Cookie banner: bottom panel until a choice is made; the footer "Cookies" link brings it back. */
.cookie-banner {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 80;
display: none;
align-items: center;
gap: 16px;
flex-wrap: wrap;
max-width: 760px;
margin: 0 auto;
padding: 16px 20px;
border-radius: 16px;
background: rgba(8, 8, 14, 0.96);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(35, 242, 255, 0.12);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
html[data-cookie-consent="unset"] .cookie-banner {
display: flex;
animation: cookieIn 0.3s ease-out;
}
html[data-cookie-consent="unset"] body {
padding-bottom: 140px;
}
.cookie-text {
flex: 1 1 320px;
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-dim);
}
.cookie-text a {
color: var(--cyan);
text-decoration: none;
border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}
.cookie-actions {
display: flex;
gap: 10px;
flex: 0 0 auto;
}
.cookie-btn,
.cookie-actions .btn-primary {
flex: none;
width: auto;
min-width: 110px;
padding: 10px 20px;
border-radius: 999px;
font-size: 12px;
margin: 0;
}
@keyframes cookieIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.switch-track {
position: relative;
flex: none;
width: 46px;
height: 26px;
border-radius: 999px;
border: 1px solid var(--panel-border);
background: rgba(255, 255, 255, 0.06);
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.switch-track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--text-dim);
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.switch input:checked + .switch-track {
background: rgba(35, 242, 255, 0.15);
border-color: rgba(35, 242, 255, 0.6);
box-shadow: 0 0 10px rgba(35, 242, 255, 0.35);
}
.switch input:checked + .switch-track::after {
transform: translateX(20px);
background: var(--cyan);
box-shadow: 0 0 8px var(--cyan);
}
.switch input:focus-visible + .switch-track {
box-shadow: 0 0 0 3px rgba(35, 242, 255, 0.25);
}
.switch-label {
font-size: 13.5px;
line-height: 1.4;
color: var(--text);
}
/* Reveal state (just unlocked) */
.hero-reveal {
text-align: center;
padding: 36px 20px 40px;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 20px;
}
/* Placeholder that takes the photo's place (same width, 4:3) when the image cannot be loaded. */
.combo-photo-missing {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
max-width: 320px;
aspect-ratio: 4 / 3;
margin: 22px 0 18px;
padding: 16px;
box-sizing: border-box;
border: 1px dashed rgba(255, 178, 62, 0.45);
border-radius: 14px;
background: rgba(255, 178, 62, 0.05);
text-align: center;
}
.combo-photo-missing[hidden] {
display: none;
}
.combo-missing-icon {
width: 40px;
height: 40px;
color: var(--amber);
filter: drop-shadow(0 0 6px var(--amber));
}
.combo-missing-title {
margin: 4px 0 0;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.combo-missing-text {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-dim);
}
.combo-missing-text a {
color: var(--cyan);
text-decoration: none;
border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}
.reveal-icon {
width: 48px;
height: 48px;
color: var(--green);
filter: drop-shadow(0 0 6px var(--green));
}
.reveal-icon svg {
width: 100%;
height: 100%;
}
.status-badge-open {
color: var(--green);
border-color: rgba(57, 255, 176, 0.5);
text-shadow: 0 0 8px var(--green);
box-shadow: 0 0 10px rgba(57, 255, 176, 0.35), inset 0 0 10px rgba(57, 255, 176, 0.12);
}
.combo-photo {
width: 100%;
max-width: 320px;
border-radius: 14px;
margin: 22px 0 18px;
border: 1px solid var(--panel-border);
box-shadow: 0 0 22px rgba(57, 255, 176, 0.15);
}
.reveal-cta {
display: inline-block;
width: auto;
margin-top: 18px;
padding: 12px 26px;
text-decoration: none;
text-align: center;
}
/* Dev-only timer controls */
.dev-panel {
margin-bottom: 20px;
padding: 14px 16px;
border-radius: 14px;
border: 1px dashed rgba(255, 178, 62, 0.4);
background: rgba(255, 178, 62, 0.05);
}
.dev-panel-label {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 10px;
}
.dev-panel-row {
display: flex;
gap: 8px;
}
.dev-minutes-input {
width: 84px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 9px 10px;
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
}
.dev-unit-select {
width: 60px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--panel-border);
border-radius: 10px;
padding: 9px 6px;
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
color-scheme: dark;
}
/* The native dropdown list ignores the select's translucent background and inherits its light text colour. */
.dev-unit-select option {
background: #14141f;
color: var(--text);
}
.dev-btn {
flex: 1;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid rgba(255, 178, 62, 0.4);
background: rgba(255, 178, 62, 0.08);
color: var(--amber);
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: background 0.15s ease;
}
.dev-btn:hover {
background: rgba(255, 178, 62, 0.18);
}
/* Session list (full history) */
.session-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.session-card {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 16px;
overflow: hidden;
}
.session-card-header {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
}
.session-card-main {
flex: 1;
min-width: 0;
}
.session-date {
font-size: 14.5px;
font-weight: 700;
color: var(--text);
}
.session-duration {
margin-top: 3px;
font-size: 12.5px;
color: var(--text-dim);
}
.session-badge {
flex: none;
padding: 5px 12px;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.session-badge-completed {
color: var(--turquoise);
border: 1px solid rgba(45, 212, 191, 0.4);
background: rgba(45, 212, 191, 0.08);
}
.session-badge-ongoing {
color: var(--green);
border: 1px solid rgba(57, 255, 176, 0.4);
background: rgba(57, 255, 176, 0.08);
}
.session-badge-deserted {
color: var(--red);
border: 1px solid rgba(255, 59, 74, 0.4);
background: rgba(255, 59, 74, 0.08);
}
.session-badge-released {
color: var(--amber);
border: 1px solid rgba(255, 178, 62, 0.4);
background: rgba(255, 178, 62, 0.08);
}
.session-chevron {
flex: none;
width: 16px;
height: 16px;
color: var(--text-dim);
transition: transform 0.2s ease;
}
.session-chevron-open {
transform: rotate(180deg);
}
.session-timeline {
padding: 0 18px 18px;
border-top: 1px solid var(--panel-border);
}
.session-timeline .timeline {
margin-top: 16px;
}
/* Pagination */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 20px;
}
.pagination-btn {
padding: 9px 16px;
border-radius: 10px;
border: 1px solid var(--panel-border);
background: var(--panel);
color: var(--text);
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
a.pagination-btn {
text-decoration: none;
}
.pagination-btn:hover:not(:disabled) {
border-color: rgba(35, 242, 255, 0.4);
color: var(--cyan);
}
.pagination-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination-info {
font-size: 12.5px;
color: var(--text-dim);
}
/* Emergency Release confirmation */
.danger-modal {
font-family: var(--font-body);
background: rgba(10, 6, 8, 0.96);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
width: min(380px, calc(100vw - 48px));
margin: 10vh auto;
padding: 0;
color: var(--text);
border: 1px solid rgba(255, 59, 74, 0.4);
border-radius: 18px;
box-shadow: 0 0 24px rgba(255, 59, 74, 0.25), 0 0 70px rgba(255, 59, 74, 0.1), inset 0 0 20px rgba(255, 59, 74, 0.05);
}
.danger-modal::backdrop {
background-color: rgba(5, 5, 8, 0.78);
}
.danger-modal-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 30px 26px 26px;
}
.danger-modal-icon {
width: 40px;
height: 40px;
color: var(--red);
filter: drop-shadow(0 0 8px var(--red));
margin-bottom: 10px;
}
.danger-modal-icon svg {
width: 100%;
height: 100%;
}
.danger-modal-title {
margin: 0 0 14px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
color: var(--red);
text-transform: uppercase;
}
.danger-modal-body {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.5;
color: var(--text-dim);
}
.danger-modal-strong {
color: var(--text);
}
.danger-modal-strong strong {
color: var(--red);
}
.neon-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 6px 0 22px;
text-align: left;
cursor: pointer;
user-select: none;
}
.neon-checkbox input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.neon-checkbox-box {
flex: none;
width: 20px;
height: 20px;
margin-top: 1px;
border: 1px solid rgba(255, 59, 74, 0.5);
border-radius: 5px;
background: rgba(255, 59, 74, 0.05);
position: relative;
transition: box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.neon-checkbox-box::after {
content: "";
position: absolute;
top: 3px;
left: 6px;
width: 5px;
height: 9px;
border: solid var(--red);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.15s ease;
}
.neon-checkbox input:checked ~ .neon-checkbox-box {
background: rgba(255, 59, 74, 0.15);
border-color: var(--red);
box-shadow: 0 0 10px rgba(255, 59, 74, 0.5);
}
.neon-checkbox input:checked ~ .neon-checkbox-box::after {
opacity: 1;
}
.neon-checkbox input:focus-visible ~ .neon-checkbox-box {
box-shadow: 0 0 0 2px rgba(255, 59, 74, 0.4);
}
.neon-checkbox-label {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-dim);
}
.danger-modal-actions {
display: flex;
gap: 12px;
width: 100%;
}
.danger-modal-actions form {
flex: 1;
}
.btn-ghost {
flex: 1;
padding: 11px 16px;
border-radius: 999px;
border: 1px solid var(--panel-border);
background: transparent;
color: var(--text-dim);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover {
border-color: rgba(255, 255, 255, 0.25);
color: var(--text);
}
.btn-danger {
width: 100%;
padding: 11px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 59, 74, 0.6);
background: rgba(255, 59, 74, 0.12);
color: var(--red);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 12px rgba(255, 59, 74, 0.25);
transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.btn-danger:hover:not(:disabled) {
box-shadow: 0 0 18px rgba(255, 59, 74, 0.5);
transform: scale(1.02);
}
.btn-danger:disabled {
opacity: 0.35;
cursor: not-allowed;
box-shadow: none;
}
/* Amber variant of the modal: warnings that are not destructive (unapproved account). */
.danger-modal-warning {
background: rgba(12, 9, 4, 0.96);
border-color: rgba(255, 178, 62, 0.4);
box-shadow: 0 0 24px rgba(255, 178, 62, 0.25), 0 0 70px rgba(255, 178, 62, 0.1), inset 0 0 20px rgba(255, 178, 62, 0.05);
}
.danger-modal-warning .danger-modal-icon {
color: var(--amber);
filter: drop-shadow(0 0 8px var(--amber));
}
.danger-modal-warning .danger-modal-title,
.danger-modal-warning .danger-modal-strong strong {
color: var(--amber);
}
.danger-modal-warning .neon-checkbox-box {
border-color: rgba(255, 178, 62, 0.5);
background: rgba(255, 178, 62, 0.05);
}
.danger-modal-warning .neon-checkbox-box::after {
border-color: var(--amber);
}
.danger-modal-warning .neon-checkbox input:checked ~ .neon-checkbox-box {
background: rgba(255, 178, 62, 0.15);
border-color: var(--amber);
box-shadow: 0 0 10px rgba(255, 178, 62, 0.5);
}
.danger-modal-warning .neon-checkbox input:focus-visible ~ .neon-checkbox-box {
box-shadow: 0 0 0 2px rgba(255, 178, 62, 0.4);
}
/* Cyan variant of the modal: plain forms (edit profile, change password). */
.danger-modal-info {
background: rgba(6, 10, 14, 0.96);
border-color: rgba(35, 242, 255, 0.4);
box-shadow: 0 0 24px rgba(35, 242, 255, 0.2), 0 0 70px rgba(35, 242, 255, 0.08), inset 0 0 20px rgba(35, 242, 255, 0.04);
}
.danger-modal-info .danger-modal-title {
color: var(--cyan);
}
.danger-modal-info .modal-form {
width: 100%;
text-align: left;
}
.danger-modal-info .modal-error {
width: 100%;
margin-bottom: 14px;
text-align: left;
}
.danger-modal-info .danger-modal-actions .btn-primary {
flex: 1;
width: auto;
padding: 11px 16px;
border-radius: 999px;
font-size: 12px;
letter-spacing: 1px;
}
.btn-warning,
.danger-modal-warning .btn-danger {
width: 100%;
padding: 11px 16px;
border-radius: 999px;
border: 1px solid rgba(255, 178, 62, 0.6);
background: rgba(255, 178, 62, 0.12);
color: var(--amber);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 12px rgba(255, 178, 62, 0.25);
transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.btn-warning:hover:not(:disabled),
.danger-modal-warning .btn-danger:hover:not(:disabled) {
box-shadow: 0 0 18px rgba(255, 178, 62, 0.5);
transform: scale(1.02);
}
/* Landing page (logged-out home) */
.landing {
max-width: 680px;
margin: 0 auto;
padding: 48px 20px 60px;
display: flex;
flex-direction: column;
gap: 20px;
}
.landing-hero {
text-align: center;
padding: 20px 8px 8px;
}
.landing-title {
font-family: var(--font-display);
font-weight: 900;
font-size: 40px;
letter-spacing: 6px;
margin: 0 0 16px;
color: var(--text);
text-shadow: 0 0 10px var(--cyan), 0 0 30px rgba(35, 242, 255, 0.5);
}
.landing-tagline {
font-family: var(--font-body);
font-weight: 600;
font-size: 17px;
color: var(--text);
margin: 0 auto 14px;
max-width: 480px;
line-height: 1.5;
}
.landing-sub {
font-size: 14px;
color: var(--text-dim);
margin: 0 auto 28px;
max-width: 460px;
line-height: 1.6;
}
.landing-cta {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.landing-btn {
width: auto;
min-width: 140px;
text-align: center;
text-decoration: none;
display: inline-block;
}
.btn-secondary {
padding: 12px 20px;
border-radius: 10px;
border: 1px solid rgba(255, 43, 214, 0.5);
background: rgba(255, 43, 214, 0.08);
color: var(--magenta);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 10px rgba(255, 43, 214, 0.2);
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-secondary:hover {
box-shadow: 0 0 16px rgba(255, 43, 214, 0.4);
transform: scale(1.01);
}
.landing-steps {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.landing-step {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 16px;
padding: 22px 20px;
text-align: center;
}
.landing-step-icon {
width: 34px;
height: 34px;
margin: 0 auto 12px;
color: var(--cyan);
filter: drop-shadow(0 0 6px var(--cyan));
}
.landing-step-icon svg {
width: 100%;
height: 100%;
}
.landing-step-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
color: var(--text);
margin: 0 0 6px;
text-transform: uppercase;
}
.landing-step-text {
font-size: 13px;
color: var(--text-dim);
line-height: 1.5;
margin: 0;
}
.landing-panel {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 16px;
padding: 24px 22px;
}
.landing-panel-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
color: var(--cyan);
margin: 0 0 12px;
text-transform: uppercase;
}
.landing-panel-text {
font-size: 13.5px;
color: var(--text-dim);
line-height: 1.6;
margin: 0 0 10px;
}
.landing-panel-text:last-child {
margin-bottom: 0;
}
.landing-panel-text strong {
color: var(--red);
}
/* Highlight inside a panel text that is not a warning (the red default is for the Deserter notice). */
.landing-panel-text strong.landing-em {
color: var(--magenta);
}
@media (min-width: 620px) {
.landing-steps {
grid-template-columns: repeat(3, 1fr);
}
}
/* Start-lock progress: spinner in the button and a frozen form until the server answers. */
.spinner {
width: 18px;
height: 18px;
flex: none;
border-radius: 50%;
border: 2px solid rgba(35, 242, 255, 0.25);
border-top-color: var(--cyan);
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn-loading,
.btn-loading:hover {
cursor: progress;
pointer-events: none;
transform: none;
}
.start-lock-form.is-submitting {
cursor: progress;
}
.start-lock-form.is-submitting .confirm-back,
.start-lock-form.is-submitting .switch {
opacity: 0.4;
pointer-events: none;
}
/* Toast: appears at the top, then fades away on its own. */
.toast {
position: fixed;
top: 76px;
left: 50%;
z-index: 60;
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 32px);
padding: 12px 20px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
pointer-events: none;
animation: toastLife 15s ease forwards;
}
.toast-success {
background: rgba(6, 22, 16, 0.94);
border: 1px solid rgba(57, 255, 176, 0.55);
color: var(--green);
box-shadow: 0 0 18px rgba(57, 255, 176, 0.3);
}
.toast-icon {
width: 22px;
height: 22px;
flex: none;
filter: drop-shadow(0 0 4px currentColor);
}
@keyframes toastLife {
0% { opacity: 0; transform: translate(-50%, -14px); }
3% { opacity: 1; transform: translate(-50%, 0); }
94% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -6px); visibility: hidden; }
}
/* Profile notification channels */
.notify-intro {
margin: -6px 0 16px;
font-size: 13px;
color: var(--text-dim);
}
.notify-channel {
padding: 14px 0 6px;
border-top: 1px solid var(--panel-border);
}
.notify-channel:first-of-type {
border-top: 0;
padding-top: 0;
}
.notify-switch {
align-items: center;
margin-bottom: 8px;
}
.notify-switch .switch-track {
margin-top: 0;
}
.notify-switch .switch-label {
padding-top: 0;
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.notify-sub {
font-weight: 500;
color: var(--text-dim);
}
.notify-text {
margin: 0 0 12px 58px;
font-size: 13px;
line-height: 1.55;
color: var(--text-dim);
}
.notify-text p {
margin: 0 0 6px;
}
.notify-text ul {
margin: 0 0 8px;
padding-left: 18px;
}
.notify-text strong {
color: var(--text);
font-weight: 600;
overflow-wrap: anywhere;
}
.notify-switch input:disabled + .switch-track {
opacity: 0.4;
}
/* The push row is a custom element (push.js), so :first-of-type above would wrongly drop its divider. */
lock-push.notify-channel {
display: block;
border-top: 1px solid var(--panel-border);
padding-top: 14px;
}
.push-test {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin-top: 10px;
}
.push-test-status {
color: var(--text);
}
.notify-push-details {
margin-top: -4px;
}
.notify-discreet {
align-items: center;
margin-top: 10px;
}
.notify-discreet .switch-track {
margin-top: 0;
}
.notify-discreet .switch-label {
padding-top: 0;
font-size: 13px;
color: var(--text);
}
@media (max-width: 520px) {
.notify-text {
margin-left: 0;
}
}
/* Profile deletion */
.delete-note {
margin: -4px 0 14px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-dim);
}
.delete-switch input:checked + .switch-track {
background: rgba(255, 59, 74, 0.15);
border-color: rgba(255, 59, 74, 0.6);
box-shadow: 0 0 10px rgba(255, 59, 74, 0.35);
}
.delete-switch input:checked + .switch-track::after {
background: var(--red);
box-shadow: 0 0 8px var(--red);
}
.delete-switch input:disabled + .switch-track {
opacity: 0.4;
}
/* Strip over every page for a blocked account: red, stronger than the deletion strip, with a clear way out (Support). */
.blocked-banner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 14px;
padding: 12px 16px;
background: rgba(255, 59, 74, 0.2);
border-bottom: 1px solid rgba(255, 59, 74, 0.7);
box-shadow: 0 0 22px rgba(255, 59, 74, 0.25);
color: var(--text);
font-size: 13.5px;
line-height: 1.4;
text-align: center;
}
.blocked-banner-icon {
width: 22px;
height: 22px;
flex: none;
color: var(--red);
filter: drop-shadow(0 0 5px var(--red));
}
.blocked-banner strong {
color: var(--red);
}
.blocked-banner-btn {
padding: 6px 16px;
border-radius: 999px;
border: 1px solid rgba(35, 242, 255, 0.6);
background: rgba(35, 242, 255, 0.12);
color: var(--cyan);
font-size: 13px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 0 10px rgba(35, 242, 255, 0.25);
}
/* Strip over every page for a signed-in user whose deletion is scheduled. */
.deletion-banner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 12px;
padding: 10px 16px;
background: rgba(255, 59, 74, 0.14);
border-bottom: 1px solid rgba(255, 59, 74, 0.5);
color: var(--text);
font-size: 13.5px;
text-align: center;
}
.deletion-banner-icon {
width: 20px;
height: 20px;
flex: none;
color: var(--red);
filter: drop-shadow(0 0 4px var(--red));
}
.deletion-banner strong {
color: var(--red);
}
.deletion-banner-form {
margin: 0;
}
/* One-click cancel: a real button, easy to hit on a phone. */
.deletion-banner-btn {
padding: 6px 16px;
border-radius: 999px;
border: 1px solid rgba(35, 242, 255, 0.6);
background: rgba(35, 242, 255, 0.12);
color: var(--cyan);
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 0 10px rgba(35, 242, 255, 0.25);
}
.deletion-banner-btn:hover {
box-shadow: 0 0 16px rgba(35, 242, 255, 0.5);
}
/* Support form */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.support-note {
margin: 0 0 16px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-dim);
}
.support-note a {
color: var(--cyan);
text-decoration: none;
}
/* Legal pages (Terms, Privacy) */
.legal {
max-width: 720px;
margin: 0 auto;
padding: 32px 20px 40px;
}
.legal-updated {
margin: 0 0 22px;
font-size: 12.5px;
color: var(--text-dim);
}
.legal-section {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 16px;
padding: 20px 22px;
margin-bottom: 14px;
}
.legal-section h2 {
margin: 0 0 10px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
color: var(--cyan);
}
.legal-section p,
.legal-section li {
font-size: 14px;
line-height: 1.6;
color: var(--text-dim);
}
.legal-section p {
margin: 0 0 10px;
}
.legal-section p:last-child {
margin-bottom: 0;
}
.legal-section ul {
margin: 0 0 10px;
padding-left: 20px;
}
.legal-section li {
margin-bottom: 6px;
}
.legal-section strong {
color: var(--text);
}
.legal-section a {
color: var(--cyan);
text-decoration: none;
border-bottom: 1px solid rgba(35, 242, 255, 0.35);
}
.legal-todo {
padding: 8px 12px;
border-radius: 10px;
border: 1px dashed rgba(255, 178, 62, 0.5);
background: rgba(255, 178, 62, 0.06);
color: var(--amber) !important;
font-size: 12.5px !important;
}
/* Footer */
.site-footer {
position: relative;
max-width: 640px;
margin: 24px auto 0;
padding: 28px 20px 40px;
text-align: center;
font-size: 12px;
color: var(--text-dim);
line-height: 1.7;
}
/* Barely-there solid white rule that opens the footer. */
.site-footer::before {
content: "";
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 1px;
background: rgba(255, 255, 255, 0.08);
}
.site-footer a {
color: var(--text-dim);
text-decoration: none;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.site-footer-links {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 4px;
}
.site-footer a:hover {
color: var(--cyan);
text-shadow: 0 0 8px rgba(35, 242, 255, 0.55);
}
/* Public lock page (/p/{slug}): the masked name of the locked person above the ring. */
.public-head {
text-align: center;
margin: 4px 0 26px;
}
.public-name {
font-family: var(--font-display);
font-size: 30px;
font-weight: 900;
letter-spacing: 4px;
color: var(--text);
margin: 0;
text-shadow: 0 0 10px rgba(35, 242, 255, 0.55), 0 0 24px rgba(35, 242, 255, 0.25);
overflow-wrap: anywhere;
}
.public-sub {
margin-top: 8px;
font-size: 14px;
letter-spacing: 1px;
color: var(--text-dim);
}
/* Public lock page: the three "add time" buttons above the ring (magenta = time added, as in the history). */
.public-add {
width: 100%;
margin-bottom: 30px;
padding: 20px 18px 16px;
text-align: center;
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 18px;
}
.public-add-title {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 14px;
}
.public-add-buttons {
display: flex;
justify-content: center;
}
.public-add-btn {
padding: 14px 0;
border-radius: 12px;
border: 1px solid rgba(255, 43, 214, 0.55);
background: rgba(255, 43, 214, 0.08);
color: #fff;
font-family: var(--font-display);
font-size: 18px;
font-weight: 900;
letter-spacing: 1px;
text-shadow: 0 0 8px var(--magenta);
box-shadow: 0 0 12px rgba(255, 43, 214, 0.25), inset 0 0 10px rgba(255, 43, 214, 0.1);
cursor: pointer;
transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
.public-add-btn:hover:not(:disabled) {
box-shadow: 0 0 20px rgba(255, 43, 214, 0.5), inset 0 0 14px rgba(255, 43, 214, 0.18);
transform: translateY(-1px);
}
.public-add-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
text-shadow: none;
box-shadow: none;
}
.public-add-hint,
.public-add-wait {
margin: 14px 0 0;
font-size: 14px;
color: var(--text-dim);
}
.public-add-clock {
font-family: var(--font-mono);
font-size: 16px;
color: var(--amber);
text-shadow: 0 0 6px rgba(255, 178, 62, 0.6);
}
.public-add-notice {
margin: 14px 0 0;
font-weight: 600;
color: var(--green);
}
.public-add-notice-warn {
color: var(--amber);
}
/* GameGate: someone who may not play sees the game dimmed and inert, with a card on top saying what to do first. */
.game-gate {
position: relative;
}
.game-gate-shut .game-gate-play {
opacity: 0.28;
filter: blur(1.5px) saturate(0.6);
pointer-events: none;
user-select: none;
}
.game-gate-card {
position: absolute;
top: 32px;
left: 50%;
transform: translateX(-50%);
width: min(360px, 100%);
padding: 22px 22px 18px;
border-radius: 16px;
border: 1px solid rgba(35, 242, 255, 0.35);
background: rgba(10, 10, 18, 0.92);
box-shadow: 0 0 28px rgba(35, 242, 255, 0.15), 0 18px 40px rgba(0, 0, 0, 0.6);
text-align: center;
}
.game-gate-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
letter-spacing: 1px;
color: var(--cyan);
text-shadow: 0 0 10px rgba(35, 242, 255, 0.5);
}
.game-gate-card p {
margin: 10px 0 16px;
font-size: 15px;
color: var(--text-dim);
}
.game-gate-btn {
display: block;
text-decoration: none;
}
.game-gate-link {
display: inline-block;
margin-top: 12px;
font-size: 14px;
color: var(--text-dim);
}
.game-gate-link:hover {
color: var(--cyan);
}
/* Wallet (/wallet): balance, the claim button for the periodic coins, and the coin history. */
.wallet-balance {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 8px 0 18px;
color: var(--amber);
}
.wallet-coin {
width: 46px;
height: 46px;
filter: drop-shadow(0 0 10px rgba(255, 178, 62, 0.6));
}
.wallet-amount {
font-family: var(--font-mono);
font-weight: 400;
font-size: 58px;
line-height: 1;
text-shadow: 0 0 18px rgba(255, 178, 62, 0.55);
}
.wallet-unit {
align-self: flex-end;
padding-bottom: 6px;
font-size: 15px;
color: var(--text-dim);
}
.wallet-claim {
max-width: 420px;
margin: 0 auto 30px;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid var(--panel-border);
background: var(--panel);
text-align: center;
}
.wallet-claim p {
margin: 0;
color: var(--text-dim);
}
.wallet-claim b {
color: var(--text);
font-family: var(--font-mono);
}
.wallet-claim-btn {
border-color: rgba(57, 255, 176, 0.55);
background: rgba(57, 255, 176, 0.08);
color: var(--green);
box-shadow: 0 0 14px rgba(57, 255, 176, 0.25);
}
.wallet-claimed {
margin-top: 10px !important;
font-weight: 600;
color: var(--green) !important;
}
.wallet-history-title {
margin: 0 0 10px;
font-family: var(--font-display);
font-size: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dim);
}
.wallet-list {
margin: 0;
padding: 0;
list-style: none;
}
.wallet-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 4px;
border-bottom: 1px solid var(--panel-border);
}
.wallet-row-main {
flex: 1;
min-width: 0;
}
.wallet-row-text {
font-weight: 600;
}
.wallet-row-note {
font-size: 14px;
color: var(--text-dim);
overflow-wrap: anywhere;
}
.wallet-row-time {
font-size: 13px;
color: var(--text-dim);
}
/* Amount of a wallet row: a coin and the number, gold for coins in, red for coins out. */
.wallet-row-amount {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 17px;
}
.wallet-row-coin {
width: 20px;
height: 20px;
}
.wallet-row-amount.plus {
color: var(--amber);
text-shadow: 0 0 8px rgba(255, 178, 62, 0.45);
}
.wallet-row-amount.plus .wallet-row-coin {
filter: drop-shadow(0 0 4px rgba(255, 178, 62, 0.6));
}
.wallet-row-amount.minus {
color: var(--red);
text-shadow: 0 0 8px rgba(255, 59, 74, 0.45);
}
.wallet-row-amount.minus .wallet-row-coin {
filter: drop-shadow(0 0 4px rgba(255, 59, 74, 0.6));
}
/* Under a game: what a round costs. */
.game-meta-line {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
font-size: 14px;
color: var(--text-dim);
}
/* "Share my lock" (ShareLock.razor): under the dashboard ring and in an empty wallet. */
.share-lock {
width: 100%;
max-width: 420px;
margin: 18px auto 0;
text-align: center;
}
.share-lock-wallet {
margin: 0 auto 30px;
padding: 16px 18px;
border-radius: 14px;
border: 1px dashed rgba(255, 178, 62, 0.45);
background: rgba(255, 178, 62, 0.05);
}
.share-lock-pitch {
margin: 0 0 12px;
font-size: 15px;
color: var(--text);
}
.share-lock-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
border: 1px solid rgba(255, 178, 62, 0.6);
background: rgba(255, 178, 62, 0.1);
color: var(--amber);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 12px rgba(255, 178, 62, 0.25);
}
.share-lock-btn svg {
width: 18px;
height: 18px;
}
.share-lock-error {
margin: 8px 0 0;
font-size: 14px;
color: var(--red);
}
.share-lock-panel {
padding: 14px 16px;
border-radius: 14px;
border: 1px solid rgba(255, 178, 62, 0.4);
background: rgba(10, 10, 18, 0.7);
}
.share-lock-label {
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dim);
}
.share-lock-url {
margin: 6px 0 12px;
font-family: var(--font-mono);
/* One line on a phone: no https://, and the font shrinks with the screen (34 mono characters). */
font-size: min(15px, 4vw);
color: var(--amber);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.share-lock-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.share-lock-action {
padding: 7px 14px;
border-radius: 10px;
border: 1px solid var(--panel-border);
background: var(--panel);
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.share-lock-note {
margin: 12px 0 0;
font-size: 13px;
color: var(--text-dim);
}
/* The public page's single "Add +Nh" button. */
.public-add-btn-one {
min-width: 200px;
}
.share-lock-card {
display: block;
width: 100%;
height: auto;
margin-top: 14px;
border-radius: 10px;
border: 1px solid var(--panel-border);
}
/* "Share result" under a finished game round (ShareResult.razor): the share-lock look, picture first. */
.share-result {
width: 100%;
max-width: 420px;
/* Room below for "Play again" (Hi-Lo, Minesweeper, Endurance test). */
margin: 14px auto 18px;
text-align: center;
}
.share-result-panel .share-lock-card {
margin-top: 0;
}
.share-result-panel .share-lock-actions {
margin-top: 12px;
}
/* Public page opened from a shared result: the result picture above the lock. */
.public-result-card {
display: block;
width: 100%;
max-width: 560px;
height: auto;
margin: 0 auto 24px;
border-radius: 12px;
border: 1px solid var(--panel-border);
}
/* On the dashboard it sits above the ring. */
.share-lock-dashboard {
margin: 0 auto 22px;
}
/* The site's own switch (.switch), centred in the share panel. */
.share-lock-name {
justify-content: center;
margin-top: 14px;
}
.share-lock-note b {
color: var(--text);
}
/* ---------- the emblem: page loader (Components/Layout/Loader.razor) and the reconnect screen (ReconnectModal) ----------
A neon padlock inside a combination dial that turns in steps, with a bright arc running round the outer ring. Same emblem as
the Mistress panel, in Lock's cyan. */
.loader { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 60px 16px; text-align: center; }
.emblem { --s: 120px; position: relative; width: var(--s); height: var(--s); display: grid; place-items: center; }
.loader.big .emblem { --s: 190px; }
.em-ring { position: absolute; border-radius: 50%; }
.em-ring.outer { inset: 0; border: 1px solid rgba(35, 242, 255, 0.22);
background: conic-gradient(from 0deg, transparent 0 70%, rgba(35, 242, 255, 0.9) 88%, #fff 90%, transparent 91%) border-box;
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
filter: drop-shadow(0 0 6px var(--cyan)); animation: em-spin 2.4s linear infinite; }
.em-ring.dial { inset: 14%; background: repeating-conic-gradient(rgba(190, 250, 255, 0.85) 0 1.2deg, transparent 1.2deg 10deg);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
filter: drop-shadow(0 0 4px var(--magenta)); animation: em-dial 3.6s cubic-bezier(.7, 0, .3, 1) infinite; }
.em-core { width: 46%; height: 46%; display: grid; place-items: center; border-radius: 50%;
background: radial-gradient(circle, rgba(10, 60, 80, 0.9), rgba(5, 5, 12, 0.92) 70%); box-shadow: 0 0 30px rgba(35, 242, 255, 0.3), inset 0 0 18px rgba(0, 0, 0, 0.7); }
.em-core svg { width: 58%; height: 58%; fill: none; stroke: #d8fdff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 12px var(--cyan)); animation: em-pulse 1.8s ease-in-out infinite; }
@keyframes em-spin { to { transform: rotate(360deg); } }
@keyframes em-dial { 0% { transform: rotate(0); } 30% { transform: rotate(-70deg); } 55% { transform: rotate(-40deg); } 100% { transform: rotate(-120deg); } }
@keyframes em-pulse { 50% { filter: drop-shadow(0 0 2px var(--cyan)) drop-shadow(0 0 5px var(--cyan)); opacity: .75; } }
.loader-text { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: #bff9ff;
text-shadow: 0 0 10px rgba(35, 242, 255, 0.6); padding-left: .38em; }
.dots i { font-style: normal; animation: em-dot 1.4s infinite; opacity: 0; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes em-dot { 30%, 60% { opacity: 1; } }
@media (max-width: 560px) {
.loader.big .emblem { --s: 150px; }
.loader-text { font-size: 11px; letter-spacing: .28em; }
}
@media (prefers-reduced-motion: reduce) {
.em-ring, .em-core svg, .dots i { animation: none; }
.dots i { opacity: 1; }
}
/* ---- Frozen lock (the Keyholder froze the timer): ice instead of the pink arc, digits in ice capsules ---- */
.ring-wrap-frozen .ring-track {
stroke: rgba(190, 235, 255, 0.12);
stroke-width: 11;
}
.ring-ice-glow {
fill: none;
stroke: #7fd8ff;
stroke-width: 13;
stroke-linecap: round;
opacity: 0.35;
}
.ring-ice {
fill: none;
stroke: url(#ice-arc);
stroke-width: 10;
stroke-linecap: round;
}
.ring-ice-frost {
fill: none;
stroke: #fff;
stroke-width: 12;
stroke-linecap: round;
opacity: 0.85;
}
.ring-wrap-frozen .ring-icon {
color: #e9fcff;
filter: drop-shadow(0 0 8px #7fd8ff) drop-shadow(0 0 16px rgba(127, 216, 255, 0.6));
animation: none;
}
.ring-flake {
animation: flakeSpin 40s linear infinite;
}
@keyframes flakeSpin {
to {
transform: rotate(360deg);
}
}
.ring-time-frozen {
gap: 2px;
}
.ring-time-frozen .ring-num {
display: block;
line-height: 0;
text-shadow: none;
}
.ice-cap {
display: block;
width: 36px;
height: 36px;
overflow: visible;
filter: drop-shadow(0 0 5px rgba(127, 216, 255, 0.6));
}
.ring-time-frozen.ring-time-days .ice-cap {
width: 32px;
height: 32px;
}
.ring-time-frozen .ring-colon {
padding: 0;
height: 36px;
display: flex;
align-items: center;
font-size: 20px;
line-height: 1;
color: #e6fbff;
opacity: 1;
text-shadow: 0 0 8px #7fd8ff, 0 0 14px rgba(127, 216, 255, 0.5);
}
.ring-time-frozen.ring-time-days .ring-colon {
height: 32px;
font-size: 18px;
}
.ring-time-frozen .ring-unit {
margin-top: 7px;
color: #a9e3f7;
text-shadow: 0 0 6px rgba(127, 216, 255, 0.5);
}
.frozen-plate {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 12px;
padding: 5px 15px 5px 16px;
border-radius: 999px;
border: 1px solid rgba(215, 248, 255, 0.8);
background: linear-gradient(180deg, rgba(225, 250, 255, 0.4), rgba(110, 195, 240, 0.16));
color: #effdff;
font-family: var(--font-display);
font-weight: 700;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(127, 216, 255, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -5px 9px rgba(110, 200, 255, 0.3), 0 0 16px rgba(127, 216, 255, 0.55);
}
.frozen-plate-flake {
width: 12px;
height: 12px;
}
/* Frost creeping in from the corners of the screen while the lock is frozen (no pointer events, the page stays usable). */
.dashboard-frozen::before {
content: "";
position: fixed;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0.5;
background:
radial-gradient(160px 130px at 0 0, rgba(235, 250, 255, 0.7), transparent 72%),
radial-gradient(150px 120px at 100% 0, rgba(235, 250, 255, 0.55), transparent 72%),
radial-gradient(180px 130px at 0 100%, rgba(235, 250, 255, 0.55), transparent 72%),
radial-gradient(180px 130px at 100% 100%, rgba(235, 250, 255, 0.65), transparent 72%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 42%, #000 100%);
mask-image: radial-gradient(circle at 50% 50%, transparent 42%, #000 100%);
}
/* The history marker of Frozen / Thawed. */
.timeline-flake {
flex: none;
width: 20px;
height: 20px;
margin: 1px 1.5px 0;
z-index: 1;
}
.event-frozen .timeline-flake {
color: #bff1ff;
filter: drop-shadow(0 0 3px #7fd8ff) drop-shadow(0 0 7px rgba(127, 216, 255, 0.6));
}
/* Counter and history hidden by the Keyholder */
.ring-hidden-icon {
width: 100%;
height: 100%;
color: #e0b8ff;
filter: drop-shadow(0 0 6px rgba(168, 85, 255, 0.8));
}
.ring-time-hidden .ring-num {
color: #e0b8ff;
text-shadow: 0 0 8px rgba(168, 85, 255, 0.7);
letter-spacing: 2px;
}
.hidden-plate {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 12px;
padding: 5px 15px 5px 14px;
border-radius: 999px;
border: 1px solid rgba(190, 130, 255, 0.7);
background: rgba(168, 85, 255, 0.12);
color: #ecd6ff;
font-family: var(--font-display);
font-weight: 700;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(168, 85, 255, 0.8);
box-shadow: 0 0 14px rgba(168, 85, 255, 0.35), inset 0 0 8px rgba(168, 85, 255, 0.2);
}
.hidden-plate-icon {
width: 14px;
height: 14px;
}
.history-hidden-note {
margin-bottom: 18px;
}
/* The history marker of Hidden / Shown. */
.timeline-eye {
flex: none;
width: 20px;
height: 20px;
margin: 1px 1.5px 0;
z-index: 1;
}
.event-hidden .timeline-eye {
color: #e0b8ff;
filter: drop-shadow(0 0 3px rgba(168, 85, 255, 0.8)) drop-shadow(0 0 7px rgba(168, 85, 255, 0.5));
}
/* An unfrozen line carries a red snowflake. */
.event-unfrozen .timeline-flake {
color: var(--red);
filter: drop-shadow(0 0 3px var(--red)) drop-shadow(0 0 7px rgba(255, 59, 74, 0.6));
}
/* Picture format picker of the share panels (ShareLock.razor, ShareResult.razor). */
.share-shapes {
display: flex;
justify-content: center;
gap: 8px;
margin: 12px 0 10px;
}
.share-shape {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 12px;
border-radius: 10px;
border: 1px solid var(--panel-border);
background: var(--panel);
color: var(--text-dim);
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.share-shape small {
font-size: 10.5px;
font-weight: 600;
opacity: 0.75;
}
.share-shape.is-on {
color: var(--cyan);
border-color: rgba(35, 242, 255, 0.55);
background: rgba(35, 242, 255, 0.08);
box-shadow: 0 0 10px rgba(35, 242, 255, 0.2);
}
.share-lock-card-tall {
width: auto;
max-width: 100%;
max-height: 420px;
margin-left: auto;
margin-right: auto;
}
/* Cage verification is open: a red round button (camera, "Verification" under it) levitating over the dashboard ring's top
right (MyLock.razor), leading to /verify. The button bobs up and down; its shadow below shrinks and fades as it rises.
Deliberately not switched off for prefers-reduced-motion: the movement is the point (user, 2026-10-10). */
.verify-badge {
position: absolute;
/* Low enough that, risen to the top of its float, it stays clear of "Share my lock" above the ring. */
top: 12px;
right: -16px;
z-index: 3;
width: 104px;
height: 104px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.verify-badge::after {
content: "";
position: absolute;
left: 50%;
bottom: -18px;
width: 64px;
height: 10px;
margin-left: -32px;
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255, 59, 74, 0.55), transparent 70%);
filter: blur(2px);
animation: verifyBadgeShadow 2.8s ease-in-out infinite;
}
.verify-badge-circle {
position: absolute;
inset: 0;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding-top: 4px;
background: radial-gradient(circle at 40% 32%, rgba(255, 59, 74, 0.34), rgba(5, 5, 8, 0.93) 72%);
border: 2px solid rgba(255, 59, 74, 0.9);
box-shadow: 0 0 18px rgba(255, 59, 74, 0.6), inset 0 0 14px rgba(255, 59, 74, 0.3);
animation: verifyBadgeLevitate 2.8s ease-in-out infinite;
}
.verify-badge-circle svg {
width: 34px;
height: 34px;
color: var(--red);
filter: drop-shadow(0 0 6px var(--red));
}
.verify-badge-text {
font-family: var(--font-display);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
line-height: 1;
color: var(--red);
text-shadow: 0 0 6px rgba(255, 59, 74, 0.9);
}
.verify-badge:active .verify-badge-circle {
scale: 0.94;
}
@keyframes verifyBadgeLevitate {
0%, 100% { transform: translateY(0); box-shadow: 0 0 16px rgba(255, 59, 74, 0.55), inset 0 0 12px rgba(255, 59, 74, 0.25); }
50% { transform: translateY(-14px); box-shadow: 0 0 30px rgba(255, 59, 74, 0.9), inset 0 0 16px rgba(255, 59, 74, 0.4); }
}
@keyframes verifyBadgeShadow {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.65); opacity: 0.45; }
}
/* The history marker of a verification: the camera, red like the dashboard button. */
.timeline-camera {
flex: none;
width: 20px;
height: 20px;
margin: 1px 1.5px 0;
z-index: 1;
}
.event-verified .timeline-camera {
color: var(--red);
filter: drop-shadow(0 0 3px var(--red)) drop-shadow(0 0 7px rgba(255, 59, 74, 0.55));
}
/* Profile photo on the profile page (Components/Pages/Profile.razor): a rounded square, the user icon until one is uploaded. */
.avatar-edit {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;
}
.avatar-preview {
flex: none;
width: 96px;
height: 96px;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--panel);
border: 1px solid var(--panel-border);
color: var(--text-dim);
}
.avatar-preview img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.avatar-preview svg {
width: 44px;
height: 44px;
}
.avatar-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.avatar-actions form {
margin: 0;
}
/* The member's photo above the name on the public lock page (only when they show their name there). */
.public-avatar {
display: block;
width: 84px;
height: 84px;
margin: 0 auto 14px;
border-radius: 16px;
object-fit: cover;
border: 1px solid var(--panel-border);
box-shadow: 0 0 18px rgba(35, 242, 255, 0.25);
}