:root { --ink: #2b2521; --muted: #6e625b; --paper: #fffaf2; --warm: #efe3d3; --line: #dccfc0; --accent: #6f4b35; --accent-dark: #4d3529; --green: #1f7a4d; --green-dark: #0f4a2e; --radius: 22px; --shadow: 0 18px 55px rgba(43, 37, 33, 0.13); } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: radial-gradient(circle at 76% 12%, rgba(255,255,255,.88), transparent 22%), linear-gradient(135deg, #efe3d3 0%, #fff8ef 52%, #e8ded1 100%); min-height: 100vh; } .site-shell { width: min(1060px, calc(100% - 36px)); margin: 0 auto; } .nav { display:flex; justify-content:space-between; align-items:center; padding:28px 0 10px; color:var(--muted); font-size:14px; letter-spacing:.02em; } .brand { font-family: Georgia, "Times New Roman", serif; color:var(--ink); font-size:19px; } a { color: inherit; } .card { background: rgba(255,250,242,.86); backdrop-filter: blur(10px); border: 1px solid rgba(220,207,192,.85); border-radius: var(--radius); box-shadow: var(--shadow); padding: 48px; } .hero { padding: 50px 0 70px; } .kicker { text-transform:uppercase; letter-spacing:.16em; color:var(--accent); font-weight:800; font-size:13px; margin-bottom:18px; } h1,h2,h3 { font-family: Georgia, "Times New Roman", serif; line-height:1.05; margin:0; font-weight:500; } h1 { font-size: clamp(48px, 7vw, 86px); letter-spacing:-.052em; max-width:900px; } h2 { font-size: clamp(32px, 4.3vw, 52px); letter-spacing:-.038em; } h3 { font-size:27px; } .deck { margin-top:24px; font-size:clamp(21px,2.6vw,31px); line-height:1.28; color:var(--ink); max-width:820px; } .body-copy { margin-top:24px; color:var(--muted); font-size:18px; line-height:1.62; max-width:780px; } .button { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; text-decoration:none; cursor:pointer; background: linear-gradient(180deg, #2a9b61 0%, #1f7a4d 70%, #17643e 100%); border:1px solid #17643e; border-bottom:5px solid #0f4a2e; color:#fff; font-size:20px; font-weight:900; padding:18px 38px 16px; min-width:190px; min-height:64px; box-shadow:0 5px 0 #0f4a2e, 0 16px 30px rgba(31,122,77,.28); text-transform:uppercase; letter-spacing:.04em; position:relative; overflow:hidden; isolation:isolate; animation: ctaPulse 2.8s ease-in-out infinite; } .button:not(.secondary)::before { content:""; position:absolute; top:-25%; left:-70%; width:42%; height:150%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); transform:skewX(-20deg); animation: ctaShine 3.7s ease-in-out infinite; z-index:-1; } @keyframes ctaPulse { 0%,100% { transform:translateY(0); box-shadow:0 5px 0 #0f4a2e,0 16px 30px rgba(31,122,77,.28); } 50% { transform:translateY(-1px); box-shadow:0 6px 0 #0f4a2e,0 20px 36px rgba(31,122,77,.34); } } @keyframes ctaShine { 0%{left:-70%;opacity:0;}18%{opacity:.9;}42%{left:128%;opacity:0;}100%{left:128%;opacity:0;} } @media (hover:hover) { .button:not(.secondary):hover { transform:translateY(-3px) scale(1.015)!important; animation:none; box-shadow:0 8px 0 #0f4a2e,0 24px 42px rgba(31,122,77,.36)!important; } } .button:not(.secondary):active { transform:translateY(4px) scale(.99)!important; animation:none; box-shadow:0 1px 0 #0f4a2e,0 9px 18px rgba(31,122,77,.2)!important; } .button.secondary { background:transparent; color:var(--accent-dark); border:1px solid var(--accent); box-shadow:none; animation:none; text-transform:none; letter-spacing:0; font-size:16px; font-weight:800; min-width:auto; min-height:50px; padding:14px 22px; } .button.secondary::before { display:none; } .actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; } .privacy { margin-top:22px; padding:16px 18px; border:1px solid rgba(78,109,93,.22); background:rgba(255,255,255,.45); border-radius:16px; color:var(--muted); line-height:1.55; max-width:760px; font-size:15px; } .privacy strong { color:var(--green); } .quiz-wrap { max-width:850px; margin:0 auto; padding:42px 0 70px; } .progress { display:flex; gap:8px; margin:28px 0; } .progress span { height:7px; flex:1; border-radius:999px; background:#e0d3c5; } .progress span.active { background:var(--accent); } .question { display:none; } .question.active { display:block; } .options { display:grid; gap:12px; margin-top:24px; } .option { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); background:rgba(255,255,255,.62); border-radius:15px; padding:15px 18px; cursor:pointer; transition:border-color .15s, transform .15s, background .15s; font-weight:650; } .option:hover { border-color:var(--accent); transform:translateY(-1px); } .option input { margin-top:3px; } .help-text { margin-top:16px; color:var(--muted); font-size:15px; } .selection-count { margin-top:18px; color:var(--accent-dark); font-weight:800; font-size:15px; } .quiz-actions { display:flex; justify-content:space-between; gap:14px; margin-top:32px; } .result-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; } .result-box { padding:24px; border-radius:18px; background:rgba(245,239,230,.72); border:1px solid rgba(220,207,192,.9); } .result-box.wide { grid-column:1/-1; } .result-box p,.result-box li { line-height:1.65; color:var(--muted); font-size:17px; } .micro { font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:800; margin-bottom:10px; } .safety-note { max-width:760px; margin:28px auto 50px; padding:18px 22px; text-align:center; border:1px solid rgba(220,207,192,.95); border-radius:18px; background:rgba(255,250,242,.72); box-shadow:0 10px 26px rgba(43,37,33,.06); color:var(--muted); line-height:1.55; font-size:14px; } .safety-note strong { color:var(--accent-dark); } @media (max-width:850px) { .card { padding:30px; } .result-grid { grid-template-columns:1fr; } .result-box.wide { grid-column:auto; } h1 { font-size:48px; } } /* YOP animated primary button patch v1 */ .button:not(.secondary), a.button:not(.secondary), button.button:not(.secondary), .begin-button, #beginBtn, #startBtn, #nextBtn { position: relative; overflow: hidden; isolation: isolate; animation: yopPrimaryButtonPulse 2.65s ease-in-out infinite; transform: translateZ(0); } .button:not(.secondary)::before, a.button:not(.secondary)::before, button.button:not(.secondary)::before, .begin-button::before, #beginBtn::before, #startBtn::before, #nextBtn::before { content: ""; position: absolute; top: -35%; left: -65%; width: 42%; height: 170%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.44) 48%, transparent 100%); transform: skewX(-22deg); animation: yopPrimaryButtonShine 3.25s ease-in-out infinite; pointer-events: none; z-index: 1; } .button:not(.secondary)::after, a.button:not(.secondary)::after, button.button:not(.secondary)::after, .begin-button::after, #beginBtn::after, #startBtn::after, #nextBtn::after { content: ""; position: absolute; inset: -12px; border-radius: 999px; background: radial-gradient(circle at 20% 30%, rgba(255,255,210,.50), transparent 22%), radial-gradient(circle at 72% 88%, rgba(235,255,120,.32), transparent 20%); opacity: .52; filter: blur(12px); animation: yopPrimaryButtonGlow 2.65s ease-in-out infinite; pointer-events: none; z-index: -1; } @keyframes yopPrimaryButtonPulse { 0%, 100% { transform: translateY(0) scale(1); filter: saturate(1); } 50% { transform: translateY(-2px) scale(1.018); filter: saturate(1.13) brightness(1.03); } } @keyframes yopPrimaryButtonShine { 0% { left: -65%; opacity: 0; } 16% { opacity: .95; } 46% { left: 125%; opacity: 0; } 100% { left: 125%; opacity: 0; } } @keyframes yopPrimaryButtonGlow { 0%, 100% { opacity: .35; transform: scale(.98); } 50% { opacity: .72; transform: scale(1.05); } } @media (hover:hover) { .button:not(.secondary):hover, a.button:not(.secondary):hover, button.button:not(.secondary):hover, .begin-button:hover, #beginBtn:hover, #startBtn:hover, #nextBtn:hover { animation-duration: 1.8s; transform: translateY(-3px) scale(1.025); } } .button:not(.secondary):active, a.button:not(.secondary):active, button.button:not(.secondary):active, .begin-button:active, #beginBtn:active, #startBtn:active, #nextBtn:active { transform: translateY(2px) scale(.99); } @media (prefers-reduced-motion: reduce) { .button:not(.secondary), a.button:not(.secondary), button.button:not(.secondary), .begin-button, #beginBtn, #startBtn, #nextBtn, .button:not(.secondary)::before, a.button:not(.secondary)::before, button.button:not(.secondary)::before, .begin-button::before, #beginBtn::before, #startBtn::before, #nextBtn::before, .button:not(.secondary)::after, a.button:not(.secondary)::after, button.button:not(.secondary)::after, .begin-button::after, #beginBtn::after, #startBtn::after, #nextBtn::after { animation: none !important; } } /* YOP animated ALL buttons patch v2 — every Q/A button feels alive */ .button, a.button, button.button, .begin-button, #beginBtn, #startBtn, #nextBtn, #backBtn, #foundationLink, #ps11Link, #ps12Link, #listenLink, #profileLink, #foundationAppLink { position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease; } /* Strong animation for primary buttons */ .button:not(.secondary), a.button:not(.secondary), button.button:not(.secondary), .begin-button, #beginBtn, #startBtn, #nextBtn, #foundationAppLink, #listenLink { animation: yopPrimaryButtonPulse 2.65s ease-in-out infinite; } .button:not(.secondary)::before, a.button:not(.secondary)::before, button.button:not(.secondary)::before, .begin-button::before, #beginBtn::before, #startBtn::before, #nextBtn::before, #foundationAppLink::before, #listenLink::before { content: ""; position: absolute; top: -35%; left: -65%; width: 42%; height: 170%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.46) 48%, transparent 100%); transform: skewX(-22deg); animation: yopPrimaryButtonShine 3.25s ease-in-out infinite; pointer-events: none; z-index: 1; } .button:not(.secondary)::after, a.button:not(.secondary)::after, button.button:not(.secondary)::after, .begin-button::after, #beginBtn::after, #startBtn::after, #nextBtn::after, #foundationAppLink::after, #listenLink::after { content: ""; position: absolute; inset: -12px; border-radius: 999px; background: radial-gradient(circle at 20% 30%, rgba(255,255,210,.50), transparent 22%), radial-gradient(circle at 72% 88%, rgba(235,255,120,.32), transparent 20%); opacity: .52; filter: blur(12px); animation: yopPrimaryButtonGlow 2.65s ease-in-out infinite; pointer-events: none; z-index: -1; } /* Subtle animation for secondary/back/retake/read buttons */ .button.secondary, a.button.secondary, button.button.secondary, #backBtn, #ps11Link, #ps12Link, #profileLink, #foundationLink { animation: yopSecondaryButtonBreathe 3.6s ease-in-out infinite; } .button.secondary::before, a.button.secondary::before, button.button.secondary::before, #backBtn::before, #ps11Link::before, #ps12Link::before, #profileLink::before, #foundationLink::before { content: ""; position: absolute; top: -35%; left: -80%; width: 36%; height: 170%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.26) 48%, transparent 100%); transform: skewX(-22deg); animation: yopSecondaryButtonShine 4.8s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes yopPrimaryButtonPulse { 0%, 100% { transform: translateY(0) scale(1); filter: saturate(1); } 50% { transform: translateY(-2px) scale(1.018); filter: saturate(1.13) brightness(1.03); } } @keyframes yopPrimaryButtonShine { 0% { left: -65%; opacity: 0; } 16% { opacity: .95; } 46% { left: 125%; opacity: 0; } 100% { left: 125%; opacity: 0; } } @keyframes yopPrimaryButtonGlow { 0%, 100% { opacity: .35; transform: scale(.98); } 50% { opacity: .72; transform: scale(1.05); } } @keyframes yopSecondaryButtonBreathe { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-1px); filter: brightness(1.03); } } @keyframes yopSecondaryButtonShine { 0% { left: -80%; opacity: 0; } 18% { opacity: .55; } 42% { left: 130%; opacity: 0; } 100% { left: 130%; opacity: 0; } } @media (hover:hover) { .button:hover, a.button:hover, button.button:hover, .begin-button:hover, #beginBtn:hover, #startBtn:hover, #nextBtn:hover, #backBtn:hover, #foundationLink:hover, #ps11Link:hover, #ps12Link:hover, #listenLink:hover, #profileLink:hover, #foundationAppLink:hover { transform: translateY(-3px) scale(1.018); filter: brightness(1.05) saturate(1.08); } } .button:active, a.button:active, button.button:active, .begin-button:active, #beginBtn:active, #startBtn:active, #nextBtn:active, #backBtn:active, #foundationLink:active, #ps11Link:active, #ps12Link:active, #listenLink:active, #profileLink:active, #foundationAppLink:active { transform: translateY(2px) scale(.99); } @media (prefers-reduced-motion: reduce) { .button, a.button, button.button, .begin-button, #beginBtn, #startBtn, #nextBtn, #backBtn, #foundationLink, #ps11Link, #ps12Link, #listenLink, #profileLink, #foundationAppLink, .button::before, a.button::before, button.button::before, .begin-button::before, #beginBtn::before, #startBtn::before, #nextBtn::before, #backBtn::before, #foundationLink::before, #ps11Link::before, #ps12Link::before, #listenLink::before, #profileLink::before, #foundationAppLink::before, .button::after, a.button::after, button.button::after, .begin-button::after, #beginBtn::after, #startBtn::after, #nextBtn::after, #foundationAppLink::after, #listenLink::after { animation: none !important; } } /* Presence Shift brand-calibrated animated buttons v3 */ .button, button, a.button, .begin-button, #beginBtn, #startBtn, #nextBtn, #backBtn, #retakeBtn { position: relative; overflow: hidden; isolation: isolate; transform: translateZ(0); } .button:not(.secondary), button.button:not(.secondary), a.button:not(.secondary), .begin-button, #beginBtn, #startBtn, #nextBtn { animation: psButtonBreath_v3 3.2s ease-in-out infinite !important; } .button:not(.secondary)::before, button.button:not(.secondary)::before, a.button:not(.secondary)::before, .begin-button::before, #beginBtn::before, #startBtn::before, #nextBtn::before { content: ""; position: absolute; top: -35%; left: -58%; width: 34%; height: 170%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,235,.32) 50%, transparent 100%); transform: skewX(-22deg); animation: psButtonShine_v3 4.2s ease-in-out infinite !important; pointer-events: none; z-index: 2; } .button:not(.secondary)::after, button.button:not(.secondary)::after, a.button:not(.secondary)::after, .begin-button::after, #beginBtn::after, #startBtn::after, #nextBtn::after { content: ""; position: absolute; inset: -8px; border-radius: 999px; background: radial-gradient(circle at 25% 35%, rgba(235,255,180,.25), transparent 22%); filter: blur(10px); opacity: .35; animation: psButtonGlow_v3 3.2s ease-in-out infinite !important; pointer-events: none; z-index: -1; } .button.secondary, a.button.secondary, button.button.secondary, #backBtn { animation: psSecondaryButtonBreath_v3 4.8s ease-in-out infinite !important; } @keyframes psButtonBreath_v3 { 0%,100% { transform: translateY(0) scale(1); filter: brightness(1) saturate(1); } 50% { transform: translateY(-1px) scale(1.008); filter: brightness(1.025) saturate(1.06); } } @keyframes psButtonShine_v3 { 0% { left: -58%; opacity: 0; } 20% { opacity: .62; } 48% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } } @keyframes psButtonGlow_v3 { 0%,100% { opacity: .20; transform: scale(.985); } 50% { opacity: .42; transform: scale(1.025); } } @keyframes psSecondaryButtonBreath_v3 { 0%,100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-.5px); filter: brightness(1.02); } } @media (hover:hover) { .button:hover, a.button:hover, button.button:hover, .begin-button:hover, #beginBtn:hover, #startBtn:hover, #nextBtn:hover, #backBtn:hover, #retakeBtn:hover { transform: translateY(-2px) scale(1.01) !important; } } .button:active, a.button:active, button.button:active, .begin-button:active, #beginBtn:active, #startBtn:active, #nextBtn:active, #backBtn:active, #retakeBtn:active { transform: translateY(1px) scale(.995) !important; } @media (prefers-reduced-motion: reduce) { .button, button, a.button, .begin-button, #beginBtn, #startBtn, #nextBtn, #backBtn, #retakeBtn, .button::before, button::before, a.button::before, .begin-button::before, #beginBtn::before, #startBtn::before, #nextBtn::before, .button::after, button::after, a.button::after, .begin-button::after, #beginBtn::after, #startBtn::after, #nextBtn::after { animation: none !important; } } /* PS11.5 positive-option update v5 */ .option-group-label { margin: 18px 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #6f4b35); } .carry { font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.3; color: var(--ink, #2b2521); margin: 12px 0 0; }