/* Times Premium Paywall styles: theme aware (light and dark) */ :root { --toe-pw-surface: #ffffff; --toe-pw-text: #1d2327; --toe-pw-muted: #50575e; --toe-pw-border: #dcdcde; --toe-pw-accent: #b32d2e; --toe-pw-accent-hover: #8f2425; --toe-pw-input-bg: #ffffff; --toe-pw-page-bg: #ffffff; /* overwritten by JS with the real page background */ } /* Dark mode: activated by JS (adds .toe-pw-dark to when it detects a dark page background), plus common theme dark classes as a safety net. */ .toe-pw-dark, html.dark, body.dark, html.dark-mode, body.dark-mode, html[data-theme="dark"], body[data-theme="dark"], html[data-mode="dark"], body[data-mode="dark"] { --toe-pw-surface: #1f2127; --toe-pw-text: #e8eaed; --toe-pw-muted: #b0b4ba; --toe-pw-border: #3a3d45; --toe-pw-accent: #e05253; --toe-pw-accent-hover: #c73f40; --toe-pw-input-bg: #2a2d35; } .toe-pw-fade { height: 90px; margin-top: -90px; position: relative; background: linear-gradient(to bottom, rgba(0,0,0,0), var(--toe-pw-page-bg) 85%); pointer-events: none; } .toe-pw-box { border: 1px solid var(--toe-pw-border); border-top: 4px solid var(--toe-pw-accent); border-radius: 8px; padding: 28px 26px; margin: 6px 0 30px; background: var(--toe-pw-surface); color: var(--toe-pw-text); box-shadow: 0 2px 10px rgba(0,0,0,.12); text-align: center; } .toe-pw-box h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.3; color: var(--toe-pw-text); } .toe-pw-box > p, .toe-pw-note, .toe-pw-sent-note { margin: 0 auto 18px; max-width: 480px; color: var(--toe-pw-muted); } .toe-pw-note { font-size: 14px; margin-bottom: 10px; } .toe-pw-sent-note { font-size: 14px; margin-bottom: 10px; text-align: left; } .toe-pw-plans { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 6px 0 14px; } .toe-pw-plan { display: flex; flex-direction: column; min-width: 108px; padding: 12px 16px; border: 1px solid var(--toe-pw-border); border-radius: 8px; text-decoration: none; color: var(--toe-pw-text); background: var(--toe-pw-surface); transition: border-color .15s, box-shadow .15s; } .toe-pw-plan:hover { border-color: var(--toe-pw-accent); box-shadow: 0 2px 8px rgba(179,45,46,.25); text-decoration: none; color: var(--toe-pw-text); } .toe-pw-plan-label { font-weight: 600; font-size: 14px; } .toe-pw-plan-price { font-size: 16px; color: var(--toe-pw-accent); font-weight: 700; margin-top: 4px; } .toe-pw-login-row { margin-top: 6px; font-size: 14px; } .toe-pw-login-row a { color: var(--toe-pw-accent); } .toe-pw-sep { color: var(--toe-pw-muted); margin: 0 6px; } .toe-pw-otp { max-width: 380px; margin: 14px auto 0; text-align: left; } .toe-pw-otp input[type="email"], .toe-pw-otp input[type="text"] { width: 100%; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--toe-pw-border); border-radius: 6px; font-size: 15px; box-sizing: border-box; background: var(--toe-pw-input-bg); color: var(--toe-pw-text); } .toe-pw-otp input::placeholder { color: var(--toe-pw-muted); opacity: 1; } .toe-pw-otp button { width: 100%; padding: 11px 14px; background: var(--toe-pw-accent); color: #fff; border: 0; border-radius: 6px; font-size: 15px; font-weight: 600; cursor: pointer; } .toe-pw-otp button:hover { background: var(--toe-pw-accent-hover); } .toe-pw-otp button[disabled] { opacity: .6; cursor: wait; } .toe-pw-resend { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--toe-pw-accent); } .toe-pw-msg { margin: 10px 0 0; font-size: 14px; min-height: 1.2em; } .toe-pw-msg.toe-ok { color: #2ea043; } .toe-pw-msg.toe-err { color: var(--toe-pw-accent); } .toe-pw-adminnote { background: #fcf3cd; color: #6b5900; border: 1px dashed #c9a600; border-radius: 6px; padding: 10px 14px; font-size: 14px; } .toe-pw-account .toe-pw-plans { justify-content: flex-start; } .toe-pw-active { color: #2ea043; } .toe-pw-inactive { color: var(--toe-pw-accent); } @media (max-width: 480px) { .toe-pw-plans { flex-direction: column; } .toe-pw-plan { flex-direction: row; justify-content: space-between; align-items: center; } .toe-pw-plan-price { margin-top: 0; } .toe-pw-sep { display: block; visibility: hidden; height: 4px; } } /* Story badges */ .toe-pw-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 2px 8px 2px 6px; border-radius: 10px; font-size: 10.5px; font-weight: 700; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; position: relative; top: -2px; } .toe-pw-badge-premium { background: var(--toe-pw-accent); color: #fff; } .toe-pw-badge-free { background: transparent; color: var(--toe-pw-accent); border: 1px solid var(--toe-pw-accent); } .toe-pw-badge svg { flex: 0 0 auto; }