/* ═══════════════════════════════════════════════════════════════════ Wedding Shoots — visual onboarding tour Styles for the guided-tour backdrop, spotlight cut-out and tooltip card. Theme-aware via the shared --color-* custom properties, so it follows the light/dark toggle automatically. ═══════════════════════════════════════════════════════════════════ */ /* Lock scroll while a tour is running (JS toggles this on ). */ html.wstour-open { overflow: hidden; } /* Dimmed backdrop. The spotlight sits inside and "cuts" a hole with a giant box-shadow, so the highlighted element reads as lit. */ .wstour-backdrop { position: fixed; inset: 0; z-index: 20000; background: transparent; transition: background-color .2s ease; animation: wstourFade .2s ease both; } /* A target-less step describes the whole page: dim everything uniformly and leave only the guide card (z-index 20001) visible above the backdrop. */ .wstour-backdrop.wstour-page-focus { background: rgba(18, 14, 10, 0.62); } html[data-theme="dark"] .wstour-backdrop.wstour-page-focus { background: rgba(0, 0, 0, 0.72); } .wstour-spot { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(18, 14, 10, 0.62); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease, opacity .2s ease; pointer-events: none; opacity: 0; } html[data-theme="dark"] .wstour-spot { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72); } /* Tooltip card. */ .wstour-card { position: fixed; z-index: 20001; width: min(340px, calc(100vw - 24px)); background: var(--color-surface, #fff); color: var(--color-text, #1c1a17); border: 1px solid var(--color-border, #e6e1da); border-radius: 16px; padding: 1.05rem 1.15rem 0.9rem; box-shadow: 0 1px 2px rgba(20, 16, 12, .12), 0 18px 46px -18px rgba(20, 16, 12, .55); animation: wstourPop .22s cubic-bezier(.2, .8, .3, 1) both; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; } .wstour-title { font-size: 1rem; font-weight: 700; line-height: 1.3; padding-right: 1.4rem; margin-bottom: .35rem; color: var(--color-text, #1c1a17); } .wstour-body { font-size: .875rem; line-height: 1.5; color: var(--color-text-muted, #605a52); } .wstour-body strong { color: var(--color-text, #1c1a17); font-weight: 600; } .wstour-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .95rem; } .wstour-progress { font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--color-text-faint, #94897c); white-space: nowrap; } .wstour-actions { display: flex; align-items: center; gap: .4rem; } .wstour-btn { font: inherit; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: .42rem .85rem; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .12s, color .15s; line-height: 1; } .wstour-btn:active { transform: translateY(1px); } .wstour-skip, .wstour-prev { background: transparent; color: var(--color-text-muted, #605a52); border-color: transparent; } .wstour-prev { border-color: var(--color-border, #e6e1da); } .wstour-skip:hover, .wstour-prev:hover { background: color-mix(in srgb, var(--color-brand, #5C7A6B) 8%, transparent); color: var(--color-text, #1c1a17); } .wstour-next { background: var(--color-brand, #5C7A6B); color: #fff; border-color: var(--color-brand, #5C7A6B); } .wstour-next:hover { background: var(--color-brand-hover, var(--color-brand-dark, #4c6a5b)); border-color: var(--color-brand-hover, var(--color-brand-dark, #4c6a5b)); } .wstour-x { position: absolute; top: .55rem; right: .6rem; width: 26px; height: 26px; border: none; border-radius: 999px; background: transparent; color: var(--color-text-faint, #94897c); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .wstour-x::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); } .wstour-x:hover { background: color-mix(in srgb, var(--color-text, #1c1a17) 8%, transparent); color: var(--color-text, #1c1a17); } /* Little arrow linking the card to the highlighted element. */ .wstour-arrow { position: absolute; width: 14px; height: 14px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e6e1da); transform: rotate(45deg); display: none; } .wstour-arrow-up { top: -8px; border-right: none; border-bottom: none; } .wstour-arrow-down { bottom: -8px; border-left: none; border-top: none; } /* ── Replay launcher button (rendered by the Jinja macro) ── */ .wstour-launch { display: inline-flex; align-items: center; gap: .34rem; height: 34px; padding: 0 .7rem 0 .58rem; border-radius: 999px; border: 1px solid var(--color-border, #e6e1da); background: var(--color-surface, #fff); color: var(--color-text-muted, #605a52); font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .18s; } .wstour-launch:hover { color: var(--color-text, #1c1a17); border-color: color-mix(in srgb, var(--color-brand, #5C7A6B) 40%, var(--color-border, #e6e1da)); transform: translateY(-1px); box-shadow: 0 4px 12px -8px rgba(20, 16, 12, .5); } .wstour-launch svg { opacity: .85; } @keyframes wstourFade { from { opacity: 0; } to { opacity: 1; } } @keyframes wstourPop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .wstour-backdrop, .wstour-card { animation: none; } .wstour-spot { transition: opacity .2s ease; } } @media (max-width: 480px) { .wstour-card { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: .9rem .9rem .8rem; border-radius: 14px; } .wstour-foot { align-items: stretch; flex-direction: column; gap: .5rem; } .wstour-actions { justify-content: flex-end; gap: .3rem; } .wstour-btn { padding-inline: .72rem; } } @media (max-width: 340px) { .wstour-actions { justify-content: space-between; } .wstour-btn { padding-inline: .58rem; font-size: .76rem; } }