/* Reiki Alchemy — Tools (hub + five tools). Uses brand tokens from brand.css. */ .ra-toolsapp { font-family: var(--ra-f-ui, 'Inter', sans-serif); color: var(--ra-ink, #2A2520); } /* ---------- Hub ---------- */ /* Compact banner (overrides .ra-sec's tall default padding). */ .ra-sec.ra-toolshub-hero { padding: clamp(26px, 4vw, 46px) 0 clamp(14px, 2vw, 24px); } .ra-toolshub-hero__inner { max-width: 1180px; margin: 0 auto; padding: clamp(8px, 1.5vw, 18px) clamp(20px, 4vw, 40px); } .ra-toolshub-hero .ra-shead__lead { max-width: 560px; margin-top: 18px; } /* Community banner — the Circle's other half, alongside the Tools. */ .ra-toolshub-community { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); min-height: 0; margin-bottom: 26px; text-decoration: none; } .ra-toolshub-community .ra-toolcard__glyph { font-size: clamp(34px, 5vw, 48px); line-height: 1; flex: 0 0 auto; margin: 0; } .ra-toolshub-community__text { display: block; } .ra-toolshub-community .ra-eyebrow { margin: 0 0 6px; } .ra-toolshub-community .ra-toolcard__title { margin: 0 0 6px; } .ra-toolshub-community .ra-toolcard__desc { margin: 0 0 10px; max-width: 60ch; } .ra-toolshub-label { margin: 2px 0 16px; } @media (max-width: 560px) { .ra-toolshub-community { flex-direction: column; align-items: flex-start; } } .ra-toolshub-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-bottom: 22px; } .ra-toolshub-rest { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } /* ---------- Non-member upsell (shown in place of the tools grid) ---------- */ .ra-tools-upsell { max-width: 640px; margin: clamp(10px, 3vw, 40px) auto clamp(30px, 5vw, 60px); padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 48px); text-align: center; background: var(--ra-dark, #2A2520); border-radius: 4px; position: relative; overflow: hidden; } .ra-tools-upsell::before { content: ""; position: absolute; inset: 0; background-image: url('../../reiki-content/assets/img/prism-flare.jpg'); background-size: cover; background-position: center; opacity: .35; mix-blend-mode: screen; } .ra-tools-upsell > * { position: relative; } .ra-tools-upsell .ra-eyebrow--gold { color: var(--ra-gold-bright, #E8D29A); margin-bottom: 14px; } .ra-tools-upsell__title { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.1; color: var(--ra-bg-warm, #F5F0E5); margin: 0 0 16px; } .ra-tools-upsell__lead { font-family: var(--ra-f-ui, sans-serif); font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--ra-dark-text, #BAB1A3); max-width: 46ch; margin: 0 auto 28px; } .ra-toolcard { position: relative; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; border-radius: 3px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .ra-toolcard:hover { transform: translateY(-2px); } .ra-toolcard__glyph { font-family: var(--ra-f-serif, serif); margin-bottom: 16px; } .ra-toolcard__title { font-family: var(--ra-f-serif, serif); font-weight: 400; margin: 0 0 12px; } .ra-toolcard__desc { font-family: var(--ra-f-ui, sans-serif); font-weight: 300; line-height: 1.7; margin: 0 0 22px; flex: 1; } .ra-toolcard__cta { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; } /* Featured cards: light to match the site (gray/prism treatment removed, 2026-11-01), kept larger than the small cards so they still read as "featured". */ .ra-toolcard--dark { background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 2px; padding: clamp(32px, 4vw, 46px); min-height: 220px; } .ra-toolcard--dark::before { display: none; } .ra-toolcard--dark > * { position: relative; } .ra-toolcard--dark .ra-toolcard__glyph { font-size: 38px; color: var(--ra-gold, #C9A95E); } .ra-toolcard--dark .ra-toolcard__title { font-size: clamp(28px, 3.4vw, 34px); color: var(--ra-ink, #2A2520); } .ra-toolcard--dark .ra-toolcard__desc { color: var(--ra-ink-soft, #4A433B); } .ra-toolcard--dark .ra-toolcard__cta { color: var(--ra-gold-deep, #A8842F); } .ra-toolcard--dark:hover { box-shadow: 0 14px 34px rgba(42, 37, 32, .08); border-color: rgba(168, 132, 47, .4); } .ra-toolcard--light { background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 2px; padding: clamp(28px, 3vw, 38px); } .ra-toolcard--light .ra-toolcard__glyph { font-size: 32px; color: var(--ra-gold, #C9A95E); } .ra-toolcard--light .ra-toolcard__title { font-size: clamp(24px, 2.8vw, 28px); color: var(--ra-ink, #2A2520); } .ra-toolcard--light .ra-toolcard__desc { font-size: 14px; color: var(--ra-ink-soft, #4A433B); } .ra-toolcard__cta--ink { color: var(--ra-ink, #2A2520); border-bottom: 1px solid rgba(168, 132, 47, .5); padding-bottom: 4px; align-self: flex-start; } .ra-toolcard--light:hover { box-shadow: 0 14px 34px rgba(42, 37, 32, .08); border-color: rgba(168, 132, 47, .4); } /* ---------- Single-tool frame ---------- */ .ra-tools-single__wrap { padding-top: clamp(32px, 4vw, 52px); padding-bottom: clamp(56px, 7vw, 90px); } .ra-tools-back { display: inline-block; font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-muted, #8B8378); text-decoration: none; margin-bottom: clamp(22px, 3vw, 34px); } .ra-tools-back:hover { color: var(--ra-gold-deep, #A8842F); } .ra-tools-title { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.04; margin: 10px 0 0; color: var(--ra-ink, #2A2520); } .ra-tools-lead { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: clamp(17px, 2.2vw, 21px); color: var(--ra-muted, #8B8378); margin: 16px 0 0; max-width: 640px; } .ra-tools-note { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 15px; color: var(--ra-muted, #8B8378); margin-top: 28px; } .ra-tools-soon { background: var(--ra-bg-warm, #F5F0E5); border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .08)); border-radius: 3px; padding: clamp(36px, 5vw, 64px); text-align: center; } .ra-tools-soon p { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 20px; color: var(--ra-muted, #8B8378); margin: 14px 0 0; } /* ---------- Chips (shared: meditations filter, journal tabs) ---------- */ .ra-tools-chip { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ra-ink-soft, #4A433B); background: transparent; border: 1px solid rgba(42, 37, 32, .18); padding: 10px 18px; cursor: pointer; border-radius: 999px; transition: all .15s ease; } .ra-tools-chip:hover { border-color: rgba(168, 132, 47, .5); } .ra-tools-chip.is-on { color: #fff; background: var(--ra-gold-grad, linear-gradient(100deg, #C9A95E, #A8842F)); border-color: transparent; } /* ---------- Meditations ---------- */ .ra-tools-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: clamp(24px, 3vw, 36px) 0 clamp(24px, 3vw, 34px); } .ra-med-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .ra-med-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 3px; padding: clamp(24px, 2.6vw, 30px); } .ra-med-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ra-med-card__cat { font-family: var(--ra-f-ui, sans-serif); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); } .ra-med-card__len { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 14px; color: var(--ra-muted, #8B8378); } .ra-med-card__title { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: 24px; line-height: 1.15; margin: 0 0 10px; color: var(--ra-ink, #2A2520); } .ra-med-card__desc { font-family: var(--ra-f-ui, sans-serif); font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--ra-ink-soft, #4A433B); margin: 0 0 22px; flex: 1; } .ra-med-card__play { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-ink, #2A2520); background: transparent; border: 1px solid rgba(168, 132, 47, .5); border-radius: 999px; padding: 11px 20px; cursor: pointer; transition: all .15s ease; } .ra-med-card__play:hover { background: var(--ra-bg-warm, #F5F0E5); } .ra-med-card__playicon { color: var(--ra-gold-deep, #A8842F); font-size: 10px; } .ra-med-card__audio { width: 100%; margin-top: 4px; } .ra-med-card__audio[hidden] { display: none; } /* Honest state for practices whose recording hasn't been uploaded yet. */ .ra-med-card__soon { align-self: flex-start; font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 14px; color: var(--ra-muted, #8B8378); border-top: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); padding-top: 14px; width: 100%; } /* ---------- Diagnostic — four-pillar reference library ---------- */ .ra-diag-search { margin: clamp(26px, 3.4vw, 40px) 0 0; } .ra-diag-search input { width: 100%; max-width: 640px; font-family: var(--ra-f-serif, serif); font-size: clamp(20px, 2.6vw, 26px); color: var(--ra-ink, #2A2520); background: #fff; border: none; border-bottom: 1px solid var(--ra-rule, rgba(42, 37, 32, .3)); padding: 14px 4px; outline: none; } .ra-diag-search input:focus { border-bottom-color: var(--ra-gold-deep, #A8842F); } .ra-diag-search input::placeholder { color: var(--ra-muted, #8B8378); font-style: italic; } .ra-diag-empty { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 18px; color: var(--ra-muted, #8B8378); padding: 24px 4px; } /* Framework pills — a quiet browse affordance under the search box */ .ra-diag-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: clamp(18px, 2.2vw, 24px) 0 0; } .ra-diag-tabs__label { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ra-muted, #8B8378); margin-right: 4px; } .ra-diag-tab { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .14)); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: border-color .18s, background .18s; } .ra-diag-tab:hover { border-color: var(--ra-gold, #C9A95E); } .ra-diag-tab.is-active { background: var(--ra-bg-warm, #F5F0E5); border-color: var(--ra-gold-deep, #A8842F); } .ra-diag-tab__glyph { font-size: 14px; color: var(--ra-gold-deep, #A8842F); line-height: 1; } .ra-diag-tab__label { font-family: var(--ra-f-ui, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ra-ink, #2A2520); } /* Browse intro + grid appear only after a framework is chosen */ .ra-diag-browse { margin-top: clamp(24px, 3vw, 34px); } /* Browse */ .ra-diag-intro { font-family: var(--ra-f-serif, serif); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.6; color: var(--ra-ink-soft, #4A433B); max-width: 760px; margin: 0 0 clamp(22px, 2.6vw, 30px); } .ra-diag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .ra-diag-card { display: flex; flex-direction: column; gap: 6px; text-align: left; background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 4px; padding: 18px 18px 16px; cursor: pointer; transition: border-color .18s, box-shadow .18s; } .ra-diag-card:hover { border-color: var(--ra-gold, #C9A95E); box-shadow: 0 4px 18px rgba(42, 37, 32, .06); } .ra-diag-card__name { font-family: var(--ra-f-serif, serif); font-size: 21px; color: var(--ra-ink, #2A2520); width: 100%; white-space: normal; overflow-wrap: anywhere; } .ra-diag-card__teaser { font-family: var(--ra-f-ui, sans-serif); font-size: 13px; line-height: 1.5; color: var(--ra-muted, #8B8378); width: 100%; white-space: normal; overflow-wrap: anywhere; } /* Search results — symptom summary (the four roots) + full diagnostics */ .ra-diag-searchresults { margin-top: clamp(22px, 2.8vw, 32px); } .ra-diag-rootsum { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); } .ra-diag-root { } .ra-diag-root__label { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); margin-bottom: 6px; } .ra-diag-root__line { font-family: var(--ra-f-serif, serif); font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--ra-ink-soft, #4A433B); margin: 0; } .ra-diag-root__line strong { color: var(--ra-ink, #2A2520); font-weight: 600; } .ra-diag-readfull { display: inline-flex; align-items: center; gap: 8px; margin: clamp(22px, 2.8vw, 32px) 0 0; font-family: var(--ra-f-ui, sans-serif); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ra-ink, #2A2520); background: transparent; border: none; border-bottom: 2px solid var(--ra-gold, #C9A95E); padding: 4px 2px; cursor: pointer; } .ra-diag-readfull:hover { color: var(--ra-gold-deep, #A8842F); } .ra-diag-readfull__pm { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--ra-gold, #C9A95E); border-radius: 50%; font-size: 15px; line-height: 1; color: var(--ra-gold-deep, #A8842F); } .ra-diag-full { margin-top: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: clamp(30px, 4vw, 46px); } .ra-diag-fullroot { } .ra-diag-fullroot > .ra-diag-root__label { padding-bottom: 10px; border-bottom: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .14)); } .ra-diag-fullroot > .ra-diag-root__line { margin-bottom: clamp(18px, 2.4vw, 26px); } .ra-diag-fe { padding: clamp(18px, 2.2vw, 24px) 0 0; } .ra-diag-fe + .ra-diag-fe { border-top: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); } .ra-diag-fe__name { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(22px, 2.8vw, 28px); line-height: 1.1; color: var(--ra-ink, #2A2520); margin: 0 0 clamp(16px, 2vw, 22px); } .ra-diag-fe .ra-diag-block:last-child { margin-bottom: 0; } .ra-diag-fe .ra-diag-p strong { color: var(--ra-ink, #2A2520); } /* Detail */ .ra-diag-back { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-muted, #8B8378); background: transparent; border: none; cursor: pointer; padding: 0; margin-bottom: 20px; } .ra-diag-back:hover { color: var(--ra-gold-deep, #A8842F); } .ra-diag-detail__head { margin-bottom: clamp(22px, 2.8vw, 32px); } .ra-diag-detail__name { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.04; margin: 6px 0 0; color: var(--ra-ink, #2A2520); } .ra-diag-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--ra-rule-soft, rgba(42, 37, 32, .1)); border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 4px; overflow: hidden; margin: 0 0 clamp(22px, 2.6vw, 30px); } .ra-diag-meta > div { background: #fff; padding: 14px 16px; } .ra-diag-meta dt { font-family: var(--ra-f-ui, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); margin-bottom: 5px; } .ra-diag-meta dd { font-family: var(--ra-f-serif, serif); font-size: 17px; line-height: 1.4; color: var(--ra-ink, #2A2520); margin: 0; } .ra-diag-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ra-rule-soft, rgba(42, 37, 32, .1)); border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 4px; overflow: hidden; margin: 0 0 clamp(24px, 3vw, 32px); } @media (max-width: 720px) { .ra-diag-states { grid-template-columns: 1fr; } } .ra-diag-state { background: #fff; padding: clamp(18px, 2.2vw, 24px); } .ra-diag-state__label { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); margin-bottom: 10px; } .ra-diag-state p { font-family: var(--ra-f-serif, serif); font-size: 16px; line-height: 1.5; color: var(--ra-ink-soft, #4A433B); margin: 0; } .ra-diag-block { margin: 0 0 clamp(22px, 2.6vw, 30px); } .ra-diag-block__label { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .12)); } .ra-diag-p { font-family: var(--ra-f-serif, serif); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.6; color: var(--ra-ink-soft, #4A433B); margin: 0; } .ra-diag-ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 32px; } @media (max-width: 560px) { .ra-diag-ul { columns: 1; } } .ra-diag-ul li { position: relative; font-family: var(--ra-f-ui, sans-serif); font-size: 15px; line-height: 1.5; color: var(--ra-ink-soft, #4A433B); padding: 6px 0 6px 20px; break-inside: avoid; } .ra-diag-ul li::before { content: "\25C6"; position: absolute; left: 0; top: 9px; color: var(--ra-gold, #C9A95E); font-size: 9px; } .ra-diag-healing { display: flex; flex-direction: column; gap: 16px; } .ra-diag-healing__item { padding-left: 16px; border-left: 2px solid var(--ra-gold, #C9A95E); } .ra-diag-healing__t { font-family: var(--ra-f-ui, sans-serif); font-size: 14px; font-weight: 600; color: var(--ra-ink, #2A2520); margin-bottom: 5px; } .ra-diag-healing__item p { font-family: var(--ra-f-serif, serif); font-size: 16px; line-height: 1.55; color: var(--ra-ink-soft, #4A433B); margin: 0; } .ra-diag-affirm { list-style: none; margin: 0; padding: 0; } .ra-diag-affirm li { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--ra-ink, #2A2520); padding: 8px 0 8px 18px; border-left: 2px solid var(--ra-gold, #C9A95E); margin-bottom: 8px; } /* ---------- Journal ---------- */ .ra-journal-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); margin-top: clamp(20px, 2.4vw, 32px); align-items: start; } .ra-journal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 22px; } .ra-journal-prompt { position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: var(--ra-bg-warm, #F5F0E5); border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .08)); border-radius: 3px; padding: clamp(24px, 3vw, 36px); margin-bottom: 18px; } .ra-journal-prompt__text { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: clamp(21px, 2.8vw, 27px); line-height: 1.4; color: var(--ra-ink, #2A2520); margin: 0; } .ra-journal-shuffle { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(168, 132, 47, .4); background: rgba(255, 255, 255, .6); color: var(--ra-gold-deep, #A8842F); font-size: 16px; cursor: pointer; transition: background .15s ease; } .ra-journal-shuffle:hover { background: #fff; } .ra-journal-flash { font-family: var(--ra-f-ui, sans-serif); font-size: 13px; color: #5c7a3f; background: rgba(120, 150, 80, .1); border: 1px solid rgba(120, 150, 80, .28); border-radius: 2px; padding: 12px 16px; margin-bottom: 16px; } .ra-journal-textarea { width: 100%; min-height: clamp(240px, 38vh, 400px); resize: vertical; background: #fff; border: 1px solid var(--ra-rule, rgba(42, 37, 32, .16)); border-radius: 3px; padding: clamp(20px, 3vw, 30px); font-family: var(--ra-f-serif, serif); font-size: 20px; line-height: 1.7; color: var(--ra-ink, #2A2520); outline: none; } .ra-journal-textarea:focus { border-color: rgba(168, 132, 47, .5); } .ra-journal-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; } .ra-journal-count { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 14px; color: var(--ra-muted, #8B8378); } .ra-journal-form .ra-btn { border: none; } .ra-journal-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .ra-journal-entry { background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 2px; padding: 20px 22px; } .ra-journal-entry__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .ra-journal-entry__cat { font-family: var(--ra-f-ui, sans-serif); font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); } .ra-journal-entry__date { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 13px; color: var(--ra-muted, #8B8378); } .ra-journal-entry__excerpt { font-family: var(--ra-f-serif, serif); font-size: 17px; line-height: 1.5; color: var(--ra-ink-soft, #4A433B); margin: 0; } .ra-journal-empty { background: var(--ra-bg-warm, #F5F0E5); border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .08)); border-radius: 2px; padding: 28px; font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ra-muted, #8B8378); } .ra-journal-entry { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .ra-journal-entry:hover, .ra-journal-entry:focus-visible { border-color: rgba(168, 132, 47, .5); box-shadow: 0 10px 28px rgba(42, 37, 32, .08); outline: none; } /* Past-entry viewer modal */ .ra-journal-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .ra-journal-modal[hidden] { display: none; } .ra-journal-modal__scrim { position: absolute; inset: 0; background: rgba(42, 37, 32, .55); } .ra-journal-modal__panel { position: relative; background: #fff; border-radius: 6px; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: clamp(30px, 4vw, 46px); box-shadow: 0 30px 80px rgba(42, 37, 32, .3); } .ra-journal-modal__close { position: absolute; top: 12px; right: 16px; appearance: none; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--ra-muted, #8B8378); cursor: pointer; } .ra-journal-modal__close:hover { color: var(--ra-ink, #2A2520); } .ra-journal-modal__meta { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); margin-bottom: 14px; } .ra-journal-modal__prompt { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.35; color: var(--ra-ink, #2A2520); margin: 0 0 18px; } .ra-journal-modal__body { font-family: var(--ra-f-serif, serif); font-size: 17px; line-height: 1.7; color: var(--ra-ink-soft, #4A433B); white-space: pre-wrap; } /* ---------- Oracle ---------- */ @keyframes raFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .ra-oracle-hero { text-align: center; max-width: 640px; margin: 0 auto; } .ra-oracle-title { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(32px, 5vw, 52px); line-height: 1.02; margin: 12px 0 0; color: var(--ra-ink, #2A2520); } .ra-oracle-choose { max-width: 560px; margin: clamp(28px, 4vw, 44px) auto 0; } .ra-oracle-question { width: 100%; background: #fff; border: 1px solid var(--ra-rule, rgba(42, 37, 32, .16)); border-radius: 8px; padding: 16px 18px; font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 19px; color: var(--ra-ink, #2A2520); outline: none; text-align: center; margin-bottom: 26px; } .ra-oracle-question:focus { border-color: rgba(168, 132, 47, .5); } .ra-oracle-spreads { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .ra-oracle-spreads--single { max-width: 320px; margin: 0 auto; } /* Draw-a-card trigger: the floating card fan from the homepage "Pull a card" */ .ra-oracle-drawbtn { appearance: none; -webkit-appearance: none; background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 24px; margin: 0 auto; padding: 14px 10px; } .ra-oracle-fan { display: flex; justify-content: center; align-items: center; gap: 14px; } .ra-oracle-fan__card { width: clamp(74px, 11vw, 104px); aspect-ratio: 5/7; border-radius: 10px; border: 1px solid rgba(168, 132, 47, .45); box-shadow: 0 18px 40px rgba(42, 37, 32, .16); background: linear-gradient(150deg, #2A2520, #4A3B1E); background-size: cover; background-position: center; background-repeat: no-repeat; animation: raOracleFan 4.2s ease-in-out infinite; transition: border-color .18s ease, box-shadow .18s ease; } .ra-oracle-fan__card:nth-child(2) { animation-duration: 3.6s; animation-delay: .5s; } .ra-oracle-fan__card:nth-child(3) { animation-duration: 4.6s; animation-delay: .9s; } .ra-oracle-fan__card--up { position: relative; top: -16px; } .ra-oracle-drawbtn:hover .ra-oracle-fan__card { border-color: rgba(168, 132, 47, .75); box-shadow: 0 22px 48px rgba(168, 132, 47, .3); } .ra-oracle-drawbtn:hover .ra-oracle-spread__title { color: var(--ra-gold-deep, #A8842F); } @keyframes raOracleFan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } @media (prefers-reduced-motion: reduce) { .ra-oracle-fan__card { animation: none !important; } } .ra-oracle-spread { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid var(--ra-rule, rgba(42, 37, 32, .14)); border-radius: 3px; padding: 30px 24px; cursor: pointer; transition: border-color .16s ease, transform .16s ease; } .ra-oracle-spread:hover { border-color: rgba(168, 132, 47, .5); transform: translateY(-2px); } .ra-oracle-spread__glyph { font-family: var(--ra-f-serif, serif); font-size: 32px; letter-spacing: 4px; color: var(--ra-gold, #C9A95E); margin-bottom: 12px; } .ra-oracle-spread__title { font-family: var(--ra-f-serif, serif); font-size: 24px; color: var(--ra-ink, #2A2520); margin-bottom: 6px; } .ra-oracle-spread__sub { font-family: var(--ra-f-ui, sans-serif); font-weight: 300; font-size: 13px; color: var(--ra-muted, #8B8378); } .ra-oracle-askback { text-align: center; font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 20px; color: var(--ra-muted, #8B8378); margin: 24px 0 0; } .ra-oracle-hint { text-align: center; font-family: var(--ra-f-ui, sans-serif); font-weight: 300; font-size: 14px; color: var(--ra-muted, #8B8378); margin: 18px 0 0; } .ra-oracle-cards { display: flex; gap: clamp(16px, 3vw, 32px); justify-content: center; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); } .ra-oracle-card { width: clamp(150px, 22vw, 210px); } /* Keep a three-card spread on one row on phones so Past · Present · Future still reads as a sequence instead of wrapping 2 + 1. */ @media (max-width: 600px) { .ra-oracle-cards { gap: 8px; } .ra-oracle-card { width: clamp(88px, 28vw, 150px); } .ra-oracle-card__pos { font-size: 9px; letter-spacing: .14em; } } .ra-oracle-card__pos { font-family: var(--ra-f-ui, sans-serif); font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); text-align: center; margin-bottom: 14px; height: 14px; } .ra-oracle-card__flip { position: relative; width: 100%; aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4, .1, .2, 1); cursor: pointer; } .ra-oracle-card.is-flipped .ra-oracle-card__flip { transform: rotateY(180deg); cursor: default; animation: none; } .ra-oracle-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--ra-dark, #2A2520); } .ra-oracle-face::before { content: ""; position: absolute; inset: 0; background-image: url('../../reiki-content/assets/img/prism-flare.jpg'); background-size: cover; background-position: center; opacity: .35; mix-blend-mode: screen; } .ra-oracle-face--back { border: 1px solid rgba(168, 132, 47, .4); box-shadow: 0 20px 44px rgba(42, 37, 32, .18); } .ra-oracle-face--back::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(168, 132, 47, .35); border-radius: 6px; } .ra-oracle-mono { position: relative; font-family: var(--ra-f-display, 'Italiana', serif); font-style: italic; font-size: clamp(48px, 9vw, 72px); color: var(--ra-gold-lit, #D4A938); } .ra-oracle-face--front { transform: rotateY(180deg); border: 1px solid rgba(168, 132, 47, .5); box-shadow: 0 24px 50px rgba(42, 37, 32, .22); } .ra-oracle-face__inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; inset: 0; margin: 12px; padding: 18px 14px; border: 1px solid rgba(168, 132, 47, .45); border-radius: 6px; width: calc(100% - 24px); height: calc(100% - 24px); text-align: center; } .ra-oracle-face__roman { font-family: var(--ra-f-display, 'Italiana', serif); font-size: clamp(30px, 6vw, 46px); color: var(--ra-gold-lit, #D4A938); line-height: 1; } .ra-oracle-face__orn { font-size: 13px; color: var(--ra-gold, #C9A95E); } .ra-oracle-face__name { font-family: var(--ra-f-serif, serif); font-size: clamp(18px, 2.4vw, 23px); line-height: 1.15; color: var(--ra-bg-warm, #F5F0E5); } /* Real card art: the illustration fills the face; drop the CSS frame + prism overlay. */ .ra-oracle-face.has-img { background: none; } .ra-oracle-face.has-img::before, .ra-oracle-face.has-img::after { display: none; } .ra-oracle-face.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ra-oracle-reading { max-width: 660px; margin: clamp(40px, 5vw, 60px) auto 0; display: flex; flex-direction: column; gap: 24px; } .ra-oracle-read { background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 2px; padding: clamp(26px, 3vw, 38px); } .ra-oracle-read__pos { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); margin-bottom: 12px; } .ra-oracle-read__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; } .ra-oracle-read__roman { font-family: var(--ra-f-display, 'Italiana', serif); font-size: clamp(15px, 1.6vw, 18px); color: var(--ra-gold-deep, #A8842F); } .ra-oracle-read__name { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 36px); margin: 0; color: var(--ra-ink, #2A2520); } .ra-oracle-read p { font-family: var(--ra-f-serif, serif); font-size: clamp(18px, 2vw, 20px); line-height: 1.62; color: var(--ra-ink-soft, #4A433B); margin: 0 0 15px; } .ra-oracle-read p:last-child { margin-bottom: 0; } .ra-oracle-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: clamp(36px, 4vw, 52px); } /* Saved Oracle readings — a member's private archive */ .ra-oracle-saved { max-width: 640px; margin: clamp(40px, 6vw, 72px) auto 0; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .12)); } .ra-oracle-saved__heading { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(24px, 3vw, 30px); color: var(--ra-ink, #2A2520); margin: 0 0 6px; text-align: center; } .ra-oracle-saved__note { font-family: var(--ra-f-ui, sans-serif); font-weight: 300; font-size: 13px; color: var(--ra-muted, #8B8378); text-align: center; margin: 0 0 24px; } .ra-oracle-saved__list { display: flex; flex-direction: column; gap: 10px; } .ra-oracle-saved__empty { font-family: var(--ra-f-ui, sans-serif); font-weight: 300; font-size: 14px; color: var(--ra-muted, #8B8378); text-align: center; padding: 8px 0; margin: 0; } .ra-oracle-saved__item { background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .12)); border-radius: 4px; overflow: hidden; } .ra-oracle-saved__item[open] { border-color: rgba(168, 132, 47, .4); } .ra-oracle-saved__summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 18px; cursor: pointer; list-style: none; } .ra-oracle-saved__summary::-webkit-details-marker { display: none; } .ra-oracle-saved__summary::after { content: '+'; font-family: var(--ra-f-serif, serif); font-size: 20px; color: var(--ra-gold-deep, #A8842F); line-height: 1; flex: 0 0 auto; } .ra-oracle-saved__item[open] .ra-oracle-saved__summary::after { content: '\2212'; } .ra-oracle-saved__q { font-family: var(--ra-f-serif, serif); font-size: 18px; color: var(--ra-ink, #2A2520); flex: 1; min-width: 0; overflow-wrap: anywhere; } .ra-oracle-saved__date { font-family: var(--ra-f-ui, sans-serif); font-weight: 300; font-size: 12px; color: var(--ra-muted, #8B8378); white-space: nowrap; flex: 0 0 auto; } .ra-oracle-saved__body { border-top: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .08)); padding: 14px 18px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; } .ra-oracle-saved__cards { font-family: var(--ra-f-ui, sans-serif); font-size: 14px; color: var(--ra-ink-soft, #4A433B); } .ra-oracle-saved__cards-label { font-weight: 500; color: var(--ra-gold-deep, #A8842F); margin-right: 6px; } .ra-oracle-saved__view { flex: 0 0 auto; font-size: 12px; padding: 11px 20px; } .ra-oracle-saved__search { margin: 0 0 18px; } .ra-oracle-saved__search-input { width: 100%; background: #fff; border: 1px solid var(--ra-rule, rgba(42, 37, 32, .16)); border-radius: 8px; padding: 12px 16px; font-family: var(--ra-f-ui, sans-serif); font-size: 15px; color: var(--ra-ink, #2A2520); outline: none; } .ra-oracle-saved__search-input:focus { border-color: rgba(168, 132, 47, .5); } .ra-oracle-saved__foot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 20px; } .ra-oracle-saved__count { font-family: var(--ra-f-ui, sans-serif); font-size: 12px; color: var(--ra-muted, #8B8378); margin: 0; } .ra-oracle-saved__more { min-width: 160px; } /* ---------- Vedic Astrology ---------- */ .ra-astro-hero { text-align: center; max-width: 660px; margin: 0 auto; } .ra-astro-title { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(32px, 5vw, 52px); line-height: 1.02; margin: 12px 0 0; color: var(--ra-ink, #2A2520); } .ra-astro-form { max-width: 520px; margin: clamp(32px, 4vw, 48px) auto 0; background: #fff; border: 1px solid var(--ra-rule-soft, rgba(42, 37, 32, .1)); border-radius: 3px; padding: clamp(30px, 4vw, 44px); display: flex; flex-direction: column; gap: 20px; } .ra-astro-row { display: flex; gap: 14px; flex-wrap: wrap; } .ra-astro-row .ra-astro-field { flex: 1; min-width: 130px; } .ra-astro-label { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-muted, #8B8378); display: block; margin-bottom: 9px; } .ra-astro-field input { width: 100%; background: var(--ra-bg, #FBF9F4); border: 1px solid var(--ra-rule, rgba(42, 37, 32, .16)); border-radius: 2px; padding: 14px 15px; font-family: var(--ra-f-ui, sans-serif); font-size: 15px; color: var(--ra-ink, #2A2520); outline: none; } .ra-astro-field input:focus { border-color: rgba(168, 132, 47, .5); } .ra-body button.ra-astro-go { border: none; padding: 17px; letter-spacing: .24em; } .ra-astro-note { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 13px; line-height: 1.5; color: var(--ra-muted, #8B8378); text-align: center; margin: 0; } .ra-astro-head { text-align: center; margin-bottom: clamp(28px, 3vw, 40px); } .ra-astro-head__name { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: 24px; color: var(--ra-ink, #2A2520); } .ra-astro-head__meta { font-family: var(--ra-f-ui, sans-serif); font-size: 13px; color: var(--ra-muted, #8B8378); margin-top: 6px; } .ra-astro-result { margin-top: clamp(32px, 4vw, 48px); } .ra-astro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 44px); align-items: start; } .ra-astro-caption { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ra-gold-deep, #A8842F); margin-bottom: 16px; text-align: center; } .ra-astro-caption--left { text-align: left; margin-bottom: 18px; } .ra-astro-chart { aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); border: 1.5px solid rgba(168, 132, 47, .5); background: #fff; } .ra-astro-cell { border: .5px solid rgba(42, 37, 32, .14); background: #fff; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 7px; } .ra-astro-cell--centre { grid-column: 2 / span 2; grid-row: 2 / span 2; align-items: center; justify-content: center; background: var(--ra-bg, #FBF9F4); border: .5px solid rgba(42, 37, 32, .14); } .ra-astro-centre__a { font-family: var(--ra-f-display, 'Italiana', serif); font-size: clamp(16px, 2.4vw, 22px); color: var(--ra-gold-deep, #A8842F); } .ra-astro-centre__b { font-family: var(--ra-f-serif, serif); font-style: italic; font-size: clamp(13px, 2vw, 16px); color: var(--ra-muted, #8B8378); } .ra-astro-cell__sign { font-family: var(--ra-f-ui, sans-serif); font-size: 9px; letter-spacing: .06em; color: var(--ra-dark-text, #BAB1A3); text-transform: uppercase; } .ra-astro-cell__planets { font-family: var(--ra-f-ui, sans-serif); font-size: clamp(10px, 1.6vw, 12px); font-weight: 500; color: var(--ra-gold-deep, #A8842F); line-height: 1.3; } .ra-astro-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; justify-content: center; } .ra-astro-legend__item { font-family: var(--ra-f-ui, sans-serif); font-size: 11px; color: var(--ra-muted, #8B8378); } .ra-astro-legend__abbr { color: var(--ra-gold-deep, #A8842F); font-weight: 500; } .ra-astro-note--chart { margin-top: 14px; font-size: 12px; } .ra-astro-reading { display: flex; flex-direction: column; gap: 24px; } .ra-astro-read h3 { font-family: var(--ra-f-serif, serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 26px); margin: 0 0 8px; color: var(--ra-ink, #2A2520); } .ra-astro-read p { font-family: var(--ra-f-ui, sans-serif); font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--ra-ink-soft, #4A433B); margin: 0; } .ra-astro-new { margin-top: 30px; } /* ---------- Beat Elementor's global-kit