/* Start Here — gentle first-visit "choose your path" welcome. Rendered as a decoupled overlay appended to by start-here.js, so the home React render never clobbers it. Colors are hardcoded to the site theme (parchment + charcoal ink + antique gold), matching the rest of the hand-tuned palette rather than CSS tokens. */ .sh-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(38, 32, 20, 0.55); opacity: 0; transition: opacity 260ms ease; } .sh-overlay.sh-open { opacity: 1; } .sh-overlay[hidden] { display: none; } .sh-modal { width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fbf6ea; border: 1.5px solid #b89a5c; box-shadow: 0 18px 50px rgba(38, 32, 20, 0.28); transform: translateY(12px); transition: transform 260ms ease; } .sh-overlay.sh-open .sh-modal { transform: translateY(0); } .sh-close-row { display: flex; justify-content: flex-end; padding: 10px 12px 0; } .sh-close { border: none; background: transparent; color: #8a7f68; cursor: pointer; padding: 4px; line-height: 0; transition: color 140ms ease; } .sh-close:hover { color: #2c2a26; } .sh-body { padding: 4px 32px 28px; text-align: center; } .sh-eyebrow { font-size: 12px; letter-spacing: 0.2em; color: #a8823f; margin: 0 0 8px; text-transform: uppercase; } .sh-title { font-family: 'Cinzel', serif; font-size: 27px; line-height: 1.18; font-weight: 700; color: #2c2a26; margin: 0 0 7px; } .sh-lead { font-size: 17px; line-height: 1.45; color: #5f5647; margin: 0 0 20px; } .sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; } .sh-path { display: flex; align-items: center; gap: 11px; background: #f4ecd9; border: 1px solid #cdb987; padding: 13px 15px; color: #2c2a26; text-decoration: none; transition: border-color 140ms ease, background 140ms ease; } /* Pin text colors on hover: the site's global `a:hover` rule would otherwise recolor the label to the theme accent and wash it out. */ .sh-path:hover { border-color: #a8823f; background: #f0e6cd; color: #2c2a26; } .sh-path:hover .sh-path-label { color: #2c2a26; } .sh-path:hover .sh-path-icon, .sh-path:hover .sh-path-arrow { color: #a8823f; } .sh-path .sh-path-icon { color: #a8823f; flex: 0 0 auto; line-height: 0; } .sh-path .sh-path-icon svg { width: 19px; height: 19px; } .sh-path .sh-path-label { flex: 1; font-size: 16px; line-height: 1.2; color: #2c2a26; } .sh-path .sh-path-arrow { color: #a8823f; font-size: 15px; flex: 0 0 auto; } .sh-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; } .sh-once { font-size: 13px; color: #9a8a63; } .sh-later { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.06em; color: #5f5647; background: transparent; border: none; border-bottom: 1px solid #c9b78d; padding: 0 0 2px; cursor: pointer; text-transform: uppercase; transition: color 140ms ease, border-color 140ms ease; } .sh-later:hover { color: #2c2a26; border-color: #a8823f; } @media (max-width: 520px) { .sh-grid { grid-template-columns: 1fr; } .sh-title { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .sh-overlay, .sh-modal { transition: none; } .sh-modal { transform: none; } }