/* ============================================================ CycleCalcs embeddable widgets - payload styles (/embed/*.html only). Self-contained on purpose: NO dependency on style.css or main.js, so the widget layer never forces the sitewide cache-bust sweep. Tokens mirror the site palette (style.css :root and :root[data-theme="dark"]). The head boot script stamps data-theme AND data-size on before first paint (size classes must not wait for the deferred controller). Cache-bust: bump the ?v in the 3 /embed/*.html payloads and the /embed.html builder preview whenever this file changes. ============================================================ */ :root { --bg: #ffffff; --surface: #f6f7fb; --text: #1a1c23; --muted: #5c6270; --accent: #4338ca; --accent-2: #6366f1; --border: #e4e7ec; --warn: #b45309; --card-bg: radial-gradient(130% 150% at 88% 0%, #f1f2ff 0%, #ffffff 56%); } :root[data-theme="dark"] { --bg: #0c0e1b; --surface: #141a33; --text: #eef1fb; --muted: #9aa4c8; --accent: #8b93ff; --accent-2: #a6acff; --border: #2a3157; --warn: #fbbf24; --card-bg: radial-gradient(130% 150% at 88% 0%, #1a2148 0%, #0c0e1b 56%); color-scheme: dark; } /* No-JS fallback: the boot script normally stamps data-theme before paint. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0c0e1b; --surface: #141a33; --text: #eef1fb; --muted: #9aa4c8; --accent: #8b93ff; --accent-2: #a6acff; --border: #2a3157; --warn: #fbbf24; --card-bg: radial-gradient(130% 150% at 88% 0%, #1a2148 0%, #0c0e1b 56%); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; color: var(--text); /* transparent page, card-owned background: cross-origin iframes are transparent by default, so the host page shows through the rounded corners and a dark card never leaves a square seam on a light blog */ background: transparent; overflow: hidden; /* fixed-preset (variant A) frames must never show scrollbars */ } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Initial heights match the documented size presets, so the plain-iframe variant fits exactly and the auto-resize variant never shifts layout. */ :root[data-size="compact"] body { min-height: 140px; } :root[data-size="wide"] body { min-height: 160px; } :root[data-size="card"] body[data-widget="moon"] { min-height: 220px; } :root[data-size="card"] body[data-widget="eclipse"] { min-height: 280px; } :root[data-size="card"] body[data-widget="parade"] { min-height: 380px; } .cc-card { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px 10px; min-height: inherit; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; position: relative; overflow: hidden; } /* the signature hairline: a 2px indigo gradient across the top of every card */ .cc-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2) 55%, transparent 130%); } /* Header: widget kicker + the brand wordmark. The wordmark is a referral deep-link that opens a full tab (never a second crawlable anchor; the SEO link lives in the HOST page DOM). */ .cc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cc-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); } .cc-mark { font-size: 11px; font-weight: 800; letter-spacing: -.01em; color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; } .cc-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; flex: 0 0 auto; background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent)); } .cc-mark:hover { color: var(--accent); text-decoration: none; } .cc-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-height: 0; } .cc-fig { flex: 0 0 auto; } .cc-fig canvas { display: block; } .cc-body { flex: 1 1 auto; min-width: 0; } /* The interpreted answer: real selectable text, first in the reading order. */ .cc-answer { font-size: 15.5px; font-weight: 800; letter-spacing: -.012em; line-height: 1.32; margin: 0 0 2px; } .cc-sub { font-size: 12.5px; color: var(--muted); margin: 0; } .cc-sub strong { color: var(--text); } .cc-sub + .cc-sub { margin-top: 2px; } /* Eclipse: countdown + the two per-kind rows */ .cc-count { display: flex; gap: 8px; margin: 5px 0 2px; font-variant-numeric: tabular-nums; } .cc-count span { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 3px 9px 4px; font-size: 15px; font-weight: 800; color: var(--accent); min-width: 44px; text-align: center; line-height: 1.25; } .cc-count small { display: block; font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; } .cc-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .cc-row { display: flex; gap: 7px; align-items: baseline; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; font-size: 12px; } .cc-row b { font-size: 12px; } .cc-row .cc-dim { color: var(--muted); } .cc-kdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; align-self: center; display: inline-block; } .cc-kdot-solar { background: #f0a800; } .cc-kdot-lunar { background: #8d99c4; } /* dark enough to read on the light surface */ :root[data-theme="dark"] .cc-kdot-solar { background: #f5b301; } :root[data-theme="dark"] .cc-kdot-lunar { background: #c9d2ec; } /* Parade: place line + chips + horizon canvas */ .cc-place { font-size: 11.5px; color: var(--muted); margin: 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; } /* long baked place names must never grow a fixed-preset embed: one line, ellipsized */ .cc-place span[role="status"] { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; } .cc-place button { flex: 0 0 auto; } .cc-place button { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; } .cc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; } .cc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1.5px 8px; } .cc-chip .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .cc-sky { margin-top: 6px; } .cc-sky canvas { display: block; width: 100%; height: auto; border-radius: 8px; } /* Footer: the self-contained honesty line + live-computation timestamp. */ .cc-foot { font-size: 9.5px; letter-spacing: .01em; color: var(--muted); opacity: .92; border-top: 1px solid var(--border); padding-top: 5px; margin-top: auto; } /* Loading / error states */ .cc-wait { color: var(--muted); font-size: 13px; } /* ---- size adaptations ---- */ :root[data-size="compact"] .cc-card { padding: 5px 10px; gap: 3px; } :root[data-size="compact"] .cc-answer { font-size: 13.5px; line-height: 1.3; } :root[data-size="compact"] .cc-sub { font-size: 11px; } :root[data-size="compact"] .cc-foot { font-size: 9px; padding-top: 3px; } :root[data-size="compact"] .cc-rows, :root[data-size="compact"] .cc-sky, :root[data-size="compact"] .cc-chips, :root[data-size="compact"] .cc-sub, :root[data-size="compact"] .cc-optional { display: none; } :root[data-size="compact"] .cc-count span { padding: 2px 6px; font-size: 12px; } :root[data-size="compact"] .cc-fig canvas { width: 64px !important; height: 64px !important; } /* wide (600x160) is the banner format: headline + countdown, no tall extras */ :root[data-size="wide"] .cc-count { margin: 3px 0 0; } :root[data-size="wide"] .cc-rows { display: none; } :root[data-size="wide"] .cc-sky { display: none; } :root[data-size="wide"] .cc-main { gap: 16px; } :root[data-size="wide"] .cc-fig canvas { width: 84px !important; height: 84px !important; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }