/* Psychology for Everyone – reading website */ :root { --bg: #fbf3ea; --surface: #fff; --surface2: #f6e6d6; --text: #2b2523; --muted: #6b5a52; --primary: #1c2546; --primary-ink: #fff; --accent: #b0702f; --border: #ead6c2; --header: linear-gradient(90deg, #1c2546, #2c3a68); --header-ink: #fdf3e7; --nav: #f3dcc4; --nav-ink: #1c2546; --font-head: 'Lora', 'Noto Serif Devanagari', Georgia, serif; --font-body: 'Lora', 'Noto Serif Devanagari', Georgia, serif; --font-ui: 'Poppins', 'Noto Sans Devanagari', system-ui, sans-serif; --font-sa: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif; --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06); --pattern: none; --hero-img: none; --reader-size: 18px; } html { scroll-behavior: smooth; } body.pfe-body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } #pfe-app, #pfe-app * { box-sizing: border-box; } #pfe-app { min-height: 100vh; background: var(--bg); background-image: var(--pattern); background-attachment: fixed; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; } #pfe-app a { color: var(--primary); } #pfe-app[data-dark="1"] a { color: var(--primary); } #pfe-app button { font-family: var(--font-ui); } #pfe-app img { max-width: 100%; height: auto; } .pfe-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* boot */ .pfe-boot { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #fbf3ea; color: #1c2546; font-family: 'Poppins', sans-serif; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; animation: pfe-boot-hide 0s 8s forwards; } .pfe-boot-mark { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #e7cfb5; border-top-color: #b0702f; animation: pfe-spin 1s linear infinite; } @keyframes pfe-spin { to { transform: rotate(360deg); } } @keyframes pfe-boot-hide { to { opacity: 0; visibility: hidden; } } .pfe-seo-wrap { max-width: 860px; margin: 40px auto; padding: 0 20px; } /* ---------- header ---------- */ .pfe-header { background: var(--header); color: var(--header-ink); position: relative; z-index: 30; } .pfe-header-in { display: flex; align-items: center; gap: 18px; padding: 10px clamp(12px, 2.4vw, 28px); max-width: 1680px; margin: 0 auto; } .pfe-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit !important; min-width: 0; } .pfe-logo { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); overflow: hidden; } .pfe-logo img { width: 100%; height: 100%; object-fit: cover; } .pfe-logo svg { width: 38px; height: 38px; } .pfe-brand-lines { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .pfe-brand-lines b { font-family: var(--font-head); font-size: clamp(17px, 2vw, 23px); font-weight: 700; letter-spacing: .01em; white-space: nowrap; } .pfe-brand-lines span { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .9; white-space: nowrap; } .pfe-brand-lines i { font-family: var(--font-head); font-size: 13.5px; opacity: .9; white-space: nowrap; } .pfe-header-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; } .pfe-iconbtn { appearance: none; border: 0; background: rgba(255,255,255,.12); color: inherit; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; } .pfe-iconbtn:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); } .pfe-iconbtn svg { width: 20px; height: 20px; } .pfe-account-btn { appearance: none; border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: inherit; border-radius: 999px; padding: 6px 14px 6px 6px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; } .pfe-account-btn img, .pfe-account-btn .pfe-av { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; } .pfe-account-btn:hover { background: rgba(255,255,255,.18); } .pfe-burger { display: none; } /* ---------- menu bar ---------- */ .pfe-menubar { background: var(--nav); color: var(--nav-ink); position: sticky; top: 0; z-index: 25; box-shadow: 0 2px 10px rgba(0,0,0,.06); } .pfe-menubar-in { max-width: 1680px; margin: 0 auto; padding: 0 clamp(8px, 2vw, 24px); display: flex; align-items: stretch; gap: 2px; } .pfe-menu { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 2px; } .pfe-menu > li { position: relative; } .pfe-menu > li > a, .pfe-menu > li > button { display: flex; align-items: center; gap: 5px; height: 46px; padding: 0 12px; color: var(--nav-ink) !important; text-decoration: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600; background: none; border: 0; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; } .pfe-menu > li > a:hover, .pfe-menu > li > button:hover, .pfe-menu > li.open > button { background: rgba(0,0,0,.05); } .pfe-menu > li.active > a, .pfe-menu > li.active > button { border-bottom-color: var(--accent); } .pfe-menu .pfe-caret { width: 10px; height: 10px; opacity: .7; transition: transform .2s; } .pfe-menu > li.open .pfe-caret { transform: rotate(180deg); } .pfe-drop { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,.14); padding: 8px; display: none; z-index: 40; max-height: 72vh; overflow: auto; } .pfe-menu > li.open > .pfe-drop { display: block; animation: pfe-drop .18s ease-out; } @keyframes pfe-drop { from { opacity: 0; transform: translateY(-6px); } } .pfe-drop a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text) !important; text-decoration: none; font-family: var(--font-ui); font-size: 13.5px; } .pfe-drop a:hover { background: var(--surface2); } .pfe-drop a small { display: block; color: var(--muted); font-size: 12px; } .pfe-drop h6 { margin: 8px 12px 4px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .pfe-drop.mega { width: min(940px, 92vw); display: none; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; } .pfe-menu > li.open > .pfe-drop.mega { display: grid; } .pfe-menu > li.right-drop > .pfe-drop { left: auto; right: 0; } /* social bar */ .pfe-socialbar { max-width: 1680px; margin: 0 auto; padding: 8px clamp(12px, 2.4vw, 28px); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pfe-social { display: flex; gap: 8px; flex-wrap: wrap; } .pfe-social a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--primary) !important; transition: transform .2s, background .2s; } .pfe-social a:hover { transform: translateY(-2px) scale(1.06); background: var(--primary); color: var(--primary-ink) !important; } .pfe-social svg { width: 16px; height: 16px; } .pfe-crumbs { margin-left: auto; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .pfe-crumbs a { color: var(--muted) !important; text-decoration: none; } .pfe-crumbs a:hover { color: var(--primary) !important; } .pfe-tagline-chip { font-family: var(--font-head); font-style: italic; font-size: 13.5px; color: var(--accent); } /* ---------- layout ---------- */ .pfe-shell { max-width: 1680px; margin: 0 auto; padding: 0 clamp(10px, 2vw, 24px) 30px; display: grid; grid-template-columns: 270px minmax(0, 1fr) 270px; gap: 22px; align-items: start; } .pfe-nav { position: sticky; top: 58px; max-height: calc(100vh - 70px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 10px; scrollbar-width: thin; } .pfe-main { min-width: 0; } .pfe-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 58px; max-height: calc(100vh - 70px); overflow: auto; scrollbar-width: thin; padding-bottom: 6px; } .pfe-nav h4 { margin: 10px 8px 6px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .pfe-nav ul { list-style: none; margin: 0; padding: 0; } .pfe-nav li a { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 9px; text-decoration: none; color: var(--text) !important; font-family: var(--font-ui); font-size: 13.4px; line-height: 1.35; } .pfe-nav li a:hover { background: var(--surface2); } .pfe-nav li a.on { background: var(--primary); color: var(--primary-ink) !important; } .pfe-nav li a .n { flex: 0 0 auto; min-width: 22px; height: 22px; border-radius: 6px; background: var(--surface2); color: var(--primary); display: grid; place-items: center; font-size: 11px; font-weight: 700; } .pfe-nav li a.on .n { background: rgba(255,255,255,.2); color: inherit; } .pfe-nav li a .done { margin-left: auto; color: #2f9e57; font-size: 13px; } .pfe-nav li a.on .done { color: inherit; } .pfe-nav li.sub a { padding-left: 34px; font-size: 12.8px; color: var(--muted) !important; } .pfe-nav li.sub a.spy { color: var(--primary) !important; font-weight: 600; } .pfe-nav .pfe-nav-sep { height: 1px; background: var(--border); margin: 10px 6px; } .pfe-nav .pfe-nav-close { display: none; } /* cards */ .pfe-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .pfe-card h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 19px; color: var(--primary); } .pfe-card p { margin: 0 0 10px; } .pfe-page { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); padding: clamp(18px, 3.4vw, 46px); animation: pfe-in .35s ease-out; } @keyframes pfe-in { from { opacity: 0; transform: translateY(8px); } } .pfe-page h1 { font-family: var(--font-head); color: var(--primary); font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; margin: 0 0 10px; } .pfe-kicker { font-family: var(--font-ui); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 6px; } .pfe-lead { font-size: 18px; color: var(--muted); font-style: italic; margin: 0 0 18px; } .pfe-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .pfe-grid.wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .pfe-tile { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text) !important; transition: transform .25s, box-shadow .25s; box-shadow: var(--shadow); } .pfe-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.12); } .pfe-tile .pfe-tile-img { aspect-ratio: 2/3; background-size: cover; background-position: center; } .pfe-tile .pfe-tile-img.wide { aspect-ratio: 16/9; } .pfe-tile .pfe-tile-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pfe-tile .pfe-tile-body b { font-family: var(--font-head); font-size: 17px; color: var(--primary); line-height: 1.3; } .pfe-tile .pfe-tile-body span { font-size: 14px; color: var(--muted); } .pfe-tile .pfe-tile-meta { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 12px; color: var(--muted); } .pfe-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--surface2); color: var(--primary); font-family: var(--font-ui); font-size: 12px; font-weight: 600; text-decoration: none; border: 0; } .pfe-pill.ok { background: #e3f5e9; color: #1d7a43; } .pfe-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 20px; background: var(--primary); color: var(--primary-ink) !important; font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .2s, filter .2s; box-shadow: 0 6px 16px rgba(0,0,0,.12); } .pfe-btn:hover { transform: translateY(-1px); filter: brightness(1.06); } .pfe-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .pfe-btn.ghost { background: transparent; color: var(--primary) !important; box-shadow: inset 0 0 0 1.5px var(--primary); } .pfe-btn.accent { background: var(--accent); color: #fff !important; } .pfe-btn.sm { padding: 7px 14px; font-size: 13px; } .pfe-btn.block { width: 100%; } .pfe-btn svg { width: 18px; height: 18px; } .pfe-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .pfe-muted { color: var(--muted); } .pfe-empty { text-align: center; padding: 34px 16px; color: var(--muted); border: 2px dashed var(--border); border-radius: var(--radius); } .pfe-empty b { display: block; font-family: var(--font-head); font-size: 20px; color: var(--primary); margin-bottom: 6px; } /* hero */ .pfe-hero { position: relative; border-radius: calc(var(--radius) + 6px); overflow: hidden; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 24px; padding: clamp(22px, 4vw, 48px); color: #fff; background: #1c2546; isolation: isolate; box-shadow: var(--shadow); } .pfe-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--cover-img, var(--hero-img)); background-size: cover; background-position: center; transform: scale(1.04); animation: pfe-kenburns 26s ease-in-out infinite alternate; } .pfe-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10,12,24,.82) 0%, rgba(10,12,24,.55) 52%, rgba(10,12,24,.15) 100%); } @keyframes pfe-kenburns { to { transform: scale(1.12) translate(-1.5%, -1%); } } .pfe-hero h1 { font-family: var(--font-head); font-size: clamp(30px, 4.4vw, 54px); line-height: 1.07; margin: 6px 0 12px; color: #fff; } .pfe-hero p { font-size: 18px; max-width: 560px; opacity: .95; } .pfe-hero .pfe-kicker { color: #ffd9a8; } .pfe-hero .pfe-btn { box-shadow: 0 10px 24px rgba(0,0,0,.25); } .pfe-hero .pfe-btn.ghost { color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); } .pfe-hero-cover { justify-self: center; width: min(250px, 100%); border-radius: 6px 12px 12px 6px; box-shadow: -10px 18px 40px rgba(0,0,0,.45), inset 4px 0 8px rgba(0,0,0,.2); transform: perspective(900px) rotateY(-14deg); transition: transform .6s; } .pfe-hero-cover:hover { transform: perspective(900px) rotateY(-2deg) translateY(-4px); } .pfe-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; margin: 18px 0; } .pfe-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); text-decoration: none; color: var(--text) !important; transition: transform .2s; } .pfe-stat:hover { transform: translateY(-3px); } .pfe-stat b { display: block; font-family: var(--font-head); font-size: 30px; color: var(--primary); line-height: 1.1; } .pfe-stat span { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); } .pfe-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 28px 2px 12px; } .pfe-section-title h2 { font-family: var(--font-head); color: var(--primary); font-size: 24px; margin: 0; } .pfe-section-title a { font-family: var(--font-ui); font-size: 13px; font-weight: 600; text-decoration: none; } .pfe-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pfe-quote { font-family: var(--font-head); font-size: 19px; font-style: italic; color: var(--primary); } /* ---------- reader ---------- */ .pfe-progress-top { position: fixed; left: 0; top: 0; height: 4px; width: 0; background: var(--accent); z-index: 60; transition: width .1s; } .pfe-reader-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 22px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-family: var(--font-ui); font-size: 13px; color: var(--muted); } .pfe-reader-tools .sp { flex: 1; } .pfe-tool { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-family: var(--font-ui); font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; } .pfe-tool:hover { border-color: var(--primary); color: var(--primary); } .pfe-tool.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .pfe-tool svg { width: 15px; height: 15px; } .pfe-content { font-size: var(--reader-size); line-height: 1.75; } .pfe-content h2 { font-family: var(--font-head); color: var(--primary); font-size: 1.45em; line-height: 1.25; margin: 1.8em 0 .6em; scroll-margin-top: 70px; } .pfe-content h3 { font-family: var(--font-head); color: var(--primary); font-size: 1.18em; margin: 1.5em 0 .5em; } .pfe-content h4 { font-family: var(--font-ui); font-size: .82em; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 1.4em 0 .4em; } .pfe-content p { margin: 0 0 1em; } .pfe-content ul, .pfe-content ol { padding-left: 1.3em; margin: 0 0 1em; } .pfe-content li { margin: .25em 0; } .pfe-content li p { margin: 0; } .pfe-content figure.pfe-figure { margin: 1.4em 0; text-align: center; } .pfe-content figure.pfe-figure img { border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); cursor: zoom-in; max-height: 640px; width: auto; } .pfe-content blockquote { margin: 1.2em 0; padding: 14px 18px; background: var(--surface2); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; } .pfe-table-wrap { overflow-x: auto; margin: 1.2em 0; border-radius: 12px; border: 1px solid var(--border); } .pfe-table { width: 100%; border-collapse: collapse; font-size: .9em; line-height: 1.5; } .pfe-table th, .pfe-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; } .pfe-table th, .pfe-table thead td { background: var(--primary); color: var(--primary-ink); font-family: var(--font-ui); font-size: .86em; font-weight: 600; } .pfe-table tr:nth-child(even) td { background: color-mix(in srgb, var(--surface2) 45%, transparent); } .pfe-table p { margin: 0; } .pfe-shloka { margin: 1.6em 0; padding: 22px 24px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--surface2) 80%, transparent), var(--surface)); border: 1px solid var(--border); position: relative; overflow: hidden; } .pfe-shloka::after { content: "\0950"; position: absolute; right: 16px; top: 4px; font-size: 64px; opacity: .07; font-family: var(--font-sa); color: var(--accent); } .pfe-shloka-label { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; } .pfe-shloka p { margin: 0 0 .55em; } .pfe-sa, .pfe-shloka p:has(+ p strong) { font-family: var(--font-sa); } .pfe-story-box { margin: 1.6em 0; padding: 20px 22px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--accent); box-shadow: var(--shadow); } .pfe-story-label { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; } .pfe-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; } .pfe-pager a { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text) !important; background: var(--surface); transition: border-color .2s, transform .2s; } .pfe-pager a:hover { border-color: var(--primary); transform: translateY(-2px); } .pfe-pager small { display: block; font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .pfe-pager b { font-family: var(--font-head); color: var(--primary); } .pfe-pager .next { text-align: right; grid-column: 2; } .pfe-complete { margin: 30px 0 0; padding: 18px; border-radius: var(--radius); background: var(--surface2); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .pfe-complete b { font-family: var(--font-head); color: var(--primary); font-size: 18px; } /* shloka cards */ .pfe-sh-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; } .pfe-sh-card .sa { font-family: var(--font-sa); font-size: 21px; line-height: 1.55; color: var(--primary); } .pfe-sh-card .tr { font-style: italic; color: var(--muted); font-size: 15px; } .pfe-sh-card .en { font-size: 15.5px; } .pfe-sh-card .ref { font-family: var(--font-ui); font-size: 12px; color: var(--accent); font-weight: 600; } .pfe-sh-card a.more { font-family: var(--font-ui); font-size: 13px; font-weight: 600; text-decoration: none; margin-top: auto; } .pfe-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 18px; } .pfe-tab { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 14px; font-family: var(--font-ui); font-size: 13px; cursor: pointer; text-decoration: none; } .pfe-tab.on { background: var(--primary); color: var(--primary-ink) !important; border-color: var(--primary); } .pfe-tab .c { opacity: .7; margin-left: 4px; font-size: 11.5px; } /* myths */ .pfe-myths { display: grid; gap: 10px; } .pfe-myth-row { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } .pfe-myth-row > div { padding: 14px 16px; position: relative; } .pfe-myth-row .m { background: #fdecec; color: #5d1f1f; } .pfe-myth-row .f { background: #e8f6ee; color: #163d27; } #pfe-app[data-dark="1"] .pfe-myth-row .m { background: #3a1d22; color: #ffd9d9; } #pfe-app[data-dark="1"] .pfe-myth-row .f { background: #17352a; color: #d4f5e2; } .pfe-myth-row .tag { display: inline-block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; opacity: .8; } .pfe-myth-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .pfe-myth-head div { padding: 8px 16px; } .pfe-myth-head .m { color: #b23a3a; } .pfe-myth-head .f { color: #1d7a43; } .pfe-flip { perspective: 1000px; cursor: pointer; min-height: 170px; } .pfe-flip-in { position: relative; width: 100%; height: 100%; min-height: 170px; transition: transform .6s; transform-style: preserve-3d; } .pfe-flip.on .pfe-flip-in { transform: rotateY(180deg); } .pfe-flip-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 6px; box-shadow: var(--shadow); } .pfe-flip-face.m { background: #fdecec; color: #5d1f1f; } .pfe-flip-face.f { background: #e8f6ee; color: #163d27; transform: rotateY(180deg); } /* quiz */ .pfe-quiz-q { font-family: var(--font-head); font-size: 22px; color: var(--primary); margin: 6px 0 16px; line-height: 1.35; } .pfe-opts { display: grid; gap: 10px; } .pfe-opt { appearance: none; text-align: left; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); border-radius: 12px; padding: 13px 16px; font-family: var(--font-body); font-size: 16px; cursor: pointer; display: flex; gap: 12px; align-items: center; transition: border-color .15s, background .15s, transform .15s; } .pfe-opt:hover:not(:disabled) { border-color: var(--primary); transform: translateX(3px); } .pfe-opt .k { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--surface2); color: var(--primary); display: grid; place-items: center; font-family: var(--font-ui); font-weight: 700; font-size: 13px; } .pfe-opt.right { border-color: #2f9e57; background: #e8f6ee; color: #163d27; } .pfe-opt.right .k { background: #2f9e57; color: #fff; } .pfe-opt.wrong { border-color: #d14b4b; background: #fdecec; color: #5d1f1f; } .pfe-opt.wrong .k { background: #d14b4b; color: #fff; } .pfe-qbar { height: 8px; background: var(--surface2); border-radius: 99px; overflow: hidden; margin: 8px 0 18px; } .pfe-qbar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; } .pfe-ring { --p: 0; width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface2) 0); display: grid; place-items: center; margin: 10px auto; } .pfe-ring::before { content: attr(data-label); width: 118px; height: 118px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--font-head); font-size: 30px; color: var(--primary); } .pfe-think { background: var(--surface2); border-radius: 14px; padding: 16px 18px; margin-top: 18px; } .pfe-think textarea { width: 100%; min-height: 70px; margin: 6px 0 12px; } .pfe-bars { display: grid; gap: 8px; } .pfe-bar { display: grid; grid-template-columns: 160px 1fr 54px; gap: 10px; align-items: center; font-family: var(--font-ui); font-size: 13px; } .pfe-bar .t { height: 10px; background: var(--surface2); border-radius: 99px; overflow: hidden; } .pfe-bar .t i { display: block; height: 100%; background: var(--primary); border-radius: 99px; } /* challenge */ .pfe-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .pfe-day { appearance: none; text-align: left; border: 1.5px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; color: var(--text); display: flex; flex-direction: column; gap: 6px; transition: transform .15s, border-color .15s; min-height: 132px; } .pfe-day:hover { transform: translateY(-2px); border-color: var(--primary); } .pfe-day b { font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; } .pfe-day.done { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .pfe-day.done b { color: inherit; } /* media */ .pfe-media-thumb { position: relative; aspect-ratio: 16/9; background: var(--surface2) center/cover; display: grid; place-items: center; } .pfe-media-thumb .play { width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,.55); display: grid; place-items: center; color: #fff; transition: transform .2s; } .pfe-tile:hover .play { transform: scale(1.1); } .pfe-embed { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; } .pfe-embed iframe, .pfe-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .pfe-audio-list { display: grid; gap: 10px; } .pfe-audio { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; } .pfe-audio audio { width: 100%; margin-top: 6px; } .pfe-audio .ic { width: 48px; height: 48px; border-radius: 12px; background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; } /* ---------- right column ---------- */ .pfe-pay h3 { display: flex; align-items: center; gap: 8px; } .pfe-pay-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface2); border-radius: 12px; padding: 4px; gap: 4px; margin: 10px 0 12px; } .pfe-pay-tabs button { appearance: none; border: 0; background: transparent; border-radius: 9px; padding: 8px 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; line-height: 1.2; } .pfe-pay-tabs button.on { background: var(--surface); color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); } .pfe-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; } .pfe-chip { appearance: none; border: 1.5px solid var(--border); background: var(--surface); border-radius: 10px; padding: 8px 4px; font-weight: 700; font-size: 14px; color: var(--text); cursor: pointer; } .pfe-chip.on { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); } .pfe-amount { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: var(--surface); } .pfe-amount span { padding: 0 10px; font-weight: 700; color: var(--muted); font-family: var(--font-ui); } .pfe-amount input { border: 0 !important; outline: 0; flex: 1; padding: 9px 10px 9px 0; font-size: 17px; font-weight: 700; background: transparent; color: var(--text); width: 100%; box-shadow: none !important; } .pfe-small { font-size: 12.5px; color: var(--muted); line-height: 1.5; } .pfe-linkbtn { appearance: none; border: 0; background: none; padding: 0; color: var(--primary); font-family: var(--font-ui); font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; } .pfe-note { background: var(--surface2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text); margin-top: 10px; } .pfe-search { position: relative; } .pfe-search input { width: 100%; border: 1.5px solid var(--border); border-radius: 999px; padding: 11px 16px 11px 40px; font-size: 15px; background: var(--surface); color: var(--text); font-family: var(--font-ui); } .pfe-search svg.ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); } .pfe-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.16); z-index: 20; max-height: 380px; overflow: auto; padding: 6px; display: none; } .pfe-search-results.show { display: block; } .pfe-search-results a { display: block; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--text) !important; font-size: 13.5px; } .pfe-search-results a:hover { background: var(--surface2); } .pfe-search-results a small { display: block; color: var(--accent); font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } #pfe-app select, #pfe-app input[type=text], #pfe-app input[type=email], #pfe-app input[type=password], #pfe-app input[type=number], #pfe-app textarea { border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 15px; background: var(--surface); color: var(--text); font-family: var(--font-ui); width: 100%; } #pfe-app select:focus, #pfe-app input:focus, #pfe-app textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 1px; border-color: var(--primary); } .pfe-buy-btns { display: grid; gap: 8px; margin-top: 10px; } .pfe-contact a { display: flex; gap: 10px; align-items: center; padding: 8px 0; text-decoration: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600; word-break: break-word; } .pfe-contact svg { width: 20px; height: 20px; flex: 0 0 auto; } .pfe-contact small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; } /* ---------- modal / overlay ---------- */ .pfe-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(8,10,20,.6); backdrop-filter: blur(4px); animation: pfe-fade .2s; } @keyframes pfe-fade { from { opacity: 0; } } .pfe-modal-box { width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--text); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.35); padding: 24px; position: relative; animation: pfe-pop .25s ease-out; font-family: var(--font-body); } .pfe-modal-box.wide { width: min(980px, 100%); } @keyframes pfe-pop { from { transform: translateY(12px) scale(.98); opacity: 0; } } .pfe-modal-x { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface2); color: var(--text); cursor: pointer; font-size: 20px; line-height: 1; } .pfe-form { display: grid; gap: 12px; } .pfe-form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pfe-form label { display: grid; gap: 4px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text); } .pfe-form label em { font-weight: 400; color: var(--muted); font-style: normal; } .pfe-hp { position: absolute; left: -9999px; } .pfe-msg { padding: 10px 12px; border-radius: 10px; font-family: var(--font-ui); font-size: 13.5px; } .pfe-msg.err { background: #fdecec; color: #8a1f1f; } .pfe-msg.ok { background: #e8f6ee; color: #145c33; } .pfe-lightbox img { max-height: 86vh; border-radius: 12px; } .pfe-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--primary); color: var(--primary-ink); padding: 12px 18px; border-radius: 999px; font-family: var(--font-ui); font-size: 14px; box-shadow: 0 14px 30px rgba(0,0,0,.25); animation: pfe-toast 3.2s forwards; } @keyframes pfe-toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } } /* welcome flash */ .pfe-welcome { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 12px; color: #fff; isolation: isolate; overflow: hidden; } .pfe-welcome-fit { transform-origin: center center; } .pfe-welcome::before { content: ""; position: fixed; inset: 0; z-index: -2; background-image: var(--cover-img, var(--hero-img)); background-size: cover; background-position: center; animation: pfe-kenburns 30s ease-in-out infinite alternate; } .pfe-welcome::after { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(12,14,30,.55), rgba(12,14,30,.88)); } .pfe-welcome-box { max-width: 760px; text-align: center; animation: pfe-rise 1s ease-out both; } @keyframes pfe-rise { from { opacity: 0; transform: translateY(24px); } } .pfe-welcome .lotus { width: clamp(54px, 10vh, 92px); height: clamp(54px, 10vh, 92px); margin: 0 auto 8px; color: #ffd9a8; animation: pfe-bloom 2.4s ease-out both; } @keyframes pfe-bloom { from { transform: scale(.4) rotate(-20deg); opacity: 0; } } .pfe-welcome h1 { font-family: var(--font-head); font-size: clamp(26px, min(4.6vw, 6vh), 50px); line-height: 1.1; margin: 0 0 6px; color: #fff; } .pfe-welcome .series { font-family: var(--font-ui); letter-spacing: .26em; text-transform: uppercase; font-size: 12px; color: #ffd9a8; margin-bottom: 18px; } .pfe-welcome .msg p { font-size: clamp(15px, min(1.7vw, 2.3vh), 19px); line-height: 1.6; margin: 0 0 1.2vh; opacity: .96; } .pfe-welcome .tag { font-family: var(--font-head); font-style: italic; font-size: clamp(19px, 2.2vw, 25px); color: #ffe2b8; margin: 1.8vh 0 2.4vh; animation: pfe-rise 1s .8s ease-out both; } .pfe-welcome .pfe-btn { font-size: 17px; padding: 15px 30px; background: #ffd9a8; color: #2a1b0a !important; animation: pfe-rise 1s 1.2s ease-out both, pfe-pulse 2.4s 2.4s ease-in-out infinite; } @keyframes pfe-pulse { 50% { box-shadow: 0 0 0 12px rgba(255,217,168,.15), 0 10px 24px rgba(0,0,0,.3); } } .pfe-welcome .thanks { margin-top: 16px; font-family: var(--font-ui); font-size: 13px; opacity: .8; } /* theme picker */ .pfe-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .pfe-theme-card { appearance: none; border: 2px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--surface); padding: 0; text-align: left; transition: transform .2s; color: var(--text); } .pfe-theme-card:hover { transform: translateY(-3px); } .pfe-theme-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); } .pfe-theme-card .sw { height: 70px; background-size: cover; background-position: center; position: relative; } .pfe-theme-card .sw i { position: absolute; bottom: 6px; display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; } .pfe-theme-card .nm { padding: 8px 10px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; } .pfe-theme-card .nm small { display: block; font-weight: 400; color: var(--muted); } /* account */ .pfe-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .pfe-social-login { display: grid; gap: 10px; } .pfe-fb-btn { background: #1877f2 !important; color: #fff !important; } .pfe-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--font-ui); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin: 8px 0; } .pfe-or::before, .pfe-or::after { content: ""; flex: 1; height: 1px; background: var(--border); } .pfe-dash-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .pfe-dash-head img { width: 72px; height: 72px; border-radius: 50%; } .pfe-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0; } .pfe-rings .pfe-card { text-align: center; padding: 14px; } .pfe-rings .pfe-ring { width: 110px; height: 110px; } .pfe-rings .pfe-ring::before { width: 86px; height: 86px; font-size: 22px; } .pfe-pending { display: grid; gap: 8px; } .pfe-pending a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text) !important; background: var(--surface); font-size: 14.5px; } .pfe-pending a:hover { border-color: var(--primary); } .pfe-pending a .pfe-pill { margin-left: auto; } /* reviews */ .pfe-review { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); } .pfe-review p { font-style: italic; margin: 0 0 10px; } .pfe-review b { font-family: var(--font-ui); font-size: 13.5px; } .pfe-review small { display: block; color: var(--muted); font-family: var(--font-ui); } /* footer */ .pfe-footer { background: var(--header); color: var(--header-ink); margin-top: 18px; } .pfe-footer-in { max-width: 1680px; margin: 0 auto; padding: 34px clamp(14px, 3vw, 34px) 18px; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 26px; } .pfe-footer h5 { margin: 0 0 10px; font-family: var(--font-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; } .pfe-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pfe-footer a { color: inherit !important; text-decoration: none; opacity: .9; font-family: var(--font-ui); font-size: 14px; } .pfe-footer a:hover { opacity: 1; text-decoration: underline; } .pfe-footer p { font-size: 14px; opacity: .9; margin: 0 0 10px; } .pfe-footer-bottom { max-width: 1680px; margin: 0 auto; padding: 14px clamp(14px, 3vw, 34px) 22px; border-top: 1px solid rgba(255,255,255,.18); font-family: var(--font-ui); font-size: 12.5px; opacity: .85; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; } .pfe-totop { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,.25); display: none; place-items: center; } .pfe-totop.show { display: grid; } .pfe-mobile-bar { display: none; } /* ---------- responsive ---------- */ @media (max-width: 1320px) { .pfe-shell { grid-template-columns: 240px minmax(0, 1fr) 240px; gap: 16px; } .pfe-menu > li > a, .pfe-menu > li > button { padding: 0 9px; font-size: 13.4px; } } @media (max-width: 1100px) { .pfe-shell { grid-template-columns: minmax(0, 1fr) 260px; } .pfe-nav { position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); max-height: none; z-index: 70; border-radius: 0 18px 18px 0; transform: translateX(-105%); transition: transform .25s; } .pfe-nav.open { transform: none; box-shadow: 20px 0 60px rgba(0,0,0,.3); } .pfe-nav .pfe-nav-close { display: flex; margin-left: auto; } .pfe-mobile-bar { display: flex; gap: 8px; margin-bottom: 12px; } .pfe-footer-in { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 880px) { .pfe-shell { grid-template-columns: minmax(0, 1fr); } .pfe-aside { position: static; max-height: none; overflow: visible; } .pfe-burger { display: inline-grid; } .pfe-menubar { position: sticky; } .pfe-menubar-in { display: none; padding: 6px 10px 10px; } .pfe-menubar.open .pfe-menubar-in { display: block; max-height: 78vh; overflow: auto; } .pfe-menu { flex-direction: column; } .pfe-menu > li > a, .pfe-menu > li > button { height: 44px; width: 100%; } .pfe-drop, .pfe-drop.mega { position: static; box-shadow: none; border-radius: 10px; width: auto; max-height: none; } .pfe-menu > li.open > .pfe-drop.mega { grid-template-columns: 1fr; } .pfe-hero { grid-template-columns: 1fr; } .pfe-hero-cover { width: 170px; } .pfe-two, .pfe-auth { grid-template-columns: 1fr; } .pfe-brand-lines span, .pfe-brand-lines i { font-size: 10.5px; } .pfe-crumbs { display: none; } .pfe-footer-in { grid-template-columns: 1fr 1fr; } .pfe-bar { grid-template-columns: 110px 1fr 44px; } } @media (max-width: 560px) { .pfe-logo { width: 44px; height: 44px; } .pfe-brand-lines b { font-size: 16px; } .pfe-brand-lines i { display: none; } .pfe-account-btn span.lbl { display: none; } .pfe-account-btn { padding: 4px; } .pfe-myth-row, .pfe-myth-head { grid-template-columns: 1fr; } .pfe-myth-head { display: none; } .pfe-form .two { grid-template-columns: 1fr; } .pfe-pager { grid-template-columns: 1fr; } .pfe-pager .next { grid-column: 1; } .pfe-footer-in { grid-template-columns: 1fr; } .pfe-chips { grid-template-columns: repeat(2, 1fr); } } @media print { .pfe-header, .pfe-menubar, .pfe-socialbar, .pfe-nav, .pfe-aside, .pfe-footer, .pfe-reader-tools, .pfe-totop, .pfe-progress-top { display: none !important; } .pfe-shell { display: block; } .pfe-page { box-shadow: none; border: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .pfe-footer .pfe-social a { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: inherit !important; } .pfe-footer .pfe-social a:hover { background: rgba(255,255,255,.25); } .pfe-bar a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pfe-av[data-big] { background: var(--primary) !important; color: var(--primary-ink); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-ui); flex: 0 0 auto; } .pfe-brand { flex: 1 1 auto; overflow: hidden; } @media (max-width: 560px) { .pfe-header-in { gap: 10px; padding: 8px 10px; } .pfe-header-tools { gap: 6px; flex: 0 0 auto; } .pfe-header-tools [data-go="search"] { display: none; } .pfe-iconbtn { width: 36px; height: 36px; } .pfe-brand-lines b { white-space: normal; font-size: 15px; line-height: 1.15; } .pfe-brand-lines span { white-space: normal; font-size: 9px; letter-spacing: .1em; } .pfe-tagline-chip { font-size: 12.5px; } } body.admin-bar .pfe-menubar { top: 32px; } body.admin-bar .pfe-nav, body.admin-bar .pfe-aside { top: 90px; max-height: calc(100vh - 102px); } @media (max-width: 782px) { body.admin-bar .pfe-menubar { top: 0; } } /* ---------- two-line menu ---------- */ .pfe-menubar { background: var(--nav); color: var(--nav-ink); position: sticky; top: 0; z-index: 25; box-shadow: 0 4px 14px rgba(0,0,0,.07); } .pfe-menu-in { max-width: 1680px; margin: 0 auto; padding: 0 clamp(8px, 2vw, 24px); display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .pfe-menu-in::-webkit-scrollbar { display: none; } .pfe-menu1 .pfe-menu-in { padding-top: 6px; } .pfe-m1 { flex: 0 0 auto; display: flex; align-items: center; height: 42px; padding: 0 15px; border-radius: 12px 12px 0 0; color: var(--nav-ink) !important; text-decoration: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .18s, color .18s; position: relative; } .pfe-m1:hover { background: color-mix(in srgb, var(--surface) 45%, transparent); } .pfe-m1.peek { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--primary) !important; } .pfe-m1.on { background: var(--surface); color: var(--primary) !important; box-shadow: 0 -2px 0 var(--accent) inset; } .pfe-m1.on::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); } .pfe-m1.on { box-shadow: none; } .pfe-menu2 { background: var(--surface); border-bottom: 1px solid var(--border); } .pfe-menu2 .pfe-menu-in { min-height: 46px; align-items: center; gap: 4px; padding-top: 6px; padding-bottom: 6px; } .pfe-sub-in { animation: pfe-subin .22s ease-out; } @keyframes pfe-subin { from { opacity: 0; transform: translateY(-3px); } } .pfe-m2 { flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; font-family: var(--font-ui); font-size: 13px; color: var(--text) !important; text-decoration: none; white-space: nowrap; transition: background .15s; } .pfe-m2:hover { background: var(--surface2); } .pfe-m2.on { background: var(--primary); color: var(--primary-ink) !important; font-weight: 600; } .pfe-m2.num { min-width: 30px; padding: 5px 0; text-align: center; font-weight: 600; font-size: 12.5px; } .pfe-m2tag { flex: 0 0 auto; margin: 0 2px 0 10px; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .pfe-nav, .pfe-aside { top: calc(var(--menu-h, 100px) + 12px); max-height: calc(100vh - var(--menu-h, 100px) - 24px); } body.admin-bar .pfe-nav, body.admin-bar .pfe-aside { top: calc(var(--menu-h, 100px) + 44px); max-height: calc(100vh - var(--menu-h, 100px) - 56px); } @media (max-width: 1100px) { .pfe-nav { top: 0; max-height: none; } } @media (max-width: 880px) { .pfe-m1 { padding: 0 12px; font-size: 13.5px; height: 40px; } } /* logo */ .pfe-logo { width: 62px; height: 62px; background: #fbf6ee; box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.18); } .pfe-logo img { border-radius: 50%; } @media (max-width: 560px) { .pfe-logo { width: 48px; height: 48px; } } .pfe-presented { display: flex; width: max-content; max-width: 100%; margin: 20px auto 0; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 12px; text-align: left; opacity: .92; animation: pfe-rise 1s 1.4s ease-out both; } .pfe-presented img { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .pfe-presented b { font-size: 14px; letter-spacing: .04em; } .pfe-fb-org { display: inline-flex; align-items: center; gap: 8px; } .pfe-fb-org img { width: 26px; height: 26px; border-radius: 50%; } /* second menu line: one line; chapter numbers only */ .pfe-menu2 .pfe-menu-in { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 2px; } .pfe-menu2 .pfe-m2.num { min-width: 28px; padding: 5px 0; } /* dropdown menu mode */ #pfe-app[data-menu="dropdown"] .pfe-nav, #pfe-app[data-menu="dropdown"] .pfe-aside { top: 58px; max-height: calc(100vh - 70px); } body.admin-bar #pfe-app[data-menu="dropdown"] .pfe-nav, body.admin-bar #pfe-app[data-menu="dropdown"] .pfe-aside { top: 90px; max-height: calc(100vh - 102px); } @media (max-width: 1100px) { #pfe-app[data-menu="dropdown"] .pfe-nav { top: 0; max-height: none; } } .pfe-dropmode .pfe-drop.mega > div { min-width: 0; } /* ---------- rich visuals ---------- */ #pfe-app { background-image: radial-gradient(ellipse 70% 40% at 15% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), radial-gradient(ellipse 60% 35% at 90% 10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%), var(--pattern); } .pfe-banner { --pad: clamp(18px, 3.4vw, 46px); margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 26px; border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0; position: relative; overflow: hidden; isolation: isolate; min-height: 260px; display: flex; align-items: flex-end; color: #fff; } .pfe-banner::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--b) center 35% / cover no-repeat; transform: scale(1.05); animation: pfe-kenburns 24s ease-in-out infinite alternate; } .pfe-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,14,30,.05) 0%, rgba(12,14,30,.45) 45%, rgba(12,14,30,.86) 100%); } .pfe-banner-in { padding: 70px var(--pad) 26px; width: 100%; } .pfe-banner h1 { color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,.35); margin-bottom: 4px; } .pfe-banner .pfe-kicker { color: #ffd9a8; } .pfe-banner .pfe-kicker a { color: inherit !important; } .pfe-banner .pfe-lead { color: rgba(255,255,255,.92); margin: 8px 0 0; max-width: 780px; } .pfe-orn { display: flex; align-items: center; gap: 10px; color: #ffd9a8; margin: 6px 0 2px; } .pfe-orn i { display: block; width: 70px; height: 1px; background: currentColor; opacity: .8; } .pfe-orn b { font-size: 12px; font-weight: 400; } .pfe-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .pfe-reveal.in { opacity: 1; transform: none; } .pfe-tile .pfe-tile-img { transition: transform .6s ease; } .pfe-tile:hover .pfe-tile-img { transform: scale(1.06); } .pfe-tile .pfe-tile-img.strip { aspect-ratio: 3 / 1; } .pfe-tile { position: relative; } .pfe-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--primary)); opacity: 0; transition: opacity .25s; } .pfe-tile:hover::after { opacity: 1; } .pfe-card { background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface2) 35%, transparent), transparent 60px); } .pfe-section-title h2::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 3px; background: var(--accent); margin-top: 6px; } .pfe-stat { background-image: linear-gradient(160deg, var(--surface), color-mix(in srgb, var(--surface2) 60%, var(--surface))); } .pfe-stat b { background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* shelf of volume covers */ .pfe-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 16px 26px; scroll-padding-left: 16px; scrollbar-width: thin; perspective: 1400px; } .pfe-book { scroll-snap-align: start; text-decoration: none; color: var(--text) !important; display: flex; flex-direction: column; gap: 10px; } .pfe-book-cover { display: block; aspect-ratio: 2 / 3; border-radius: 4px 10px 10px 4px; background-size: cover; background-position: center; box-shadow: -6px 10px 24px rgba(0,0,0,.22), inset 6px 0 10px rgba(0,0,0,.12); transform: rotateY(-9deg); transform-origin: center center; transition: transform .45s ease, box-shadow .45s; } .pfe-book:hover .pfe-book-cover { transform: rotateY(0) translateY(-6px); box-shadow: 0 18px 34px rgba(0,0,0,.28); } .pfe-book-meta small { display: block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .pfe-book-meta b { font-family: var(--font-head); color: var(--primary); font-size: 16px; line-height: 1.25; } .pfe-book-meta .pfe-qbar { margin: 8px 0 0; height: 5px; } .pfe-shelf-btn { appearance: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--primary); font-size: 22px; line-height: 1; cursor: pointer; margin-left: 6px; box-shadow: var(--shadow); } .pfe-shelf-btn:hover { background: var(--primary); color: var(--primary-ink); } /* explore by topic */ .pfe-topics { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 12px; } .pfe-topic { position: relative; border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; text-decoration: none; color: #fff !important; box-shadow: var(--shadow); isolation: isolate; transition: transform .3s; } .pfe-topic.big { grid-column: span 2; grid-row: span 2; } .pfe-topic::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(10,12,24,.82)); transition: opacity .3s; } .pfe-topic:hover { transform: translateY(-4px) scale(1.01); } .pfe-topic span { padding: 14px 16px; } .pfe-topic small { display: block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #ffd9a8; } .pfe-topic b { font-family: var(--font-head); font-size: 20px; line-height: 1.2; } .pfe-topic.big b { font-size: 30px; } @media (max-width: 880px) { .pfe-topics { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; } .pfe-banner { min-height: 200px; } .pfe-banner-in { padding-top: 50px; } } /* shloka cards: manuscript feel */ .pfe-sh-card { background: linear-gradient(170deg, color-mix(in srgb, var(--surface2) 55%, var(--surface)), var(--surface) 55%); border-top: 3px solid var(--accent); } .pfe-sh-card::after { content: "\0950"; position: absolute; right: 14px; bottom: -6px; font-size: 70px; opacity: .06; color: var(--accent); font-family: var(--font-sa); } @media (prefers-reduced-motion: reduce) { .pfe-reveal { opacity: 1; transform: none; } } .pfe-banner a { color: #ffd9a8 !important; } /* ===================================================================== Theme look-and-feel variants (set per theme in includes/themes.php → 's') ===================================================================== */ /* shape */ #pfe-app[data-shape="sharp"] { --radius: 3px; } #pfe-app[data-shape="round"] { --radius: 24px; } #pfe-app[data-shape="sharp"] .pfe-nav li a, #pfe-app[data-shape="sharp"] .pfe-drop a { border-radius: 2px; } /* header */ #pfe-app[data-header="image"] .pfe-header { background: linear-gradient(90deg, rgba(8,10,22,.82), rgba(8,10,22,.45) 60%, rgba(8,10,22,.25)), var(--hero-img) center 40% / cover; color: #fff; } #pfe-app[data-header="image"] .pfe-header-in { padding-top: 22px; padding-bottom: 22px; } #pfe-app[data-header="image"] .pfe-brand-lines b { font-size: clamp(20px, 2.4vw, 28px); text-shadow: 0 2px 10px rgba(0,0,0,.4); } #pfe-app[data-header="light"] .pfe-header { background: var(--surface); color: var(--primary); border-bottom: 3px solid var(--accent); } #pfe-app[data-header="light"] .pfe-iconbtn { background: var(--surface2); } #pfe-app[data-header="light"] .pfe-account-btn { border-color: var(--border); background: var(--surface2); } #pfe-app[data-header="light"] .pfe-logo { background: var(--surface2); box-shadow: inset 0 0 0 1.5px var(--border); } @media (min-width: 900px) { #pfe-app[data-header="centered"] .pfe-header-in { position: relative; justify-content: center; padding-top: 18px; padding-bottom: 16px; } #pfe-app[data-header="centered"] .pfe-brand { flex-direction: column; text-align: center; gap: 6px; } #pfe-app[data-header="centered"] .pfe-brand-lines { align-items: center; } #pfe-app[data-header="centered"] .pfe-logo { width: 64px; height: 64px; } #pfe-app[data-header="centered"] .pfe-header-tools { position: absolute; right: clamp(12px, 2.4vw, 28px); top: 50%; transform: translateY(-50%); } } /* menu bar */ #pfe-app[data-nav="pills"] .pfe-menubar-in { padding-top: 6px; padding-bottom: 6px; } #pfe-app[data-nav="pills"] .pfe-menu > li > a, #pfe-app[data-nav="pills"] .pfe-menu > li > button { height: 36px; border-radius: 999px; border-bottom: 0; padding: 0 14px; } #pfe-app[data-nav="pills"] .pfe-menu > li.active > a, #pfe-app[data-nav="pills"] .pfe-menu > li.active > button { background: var(--primary); color: var(--primary-ink) !important; } #pfe-app[data-nav="pills"] .pfe-drop { top: calc(100% + 6px); border-radius: var(--radius); } #pfe-app[data-nav="centered"] .pfe-menubar-in, #pfe-app[data-nav="centered"] .pfe-menu { justify-content: center; } #pfe-app[data-nav="centered"] .pfe-menu > li > a, #pfe-app[data-nav="centered"] .pfe-menu > li > button { text-transform: uppercase; letter-spacing: .1em; font-size: 12.3px; } #pfe-app[data-nav="centered"] .pfe-menubar { border-top: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); } #pfe-app[data-nav="dark"] .pfe-menubar { background: var(--primary); } #pfe-app[data-nav="dark"] .pfe-menu > li > a, #pfe-app[data-nav="dark"] .pfe-menu > li > button { color: var(--primary-ink) !important; } #pfe-app[data-nav="dark"] .pfe-menu > li > a:hover, #pfe-app[data-nav="dark"] .pfe-menu > li > button:hover, #pfe-app[data-nav="dark"] .pfe-menu > li.open > button { background: rgba(255,255,255,.12); } #pfe-app[data-nav="underline"] .pfe-menubar { background: var(--surface); box-shadow: none; border-bottom: 1px solid var(--border); } #pfe-app[data-nav="underline"] .pfe-menu > li > a, #pfe-app[data-nav="underline"] .pfe-menu > li > button { color: var(--text) !important; position: relative; border-bottom: 0; } #pfe-app[data-nav="underline"] .pfe-menu > li > a::after, #pfe-app[data-nav="underline"] .pfe-menu > li > button::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .25s; } #pfe-app[data-nav="underline"] .pfe-menu > li:hover > a::after, #pfe-app[data-nav="underline"] .pfe-menu > li:hover > button::after, #pfe-app[data-nav="underline"] .pfe-menu > li.active > a::after, #pfe-app[data-nav="underline"] .pfe-menu > li.active > button::after { transform: scaleX(1); } #pfe-app[data-nav="underline"] .pfe-menu > li > a:hover, #pfe-app[data-nav="underline"] .pfe-menu > li > button:hover { background: none; } /* cards, pages, tiles, side panels */ #pfe-app[data-card="outline"] :is(.pfe-card, .pfe-page, .pfe-tile, .pfe-nav, .pfe-stat) { box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--primary) 22%, var(--border)); } #pfe-app[data-card="outline"] .pfe-tile:hover { box-shadow: 0 0 0 2px var(--primary); } #pfe-app[data-card="flat"] :is(.pfe-card, .pfe-tile, .pfe-nav, .pfe-stat) { box-shadow: none; border-color: transparent; background: var(--surface2); } #pfe-app[data-card="flat"] .pfe-page { box-shadow: none; border-color: transparent; } #pfe-app[data-card="flat"] .pfe-tile:hover { box-shadow: 0 12px 26px rgba(0,0,0,.08); } #pfe-app[data-card="lift"] :is(.pfe-card, .pfe-page) { border: 0; border-top: 4px solid var(--accent); box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 20px 44px rgba(0,0,0,.10); } #pfe-app[data-card="lift"] :is(.pfe-tile, .pfe-stat, .pfe-nav) { border: 0; box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 14px 32px rgba(0,0,0,.09); } #pfe-app[data-card="lift"] .pfe-tile:hover { transform: translateY(-7px) rotate(-.4deg); } #pfe-app[data-card="glass"] :is(.pfe-card, .pfe-page, .pfe-tile, .pfe-nav, .pfe-stat) { background: color-mix(in srgb, var(--surface) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); box-shadow: 0 10px 34px rgba(0,0,0,.14); } #pfe-app[data-card="framed"] :is(.pfe-card, .pfe-page) { border: 1px solid var(--accent); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 5px color-mix(in srgb, var(--accent) 60%, transparent); } #pfe-app[data-card="framed"] :is(.pfe-tile, .pfe-stat, .pfe-nav) { border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: none; } #pfe-app[data-card="framed"] .pfe-page h1::after { content: "❖"; display: block; font-size: 14px; color: var(--accent); margin-top: 6px; letter-spacing: .4em; } /* buttons */ #pfe-app[data-btn="square"] :is(.pfe-btn, .pfe-tool, .pfe-pill) { border-radius: 4px; } #pfe-app[data-btn="square"] .pfe-btn { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; } #pfe-app[data-btn="outline"] .pfe-btn:not(.ghost):not(.accent) { background: transparent; color: var(--primary) !important; box-shadow: inset 0 0 0 2px var(--primary); } #pfe-app[data-btn="outline"] .pfe-btn:not(.ghost):not(.accent):hover { background: var(--primary); color: var(--primary-ink) !important; } /* headings */ #pfe-app[data-head="caps"] :is(.pfe-page h1, .pfe-hero h1, .pfe-section-title h2, .pfe-content h2, .pfe-card h3) { text-transform: uppercase; letter-spacing: .05em; } #pfe-app[data-head="italic"] :is(.pfe-page h1, .pfe-hero h1, .pfe-section-title h2, .pfe-content h2) { font-style: italic; font-weight: 600; } /* hero */ #pfe-app[data-hero="split"] .pfe-hero { background: var(--primary); color: var(--primary-ink); } #pfe-app[data-hero="split"] .pfe-hero::before { left: 42%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); } #pfe-app[data-hero="split"] .pfe-hero::after { background: linear-gradient(90deg, var(--primary) 38%, transparent 75%); opacity: .9; } #pfe-app[data-hero="split"] .pfe-hero h1 { color: inherit; } #pfe-app[data-hero="split"] .pfe-hero .pfe-kicker { color: inherit; opacity: .8; } #pfe-app[data-hero="split"] .pfe-hero .pfe-btn.ghost { color: inherit !important; box-shadow: inset 0 0 0 1.5px currentColor; } #pfe-app[data-hero="centered"] .pfe-hero { grid-template-columns: 1fr; text-align: center; min-height: 420px; } #pfe-app[data-hero="centered"] .pfe-hero p { margin-left: auto; margin-right: auto; } #pfe-app[data-hero="centered"] .pfe-hero .pfe-row { justify-content: center; } #pfe-app[data-hero="centered"] .pfe-hero .pfe-qbar { margin-left: auto; margin-right: auto; } #pfe-app[data-hero="centered"] .pfe-hero::after { background: radial-gradient(ellipse at center, rgba(8,10,22,.72) 0%, rgba(8,10,22,.5) 55%, rgba(8,10,22,.3) 100%); } #pfe-app[data-hero="centered"] .pfe-hero-cover { display: none; } #pfe-app[data-hero="framed"] .pfe-hero { outline: 1px solid rgba(255,255,255,.55); outline-offset: -14px; } #pfe-app[data-hero="framed"] .pfe-hero .pfe-kicker::before, #pfe-app[data-hero="framed"] .pfe-hero .pfe-kicker::after { content: " ❖ "; color: var(--accent); } #pfe-app[data-hero="minimal"] .pfe-hero { background: var(--surface2); color: var(--text); } #pfe-app[data-hero="minimal"] .pfe-hero::before { background-image: radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--accent) 55%, transparent) 0, transparent 42%), radial-gradient(circle at 5% 100%, color-mix(in srgb, var(--primary) 35%, transparent) 0, transparent 50%); animation: none; transform: none; } #pfe-app[data-hero="minimal"] .pfe-hero::after { display: none; } #pfe-app[data-hero="minimal"] .pfe-hero h1 { color: var(--primary); font-size: clamp(34px, 5vw, 62px); } #pfe-app[data-hero="minimal"] .pfe-hero .pfe-kicker { color: var(--accent); } #pfe-app[data-hero="minimal"] .pfe-hero .pfe-btn.ghost { color: var(--primary) !important; box-shadow: inset 0 0 0 1.5px var(--primary); } #pfe-app[data-hero="minimal"] .pfe-hero .pfe-qbar { background: var(--border) !important; } /* two-line menu variants */ #pfe-app[data-nav="pills"] .pfe-menu1 .pfe-menu-in { padding-bottom: 6px; } #pfe-app[data-nav="pills"] .pfe-m1 { border-radius: 999px; height: 36px; } #pfe-app[data-nav="pills"] .pfe-m1.on { background: var(--primary); color: var(--primary-ink) !important; } #pfe-app[data-nav="pills"] .pfe-m1.on::after { display: none; } #pfe-app[data-nav="centered"] .pfe-menu-in { justify-content: safe center; } #pfe-app[data-nav="centered"] .pfe-m1 { text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; } #pfe-app[data-nav="centered"] .pfe-menu1 { border-top: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); } #pfe-app[data-nav="dark"] .pfe-menubar { background: var(--primary); } #pfe-app[data-nav="dark"] .pfe-m1 { color: var(--primary-ink) !important; } #pfe-app[data-nav="dark"] .pfe-m1:hover { background: rgba(255,255,255,.12); } #pfe-app[data-nav="dark"] .pfe-m1.on { background: var(--surface); color: var(--primary) !important; } #pfe-app[data-nav="underline"] .pfe-menubar { background: var(--surface); } #pfe-app[data-nav="underline"] .pfe-menu1 { border-bottom: 1px solid var(--border); } #pfe-app[data-nav="underline"] .pfe-menu1 .pfe-menu-in { padding-top: 0; } #pfe-app[data-nav="underline"] .pfe-m1 { color: var(--text) !important; border-radius: 0; height: 48px; } #pfe-app[data-nav="underline"] .pfe-m1:hover { background: none; color: var(--primary) !important; } #pfe-app[data-nav="underline"] .pfe-m1.on { background: none; color: var(--primary) !important; } #pfe-app[data-nav="underline"] .pfe-m1.on::after { top: auto; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; } #pfe-app[data-nav="underline"] .pfe-menu2 { background: var(--surface2); } @media (max-width: 880px) { .pfe-menu2 .pfe-menu-in { flex-wrap: nowrap; overflow-x: auto; } } /* sign-in buttons */ .pfe-sbtn { appearance: none; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border-radius: 999px; border: 1.5px solid #dadce0; background: #fff; color: #1f1f1f !important; font: 600 14.5px var(--font-ui); cursor: pointer; transition: box-shadow .2s, transform .15s; } .pfe-sbtn:hover { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-1px); } .pfe-sbtn.facebook { background: #1877f2; border-color: #1877f2; color: #fff !important; } .pfe-sbtn.facebook svg { fill: #fff; } .pfe-sbtn.microsoft { background: #2f2f2f; border-color: #2f2f2f; color: #fff !important; } .pfe-g-real { display: flex; justify-content: center; min-height: 44px; } #pfe-app[data-btn="square"] .pfe-sbtn { border-radius: 4px; } /* header: big search box and labelled theme button */ .pfe-header-tools { flex: 1 1 auto; justify-content: flex-end; min-width: 0; } .pfe-hsearch { flex: 0 1 460px; min-width: 200px; margin-right: 6px; } .pfe-hsearch input { padding-top: 12px; padding-bottom: 12px; font-size: 15px; background: rgba(255,255,255,.96); color: #222; border-color: transparent; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .pfe-hsearch svg.ic { color: #666; } #pfe-app[data-header="light"] .pfe-hsearch input { background: var(--surface2); border-color: var(--border); box-shadow: none; color: var(--text); } .pfe-hsearch .pfe-search-results { z-index: 60; } .pfe-labelbtn { appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px 0 11px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.1); color: inherit; font: 600 13.5px var(--font-ui); cursor: pointer; } .pfe-labelbtn:hover { background: rgba(255,255,255,.2); } .pfe-labelbtn svg { width: 19px; height: 19px; } #pfe-app[data-header="light"] .pfe-labelbtn { border-color: var(--border); background: var(--surface2); } #pfe-app[data-shape="sharp"] :is(.pfe-labelbtn, .pfe-hsearch input) { border-radius: 4px; } @media (max-width: 1100px) { .pfe-brand-lines span, .pfe-brand-lines i { display: none; } } @media (max-width: 880px) { .pfe-header-in { flex-wrap: wrap; } .pfe-hsearch { order: 5; flex: 1 1 100%; margin: 4px 0 0; } .pfe-labelbtn span { display: none; } } /* slim footer */ .pfe-footer { margin-top: 18px; } .pfe-footer .pfe-footer-bottom { border-top: 0; padding-top: 10px; padding-bottom: 10px; font-size: 12px; align-items: center; } .pfe-foot-links { display: inline-flex; gap: 16px; flex-wrap: wrap; } .pfe-foot-links a { font-size: 12px !important; } .pfe-fb-org img { width: 22px; height: 22px; } /* welcome page: plain colour, fits the window, theme chooser */ .pfe-welcome { background: #1f2a48; } .pfe-welcome::before { background-image: none !important; background: radial-gradient(ellipse at 50% 30%, #2c3a63 0%, #1f2a48 55%, #19223b 100%); animation: none; } .pfe-welcome::after { display: none; } html.pfe-noscroll, html.pfe-noscroll body { overflow: hidden !important; height: 100%; } .pfe-welcome-box.with-themes { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; text-align: center; } .pfe-wtheme { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 18px 18px 14px; text-align: left; animation: pfe-rise 1s .5s ease-out both; } .pfe-wtheme-h { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #ffd9a8; margin-bottom: 12px; text-align: center; } .pfe-wtheme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .pfe-wchip { appearance: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 10px; border: 1.5px solid transparent; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; text-align: left; font: 500 12.5px var(--font-ui); transition: background .15s, border-color .15s, transform .15s; } .pfe-wchip:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); } .pfe-wchip.on { border-color: #ffd9a8; background: rgba(255,217,168,.16); } .pfe-wchip .sw { position: relative; flex: 0 0 auto; width: 34px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .pfe-wchip .sw i { position: absolute; bottom: 3px; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.2); } .pfe-wchip .sw i:first-child { right: 13px; } .pfe-wchip .sw i:last-child { right: 3px; } .pfe-wchip .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pfe-wtheme-acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; font: 13px var(--font-ui); color: rgba(255,255,255,.85); } .pfe-wlink { appearance: none; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--font-ui); cursor: pointer; } .pfe-wlink:hover { background: rgba(255,255,255,.12); } #pfe-wtheme-now { margin-left: auto; } @media (max-width: 900px) { .pfe-welcome-box.with-themes { grid-template-columns: 1fr; gap: 18px; max-width: 640px; } .pfe-wtheme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pfe-welcome { display: block; } .pfe-welcome-fit { position: absolute; left: 50%; top: 50%; width: min(1240px, calc(100vw - 24px)); transform: translate(-50%, -50%); transform-origin: center center; } .pfe-welcome-box, .pfe-welcome-box.with-themes { margin: 0 auto; } @media (max-width: 700px) { .pfe-wtheme { padding: 12px; } .pfe-wtheme-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .pfe-wchip { justify-content: center; padding: 4px; } .pfe-wchip .nm { display: none; } .pfe-wchip .sw { width: 100%; height: 30px; } .pfe-wtheme-acts { justify-content: center; } #pfe-wtheme-now { margin: 0; width: 100%; text-align: center; } .pfe-welcome .msg p { font-size: 14.5px; } } #pfe-app .pfe-welcome #pfe-enter { background: #ffd9a8 !important; color: #2a1b0a !important; box-shadow: 0 10px 26px rgba(0,0,0,.25) !important; border-radius: 999px; text-transform: none; letter-spacing: .01em; font-size: 17px; } .pfe-account-btn { white-space: nowrap; } @media (min-width: 900px) { #pfe-app[data-header="centered"] .pfe-header-in { flex-direction: column; gap: 12px; } #pfe-app[data-header="centered"] .pfe-header-tools { position: static; transform: none; width: 100%; justify-content: center; } } /* social icons at the right end of the main menu, each in its own colour */ .pfe-menu1 .pfe-menu-in, .pfe-menubar-in { align-items: center; } .pfe-msocial { margin-left: auto; display: inline-flex; gap: 6px; padding: 0 4px 0 12px; flex: 0 0 auto; align-items: center; } .pfe-msocial:empty { display: none; } .pfe-msocial a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; background: #555; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .2s, box-shadow .2s; } .pfe-msocial a:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 6px 14px rgba(0,0,0,.25); } .pfe-msocial svg { width: 15px; height: 15px; fill: currentColor; } .pfe-msocial .pfe-s-youtube { background: #ff0000; } .pfe-msocial .pfe-s-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .pfe-msocial .pfe-s-facebook { background: #1877f2; } .pfe-msocial .pfe-s-linkedin { background: #0a66c2; } .pfe-msocial .pfe-s-x { background: #000; } .pfe-msocial .pfe-s-whatsapp { background: #25d366; } .pfe-msocial .pfe-s-telegram { background: #229ed9; } .pfe-msocial .pfe-s-pinterest { background: #e60023; } .pfe-msocial .pfe-s-threads { background: #101010; } .pfe-socialbar .pfe-social { display: none; } /* desktop: the browser's scroll bar drives the page. The reading pane flows with it; the navigation pane and the right column stay in view and follow along (see syncPanes in app.js). When a side pane reaches its end the page keeps scrolling. */ @media (min-width: 1101px) { .pfe-main { position: static; height: auto; overflow: visible; } .pfe-nav, .pfe-aside { overscroll-behavior: auto; } } .pfe-main::-webkit-scrollbar, .pfe-nav::-webkit-scrollbar, .pfe-aside::-webkit-scrollbar { width: 8px; } .pfe-main::-webkit-scrollbar-thumb, .pfe-nav::-webkit-scrollbar-thumb, .pfe-aside::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 8px; } /* welcome page layout: brand on top, two equal panels, entry at the bottom */ .pfe-welcome-box.wl { max-width: 1180px; display: flex; flex-direction: column; align-items: center; gap: 2.2vh; text-align: center; } .pfe-wtop { display: flex; flex-direction: column; align-items: center; gap: 8px; } .pfe-wtop .lotus { margin: 0 !important; } .pfe-wtop img.pfe-wlogo { width: clamp(56px, 9vh, 84px); height: clamp(56px, 9vh, 84px); border-radius: 50%; background: #fbf6ee; box-shadow: 0 6px 18px rgba(0,0,0,.35); } .pfe-wtop .series { margin: 0 !important; } .pfe-wpanels { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; width: 100%; align-items: stretch; } .pfe-wpanel { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; } .pfe-wpanel h1 { margin-bottom: 12px !important; } .pfe-wpanel .tag { margin: 1.4vh 0 0 !important; } .pfe-wpanel.pfe-wtheme { padding: 18px; animation: none; } .pfe-wbottom { display: flex; flex-direction: column; align-items: center; gap: 12px; } .pfe-wbottom .pfe-presented { margin: 0; } .pfe-wbottom .thanks { margin: 0; } @media (max-width: 900px) { .pfe-wpanels { grid-template-columns: 1fr; gap: 14px; } .pfe-wpanel { padding: 16px; } } /* brand lines: clear space between the three lines */ .pfe-brand-lines { line-height: 1.3; gap: 3px; } .pfe-brand-lines b { line-height: 1.15; } .pfe-brand-lines span { line-height: 1.2; } .pfe-brand-lines i { line-height: 1.25; } @media (max-width: 1440px) { .pfe-m1 { padding: 0 10px; } .pfe-msocial { gap: 5px; padding-left: 8px; } .pfe-msocial a { width: 28px; height: 28px; } } @media (max-width: 1300px) { .pfe-m1 { padding: 0 8px; font-size: 13.5px; } .pfe-msocial a { width: 25px; height: 25px; } .pfe-msocial svg { width: 13px; height: 13px; } } .pfe-nav .pfe-more { color: var(--muted); font-size: 12.5px; } .pfe-m2part { flex: 0 0 auto; margin: 0 4px 0 14px; padding: 3px 9px; border-radius: 6px; background: var(--surface2); font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .pfe-m2part:first-child { margin-left: 0; } /* colour and contrast options */ .pfe-tweaks { display: grid; gap: 8px; margin-top: 12px; } .pfe-tweak-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pfe-tweak-row .lbl { flex: 0 0 74px; font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .pfe-colour, .pfe-contrast { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: 600 12px var(--font-ui); cursor: pointer; } .pfe-colour i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } .pfe-contrast i { width: 26px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 700 12px Georgia, serif; font-style: normal; } .pfe-contrast.c-standard i { background: #f3e6d4; color: #2b2523; } .pfe-contrast.c-high i { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000; } .pfe-contrast.c-dark i { background: #121417; color: #eceff3; } .pfe-colour.on, .pfe-contrast.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); } .pfe-welcome .pfe-tweak-row .lbl { color: #ffd9a8; } .pfe-welcome .pfe-colour, .pfe-welcome .pfe-contrast { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; } .pfe-welcome .pfe-colour.on, .pfe-welcome .pfe-contrast.on { border-color: #ffd9a8; box-shadow: none; background: rgba(255,217,168,.16); } @media (max-width: 700px) { .pfe-colour span, .pfe-contrast span { display: none; } .pfe-colour, .pfe-contrast { padding: 4px; } .pfe-tweak-row .lbl { flex-basis: 100%; text-align: center; } .pfe-tweak-row { justify-content: center; } } /* high contrast: stronger text and lines everywhere */ #pfe-app[data-contrast="high"] { font-weight: 450; } #pfe-app[data-contrast="high"] :is(.pfe-card, .pfe-page, .pfe-tile, .pfe-nav, .pfe-stat) { border: 2px solid #000 !important; box-shadow: none !important; background: #fff; } #pfe-app[data-contrast="high"] a { text-decoration-thickness: 2px; } /* full stories and shlokas in the reading pane */ .pfe-sgroup-h { font-family: var(--font-head); color: var(--primary); margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--accent); scroll-margin-top: 20px; } .pfe-fullstory { margin: 18px 0 34px; scroll-margin-top: 16px; } .pfe-fullstory > h2 { font-family: var(--font-head); color: var(--primary); font-size: 1.35em; margin: 0 0 8px; } .pfe-fullshloka { scroll-margin-top: 16px; } .pfe-fullshloka h2 { font-family: var(--font-head); color: var(--primary); font-size: 1.2em; margin: 4px 0 6px; } .pfe-fullshloka .pfe-sa { font-size: 23px; line-height: 1.6; color: var(--primary); margin: 6px 0; } .pfe-fullshloka .pron { color: var(--muted); } .pfe-fullshloka .pfe-content { font-size: 16px; } .pfe-fullshloka .pfe-content h3 { margin-top: 10px; } /* welcome page: use the whole screen with even breathing space */ .pfe-welcome-fit { width: min(1640px, calc(100vw - 6vw)); } .pfe-welcome-box.wl { max-width: none; width: 100%; min-height: calc(100vh - 5vh); justify-content: space-evenly; gap: 3vh; } .pfe-wtop { gap: 1.4vh; } .pfe-welcome .lotus { width: clamp(60px, 9vh, 96px); height: clamp(60px, 9vh, 96px); } .pfe-wtop .series { font-size: clamp(12px, 1.6vh, 15px); letter-spacing: .3em; } .pfe-wpanels { gap: clamp(24px, 3vw, 56px); } .pfe-wpanel { padding: clamp(24px, 4vh, 48px) clamp(26px, 3vw, 56px); border-radius: 26px; } .pfe-wpanel h1 { font-size: clamp(30px, min(3.4vw, 5.6vh), 58px) !important; margin-bottom: 2.2vh !important; } .pfe-wpanel .msg { max-width: 640px; margin: 0 auto; } .pfe-wpanel .msg p { font-size: clamp(15px, min(1.25vw, 2.2vh), 20px); line-height: 1.75; margin-bottom: 1.6vh; } .pfe-wpanel .tag { font-size: clamp(20px, min(1.8vw, 3vh), 30px); margin-top: 2.6vh !important; } .pfe-wtheme-h { font-size: clamp(12px, 1.5vh, 14px); margin-bottom: 2vh; } .pfe-wtheme-grid { gap: clamp(8px, 1.1vh, 14px) clamp(8px, .9vw, 14px); } .pfe-wchip { padding: clamp(6px, .9vh, 10px) 10px clamp(6px, .9vh, 10px) 7px; font-size: clamp(12.5px, 1.6vh, 14.5px); border-radius: 12px; } .pfe-wchip .sw { width: 38px; height: 26px; } .pfe-tweaks { margin-top: 2.4vh; gap: 1.4vh; } .pfe-wtheme-acts { margin-top: 2.2vh; } .pfe-wbottom { gap: 1.6vh; } .pfe-welcome .thanks { font-size: clamp(12.5px, 1.6vh, 14px); } @media (max-width: 900px) { .pfe-welcome-box.wl { min-height: 0; } } @media (min-width: 1200px) { .pfe-wpanels { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } .pfe-wtheme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-height: 820px) and (min-width: 901px) { .pfe-wchip { padding-top: 5px; padding-bottom: 5px; } .pfe-wchip .sw { height: 22px; width: 32px; } .pfe-welcome .lotus { width: 56px; height: 56px; } } @media (min-width: 1200px) { .pfe-wpanels { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } @media (max-height: 820px) and (min-width: 901px) { .pfe-wpanel { padding: 22px 30px; } .pfe-wpanel h1 { font-size: 34px !important; margin-bottom: 12px !important; } .pfe-wpanel .msg p { font-size: 15px; line-height: 1.6; margin-bottom: 8px; } .pfe-wpanel .tag { font-size: 20px; margin-top: 12px !important; } .pfe-wtheme-h { margin-bottom: 12px; } .pfe-wtheme-grid { gap: 7px 8px; } .pfe-tweaks { margin-top: 12px; gap: 6px; } .pfe-wtheme-acts { margin-top: 10px; } .pfe-welcome-box.wl { gap: 16px; } .pfe-wbottom { gap: 8px; } .pfe-welcome #pfe-enter { padding: 12px 28px; } } /* progress report */ .pfe-report .pfe-table td, .pfe-report .pfe-table th { text-align: center; vertical-align: middle; } .pfe-report .pfe-table td:first-child, .pfe-report .pfe-table th:first-child { text-align: left; } .pfe-report .c-done { color: #1d7a43; font-weight: 700; } .pfe-report .c-prog { color: #b26a00; font-weight: 700; } .pfe-report .c-todo { color: var(--muted); font-weight: 700; } .pfe-report thead .c-done, .pfe-report thead .c-prog, .pfe-report thead .c-todo { color: var(--primary-ink); } .pfe-stack { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--surface2); margin-bottom: 3px; } .pfe-stack i { display: block; height: 100%; } .pfe-stack i.d { background: #2f9e57; } .pfe-stack i.p { background: #f0a020; } .pfe-rep-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 8px; } .pfe-rep-col { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); } .pfe-rep-col.prog { border-top: 4px solid #f0a020; } .pfe-rep-col.todo { border-top: 4px solid var(--muted); } .pfe-rep-col.done { border-top: 4px solid #2f9e57; } .pfe-rep-col h4 { margin: 0 0 10px; font-family: var(--font-ui); font-size: 14px; color: var(--primary); } .pfe-rep-g { margin-bottom: 10px; font-size: 14px; } .pfe-rep-g ul { margin: 4px 0 0; padding-left: 18px; } .pfe-rep-g li { margin: 2px 0; } @media (max-width: 1000px) { .pfe-rep-cols { grid-template-columns: 1fr; } } /* lists (Full Book contents, account): number and title on the left, status on the right */ .pfe-pending a { justify-content: flex-start; text-align: left; } .pfe-pending a .pfe-pill { margin-left: 0; flex: 0 0 auto; } .pfe-pending a .pfe-pill:last-child:not(:first-child) { margin-left: auto; } .pfe-pending a > span:not(.pfe-pill) { text-align: left; } .pfe-inline-media { margin: 0 0 22px; } .pfe-inline-media > b { display: block; margin-bottom: 6px; font-family: var(--font-ui); font-size: 14.5px; color: var(--primary); } /* breadcrumbs removed (the menu and navigation pane show where you are) */ .pfe-crumbs { display: none !important; } /* reading voice picker */ .pfe-modal { z-index: 98; } .pfe-vh { font-family: var(--font-ui); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 16px 0 8px; } .pfe-voice { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 6px; background: var(--surface); } .pfe-voice.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); } .pfe-voice .nm { flex: 1; min-width: 0; } .pfe-voice .nm b { display: block; font-family: var(--font-ui); font-size: 14px; } .pfe-voice .nm small { color: var(--muted); font-family: var(--font-ui); font-size: 12px; } .pfe-voice .nat { color: #1d7a43; font-weight: 700; } /* welcome page: calm "wow" – soft glowing lights, faint stars, golden-edged glass panels */ .pfe-welcome::before { background: radial-gradient(42vw 42vw at 12% 8%, rgba(255,196,120,.16), transparent 60%), radial-gradient(46vw 46vw at 92% 96%, rgba(80,190,200,.14), transparent 62%), radial-gradient(30vw 30vw at 50% 40%, rgba(150,120,255,.08), transparent 70%), linear-gradient(160deg, #1b2443 0%, #212c50 45%, #18203a 100%) !important; animation: pfe-glow 18s ease-in-out infinite alternate !important; } .pfe-welcome::after { display: block !important; content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: radial-gradient(1.2px 1.2px at 10% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 70%, #ffe7c2 50%, transparent 51%), radial-gradient(1.4px 1.4px at 70% 15%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 55%, #cfe9ff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 55% 85%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 20% 90%, #ffe7c2 50%, transparent 51%), radial-gradient(1px 1px at 45% 35%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 92% 30%, #fff 50%, transparent 51%); background-size: 520px 520px; animation: pfe-twinkle 6s ease-in-out infinite alternate; } @keyframes pfe-glow { from { filter: hue-rotate(0deg) brightness(1); } to { filter: hue-rotate(-12deg) brightness(1.08); } } @keyframes pfe-twinkle { from { opacity: .35; } to { opacity: .7; } } .pfe-wtop .lotus { filter: drop-shadow(0 0 18px rgba(255,210,150,.55)); } .pfe-wpanel { position: relative; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); border: 1px solid transparent; background-clip: padding-box; box-shadow: 0 24px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pfe-wpanel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255,214,160,.7), rgba(255,255,255,.08) 40%, rgba(120,210,220,.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .pfe-wpanel h1 { background: linear-gradient(180deg, #ffffff, #ffe4bf); -webkit-background-clip: text; background-clip: text; color: transparent !important; } .pfe-welcome #pfe-enter { box-shadow: 0 0 0 6px rgba(255,217,168,.12), 0 14px 34px rgba(0,0,0,.35) !important; } @media (min-width: 1200px) and (max-width: 1599px) { .pfe-wtheme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 1600px) { .pfe-wtheme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (prefers-reduced-motion: reduce) { .pfe-welcome::before, .pfe-welcome::after { animation: none !important; } } @media (max-height: 820px) and (min-width: 901px) { .pfe-wpanel h1 { font-size: 40px !important; } .pfe-wpanel .msg p { font-size: 16.5px; line-height: 1.65; margin-bottom: 10px; } .pfe-wpanel .tag { font-size: 23px; } } /* second menu line: no scroll bar – it tightens, then wraps if ever needed */ .pfe-menu2 .pfe-menu-in { overflow: hidden !important; -webkit-mask-image: none !important; mask-image: none !important; padding-right: clamp(8px, 2vw, 24px) !important; } .pfe-menu2 .pfe-menu-in.tight .pfe-m2:not(.num) { padding-left: 9px; padding-right: 9px; } .pfe-menu2 .pfe-menu-in.tighter .pfe-m2 { font-size: 12.3px; } .pfe-menu2 .pfe-menu-in.tighter .pfe-m2:not(.num) { padding-left: 7px; padding-right: 7px; } .pfe-menu2 .pfe-menu-in.tighter .pfe-m2.num { min-width: 24px; } .pfe-menu2 .pfe-menu-in.wrap { flex-wrap: wrap; row-gap: 2px; } @media (max-width: 880px) { .pfe-menu2 .pfe-menu-in { flex-wrap: wrap; } } /* navigation pane and right column: their own slim vertical scroll bars, like the reading pane */ .pfe-nav, .pfe-aside { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 35%, transparent) transparent; } /* brand: logo opens the welcome page, the three title lines go Home */ .pfe-brand a { color: inherit !important; text-decoration: none; } .pfe-brand a.pfe-logo { cursor: pointer; transition: transform .25s, box-shadow .25s; } .pfe-brand a.pfe-logo:hover { transform: scale(1.06) rotate(-3deg); box-shadow: 0 0 0 3px rgba(255,217,168,.55), 0 6px 16px rgba(0,0,0,.25); } .pfe-brand a.pfe-brand-lines { display: flex; flex-direction: column; } .pfe-brand a.pfe-brand-lines:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .pfe-voice .rec { color: var(--accent); font-weight: 700; } .pfe-rep-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 26px 0 10px; } /* second menu line: one line with a slim horizontal scroll bar when needed (as before) */ .pfe-menu2 .pfe-menu-in { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 35%, transparent) transparent; padding-bottom: 4px !important; } .pfe-menu2 .pfe-menu-in::-webkit-scrollbar { display: block; height: 6px; } .pfe-menu2 .pfe-menu-in::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 6px; } @media (max-width: 880px) { .pfe-menu2 .pfe-menu-in { flex-wrap: nowrap !important; } } /* navigation pane and right column: visible slim vertical scroll bars */ .pfe-nav::-webkit-scrollbar, .pfe-aside::-webkit-scrollbar { display: block !important; width: 8px !important; } /* dedication and author */ .pfe-dedication { text-align: center; padding: 18px 0 8px; font-family: var(--font-head); } .pfe-dedication p { font-size: 1.15em; line-height: 1.8; margin: 0; color: var(--text); } .pfe-dedication .ded span { display: block; font-family: var(--font-ui); font-size: .62em; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .pfe-dedication .epi { font-style: italic; color: var(--primary); } .pfe-dedication .orn { color: var(--accent); margin: 26px 0; letter-spacing: .6em; } .pfe-author { display: flex; align-items: center; gap: 18px; margin: 4px 0 20px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2); } .pfe-author img { width: 110px; height: 115px; object-fit: cover; border-radius: 12px; border: 3px solid var(--accent); } .pfe-author b { display: block; font-family: var(--font-head); font-size: 22px; color: var(--primary); } .pfe-author span { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--muted); } /* feedback & review comments */ .pfe-kind { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 6px; font-family: var(--font-ui); font-size: 14px; } .pfe-kind label { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 600; } .pfe-kind input { width: auto !important; } .pfe-rating { display: inline-flex; gap: 4px; margin-left: 8px; } .pfe-rating button { appearance: none; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: #d99a1c; padding: 0 2px; } .pfe-thanks { text-align: center; padding: 30px 10px; max-width: 620px; margin: 0 auto; } .pfe-thanks .big { font-size: 54px; } .pfe-thanks h2 { font-family: var(--font-head); color: var(--primary); margin: 6px 0; } .pfe-comments { display: grid; gap: 14px; } .pfe-comment { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px 18px; transition: opacity .3s; } .pfe-comment .hd { display: flex; align-items: center; gap: 12px; } .pfe-comment .hd b { display: block; font-family: var(--font-ui); } .pfe-comment .hd small { color: var(--muted); font-family: var(--font-ui); font-size: 12px; } .pfe-comment .hd .pfe-av { background: var(--primary); color: var(--primary-ink); border-radius: 50%; display: grid; place-items: center; font-weight: 700; } .pfe-comment .st { color: #d99a1c; letter-spacing: 2px; margin-top: 8px; } .pfe-comment p { margin: 8px 0 4px; } .pfe-del { color: #b3261e; border-color: #e7b4b0; } /* text size buttons work on every reading page */ #pfe-main .pfe-page > p, #pfe-main .pfe-page .pfe-sh-card, #pfe-main .pfe-myth-row, #pfe-main .pfe-day, #pfe-main .pfe-table td { font-size: calc(var(--reader-size) * .92); } /* topics */ .pfe-topicgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 10px; } .pfe-topiccard { position: relative; min-height: 210px; border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center; display: flex; align-items: flex-end; text-decoration: none; color: #fff !important; box-shadow: var(--shadow); isolation: isolate; transition: transform .3s, box-shadow .3s; } .pfe-topiccard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,12,28,.05) 25%, rgba(10,12,28,.88) 100%); } .pfe-topiccard:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0,0,0,.2); } .pfe-topiccard span { padding: 16px; display: flex; flex-direction: column; gap: 4px; } .pfe-topiccard b { font-family: var(--font-head); font-size: 21px; line-height: 1.2; } .pfe-topiccard small { font-size: 13.5px; opacity: .92; line-height: 1.4; } .pfe-topiccard i { font-style: normal; font: 600 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #ffd9a8; } .pfe-topic-ch { display: grid; gap: 12px; } .pfe-tch { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text) !important; transition: box-shadow .2s, transform .2s; } .pfe-tch:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .pfe-tch .im { flex: 0 0 120px; height: 80px; border-radius: 10px; background-size: cover; background-position: center; } .pfe-tch .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pfe-tch .tx small { font: 600 11.5px var(--font-ui); color: var(--accent); letter-spacing: .04em; } .pfe-tch .tx b { font-family: var(--font-head); color: var(--primary); font-size: 18px; } .pfe-tch .tx span { font-size: 14px; color: var(--muted); } @media (max-width: 560px) { .pfe-tch .im { flex-basis: 84px; height: 64px; } } /* thin divider between the menu and the social icons */ .pfe-msocial { position: relative; padding-left: 16px !important; margin-left: auto; } .pfe-msocial::before { content: ""; position: absolute; left: 4px; top: 50%; height: 26px; transform: translateY(-50%); width: 1.5px; background: currentColor; opacity: .3; border-radius: 2px; } #pfe-app[data-nav="dark"] .pfe-msocial::before { background: var(--primary-ink); } .pfe-novideo { display: flex; gap: 14px; align-items: center; padding: 18px; border: 2px dashed var(--border); border-radius: 14px; background: var(--surface2); color: var(--text); } .pfe-novideo > span { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); } .pfe-novideo > span svg { width: 22px; height: 22px; } .pfe-novideo b { display: block; font-family: var(--font-ui); } /* social icons: in the menu line on wide screens, in the header on laptops / tablets */ .pfe-hsocial { display: none !important; } @media (max-width: 1360px) { .pfe-menubar .pfe-msocial { display: none !important; } .pfe-hsocial { display: inline-flex !important; margin-left: 0; padding-left: 10px !important; } .pfe-hsocial::before { background: currentColor; } } @media (max-width: 1100px) { .pfe-hsocial a { width: 26px !important; height: 26px !important; } .pfe-hsocial { gap: 4px !important; } } @media (max-width: 880px) { .pfe-hsocial { order: 6; flex: 1 1 100%; justify-content: center; padding: 6px 0 0 !important; } .pfe-hsocial::before { display: none; } } /* phones: welcome page at full size, scrolling */ .pfe-welcome.pfe-wscroll { overflow-y: auto; -webkit-overflow-scrolling: touch; } .pfe-welcome.pfe-wscroll .pfe-welcome-fit { position: static; transform: none !important; width: auto; padding: 18px 4px 30px; } .pfe-welcome.pfe-wscroll .pfe-welcome-box.wl { min-height: 0; } @media (max-width: 1360px) and (min-width: 881px) { .pfe-hsearch { flex: 0 1 300px; min-width: 160px; } .pfe-labelbtn span { display: none; } .pfe-labelbtn { padding: 0 10px; } .pfe-brand { flex: 0 1 auto; min-width: 230px; } } /* phones: brand on top; then Theme · Voice · Account; then a full-width search; then the social icons */ @media (max-width: 880px) { .pfe-header-in { flex-wrap: wrap; row-gap: 8px; } .pfe-header-tools { flex: 1 1 100% !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; margin-left: 0; min-width: 0; } .pfe-header-tools > .pfe-labelbtn, .pfe-header-tools > #pfe-acc { order: 1; } .pfe-hsearch { order: 5 !important; flex: 1 1 100% !important; margin: 0 !important; min-width: 0 !important; } .pfe-hsocial { order: 6 !important; } .pfe-brand { min-width: 0; } } /* Maths captcha */ .pfe-captcha { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); } .pfe-captcha[hidden] { display: none; } .pfe-cap-note { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text); } .pfe-cap-note em { font-weight: 400; color: var(--muted); font-style: normal; } .pfe-cap-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pfe-cap-q { min-width: 150px; min-height: 46px; display: inline-flex; align-items: center; color: var(--primary); background: var(--surface, rgba(255,255,255,.6)); border-radius: 8px; user-select: none; -webkit-user-select: none; } .pfe-cap-eq { font-size: 22px; font-weight: 700; color: var(--primary); } .pfe-used a { font-weight: 600; } /* Quick sign-in: Google only */ .pfe-social-login .pfe-sbtn.facebook, .pfe-social-login .pfe-sbtn.microsoft, #pfe-fb, #pfe-ms { display: none !important; } /* ---------------------------------------------------------------- v1.10: anchors, stories, status, media, voices */ #pfe-app [id] { scroll-margin-top: calc(var(--menu-h, 100px) + 18px); } /* every story in its own numbered frame */ .pfe-fullstory { margin: 26px 0 40px; padding: 0 0 6px; border: 1.5px solid var(--border); border-top: 5px solid var(--accent); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .pfe-story-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 22px; background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); border-bottom: 1px solid var(--border); font-family: var(--font-ui); } .pfe-story-no { background: var(--primary); color: var(--primary-ink); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } .pfe-story-ch { color: var(--muted); font-size: 13px; flex: 1 1 auto; } .pfe-fullstory > h2 { margin: 18px 22px 8px; } .pfe-fullstory > .pfe-content, .pfe-fullstory > .pfe-mbar { margin-left: 22px; margin-right: 22px; } .pfe-story-end { margin: 18px 22px 12px; text-align: center; border-top: 1px dashed var(--border); padding-top: 12px; } .pfe-story-end span { display: inline-block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .pfe-story-end span::before, .pfe-story-end span::after { content: '❖'; margin: 0 10px; opacity: .7; } @media (max-width: 640px) { .pfe-story-head { padding: 10px 14px; } .pfe-fullstory > h2 { margin: 14px 14px 6px; } .pfe-fullstory > .pfe-content, .pfe-fullstory > .pfe-mbar, .pfe-story-end { margin-left: 14px; margin-right: 14px; } } /* reading status: Completed / In progress / Not started */ .pfe-st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4; } .pfe-st.done { background: #e3f5e9; color: #1d7a43; } .pfe-st.prog { background: #fff1d6; color: #9a5b00; } .pfe-st.todo { background: var(--surface2); color: var(--muted); } .pfe-stline { margin: -2px 0 12px; display: flex; gap: 8px; flex-wrap: wrap; } .pfe-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: auto; flex: 0 0 auto; border: 2px solid var(--muted); background: transparent; } .pfe-dot.done { background: #2a9d5c; border-color: #2a9d5c; } .pfe-dot.prog { border-color: #e0911a; background: linear-gradient(90deg, #e0911a 50%, transparent 50%); } .pfe-nav li a:has(.pfe-dot) { display: flex; align-items: center; gap: 8px; } .pfe-shloka > .pfe-st { margin: 0 0 8px; } .pfe-topiccard .pfe-st { margin-top: 6px; align-self: flex-start; } /* watch / listen buttons inside a story or shlok */ .pfe-mbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 12px; } .pfe-mbar .pfe-tool svg { vertical-align: -2px; } .pfe-mbar .pfe-tool.on { background: var(--primary); color: var(--primary-ink); } .pfe-mslot { flex: 1 1 100%; } .pfe-mslot:empty { display: none; } .pfe-mslot .pfe-inline-media { margin: 8px 0 4px; } /* the default list on the Media pages */ .pfe-mgroup { font-family: var(--font-head); color: var(--primary); margin: 22px 0 8px; font-size: 1.05em; } .pfe-mfilter { display: inline-flex; gap: 8px; align-items: center; margin: 4px 0 6px; cursor: pointer; } .pfe-mrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 8px; } .pfe-mrow .no { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--primary); font-family: var(--font-ui); font-weight: 700; font-size: 13px; } .pfe-mrow.has .no { background: var(--primary); color: var(--primary-ink); } .pfe-mrow .tt b { display: block; font-family: var(--font-ui); font-size: 15px; line-height: 1.35; } .pfe-mrow .tt small { color: var(--muted); font-family: var(--font-ui); } .pfe-mrow .act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .pfe-mrow .pfe-mslot { grid-column: 1 / -1; } .pfe-soon { color: var(--muted); font-style: italic; font-size: 13px; font-family: var(--font-ui); } .pfe-mlist.only .pfe-mrow[data-have="0"] { display: none; } @media (max-width: 560px) { .pfe-mrow { grid-template-columns: 36px minmax(0, 1fr); } .pfe-mrow .act { grid-column: 2; justify-content: flex-start; } } /* voice chooser */ .pfe-vspeed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; font-family: var(--font-ui); font-size: 14px; } .pfe-vspeed label { display: inline-flex; align-items: center; gap: 10px; } .pfe-vspeed input[type=range] { width: 200px; } .pfe-vset { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 12px; padding: 8px 12px 10px; min-width: 0; } .pfe-vset legend { font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 0 6px; font-weight: 700; } .pfe-vradio { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 4px 0; padding: 6px 12px; border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; font-family: var(--font-ui); font-size: 14px; background: var(--surface); } .pfe-vradio small { color: var(--muted); font-size: 11.5px; } .pfe-vradio.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); font-weight: 600; } .pfe-vradio input { accent-color: var(--primary); } .pfe-vvoices { max-height: 44vh; overflow: auto; } .pfe-voice .nm { display: flex; align-items: center; gap: 10px; cursor: pointer; } .pfe-voice .nm input { accent-color: var(--primary); flex: 0 0 auto; } .pfe-voice .nm span b { display: block; } .pfe-vhelp { padding: 12px; border-radius: 10px; background: var(--surface2); font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; } /* progress report: one full-width frame per status, one row per kind of content */ .pfe-rep-stack { display: flex; flex-direction: column; gap: 16px; margin: 18px 0 8px; } .pfe-rep-frame { border: 1px solid var(--border); border-left: 6px solid var(--muted); border-radius: var(--radius); padding: 14px 18px 8px; background: var(--surface); } .pfe-rep-frame.prog { border-left-color: #f0a020; } .pfe-rep-frame.done { border-left-color: #2f9e57; } .pfe-rep-frame.todo { border-left-color: var(--muted); } .pfe-rep-frame h4 { margin: 0 0 8px; font-family: var(--font-ui); font-size: 16px; color: var(--primary); display: flex; align-items: center; gap: 8px; } .pfe-rep-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 6px 18px; padding: 10px 0; border-top: 1px dashed var(--border); align-items: start; } .pfe-rep-lab { font-weight: 700; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pfe-rep-items ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 10px; } .pfe-rep-items li { font-size: 14px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface) 70%, var(--bg)); line-height: 1.35; } .pfe-rep-more { margin-top: 8px; } .pfe-rep-more summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 700; margin-bottom: 8px; } @media (max-width: 700px) { .pfe-rep-row { grid-template-columns: 1fr; } .pfe-rep-items ul { grid-template-columns: 1fr; } } /* ---- My Account dashboard: colour and structure ---- */ .pfe-rings .pfe-ringcard { position: relative; border-top: 5px solid var(--rc); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 11%, var(--surface)) 0%, var(--surface) 70%); box-shadow: 0 6px 18px -12px var(--rc); } .pfe-rings .pfe-ringcard .pfe-ring { background: conic-gradient(var(--rc) calc(var(--p) * 1%), color-mix(in srgb, var(--rc) 16%, var(--surface2)) 0); } .pfe-rings .pfe-ringcard .pfe-ring::before { color: var(--rc); } .pfe-ring-ic { position: absolute; top: 8px; left: 10px; font-size: 18px; } .pfe-ring-pc { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--rc); margin-top: 2px; } .pfe-sumtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 6px; } .pfe-sumtiles .t { border-radius: var(--radius); padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; color: #fff; } .pfe-sumtiles .t span { grid-row: 1 / 3; font-size: 26px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.22); } .pfe-sumtiles .t b { font-family: var(--font-head); font-size: 30px; line-height: 1.05; } .pfe-sumtiles .t small { font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; opacity: .95; } .pfe-sumtiles .done { background: linear-gradient(135deg, #2f9e57, #1d7a43); } .pfe-sumtiles .prog { background: linear-gradient(135deg, #f0a020, #cf7a0a); } .pfe-sumtiles .todo { background: linear-gradient(135deg, #6b7a99, #465272); } .pfe-rep-frame { background: linear-gradient(180deg, color-mix(in srgb, var(--fc, #888) 9%, var(--surface)), var(--surface) 140px); } .pfe-rep-frame.prog { --fc: #f0a020; } .pfe-rep-frame.done { --fc: #2f9e57; } .pfe-rep-frame.todo { --fc: #6b7a99; } .pfe-rep-frame h4 { color: var(--fc); font-size: 17px; } .pfe-rep-frame .pfe-rep-items li { border-left: 4px solid color-mix(in srgb, var(--fc) 70%, transparent); } .pfe-rep-row:nth-child(odd) .pfe-rep-lab { color: var(--primary); } .pfe-bars .pfe-bar:nth-child(6n+1) .t i { background: #4f6bed; } .pfe-bars .pfe-bar:nth-child(6n+2) .t i { background: #e08a1e; } .pfe-bars .pfe-bar:nth-child(6n+3) .t i { background: #2f9e57; } .pfe-bars .pfe-bar:nth-child(6n+4) .t i { background: #d6456b; } .pfe-bars .pfe-bar:nth-child(6n+5) .t i { background: #12a3a3; } .pfe-bars .pfe-bar:nth-child(6n+6) .t i { background: #8b5cf6; } .pfe-bars .pfe-bar .t { height: 12px; } .pfe-pending a { border-left: 4px solid var(--accent); } .pfe-report .pfe-stack { height: 10px; border-radius: 99px; overflow: hidden; } @media (max-width: 700px) { .pfe-sumtiles { grid-template-columns: 1fr; } } /* My Account dashboard: colourful banner and framed sections */ .pfe-dash-head { padding: 20px 22px; border-radius: calc(var(--radius) + 4px); color: #fff; background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 92%, #000) 0%, color-mix(in srgb, var(--accent) 80%, var(--primary)) 100%); box-shadow: 0 14px 30px -20px var(--primary); } .pfe-dash-head h1, .pfe-dash-head .pfe-kicker, .pfe-dash-head .pfe-small { color: #fff !important; } .pfe-dash-head .pfe-av, .pfe-dash-head img { border: 3px solid rgba(255,255,255,.85); } .pfe-page h3.pfe-dh { --dc: var(--primary); display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; padding: 9px 14px; border-radius: 12px; font-size: 18px; color: var(--dc) !important; background: color-mix(in srgb, var(--dc) 12%, var(--surface)); border-left: 6px solid var(--dc); } .pfe-dcard { border: 1px solid color-mix(in srgb, var(--dc, var(--border)) 35%, var(--border)); border-radius: var(--radius); padding: 0 14px 14px; background: var(--surface); } .pfe-dcard h3.pfe-dh { margin: 0 -14px 12px; border-radius: var(--radius) var(--radius) 0 0; } .pfe-dcard .pfe-pending a { border-left-color: var(--dc, var(--accent)); } .pfe-rep-head h2 { font-size: 24px; } #pfe-menuask { position: fixed; z-index: 9999; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: min(720px, calc(100vw - 24px)); padding: 12px 16px; border-radius: 14px; background: var(--surface); color: var(--text); border: 2px solid var(--accent); box-shadow: 0 18px 40px -16px rgba(0,0,0,.45); font-size: 14px; } #pfe-menuask b { color: var(--primary); } .pfe-rings { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; } .pfe-rings .pfe-ringcard { padding: 26px 8px 10px; } .pfe-rings .pfe-ring { width: 92px; height: 92px; } .pfe-rings .pfe-ring::before { width: 72px; height: 72px; font-size: 18px; } .pfe-rings b { font-size: 12px !important; } /* media: voice separation */ .pfe-vchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; } .pfe-vchip { font-family: var(--font-ui); font-size: 13.5px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .pfe-vchip b { opacity: .7; margin-left: 4px; } .pfe-vchip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .pfe-vb { display: inline-flex; gap: 8px; align-items: center; } .pfe-mlist[data-vf="female"] .pfe-vb:not([data-voice="female"]), .pfe-mlist[data-vf="male"] .pfe-vb:not([data-voice="male"]), .pfe-mlist[data-vf="std"] .pfe-vb:not([data-voice=""]) { display: none; } /* ---- framed media lists (1.11) ---- */ .pfe-mgf { --fc: #7a4b8f; margin: 18px 0; border: 1px solid color-mix(in srgb, var(--fc) 40%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--fc) 5%, var(--surface)); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .pfe-mgh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; background: var(--fc); color: #fff; cursor: pointer; list-style: none; font-family: var(--font-head); } .pfe-mgh::-webkit-details-marker { display: none; } .pfe-mgh::before { content: "▾"; font-size: 14px; opacity: .85; transition: transform .15s; } .pfe-mgf:not([open]) > .pfe-mgh::before { transform: rotate(-90deg); } .pfe-mgh b { flex: 1 1 200px; font-size: 1.05em; font-weight: 600; } .pfe-mgh small { font-family: var(--font-ui); opacity: .9; font-size: 12.5px; } .pfe-mgh .pfe-st, .pfe-mgh .pfe-pill { background: rgba(255,255,255,.92); color: #222; border-color: transparent; } .pfe-mgb { padding: 12px 14px 6px; } .pfe-mframe { --fc: #7a4b8f; border: 1px solid color-mix(in srgb, var(--fc) 35%, var(--border)); border-left: 5px solid var(--fc); border-radius: 12px; background: var(--surface); margin: 0 0 12px; overflow: hidden; } #pfe-mlist > .pfe-mframe { margin-bottom: 14px; } .pfe-mfh { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: color-mix(in srgb, var(--fc) 9%, var(--surface)); } .pfe-mfh .no { flex: none; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 17px; display: grid; place-items: center; background: var(--fc); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 13px; } .pfe-mfh .tt { flex: 1; min-width: 0; } .pfe-mfh .tt b { display: block; font-family: var(--font-ui); font-size: 15px; line-height: 1.35; color: var(--text); } .pfe-mfh .tt small { color: var(--muted); font-family: var(--font-ui); } .pfe-mitems { padding: 4px 14px 8px; } .pfe-mitem { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0; padding: 8px 0; border-top: 1px dashed color-mix(in srgb, var(--fc) 30%, var(--border)); } .pfe-mitem:first-child { border-top: 0; } .pfe-mitem .vt { font-family: var(--font-ui); font-size: 14px; color: var(--text); flex: 1 1 180px; } .pfe-mitem .act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pfe-mitem .pfe-mslot { flex-basis: 100%; } .pfe-mframe .pfe-tool { border-color: color-mix(in srgb, var(--fc) 50%, var(--border)); } .pfe-mframe .pfe-tool.on { background: var(--fc); color: #fff; } .pfe-mx { border: 1px solid #c0392b; background: transparent; color: #c0392b; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 1; } .pfe-mx:hover { background: #c0392b; color: #fff; } .pfe-mx:disabled { opacity: .5; cursor: wait; } .pfe-gb.on { background: var(--primary); color: var(--primary-ink); } @media (max-width: 560px) { .pfe-mgh { padding: 10px 12px; } .pfe-mgb { padding: 10px 8px 4px; } .pfe-mfh { padding: 8px 10px; } .pfe-mitems { padding: 2px 10px 6px; } } /* ---- floating Stop audio / video button: top-right corner, just below the menu and the social icons ---- */ .pfe-stop { position: fixed; right: 16px; top: var(--stop-top, 150px); z-index: 60; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border: 2px solid #ffffff; border-radius: 23px; background: linear-gradient(135deg, #1e3a8a, #0b1f5c); color: #ffffff; font-family: var(--font-ui); font-weight: 800; font-size: 15px; letter-spacing: .01em; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.32), 0 0 0 0 rgba(30,58,138,.55); touch-action: none; user-select: none; animation: pfe-stop-in .2s ease-out, pfe-stop-pulse 2.4s ease-in-out .4s infinite; } .pfe-stop[hidden] { display: none; } .pfe-stop:hover, .pfe-stop:focus-visible { background: linear-gradient(135deg, #2b4fb3, #12308a); outline: 3px solid rgba(255,255,255,.7); outline-offset: 2px; } @keyframes pfe-stop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes pfe-stop-pulse { 0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.32), 0 0 0 0 rgba(30,58,138,.55); } 55% { box-shadow: 0 6px 18px rgba(0,0,0,.32), 0 0 0 10px rgba(30,58,138,0); } } @media (max-width: 560px) { .pfe-stop { right: 10px; height: 42px; padding: 0 14px; font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .pfe-stop { animation: none; } } @media print { .pfe-stop { display: none !important; } } /* ---- 1.12: search, play all, speed, posters, make main ---- */ .pfe-mtools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 6px; } .pfe-mtools input[type=search] { flex: 1 1 220px; max-width: 360px; font-family: var(--font-ui); font-size: 15px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); } .pfe-speed { display: flex; gap: 6px; align-items: center; margin: 6px 0 2px; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); } .pfe-speed button { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 3px 10px; cursor: pointer; font: inherit; } .pfe-speed button.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .pfe-mth { flex: none; width: 64px; height: 40px; object-fit: cover; border-radius: 6px; } .pfe-mk { border-color: #2f7d5b !important; color: #2f7d5b; } .pfe-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 8px 0 18px; } .pfe-recent-i { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; } .pfe-recent-i:hover { border-color: var(--primary); } .pfe-recent-i .ic, .pfe-recent-i img { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--surface2); color: var(--primary); } .pfe-recent-i b { display: block; font-family: var(--font-ui); font-size: 14px; line-height: 1.3; } .pfe-recent-i small { color: var(--muted); font-family: var(--font-ui); } .pfe-gnote { margin: 4px 0 6px; } .pfe-dl { text-decoration: none; } .pfe-pay-tabs button:disabled { opacity: .45; cursor: not-allowed; } /* v1.15.1 – one-line toolbars, one-frame Media and Contact menus */ .pfe-reader-tools { flex-wrap: nowrap; gap: 5px; } .pfe-reader-tools .pfe-tool { padding: 5px 9px; font-size: 12.5px; gap: 4px; white-space: nowrap; flex: 0 0 auto; } .pfe-reader-tools > span:not(.sp) { white-space: nowrap; flex: 0 0 auto; } .pfe-reader-tools .sp { flex: 1 1 0; min-width: 0; } .pfe-mrow1 { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 8px 0 6px; } .pfe-mrow1 .pfe-vchips { flex: 0 0 auto; flex-wrap: nowrap; gap: 5px; margin: 0; } .pfe-mrow1 .pfe-vchip { padding: 5px 10px; font-size: 12.5px; white-space: nowrap; } .pfe-mrow1 .pfe-mtools { flex: 1 1 auto; min-width: 0; margin: 0; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; } .pfe-mrow1 .pfe-mtools input[type=search] { flex: 1 1 110px; min-width: 100px; max-width: 240px; padding: 6px 12px; font-size: 13px; } .pfe-mrow1 .pfe-mtools .pfe-btn { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 760px) { .pfe-reader-tools, .pfe-mrow1, .pfe-mrow1 .pfe-vchips, .pfe-mrow1 .pfe-mtools { flex-wrap: wrap; } } /* Media and Contact sub-menus: everything in one frame, no side scrolling */ #pfe-sub[data-k="media"], #pfe-sub[data-k="contact"] { flex-wrap: wrap !important; overflow: visible !important; row-gap: 2px; padding-bottom: 6px !important; } #pfe-sub[data-k="media"] .pfe-m2part { margin-left: 6px; margin-right: 2px; } #pfe-sub[data-k="media"] .pfe-m2, #pfe-sub[data-k="contact"] .pfe-m2 { padding: 5px 7px; font-size: 12.5px; } #pfe-sub[data-k="media"] .pfe-m2part:first-child { margin-left: 0; } #pfe-sub[data-k="contact"] { flex-wrap: nowrap !important; gap: 0; } @media (max-width: 1250px) { #pfe-sub[data-k="contact"] { flex-wrap: wrap !important; } } /* v1.16.2 – welcome page: the themes and welcome frames keep their original size, font and look; the voices frame is added at the right and the whole page scales to fit */ .pfe-welcome-fit:has(.pfe-wpanels.n3) { width: min(2100px, calc((100vw - 6vw) * 1.2)); } @media (min-width: 901px) { .pfe-wpanels.n3 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .64fr) !important; gap: clamp(20px, 2.2vw, 44px) !important; align-items: stretch; } } .pfe-wpanels.n3 .pfe-wtheme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .pfe-wpanel.pfe-wvoices { padding: clamp(22px, 3.6vh, 44px) clamp(16px, 1.5vw, 28px); } .pfe-wmsg .pfe-wbig { font-size: clamp(30px, min(3.4vw, 5.6vh), 58px) !important; margin-bottom: 2.2vh !important; line-height: 1.1; } .pfe-wtheme-h { font-family: var(--font-head); font-size: clamp(20px, min(1.9vw, 3.4vh), 31px); font-weight: 600; letter-spacing: .03em; text-transform: none; color: #ffe2b8; white-space: nowrap; text-align: center; margin-bottom: 2.2vh; padding-bottom: 6px; } .pfe-wtheme-h::after { content: ""; display: block; width: 64px; height: 2px; margin: 8px auto 0; background: linear-gradient(90deg, transparent, #ffd9a8, transparent); } .pfe-wpanels.n3 .pfe-wmsg { justify-content: flex-start; } .pfe-wpanels.n3 .pfe-wmsg .msg { margin-top: 1.4vh; } .pfe-wchip .nm { white-space: nowrap; } /* voices frame */ .pfe-wvoices { text-align: left; overflow: hidden; } #pfe-wv-body { position: relative; flex: 1 1 auto; min-height: 300px; } .pfe-wvin { position: absolute; inset: 0; display: flex; flex-direction: column; } .pfe-wvq { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; } .pfe-wvq .pfe-wlink { font-size: 13px; padding: 6px 11px; white-space: nowrap; } .pfe-wvq .pfe-wlink.on { background: rgba(255,217,168,.2); border-color: #ffd9a8; } .pfe-wvnow { text-align: center; font: 13.5px var(--font-ui); color: rgba(255,255,255,.85); margin-bottom: 12px; } .pfe-wvnow b { color: #ffd9a8; } .pfe-wvtabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.22); margin-bottom: 8px; } .pfe-wvtab { flex: 1 1 0; appearance: none; border: 0; background: none; color: rgba(255,255,255,.82); cursor: pointer; padding: 7px 4px; border-radius: 999px; font: 600 13.5px var(--font-ui); white-space: nowrap; transition: background .2s, color .2s; } .pfe-wvtab small { margin-left: 4px; opacity: .6; font-size: 10.5px; font-weight: 500; } .pfe-wvtab:hover { background: rgba(255,255,255,.12); } .pfe-wvtab.on { background: linear-gradient(135deg, #ffe2b8, #ffc98a); color: #2a1b0a; box-shadow: 0 4px 14px rgba(0,0,0,.3); } .pfe-wvtab.none { opacity: .55; } .pfe-wvscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 6px 4px 0; scrollbar-width: thin; scrollbar-color: rgba(255,217,168,.55) transparent; } .pfe-wvscroll::-webkit-scrollbar { width: 6px; } .pfe-wvscroll::-webkit-scrollbar-thumb { background: rgba(255,217,168,.5); border-radius: 6px; } .pfe-wvg h5 { margin: 10px 0 7px; font: 700 11.5px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #ffd9a8; opacity: .9; } .pfe-wvl { display: flex; flex-wrap: wrap; gap: 7px; } .pfe-wv { display: inline-flex; align-items: stretch; border-radius: 999px; border: 1.5px solid transparent; background: rgba(255,255,255,.09); overflow: hidden; } .pfe-wv button { appearance: none; border: 0; background: none; color: #fff; cursor: pointer; font: 500 13.5px var(--font-ui); padding: 5px 9px; } .pfe-wv .u { padding-left: 12px; } .pfe-wv .s { padding: 5px 10px 5px 6px; opacity: .75; font-size: 10px; } .pfe-wv:hover { background: rgba(255,255,255,.15); } .pfe-wv.on { border-color: #ffd9a8; background: rgba(255,217,168,.18); box-shadow: 0 0 0 3px rgba(255,217,168,.12); } .pfe-wv.nat .u { font-weight: 600; } .pfe-wv small { opacity: .7; font-size: 10px; } .pfe-wvnote { font: 13px var(--font-ui); color: rgba(255,255,255,.85); text-align: center; } @media (max-width: 900px) { .pfe-wpanels.n3, .pfe-wpanels.n2 { grid-template-columns: 1fr !important; } .pfe-wpanels .pfe-wmsg { order: -1; } .pfe-wtheme-h { white-space: normal; } #pfe-wv-body { min-height: 380px; } .pfe-welcome-fit:has(.pfe-wpanels.n3) { width: min(1240px, calc(100vw - 24px)); } .pfe-wchip .nm { white-space: normal; } } .pfe-wpanels.n3 .pfe-wpanel { justify-content: flex-start; } /* v1.16.2 – welcome page: original-size frames (themes limited to 20 + Customise), voices as a third frame */ .pfe-welcome-fit:has(.pfe-wpanels.n3) { width: min(1860px, calc(100vw - 2vw)); } @media (min-width: 901px) { .pfe-wpanels.n3 { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, .88fr) !important; gap: clamp(14px, 1.5vw, 28px) !important; } } .pfe-wpanels.n3 .pfe-wtheme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(7px, 1.1vh, 12px) clamp(8px, .8vw, 12px); } .pfe-wpanels.n3 .pfe-wchip { padding: clamp(7px, 1vh, 11px) 10px clamp(7px, 1vh, 11px) 8px; } .pfe-wpanels.n3 .pfe-wchip .sw { width: 38px; height: 26px; } .pfe-wpanels.n3 .pfe-wchip .nm { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: clamp(13px, 1.7vh, 15px) !important; } .pfe-wpanels.n3 .pfe-wpanel { padding: clamp(20px, 3.4vh, 40px) clamp(18px, 1.8vw, 32px) !important; } .pfe-wpanels.n3 .pfe-wtheme-acts { margin-top: 2vh; gap: 8px; justify-content: center; } .pfe-wpanels.n3 #pfe-wtheme-now { display: block; margin: 1.4vh 0 0; text-align: center; font: 13.5px var(--font-ui); color: rgba(255,255,255,.88); } .pfe-wpanels.n3 .pfe-wmsg .msg p { font-size: clamp(15px, min(1.2vw, 2.1vh), 19.5px); line-height: 1.7; } .pfe-wpanels.n3 .pfe-wmsg .pfe-wbig { font-size: clamp(32px, min(3.2vw, 5.6vh), 56px) !important; } .pfe-wtheme { position: relative; } .pfe-wcust { display: none; position: absolute; inset: 0; z-index: 4; padding: clamp(18px, 3vh, 34px) clamp(16px, 1.6vw, 28px); overflow-y: auto; border-radius: inherit; background: #1d2846; border: 1px solid rgba(255,217,168,.35); } .pfe-wcust.open { display: block; } .pfe-wcust h6 { margin: 14px 0 8px; font: 700 11px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: #ffd9a8; } .pfe-wcust-bar { margin-top: 16px; text-align: center; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-welcome-box.wl { gap: 1.4vh; min-height: 0; justify-content: center; } .pfe-welcome:has(.pfe-wpanels.n3) .lotus { width: 52px; height: 52px; margin-bottom: 0; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-wtop { gap: 6px; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-wbottom { gap: 8px; flex-direction: column; align-items: center; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-btn { padding: 12px 28px; } .pfe-wpanels.n3 .pfe-wchip { padding-top: clamp(5px, .8vh, 9px); padding-bottom: clamp(5px, .8vh, 9px); } .pfe-wpanels.n3 .pfe-wtheme-h { margin-bottom: clamp(8px, 1.4vh, 14px) !important; } .pfe-wpanels.n3 .pfe-wpanel { padding-top: clamp(16px, 2.4vh, 30px) !important; padding-bottom: clamp(16px, 2.4vh, 30px) !important; } .pfe-wpanels.n3 .pfe-wmsg .pfe-wbig { margin-bottom: 1.4vh !important; } /* ===== v1.16.3 – welcome page: tall frames, fixed design size scaled to the window, ivory backdrop with navy frames ===== */ .pfe-welcome:has(.pfe-wpanels.n3) { background: #eadbbd; color: #2b2112; } .pfe-welcome:has(.pfe-wpanels.n3)::before { background: radial-gradient(ellipse at 50% 0%, #fbf4e4 0%, #f0e2c4 52%, #e2cca1 100%) !important; animation: none; } .pfe-welcome:has(.pfe-wpanels.n3)::after { display: none !important; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-wtop .lotus { color: #a8742a; filter: drop-shadow(0 2px 4px rgba(120,80,20,.25)); width: 54px; height: 54px; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-wtop .series { color: #6b4a1c; font-size: 14px; letter-spacing: .3em; margin: 0; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-presented { color: #3b2d17; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-presented span { color: #3b2d17; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-btn { background: #1f2a48 !important; color: #ffe2b8 !important; font-size: 19px; padding: 14px 38px; box-shadow: 0 0 0 5px rgba(168,116,42,.22), 0 12px 28px rgba(60,40,10,.35) !important; animation: pfe-rise 1s 1.2s ease-out both; } .pfe-welcome-fit:has(.pfe-wpanels.n3) { width: 1600px; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-welcome-box.wl { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 0; } .pfe-welcome .pfe-wpanels.n3 { flex: 1 1 auto; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, .92fr) !important; gap: 26px !important; align-items: stretch; } .pfe-welcome .pfe-wpanels.n3 .pfe-wpanel { color: #fff; background: linear-gradient(160deg, #35446e, #263359) !important; box-shadow: 0 20px 44px rgba(70,45,10,.38), inset 0 1px 0 rgba(255,255,255,.14) !important; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 28px 30px !important; border-radius: 26px; display: flex; flex-direction: column; justify-content: flex-start; } .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-h { font-size: 31px !important; margin-bottom: 18px !important; padding-bottom: 8px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-grid { flex: 1 1 auto; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; gap: 10px 12px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wchip { padding: 6px 12px 6px 9px; border-radius: 14px; align-items: center; } .pfe-welcome .pfe-wpanels.n3 .pfe-wchip .sw { width: 42px; height: 28px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wchip .nm { font-size: 16px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-acts { margin-top: 18px; gap: 10px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wlink { font-size: 14px; padding: 8px 14px; } .pfe-welcome .pfe-wpanels.n3 #pfe-wtheme-now { font-size: 15px; margin-top: 12px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg { justify-content: space-evenly; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .pfe-wbig { font-size: 58px !important; line-height: 1.06; margin: 0 !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .msg p { font-size: 18.5px !important; line-height: 1.7 !important; margin-bottom: 14px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .tag { font-size: 27px !important; margin: 0 !important; } .pfe-welcome .pfe-wpanels.n3 #pfe-wv-body { min-height: 0; flex: 1 1 auto; } .pfe-welcome .pfe-wpanels.n3 .pfe-wvq .pfe-wlink { font-size: 14px; padding: 7px 12px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wvnow { font-size: 15px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wvtab { font-size: 15px; padding: 9px 6px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wvg h5 { font-size: 12.5px; margin: 14px 0 9px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wvl { gap: 9px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wv button { font-size: 15.5px; padding: 7px 10px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wvnote { font-size: 15px; line-height: 1.6; padding: 16px 6px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wcust { padding: 28px 30px; } @media (max-width: 900px) { .pfe-welcome .pfe-wpanels.n3 { grid-template-columns: 1fr !important; } .pfe-welcome-fit:has(.pfe-wpanels.n3) { width: auto; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .pfe-wbig { font-size: 40px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-h { font-size: 24px !important; white-space: normal; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-welcome-box.wl { display: block; } .pfe-welcome .pfe-wpanels.n3 .pfe-wpanel { margin-bottom: 14px; } } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg { justify-content: flex-start; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .pfe-wbig { margin: 20px 0 0 !important; font-size: 54px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .msg { margin: auto 0; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .tag { margin: 0 !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wpanel { padding: 22px 28px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-h { font-size: 29px !important; margin-bottom: 12px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wchip { padding-top: 3px; padding-bottom: 3px; } .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-grid { gap: 8px 12px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-acts { margin-top: 12px; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-wtop .lotus { width: 44px; height: 44px; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-btn { padding: 11px 36px; } .pfe-welcome:has(.pfe-wpanels.n3) .thanks { color: #4a3920; opacity: 1; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-presented { opacity: 1; } .pfe-welcome:has(.pfe-wpanels.n3) .pfe-presented b { color: #2b2112; } /* ===== two-frame layout (themes + voices in one frame), preview flag ?wl=b ===== */ @media (min-width: 901px) { .pfe-welcome .pfe-wpanels.n3.nb { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; gap: 28px !important; } } .pfe-welcome .pfe-wpanels.nb .pfe-wtheme-grid { flex: 0 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto; } .pfe-welcome .pfe-wpanels.nb .pfe-wchip { padding-top: 7px; padding-bottom: 7px; } .pfe-welcome .pfe-wpanels.nb .pfe-wchip .nm { font-size: 15px !important; } .pfe-welcome .pfe-wpanels.nb .pfe-wtheme { transition: background .5s, border-color .5s, box-shadow .5s; } .pfe-welcome .pfe-wpanels.nb .pfe-wtheme[data-wc="high"] { background: linear-gradient(160deg, #000, #0a1020) !important; box-shadow: 0 0 0 3px #fff, 0 20px 44px rgba(0,0,0,.5) !important; } .pfe-welcome .pfe-wpanels.nb .pfe-wtheme[data-wc="dark"] { background: linear-gradient(160deg, #101114, #1b1c22) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 20px 44px rgba(0,0,0,.6) !important; } .pfe-welcome .pfe-wpanels.nb .pfe-wtheme[data-wc="high"] .pfe-wchip, .pfe-welcome .pfe-wpanels.nb .pfe-wtheme[data-wc="dark"] .pfe-wchip { background: rgba(255,255,255,.1); } .pfe-wcontrast { margin: 12px 0 0 !important; } .pfe-wcontrast .pfe-tweak-row { justify-content: center; } .pfe-wsep { height: 1px; margin: 16px 0 14px; background: linear-gradient(90deg, transparent, rgba(255,217,168,.6), transparent); } .pfe-welcome .pfe-wpanels.nb .pfe-wtheme-h.sm { font-size: 26px !important; margin-bottom: 10px !important; } .pfe-welcome .pfe-wpanels.nb #pfe-wv-body { position: static; flex: 0 0 auto; min-height: 0; } .pfe-wpanels.nb .pfe-wvq { margin-bottom: 8px; } .pfe-wvl.mini { justify-content: center; margin-top: 6px; } .pfe-wvmorebar { text-align: center; margin-top: 12px; } .pfe-wvmorebar .pfe-wlink { font-size: 15px; padding: 9px 18px; } .pfe-wdone { appearance: none; border: 0; cursor: pointer; font: 700 20px var(--font-ui); padding: 15px 52px; border-radius: 999px; background: linear-gradient(135deg, #ffe2b8, #ffc98a); color: #2a1b0a; box-shadow: 0 8px 22px rgba(0,0,0,.35); } .pfe-wdone:hover { filter: brightness(1.06); } #pfe-wvmore .pfe-wvin { position: static; } #pfe-wvmore .pfe-wvscroll { max-height: none; overflow: visible; } .pfe-wv .s.busy { animation: pfe-wvb .7s ease-in-out infinite alternate; } .pfe-wv .s.playing { color: #ffd9a8; opacity: 1; } @keyframes pfe-wvb { from { opacity: .35; } to { opacity: 1; } } .pfe-wvrows { margin-top: 8px; } .pfe-wvrow { display: flex; align-items: center; gap: 12px; margin: 7px 0; } .pfe-wvrow .lab { flex: 0 0 128px; font: 700 12.5px var(--font-ui); letter-spacing: .06em; color: #ffd9a8; text-align: right; line-height: 1.2; } .pfe-wvrow .chips { display: flex; flex-wrap: wrap; gap: 7px; } .pfe-wvrow .chips em { font: italic 13.5px var(--font-ui); opacity: .8; } /* ===== v1.18 – welcome page: three frames (themes | welcome | reading voice), "Black & Gold" ===== */ html body .pfe-welcome:has(.pfe-wpanels.n3)::before{background:radial-gradient(ellipse at 50% 0%,var(--wl-p1,#241d10) 0%,var(--wl-p2,#100c06) 60%,var(--wl-p3,#070503) 100%)!important;animation:none;transition:background .5s} html body .pfe-welcome:has(.pfe-wpanels.n3){color:var(--wl-ft,#f3e6cf)} .pfe-welcome:has(.pfe-wpanels.n3)::after{display:none!important} .pfe-welcome:has(.pfe-wpanels.n3) .pfe-wtop .series{color:var(--wl-hd,#ffd9a8)!important}.pfe-welcome:has(.pfe-wpanels.n3) .pfe-wtop .lotus{color:var(--wl-hd,#ffd9a8)!important;filter:none} .pfe-welcome:has(.pfe-wpanels.n3) .thanks,.pfe-welcome:has(.pfe-wpanels.n3) .pfe-presented,.pfe-welcome:has(.pfe-wpanels.n3) .pfe-presented span,.pfe-welcome:has(.pfe-wpanels.n3) .pfe-presented b{color:var(--wl-ft,#f3e6cf)!important;opacity:1} html body .pfe-welcome #pfe-enter{background:var(--wl-btn,#ffd9a8)!important;color:var(--wl-btnink,#2a1b0a)!important;animation:none!important;opacity:1!important} html body .pfe-welcome .pfe-presented,html body .pfe-welcome .pfe-presented *{color:var(--wl-ft,#f3e6cf)!important;opacity:1!important;animation:none!important} @media(min-width:901px){html body .pfe-welcome .pfe-wpanels.n3{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr)!important;gap:28px!important}} html body .pfe-welcome .pfe-wpanels.n3 .pfe-wpanel{background:linear-gradient(160deg,var(--wl-f1,#2d3a63),var(--wl-f2,#1f2a4e))!important;border-radius:24px!important;box-shadow:0 0 0 var(--wl-rw,1px) var(--wl-ring,rgba(255,217,168,.55)),0 20px 44px rgba(0,0,0,.6)!important} .pfe-welcome .pfe-wpanels.n3 .pfe-wcust{background:var(--wl-f2,#1f2a4e)} /* 12 themes up front: normal-size chips, spread evenly down the frame */ @media (min-width: 901px) { .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-grid { flex: 1 1 auto; grid-auto-rows: 46px; align-content: space-evenly; } } /* v1.18.2 – larger welcome text; compact, uncropped Customise panel */ @media (min-width: 901px) { .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .msg p { font-size: clamp(19px, 2.25vh, 25px) !important; line-height: 1.65 !important; margin-bottom: 16px !important; } .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .tag { font-size: clamp(26px, 3vh, 34px) !important; } } .pfe-welcome .pfe-wpanels.n3 .pfe-wcust { padding: 20px 22px 0; } .pfe-wcust .pfe-wtheme-grid { gap: 6px 8px; } .pfe-wcust .pfe-wchip { padding: 4px 8px 4px 5px; font-size: 13px; } .pfe-wcust .pfe-wchip .nm { overflow: visible; text-overflow: clip; } .pfe-wcust .pfe-tweak-row { justify-content: center; } .pfe-wcust-bar { position: sticky; bottom: 0; padding: 12px 0 16px; background: inherit; } /* v1.18.5 – page background stays fixed; header at the very top and the Enter block at the very bottom, clear of the frames */ @media (min-width: 701px) { .pfe-welcome-box.wl { justify-content: space-between !important; gap: 0 !important; padding-top: 14px !important; padding-bottom: 6px; } .pfe-wtop { margin-bottom: clamp(30px, 5vh, 56px); } .pfe-wbottom { margin-top: clamp(30px, 5vh, 56px); } } /* v1.18.7 – the big title is painted with a gradient clipped to its text box: give it room so descenders (y, g, p) are never cut */ .pfe-welcome h1, .pfe-welcome .pfe-wbig { line-height: 1.22 !important; padding: .04em 0 .2em !important; overflow: visible; } /* v1.18.8 – header at the very top and footer at the very bottom, larger */ @media (min-width: 701px) { .pfe-welcome-box.wl { padding-top: 6px !important; padding-bottom: 4px !important; } .pfe-welcome .pfe-wtop { gap: 12px !important; } .pfe-welcome .pfe-wtop .lotus { width: 62px !important; height: 62px !important; } .pfe-welcome .pfe-wtop .series { font-size: clamp(15px, 1.9vh, 20px) !important; letter-spacing: .32em !important; font-weight: 600; } .pfe-welcome .pfe-wbottom { gap: 14px; } .pfe-welcome .pfe-wbottom #pfe-enter { font-size: clamp(18px, 2.2vh, 24px); padding: 14px 40px; } .pfe-welcome .pfe-wbottom .pfe-presented img { width: clamp(56px, 7vh, 76px); height: clamp(56px, 7vh, 76px); } .pfe-welcome .pfe-wbottom .pfe-presented span { font-size: clamp(15px, 1.9vh, 19px); line-height: 1.35; } .pfe-welcome .pfe-wbottom .pfe-presented b { font-size: clamp(18px, 2.4vh, 24px); } .pfe-welcome .pfe-wbottom .thanks { font-size: clamp(14px, 1.8vh, 18px); } } #pfe-app .pfe-welcome #pfe-enter { background: var(--wl-btn, #ffd9a8) !important; color: var(--wl-btnink, #2a1b0a) !important; } @media (min-width: 901px) { #pfe-app .pfe-welcome .pfe-wbottom #pfe-enter { font-size: clamp(18px, 2.2vh, 24px) !important; padding: 14px 40px; } } /* v1.18.9 – the voice frame shows the best few voices; "Check more voices" opens every voice of the device in the same frame */ .pfe-welcome .pfe-wvoices { position: relative; overflow: hidden; justify-content: flex-start; } .pfe-welcome .pfe-wvoices .pfe-wcust { background: var(--wl-f2, #1f2a4e); padding: 22px 20px 0; } .pfe-welcome .pfe-wvoices #pfe-wvmore .pfe-wvin { position: static; } .pfe-welcome .pfe-wvoices #pfe-wvmore .pfe-wvscroll { overflow: visible; max-height: none; } .pfe-welcome .pfe-wvoices .pfe-wdone { font: 600 18px var(--font-ui); padding: 12px 44px; border-radius: 999px; background: #ffd9a8; color: #2a1b0a; border: 0; cursor: pointer; } .pfe-welcome .pfe-wvoices .pfe-wvrows { margin-top: 10px; } .pfe-welcome .pfe-wvoices .pfe-wvmorebar { margin-top: 14px; } /* v1.18.10 – normal, easy-to-read text sizes (no zoom-out): everything is designed at real size */ @media (min-width: 901px) { #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-h { font-size: 24px !important; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wchip { font-size: 16px !important; padding: 8px 12px 8px 8px !important; border-radius: 12px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wchip .sw { width: 40px; height: 28px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-grid { grid-auto-rows: 46px; gap: 8px 12px; align-content: space-evenly; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-tweak-row .lbl { font-size: 13px; flex-basis: 86px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-colour, #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-contrast { font-size: 14.5px !important; padding: 5px 12px 5px 6px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-colour span, #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-contrast span { font-size: 14.5px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wlink { font-size: 15px !important; padding: 8px 16px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 #pfe-wtheme-now { font-size: 15px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wvnow { font-size: 15px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wv button { font-size: 16px !important; padding: 7px 6px 7px 12px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wv .s { font-size: 12px; padding: 7px 11px 7px 5px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wvrow .lab { font-size: 13px; flex-basis: 116px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wvtab { font-size: 15.5px; padding: 9px 8px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wvg h5, #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wcust h6 { font-size: 13px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wvnote { font-size: 15px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wvq .pfe-wlink { font-size: 15px !important; padding: 8px 14px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .msg p { font-size: clamp(18px, 1.15vw, 23px) !important; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .tag { font-size: clamp(25px, 1.6vw, 32px) !important; } #pfe-app .pfe-welcome .pfe-wtop .series { font-size: 17px !important; } #pfe-app .pfe-welcome .pfe-wbottom .thanks { font-size: 16px !important; } #pfe-app .pfe-welcome .pfe-wbottom .pfe-presented span { font-size: 16px !important; } #pfe-app .pfe-welcome .pfe-wbottom .pfe-presented b { font-size: 20px !important; } #pfe-app .pfe-welcome .pfe-wbottom #pfe-enter { font-size: 21px !important; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wdone { font-size: 19px; } } /* keep the page compact so it does not need zooming out */ @media (min-width: 901px) { .pfe-wtop { margin-bottom: 16px !important; gap: 8px !important; } .pfe-wbottom { margin-top: 16px !important; gap: 10px !important; } #pfe-app .pfe-welcome .pfe-wtop .lotus { width: 52px !important; height: 52px !important; } #pfe-app .pfe-welcome .pfe-wbottom .pfe-presented img { width: 62px !important; height: 62px !important; } #pfe-app .pfe-welcome .pfe-wbottom #pfe-enter { padding: 11px 38px !important; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-grid { grid-auto-rows: 44px; gap: 6px 12px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wpanel { padding-top: 22px; padding-bottom: 20px; } } @media (min-width: 901px) { #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .msg p { font-size: clamp(17px, 1vw, 20px) !important; line-height: 1.6 !important; margin-bottom: 12px !important; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .tag { font-size: clamp(22px, 1.35vw, 28px) !important; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wmsg .pfe-wbig { font-size: clamp(40px, 2.7vw, 52px) !important; } } /* v1.18.12 – "Presented by / Shivray Enterprises" text centred under each other */ .pfe-welcome .pfe-wbottom .pfe-presented span { text-align: center !important; display: block; } .pfe-welcome .pfe-wbottom .pfe-presented b { display: block; text-align: center !important; white-space: nowrap; } /* v1.18.13 – the welcome page is always ONE screen (never scrolls on a computer); a little tighter so text stays large */ @media (min-width: 901px) { .pfe-wtop { margin-bottom: 10px !important; gap: 4px !important; } .pfe-wbottom { margin-top: 10px !important; gap: 6px !important; } #pfe-app .pfe-welcome .pfe-wtop .lotus { width: 44px !important; height: 44px !important; } #pfe-app .pfe-welcome .pfe-wbottom .pfe-presented img { width: 54px !important; height: 54px !important; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wpanel { padding-top: 16px; padding-bottom: 14px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme-grid { grid-auto-rows: 40px; gap: 5px 12px; } } /* v1.18.14 – Colour chips stay on ONE line, inside the themes frame */ @media (min-width: 901px) { #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme > .pfe-tweaks { min-width: 0; max-width: 100%; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme > .pfe-tweaks .pfe-tweak-row:first-child { flex-wrap: nowrap; gap: 3px; min-width: 0; max-width: 100%; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme > .pfe-tweaks .pfe-tweak-row:first-child .lbl { flex: 0 0 auto; margin-right: 0; font-size: 11.5px; letter-spacing: .04em; margin-right: -2px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme > .pfe-tweaks .pfe-colour { font-size: 12px !important; padding: 2px 6px 2px 2px; gap: 3px; white-space: nowrap; flex: 0 0 auto; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme > .pfe-tweaks .pfe-colour span { font-size: 12px; } #pfe-app .pfe-welcome .pfe-wpanels.n3 .pfe-wtheme > .pfe-tweaks .pfe-colour i { width: 16px; height: 16px; } } /* v1.19.10 – book content text is black in light themes (everything else follows the theme) */ #pfe-app[data-dark="0"] .pfe-content { --text: #000000; --muted: #1f1f1f; color: #000000; } /* ---------------------------------------------------------------- language switch (not used in this edition) */ /* header: logo and title at the far left; then Website Language (two lines), the search box, Theme, Voice, My Account */ .pfe-header-in { max-width: none; padding-left: clamp(10px, 1.2vw, 18px); padding-right: clamp(10px, 1.6vw, 24px); gap: clamp(10px, 1.4vw, 22px); } .pfe-header-tools { justify-content: flex-start; gap: clamp(8px, .8vw, 12px); } @media (min-width: 1101px) { .pfe-brand { flex: 0 0 auto !important; } .pfe-header-tools { flex: 1 1 auto !important; } .pfe-hlang { margin-left: clamp(4px, 1.6vw, 34px); margin-right: clamp(4px, .8vw, 14px); } .pfe-hsearch { flex: 1 1 380px !important; max-width: 620px !important; } .pfe-header-tools > .pfe-labelbtn:first-of-type { margin-left: auto; } } .pfe-hsearch { flex: 1 1 340px; max-width: 560px; min-width: 200px; } .pfe-langsw { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; flex: 0 0 auto; font-family: var(--font-ui); } .pfe-langsw-h { font: 700 11px/1.1 'Poppins', 'Noto Sans Devanagari', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffd9a8; text-align: center; white-space: nowrap; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-langsw-h { letter-spacing: 0; font-size: 12.5px; text-transform: none; } .pfe-langsw-b { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.1); } .pfe-langsw button { appearance: none; border: 0; background: none; color: inherit; height: 32px; padding: 0 12px; border-radius: 999px; font: 600 13.5px 'Poppins', 'Noto Sans Devanagari', sans-serif; cursor: pointer; line-height: 1; white-space: nowrap; transition: background .15s, color .15s; } .pfe-langsw button:hover { background: rgba(255,255,255,.18); } .pfe-langsw button.on { background: #fff; color: #1c2546; box-shadow: 0 2px 6px rgba(0,0,0,.15); } .pfe-langsw .s { display: none; } #pfe-app[data-header="light"] .pfe-langsw-h { color: var(--accent); } #pfe-app[data-header="light"] .pfe-langsw-b { border-color: var(--border); background: var(--surface2); } #pfe-app[data-header="light"] .pfe-langsw button:hover { background: var(--surface); } #pfe-app[data-header="light"] .pfe-langsw button.on { background: var(--primary); color: var(--primary-ink, #fff); } #pfe-app[data-shape="sharp"] .pfe-langsw-b, #pfe-app[data-shape="sharp"] .pfe-langsw button { border-radius: 4px; } @media (max-width: 1500px) { .pfe-langsw button { padding: 0 9px; font-size: 13px; } } @media (max-width: 1100px) { .pfe-header-tools { justify-content: center; } .pfe-hsearch { margin-right: 0; max-width: none; } .pfe-hlang { order: 0 !important; } } @media (max-width: 560px) { .pfe-langsw-h { font-size: 10px; } .pfe-langsw button { height: 30px; padding: 0 8px; font-size: 12.5px; } } html.pfe-switching #pfe-app { opacity: .55; transition: opacity .2s; pointer-events: none; } /* Devanagari text: no letter spacing (it breaks the joined letters) and a little more line height */ #pfe-app:is([data-lang="hi"], [data-lang="mr"]) *:not(.pfe-langsw-h) { letter-spacing: 0 !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) :is(h1, h2, h3, .pfe-brand-lines b) { line-height: 1.3; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-content { line-height: 1.85; } /* welcome page: Website Language at the foot of the voice frame */ .pfe-wlang.pfe-langsw { display: flex; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); gap: 10px; width: 100%; } .pfe-wlang .pfe-langsw-h { font-size: clamp(12px, 1.5vh, 14px); letter-spacing: .16em; } .pfe-wlang .pfe-langsw-b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; border: 0; background: none; } .pfe-wlang button { height: auto; padding: clamp(9px, 1.4vh, 13px) 6px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.07); color: #fff; font-size: clamp(15px, 1.9vh, 18px); } .pfe-wlang button:hover { background: rgba(255,255,255,.16); } .pfe-wlang button.on { background: #ffd9a8; border-color: #ffd9a8; color: #1c2546; box-shadow: 0 6px 18px rgba(0,0,0,.2); } .pfe-wpanels.n3 .pfe-wvoices, .pfe-wpanels.n3 .pfe-wtheme { display: flex; flex-direction: column; } /* mid-size screens: keep logo, Website Language, search and buttons on one line */ @media (min-width: 1101px) and (max-width: 1420px) { .pfe-brand-lines b { font-size: 19px; } .pfe-brand-lines span { font-size: 10px; letter-spacing: .1em; } .pfe-hsearch { min-width: 150px !important; } .pfe-hlang { margin-left: 4px; margin-right: 2px; } .pfe-langsw button { padding: 0 8px; font-size: 12.5px; } .pfe-header-tools #pfe-acc .lbl { display: none; } .pfe-header-tools .pfe-account-btn { padding-right: 6px; } } @media (min-width: 1101px) and (max-width: 1260px) { .pfe-brand-lines i { display: none; } .pfe-header-tools .pfe-hsocial { display: none !important; } } /* tablets and small laptops: logo and title on the first line; Website Language, search and buttons on the second */ @media (min-width: 881px) and (max-width: 1100px) { .pfe-header-in { flex-wrap: wrap; row-gap: 8px; } .pfe-brand { flex: 1 1 100% !important; min-width: 0; } .pfe-header-tools { flex: 1 1 100% !important; flex-wrap: wrap; justify-content: center; margin-left: 0; row-gap: 8px; } .pfe-hsearch { flex: 1 1 260px !important; max-width: 520px; } .pfe-header-tools #pfe-acc .lbl { display: none; } } /* media in three languages */ .pfe-mlang { display: inline-block; padding: 1px 9px; border-radius: 999px; font: 600 12px/1.6 'Poppins', 'Noto Sans Devanagari', sans-serif; letter-spacing: 0 !important; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); vertical-align: middle; white-space: nowrap; } .pfe-mlang[lang="hi"] { background: color-mix(in srgb, #e07b1a 18%, transparent); border-color: color-mix(in srgb, #e07b1a 45%, transparent); } .pfe-mlang[lang="mr"] { background: color-mix(in srgb, #2f8f5b 18%, transparent); border-color: color-mix(in srgb, #2f8f5b 45%, transparent); } .pfe-lchips { align-items: center; } .pfe-lchips-h { font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 4px; } #pfe-app a.pfe-vchip { text-decoration: none; color: var(--text) !important; } #pfe-app a.pfe-vchip.on { color: var(--primary-ink, #fff) !important; } /* Media language switch (not used in this edition) */ .pfe-mlsw { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-family: var(--font-ui); } .pfe-mlsw-h { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px 0 8px; font-size: 12px; color: var(--muted); white-space: nowrap; } .pfe-mlsw-h svg { fill: currentColor; } .pfe-mlsw-b { appearance: none; border: 0; background: none; color: var(--text); border-radius: 999px; padding: 4px 10px; font: 600 12.5px var(--font-ui), 'Noto Sans Devanagari', sans-serif; cursor: pointer; white-space: nowrap; line-height: 1.3; } .pfe-mlsw-b:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } .pfe-mlsw-b.on { background: var(--primary); color: #fff; } .pfe-mlsw-b:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } @media print { .pfe-mlsw { display: none !important; } } /* Translation notice (not used in this edition) */ .pfe-trnote { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100000; width: max-content; max-width: min(460px, calc(100vw - 24px)); box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; padding: 10px 38px 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 90%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: var(--primary-ink); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.22); font: 13.5px/1.55 var(--font-ui); text-align: left; overflow: hidden; animation: pfe-trnote-in .3s ease-out; } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .pfe-trnote { background: var(--primary); border-color: var(--accent); } } .pfe-trnote.out { opacity: 0; transform: translate(-50%, -12px); transition: opacity .35s, transform .35s; } .pfe-trnote-i { flex: 0 0 auto; font-size: 18px; line-height: 1.25; color: var(--accent); } .pfe-trnote-x b { display: block; font-size: 14px; font-weight: 700; margin-bottom: 1px; } .pfe-trnote-x p { margin: 0; opacity: .92; } .pfe-trnote-x p b { display: inline; font-size: inherit; margin: 0; } #pfe-app .pfe-trnote a, .pfe-trnote a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .pfe-trnote-c { position: absolute; top: 6px; right: 6px; appearance: none; border: 0; background: none; font-size: 20px; line-height: 1; color: inherit; opacity: .75; cursor: pointer; padding: 3px 7px; border-radius: 8px; } .pfe-trnote-c:hover, .pfe-trnote-c:focus-visible { opacity: 1; background: rgba(255,255,255,.14); } .pfe-trnote-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left; animation: pfe-trnote-bar var(--note-ms, 5s) linear forwards; } .pfe-trnote.hold .pfe-trnote-bar { animation-play-state: paused; } @media (max-width: 520px) { .pfe-trnote { font-size: 13px; padding: 9px 34px 11px 12px; } } @keyframes pfe-trnote-in { from { opacity: 0; transform: translate(-50%, -16px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes pfe-trnote-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .pfe-trnote, .pfe-trnote-bar { animation: none; } } @media print { .pfe-trnote { display: none !important; } } /* "No videos or audio in this language yet. Available in: …" */ .pfe-mnone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface); font-family: var(--font-ui); font-size: 13.5px; color: var(--muted); } /* Media lists: the toolbar wraps onto a second line instead of letting the search box cover the language chips */ .pfe-mrow1 { flex-wrap: wrap; } .pfe-mrow1 .pfe-mtools { flex: 1 1 260px; } /* 1.27: tick several media files (admins) and move them at once */ .pfe-msel { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-right: 6px; cursor: pointer; } .pfe-mselbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 9999; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--surface, #fff); color: var(--text, #222); border: 2px solid var(--primary, #1c2546); border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.25); max-width: calc(100vw - 32px); font-size: 14px; } .pfe-mselbar select { max-width: 260px; } .pfe-shrep { margin: 6px 0 14px; } .pfe-hren { cursor: text; border-bottom: 1px dashed currentColor; } .pfe-hren-i { font-style: normal; font-size: .8em; opacity: .6; } .pfe-hren-in { font: inherit; width: min(520px, 100%); padding: 2px 6px; border: 2px solid var(--primary, #1c2546); border-radius: 6px; } /* English edition: no language switches */ .pfe-langsw,.pfe-wlang,.pfe-mlsw,.pfe-lchips{display:none!important} /* ================================================================== 1.28 ================================================================== */ /* Welcome page: an elegant guiding tip that invites the visitor to step in */ .pfe-enter-wrap { position: relative; display: inline-flex; flex-direction: column; align-items: center; } .pfe-coach { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); width: max-content; max-width: min(340px, 86vw); display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 14px; border-radius: 999px; font: 500 13.5px/1.35 var(--font-ui); color: #2a1b0a; text-align: left; background: linear-gradient(#fffaf2, #fff3e2) padding-box, linear-gradient(120deg, #ffd9a8, #f3a95f, #ffe7c4, #e8925a, #ffd9a8) border-box; border: 1.5px solid transparent; background-size: 100% 100%, 300% 100%; box-shadow: 0 10px 30px rgba(20, 10, 0, .35), 0 0 0 6px rgba(255, 217, 168, .12); opacity: 0; pointer-events: none; z-index: 3; animation: pfe-coach-in .7s 2.2s cubic-bezier(.2, .9, .3, 1.2) forwards, pfe-coach-float 3.2s 3s ease-in-out infinite, pfe-coach-shine 6s 2.2s linear infinite; } .pfe-coach::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 13px; height: 13px; transform: translateX(-50%) rotate(45deg); background: #fff3e2; border-right: 1.5px solid #f3a95f; border-bottom: 1.5px solid #f3a95f; border-radius: 0 0 3px 0; } .pfe-coach-spark { color: #e8925a; font-size: 15px; animation: pfe-coach-twinkle 1.8s ease-in-out infinite; } .pfe-coach-t { font-style: italic; letter-spacing: .01em; } .pfe-coach-hand { font-size: 17px; animation: pfe-coach-tap 1.4s 3s ease-in-out infinite; display: inline-block; transform: rotate(-90deg); } .pfe-enter-wrap:hover .pfe-coach { opacity: 0 !important; transition: opacity .25s; animation-play-state: paused; } .pfe-welcome .pfe-btn.pfe-enter-glow { position: relative; isolation: isolate; } .pfe-welcome .pfe-btn.pfe-enter-glow::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; z-index: -1; background: radial-gradient(closest-side, rgba(255, 217, 168, .55), rgba(255, 217, 168, 0)); opacity: 0; animation: pfe-glow-ring 2.6s 2.6s ease-in-out infinite; } @keyframes pfe-coach-in { to { opacity: 1; transform: translate(-50%, 0); } } @keyframes pfe-coach-float { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 5px; } } @keyframes pfe-coach-shine { to { background-position: 0 0, 300% 0; } } @keyframes pfe-coach-twinkle { 0%, 100% { opacity: .55; transform: scale(.9) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } } @keyframes pfe-coach-tap { 0%, 60%, 100% { transform: rotate(-90deg) translateX(0); } 30% { transform: rotate(-90deg) translateX(-4px); } } @keyframes pfe-glow-ring { 0%, 100% { opacity: 0; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .pfe-coach { animation: pfe-coach-in .01s 1s forwards; } .pfe-coach-spark, .pfe-coach-hand, .pfe-welcome .pfe-btn.pfe-enter-glow::before { animation: none; } } @media (max-width: 560px) { .pfe-coach { font-size: 12.5px; padding: 8px 12px; } } /* Pay what you think is right: gateway, currency, amount */ .pfe-pay-step { margin: 10px 0 0; } .pfe-pay-lbl { display: block; font: 700 11px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; } .pfe-pay .pfe-pay-tabs { margin: 0; } .pfe-pay-tabs button b { display: block; font-size: 14px; color: inherit; } .pfe-pay-tabs button small { display: block; font-weight: 500; font-size: 11px; opacity: .8; margin-top: 2px; } .pfe-pay-tabs button[disabled] { opacity: .45; cursor: not-allowed; } .pfe-paycur { width: 100%; padding: 9px 10px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: 500 14px var(--font-ui); } .pfe-amount-cur { font: 600 12px var(--font-ui); font-style: normal; color: var(--muted); padding: 0 12px; } .pfe-paynow { margin-top: 4px; font-size: 16px; letter-spacing: .02em; } /* Buy the book: grouped by format */ .pfe-buyfmt { display: grid; gap: 6px; margin: 4px 0 8px; } .pfe-buyfmt-h { font: 700 11.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-top: 4px; } /* Sign-in buttons for every provider */ .pfe-sbtn { text-decoration: none; } .pfe-sb-facebook { background: #1877f2; border-color: #1877f2; color: #fff !important; } .pfe-sb-facebook svg path { fill: #fff; } .pfe-sb-apple, .pfe-sb-github { background: #111; border-color: #111; color: #fff !important; } .pfe-sb-microsoft { background: #2f2f2f; border-color: #2f2f2f; color: #fff !important; } .pfe-sb-linkedin { background: #0a66c2; border-color: #0a66c2; color: #fff !important; } .pfe-sb-linkedin svg path { fill: #fff; } .pfe-sb-yahoo { background: #6001d2; border-color: #6001d2; color: #fff !important; } .pfe-sb-yahoo svg path { fill: #fff; } .pfe-sb-amazon { background: #232f3e; border-color: #232f3e; color: #fff !important; } .pfe-robot-ok { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--font-ui); color: var(--muted); } .pfe-robot .pfe-ts:empty { display: none; } /* Media: link here, index of numbers, volume list */ .pfe-linkhere { margin: 6px 6px 6px 0; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--primary); } .pfe-mun { color: var(--muted); } .pfe-sgroup-sm { font-size: 1.05em; margin-top: 18px; } .pfe-lp-list { display: grid; gap: 6px; max-height: 60vh; overflow: auto; } .pfe-lp-row { appearance: none; display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .pfe-lp-row:hover { border-color: var(--accent); background: var(--surface2); } .pfe-lp-row .k { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); flex: 0 0 auto; font-size: 12px; } .pfe-lp-row .t { display: grid; min-width: 0; } .pfe-lp-row .t b { font: 600 13.5px var(--font-ui); } .pfe-lp-row .t small { font: 12px var(--font-ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pfe-ix { margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .pfe-ix > summary { cursor: pointer; padding: 10px 14px; font-family: var(--font-ui); background: var(--surface2); } .pfe-ix > summary small { color: var(--muted); margin-left: 6px; } .pfe-ix-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 14px; border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: 13.5px; } .pfe-ix-row[hidden] { display: none; } .pfe-ix-row .n { font-weight: 700; color: var(--accent); } .pfe-ix-row .t { text-decoration: none; } .pfe-ix-row .t small { display: block; color: var(--muted); font-size: 11.5px; } .pfe-ix-row .c b { color: var(--primary); } .pfe-ix-row .c i { color: var(--muted); opacity: .6; font-style: normal; } .pfe-ix-row .pfe-linkhere { margin: 0; padding: 4px 10px; font-size: 12px; } @media (max-width: 640px) { .pfe-ix-row { grid-template-columns: 48px minmax(0, 1fr); } .pfe-ix-row .c, .pfe-ix-row .pfe-linkhere { grid-column: 2; } } .pfe-vm { display: grid; gap: 6px; } .pfe-vm-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-decoration: none; font-family: var(--font-ui); font-size: 14px; } .pfe-vm-row .n { font-weight: 700; color: var(--accent); } .pfe-vm-row .c { color: var(--muted); font-size: 12.5px; } /* Edit the website (owner) */ .pfe-editfab { position: fixed; left: 16px; bottom: 16px; z-index: 90; font-family: var(--font-ui); } .pfe-ef-main { appearance: none; border: 0; border-radius: 999px; padding: 11px 18px; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--accent))); color: var(--primary-ink); font: 600 14px var(--font-ui); cursor: pointer; box-shadow: 0 12px 28px rgba(0, 0, 0, .28); } .pfe-ef-menu { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(340px, 86vw); display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); } .pfe-ef-menu[hidden] { display: none; } .pfe-ef-menu button, .pfe-ef-menu a { appearance: none; border: 0; background: none; text-align: left; padding: 10px 12px; border-radius: 10px; font: 500 13.5px var(--font-ui); color: var(--text) !important; cursor: pointer; text-decoration: none; } .pfe-ef-menu button:hover, .pfe-ef-menu a:hover { background: var(--surface2); } .pfe-ef-menu button[disabled] { opacity: .45; cursor: not-allowed; } .pfe-edbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 95; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: min(980px, calc(100vw - 24px)); padding: 8px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); font-family: var(--font-ui); } .pfe-edbar [data-cmd] { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 5px 9px; font-size: 13px; cursor: pointer; } .pfe-edbar [data-cmd]:hover { background: var(--surface2); } .pfe-edbar .sp { flex: 1; } .pfe-edbar-h { font-size: 12.5px; margin-right: 6px; color: var(--accent); } .pfe-editing .pfe-ed { outline: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 6px; border-radius: 6px; cursor: text; } .pfe-editing .pfe-ed:focus { outline-style: solid; } html.pfe-textmode #pfe-app :is(h1, h2, h3, h4, a, button, label, summary, small, b, strong, span, p, li):not(.pfe-content *):not(.pfe-tmtip *):not(.pfe-editfab *):hover { outline: 2px dashed var(--accent); outline-offset: 2px; cursor: text; } .pfe-tmtip { position: fixed; right: 16px; bottom: 16px; z-index: 95; width: min(360px, calc(100vw - 32px)); display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; background: var(--primary); color: var(--primary-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); font-family: var(--font-ui); font-size: 13px; } .pfe-tmtip .pfe-btn { justify-self: start; background: var(--primary-ink); color: var(--primary) !important; } .pfe-tpop { position: fixed; z-index: 99; width: min(330px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(0, 0, 0, .3); font-family: var(--font-ui); } .pfe-tpop label { display: grid; gap: 4px; } .pfe-tpop small { color: var(--muted); } .pfe-tpop input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--border); font: 14px var(--font-ui); } .pfe-edh { font-family: var(--font-head); color: var(--primary); margin: 0 30px 8px 0; } .pfe-set-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 14px; } .pfe-set-tabs button { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--font-ui); cursor: pointer; } .pfe-set-tabs button.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .pfe-set-form { display: grid; gap: 12px; } .pfe-set-row { display: grid; gap: 5px; font-family: var(--font-ui); font-size: 13.5px; } .pfe-set-row.chk { grid-template-columns: auto 1fr; align-items: start; } .pfe-set-row.chk small { grid-column: 2; } .pfe-set-row > small { color: var(--muted); font-size: 12px; line-height: 1.45; word-break: break-word; white-space: pre-line; } .pfe-set-row input[type="text"], .pfe-set-row input[type="url"], .pfe-set-row input[type="email"], .pfe-set-row input[type="number"], .pfe-set-row input[type="password"], .pfe-set-row input[type="date"], .pfe-set-row select, .pfe-set-row textarea { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font: 14px var(--font-ui); } .pfe-set-row textarea.code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; } .pfe-set-cbs { columns: 2; font-size: 13px; } .pfe-set-cbs label { display: block; } .pfe-set-save { position: sticky; bottom: -24px; background: var(--surface); padding: 10px 0; } .pfe-mn-top { border: 1px solid var(--border); border-radius: 12px; margin: 0 0 8px; background: var(--surface); } .pfe-mn-top > summary { list-style: none; padding: 8px; cursor: pointer; } .pfe-mn-top > summary::-webkit-details-marker { display: none; } .pfe-mn-subs { padding: 0 8px 10px 36px; display: grid; gap: 4px; } .pfe-mn-row { display: flex; gap: 6px; align-items: center; } .pfe-mn-row button { appearance: none; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--text); font-size: 11px; } .pfe-mn-row input[type="text"] { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 8px; border: 1.5px solid var(--border); font: 13.5px var(--font-ui); } .pfe-mn-row.top input[data-label] { font-weight: 700; } .pfe-mn-part { font: 700 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-top: 6px; } /* wide screens: the tip sits beside the button (it never covers the welcome message) */ @media (min-width: 760px) { .pfe-coach { bottom: auto; top: 50%; left: calc(100% + 18px); transform: translate(8px, -50%); max-width: 300px; animation-name: pfe-coach-in-side, pfe-coach-float-side, pfe-coach-shine; } .pfe-coach::after { left: -7px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg); border-right: 0; border-bottom: 1.5px solid #f3a95f; border-left: 1.5px solid #f3a95f; border-radius: 0 0 0 3px; } .pfe-coach-hand { transform: none; animation-name: pfe-coach-tap-side; order: -1; } .pfe-coach-spark { display: none; } } @keyframes pfe-coach-in-side { to { opacity: 1; transform: translate(0, -50%); } } @keyframes pfe-coach-float-side { 0%, 100% { margin-left: 0; } 50% { margin-left: -5px; } } @keyframes pfe-coach-tap-side { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(-4px); } } /* ---------- 1.28.1 ---------- */ /* Video / Audio switch in the Media menu */ .pfe-mtog { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(28,37,70,.08); border: 1px solid var(--border); gap: 2px; vertical-align: middle; } .pfe-mtog-b { appearance: none; border: 0; background: transparent; color: var(--primary); border-radius: 999px; padding: 6px 14px; font: 600 13px var(--font-ui); cursor: pointer; transition: background .2s, color .2s; } .pfe-mtog-b.on { background: var(--primary); color: var(--primary-ink); box-shadow: 0 2px 8px rgba(28,37,70,.25); } .pfe-mtog-b:not(.on):hover { background: rgba(28,37,70,.08); } /* tooltips */ .pfe-tip { position: fixed; z-index: 10000; max-width: 280px; padding: 8px 12px; border-radius: 10px; background: #1c2546; color: #fdf3e7; font: 500 12.5px/1.45 'Poppins', 'Noto Sans Devanagari', system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.22); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; } .pfe-tip.on { opacity: 1; transform: none; } .pfe-tip::before { content: ''; position: absolute; left: var(--ax, 50%); top: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; } .pfe-tip.up::before { top: auto; bottom: -5px; } /* Watch / Listen buttons inside the text */ .pfe-hmedia { margin: 8px 0 16px; font-size: 15px; } .pfe-hmedia .pfe-mbar { margin: 0; } .pfe-shloka .pfe-hmedia, .pfe-story-box .pfe-hmedia { margin: 4px 0 10px; } .pfe-tch-wrap > .pfe-mbar, .pfe-tch + .pfe-mbar { margin: 6px 0 14px; } .pfe-mhd { display: inline-block; font: 600 11.5px var(--font-ui); background: var(--surface2); color: var(--primary); border-radius: 6px; padding: 1px 7px; } /* place picker (Volume → Chapter → Topic) */ .pfe-pp-crumbs { font: 13px var(--font-ui); margin: 4px 0 10px; color: var(--muted); } .pfe-pp-crumbs button { appearance: none; border: 0; background: none; color: var(--primary); font: 600 13px var(--font-ui); cursor: pointer; padding: 2px 4px; text-decoration: underline; } .pfe-pp-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; padding-right: 4px; } .pfe-pp-row { appearance: none; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 10px 12px; cursor: pointer; color: var(--text); transition: border-color .15s, background .15s; } .pfe-pp-row:hover { border-color: var(--accent); background: #fffaf4; } .pfe-pp-row .k { flex: 0 0 auto; min-width: 34px; height: 34px; border-radius: 9px; background: var(--surface2); color: var(--primary); display: grid; place-items: center; font: 700 13px var(--font-ui); padding: 0 6px; } .pfe-pp-row .t { flex: 1; display: flex; flex-direction: column; font: 14px var(--font-ui); } .pfe-pp-row .t small { color: var(--muted); font-size: 12px; } .pfe-pp-row .arr { font-size: 22px; color: var(--accent); } /* "I am not a robot" */ .pfe-human { display: flex; align-items: center; gap: 12px; max-width: 320px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; user-select: none; font: 500 14.5px var(--font-ui); color: #2b2523; transition: border-color .2s, box-shadow .2s; } .pfe-human:hover, .pfe-human:focus-visible { border-color: var(--accent); outline: none; } .pfe-human-box { width: 26px; height: 26px; flex: 0 0 auto; border: 2px solid #b9a596; border-radius: 6px; background: #fff; display: grid; place-items: center; transition: all .2s; } .pfe-human-t { flex: 1; } .pfe-human-b { display: flex; flex-direction: column; align-items: center; font-size: 20px; line-height: 1; color: var(--primary); } .pfe-human-b small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .pfe-human.busy .pfe-human-box { border-color: var(--accent); border-top-color: transparent; border-radius: 50%; animation: pfe-spin .8s linear infinite; } .pfe-human.ok { border-color: #2e8b57; cursor: default; } .pfe-human.ok .pfe-human-box { background: #2e8b57; border-color: #2e8b57; } .pfe-human.ok .pfe-human-box::after { content: '✓'; color: #fff; font: 700 16px var(--font-ui); } .pfe-human.need { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,.15); } .pfe-ts { min-height: 65px; } /* sign-in buttons waiting for keys (owner only) */ .pfe-sbtn.pfe-sb-pending { opacity: .55; border-style: dashed; cursor: help; } .pfe-sbtn.pfe-sb-pending small { font-weight: 400; } /* Edit button in the header for website editors */ .pfe-editbtn { background: #b0702f; border-color: #b0702f; } .pfe-editbtn:hover { background: #c4813c; } .pfe-set-row textarea.code { font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; width: 100%; } .pfe-codestep .pfe-row { margin-top: 10px; } @media (max-width: 640px) { .pfe-editbtn span:last-child { display: none; } .pfe-tip { max-width: 220px; } } /* 1.28.2: every sub-menu centred – the second menu line, its wrapped lines and the drop-down panels */ .pfe-menu2 .pfe-menu-in, #pfe-app[data-nav] .pfe-menu2 .pfe-menu-in { justify-content: center; flex-wrap: wrap !important; row-gap: 4px; } .pfe-menu2 .pfe-menu-in.wrap, .pfe-menu2 .pfe-menu-in { align-content: center; } .pfe-menu2 .pfe-m2part:first-child { margin-left: 4px; } @media (min-width: 881px) { .pfe-menu > li > .pfe-drop, .pfe-menu > li.right-drop > .pfe-drop { left: 50%; right: auto; translate: -50% 0; } .pfe-menu > li:first-child > .pfe-drop:not(.mega) { left: 0; translate: none; } /* wide panels: centred under the whole menu bar so they never run off the screen */ .pfe-menu { position: relative; } .pfe-menu > li:has(> .pfe-drop.mega) { position: static; } .pfe-menu > li > .pfe-drop.mega { left: 50%; right: auto; translate: -50% 0; } } .pfe-drop, .pfe-drop a, .pfe-drop h6 { text-align: center; } .pfe-drop.mega { justify-items: stretch; } /* 1.28.3: owner email – turn on editing with an emailed code */ .pfe-ownercard { display: flex; gap: 16px; align-items: flex-start; margin: 18px 0; padding: 18px 20px; border-radius: var(--radius); border: 2px solid var(--accent); background: linear-gradient(135deg, #fff7ec, #fdeedd); color: #2b2523; } .pfe-ownercard .ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 22px; } .pfe-ownercard .tx { flex: 1; min-width: 0; } .pfe-ownercard p { margin: 4px 0 12px; font-size: 14.5px; } /* ---------- 1.29 ---------- */ /* sub-menus in bold */ .pfe-m2, .pfe-drop a { font-weight: 600; } .pfe-m2.on { font-weight: 700; } /* one main recording per place, other recordings as labelled chips */ .pfe-mlen { display: inline-block; margin-left: 6px; font: 600 11.5px var(--font-ui); color: var(--muted); background: var(--surface2); border-radius: 999px; padding: 1px 8px; } .pfe-mmore { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 8px 10px; border-top: 1px dashed var(--border); } .pfe-mmore-h { font: 600 12px var(--font-ui); color: var(--muted); margin-right: 2px; cursor: help; } .pfe-mchipw { display: inline-flex; align-items: center; gap: 2px; } .pfe-mchip { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 11px; font: 500 12.5px var(--font-ui); cursor: pointer; } .pfe-mchip:hover { border-color: var(--accent); color: var(--primary); } .pfe-mchip.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .pfe-mmored { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pfe-mmored > summary { list-style: none; cursor: pointer; } .pfe-mmored > summary::-webkit-details-marker { display: none; } .pfe-mmored[open] > summary { background: var(--surface2); } .pfe-mgear { appearance: none; border: 1px solid transparent; background: transparent; color: var(--muted); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; } .pfe-mgear:hover { background: var(--surface2); color: var(--primary); border-color: var(--border); } .pfe-msel { display: inline-flex; align-items: center; padding: 0 2px; } .pfe-mbar-empty { margin: 4px 0 10px; } /* manage panel */ .pfe-mancard { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; background: var(--surface); } .pfe-mancard-h { font: 600 15px var(--font-ui); color: var(--primary); margin-bottom: 6px; } .pfe-mantab { width: 100%; border-collapse: collapse; font: 13px var(--font-ui); margin-bottom: 8px; } .pfe-mantab th { text-align: left; width: 110px; color: var(--muted); font-weight: 600; padding: 3px 8px 3px 0; vertical-align: top; } .pfe-mantab td { padding: 3px 0; word-break: break-word; } .pfe-mantab code { font-size: 12px; background: var(--surface2); padding: 1px 5px; border-radius: 4px; } .pfe-manact { display: flex; flex-wrap: wrap; gap: 6px; } .pfe-manact a.pfe-tool { text-decoration: none; } .pfe-tool.pfe-danger { color: #b03a2e; border-color: #e8c2bd; } .pfe-repbox { margin-top: 8px; } /* How to use: Video guide */ .pfe-guidebtn { border-color: var(--accent); color: var(--accent); font-weight: 600; } .pfe-guidebtn.on { background: var(--accent); color: #fff; } .pfe-guidebar { margin: -6px 0 18px; } /* ---------- 1.30 ---------- */ /* Video Book / Audio Book: one row per recording, female first, then male */ .pfe-mgroup .vt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pfe-gname { font: 700 14px var(--font-ui); color: var(--primary); } .pfe-gname.v-female::before, .pfe-gname.v-male::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; } .pfe-gname.v-female::before { background: #c2185b; } .pfe-gname.v-male::before { background: #1e63b4; } .pfe-mgroup .act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; } .pfe-gpart { display: inline-flex; align-items: center; } .pfe-gpart .pfe-tool small { opacity: .75; } /* coloured frames that follow the theme: 30-day challenge weeks, cards and tiles of every list */ #pfe-app { --c1: var(--accent); --c2: var(--primary); --c3: color-mix(in srgb, var(--accent) 55%, #2e7d5b); --c4: color-mix(in srgb, var(--primary) 55%, #c2185b); --c5: color-mix(in srgb, var(--accent) 50%, var(--primary)); } .pfe-week { --wc: var(--c1); margin: 22px 0; border: 1.5px solid color-mix(in srgb, var(--wc) 35%, var(--border)); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 9%, var(--surface)), var(--surface) 70%); overflow: hidden; box-shadow: var(--shadow); } .pfe-wk2 { --wc: var(--c2); } .pfe-wk3 { --wc: var(--c3); } .pfe-wk4 { --wc: var(--c4); } .pfe-wk5 { --wc: var(--c5); } .pfe-week-h { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--wc); color: #fff; } .pfe-week-h h3 { margin: 0; flex: 1; font-family: var(--font-head); font-size: 19px; color: #fff; } .pfe-week-n { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font: 700 15px var(--font-ui); } .pfe-week-c { font: 600 12.5px var(--font-ui); background: rgba(255,255,255,.2); border-radius: 999px; padding: 3px 10px; } .pfe-week .pfe-days { padding: 16px; } .pfe-week .pfe-day { border-top: 5px solid var(--wc); box-shadow: 0 2px 10px rgba(0,0,0,.05); } .pfe-week .pfe-day b { color: var(--wc); } .pfe-week .pfe-day:hover { border-color: var(--wc); } .pfe-week .pfe-day.done { background: var(--wc); border-color: var(--wc); color: #fff; } .pfe-week .pfe-day.done b { color: #fff; } /* cards and tiles in every list (stories, shloks, topics, volumes, guides …) get a coloured top line, cycling through the theme colours */ .pfe-grid > .pfe-tile, .pfe-grid > .pfe-card, .pfe-topicgrid > .pfe-topiccard, .pfe-grid > .pfe-sh-card { border-top: 4px solid var(--c1); } .pfe-grid > :nth-child(5n+2), .pfe-topicgrid > :nth-child(5n+2) { border-top-color: var(--c2); } .pfe-grid > :nth-child(5n+3), .pfe-topicgrid > :nth-child(5n+3) { border-top-color: var(--c3); } .pfe-grid > :nth-child(5n+4), .pfe-topicgrid > :nth-child(5n+4) { border-top-color: var(--c4); } .pfe-grid > :nth-child(5n+5), .pfe-topicgrid > :nth-child(5n+5) { border-top-color: var(--c5); } .pfe-grid > .pfe-tile, .pfe-grid > .pfe-card { transition: transform .18s, box-shadow .18s; } .pfe-grid > .pfe-tile:hover, .pfe-grid > .pfe-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.10); } .pfe-fullstory, .pfe-fullshloka { border-left: 5px solid var(--c1); } .pfe-fullstory:nth-of-type(5n+2), .pfe-fullshloka:nth-of-type(5n+2) { border-left-color: var(--c2); } .pfe-fullstory:nth-of-type(5n+3), .pfe-fullshloka:nth-of-type(5n+3) { border-left-color: var(--c3); } .pfe-fullstory:nth-of-type(5n+4), .pfe-fullshloka:nth-of-type(5n+4) { border-left-color: var(--c4); } .pfe-fullstory:nth-of-type(5n+5), .pfe-fullshloka:nth-of-type(5n+5) { border-left-color: var(--c5); } .pfe-myth-row { border-left: 5px solid var(--c3); } /* ================================================================== 1.31: reviews, certificates, reading comfort, app */ .pfe-thoughts { text-decoration: none; color: inherit !important; font-size: 13.5px; } .pfe-thoughts { white-space: nowrap; } .pfe-thoughts .st { color: #f0b429; font-size: 17px; line-height: 1; } .pfe-stars { display: inline-flex; gap: 2px; } .pfe-stars button { appearance: none; border: 0; background: none; padding: 2px 3px; font-size: 30px; line-height: 1; cursor: pointer; color: color-mix(in srgb, var(--muted) 45%, transparent); transition: transform .15s, color .15s; } .pfe-stars button:hover, .pfe-stars button:focus-visible { transform: scale(1.18); } .pfe-stars:hover button { color: #f0b429; } .pfe-stars button:hover ~ button { color: color-mix(in srgb, var(--muted) 45%, transparent); } .pfe-stars button.on { color: #f0b429; } .pfe-stars.big button { font-size: 44px; padding: 2px 5px; } .pfe-rate { margin: 28px 0 6px; padding: 16px 18px; border-radius: var(--radius); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; } .pfe-rate-q { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; } .pfe-rate-q b { font-family: var(--font-head); color: var(--primary); font-size: 17px; } .pfe-rate.done { border-style: solid; } .pfe-rate.sm { margin: 0 0 4px; padding: 10px 14px; } .pfe-rate.sm .pfe-stars button { font-size: 24px; } .pfe-rate-more { flex: 1 1 100%; } .pfe-rate-more:empty { display: none; } .pfe-rate-form textarea { width: 100%; min-height: 64px; margin: 4px 0 8px; } .pfe-rate-row { display: flex; gap: 8px; flex-wrap: wrap; } .pfe-rate-row input { flex: 1 1 150px; min-width: 0; } .pfe-rate-thanks { margin: 4px 0 0; font-weight: 600; } .pfe-rsum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 30px; align-items: center; padding: 18px 22px; margin: 6px 0 18px; border-radius: var(--radius); background: var(--surface2); max-width: 640px; } .pfe-rsum-big { text-align: center; } .pfe-rsum-big b { display: block; font: 700 46px/1 var(--font-head); color: var(--primary); } .pfe-rsum-st { position: relative; display: inline-block; font-size: 22px; letter-spacing: 2px; color: color-mix(in srgb, var(--muted) 35%, transparent); } .pfe-rsum-st::before { content: '★★★★★'; position: absolute; inset: 0; width: var(--p); overflow: hidden; color: #f0b429; white-space: nowrap; } .pfe-rsum-big small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; } .pfe-rsum-bars div { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); } .pfe-rsum-bars i { height: 8px; border-radius: 9px; background: color-mix(in srgb, var(--border) 70%, transparent); overflow: hidden; } .pfe-rsum-bars em { display: block; height: 100%; background: #f0b429; border-radius: 9px; } .pfe-rvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 14px; } .pfe-rv { position: relative; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--c, var(--accent)); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); transition: opacity .3s; } .pfe-rv:nth-child(5n+1) { --c: var(--c1, var(--accent)); } .pfe-rv:nth-child(5n+2) { --c: var(--c2, var(--primary)); } .pfe-rv:nth-child(5n+3) { --c: var(--c3, var(--accent)); } .pfe-rv:nth-child(5n+4) { --c: var(--c4, var(--primary)); } .pfe-rv:nth-child(5n+5) { --c: var(--c5, var(--accent)); } .pfe-rv header { display: flex; gap: 10px; align-items: center; } .pfe-rv header > div { flex: 1; min-width: 0; } .pfe-rv header b { display: block; } .pfe-rv header small { color: var(--muted); font-size: 12.5px; } .pfe-rv .pfe-av { width: 38px; height: 38px; flex: 0 0 38px; } .pfe-rv-st { color: #f0b429; letter-spacing: 1px; white-space: nowrap; } .pfe-rv-x { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--muted); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 13px; } .pfe-rv-x:hover { color: #b32d2e; border-color: #b32d2e; } .pfe-rv-about { font-size: 12.5px; color: var(--primary); margin-top: 8px; font-weight: 600; } .pfe-rv p { margin: 8px 0 0; line-height: 1.6; } .pfe-invite { margin: 4px 0 16px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; background: var(--surface2); } .pfe-invite summary { cursor: pointer; font-weight: 600; } .pfe-invite-in { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; } .pfe-invite-in > div { flex: 1 1 260px; } .pfe-invite-in input { width: 100%; } .pfe-invite canvas { width: 160px; height: 160px; border-radius: 8px; background: #fff; } .pfe-fb-form { max-width: 640px; } .pfe-fb-stars { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface2); margin-bottom: 14px; } .pfe-fb-stars .lbl { font-weight: 600; } .pfe-fb-word { min-height: 1.4em; color: var(--primary); font-weight: 600; } .pfe-fb-kind { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; font-size: 14.5px; } .pfe-fb-kind label { display: inline-flex; gap: 6px; align-items: center; } .pfe-fb-mail { margin: 0 0 12px; } .pfe-fb-mail summary { cursor: pointer; color: var(--primary); font-size: 14px; } .pfe-legal h3 { font-family: var(--font-head); color: var(--primary); } .pfe-legal li { margin: 0 0 8px; } .pfe-certs { display: grid; gap: 10px; } .pfe-cert-tile, .pfe-cert-cta { display: flex; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } .pfe-cert-tile .ic, .pfe-cert-cta > span { font-size: 30px; } .pfe-cert-tile > div, .pfe-cert-cta > div { flex: 1; display: flex; flex-direction: column; } .pfe-cert-tile small, .pfe-cert-cta small { color: var(--muted); } .pfe-cert-tile:not(.ok) { opacity: .7; } .pfe-cert-tile.ok, .pfe-cert-cta { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .pfe-cert-cta { margin: 10px 0 16px; } .pfe-daily-sub { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface2); display: flex; flex-direction: column; gap: 6px; } .pfe-daily-sub form { display: flex; flex-direction: column; gap: 4px; } .pfe-daily-wa { font-size: 13.5px; font-weight: 600; } .pfe-speed .pfe-sleep, .pfe-speed .pfe-restart { margin-left: 8px; width: auto !important; padding: 0 10px !important; white-space: nowrap; } .pfe-speed .pfe-sleep.on { background: var(--primary) !important; color: var(--primary-ink) !important; } .pfe-tool.pfe-comfort { font-family: Georgia, serif; font-weight: 700; } .pfe-cf-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .pfe-cf-row button { appearance: none; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px; padding: 9px 14px; cursor: pointer; font: 600 14px var(--font-ui); } .pfe-cf-row button.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); } .pfe-modal h4 { margin: 10px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } #pfe-app[data-rfont="easy"] :is(.pfe-content, .pfe-lead, .pfe-fullstory, .pfe-shloka .en) { font-family: 'Lexend', 'Atkinson Hyperlegible', Verdana, sans-serif; letter-spacing: .01em; word-spacing: .06em; } #pfe-app[data-rfont="large"] :is(.pfe-content, .pfe-lead, .pfe-fullstory) { font-family: Verdana, Tahoma, sans-serif; letter-spacing: .02em; word-spacing: .1em; } #pfe-app[data-rfont="large"] .pfe-content { font-size: calc(var(--reader-size) * 1.08); } #pfe-app[data-rlh="2"] .pfe-content { line-height: 2.05; } #pfe-app[data-rlh="3"] .pfe-content { line-height: 2.4; } #pfe-app[data-rlh="2"] .pfe-content p, #pfe-app[data-rlh="3"] .pfe-content p { margin-bottom: 1.3em; } #pfe-app[data-contrast="night"] img:not(.pfe-hero-cover) { filter: brightness(.86) sepia(.12); } .pfe-install { font-weight: 600; } @media (max-width: 760px) { .pfe-rsum { grid-template-columns: 1fr; } .pfe-stars.big button { font-size: 38px; } .pfe-rate { padding: 14px; } } @media print { .pfe-rate, .pfe-thoughts { display: none !important; } } .pfe-speed { flex-wrap: wrap; } .pfe-rv .pfe-av { display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font: 700 16px var(--font-ui); } .pfe-rvs.home { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); } #pfe-cert-name { max-width: 360px; } /* ======================================================================= 1.32 */ /* ---- MENUS: one main line of pills; the sub-menu on one line with ‹ › buttons, a scroll bar and the ← → keys. The same look on every theme (the theme only gives the colours). */ #pfe-app[data-menu] .pfe-menubar { background: var(--nav); } #pfe-app[data-menu] .pfe-menu1 { background: var(--nav); border-top: 2px solid color-mix(in srgb, var(--primary) 70%, var(--accent)); position: relative; } #pfe-app[data-menu] .pfe-menu1 .pfe-menu-in { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: flex-start !important; align-items: center; gap: 4px; padding: 7px clamp(8px, 1.6vw, 26px) !important; -webkit-mask-image: none; mask-image: none; } #pfe-app[data-menu] .pfe-menu1 .pfe-menu-in::-webkit-scrollbar { display: none; } #pfe-app[data-menu] .pfe-m1 { flex: 0 0 auto; height: 38px; padding: 0 16px; border-radius: 999px; font: 600 15px/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--nav-ink) !important; background: transparent; box-shadow: none; white-space: nowrap; transition: background .18s, color .18s; } #pfe-app[data-menu] .pfe-m1::after { display: none !important; } #pfe-app[data-menu] .pfe-m1:hover { background: color-mix(in srgb, var(--nav-ink) 9%, transparent); } #pfe-app[data-menu] .pfe-m1.peek { background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--nav-ink) !important; } #pfe-app[data-menu] .pfe-m1.on { background: var(--primary); color: var(--primary-ink) !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent); } #pfe-app[data-menu] .pfe-m1:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #pfe-main-menu.tight .pfe-m1 { padding: 0 12px !important; } #pfe-main-menu.tighter .pfe-m1 { padding: 0 9px !important; font-size: 14px !important; } #pfe-main-menu.tightest .pfe-m1 { padding: 0 7px !important; font-size: 13px !important; } /* sub-menu */ #pfe-app[data-menu] .pfe-menu2 { position: relative; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.04); } #pfe-app[data-menu] .pfe-menu2 #pfe-sub { display: flex; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center; gap: 4px; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth; min-height: 0; padding: 8px clamp(8px, 1.6vw, 26px) 6px !important; -webkit-mask-image: none !important; mask-image: none !important; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 40%, var(--surface2)) transparent; outline: none; } #pfe-app[data-menu] .pfe-menu2 #pfe-sub::-webkit-scrollbar { display: block; height: 8px; } #pfe-app[data-menu] .pfe-menu2 #pfe-sub::-webkit-scrollbar-track { background: color-mix(in srgb, var(--surface2) 70%, transparent); border-radius: 8px; margin: 0 clamp(8px, 1.6vw, 26px); } #pfe-app[data-menu] .pfe-menu2 #pfe-sub::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 40%, var(--surface2)); border-radius: 8px; } #pfe-app[data-menu] .pfe-menu2 #pfe-sub::-webkit-scrollbar-thumb:hover { background: var(--primary); } #pfe-app[data-menu] .pfe-menu2.over #pfe-sub { padding-left: 46px !important; padding-right: 46px !important; } #pfe-app[data-menu] .pfe-m2 { flex: 0 0 auto; padding: 8px 17px; border-radius: 999px; font: 400 15px/1.25 var(--font-ui); color: var(--text) !important; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; } #pfe-app[data-menu] .pfe-m2:hover { background: var(--surface2); color: var(--primary) !important; } #pfe-app[data-menu] .pfe-m2.on { background: var(--primary); color: var(--primary-ink) !important; font-weight: 600; } #pfe-app[data-menu] .pfe-m2.num { min-width: 34px; padding: 7px 0; text-align: center; font-weight: 500; font-size: 14px; } #pfe-app[data-menu] .pfe-m2tag { flex: 0 0 auto; margin: 0 2px 0 10px; padding: 3px 8px; border-radius: 6px; background: var(--surface2); font: 700 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); cursor: help; } #pfe-app[data-menu] .pfe-m2tag:first-child { margin-left: 0; } #pfe-app[data-menu] .pfe-m2sep { flex: 0 0 auto; width: 1px; height: 22px; margin: 0 8px; background: var(--border); } #pfe-app[data-menu] .pfe-m2part { display: none; } #pfe-app[data-menu] .pfe-m2:focus-visible, #pfe-app[data-menu] #pfe-sub:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .pfe-sarr { display: none; position: absolute; top: 7px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--primary); font: 700 22px/1 var(--font-ui); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 0 0 3px; transition: opacity .2s, background .15s; } .pfe-sarr.l { left: 6px; } .pfe-sarr.r { right: 6px; } .pfe-sarr:hover:not(:disabled) { background: var(--primary); color: var(--primary-ink); } .pfe-sarr:disabled { opacity: .3; cursor: default; box-shadow: none; } .pfe-menu2.over .pfe-sarr { display: grid; place-items: center; } @media (max-width: 880px) { #pfe-app[data-menu] .pfe-m1 { height: 36px; font-size: 14px; padding: 0 12px; } #pfe-app[data-menu] .pfe-m2 { font-size: 14px; padding: 7px 13px; } .pfe-sarr { width: 30px; height: 30px; font-size: 19px; top: 8px; } #pfe-app[data-menu] .pfe-menu2.over #pfe-sub { padding-left: 40px !important; padding-right: 40px !important; } } /* ---- 1.32: stars and "Share your thoughts" in the reading tools (left of A− A+ Listen) */ .pfe-reader-tools { flex-wrap: wrap !important; row-gap: 6px; } .pfe-trate { display: inline-flex; align-items: center; padding: 1px 6px 1px 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .pfe-trate .pfe-stars button { font-size: 21px; padding: 1px 2px; } .pfe-trate.done { border-color: color-mix(in srgb, #f0b429 60%, var(--border)); background: color-mix(in srgb, #f0b429 8%, var(--surface)); } .pfe-reader-tools .pfe-thoughtsbtn { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--primary); font-weight: 600; } .pfe-reader-tools .pfe-thoughtsbtn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .pfe-tsep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; flex: 0 0 auto; } .pfe-thoughts-panel { position: relative; margin: -12px 0 20px; padding: 14px 16px 12px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); box-shadow: 0 8px 24px rgba(0,0,0,.06); animation: pfe-subin .2s ease-out; font-family: var(--font-ui); } .pfe-tp-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; } .pfe-tp-h { display: flex; flex-direction: column; gap: 2px; margin: 0 26px 8px 0; } .pfe-tp-h b { color: var(--primary); font-size: 15.5px; } .pfe-tp-stars { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .pfe-tp-stars .pfe-stars button { font-size: 26px; } .pfe-thoughts-panel textarea { width: 100%; } @media (max-width: 640px) { .pfe-reader-tools .pfe-thoughtsbtn span { display: none; } } /* ---- 1.32: guide pages point to Video Book / Audio Book → Guides */ .pfe-guidemedia { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; } .pfe-guidemedia a { font: 600 13px var(--font-ui); padding: 5px 12px; border-radius: 999px; background: var(--surface2); color: var(--primary); text-decoration: none; } .pfe-guidemedia a:hover { background: var(--primary); color: var(--primary-ink); } /* ---- 1.32: Stories, Shloks and Tests by topic */ @keyframes pfe-tin { from { opacity: 0; transform: translateY(10px) scale(.98); } } .pfe-tchips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; margin: 6px 0 18px; scrollbar-width: thin; } .pfe-tchip { --tc: var(--primary); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--tc) 35%, var(--border)); background: var(--surface); color: var(--text) !important; text-decoration: none; font: 600 13.5px var(--font-ui); white-space: nowrap; transition: all .18s; } .pfe-tchip em { font-style: normal; font-size: 11.5px; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); } .pfe-tchip:hover { border-color: var(--tc); transform: translateY(-1px); } .pfe-tchip.on { background: var(--tc); border-color: var(--tc); color: #fff !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--tc) 35%, transparent); } .pfe-tchip.on em { background: rgba(255,255,255,.25); color: #fff; } .pfe-ttiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 8px 0 26px; } .pfe-ttile { --tc: var(--primary); position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 230px; padding: 18px 18px 16px; border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff !important; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tc) 55%, #fff) 0%, transparent 55%), linear-gradient(150deg, var(--tc), color-mix(in srgb, var(--tc) 62%, #120d08)); box-shadow: 0 10px 26px color-mix(in srgb, var(--tc) 28%, transparent); transition: transform .22s, box-shadow .22s; animation: pfe-tin .45s both; animation-delay: var(--d, 0ms); } .pfe-ttile::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; border: 22px solid rgba(255,255,255,.08); } .pfe-ttile:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 18px 38px color-mix(in srgb, var(--tc) 40%, transparent); } .pfe-ttile.on { outline: 3px solid var(--accent); outline-offset: 3px; } .pfe-ttile-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); } .pfe-ttile-n { position: absolute; top: 16px; right: 16px; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font: 700 16px var(--font-ui); background: rgba(255,255,255,.92); color: var(--tc); } .pfe-ttile b { font: 600 21px/1.2 var(--font-head); margin-top: 4px; } .pfe-ttile small { font: 13px/1.45 var(--font-ui); opacity: .92; } .pfe-ttile-prev { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; } .pfe-ttile-prev i { font: italic 12.5px var(--font-ui); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; position: relative; } .pfe-ttile-prev i::before { content: "•"; position: absolute; left: 0; font-style: normal; } .pfe-ttile-go { margin-top: auto; padding-top: 8px; font: 700 13px var(--font-ui); letter-spacing: .02em; } .pfe-thead { --tc: var(--primary); position: relative; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 22px 24px; margin: 0 0 16px; border-radius: 22px; color: #fff; overflow: hidden; background: linear-gradient(110deg, color-mix(in srgb, var(--tc) 92%, #000) 0%, color-mix(in srgb, var(--tc) 70%, transparent) 70%, transparent), var(--timg) center/cover; box-shadow: 0 12px 30px color-mix(in srgb, var(--tc) 30%, transparent); } .pfe-thead-ic { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; font-size: 40px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); flex: 0 0 auto; } .pfe-thead > div:nth-child(2) { flex: 1 1 320px; min-width: 0; } .pfe-thead small { font: 700 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; opacity: .85; } .pfe-thead h2 { margin: 2px 0 4px; font: 600 30px/1.15 var(--font-head); color: #fff; } .pfe-thead p { margin: 0 0 6px; opacity: .95; } .pfe-thead-meta { font: 13px var(--font-ui); opacity: .9; } .pfe-thead-act { display: flex; flex-direction: column; gap: 6px; } .pfe-thead-act .pfe-btn { background: rgba(255,255,255,.95); color: var(--tc) !important; border-color: transparent; } .pfe-tfind { margin: 0 0 14px; } .pfe-tfind input { width: 100%; max-width: 420px; } .pfe-tstories { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 28px; } .pfe-tstory { --tc: var(--primary); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 12px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text) !important; box-shadow: 0 4px 14px rgba(0,0,0,.04); transition: transform .18s, box-shadow .18s, border-color .18s; animation: pfe-tin .4s both; animation-delay: var(--d, 0ms); overflow: hidden; } .pfe-tstory::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--tc), color-mix(in srgb, var(--tc) 40%, var(--accent))); } .pfe-tstory:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 50%, var(--border)); box-shadow: 0 12px 26px rgba(0,0,0,.09); } .pfe-tstory-no { font: 700 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--tc); } .pfe-tstory b { font: 600 18px/1.3 var(--font-head); color: var(--primary); } .pfe-tstory p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pfe-tstory-ft { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 12px var(--font-ui); color: var(--muted); border-top: 1px dashed var(--border); } .pfe-tshloks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 28px; } .pfe-tshlok { --tc: var(--primary); position: relative; padding: 18px 18px 12px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--tc) 25%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 8%, var(--surface)), var(--surface) 55%); box-shadow: 0 6px 18px rgba(0,0,0,.05); animation: pfe-tin .4s both; animation-delay: var(--d, 0ms); overflow: hidden; } .pfe-tshlok::after { content: "\0950"; position: absolute; right: 12px; top: -4px; font-size: 64px; opacity: .07; color: var(--tc); font-family: var(--font-sa); pointer-events: none; } .pfe-tshlok.open { grid-column: 1 / -1; } .pfe-tshlok-ref { font: 700 11px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tc); } .pfe-tshlok-sa { margin: 8px 0; font-family: var(--font-sa), 'Noto Serif Devanagari', serif; font-size: 18px; line-height: 1.7; color: var(--primary); } .pfe-tshlok-tr { margin: 0 0 6px; font-style: italic; font-size: 14.5px; } .pfe-tshlok-me { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); } .pfe-tshlok-ft { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border); } .pfe-tshlok-ft a.pfe-tool { text-decoration: none; } .pfe-tshlok-full .pfe-fullshloka { margin: 12px 0 4px; } /* tests by topic */ .pfe-ttest-cta { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: var(--text) !important; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface)); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); transition: transform .18s, box-shadow .18s; } .pfe-ttest-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); } .pfe-ttest-cta .ic { font-size: 34px; } .pfe-ttest-cta b { display: block; font: 600 20px var(--font-head); color: var(--primary); } .pfe-ttest-cta small { color: var(--muted); font-size: 14px; } .pfe-ttest-cta .go { margin-left: auto; font: 700 14px var(--font-ui); color: var(--accent); white-space: nowrap; } .pfe-ttest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 120px; } .pfe-ttest { --tc: var(--primary); position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--tc) 22%, var(--border)); background: var(--surface); cursor: pointer; transition: all .18s; animation: pfe-tin .4s both; animation-delay: var(--d, 0ms); user-select: none; } .pfe-ttest input { position: absolute; opacity: 0; pointer-events: none; } .pfe-ttest:hover { border-color: var(--tc); transform: translateY(-2px); } .pfe-ttest:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .pfe-ttest-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: color-mix(in srgb, var(--tc) 14%, transparent); } .pfe-ttest-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pfe-ttest-tx b { font: 600 15.5px var(--font-ui); color: var(--text); } .pfe-ttest-tx small { font: 12px var(--font-ui); color: var(--muted); } .pfe-ttest-tick { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--tc) 40%, var(--border)); display: grid; place-items: center; font: 700 14px var(--font-ui); color: transparent; transition: all .18s; } .pfe-ttest.on { border-color: var(--tc); background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 14%, var(--surface)), var(--surface)); box-shadow: 0 8px 20px color-mix(in srgb, var(--tc) 20%, transparent); } .pfe-ttest.on .pfe-ttest-tick { background: var(--tc); border-color: var(--tc); color: #fff; transform: scale(1.1); } .pfe-ttest-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--border); box-shadow: 0 14px 34px rgba(0,0,0,.14); font-family: var(--font-ui); } .pfe-ttest-bar.ready { border-color: var(--accent); } .pfe-ttest-sum b { font-size: 20px; color: var(--primary); } .pfe-ttest-ctl { display: flex; align-items: center; gap: 6px; } .pfe-ttest-ctl .pfe-chipbtn { appearance: none; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font: 600 13px var(--font-ui); cursor: pointer; } .pfe-ttest-ctl .pfe-chipbtn.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } .pfe-ttest-go { display: flex; gap: 8px; flex-wrap: wrap; } .pfe-ttest-go .pfe-btn[disabled] { opacity: .45; cursor: not-allowed; } @media (max-width: 640px) { .pfe-thead { padding: 16px; } .pfe-thead h2 { font-size: 24px; } .pfe-thead-act { flex-direction: row; flex-wrap: wrap; } .pfe-ttiles { grid-template-columns: 1fr 1fr; gap: 10px; } .pfe-ttile { min-height: 190px; padding: 14px; } .pfe-ttile b { font-size: 17px; } .pfe-ttile small, .pfe-ttile-prev { display: none; } } @media (prefers-reduced-motion: reduce) { .pfe-ttile, .pfe-tstory, .pfe-tshlok, .pfe-ttest { animation: none; } } .pfe-tfind input { padding: 10px 14px 10px 38px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 14px 50% no-repeat; font: 14px var(--font-ui); color: var(--text); } .pfe-tfind input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } /* ---- 1.32: Install the app – a clear button at the far right of the header (just above the main menu) */ .pfe-install-top { display: inline-flex; flex: 0 0 auto; } .pfe-install-top:empty { display: none; } .pfe-installbtn { appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px 0 6px; border-radius: 999px; border: 1.5px solid rgba(0,0,0,.08); background: #ffffff; color: #1f2430; font: 700 13.5px var(--font-ui); cursor: pointer; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s; } .pfe-installbtn svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); box-sizing: border-box; } .pfe-installbtn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.24); } .pfe-installbtn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } @media (max-width: 1100px) { .pfe-installbtn { padding: 0 6px; } .pfe-installbtn span { display: none; } } /* footer "Install the app": readable on every theme (it used the theme colour, which on some themes equals the footer colour) */ .pfe-footer .pfe-install, .pfe-footer .pfe-linkbtn { color: inherit !important; opacity: 1; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; border: 1px solid currentColor; background: rgba(255,255,255,.12); font: 600 12.5px var(--font-ui); } .pfe-footer .pfe-install:hover { background: rgba(255,255,255,.24); } .pfe-footer .pfe-install .ic { font-size: 13px; } /* install steps */ .pfe-inst-h { margin-top: 0; } .pfe-inst-dev { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface2); margin-bottom: 10px; } .pfe-inst-ic { font-size: 30px; } .pfe-inst-dev small { display: block; font: 700 10.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pfe-inst-dev b { font: 600 15px var(--font-ui); } .pfe-inst h3 { font-family: var(--font-head); color: var(--primary); margin: 12px 0 8px; } .pfe-inst-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pfe-inst-steps li { display: flex; gap: 12px; align-items: flex-start; font: 15px/1.5 var(--font-ui); } .pfe-inst-steps .n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: 14px; } .pfe-ik { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface2); font-weight: 700; white-space: nowrap; } .pfe-inst-copy { display: flex; gap: 8px; margin: 6px 0 10px; } .pfe-inst-copy input { flex: 1; min-width: 0; } .pfe-inst-why { color: #1d7a43 !important; } .pfe-inst-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 18px; padding: 16px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border: 1px solid var(--border); } .pfe-btn.big { font-size: 17px; padding: 14px 22px; } .pfe-inst-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .pfe-inst-tabs .pfe-chipbtn { appearance: none; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; font: 600 13.5px var(--font-ui); cursor: pointer; } .pfe-inst-tabs .pfe-chipbtn.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); } #pfe-inst-box { max-width: 640px; } #pfe-main-menu.tiny .pfe-m1 { padding: 0 6px !important; font-size: 12.5px !important; } #pfe-app[data-menu] .pfe-menu1.over .pfe-menu-in { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent) !important; mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent) !important; } /* the "back to top" button no longer covers the last footer link */ .pfe-footer .pfe-footer-bottom { padding-right: 84px; } /* ======================================================================= 1.33 */ /* ---- MENUS: the sub-menu is always a little smaller than the menu; both shrink together on smaller screens */ #pfe-app[data-menu] .pfe-m1 { height: 40px; padding: 0 18px; font-size: 16px; } #pfe-app[data-menu] .pfe-m2 { font-size: 15px; padding: 7px 16px; } #pfe-app[data-mfit="1"] .pfe-m1 { padding: 0 13px !important; font-size: 15.5px !important; } #pfe-app[data-mfit="1"] .pfe-m2 { font-size: 14.5px; padding: 7px 14px; } #pfe-app[data-mfit="2"] .pfe-m1 { padding: 0 10px !important; font-size: 15px !important; } #pfe-app[data-mfit="2"] .pfe-m2 { font-size: 14px; padding: 6px 13px; } #pfe-app[data-mfit="3"] .pfe-m1 { padding: 0 8px !important; font-size: 14.5px !important; height: 38px; } #pfe-app[data-mfit="3"] .pfe-m2 { font-size: 13.5px; padding: 6px 12px; } #pfe-app[data-mfit="4"] .pfe-m1 { padding: 0 7px !important; font-size: 14px !important; height: 36px; } #pfe-app[data-mfit="4"] .pfe-m2 { font-size: 13px; padding: 6px 11px; } #pfe-app[data-mfit="5"] .pfe-m1 { padding: 0 6px !important; font-size: 13px !important; height: 34px; } #pfe-app[data-mfit="5"] .pfe-m2 { font-size: 12.5px; padding: 5px 10px; } #pfe-app[data-menu] .pfe-menu1 .pfe-menu-in { padding-top: 9px !important; padding-bottom: 9px !important; } /* the ‹ › buttons sit beside the sub-menu, never on top of its words */ #pfe-app[data-menu] .pfe-menu2 { display: flex; align-items: center; gap: 4px; padding: 0 clamp(4px, 1vw, 14px); } #pfe-app[data-menu] .pfe-menu2 #pfe-sub { flex: 1 1 auto; min-width: 0; padding: 9px 4px 7px !important; gap: 8px; } #pfe-app[data-menu] .pfe-menu2.over #pfe-sub { padding-left: 4px !important; padding-right: 4px !important; } .pfe-sarr { position: static; display: grid !important; place-items: center; flex: 0 0 auto; visibility: hidden; width: 32px; height: 32px; } .pfe-menu2.over .pfe-sarr { visibility: visible; } /* sub-menu items in soft frames: easy to see where one ends and the next begins */ #pfe-app[data-menu] .pfe-m2 { border: 1px solid color-mix(in srgb, var(--border) 90%, transparent); background: color-mix(in srgb, var(--surface2) 30%, var(--surface)); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; } #pfe-app[data-menu] .pfe-m2:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: var(--surface); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.07); } #pfe-app[data-menu] .pfe-m2.on { border-color: var(--primary); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 28%, transparent); } #pfe-app[data-menu] .pfe-m2.num { min-width: 38px; } #pfe-app[data-menu] .pfe-m2[target="_blank"], #pfe-app[data-menu] .pfe-m2[href^="mailto:"] { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--primary) !important; font-weight: 500; } #pfe-app[data-menu] .pfe-m2sep { height: 26px; margin: 0 6px; background: color-mix(in srgb, var(--accent) 45%, var(--border)); } /* Install app: right of About, medium size, clear words */ #pfe-main-menu .pfe-install-top { margin-left: auto; padding-left: 12px; flex: 0 0 auto; } #pfe-main-menu .pfe-installbtn { height: 36px; padding: 0 14px 0 6px; gap: 7px; border: 1.5px solid color-mix(in srgb, var(--primary) 55%, var(--nav)); background: var(--surface); color: var(--primary); font: 600 13.5px var(--font-ui); box-shadow: 0 2px 8px rgba(0,0,0,.10); } #pfe-main-menu .pfe-installbtn svg { width: 24px; height: 24px; padding: 4px; } #pfe-main-menu .pfe-installbtn:hover { background: var(--primary); color: var(--primary-ink); } #pfe-main-menu .pfe-installbtn:hover svg { background: var(--primary-ink); color: var(--primary); } @media (max-width: 1100px) { #pfe-main-menu .pfe-installbtn span { display: inline; } } /* 1.33.2: Install app always shows its words, at the height of the menu pills */ #pfe-main-menu .pfe-installbtn span { display: inline !important; } #pfe-main-menu .pfe-installbtn { height: 38px; padding: 0 16px 0 6px !important; font-size: 14px; white-space: nowrap; } #pfe-app[data-mfit="3"] #pfe-main-menu .pfe-installbtn, #pfe-app[data-mfit="4"] #pfe-main-menu .pfe-installbtn { height: 36px; font-size: 13.5px; padding: 0 13px 0 5px !important; } #pfe-app[data-mfit="5"] #pfe-main-menu .pfe-installbtn { height: 34px; font-size: 13px; padding: 0 12px 0 5px !important; } /* ---- PAGE BANNERS: the title sits on a calm glass panel – readable on every picture and every theme */ .pfe-banner { min-height: 300px; } .pfe-banner::after { background: linear-gradient(90deg, rgba(10,12,24,.72) 0%, rgba(10,12,24,.38) 55%, rgba(10,12,24,.10) 100%), linear-gradient(180deg, rgba(10,12,24,0) 40%, rgba(10,12,24,.55) 100%) !important; } .pfe-banner-in { padding: 64px var(--pad) 28px !important; } .pfe-banner-in > * { max-width: 760px; } .pfe-banner .pfe-kicker { display: inline-block; padding: 4px 12px; margin-bottom: 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #ffe2b8 !important; font: 700 11.5px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pfe-banner h1 { font-family: var(--font-head) !important; font-size: clamp(30px, 4.2vw, 50px) !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: -.01em; text-transform: none !important; text-wrap: balance; color: #fff !important; text-shadow: 0 2px 4px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.45) !important; margin: 0 0 6px !important; } .pfe-banner .pfe-orn { margin: 10px 0 8px; opacity: .9; } .pfe-banner .pfe-orn i { background: linear-gradient(90deg, #ffd9a8, transparent) !important; } .pfe-banner .pfe-lead { font-family: var(--font-body); font-size: clamp(16px, 1.6vw, 19px) !important; line-height: 1.55; color: rgba(255,255,255,.95) !important; text-shadow: 0 1px 10px rgba(0,0,0,.5); text-wrap: pretty; } @media (max-width: 640px) { .pfe-banner { min-height: 220px; } .pfe-banner-in { padding-top: 46px !important; } } /* ---- CONTACT page */ .pfe-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 6px 0 24px; } .pfe-ccard { --cc: var(--primary); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 18px 18px; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 9%, var(--surface)) 0%, var(--surface) 60%); text-decoration: none; color: var(--text) !important; box-shadow: 0 6px 18px rgba(0,0,0,.05); transition: transform .18s, box-shadow .18s, border-color .18s; } .pfe-ccard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--cc) 50%, var(--border)); box-shadow: 0 14px 30px rgba(0,0,0,.10); } .pfe-ccard .ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; background: color-mix(in srgb, var(--cc) 15%, transparent); margin-bottom: 4px; } .pfe-ccard b { font: 600 19px/1.25 var(--font-head); color: var(--primary); } .pfe-ccard p { margin: 0; font: 14px/1.5 var(--font-ui); color: var(--muted); } .pfe-ccard .go { margin-top: auto; padding-top: 10px; font: 700 13.5px var(--font-ui); color: var(--cc); word-break: break-word; } .pfe-ccard.c2 { --cc: var(--accent); } .pfe-ccard.c3 { --cc: color-mix(in srgb, var(--accent) 50%, #2e7d5b); } .pfe-ccard.c4 { --cc: color-mix(in srgb, var(--primary) 55%, #c2185b); } .pfe-csec { font: 600 22px var(--font-head); color: var(--primary); margin: 26px 0 10px; } .pfe-clinks { display: flex; flex-wrap: wrap; gap: 10px; } .pfe-clink { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text) !important; font: 500 14px var(--font-ui); transition: border-color .15s, transform .15s; } .pfe-clink small { display: block; color: var(--muted); font-size: 12px; } .pfe-clink:hover { border-color: var(--accent); transform: translateY(-2px); } .pfe-clink .ic { font-size: 20px; } .pfe-csafe { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, #c0392b 35%, var(--border)); background: color-mix(in srgb, #c0392b 6%, var(--surface)); font: 14px/1.5 var(--font-ui); } .pfe-csafe .ic { font-size: 22px; } /* ---- BUY THE BOOK: format first, then every country and store */ .pfe-buygrid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 34px; align-items: start; } @media (max-width: 760px) { .pfe-buygrid { grid-template-columns: 1fr; } } .pfe-buycover { position: sticky; top: calc(var(--menu-h, 120px) + 20px); display: flex; flex-direction: column; align-items: center; padding: 26px 0 8px; } .pfe-buyturn { text-align: center; margin-top: 18px; } .pfe-bstep { display: flex; align-items: center; gap: 10px; font: 600 20px var(--font-head); color: var(--primary); margin: 6px 0 12px; } .pfe-bstep span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font: 700 14px var(--font-ui); } .pfe-bfmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-bottom: 22px; } .pfe-bfmt { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 8px 12px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-family: var(--font-ui); transition: all .18s; } .pfe-bfmt .ic { font-size: 26px; } .pfe-bfmt b { font-size: 14.5px; } .pfe-bfmt small { font-size: 11.5px; color: var(--muted); } .pfe-bfmt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); } .pfe-bfmt.on { border-color: var(--primary); background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), var(--surface)); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 20%, transparent); } .pfe-bfmt.on small { color: var(--primary); } .pfe-bfmt:disabled { opacity: .45; cursor: default; } .pfe-bfind { width: 100%; max-width: 380px; margin-bottom: 12px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: 14px var(--font-ui); } .pfe-boffers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .pfe-boffer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text) !important; transition: border-color .15s, transform .15s, box-shadow .15s; } .pfe-boffer:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.08); } .pfe-boffer.mine { border: 2px solid var(--accent); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); } .pfe-boffer.free { border-color: color-mix(in srgb, #2e7d5b 50%, var(--border)); } .pfe-boffer-flag { font-size: 28px; line-height: 1; } .pfe-boffer-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; font-family: var(--font-ui); } .pfe-boffer-tx b { font-size: 14.5px; } .pfe-boffer-tx b em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-left: 4px; } .pfe-boffer-tx small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pfe-boffer-go { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); font: 700 12.5px var(--font-ui); } .pfe-boffer.free .pfe-boffer-go { background: #2e7d5b; color: #fff; } .pfe-bvia { grid-column: 1 / -1; margin: 6px 0 0; } .pfe-ball { grid-column: 1 / -1; display: block; text-align: center; padding: 8px; font: 700 13px var(--font-ui); } /* side panel version */ .pfe-buyside .pfe-buyside-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; } .pfe-buyside .pfe-bfmts { grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; } .pfe-buyside .pfe-bfmt { padding: 8px 4px; border-radius: 12px; border-width: 1.5px; } .pfe-buyside .pfe-bfmt .ic { font-size: 18px; } .pfe-buyside .pfe-bfmt b { font-size: 12px; } .pfe-buyside .pfe-bfmt small { display: none; } .pfe-buyside .pfe-boffers { grid-template-columns: 1fr; gap: 6px; } .pfe-buyside .pfe-boffer { padding: 8px 10px; gap: 8px; } .pfe-buyside .pfe-boffer-flag { font-size: 20px; } /* a real book that turns: front cover, spine, pages and back cover */ .pfe-book3d { --w: 230px; --t: 30px; position: relative; width: var(--w); aspect-ratio: 900 / 1438; perspective: 1600px; cursor: pointer; outline: none; } .pfe-book3d.sm { --w: 96px; --t: 14px; } .pfe-book3d-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(-28deg) rotateX(4deg); animation: pfe-booksway 8s ease-in-out infinite alternate; transition: transform 1s cubic-bezier(.2,.7,.2,1); } .pfe-book3d:hover .pfe-book3d-in, .pfe-book3d:focus-visible .pfe-book3d-in { animation-play-state: paused; } .pfe-book3d.flip .pfe-book3d-in { animation: none; transform: rotateY(-180deg) rotateX(2deg); } @keyframes pfe-booksway { 0% { transform: rotateY(-34deg) rotateX(5deg); } 100% { transform: rotateY(-14deg) rotateX(2deg); } } .pfe-book3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px 6px 6px 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pfe-book3d img.f { transform: translateZ(calc(var(--t) / 2)); box-shadow: inset 4px 0 10px rgba(0,0,0,.25); } .pfe-book3d img.b { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); border-radius: 6px 2px 2px 6px; } .pfe-book3d .spine { position: absolute; top: 0; bottom: 0; left: calc(50% - var(--t) / 2); width: var(--t); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(90deg, #2a251d, #474138 45%, #1e1f17); display: flex; align-items: center; justify-content: center; overflow: hidden; } .pfe-book3d .spine i { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 9px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #f1d9b0; font-style: normal; white-space: nowrap; } .pfe-book3d.sm .spine i { display: none; } .pfe-book3d .pages { position: absolute; top: 3px; bottom: 3px; left: calc(50% - var(--t) / 2); width: calc(var(--t) - 2px); transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px)); background: repeating-linear-gradient(90deg, #fbf7ee 0 2px, #e8e0cf 2px 3px); } .pfe-book3d-sh { position: absolute; left: 6%; right: -4%; bottom: -16px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent); filter: blur(4px); z-index: -1; } @media (prefers-reduced-motion: reduce) { .pfe-book3d-in { animation: none; } } /* ---- Tests: Mark as completed bar; topic cards with video / audio */ .pfe-testtools { margin-top: 2px; } .pfe-tstory { padding: 0 !important; } .pfe-tstory-a { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 6px 20px; text-decoration: none; color: inherit !important; } .pfe-tstory .pfe-mbar, .pfe-tshlok .pfe-mbar { margin: 4px 0 6px; padding: 0 16px 0 20px; display: flex; flex-wrap: wrap; gap: 6px; } .pfe-tshlok .pfe-mbar { padding: 0; } .pfe-tstory-ft { margin: 0 16px 0 20px !important; padding-bottom: 12px; } .pfe-tool.pfe-danger2 { background: #fcf0f1; border-color: #d63638; color: #8a2424; } .pfe-inst-more { margin-top: 14px; } .pfe-inst-more summary { cursor: pointer; } /* ======================================================================= 1.33.1: home – thought of the day, mood check-in */ .pfe-home-side { display: flex; flex-direction: column; } .pfe-thought { position: relative; margin: 0; padding: 22px 22px 16px 26px; border-radius: 18px; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%, var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--shadow); } .pfe-thought::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--accent), var(--primary)); } .pfe-thought .q { position: absolute; right: 14px; top: -18px; font: 700 120px/1 Georgia, serif; color: var(--accent); opacity: .16; pointer-events: none; } .pfe-thought b { display: block; font: 700 11.5px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .pfe-thought blockquote { margin: 0; font: italic 400 clamp(17px, 1.5vw, 20px)/1.5 var(--font-head); color: var(--text); text-wrap: pretty; } .pfe-thought figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); font: 600 13px var(--font-ui); } .pfe-thought figcaption a:first-child { text-decoration: none; } .pfe-thought figcaption .pfe-tool { text-decoration: none; } .pfe-mood { padding: 16px 16px 12px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .pfe-mood-faces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .pfe-moodb { appearance: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; border-radius: 14px; border: 1.5px solid var(--border); background: color-mix(in srgb, var(--surface2) 35%, var(--surface)); color: var(--text); font: 600 12.5px var(--font-ui); cursor: pointer; transition: transform .15s, border-color .15s, background .15s; } .pfe-moodb span { font-size: 24px; line-height: 1.1; transition: transform .2s; } .pfe-moodb:hover { border-color: var(--accent); transform: translateY(-2px); } .pfe-moodb:hover span { transform: scale(1.15); } .pfe-moodb.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 22%, transparent); } .pfe-mood-out { margin-top: 12px; } .pfe-mood-out .pfe-small { margin: 2px 0 0; text-align: center; } .pfe-mood-line { margin: 0 0 10px; font: italic 16px/1.5 var(--font-body); color: var(--primary); } .pfe-mood-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pfe-mood-go { display: block; padding: 9px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); background: color-mix(in srgb, var(--primary) 5%, var(--surface)); color: var(--text) !important; text-decoration: none; font: 600 13px var(--font-ui); transition: border-color .15s, transform .15s; } .pfe-mood-go:hover { border-color: var(--primary); transform: translateY(-1px); } .pfe-mood-safe { margin: 12px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #c0392b 6%, var(--surface)); font: 12.5px/1.45 var(--font-ui); color: var(--muted); } @media (max-width: 520px) { .pfe-mood-links { grid-template-columns: 1fr; } } #pfe-app[data-mfit="6"] .pfe-m1 { padding: 0 5px !important; font-size: 12.5px !important; height: 34px; } #pfe-app[data-mfit="6"] .pfe-m2 { font-size: 12.5px; padding: 5px 10px; } #pfe-app[data-mfit="5"] #pfe-main-menu, #pfe-app[data-mfit="6"] #pfe-main-menu { gap: 2px; } #pfe-app[data-mfit="6"] #pfe-main-menu .pfe-installbtn { height: 34px; font-size: 12.5px; padding: 0 10px 0 4px !important; } /* 1.33.3: Read in Marathi (मराठी) / Hindi (हिन्दी) ↗ – one item, two links */ #pfe-app[data-menu] .pfe-m2.pfe-m2-langs { display: inline-flex; align-items: center; gap: 4px; border-style: dashed; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text); } .pfe-m2-langs a, .pfe-langpair a { color: var(--primary) !important; font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); } .pfe-m2-langs a:hover, .pfe-langpair a:hover { border-bottom-color: var(--primary); } .pfe-clink-langs { cursor: default; } /* ======================================================================= 1.33.4: book showcase */ /* the front and back covers sliding by themselves under the 3D book */ .pfe-covers { width: 100%; max-width: 250px; margin-top: 34px; } .pfe-covers-win { overflow: hidden; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.14); background: var(--surface2); } .pfe-covers-track { display: flex; width: 200%; animation: pfe-coverslide 9s ease-in-out infinite; } .pfe-covers:hover .pfe-covers-track { animation-play-state: paused; } @keyframes pfe-coverslide { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .pfe-cover-sl { appearance: none; position: relative; flex: 0 0 50%; padding: 0; border: 0; background: none; cursor: zoom-in; display: block; } .pfe-cover-sl img { display: block; width: 100%; aspect-ratio: 900 / 1438; object-fit: cover; } .pfe-cover-sl span { position: absolute; left: 10px; bottom: 10px; padding: 4px 11px; border-radius: 999px; background: rgba(12,14,30,.62); color: #fff; font: 600 12px var(--font-ui); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .pfe-covers-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .pfe-covers-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); animation: pfe-dot1 9s infinite; } .pfe-covers-dots i + i { animation-name: pfe-dot2; } @keyframes pfe-dot1 { 0%, 45%, 95%, 100% { background: var(--primary); width: 20px; border-radius: 4px; } 50%, 90% { background: var(--border); width: 8px; } } @keyframes pfe-dot2 { 0%, 45%, 95%, 100% { background: var(--border); width: 8px; } 50%, 90% { background: var(--primary); width: 20px; border-radius: 4px; } } .pfe-covers:hover .pfe-covers-dots i { animation-play-state: paused; } .pfe-covers-tip { text-align: center; margin: 6px 0 0; } .pfe-book3d { cursor: zoom-in; } @media (prefers-reduced-motion: reduce) { .pfe-covers-track, .pfe-covers-dots i { animation: none; } } /* the large view */ .pfe-bookzoom { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 56px 16px 20px; background: radial-gradient(ellipse at center, rgba(40,34,26,.86) 0%, rgba(8,8,14,.95) 75%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .28s ease; font-family: 'Poppins', system-ui, sans-serif; outline: none; } .pfe-bookzoom.in { opacity: 1; } .pfe-bookzoom.out { opacity: 0; } .pfe-bz-stage { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .pfe-bz-3d { transform: scale(.55) rotateZ(-6deg); opacity: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1.1), opacity .5s; } .pfe-bookzoom.in .pfe-bz-3d { transform: none; opacity: 1; } .pfe-book3d.xl { --w: min(380px, calc((100vh - 220px) * 900 / 1438), 72vw); --t: 38px; } .pfe-book3d.xl .pfe-book3d-in { animation: pfe-bzswing 10s ease-in-out infinite alternate; } .pfe-book3d.xl.flip .pfe-book3d-in { animation: none; transform: rotateY(-180deg) rotateX(2deg); } @keyframes pfe-bzswing { 0% { transform: rotateY(-30deg) rotateX(4deg); } 100% { transform: rotateY(-8deg) rotateX(1deg); } } .pfe-book3d.xl .spine i { font-size: 12px; } .pfe-book3d.xl .pfe-book3d-sh { bottom: -26px; height: 36px; } .pfe-bz-flat { display: none; height: 100%; max-height: calc(100vh - 170px); } .pfe-bz-flat img { height: 100%; max-width: 92vw; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: pfe-bzflat .35s ease-out; } @keyframes pfe-bzflat { from { transform: scale(.92); opacity: 0; } } .pfe-bookzoom.flat .pfe-bz-3d { display: none; } .pfe-bookzoom.flat .pfe-bz-flat { display: block; } .pfe-bz-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .pfe-bz-bar button { appearance: none; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font: 600 13.5px 'Poppins', system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; } .pfe-bz-bar button:hover { background: rgba(255,255,255,.22); } .pfe-bz-bar button.on { background: #fff; color: #1c1a16; border-color: #fff; } .pfe-bz-bar button.close { border-color: rgba(255,180,160,.5); } .pfe-bz-x { position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font: 400 28px/1 system-ui, sans-serif; cursor: pointer; transition: background .15s, transform .2s; } .pfe-bz-x:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); } /* ================================================================ 1.33.4: full-width layout, slim gutters, clear menu 1. The page uses the whole screen: no more empty bands left and right of the side panels on wide screens. 2. Small, even gaps (10–14 px) between the left panel, reading pane and right panel, and above / below them. 3. Right panel: nothing is cut off at its right edge (the Buy rows and their Buy buttons fit inside the panel). 4. Main menu: the items share the full width of the bar with little padding, so the words can be bigger. */ .pfe-menubar-in, .pfe-menu-in, .pfe-socialbar, .pfe-shell, .pfe-footer-in, .pfe-footer-bottom { max-width: none !important; } .pfe-shell { padding: 0 10px 20px !important; gap: 14px !important; grid-template-columns: clamp(240px, 16.5vw, 330px) minmax(0, 1fr) clamp(250px, 17vw, 340px) !important; } .pfe-socialbar { padding: 5px 12px !important; } .pfe-footer-in, .pfe-footer-bottom { padding-left: 14px !important; padding-right: 14px !important; } @media (max-width: 1320px) { .pfe-shell { grid-template-columns: 230px minmax(0, 1fr) 250px !important; gap: 12px !important; } } @media (max-width: 1100px) { .pfe-shell { grid-template-columns: minmax(0, 1fr) 260px !important; } } @media (max-width: 880px) { .pfe-shell { grid-template-columns: minmax(0, 1fr) !important; padding: 0 8px 16px !important; } } /* right panel: every card and row stays inside the panel */ .pfe-aside > * { min-width: 0; max-width: 100%; box-sizing: border-box; } .pfe-aside .pfe-boffers, .pfe-buyside .pfe-boffers { grid-template-columns: minmax(0, 1fr) !important; } .pfe-aside .pfe-boffer, .pfe-aside .pfe-ball { min-width: 0; max-width: 100%; box-sizing: border-box; } .pfe-aside .pfe-boffer-tx b { overflow-wrap: anywhere; } .pfe-aside .pfe-boffer-go { padding: 5px 10px; } .pfe-aside .pfe-bfmts { min-width: 0; } /* main menu: full width, items spread evenly, bigger words, small padding */ #pfe-app[data-menu] .pfe-menu1 .pfe-menu-in { padding-left: 10px !important; padding-right: 10px !important; justify-content: space-between !important; gap: 2px !important; } #pfe-main-menu .pfe-install-top { margin-left: 6px; padding-left: 0; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1 { height: 40px; padding: 0 9px !important; font-size: 16.5px !important; } #pfe-app[data-mfit="1"] #pfe-main-menu .pfe-m1 { padding: 0 7px !important; font-size: 16px !important; } #pfe-app[data-mfit="2"] #pfe-main-menu .pfe-m1 { padding: 0 6px !important; font-size: 15.5px !important; } #pfe-app[data-mfit="3"] #pfe-main-menu .pfe-m1 { padding: 0 5px !important; font-size: 15px !important; height: 38px; } #pfe-app[data-mfit="4"] #pfe-main-menu .pfe-m1 { padding: 0 5px !important; font-size: 14.5px !important; height: 38px; } #pfe-app[data-mfit="5"] #pfe-main-menu .pfe-m1 { padding: 0 4px !important; font-size: 14px !important; height: 36px; } #pfe-app[data-mfit="6"] #pfe-main-menu .pfe-m1 { padding: 0 4px !important; font-size: 13.5px !important; height: 36px; } #pfe-app[data-menu] #pfe-main-menu .pfe-installbtn { height: 38px; font-size: 14.5px; padding: 0 14px 0 5px !important; } #pfe-app[data-mfit="4"] #pfe-main-menu .pfe-installbtn, #pfe-app[data-mfit="5"] #pfe-main-menu .pfe-installbtn, #pfe-app[data-mfit="6"] #pfe-main-menu .pfe-installbtn { height: 36px; font-size: 13.5px; padding: 0 11px 0 4px !important; } .pfe-menu2 .pfe-menu-in { padding-left: 10px !important; padding-right: 10px !important; } @media (max-width: 880px) { #pfe-app[data-menu] .pfe-menu1 .pfe-menu-in { justify-content: flex-start !important; } } /* install: one short line instead of a page of steps */ .pfe-inst1 { text-align: center; padding: 4px 6px 0; } .pfe-inst1-ic { font-size: 40px; line-height: 1; } .pfe-inst1 .pfe-inst-h { margin: 8px 0 6px; } .pfe-inst1-tx { font: 16px/1.6 var(--font-ui); margin: 0 0 14px; } .pfe-inst1 .pfe-inst-copy { text-align: left; } #pfe-app[data-mfit="7"] #pfe-main-menu .pfe-m1 { padding: 0 3px !important; font-size: 13px !important; height: 34px; } #pfe-app[data-mfit="7"] #pfe-main-menu .pfe-installbtn { height: 34px; padding: 0 5px !important; } #pfe-app[data-mfit="7"] #pfe-main-menu .pfe-installbtn span { display: none !important; } /* ================================================================ 1.33.4: elegant main menu – separators, even spacing, calmer Hindi / Marathi lettering. Each menu item takes an equal share of the free space, with its words centred and a thin, soft separator line between items. Hindi and Marathi use Noto Sans Devanagari (made for these letters) at a lighter weight and a slightly smaller size, so the joined letters breathe instead of looking crowded. */ #pfe-app[data-menu] .pfe-menu1 .pfe-menu-in { justify-content: flex-start !important; gap: 0 !important; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1 { flex: 1 1 auto; justify-content: center; position: relative; margin: 0 1px; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1 + .pfe-m1::before { content: ""; position: absolute; left: -2px; top: 50%; height: 16px; width: 1px; transform: translateY(-50%); background: currentColor; opacity: .22; pointer-events: none; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1.on::before, #pfe-app[data-menu] #pfe-main-menu .pfe-m1.on + .pfe-m1::before, #pfe-app[data-menu] #pfe-main-menu .pfe-m1:hover::before, #pfe-app[data-menu] #pfe-main-menu .pfe-m1:hover + .pfe-m1::before { opacity: 0; } #pfe-main-menu .pfe-install-top { margin-left: 10px; position: relative; } #pfe-main-menu .pfe-install-top::before { content: ""; position: absolute; left: -6px; top: 50%; height: 22px; width: 1px; transform: translateY(-50%); background: var(--nav-ink); opacity: .18; } #pfe-main-menu .pfe-install-top:empty::before { display: none; } @media (max-width: 880px) { #pfe-app[data-menu] #pfe-main-menu .pfe-m1 { flex: 0 0 auto; } } /* Hindi and Marathi: main menu */ #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-menu] #pfe-main-menu .pfe-m1 { font-family: 'Noto Sans Devanagari', 'Poppins', system-ui, sans-serif !important; font-weight: 500 !important; font-size: 15px !important; padding: 0 8px !important; line-height: 1 !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-mfit="1"] #pfe-main-menu .pfe-m1 { font-size: 14.5px !important; padding: 0 7px !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-mfit="2"] #pfe-main-menu .pfe-m1 { font-size: 14px !important; padding: 0 6px !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-mfit="3"] #pfe-main-menu .pfe-m1 { font-size: 13.5px !important; padding: 0 5px !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-mfit="4"] #pfe-main-menu .pfe-m1 { font-size: 13px !important; padding: 0 5px !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-mfit="5"] #pfe-main-menu .pfe-m1 { font-size: 12.5px !important; padding: 0 4px !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-mfit="6"] #pfe-main-menu .pfe-m1, #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-mfit="7"] #pfe-main-menu .pfe-m1 { font-size: 12px !important; padding: 0 3px !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-menu] #pfe-main-menu .pfe-m1.on { font-weight: 600 !important; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) #pfe-main-menu .pfe-installbtn { font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif; font-weight: 500; font-size: 13.5px; } /* Hindi and Marathi: sub-menu, header buttons and side navigation */ #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-m2 { font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif; font-weight: 400; font-size: 13.5px; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-m2.on { font-weight: 600; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-header :is(.pfe-labelbtn, .pfe-account-btn, button) { font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif; font-weight: 500; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-nav li a { font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif; font-size: 14px; line-height: 1.45; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-nav h4 { font-size: 12px; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-tagline-chip { font-size: 13px; } /* 1.33.4: Buy the book and Pay pages – formats on one line, country badges, the full width used */ .pfe-buypage .pfe-bfmts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } @media (max-width: 700px) { .pfe-buypage .pfe-bfmts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pfe-boffer-cc { flex: 0 0 auto; width: 36px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); color: var(--primary); font: 700 11.5px/1 var(--font-ui); letter-spacing: .05em; } .pfe-boffer-flag { flex: 0 0 auto; width: 36px; text-align: center; } .pfe-boffer-tx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pfe-boffer-me { align-self: flex-start; font-style: normal; font: 700 9.5px/1.5 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 0 7px; border-radius: 999px; margin: 1px 0 2px; white-space: nowrap; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-boffer-me { text-transform: none; font-size: 11px; } .pfe-aside .pfe-bfmts { display: flex !important; flex-wrap: wrap; justify-content: center; } .pfe-aside .pfe-bfmt { flex: 0 0 calc(33.333% - 4px); box-sizing: border-box; min-width: 0; } .pfe-aside .pfe-boffer-cc { width: 30px; height: 22px; font-size: 10.5px; } .pfe-aside .pfe-boffer-go { font-size: 0 !important; width: 30px; height: 30px; padding: 0 !important; display: grid; place-items: center; border-radius: 50%; } .pfe-aside .pfe-boffer-go::after { content: "↗"; font: 700 14px/1 var(--font-ui); } .pfe-aside .pfe-boffer.free .pfe-boffer-go::after { content: "▶"; font-size: 11px; } .pfe-aside .pfe-bfmt b { white-space: nowrap; font-size: 11.5px; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-aside .pfe-bfmt b { font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif; font-weight: 600; font-size: 11.5px; } .pfe-paygrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 960px) { .pfe-paygrid { grid-template-columns: minmax(0, 1fr); } } .pfe-payside h3 { margin-top: 0; font-family: var(--font-head); color: var(--primary); } .pfe-payfmts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 10px 0 16px; } .pfe-payfmt { padding: 12px 4px 10px !important; min-width: 0; text-align: center; } .pfe-payfmt b { font-size: 13px !important; white-space: nowrap; } .pfe-payfmt small { font-size: 11px !important; } @media (max-width: 520px) { .pfe-payfmts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pfe-payfmt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 8px 12px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); color: var(--text) !important; text-decoration: none; font-family: var(--font-ui); transition: border-color .15s, transform .15s; } .pfe-payfmt:hover { border-color: var(--primary); transform: translateY(-2px); } .pfe-payfmt .ic { font-size: 26px; } .pfe-payfmt b { font-size: 14.5px; } .pfe-payfmt small { font-size: 11.5px; color: var(--muted); } .pfe-payfmt.off { opacity: .5; } /* 1.33.4: main menu as a row of soft buttons – each item clearly separate, works on every theme (tinted from the menu's own text colour) */ #pfe-app[data-menu] .pfe-menu1 .pfe-menu-in { gap: 5px !important; padding-top: 8px !important; padding-bottom: 8px !important; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1 { margin: 0; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--nav-ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--nav-ink) 15%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.06); transition: background .18s, border-color .18s, transform .18s, box-shadow .18s, color .18s; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1::before { display: none !important; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1:hover { background: color-mix(in srgb, var(--nav-ink) 11%, transparent); border-color: color-mix(in srgb, var(--nav-ink) 30%, transparent); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.10); } #pfe-app[data-menu] #pfe-main-menu .pfe-m1.peek { background: color-mix(in srgb, var(--nav-ink) 12%, transparent); } #pfe-app[data-menu] #pfe-main-menu .pfe-m1.on { background: var(--primary); color: var(--primary-ink) !important; border-color: var(--primary); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 38%, transparent); } #pfe-app[data-menu] #pfe-main-menu .pfe-m1:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #pfe-app[data-mfit="5"] #pfe-main-menu .pfe-m1, #pfe-app[data-mfit="6"] #pfe-main-menu .pfe-m1, #pfe-app[data-mfit="7"] #pfe-main-menu .pfe-m1 { height: 34px; border-radius: 9px; } #pfe-app[data-mfit="6"] .pfe-menu1 .pfe-menu-in, #pfe-app[data-mfit="7"] .pfe-menu1 .pfe-menu-in { gap: 3px !important; } #pfe-main-menu .pfe-install-top::before { display: none; } #pfe-main-menu .pfe-install-top { margin-left: 8px; } @media (max-width: 880px) { #pfe-app[data-menu] #pfe-main-menu .pfe-m1 { height: 40px; } } /* the sub-menu always stays a little smaller than the main menu */ #pfe-app:is([data-mfit="3"], [data-mfit="4"]) .pfe-menu2 .pfe-m2 { font-size: 13.5px !important; } #pfe-app:is([data-mfit="5"], [data-mfit="6"], [data-mfit="7"]) .pfe-menu2 .pfe-m2 { font-size: 12.5px !important; padding: 5px 11px !important; } /* ================================================================ 1.33.4: readability – nobody should need strong glasses Reading text always follows the reader's text size (A− / A+). Helper text is never smaller than 14 px, labels never smaller than 12.5 px, and inside the reading text "small" notes are almost body size and in the full text colour. */ .pfe-small { font-size: 14px; line-height: 1.6; } .pfe-content .pfe-small, .pfe-content .pfe-used, .pfe-content .pfe-uses { font-size: .94em; line-height: 1.7; color: var(--text); } .pfe-content .pfe-uses { margin: 0 0 .9em; } .pfe-content .pfe-used { margin-top: 1em; padding-top: .8em; border-top: 1px dashed var(--border); } .pfe-fullshloka .pfe-content { font-size: var(--reader-size, 18px) !important; } .pfe-fullshloka .pfe-content h3, .pfe-content h3 { margin: 1.4em 0 .5em; } #pfe-main small { font-size: max(13px, .82em); } #pfe-main .pfe-kicker, #pfe-main .pfe-shloka-label, #pfe-main .pfe-story-label { font-size: 12.5px; font-weight: 700; } #pfe-main .pfe-tool { font-size: 14px; } #pfe-main .pfe-story-ch, #pfe-main .pfe-story-no { font-size: 14px; } .pfe-nav li a { font-size: 14.5px; } .pfe-nav li.sub a { font-size: 13.5px; } .pfe-nav h4 { font-size: 12px; } .pfe-nav li a .n { font-size: 12px; } .pfe-m2tag { font-size: 11.5px; } .pfe-bfmt small, .pfe-payfmt small { font-size: 12.5px !important; } .pfe-boffer-tx small { font-size: 13px; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-small { font-size: 14.5px; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) #pfe-main :is(.pfe-kicker, .pfe-shloka-label, .pfe-story-label) { font-size: 13.5px; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-nav li a { font-size: 15px; } #pfe-main .pfe-btn.sm, #pfe-main .pfe-btn.ghost, #pfe-main a.pfe-btn, #pfe-main .pfe-moodb { font-size: 14px; } #pfe-main .pfe-reader-tools span, #pfe-main .pfe-story-end span { font-size: 14px; } #pfe-main .pfe-sh-card .ref { font-size: 13.5px; } #pfe-main .pfe-complete b { color: var(--text); } #pfe-main .pfe-bnote, #pfe-main .pfe-note { font-size: 14.5px; line-height: 1.6; } #pfe-main .pfe-boffer-go { font-size: 13.5px; } .pfe-nav h4 a { font-size: 13px; } .pfe-m2tag { font-size: 12px !important; opacity: 1 !important; } .pfe-nav li a .done { color: color-mix(in srgb, #2f9e57 60%, var(--text)); } .pfe-nav li a.on .done { color: inherit; } /* 1.33.4: shlok verses easy to read on every theme – the Sanskrit in a deep, strong colour, the pronunciation in near body colour at a readable size (it was faint grey) */ .pfe-sa, .pfe-fullshloka .pfe-sa { color: color-mix(in srgb, var(--primary) 30%, var(--text)) !important; font-weight: 500; } .pfe-fullshloka .pfe-sa { font-size: 25px; line-height: 1.7; margin: 8px 0 10px; } .pron, .pfe-fullshloka .pron { color: color-mix(in srgb, var(--muted) 35%, var(--text)) !important; font-size: max(16px, .95em); line-height: 1.75; opacity: 1 !important; } .pron em { font-style: italic; color: inherit; } .pfe-fullshloka > h2 { color: var(--text); } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-fullshloka .pfe-sa { font-size: 26px; } #pfe-app .pfe-content p.pfe-used, #pfe-app .pfe-content p.pfe-uses { font-size: .95em !important; color: var(--text) !important; } #pfe-app .pron, #pfe-app .pron em { color: color-mix(in srgb, var(--muted) 20%, var(--text)) !important; font-size: 17px !important; } /* 1.33.4 (final): main menu as clean text – no button frames; a thin soft line between items; only the open page is highlighted; hover shows a gentle underline. The sub-menu's own scroll bar is hidden (the ‹ › arrows scroll it). */ #pfe-app[data-menu] #pfe-main-menu .pfe-m1 { background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; border-radius: 999px; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1 + .pfe-m1::before { display: block !important; content: ""; position: absolute; left: -3px; top: 50%; height: 16px; width: 1px; transform: translateY(-50%); background: currentColor; opacity: .25; pointer-events: none; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1:hover { color: var(--nav-ink) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--accent) 80%, transparent); } #pfe-app[data-menu] #pfe-main-menu .pfe-m1.peek { background: transparent !important; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1.on { background: var(--primary) !important; color: var(--primary-ink) !important; text-decoration: none; box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 30%, transparent) !important; } #pfe-app[data-menu] #pfe-main-menu .pfe-m1.on::before, #pfe-app[data-menu] #pfe-main-menu .pfe-m1.on + .pfe-m1::before { opacity: 0; } #pfe-app[data-menu] .pfe-menu1 .pfe-menu-in { gap: 6px !important; } #pfe-sub, .pfe-menu2 .pfe-menu-in { scrollbar-width: none !important; } #pfe-sub::-webkit-scrollbar, .pfe-menu2 .pfe-menu-in::-webkit-scrollbar { display: none !important; height: 0 !important; } /* 1.50: Buy the book – the original design (3D book and front / back covers in motion on the left, steps on the right), with clear space between step 1 and step 2 and every row lined up on the same left and right edges */ .pfe-buypage .pfe-buymain { min-width: 0; } .pfe-buypage .pfe-bfmts { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 12px !important; margin: 0 0 40px !important; } .pfe-buypage .pfe-bfmt { padding: 16px 8px 14px; } .pfe-buypage .pfe-bfmt .ic { font-size: 30px; } .pfe-buypage .pfe-bstep { margin: 6px 0 16px !important; } .pfe-buypage .pfe-bstep + .pfe-bfmts + .pfe-bstep, .pfe-buypage .pfe-bfmts + .pfe-bstep { padding-top: 28px; border-top: 1px solid var(--border); } .pfe-buypage .pfe-bfind { display: block; margin: 0 0 16px; } .pfe-buypage .pfe-boffers { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 12px !important; } .pfe-buypage .pfe-buymain > .pfe-note { margin-top: 24px !important; } @media (max-width: 700px) { .pfe-buypage .pfe-bfmts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 28px !important; } } /* 1.70: Buy the book / Pay what you think is right – one page, three frames lined up with the banner and with each other */ .pfe-page.pfe-buyall { padding: 14px 14px 22px !important; } .pfe-buyall .pfe-banner { --pad: 0px; margin: 0 0 18px !important; border-radius: calc(var(--radius) + 4px) !important; } .pfe-buyall .pfe-paygrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; } .pfe-buyall #pfe-paypage { display: flex; min-width: 0; } .pfe-buyall #pfe-paypage .pfe-pay { flex: 1; margin: 0; } .pfe-buyall .pfe-buycol { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .pfe-buyall .pfe-bcard { margin: 0; } .pfe-buyall .pfe-bcountry { flex: 1; display: flex; flex-direction: column; } .pfe-buyall .pfe-card { padding: 22px 24px !important; border-radius: calc(var(--radius) + 4px); } .pfe-buyall .pfe-card > h3, .pfe-buyall .pfe-pay > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px !important; font-family: var(--font-head); font-size: 22px; line-height: 1.3; color: var(--primary); } .pfe-buyall .pfe-bfmts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 10px !important; margin: 0 !important; } .pfe-buyall .pfe-bfmt { padding: 14px 4px 12px; min-width: 0; } .pfe-buyall .pfe-bfmt .ic { font-size: 28px; } .pfe-buyall .pfe-bfmt b { font-size: 14px; white-space: nowrap; } .pfe-buyall .pfe-bfind { display: block; width: 100%; max-width: none; box-sizing: border-box; margin: 0 0 14px; } .pfe-buyall .pfe-boffers { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 10px !important; } .pfe-buyall .pfe-bnote { margin: auto 0 0 !important; padding-top: 14px; } .pfe-buyall .pfe-boffers + .pfe-bnote { margin-top: 16px !important; } @media (max-width: 1100px) { .pfe-buyall .pfe-paygrid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .pfe-buyall .pfe-bfmts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .pfe-buyall .pfe-card { padding: 16px !important; } } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-buyall .pfe-boffer-go { font-size: 0 !important; width: 34px; height: 34px; padding: 0 !important; display: grid; place-items: center; border-radius: 50%; flex: 0 0 auto; } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-buyall .pfe-boffer-go::after { content: "↗"; font: 700 15px/1 var(--font-ui); } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) .pfe-buyall .pfe-boffer.free .pfe-boffer-go::after { content: "▶"; font-size: 12px; } .pfe-buyall .pfe-boffer { padding: 10px 12px; gap: 10px; } /* 1.80: the book on show (Buy the book page) */ .pfe-buyall .pfe-bookshow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; margin: 0 0 18px; padding: 28px 32px !important; overflow: hidden; } .pfe-bookshow-3d { display: flex; justify-content: center; padding: 4px 18px 10px; } .pfe-bookshow-flat { display: flex; flex-direction: column; align-items: center; min-width: 0; } .pfe-bookshow-flat > h3 { align-self: stretch; } .pfe-spread-wrap { width: fit-content; max-width: 100%; } .pfe-spread { position: relative; display: flex; align-items: stretch; height: clamp(210px, 22vw, 330px); border-radius: 3px; overflow: hidden; box-shadow: 0 22px 44px -12px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.12); animation: pfe-spreadfloat 7s ease-in-out infinite; } .pfe-spread::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; animation: pfe-spreadsheen 7s ease-in-out infinite; } .pfe-spread:hover, .pfe-spread:hover::after { animation-play-state: paused; } .pfe-spread-p { appearance: none; border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in; height: 100%; display: block; } .pfe-spread-p img { height: 100%; width: auto; aspect-ratio: 900 / 1438; object-fit: cover; display: block; border-radius: 0 !important; } .pfe-spread-spine { flex: 0 0 auto; width: clamp(26px, 2.3vw, 36px); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0; writing-mode: vertical-rl; background: linear-gradient(90deg, rgba(0,0,0,.38), rgba(0,0,0,.08) 30%, rgba(255,255,255,.10) 52%, rgba(0,0,0,.30)), linear-gradient(180deg, #2f3150 0%, #6b4a52 50%, #c48a5c 100%); color: #fff6e6; box-shadow: inset 1px 0 0 rgba(255,255,255,.15), inset -1px 0 0 rgba(0,0,0,.25); } .pfe-spread-spine span { font: 600 clamp(11px, 1vw, 13.5px)/1 var(--font-head); letter-spacing: .06em; white-space: nowrap; } .pfe-spread-spine i { font: 500 clamp(9.5px, .85vw, 11px)/1 var(--font-ui); font-style: normal; opacity: .9; white-space: nowrap; } .pfe-spread-lbl { display: flex; justify-content: space-around; gap: 8px; margin-top: 12px; font: 600 13px var(--font-ui); color: var(--muted); } .pfe-spread-lbl .sp { opacity: .8; } .pfe-bookshow-tip { text-align: center; margin: 10px 0 0 !important; } @keyframes pfe-spreadfloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-.4deg); } } @keyframes pfe-spreadsheen { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } } @media (prefers-reduced-motion: reduce) { .pfe-spread, .pfe-spread::after { animation: none; } } @media (max-width: 900px) { .pfe-buyall .pfe-bookshow { grid-template-columns: minmax(0, 1fr); padding: 20px !important; } } @media (max-width: 560px) { .pfe-spread { height: 150px; } .pfe-bookshow-3d .pfe-book3d { --w: 160px; } } /* 1.80: narrow middle column (three-pane edition): formats wrap into tidy rows; the right panel does not repeat the payment and buy boxes on this page */ .pfe-buyall .pfe-buycol { container-type: inline-size; } @container (max-width: 560px) { .pfe-buyall .pfe-bfmts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } #pfe-app:has(.pfe-buyall) #pfe-aside :is(#pfe-paycard, .pfe-buyside) { display: none !important; } .pfe-spread { --h: clamp(210px, 22vw, 330px); height: var(--h) !important; } #pfe-app .pfe-spread-p { flex: 0 0 auto; width: calc(var(--h) * 900 / 1438); height: var(--h); } #pfe-app .pfe-spread-p img { width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto; object-fit: cover; } @container (max-width: 560px) { .pfe-buyall .pfe-bfmts { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } @container (max-width: 460px) { .pfe-buyall .pfe-bfmts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { .pfe-spread { --h: 150px; } } /* 1.80: when the reading pane is narrow (three-pane edition on laptops), the payment frame and the buy frames stack at full width, so the five formats stay on one line */ .pfe-page.pfe-buyall { container: buyall / inline-size; } @container buyall (max-width: 900px) { .pfe-buyall .pfe-paygrid { grid-template-columns: minmax(0, 1fr) !important; } .pfe-buyall .pfe-bfmts { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } @container buyall (max-width: 520px) { .pfe-buyall .pfe-bfmts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* 2.00: a volume book's own page – its cover floating gently beside the title */ .pfe-buyall .pfe-volshow { grid-template-columns: auto minmax(0, 1fr) !important; } .pfe-volcover img { display: block; height: clamp(200px, 20vw, 300px) !important; width: auto !important; max-width: none !important; aspect-ratio: auto; border-radius: 4px; box-shadow: 0 22px 44px -12px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.12); animation: pfe-spreadfloat 7s ease-in-out infinite; } .pfe-volshow-tx h3 { font-family: var(--font-head); color: var(--primary); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; margin: 6px 0 10px; } .pfe-volshow-tx p { font-size: 16px; margin: 0; } @media (prefers-reduced-motion: reduce) { .pfe-volcover img { animation: none; } } @media (max-width: 700px) { .pfe-buyall .pfe-volshow { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; } } /* 2.00: the banner text keeps its inner space on the Buy the book pages */ .pfe-buyall .pfe-banner { --pad: clamp(18px, 3.4vw, 46px); } .pfe-buyall .pfe-banner-in { padding-left: clamp(20px, 3.4vw, 46px) !important; padding-right: clamp(20px, 3.4vw, 46px) !important; } /* 2.10: the turning book (Buy the book) – front cover, spine, back cover and page edges in real 3D */ .pfe-rot { --w: clamp(170px, 15vw, 224px); --h: calc(var(--w) * 1438 / 900); --d: calc(var(--w) * .16); position: relative; width: var(--w); height: var(--h); margin: 18px auto 34px; perspective: 1400px; cursor: zoom-in; outline: none; } .pfe-rot:focus-visible { outline: 3px solid var(--accent); outline-offset: 10px; border-radius: 6px; } .pfe-rot-book { position: absolute; inset: 0; transform-style: preserve-3d; animation: pfe-rot-turn 16s linear infinite; } .pfe-rot:hover .pfe-rot-book, .pfe-rot:focus-visible .pfe-rot-book { animation-play-state: paused; } .pfe-rot-face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pfe-rot-face.front, .pfe-rot-face.back { inset: 0; border-radius: 2px 5px 5px 2px; overflow: hidden; background: #2f3150; } .pfe-rot-face img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; border-radius: 0 !important; } .pfe-rot-face.front { transform: translateZ(calc(var(--d) / 2)); box-shadow: inset 6px 0 10px -6px rgba(0,0,0,.45); } .pfe-rot-face.front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 65%); pointer-events: none; } .pfe-rot-face.back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); border-radius: 5px 2px 2px 5px; } .pfe-rot-face.spine { width: var(--d); height: var(--h); left: calc(50% - var(--d) / 2); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 0; box-sizing: border-box; writing-mode: vertical-rl; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.12) 45%, rgba(0,0,0,.3)), linear-gradient(180deg, #2f3150 0%, #6b4a52 50%, #c48a5c 100%); color: #fff6e6; } .pfe-rot-face.spine span { font: 600 clamp(11px, 1vw, 14px)/1 var(--font-head); letter-spacing: .06em; white-space: nowrap; } .pfe-rot-face.spine i { font: 500 clamp(9.5px, .85vw, 11px)/1 var(--font-ui); font-style: normal; opacity: .9; white-space: nowrap; } .pfe-rot-face.pages { width: var(--d); height: calc(var(--h) - 6px); top: 3px; left: calc(50% - var(--d) / 2); transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px)); background: repeating-linear-gradient(90deg, #fbf7ee 0 2px, #e9e1d0 2px 3px); } .pfe-rot-face.top, .pfe-rot-face.bottom { width: calc(var(--w) - 3px); height: var(--d); left: 0; top: calc(50% - var(--d) / 2); background: repeating-linear-gradient(0deg, #fbf7ee 0 2px, #e9e1d0 2px 3px); } .pfe-rot-face.top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 2px)); } .pfe-rot-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 2px)); } .pfe-rot-shadow { position: absolute; left: 8%; right: 8%; bottom: -26px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); animation: pfe-rot-shadow 16s linear infinite; } @keyframes pfe-rot-turn { from { transform: rotateX(-4deg) rotateY(0deg); } to { transform: rotateX(-4deg) rotateY(-360deg); } } @keyframes pfe-rot-shadow { 0%, 50%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(.35); } } @media (prefers-reduced-motion: reduce) { .pfe-rot-book { animation: none; transform: rotateY(-28deg); } .pfe-rot-shadow { animation: none; } } .pfe-bookshow-flat > h3 { align-self: center !important; text-align: center; } /* 2.10: large view – the whole book rotating, and zoom to read the covers */ .pfe-bz-rot { display: none; } .pfe-bookzoom.rot .pfe-bz-rot { display: block; } .pfe-bookzoom.rot .pfe-bz-3d, .pfe-bookzoom.rot .pfe-bz-flat { display: none !important; } .pfe-rot.pfe-rot-xl { --w: min(330px, calc((100vh - 250px) * 900 / 1438)); margin: 0 auto; cursor: pointer; } .pfe-rot.pfe-rot-xl .pfe-rot-book, .pfe-rot.pfe-rot-xl .pfe-rot-shadow { animation-duration: 12s; } .pfe-rot.pfe-rot-xl:hover .pfe-rot-book { animation-play-state: running; } .pfe-bz-flat { position: relative; overflow: hidden; width: min(92vw, calc((100vh - 210px) * 900 / 1438)) !important; height: calc(100vh - 210px) !important; max-height: none !important; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); touch-action: none; background: rgba(0,0,0,.25); } .pfe-bz-flat img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; border-radius: 0 !important; box-shadow: none !important; transform-origin: center center; transition: transform .14s ease-out; user-select: none; -webkit-user-drag: none; animation: none !important; } .pfe-bz-flat img.drag { transition: none; } .pfe-bz-zoom { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); } .pfe-bz-zoom button { width: 38px; height: 38px; padding: 0 !important; border: 0 !important; background: transparent !important; font: 600 22px/1 system-ui, sans-serif !important; } .pfe-bz-zoom button:hover { background: rgba(255,255,255,.18) !important; } .pfe-bz-pct { min-width: 52px; text-align: center; color: #fff; font: 600 13px 'Poppins', system-ui, sans-serif; } .pfe-bz-hint { margin: -10px 0 0; color: rgba(255,255,255,.78); font: 13px/1.5 'Poppins', 'Noto Sans Devanagari', system-ui, sans-serif; text-align: center; } @media (max-width: 560px) { .pfe-bz-hint { display: none; } } /* 2.20: install – the small second line, and the arrow that points at the Share button on iPhone / iPad */ .pfe-inst1-note { margin: -6px 0 14px !important; } .pfe-ios-arrow { position: fixed; z-index: 100001; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,.5); } .pfe-ios-arrow b { font: 700 15px var(--font-ui); padding: 4px 12px; border-radius: 999px; background: var(--primary); color: var(--primary-ink); text-shadow: none; box-shadow: 0 6px 18px rgba(0,0,0,.3); } .pfe-ios-arrow i { font: 700 38px/1 system-ui, sans-serif; font-style: normal; } .pfe-ios-arrow.down { left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); animation: pfe-arrow-down 1.1s ease-in-out infinite; } .pfe-ios-arrow.up { right: 14px; top: calc(8px + env(safe-area-inset-top, 0px)); flex-direction: column-reverse; animation: pfe-arrow-up 1.1s ease-in-out infinite; } @keyframes pfe-arrow-down { 50% { transform: translate(-50%, 8px); } } @keyframes pfe-arrow-up { 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .pfe-ios-arrow { animation: none !important; } } /* 2.30: already-installed box on the Install page */ .pfe-inst-here { text-align: left; max-width: 640px; padding: 18px 20px; border-radius: 16px; background: var(--surface2); margin: 6px 0 18px; } /* 2.30: header never wider than the screen – the search box gives way to the buttons beside it */ @media (min-width: 1101px) { .pfe-header-in { min-width: 0; } .pfe-header-tools { min-width: 0; } #pfe-app .pfe-hsearch { flex: 1 1 220px !important; min-width: 170px !important; } #pfe-app .pfe-header-tools > * { flex-shrink: 0; } #pfe-app .pfe-header-tools > .pfe-hsearch { flex-shrink: 1; } } /* 2.40: one layout for every theme – the header keeps each theme's own colours or picture (data-look), while sizes and positions stay those of Title Cover; the menu and side navigation use the same UI font in every theme */ #pfe-app .pfe-m1, #pfe-app .pfe-m2, #pfe-app .pfe-nav li a, #pfe-app .pfe-nav h4 { letter-spacing: 0 !important; text-transform: none !important; } #pfe-app .pfe-m1 { font-family: var(--font-ui) !important; } #pfe-app .pfe-brand-lines b { font-size: 22px; line-height: 1.2; } #pfe-app .pfe-content { font-size: var(--reader-size); } /* 2.40: the picture and light headers keep their look on the fixed layout */ #pfe-app[data-look="image"] .pfe-header { background: linear-gradient(90deg, rgba(8,10,22,.82), rgba(8,10,22,.45) 60%, rgba(8,10,22,.25)), var(--hero-img) center 40% / cover; color: #fff; } #pfe-app[data-look="image"] .pfe-brand-lines b { text-shadow: 0 2px 10px rgba(0,0,0,.4); } #pfe-app[data-look="light"] .pfe-header { background: var(--surface); color: var(--primary); border-bottom: 3px solid var(--accent); } #pfe-app[data-look="light"] .pfe-iconbtn { background: var(--surface2); } #pfe-app[data-look="light"] .pfe-account-btn { border-color: var(--border); background: var(--surface2); } #pfe-app[data-look="light"] .pfe-logo { background: var(--surface2); box-shadow: inset 0 0 0 1.5px var(--border); } #pfe-app[data-look="light"] .pfe-hsearch input { background: var(--surface2); border-color: var(--border); box-shadow: none; color: var(--text); } #pfe-app[data-look="light"] .pfe-labelbtn { border-color: var(--border); background: var(--surface2); } #pfe-app[data-look="light"] .pfe-langsw-h { color: var(--accent); } #pfe-app[data-look="light"] .pfe-langsw-b { border-color: var(--border); background: var(--surface2); } #pfe-app[data-look="light"] .pfe-langsw button:hover { background: var(--surface); } #pfe-app[data-look="light"] .pfe-langsw button.on { background: var(--primary); color: var(--primary-ink, #fff); } /* 2.40: identical header size for every theme look (as Title Cover) */ #pfe-app[data-look] .pfe-header-in { padding-top: 10px !important; padding-bottom: 10px !important; } #pfe-app[data-look] .pfe-brand-lines b { font-size: var(--brand-fs, 22px) !important; } #pfe-app[data-look] .pfe-brand-lines b { font-family: var(--font-head); white-space: nowrap; } #pfe-app[data-look] .pfe-header { border-bottom-width: 0 !important; box-shadow: inset 0 -3px 0 var(--accent); } #pfe-app[data-look="gradient"] .pfe-header { box-shadow: none; } #pfe-app[data-look] .pfe-brand { flex: 0 0 auto; } #pfe-app[data-look] .pfe-brand-lines { width: 250px; min-width: 250px; overflow: hidden; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-look] .pfe-brand-lines { width: 250px; min-width: 250px; } @media (max-width: 1100px) { #pfe-app[data-look] .pfe-brand-lines { width: auto; min-width: 0; } } #pfe-app[data-look] .pfe-brand-lines b { display: block; max-width: 100%; overflow: hidden; } /* 2.40: every card style has the same border width (as Title Cover – a 4 px top line), so content never shifts; the card style changes only colour, shadow and frame look */ #pfe-app[data-look] #pfe-main .pfe-page { border-style: solid !important; border-width: 4px 0 0 0 !important; } #pfe-app[data-card="outline"] #pfe-main .pfe-page { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)) !important; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--primary) 22%, var(--border)); } #pfe-app[data-card="framed"] #pfe-main .pfe-page { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent), inset 0 0 0 4px var(--surface), inset 0 0 0 5px color-mix(in srgb, var(--accent) 60%, transparent); } #pfe-app:is([data-card="flat"], [data-card="shadow"], [data-card="glass"]) #pfe-main .pfe-page { border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important; } #pfe-app[data-look] #pfe-main .pfe-banner { margin-top: calc(-1 * var(--pad)) !important; } /* page headings: same size in every theme; a wider theme font is fitted, never wrapped onto a new line where it fits in Title Cover */ #pfe-app[data-look] #pfe-main .pfe-page > h1, #pfe-app[data-look] #pfe-main .pfe-banner h1 { letter-spacing: 0 !important; } #pfe-app[data-head="italic"] #pfe-main :is(.pfe-page > h1, .pfe-banner h1), #pfe-app[data-head="caps"] #pfe-main :is(.pfe-page > h1, .pfe-banner h1) { font-style: normal; text-transform: none; } #pfe-app[data-look] #pfe-main .pfe-banner h1 { font-size: clamp(30px, 4.2vw, 50px) !important; } /* 2.40: page titles take the same height in every theme font */ #pfe-app[data-look] #pfe-main .pfe-banner h1 { line-height: 1.12 !important; min-height: 0; } #pfe-app[data-look] #pfe-main .pfe-banner h1 { display: block; overflow: visible; max-height: none; } #pfe-app:is([data-lang="hi"], [data-lang="mr"])[data-look] #pfe-main .pfe-banner h1 { font-family: "Noto Serif Devanagari", Georgia, serif !important; } /* every line of a page title is exactly one line-height tall, whatever the theme font */ /* the framed-card ornament under a title is not drawn inside the page banner (it pushed the banner text down) */ #pfe-app[data-card="framed"] #pfe-main .pfe-banner h1::after { display: none !important; } /* 2.50: the file name next to each recording (Short → Introduction → Detailed → Complete) */ .pfe-mfname { font-size: .86em; opacity: .72; margin-left: 6px; overflow-wrap: anywhere; } /* ================================================================ 2.60 */ /* the sub-menu: a slim scroll bar of its own again – it shows on every device (phones and Macs hide normal scroll bars), so readers see at once that the sub-menu moves sideways. Drag it, click it, or use ‹ › and the ← → keys. */ #pfe-app .pfe-menu2 { position: relative; } .pfe-subbar { position: absolute; left: 52px; right: 52px; bottom: 1px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 10%, transparent); display: none; cursor: pointer; z-index: 2; transition: height .15s; } .pfe-menu2.over .pfe-subbar { display: block; } .pfe-subbar:hover, .pfe-subbar.drag { height: 6px; } .pfe-subbar i { position: absolute; top: 0; bottom: 0; left: 0; min-width: 28px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 42%, transparent); cursor: grab; } .pfe-subbar:hover i, .pfe-subbar.drag i { background: color-mix(in srgb, var(--primary) 70%, transparent); } .pfe-subbar.drag i { cursor: grabbing; } @media (max-width: 880px) { .pfe-subbar { left: 12px; right: 12px; } } /* a page that takes a moment to open: a calm moving line at the top, so a click never looks ignored */ html.pfe-loading #pfe-main { opacity: .55; transition: opacity .2s .1s; pointer-events: none; } html.pfe-loading body::before { content: ""; position: fixed; left: 0; top: 0; height: 3px; width: 40%; z-index: 100000; background: var(--accent, #c8a24a); animation: pfe-loadbar 1s ease-in-out infinite; } @keyframes pfe-loadbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } } /* Listen to the selected text */ .pfe-selpop { position: fixed; z-index: 99990; display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 4px; background: var(--surface, #fff); color: var(--ink, #222); border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 999px; box-shadow: 0 8px 26px rgba(0,0,0,.22); font: 600 14px/1 var(--font-ui, system-ui); animation: pfe-selin .18s ease-out; touch-action: none; user-select: none; -webkit-user-select: none; } @keyframes pfe-selin { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } } .pfe-selpop-grip { cursor: grab; padding: 4px 3px 4px 6px; font-size: 16px; opacity: .55; } .pfe-selpop-grip:active { cursor: grabbing; } .pfe-selpop button { border: 0; border-radius: 999px; padding: 8px 14px; font: inherit; cursor: pointer; white-space: nowrap; } .pfe-selpop-go { background: var(--primary); color: var(--primary-ink, #fff); } .pfe-selpop-go:hover { filter: brightness(1.08); } .pfe-selpop-x { background: color-mix(in srgb, var(--ink, #222) 8%, transparent); color: inherit; } .pfe-selpop-x:hover { background: color-mix(in srgb, #b32d2e 16%, transparent); color: #b32d2e; } .pfe-selpop-now { display: inline-flex; align-items: center; gap: 7px; padding: 0 6px; color: var(--primary); } .pfe-selpop-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .pfe-selpop-eq b { width: 3px; background: currentColor; border-radius: 2px; animation: pfe-eq .9s ease-in-out infinite; } .pfe-selpop-eq b:nth-child(2) { animation-delay: .2s; } .pfe-selpop-eq b:nth-child(3) { animation-delay: .4s; } @keyframes pfe-eq { 0%, 100% { height: 4px; } 50% { height: 14px; } } #pfe-app:is([data-lang="hi"], [data-lang="mr"]) ~ .pfe-selpop, html[lang^="hi"] .pfe-selpop, html[lang^="mr"] .pfe-selpop { font-family: 'Noto Sans Devanagari', var(--font-ui, system-ui); font-weight: 500; } /* Buy the book: front cover | the whole book turning | back cover */ .pfe-buyall .pfe-bookshow.pfe-bookshow3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) !important; gap: clamp(12px, 2.4vw, 36px) !important; align-items: center; } .pfe-bookshow3 .pfe-bookshow-3d { flex-direction: column; align-items: center; gap: 14px; padding: 4px 6px 18px; } .pfe-bookshow-cap { font: 600 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #777); } .pfe-bookshow3 .pfe-book3d { --w: clamp(150px, 15vw, 220px); } @media (max-width: 900px) { .pfe-buyall .pfe-bookshow.pfe-bookshow3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } .pfe-bookshow3 .pfe-bookshow-flat { grid-column: 1 / -1; order: -1; } } @media (max-width: 560px) { .pfe-bookshow3 .pfe-book3d { --w: 120px; --t: 18px; } } /* the back-cover book: the same book seen from behind, swaying the other way */ .pfe-book3d.rev .pfe-book3d-in { transform: rotateY(28deg) rotateX(4deg); animation-name: pfe-booksway-rev; } @keyframes pfe-booksway-rev { 0% { transform: rotateY(34deg) rotateX(5deg); } 100% { transform: rotateY(14deg) rotateX(2deg); } } .pfe-book3d.rev img.f { border-radius: 6px 2px 2px 6px; box-shadow: inset -4px 0 10px rgba(0,0,0,.25); } .pfe-book3d.rev img.b { border-radius: 2px 6px 6px 2px; } .pfe-book3d.rev .spine { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); } .pfe-book3d.rev .pages { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 3px)); } .pfe-book3d.rev .pfe-book3d-sh { left: -4%; right: 6%; } .pfe-book3d.rev.flip .pfe-book3d-in { transform: rotateY(180deg) rotateX(2deg); } /* Pay what you think is right: a little more room between the steps and before the feedback button */ .pfe-pay-fb { margin: 10px 0 0; } #pfe-paypage .pfe-pay-step + .pfe-pay-step, .pfe-buyall .pfe-pay .pfe-pay-step + .pfe-pay-step { margin-top: 22px !important; } #pfe-paypage .pfe-pay-fb, .pfe-buyall .pfe-pay .pfe-pay-fb { margin-top: 24px !important; } /* install: which language the app opens in */ .pfe-inst1-lang { margin: -4px 0 14px !important; } /* 2.70: keep a recording in the app for listening without internet */ .pfe-offbtn { border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); background: transparent; color: var(--primary); border-radius: 999px; padding: 4px 10px; font: 600 12.5px/1 var(--font-ui); cursor: pointer; margin-left: 4px; white-space: nowrap; } .pfe-offbtn.on { background: color-mix(in srgb, #2f7d5b 14%, transparent); color: #2f7d5b; border-color: color-mix(in srgb, #2f7d5b 40%, transparent); } .pfe-offbtn:disabled { opacity: .7; cursor: progress; } /* 2.80: the owners' 📊 Visitors link in the header – a small icon only */ .pfe-visit-btn { text-decoration: none; padding: 0 10px !important; min-width: 0 !important; font-size: 18px; } .pfe-visit-btn .lbl { display: none !important; } .pfe-visitors #pfe-st select { width: auto !important; max-width: 220px; } .pfe-visitors ~ * .pfe-reader-tools, .pfe-page.pfe-visitors .pfe-reader-tools { display: none; } .pfe-visitors .st-range { color: var(--ink, inherit) !important; opacity: .85; } /* 3.30: Glossary words explained on tap */ .pfe-gl { text-decoration: underline dotted color-mix(in srgb, var(--primary) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; border-radius: 3px; } .pfe-gl:hover, .pfe-gl.on, .pfe-gl:focus-visible { background: color-mix(in srgb, var(--primary) 12%, transparent); outline: none; } .pfe-glpop { position: fixed; z-index: 99980; background: var(--surface, #fff); color: var(--ink, #222); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); padding: 12px 14px; font: 15px/1.55 var(--font-ui, system-ui); animation: pfe-selin .15s ease-out; } .pfe-glpop b { color: var(--primary); font-size: 15.5px; } .pfe-glpop small { opacity: .75; } .pfe-glpop p { margin: 6px 0 8px; } .pfe-glpop .pfe-glmore { font-size: 13px; font-weight: 600; } /* 3.30: save a volume for reading offline */ .pfe-voloff { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; } /* 3.40: long unbroken text (web addresses, fill-in lines ____) wraps on narrow screens instead of widening the page */ .pfe-content, .pfe-content p, .pfe-content li, .pfe-content td, .pfe-content th, .pfe-page p, .pfe-page li { overflow-wrap: anywhere; } .pfe-content pre, .pfe-content code { white-space: pre-wrap; overflow-wrap: anywhere; } /* 3.40: the header and the line under the menu have the same height in every theme (a theme font could make them 1 px shorter) */ #pfe-app .pfe-brand { min-height: 63px; } #pfe-app .pfe-socialbar { min-height: 32px; box-sizing: border-box; } /* 3.50: open this page in a browser that can install */ .pfe-inst-open { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 14px !important; } .pfe-inst-open .pfe-btn { text-decoration: none; } .pfe-inst-open .pfe-small { max-width: 340px; text-align: center; } /* 3.50: without internet */ #pfe-netbar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 99970; max-width: min(640px, calc(100vw - 24px)); background: #3a3a3a; color: #fff; padding: 10px 16px; border-radius: 12px; font: 14px/1.45 var(--font-ui, system-ui); box-shadow: 0 6px 20px rgba(0,0,0,.25); } #pfe-netbar span { opacity: .85; } .pfe-netneed { opacity: .5; filter: grayscale(.6); } .pfe-neednet { margin: 8px 0 0; font-weight: 600; color: var(--primary); } /* 4.00: thumbnails, ⭐ first and sharing one recording */ .pfe-gthumb { width: 64px; height: 36px; object-fit: cover; border-radius: 5px; vertical-align: middle; margin-right: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.18); background: #ddd; } .pfe-gstar { font-size: 14px; } .pfe-gname.l-wow { color: #8a4b00; } .pfe-gname.l-animation { color: #4a2a8a; } .pfe-gname.l-reading { color: #1d5e3a; } .pfe-mshare { min-width: 34px; } .pfe-manact select { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line, #ccd); background: var(--surface, #fff); color: inherit; width: auto; max-width: 100%; flex: 0 1 auto; } @media (max-width: 520px) { .pfe-gthumb { width: 48px; height: 27px; margin-right: 6px; } } /* 4.10: where each story and shlok is in the book (volume · chapter) */ .pfe-brefs { margin: -4px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; } .pfe-bref { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--primary, #2b4c7e) 8%, transparent); border: 1px solid color-mix(in srgb, var(--primary, #2b4c7e) 22%, transparent); border-radius: 999px; padding: 2px 12px; line-height: 1.6; } .pfe-bref i { font-style: normal; opacity: .55; } .pfe-bref a { color: inherit; text-decoration: none; } .pfe-bref a:hover { text-decoration: underline; } .pfe-bref-v { font-weight: 700; color: var(--primary, #2b4c7e); } .pfe-story-ch .pfe-bref { font-size: 12.5px; padding: 1px 10px; } .pfe-tstory-ft .pfe-bref { background: none; border: 0; padding: 0; font-size: 12.5px; } .pfe-tshlok .pfe-brefs { margin: 4px 0 6px; font-size: 12.5px; } .pfe-mfh .tt .pfe-mfref { display: block; font-style: normal; font-size: 12px; opacity: .75; margin-top: 1px; } /* 4.10: Video Book / Audio Book – stories and shloks by topic, in panels that open and close */ .pfe-tpanels { display: grid; gap: 12px; } .pfe-tpanel { border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); border-radius: 16px; background: var(--surface, #fff); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s; } .pfe-tpanel[open] { box-shadow: 0 8px 26px rgba(0,0,0,.10); } .pfe-tpanel > summary { list-style: none; cursor: pointer; } .pfe-tpanel > summary::-webkit-details-marker { display: none; } .pfe-tpanel-h { display: flex; align-items: center; gap: 14px; padding: 14px 16px; position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 16%, var(--surface, #fff)) 0%, var(--surface, #fff) 75%); } .pfe-tpanel-h::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 34%; background: var(--timg) center/cover no-repeat; opacity: .13; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); pointer-events: none; } .pfe-tpanel-ic { flex: 0 0 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--tc); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--tc) 45%, transparent); } .pfe-tpanel-t { flex: 1; min-width: 0; position: relative; z-index: 1; } .pfe-tpanel-t b { display: block; font-family: var(--font-head, inherit); font-size: 18px; color: var(--tc); line-height: 1.25; } .pfe-tpanel-t small { display: block; opacity: .78; font-size: 13px; margin-top: 2px; } .pfe-tpanel-n { position: relative; z-index: 1; text-align: right; font-size: 12.5px; white-space: nowrap; opacity: .9; } .pfe-tpanel-n b { font-size: 18px; color: var(--tc); } .pfe-tpanel-n i { display: block; font-style: normal; opacity: .75; } .pfe-tpanel-x { position: relative; z-index: 1; flex: 0 0 32px; height: 32px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); background: var(--surface, #fff); } .pfe-tpanel-x::before { content: ''; position: absolute; left: 50%; top: 45%; width: 9px; height: 9px; border-right: 2px solid var(--tc); border-bottom: 2px solid var(--tc); transform: translate(-50%, -50%) rotate(45deg); transition: transform .2s; } .pfe-tpanel[open] .pfe-tpanel-x::before { transform: translate(-50%, -20%) rotate(225deg); } .pfe-tpanel:not(.has) .pfe-tpanel-h { filter: saturate(.6); } .pfe-tpanel-b { padding: 12px 14px 6px; border-top: 1px solid color-mix(in srgb, var(--tc) 20%, transparent); animation: pfeTpIn .25s ease; } .pfe-tpanel-more { margin: 6px 2px 8px; font-size: 13.5px; } .pfe-tpanel-more a { color: var(--tc); font-weight: 600; text-decoration: none; } .pfe-tpanel-all { display: inline-flex; gap: 6px; } @keyframes pfeTpIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (max-width: 600px) { .pfe-tpanel-h { padding: 12px; gap: 10px; flex-wrap: wrap; } .pfe-tpanel-ic { flex-basis: 38px; height: 38px; font-size: 20px; } .pfe-tpanel-t b { font-size: 16px; } .pfe-tpanel-t small { display: none; } .pfe-tpanel-n b { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .pfe-tpanel-b { animation: none; } } /* ================================================================== 4.20 */ /* Start here */ .pfe-start { margin: 22px 0 8px; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #2b4c7e) 9%, var(--surface, #fff)), var(--surface, #fff)); border: 1px solid color-mix(in srgb, var(--primary, #2b4c7e) 16%, transparent); } .pfe-start-h h2 { margin: 2px 0 14px; font-family: var(--font-head, inherit); font-size: clamp(20px, 2.6vw, 28px); color: var(--primary, #2b4c7e); } .pfe-start-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .pfe-start-b { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 18px; text-decoration: none; color: #fff; min-height: 128px; position: relative; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.12); transition: transform .18s, box-shadow .18s; } .pfe-start-b:hover, .pfe-start-b:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.18); } .pfe-start-b.b0 { background: linear-gradient(135deg, #2b4c7e, #4a76b8); } .pfe-start-b.b1 { background: linear-gradient(135deg, #a23b3b, #d8664d); } .pfe-start-b.b2 { background: linear-gradient(135deg, #2f6b4f, #4ea37a); } .pfe-start-b .ic { font-size: 30px; line-height: 1; } .pfe-start-b b { font-size: 22px; font-family: var(--font-head, inherit); } .pfe-start-b small { opacity: .92; font-size: 14px; line-height: 1.35; } .pfe-start a.pfe-start-b, .pfe-start a.pfe-start-b b, .pfe-start a.pfe-start-b small, .pfe-start a.pfe-start-b .ic { color: #fff !important; text-decoration: none; } .pfe-start-h h2, .pfe-start-q h3 { color: var(--primary, #2b4c7e); } .pfe-start-chip, .pfe-cont-i, .pfe-mode, .pfe-dock, .pfe-tpanel { color: var(--text, #222); } .pfe-cont-i b, .pfe-cont-i small, .pfe-dock-t b, .pfe-dock-t small { color: var(--text, #222); } .pfe-start-q h3 { margin: 20px 0 10px; font-size: 18px; } .pfe-start-chips { display: flex; flex-wrap: wrap; gap: 8px; } .pfe-start-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; text-decoration: none; color: inherit; background: var(--surface, #fff); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); font-size: 14.5px; transition: background .15s, transform .15s; } .pfe-start-chip:hover, .pfe-start-chip:focus-visible { background: color-mix(in srgb, var(--tc) 14%, var(--surface, #fff)); transform: translateY(-1px); } @media (max-width: 700px) { .pfe-start { padding: 16px; } .pfe-start-big { grid-template-columns: 1fr; gap: 10px; } .pfe-start-b { min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; column-gap: 12px; } .pfe-start-b small { flex-basis: 100%; } } /* Continue bar */ .pfe-cont { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 0 0 12px; position: relative; } .pfe-cont-i { flex: 1 1 260px; display: flex; gap: 10px; align-items: center; padding: 8px 40px 8px 12px; border-radius: 14px; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--accent, #c27a1a) 10%, var(--surface, #fff)); border: 1px solid color-mix(in srgb, var(--accent, #c27a1a) 28%, transparent); min-width: 0; } .pfe-cont-i .ic { font-size: 20px; } .pfe-cont-i small { display: block; font-size: 12px; opacity: .8; } .pfe-cont-i b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; } .pfe-cont-i span:last-child { min-width: 0; } .pfe-cont-x { position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; font-size: 18px; cursor: pointer; opacity: .6; color: inherit; } .pfe-cont-x:hover { opacity: 1; } /* Watch · Listen · Read */ .pfe-modes { margin: 6px 0 16px; } .pfe-modes-row { display: flex; flex-wrap: wrap; gap: 10px; } .pfe-mode { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--primary, #2b4c7e) 25%, transparent); background: var(--surface, #fff); cursor: pointer; font: inherit; color: inherit; text-align: left; box-shadow: 0 2px 6px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s; } .pfe-mode:hover, .pfe-mode:focus-visible, .pfe-mode.on { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12); border-color: var(--primary, #2b4c7e); } .pfe-mode img { width: 64px; height: 40px; object-fit: cover; border-radius: 9px; } .pfe-mode .ic { width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; border-radius: 10px; background: color-mix(in srgb, var(--primary, #2b4c7e) 10%, transparent); } .pfe-mode b { display: block; font-size: 15px; } .pfe-mode small { display: block; font-size: 12px; opacity: .75; } .pfe-mode.read .ic { background: color-mix(in srgb, var(--accent, #c27a1a) 16%, transparent); } @media (max-width: 520px) { .pfe-mode { flex: 1 1 calc(50% - 10px); } } /* Mini player */ .pfe-dock { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 9990; width: min(720px, calc(100vw - 20px)); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--surface, #fff); color: var(--text, #222); box-shadow: 0 12px 34px rgba(0,0,0,.28); border: 1px solid var(--border, #ddd); animation: pfeDockIn .25s ease; } .pfe-dock-m audio { display: none; } .pfe-dock-m video { width: 120px; height: 68px; border-radius: 10px; background: #000; display: block; object-fit: cover; } .pfe-dock-t { flex: 1; min-width: 0; } .pfe-dock-t small { display: block; font-size: 11.5px; opacity: .7; } .pfe-dock-t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } .pfe-dock-b { width: 38px; height: 38px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--primary, #2b4c7e) 25%, transparent); background: var(--surface, #fff); color: inherit; display: grid; place-items: center; font-size: 17px; cursor: pointer; text-decoration: none; flex: 0 0 auto; } .pfe-dock-b.x { border: 0; font-size: 22px; opacity: .7; } html.pfe-docked body { padding-bottom: 92px; } @keyframes pfeDockIn { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } @media (max-width: 520px) { .pfe-dock-m video { width: 84px; height: 48px; } .pfe-dock-b { width: 34px; height: 34px; } } @media print { .pfe-dock, .pfe-cont, .pfe-start { display: none !important; } } /* ================================================================== 4.30 */ /* Up next */ .pfe-upnext { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--surface, #fff); color: var(--text, #222); border: 1px solid var(--border, #ddd); box-shadow: 0 8px 22px rgba(0,0,0,.12); animation: pfeTpIn .25s ease; } .pfe-upnext img { width: 72px; height: 44px; object-fit: cover; border-radius: 9px; } .pfe-upnext .ic { font-size: 22px; } .pfe-upnext .tx { flex: 1 1 200px; min-width: 0; } .pfe-upnext .tx small { display: block; font-size: 12px; opacity: .75; } .pfe-upnext .tx > b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pfe-upnext .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--primary, #2b4c7e); color: #fff; font-size: 11px; } /* A topic as a complete place */ .pfe-tpath { list-style: none; margin: 8px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: none; } .pfe-tpath li a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; text-decoration: none; color: var(--text, #222); background: var(--surface, #fff); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); transition: transform .15s, box-shadow .15s; } .pfe-tpath li a:hover, .pfe-tpath li a:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.10); } .pfe-tpath .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tc); color: #fff; font-size: 12px; font-weight: 700; } .pfe-tpath small { opacity: .7; } .pfe-tcourse { margin: 0 0 12px; } .pfe-tcourse .pfe-tpanel-h::after { display: none; } /* Polish */ img.pfe-fade { opacity: 0; transition: opacity .45s ease; } img.pfe-fade.in { opacity: 1; } .pfe-new { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 18px; vertical-align: middle; color: #fff; background: linear-gradient(90deg, #e0457b, #f08a24); letter-spacing: .02em; } .pfe-mins { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; opacity: .8; white-space: nowrap; } .pfe-brefs .pfe-mins { padding: 2px 10px; } @media (prefers-reduced-motion: reduce) { img.pfe-fade { transition: none; opacity: 1; } .pfe-upnext { animation: none; } } /* ================================================================== 4.40 */ .pfe-navtopic > li:first-child a { border-left: 4px solid var(--tc); } .pfe-navtopic li.sub a.on { box-shadow: inset 4px 0 0 var(--tc); font-weight: 600; background: var(--primary, #2b4c7e) !important; color: var(--primary-ink, #fff) !important; } .pfe-navtopic li.sub a.on * { color: inherit !important; } /* ================================================================== 4.50 */ /* choose your app */ .pfe-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 10px 0; } .pfe-app { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface, #fff); color: var(--text, #222); border: 1px solid var(--border, #ddd); box-shadow: 0 4px 14px rgba(0,0,0,.06); } .pfe-app.pick { border: 2px solid var(--accent, #c27a1a); box-shadow: 0 10px 28px rgba(0,0,0,.14); } .pfe-app-h { display: flex; gap: 10px; align-items: flex-start; } .pfe-app-ic { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--primary, #2b4c7e); font-size: 18px; } .pfe-app-h b { display: block; font-size: 15px; line-height: 1.3; } .pfe-app-h small { display: block; opacity: .75; font-size: 12.5px; } .pfe-app-qr { width: 100%; max-width: 220px; height: auto; align-self: center; margin-top: auto; border-radius: 10px; background: #fff; } .pfe-app-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .pfe-app-note { margin-top: 6px; } /* My Account: the buttons on the coloured band are always readable */ .pfe-dash-head .pfe-btn.ghost, .pfe-dash-head a.pfe-btn.ghost { color: #fff !important; border-color: rgba(255,255,255,.8) !important; background: rgba(0,0,0,.22) !important; text-shadow: 0 1px 1px rgba(0,0,0,.25); } .pfe-dash-head .pfe-btn.ghost:hover, .pfe-dash-head a.pfe-btn.ghost:hover { background: rgba(0,0,0,.35) !important; } /* 4.70: share the Shlok of the day and the Story of the day */ .pfe-dayshare { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; } .pfe-dayshare .pfe-wa { background: #1fa855 !important; color: #fff !important; border-color: #1fa855 !important; } /* ================================================================ 4.80: card view and list view */ .pfe-vbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; } .pfe-vbar .pfe-qchips { margin: 0; } .pfe-vsw { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .pfe-vsw button { border: 0; background: none; color: var(--text); font: 600 13.5px/1 var(--font-ui); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; } .pfe-vsw button.on { background: var(--primary); color: var(--primary-ink, #fff); } .pfe-vsw button:not(.on):hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } .pfe-qf-none { margin: 4px 0 12px; } /* pictures of the cards */ .pfe-mpic, .pfe-cpic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, var(--fc, var(--primary)), color-mix(in srgb, var(--fc, var(--primary)) 45%, #10162e)); color: #fff; } .pfe-mpic img, .pfe-cpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .pfe-mpic .ph-ic, .pfe-cpic .ph-ic { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; opacity: .85; } .pfe-mpic.soon { cursor: default; display: grid; place-items: center; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--fc, #888) 14%, var(--surface)) 0 12px, color-mix(in srgb, var(--fc, #888) 8%, var(--surface)) 12px 24px); color: var(--muted); } .pfe-mpic.soon .ph-ic { position: static; font-size: 26px; } .pfe-mpic.soon .ph-t { font: 600 13px var(--font-ui); } .pfe-mpic-go { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,14,30,.55); backdrop-filter: blur(4px); font-size: 20px; color: #fff; transition: transform .2s, background .2s; } .pfe-mpic:hover .pfe-mpic-go { transform: scale(1.12); background: var(--fc, var(--primary)); } .pfe-mpic:hover img, .pfe-ccard:hover .pfe-cpic img { transform: scale(1.05); } .pfe-mpic-len { position: absolute; right: 8px; bottom: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; font: 600 12px/1.5 var(--font-ui); } .pfe-mpic-new { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: #e8505b; color: #fff; font: 700 11.5px/1.6 var(--font-ui); letter-spacing: .02em; } .pfe-mpic-done { position: absolute; right: 8px; top: 8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; display: grid; place-items: center; background: #1d9a5b; color: #fff; font: 700 12.5px var(--font-ui); box-shadow: 0 2px 6px rgba(0,0,0,.25); } .pfe-mpic-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.35); } .pfe-mpic-bar i { display: block; height: 100%; background: #e8505b; } .pfe-cstate { position: absolute; right: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font: 600 11.5px/1.6 var(--font-ui); } /* Video Book / Audio Book: the frames become cards */ .pfe-mlist:not(.pfe-cards) .pfe-mpic { display: none; } .pfe-cards .pfe-mth { display: none; } .pfe-cards .pfe-mgb, .pfe-cards .pfe-mflat, .pfe-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; align-items: start; } .pfe-cards .pfe-mflat { margin: 6px 0 16px; } .pfe-cards .pfe-tpanel-more { grid-column: 1 / -1; } .pfe-cards .pfe-mframe { display: flex; flex-direction: column; margin: 0; border-left-width: 1px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s; } .pfe-cards .pfe-mframe:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.12); } .pfe-cards .pfe-mfh { align-items: flex-start; padding: 10px 12px 6px; background: var(--surface); border-top: 3px solid var(--fc); } .pfe-cards .pfe-mfh .no { min-width: 28px; height: 28px; font-size: 12px; } .pfe-cards .pfe-mfh .tt b { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pfe-cards .pfe-mitems { padding: 0 12px 10px; } .pfe-cards .pfe-mitem .vt { font-size: 13px; } .pfe-cards .pfe-mframe:not(.has) { opacity: .8; } /* stories, shloks and tests as cards */ .pfe-ccard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text) !important; text-decoration: none !important; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s, border-color .2s; } a.pfe-ccard:hover, .pfe-shcard:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.12); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); } .pfe-cbody { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1; } .pfe-cref { color: var(--accent); font: 600 12px/1.4 var(--font-ui); letter-spacing: .02em; } .pfe-ctitle { font: 700 16.5px/1.35 var(--font-ui); color: var(--text) !important; text-decoration: none !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pfe-cex { color: var(--muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pfe-cfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; font: 600 13px var(--font-ui); } .pfe-cgo { color: var(--primary); margin-left: auto; } .pfe-shpic.ph { display: grid; place-items: center; padding: 14px 18px; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%), linear-gradient(135deg, #2a1b4a, #6b3d1f); } .pfe-shsa { font-family: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif; font-size: 19px; line-height: 1.5; text-align: center; color: #fff4dc; text-shadow: 0 1px 6px rgba(0,0,0,.4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pfe-shcard .pfe-mbar { margin: 6px 0 0; } .pfe-shcard .pfe-mbar .pfe-tool { font-size: 12.5px; padding: 5px 9px; } /* frames of cards that open and close */ .pfe-cframe { --fc: var(--primary); margin: 14px 0; border: 1px solid color-mix(in srgb, var(--fc) 35%, var(--border)); border-radius: 16px; background: color-mix(in srgb, var(--fc) 4%, var(--surface)); overflow: hidden; } .pfe-cframe-h { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; border-left: 6px solid var(--fc); } .pfe-cframe-h::-webkit-details-marker { display: none; } .pfe-cframe-h b { flex: 1; font: 700 16px/1.35 var(--font-ui); color: var(--text); } .pfe-cframe-h small { color: var(--muted); font: 600 12.5px var(--font-ui); white-space: nowrap; } .pfe-cframe-h .pfe-tpanel-x { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; transition: transform .2s; } .pfe-cframe-h .pfe-tpanel-x::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; } .pfe-cframe[open] .pfe-cframe-h .pfe-tpanel-x { transform: rotate(180deg); } .pfe-cframe > .pfe-cgrid { padding: 4px 16px 18px; } /* Continue watching */ .pfe-ccont-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 6px 0 14px; } .pfe-ccont { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text) !important; text-decoration: none !important; } .pfe-ccont:hover { border-color: var(--primary); } .pfe-ccont-pic { position: relative; flex: none; width: 92px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), #10162e); color: #fff; } .pfe-ccont-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pfe-ccont-t { min-width: 0; } .pfe-ccont-t small { display: block; color: var(--accent); font: 600 11.5px var(--font-ui); } .pfe-ccont-t b { display: block; font: 600 13.5px/1.3 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the left pane: On this page */ .pfe-onpage { margin-top: 10px; } .pfe-onpage a.on { background: color-mix(in srgb, var(--primary) 14%, transparent); } @media (max-width: 640px) { .pfe-cards .pfe-mgb, .pfe-cards .pfe-mflat, .pfe-cgrid { grid-template-columns: 1fr 1fr; gap: 10px; } .pfe-cex { -webkit-line-clamp: 2; font-size: 13px; } .pfe-ctitle { font-size: 14.5px; } .pfe-cbody { padding: 9px 10px 11px; } .pfe-mpic-go { width: 42px; height: 42px; margin: -21px 0 0 -21px; font-size: 16px; } .pfe-vsw button { padding: 7px 11px; } .pfe-cards .pfe-mitem .vt { font-size: 12px; } } @media (max-width: 380px) { .pfe-cards .pfe-mgb, .pfe-cards .pfe-mflat, .pfe-cgrid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .pfe-ccard, .pfe-cards .pfe-mframe, .pfe-mpic img, .pfe-cpic img { transition: none; } } a.pfe-shpic, a.pfe-shpic:hover { text-decoration: none !important; } .pfe-cards .pfe-mitems img, .pfe-cards .pfe-mitems .pfe-mth { display: none; } .pfe-cpic img.pfe-spot { transform: scale(var(--pz, 1.2)); } .pfe-ccard:hover .pfe-cpic img.pfe-spot { transform: scale(calc(var(--pz, 1.2) + .05)); } .pfe-cards .pfe-mframe:not(.has) .pfe-mpic.soon { aspect-ratio: 16 / 5; } .pfe-cref { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 4.81: a cover of its own for each story (until its video has a picture) */ .pfe-cpic.pfe-scover { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 14px 18px; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.22), transparent 45%), linear-gradient(135deg, var(--sc, var(--primary)), color-mix(in srgb, var(--sc, var(--primary)) 40%, #0e1428)); cursor: pointer; } .pfe-scover-no { font: 800 34px/1 var(--font-ui); color: rgba(255,255,255,.9); letter-spacing: -.02em; } .pfe-scover-no::before { content: "#"; opacity: .55; margin-right: 2px; font-weight: 600; } .pfe-scover-t { font-family: var(--font-head, Georgia, serif); font-size: 18px; line-height: 1.3; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pfe-scover-no.case { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .9; } .pfe-scover-no.case::before { content: none; } .pfe-app-ok { margin: 0; text-align: center; color: #1d9a5b; font: 700 14px var(--font-ui); } /* ================================================================ 4.90: simple card home of the app */ .pfe-simple-hi { text-align: center; margin: 4px 0 14px; } .pfe-simple-hi b { display: block; font: 800 24px/1.25 var(--font-ui); color: var(--primary); } .pfe-simple-hi span { color: var(--muted); font-size: 15px; } .pfe-simple-top { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; } .pfe-simple-h { font-size: clamp(24px, 6vw, 34px) !important; margin: 4px 0 14px !important; } .pfe-scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; } .pfe-scard2 { --c: #5f3dc4; position: relative; } .pfe-scard2-a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 16px 12px 14px; border-radius: 20px; text-align: center; text-decoration: none !important; color: #fff !important; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 35%, transparent); transition: transform .15s, box-shadow .15s; overflow: hidden; } .pfe-scard2-a:active { transform: scale(.97); } .pfe-scard2-a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 45%, transparent); } .pfe-scard2-pic { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); overflow: hidden; flex: none; } .pfe-scard2-pic .ic { position: relative; z-index: 1; font-size: 38px; line-height: 1; font-weight: 800; font-family: var(--font-ui); text-shadow: 0 2px 6px rgba(0,0,0,.25); } .pfe-scard2-pic.im { width: 100%; height: 92px; border-radius: 14px; } .pfe-scard2-pic.im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; } .pfe-scard2-pic.im .ic { font-size: 34px; } .pfe-scard2-a b { font: 800 19px/1.25 var(--font-ui); } .pfe-scard2-a small { font-size: 13px; opacity: .9; line-height: 1.3; } .pfe-scard2-say { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 17px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2); } @media (max-width: 640px) { .pfe-scards { grid-template-columns: 1fr 1fr; gap: 10px; } .pfe-scard2-a { min-height: 132px; padding: 14px 8px 12px; border-radius: 16px; } .pfe-scard2-pic { width: 60px; height: 60px; } .pfe-scard2-pic .ic { font-size: 32px; } .pfe-scard2-a b { font-size: 17px; } } html.pfe-storeapp [data-act="pay"], html.pfe-storeapp .pfe-paycard, html.pfe-storeapp .pfe-paygrid #pfe-paypage { display: none !important; } /*DASH500-START*/ /* ================================================================== 5.00: Home dashboard and modules */ /* modes: the dashboard has its own header; a module has its menu lines and one reading pane, no side panes */ #pfe-app[data-mode="dash"] .pfe-header, #pfe-app[data-mode="dash"] .pfe-menubar, #pfe-app[data-mode="dash"] .pfe-socialbar, #pfe-app[data-mode="dash"] #pfe-modslot, #pfe-app[data-mode="dash"] .pfe-nav, #pfe-app[data-mode="dash"] .pfe-aside, #pfe-app[data-mode="dash"] .pfe-mobile-bar, #pfe-app[data-mode="dash"] .pfe-progress-top { display: none !important; } #pfe-app[data-mode="dash"] .pfe-shell { display: block !important; max-width: none !important; padding: 0 !important; } #pfe-app[data-mode="dash"] .pfe-main { padding: 0 !important; } #pfe-app[data-mode="mod"] .pfe-aside { display: none !important; } #pfe-app[data-mode="mod"] .pfe-shell { display: grid !important; grid-template-columns: clamp(230px, 16vw, 300px) minmax(0, 1fr) !important; max-width: none !important; width: 100% !important; margin: 0 auto !important; padding: 0 clamp(10px, 2vw, 24px) 30px !important; } @media (max-width: 1100px) { #pfe-app[data-mode="mod"] .pfe-shell { grid-template-columns: minmax(0, 1fr) !important; } } /* the module's left pane: Home dashboard, the module's name, its menus with their sub-menus */ .pfe-navhome { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--primary); color: var(--primary-ink) !important; font-weight: 700; text-decoration: none !important; } .pfe-navhome:hover { filter: brightness(1.08); } .pfe-nav h4.pfe-navmod { margin: 6px 0 8px; font-size: 15px; color: var(--primary); } .pfe-navgrp { border-bottom: 1px solid var(--border); padding: 2px 0; } .pfe-navgrp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 4px; font-weight: 700; } .pfe-navgrp > summary::-webkit-details-marker { display: none; } .pfe-navgrp > summary::before { content: '▸'; font-size: 12px; color: var(--muted); transition: transform .15s; } .pfe-navgrp[open] > summary::before { transform: rotate(90deg); } .pfe-navgrp > summary a { color: var(--text) !important; text-decoration: none; flex: 1; } .pfe-navgrp > summary a.on, .pfe-navgrp li a.on { color: var(--primary) !important; } .pfe-navgrp ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 18px; } .pfe-navgrp li a { display: block; padding: 5px 6px; border-radius: 8px; font-size: 14.5px; color: var(--text) !important; text-decoration: none; } .pfe-navgrp li a:hover, .pfe-navgrp li a.on { background: color-mix(in srgb, var(--primary) 10%, transparent); } .pfe-modbar { display: inline-flex; align-items: center; gap: 8px; } .pfe-modbar a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; white-space: nowrap; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); transition: transform .18s ease, box-shadow .18s ease; } .pfe-modbar a:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); } .pfe-modbar .pfe-modhome { background: var(--primary) !important; color: var(--primary-ink) !important; border-color: var(--primary) !important; } .pfe-modbar .pfe-modhome * { color: inherit !important; } .pfe-modbar .pfe-modfull { color: var(--text) !important; } #pfe-app[data-mode="mod"] .pfe-socialbar { display: none !important; } /* the complete series: side panes as chosen in Website settings → General */ #pfe-app[data-mode="main"][data-panes="none"] .pfe-nav, #pfe-app[data-mode="main"][data-panes="none"] .pfe-aside, #pfe-app[data-mode="main"][data-panes="none"] .pfe-mobile-bar, #pfe-app[data-mode="main"][data-panes="none"] .pfe-socialbar { display: none !important; } #pfe-app[data-mode="main"][data-panes="none"] .pfe-shell { display: block !important; max-width: none !important; width: 100% !important; padding: 0 clamp(10px, 2vw, 24px) 30px !important; } #pfe-app[data-mode="main"][data-panes="left"] .pfe-aside { display: none !important; } #pfe-app[data-mode="main"][data-panes="left"] .pfe-shell { grid-template-columns: clamp(240px, 16.5vw, 320px) minmax(0, 1fr) !important; } @media (max-width: 1320px) { #pfe-app[data-mode="main"][data-panes="left"] .pfe-shell { grid-template-columns: 230px minmax(0, 1fr) !important; } } @media (max-width: 1100px) { #pfe-app[data-mode="main"][data-panes="left"] .pfe-shell { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 1640px) { .pfe-modbar .pfe-modfull span { display: none; } .pfe-modbar .pfe-modfull { padding: 6px 10px; } } @media (max-width: 1240px) { .pfe-modbar a span { display: none; } .pfe-modbar a { padding: 6px 10px; } } /* ------------------------------------------------------------------ the dashboard */ .dz { --r: 24px; background: radial-gradient(1200px 600px at 50% -10%, var(--d-soft), transparent 70%), var(--d-bg); color: var(--d-ink); font-family: var(--font-body, 'Poppins', system-ui, sans-serif); min-height: 100vh; } .dz *, .dz *::before, .dz *::after { box-sizing: border-box; } .dz a, .dz a:hover, .pfe-main .dz a, .pfe-main .dz a:hover { color: var(--d-ink) !important; text-decoration: none !important; } .dz a.dz-c, .dz button.dz-c, .dz a.dz-pcell, .dz a.dz-ptile-a, .dz .dz-sun a.dz-card, .dz .dz-bento a.dz-card { color: #2B2D42 !important; } .dz a *, .dz button * { color: inherit; } .dz, .dz * { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important; } .dz .dz-vt small, .dz .dz-d, .dz .dz-pt small { color: var(--d-mu) !important; } .dz button { font: inherit; color: inherit; cursor: pointer; } .dz-in { width: 100%; max-width: none; margin: 0 auto; padding: 22px clamp(12px, 3vw, 56px) 34px; display: flex; flex-direction: column; gap: 24px; } .dz-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 12px clamp(12px, 2.4vw, 32px); border-bottom: 1px solid var(--d-bd); background: var(--d-bg); } .dz-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 4px 8px; } .dz-lotus { color: var(--d-deep); } .dz-title { text-align: center; font-weight: 700; font-size: clamp(12px, 1.25vw, 17px); line-height: 1.4; letter-spacing: .32em; text-transform: uppercase; color: var(--d-ink); } .dz-brand:hover .dz-lotus { transform: scale(1.08); transition: transform .2s; } .dz-headr { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } .dz-headr .pfe-account-btn .lbl { display: none; } .dz-about { padding: 10px 20px; border-radius: 999px; border: 2px solid var(--d-acc); font-weight: 700; white-space: nowrap; } .dz-about:hover { background: var(--d-acc); } .dz-top { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .dz-greet { color: var(--d-deep); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; font-size: 15px; } .dz-welcome { margin: 0; font-family: var(--font-head, inherit); font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; color: var(--d-ink); } .dz-search { position: relative; width: 100%; max-width: 760px; display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--d-bd); border-radius: 999px; padding: 6px 6px 6px 22px; } .dz-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; min-height: 44px; color: var(--d-ink); } .dz-sbtn { border: 0; background: var(--d-acc); border-radius: 999px; padding: 12px 22px; font-weight: 700; } .dz-search .pfe-search-results { text-align: left; } .dz-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .dz-chip { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--d-bd); font-size: 15px; min-height: 42px; display: inline-flex; align-items: center; } .dz-chip:hover { background: var(--d-soft); } .dz-h2 { margin: 0 0 14px; font-family: var(--font-head, inherit); font-size: clamp(22px, 2.2vw, 28px); } .dz-z { transition: transform .22s ease, box-shadow .22s ease; position: relative; } .dz-z:hover, .dz-z:focus-visible { transform: scale(1.045); box-shadow: 0 14px 34px rgba(40, 30, 60, .14); z-index: 3; } .dz-ic { width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .78); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .dz-l { font-family: var(--font-head, inherit); font-size: 19px; line-height: 1.15; } .dz-d { font-size: 14.5px; color: var(--d-mu); line-height: 1.35; } /* the centre */ .dz-hero { background: linear-gradient(140deg, var(--d-hero) 0%, var(--d-hero) 45%, var(--d-hero2) 100%); color: var(--d-ink); display: flex; align-items: center; justify-content: center; text-align: center; position: relative; } .dz-hin { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px; max-width: 520px; } .dz-kick { font-size: 12.5px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 800; color: var(--d-deep); } .dz-htitle { font-family: var(--font-head, inherit); font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; } .dz-hsub { font-size: 16px; color: var(--d-mu); } .dz-hprog { font-size: 14px; font-weight: 700; color: var(--d-deep); background: rgba(255, 255, 255, .7); padding: 5px 12px; border-radius: 999px; } .dz-hbtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .dz-hgo { background: #fff; padding: 14px 24px; border-radius: 999px; font-weight: 800; font-size: 17px; display: inline-flex; gap: 8px; align-items: center; box-shadow: 0 6px 18px rgba(40, 30, 60, .1); } .dz-hgo2 { background: transparent; border: 2px solid #fff; padding: 12px 20px; border-radius: 999px; font-weight: 700; } .dz-hgo:hover, .dz-hgo2:hover { transform: scale(1.04); } .dz-hsay { position: absolute; top: 14%; right: 14%; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; display: flex; align-items: center; justify-content: center; } .dz-hero.dz-rect .dz-hsay { top: 16px; right: 16px; } .dz-hero.dz-circle { border-radius: 50%; aspect-ratio: 1; box-shadow: 0 0 0 12px #fff, 0 0 0 14px var(--d-acc); } .dz-hero.dz-circle .dz-hin { max-width: 80%; gap: 8px; padding: 22px; } .dz-ring .dz-hero.dz-circle .dz-htitle { font-size: 34px; } .dz-hero.dz-circle .dz-hsay, .dz-hero.dz-diamond .dz-hsay, .dz-hero.dz-hexa .dz-hsay { display: none; } .dz-hero.dz-circle .dz-hgo { padding: 12px 20px; font-size: 16px; } .dz-hero.dz-rect { border-radius: 30px; box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--d-bd); height: 100%; } .dz-hero.dz-diamond, .dz-hero.dz-hexa { background: transparent; } @keyframes dzBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.035); } } @keyframes dzBreathe2 { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.02); } } .dz-ring .dz-hero.dz-breathe { animation: dzBreathe 10s ease-in-out infinite; } .dz-gh .dz-breathe, .dz-sh .dz-breathe, .dz-bh .dz-breathe, .dz-shh .dz-breathe, .dz-phero .dz-breathe { animation: dzBreathe2 10s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .dz-breathe { animation: none !important; } .dz-z:hover { transform: none; } .dz-bloom .dz-ring > a, .dz-bloom .dz-ring > button { animation: none !important; } } /* the side columns and card row */ .dz-three { display: grid; grid-template-columns: minmax(230px, 22%) minmax(0, 1fr) minmax(230px, 22%); gap: 22px; align-items: stretch; } .dz-col { display: flex; flex-direction: column; gap: 16px; } .dz-col > * { flex: 1 1 auto; } .dz-mid { display: flex; align-items: center; justify-content: center; min-width: 0; } .dz-c { background: var(--t, #fff); border: 1px solid transparent; border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: #2B2D42; width: 100%; } .dz-cfeel { background: #fff; border-color: var(--d-bd); color: var(--d-ink); } .dz-ck { display: flex; gap: 7px; align-items: center; font-size: 11.5px; letter-spacing: 1.4px; font-weight: 800; text-transform: uppercase; } .dz-c b { font-family: var(--font-head, inherit); font-size: 19px; line-height: 1.2; } .dz-cx { font-size: 14px; line-height: 1.45; color: inherit; opacity: .9; } .dz-cgo { margin-top: auto; font-weight: 800; font-size: 14.5px; } .dz-feel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .dz-feel button { flex: 1 1 70px; border: 0; background: var(--t); border-radius: 12px; padding: 10px 6px; font-weight: 700; font-size: 13.5px; color: #2B2D42; min-height: 42px; } .dz-feel button.on { outline: 3px solid var(--d-deep); } .dz-feelout:empty { display: none; } .dz-feelout .pfe-mood-links { display: flex; flex-wrap: wrap; gap: 6px; } .dz-feelout .pfe-mood-go { font-size: 13px; padding: 6px 10px; border-radius: 999px; background: var(--d-soft); } .dz-feelout .pfe-mood-line { font-size: 13.5px; margin: 6px 0; } .dz-row5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } /* the round layouts: drawn on a 720 × 720 stage, scaled to fit */ .dz-ringwrap { width: 100%; position: relative; height: 720px; } @media (min-width: 1800px) { .dz-vgrid { gap: 24px; } .dz-welcome { font-size: 48px; } .dz-c b { font-size: 21px; } .dz-cx { font-size: 15.5px; } } .dz-ring { position: absolute; left: 50%; top: 0; width: 720px; height: 720px; margin-left: -360px; transform-origin: top center; } .dz-ring > a, .dz-ring > button { position: absolute; width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; text-align: center; border: 0; padding: 0; color: var(--d-ink); } .dz-pin { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; } .dz-ring .dz-hero { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 350px; height: 350px; } .dz-ring .dz-l { font-size: 17px; } /* petals: a teardrop turned to point at the centre; the words stay upright */ .dz-ring-lotus .dz-halo { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--d-hero) 55%, transparent) 0 45%, color-mix(in srgb, var(--d-hero) 25%, transparent) 46% 70%, transparent 71%); } .dz-petal { background: transparent !important; } .dz-petal::before { content: ''; position: absolute; inset: 0; background: var(--t); border-radius: 0 60% 60% 60%; transform: rotate(var(--rot)); box-shadow: 0 8px 22px rgba(40, 30, 60, .08); } .dz-petal .dz-pin { position: relative; } .dz-bub { background: #fff; border-radius: 50%; box-shadow: 0 0 0 5px var(--t), 0 10px 24px rgba(40, 30, 60, .08); } .dz-bub .dz-ic { background: var(--t); } .dz-ring-orbit .dz-orbitline { position: absolute; left: 50%; top: 50%; width: 572px; height: 572px; margin: -286px 0 0 -286px; border-radius: 50%; border: 2px dashed var(--d-bd); } .dz-dia { background: transparent !important; } .dz-dia::before { content: ''; position: absolute; inset: 14px; background: var(--t); border-radius: 26px; transform: rotate(45deg); box-shadow: 0 8px 22px rgba(40, 30, 60, .08); } .dz-dia .dz-pin { position: relative; } .dz-hex { background: var(--t) !important; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .dz-hero.dz-diamond::before { content: ''; position: absolute; inset: 40px; background: linear-gradient(140deg, var(--d-hero) 0%, var(--d-hero2) 100%); border-radius: 44px; transform: rotate(45deg); box-shadow: 0 0 0 8px #fff, 0 0 0 10px var(--d-acc); } .dz-hero.dz-diamond .dz-hin, .dz-hero.dz-hexa .dz-hin { position: relative; max-width: 300px; padding: 10px; } .dz-hero.dz-diamond .dz-htitle, .dz-hero.dz-hexa .dz-htitle { font-size: 34px; } .dz-hero.dz-hexa::before { content: ''; position: absolute; inset: 0; background: var(--d-acc); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .dz-hero.dz-hexa::after { content: ''; position: absolute; inset: 9px; background: linear-gradient(140deg, var(--d-hero) 0%, var(--d-hero2) 100%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .dz-hero.dz-hexa .dz-hin { z-index: 1; } .dz-hero.dz-hexa .dz-hsay, .dz-hero.dz-diamond .dz-hsay { top: 22%; right: 22%; z-index: 2; } /* positions on the ring (8 items, every 45°, from the top) – left/top of a 168 box around radius 268 */ .dz-ring .dz-p0 { left: 276px; top: -10px; --rot: 225deg; } .dz-ring .dz-p1 { left: 478px; top: 74px; --rot: 270deg; } .dz-ring .dz-p2 { left: 562px; top: 276px; --rot: 315deg; } .dz-ring .dz-p3 { left: 478px; top: 478px; --rot: 0deg; } .dz-ring .dz-p4 { left: 276px; top: 562px; --rot: 45deg; } .dz-ring .dz-p5 { left: 74px; top: 478px; --rot: 90deg; } .dz-ring .dz-p6 { left: -10px; top: 276px; --rot: 135deg; } .dz-ring .dz-p7 { left: 74px; top: 74px; --rot: 180deg; } .dz-ring-honey .dz-hex { width: 168px; height: 190px; } .dz-ring-honey .dz-hero { width: 360px; height: 410px; } .dz-ring-diamond .dz-hero { width: 400px; height: 400px; } .dz-ring-lotus .dz-hero { width: 300px; height: 300px; } .dz-ring-lotus .dz-hero .dz-htitle { font-size: 30px; } .dz-ring-lotus .dz-hero .dz-hprog { display: none; } .dz-bloom .dz-ring > a, .dz-bloom .dz-ring > button { animation: dzBloom .55s ease-out both; } .dz-bloom .dz-ring > :nth-child(2) { animation-delay: .05s; } .dz-bloom .dz-ring > :nth-child(3) { animation-delay: .12s; } .dz-bloom .dz-ring > :nth-child(4) { animation-delay: .19s; } .dz-bloom .dz-ring > :nth-child(5) { animation-delay: .26s; } .dz-bloom .dz-ring > :nth-child(6) { animation-delay: .33s; } .dz-bloom .dz-ring > :nth-child(7) { animation-delay: .4s; } .dz-bloom .dz-ring > :nth-child(8) { animation-delay: .47s; } .dz-bloom .dz-ring > :nth-child(9) { animation-delay: .54s; } .dz-bloom .dz-ring > :nth-child(10) { animation-delay: .61s; } @keyframes dzBloom { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } /* 5.00: Rainbow arch – the cards on an arch over the centre */ .dz-ring-arch .dz-p0 { left: 2px; top: 404px; } .dz-ring-arch .dz-p1 { left: 31px; top: 256px; } .dz-ring-arch .dz-p2 { left: 112px; top: 138px; } .dz-ring-arch .dz-p3 { left: 229px; top: 73px; } .dz-ring-arch .dz-p4 { left: 359px; top: 73px; } .dz-ring-arch .dz-p5 { left: 476px; top: 138px; } .dz-ring-arch .dz-p6 { left: 557px; top: 256px; } .dz-ring-arch .dz-p7 { left: 586px; top: 404px; } .dz-ring-arch > a, .dz-ring-arch > button { width: 132px; height: 132px; } .dz-ring-arch .dz-ic { width: 44px; height: 44px; } .dz-ring-arch .dz-l { font-size: 15px; } .dz-ring-arch .dz-hero { top: 470px; width: 320px; height: 320px; } .dz-ring-arch .dz-rainbow { position: absolute; left: 50%; top: 470px; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; background: conic-gradient(from 270deg, #F6C9C2, #FBE3B8, #DCEBC8, #CDE7EA, #C9DDF2, #E4DCF7, #F3D1E3 50%, transparent 50%); -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 57% 66%, transparent 67%); mask: radial-gradient(circle, transparent 0 52%, #000 53% 60%, transparent 61%); opacity: .75; } /* Mandala star – a star in the centre, cards on two dotted rings */ .dz-ring-mandala .dz-mring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 2px dotted var(--d-deep); opacity: .35; } .dz-ring-mandala .dz-mring.r1 { width: 600px; height: 600px; margin: -300px 0 0 -300px; } .dz-ring-mandala .dz-mring.r2 { width: 470px; height: 470px; margin: -235px 0 0 -235px; border-style: dashed; } .dz-ring-mandala .dz-hero { width: 400px; height: 400px; } .dz-hero.dz-star { background: transparent; } .dz-hero.dz-star::before { content: ''; position: absolute; inset: 0; background: var(--d-acc); clip-path: polygon(50% 0%, 61% 13%, 77% 8%, 79% 24%, 94% 31%, 87% 46%, 96% 60%, 82% 69%, 82% 86%, 66% 86%, 57% 99%, 45% 89%, 31% 97%, 24% 83%, 8% 80%, 11% 64%, 0% 53%, 12% 42%, 6% 26%, 22% 21%, 27% 6%, 43% 12%); } .dz-hero.dz-star::after { content: ''; position: absolute; inset: 22px; background: linear-gradient(140deg, var(--d-hero) 0%, var(--d-hero2) 100%); border-radius: 50%; box-shadow: 0 0 0 6px #fff; } .dz-hero.dz-star .dz-hin { position: relative; z-index: 1; max-width: 300px; } .dz-hero.dz-star .dz-htitle { font-size: 32px; } .dz-hero.dz-star .dz-hsay, .dz-hero.dz-star .dz-hprog { display: none; } /* grid ring and sun centre: cards round a centre card */ .dz-card { background: #fff; border: 1px solid var(--d-bd); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--d-ink); min-height: 150px; } .dz-card .dz-ic { background: var(--t); } .dz-gridring { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 18px; } .dz-gh { grid-column: 2 / span 2; grid-row: 1 / span 2; } .dz-g0 { grid-area: 1 / 1; } .dz-g1 { grid-area: 2 / 1; } .dz-g2 { grid-area: 1 / 4; } .dz-g3 { grid-area: 2 / 4; } .dz-g4 { grid-area: 3 / 1; } .dz-g5 { grid-area: 3 / 2; } .dz-g6 { grid-area: 3 / 3; } .dz-g7 { grid-area: 3 / 4; background: var(--d-acc); border-color: var(--d-acc); } .dz-gridring .dz-g0 { border-radius: 44px 24px 24px 24px; } .dz-gridring .dz-g2 { border-radius: 24px 44px 24px 24px; } .dz-gridring .dz-g4 { border-radius: 24px 24px 24px 44px; } .dz-gridring .dz-g7 { border-radius: 24px 24px 44px 24px; } .dz-sun { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(160px, auto); gap: 18px; } .dz-sh { grid-column: 2 / span 2; grid-row: 1 / span 2; } .dz-s0 { grid-area: 1 / 1; } .dz-s1 { grid-area: 1 / 4; } .dz-s2 { grid-area: 2 / 1; } .dz-s3 { grid-area: 2 / 4; } .dz-s4 { grid-area: 3 / 1; } .dz-s5 { grid-area: 3 / 2; } .dz-s6 { grid-area: 3 / 3; } .dz-s7 { grid-area: 3 / 4; background: var(--d-acc); border-color: var(--d-acc); } .dz-sun .dz-card { background: var(--t); border-color: transparent; } .dz-sun .dz-card .dz-ic { background: rgba(255, 255, 255, .8); } .dz-sun .dz-card .dz-d { color: #3a3a4a; } /* bookshelf */ .dz-shelf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; } .dz-shm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dz-card.dz-row { flex-direction: row; align-items: center; min-height: 0; padding: 14px; } .dz-card.dz-row .dz-l { display: block; } .dz-card.dz-row .dz-d { display: none; } .dz-shelfrow { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 18px; background: var(--d-soft); border-radius: 18px; border-bottom: 12px solid var(--d-bd); } .dz-spine { background: var(--t); border-radius: 12px 12px 4px 4px; height: 260px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; } .dz-spine:nth-child(odd) { height: 240px; } .dz-spine b { font-family: var(--font-head, inherit); font-size: 34px; } .dz-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 15px; font-weight: 600; max-height: 170px; overflow: hidden; } /* bento */ .dz-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(160px, auto); gap: 16px; } .dz-bh { grid-column: 1 / span 2; grid-row: 1 / span 2; } .dz-bento .dz-card { background: var(--t); border-color: transparent; justify-content: space-between; } .dz-bento .dz-b6 { grid-column: span 2; } .dz-bento .dz-b7 { grid-column: span 2; background: #fff; border: 2px dashed var(--d-acc); } .dz-bt { display: flex; justify-content: space-between; align-items: center; } .dz-bento .dz-l { font-size: 22px; } /* the big volume cards */ .dz-vgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .dz-vol { background: #fff; border: 1px solid var(--d-bd); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; color: var(--d-ink); } .dz-vpic { position: relative; aspect-ratio: 4 / 3; background: var(--t); display: block; overflow: hidden; } .dz-vpic img { width: 100%; height: 100%; object-fit: cover; display: block; } .dz-vn { position: absolute; left: 12px; top: 12px; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--d-deep); font-family: var(--font-head, inherit); font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); } .dz-vt { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .dz-vt small { font-size: 12.5px; color: var(--d-mu); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; } .dz-vt b { font-family: var(--font-head, inherit); font-size: 18px; line-height: 1.2; } .dz-vt .dz-vread { text-transform: none; letter-spacing: 0; font-weight: 600; margin-top: auto; } .dz-vbar { height: 8px; border-radius: 9px; background: var(--d-soft); overflow: hidden; margin-top: auto; } .dz-vbar i { display: block; height: 100%; background: var(--d-deep); border-radius: 9px; } /* the festival touch and the "presented by" lines */ .dz-fest { display: flex; justify-content: center; gap: 18px; margin-bottom: -6px; } .dz-festg { text-align: center; font-weight: 800; color: var(--d-deep); font-size: 18px; margin-top: -14px; } .dz-presented { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 16px 30px; border-top: 1px solid var(--d-bd); background: var(--d-soft); font-size: 15px; color: var(--d-mu); } .dz-presented img { width: 48px; height: 48px; border-radius: 12px; } .dz-presented b { color: var(--d-ink); } .dz-thanks { max-width: 760px; } /* 1-minute calm */ .dz-breathbox { position: fixed; inset: 0; z-index: 10050; background: rgba(30, 28, 45, .55); display: flex; align-items: center; justify-content: center; padding: 16px; } .dz-bb-in { background: #fff; border-radius: 28px; padding: 30px 26px; width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #2B2D42; } .dz-bb-c { width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, #DCD3F5, #CFE6DD); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; transform: scale(.7); transition: transform 4s ease-in-out; } .dz-bb-c.in { transform: scale(1); transition-duration: 4s; } .dz-bb-c.out { transform: scale(.7); transition-duration: 6s; } .dz-bb-x { border: 0; background: #F4A99B; border-radius: 999px; padding: 12px 28px; font-weight: 800; } /* the book shop */ .dz-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 18px; } .dz-book { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px; } .dz-bookpic { flex: 0 0 110px; height: 160px; border-radius: 10px; overflow: hidden; background: var(--surface2); display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; padding: 6px; } .dz-bookpic img { width: 100%; height: 100%; object-fit: cover; } .dz-bookt h3 { margin: 0 0 10px; } .dz-bookf { display: flex; flex-wrap: wrap; gap: 8px; } .dz-soon { opacity: .55; cursor: default; } /* ------------------------------------------------------------------ smaller computers and tablets */ @media (max-width: 1180px) { .dz-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .dz-three .dz-mid { grid-column: 1 / -1; order: -1; } .dz-vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dz-row5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dz-shelfrow { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 900px) { .dz-gridring, .dz-sun, .dz-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dz-gh, .dz-sh, .dz-bh { grid-column: 1 / -1; grid-row: auto; order: -1; } [class*="dz-g"], [class*="dz-s"], [class*="dz-b"] { grid-area: auto; } .dz-gridring > *, .dz-sun > *, .dz-bento > * { grid-area: auto !important; grid-column: auto; } .dz-gridring > .dz-gh, .dz-sun > .dz-sh, .dz-bento > .dz-bh { grid-column: 1 / -1 !important; } .dz-shelf { grid-template-columns: 1fr; } .dz-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dz-row5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ phones */ .dz-phone .dz-in { padding: 16px 14px 26px; gap: 20px; } .dz-phone .dz-head { padding: 10px 12px; } .dz-phone .dz-head { grid-template-columns: 1fr; justify-items: center; gap: 6px; } .dz-phone .dz-headl { display: none; } .dz-phone .dz-title { font-size: 11.5px; letter-spacing: .2em; } .dz-phone .dz-head { position: relative; } .dz-phone .dz-headr { position: absolute; right: 10px; top: 10px; } .dz-phone .dz-brand { padding-top: 2px; } .dz-phone .dz-about { padding: 6px 11px; font-size: 12.5px; border-width: 1.5px; } .dz-phone .dz-headr #pfe-acc-dz { display: none; } .dz-phone .dz-welcome { font-size: 27px; } .dz-phone .dz-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; padding-bottom: 6px; scrollbar-width: thin; } .dz-phone .dz-chip { flex: 0 0 auto; } .dz-phone .dz-search input { font-size: 16px; } .dz-phero { display: flex; justify-content: center; } .dz-phero .dz-hero.dz-circle { width: min(84vw, 350px); } .dz-phero .dz-hero.dz-circle .dz-hin { padding: 18px; } .dz-phero .dz-hero.dz-rect { width: 100%; height: auto; } .dz-phero .dz-htitle { font-size: 30px; } .dz-phero .dz-hsay { top: 10%; right: 10%; } .dz-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .dz-pcell { background: var(--t); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px 10px; min-height: 150px; color: #2B2D42; border: 0; } .dz-pp .dz-pcell { aspect-ratio: 1; border-radius: 0 50% 50% 50%; } .dz-pp .dz-pcell:nth-child(even) { border-radius: 50% 0 50% 50%; } .dz-pb .dz-pcell { aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px var(--t); } .dz-pb .dz-pcell .dz-ic { background: var(--t); } .dz-pc .dz-pcell { border-radius: 22px; align-items: flex-start; text-align: left; background: #fff; border: 1px solid var(--d-bd); } .dz-pc .dz-pcell .dz-ic { background: var(--t); } .dz-pcell .dz-l { font-size: 17px; } .dz-pcell .dz-d { font-size: 13.5px; } .dz-plist { display: flex; flex-direction: column; gap: 12px; } .dz-prow { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--d-bd); border-left: 0; border-radius: 20px; padding: 14px 16px; min-height: 76px; text-align: left; width: 100%; color: var(--d-ink); } .dz-prow .dz-ic { background: var(--t); width: 50px; height: 50px; } .dz-pt { flex: 1; display: flex; flex-direction: column; gap: 2px; } .dz-pt b { font-size: 18px; } .dz-pt small { font-size: 13.5px; color: var(--d-mu); } .dz-ptiles { display: flex; flex-direction: column; gap: 14px; } .dz-ptile { background: var(--t); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 10px; } .dz-ptile-a { display: flex; flex-direction: column; gap: 6px; text-align: left; color: #2B2D42; background: transparent; border: 0; padding: 0; } .dz-ptile-a .dz-ic { width: 72px; height: 72px; } .dz-ptile-a b { font-size: 26px; } .dz-ptile-a small { font-size: 16px; } .dz-say { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; background: var(--d-ink); color: #fff !important; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; min-height: 44px; } .dz-pside { display: grid; grid-template-columns: 1fr; gap: 12px; } .dz-pvols .dz-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dz-pvols .dz-vt b { font-size: 16px; } .dz-pvols .dz-vt { padding: 10px 12px 12px; } @media (max-width: 380px) { .dz-pvols .dz-vgrid { grid-template-columns: 1fr; } } /* 1.0: a module's own 5 themes */ .mt-pick { width: min(460px, 100%) !important; align-items: stretch !important; } .mt-list { display: flex; flex-direction: column; gap: 8px; } .mt-b { display: flex; align-items: center; gap: 12px; border: 2px solid #ece8f3; background: #fff; border-radius: 14px; padding: 10px 12px; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; color: #2b2d42; } .mt-b.on { border-color: #6a52b0; background: #f6f3fb; } .mt-sw { width: 54px; height: 32px; border-radius: 9px; display: flex; align-items: flex-end; gap: 4px; padding: 4px; } .mt-sw i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; } .mt-acts { display: flex; gap: 8px; justify-content: space-between; align-items: center; } /* 1.0: the picture banner sits exactly inside its card (also on Buy the Book), and its line of text uses the width it has */ #pfe-app .pfe-page.pfe-buyall .pfe-banner { --pad: 14px; } #pfe-app .pfe-banner-in > * { max-width: min(1180px, 100%); } #pfe-app .pfe-banner .pfe-lead { max-width: min(1180px, 100%) !important; text-wrap: wrap; } #pfe-app .pfe-cont { margin-bottom: 16px; } .dz-chips { max-width: 1240px; } .dz-chipall { background: var(--d-ink) !important; color: #fff !important; border-color: var(--d-ink) !important; font-weight: 700; } /* 1.0: the centre of the shaped layouts holds less, so every word stays inside its shape */ .dz-ring .dz-hero:not(.dz-rect) .dz-hprog, .dz-ring .dz-hero:not(.dz-rect) .dz-hgo2 { display: none !important; } .dz-ring .dz-hero:not(.dz-rect) .dz-hin { gap: 8px; } .dz-ring .dz-hero:not(.dz-rect) .dz-hgo { padding: 11px 18px; font-size: 15px; white-space: nowrap; } .dz-ring .dz-hero.dz-circle .dz-htitle { font-size: 30px; } .dz-ring .dz-hero.dz-circle .dz-hin { max-width: 74%; padding: 0; } .dz-ring .dz-hero.dz-diamond .dz-hin { max-width: 230px; padding: 0; } .dz-ring .dz-hero.dz-diamond .dz-htitle { font-size: 27px; } .dz-ring .dz-hero.dz-diamond .dz-hsub { font-size: 13.5px; } .dz-ring .dz-hero.dz-hexa .dz-hin { max-width: 250px; padding: 0; } .dz-ring .dz-hero.dz-hexa .dz-htitle { font-size: 29px; } .dz-ring .dz-hero.dz-star .dz-hin { max-width: 250px; } .dz-ring .dz-hero.dz-star .dz-htitle { font-size: 28px; } .dz-ring .dz-kick { font-size: 11px; letter-spacing: 2px; } .dz-ring .dz-pin { max-width: 128px; } .dz-ring .dz-l { text-align: center; } .dz-ring-arch .dz-pin { max-width: 112px; } .dz-dia .dz-pin { max-width: 108px; } .dz-dia .dz-l { font-size: 15px; } .dz-phero .dz-hero.dz-circle .dz-hprog, .dz-phero .dz-hero.dz-circle .dz-hgo2, .dz-phero .dz-hero.dz-circle .dz-hsay { display: none !important; } .dz-phero .dz-hero.dz-circle .dz-hin { max-width: 70%; gap: 8px; padding: 0; } .dz-phero .dz-hero.dz-circle .dz-htitle { font-size: clamp(22px, 7vw, 28px); } .dz-phero .dz-hero.dz-circle .dz-kick { font-size: 10.5px; letter-spacing: 1.6px; } .dz-phero .dz-hero.dz-circle .dz-hsub { font-size: 13.5px; } .dz-phero .dz-hero.dz-circle .dz-hgo { padding: 11px 16px; font-size: 14.5px; } /* 1.0: Hindu festivals in the spaces beside the welcome */ .dz-toprow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr); gap: 20px; align-items: center; } .dz-toprow > .dz-top { grid-column: 2; } .dz-festside { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; border-radius: 26px; background: color-mix(in srgb, var(--d-soft) 70%, transparent); border: 1.5px dashed var(--d-bd); min-height: 170px; } .dz-festside.now { background: linear-gradient(160deg, #fff7e8, var(--d-soft)); border: 2px solid #F2C46D; box-shadow: 0 10px 30px rgba(242, 166, 90, .18); } .dz-festside small { font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; color: var(--d-deep); } .dz-festside b { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; color: var(--d-ink); } .dz-festmsg p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--d-ink); max-width: 260px; } .dz-festart { display: flex; gap: 6px; align-items: flex-end; justify-content: center; } .dz-festside.now .dz-festart svg { animation: dzGlow 3.2s ease-in-out infinite; } @keyframes dzGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(247, 178, 103, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(247, 178, 103, .75)); } } @media (prefers-reduced-motion: reduce) { .dz-festside .dz-festart svg { animation: none !important; } } @media (max-width: 1100px) { .dz-toprow { grid-template-columns: 1fr 1fr; } .dz-toprow > .dz-top { grid-column: 1 / -1; grid-row: 1; } .dz-festside { min-height: 0; flex-direction: row; flex-wrap: wrap; gap: 10px; } } .dz-phone .dz-toprow { grid-template-columns: 1fr; gap: 12px; } .dz-phone .dz-festmsg { display: none; } .dz-phone .dz-festside { flex-direction: row; padding: 10px 14px; gap: 12px; } .dz-phone .dz-festside .dz-festart svg { width: 48px; height: 48px; } .dz-phone .dz-festside.now::after { content: attr(aria-label); display: none; } .dz-phone .dz-toprow > .dz-top { grid-column: 1; grid-row: 2; } .dz-phone .dz-toprow > .dz-festside:first-child { grid-row: 1; justify-content: center; } @media (max-width: 700px) { .dz-toprow { grid-template-columns: minmax(0, 1fr) !important; } .dz-toprow > .dz-top { grid-column: 1 !important; } } .dz-toprow > * { min-width: 0; } .dz-phone .dz-toprow { grid-template-columns: minmax(0, 1fr) !important; } /* the tagline sits under the name, in the same size and style, before the greeting */ .dz-brand .dz-tagline { margin-top: -2px; } /* the tagline: the same style and size as the website name, above the greeting */ .dz-tagline { margin: 0; font-weight: 700; font-size: clamp(12px, 1.25vw, 17px); line-height: 1.4; letter-spacing: .32em; text-transform: uppercase; color: var(--d-ink); } .dz-phone .dz-tagline { font-size: 11.5px; letter-spacing: .2em; } /* 1.0: the name and the tagline – the same size, the name larger than before; the welcome line calmer */ .dz .dz-head .dz-title { font-size: clamp(17px, 1.75vw, 27px) !important; letter-spacing: .24em; line-height: 1.35; } .dz .dz-head .dz-title.dz-tagline { font-size: clamp(17px, 1.75vw, 27px) !important; letter-spacing: .24em; color: var(--d-deep); } .dz .dz-brand { gap: 4px; } .dz .dz-welcome { font-size: clamp(22px, 2.3vw, 32px) !important; font-weight: 600; } .dz-phone .dz-head .dz-title, .dz-phone .dz-head .dz-title.dz-tagline { font-size: 14px !important; letter-spacing: .14em; } .dz-phone .dz-welcome { font-size: 21px !important; } /* 1.0: website name, then tagline, then greeting – the name a little bigger, the other two the same size */ .dz .dz-head { display: flex; flex-direction: column; align-items: center; position: relative; padding: 16px clamp(12px, 3vw, 56px) 18px; } .dz .dz-headl { display: none; } .dz .dz-headr { position: absolute; right: clamp(12px, 3vw, 56px); top: 16px; } .dz .dz-head .dz-title { font-size: clamp(18px, 1.9vw, 29px) !important; letter-spacing: .22em; } .dz .dz-head .dz-title.dz-tagline { font-size: clamp(15px, 1.5vw, 22px) !important; letter-spacing: .22em; color: var(--d-deep); } .dz .dz-head .dz-title.dz-greet2 { display: block; margin-top: 4px; text-align: center; font-size: clamp(15px, 1.5vw, 22px) !important; letter-spacing: .22em; color: var(--d-ink); opacity: .85; } .dz-phone .dz-head .dz-title { font-size: 15px !important; letter-spacing: .14em; } .dz-phone .dz-head .dz-title.dz-tagline, .dz-phone .dz-head .dz-title.dz-greet2 { font-size: 12.5px !important; letter-spacing: .14em; } .dz-phone .dz-headr { top: 10px; right: 10px; } .dz-phone .dz-head { padding-top: 40px; } /* 1.0: Buy the Book – wide book cards, the 5 formats in a row */ #pfe-app .dz-books { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 22px; } #pfe-app .dz-book { align-items: center; padding: 20px; gap: 22px; border-radius: 22px; } #pfe-app .dz-bookpic { flex: 0 0 130px; height: 190px; box-shadow: 0 10px 24px rgba(0, 0, 0, .14); } #pfe-app .dz-bookt { flex: 1; min-width: 0; } #pfe-app .dz-bookt h3 { font-size: 22px; margin: 0 0 14px; } #pfe-app .dz-bookf { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } #pfe-app .dz-bookf .pfe-btn { width: auto; flex: 0 0 auto; margin: 0; } @media (max-width: 520px) { #pfe-app .dz-book { flex-direction: column; text-align: center; } #pfe-app .dz-bookf { justify-content: center; } } /* 1.0: left pane = table of contents of the Home dashboard */ .pfe-nav h4.pfe-toch { margin: 12px 4px 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .pfe-toc { list-style: none; margin: 0; padding: 0; } .pfe-toc li { margin: 0; } .pfe-toc .pfe-toc-a { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 6px 10px; border-radius: 9px; border: 0; background: none; font: inherit; font-size: 14px; line-height: 1.3; color: var(--text) !important; text-decoration: none !important; cursor: pointer; overflow-wrap: anywhere; } .pfe-toc .pfe-toc-a:hover { background: var(--primary-soft, rgba(0,0,0,.05)); } .pfe-toc .pfe-toc-a.on { background: var(--primary); color: var(--primary-ink) !important; font-weight: 700; } /* 1.0: inside a module the topic row is already the sub-menu on top – don't repeat it in the page */ #pfe-app[data-mode="mod"] .pfe-tchips, #pfe-app[data-mode="mod"] .pfe-tchips + .pfe-scrollhint { display: none !important; } #pfe-app[data-mode="mod"] .pfe-sgroup-h:has(+ .pfe-ttiles), #pfe-app[data-mode="mod"] .pfe-sgroup-h + .pfe-ttiles { display: none !important; } /* 1.0.1: share the app */ .pfe-shareapp { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--primary); background: var(--surface, #fff); color: var(--primary); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; } .pfe-shareapp:hover { background: var(--primary); color: var(--primary-ink); } .pfe-sharebox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; } .pfe-sharebox-in { position: relative; width: min(420px, 100%); background: var(--surface, #fff); color: var(--text); border-radius: 18px; padding: 22px 20px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center; } .pfe-sharebox-h { display: block; font-size: 20px; margin-bottom: 4px; } .pfe-sharebox-x { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); } .pfe-sharebox-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; } .pfe-sharebox-b .pfe-btn { justify-content: center; text-align: center; } .pfe-sh-wa { background: #1f8f4e !important; color: #fff !important; border-color: #1f8f4e !important; } .pfe-sharebox-l { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--muted); background: transparent; } .pfe-getapp { text-align: center; max-width: 560px; margin: 0 auto; } .pfe-getapp h1 { margin: 10px 0 18px; } #pfe-app[data-mode="mod"] .pfe-nav .pfe-onpage { display: none !important; } /* 1.0.2: the left pane – small coloured cards, one per volume and module */ .pfe-tcs { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; } .pfe-tcs li { margin: 0; } .pfe-tc { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--tc) 70%, #000 8%); background: color-mix(in srgb, var(--tc) 55%, var(--surface, #fff)); color: #2b2b33 !important; font: inherit; text-align: left; text-decoration: none !important; cursor: pointer; transition: transform .15s, box-shadow .15s; animation: pfeTcIn .35s ease both; animation-delay: var(--d); } .pfe-tc:hover { transform: translateX(3px); box-shadow: 0 4px 14px rgba(0,0,0,.10); } .pfe-tc.on { background: var(--tc); border-color: var(--primary); box-shadow: inset 4px 0 0 var(--primary), 0 4px 14px rgba(0,0,0,.10); } .pfe-tc-ic { flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.75); color: #3a3550; } .pfe-tc-ic b { font-size: 15px; font-weight: 800; } .pfe-tc-t { min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .pfe-tc-t small { font-size: 12px; font-weight: 500; color: #4a4658; margin-top: 1px; } @keyframes pfeTcIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pfe-tc { animation: none; } } /* ================================================================== 1.0.3: light looks of the complete series */ #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) { background-image: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-header { background: var(--header); color: var(--header-ink); border-bottom: 1px solid var(--border); box-shadow: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-header::before, #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-header::after { display: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-header :is(.pfe-hbtn, .pfe-btn, button, a.pfe-acc) { box-shadow: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-header .pfe-btn.ghost, #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-header .pfe-hbtn { background: var(--surface2); color: var(--text) !important; border-color: var(--border); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-menubar { background: var(--nav); color: var(--nav-ink); box-shadow: 0 1px 0 var(--border); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-m1 { color: var(--nav-ink) !important; font-weight: 600; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-m1.on { background: var(--primary); color: var(--primary-ink) !important; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-menu2 { background: var(--bg); border-bottom: 1px solid var(--border); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-menu2 a, #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-m2 { background: var(--surface); border-color: var(--border); color: var(--text) !important; box-shadow: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-socialbar { font-size: 13px; opacity: .85; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-nav { background: var(--surface); border: 1px solid var(--border); box-shadow: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-nav a { color: var(--text) !important; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-nav a.on, #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-nav li.on > a { background: var(--primary); color: var(--primary-ink) !important; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-nav h4 { color: var(--primary); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-page { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 2px 14px rgba(30,30,60,.04); } /* the welcome banner of the complete series: light, with the book cover */ #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero { color: var(--text); min-height: 0; background: linear-gradient(120deg, var(--surface2), var(--surface)); border: 1px solid var(--border); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero::before, #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero::after { display: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero h1 { color: var(--text); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero .pfe-kicker { color: var(--primary); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero .pfe-btn { box-shadow: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero .pfe-btn.ghost { color: var(--primary) !important; box-shadow: inset 0 0 0 1.5px var(--primary); background: transparent; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero-cover { width: min(190px, 100%); box-shadow: -6px 12px 26px rgba(0,0,0,.22); } /* page banners keep their pictures – shorter and calmer, no slow zoom */ #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-banner { min-height: 200px; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-banner::before { animation: none; transform: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-banner::after { background: linear-gradient(180deg, rgba(12,14,30,0) 20%, rgba(12,14,30,.62) 100%); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-banner-in { padding-top: 46px; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-start-b { box-shadow: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-stat { background: var(--surface); border: 1px solid var(--border); box-shadow: none; } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-shloka { background: var(--surface2); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-footer { background: var(--surface2); color: var(--text); border-top: 1px solid var(--border); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-footer a { color: var(--primary) !important; } /* Airy: the most minimal – white, thin lines, more space */ #pfe-app[data-mode="main"][data-slook="airy"] .pfe-page { border-color: transparent; box-shadow: none; } #pfe-app[data-mode="main"][data-slook="airy"] .pfe-nav { border-color: transparent; background: var(--surface2); } #pfe-app[data-mode="main"][data-slook="airy"] .pfe-m1:not(.on) + .pfe-m1::before { opacity: 0; } #pfe-app[data-mode="main"][data-slook="airy"] .pfe-hero { background: var(--surface2); border-color: transparent; } #pfe-app[data-mode="main"][data-slook="airy"] .pfe-banner { min-height: 170px; } #pfe-app[data-mode="main"][data-slook="airy"] .pfe-start-b { background: var(--surface2) !important; color: var(--text) !important; border: 1px solid var(--border); } #pfe-app[data-mode="main"][data-slook="airy"] .pfe-start-b * { color: var(--text) !important; } /* Pastel: soft coloured cards, like the Home dashboard */ #pfe-app[data-mode="main"][data-slook="pastel"] .pfe-hero { background: linear-gradient(120deg, #FBE3D4, #F3E4F2 55%, #E3EEF8); border-color: transparent; } #pfe-app[data-mode="main"][data-slook="pastel"] .pfe-start-b.b0 { background: #C9DDF2 !important; } #pfe-app[data-mode="main"][data-slook="pastel"] .pfe-start-b.b1 { background: #F6C9C2 !important; } #pfe-app[data-mode="main"][data-slook="pastel"] .pfe-start-b.b2 { background: #CFE6DD !important; } #pfe-app[data-mode="main"][data-slook="pastel"] .pfe-start-b, #pfe-app[data-mode="main"][data-slook="pastel"] .pfe-start-b * { color: #2E2A33 !important; } #pfe-app[data-mode="main"][data-slook="pastel"] .pfe-nav { background: #FFF4EC; border-color: #F3DCCB; } #pfe-app[data-mode="main"][data-slook="pastel"] .pfe-menu2 { background: #FFF8F3; } /* Calm: start cards softened */ #pfe-app[data-mode="main"][data-slook="calm"] .pfe-start-b { filter: saturate(.75); } #pfe-app[data-mode="main"]:is([data-slook="calm"],[data-slook="airy"],[data-slook="pastel"]) .pfe-hero .pfe-btn:not(.ghost) { background: var(--primary); color: var(--primary-ink) !important; border-color: var(--primary); } /* 1.0.3: dashboard header – name · tagline · greeting, medium weight, with fine separators; Install and Share as small icons at the two ends of the greeting line */ .dz .dz-head { grid-template-rows: auto auto; row-gap: 6px; padding-bottom: 14px; } .dz .dz-head .dz-title { font-weight: 600 !important; letter-spacing: .16em !important; font-size: clamp(16px, 1.5vw, 23px) !important; } .dz .dz-head .dz-title.dz-tagline { font-weight: 500 !important; letter-spacing: .14em !important; font-size: clamp(14px, 1.2vw, 18px) !important; color: var(--d-deep); } .dz .dz-head .dz-title.dz-greet2 { font-weight: 500 !important; letter-spacing: .14em !important; font-size: clamp(14px, 1.2vw, 18px) !important; margin: 0; opacity: .9; } .dz-sep { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 4px; color: var(--d-deep); opacity: .75; } .dz-sep i { display: block; width: clamp(40px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, currentColor); } .dz-sep i + b + i { background: linear-gradient(90deg, currentColor, transparent); } .dz-sep b { font-size: 10px; font-weight: 400; line-height: 1; } .dz-greetrow { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dz-greetw { display: flex; flex-direction: column; align-items: center; } .dz-cornerb { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--d-bd); background: #fff !important; color: var(--d-ink) !important; cursor: pointer; transition: transform .15s, box-shadow .15s; } .dz-cornerb:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); border-color: var(--d-deep); } .dz-cornerb-x { visibility: hidden; } .dz-phone .dz-cornerb { width: 34px; height: 34px; } .dz-phone .dz-head .dz-title { letter-spacing: .1em !important; font-size: 13.5px !important; } .dz-phone .dz-head .dz-title.dz-tagline, .dz-phone .dz-head .dz-title.dz-greet2 { font-size: 12px !important; letter-spacing: .1em !important; } /* readable "All topics" on every colour set */ .dz .dz-chips a.dz-chip.dz-chipall, .dz .dz-chips a.dz-chip.dz-chipall:hover { background: var(--d-ink) !important; color: #fff !important; } .dz .dz-chips a.dz-chip.dz-chipall * { color: #fff !important; } /* the footer under the dashboard: light, like the dashboard */ #pfe-app[data-mode="dash"] .pfe-footer { background: #FBF6F2 !important; background-image: none !important; color: #3A3542 !important; border-top: 1px solid #EFE4DA; } #pfe-app[data-mode="dash"] .pfe-footer * { color: inherit; } #pfe-app[data-mode="dash"] .pfe-footer a { color: #6A4B5C !important; } .dz .dz-head .dz-greetrow { width: 100%; align-self: stretch; justify-self: stretch; grid-column: 1 / -1; } .dz .dz-headr { gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 48vw; } .dz .dz-headr .dz-about { padding: 8px 16px; font-size: 14px; } /*DASH500-END*/