/* ========================================================================== AEGIS SENTINEL — site styles File: media/templates/site/cassiopeia/css/user.css Cassiopeia auto-loads this file after its own CSS. Core updates leave it alone. Consolidated 27 Jul 2026. Previous version had grown by appended blocks; later rules were overriding earlier ones in the same file, which is why !important had spread. Everything is now declared once, in cascade order. NAMESPACE Article markup must be wrapped in
...
. Everything under .sen is scoped, so nothing reaches the ja_colab splash page at /. The two exceptions are marked in section 13. FONTS — add to the template's Custom Code / . Falls back gracefully. CONTENTS 1 Tokens 2 Base 3 Layout 4 Typography 5 Buttons 6 Hero 7 Instrument panel 8 Two halves 9 Family cards 10 Applications 11 Band 12 Figures and text+photo splits 13 Tables 14 CTA 15 Focus 16 Responsive 17 Cassiopeia chrome — header, logo, nav 18 Joomla contact form ========================================================================== */ /* ========================================================================== 1 TOKENS Single source of truth. Change a colour here, not further down. ========================================================================== */ .sen{ /* ink */ --sen-ink:#0E2027; /* body text */ --sen-ink-hover:#2A3F49; --sen-head:#08161C; /* headings */ --sen-steel:#5F7683; /* muted text, labels, codes */ --sen-body-alt:#33474F; /* lede and band copy */ /* surfaces */ --sen-paper:#FFFFFF; --sen-wash:#F5F8F9; /* alt section background */ --sen-panel:#FAFCFC; --sen-rule:#E1E9ED; /* hairlines */ --sen-rule-strong:#C3CFD5; /* ghost button border */ /* brand accent — logo yellow. Graphics and fills only, never text on white */ --sen-accent:#F2C94C; --sen-accent-hover:#E0B62F; /* type */ --sen-display:'Archivo',system-ui,-apple-system,sans-serif; --sen-body:'Public Sans',system-ui,-apple-system,sans-serif; --sen-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace; /* measures */ --sen-measure:1040px; /* page container */ --sen-text-measure:780px; /* prose max width */ color:var(--sen-ink); font-family:var(--sen-body); font-size:18px; line-height:1.7; background:var(--sen-paper); -webkit-font-smoothing:antialiased; } /* ========================================================================== 2 BASE ========================================================================== */ .sen *,.sen *::before,.sen *::after{box-sizing:border-box} .sen img{max-width:100%;height:auto;display:block} .sen p{margin:0 0 16px} .sen a{color:var(--sen-ink)} /* ========================================================================== 3 LAYOUT One container, one edge. Tinted sections run full-bleed but their content sits back on the same measure as everything else. ========================================================================== */ .sen-wrap{ max-width:var(--sen-measure); width:100%; margin-inline:auto; padding-inline:clamp(18px,4vw,40px); } .sen-sec{ padding-block:clamp(36px,4vw,56px); border-top:1px solid var(--sen-rule); } .sen-sec--wash{ background:var(--sen-wash); border-top:1px solid var(--sen-rule); border-bottom:1px solid var(--sen-rule); margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); } .sen-sec--wash > .sen-wrap{ max-width:var(--sen-measure); margin-inline:auto; } .sen-sec-head{max-width:66ch;margin-bottom:36px} .sen-sec-head p{color:var(--sen-steel);margin-bottom:0} /* ========================================================================== 4 TYPOGRAPHY Section head pattern:

Product range

1 A to 100 A, off the shelf

Supporting sentence.

========================================================================== */ .sen h1,.sen h2,.sen h3,.sen h4{ font-family:var(--sen-display); font-weight:700; line-height:1.07; margin:0; color:var(--sen-head); letter-spacing:-.015em; } .sen h1{font-size:clamp(30px,4vw,42px);letter-spacing:-.025em} .sen h2{font-size:clamp(26px,3.2vw,38px)} .sen h3{font-size:19px;font-weight:600} .sen h4{font-size:15px;font-weight:600} /* subheading under a section h2. Use an

so the document outline is real. Works in .sen-sec-head and .sen-band alike — the two-class selector outranks .sen h3, .sen-sec-head p and .sen-band p. */ .sen .sen-subhead{ font-family:var(--sen-display); font-weight:600; font-size:clamp(17px,1.6vw,20px); line-height:1.3; letter-spacing:-.005em; color:var(--sen-steel); margin:10px 0 14px; } /* small mono label. The --current / --data modifiers are kept so existing markup keeps working, but the palette no longer differentiates them. */ .sen-eyebrow, .sen-eyebrow--current, .sen-eyebrow--data{ font-family:var(--sen-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sen-steel); margin:0 0 16px; } .sen-lede{ font-size:clamp(18px,1.6vw,21px); color:var(--sen-body-alt); max-width:var(--sen-text-measure); } /* every prose block shares one measure */ .sen .sen-lede, .sen-hero p, .sen-sec-head p, .sen-band p, .sen-cta p{max-width:var(--sen-text-measure)} /* ========================================================================== 5 BUTTONS --current = yellow fill. --data = ink fill. --ghost = outline. ========================================================================== */ .sen-btn{ display:inline-block; font-family:var(--sen-display); font-weight:600; font-size:15px; text-decoration:none; padding:13px 22px; border-radius:2px; border:1px solid transparent; cursor:pointer; transition:.15s ease; } /* --current and --data both fill yellow. The two names are a leftover from the old two-accent palette; keeping both means existing markup works either way. --ghost is the secondary action. */ .sen-btn--current, .sen-btn--data{background:var(--sen-accent);color:var(--sen-ink)} .sen-btn--current:hover, .sen-btn--data:hover{background:var(--sen-accent-hover);color:var(--sen-ink)} .sen-btn--ghost{border-color:var(--sen-rule-strong);color:var(--sen-ink)} .sen-btn--ghost:hover{border-color:var(--sen-ink)} .sen-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .sen-link{ font-family:var(--sen-display); font-weight:600; font-size:14px; text-decoration:none; color:var(--sen-ink); border-bottom:1px solid var(--sen-accent); padding-bottom:2px; } /* ========================================================================== 6 HERO ========================================================================== */ .sen-hero{ padding-block:clamp(36px,5vw,68px) clamp(26px,3vw,40px); border-top:none; } .sen-hero-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,4vw,56px); align-items:center; } .sen-hero h1 span{color:var(--sen-ink)} .sen-hero .sen-lede{margin-top:20px} /* the whole hero reads at lede size — the opening paragraph and any that follow it. :not() keeps the eyebrow out, since that's a

too. */ .sen-hero p:not(.sen-eyebrow){ font-size:clamp(18px,1.6vw,21px); color:var(--sen-body-alt); } /* ========================================================================== 7 INSTRUMENT PANEL ========================================================================== */ .sen-panel-box{ background:var(--sen-panel); border:1px solid var(--sen-rule); border-radius:3px; padding:18px 18px 10px; } .sen-panel-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; flex-wrap:wrap; } .sen-panel-head .t{ font-family:var(--sen-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sen-steel); } .sen-tag{ font-family:var(--sen-mono); font-size:11px; letter-spacing:.08em; color:var(--sen-ink); display:flex; align-items:center; gap:7px; } .sen-dot{ width:7px;height:7px; border-radius:50%; background:var(--sen-accent); animation:sen-pulse 2.4s ease-in-out infinite; } @keyframes sen-pulse{0%,100%{opacity:1}50%{opacity:.25}} .sen-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; padding-top:10px; border-top:1px solid var(--sen-rule); font-family:var(--sen-mono); font-size:11px; color:var(--sen-steel); } .sen-legend i{ display:inline-block; width:14px;height:2px; margin-right:7px; vertical-align:middle; font-style:normal; } .sen-k-data, .sen-k-current{background:var(--sen-accent)} .sen-k-crit{background:#9FB0B8} .sen-trace{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:sen-draw 2.4s ease-out .3s forwards; } @keyframes sen-draw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){ .sen-trace{animation:none;stroke-dashoffset:0} .sen-dot{animation:none} } /* ========================================================================== 8 TWO HALVES ========================================================================== */ .sen-halves{display:grid;grid-template-columns:1fr 1fr;gap:22px} .sen-half{ border:1px solid var(--sen-rule); border-top:3px solid var(--sen-accent); border-radius:3px; background:var(--sen-paper); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; } .sen-half p{color:var(--sen-steel);font-size:16px} .sen-half-foot{margin-top:auto} .sen-parts{ list-style:none; margin:20px 0; padding:0; border-top:1px solid var(--sen-rule); } .sen-parts li{border-bottom:1px solid var(--sen-rule)} .sen-parts a{ display:grid; grid-template-columns:104px 1fr auto; gap:14px; align-items:baseline; padding:14px 0; text-decoration:none; color:inherit; } .sen-pcode{ font-family:var(--sen-mono); font-size:12px; color:var(--sen-steel); letter-spacing:.04em; } /* rows with no code column — drops the 104px track */ .sen-parts--nocode a{grid-template-columns:1fr auto} .sen-pname{font-size:15px;color:var(--sen-ink)} .sen-parts a:hover .sen-pname{color:var(--sen-ink)} .sen-arw{font-family:var(--sen-mono);font-size:13px;color:var(--sen-steel)} /* ========================================================================== 9 FAMILY CARDS ========================================================================== */ .sen-fams{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} /* contact page: two cards, centred rather than stretched */ .sen-fams--pair{ grid-template-columns:repeat(2,minmax(240px,360px)); justify-content:center; } .sen-fam{ border:1px solid var(--sen-rule); border-top:3px solid var(--sen-accent); border-radius:3px; background:var(--sen-paper); padding:24px; display:flex; flex-direction:column; } .sen-fam p{font-size:15px;color:var(--sen-steel);flex:1;margin-bottom:14px} /* the output label is a

, so it must opt out of flex:1 above */ .sen-fam .sen-out{ font-family:var(--sen-mono); font-size:12px; color:var(--sen-steel); letter-spacing:.06em; margin-bottom:10px; flex:0 0 auto; } .sen-spec{ list-style:none; margin:0;padding:0; font-family:var(--sen-mono); font-size:12px; color:var(--sen-ink); } .sen-spec li{padding:5px 0;border-top:1px solid var(--sen-rule)} /* ========================================================================== 10 APPLICATIONS ========================================================================== */ .sen-apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--sen-rule); border:1px solid var(--sen-rule); border-radius:3px; overflow:hidden; } .sen-app{background:var(--sen-paper);padding:26px 24px} .sen-app .n{ font-family:var(--sen-mono); font-size:11px; color:var(--sen-steel); letter-spacing:.1em; margin:0; } .sen-app h3{margin:10px 0 8px} .sen-app p{font-size:15px;color:var(--sen-steel);margin:0} /* ========================================================================== 11 BAND No box of its own — a yellow rule down the left edge instead. ========================================================================== */ .sen-band{ border-left:3px solid var(--sen-accent); border-radius:0; padding:4px 0 4px 24px; } .sen-band p{color:var(--sen-body-alt)} /* flow chain — nodes share the row width so it reads as a diagram. 3px yellow top edge matches the .sen-fam / .sen-half card idiom. */ .sen-chain{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin-top:32px; font-family:var(--sen-mono); } .sen-node{ flex:1 1 auto; text-align:center; border:1px solid var(--sen-rule); border-top:3px solid var(--sen-rule); border-radius:3px; padding:18px 14px; background:var(--sen-paper); font-size:14px; letter-spacing:.02em; color:var(--sen-ink); } .sen-node--c, .sen-node--d{border-top-color:var(--sen-accent)} /* the endpoint — filled, so the chain arrives somewhere */ .sen-node--end{ background:var(--sen-ink); border-color:var(--sen-ink); color:#fff; } .sen-arrow{ flex:0 0 auto; display:flex; align-items:center; color:var(--sen-steel); font-size:14px; white-space:nowrap; } /* ========================================================================== 12 FIGURES AND TEXT+PHOTO SPLITS ========================================================================== */ .sen-figure{margin:0} .sen-figure img{border:1px solid var(--sen-rule);border-radius:3px} .sen-figure figcaption{ font-family:var(--sen-mono); font-size:11px; letter-spacing:.06em; color:var(--sen-steel); margin-top:10px; } /* for portrait photos — caps the height so they don't drive the row */ .sen-figure--tall img{max-height:560px;width:auto;margin-inline:auto} /* stacked hero figures — one main product shot, one smaller detail beneath. The size difference is what stops them competing. Tune these two numbers to fill the hero height; beyond ~560px the cell width limits them anyway. */ .sen-figure-stack{display:grid;gap:18px} .sen-figure--main img{max-height:520px;width:auto;margin-inline:auto} .sen-figure--detail img{max-height:230px;width:auto;margin-inline:auto} .sen-figure--detail figcaption{text-align:center} .sen-split{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(26px,4vw,48px); align-items:start; } /* ========================================================================== 13 TABLES ========================================================================== */ .sen-tbl{ overflow-x:auto; border:1px solid var(--sen-rule); border-radius:3px; background:var(--sen-paper); } .sen-tbl + .sen-tbl{margin-top:22px} .sen-tbl table{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; margin:0; } .sen-tbl caption{ text-align:left; font-family:var(--sen-display); font-weight:600; font-size:16px; padding:18px 20px 0; color:var(--sen-head); } .sen-tbl th,.sen-tbl td{ text-align:left; padding:11px 20px; border-bottom:1px solid var(--sen-rule); vertical-align:top; } .sen-tbl th{ font-family:var(--sen-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--sen-steel); font-weight:400; background:var(--sen-wash); } .sen-tbl td.code{ font-family:var(--sen-mono); font-size:12.5px; color:var(--sen-steel); white-space:nowrap; } .sen-tbl td.out{ font-family:var(--sen-mono); font-size:12.5px; color:var(--sen-ink); white-space:nowrap; } .sen-tbl td.note{color:var(--sen-steel);font-size:13.5px} .sen-tbl tbody tr:last-child td{border-bottom:none} .sen-tbl tbody tr:hover{background:var(--sen-wash)} /* ========================================================================== 14 CTA ========================================================================== */ .sen-cta{ border:1px solid var(--sen-rule); border-radius:3px; padding:clamp(22px,2.6vw,32px); display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center; } .sen-cta p{color:var(--sen-steel);margin:8px 0 0;font-size:15px} /* ========================================================================== 15 FOCUS ========================================================================== */ .sen a:focus-visible, .sen button:focus-visible{ outline:2px solid var(--sen-ink); outline-offset:3px; } /* ========================================================================== 16 RESPONSIVE ========================================================================== */ @media (max-width:900px){ .sen-hero-grid, .sen-halves, .sen-cta{grid-template-columns:1fr} .sen-split{grid-template-columns:1fr} .sen-fams, .sen-apps{grid-template-columns:1fr 1fr} .sen-band{padding-left:16px} } @media (max-width:600px){ .sen-fams, .sen-apps{grid-template-columns:1fr} .sen-parts:not(.sen-parts--nocode) a{grid-template-columns:88px 1fr auto} } /* ========================================================================== 17 CASSIOPEIA CHROME — header, logo, nav NOT namespaced under .sen. These target Cassiopeia's own markup, which sits outside the article. Harmless on the ja_colab splash page — those class names don't exist there. !important is retained in this section only. It is fighting Cassiopeia's own stylesheet, not earlier rules in this file. Removing it reintroduces the bug where the logo and nav shrink-wrap and park left. Confirmed markup: header.container-header > .grid-child.container-nav > #mod-custom126.mod-custom > div.sen-logo > a > img > ul.mod-menu ========================================================================== */ body{overflow-x:hidden} /* required by the .sen-sec--wash full-bleed rule */ .container-header{ background:#FFFFFF; background-image:none; box-shadow:none; border-bottom:1px solid #E1E9ED; padding-block:14px 0; color:#0E2027; } .container-header a{color:#0E2027;text-decoration:none} /* stack logo over nav, both centred. .container-nav is a flex row — children must be forced full width or they shrink-wrap and park left. */ .container-header .grid-child, .container-header .container-nav{ display:flex !important; flex-direction:column !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; width:100% !important; margin:0; padding:0; } /* logo module */ .container-header .container-nav .mod-custom{ width:100% !important; flex:1 0 100% !important; order:1; /* above the nav, whatever the module order */ } .container-header .sen-logo{ text-align:center !important; width:100% !important; padding:6px 0 4px; } .container-header .sen-logo a{display:inline-block !important} .container-header .sen-logo img{ max-height:64px !important; /* <-- logo size: tune this one number */ width:auto !important; height:auto !important; margin:0 auto !important; } /* nav */ .container-header ul.mod-menu, .container-header ul.mod-list, .container-header .navbar-nav, .container-topbar ul.mod-menu, .container-topbar ul.mod-list{ order:2; display:flex !important; flex-wrap:wrap; justify-content:center !important; gap:2px; margin:8px auto 0 !important; padding:6px 0 0; list-style:none; width:100% !important; float:none !important; } .container-header ul.mod-menu, .container-header ul.mod-list, .container-header .navbar-nav{border-top:1px solid #E1E9ED} .container-header ul.mod-menu > li > a, .container-header ul.mod-list > li > a, .container-header .navbar-nav > li > a, .container-topbar ul.mod-menu > li > a, .container-topbar ul.mod-list > li > a{ display:block; font-family:'Archivo',system-ui,sans-serif; font-weight:600; font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:#5F7683; text-decoration:none; padding:12px 18px; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease; } .container-header ul.mod-menu > li > a:hover, .container-header ul.mod-list > li > a:hover, .container-header .navbar-nav > li > a:hover, .container-header ul.mod-menu > li.current > a, .container-header ul.mod-menu > li.active > a, .container-header ul.mod-list > li.current > a, .container-header ul.mod-list > li.active > a, .container-topbar ul.mod-menu > li > a:hover, .container-topbar ul.mod-menu > li.current > a, .container-topbar ul.mod-menu > li.active > a{ color:#0E2027; border-bottom-color:#F2C94C; } @media (max-width:640px){ .container-header .sen-logo img{max-height:48px !important} .container-header ul.mod-menu > li > a, .container-header ul.mod-list > li > a{padding:10px 12px;font-size:13px} } /* ========================================================================== 18 JOOMLA CONTACT FORM NOT namespaced under .sen — this is com_contact's own output, which sits outside your article markup. `.contact` is Joomla's wrapper class. ========================================================================== */ /* share the .sen-wrap container so the form's left edge lines up with the module above it. The fields themselves stay narrow. */ .contact{ max-width:1040px; margin-inline:auto; padding-inline:clamp(18px,4vw,40px); padding-block:0 3rem; } .contact-form{max-width:640px} .contact h2, .contact h3, .contact legend{ font-family:'Archivo',system-ui,sans-serif; font-weight:700; font-size:26px; letter-spacing:-.015em; color:#08161C; margin:0 0 18px; } .contact label{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#5F7683; display:block; margin-bottom:6px; } .contact input[type=text], .contact input[type=email], .contact textarea, .contact select{ width:100%; border:1px solid #E1E9ED; border-radius:3px; padding:12px 14px; font-family:'Public Sans',system-ui,sans-serif; font-size:18px; line-height:1.5; color:#0E2027; background:#FFFFFF; } .contact textarea{min-height:180px;resize:vertical} .contact input:focus, .contact textarea:focus, .contact select:focus{outline:2px solid #F2C94C;outline-offset:1px} .contact .control-group, .contact .mb-3{margin-bottom:20px} .contact .btn-primary, .contact button[type=submit]{ background:#F2C94C; border:1px solid #F2C94C; color:#0E2027; font-family:'Archivo',system-ui,sans-serif; font-weight:600; font-size:15px; padding:13px 22px; border-radius:2px; cursor:pointer; } .contact .btn-primary:hover, .contact button[type=submit]:hover{ background:#E0B62F; border-color:#E0B62F; color:#0E2027; } /* the required-field asterisk and its note */ .contact .star, .contact .form-required{color:#9C5D08} /* address + hours line, in place of a full "Where we are" section */ .sen-contact-meta{ font-family:var(--sen-mono); font-size:12px; line-height:1.8; color:var(--sen-steel); margin:26px 0 0; padding-top:18px; border-top:1px solid var(--sen-rule); } /* contact page: the form follows immediately, so tighten the intro */ .sen-hero .sen-parts{margin:26px 0 0;max-width:560px} .sen-hero .sen-contact-meta{max-width:560px} /* com_contact stacks several headings above the form. The module above the component already introduces the page, so strip them. The menu item's Contact Display Options handle most of this — these catch the rest. */ .contact .page-header, .contact .contact-category, .contact hr, .contact-form legend{display:none} /* the contact-details block — a "Contact"

plus an info div that is empty once the menu item's display options are all set to Hide. Remove this rule if you ever want the address/phone rendered by the component rather than by the module above it. */ .com-contact__container{display:none} /* keep the "Contact Form" heading, just sit it closer to the fields */ .contact-form h3{margin-bottom:10px} /* ---------- module chrome ---------- Cassiopeia wraps main-top modules in a .card and centres the content. The .sen sections bring their own alignment and hairlines, so strip it. Also settable per module: Advanced tab → Module Style → none. */ .main-top.card, .main-top .card-body{ border:none !important; background:none !important; box-shadow:none !important; padding:0 !important; } .main-top, .main-top .sen, .main-top .sen-wrap, .main-top .sen-hero{text-align:left !important} /* stack the contact rows — something upstream is laying the list out inline */ .sen-parts{display:block} .sen-parts li{display:block;width:100%;float:none} /* meta line: wider measure so the · separators don't land at line starts */ .sen-hero .sen-contact-meta{max-width:640px} /* ---------- header logo size ---------- Targets any image in the header rather than .sen-logo img, so it holds even if the logo module's wrapper div has changed. The header carries nothing but the logo, so this can't catch anything else. TUNE: max-height is the only number that matters. */ .container-header img, .container-header .mod-custom img{ max-height:80px !important; width:auto !important; height:auto !important; margin:0 auto !important; } @media (max-width:640px){ .container-header img{max-height:52px !important} } /* ---------- link colour inside .sen content ---------- Cassiopeia's link colour was winning over .sen a. */ .sen a, .sen .sen-parts a, .sen .sen-parts a .sen-pname{color:var(--sen-ink) !important} .sen .sen-parts a .sen-pcode, .sen .sen-parts a .sen-arw{color:var(--sen-steel) !important} .sen .sen-parts a:hover .sen-pname{color:var(--sen-ink) !important}