/* Pod Hvězdami — Cosmic Theme Pack v1.0 Autor: ChatGPT Poznámka: Bezpečné pro mobily/tablety. Nevyžaduje JS. */ /* 1) Barevné proměnné */ :root{ --ph-bg-0: #05060a; --ph-bg-1: #0a0d16; --ph-bg-2: #141a2b; --ph-text: #e9edf6; --ph-muted: rgba(233,237,246,.72); --ph-card: rgba(18, 22, 38, .78); --ph-card-2: rgba(24, 30, 52, .72); --ph-border: rgba(255,255,255,.10); --ph-accent: #c7a75f; /* jemné zlato */ --ph-accent-2: #8aa2ff; /* astrální modř */ --ph-accent-3: #a56bff; /* fialová (aspekty apod.) */ --ph-radius: 18px; --ph-shadow: 0 14px 35px rgba(0,0,0,.35); --ph-gap: 20px; --ph-max: 1180px; --ph-blur: 6px; /* keep low for performance */ } /* 2) Aktivace tématu Přidej třídu .ph-cosmic na (doporučeno), nebo ji dej na wrapper (.ph-page) */ .ph-cosmic, .ph-page.ph-cosmic{ color: var(--ph-text); background: radial-gradient(1100px 700px at 50% -10%, rgba(138,162,255,.22), transparent 60%), radial-gradient(900px 600px at 20% 20%, rgba(165,107,255,.12), transparent 55%), radial-gradient(circle at top, var(--ph-bg-2) 0%, var(--ph-bg-1) 45%, var(--ph-bg-0) 100%); min-height: 100%; } /* Hvězdy jako jemná overlay textura */ .ph-cosmic::before, .ph-page.ph-cosmic::before{ content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("cosmic-stars.svg"); background-repeat: repeat; background-size: 800px 800px; opacity: .14; transform: translateZ(0); } /* 3) Typografie */ .ph-cosmic h1, .ph-cosmic h2, .ph-cosmic h3, .ph-page.ph-cosmic h1, .ph-page.ph-cosmic h2, .ph-page.ph-cosmic h3{ color: var(--ph-text); letter-spacing: .2px; } .ph-cosmic a, .ph-page.ph-cosmic a{ color: var(--ph-accent-2); text-decoration: none; } .ph-cosmic a:hover, .ph-page.ph-cosmic a:hover{ text-decoration: underline; } /* 4) Kontejner stránky */ .ph-cosmic .ph-container, .ph-page.ph-cosmic .ph-container{ width: min(100% - 32px, var(--ph-max)); margin: 0 auto; padding: 26px 0 44px; } /* 5) Layout: 3 sloupce na desktopu, 1 sloupec na tablet/mobil */ .ph-layout{ display: grid; grid-template-columns: 1fr minmax(320px, 520px) 1fr; gap: var(--ph-gap); align-items: start; } @media (max-width: 1100px){ .ph-layout{ grid-template-columns: 1fr; } } /* 6) Karty / bubliny */ .ph-card{ background: var(--ph-card); border: 1px solid var(--ph-border); border-radius: var(--ph-radius); box-shadow: var(--ph-shadow); padding: 16px 18px; backdrop-filter: blur(var(--ph-blur)); -webkit-backdrop-filter: blur(var(--ph-blur)); } .ph-card--tight{ padding: 12px 14px; } .ph-card--soft{ background: var(--ph-card-2); } .ph-card .ph-title{ font-size: 18px; font-weight: 650; margin: 0 0 10px 0; } .ph-card .ph-sub{ color: var(--ph-muted); font-size: 14px; margin: 0 0 8px 0; } .ph-card p{ margin: 0 0 10px 0; color: var(--ph-text); line-height: 1.55; } .ph-card p:last-child{ margin-bottom: 0; } /* 7) “Chip” značení (např. Luna ve Vodnáři apod.) */ .ph-chip{ display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--ph-border); background: rgba(255,255,255,.05); color: var(--ph-muted); font-size: 13px; } /* 8) Button */ .ph-btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(199,167,95,.45); background: rgba(199,167,95,.14); color: var(--ph-text); cursor:pointer; text-decoration:none; transition: transform .08s ease, background .2s ease; } .ph-btn:hover{ background: rgba(199,167,95,.20); transform: translateY(-1px); } .ph-btn:active{ transform: translateY(0px); } /* 9) Sekce pro radix/kruh — “halo” */ .ph-wheel-wrap{ position: relative; padding: 22px; border-radius: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 22px 60px rgba(0,0,0,.42); } .ph-wheel-wrap::before{ content:""; position:absolute; inset:-18px; border-radius: 32px; background: radial-gradient(closest-side, rgba(138,162,255,.20), transparent 60%), radial-gradient(closest-side, rgba(199,167,95,.12), transparent 70%); filter: blur(18px); opacity: .9; z-index:-1; } /* 10) Pomocné barvy pro nadpisy témat */ .ph-accent{ color: var(--ph-accent); } .ph-accent2{ color: var(--ph-accent-2); } .ph-accent3{ color: var(--ph-accent-3); } /* 11) Bezpečné zalamování dlouhých textů (AI výklady) */ .ph-card, .ph-card *{ overflow-wrap: anywhere; word-break: break-word; } /* 12) Respektuj syst. nastavení: méně efektů */ @media (prefers-reduced-transparency: reduce){ .ph-card{ backdrop-filter: none; -webkit-backdrop-filter: none; } }