/* knigonova2 - Cassiopeia child template for knigonova.com. * The whole template is this file, in sections 1-12. * Read CLAUDE.md, "Editing user.css", before changing anything here. */ /* 1. Palette and type tokens ------------------------------------------------ */ :root { /* Site palette */ --kn-page-bg: #2D1401; /* behind and below the bookshelf photo */ --kn-band: rgba(34, 29, 4, .64); /* translucent header wash */ --kn-headline: #EAEDF0; /* site title in the band */ --kn-slogan: #9BA8B5; /* tagline under it */ --kn-nav-rule: #A3B4C8; /* dotted line under the menu row */ --kn-menu-sep: #9CAFC4; /* hairline between menu buttons */ --kn-submenu-bg: rgba(28, 23, 18, .8); --kn-submenu-rule: #EDEFF2; --kn-sheet: #FFFFFF; /* article sheet and sidebar column */ --kn-shadow: 0 0 3px 2px rgba(0, 0, 0, .1); --kn-text: #303F50; --kn-title: #4E6883; /* article title */ --kn-link: #38424C; --kn-link-visited: #839BB4; --kn-link-hover: #839BB4; --kn-block-title: #758799; /* module heading */ --kn-block-link: #FB7C3C; /* module links are the orange accent */ --kn-block-link-vis: #A9BACB; --kn-block-link-hov: #FA5705; --kn-block-text: #4E6883; --kn-quote-bg: #EFF2F5; --kn-button: #A1ADBA; --kn-button-hover: #8A99A8; --kn-input-bg: #F9FAFB; --kn-input-border: #B9C2CB; --kn-input-text: #3D5166; --kn-pager: #D9DEE3; --kn-pager-active: #B6BFC9; --kn-footer-rule: #9CAFC4; --kn-footer-link: #96AAC0; --kn-footer-visited: #7C96B1; --kn-footer-hover: #FC905A; --kn-image-border: #9CAFC4; --kn-font: Arial, "Arial Unicode MS", Helvetica, sans-serif; /* Cassiopeia's own tokens, repointed */ --cassiopeia-color-primary: #2D1401; --cassiopeia-color-link: #38424C; --cassiopeia-color-hover: #839BB4; --cassiopeia-font-family-body: Arial, "Arial Unicode MS", Helvetica, sans-serif; --cassiopeia-font-family-headings: Arial, "Arial Unicode MS", Helvetica, sans-serif; --cassiopeia-font-weight-normal: 400; --cassiopeia-font-weight-headings: 700; /* Bootstrap 5.2 tokens (Joomla 4) */ --bs-font-sans-serif: Arial, "Arial Unicode MS", Helvetica, sans-serif; --bs-body-font-family: Arial, "Arial Unicode MS", Helvetica, sans-serif; --bs-body-font-size: 13px; --bs-body-color: #303F50; --bs-link-color: #38424C; --bs-link-hover-color: #839BB4; --bs-border-radius: 3px; /* Bootstrap 5.3 dropped the --bs- prefix (Joomla 5) */ --body-font-family: Arial, "Arial Unicode MS", Helvetica, sans-serif; --body-font-size: 13px; --body-color: #303F50; --link-color: #38424C; --link-hover-color: #839BB4; --border-radius: 3px; } /* 2. Page shell ------------------------------------------------------------- */ /* The bookshelf photo is a page background with the wordmark baked into it, not * a header band - the sheet is pushed down far enough to clear the wordmark. */ html { background-color: var(--kn-page-bg); background-repeat: no-repeat; background-position: top center; background-image: url("../images/page.jpg"); background-image: image-set(url("../images/page.webp") type("image/webp"), url("../images/page.jpg") type("image/jpeg")); } /* The 900px cap goes on , never on .site-grid. min-height clears * Cassiopeia's 100vh, which would otherwise add the 200px offset on top of a * full viewport; the original had no sticky footer either. */ body.site { max-width: 900px; min-height: 0; margin: 200px auto 0; background: none; color: var(--kn-text); font-family: var(--kn-font); font-size: 13px; line-height: 1.25; } a { color: var(--kn-link); text-decoration: none; } a:visited { color: var(--kn-link-visited); } a:hover, a:focus { color: var(--kn-link-hover); text-decoration: underline; } /* 3. Header band and brand -------------------------------------------------- */ /* header.png was a single flat colour at 64% alpha, so it ships as a colour. */ .container-header { position: relative; min-height: 80px; padding: 0; background: var(--kn-band); color: #FFFFFF; box-shadow: none; overflow: visible; /* never clip the menu fly-out (ยง4) */ } .container-header .grid-child { max-width: none; padding: 0; margin: 0; } /* The brand overlays the left of the band while the menu row spans its full * width - the same arrangement .art-nav got from position: absolute. Keyed to * 992px, not 768px: below that Cassiopeia stacks the menu vertically and an * absolute brand lands on top of it. */ @media (min-width: 992px) { .container-header > .grid-child:not(.container-nav) { position: absolute; top: 2px; left: 12px; z-index: 2; display: block; width: auto; max-width: 42%; } } .container-header .navbar-brand { display: block; margin: 0; padding: 0; font-size: 36px; line-height: 40px; } .container-header .navbar-brand a, .container-header .navbar-brand .brand-logo, .container-header .site-title { color: var(--kn-headline); font-size: 36px; font-weight: 400; line-height: 40px; text-decoration: none; white-space: nowrap; } .container-header .navbar-brand a:hover, .container-header .navbar-brand a:focus { color: var(--kn-headline); text-decoration: none; } .container-header .site-description { margin-top: 3px; color: var(--kn-slogan); font-size: 16px; line-height: 1.2; white-space: nowrap; } /* A logo image would overflow the 80px band; the design has no logo file. */ .container-header .navbar-brand img.logo { max-height: 44px; width: auto; } /* Menu row on top, search under it, both spanning the band. */ .container-header .container-nav { flex-direction: column; align-items: stretch; padding: 0; margin: 0; } .container-header .container-nav > nav, .container-header .container-nav > .mod-menu { width: 100%; margin: 0; } /* 4. Top menu --------------------------------------------------------------- */ .container-header .mod-menu { justify-content: flex-end; /* ul.art-hmenu was floated right */ margin: 0; padding: 0; border-bottom: 1px dotted var(--kn-nav-rule); list-style: none; } .container-header .mod-menu > li > a, .container-header .mod-menu > li > span, .container-header .mod-menu > li > .mod-menu__heading { display: block; height: 34px; padding: 0 17px; border-radius: 3px; color: #FFFFFF; font-size: 13px; font-weight: 700; line-height: 34px; text-align: center; text-transform: uppercase; text-decoration: none; } .container-header .mod-menu > li + li { margin-left: 11px; } .container-header .mod-menu > li:first-child { margin-left: 5px; } /* Clears Cassiopeia's .metismenu-item padding: .5em 1em, which is 17.6px there * because the same class also sets font-size: 1.1rem. */ .container-header .metismenu.mod-menu > li { padding: 0; font-size: 13px; } /* Cassiopeia grows a 2px underline out of these; this design underlines the * label instead. Killing content removes the box the later rules would paint. */ .container-header .mod-menu > li::after, .container-header .metismenu.mod-menu > li > a::after, .container-header .metismenu.mod-menu > li > button::before { content: none; } .container-header .mod-menu > li > a:hover, .container-header .mod-menu > li > a:focus { color: #FFFFFF; text-decoration: underline; } /* menuseparator.png was a 1px hairline on an otherwise empty 1x34 canvas. */ @media (min-width: 992px) { .container-header .mod-menu > li + li::before { content: ""; position: absolute; top: 50%; left: -6px; width: 1px; height: 10px; margin-top: -5px; background: var(--kn-menu-sep); } } /* The original leaves the current item looking like the rest. */ .container-header .metismenu.mod-menu > li.active > a, .container-header .metismenu.mod-menu > li > a.active { text-decoration: none; } /* The .mod-menu rules serve mod_menu's plain _:default layout. .parent > ul is * restated because Cassiopeia colours and hides that at one class more. */ .container-header .mod-menu ul, .container-header .mod-menu .parent > ul { padding: 5px 0; border-radius: 3px; background: var(--kn-submenu-bg); color: #FFFFFF; list-style: none; } .container-header .mod-menu ul li { margin: 9px 0; } .container-header .mod-menu ul li:first-child { margin-top: 0; } .container-header .mod-menu ul li:last-child { margin-bottom: 0; } .container-header .mod-menu ul li + li { border-top: 1px dotted var(--kn-submenu-rule); } .container-header .mod-menu ul a { display: block; min-height: 25px; padding: 0 10px; color: #FFFFFF; font-size: 14px; font-weight: 400; line-height: 25px; text-align: left; text-transform: none; } .container-header .mod-menu ul a:hover, .container-header .mod-menu ul a:focus { color: #FFFFFF; text-decoration: underline; } /* The .metismenu-prefixed set restates the same values a notch above * Cassiopeia's own metismenu block, which always carries one class more. * Edit a value in one and it must be changed in the other. */ .container-header .metismenu.mod-menu .mm-collapse { padding: 5px 0; border-radius: 3px; background: var(--kn-submenu-bg); box-shadow: none; color: #FFFFFF; font-size: 14px; /* the em basis for min-width below */ } /* Cassiopeia flexes these rows and sizes them 1.1rem, which shrink-wraps the * hover target and leaks 17.6px into anything the row measures in em. */ .container-header .metismenu.mod-menu .mm-collapse > li { display: block; margin: 9px 0; padding: 0; font-size: 14px; } .container-header .metismenu.mod-menu .mm-collapse > li:first-child { margin-top: 0; } .container-header .metismenu.mod-menu .mm-collapse > li:last-child { margin-bottom: 0; } .container-header .metismenu.mod-menu .mm-collapse > li + li { border-top: 1px dotted var(--kn-submenu-rule); } .container-header .metismenu.mod-menu .mm-collapse > li > a { display: block; } /* Desktop fly-out, asserted here because Cassiopeia has no hover option; below * 992px metismenu's accordion is left alone. Needs mod_menu's Show Sub-menu * Items = Yes and End Level = All, or there is no child