/* ========================================================================== WordPress compatibility. Everything the design needs lives in site.css. This file exists only to make the design behave correctly inside WordPress — the admin bar, block-editor defaults, plugin-injected markup and the small amount of editor content the theme renders on non-application pages. Keep it small. If a rule belongs to the design, it belongs in site.css. ========================================================================== */ /* --- admin bar ----------------------------------------------------------- The site header is sticky at top:0. When the WordPress toolbar is showing it occupies the first 32px (46px on small screens), so the header must sit below it rather than underneath it. WordPress adds .admin-bar to . */ .admin-bar .hdr { top: 32px; } .admin-bar .mobnav { max-height: calc(100vh - var(--header-h) - 32px); } .admin-bar .mbk { padding-top: 96px; } @media screen and (max-width: 782px) { .admin-bar .hdr { top: 46px; } .admin-bar .mobnav { max-height: calc(100vh - var(--header-h) - 46px); } .admin-bar .mbk { padding-top: 62px; } } /* The toolbar is position:fixed below 601px, so nothing should offset then. */ @media screen and (max-width: 600px) { .admin-bar .hdr { top: 0; } } /* --- skip link ------------------------------------------------------------ Keep it above the admin bar when it is revealed. */ .skip { z-index: 100000; } /* --- WordPress core classes ---------------------------------------------- Attachment and caption classes that can appear in editor content. */ .kodeit-ict .alignleft { float: left; margin: 0 1.5em 1em 0; } .kodeit-ict .alignright { float: right; margin: 0 0 1em 1.5em; } .kodeit-ict .aligncenter { display: block; margin-left: auto; margin-right: auto; } .kodeit-ict .wp-caption { max-width: 100%; } .kodeit-ict .wp-caption-text, .kodeit-ict figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; } .kodeit-ict .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- editor content on plain pages --------------------------------------- site.css deliberately resets list styling and heading margins for the application's own components. Editor content needs normal prose rhythm, so it is restored inside .kodeit-prose only. */ .kodeit-prose > * + * { margin-top: 1.1em; } .kodeit-prose h2 { margin-top: 1.8em; } .kodeit-prose h3 { margin-top: 1.5em; } .kodeit-prose p, .kodeit-prose li { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); } .kodeit-prose ul, .kodeit-prose ol { list-style: revert; padding-left: 1.4em; } .kodeit-prose li + li { margin-top: .4em; } .kodeit-prose a { color: var(--k-cyan-deep); text-decoration: underline; text-underline-offset: 2px; } .kodeit-prose a:hover { color: var(--ink); } .kodeit-prose blockquote { border-left: 3px solid var(--line-2); padding-left: 18px; color: var(--ink-2); } .kodeit-prose img { border-radius: var(--r-sm); } .kodeit-prose code, .kodeit-prose pre { font-family: var(--ff-mono); font-size: .92em; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); } .kodeit-prose code { padding: 2px 6px; } .kodeit-prose pre { padding: 14px 16px; overflow-x: auto; } .kodeit-prose table { width: 100%; font-size: 13.5px; } /* --- pagination and page links ------------------------------------------- */ .kodeit-pagination .nav-links, .kodeit-pagelinks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .kodeit-pagination .page-numbers, .kodeit-pagelinks > * { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); font-size: 13.5px; font-weight: 550; color: var(--ink-2); } .kodeit-pagination .page-numbers:hover { border-color: var(--line-2); color: var(--ink); } .kodeit-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; } /* --- form plugin output --------------------------------------------------- Form plugins inject their own markup into the contact card. Give their fields the site's input treatment without reaching into any single plugin's classes. */ .kodeit-form-plugin input[type="text"], .kodeit-form-plugin input[type="email"], .kodeit-form-plugin input[type="tel"], .kodeit-form-plugin input[type="url"], .kodeit-form-plugin input[type="number"], .kodeit-form-plugin select, .kodeit-form-plugin textarea { font-family: var(--ff); font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; min-height: 44px; } .kodeit-form-plugin textarea { min-height: 104px; } .kodeit-form-plugin input:focus, .kodeit-form-plugin select:focus, .kodeit-form-plugin textarea:focus { outline: none; border-color: var(--k-cyan); box-shadow: 0 0 0 3px rgba(1, 195, 255, .14); } .kodeit-form-plugin label { display: block; font-size: 10.5px; font-weight: 650; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 6px; text-transform: uppercase; } .kodeit-form-plugin button[type="submit"], .kodeit-form-plugin input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 11px; background: var(--ink); color: #fff; font-family: var(--ff); font-size: 14.5px; font-weight: 600; cursor: pointer; } .kodeit-form-plugin button[type="submit"]:hover, .kodeit-form-plugin input[type="submit"]:hover { box-shadow: 0 8px 22px rgba(20, 26, 38, .2); }