/* Theme Name: A6 Standard Theme Theme URI: https://a6.studio/themes/a6-standard-theme Author: A6 Studio Author URI: https://a6.studio Description: A clean, responsive WordPress classic theme with a modern header, accessible navigation, and content-width layout controls for internal staff sites and lightweight content publishing. Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: a6-standard-theme Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, blog, one-column, two-columns, accessibility-ready */ html { box-sizing: border-box; font-size: 16px; } :root { --site-gutter: 16px; --layout-max: 1120px; --layout-wide-max: 1280px; --content-max: 760px; --content-wide-max: 860px; } /* Layout variants: apply one class to when needed. */ body.layout-compact { --layout-max: 960px; --content-max: 680px; } body.layout-standard { --layout-max: 1120px; --content-max: 760px; } body.layout-wide { --layout-max: 1280px; --content-max: 860px; } body.layout-full { --layout-max: 100%; --content-max: min(960px, calc(100vw - (var(--site-gutter) * 2))); } @media (min-width: 768px) { :root { --site-gutter: 20px; } } @media (min-width: 1024px) { :root { --site-gutter: 24px; } } @media (min-width: 1440px) { :root { --site-gutter: 32px; --layout-max: 1200px; --content-max: 800px; } } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding-top: 1rem; padding-bottom: 2rem; padding-left: max(var(--site-gutter), env(safe-area-inset-left)); padding-right: max(var(--site-gutter), env(safe-area-inset-right)); font-family: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.6; color: #222; background: #fff; } /* Frontend admin bar theme */ body.admin-bar #wpadminbar { background: #fff; color: #000; } body.admin-bar #wpadminbar .ab-item, body.admin-bar #wpadminbar .ab-label, body.admin-bar #wpadminbar .ab-icon::before { color: #000; } body.admin-bar #wpadminbar .ab-item:hover, body.admin-bar #wpadminbar .ab-item:focus { background: #f0f0f0; color: #000; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .site-header { margin: 0 0 2rem; width: min(100%, var(--layout-max)); margin-left: auto; margin-right: auto; } .site-header-inner { display: flex; align-items: center; gap: 1rem; width: 100%; margin: 0; padding: 0.875rem 1.1rem; border: 1px solid #e7ecf3; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); } body.a6-nav-style-minimal .site-header-inner { border-color: #d6dde9; box-shadow: none; background: #fff; } body.a6-nav-style-solid .site-header-inner { border-color: #111827; background: #111827; box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2); } body.a6-nav-style-solid .site-title, body.a6-nav-style-solid .main-navigation .menu > .menu-item > a { color: #f9fafb; } body.a6-nav-style-solid .main-navigation .menu > .menu-item > a:hover, body.a6-nav-style-solid .main-navigation .menu > .menu-item > a:focus-visible, body.a6-nav-style-solid .main-navigation .menu > .current-menu-item > a { background: rgba(255, 255, 255, 0.16); color: #fff; } .site-branding { flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0; } .site-logo-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 0; margin: 0; padding: 0; text-decoration: none; } .site-logo-image { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; } .site-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; color: #101828; } .main-navigation { margin: 0 0 0 auto; flex: 0 1 auto; } .main-navigation .menu, .main-navigation .sub-menu { list-style: none; margin: 0; padding: 0; } .main-navigation .menu { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; } .management-panel-link { display: inline-flex; align-items: center; padding: 0.5rem 0.85rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: #1f2937; overflow: hidden; transition: background-color 0.2s ease, color 0.2s ease; } .management-panel-link:hover, .management-panel-link:focus-visible { background: #eef2ff; color: #1d4ed8; } .management-panel-icon { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; } .management-panel-icon.dashicons { font-size: 1.2rem; width: 1.2rem; height: 1.2rem; } .management-panel-icon-svg svg { display: block; width: 100%; height: 100%; } .management-panel-hover-text { display: inline-block; max-width: 0; margin-left: 0; opacity: 0; white-space: nowrap; overflow: hidden; transform: translateX(-8px); transition: max-width 0.22s ease, opacity 0.2s ease, margin-left 0.22s ease, transform 0.22s ease; } .management-panel-link:hover .management-panel-hover-text, .management-panel-link:focus-visible .management-panel-hover-text { max-width: 220px; margin-left: 0.45rem; opacity: 1; transform: translateX(0); } .main-navigation .menu > .menu-item { position: relative; margin: 0; } .main-navigation .menu > .menu-item.menu-item-logout-top { margin-left: auto; } .main-navigation .menu > .menu-item > a { display: inline-flex; align-items: center; padding: 0.5rem 0.85rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: #1f2937; transition: background-color 0.2s ease, color 0.2s ease; } .main-navigation .menu > .menu-item.menu-item-account-icon > a { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; padding: 0; line-height: 1; } .menu-item-account-icon-visual { position: relative; display: block; flex: 0 0 auto; width: 1.2rem; height: 1.2rem; } .menu-item-account-icon-visual::before { content: ""; position: absolute; top: 0; left: 50%; width: 0.46rem; height: 0.46rem; border: 2.4px solid currentColor; border-radius: 999px; transform: translateX(-50%); } .menu-item-account-icon-visual::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0.88rem; height: 0.56rem; border: 2.4px solid currentColor; border-top: 0; border-radius: 0 0 999px 999px; transform: translateX(-50%); } .main-navigation .menu > .menu-item.menu-item-account-icon > a .menu-item-account-label { display: none; } .main-navigation .menu > .menu-item > a:hover, .main-navigation .menu > .menu-item > a:focus-visible, .main-navigation .menu > .current-menu-item > a { background: #eef2ff; color: #1d4ed8; } .main-navigation .sub-menu { position: absolute; top: calc(100% + 0.45rem); left: 0; min-width: 220px; background: #fff; border: 1px solid #e7ecf3; border-radius: 12px; padding: 0.4rem; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 20; } .main-navigation .sub-menu li { margin: 0; } .main-navigation .sub-menu a { display: block; padding: 0.45rem 0.7rem; border-radius: 8px; text-decoration: none; font-weight: 500; color: #1f2937; } .main-navigation .sub-menu a:hover, .main-navigation .sub-menu a:focus-visible { background: #f5f7fb; color: #1d4ed8; } .main-navigation .menu-item-has-children:hover > .sub-menu, .main-navigation .menu-item-has-children:focus-within > .sub-menu, .main-navigation .menu-item-has-children.submenu-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .menu-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid #d5dbe6; border-radius: 10px; background: #fff; cursor: pointer; } body.a6-no-hamburger .menu-toggle { display: none !important; } body.a6-no-hamburger .submenu-toggle { display: none !important; } .menu-toggle-bar { width: 20px; height: 2px; background: #111827; border-radius: 99px; transition: transform 0.2s ease, opacity 0.2s ease; } .menu-toggle.is-active .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.is-active .menu-toggle-bar:nth-child(2) { opacity: 0; } .menu-toggle.is-active .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .submenu-toggle { display: none; } .site-main { max-width: var(--layout-max); width: 100%; margin: 0 auto; } .site-main article { max-width: var(--content-max); margin-left: auto; margin-right: auto; } .site-main > .alignwide { max-width: var(--content-wide-max); } .site-main > .alignfull { max-width: 100%; } .site-footer { width: min(100%, var(--layout-max)); margin-left: auto; margin-right: auto; } .site-header-inner.is-nav-collapsed { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; } .site-header-inner.is-nav-collapsed .management-panel-link { padding: 0.5rem 0.65rem; } .site-header-inner.is-nav-collapsed .site-logo-image { height: 100%; max-height: 100%; } .site-header-inner.is-nav-collapsed .site-branding { width: 28px; height: 28px; } .site-header-inner.is-nav-collapsed .menu-toggle { display: inline-flex; margin-left: auto; } .site-header-inner.is-nav-collapsed .main-navigation { display: none; flex: 1 0 100%; margin: 0; padding-top: 0.4rem; } .site-header-inner.is-nav-collapsed .main-navigation.is-open { display: block; } body.a6-animate-hamburger .site-header-inner.is-nav-collapsed .main-navigation { --a6-hamburger-open-opacity: 1; --a6-hamburger-closed-opacity: 0; --a6-hamburger-open-transform: translateY(0); --a6-hamburger-closed-transform: translateY(-6px); display: block; padding-top: 0; max-height: 0; opacity: var(--a6-hamburger-closed-opacity); overflow: hidden; pointer-events: none; transform: var(--a6-hamburger-closed-transform); transition: max-height var(--a6-hamburger-duration, 240ms) ease, opacity var(--a6-hamburger-duration, 240ms) ease, transform var(--a6-hamburger-duration, 240ms) ease; } body.a6-animate-hamburger .site-header-inner.is-nav-collapsed .main-navigation.is-open { padding-top: 0.4rem; opacity: var(--a6-hamburger-open-opacity); pointer-events: auto; transform: var(--a6-hamburger-open-transform); } body.a6-animate-hamburger.a6-hamburger-anim-slide .site-header-inner.is-nav-collapsed .main-navigation { --a6-hamburger-closed-opacity: 1; } body.a6-animate-hamburger.a6-hamburger-anim-fade .site-header-inner.is-nav-collapsed .main-navigation { --a6-hamburger-closed-transform: none; --a6-hamburger-open-transform: none; } .site-header-inner.is-nav-collapsed .main-navigation .menu { flex-direction: column; align-items: stretch; gap: 0.15rem; } .site-header-inner.is-nav-collapsed .main-navigation .menu > .menu-item.menu-item-logout-top { margin-left: 0; } .site-header-inner.is-nav-collapsed .main-navigation .menu > .menu-item > a { width: 100%; border-radius: 10px; padding: 0.7rem 0.75rem; } .site-header-inner.is-nav-collapsed .main-navigation .menu > .menu-item.menu-item-account-icon > a { width: 100%; height: auto; padding: 0.7rem 0.75rem; justify-content: flex-start; gap: 0.5rem; align-self: auto; } .site-header-inner.is-nav-collapsed .main-navigation .menu > .menu-item.menu-item-account-icon > a .menu-item-account-label { display: inline; } .site-header-inner.is-nav-collapsed .main-navigation .menu-item-has-children { position: relative; } .site-header-inner.is-nav-collapsed .main-navigation .menu-item-has-children > a { padding-right: 2.25rem; } .site-header-inner.is-nav-collapsed .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0.55rem; right: 0.45rem; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; color: #111827; cursor: pointer; outline: 0; transform: none; z-index: 2; } .site-header-inner.is-nav-collapsed .submenu-toggle::before { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transform-origin: 50% 50%; transition: transform 0.2s ease; } .site-header-inner.is-nav-collapsed .submenu-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); } .site-header-inner.is-nav-collapsed .main-navigation .sub-menu { position: static; min-width: 0; margin-top: 0.35rem; padding: 0 0 0 0.6rem; border: 0; border-left: 2px solid #e7ecf3; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: block; overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .site-header-inner.is-nav-collapsed .main-navigation .menu-item-has-children.submenu-open > .sub-menu { max-height: 600px; } main, article, section, header, footer { margin: 0 0 1.5rem; } h1, h2, h3, h4, h5, h6 { margin: 0 0 0.75rem; line-height: 1.25; } p { margin: 0 0 1rem; } ul, ol { margin: 0 0 1rem 1.5rem; padding: 0; } li { margin: 0 0 0.5rem; } a { color: #0b57d0; } a:hover, a:focus { color: #063b90; } img { display: block; max-width: 100%; height: auto; margin: 0 0 1rem; } input, textarea, select, button { font: inherit; margin: 0 0 1rem; padding: 0.5rem 0.75rem; } @media (max-width: 800px) { .site-header-inner { flex-wrap: wrap; } .management-panel-link { padding: 0.5rem 0.65rem; } .site-logo-image { height: 100%; max-height: 100%; } .site-branding { width: 28px; height: 28px; } .management-panel-hover-text { display: none; } .menu-toggle { display: inline-flex; margin-left: auto; } .main-navigation { display: none; flex: 1 0 100%; margin: 0; padding-top: 0.4rem; } .main-navigation.is-open { display: block; } body.a6-animate-hamburger .main-navigation { --a6-hamburger-open-opacity: 1; --a6-hamburger-closed-opacity: 0; --a6-hamburger-open-transform: translateY(0); --a6-hamburger-closed-transform: translateY(-6px); display: block; padding-top: 0; max-height: 0; opacity: var(--a6-hamburger-closed-opacity); overflow: hidden; pointer-events: none; transform: var(--a6-hamburger-closed-transform); transition: max-height var(--a6-hamburger-duration, 240ms) ease, opacity var(--a6-hamburger-duration, 240ms) ease, transform var(--a6-hamburger-duration, 240ms) ease; } body.a6-animate-hamburger .main-navigation.is-open { padding-top: 0.4rem; opacity: var(--a6-hamburger-open-opacity); pointer-events: auto; transform: var(--a6-hamburger-open-transform); } body.a6-animate-hamburger.a6-hamburger-anim-slide .main-navigation { --a6-hamburger-closed-opacity: 1; } body.a6-animate-hamburger.a6-hamburger-anim-fade .main-navigation { --a6-hamburger-closed-transform: none; --a6-hamburger-open-transform: none; } .main-navigation .menu { flex-direction: column; align-items: stretch; gap: 0.15rem; } .main-navigation .menu > .menu-item.menu-item-logout-top { margin-left: 0; } .main-navigation .menu > .menu-item > a { width: 100%; border-radius: 10px; padding: 0.7rem 0.75rem; } .main-navigation .menu > .menu-item.menu-item-account-icon > a { width: 100%; height: auto; padding: 0.7rem 0.75rem; justify-content: flex-start; gap: 0.5rem; align-self: auto; } .main-navigation .menu > .menu-item.menu-item-account-icon > a .menu-item-account-label { display: inline; } .main-navigation .menu-item-has-children { position: relative; } .main-navigation .menu-item-has-children > a { padding-right: 2.25rem; } .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0.55rem; right: 0.45rem; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; color: #111827; cursor: pointer; outline: 0; transform: none; z-index: 2; } .submenu-toggle::before { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transform-origin: 50% 50%; transition: transform 0.2s ease; } .submenu-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); } .main-navigation .sub-menu { position: static; min-width: 0; margin-top: 0.35rem; padding: 0 0 0 0.6rem; border: 0; border-left: 2px solid #e7ecf3; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: block; overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .main-navigation .menu-item-has-children.submenu-open > .sub-menu { max-height: 600px; } body.a6-no-hamburger .site-header-inner { flex-wrap: nowrap; } body.a6-no-hamburger .main-navigation { display: block; flex: 0 1 auto; margin-left: auto; padding-top: 0; } body.a6-no-hamburger .main-navigation .menu { flex-direction: row; align-items: center; } body.a6-no-hamburger .main-navigation .menu > .menu-item > a { width: auto; padding: 0.5rem 0.85rem; } }