/*! * Asiimov Cookie Consent — STILURILE (asiimov-cc.css) * Brand: Asiimov.ro | https://asiimov.ro * * Stilizează EXACT clasele generate de asiimov-cc.js (prefix acc-). Fără dependențe, * fără @import extern, fără build step. Temă dublă (light implicit + dark prin * prefers-color-scheme SAU clasă .acc-theme-dark / .acc-theme-light). Complet responsive. * * Mecanica de afișare (impusă de motor): * - Bannerul, overlay-ul și modalul stau mereu în DOM; vizibilitatea e comandată * de clasele de pe : .acc--show-banner și .acc--show-modal. * - Butonul de re-deschidere (.acc-reopen) e comutat prin style.display inline, * deci display-ul lui „vizibil" trebuie definit aici (inline-flex). * - Închiderea la clic în afara dialogului se bazează pe overlay: .acc-modal * lasă evenimentele de pointer să treacă (pointer-events:none), doar dialogul * le captează (pointer-events:auto). * * Unități: containerele principale sunt fixate la font-size:16px, iar interiorul * folosește `em` — astfel widgetul se scalează consistent indiferent de tema gazdei. * ========================================================================== */ /* --------------------------------------------------------------------------- * Variabile temabile (:root). --acc-accent e suprascris din JS (guiOptions.accent). * ------------------------------------------------------------------------- */ :root { --acc-accent: #2f6fed; /* culoarea butoanelor primare (din config) */ --acc-accent-contrast: #ffffff; /* textul pe butonul primar */ --acc-bg: #ffffff; /* fundal banner / dialog */ --acc-surface-2: #f4f6fa; /* fundal card de categorie */ --acc-text: #1b2230; /* text principal */ --acc-muted: #5a6472; /* text secundar / descrieri */ --acc-border: rgba(18, 26, 40, .12); --acc-btn-secondary-bg: #eef1f6; /* fundal buton secundar */ --acc-btn-secondary-bg-hover: #e4e9f1; --acc-switch-off: #c7ceda; /* track OFF la comutator */ --acc-overlay: rgba(16, 22, 34, .5); --acc-radius: 14px; --acc-shadow: 0 12px 40px -8px rgba(16, 24, 40, .28), 0 4px 14px -6px rgba(16, 24, 40, .18); --acc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; } /* Temă întunecată prin clasă (control manual) */ :root.acc-theme-dark { --acc-bg: #1e2430; --acc-surface-2: #262e3c; --acc-text: #e8ecf3; --acc-muted: #9aa4b2; --acc-border: rgba(255, 255, 255, .12); --acc-btn-secondary-bg: #2c3543; --acc-btn-secondary-bg-hover: #343e4e; --acc-switch-off: #49525f; --acc-overlay: rgba(0, 0, 0, .62); --acc-shadow: 0 14px 46px -8px rgba(0, 0, 0, .6), 0 4px 16px -6px rgba(0, 0, 0, .5); } /* Temă întunecată automată (dacă utilizatorul nu a forțat .acc-theme-light) */ @media (prefers-color-scheme: dark) { :root:not(.acc-theme-light) { --acc-bg: #1e2430; --acc-surface-2: #262e3c; --acc-text: #e8ecf3; --acc-muted: #9aa4b2; --acc-border: rgba(255, 255, 255, .12); --acc-btn-secondary-bg: #2c3543; --acc-btn-secondary-bg-hover: #343e4e; --acc-switch-off: #49525f; --acc-overlay: rgba(0, 0, 0, .62); --acc-shadow: 0 14px 46px -8px rgba(0, 0, 0, .6), 0 4px 16px -6px rgba(0, 0, 0, .5); } } /* --------------------------------------------------------------------------- * Reset local (scoped pe elementele widgetului — nu atinge pagina gazdă) * ------------------------------------------------------------------------- */ .acc-banner, .acc-banner *, .acc-overlay, .acc-modal, .acc-modal *, .acc-reopen, .acc-reopen * { box-sizing: border-box; } .acc-banner, .acc-modal, .acc-reopen { font-family: var(--acc-font); font-size: 16px; /* ancoră pentru `em` — imună la font-size-ul gazdei */ line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* Blocarea scroll-ului paginii cât timp modalul e deschis */ html.acc--show-modal { overflow: hidden; } /* =========================================================================== * BANNER * ======================================================================== */ .acc-banner { position: fixed; z-index: 2147483645; width: 26em; max-width: calc(100vw - 2em); padding: 1.25em 1.35em 1.35em; background: var(--acc-bg); color: var(--acc-text); border: 1px solid var(--acc-border); border-radius: var(--acc-radius); box-shadow: var(--acc-shadow); /* stare ascunsă implicită (vizibilitate comandată din ) */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(1em); transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1), visibility .3s; } html.acc--show-banner .acc-banner { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .acc-banner__title { margin: 0 0 .35em; font-size: 1.06em; font-weight: 700; letter-spacing: -.01em; } .acc-banner__desc { margin: 0; font-size: .9em; color: var(--acc-muted); } .acc-banner__desc a { color: var(--acc-accent); text-decoration: underline; text-underline-offset: 2px; } .acc-banner__desc a:hover { text-decoration: none; } .acc-banner__btns { display: flex; flex-wrap: wrap; gap: .55em; margin-top: 1.15em; } /* primar + secundar împart rândul; flat (Preferințe) trece pe linie proprie */ .acc-banner__btns .acc-btn--primary, .acc-banner__btns .acc-btn--secondary { flex: 1 1 8em; } .acc-banner__btns .acc-btn--flat { flex: 1 1 100%; } /* --- Poziții (modificatori --bottom-left etc.). Offset 1.25em de la margini --- */ .acc-banner--bottom-left { bottom: 1.25em; left: 1.25em; } .acc-banner--bottom-right { bottom: 1.25em; right: 1.25em; } .acc-banner--bottom-center { bottom: 1.25em; left: 50%; transform: translateX(-50%) translateY(1em); } .acc-banner--top-left { top: 1.25em; left: 1.25em; transform: translateY(-1em); } .acc-banner--top-right { top: 1.25em; right: 1.25em; transform: translateY(-1em); } .acc-banner--top-center { top: 1.25em; left: 50%; transform: translateX(-50%) translateY(-1em); } .acc-banner--middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.96); } /* Starea „arătat" pentru pozițiile care folosesc translateX/translate */ html.acc--show-banner .acc-banner--bottom-center { transform: translateX(-50%); } html.acc--show-banner .acc-banner--top-center { transform: translateX(-50%); } html.acc--show-banner .acc-banner--top-left, html.acc--show-banner .acc-banner--top-right { transform: none; } html.acc--show-banner .acc-banner--middle-center { transform: translate(-50%, -50%); } /* --- Layout: cloud (card centrat, mai lat, butoane pe rând) --- */ .acc-banner--cloud { width: auto; max-width: min(40em, calc(100vw - 2.5em)); } .acc-banner--cloud .acc-banner__btns .acc-btn--flat { flex: 0 1 auto; } /* --- Layout: bar (bandă pe toată lățimea, muchie sus/jos) --- */ .acc-banner--bar { left: 0; right: 0; width: auto; max-width: none; border-radius: 0; border-left: 0; border-right: 0; padding: 1em clamp(1em, 4vw, 3em); transform: translateY(1em); display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.25em; } .acc-banner--bar.acc-banner--top-left, .acc-banner--bar.acc-banner--top-center, .acc-banner--bar.acc-banner--top-right { top: 0; bottom: auto; transform: translateY(-1em); } .acc-banner--bar.acc-banner--bottom-left, .acc-banner--bar.acc-banner--bottom-center, .acc-banner--bar.acc-banner--bottom-right { bottom: 0; top: auto; } .acc-banner--bar .acc-banner__title { flex: 0 0 100%; } .acc-banner--bar .acc-banner__desc { flex: 1 1 20em; } .acc-banner--bar .acc-banner__btns { flex: 0 1 auto; margin-top: 0; flex-wrap: nowrap; } .acc-banner--bar .acc-banner__btns .acc-btn--primary, .acc-banner--bar .acc-banner__btns .acc-btn--secondary, .acc-banner--bar .acc-banner__btns .acc-btn--flat { flex: 0 0 auto; } html.acc--show-banner .acc-banner--bar { transform: translateY(0); } /* =========================================================================== * BUTOANE (.acc-btn --primary / --secondary / --flat) * ======================================================================== */ .acc-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: .7em 1.15em; font: inherit; font-size: .9em; font-weight: 600; line-height: 1.2; text-align: center; border: 1px solid transparent; border-radius: calc(var(--acc-radius) - 5px); cursor: pointer; user-select: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease, box-shadow .15s ease; } /* !important — ca stilul butoanelor să învingă temele care stilizează global