/* * Cookie consent banner. * * A small card in the bottom-left corner, not a full-width bar and not a modal: it must not hold * the page hostage, and an unanswered banner is a "no", so there is nothing to force. It is * printed at level (see inc/cookie-consent.php) which is the only place a fixed element * can outrank the header. * * Left rather than right: the right edge is where scroll position, "back to top" affordances and * any future chat widget live, and on the landing page it would sit over the hero card. */ .cvgen-consent { position: fixed; left: 0; bottom: 0; /* Deliberately not stretched to the right edge. The box is only as wide as the card, so the rest of the corner stays clickable. */ max-width: 100%; z-index: var( --z-overlay ); padding: var( --shell-gutter ); pointer-events: none; } .cvgen-consent-panel { pointer-events: auto; width: min( 100%, 340px ); display: flex; flex-direction: column; gap: 0.7rem; padding: 0.85rem 0.95rem; background: var( --surface ); border: 1px solid var( --line ); border-radius: var( --radius-sm ); box-shadow: var( --shadow-pop ); /* Slide up on open. The banner starts hidden with [hidden], so this only ever animates from the closed state, never on first paint of an already-answered page. */ transform: translateY( 10px ); opacity: 0; transition: transform 0.26s var( --ease ), opacity 0.26s var( --ease ); } .cvgen-consent.is-open .cvgen-consent-panel { transform: translateY( 0 ); opacity: 1; } .cvgen-consent-copy { min-width: 0; } .cvgen-consent-title { margin: 0 0 0.15rem; font-family: var( --font-display ); font-weight: 600; font-size: 0.92rem; color: var( --ink ); } .cvgen-consent-text { margin: 0; font-size: 0.79rem; line-height: 1.45; color: var( --ink-soft ); } .cvgen-consent-text a { color: var( --accent ); } .cvgen-consent-actions { display: flex; align-items: center; gap: 0.45rem; } /* Both buttons share one size and shape, and each takes half the card. Refusing has to be exactly as easy as accepting, so this pair must never drift into one real button and one grey afterthought. min-width:0 removes the flex min-content floor, which is what lets the labels wrap instead of pushing the card wider than a phone. */ .cvgen-consent-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0.45rem 0.7rem; font-size: 0.8rem; border-radius: 999px; white-space: normal; } /* Phones: span the width rather than leave a stray margin on one side. */ @media ( max-width: 520px ) { .cvgen-consent { right: 0; } .cvgen-consent-panel { width: 100%; } } @media ( prefers-reduced-motion: reduce ) { .cvgen-consent-panel { transition: none; transform: none; } }