:root { --heading: 'Source Serif Pro', Georgia, serif; --sans: 'Inter', -apple-system, sans-serif; --bg: #EFEDE8; --card: #FFFFFF; --inner: #F7F5F1; --border: #D8D5CE; --text-primary: #0F0F0F; --text-body: #3A3A3A; --text-muted: #6B6B6B; --text-subtle: #9A9A9A; --accent: #1E5F8C; --a: #3D7A6E; --a-tint: rgba(61,122,110,.10); } * { box-sizing: border-box; } /* Stop mobile browsers (esp. Android Chrome) auto-inflating text, which can enlarge labels past their container and clip them. Keep at 100% so pinch-zoom still works. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); font-family: var(--heading); color: var(--text-primary); -webkit-font-smoothing: antialiased; } .progress { height: 3px; background: var(--border); position: relative; } .progress-fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent); transition: width 0.3s ease; } .page { max-width: 660px; margin: 0 auto; padding: 40px 24px 100px; } .stepper { display: flex; gap: 7px; justify-content: center; margin: 0 auto 22px; max-width: 340px; } .step { flex: 1; text-align: center; } .step-bar { height: 4px; background: var(--border); margin-bottom: 6px; transition: background 0.3s; } .step-bar.done, .step-bar.active { background: var(--accent); } .step-label { font-family: var(--sans); font-size: 8.5px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; color: var(--text-subtle); } .step-label.active { color: var(--accent); } .q-meta { font-family: var(--sans); font-size: 11px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; font-weight: 600; text-align: center; margin: 0 0 28px; } /* font-size/family/weight forced with !important so the host WordPress theme's h2 styling cannot leak in and inflate the question heading on dandobos.com. */ .q-text { font-family: var(--heading) !important; font-size: 28px !important; font-weight: 400 !important; line-height: 1.3 !important; text-align: center; margin: 0 0 40px; letter-spacing: -0.3px; color: var(--text-primary); } .q-sub { font-family: var(--heading); font-style: italic; font-size: 16px; color: var(--text-muted); text-align: center; margin: -30px 0 36px; } .options { display: flex; flex-direction: column; gap: 12px; } .option { background: var(--card); border: 1px solid var(--border); padding: 18px 22px; font-family: var(--heading); font-size: 17px; color: var(--text-body); text-align: left; cursor: pointer; transition: all 0.15s; line-height: 1.4; width: 100%; display: block; } /* black hover only on true mouse devices; on touch (iOS Safari) :hover sticks after a tap and would leave a button black on the next question (reported by a beta tester). */ @media (hover: hover) and (pointer: fine) { .option:hover { border-color: var(--text-primary); background: var(--text-primary); color: var(--card); } } .option.selected, .option.selected:hover { border-color: var(--accent); background: var(--accent); color: var(--card); } .word-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .word-tile { background: var(--card); border: 1px solid var(--border); padding: 24px 8px; font-family: var(--heading); font-size: 19px; color: var(--text-primary); text-align: center; cursor: pointer; transition: all 0.15s; } @media (hover: hover) and (pointer: fine) { .word-tile:hover { border-color: var(--text-primary); background: var(--text-primary); color: var(--card); } } .word-tile.selected, .word-tile.selected:hover { background: var(--accent); color: var(--card); border-color: var(--accent); } .activity-item { background: var(--card); border: 1px solid var(--border); padding: 20px 24px; margin-bottom: 12px; } .activity-num { font-family: var(--sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; margin-bottom: 8px; } .activity-input { width: 100%; font-family: var(--heading); font-size: 18px; border: none; border-bottom: 1px solid var(--border); padding: 4px 0 8px; background: transparent; color: var(--text-primary); outline: none; } .activity-input:focus { border-bottom-color: var(--accent); } .activity-input::placeholder { color: var(--text-subtle); font-style: italic; } .rate-item { background: var(--card); border: 1px solid var(--border); padding: 22px 24px; margin-bottom: 14px; } .rate-label { font-family: var(--heading); font-size: 18px; color: var(--text-primary); font-weight: 600; margin-bottom: 16px; } .rate-likert { display: flex; gap: 6px; justify-content: space-between; } .rate-btn { flex: 1; background: transparent; border: 1px solid var(--border); padding: 9px 4px; font-family: var(--sans); font-size: 10px; color: var(--text-muted); cursor: pointer; transition: all 0.15s; } .rate-btn:hover { border-color: var(--accent); color: var(--accent); } .rate-btn.selected { background: var(--accent); border-color: var(--accent); color: var(--card); } .rank-wrap { display: flex; flex-direction: column; gap: 8px; } .rank-row { background: var(--card); border: 1px solid var(--border); padding: 16px 18px; display: flex; align-items: center; gap: 14px; } .rank-num { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--text-subtle); width: 24px; letter-spacing: 1px; } .rank-label { flex: 1; font-family: var(--heading); font-size: 17px; color: var(--text-primary); } .rank-controls { display: flex; gap: 4px; } .rank-btn { background: transparent; border: 1px solid var(--border); width: 32px; height: 32px; font-family: var(--sans); font-size: 14px; color: var(--text-muted); cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; } .rank-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .rank-btn:disabled { opacity: 0.3; cursor: not-allowed; } .rank-nudge { font-family: var(--heading); font-style: italic; font-size: 16px; color: var(--accent); text-align: center; margin: 24px auto 0; max-width: 460px; line-height: 1.5; } .textarea-input { width: 100%; background: var(--card); border: 1px solid var(--border); padding: 20px 22px; font-family: var(--heading); font-size: 17px; color: var(--text-primary); min-height: 140px; resize: vertical; margin-bottom: 24px; outline: none; } .textarea-input:focus { border-color: var(--accent); } .textarea-input::placeholder { color: var(--text-subtle); font-style: italic; } .continue-btn { display: block; margin: 32px auto 0; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--card); background: var(--text-primary); border: none; padding: 16px 44px; cursor: pointer; transition: opacity 0.15s; } .continue-btn:hover { opacity: 0.85; } .continue-btn:disabled { opacity: 0.3; cursor: not-allowed; } .back-link { text-align: center; margin-top: 36px; } .back-link button { background: transparent; border: none; font-family: var(--sans); font-size: 12px; color: var(--text-muted); cursor: pointer; } .back-link button:hover { color: var(--accent); } .intro-eyebrow { font-family: var(--sans); font-size: 14px; letter-spacing: 4.5px; color: var(--accent); text-transform: uppercase; font-weight: 700; text-align: center; margin: 60px 0 24px; } .page.invited-intro-page { padding-top: 16px; } .invited-intro-page .intro-eyebrow { margin-top: 0; margin-bottom: 20px; } .invited-intro-page .intro-desc { margin-bottom: 32px; } .intro-title { font-family: var(--heading); font-size: 56px; font-weight: 400; text-align: center; margin: 0 0 24px; letter-spacing: -1px; line-height: 1.05; } .intro-desc { font-family: var(--heading); font-style: italic; font-size: 19px; color: var(--text-body); text-align: center; line-height: 1.5; max-width: 520px; margin: 0 auto 48px; } .intro-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 520px; margin: 0 auto 48px; } .intro-stat { background: var(--card); border: 1px solid var(--border); padding: 24px 12px; text-align: center; } .intro-stat-num { font-family: var(--heading); font-size: 32px; font-weight: 400; color: var(--accent); letter-spacing: -0.5px; margin-bottom: 6px; } .intro-stat-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; font-weight: 600; } .intro-title .inv-title-key { color: var(--accent); font-weight: 700; } .inv-spectrum { display: grid; grid-template-columns: repeat(8, 1fr); height: 7px; max-width: 300px; margin: 0 auto 24px; border-radius: 999px; overflow: hidden; } .inv-spectrum span:nth-child(1) { background: #3D7A6E; } .inv-spectrum span:nth-child(2) { background: #B8902F; } .inv-spectrum span:nth-child(3) { background: #1E5F8C; } .inv-spectrum span:nth-child(4) { background: #A85A3D; } .inv-spectrum span:nth-child(5) { background: #C2722F; } .inv-spectrum span:nth-child(6) { background: #B23A2E; } .inv-spectrum span:nth-child(7) { background: #557C9E; } .inv-spectrum span:nth-child(8) { background: #6B6B6B; } .inv-pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 520px; margin: -4px auto 28px; } .inv-pattern-pill { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--text-body); letter-spacing: 0; } .inv-pattern-pill i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .gate-title { font-family: var(--heading); font-size: 40px; font-weight: 400; text-align: center; margin: 0 0 20px; letter-spacing: -0.5px; line-height: 1.15; } .gate-desc { font-family: var(--heading); font-style: italic; font-size: 18px; color: var(--text-body); text-align: center; line-height: 1.5; max-width: 460px; margin: 0 auto 40px; } .email-input { display: block; width: 100%; background: var(--card); border: 1px solid var(--border); padding: 18px 22px; font-family: var(--heading); font-size: 17px; color: var(--text-primary); margin-bottom: 16px; outline: none; } .gate-fine { font-family: var(--sans); font-size: 12px; color: var(--text-subtle); text-align: center; margin-top: 18px; line-height: 1.5; } /* ---- result page ---- */ .res-eyebrow { font-family: var(--sans); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--accent); text-align: center; margin: 0 0 16px; } .res-name { font-family: var(--heading); font-size: 44px; font-weight: 400; text-align: center; letter-spacing: -0.5px; line-height: 1.1; margin: 0 0 22px; } .res-share { font-family: var(--heading); font-style: italic; font-size: 21px; color: var(--text-body); text-align: center; line-height: 1.45; max-width: 520px; margin: 0 auto; } .res-narrative { max-width: 600px; margin: 30px auto 0; } .res-narrative p { font-family: var(--heading); font-size: 17px; line-height: 1.65; color: var(--text-body); margin: 0 0 14px; } .res-narrative p:last-child { margin-bottom: 0; } /* bullet-format narratives (beta feedback 2026-07-10); used in res-narrative and res-neighbour-narr */ ul.res-narr-list { list-style: none; margin: 0 0 16px; padding: 0; } .res-narr-list li { position: relative; padding-left: 22px; margin: 0 0 9px; font-family: var(--heading); font-size: 17px; line-height: 1.55; color: var(--text-body); } .res-neighbour-narr .res-narr-list li { font-size: 15.5px; } .res-narr-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } p.res-narr-label { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 18px 0 4px; } p.res-narr-labeltext { margin: 0 0 6px; } .res-divider { height: 1px; background: var(--border); margin: 42px 0; } .res-section-label { font-family: var(--heading); font-size: 23px; font-weight: 600; color: var(--text-primary); letter-spacing: 0; margin: 0 0 24px; text-align: center; } .res-dim { margin-bottom: 34px; } .res-dim-name { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; } .res-verdict { font-family: var(--heading); font-size: 27px; font-weight: 400; margin-bottom: 8px; line-height: 1.1; } .res-sentence { font-family: var(--heading); font-style: italic; font-size: 16px; color: var(--text-body); line-height: 1.5; margin-bottom: 24px; } .res-bar { position: relative; height: 4px; background: var(--border); margin: 0 4px; } .res-circle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 16px; border-width: 2px; border-style: solid; } .res-poles { display: flex; justify-content: space-between; margin: 16px 4px 0; font-family: var(--sans); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-subtle); } .res-regret { background: var(--card); border: 1px solid var(--border); padding: 26px; } .res-regret-top { display: flex; align-items: baseline; justify-content: space-between; } .res-regret-label { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } .res-regret-meter { display: flex; gap: 5px; margin: 16px 0 14px; } .res-regret-seg { flex: 1; height: 8px; background: var(--border); } .res-regret-level { font-family: var(--sans); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; text-align: center; margin: 0 0 14px; } .res-regret-desc { font-family: var(--heading); font-style: italic; font-size: 15px; color: var(--text-body); line-height: 1.5; text-align: center; } .res-checklist { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--a); padding: 24px 26px; } .rc-eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin: 0 0 5px; } .rc-title { font-family: var(--heading); font-size: 22px; font-weight: 600; color: var(--text-primary); line-height: 1.2; margin: 0 0 5px; } .rc-sub { font-family: var(--heading); font-style: italic; font-size: 15px; color: var(--text-body); line-height: 1.5; margin: 0 0 16px; } .rc-item { display: flex; gap: 13px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--inner); cursor: pointer; } .rc-item:first-of-type { border-top: 0; padding-top: 2px; } .rc-cb { flex: 0 0 20px; width: 20px; height: 20px; margin: 2px 0 0; cursor: pointer; } .rc-txt { font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--text-primary); } .rc-cb:checked + .rc-txt { color: var(--text-muted); text-decoration: line-through; } .rc-q { padding: 10px 0 4px; } .rc-qt { display: block; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--text-primary); margin: 0 0 7px; } .rc-a { width: 100%; font-family: var(--heading); font-size: 15.5px; line-height: 1.5; color: var(--text-primary); background: var(--inner); border: 1px solid var(--border); padding: 10px 12px; min-height: 52px; resize: vertical; outline: none; } .rc-a:focus { border-color: var(--accent); } .rc-a::placeholder { color: var(--text-subtle); font-style: italic; } .rc-send { width: 100%; margin-top: 16px; } .rc-note { font-family: var(--sans); font-size: 13px; text-align: center; margin: 10px 0 0; display: none; } .rc-note.ok { display: block; color: #3D7A6E; } .rc-note.err { display: block; color: #B23A2E; } .res-chapter { background: var(--inner); border: 1px solid var(--border); padding: 30px; } .res-chapter-eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 12px; } .res-chapter-title { font-family: var(--heading); font-style: italic; font-size: 22px; line-height: 1.3; margin-bottom: 14px; } .res-chapter-list { margin: 0; padding-left: 1.1em; } .res-chapter-list li { margin-bottom: 8px; } .res-chapter-list li:last-child { margin-bottom: 0; } .res-chapter-why { font-family: var(--heading); font-size: 16px; color: var(--text-body); line-height: 1.55; } .res-dl { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); } .res-dl-label { font-family: var(--heading); font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 0 14px; } .res-dl-label-more { margin-top: 22px; } .res-dl-row { display: flex; gap: 10px; flex-wrap: wrap; } .res-dl-btn { flex: 1 1 0; min-width: 110px; text-align: center; padding: 12px 14px; background: var(--card); border: 1px solid var(--border); font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .res-dl-btn:hover { border-color: var(--accent); color: var(--accent); } .res-note { font-family: var(--heading); font-style: italic; font-size: 15px; color: var(--text-muted); line-height: 1.55; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); } .res-book-text { font-family: var(--heading); font-size: 17px; color: var(--text-body); line-height: 1.55; max-width: 500px; margin: 0 auto 22px; text-align: center; } .res-book-head { font-family: var(--heading); font-size: 23px; font-weight: 600; color: var(--text-primary); line-height: 1.3; max-width: 540px; margin: 0 auto 16px; text-align: center; } .res-bookend { font-family: var(--heading); font-style: italic; font-size: 15px; color: var(--text-muted); text-align: center; margin-top: 38px; } .res-borderline { font-family: var(--heading); font-style: italic; font-size: 14.5px; color: var(--text-primary); line-height: 1.5; text-align: center; max-width: 540px; margin: 22px auto 0; } .res-borderline-link { color: var(--text-primary); text-decoration: underline; cursor: pointer; font-weight: 700; } .res-neighbour { background: var(--inner); border: 1px solid var(--border); padding: 26px 28px; max-width: 600px; margin: 18px auto 0; } .res-neighbour-eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 0 0 8px; text-align: center; } .res-neighbour-name { font-family: var(--heading); font-size: 26px; font-weight: 400; text-align: center; margin: 0 0 12px; letter-spacing: -0.3px; } .res-neighbour-share { font-family: var(--heading); font-style: italic; font-size: 17px; color: var(--text-body); text-align: center; line-height: 1.45; margin: 0 0 16px; } .res-neighbour-narr p { font-family: var(--heading); font-size: 15.5px; line-height: 1.6; color: var(--text-body); margin: 0 0 12px; } .res-neighbour-narr p:last-child { margin-bottom: 0; } .dd-card { background: var(--card); border: 1px solid var(--border); padding: 40px 36px; } .dd-row { display: flex; gap: 32px; align-items: flex-start; padding: 30px 0; } .dd-row + .dd-row { border-top: 1px solid var(--inner); } .dd-row:first-child { padding-top: 4px; } .dd-row:last-child { padding-bottom: 4px; } .dd-left { width: 150px; flex-shrink: 0; } .dd-dimlabel { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--text-primary); } .dd-verdict { font-family: var(--heading); font-size: 30px; font-weight: 400; line-height: 1.08; margin-top: 6px; letter-spacing: -0.5px; } .dd-right { flex: 1; padding-top: 2px; } .dd-micro { font-family: var(--heading); font-size: 14.5px; font-style: italic; color: var(--text-muted); line-height: 1.45; margin-bottom: 34px; } .dd-track { height: 3px; background: var(--inner); position: relative; border-radius: 2px; } .dd-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; } .dd-numcircle { position: absolute; top: -23px; transform: translateX(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 2px solid; display: flex; align-items: center; justify-content: center; font-family: var(--heading); font-size: 20px; font-weight: 600; line-height: 1; } .dd-poles { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-subtle); margin-top: 32px; } .dd-poles .on { color: var(--text-primary); font-weight: 700; } /* ---- share loop ---- */ .sharecard { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 26px rgba(40,32,12,.10); margin: 0 auto 26px; } .sc-top { height: 6px; } .sc-in { padding: 38px 40px 30px; text-align: center; } .sc-wordmark { font-family: var(--sans); font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin: 0 0 16px; } .sc-ey { font-family: var(--sans); font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 5px; } .sc-arch { font-family: var(--heading); font-size: 29px; font-weight: 700; line-height: 1.1; margin: 0 0 9px; letter-spacing: -0.4px; } .sc-claim { font-family: var(--heading); font-style: italic; font-size: 15px; color: var(--text-body); line-height: 1.45; margin: 0 auto 20px; max-width: 300px; } .sc-dd { text-align: left; margin: 4px 0 18px; } .sc-dd-row { padding: 16px 0 22px; } .sc-dd-row + .sc-dd-row { border-top: 1px solid var(--inner); margin-top: 4px; } .sc-dd-top { display: flex; justify-content: space-between; align-items: baseline; } .sc-dd-label { font-family: var(--sans); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--text-primary); } .sc-dd-verdict { font-family: var(--heading); font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: -0.3px; } .sc-dd-track { height: 3px; background: var(--inner); position: relative; border-radius: 2px; margin-top: 26px; } .sc-dd-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; } .sc-dd-circle { position: absolute; top: -19px; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 2px solid; display: flex; align-items: center; justify-content: center; font-family: var(--heading); font-size: 15px; font-weight: 700; line-height: 1; } .sc-foot { font-family: var(--sans); font-size: 10.5px; letter-spacing: .5px; color: var(--text-subtle); border-top: 1px solid var(--border); padding: 12px 0 0; margin: 18px 0 0; } .share-prompt { font-family: var(--heading); font-size: 21px; font-weight: 600; color: var(--text-primary); margin: 0 0 18px; line-height: 1.35; text-align: center; } .share-btns { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .sbtn { font-family: var(--sans); font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--card); color: var(--text-primary); border-radius: 9px; padding: 11px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .14s; text-decoration: none; } .sbtn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); } .sbtn .g { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; } .sbtn.native { background: var(--text-primary); color: #fff; border-color: var(--text-primary); } .sbtn.native .g { background: rgba(255,255,255,.18); } .g-x { background: #000; } .g-li { background: #0A66C2; } .g-wa { background: #25D366; } .g-fb { background: #1877F2; } .g-cp { background: #6B6B6B; } .g-ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); } .challenge { background: var(--inner); border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; text-align: center; margin-top: 26px; } .ch-h { font-family: var(--heading); font-size: 18px; font-weight: 600; margin: 0 0 6px; } .ch-b { font-family: var(--sans); font-size: 13px; color: var(--text-body); line-height: 1.6; margin: 0 auto 16px; max-width: 380px; } .ch-btn { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; background: var(--text-primary); color: #fff; border: none; border-radius: 8px; padding: 13px 22px; cursor: pointer; } .ch-btn:hover { opacity: .88; } .share-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--text-primary); color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 11px 18px; border-radius: 9px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50; } .share-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- invite landing + compare (arriving via a friend's share link) ---- */ .inv-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 20px 24px; max-width: 460px; margin: 0 auto 30px; text-align: left; } .inv-ey { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin: 0 0 7px; } .inv-name { font-family: var(--heading); font-size: 26px; font-weight: 600; margin: 0 0 7px; } .inv-claim { font-family: var(--heading); font-style: italic; font-size: 15.5px; line-height: 1.45; color: var(--text-body); margin: 0; } .cmp-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; } .cmp-names { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--sans); font-size: 13px; color: var(--text-muted); margin: 0 0 12px; } .cmp-names b { color: var(--text-primary); font-weight: 600; } .cmp-row { padding: 16px 0 22px; border-bottom: 1px solid #E7E4DE; } .cmp-row:last-of-type { border-bottom: none; } .cmp-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; } .cmp-dim { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-body); } .cmp-verdict { font-family: var(--sans); font-size: 12px; font-weight: 600; } .cmp-line { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; } .cmp-who { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-subtle); width: 44px; flex: none; } .cmp-track { flex: 1; height: 3px; background: var(--inner); position: relative; border-radius: 2px; } .cmp-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; } .cmp-fill.them { opacity: .4; } .cmp-circle { position: absolute; top: -16px; transform: translateX(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--card); border: 2px solid; display: flex; align-items: center; justify-content: center; font-family: var(--heading); font-size: 14px; font-weight: 600; line-height: 1; } .cmp-circle.them { background: var(--inner); } .cmp-band { font-family: var(--heading); font-style: italic; font-size: 14px; color: var(--text-body); } .cmp-summary { font-family: var(--heading); font-size: 16.5px; line-height: 1.55; color: var(--text-body); margin: 16px 0 0; } .cmp-back { margin-top: 20px; padding-top: 18px; border-top: 1px solid #E7E4DE; text-align: center; } .cmp-back-h { font-family: var(--heading); font-size: 19px; font-weight: 600; margin: 0 0 12px; } @media (max-width: 600px) { .dd-row { flex-direction: column; gap: 10px; } .dd-left { width: auto; } .dd-verdict { font-size: 32px; } .dd-micro { margin-bottom: 38px; } } @media (max-width: 600px) { .q-text { font-size: 22px !important; } .intro-title { font-size: 40px; } .page.invited-intro-page { padding-top: 14px; } .word-tile { font-size: 17px; padding: 18px 6px; } .res-name { font-size: 34px; } .res-share { font-size: 18px; } .sc-in { padding: 28px 22px 22px; } } /* ---- new share card (wc) ---- */ .wc { position:relative; --a:#3D7A6E; --a-tint:rgba(61,122,110,.10); width:440px; max-width:100%; margin:0 auto 26px; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:36px 36px 32px; box-shadow:0 8px 26px rgba(40,32,12,.10); } .card-corner { position:absolute; top:18px; right:18px; z-index:3; width:32px; height:32px; border-radius:50%; background:var(--inner); border:1px solid var(--border); color:var(--text-primary); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .14s; } .card-corner:hover { border-color:var(--a); color:var(--a); } .foot-dl { margin-top:24px; padding-top:20px; border-top:1px solid var(--border); text-align:center; } .dl-discover { font-family:var(--heading); font-weight:700; font-size:18px; color:var(--text-primary); margin:0 0 12px; letter-spacing:-.2px; } .dl-url { display:inline-block; font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.3px; color:#fff; background:var(--text-primary); border-radius:9px; padding:12px 26px; } .seg { display:flex; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:4px; margin:0 0 18px; gap:4px; } .seg-btn { flex:1; font-family:var(--sans); font-size:11px; font-weight:600; color:var(--text-muted); background:transparent; border:none; padding:9px 6px; border-radius:7px; cursor:pointer; transition:all .14s; line-height:1.25; } .seg-btn.active { background:var(--a); color:#fff; } .save-green { display:flex; flex-direction:column; align-items:center; gap:4px; width:100%; background:var(--a); color:#fff; border:none; border-radius:12px; padding:13px 28px; box-shadow:0 5px 16px rgba(61,122,110,.30); cursor:pointer; } .save-green:hover { background:#346b60; } .save-green .main { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13.5px; font-weight:700; } .save-green .sub { font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.3px; opacity:.92; } .wc-bar { height:6px; background:var(--a); margin:-36px -36px 22px; border-radius:16px 16px 0 0; } .wc-ey { font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--a); text-align:center; margin:0 0 12px; } .wc-name { font-family:var(--heading); font-weight:700; font-size:30px; line-height:1.1; letter-spacing:-.5px; text-align:center; margin:0 0 14px; } .wc-name b { color:var(--a); font-weight:700; } .wc-claim { font-family:var(--heading); font-style:italic; font-size:17.5px; line-height:1.45; color:var(--text-body); text-align:center; max-width:330px; margin:0 auto 18px; } .wc-label { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-primary); text-align:center; margin:0 0 18px; } .wc-list { display:flex; flex-direction:column; gap:12px; } .wc-item { display:flex; gap:13px; align-items:flex-start; padding:14px 16px; background:var(--inner); border:1px solid var(--border); border-radius:11px; } .wc-ck { width:24px; height:24px; border-radius:50%; background:var(--a); color:#fff; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; font-family:var(--sans); margin-top:1px; } .wc-it-t { font-family:var(--heading); font-weight:700; font-size:16px; margin:0 0 2px; line-height:1.2; } .wc-it-d { font-family:var(--heading); font-size:13.5px; color:var(--text-muted); line-height:1.45; margin:0; } .wc-divh { display:flex; align-items:center; gap:14px; margin:28px 0 18px; } .wc-divh::before, .wc-divh::after { content:''; flex:1; height:1px; background:var(--border); } .wc-divh span { font-family:var(--heading); font-weight:700; font-size:19px; } .wc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .wc-cell { font-family:var(--heading); font-size:14px; color:var(--text-muted); padding:11px 13px; border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; gap:9px; } .wc-cell .d { width:7px; height:7px; border-radius:50%; background:var(--border); flex-shrink:0; } .wc-cell.me { background:var(--a); border-color:var(--a); color:#fff; font-weight:700; } .wc-cell.me .d { background:#fff; } .wc-cta { display:block; width:100%; text-align:center; margin-top:26px; font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#fff; background:var(--text-primary); border:none; padding:16px; border-radius:10px; cursor:pointer; text-decoration:none; } .wc-src { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.5px; color:var(--text-primary); text-align:center; margin:14px 0 0; } /* ---- V5 share panel ---- */ .panelbox { background: var(--inner); border: 1px solid var(--border); border-radius: 12px; padding: 26px 24px; margin-top: 26px; } .pb-h { font-family: var(--heading); font-size: 25px; font-weight: 700; line-height: 1.2; text-align: center; margin: 0 0 8px; } .pb-b { font-family: var(--sans); font-size: 13px; color: var(--text-body); line-height: 1.6; text-align: center; margin: 0 auto 18px; max-width: 380px; } .pb-sub { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-subtle); text-align: center; margin: 0 0 12px; } .pb-rule { height: 1px; background: var(--border); margin: 22px 0; } .preview { font-family: var(--heading); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--text-body); background: var(--card); border: 1px solid var(--border); border-left: 3px solid #3D7A6E; border-radius: 8px; padding: 14px 16px; margin: 0 auto 18px; max-width: 400px; text-align: left; } .preview .quo { color: #3D7A6E; } .preview .msg { outline: none; cursor: text; border-radius: 3px; } .preview .msg:hover { background: rgba(61,122,110,.07); } .preview .msg:focus { background: rgba(61,122,110,.11); box-shadow: 0 0 0 2px rgba(61,122,110,.28); } .pb-edit-hint { font-family: var(--label, sans-serif); font-style: normal; font-size: 11px; color: #8a8f98; text-align: center; margin: 0 auto 7px; max-width: 400px; } /* ---- save card as image ---- */ .saveimg-wrap { display: flex; justify-content: center; margin: 16px 0 4px; } .saveimg-btn { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; background: var(--text-primary); border: none; border-radius: 10px; padding: 14px 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: opacity .15s, transform .14s; } .saveimg-btn:hover { opacity: .9; transform: translateY(-1px); } .saveimg-btn .ic { font-size: 15px; line-height: 1; } .saveimg-hint { font-family: var(--sans); font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.5; margin: 8px auto 0; max-width: 360px; } /* ===== Fit prompt: "does this fit you?" gate + archetype re-pick ===== */ .fit-opts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .fit-btn { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-body); background: var(--card); border: 1px solid var(--border); padding: 15px 34px; cursor: pointer; transition: all .15s; } .fit-btn:hover { border-color: var(--text-primary); color: var(--text-primary); } .fit-hint { font-family: var(--heading); font-style: italic; font-size: 15px; color: var(--text-primary); text-align: center; margin: 18px auto 0; } .fit-hint[hidden] { display: none; } .reveal[hidden] { display: none; } .zone { font-family: var(--sans); font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; text-align: center; margin: 0 0 12px; } .zone.fixed { color: var(--text-subtle); } .zone.updates { color: var(--a); } .acc-item { max-width: 600px; margin: 0 auto 10px; } .phrase-card { display: block; width: 100%; text-align: center; background: var(--card); border: 1px solid var(--border); padding: 18px 22px; cursor: pointer; transition: .15s; font-family: var(--heading); font-style: italic; font-size: 17px; color: var(--text-body); line-height: 1.45; } .phrase-card:hover { border-color: var(--text-primary); color: var(--text-primary); } .phrase-card .who { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--text-subtle); margin-bottom: 7px; } .tag-orig { display: inline-block; font-style: normal; font-family: var(--sans); font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--a); border: 1px solid var(--a); border-radius: 20px; padding: 1px 8px; margin-left: 8px; vertical-align: middle; } .acc-body[hidden] { display: none; } .acc-body .res-neighbour { margin-top: 0; } .acc-item.open .phrase-card { border-color: var(--a); font-style: normal; color: var(--text-primary); } .acc-item.open .res-neighbour { border-color: var(--a); } .res-neighbour.is-original { background: var(--a-tint); } .res-neighbour.is-original .res-neighbour-eyebrow { color: var(--a); } .nb-actions { display: flex; justify-content: flex-end; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .thats-it { width: auto; margin: 0; padding: 12px 28px; font-size: 10px; } .confirmed { text-align: center; } .confirmed[hidden] { display: none; } .ghost-btn { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); background: none; border: 1px solid var(--border); padding: 13px 26px; cursor: pointer; transition: .15s; } .ghost-btn:hover { border-color: var(--text-primary); color: var(--text-primary); } #hw-below[hidden] { display: none; } /* ============================================================ HOST-THEME ISOLATION (added 2026-07-06) This quiz is embedded in the dandobos.com WordPress / Elementor theme, whose global h1-h6, a:hover, and svg rules leak in and override the quiz's own styling: inflated result/question/intro headings, invisible button text on hover, and zero-width icons. Re-assert the quiz's intended values with !important so the host theme cannot reach in. Values mirror the class rules above; on the standalone /quiz/ page (no host theme) these are no-ops. ============================================================ */ body.page-id-3958 { padding-top: 0 !important; } .intro-title { font-family: var(--heading) !important; font-size: 56px !important; font-weight: 400 !important; line-height: 1.05 !important; } .intro-title .inv-title-key { color: var(--accent) !important; font-weight: 700 !important; } .gate-title { font-family: var(--heading) !important; font-size: 40px !important; font-weight: 400 !important; line-height: 1.15 !important; } .res-name { font-family: var(--heading) !important; font-size: 44px !important; font-weight: 400 !important; line-height: 1.1 !important; } .wc-name { font-family: var(--heading) !important; font-size: 30px !important; font-weight: 700 !important; line-height: 1.1 !important; } .res-neighbour-name{ font-family: var(--heading) !important; font-size: 26px !important; font-weight: 400 !important; } /* (.q-text is already hardened in its own rule above.) */ /* Link-styled buttons keep their own text colour even when the theme colours a:hover (this was making the book CTA text vanish on hover). */ a.continue-btn, a.continue-btn:hover, a.continue-btn:focus { color: var(--card) !important; text-decoration: none !important; } .res-dl-btn, .res-dl-btn:visited { color: var(--text-primary) !important; } .res-dl-btn:hover { color: var(--accent) !important; } .sbtn, .sbtn:hover, .sbtn:visited { color: var(--text-primary) !important; } .sbtn.native, .sbtn.native:hover { color: #fff !important; } /* Inline icons: the theme was collapsing svg width to 0 (missing icon). The theme's svg rule outranks a plain .card-corner svg selector, so scope under #page (id specificity) and pin the flex box so it cannot shrink to 0. */ #page .card-corner svg, #page .save-green svg { width: 16px !important; height: 16px !important; min-width: 16px !important; flex: none !important; } /* Text wrapping in buttons: the host theme sets `white-space: nowrap` on