Spaces:
Sleeping
Sleeping
| 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 ; } | |