/*! Almeer Securities - night (dark) theme. Activated by data-theme="dark" on . Light stays the default. Only additive: nothing here applies unless the attribute is present. */ :root[data-theme="dark"]{ --color-bg:#0A1D16; --color-bg-alt:#0E2A1F; --color-bg-tint:#0C241B; --color-bg-inverse:#F7F3E8; --surface:#0E2A1F; --color-text:#D3E1D8; --color-heading:#F4F8F4; --color-text-muted:#9BB0A3; --color-text-subtle:#8AA096; --color-text-inverse:#0A1D16; --color-border:rgba(201,162,39,.22); --color-border-strong:rgba(201,162,39,.42); --color-accent-text:#5ABC67; --color-heading-rule:#C9A227; --color-success:#7FD6A0; --color-success-bg:#12301F; --color-warning:#E8C468; --color-warning-bg:#33280C; --color-error:#F09A90; --color-error-bg:#3A1A16; --shadow-sm:0 2px 10px rgba(0,0,0,.45); --shadow-md:0 10px 28px rgba(0,0,0,.5); --shadow-lg:0 20px 56px rgba(0,0,0,.55); color-scheme:dark; } :root[data-theme="dark"], :root[data-theme="dark"] body{background-color:#0A1D16!important;color:#D3E1D8} /* --- homepage v2 sections (they set literal colours with !important) --- */ :root[data-theme="dark"] .av-sec, :root[data-theme="dark"] .av-slide{background-color:#0A1D16!important;background-image:none!important} :root[data-theme="dark"] .av-sec--alt, :root[data-theme="dark"] .av-founder{background-color:#0C241B!important;background-image:none!important} :root[data-theme="dark"] .av-card, :root[data-theme="dark"] .av-val, :root[data-theme="dark"] .av-work, :root[data-theme="dark"] .av-step, :root[data-theme="dark"] .av-svc{background-image:none!important;background-color:#102E22!important; border-color:rgba(201,162,39,.22)!important;color:#D3E1D8!important} :root[data-theme="dark"] .av-h{color:#F4F8F4!important} :root[data-theme="dark"] .av-sec p, :root[data-theme="dark"] .av-slide p, :root[data-theme="dark"] .av-card p, :root[data-theme="dark"] .av-val p, :root[data-theme="dark"] .av-work p, :root[data-theme="dark"] .av-step p, :root[data-theme="dark"] .av-svc p, :root[data-theme="dark"] .av-founder__intro{color:#D3E1D8!important} :root[data-theme="dark"] .av-sec strong{color:#E9F1EA!important} :root[data-theme="dark"] .av-btn{color:#062A1A!important} /* --- inner pages (article, services, learning hub, about) --- */ :root[data-theme="dark"] .section, :root[data-theme="dark"] .adetail, :root[data-theme="dark"] .section--alt, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .card{background-color:#0A1D16!important;background-image:none!important} :root[data-theme="dark"] .prose, :root[data-theme="dark"] .prose.disclaimer, :root[data-theme="dark"] .toc, :root[data-theme="dark"] .table-wrap{background-color:#0E2A1F!important;background-image:none!important; color:#D3E1D8!important;border-color:rgba(201,162,39,.22)!important} :root[data-theme="dark"] .prose p, :root[data-theme="dark"] .prose li{color:#D3E1D8!important} :root[data-theme="dark"] .prose h1,:root[data-theme="dark"] .prose h2, :root[data-theme="dark"] .prose h3,:root[data-theme="dark"] .prose h4{color:#F4F8F4!important} :root[data-theme="dark"] .prose a{color:#8FD79B!important} :root[data-theme="dark"] .svc-card, :root[data-theme="dark"] .lh-card{background-color:#102E22!important;background-image:none!important; border-color:rgba(201,162,39,.22)!important} :root[data-theme="dark"] .reg-table, :root[data-theme="dark"] .reg-table tr, :root[data-theme="dark"] .reg-table td, :root[data-theme="dark"] .reg-table th{background-color:transparent!important;color:#D3E1D8!important; border-color:rgba(201,162,39,.20)!important} :root[data-theme="dark"] .reg-table tbody tr:nth-child(even){background-color:rgba(255,255,255,.03)!important} :root[data-theme="dark"] .reg-table th[scope="row"]{color:#8FD79B!important} /* --- the toggle button itself --- */ .almeer-theme-toggle{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;padding:0;border-radius:50%;cursor:pointer; background:transparent;border:1px solid rgba(201,162,39,.35);color:#F7F3E8; transition:background .18s ease,border-color .18s ease,color .18s ease} .almeer-theme-toggle:hover,.almeer-theme-toggle:focus-visible{background:rgba(201,162,39,.16);border-color:rgba(201,162,39,.6)} .almeer-theme-toggle svg{width:19px;height:19px;display:block} .almeer-theme-toggle .almeer-moon{display:none} :root[data-theme="dark"] .almeer-theme-toggle .almeer-sun{display:none} :root[data-theme="dark"] .almeer-theme-toggle .almeer-moon{display:block} @media (max-width:520px){.almeer-theme-toggle{width:34px;height:34px}} /* --- headings, card links and breadcrumbs that inherit light-theme ink --- */ :root[data-theme="dark"] .section h1, :root[data-theme="dark"] .section h2, :root[data-theme="dark"] .section h3, :root[data-theme="dark"] .section h4, :root[data-theme="dark"] .svc-card h3, :root[data-theme="dark"] .lh-card h3, :root[data-theme="dark"] .card h3, :root[data-theme="dark"] .panel h3, :root[data-theme="dark"] .svc-grouphead, :root[data-theme="dark"] .lh-grouphead{color:#F4F8F4!important} :root[data-theme="dark"] .lh-card__more, :root[data-theme="dark"] .svc-card__more, :root[data-theme="dark"] .card__more{color:#E8C468!important} :root[data-theme="dark"] .crumbs a, :root[data-theme="dark"] .crumbs li, :root[data-theme="dark"] .crumbs{color:#9BB0A3!important} :root[data-theme="dark"] .crumbs a:hover{color:#E8C468!important} :root[data-theme="dark"] .eyebrow{color:#C9A227!important} /* gold buttons must keep their dark label */ :root[data-theme="dark"] .btn--accent, :root[data-theme="dark"] .btn--accent:hover{color:#062A1A!important} /* outline / ghost buttons need light ink on dark */ :root[data-theme="dark"] .btn:not(.btn--accent), :root[data-theme="dark"] .btn--ghost{color:#F4F8F4!important;border-color:rgba(201,162,39,.45)!important} :root[data-theme="dark"] .btn:not(.btn--accent):hover{border-color:rgba(201,162,39,.75)!important;color:#FFF!important} /* bold inline text */ :root[data-theme="dark"] strong, :root[data-theme="dark"] b{color:#E9F1EA!important} :root[data-theme="dark"] .btn strong, :root[data-theme="dark"] .btn b, :root[data-theme="dark"] .av-btn strong{color:inherit!important} /* --- BEM sweep: the site names card parts __title/__desc/__more/__meta --- */ :root[data-theme="dark"] [class*="__title"], :root[data-theme="dark"] [class*="__head"], :root[data-theme="dark"] [class*="__name"]{color:#F4F8F4!important} :root[data-theme="dark"] [class*="__desc"], :root[data-theme="dark"] [class*="__text"], :root[data-theme="dark"] [class*="__body"], :root[data-theme="dark"] [class*="__intro"], :root[data-theme="dark"] [class*="__excerpt"]{color:#D3E1D8!important} :root[data-theme="dark"] [class*="__more"], :root[data-theme="dark"] [class*="__cta"]{color:#E8C468!important} :root[data-theme="dark"] [class*="__meta"], :root[data-theme="dark"] [class*="__eyebrow"], :root[data-theme="dark"] [class*="__label"], :root[data-theme="dark"] [class*="__kicker"]{color:#9BB0A3!important} :root[data-theme="dark"] .acard, :root[data-theme="dark"] .acard__title{color:#F4F8F4!important} :root[data-theme="dark"] .acard__desc{color:#D3E1D8!important} :root[data-theme="dark"] .acard__more{color:#E8C468!important} /* --- client reviews page --- */ :root[data-theme="dark"] .rv-list{background-color:#0A1D16!important;background-image:none!important} :root[data-theme="dark"] .rv-card{background-color:#102E22!important;background-image:none!important; border-color:rgba(201,162,39,.22)!important} :root[data-theme="dark"] .rv-name{color:#F4F8F4!important} :root[data-theme="dark"] .rv-body{color:#D3E1D8!important} :root[data-theme="dark"] .rv-meta, :root[data-theme="dark"] .rv-city, :root[data-theme="dark"] .rv-date{color:#9BB0A3!important} /* --- headings anywhere default to light ink on dark --- */ :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6{color:#F4F8F4!important} /* --- navigation mega dropdowns --- */ :root[data-theme="dark"] .mega, :root[data-theme="dark"] .mega__inner, :root[data-theme="dark"] .mega__links, :root[data-theme="dark"] .mega__col, :root[data-theme="dark"] .mega__panel{background-color:#0D3524!important;background-image:none!important; color:#D3E1D8!important;border-color:rgba(201,162,39,.25)!important} :root[data-theme="dark"] .mega__item{color:#F4F8F4!important;background-color:transparent!important} :root[data-theme="dark"] .mega__item:hover, :root[data-theme="dark"] .mega__item:focus-visible{background-color:rgba(201,162,39,.14)!important} :root[data-theme="dark"] .mega__item strong, :root[data-theme="dark"] .mega__item b{color:#F4F8F4!important} :root[data-theme="dark"] .mega__item span, :root[data-theme="dark"] .mega__desc, :root[data-theme="dark"] .mega__note{color:#9BB0A3!important} :root[data-theme="dark"] .mega__head, :root[data-theme="dark"] .mega__title, :root[data-theme="dark"] .mega__group{color:#C9A227!important} /* --- mobile drawer --- */ :root[data-theme="dark"] .drawer{color:#D3E1D8!important} :root[data-theme="dark"] .drawer a{color:#F4F8F4!important} /* --- form controls --- */ :root[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select{background-color:#0E2A1F!important;color:#E9F1EA!important; border-color:rgba(201,162,39,.30)!important} :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder{color:#8AA096!important;opacity:1} :root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus{border-color:rgba(201,162,39,.65)!important} :root[data-theme="dark"] select option{background-color:#0E2A1F;color:#E9F1EA} :root[data-theme="dark"] label, :root[data-theme="dark"] legend{color:#D3E1D8!important} :root[data-theme="dark"] fieldset{border-color:rgba(201,162,39,.25)!important} /* --- AI assistant chat panel --- */ :root[data-theme="dark"] [class*="ai-panel"], :root[data-theme="dark"] [class*="ai-window"], :root[data-theme="dark"] [class*="ai-chat"], :root[data-theme="dark"] [class*="ai-body"], :root[data-theme="dark"] [class*="ai-msg"]{background-color:#0E2A1F!important;color:#E9F1EA!important; border-color:rgba(201,162,39,.25)!important} /* --- LAST WORD: anything on the gold accent keeps its dark ink --- */ :root[data-theme="dark"] .btn--accent, :root[data-theme="dark"] .btn--accent *, :root[data-theme="dark"] .av-btn, :root[data-theme="dark"] .av-btn *, :root[data-theme="dark"] .rv-btn, :root[data-theme="dark"] .rv-btn *, :root[data-theme="dark"] .ai-launcher, :root[data-theme="dark"] .ai-launcher *{color:#062A1A!important} /* --- mobile: bring the day/night toggle back into the header --------------- The site hides every .header__actions child below 900px (search, Log In, Open Account) and leaves only the absolutely-positioned burger, so the theme toggle disappeared with them. Park it to the left of the burger, matched to its size and vertical centre. */ @media (max-width:900px){ .site-header .header__actions > .almeer-theme-toggle{ display:inline-flex!important; position:absolute!important; top:50%!important; right:62px!important; transform:translateY(-50%)!important; width:40px!important; height:40px!important; z-index:4!important; } .site-header .brand{max-width:calc(100% - 122px)!important;overflow:hidden!important} }