/* ========================================================================= Конвертер валют — Meta Display Glasses (600 x 600dp) ------------------------------------------------------------------------- Additive waveguide display: #000000 emits no light -> fully transparent, the real world shows through. Every visible surface therefore uses a dark GRAY, never pure black. Input model: D-pad moves focus, pinch = Enter on the focused element. NOTE: `touch-action: none` is deliberately NOT set on — that would opt this app into a continuous drag stream instead of D-pad focus moves. ========================================================================= */ :root { /* surfaces */ --bg: #000000; /* transparent on-glass canvas */ --surface-1: #13161D; /* cards, list items */ --surface-2: #1B1F28; /* keys, chips */ --surface-2b: #171A22; /* utility keys */ --surface-3: #262B37; /* focused surface */ --line: #2B3140; /* text */ --text: #FFFFFF; --text-2: #A7AEBE; --text-3: #838B9C; /* >= 4.5:1 on every surface below */ /* accents */ --mint: #5EE6C8; /* focus + primary accent */ --mint-dim: rgba(94, 230, 200, 0.16); --mint-glow: rgba(94, 230, 200, 0.30); --gold: #FFC94A; /* converted value */ --gold-dim: rgba(255, 201, 74, 0.10); --danger: #FF7A8A; --warn: #FFB454; --r-sm: 10px; --r-md: 16px; --r-lg: 20px; /* motion — curves from the Meta Display Glasses guidelines */ --ease-on: cubic-bezier(0.6, 0, 0.4, 1); --ease-off: cubic-bezier(0.24, 0.24, 0.6, 1); --ease-col-on: cubic-bezier(0.4, 0.04, 0.5, 1); --ease-col-off: cubic-bezier(0.2, 0.24, 0.9, 1); --ease-press: cubic-bezier(0.68, 0, 0.29, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 600px; height: 600px; overflow: hidden; background: var(--bg); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } #app { position: relative; width: 600px; height: 600px; } /* 8dp safe margin on every side — edge elements get clipped by rubberbanding. Written out longhand rather than `inset: 8px`: the shorthand needs Chromium 87+, and an unsupported shorthand would drop the offsets entirely and collapse every screen. */ .screen { position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px; display: flex; flex-direction: column; } .screen.hidden { display: none !important; } .hidden { display: none !important; } /* ========================================================================= Focus model — idle content 86%, targeted 100% + scale-in + mint ring ========================================================================= */ .focusable { border: 1.5px solid transparent; outline: none; cursor: pointer; transition: transform 625ms var(--ease-off), background-color 400ms var(--ease-col-off), border-color 400ms var(--ease-col-off), box-shadow 400ms var(--ease-col-off); } .focusable > * { opacity: 0.86; transition: opacity 400ms var(--ease-col-off); } /* `.is-focused` is mirrored onto the focused element by app.js: the on-glasses composer can take document focus, and a bare `:focus` ring disappears the moment that happens. */ .focusable:focus, .focusable.is-focused { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 0 22px var(--mint-glow); transition: transform 475ms var(--ease-on), background-color 300ms var(--ease-col-on), border-color 300ms var(--ease-col-on), box-shadow 300ms var(--ease-col-on); } .focusable:focus > *, .focusable.is-focused > * { opacity: 1; transition: opacity 300ms var(--ease-col-on); } .focusable:active { transition: transform 100ms var(--ease-press); } /* ========================================================================= HOME — status bar ========================================================================= */ .statusbar { flex: 0 0 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; color: var(--text-2); background: var(--surface-1); border-radius: var(--r-sm); } .net-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint-glow); transition: background-color 400ms var(--ease-col-off), box-shadow 400ms var(--ease-col-off); } .net-dot.stale { background: var(--warn); box-shadow: 0 0 8px rgba(255, 180, 84, 0.35); } .net-dot.offline { background: var(--danger); box-shadow: 0 0 8px rgba(255, 122, 138, 0.35); } .status-rate { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; color: var(--text); } .status-age { color: var(--text-3); font-size: 12px; white-space: nowrap; } /* ========================================================================= HOME — conversion card ========================================================================= */ .convert-card { flex: 0 0 auto; /* height follows its two rows; the keypad takes the rest */ margin-top: 8px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; display: flex; flex-direction: column; } .conv-row { flex: 1; display: grid; grid-template-columns: 1fr 126px; grid-template-rows: 14px auto; column-gap: 12px; align-items: center; } .conv-label { grid-area: 1 / 1; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); } .amount-input { grid-area: 2 / 1; width: 100%; min-width: 0; background: transparent; border: 1.5px solid transparent; border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: 36px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; padding: 2px 8px; margin-left: -8px; } .amount-input::placeholder { color: var(--text-3); } .amount-input:focus, .amount-input.is-focused { background: var(--surface-2); border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 0 22px var(--mint-glow); } .result-value { grid-area: 2 / 1; font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; color: var(--gold); white-space: nowrap; overflow: hidden; } /* auto-fit for long numbers — class set by app.js */ .fit-2 { font-size: 34px; } .fit-3 { font-size: 28px; } .fit-4 { font-size: 23px; } .conv-sep { flex: 0 0 22px; display: flex; align-items: center; gap: 10px; } .conv-sep::before, .conv-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } .conv-sep-icon { font-size: 13px; line-height: 1; color: var(--text-3); } .cur-chip { grid-area: 1 / 2 / span 2 / span 1; height: 64px; background: var(--surface-2); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--text); font: inherit; } .cur-chip:focus, .cur-chip.is-focused { background: var(--surface-3); transform: scale(0.94); } .cur-chip:active { transform: scale(0.90); } .chip-sym { font-size: 22px; font-weight: 600; line-height: 1.15; } .chip-code { font-size: 12px; font-weight: 700; letter-spacing: 0.11em; color: var(--text-2); } .chip-accent { background: var(--gold-dim); } .chip-accent .chip-sym { color: var(--gold); } .chip-accent:focus, .chip-accent.is-focused { background: var(--surface-3); } /* ========================================================================= HOME — keypad (4 x 4, D-pad friendly 2D grid) ========================================================================= */ .keypad { flex: 1; min-height: 0; margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px; } .key { background: var(--surface-2); border-radius: var(--r-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--text); font: inherit; } .key:focus, .key.is-focused { background: var(--surface-3); transform: scale(0.935); } .key:active { transform: scale(0.90); } .key-glyph { font-size: 29px; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; } .key-cap { font-size: 10px; letter-spacing: 0.05em; color: var(--text-3); } .key-util { background: var(--surface-2b); } .key-util .key-glyph { font-size: 24px; color: var(--text-2); } .key-util:focus .key-glyph, .key-util.is-focused .key-glyph { color: var(--text); } .key-swap { background: var(--mint-dim); } .key-swap .key-glyph { color: var(--mint); } /* ========================================================================= Top bar (picker / menu screens) ========================================================================= */ .topbar { flex: 0 0 46px; display: flex; align-items: baseline; gap: 12px; padding: 4px 4px 10px; } .topbar-title { font-size: 22px; font-weight: 700; flex: 1; } .topbar-meta { font-size: 12px; color: var(--text-3); white-space: nowrap; } /* ========================================================================= PICKER — search + scrolling list with scrims ========================================================================= */ .search-row { flex: 0 0 52px; display: flex; gap: 8px; } .search-input { flex: 1; min-width: 0; background: var(--surface-2); border: 1.5px solid transparent; border-radius: var(--r-md); color: var(--text); font: inherit; font-size: 17px; padding: 0 16px; } .search-input::placeholder { color: var(--text-3); } .search-input:focus, .search-input.is-focused { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint), 0 0 22px var(--mint-glow); } /* Star button — flips the list into "edit favourites" mode, so a row tap toggles the star instead of picking the currency. Keeps the list at one focusable per row instead of two. */ .fav-toggle { flex: 0 0 62px; background: var(--surface-2); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--text-3); font: inherit; } .fav-toggle:focus, .fav-toggle.is-focused { background: var(--surface-3); transform: scale(0.93); } .fav-toggle:active { transform: scale(0.89); } .fav-toggle-glyph { font-size: 24px; line-height: 1; } .fav-toggle.editing { background: var(--gold-dim); } .fav-toggle.editing .fav-toggle-glyph { color: var(--gold); } .list-wrap { position: relative; flex: 1; min-height: 0; margin-top: 8px; } .list { height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 8px; scrollbar-width: none; } .list::-webkit-scrollbar { display: none; } /* Scrims signal that more content exists above / below */ .scrim { position: absolute; left: 0; right: 0; height: 40px; pointer-events: none; z-index: 2; } .scrim-top { top: 0; background: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0) 100%); } .scrim-bottom { bottom: 0; background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 100%); } .list-section { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-3); padding: 8px 4px 0; } .cur-item { flex: 0 0 78px; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px; padding: 0 14px; background: var(--surface-1); border-radius: var(--r-md); text-align: left; color: var(--text); font: inherit; scroll-margin: 44px; } .cur-item:focus, .cur-item.is-focused { background: var(--surface-3); transform: scale(0.955); } .cur-item:active { transform: scale(0.93); } .cur-badge { width: 54px; height: 50px; border-radius: 13px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 600; color: var(--text); overflow: hidden; } .cur-badge.small { font-size: 13px; letter-spacing: 0.04em; } .cur-item.selected .cur-badge { background: var(--mint-dim); color: var(--mint); } .cur-main { min-width: 0; } .cur-code2 { display: block; font-size: 16px; font-weight: 700; letter-spacing: 0.06em; } .cur-star { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--gold); margin-left: 6px; } .cur-star.off { color: var(--text-3); } .cur-name { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cur-rate { font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .cur-item.selected .cur-rate { color: var(--mint); } .list-empty { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 15px; } /* ========================================================================= MENU ========================================================================= */ .menu-list { display: flex; flex-direction: column; gap: 8px; } .menu-row { flex: 0 0 84px; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 14px; padding: 0 16px; background: var(--surface-1); border-radius: var(--r-md); text-align: left; color: var(--text); font: inherit; } .menu-row:focus, .menu-row.is-focused { background: var(--surface-3); transform: scale(0.955); } .menu-row:active { transform: scale(0.93); } .menu-icon { width: 50px; height: 46px; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 21px; color: var(--mint); } .menu-row-danger .menu-icon { color: var(--danger); } .menu-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .menu-title { font-size: 17px; font-weight: 600; } .menu-sub { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .info-block { margin-top: auto; padding: 12px 14px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 12px; line-height: 1.6; color: var(--text-3); } .info-block b { color: var(--text-2); font-weight: 600; } /* ========================================================================= Toast — 24dp from top, centred, max 536dp (per guidelines) ========================================================================= */ .toast { position: absolute; top: 24px; left: 50%; max-width: 536px; transform: translateX(-50%) translateY(-140%); background: var(--surface-3); border: 1px solid var(--line); border-radius: 24px; padding: 12px 22px; font-size: 15px; color: var(--text); text-align: center; z-index: 50; opacity: 0; pointer-events: none; transition: transform 300ms var(--ease-on), opacity 300ms var(--ease-on); } .toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; } .toast.error { border-color: var(--danger); } .toast.success { border-color: var(--mint); } @media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }