/* ========================================================================== DIANEMO – CUSTOM CSS THEME Paste into: Cassiopeia Extended → Custom CSS field NO HTML changes needed. Targets your existing article structure. Brand colors: Cyan #0cc3c9 · Purple #8b3191 Optional: Add this Google Font to your template : ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap'); /* -- COLOR VARIABLES ------------------------------------------------------ */ :root { /* Primary – Cyan */ --dn-primary: #0cc3c9; --dn-primary-dark: #0a9ea3; --dn-primary-darker: #088a8f; --dn-primary-deep: #07797d; --dn-primary-light: #3dd6db; /* Secondary – Purple */ --dn-secondary: #8b3191; --dn-secondary-dark: #6e2773; --dn-secondary-light: #a84daf; --dn-secondary-deep: #5a1f5e; /* Text */ --dn-text-dark: #1a1a1a; --dn-text-body: #3a3a3a; --dn-text-muted: #444; --dn-text-white: #fff; /* Surfaces */ --dn-surface: rgba(255,255,255,.98); --dn-surface-footer-top: #f8fafb; --dn-surface-footer-bottom: #eef3f6; /* Overlays */ --dn-overlay-25: rgba(255,255,255,.25); --dn-overlay-15: rgba(255,255,255,.15); --dn-overlay-12: rgba(255,255,255,.12); --dn-overlay-10: rgba(255,255,255,.1); --dn-overlay-08: rgba(255,255,255,.08); --dn-overlay-04: rgba(255,255,255,.04); /* Font */ --dn-font: 'Outfit', system-ui, -apple-system, sans-serif; } a { text-decoration: unset !important; } .brand-logo{ display: flex; align-items: center; } /* -- BODY & PAGE BACKGROUND ----------------------------------------------- */ body.com_content.view-article { /*background: linear-gradient(160deg, #5a1f5e 0%, #8b3191 30%, #0cc3c9 65%, #0a9ea3 100%) !important;*/ background: linear-gradient(160deg, #100011 0%, #621966 30%, #0cc3c9 65%, #0a9ea3 100%) !important; min-height: 100vh; position: relative; overflow-x: hidden; } body.com_content.view-article::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 600px 600px at 15% 20%, rgba(139,49,145,.15), transparent), radial-gradient(ellipse 500px 500px at 85% 75%, rgba(12,195,201,.15), transparent), radial-gradient(ellipse 400px 300px at 50% 50%, var(--dn-overlay-04), transparent); animation: dn-drift 25s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes dn-drift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.02); } } body.com_content.view-article .site-grid, body.com_content.view-article > header, body.com_content.view-article > footer { position: relative; z-index: 1; } /* -- HEADER --------------------------------------------------------------- */ body.com_content.view-article header.header { background: rgba(90,31,94,.35) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--dn-overlay-12); box-shadow: 0 4px 30px rgba(0,0,0,.15); display: flex; } body.com_content.view-article .navbar-brand, body.com_content.view-article .container-search, body.com_content.view-article .mod-languages { display: flex; align-items: center; } body.com_content.view-article .container-nav { padding: 0.5em; } body.com_content.view-article .container-search { margin: 0; } body.com_content.view-article header.header .brand-logo img { /*filter: brightness(0) invert(1);*/ transition: transform .3s ease; } body.com_content.view-article header.header .brand-logo:hover img { transform: scale(1.05); } body.com_content.view-article header.header .mod-languages .btn { background: var(--dn-overlay-15) !important; border: 1px solid var(--dn-overlay-25) !important; color: var(--dn-text-white) !important; backdrop-filter: blur(10px); border-radius: 12px !important; transition: all .3s ease; } body.com_content.view-article header.header .mod-languages .btn:hover { background: var(--dn-overlay-25) !important; transform: translateY(-1px); } body.com_content.view-article header.header { z-index: 100; } body.com_content.view-article header.header .dropdown-menu { z-index: 101; } div.mod-languages ul.lang-block li { padding: 0; } div.mod-languages ul.lang-block li a { display: block; width: 100%; color: black; } /* -- MAIN CONTAINER ------------------------------------------------------- */ body.com_content.view-article .com-content-article__body .container { max-width: 1100px; padding-top: 3rem; padding-bottom: 4rem; animation: dn-slideUp .8s cubic-bezier(.22,1,.36,1) both; } @keyframes dn-slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* -- CARDS ---------------------------------------------------------------- */ body.com_content.view-article .com-content-article__body .card { border: none !important; border-radius: 24px !important; overflow: hidden; background: var(--dn-surface) !important; box-shadow: 0 25px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.5) inset; transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1); } body.com_content.view-article .com-content-article__body .card:hover { transform: translateY(-12px) scale(1.015); box-shadow: 0 40px 100px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.6) inset, 0 0 80px rgba(139,49,145,.15); } body.com_content.view-article .col-lg-6:first-child .card { animation: dn-cardIn .7s cubic-bezier(.22,1,.36,1) .2s both; } body.com_content.view-article .col-lg-6:last-child .card { animation: dn-cardIn .7s cubic-bezier(.22,1,.36,1) .45s both; } @keyframes dn-cardIn { from { opacity: 0; transform: translateY(50px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* -- CARD HEADERS --------------------------------------------------------- */ body.com_content.view-article .card-header { padding: 2.2rem 2rem 2rem !important; position: relative; overflow: hidden; border-bottom: none !important; } /* Card 1 header – Purple gradient */ body.com_content.view-article .card-header.bg-primary { background: linear-gradient(135deg, #5a1f5e 0%, #8b3191 40%, #a84daf 100%) !important; } /* Card 2 header – Cyan gradient */ body.com_content.view-article .card-header.bg-warning { background: linear-gradient(135deg, #088a8f 0%, #0cc3c9 40%, #3dd6db 100%) !important; } /* Glowing orbs on headers */ body.com_content.view-article .card-header::before { content: ''; position: absolute; top: -60%; right: -15%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } body.com_content.view-article .card-header::after { content: ''; position: absolute; bottom: -50%; left: -10%; width: 170px; height: 170px; background: radial-gradient(circle, var(--dn-overlay-10) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } /* -- CARD TITLE ----------------------------------------------------------- */ body.com_content.view-article .card-title { font-family: var(--dn-font); font-size: 1.65rem !important; font-weight: 700 !important; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.15); position: relative; z-index: 1; } body.com_content.view-article .card-header.bg-warning .card-title { color: var(--dn-text-white) !important; text-shadow: 0 2px 10px rgba(0,0,0,.2); } /* -- CARD BODY ------------------------------------------------------------ */ body.com_content.view-article .card-body { padding: 1.5rem 2rem 1.2rem !important; } body.com_content.view-article .card-body .card-text { font-family: var(--dn-font); font-size: 1.02rem; line-height: 1.55; color: var(--dn-text-body) !important; margin-bottom: .6rem; } /* List items in two columns */ body.com_content.view-article .card-body ul { columns: 2; -webkit-columns: 2; column-gap: 1.5rem; margin-bottom: .6rem; } body.com_content.view-article .card-body .card-text strong { color: var(--dn-secondary-deep) !important; font-weight: 600; } body.com_content.view-article .border-warning .card-body .card-text strong, body.com_content.view-article .card-header.bg-warning ~ .card-body .card-text strong { color: var(--dn-primary-deep) !important; } /* -- CARD FOOTER ---------------------------------------------------------- */ body.com_content.view-article .card-footer { padding: 1.5rem 2rem 2rem !important; background: linear-gradient(180deg, var(--dn-surface-footer-top) 0%, var(--dn-surface-footer-bottom) 100%) !important; border-top: 1px solid rgba(0,0,0,.04) !important; } body.com_content.view-article .card-footer p { font-family: var(--dn-font); color: var(--dn-text-muted); font-weight: 500; } body.com_content.view-article .card-footer ul:empty { display: none; } /* -- EMAIL BUTTON --------------------------------------------------------- */ body.com_content.view-article .card-footer .btn-primary { background: linear-gradient(135deg, #8b3191 0%, #a84daf 50%, #0cc3c9 100%) !important; border: none !important; border-radius: 14px !important; padding: .9rem 2.2rem !important; font-family: var(--dn-font); font-size: 1.05rem !important; font-weight: 600 !important; letter-spacing: .02em; color: var(--dn-text-white) !important; box-shadow: 0 10px 30px rgba(139,49,145,.35), 0 0 0 0 rgba(139,49,145,.3); transition: all .35s cubic-bezier(.22,1,.36,1) !important; text-decoration: none !important; position: relative; overflow: hidden; } body.com_content.view-article .card-footer .btn-primary::after { content: '→'; margin-left: .5rem; display: inline-block; transition: transform .3s ease; } body.com_content.view-article .card-footer .btn-primary:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 18px 45px rgba(139,49,145,.45), 0 0 0 4px rgba(12,195,201,.15) !important; } body.com_content.view-article .card-footer .btn-primary:hover::after { transform: translateX(4px); } body.com_content.view-article .card-footer .btn-primary a:hover{ color: #f1f1f1; } /* -- FOOTER --------------------------------------------------------------- */ body.com_content.view-article footer.container-footer { background: rgba(90,31,94,.3) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--dn-overlay-10); } body.com_content.view-article footer.container-footer a { color: rgba(255,255,255,.8) !important; text-decoration: none !important; font-family: var(--dn-font); transition: color .3s ease; } body.com_content.view-article footer.container-footer a:hover { color: var(--dn-text-white) !important; } body.com_content.view-article footer.container-footer .grid-child { display: flex; align-items: center; justify-content: center; flex-direction: column; } .footer .grid-child { justify-content: space-between; align-items: center; padding: 2.5rem .5em .5em .5em; } .copyrights{ width: 100%; } .copyrights > .custom{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top:20px; } /* -- RESPONSIVE ----------------------------------------------------------- */ @media (max-width: 991px) { body.com_content.view-article .com-content-article__body .container { padding-top: 2rem; padding-bottom: 3rem; } .copyrights > .custom{ flex-direction: column; align-items: center; justify-content: center; gap:15px; } body.com_content.view-article footer.container-footer { text-align: center; } } @media (max-width: 575px) { body.com_content.view-article .card-header { padding: 1.5rem !important; } body.com_content.view-article .card-body { padding: 1.5rem !important; } body.com_content.view-article .card-footer { padding: 1.25rem 1.5rem 1.5rem !important; } body.com_content.view-article .card-title { font-size: 1.3rem !important; } body.com_content.view-article .com-content-article__body .card { border-radius: 18px !important; } } /* -- SCROLLBAR ------------------------------------------------------------ */ body.com_content.view-article::-webkit-scrollbar { width: 8px; } body.com_content.view-article::-webkit-scrollbar-track { background: #5a1f5e; } body.com_content.view-article::-webkit-scrollbar-thumb { background: var(--dn-overlay-25); border-radius: 4px; } body.com_content.view-article::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }