html, body { margin: 0; padding: 0; background: #ECE4D4; } * { box-sizing: border-box; } ::selection { background: #2F6B45; color: #F7F3EA; } [data-theme="paper"] { --bg-top:#F8F3E8;--bg-mid:#F2ECE0;--bg-bot:#ECE4D4;--bg-blur:rgba(242,236,224,.86); --ink:#241F18;--ink-soft:#3C3327;--text:#564B3C;--muted:#6B5F4E; --faint:#8C806C;--faint2:#A89B85;--eyebrow:#BBA98C;--faint3:#C4B89F; --accent:#A8754E;--card:#FBF7EE;--line:#EAE0CF;--track:#F0E8D8;--track-line:#D8CCB4; --btn-bg:#241F18;--btn-fg:#F4EEE2;--btn-hover:#3A3225;--btn-ghost-line:#CDBFA6; --clay:#9A3B25;--green:#2F6B45;--thumb:#FBF8F1; } [data-theme="dusk"] { --bg-top:#211C14;--bg-mid:#17130D;--bg-bot:#100E09;--bg-blur:rgba(18,15,10,.86); --ink:#F2EAD9;--ink-soft:#E2D7C1;--text:#C2B6A0;--muted:#AC9F87; --faint:#8E8369;--faint2:#6E6553;--eyebrow:#8A7C5F;--faint3:#544B3B; --accent:#CBA06B;--card:#1D1A13;--line:#322C20;--track:#2A251C;--track-line:#3A3528; --btn-bg:#F2EAD9;--btn-fg:#1A160F;--btn-hover:#E2D7C1;--btn-ghost-line:#4A4334; --clay:#DC7253;--green:#62B381;--thumb:#FBF5E8; } @keyframes rtr-hint { 0%,100% { transform: translateX(-50%) scale(1); opacity:.55; } 50% { transform: translateX(-50%) scale(1.12); opacity:.9; } } .rtr-root { min-height:100vh; width:100%; font-family:'Hanken Grotesk', sans-serif; color: var(--ink,#241F18); background: radial-gradient(120% 80% at 50% -10%, var(--bg-top,#F8F3E8) 0%, var(--bg-mid,#F2ECE0) 55%, var(--bg-bot,#ECE4D4) 100%); background-attachment: fixed; overflow-x: hidden; } .rtr-clay { color: var(--clay,#9A3B25); font-weight:600; } .rtr-green { color: var(--green,#2F6B45); font-weight:600; } .rtr-serif { font-family:'Newsreader', serif; } /* ---- theme toggle ---- */ .rtr-theme-toggle { position:fixed; bottom:18px; right:18px; z-index:60; width:46px; height:46px; border-radius:50%; cursor:pointer; background: var(--card,#FBF7EE); border:1px solid var(--btn-ghost-line,#CDBFA6); color: var(--ink,#241F18); font-size:19px; line-height:1; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px -10px rgba(0,0,0,.45); transition: transform .2s ease; } .rtr-theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); } /* ---- intro ---- */ .rtr-intro { max-width:760px; margin:0 auto; padding: clamp(48px,10vh,128px) clamp(22px,5vw,56px) 80px; min-height:100vh; display:flex; flex-direction:column; justify-content:center; } .rtr-intro-eyebrow { font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color: var(--accent,#A8754E); margin-bottom:26px; } .rtr-intro-title { font-family:'Newsreader', serif; font-weight:400; font-size: clamp(42px,8vw,82px); line-height:1.02; letter-spacing:-.015em; margin:0 0 26px; color: var(--ink,#241F18); } .rtr-intro-sub { font-family:'Newsreader', serif; font-style:italic; font-size: clamp(19px,2.6vw,25px); line-height:1.5; color: var(--muted,#6B5F4E); max-width:30ch; margin:0 0 40px; } .rtr-intro-gradient { height:8px; border-radius:5px; max-width:340px; margin:0 0 40px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .rtr-intro-body { display:flex; flex-direction:column; gap:18px; max-width:54ch; font-size: clamp(15px,1.8vw,17px); line-height:1.72; color: var(--text,#564B3C); margin-bottom:42px; } .rtr-intro-body p { margin:0; } .rtr-intro-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .rtr-pool-line { font-size:12.5px; color: var(--faint,#9A8E79); letter-spacing:.02em; } .rtr-privacy-line { display:block; margin-top:14px; opacity:.85; } .rtr-word-prompt { font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color: var(--eyebrow,#BBA98C); text-align:center; margin:0 0 14px; } .rtr-probe-text.rtr-is-word { font-style:normal; font-weight:500; text-align:center; text-transform:lowercase; letter-spacing:-.015em; } /* ---- buttons ---- */ .rtr-btn-primary { appearance:none; border:none; cursor:pointer; background: var(--btn-bg,#241F18); color: var(--btn-fg,#F4EEE2); font-family:'Hanken Grotesk', sans-serif; font-weight:600; font-size:16px; letter-spacing:.01em; padding:17px 38px; border-radius:40px; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); transition: transform .2s ease, background .2s ease; } .rtr-btn-primary:hover { background: var(--btn-hover,#3A3225); transform: translateY(-2px); } .rtr-btn-ghost { appearance:none; cursor:pointer; font-family:'Hanken Grotesk', sans-serif; font-size:15px; font-weight:600; color: var(--ink,#241F18); background:none; border:1px solid var(--btn-ghost-line,#CDBFA6); padding:14px 34px; border-radius:36px; letter-spacing:.01em; transition: all .2s; } .rtr-btn-ghost:hover { background: var(--btn-bg,#241F18); color: var(--btn-fg,#F4EEE2); border-color: var(--btn-bg,#241F18); } /* ---- test ---- */ .rtr-test { min-height:100vh; display:flex; flex-direction:column; } .rtr-progress-bar { position:sticky; top:0; z-index:30; background: var(--bg-blur,rgba(242,236,224,.86)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom:1px solid var(--line,#E2D8C5); } .rtr-progress-track { height:3px; width:100%; background: var(--track,#E2D8C5); } .rtr-progress-fill { height:100%; width:0%; transition: width .5s cubic-bezier(.2,.8,.2,1); } .rtr-progress-meta { max-width:760px; margin:0 auto; width:100%; padding:13px clamp(22px,5vw,56px); display:flex; justify-content:space-between; align-items:center; } .rtr-progress-label { font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color: var(--accent,#A8754E); } .rtr-progress-count { font-size:13px; font-weight:500; color: var(--faint,#9A8E79); font-variant-numeric: tabular-nums; } .rtr-question-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding: clamp(28px,5vh,64px) clamp(22px,5vw,56px); } .rtr-card { width:100%; max-width:720px; opacity:1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease; } .rtr-card.rtr-hidden { opacity:0; transform: translateY(14px); } .rtr-q-index { font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color: var(--eyebrow,#BBA98C); margin-bottom: clamp(20px,4vh,34px); font-variant-numeric: tabular-nums; } .rtr-probe-text { font-family:'Newsreader', serif; font-weight:400; font-style:italic; font-size: clamp(25px,4.4vw,42px); line-height:1.28; letter-spacing:-.01em; color: var(--ink,#241F18); margin:0 0 clamp(40px,7vh,68px); text-wrap: pretty; } .rtr-value-block { text-align:center; margin-bottom:22px; min-height:74px; } .rtr-value-display { font-family:'Newsreader', serif; font-size: clamp(46px,9vw,62px); line-height:1; font-weight:400; font-variant-numeric: tabular-nums; transition: color .25s ease; } .rtr-value-word { font-size:13.5px; letter-spacing:.04em; color: var(--faint,#8C806C); margin-top:8px; height:18px; } /* ---- rail ---- */ .rtr-rail { position:relative; height:46px; cursor:pointer; touch-action:none; outline:none; user-select:none; -webkit-tap-highlight-color: transparent; } .rtr-rail-gradient { position:absolute; left:0; right:0; top:50%; transform: translateY(-50%); height:14px; border-radius:8px; box-shadow: inset 0 1px 3px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.25); } .rtr-rail-ticks { position:absolute; inset:0; } .rtr-tick { position:absolute; top:50%; transform: translate(-50%,-50%); width:2px; height:14px; background: rgba(255,255,255,.4); border-radius:1px; } .rtr-rail-thumb { position:absolute; top:50%; transform: translate(-50%,-50%); border-radius:50%; z-index:3; } .rtr-rail-thumb.has-value { left:50%; width:30px; height:30px; background: var(--thumb,#FBF8F1); border:3px solid var(--faint2,#C7B79B); box-shadow:0 6px 16px -4px rgba(0,0,0,.5), 0 0 0 6px var(--bg-mid,rgba(251,248,241,.5)); transition: left .18s cubic-bezier(.2,.8,.2,1), border-color .25s ease; animation: none; } .rtr-rail-thumb.no-value { left:50%; width:24px; height:24px; background: var(--thumb,#FBF8F1); border:2px solid var(--faint2,#C7B79B); box-shadow:0 4px 12px -4px rgba(0,0,0,.45); animation: rtr-hint 1.8s ease-in-out infinite; transition: none; } .rtr-anchors { display:flex; justify-content:space-between; margin-top:14px; font-size:12px; color: var(--faint2,#A89B85); letter-spacing:.02em; } .rtr-anchor-w { font-weight:500; } /* ---- nav ---- */ .rtr-nav { display:flex; justify-content:space-between; align-items:center; margin-top: clamp(34px,6vh,52px); } .rtr-btn-back { appearance:none; border:none; background:none; cursor:pointer; font-family:'Hanken Grotesk', sans-serif; font-size:14px; font-weight:500; padding:10px 4px; letter-spacing:.02em; transition: color .2s; color: var(--faint,#8C806C); } .rtr-btn-back:disabled { cursor:default; color: var(--faint3,#CFC4B0); } .rtr-btn-next { appearance:none; cursor:pointer; font-family:'Hanken Grotesk', sans-serif; font-size:14.5px; font-weight:600; padding:11px 26px; border-radius:30px; letter-spacing:.01em; transition: all .2s; color: var(--btn-fg,#F4EEE2); background: var(--btn-bg,#241F18); border:1px solid var(--btn-bg,#241F18); } .rtr-btn-next:disabled { cursor:default; color: var(--faint3,#C4B89F); background: transparent; border:1px solid var(--track-line,#D8CDB8); } /* ---- results ---- */ .rtr-results { max-width:760px; margin:0 auto; padding: clamp(48px,8vh,96px) clamp(22px,5vw,56px) 110px; } .rtr-results-eyebrow { font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color: var(--accent,#A8754E); margin-bottom:18px; } .rtr-results-title { font-family:'Newsreader', serif; font-weight:400; font-size: clamp(38px,7vw,68px); line-height:1.04; letter-spacing:-.015em; margin:0 0 14px; color: var(--ink,#241F18); } .rtr-results-sub { font-family:'Newsreader', serif; font-style:italic; font-size: clamp(17px,2.3vw,22px); color: var(--muted,#6B5F4E); margin:0 0 clamp(40px,6vh,60px); } .rtr-panel { background: var(--card,#FBF7EE); border:1px solid var(--line,#EAE0CF); border-radius:18px; padding: clamp(24px,4vw,38px); box-shadow:0 24px 50px -34px rgba(0,0,0,.45); margin-bottom:26px; } .rtr-panel-title { font-family:'Newsreader', serif; font-size:22px; margin-bottom:6px; color: var(--ink,#241F18); } .rtr-panel-sub { font-size:13px; color: var(--faint,#9A8E79); margin:0 0 22px; } /* ---- headline archetype ---- */ .rtr-headline-card { background: var(--card,#FBF7EE); border:1px solid var(--line,#EAE0CF); border-left:4px solid var(--accent,#A8754E); border-radius:18px; padding: clamp(26px,4vw,40px); box-shadow:0 24px 50px -34px rgba(0,0,0,.45); margin-bottom:26px; } .rtr-headline-eyebrow { font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color: var(--accent,#A8754E); margin-bottom:12px; } .rtr-headline-title { font-family:'Newsreader', serif; font-size: clamp(26px,4vw,36px); line-height:1.12; color: var(--ink,#241F18); margin-bottom:14px; } .rtr-headline-body { font-size: clamp(15px,1.9vw,17px); line-height:1.7; color: var(--text,#564B3C); margin:0; } /* ---- dimension rows ---- */ .rtr-dim-row { padding:14px 0; border-top:1px solid var(--line,#EFE7D7); } .rtr-dim-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:11px; gap:14px; } .rtr-dim-name { font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft,#3C3327); white-space:nowrap; } .rtr-dim-reading { font-family:'Newsreader', serif; font-style:italic; font-size:15px; text-align:right; white-space:nowrap; flex-shrink:0; } .rtr-dim-track { position:relative; height:26px; background: var(--track,#F0E8D8); border-radius:7px; overflow:hidden; } .rtr-dim-center { position:absolute; left:50%; top:0; bottom:0; width:1px; background: var(--track-line,#D8CCB4); z-index:2; } .rtr-dim-fill { position:absolute; top:0; bottom:0; opacity:.92; z-index:1; transition: left 1s cubic-bezier(.2,.8,.2,1), width 1s cubic-bezier(.2,.8,.2,1); } .rtr-dim-foot { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color: var(--faint2,#B0A48D); } .rtr-dim-line { font-size:13.5px; line-height:1.6; color: var(--text,#5A4F3F); margin:10px 0 0; } /* ---- insights ---- */ .rtr-insight { padding:4px 0 4px 18px; margin-bottom:20px; border-left:3px solid var(--faint,#9A8E79); } .rtr-insight:last-child { margin-bottom:0; } .rtr-insight-title { font-weight:600; font-size:15px; color: var(--ink-soft,#2E2619); margin-bottom:6px; } .rtr-insight-body { font-size:14.5px; line-height:1.65; color: var(--text,#5A4F3F); } /* ---- tier read ---- */ .rtr-tier-line { padding:10px 0; border-top:1px solid var(--line,#EFE7D7); } .rtr-tier-line:first-child { border-top:none; } .rtr-tier-label { font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color: var(--accent,#A8754E); margin-bottom:5px; } .rtr-tier-text { font-size:14.5px; line-height:1.6; color: var(--text,#5A4F3F); } .rtr-tier-summary { margin-top:16px; padding-top:16px; border-top:1px solid var(--line,#EFE7D7); font-family:'Newsreader', serif; font-style:italic; font-size:16px; line-height:1.55; color: var(--ink-soft,#3C3327); } /* ---- callbacks ---- */ .rtr-callback { padding:14px 0; border-top:1px solid var(--line,#EFE7D7); } .rtr-callback:first-child { border-top:none; } .rtr-callback-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; } .rtr-callback-text { font-family:'Newsreader', serif; font-style:italic; font-size:15px; color: var(--ink-soft,#3C3327); flex:1; line-height:1.4; } .rtr-callback-rating { font-weight:600; font-variant-numeric: tabular-nums; white-space:nowrap; color: var(--accent,#A8754E); } .rtr-callback-note { font-size:13.5px; line-height:1.55; color: var(--text,#5A4F3F); margin-top:7px; } /* ---- breakdown ---- */ .rtr-grp { margin-bottom:26px; } .rtr-grp:last-child { margin-bottom:0; } .rtr-grp-name { font-size:13px; font-weight:600; letter-spacing:.04em; padding-bottom:8px; border-bottom:1px solid var(--line,#ECE3D3); margin-bottom:4px; } .rtr-grp-desc { font-size:12.5px; color: var(--faint2,#A89B85); font-style:italic; font-family:'Newsreader', serif; margin:6px 0 14px; } .rtr-grp-item { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:7px 0; font-size:13.5px; line-height:1.45; } .rtr-grp-item-text { color: var(--text,#6B6051); flex:1; } .rtr-grp-item-rating { font-weight:600; font-variant-numeric: tabular-nums; white-space:nowrap; } /* ---- disclaimer ---- */ .rtr-disclaimer { text-align:center; color: var(--faint2,#A89B85); font-size:12.5px; line-height:1.7; max-width:54ch; margin:0 auto 32px; } .rtr-disclaimer p { margin:0 0 10px; } .rtr-lifeline { color: var(--clay,#9A3B25); font-weight:500; } .rtr-restart-wrap { text-align:center; } /* hidden attribute must win over phase display:flex (phase switching) */ [hidden] { display: none !important; }