/* ===================================================================== * Példány-arculat: COGNITUDO MARKETING (marketing.cognitudo.ai) — MINTA * * Mire jó: a teljes felület a Cognitudo-lilában jelenik meg a mai Alfréd * lila→pink paletta helyett. Csak ezen a példányon: a fájl nem a buildben van, * hanem bind-mounttal kerül a konténerbe, mint a /config.js: * * cp ops/selfhosted/marka.example.css /opt//marka.css * docker run … -v /opt//marka.css:/usr/share/nginx/html/marka.css:ro … * * Opt-in nélkül (ha nincs csatolva) a repóban lévő public/marka.css ÜRES, tehát a * mai éles és dev felület bájtra változatlan. * * --------------------------------------------------------------------- * MÁRKA-ALAPSZÍN: rgb(94 24 235) = #5E18EB = hsl(260 84% 51%) * * Az egész skála EBBŐL az egy színből van levezetve, a felület saját, * bemért levezetőjével (src/arculat/tema/levezet.ts, OKLCH-ban): ugyanaz a * világosság-lépcső és ugyanaz a telítettség-arány, csak más árnyalat. Ezért * illeszkedik egymáshoz a sok halvány tónus — nem egy szín van bemásolva * mindenhová. * * A márka TÖMÖR lila, nincs benne pink: a mai lila→pink színátmenetek helyére * egy árnyalatú, finom márka-átmenet kerül (#6521F9 → #7B3BF0). * * A levezetés sarokpontjai: * #5E18EB alapszín (gomb, aktív elem, fókuszgyűrű) * #6521F9 világosabb testvér (logó, színátmenet eleje) * #7B3BF0 a színátmenet vége (a volt pink helyén) * #4100AB lenyomott/hover, sötét változat * #5100D1 link/kiemelt szöveg fehéren (9,25:1) * #251F4F sötét felirat halvány lila háttéren (13,2:1) * #EEEEFF halvány lila felület; #E2E2F2 szegély * * KONTRASZT (WCAG 2.1, mérve): * fehér szöveg a #5E18EB-en ............... 7,48:1 (AA nagy és normál szöveg is) * fehér szöveg a színátmenet világosabb végén (#7B3BF0) .. 5,64:1 * #5100D1 link a fehéren ................. 9,25:1 * #5100D1 a #EEEEFF halvány felületen .... 8,06:1 * #251F4F a #EEEEFF-en ................... 13,20:1 * #1C1B29 törzsszöveg a #F8F9FE oldalsávon 16,13:1 * #6A6878 meta-szöveg a #EDEDFC-n ........ 4,69:1 (a legszűkebb pár, >4,5) * #CCCCFF link a sötét (#1C1B29) értesítésen 11,02:1 * * --------------------------------------------------------------------- * SZELEKTOROK — a duplázás SZÁNDÉKOS, ne egyszerűsítsd! * * A Vite a build CSS-ét maga fűzi be a -be, ezért a /marka.css -hez * képest a SORREND nem garantált. A felülírás specifikussággal nyer: * :root:root (0,2,0) > :root (0,1,0) * html[data-arculat="v1"]:root (0,2,1) > html[data-arculat="v1"] (0,1,1) * :root:root .arculat-v1 (0,3,0) > .arculat-v1 (0,1,0) * * A `.arculat-v1` / `.arculat-v3` változat azért kell, mert azok a tokenek a * HÉJ-DIV-en vannak újradeklarálva: a gyökérről öröklött érték ott nem elég. * * Fiók-arculat (src/arculat/tema, `:root[data-fiok-tema]`) ezzel egyenlő * specifikusságú és futásidőben, utólag kerül be → ha egy fiókon témát állítanak, * az erősebb ennél a fájlnál. Ez szándékos: a fiók-téma a példány-arculat fölött áll. * ===================================================================== */ /* ===================================================================== * 1) RÉGI FELÜLET (src/index.css :root) — shadcn/HSL + kanonikus hex tokenek * ===================================================================== */ :root:root { /* — elsődleges szín — */ --primary: 260 84% 51%; /* volt: 265 90% 60% (#8B3FF5) */ --primary-light: 259 95% 55%; /* volt: 264 84% 62% */ --primary-dark: 263 100% 34%; /* volt: 264 73% 46% */ --ring: 260 84% 51%; /* volt: 265 90% 60% */ --accent-foreground: 263 100% 41%; /* volt: 265 90% 60% → #5100D1, 8,40:1 a szürke --accent-en */ /* — színátmenetek: a lila→pink pár helyett egy árnyalatú márkalila — */ --gradient-primary: linear-gradient(135deg, #6521f9 0%, #7b3bf0 100%); --gradient-secondary: linear-gradient(135deg, #5e18eb 0%, #7b3bf0 100%); --gradient-hero: linear-gradient(135deg, #6521f9 0%, #7b3bf0 100%); /* a --gradient-subtle és a --gradient-card semleges (fehér→szürke): marad */ /* — fénylő árnyékok (a volt pink „cyan” is márkaszínre) — */ --shadow-glow: 0 0 20px rgba(94, 24, 235, 0.15); --shadow-glow-cyan: 0 0 20px rgba(123, 59, 240, 0.15); --shadow-glow-strong: 0 8px 24px rgba(94, 24, 235, 0.2); --shadow-glow-cta: 0 8px 24px rgba(94, 24, 235, 0.3); /* — oldalsáv (régi shell) — */ --sidebar-primary: 260 84% 51%; /* volt: 265 90% 60% */ --sidebar-accent: 240 100% 97%; /* volt: 264 60% 95% (#F1EBFA) */ --sidebar-accent-foreground: 263 100% 41%; /* volt: 265 90% 60% */ --sidebar-ring: 260 84% 51%; /* volt: 265 90% 60% */ /* — kanonikus design-system (hex) tokenek — */ --grad: linear-gradient(135deg, #6521f9 0%, #7b3bf0 100%); /* volt: #8B3FF5 → #E0408F */ --pink: #7b3bf0; /* volt: #E0408F — a „pink” szemantika is a márka családjába kerül */ --pink-soft: #eeeeff; /* volt: #FCEAF3 */ --side-bg-2: #f3f4fe; /* volt: #F6F3FC */ --side-active-bg: rgba(94, 24, 235, 0.16); /* volt: rgba(139,63,245,.16) */ } /* ===================================================================== * 2) ARCULAT v1 (src/arculat/arculat.css) — a mai héj * ===================================================================== */ html[data-arculat="v1"]:root, :root:root .arculat-v1 { /* — márka — */ --av-primer: #5e18eb; /* volt: #7C3AED */ --av-primer-hover: #4100ab; /* volt: #5B21B6 */ --av-lila-szoveg: #5100d1; /* volt: #6D28D9 */ --av-grad: linear-gradient(90deg, #6521f9, #7b3bf0); /* volt: #8B3CF6 → #D6409F */ --av-grad-atlos: linear-gradient(135deg, #6521f9, #7b3bf0); /* volt: #8B3CF6 → #D6409F */ --av-logo: #6521f9; /* volt: #8B3CF6 */ --av-lila-halvany: #eeeeff; /* volt: #F3ECFF */ --av-lila-szegely: #cfcffe; /* volt: #D9CCF7 */ --av-lila-szaggatott: #bab9ff; /* volt: #C9B5F5 */ --av-tintas-szegely: #e1e2ff; /* volt: #EADFFB */ --av-kiemelt: #f1f1ff; /* volt: #F5F0FF */ --av-lila-sotet: #251f4f; /* volt: #2A1E4A */ --av-toast-link: #ccccff; /* volt: #D8C7FF */ /* — felületek: a márka árnyalatával tört semlegesek — */ --av-oldalsav: #f8f9fe; /* volt: #FAF8FD */ --av-szegmens: #efeff7; /* volt: #F1EEF6 */ --av-plusz: #f2f2fb; /* volt: #F4F1FA */ --av-idezet: #f2f2f9; /* volt: #F4F2F8 */ --av-tintas: #f9f9ff; /* volt: #FBF8FF */ --av-tintas-2: #fcfcff; /* volt: #FDFBFF */ --av-tintas-3: #f9f9fc; /* volt: #FAF9FC */ --av-tintas-4: #fbfbfe; /* volt: #FCFBFE */ --av-tintas-5: #f7f7fb; /* volt: #F8F7FB */ --av-tintas-6: #f9f9ff; /* volt: #FBF9FF */ --av-lila-tonus: #ededfd; /* volt: #F1ECFB */ --av-lap: #f4f4fb; /* volt: #F6F4FA */ --av-profil-aktiv: #ededfc; /* volt: #F1ECFA */ --av-kuldes-ki: #c8c9e8; /* volt: #CFC7E3 */ --av-kapcsolo-ki: #d6d6e6; /* volt: #D9D5E3 */ /* — szegélyek — */ --av-szegely: #e2e2f2; /* volt: #E6E1F0 */ --av-szegely-2: #ececf5; /* volt: #EEEBF4 */ --av-fejlec-szegely: #efeff7; /* volt: #F1EEF6 */ --av-input-szegely: #dddded; /* volt: #E1DCEB */ --av-sorvalaszto: #f1f1f8; /* volt: #F3F1F7 */ --av-jelolo-szegely: #cbcbde; /* volt: #CFCADB */ /* — chat-kártya (kartyaV2.css var(--av-…, tartalék) alakban használja) — */ --av-kartya-gyuru: #e6e6ff; --av-kartya-soft: #ebecff; --av-kartya-arnyek: rgba(65, 28, 162, 0.14); --av-lila-kozep: #9890ff; /* — árnyékok: a lila fátyol is a márka árnyalatára — */ --av-arnyek-kartya: 0 4px 18px rgba(52, 29, 129, 0.06); /* volt: rgba(60,30,120,.06) */ --av-arnyek-dok: 0 8px 28px rgba(52, 29, 129, 0.07); /* volt: rgba(60,30,120,.07) */ --av-arnyek-lenyilo: 0 14px 36px rgba(34, 20, 87, 0.14); /* volt: rgba(40,20,80,.14) */ --av-arnyek-toast: 0 12px 32px rgba(16, 11, 44, 0.25); /* volt: rgba(20,10,40,.25) */ --av-arnyek-fiok: 0 0 40px rgba(16, 11, 44, 0.2); /* volt: rgba(20,10,40,.2) */ /* — a héj-divben felülírt shadcn-változók (Haladó oldalak, portált Dialog/Popover) — */ --primary: 260 84% 51%; /* volt: 262 83% 58% */ --primary-foreground: 0 0% 100%; /* marad fehér: 7,48:1 */ --primary-light: 259 95% 55%; /* volt: 265 91% 60% */ --primary-dark: 263 100% 34%; /* volt: 263 69% 42% */ --secondary: 240 33% 95%; /* volt: 262 31% 95% */ --muted: 240 37% 96%; /* volt: 260 30% 96% */ --accent: 240 100% 97%; /* volt: 262 100% 96% */ --accent-foreground: 263 100% 41%; /* volt: 263 70% 50% */ --border: 240 38% 92%; /* volt: 260 33% 91% */ --input: 240 31% 90%; /* volt: 260 27% 89% */ --ring: 260 84% 51%; /* volt: 262 83% 58% */ --sidebar-background: 230 75% 98%; /* volt: 264 56% 98% */ --sidebar-primary: 260 84% 51%; /* volt: 262 83% 58% */ --sidebar-accent: 240 100% 97%; /* volt: 262 100% 96% */ --sidebar-accent-foreground: 263 100% 41%; /* volt: 263 70% 50% */ --sidebar-border: 240 31% 94%; /* volt: 260 29% 94% */ --sidebar-ring: 260 84% 51%; /* volt: 262 83% 58% */ --gradient-primary: linear-gradient(90deg, #6521f9, #7b3bf0); --gradient-hero: linear-gradient(135deg, #6521f9, #7b3bf0); } /* ===================================================================== * 3) ARCULAT v3 (src/arculat/v3/tokenek.css) — a Claude-prototípus héja * ===================================================================== */ html[data-arculat-v3]:root, :root:root .arculat-v3 { /* — márka — */ --v3-primer: #5e18eb; /* volt: #7C3AED */ --v3-link: #5100d1; /* volt: #6D28D9 */ --v3-primer-sotet: #4100ab; /* volt: #5B21B6 */ --v3-lila-halvany: #eeeeff; /* volt: #F3ECFF */ --v3-lila-szegely: #bab9ff; /* volt: #C4B5FD */ --v3-lila-kozep: #9890ff; /* volt: #A78BFA */ --v3-grad: linear-gradient(90deg, #6521f9, #7b3bf0); /* volt: #8B3CF6 → #D6409F */ --v3-grad-atlos: linear-gradient(135deg, #6521f9, #7b3bf0); /* volt: #8B3CF6 → #D6409F */ --v3-buborek-szoveg: #251f4f; /* volt: #2A1E4A */ /* — tölcsér (pipeline) skála: egy árnyalat, négy világosság — */ --v3-tolcser-1: #5e18eb; /* volt: #7C3AED */ --v3-tolcser-2: #8675ff; /* volt: #9F6BF5 */ --v3-tolcser-3: #b2afff; /* volt: #C4A8FA */ --v3-tolcser-4: #d1d1ff; /* volt: #DDCCFC */ /* — a volt „pink” szemantika a márka családjába (nincs pink az arculatban) — */ --v3-pink: #7b3bf0; /* volt: #D6409F */ --v3-pink-hatter: #f7f6ff; /* volt: #FDF4FA */ --v3-pink-cimke: #eeebff; /* volt: #FCE7F3 */ --v3-pink-szoveg: #550fb3; /* volt: #A21C6E — 8,53:1 a --v3-pink-cimkén */ /* — felületek / szegélyek — */ --v3-oldalsav: #f8f9fe; /* volt: #FAF8FD */ --v3-szegmens: #f0f0f5; /* volt: #F1F0F5 */ --v3-sorvalaszto: #efeff7; /* volt: #F1EEF6 */ --v3-szegely: #e2e2f2; /* volt: #E6E1F0 */ --v3-szegely-2: #ececf5; /* volt: #EEEBF4 */ --v3-vaz-1: #f2f2f9; /* volt: #F4F2F8 */ --v3-vaz-2: #f5f5fb; /* volt: #F7F5FA */ --v3-vaz-3: #f9f9fc; /* volt: #FAF9FC */ --v3-szunetel-hatter: #fbfbfd; /* volt: #FCFBFD */ --v3-levelminta: #f5f5fc; /* volt: #F7F5FB */ --v3-ures-szaggatott: #d4d4ec; /* volt: #D9D2EA */ --v3-kapcsolo-ki: #d6d6e6; /* volt: #D9D5E3 */ --v3-szunetel: #c6c7d5; /* volt: #C9C6D3 */ /* — árnyékok (a lila fátylasak; a tintafekete rgba(28,27,41,…) marad) — */ --v3-arnyek-kartya: 0 4px 18px rgba(52, 29, 129, 0.06); /* volt: rgba(60,30,120,.06) */ --v3-arnyek-sav: 0 4px 18px rgba(52, 29, 129, 0.08); /* volt: rgba(60,30,120,.08) */ --v3-arnyek-mic: 0 6px 16px rgba(101, 33, 249, 0.35); /* volt: rgba(139,60,246,.35) */ /* — a v3 a v1 néhány tokenjét is felülírja: azokat itt is követni kell — */ --av-szegmens: #f0f0f5; --av-sorvalaszto: #efeff7; --av-kuldes-ki: #d6d6e6; } /* ===================================================================== * 4) „Alfréd” szó-jel (src/index.css .alfred-wordmark) * * A régi belépő/regisztráció és a régi héj fejléce ezzel a négy-megállós * lila→magenta gradienssel rajzolja a feliratot. A SZÖVEG („Alfréd”) a buildben * van, azt innen nem lehet átírni — a márkanevet a /config.js BRAND_NAME-je adja * az új belépőn, a héjban pedig a fiók-arculat (Beállítások → Felület arculata). * Itt csak a SZÍN kerül a márka családjába. * ===================================================================== */ :root:root .alfred-wordmark { background: linear-gradient(178deg, #6521f9 0%, #5e18eb 42%, #6b2cf2 70%, #7b3bf0 100%); -webkit-background-clip: text; background-clip: text; }