/* ===================================================================== IDIEQ MAIL โ€” Custom Skin Stylesheet Regenerative Architecture ยท idieq.com Brand accent: #1ea9fe | Supports light + dark (html.dark-mode) Loaded via in skins/elastic/templates/includes/layout.html ===================================================================== */ :root{ --idieq-blue:#1ea9fe; --idieq-blue-dark:#0d8de0; --idieq-blue-deep:#0a6fb0; --idieq-ink:#16202e; --idieq-muted:#64748b; } /* ---- Global type: align with idieq.com (Inter, thin) ---- */ body,input,button,textarea,select,.username{ font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; } /* ===================================================================== LOGIN PAGE (body.task-login) ===================================================================== */ body.task-login{ background:radial-gradient(1200px 820px at 50% -12%, #ffffff 0%, #eef4fc 45%, #e4ecf8 100%) !important; } /* full-viewport animated aurora */ body.task-login::before{ content:""; position:fixed; inset:-25%; z-index:0; pointer-events:none; background: radial-gradient(440px 440px at 22% 30%, rgba(30,169,254,.30), transparent 60%), radial-gradient(540px 540px at 80% 20%, rgba(13,141,224,.22), transparent 62%), radial-gradient(500px 500px at 70% 86%, rgba(30,169,254,.16), transparent 60%); filter:blur(6px); animation:idieqDrift 28s ease-in-out infinite alternate; } /* faint architectural grid, masked to a soft vignette */ body.task-login::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(rgba(20,45,80,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(20,45,80,.045) 1px, transparent 1px); background-size:62px 62px; -webkit-mask-image:radial-gradient(circle at 50% 44%, #000 0%, transparent 72%); mask-image:radial-gradient(circle at 50% 44%, #000 0%, transparent 72%); } @keyframes idieqDrift{ 0%{transform:translate3d(0,0,0) scale(1);} 50%{transform:translate3d(2%,-2%,0) scale(1.06);} 100%{transform:translate3d(-2%,1%,0) scale(1.02);} } /* center the card */ body.task-login #layout{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:100vh !important; background:transparent !important; } /* the glass card */ body.task-login #layout-content, body.task-login #layout-content.selected{ position:relative; z-index:2; flex:0 0 auto !important; width:min(92vw,420px) !important; max-width:420px !important; min-height:auto !important; height:auto !important; margin:0 !important; padding:50px 42px 36px !important; border-radius:24px !important; background:rgba(255,255,255,.66) !important; -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%); border:1px solid rgba(255,255,255,.75) !important; box-shadow: 0 30px 70px -20px rgba(16,42,80,.30), 0 2px 0 rgba(255,255,255,.6) inset, 0 0 0 1px rgba(30,169,254,.06) !important; overflow:visible !important; animation:idieqCardIn .9s cubic-bezier(.16,.84,.34,1) both; } @keyframes idieqCardIn{ 0%{opacity:0; transform:translateY(26px) scale(.97); filter:blur(6px);} 100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0);} } /* top hairline accent */ body.task-login #layout-content::before{ content:""; position:absolute; top:0; left:26px; right:26px; height:2px; background:linear-gradient(90deg,transparent,var(--idieq-blue),transparent); } /* logo */ body.task-login #logo, body.task-login img#logo{ display:block !important; margin:0 auto 2px !important; max-height:58px !important; width:auto !important; filter:drop-shadow(0 6px 18px rgba(30,169,254,.35)); animation:idieqLogoIn 1s ease .15s both; } @keyframes idieqLogoIn{0%{opacity:0;transform:translateY(-8px);}100%{opacity:1;transform:translateY(0);}} /* tagline beneath the logo */ body.task-login #login-form::before{ content:"Regenerative Architecture"; display:block; text-align:center; text-transform:uppercase; letter-spacing:.42em; font-size:10.5px; font-weight:500; color:var(--idieq-blue); margin:8px 0 30px; padding-left:.42em; animation:idieqFade 1.1s ease .35s both; } @keyframes idieqFade{from{opacity:0;}to{opacity:1;}} /* form + fields */ body.task-login #login-form{position:relative; z-index:2;} body.task-login #login-form .form-group, body.task-login #login-form .row{margin-bottom:14px !important;} body.task-login #login-form input, body.task-login #login-form input.form-control, body.task-login #rcmloginuser, body.task-login #rcmloginpwd, body.task-login #rcmloginhost{ width:100% !important; box-sizing:border-box; padding:13px 15px !important; height:auto !important; border-radius:13px !important; border:1px solid rgba(20,50,90,.16) !important; background:rgba(255,255,255,.55) !important; color:var(--idieq-ink) !important; font-size:15px !important; letter-spacing:.01em; box-shadow:none !important; transition:border-color .25s, box-shadow .25s, background .25s; } body.task-login #login-form input::placeholder{color:rgba(20,40,70,.42);} body.task-login #login-form input:focus, body.task-login #rcmloginuser:focus, body.task-login #rcmloginpwd:focus{ outline:none !important; border-color:var(--idieq-blue) !important; background:rgba(255,255,255,.88) !important; box-shadow:0 0 0 4px rgba(30,169,254,.18) !important; } /* leading icons (person / lock) */ body.task-login .input-group-text, body.task-login .input-group-prepend .input-group-text{ border:none !important; background:transparent !important; color:var(--idieq-blue) !important; } /* submit */ body.task-login #login-form button, body.task-login #login-form .btn, body.task-login #login-form button[type="submit"], body.task-login #rcmloginsubmit, body.task-login button.btn-primary{ width:100% !important; margin-top:8px !important; padding:13px 16px !important; border:none !important; border-radius:13px !important; background:linear-gradient(135deg,var(--idieq-blue),var(--idieq-blue-dark)) !important; color:#fff !important; font-weight:600 !important; font-size:14px !important; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; box-shadow:0 12px 26px -8px rgba(30,169,254,.6) !important; transition:transform .2s, box-shadow .2s, filter .2s; } body.task-login #login-form button:hover, body.task-login button.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -8px rgba(30,169,254,.72) !important; filter:brightness(1.04); } body.task-login #login-form button:active{transform:translateY(0);} /* footer */ body.task-login #login-footer{ text-align:center; margin-top:22px; font-size:12.5px; letter-spacing:.04em; color:var(--idieq-muted); animation:idieqFade 1.2s ease .5s both; } body.task-login #login-footer .version{display:none !important;} body.task-login #login-footer a, body.task-login .support-link{ color:var(--idieq-blue) !important; text-decoration:none; font-weight:500; } body.task-login #login-footer a:hover{text-decoration:underline;} /* ---------- LOGIN โ€” DARK ---------- */ html.dark-mode body.task-login{ background:radial-gradient(1200px 820px at 50% -12%, #0e1a2c 0%, #0a1322 45%, #050a12 100%) !important; } html.dark-mode body.task-login::after{ background-image: linear-gradient(rgba(120,170,230,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,170,230,.06) 1px, transparent 1px); } html.dark-mode body.task-login #layout-content, html.dark-mode body.task-login #layout-content.selected{ background:rgba(16,26,44,.55) !important; border:1px solid rgba(120,170,230,.14) !important; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06) inset, 0 0 0 1px rgba(30,169,254,.08) !important; } html.dark-mode body.task-login #login-form input, html.dark-mode body.task-login #rcmloginuser, html.dark-mode body.task-login #rcmloginpwd{ border:1px solid rgba(140,180,230,.18) !important; background:rgba(255,255,255,.04) !important; color:#eaf2fb !important; } html.dark-mode body.task-login #login-form input::placeholder{color:rgba(220,235,255,.42);} html.dark-mode body.task-login #login-form input:focus{ background:rgba(255,255,255,.07) !important; border-color:var(--idieq-blue) !important; box-shadow:0 0 0 4px rgba(30,169,254,.22) !important; } /* ===================================================================== APP-WIDE BRAND ACCENT (post-login) โ€” conservative, safe ===================================================================== */ /* primary buttons -> IDIEQ blue */ .btn-primary, button.btn.btn-primary, a.button.btn-primary, .popupmenu .btn-primary{ background-color:var(--idieq-blue) !important; border-color:var(--idieq-blue) !important; } .btn-primary:hover{ background-color:var(--idieq-blue-dark) !important; border-color:var(--idieq-blue-dark) !important; } /* focus rings */ *:focus-visible{outline:2px solid rgba(30,169,254,.6) !important; outline-offset:1px;} /* branded scrollbars */ ::-webkit-scrollbar{width:10px; height:10px;} ::-webkit-scrollbar-thumb{background:rgba(30,169,254,.32); border-radius:8px;} ::-webkit-scrollbar-thumb:hover{background:rgba(30,169,254,.52);} /* ===================================================================== ACCESSIBILITY / RESPONSIVE ===================================================================== */ @media (prefers-reduced-motion: reduce){ body.task-login::before, body.task-login #layout-content, body.task-login #logo, body.task-login #login-form::before, body.task-login #login-footer{animation:none !important;} } @media (max-width:480px){ body.task-login #layout-content{padding:40px 24px 30px !important; border-radius:20px !important;} } /* =================================================================== LOGIN layout hardening (robust to Elastic JS re-layout) =================================================================== */ body.task-login #layout-content, body.task-login #layout-content.selected{ display:flex !important; flex-direction:column !important; justify-content:flex-start !important; align-items:stretch !important; align-self:center !important; height:auto !important; min-height:0 !important; max-height:none !important; flex:0 0 auto !important; overflow:visible !important; } /* collapse the login into clean, stacked, full-width fields */ body.task-login #login-form table, body.task-login #login-form tbody, body.task-login #login-form tr, body.task-login #login-form td{display:block !important; width:100% !important;} body.task-login #login-form tr{margin-bottom:14px !important;} body.task-login #login-form td.input{padding:0 !important;} /* hide the label/icon cells but keep them for screen readers */ body.task-login #login-form td.title{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; margin:-1px !important; padding:0 !important; border:0 !important; white-space:nowrap !important; } /* submit button may be