/* Page tours — the first-visit coach marks driven by tutorial.js. Shared by the five tools and the dashboard, and themed per page at runtime rather than in here: tutorial.js reads each page's own tokens off its wrapper and sets the roles below on the tour elements (see THEME_MAP there — the six pages do not agree on token *names*, so the mapping has to be explicit). The fallbacks in each var() are what a page gets if that ever fails, and are the shared style.css palette. Stacking: appended to , so they are siblings of .container (z-index 2) and .site-footer (2) rather than trapped inside either. That is the whole reason they are not rendered inside the page's own markup — this project has shipped a fixed bar painted under the footer before. */ .tour-scrim { position: fixed; inset: 0; z-index: 900; /* Transparent: the dim is the ring's box-shadow, so the two never double up. This layer exists to swallow clicks on the page while a tour is running. */ background: transparent; cursor: pointer; } .tour-ring { position: fixed; z-index: 901; border: 2px solid var(--accent, #7d2c3f); border-radius: 4px; box-shadow: 0 0 0 9999px rgba(12, 10, 16, 0.66); pointer-events: none; transition: top 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), left 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1); } /* A step with no target — the notation key, or an element that disappeared mid-tour. The ring collapses to nothing in the middle of the screen, which keeps the dim (the box-shadow is still painted) without ringing an arbitrary corner. */ .tour-ring.is-hidden { top: 50%; left: 50%; width: 0; height: 0; border-color: transparent; } .tour-tip { position: fixed; z-index: 902; width: min(330px, calc(100vw - 24px)); padding: 16px 18px 15px; background: var(--bg-surface, #fff); color: var(--text-primary, #1a1a1a); border: 1px solid var(--border, #d8d2d6); border-top: 3px solid var(--accent, #7d2c3f); box-shadow: 0 18px 44px -14px rgba(10, 8, 14, 0.5); animation: tourTipIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .tour-tip:focus { outline: none; } .tour-tip:focus-visible { outline: 2px solid var(--accent, #7d2c3f); outline-offset: 3px; } .tour-tip.is-centred { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 28px)); } @keyframes tourTipIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tour-tip.is-centred { animation-name: tourTipInCentred; } @keyframes tourTipInCentred { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } } .tour-count { display: block; margin-bottom: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tour-accent-text, var(--accent, #7d2c3f)); } .tour-text { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary, #4a4a52); } .tour-text b { color: var(--text-primary, #1a1a1a); font-weight: 600; } .tour-text a { color: var(--tour-accent-text, var(--accent, #7d2c3f)); text-underline-offset: 2px; } .tour-nav { display: flex; align-items: center; gap: 9px; margin-top: 15px; } .tour-dots { display: flex; gap: 5px; margin-right: auto; } .tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong, #b6adb4); } .tour-dots i.on { background: var(--accent, #7d2c3f); } .tour-btn { padding: 8px 15px; border: 1px solid transparent; border-radius: 3px; /* Both set by tutorial.js, measured against each other — white is unreadable on Word Match's gold, and half the site's accents fail against black too. */ background: var(--tour-btn-bg, var(--accent, #7d2c3f)); color: var(--tour-on-accent, #fff); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; /* 34px tall with the padding above; the shared 44px target rule applies to the primary controls of a page, and these two sit inside a dialog that also takes Enter and Esc. */ min-height: 34px; } .tour-btn-ghost { background: none; border-color: var(--border, #d8d2d6); color: var(--text-secondary, #4a4a52); } .tour-btn:hover { filter: brightness(1.08); } .tour-btn-ghost:hover { border-color: var(--accent, #7d2c3f); color: var(--text-primary, #1a1a1a); filter: none; } .tour-btn:focus-visible { outline: 2px solid var(--accent, #7d2c3f); outline-offset: 2px; } /* --- the notation key, the one step every page shares --------------------- */ .tour-key-h { display: block; margin-bottom: 11px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted, #6d6670); } .tour-key-row { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border, #d8d2d6); } .tour-key-row:first-of-type { border-top: none; padding-top: 0; } .tour-key-sample { text-align: center; font-size: 0.92rem; color: var(--text-primary, #1a1a1a); } .tour-key-sample.is-jp { font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif; font-size: 1.4rem; line-height: 1.3; } .tour-key-sample rt { font-size: 0.42em; font-weight: 600; color: var(--tour-accent-text, var(--accent, #7d2c3f)); } .tour-key-text { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary, #4a4a52); } .tour-badge { display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; background: color-mix(in srgb, var(--jlpt-n5, #4f8a5b) 20%, transparent); color: var(--jlpt-n5, #3d6d47); } /* --- the "?" button tutorial.js hangs off each page's own title ----------- */ .tour-help-btn { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; margin-left: 12px; padding: 5px 12px 5px 9px; border: 1px solid var(--border, #d8d2d6); border-radius: 999px; background: none; color: var(--text-muted, #6d6670); font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .tour-help-btn > span[aria-hidden] { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--tour-btn-bg, var(--accent, #7d2c3f)); color: var(--tour-on-accent, #fff); font-size: 0.7rem; font-weight: 700; line-height: 1; } .tour-help-btn:hover { border-color: var(--accent, #7d2c3f); color: var(--text-primary, #1a1a1a); } .tour-help-btn:focus-visible { outline: 2px solid var(--accent, #7d2c3f); outline-offset: 2px; } /* Deliberately no `overflow: hidden` on the body while a tour runs. Locking the page also blocks the tour's own window.scrollTo in some engines, and a step whose target is below the fold would then ring the bottom edge of the screen and point at nothing. The scrim already swallows clicks, and the ring is repositioned on scroll, so letting the page move is both safer and harmless. */ @media (max-width: 560px) { .tour-help-btn .tour-help-label { display: none; } .tour-help-btn { padding: 5px; gap: 0; } .tour-key-row { grid-template-columns: 70px 1fr; gap: 10px; } } @media (prefers-reduced-motion: reduce) { .tour-ring { transition: none; } .tour-tip { animation: none; } }