/* Warm gold/violet/cyan cosmic palette is the default brand palette as of the design/predloha + design/panel + design/ukazka rollout (lives on :root, no data-theme attribute needed) - matches those mockups' tokens exactly. Půlnoční (midnight, the previous icy-blue default) is kept as a selectable alternate under data-theme='midnight' rather than removed, same as sapphire/amethyst/galactic - see the theme-switcher widget for all alternates. */ :root { --bg: #05040c; --bg-alt: rgba(24, 16, 46, 0.4); --card: rgba(24, 16, 46, 0.55); --bg-grad-top: #1a0f38; --gold: #ffd166; --gold-soft: #ffb84d; --btn-text: #1a0f0a; --text: #f6f2ff; --text-dim: #b3a9d6; --violet: #a855f7; --cyan: #4fd8ff; --border: rgba(255, 214, 122, 0.22); --danger: #e0715c; --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* --- Color themes: swapped by setting data-theme on (see the theme-switcher widget + its inline pre-paint script in index.html). Only the palette variables change - layout/typography stay identical. --- */ [data-theme='midnight'] { --bg: #04070f; --bg-alt: rgba(10, 16, 32, 0.55); --card: rgba(14, 22, 42, 0.62); --bg-grad-top: #0d1830; --gold: #cfe3f7; --gold-soft: #a8c8e8; --btn-text: #04101f; --text: #f2f7fc; --text-dim: #8fa3c2; --violet: #3a5a8a; --cyan: #6fd1c8; --border: rgba(207, 227, 247, 0.18); } [data-theme='sapphire'] { --bg: #070c1c; --bg-alt: rgba(14, 24, 48, 0.55); --card: rgba(18, 32, 62, 0.62); --bg-grad-top: #132a52; --gold: #5fc9f3; --gold-soft: #3fa0d6; --btn-text: #041022; --text: #e6f0fb; --text-dim: #93a8c9; --violet: #2c5fb0; --cyan: #8fe3c0; --border: rgba(95, 201, 243, 0.18); } [data-theme='amethyst'] { --bg: #1a0f2e; --bg-alt: rgba(42, 24, 74, 0.55); --card: rgba(51, 28, 90, 0.62); --bg-grad-top: #3d2266; --gold: #e8c468; --gold-soft: #c9a95c; --btn-text: #2a1a05; --text: #f3ecf9; --text-dim: #b39ecf; --violet: #9b59d0; --cyan: #7fd8ff; --border: rgba(232, 196, 104, 0.18); } [data-theme='galactic'] { --bg: #050b14; --bg-alt: rgba(10, 24, 40, 0.55); --card: rgba(14, 32, 52, 0.62); --bg-grad-top: #0f2c48; --gold: #4fd8ff; --gold-soft: #2fb8e0; --btn-text: #021420; --text: #eaf7ff; --text-dim: #7fa8c0; --violet: #2470a8; --cyan: #ffd166; --border: rgba(79, 216, 255, 0.18); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); background: radial-gradient(ellipse at top, var(--bg-grad-top) 0%, var(--bg) 55%); background-attachment: fixed; transition: background 0.4s ease; color: var(--text); line-height: 1.6; position: relative; overflow-x: hidden; } /* Cosmic backdrop: layered starfields (small tiles repeated across the viewport so a handful of hand-placed dots read as hundreds) plus a couple of very soft, non-repeating nebula washes in the theme's accent colors. Fixed + behind everything (z-index 0, .wrap sits at z-index 1) so it shows through the semi-transparent .card panels via their backdrop-filter. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.85), transparent), radial-gradient(1px 1px at 65% 75%, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 90% 15%, rgba(255, 255, 255, 0.7), transparent), radial-gradient(1.5px 1.5px at 40% 90%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 10% 60%, rgba(255, 255, 255, 0.65), transparent), radial-gradient(2px 2px at 25% 45%, var(--gold), transparent), radial-gradient(1.5px 1.5px at 80% 55%, var(--gold), transparent), radial-gradient(1.5px 1.5px at 55% 20%, var(--gold-soft), transparent), radial-gradient(2.5px 2.5px at 15% 80%, var(--gold), transparent), radial-gradient(2px 2px at 70% 30%, var(--gold-soft), transparent), radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--violet) 35%, transparent), transparent 60%), radial-gradient(circle at 85% 75%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 55%); background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-size: 180px 180px, 220px 220px, 260px 260px, 300px 300px, 240px 240px, 340px 340px, 420px 420px, 380px 380px, 460px 460px, 400px 400px, 100% 100%, 100% 100%; animation: twinkle 7s ease-in-out infinite alternate; transition: background 0.4s ease; } @keyframes twinkle { from { opacity: 0.5; } to { opacity: 1; } } .wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; } .site-header { position: relative; padding: 34px 0 20px; text-align: center; border-bottom: 1px solid var(--border); overflow: hidden; transition: padding 0.3s ease; } @media (max-width: 560px) { .site-header { padding: 18px 0 14px; } } .site-header.is-compact { padding: 16px 0; } .site-header.is-compact .logo-icon { width: 40px; height: 40px; } .site-header.is-compact .logo-text { font-size: 1.7rem; } .header-inner { transition: all 0.3s ease; } .header-login-link { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); z-index: 2; color: var(--gold-soft); font-size: 0.85rem; font-weight: 600; text-decoration: none; border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; transition: border-color 0.2s ease, color 0.2s ease; } .header-login-link:hover { color: var(--gold); border-color: var(--gold-soft); } @media (max-width: 560px) { .header-login-link { position: static; display: inline-block; transform: none; margin-top: 10px; } } /* Faint, slowly-rotating rings behind the header - purely atmospheric, reinforcing the "compass"/zodiac-wheel motif without competing with text. */ .header-orbits { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .orbit { position: absolute; top: 50%; left: 50%; border: 1px dashed color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 50%; transform: translate(-50%, -50%); } .orbit-1 { width: 620px; height: 620px; animation: rotate-slow 90s linear infinite; } .orbit-2 { width: 420px; height: 420px; border-style: solid; border-color: rgba(111, 95, 214, 0.14); animation: rotate-slow 70s linear infinite reverse; } @keyframes rotate-slow { to { transform: translate(-50%, -50%) rotate(360deg); } } .logo { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 16px; font-family: var(--font-heading); font-size: clamp(2.4rem, 1.6vw + 2rem, 3.1rem); font-weight: 500; letter-spacing: 0.01em; } .logo-icon { flex-shrink: 0; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 45%, transparent)); transition: transform 0.6s ease, width 0.3s ease, height 0.3s ease; } .logo:hover .logo-icon { transform: rotate(50deg); } .logo-ring-slow { transform-origin: 24px 24px; animation: rotate-slow 26s linear infinite; } .logo-ring-fast { transform-origin: 24px 24px; animation: rotate-slow 16s linear infinite reverse; } .logo-star { transform-origin: 24px 24px; animation: pulse-star 4s ease-in-out infinite; } @keyframes pulse-star { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } } .logo-text { background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-soft)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; text-transform: uppercase; letter-spacing: 0.24em; transition: font-size 0.3s ease; } @keyframes shimmer { to { background-position: 200% center; } } main { padding: 40px 20px 70px; } .card { position: relative; background: var(--card); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); border: 1px solid var(--border); border-radius: 18px; padding: 32px 34px; margin-bottom: 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); text-align: center; transition: box-shadow 0.3s ease, background 0.4s ease, border-color 0.4s ease; } /* Mobile: everything stacks into one long column with no room for a second, so trim the padding/gaps that were sized for a wide desktop layout - keeps the same content, just less dead space to scroll past. */ @media (max-width: 560px) { main { padding: 22px 14px 44px; } .card { padding: 22px 18px; margin-bottom: 18px; } } .card:hover { box-shadow: 0 14px 50px rgba(0, 0, 0, 0.45); } /* Cursor-reactive glass glow - a soft highlight that follows the pointer, reinforcing the frosted-glass surface. --mx/--my are written by animations.js on mousemove; default to the center so the glow doesn't jump to a corner before the first move. Negative z-index keeps it below the card's real (non-positioned) content within .card's own stacking context, which backdrop-filter already establishes. */ .card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 20%), color-mix(in srgb, var(--gold) 14%, transparent), transparent 62%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .card:hover::after { opacity: 1; } /* Entrance animation - present as a plain class in the markup, so it simply plays whenever the browser flips the element from display:none (the [hidden] attribute) to visible; no extra JS bookkeeping needed. */ .reveal { animation: fadeInUp 0.55s ease both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Scroll-reveal: elements start hidden/offset and animations.js flips .in-view via IntersectionObserver as they scroll into frame. Falls back to instantly visible when JS/IO is unavailable or motion is reduced. */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } [data-reveal].in-view { opacity: 1; transform: translateY(0); } [data-reveal] .faq-item { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } [data-reveal].in-view .faq-item { opacity: 1; transform: translateY(0); } [data-reveal] .faq-item:nth-child(1) { transition-delay: 0.03s; } [data-reveal] .faq-item:nth-child(2) { transition-delay: 0.1s; } [data-reveal] .faq-item:nth-child(3) { transition-delay: 0.17s; } [data-reveal] .faq-item:nth-child(4) { transition-delay: 0.24s; } [data-reveal] .faq-item:nth-child(5) { transition-delay: 0.31s; } h1 { font-family: var(--font-heading); color: var(--gold); font-size: clamp(2.3rem, 2.4vw + 1.9rem, 3.4rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; margin-top: 0; } h2 { font-family: var(--font-heading); color: var(--gold); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.01em; border-bottom: 1px solid var(--border); padding-bottom: 12px; } .lead { color: var(--text-dim); margin: 0 0 26px; max-width: 56ch; } /* Hero headline - short brand + stats line, right under the logo. Sized to fit on one line at the hero's usual width - plain bold body font rather than the display serif, since a long line in the big serif face wrapped to 3 lines and read as too heavy. */ h1.lead-heading { font-family: var(--font-body); color: var(--text); font-size: clamp(0.8rem, 0.6vw + 0.65rem, 1rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; max-width: 68ch; margin: 0 auto 10px; white-space: nowrap; } @media (max-width: 560px) { h1.lead-heading { white-space: normal; } } /* The descriptive sentence right under the headline - deliberately smaller and muted (reuses .lead), so the two-line hero reads as headline + a quieter explanation, not two headlines. */ .hero-subtext { font-size: 0.95rem; margin: 0 auto 22px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-soft); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; } .eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .accent-underline { position: relative; background: linear-gradient(90deg, var(--gold-soft), var(--gold) 50%, var(--gold-soft)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } .accent-underline::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 3px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: draw-underline 1.1s 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes draw-underline { to { transform: scaleX(1); } } /* HERO: single centered column - the brand visual now lives up in the header next to the logo instead of beside the form. */ .hero-card { text-align: center; } .hero-copy { text-align: center; } .hero-copy form { margin: 0 auto; max-width: 460px; text-align: left; } .hero-copy .field { text-align: left; } .hero-copy input { text-align: left; } .form-subnote { text-align: center; margin-top: 12px; } .trust-bar { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0 auto 28px; padding: 0; max-width: 640px; } @media (max-width: 560px) { .trust-bar { gap: 6px 16px; margin-bottom: 18px; } } .trust-bar li { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--text-dim); } .trust-icon { flex-shrink: 0; color: var(--gold-soft); } .peek-lead { margin-left: auto; margin-right: auto; text-align: center; } .reassurance-note { text-align: center; margin: 12px 0 0; } .excerpts-lead { margin-left: auto; margin-right: auto; text-align: center; } .cta-teaser-wrap { margin-top: 22px; } .module-toc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; text-align: left; margin: 10px 0 24px; } /* Compact variant used in the hero, right under the headline - the hero column is narrower than a full-width .card section, and this sits between the description and the form rather than as its own dedicated section. */ .module-toc-grid--mini { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 22px; } /* Stays 2 columns even on narrow phones instead of collapsing to a single column - a stacked 6-row list of full descriptions was the single biggest contributor to mobile scroll length. Dropping the description text below keeps the grid scannable at half the height instead. */ @media (max-width: 480px) { .module-toc-grid--mini .module-toc-item p { display: none; } .module-toc-grid--mini .module-toc-item { align-items: center; padding: 10px 12px; } } .module-toc-grid--mini .module-toc-item { padding: 12px 14px; gap: 10px; } .module-toc-grid--mini .module-icon { width: 19px; height: 19px; } .module-toc-grid--mini .module-toc-item strong { font-size: 0.87rem; margin-bottom: 2px; } .module-toc-grid--mini .module-toc-item p { font-size: 0.78rem; line-height: 1.35; } /* Denní/týdenní/měsíční horoskop - dashboard hero card. The recurring-value feature that's supposed to be the reason someone keeps a subscription, so it gets a stronger visual treatment than a plain .card (gradient border, glow) rather than blending into the settings-y cards below it. */ .horoscope-hero { background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 9%, transparent), var(--card) 60%); border-color: var(--gold-soft); } /* Same pill-tab visual language as design/panel's .period-tabs/.period-tab - dashboard.js's tab-switching logic (querying #horoscope-tabs / .horoscope-tab / .is-active) is unchanged, this only restyles it. */ .horoscope-tabs { display: flex; gap: 8px; margin: 14px 0 0; } .horoscope-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 100px; padding: 10px 14px; color: var(--text-dim); font-family: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .horoscope-tab .module-icon { width: 18px; height: 18px; } .horoscope-tab:hover { border-color: var(--gold-soft); color: var(--text); } .horoscope-tab.is-active { color: var(--btn-text); background: linear-gradient(135deg, var(--gold-soft), var(--gold)); border-color: transparent; box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 40%, transparent); } .horoscope-tab.is-active .module-icon { color: var(--btn-text); } .horoscope-panel { margin-top: 16px; min-height: 40px; } .horoscope-placeholder { margin: 0; } .horoscope-content { text-align: left; font-size: 0.98rem; line-height: 1.7; } .horoscope-content p:first-child { margin-top: 0; } /* Report CTA (below the horoscope hero) - a plain link-styled button read as secondary next to the hero card, so give it its own full-width treatment instead of the fixed 240px width the old markup had. */ .report-cta-card { text-align: center; } .report-cta-btn { display: block; width: 100%; max-width: 320px; margin: 16px auto 0; text-align: center; } .module-toc-item { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; transition: transform 0.2s ease, border-color 0.2s ease; } .module-toc-item:hover { transform: translateY(-3px); border-color: var(--gold-soft); } .module-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--gold-soft); } .module-toc-item strong { display: block; color: var(--gold); font-size: 0.95rem; margin-bottom: 4px; } .module-toc-item p { margin: 0; color: var(--text-dim); font-size: 0.84rem; } .module-toc-item--synthesis { border-color: var(--gold-soft); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 10%, transparent), var(--bg-alt) 55%); } .module-toc-item--more { border-style: dashed; } .module-toc-more-badge { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--gold-soft); color: var(--gold-soft); font-size: 0.62rem; font-weight: 700; letter-spacing: -0.02em; } .module-detail-example { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; text-align: left; margin-bottom: 24px; } .module-detail-example summary { cursor: pointer; font-weight: 600; color: var(--gold-soft); } .module-detail-example summary::-webkit-details-marker { display: none; } .module-detail-example summary::before { content: '+'; color: var(--gold); font-weight: 700; margin-right: 10px; } .module-detail-example[open] summary::before { content: '−'; } .chapter-list { margin: 16px 0 8px; padding-left: 22px; color: var(--text); } .chapter-list li { margin-bottom: 8px; font-size: 0.92rem; } .peek-subhead { font-family: var(--font-heading); color: var(--gold-soft); font-size: 1.15rem; margin: 0 0 6px; } .peek-note { margin: 0 0 16px; } .sample-quote { text-align: left; background: var(--bg-alt); border-left: 3px solid var(--gold-soft); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 0 0 16px; transition: transform 0.25s ease, border-left-color 0.25s ease; } .sample-quote:hover { transform: translateX(4px); border-left-color: var(--gold); } .sample-quote p { margin: 0; color: var(--text); font-style: italic; font-size: 0.94rem; line-height: 1.7; } .paywall-heading { font-family: var(--font-heading); color: var(--gold); font-size: clamp(1.6rem, 1.4vw + 1.4rem, 2.1rem); font-weight: 700; margin: 0 0 22px; text-align: center; } .feature-list { list-style: none; padding: 0; margin: 0 0 20px; font-size: 0.9rem; color: var(--text); } .feature-list li { position: relative; padding-left: 22px; margin-bottom: 8px; } .feature-list li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; } .faq-list { display: flex; flex-direction: column; gap: 10px; text-align: left; } .faq-item { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; transition: border-color 0.25s ease; } .faq-item:hover { border-color: var(--gold-soft); } .faq-item summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: '+'; color: var(--gold); font-weight: 700; margin-right: 10px; } .faq-item[open] summary::before { content: '−'; } .faq-item p { color: var(--text-dim); margin: 12px 0 2px; font-size: 0.92rem; } .legal-details { margin-top: 14px; text-align: left; max-width: 640px; margin-left: auto; margin-right: auto; } .legal-details summary { cursor: pointer; color: var(--text-dim); text-align: center; text-decoration: underline; font-size: 0.82rem; } .legal-content h4 { color: var(--gold-soft); font-size: 0.9rem; margin: 14px 0 4px; } .legal-content p { font-size: 0.8rem; color: var(--text-dim); line-height: 1.6; } .field { margin-bottom: 18px; flex: 1; min-width: 0; max-width: 100%; overflow-x: hidden; text-align: center; } @media (max-width: 560px) { .field { margin-bottom: 12px; } } .field-row { display: flex; gap: 20px; } /* Native date/time pickers on some mobile browsers render at a fixed intrinsic width regardless of CSS width - wider than a side-by-side column can actually give them - which is what was pushing the page wider than the viewport and reading as "the whole page slides sideways" once a field was focused. Stacking these to one-per-row well before typical phone widths (rather than right at 560px) keeps each field free to be the full container width instead of fighting a sibling for space. */ @media (max-width: 700px) { .field-row { flex-direction: column; gap: 0; } } form { max-width: 420px; margin: 0 auto; } label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.92rem; } .hint { font-weight: 400; color: var(--text-dim); font-size: 0.82rem; } #snapshot-btn { display: block; margin: 0 auto; } #demo-preview-btn { display: block; width: 100%; white-space: normal; line-height: 1.35; } .demo-note { max-width: 56ch; margin: 0 auto 20px; text-align: center; } /* Hints live below the input, not inside the label - keeps every label in a .field-row a single line so paired fields (e.g. Datum/Čas narození) stay top-aligned regardless of how long one field's hint text is. */ .field-hint { display: block; margin-top: 6px; line-height: 1.35; } .checkbox-field { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 18px; font-weight: 400; font-size: 0.88rem; text-align: left; cursor: pointer; color: var(--text-dim); } .checkbox-field input[type='checkbox'] { width: 16px; height: 16px; min-width: 16px; margin-top: 2px; accent-color: var(--gold); cursor: pointer; } .newsletter-icon { display: block; margin: 0 auto 12px; opacity: 0.8; } .newsletter-form { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 440px; margin: 0 auto; } .newsletter-form .input-icon-wrap { width: 100%; } input, textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); /* iOS Safari auto-zooms the whole page in on focus for any input with a computed font-size under 16px - that zoom-then-pan is exactly what reads as the page "sliding sideways" on a phone. Keeping this at/above 16px (not 0.98rem, which rounds to ~15.7px) is the standard fix. */ font-size: 16px; font-family: inherit; text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Some mobile browsers give the native date/time picker control its own intrinsic minimum width that ignores an inherited CSS width - clamping it explicitly here (plus the .field-row breakpoint above) stops that control from ever rendering wider than its box and dragging the page with it. */ input[type='date'], input[type='time'] { width: 100%; max-width: 100%; min-width: 0; } input:focus, textarea:focus { outline: none; border-color: var(--gold-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); } .input-icon-wrap { position: relative; } .input-icon-wrap .input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gold-soft); opacity: 0.75; pointer-events: none; } .input-icon-wrap input { padding-left: 40px; padding-right: 40px; } .btn { position: relative; display: inline-block; text-align: center; border: none; border-radius: 999px; padding: 14px 28px; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; overflow: visible; /* An otherwise inherits the browser's default link underline - with no global `a { text-decoration: none }` reset anywhere in this stylesheet, every pill CTA on the site was quietly rendering with a plain-hyperlink underline under the label text, which is what read as "off" rather than a real button. */ text-decoration: none; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, opacity 0.2s ease; } .btn span { position: relative; z-index: 1; } /* Shine sweep - clipped to the pill shape via a wrapper pseudo-element so overflow can stay visible (needed for the ring-pulse below) without the shine spilling outside the rounded corners. */ .btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.5) 50%, transparent 60%); background-size: 250% 100%; background-position: 100% 0; transition: background-position 0.65s ease; } .btn:hover::before { background-position: -50% 0; } /* One-shot sonar ring - CSS restarts a :hover-scoped animation from its start every time the pointer re-enters, so it reads as a fresh pulse per hover rather than a distracting perpetual loop. */ .btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--gold); opacity: 0; pointer-events: none; } .btn:hover::after { animation: btn-ring 0.6s ease-out; } @keyframes btn-ring { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(1.18); } } .btn:hover { transform: translateY(-2px) scale(1.015); } .btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.08s; } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%); color: var(--btn-text); /* Layered shadow (tight+dark for depth, wide+gold for glow) instead of a single soft blur - reads as a lit, pressable object rather than a flat tinted rectangle. */ box-shadow: 0 2px 4px color-mix(in srgb, black 25%, transparent), 0 6px 22px color-mix(in srgb, var(--gold) 40%, transparent); } .btn-primary:hover:not(:disabled) { box-shadow: 0 4px 8px color-mix(in srgb, black 30%, transparent), 0 12px 36px color-mix(in srgb, var(--gold) 55%, transparent); } .btn-secondary { background: color-mix(in srgb, var(--gold) 6%, transparent); border: 1.5px solid var(--gold); color: var(--gold); margin-top: 20px; } .btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--gold) 14%, transparent); box-shadow: 0 6px 22px color-mix(in srgb, var(--gold) 25%, transparent); } .btn-lg { padding: 18px 40px; font-size: 1.15rem; } .print-hint { font-size: 0.82rem; color: var(--text-dim); font-style: italic; margin-top: 10px; } .number-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 18px 0 26px; } .number-tile, .fact-tile { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px; text-align: center; transition: transform 0.2s ease, border-color 0.2s ease; animation: fadeInUp 0.5s ease both; } /* Freshly-rendered tiles (snapshot numbers, fact grid) pop in one after another instead of all at once - the animation plays automatically on insertion since these nodes are new to the DOM (set via innerHTML right as the section is revealed), no IntersectionObserver bookkeeping needed. */ .number-grid .number-tile:nth-child(1) { animation-delay: 0.05s; } .number-grid .number-tile:nth-child(2) { animation-delay: 0.15s; } .number-grid .number-tile:nth-child(3) { animation-delay: 0.25s; } .number-grid .number-tile:nth-child(4) { animation-delay: 0.35s; } .number-grid .number-tile:nth-child(5) { animation-delay: 0.45s; } .number-grid .number-tile:nth-child(6) { animation-delay: 0.55s; } .number-grid .number-tile:nth-child(7) { animation-delay: 0.65s; } .fact-grid .fact-tile:nth-child(1) { animation-delay: 0.1s; } .fact-grid .fact-tile:nth-child(2) { animation-delay: 0.2s; } .fact-grid .fact-tile:nth-child(3) { animation-delay: 0.3s; } .fact-grid .fact-tile:nth-child(4) { animation-delay: 0.4s; } .number-tile:hover, .fact-tile:hover { transform: translateY(-3px); border-color: var(--gold-soft); } .number-tile .value { font-size: 1.8rem; font-weight: 700; color: var(--gold); } .number-tile .label { font-size: 0.8rem; color: var(--text-dim); margin-top: 4px; } .fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 10px; } .fact-tile .label { font-size: 0.78rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; } .fact-tile .value { font-size: 1.15rem; font-weight: 600; color: var(--text); margin-top: 2px; } .note { font-size: 0.86rem; color: var(--text-dim); font-style: italic; margin-top: 8px; } /* Wraps the full report outline + sample quotes shown inside the snapshot reveal (public/app.js's renderSnapshotHtml) - these used to be their own top-level marketing sections (each with an

) shown regardless of form state; now they only render after the client fills the form, nested one level down inside #snapshot-content, hence

here instead of

. */ .snapshot-block { text-align: center; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); } .snapshot-block h3 { font-family: var(--font-heading); color: var(--gold); font-size: 1.25rem; font-weight: 500; letter-spacing: 0.01em; margin: 0 0 10px; } .paywall { margin-top: 26px; padding-top: 26px; border-top: 1px dashed var(--border); text-align: center; } /* Top offer card (index.html): the paywall is the section's only/first content now, not something separated from a headline above it - the dashed divider + top margin/padding above just left dead empty space. */ #offer-section .paywall { margin-top: 0; padding-top: 0; border-top: none; } .payment-note { margin-top: 20px; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; } @media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-grid--single { grid-template-columns: minmax(0, 460px); justify-content: center; margin: 0 auto; } .pricing-card { position: relative; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; padding: 26px 22px; display: flex; flex-direction: column; transition: transform 0.25s ease, border-color 0.25s ease; } .pricing-card:hover { transform: translateY(-4px); } .pricing-card--featured { border-color: var(--gold); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 10%, transparent), var(--bg-alt) 55%); box-shadow: 0 12px 34px color-mix(in srgb, var(--gold) 14%, transparent); } .pricing-badge { position: absolute; top: -12px; right: 20px; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%); color: var(--btn-text); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 12px; border-radius: 999px; box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 35%, transparent); } .pricing-tier { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 6px; } .pricing-amount { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 700; color: var(--gold); margin: 0 0 14px; } .pricing-amount span { font-size: 1.1rem; font-weight: 600; color: var(--gold-soft); } .pricing-card .hint { flex: 1; margin-bottom: 20px; } .pricing-card .btn { width: 100%; text-align: center; } .gift-code-field { text-align: left; margin-bottom: 16px; } .gift-code-field label { font-size: 0.82rem; } .module-block { margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--border); text-align: left; } .module-block h3 { font-family: var(--font-heading); color: var(--gold); font-size: 1.3rem; text-align: center; } .synthesis-box { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 9%, transparent), var(--bg-alt) 55%); border: 1px solid var(--gold-soft); border-radius: 12px; padding: 20px 24px; margin: 14px 0 20px; text-align: left; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); } .synthesis-box dt { color: var(--gold-soft); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 14px; } .synthesis-box dt:first-child { margin-top: 0; } .synthesis-box dd { margin: 4px 0 0; color: var(--text); } .module-error { color: var(--danger); font-style: italic; text-align: center; } .loading { text-align: center; padding: 34px 0; color: var(--text-dim); } .spinner { width: 38px; height: 38px; border: 3px solid var(--border); border-top-color: var(--gold); border-radius: 50%; margin: 0 auto 14px; animation: spin 0.9s linear infinite; } .loading-phase { color: var(--gold); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; } .loading-time-hint { margin-top: 10px; } @keyframes spin { to { transform: rotate(360deg); } } .error { background: rgba(224, 113, 92, 0.12); border: 1px solid var(--danger); color: #f3b6a9; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; text-align: center; } .report-block { margin-bottom: 26px; text-align: left; } .report-block h3 { font-family: var(--font-heading); color: var(--gold-soft); font-size: 1.2rem; margin-bottom: 8px; text-align: center; } .report-block :is(h1, h2, h3, h4) { color: var(--gold-soft); text-align: center; } .report-block ul { padding-left: 20px; text-align: left; } .pdf-subtitle { color: var(--text-dim); font-size: 1.1rem; margin-top: 0; } .pdf-meta { color: var(--text-dim); font-size: 0.92rem; } .pdf-toc { padding-left: 0; list-style-position: inside; max-width: 46ch; margin: 0 auto; } .pdf-toc li { margin-bottom: 8px; } .pdf-toc a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); } .back-to-toc { text-align: right; margin-top: 24px; } .back-to-toc a { font-size: 0.85rem; color: var(--text-secondary, inherit); opacity: 0.7; text-decoration: none; } .print-only-meta { display: none; } .site-footer { text-align: center; color: var(--text-dim); font-size: 0.82rem; padding: 24px 0 40px; } /* ============================================================================ New design-rollout components (from design/predloha, design/panel, design/ukazka mockups). Deliberately ADDITIVE - new class names only, so nothing here redefines a base class (.card, .btn, .field, .hint, ...) already relied on by login.html / reader.html / admin.html, which share this stylesheet but are out of scope for this pass. ============================ */ .glow-text { background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--cyan), var(--gold-soft)); background-size: 250% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; } /* --- hero stat strip --- */ .stat-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 34px; margin: 22px 0 6px; } .stat-strip .stat { display: flex; flex-direction: column; align-items: center; } .stat-strip strong { font-family: var(--font-heading); font-size: 1.5rem; color: var(--gold); } .stat-strip span { font-size: 0.76rem; color: var(--text-dim); } .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 22px 0 4px; } /* --- "them vs us" comparison, replacing an earlier ambiguous agitation section - see the HTML comment above .compare-grid in index.html --- */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0 4px; } @media (max-width: 620px) { .compare-grid { grid-template-columns: 1fr; } } .compare-col { border-radius: 16px; padding: 26px 24px 28px; } .compare-col--them { background: var(--bg-alt); border: 1px solid var(--border); opacity: 0.75; } .compare-col--us { background: color-mix(in srgb, var(--gold) 8%, var(--bg-alt)); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: 0 8px 28px color-mix(in srgb, var(--gold) 12%, transparent); } .compare-col-title { margin: 0 0 16px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; } .compare-col--them .compare-col-title { color: var(--text-dim); } .compare-col--us .compare-col-title { color: var(--gold); } .compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .compare-list li { position: relative; padding-left: 28px; font-size: 1.02rem; line-height: 1.5; } .compare-col--them .compare-list li { color: var(--text-dim); } .compare-col--them .compare-list li::before { content: '✕'; position: absolute; left: 0; top: 0.05em; color: color-mix(in srgb, var(--text-dim) 70%, transparent); font-size: 0.82rem; } .compare-col--us .compare-list li { color: var(--text); } .compare-col--us .compare-list li::before { content: '✓'; position: absolute; left: 0; top: 0.02em; color: var(--gold); font-weight: 700; } /* --- rejstřík: numbered system grid (also reused, with .is-locked cards, for the free-demo teaser rendered by app2.js's renderSnapshotHtml) --- */ .system-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; text-align: left; margin: 18px 0 6px; } @media (max-width: 480px) { .system-grid { grid-template-columns: 1fr; } } .system-card { display: flex; align-items: center; gap: 14px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 15px 20px; font-size: 1rem; font-weight: 600; color: var(--text-dim); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .sc-num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; color: var(--gold); } .system-card:hover { transform: translateY(-2px); border-color: var(--gold-soft); box-shadow: 0 10px 24px color-mix(in srgb, var(--gold) 10%, transparent); } .system-card:hover .sc-num { transform: scale(1.12); background: color-mix(in srgb, var(--gold) 26%, transparent); } /* --- landing-page rejstřík only: clickable
cards revealing a one-line teaser per system. Scoped to .system-grid--rejstrik so the plain
markup used elsewhere (dashboard.html's progress grid, app2.js's locked free-demo grid) keeps its original single-row flex layout untouched. --- */ .system-grid--rejstrik .system-card { display: block; cursor: pointer; } .system-grid--rejstrik .system-card summary { display: flex; align-items: center; gap: 14px; list-style: none; } .system-grid--rejstrik .system-card summary::-webkit-details-marker { display: none; } .system-grid--rejstrik .system-card summary::after { content: '+'; margin-left: auto; flex-shrink: 0; color: var(--gold); font-weight: 700; font-size: 1.1rem; } .system-grid--rejstrik .system-card[open] summary::after { content: '\2212'; } .system-grid--rejstrik .system-card[open] { border-color: var(--gold-soft); background: color-mix(in srgb, var(--gold) 6%, var(--bg-alt)); } .system-grid--rejstrik .system-card .system-teaser { margin: 12px 0 2px 46px; font-size: 0.88rem; font-weight: 400; color: var(--text-dim); line-height: 1.5; } /* Staggered reveal-in for the rejstřík/comparison/testimonial cards - same [data-reveal] + IntersectionObserver mechanism as .faq-item, just applied to more sections so they don't all feel static/dry. */ [data-reveal] .system-card, [data-reveal] .testi-card, [data-reveal] .compare-col { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } [data-reveal].in-view .system-card, [data-reveal].in-view .testi-card, [data-reveal].in-view .compare-col { opacity: 1; transform: translateY(0); } [data-reveal] .compare-col--them { transition-delay: 0.02s; } [data-reveal] .compare-col--us { transition-delay: 0.12s; } [data-reveal] .testi-card:nth-child(1) { transition-delay: 0.03s; } [data-reveal] .testi-card:nth-child(2) { transition-delay: 0.1s; } [data-reveal] .testi-card:nth-child(3) { transition-delay: 0.17s; } [data-reveal] .testi-card:nth-child(4) { transition-delay: 0.24s; } [data-reveal] .system-card:nth-child(1) { transition-delay: 0.02s; } [data-reveal] .system-card:nth-child(2) { transition-delay: 0.06s; } [data-reveal] .system-card:nth-child(3) { transition-delay: 0.1s; } [data-reveal] .system-card:nth-child(4) { transition-delay: 0.14s; } [data-reveal] .system-card:nth-child(5) { transition-delay: 0.18s; } [data-reveal] .system-card:nth-child(6) { transition-delay: 0.22s; } [data-reveal] .system-card:nth-child(7) { transition-delay: 0.26s; } [data-reveal] .system-card:nth-child(8) { transition-delay: 0.3s; } [data-reveal] .system-card:nth-child(9) { transition-delay: 0.34s; } [data-reveal] .system-card:nth-child(10) { transition-delay: 0.38s; } [data-reveal] .system-card:nth-child(11) { transition-delay: 0.42s; } [data-reveal] .system-card:nth-child(12) { transition-delay: 0.46s; } [data-reveal] .system-card:nth-child(13) { transition-delay: 0.5s; } [data-reveal] .system-card:nth-child(14) { transition-delay: 0.54s; } .system-card.is-done { color: var(--text); } .system-card.is-done .sc-num { background: var(--gold); color: var(--btn-text); border-color: var(--gold); } .system-card.is-active { color: var(--text); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); } .system-card.is-active .sc-num { background: var(--cyan); color: var(--btn-text); border-color: var(--cyan); } /* Locked chapter cards - blurred label + lock glyph so the same grid component doubles as a paywall tease in the free demo. */ .locked-grid .system-card.is-locked { filter: blur(0.3px); opacity: 0.6; cursor: default; } .locked-grid .system-card.is-locked .sc-num { background: rgba(255, 255, 255, 0.06); border-color: var(--border); font-size: 0.8rem; } .locked-grid .system-card.is-locked:hover { transform: none; box-shadow: none; border-color: var(--border); } /* --- real excerpt / testimonials --- */ .excerpt-quote { font-family: var(--font-heading); font-size: 1.08rem; font-style: italic; line-height: 1.6; border-left: 3px solid var(--gold); padding-left: 18px; margin: 10px 0; text-align: left; } .excerpt-attr { color: var(--text-dim); font-size: 0.85rem; text-align: left; margin: 0 0 22px; } .rating-row { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 4px 0 16px; flex-wrap: wrap; } .stars { color: var(--gold); letter-spacing: 2px; } .rating-sub { color: var(--text-dim); font-size: 0.85rem; } .testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; text-align: left; } @media (max-width: 560px) { .testimonial-grid { grid-template-columns: 1fr; } } .testi-card { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; } .testi-card p { margin: 8px 0; font-size: 1rem; line-height: 1.5; } .testi-attr { color: var(--text-dim); font-size: 0.85rem; font-weight: 600; } /* --- free-demo teaser (renderSnapshotHtml in app2.js): narrative-style synthesis excerpt + locked-grid + blurred continuation, matching design/ukazka. Reuses .synthesis-box/.system-grid already defined above. --- */ .demo-text { color: var(--text); font-size: 0.98rem; line-height: 1.65; margin: 0 0 16px; text-align: left; } .demo-sub { color: var(--text-dim); font-size: 0.92rem; max-width: 56ch; margin: 0 auto 18px; } .unlock-strip { display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 0 auto; } .progress-bar { flex: 1; height: 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); overflow: hidden; } .progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--cyan)); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 45%, transparent); } .progress-label { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; } .blurred-preview { margin-top: 16px; padding: 16px 18px; border: 1px dashed var(--border); border-radius: 12px; position: relative; overflow: hidden; text-align: left; } .blurred-preview p { margin: 0; color: var(--text-dim); font-size: 0.88rem; line-height: 1.6; filter: blur(3.5px); user-select: none; } .blurred-preview::after { content: '🔒 Odemkni svůj vlastní report'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 18px; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--gold); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 55%, transparent) 40%, color-mix(in srgb, var(--bg) 85%, transparent)); text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 50%, transparent); } /* Same-chapter continuation teaser (vs. a fully locked new chapter). */ .blurred-preview--continues::after { content: '✦ Kapitola pokračuje v kompletním reportu'; } /* --- panel (dashboard) additions: lightweight streak/progress strip --- */ .streak-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 14px; text-align: left; } .streak-flame { flex-shrink: 0; font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 60%, transparent)); } .streak-info { flex: 1; min-width: 160px; } .streak-label { display: block; font-size: 0.85rem; color: var(--text-dim); } .streak-label strong { color: var(--gold); font-family: var(--font-heading); } .streak-strip--empty { color: var(--text-dim); font-size: 0.88rem; } /* .streak-strip sets display:flex unconditionally, which otherwise beats the UA [hidden] rule (equal specificity, author stylesheet loads later) - so toggling the `hidden` attribute from dashboard.js silently did nothing. */ #streak-strip[hidden], #streak-empty[hidden] { display: none; } .streak-flame .streak-count { position: relative; margin-left: 4px; font-family: var(--font-body); font-weight: 800; font-size: 0.9rem; color: var(--gold); vertical-align: middle; } .streak-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 8px; } .streak-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); } .streak-dot.is-filled { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 6px color-mix(in srgb, var(--gold) 60%, transparent); } .streak-dot.is-today { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 55%, transparent); animation: pulse-dot 2s ease-in-out infinite; } .streak-reward { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; } .streak-reward strong { color: var(--gold); } .streak-reward s { opacity: 0.6; } @media (max-width: 640px) { .streak-strip { flex-direction: column; align-items: flex-start; } .streak-reward { white-space: normal; } } /* --- panel (dashboard) layout: two-up report/account cards + period tabs for the horoscope hero, brought over from design/panel/style.css --- */ .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; } @media (max-width: 760px) { .panel-grid { grid-template-columns: 1fr; } } .period-tabs { display: flex; gap: 8px; margin-bottom: 4px; } .period-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 100px; padding: 10px 14px; font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--text-dim); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .period-tab:hover { border-color: var(--gold-soft); color: var(--text); } .period-tab.is-active { color: var(--btn-text); background: linear-gradient(135deg, var(--gold-soft), var(--gold)); border-color: transparent; box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 40%, transparent); } .progress-row { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; } .account-grid { display: grid; gap: 10px; margin: 14px 0 4px; text-align: left; } .account-item { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); } .account-label { font-size: 0.82rem; color: var(--text-dim); } .account-value { font-weight: 700; font-size: 0.92rem; } .account-value--pending { color: var(--text-dim); font-weight: 500; } /* --- Theme switcher: fixed floating widget, independent of page scroll/layout. Palette values themselves live in the [data-theme='...'] blocks near :root. --- */ .theme-switcher { position: fixed; right: 20px; bottom: 20px; z-index: 60; } .theme-toggle-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--gold); font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4); transition: transform 0.2s ease, border-color 0.2s ease, background 0.4s ease; } .theme-toggle-btn:hover { transform: translateY(-2px) rotate(-8deg); border-color: var(--gold-soft); } .theme-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: 220px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45); transition: background 0.4s ease, border-color 0.4s ease; } .theme-panel-label { margin: 0 0 10px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); text-align: left; } .theme-swatches { display: flex; flex-direction: column; gap: 8px; } .theme-swatch { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--text); font-family: inherit; font-size: 0.82rem; text-align: left; transition: border-color 0.2s ease, background 0.2s ease; } .theme-swatch:hover { border-color: var(--gold-soft); background: rgba(255, 255, 255, 0.03); } .theme-swatch[aria-pressed='true'] { border-color: var(--gold); background: rgba(255, 255, 255, 0.05); } .theme-swatch .dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.15); } /* --- Print / "Save as PDF": the browser's own print engine renders the real on-screen DOM (real vector text, real layout) - see app.js for why this replaced the old client-side html2canvas rasterization. Only the section picked via the download button's body class is shown; everything else (nav, form, buttons, other report) is hidden for the printout. Typographic direction: "Klidná kniha" (calm book) - narrow ~66ch measure, Georgia serif body copy, drop-cap chapter openers, roman-numeral chapter kickers, each chapter starting on its own page. Chosen over a denser magazine/executive-report treatment specifically for reading comfort. --- */ /* Pagination-safety rules for the report/PDF content - deliberately OUTSIDE @media print. lib/pdfGenerator.js renders two PDF styles: 'print' (real @media print, light/serif) and 'web' (dark/gold, rendered under page.emulateMediaType('screen') to keep the site's on-screen look) - but Chromium still paginates the 'web' PDF into A4 pages, it just does so with ZERO break-control since none of the @media print rules apply to it. That was silently producing orphaned headings (title alone at the bottom of a page, body pushed to the next), synthesis boxes split across a page break, and single dangling lines - the "useknute" look. These properties are no-ops in a normal scrolling browser tab, so applying them unconditionally costs nothing on screen and fixes pagination in both PDF styles at once. */ .report-block p, .module-block p { orphans: 3; widows: 3; } h2, h3, h4 { break-after: avoid; } .synthesis-box, .number-tile, .fact-tile { break-inside: avoid; } /* Each report chapter starts on its own fresh page, in BOTH PDF styles - the print-only version of this rule further down (.module-block:nth-of- type(n + 3) under @media print) only ever reached the light/serif PDF, since the dark/gold "web" style PDF renders under page.emulateMediaType('screen') and skips @media print entirely. Without this, the dark PDF had chapter transitions fall mid-paragraph wherever the content happened to hit the page boundary - the same fix, just not gated behind print media so both styles get it. */ .module-block:nth-of-type(n + 3) { break-before: page; } @media print { @page { size: A4; margin: 18mm; } body { background: #fff !important; color: #262220; font-family: Georgia, 'Times New Roman', serif; font-size: 11.5pt; line-height: 1.75; } body::before { display: none; } .site-header, .site-footer, #form-section, #snapshot-section, #faq, #newsletter, .theme-switcher, .btn, .loading, .error, .print-hint { display: none !important; } #astria-report-section { display: none !important; } body.printing-astria #astria-report-section { display: block !important; } .print-only-meta { display: block; text-align: center; font-style: italic; color: #6b6459; margin-bottom: 26px; } .wrap, main { max-width: none; padding: 0; margin: 0; } /* Single "measure" column shared by the title, the table of contents and every chapter, so nothing ever runs the full A4 width - the single biggest readability fix over the old full-bleed layout. */ .card { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; padding: 0; margin: 0 auto; max-width: 66ch; } h1, h2, h3, h4, .logo, .module-block h3, .report-block h3, .report-block :is(h1, h2, h3, h4) { color: #8a6d1f !important; -webkit-text-fill-color: #8a6d1f; } h1 { text-align: center; font-size: 2.3rem; } h2 { border-bottom-color: #cbb26a; } .pdf-subtitle { text-align: center; font-style: italic; color: #6b6459; } .pdf-meta { text-align: center; color: #6b6459; } .note { color: #6b6459; } #astria-content hr { border: none; border-top: 1px solid #cbb26a; width: 120px; margin: 24px auto; } /* Chapter numbering + a fresh page per chapter. The simple report has no cover/TOC blocks so every .report-block is a chapter; ASTRIA's first two .module-block sections are the intro and TOC (nth-of-type(n+3) is the synthesis chapter onward) - see app.js renderAstriaModuleHtml/renderIntroHtml. */ #report-content { counter-reset: chapter; } .report-block { counter-increment: chapter; } .report-block:not(:first-of-type) { break-before: page; } #astria-content { counter-reset: chapter; } .module-block:nth-of-type(n + 3) { counter-increment: chapter; break-before: page; } .report-block::before, .module-block:nth-of-type(n + 3)::before { content: 'Kapitola ' counter(chapter, upper-roman); display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.14em; font-family: 'Segoe UI', Arial, sans-serif; font-size: 0.72rem; color: #8a6d1f; margin: 0 0 4px; } .report-block h3::after, .module-block:nth-of-type(n + 3) h3::after { content: '◆'; display: block; text-align: center; color: #cbb26a; font-size: 1rem; margin: 6px 0 22px; } /* Drop-cap chapter openers - matches only the first

, so fact grids and synthesis boxes preceding the prose are unaffected. */ .report-block p:first-of-type::first-letter, .module-block p:first-of-type::first-letter { float: left; font-family: var(--font-heading); font-size: 3.2em; line-height: 0.8; padding: 4px 8px 0 0; color: #8a6d1f; } .report-block p, .module-block p { text-align: justify; hyphens: auto; } /* Table of contents: roman numerals + dotted rows instead of the on-screen plain numbered list. */ .pdf-toc { list-style: none; counter-reset: tocitem; max-width: 50ch; margin: 20px auto; padding: 0; } .pdf-toc li { counter-increment: tocitem; display: flex; padding: 8px 0; margin-bottom: 0; border-bottom: 1px dotted #cbb26a; } .pdf-toc li::before { content: counter(tocitem, upper-roman) '.'; color: #8a6d1f; width: 3em; flex-shrink: 0; } /* Fact/number tiles become flat label-value rows (like a definition list) instead of boxed dlaždice - reads faster in a narrow print column. number-tile's DOM order is value-then-label (see app.js numberTile()); `order` puts the label back on the left without touching the markup. */ .number-grid, .fact-grid { grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin: 18px 0 22px; } .number-tile, .fact-tile { display: flex; justify-content: space-between; align-items: baseline; background: none; border: none; border-bottom: 1px solid #e3d9b8; border-radius: 0; padding: 7px 2px; margin: 0; box-shadow: none; } .number-tile .label, .fact-tile .label { order: 1; color: #6b6459; font-size: 0.85rem; margin-top: 0; } .number-tile .value, .fact-tile .value { order: 2; color: #262220; font-size: 1rem; font-weight: 600; } .synthesis-box { background: #faf6ea !important; border: 1px solid #e3d9b8 !important; border-radius: 8px; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .synthesis-box dt { color: #8a6d1f; } /* .synthesis-box dd has no print-specific color, so it was inheriting --text (#e6f0fb, near-white - meant for the dark web theme) straight onto the light print background, making every value line almost invisible. */ .synthesis-box dd { color: #262220; } .synthesis-box dt:first-child { margin-top: 0; } .module-error { color: #a33b2b; } .report-block, .module-block { border-bottom: none; } } /* --- Reader (public/reader.html): the same report content as the on-screen scroll/PDF (.module-block etc., reused as-is), but shown one chapter at a time with a sticky chapter picker + prev/next bar - a mobile reading pattern instead of one giant page. --- */ .reader-body { margin: 0; padding-bottom: 76px; /* leaves room for the fixed prev/next bar */ } .reader-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg); border-bottom: 1px solid var(--border); } .reader-back { flex-shrink: 0; color: var(--gold); font-size: 1.3rem; text-decoration: none; line-height: 1; } .reader-chapter-btn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; color: var(--text); font-family: inherit; font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer; min-width: 0; } .reader-chapter-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reader-chapter-caret { flex-shrink: 0; color: var(--gold-soft); } .reader-progress { flex-shrink: 0; color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; } .reader-progress-bar { position: sticky; top: 61px; z-index: 20; height: 3px; background: var(--border); } .reader-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--cyan)); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 55%, transparent); transition: width 0.35s ease; } /* "Chapter unlocked" pulse, replayed on every navigation via the same remove-class/reflow/re-add trick used for .reader-content's fade. */ .reader-progress-bar-fill.is-pulsing { animation: reader-chapter-pulse 0.6s ease-out; } @keyframes reader-chapter-pulse { 0% { box-shadow: 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); } 40% { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--cyan) 65%, transparent); } 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 55%, transparent); } } .reader-toc-check { color: var(--gold); margin-right: 8px; font-weight: 700; } .reader-toc-item.is-done { color: var(--text-dim); } .reader-toc-item.is-done.is-active { color: var(--gold); } .reader-toc { position: sticky; top: 64px; z-index: 19; max-height: 60vh; overflow-y: auto; background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 8px; } .reader-toc-item { display: block; width: 100%; text-align: left; background: none; border: none; border-left: 2px solid transparent; color: var(--text-dim); font-family: inherit; font-size: 0.92rem; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .reader-toc-item:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); } .reader-toc-item.is-active { color: var(--gold); font-weight: 700; border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); } .reader-main { max-width: 640px; margin: 0 auto; padding: 24px 20px 20px; } /* Glass card container for chapter content - consistent with .panel-card elsewhere instead of bare text floating over the starfield. */ .reader-card { background: var(--card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 20px; padding: 22px 22px 8px; } @media (max-width: 480px) { .reader-card { padding: 18px 16px 4px; } } /* Deliberately larger than the main site's body copy (0.98rem baseline) - confirmed in planning that a comfortable reading size for a genuinely long document on a phone is 16-18px, not whatever incidentally works for marketing copy. */ .reader-content { font-size: 1.05rem; line-height: 1.7; opacity: 0; transform: translateY(6px); transition: opacity 0.32s ease, transform 0.32s ease; } .reader-content.is-visible { opacity: 1; transform: translateY(0); } /* Literary drop cap on each chapter's opening paragraph - a real reading-app touch (this is "read your report like a book," per the dashboard's own copy) rather than a generic card layout. Only the first paragraph in a section gets one, so the synthesis box / intro meta lines above it (which also happen to be

s) are excluded via :first-of-type - CSS can't tell "first real paragraph of prose" from "first

tag", so this only fires cleanly when a real paragraph is genuinely first in the section. */ .reader-content > p:first-of-type:not(.pdf-subtitle):not(.pdf-meta)::first-letter { float: left; font-family: var(--font-heading); font-size: 3.4em; line-height: 0.82; font-weight: 700; color: var(--gold); padding: 0.04em 0.08em 0 0; } .reader-content h3 { font-size: 1.4rem; } .reader-navbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; padding: 10px 16px 12px; background: var(--bg); border-top: 1px solid var(--border); } .reader-navbar-row { display: flex; gap: 12px; } .reader-navbar .btn { flex: 1; margin: 0; } .reader-navbar .btn:disabled { opacity: 0.35; } .reader-completion-note { margin: 0 0 8px; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; color: var(--gold); text-shadow: 0 0 14px color-mix(in srgb, var(--gold) 45%, transparent); }