/* * LayerCloud cookie-consent banner styles (issue #79). * First-party file; loaded by every public shell. Logical properties only, * so the banner follows the document direction (rtl on /fa/) with no * extra rules. No inline styles are used anywhere - the document CSP stays * strict. */ .lc-consent { position: fixed; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 2147483000; display: flex; justify-content: center; padding: 16px; pointer-events: none; } .lc-consent-card { pointer-events: auto; width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 16px; /* #161 round 24: the banner is shown on the same pages as the app, whose accent engine sets --color-accent-* on . The literals below keep the emerald default as the fallback for the pre-JS paint, so the banner follows a user's accent pick instead of always looking like someone else's brand. */ border: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 35%, transparent); background: rgba(8, 14, 21, 0.97); color: #d1fae5; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 40px color-mix(in oklab, var(--color-accent-500, #10b981) 12%, transparent); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; backdrop-filter: blur(6px); } .lc-consent-title { margin: 0; font-size: 15px; font-weight: 800; color: #ecfdf5; } .lc-consent-body { margin: 0; font-size: 12.5px; line-height: 1.6; color: rgba(209, 250, 229, 0.78); } .lc-consent-links { display: flex; } .lc-consent-links a { /* #161 round 23: this was the last sub-24px target in the app (90x18). inline-flex + min-height gives it the floor the rest of the UI meets. */ display: inline-flex; align-items: center; min-height: 24px; font-size: 12px; font-weight: 700; color: var(--color-accent-400, #34d399); text-decoration: underline; text-underline-offset: 3px; } .lc-consent-links a:hover { color: #a7f3d0; } .lc-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .lc-consent-btn { appearance: none; border-radius: 10px; padding: 10px 18px; font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .lc-consent-accept { border: 1px solid var(--color-accent-500, #10b981); background: var(--color-accent-500, #10b981); color: #04120b; } .lc-consent-accept:hover { background: var(--color-accent-400, #34d399); } .lc-consent-decline { border: 1px solid color-mix(in oklab, var(--color-accent-500, #10b981) 45%, transparent); background: transparent; color: #a7f3d0; } .lc-consent-decline:hover { border-color: var(--color-accent-400, #34d399); color: #ecfdf5; } @media (max-width: 640px) { .lc-consent { padding: 10px; } .lc-consent-card { padding: 16px; } .lc-consent-actions { justify-content: stretch; } .lc-consent-btn { flex: 1 1 auto; text-align: center; } } /* #159: light mode. The card was rgba(8,14,21,0.97) in BOTH themes - a near-black slab sitting on a white page with a 0.55 black shadow, which read as a rendering fault rather than a surface. The hexes below are the same emerald family the dark rules use, at the stops that clear 4.5:1 on a white card. The html.light class is the same hook the app's own theme bootstrap writes (utils/theme.ts), so the banner follows the visitor's stored choice with no extra plumbing - and this file stays first-party with no inline styles, so the CSP is untouched. */ html.light .lc-consent-card { /* #161 round 25: round 24 fixed the dark rules but left every html.light rule on a literal emerald, so a user picking violet got a green slab on a violet page - the one frozen-color bug left in the product. These now composite from the accent ladder with the emerald literal kept only as the pre-JS fallback. */ border-color: color-mix(in oklab, var(--color-accent-500, #10b981) 35%, transparent); background: #ffffff; color: var(--color-accent-800, #065f46); box-shadow: 0 18px 60px rgba(6, 35, 25, 0.18), 0 0 40px color-mix(in oklab, var(--color-accent-500, #10b981) 10%, transparent); } html.light .lc-consent-title { color: var(--color-accent-900, #064e3b); } html.light .lc-consent-body { color: color-mix(in oklab, var(--color-accent-950, #064e3b) 62%, #1e293b); } html.light .lc-consent-links a { color: var(--color-accent-700, #047857); } /* The app's convention is a lighter step on hover (see the dark rules), so light mode steps too rather than darkening. */ html.light .lc-consent-links a:hover { color: var(--color-accent-600, #059669); } html.light .lc-consent-accept { /* #161: white on emerald-600 measured 3.77:1 - under the 4.5 the 13px label needs. accent-700 puts it at 5.0:1 (the ladder keeps the same lightness curve for any picked hue, so the ratio holds). */ border-color: var(--color-accent-700, #047857); background: var(--color-accent-700, #047857); color: #ffffff; } /* #161 round 25: this was byte-identical to the resting background above, so the most-clicked control on the first page paint had NO hover feedback in light mode while the dark rule stepped 500 -> 400. */ html.light .lc-consent-accept:hover { background: var(--color-accent-800, #065f46); border-color: var(--color-accent-800, #065f46); } html.light .lc-consent-decline { border-color: color-mix(in oklab, var(--color-accent-500, #10b981) 45%, transparent); color: var(--color-accent-800, #065f46); } html.light .lc-consent-decline:hover { border-color: var(--color-accent-500, #059669); color: var(--color-accent-900, #064e3b); }