/* ============================================================ JARED: the only things you need to edit are in the SETTINGS block in the script near the bottom (search "SETTINGS"). ============================================================ */ #reader *,#reader *::before,#reader *::after{box-sizing:inherit} #reader{margin:0;color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6} #reader button,#reader input,#reader select{font:inherit;color:inherit} #reader a{color:var(--blood)} #reader :focus-visible{outline:3px solid var(--blood);outline-offset:3px} /* header */ #reader .passline{font-family:var(--narrow);font-size:15px;color:var(--smoke);margin-top:10px;min-height:1.4em} #reader .passline b{color:var(--ink)} /* hero */ #reader .rhero{padding:28px 0 36px;text-align:center} #reader .rhero h1{color:var(--gold);font-weight:600;font-size:clamp(34px,8vw,54px);line-height:1.05;margin:0 0 12px;letter-spacing:-.01em} #reader .rhero p{margin:0 auto 28px;max-width:34ch;color:var(--smoke)} #reader .fan{position:relative;height:230px;display:flex;justify-content:center;align-items:flex-end;margin-bottom:20px} #reader .fan .back{position:absolute;width:128px;height:200px;bottom:0;transform-origin:50% 120%;border-radius:10px} #reader .fan .back:nth-child(1){transform:rotate(-14deg) translateX(-40px)} #reader .fan .back:nth-child(2){transform:rotate(0deg);z-index:2} #reader .fan .back:nth-child(3){transform:rotate(14deg) translateX(40px)} #reader .fan button.back{cursor:pointer;padding:0;transition:transform .25s ease} #reader .fan button.back:hover{transform:translateY(-10px)} /* card back + face */ #reader .back{position:relative;overflow:hidden; border:4px solid transparent; background: repeating-linear-gradient(45deg,rgba(255,217,100,.07) 0 1px,transparent 1px 11px) padding-box, repeating-linear-gradient(-45deg,rgba(255,217,100,.07) 0 1px,transparent 1px 11px) padding-box, radial-gradient(ellipse at 50% 42%,#14505e 0%,#0b2836 60%,#061420 100%) padding-box, linear-gradient(135deg,#0a4a5a,#20BFBF 22%,#0e7d8c 45%,#fff3b0 62%,#006799 85%,#ffd964) border-box; box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4)} #reader .back::before{content:"";position:absolute;inset:6px;border:1px solid rgba(246,226,122,.75);border-radius:5px;z-index:1;pointer-events:none} #reader .back::after,#reader .face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3; background: radial-gradient(circle at var(--mx,28%) var(--my,18%),rgba(255,255,255,.38),rgba(255,255,255,0) 42%), linear-gradient(112deg,transparent 35%,rgba(255,255,255,.28) 46%,rgba(255,244,200,.12) 50%,transparent 58%); background-size:100% 100%,260% 100%;background-position:0 0,130% 0;background-repeat:no-repeat;mix-blend-mode:screen} #reader .back:hover::after,#reader .flip:focus-visible .back::after{animation:sheen 1.1s ease} #reader .fan #dailyBtn::after{animation:sheen 1.6s ease 1s,sheen 1.6s ease 6s,sheen 1.6s ease 12s} #reader .flip.open .face::after{animation:sheen 1.2s ease .45s} @keyframes sheen{from{background-position:0 0,130% 0}to{background-position:0 0,-130% 0}} #reader .face{position:absolute} #reader .face::after{mix-blend-mode:soft-light;opacity:.9} #reader .face.major::after{mix-blend-mode:screen;opacity:.6} #reader .back img.logo-img{position:absolute;inset:0;margin:auto;width:76%;height:auto;max-height:72%;object-fit:contain;z-index:2;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))} #reader .back svg.logo-mark{position:absolute;inset:0;margin:auto;width:78%;height:auto;z-index:2;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))} #reader .hint{font-family:var(--narrow);font-size:15px;color:var(--smoke)} /* spreads */ #reader section{padding:28px 0} #reader h2{color:var(--gold);font-weight:600;font-size:28px;line-height:1.15;margin:0 0 6px} #reader .sub{color:var(--smoke);margin:0 0 18px} #reader .q{width:100%;padding:14px 16px;border:2px solid var(--line);background:var(--card);border-radius:12px;margin-bottom:18px;font-size:17px} #reader .q:focus{border-color:var(--gold);outline:none} #reader .spreads{list-style:none;margin:0;padding:0;border-top:2px solid var(--gold)} #reader .spreads li{border-bottom:1px solid var(--line)} #reader .spreads button{width:100%;display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;text-align:left;background:none;border:0;padding:16px 4px;cursor:pointer} #reader .spreads .n{font-weight:600;font-size:20px} #reader .spreads .d{grid-column:1;color:var(--smoke);font-size:16px;line-height:1.4} #reader .spreads .c{grid-row:1 / span 2;grid-column:2;font-family:var(--narrow);font-size:15px;color:var(--smoke);white-space:nowrap} #reader .spreads button:hover .n{color:var(--blood)} /* reading */ #reader #reading{display:none} #reader #reading.on{display:block} #reader .rq{font-style:italic;color:var(--smoke);margin:-2px 0 20px} #reader .table{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:8px 0 24px} #reader .slot{width:112px;text-align:center} #reader .slot .pos{font-family:var(--narrow);font-size:14px;color:var(--smoke);margin-top:8px;line-height:1.3} #reader .flip{width:112px;height:176px;perspective:900px;background:none;border:0;padding:0;cursor:pointer;display:block} #reader .flip .inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d} #reader .flip.open .inner{transform:rotateY(180deg)} #reader .flip .side{position:absolute;inset:0;border-radius:9px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden} #reader .flip .front{transform:rotateY(180deg)} #reader .face{background:radial-gradient(ellipse at 50% 45%,#fffaf0,#f3e6c9) padding-box,linear-gradient(135deg,#0a4a5a,#20BFBF 22%,#0e7d8c 45%,#fff3b0 62%,#006799 85%,#ffd964) border-box;color:#0d1b2a;border:4px solid transparent;box-shadow:inset 0 0 0 3px #fbf3e4,inset 0 0 0 4px #20BFBF;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:8px 6px 10px} #reader .face .num{font-family:var(--narrow);font-weight:700;font-size:14px} #reader .face svg{width:46px;height:46px} #reader .face .nm{font-family:var(--narrow);font-weight:700;font-size:13px;line-height:1.15;text-align:center} #reader .face.rev .art{transform:rotate(180deg)} #reader .face .art{display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:100%;width:100%} #reader .face.major{background:radial-gradient(ellipse at 50% 42%,#14505e,#1c0833) padding-box,linear-gradient(135deg,#0a4a5a,#20BFBF 22%,#0e7d8c 45%,#fff3b0 62%,#006799 85%,#ffd964) border-box;color:#FBF3E4;box-shadow:inset 0 0 0 3px #0d1b2a,inset 0 0 0 4px #20BFBF} #reader .face.major svg{color:#ffd964} #reader .meaning{border-top:2px solid var(--gold);padding:18px 0 4px} #reader .meaning + .meaning{border-top:1px solid var(--line)} #reader .meaning .p{font-family:var(--narrow);font-size:15px;color:var(--smoke)} #reader .meaning h3{margin:0 0 2px;font-size:22px;font-weight:600;line-height:1.2} #reader .meaning .kw{font-style:italic;color:var(--blood);margin:0 0 8px;font-size:16px}#reader .kwline{opacity:.85;font-size:.92em;margin:-6px 0 10px} #reader .meaning p{margin:0 0 10px} #reader .meaning .tip{border-left:3px solid var(--blood);padding-left:12px;font-size:16px} #reader .table.cross{display:grid;grid-template-columns:repeat(3,auto);grid-template-areas:". a ." "b c d" ". e .";justify-content:center} #reader .table.cross .s0{grid-area:c}#reader .table.cross .s1{grid-area:b}#reader .table.cross .s2{grid-area:d}#reader .table.cross .s3{grid-area:a}#reader .table.cross .s4{grid-area:e} #reader .meaning .note{font-size:15px;color:var(--smoke)} #reader .summary .note{font-size:16px;color:var(--smoke)} #reader .ww{margin:4px 0 10px;border:1px solid var(--line);border-radius:10px;padding:0 14px;background:var(--card)} #reader .ww summary{cursor:pointer;font-family:var(--narrow);font-weight:700;font-size:16px;padding:10px 0} #reader .ww p{font-size:16px;line-height:1.5} @media (max-width:420px){#reader .table.cross{gap:8px}} #reader .prices{padding-top:8px} #reader .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} #reader .pc{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--ink);text-decoration:none;cursor:pointer;font:inherit} #reader div.pc{cursor:default} #reader .pc.hot{border-color:var(--gold)} #reader .pc .pp{font-family:var(--narrow);font-weight:700;font-size:30px;line-height:1;color:var(--gold)} #reader .pc .pd{font-size:16px;line-height:1.4} #reader .pc .pgo{margin-top:auto;padding-top:6px;font-family:var(--narrow);font-weight:700;font-size:15px;color:var(--gold);text-decoration:underline;text-underline-offset:3px} #reader a.pc:hover,#reader button.pc:hover{border-color:var(--gold)} @media (max-width:360px){#reader .pgrid{grid-template-columns:1fr}} #reader .lnk{background:none;border:0;padding:0;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit} #reader .ent-bar{background:var(--gold);color:#0d1b2a;text-align:center;font-family:var(--narrow);font-weight:700;font-size:15px;padding:7px 12px;line-height:1.35} #reader .disclaimer{background:var(--cream);color:#0d1b2a;border:3px solid var(--gold);border-radius:16px;padding:22px 22px 8px;margin:10px 0 6px} #reader .disclaimer h2{color:#0d1b2a;font-size:26px;margin-bottom:10px} #reader .disclaimer p{font-size:16.5px;margin:0 0 12px} #reader .fine{font-size:14px;color:var(--smoke);margin:14px 0 0;line-height:1.45} #reader .flinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 14px} #reader .flinks .lnk{font-family:var(--narrow);font-weight:700;font-size:16px} #reader dialog.legal{max-width:640px;width:calc(100% - 24px);max-height:88vh;padding:0} #reader .legal-in{padding:22px 22px 26px;overflow-y:auto;max-height:88vh;font-size:16px;line-height:1.55} #reader .legal-in h2{margin:0 0 4px;font-size:26px} #reader .legal-in h3{font-size:18px;margin:20px 0 4px;color:var(--gold)} #reader .legal-in p,#reader .legal-in li{margin:0 0 10px} #reader .legal-in .upd{color:var(--smoke);font-size:14px;margin-bottom:12px} #reader .legal-in .callout{border:2px solid var(--gold);border-radius:10px;padding:10px 14px;margin:12px 0} #reader .agree{display:flex;gap:10px;align-items:flex-start;margin:14px 0 2px;font-size:15px;line-height:1.45;cursor:pointer} #reader .agree input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:#ffd964} #reader .summary{background:var(--card);border:2px solid var(--gold);border-radius:14px;padding:20px 22px;margin:22px 0} #reader .summary h3{margin:0 0 8px;font-size:22px} #reader .summary p{margin:0 0 8px} #reader .yn{font-family:var(--narrow);font-weight:700;font-size:64px;line-height:1;margin:0 0 8px} #reader .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} /* paywall */ #reader dialog{border:0;border-radius:18px;padding:0;max-width:440px;width:calc(100% - 32px);background:var(--card);color:var(--ink)} #reader dialog::backdrop{background:rgba(0,0,0,.6)} #reader .pw{padding:26px 24px 22px} #reader .pw h2{font-size:26px} #reader .plan{display:block;width:100%;text-align:left;border:2px solid var(--ink);border-radius:14px;padding:14px 16px;margin:12px 0 0;background:transparent;cursor:pointer;text-decoration:none;color:var(--ink)} #reader .plan.best{background:var(--gold);color:#0d1b2a;border-color:var(--gold)} #reader .plan .pr{font-family:var(--narrow);font-weight:700;font-size:30px;line-height:1} #reader .plan .what{display:block;font-size:16px;margin-top:4px} #reader .code{display:flex;gap:8px;margin-top:18px} #reader .code input{flex:1;min-width:0;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--bg)} #reader .small{font-size:14px;color:var(--smoke);margin:12px 0 0;line-height:1.45} #reader .x{position:absolute;right:10px;top:8px;background:none;border:0;font-size:28px;cursor:pointer;color:var(--smoke);line-height:1;padding:6px} #reader .msg{font-family:var(--narrow);font-size:15px;margin-top:8px;min-height:1.3em;color:var(--blood)} #reader .rfoot{border-top:2px solid var(--gold);margin-top:30px;padding:24px 0 40px;font-size:16px;color:var(--smoke)} #reader footer p{margin:0 0 8px} @media (prefers-reduced-motion:reduce){ #reader .flip .inner,#reader .fan button.back{transition:none} #reader .back::after,#reader .face::after{animation:none!important} } @media (max-width:420px){ #reader .slot,#reader .flip{width:96px}#reader .flip{height:152px} #reader .face svg{width:38px;height:38px} } #reader .face.photo{background:none;border:0;box-shadow:none;padding:0;display:block} #reader .face.photo img.cardface{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #reader .face.photo.rev img.cardface{transform:rotate(180deg)} #reader .back img.cardback-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} /* Penny Profit overrides: site fonts and Zen Room colours */ #reader{--bg:#140a26;--card:#241d38;--ink:#f1ecfb;--blood:#ff5fa0;--gold:#ffd964;--smoke:#bdb2dd;--line:#4a3c6e;--cream:#FBF3E4;--deep:#0d0820;--serif:var(--font-body);--narrow:var(--font-display);--script:var(--font-display);font-family:var(--font-body);font-size:17px;line-height:1.6} #reader h1,#reader h2,#reader h3{font-family:var(--font-display)} #reader .note{font-weight:inherit} #reader .btn{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:#fff;letter-spacing:0} #reader .btn.ghost{color:var(--gold)} #reader .btn:disabled{opacity:.5;cursor:not-allowed} #reader .rhero{padding:1.6rem 0 2rem} #reader .rhero::before,#reader .rhero::after{content:none} #reader section{padding:1.6rem 0}