/* The sample report, scoped. * * This page used to be the one file outside build.py, carrying its own * and its own copy of the chrome. Routed through page() it now shares a * document with the site stylesheet, and the two have twenty-three selectors * in common — `:root`, `body`, `.btn`, `.card`, `.hero` and `.kicker` among * them. * * So every rule is scoped to `.rp-sample`, the wrapper around the specimen, * and `:root` with it: the custom properties are declared on the wrapper * rather than on the document, which is what keeps the report's palette off * the site's nav and the site's buttons out of the report. * * @page is left at the top level on purpose. It sizes the printed sheet, and * a print box cannot be scoped to an element. */ /* ========================================================================== Let's Talk — the report Marks carry status colour; text never does. Every mark is accompanied by a number and a word, so the reading never depends on colour alone. ========================================================================== */ .rp-sample{--navy:#1E2C49; --ink:#1E2C49; --body:#4A5568; --muted:#606E87; --paper:#fff; --shell:#F7F9FB; --cream:#FDF4E4; --cream-2:#FBEAD0; --line:#E4EAF1; --track:#E9EDF2; /* marks — validated: CVD deutan ΔE 12.6, normal-vision ΔE 17.7 */ --strong:#00A6A2; --growing:#F2A93B; --attention:#EF5B45; /* text tokens for the same three states — all ≥4.5:1 on white */ --strong-t:#00615F; --growing-t:#8F5A06; --attention-t:#B22E1B; --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --r:14px; --pad:26px; --shadow:0 1px 2px rgba(30,44,73,.04), 0 8px 24px -12px rgba(30,44,73,.16);} .rp-sample *,.rp-sample *::before,.rp-sample *::after{box-sizing:border-box} .rp-sample{-webkit-text-size-adjust:100%} .rp-sample{margin:0;background:var(--shell);color:var(--body);font-family:var(--sans); font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased} .rp-sample img,.rp-sample svg{display:block;max-width:100%} .rp-sample h1,.rp-sample h2,.rp-sample h3{margin:0;font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.12; letter-spacing:-.02em;font-variation-settings:"SOFT" 0,"WONK" 0} .rp-sample p{margin:0} .rp-sample button{font:inherit;cursor:pointer} .rp-sample :focus-visible{outline:2px solid var(--strong);outline-offset:3px;border-radius:4px} .rp-sample .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .rp-sample .wrap{max-width:1180px;margin:0 auto;padding:0 20px} /* ---------- top bar ---------- */ .rp-sample .bar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40} .rp-sample .bar .wrap{display:flex;align-items:center;gap:20px;min-height:74px} .rp-sample .logo{font-family:var(--serif);font-size:25px;color:var(--navy);letter-spacing:-.02em;line-height:1} .rp-sample .logo em{font-style:normal;color:var(--growing-t)} .rp-sample .logo small{display:block;font-family:var(--sans);font-size:8.5px;font-weight:700; letter-spacing:.19em;color:var(--muted);margin-top:5px} .rp-sample .bar .spacer{flex:1} .rp-sample .stamp{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);white-space:nowrap} .rp-sample .btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:11px 20px; font-size:14px;font-weight:600;border:1px solid var(--line);background:var(--paper); color:var(--ink);transition:border-color .16s,box-shadow .16s,transform .16s} .rp-sample .btn:hover{border-color:#C6D2E0;box-shadow:var(--shadow)} .rp-sample .btn:active{transform:translateY(1px)} .rp-sample .btn-solid{background:var(--navy);color:#fff;border-color:var(--navy);width:100%;justify-content:center;padding:13px 20px} .rp-sample .btn-solid:hover{background:#152039;border-color:#152039} .rp-sample .btn-gold{background:var(--growing);color:#3A2600;border-color:var(--growing)} .rp-sample .btn-gold:hover{background:#E79D24;border-color:#E79D24} /* ---------- hero ---------- */ .rp-sample .hero{background:linear-gradient(103deg,var(--cream) 0%,var(--cream) 52%,var(--cream-2) 100%); border-bottom:1px solid #F0E2C8} .rp-sample .hero .wrap{display:grid;grid-template-columns:1.32fr .88fr;gap:40px;align-items:center; padding-top:46px;padding-bottom:46px} .rp-sample .kicker{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase; color:var(--growing-t);margin-bottom:16px} .rp-sample .hero h1{font-size:clamp(2rem,4.1vw,3.15rem);letter-spacing:-.03em;color:var(--navy)} .rp-sample .hero h1 em{font-style:italic;font-variation-settings:"SOFT" 40,"WONK" 1} .rp-sample .hero p{margin-top:18px;font-size:17px;max-width:34em;color:#5A6478} .rp-sample .hero-img{border-radius:var(--r);overflow:hidden;box-shadow:0 20px 44px -20px rgba(30,44,73,.42); aspect-ratio:7/5} .rp-sample .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 28%} /* ---------- grid & cards ---------- */ .rp-sample main{padding:30px 0 8px} .rp-sample .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-bottom:20px} .rp-sample .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:var(--pad);box-shadow:var(--shadow)} .rp-sample .c3{grid-column:span 3} .rp-sample .c4{grid-column:span 4} .rp-sample .c5{grid-column:span 5} .rp-sample .c6{grid-column:span 6} .rp-sample .c7{grid-column:span 7} .rp-sample .c8{grid-column:span 8} .rp-sample .c12{grid-column:span 12} .rp-sample .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:9px} .rp-sample .eyebrow svg{flex:none} /* ---------- overall score ---------- */ .rp-sample .score{display:flex;gap:30px;align-items:center} .rp-sample .ring{position:relative;flex:none;width:172px;height:172px} .rp-sample .ring svg{width:100%;height:100%;transform:rotate(-90deg)} .rp-sample .ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center} .rp-sample .ring-num{font-family:var(--sans);font-size:56px;font-weight:600;color:var(--navy); line-height:1;letter-spacing:-.035em} .rp-sample .ring-band{font-size:12px;font-weight:700;letter-spacing:.07em;margin-top:7px;color:var(--growing-t)} .rp-sample .score-side{min-width:0} .rp-sample .score-side .big{font-size:15.5px;color:var(--body)} .rp-sample .score-side .big b{color:var(--strong-t);font-weight:700} .rp-sample .delta{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:7px 13px; border-radius:999px;background:rgba(0,166,162,.09);color:var(--strong-t); font-size:13.5px;font-weight:600} .rp-sample .since{margin-top:12px;font-size:13px;color:var(--muted)} /* ---------- insights ---------- */ .rp-sample .ins{display:flex;flex-direction:column;gap:17px} .rp-sample .ins li{display:flex;gap:15px;align-items:flex-start} .rp-sample .ins ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:17px} .rp-sample .disc{flex:none;width:37px;height:37px;border-radius:50%;display:grid;place-items:center;color:#fff} .rp-sample .d-strong{background:var(--strong)} .rp-sample .d-growing{background:var(--growing);color:#3A2600} .rp-sample .d-attention{background:var(--attention)} .rp-sample .ins p{font-size:15px;color:var(--ink);line-height:1.5} /* ---------- radar ---------- */ .rp-sample .radar-wrap{display:flex;justify-content:center;padding:4px 0 2px} .rp-sample .key{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-top:16px; padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--body)} .rp-sample .key span{display:inline-flex;align-items:center;gap:7px} .rp-sample .dot{width:9px;height:9px;border-radius:50%;flex:none} /* ---------- detailed scores (the table view for the map) ---------- */ .rp-sample .rows{display:flex;flex-direction:column;gap:16px} .rp-sample .row{display:grid;grid-template-columns:30px 1fr auto;gap:13px;align-items:center} .rp-sample .row .ico{color:var(--muted)} .rp-sample .row .nm{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:7px} .rp-sample .track{display:block;height:8px;border-radius:999px;background:var(--track);overflow:hidden} .rp-sample .fill{display:block;height:100%;border-radius:999px;width:0;transition:width .9s cubic-bezier(.22,1,.36,1)} .rp-sample .val{text-align:right;min-width:52px} .rp-sample .val b{display:block;font-size:19px;font-weight:600;color:var(--navy);line-height:1.1; letter-spacing:-.02em;font-variant-numeric:tabular-nums} .rp-sample .val span{display:block;font-size:11px;font-weight:600;margin-top:3px} /* ---------- book ---------- */ .rp-sample .book{text-align:center;display:flex;flex-direction:column;height:100%} .rp-sample .chip{display:inline-block;background:#FDE7E3;color:var(--attention-t);border-radius:999px; padding:6px 15px;font-size:12px;font-weight:700;letter-spacing:.03em;margin:0 auto} .rp-sample .book .lead{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--muted);margin-bottom:11px} .rp-sample .book img{width:154px;margin:20px auto 16px;border-radius:4px; box-shadow:0 16px 32px -14px rgba(30,44,73,.5)} .rp-sample .book .why{font-size:14px;color:var(--body);margin-bottom:18px} .rp-sample .book .mt{margin-top:auto} .rp-sample .readtime{display:flex;align-items:center;justify-content:center;gap:7px; font-size:12.5px;color:var(--muted);margin-top:12px} /* ---------- line chart ---------- */ .rp-sample .linewrap{position:relative} .rp-sample .tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s; background:var(--navy);color:#fff;font-size:12.5px;padding:7px 11px;border-radius:7px; white-space:nowrap;transform:translate(-50%,-125%);z-index:5;font-weight:500} .rp-sample .tip b{font-variant-numeric:tabular-nums} /* ---------- compare ---------- */ .rp-sample .people{display:flex;gap:5px;margin:16px 0 12px} .rp-sample .people i{width:19px;height:24px;flex:none} .rp-sample .compare .n{font-size:15px;color:var(--body)} .rp-sample .compare .n b{color:var(--strong-t);font-weight:700} /* ---------- meaning ---------- */ .rp-sample .meaning{background:var(--cream);border-color:#F2E4C9} .rp-sample .meaning .disc{margin-bottom:16px} .rp-sample .meaning p{font-size:15px;color:#5A5340;line-height:1.55} .rp-sample .meaning strong{color:var(--navy);display:block;margin-top:12px} /* ---------- action plan ---------- */ .rp-sample .acts{display:flex;flex-direction:column;gap:3px} .rp-sample .act{display:flex;gap:14px;align-items:flex-start;padding:13px 12px;border-radius:10px; border:1px solid transparent;transition:background .14s,border-color .14s;cursor:pointer; background:none;text-align:left;width:100%} .rp-sample .act:hover{background:#F7F9FB;border-color:var(--line)} .rp-sample .act .tx{flex:1;min-width:0} .rp-sample .act .tt{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35} .rp-sample .act .ss{display:block;font-size:13px;color:var(--muted);margin-top:3px} .rp-sample .box{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid #CBD5E1; display:grid;place-items:center;margin-top:1px;transition:background .14s,border-color .14s} .rp-sample .box svg{opacity:0;transition:opacity .14s} .rp-sample .act[aria-pressed="true"] .box{background:var(--strong);border-color:var(--strong)} .rp-sample .act[aria-pressed="true"] .box svg{opacity:1} .rp-sample .act[aria-pressed="true"] .tt{text-decoration:line-through;color:var(--muted);text-decoration-thickness:1.5px} .rp-sample .plan-foot{margin-top:16px;padding-top:15px;border-top:1px solid var(--line); display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)} .rp-sample .plan-foot .done{margin-left:auto;font-weight:600;color:var(--strong-t)} /* ---------- coach ---------- */ .rp-sample .coach{background:#F2F8F7;border-color:#DCEAE8;display:flex;flex-direction:column} .rp-sample .quote{font-family:var(--serif);font-size:44px;color:var(--strong);line-height:.7;margin-bottom:14px} .rp-sample .coach p{font-size:14.5px;color:#3F5451;line-height:1.62;margin-bottom:13px} .rp-sample .sig{margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--strong-t)} /* ---------- keep ---------- */ .rp-sample .keep h3{font-size:17px;margin-bottom:9px} .rp-sample .keep .sub{font-size:13.5px;color:var(--muted);margin-bottom:18px} .rp-sample .keep input{width:100%;padding:13px 15px;border:1px solid #D5DEE9;border-radius:9px; font:inherit;font-size:14.5px;margin-bottom:11px;background:#FCFDFE;color:var(--ink)} .rp-sample .keep input::placeholder{color:#A9B4C6} .rp-sample .keep input:focus{outline:none;border-color:var(--strong);box-shadow:0 0 0 3px rgba(0,166,162,.14)} .rp-sample .keep .fine{font-size:11.5px;color:var(--muted);text-align:center;margin-top:11px;line-height:1.5} /* ---------- footer ---------- */ .rp-sample .foot{background:var(--cream);border-top:1px solid #F0E2C8;margin-top:12px} .rp-sample .foot .wrap{display:flex;align-items:center;gap:20px;padding-top:26px;padding-bottom:26px} .rp-sample .foot p{font-size:14px;color:#6B6250} .rp-sample .foot b{color:var(--navy);display:block} .rp-sample .foot .sign{margin-left:auto;font-family:var(--serif);font-style:italic;font-size:21px; color:var(--growing-t);white-space:nowrap;font-variation-settings:"SOFT" 60,"WONK" 1} /* ---------- responsive ---------- */ @media (max-width:1040px){ .rp-sample .c3,.rp-sample .c4,.rp-sample .c5{grid-column:span 6} .rp-sample .c7,.rp-sample .c8{grid-column:span 12} } @media (max-width:820px){ .rp-sample .hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:34px;padding-bottom:34px} .rp-sample .hero-img{order:-1;aspect-ratio:16/9} .rp-sample .c3,.rp-sample .c4,.rp-sample .c5,.rp-sample .c6,.rp-sample .c7,.rp-sample .c8{grid-column:span 12} .rp-sample .bar .wrap{min-height:64px;gap:12px} .rp-sample .stamp{display:none} } @media (max-width:560px){ .rp-sample{--pad:20px} .rp-sample{font-size:15px} .rp-sample .wrap{padding:0 14px} .rp-sample .grid{gap:14px;margin-bottom:14px} .rp-sample .score{flex-direction:column;gap:20px;text-align:center;align-items:center} .rp-sample .ring{width:158px;height:158px} .rp-sample .logo{font-size:21px} .rp-sample .btn span{display:none} .rp-sample .btn{padding:11px 14px} .rp-sample .foot .wrap{flex-direction:column;align-items:flex-start;gap:12px} .rp-sample .foot .sign{margin-left:0} } /* ---------- print ---------- */ @media print{ @page{size:A4;margin:10mm} .rp-sample{background:#fff;font-size:9pt;line-height:1.45} .rp-sample .bar,.rp-sample .keep,.rp-sample .no-print{display:none!important} .rp-sample .wrap{max-width:none;padding:0} /* the printed page is only ~710px wide, so the phone breakpoints fire. Put the desktop layout back explicitly. */ .rp-sample .hero{border:0;background:var(--cream);border-radius:10px;margin-bottom:9px} .rp-sample .hero .wrap{display:grid;grid-template-columns:1.45fr .8fr;gap:18px; padding:16px 18px;align-items:center} .rp-sample .hero-img{order:0;aspect-ratio:5/4;box-shadow:none;max-height:150px} .rp-sample .hero h1{font-size:20pt} .rp-sample .hero p{font-size:9pt;margin-top:9px} .rp-sample .kicker{font-size:7pt;margin-bottom:8px} .rp-sample main{padding:0} .rp-sample .grid{gap:9px;margin-bottom:9px} .rp-sample .card{box-shadow:none;border-color:#DCE4EE;break-inside:avoid;page-break-inside:avoid;padding:13px} .rp-sample .eyebrow{margin-bottom:11px;font-size:7.5pt} .rp-sample .c3{grid-column:span 3} .rp-sample .c4{grid-column:span 4} .rp-sample .c5{grid-column:span 5} .rp-sample .c6{grid-column:span 6} .rp-sample .c7{grid-column:span 7} .rp-sample .c8{grid-column:span 8} .rp-sample .score{flex-direction:row;gap:18px;text-align:left;align-items:center} .rp-sample .ring{width:118px;height:118px} .rp-sample .ring-num{font-size:38px} .rp-sample .score-side .big{font-size:8.5pt} .rp-sample .delta{font-size:7.5pt;padding:5px 10px;margin-top:10px} .rp-sample .since{font-size:7.5pt;margin-top:8px} .rp-sample .fill{transition:none} .rp-sample .act{padding:7px 4px} .rp-sample .act:hover{background:none;border-color:transparent} .rp-sample .coach p{margin-bottom:8px} .rp-sample .book img{width:104px;margin:11px auto 9px;box-shadow:none} .rp-sample .btn-solid{display:none} .rp-sample .radar-wrap svg{max-height:210px} .rp-sample .foot{background:none;border-top:1px solid var(--line);margin-top:9px} .rp-sample .foot .wrap{padding:11px 0;flex-direction:row;align-items:center} .rp-sample a[href]::after{content:""} .rp-sample *{-webkit-print-color-adjust:exact;print-color-adjust:exact} } @media (prefers-reduced-motion:reduce){ .rp-sample *{animation:none!important;transition:none!important} } .rp-sample .sample-note{background:#FDF4E4;border-bottom:1px solid #F0E2C8;color:#6B6250; font-size:14px;line-height:1.55;padding:14px 22px;text-align:center} .rp-sample .sample-note b{color:var(--navy)} .rp-sample .sample-note a{color:var(--strong-t);font-weight:600;margin-left:8px;white-space:nowrap}