/* =========================================================
KAO Header Search - Floating Desktop Field
Prevent navigation from shifting/wrapping
========================================================= */
@media (min-width: 992px) {
#navbar-main #block-kao-theme-search-form-wide {
position: relative;
}
/*
* Keep the search input completely outside the navbar's
* normal flex layout.
*/
#navbar-main #block-kao-theme-search-form-wide .form-item-keys {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 280px !important;
margin: 0 !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-6px);
z-index: 1100;
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0.18s ease;
}
/* Show the floating field when Search is opened */
#navbar-main #block-kao-theme-search-form-wide.is-open .form-item-keys {
width: 280px !important;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
/* Floating search input appearance */
#navbar-main #block-kao-theme-search-form-wide .form-search {
width: 280px;
height: 42px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid #cddbd3;
border-radius: 7px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
}/* =========================================================
KAO Utility Bar - Restore Simple Motto Style
========================================================= */
.kao-utility-motto::before {
display: none;
}
@media (min-width: 768px) {
.kao-utility-motto {
display: block;
color: rgba(255, 255, 255, 0.88);
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.02em;
}
}/* =========================================================
Public Interest Reporting - Confirmation Message
========================================================= */
.page-node-330 #block-kao-theme-webform
.webform-confirmation {
max-width: 900px;
margin: 10px auto 40px;
}
/* Confirmation message card */
.page-node-330 #block-kao-theme-webform
.webform-confirmation__message {
padding: 28px 30px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 5px solid #146B4A;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
color: #34443d;
line-height: 1.7;
}
/* Heading inside confirmation message */
.page-node-330 #block-kao-theme-webform
.webform-confirmation__message h1,
.page-node-330 #block-kao-theme-webform
.webform-confirmation__message h2 {
margin: 0 0 18px;
color: #0B4F3A;
font-size: 1.5rem;
font-weight: 600;
}
/* Confirmation paragraphs */
.page-node-330 #block-kao-theme-webform
.webform-confirmation__message p {
margin: 0 0 12px;
}
.page-node-330 #block-kao-theme-webform
.webform-confirmation__message p:last-child {
margin-bottom: 0;
}
/* Back to form */
.page-node-330 #block-kao-theme-webform
.webform-confirmation__back {
margin-top: 20px;
}
.page-node-330 #block-kao-theme-webform
.webform-confirmation__back a {
display: inline-block;
padding: 10px 20px;
background: #146B4A;
border: 1px solid #146B4A;
border-radius: 6px;
color: #ffffff;
font-weight: 600;
text-decoration: none;
}
.page-node-330 #block-kao-theme-webform
.webform-confirmation__back a:hover,
.page-node-330 #block-kao-theme-webform
.webform-confirmation__back a:focus {
background: #1F8A61;
border-color: #1F8A61;
color: #ffffff;
}
/**
* @file
* Subtheme specific CSS.
*/
/* KAO content images: keep images responsive and proportional. */
.node__content img {
max-width: 100%;
height: auto;
}
/* KAO navigation: align separate dropdown toggle with parent menu link. */
.navbar-nav > .nav-item.dropdown {
display: flex;
align-items: center;
position: relative;
}
.kao-dropdown-toggle {
background: transparent;
border: 0;
padding: 0.5rem 0.35rem;
margin-left: -0.25rem;
line-height: 1;
color: inherit;
}
/* KAO header logo sizing. */
.site-logo img,
.navbar-brand img {
max-height: 70px;
width: auto;
height: auto;
}
/* KAO footer column layout. */
.site-footer__top {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
align-items: flex-start;
}
.site-footer__top > .region {
min-width: 0;
flex: 1 1 200px;
}
/* Give the office/contact information more room. */
.site-footer__top > .region-footer-first {
flex: 2 1 360px;
}
/* KAO footer menu alignment. */
.region-footer-second ul.menu,
.region-footer-second ul.nav {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.region-footer-second li {
display: block;
margin: 0 0 0.4rem 0;
padding: 0;
}
.region-footer-second a {
display: inline-block;
padding: 0.15rem 0;
}
/* Stack footer sections cleanly on smaller screens. */
@media (max-width: 767px) {
.site-footer__top {
display: block;
}
.site-footer__top > .region {
margin-bottom: 2rem;
}
}
/* Align KAO footer blocks and headings consistently. */
.site-footer__top .block {
margin-top: 0;
padding-top: 0;
}
.site-footer__top .block h2,
.site-footer__top .block-title {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
}
/* Facebook icon for KAO footer social link. */
.region-footer-third a[href*="facebook.com"]::before {
content: "f";
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35rem;
height: 1.35rem;
margin-right: 0.45rem;
border-radius: 50%;
background: #1877F2;
color: #fff;
font-family: Arial, sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1;
vertical-align: middle;
}
/* KAO Quick Links footer icons. */
.region-footer-second .menu a::before,
.region-footer-second .nav a::before {
content: "";
display: inline-block;
width: 1.1rem;
height: 1.1rem;
margin-right: 0.5rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
vertical-align: -0.15rem;
opacity: 0.9;
}
/* About Us - information icon */
.region-footer-second a[href="/about-us"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%226.5%22/%3E%3Cpath d=%22M8 7v4%22/%3E%3Cpath d=%22M8 4.5h.01%22/%3E%3C/svg%3E");
}
/* Services - checklist icon */
.region-footer-second a[href="/services"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%222%22 y=%222%22 width=%2212%22 height=%2212%22 rx=%221%22/%3E%3Cpath d=%22m4.5 5.5 1 1 2-2%22/%3E%3Cpath d=%22M9 5.5h2.5%22/%3E%3Cpath d=%22m4.5 10 1 1 2-2%22/%3E%3Cpath d=%22M9 10h2.5%22/%3E%3C/svg%3E");
}
/* Audit Reports - document icon */
.region-footer-second a[href="/audit-reports"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 1.5h5l3 3V14H4z%22/%3E%3Cpath d=%22M9 1.5V5h3%22/%3E%3Cpath d=%22M6 8h4%22/%3E%3Cpath d=%22M6 10.5h4%22/%3E%3C/svg%3E");
}
/* Legal Documents - institution icon */
.region-footer-second a[href="/legal-documents"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 6h12%22/%3E%3Cpath d=%22M3 6 8 2l5 4%22/%3E%3Cpath d=%22M4 7v5%22/%3E%3Cpath d=%22M8 7v5%22/%3E%3Cpath d=%22M12 7v5%22/%3E%3Cpath d=%22M2 13h12%22/%3E%3C/svg%3E");
}
/* Contact Us - envelope icon */
.region-footer-second a[href="/contact-us"]::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%221.5%22 y=%223%22 width=%2213%22 height=%2210%22 rx=%221%22/%3E%3Cpath d=%22m2 4 6 5 6-5%22/%3E%3C/svg%3E");
}
/* KAO homepage hero banner */
.path-frontpage .featured-top__inner.container {
width: 94vw;
max-width: 1450px;
padding-left: 0;
padding-right: 0;
}
/* Remove Bootstrap row gutters around the hero */
.path-frontpage .region-featured-top {
margin-top: 1rem;
margin-left: 0;
margin-right: 0;
}
.path-frontpage .region-featured-top > * {
padding-left: 0;
padding-right: 0;
}
/* Hero image fills the widened area */
.path-frontpage #block-kao-theme-kaohomepagehero img {
display: block;
width: 100%;
max-width: none;
height: auto;
margin: 0 auto;
}
/* KAO Homepage - Who We Are block */
#block-kao-theme-kaohomepagewhoweare {
max-width: 1100px;
margin: 3rem auto;
padding: 2rem;
background: #ffffff;
border-radius: 0.75rem;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
#block-kao-theme-kaohomepagewhoweare p {
max-width: 850px;
}
/* KAO Homepage - Audit Services */
#block-kao-theme-kaohomepageauditservices {
max-width: 1100px;
margin: 3rem auto;
}
#block-kao-theme-kaohomepageauditservices .kao-services-home {
padding: 2rem;
background: #f8f9f8;
border-radius: 0.75rem;
}
#block-kao-theme-kaohomepageauditservices .kao-services-home h2 {
margin-bottom: 0.75rem;
color: #0B4F3A;
}
#block-kao-theme-kaohomepageauditservices .kao-services-intro {
max-width: 850px;
margin-bottom: 2rem;
}
#block-kao-theme-kaohomepageauditservices .kao-service-card {
height: 100%;
padding: 1.5rem;
background: #ffffff;
border: 1px solid #e1e6e3;
border-radius: 0.75rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
#block-kao-theme-kaohomepageauditservices .kao-service-card h3 {
color: #146B4A;
font-size: 1.25rem;
}
#block-kao-theme-kaohomepageauditservices .kao-service-card a {
display: inline-block;
margin-top: 0.75rem;
padding: 0.55rem 1rem;
background: #146B4A;
color: #ffffff;
text-decoration: none;
border-radius: 0.35rem;
font-weight: 600;
}
#block-kao-theme-kaohomepageauditservices .kao-service-card a:hover {
background: #0B4F3A;
color: #ffffff;
}
/* Latest Audit Reports - Homepage */
.latest-audit-reports .view-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.latest-audit-reports .report-card {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 10px;
padding: 20px;
height: 100%;
}
.latest-audit-reports .views-field-title {
font-size: 1.15rem;
font-weight: 700;
line-height: 1.4;
margin-bottom: 12px;
}
.latest-audit-reports .views-field-title a {
color: #0B4F3A;
text-decoration: none;
}
/* Report title link */
.latest-audit-reports .views-field-title a {
color: #0B4F3A;
text-decoration: none !important;
}
.latest-audit-reports .views-field-title a:hover {
color: #073d2d;
text-decoration: underline !important;
}
/* Give the fields inside each card some breathing room */
.latest-audit-reports .report-card .views-field {
margin-bottom: 8px;
}
/* Keep the last field from adding unnecessary space */
.latest-audit-reports .report-card .views-field:last-child {
margin-bottom: 0;
}
/* Category badge */
.latest-audit-reports .views-field-field-category {
margin-bottom: 14px;
}
.latest-audit-reports .views-field-field-category .field-content {
display: inline-block;
background: #eef6f2;
color: #0B4F3A;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
/* Audit year and published year */
.latest-audit-reports .views-field-field-report-year,
.latest-audit-reports .views-field-field-published-year {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 0.92rem;
margin-bottom: 5px;
color: #555555;
}
.latest-audit-reports .views-field-field-report-year .field-content,
.latest-audit-reports .views-field-field-published-year .field-content {
display: inline;
}
.latest-audit-reports .views-label {
font-weight: 600;
color: #333333;
}
/* Keep download area toward bottom of card */
.latest-audit-reports .report-card {
display: flex;
flex-direction: column;
}
.latest-audit-reports .views-field-field-report-file {
margin-top: auto;
padding-top: 18px;
}
/* Download button */
.latest-audit-reports .views-field-field-report-file a {
display: inline-block;
background: #0B4F3A;
color: #ffffff !important;
padding: 8px 14px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none !important;
}
.latest-audit-reports .views-field-field-report-file a:hover {
background: #073d2d;
color: #ffffff !important;
}
.latest-audit-reports .views-field-field-report-file a {
font-size: 0;
}
.latest-audit-reports .views-field-field-report-file a::after {
content: "Download Report";
font-size: 0.9rem;
}
/* Remove Drupal file-type icon from homepage report cards */
.latest-audit-reports .file {
background-image: none !important;
padding-left: 0 !important;
}
.latest-audit-reports .file::before {
display: none !important;
content: none !important;
}
/* View All Audit Reports button */
.latest-audit-reports .more-link {
text-align: center;
margin-top: 28px;
}
.latest-audit-reports .more-link a {
display: inline-block;
background: #0B4F3A;
color: #ffffff !important;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
text-decoration: none !important;
}
.latest-audit-reports .more-link a:hover {
background: #073d2d;
color: #ffffff !important;
}
/* Tablet */
@media (max-width: 991px) {
.latest-audit-reports .view-content {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile */
@media (max-width: 767px) {
.latest-audit-reports .view-content {
grid-template-columns: 1fr;
}
}
/* Latest Audit Reports - Section styling */
#block-kao-theme-views-block-audit-reports-block-1 {
background: #f5f9f7;
padding: 40px 28px;
margin-top: 40px;
margin-bottom: 48px;
border-radius: 12px;
}
/* Section heading */
#block-kao-theme-views-block-audit-reports-block-1 > h2 {
color: #0B4F3A;
text-align: center;
font-weight: 700;
margin-bottom: 28px;
}
/* Smaller screens */
@media (max-width: 767px) {
#block-kao-theme-views-block-audit-reports-block-1 {
padding: 30px 16px;
}
}
/* =========================================================
Homepage section widths
========================================================= */
#block-kao-theme-kaohomepagewhoweare,
#block-kao-theme-kaohomepageauditservices,
#block-kao-theme-views-block-audit-reports-block-1 {
width: 100%;
max-width: none;
}
/* Remove narrower limits from content inside these blocks */
#block-kao-theme-kaohomepagewhoweare .content,
#block-kao-theme-kaohomepagewhoweare .field__item,
#block-kao-theme-kaohomepageauditservices .content,
#block-kao-theme-kaohomepageauditservices .field__item,
#block-kao-theme-kaohomepageauditservices .kao-services-home {
width: 100%;
max-width: none;
}
/* =========================================================
Audit Services - 5 cards across on desktop
========================================================= */
@media (min-width: 1200px) {
#block-kao-theme-kaohomepageauditservices .kao-services-home .row > div {
flex: 0 0 20% !important;
width: 20% !important;
max-width: 20% !important;
}
}
/* Tablet - 2 cards per row */
@media (min-width: 768px) and (max-width: 1199px) {
#block-kao-theme-kaohomepageauditservices .kao-services-home .row > div {
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
}
}
/* Mobile - 1 card per row */
@media (max-width: 767px) {
#block-kao-theme-kaohomepageauditservices .kao-services-home .row > div {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* =========================================================
Homepage content width fixes
========================================================= */
/* Allow Who We Are text to use the full block width */
#block-kao-theme-kaohomepagewhoweare .content,
#block-kao-theme-kaohomepagewhoweare .field__item,
#block-kao-theme-kaohomepagewhoweare p {
width: 100%;
max-width: none;
}
/* Allow Audit Services heading/introduction to use full width */
#block-kao-theme-kaohomepageauditservices .kao-services-home,
#block-kao-theme-kaohomepageauditservices .kao-services-intro,
#block-kao-theme-kaohomepageauditservices .field__item {
width: 100%;
max-width: none;
}
/* =========================================================
Audit Services - one wide card per row
========================================================= */
#block-kao-theme-kaohomepageauditservices .kao-services-home .row > div {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
/* Make every service card equal and flexible */
#block-kao-theme-kaohomepageauditservices .kao-service-card {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
/* Allow card text to use available width */
#block-kao-theme-kaohomepageauditservices .kao-service-card p {
width: 100%;
max-width: none;
}
/* =========================================================
Center buttons at bottom of cards
========================================================= */
/* Audit Services Learn More button */
#block-kao-theme-kaohomepageauditservices .kao-service-card p:last-child {
margin-top: auto;
text-align: center;
}
/* Latest Audit Reports download button */
.latest-audit-reports .views-field-field-report-file {
margin-top: auto;
padding-top: 18px;
text-align: center;
}
/* =========================================================
Audit Services - restore 5 cards across
========================================================= */
@media (min-width: 1200px) {
#block-kao-theme-kaohomepageauditservices .kao-services-home .row > div {
flex: 0 0 20% !important;
width: 20% !important;
max-width: 20% !important;
}
}
/* Tablet - 2 cards per row */
@media (min-width: 768px) and (max-width: 1199px) {
#block-kao-theme-kaohomepageauditservices .kao-services-home .row > div {
flex: 0 0 50% !important;
width: 50% !important;
max-width: 50% !important;
}
}
/* Mobile - 1 card per row */
@media (max-width: 767px) {
#block-kao-theme-kaohomepageauditservices .kao-services-home .row > div {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* Keep service cards equal height */
#block-kao-theme-kaohomepageauditservices .kao-service-card {
display: flex;
flex-direction: column;
height: 100%;
}
/* Keep Learn More button at bottom and centered */
#block-kao-theme-kaohomepageauditservices .kao-service-card p:last-child {
margin-top: auto;
text-align: center;
}
/* =========================================================
Who We Are - Homepage
========================================================= */
#block-kao-theme-kaohomepagewhoweare {
background: #f5f9f7;
border-radius: 12px;
padding: 40px 32px;
margin-top: 40px;
margin-bottom: 40px;
}
/* Section heading */
#block-kao-theme-kaohomepagewhoweare > h2 {
text-align: center;
color: #0B4F3A;
font-weight: 700;
margin-bottom: 24px;
}
/* Main text area */
#block-kao-theme-kaohomepagewhoweare .field__item {
max-width: 1050px;
margin-left: auto;
margin-right: auto;
}
/* Paragraph spacing and readability */
#block-kao-theme-kaohomepagewhoweare p {
line-height: 1.7;
margin-bottom: 16px;
}
/* Center the final link/button */
#block-kao-theme-kaohomepagewhoweare p:last-child {
text-align: center;
margin-top: 26px;
margin-bottom: 0;
}
/* Learn More button */
#block-kao-theme-kaohomepagewhoweare p:last-child a {
display: inline-block;
background: #0B4F3A;
color: #ffffff !important;
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
text-decoration: none !important;
}
#block-kao-theme-kaohomepagewhoweare p:last-child a:hover {
background: #073d2d;
color: #ffffff !important;
}
/* Mobile */
@media (max-width: 767px) {
#block-kao-theme-kaohomepagewhoweare {
padding: 30px 18px;
}
}
/* =========================================================
Who We Are - refined homepage design
========================================================= */
#block-kao-theme-kaohomepagewhoweare {
background: #f5f9f7;
border-radius: 10px;
padding: 32px 36px;
margin-top: 32px;
margin-bottom: 32px;
}
/* Heading */
#block-kao-theme-kaohomepagewhoweare > h2 {
text-align: left;
color: #0B4F3A;
font-weight: 700;
margin-bottom: 16px;
}
/* Let the content use the full available width */
#block-kao-theme-kaohomepagewhoweare .field__item {
width: 100%;
max-width: none;
margin: 0;
}
/* Improve paragraph readability */
#block-kao-theme-kaohomepagewhoweare p {
width: 100%;
max-width: none;
font-size: 1rem;
line-height: 1.65;
margin-bottom: 14px;
}
/* Learn More area */
#block-kao-theme-kaohomepagewhoweare p:last-child {
text-align: left;
margin-top: 20px;
margin-bottom: 0;
}
/* Learn More button */
#block-kao-theme-kaohomepagewhoweare p:last-child a {
display: inline-block;
background: #0B4F3A;
color: #ffffff !important;
padding: 9px 18px;
border-radius: 5px;
font-weight: 600;
text-decoration: none !important;
}
#block-kao-theme-kaohomepagewhoweare p:last-child a:hover {
background: #146B4A;
}
@media (max-width: 767px) {
#block-kao-theme-kaohomepagewhoweare {
padding: 24px 20px;
}
}
/* =========================================================
Consistent Homepage Section Titles
========================================================= */
#block-kao-theme-kaohomepagewhoweare .field__item > h3,
#block-kao-theme-kaohomepageauditservices .kao-services-home > h2,
#block-kao-theme-views-block-audit-reports-block-1 > h2 {
font-family: inherit;
font-size: 2.0rem;
font-weight: 500;
line-height: 1.3;
color: #0B4F3A;
text-align: left;
margin-top: 0;
margin-bottom: 16px;
}
/* =========================================================
Consistent Homepage Buttons
========================================================= */
/* Who We Are */
#block-kao-theme-kaohomepagewhoweare p:last-child a,
/* Audit Services */
#block-kao-theme-kaohomepageauditservices .kao-service-card a,
/* Latest Audit Reports - Download */
.latest-audit-reports .views-field-field-report-file a,
/* Latest Audit Reports - View All */
.latest-audit-reports .more-link a {
background: #146B4A !important;
color: #ffffff !important;
border-color: #146B4A !important;
}
/* Hover */
#block-kao-theme-kaohomepagewhoweare p:last-child a:hover,
#block-kao-theme-kaohomepageauditservices .kao-service-card a:hover,
.latest-audit-reports .views-field-field-report-file a:hover,
.latest-audit-reports .more-link a:hover {
background: #0B4F3A !important;
color: #ffffff !important;
border-color: #0B4F3A !important;
}
/* Hide the page title on the homepage only */
.path-frontpage #block-kao-theme-page-title {
display: none;
}
/* =========================================================
KAO Global Header - Branding and Navigation
========================================================= */
/* Main masthead */
#navbar-main {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 18px clamp(24px, 4vw, 64px) 0;
/* Keep the KAO green, but make it less flat */
background-image:
radial-gradient(
circle at 85% 15%,
rgba(255, 255, 255, 0.09) 0,
rgba(255, 255, 255, 0) 30%
),
linear-gradient(
135deg,
#146B4A 0%,
#105E43 55%,
#0B4F3A 100%
);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
/* =========================================================
Logo + Kiribati Audit Office
========================================================= */
#navbar-main .navbar-brand {
display: flex;
align-items: center;
gap: 18px;
margin-right: auto;
padding: 0 0 18px;
color: #ffffff;
text-decoration: none;
font-size: clamp(1.35rem, 2vw, 1.8rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
}
#navbar-main .navbar-brand:hover,
#navbar-main .navbar-brand:focus {
color: #ffffff;
text-decoration: none;
}
/* Logo */
#navbar-main .navbar-brand img {
max-height: 82px;
width: auto;
height: auto;
flex-shrink: 0;
}
/* =========================================================
Navigation row
========================================================= */
#navbar-main #CollapsingNavbar {
flex-basis: 100%;
width: 100%;
justify-content: center !important;
border-top: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(5, 55, 40, 0.20);
}
#navbar-main #block-kao-theme-main-menu {
width: 100%;
}
#navbar-main .navbar-nav {
width: 100%;
justify-content: center;
align-items: center;
gap: clamp(0.5rem, 1.5vw, 1.4rem);
}
/* Main menu links */
#navbar-main .navbar-nav > .nav-item > .nav-link {
padding-top: 13px;
padding-bottom: 13px;
font-size: 0.96rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.94);
}
/* Slight hover highlight */
#navbar-main .navbar-nav > .nav-item > .nav-link:hover,
#navbar-main .navbar-nav > .nav-item > .nav-link:focus {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
border-radius: 5px;
}
/* Active main menu item */
#navbar-main .navbar-nav > .nav-item > .nav-link.active {
color: #ffffff;
font-weight: 600;
}
/* =========================================================
Mobile header preparation
========================================================= */
#navbar-main .navbar-toggler {
margin-bottom: 18px;
border-color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 991px) {
#navbar-main {
padding-left: 20px;
padding-right: 20px;
}
#navbar-main .navbar-brand {
gap: 12px;
font-size: 1.2rem;
}
#navbar-main .navbar-brand img {
max-height: 65px;
}
#navbar-main .navbar-nav {
align-items: stretch;
gap: 0;
padding: 8px 0 12px;
}
}
/* =========================================================
KAO Header - Masthead refinement
========================================================= */
#navbar-main {
position: relative;
overflow: visible;
background:
linear-gradient(
90deg,
rgba(255,255,255,0.025) 1px,
transparent 1px
),
linear-gradient(
0deg,
rgba(255,255,255,0.025) 1px,
transparent 1px
),
radial-gradient(
circle at 88% 35%,
rgba(255,255,255,0.10) 0,
rgba(255,255,255,0.03) 18%,
transparent 38%
),
linear-gradient(
120deg,
#146B4A 0%,
#126344 48%,
#0B4F3A 100%
);
background-size:
42px 42px,
42px 42px,
auto,
auto;
}
/* Slightly refine branding spacing */
#navbar-main .navbar-brand {
padding-top: 2px;
padding-bottom: 18px;
}
/* Make the office name feel more institutional */
#navbar-main .navbar-brand {
font-weight: 600;
letter-spacing: 0.015em;
}
/* =========================================================
KAO Top Utility Bar
========================================================= */
#navbar-top {
min-height: 38px;
padding: 0 clamp(24px, 4vw, 64px);
}
#navbar-top .region-secondary-menu {
width: 100%;
margin: 0;
}
.kao-utility-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 38px;
}
/* Motto on left */
.kao-utility-motto {
color: rgba(255, 255, 255, 0.88);
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.02em;
}
/* Utility links on right */
.kao-utility-links {
display: flex;
align-items: center;
margin-left: auto;
}
.kao-utility-links .region,
.kao-utility-links nav,
.kao-utility-links ul {
margin: 0;
padding: 0;
}
.kao-utility-links .nav-link {
padding: 7px 10px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.82rem;
}
.kao-utility-links .nav-link:hover,
.kao-utility-links .nav-link:focus {
color: #ffffff;
}
/* Mobile */
@media (max-width: 767px) {
.kao-utility-motto {
display: none;
}
.kao-utility-inner {
justify-content: flex-end;
}
}
/* =========================================================
KAO Main Navigation - Dropdown polish
========================================================= */
/* Cleaner spacing between parent link and dropdown arrow */
#navbar-main .navbar-nav > .nav-item.dropdown {
display: flex;
align-items: center;
}
/* Dropdown arrow button */
#navbar-main .kao-dropdown-toggle {
color: rgba(255, 255, 255, 0.85);
padding: 10px 7px;
margin-left: -6px;
border-radius: 4px;
}
#navbar-main .kao-dropdown-toggle:hover,
#navbar-main .kao-dropdown-toggle:focus {
color: #ffffff;
background: rgba(255, 255, 255, 0.10);
}
/* Dropdown panel */
#navbar-main .dropdown-menu {
border: 0;
border-radius: 8px;
padding: 8px;
min-width: 230px;
margin-top: 0;
background: #ffffff;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.14),
0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Dropdown items */
#navbar-main .dropdown-menu .dropdown-item {
padding: 0;
border-radius: 5px;
}
#navbar-main .dropdown-menu .dropdown-item > a {
display: block;
width: 100%;
padding: 10px 14px;
color: #26352f;
font-size: 0.92rem;
font-weight: 500;
text-decoration: none;
border-radius: 5px;
}
/* Dropdown item hover */
#navbar-main .dropdown-menu .dropdown-item > a:hover,
#navbar-main .dropdown-menu .dropdown-item > a:focus {
background: #eef6f2;
color: #0B4F3A;
}
/* Active submenu item */
#navbar-main .dropdown-menu .dropdown-item > a.active,
#navbar-main .dropdown-menu .dropdown-item > a.is-active {
background: #146B4A !important;
color: #ffffff !important;
}
/* Desktop: open submenu on mouse hover */
@media (min-width: 992px) {
#navbar-main .navbar-nav > .dropdown:hover > .dropdown-menu {
display: block;
}
}
/* =========================================================
KAO Desktop Dropdown - Position + Animation
========================================================= */
@media (min-width: 992px) {
/* Each parent menu becomes the positioning anchor */
#navbar-main .navbar-nav > .nav-item.dropdown {
position: relative !important;
}
/* Dropdown starts hidden directly below its parent */
#navbar-main .navbar-nav > .nav-item.dropdown > .dropdown-menu {
display: block !important;
position: absolute !important;
/* Directly underneath the parent menu */
inset: 100% auto auto 50% !important;
margin-top: 0 !important;
/* Center dropdown under parent */
transform: translate(-50%, 10px) !important;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform-origin: top center;
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0.18s ease;
}
/* Show on hover, keyboard focus, or Bootstrap click */
#navbar-main .navbar-nav > .nav-item.dropdown:hover > .dropdown-menu,
#navbar-main .navbar-nav > .nav-item.dropdown:focus-within > .dropdown-menu,
#navbar-main .navbar-nav > .nav-item.dropdown > .dropdown-menu.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0) !important;
}
/* Animate dropdown arrow */
#navbar-main .kao-dropdown-toggle::after {
transition: transform 0.18s ease;
}
#navbar-main .nav-item.dropdown:hover > .kao-dropdown-toggle::after,
#navbar-main .nav-item.dropdown:focus-within > .kao-dropdown-toggle::after {
transform: rotate(180deg);
}
}
/* =========================================================
KAO Main Navigation - Link Hover / Active Animation
========================================================= */
@media (min-width: 992px) {
#navbar-main .navbar-nav > .nav-item > .nav-link {
position: relative;
transition:
color 0.2s ease,
background-color 0.2s ease;
}
/* Animated line underneath main menu links */
#navbar-main .navbar-nav > .nav-item > .nav-link::after {
content: "";
position: absolute;
left: 50%;
bottom: 5px;
width: 0;
height: 2px;
background: #146B4A;
border-radius: 2px;
transform: translateX(-50%);
transition: width 0.22s ease;
}
/* Hover / keyboard focus */
#navbar-main .navbar-nav > .nav-item > .nav-link:hover::after,
#navbar-main .navbar-nav > .nav-item > .nav-link:focus::after {
width: calc(100% - 24px);
}
/* Current page */
#navbar-main .navbar-nav > .nav-item > .nav-link.active::after,
#navbar-main .navbar-nav > .nav-item > .nav-link.is-active::after {
width: calc(100% - 24px);
}
}
/* =========================================================
KAO Main Navigation - Menu Icons
========================================================= */
#navbar-main .navbar-nav > .nav-item > .nav-link::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 7px;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
opacity: 0.9;
}
/* Home */
#navbar-main .navbar-nav > .nav-item > a[href="/"]::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 2.5 11h2.7v9h5.3v-5.7h3V20h5.3v-9h2.7L12 3z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 2.5 11h2.7v9h5.3v-5.7h3V20h5.3v-9h2.7L12 3z'/%3E%3C/svg%3E");
}
/* About Us */
#navbar-main .navbar-nav > .nav-item > a[href="/about-us"]::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}
/* Services */
#navbar-main .navbar-nav > .nav-item > a[href="/services"]::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v4H4V5zm0 5h16v4H4v-4zm0 5h16v4H4v-4z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v4H4V5zm0 5h16v4H4v-4zm0 5h16v4H4v-4z'/%3E%3C/svg%3E");
}
/* Publications */
#navbar-main .navbar-nav > .nav-item > a[href="/downloads"]::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2zm8 2v5h5l-5-5zM9 13h8v2H9v-2zm0 4h8v2H9v-2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2zm8 2v5h5l-5-5zM9 13h8v2H9v-2zm0 4h8v2H9v-2z'/%3E%3C/svg%3E");
}
/* Contact Us */
#navbar-main .navbar-nav > .nav-item > a[href="/contact-us"]::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v14H3V5zm2 2v1l7 5 7-5V7l-7 5-7-5zm0 4v6h14v-6l-7 5-7-5z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18v14H3V5zm2 2v1l7 5 7-5V7l-7 5-7-5zm0 4v6h14v-6l-7 5-7-5z'/%3E%3C/svg%3E");
}
/* =========================================================
KAO Masthead - Kiribati-inspired woven pattern
========================================================= */
#navbar-main {
position: relative;
isolation: isolate;
background:
/* Soft light toward the right */
radial-gradient(
ellipse at 88% 35%,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.025) 24%,
transparent 42%
),
/* Woven diagonal pattern */
repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.025) 0,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px,
transparent 20px
),
repeating-linear-gradient(
-45deg,
rgba(255, 255, 255, 0.02) 0,
rgba(255, 255, 255, 0.02) 1px,
transparent 1px,
transparent 20px
),
/* KAO green base */
linear-gradient(
120deg,
#146B4A 0%,
#126344 48%,
#0B4F3A 100%
);
}
/* Very faint island/ocean-inspired curves on right */
#navbar-main::after {
content: "";
position: absolute;
z-index: -1;
top: -55px;
right: 20px;
width: 430px;
height: 230px;
background:
repeating-radial-gradient(
ellipse at center,
transparent 0,
transparent 20px,
rgba(255, 255, 255, 0.035) 21px,
rgba(255, 255, 255, 0.035) 22px,
transparent 23px,
transparent 39px
);
transform: rotate(-3deg);
pointer-events: none;
}
/* =========================================================
Homepage Hero - Subtle Entrance Animation
========================================================= */
.path-frontpage #block-kao-theme-kaohomepagehero {
overflow: hidden;
}
.path-frontpage #block-kao-theme-kaohomepagehero img {
animation: kaoHeroReveal 0.9s ease-out both;
}
@keyframes kaoHeroReveal {
from {
opacity: 0;
transform: scale(1.015);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Respect accessibility preferences */
@media (prefers-reduced-motion: reduce) {
.path-frontpage #block-kao-theme-kaohomepagehero img {
animation: none;
}
}
/* =========================================================
Homepage - Subtle Section & Card Animations
========================================================= */
/* Homepage sections reveal when they enter the viewport */
.path-frontpage #block-kao-theme-kaohomepagewhoweare,
.path-frontpage #block-kao-theme-kaohomepageauditservices,
.path-frontpage #block-kao-theme-views-block-audit-reports-block-1 {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
/* Revealed by global.js */
.path-frontpage #block-kao-theme-kaohomepagewhoweare.kao-visible,
.path-frontpage #block-kao-theme-kaohomepageauditservices.kao-visible,
.path-frontpage #block-kao-theme-views-block-audit-reports-block-1.kao-visible {
opacity: 1;
transform: translateY(0);
}
/* Audit Service cards */
#block-kao-theme-kaohomepageauditservices .kao-service-card {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
#block-kao-theme-kaohomepageauditservices .kao-service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 24px rgba(11, 79, 58, 0.12);
border-color: rgba(20, 107, 74, 0.28);
}
/* Latest Audit Report cards */
.latest-audit-reports .report-card {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.latest-audit-reports .report-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(11, 79, 58, 0.11);
border-color: rgba(20, 107, 74, 0.25);
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.path-frontpage #block-kao-theme-kaohomepagewhoweare,
.path-frontpage #block-kao-theme-kaohomepageauditservices,
.path-frontpage #block-kao-theme-views-block-audit-reports-block-1 {
animation: none;
}
#block-kao-theme-kaohomepageauditservices .kao-service-card,
.latest-audit-reports .report-card {
transition: none;
}
#block-kao-theme-kaohomepageauditservices .kao-service-card:hover,
.latest-audit-reports .report-card:hover {
transform: none;
}
}
/* =========================================================
Homepage Audit Services - Subtle Service Colours
========================================================= */
/* Financial Audit */
#block-kao-theme-kaohomepageauditservices .row > div:nth-child(1) .kao-service-card {
background: #f0f7f4;
border-top: 4px solid #146B4A;
}
/* Performance Audit */
#block-kao-theme-kaohomepageauditservices .row > div:nth-child(2) .kao-service-card {
background: #f1f7f8;
border-top: 4px solid #3f7f86;
}
/* Compliance Audit */
#block-kao-theme-kaohomepageauditservices .row > div:nth-child(3) .kao-service-card {
background: #faf7ef;
border-top: 4px solid #a58a45;
}
/* IT Audit */
#block-kao-theme-kaohomepageauditservices .row > div:nth-child(4) .kao-service-card {
background: #f2f5f8;
border-top: 4px solid #58758c;
}
/* Environmental Audit */
#block-kao-theme-kaohomepageauditservices .row > div:nth-child(5) .kao-service-card {
background: #f1f8ef;
border-top: 4px solid #56834c;
}
/* =========================================================
Latest Audit Reports - Category Colours
========================================================= */
/* State Owned Enterprises */
.latest-audit-reports .report-category-soe-audits {
background: #f0f7f4;
border-top: 4px solid #146B4A;
}
/* Central Government */
.latest-audit-reports .report-category-government-annual-account-audits {
background: #eef4f8;
border-top: 4px solid #4f7894;
}
/* Local Government */
.latest-audit-reports .report-category-local-government-audits {
background: #faf7ef;
border-top: 4px solid #a58a45;
}
/* Government Projects */
.latest-audit-reports .report-category-project-audits {
background: #f4f1f8;
border-top: 4px solid #75658d;
}
/* Performance Audits */
.latest-audit-reports .report-category-performance-audits {
background: #f1f7f8;
border-top: 4px solid #3f7f86;
}
/* Compliance Audits */
.latest-audit-reports .report-category-compliance-audits {
background: #fbf6ed;
border-top: 4px solid #a1783e;
}
/* IT Audits */
.latest-audit-reports .report-category-it-audits {
background: #f2f5f8;
border-top: 4px solid #58758c;
}
/* Special Audits */
.latest-audit-reports .report-category-special-audit {
background: #f8f2f2;
border-top: 4px solid #8b5d5d;
}
/* =========================================================
Homepage Audit Services - Service Icons
========================================================= */
/* Shared icon styling */
#block-kao-theme-kaohomepageauditservices .kao-service-card h3::before {
content: "";
display: block;
width: 38px;
height: 38px;
margin: 0 0 14px 0;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
/* Financial Audit - document/check */
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(1) .kao-service-card h3 {
color: #146B4A;
}
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(1) .kao-service-card h3::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2zm8 2v5h5l-5-5zm-5 9 2 2 4-4 1.4 1.4L11 17.8 7.6 14.4 9 13z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2zm8 2v5h5l-5-5zm-5 9 2 2 4-4 1.4 1.4L11 17.8 7.6 14.4 9 13z'/%3E%3C/svg%3E");
}
/* Performance Audit - chart */
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(2) .kao-service-card h3 {
color: #3f7f86;
}
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(2) .kao-service-card h3::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19h16v2H2V3h2v16zm3-3 3-4 3 2 5-7 1.6 1.2-6.1 8.5-3-2L8.6 17 7 16z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19h16v2H2V3h2v16zm3-3 3-4 3 2 5-7 1.6 1.2-6.1 8.5-3-2L8.6 17 7 16z'/%3E%3C/svg%3E");
}
/* Compliance Audit - shield/check */
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(3) .kao-service-card h3 {
color: #a58a45;
}
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(3) .kao-service-card h3::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 5v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5l8-3zm-1.2 13.4 5-5-1.4-1.4-3.6 3.6-1.8-1.8-1.4 1.4 3.2 3.2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 20 5v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5l8-3zm-1.2 13.4 5-5-1.4-1.4-3.6 3.6-1.8-1.8-1.4 1.4 3.2 3.2z'/%3E%3C/svg%3E");
}
/* IT Audit - computer */
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(4) .kao-service-card h3 {
color: #58758c;
}
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(4) .kao-service-card h3::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4h18v13H3V4zm2 2v9h14V6H5zm5 12h4v2h4v2H6v-2h4v-2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4h18v13H3V4zm2 2v9h14V6H5zm5 12h4v2h4v2H6v-2h4v-2z'/%3E%3C/svg%3E");
}
/* Environmental Audit - leaf */
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(5) .kao-service-card h3 {
color: #56834c;
}
#block-kao-theme-kaohomepageauditservices
.row > div:nth-child(5) .kao-service-card h3::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 3c-7 .2-12 2.4-14.7 6.1C3 12.2 3.6 16 6 18c2.4 2 6.2 1.7 8.8-.7C18.3 14.2 19.7 8.3 20 3zM6.8 18.5c2.3-3.6 5.2-6.5 9-9-2.8 3.2-5 6.5-6.5 10.1l-2.5-1.1z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 3c-7 .2-12 2.4-14.7 6.1C3 12.2 3.6 16 6 18c2.4 2 6.2 1.7 8.8-.7C18.3 14.2 19.7 8.3 20 3zM6.8 18.5c2.3-3.6 5.2-6.5 9-9-2.8 3.2-5 6.5-6.5 10.1l-2.5-1.1z'/%3E%3C/svg%3E");
}
/* =========================================================
KAO Header Test - Light Institutional Masthead
========================================================= */
/*
* Large branding / logo area.
* Light background reduces the amount of solid green
* while retaining a subtle Kiribati-inspired woven pattern.
*/
#navbar-main {
position: relative;
isolation: isolate;
background:
/* Soft motif toward the right */
radial-gradient(
ellipse at 86% 38%,
rgba(20, 107, 74, 0.06) 0%,
rgba(20, 107, 74, 0.020) 26%,
transparent 47%
),
/* Woven diagonal pattern */
repeating-linear-gradient(
45deg,
rgba(11, 79, 58, 0.035) 0,
rgba(11, 79, 58, 0.035) 1px,
transparent 1px,
transparent 22px
),
repeating-linear-gradient(
-45deg,
rgba(11, 79, 58, 0.015) 0,
rgba(11, 79, 58, 0.015) 1px,
transparent 1px,
transparent 22px
),
/* Light institutional base */
linear-gradient(
120deg,
#ffffff 0%,
#f7faf8 48%,
#edf5f1 100%
);
}
/* KAO name becomes dark green on the light masthead */
#navbar-main .navbar-brand {
color: #0B4F3A !important;
}
#navbar-main .navbar-brand:hover,
#navbar-main .navbar-brand:focus {
color: #146B4A !important;
}
/*
* Keep the navigation itself strongly branded.
* The large box-shadow extends the green strip across
* the full browser width without changing the menu markup.
*/
#navbar-main #CollapsingNavbar {
position: relative;
z-index: 2;
background: #146B4A;
box-shadow: 0 0 0 100vmax #146B4A;
clip-path: inset(0 -100vmax);
}
/* Keep main navigation links white */
#navbar-main #CollapsingNavbar > nav > ul > li > .nav-link,
#navbar-main #CollapsingNavbar .kao-dropdown-toggle {
color: #ffffff !important;
}
/*
* Replace the old white ocean rings with subtle green rings
* visible against the new light masthead.
*/
#navbar-main::after {
content: "";
position: absolute;
z-index: 0;
top: -45px;
right: 25px;
width: 460px;
height: 230px;
background:
repeating-radial-gradient(
ellipse at center,
transparent 0,
transparent 22px,
rgba(11, 79, 58, 0.045) 23px,
rgba(11, 79, 58, 0.045) 24px,
transparent 25px,
transparent 43px
);
transform: rotate(-3deg);
pointer-events: none;
}
/* Keep the logo/name above the decorative pattern */
#navbar-main .navbar-brand {
position: relative;
z-index: 2;
}
/* Fine accent line between masthead and navigation */
#navbar-main #CollapsingNavbar::before {
content: "";
position: absolute;
top: 0;
left: -100vw;
right: -100vw;
height: 2px;
background: rgba(181, 145, 55, 0.65);
pointer-events: none;
}
/* =========================================================
KAO Header - Compact Desktop Brand + Navigation Row
========================================================= */
@media (min-width: 992px) {
/* Logo and navigation on one row */
#navbar-main {
flex-wrap: nowrap;
padding: 12px clamp(24px, 4vw, 64px);
}
/* Compact branding */
#navbar-main .navbar-brand {
flex: 0 0 auto;
margin-right: 32px;
padding: 0;
}
#navbar-main .navbar-brand img {
max-height: 70px;
}
/* Navigation occupies remaining space on the right */
#navbar-main #CollapsingNavbar {
flex: 1 1 auto;
flex-basis: auto;
width: auto;
margin-left: auto;
justify-content: flex-end !important;
background: transparent;
box-shadow: none;
clip-path: none;
overflow: visible;
}
#navbar-main #block-kao-theme-main-menu {
width: auto;
margin-left: auto;
}
#navbar-main .navbar-nav {
width: auto;
justify-content: flex-end;
}
/* Dark navigation text on the light masthead */
#navbar-main #CollapsingNavbar > nav > ul > li > .nav-link,
#navbar-main #CollapsingNavbar .kao-dropdown-toggle {
color: #0B4F3A !important;
}
/* Slightly lighter green on hover */
#navbar-main #CollapsingNavbar > nav > ul > li > .nav-link:hover,
#navbar-main #CollapsingNavbar > nav > ul > li > .nav-link:focus,
#navbar-main #CollapsingNavbar .kao-dropdown-toggle:hover,
#navbar-main #CollapsingNavbar .kao-dropdown-toggle:focus {
color: #146B4A !important;
}
/* Remove the old divider/navigation bar */
#navbar-main #CollapsingNavbar::before {
display: none;
}
}
/* Keep header dropdowns above homepage hero/content */
#navbar-main {
z-index: 1000;
}
/* =========================================================
KAO Footer - Compact spacing
========================================================= */
.site-footer {
padding-top: 24px;
padding-bottom: 18px;
}
/* =========================================================
Audit Reports Page - Search & Filter Panel
========================================================= */
/* Keep these styles limited to /audit-reports */
.path-audit-reports .view-audit-reports .view-filters {
margin: 0 0 30px 0;
padding: 22px 24px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Layout the exposed filters cleanly */
.path-audit-reports .view-audit-reports .views-exposed-form > .d-flex {
display: grid !important;
grid-template-columns:
minmax(210px, 1.15fr)
minmax(260px, 1.7fr)
minmax(150px, 0.8fr)
minmax(150px, 0.8fr)
auto;
gap: 16px;
align-items: end;
}
/* Remove Bootstrap's extra bottom spacing */
.path-audit-reports .view-audit-reports .views-exposed-form .mb-3 {
margin-bottom: 0 !important;
}
/* Labels */
.path-audit-reports .view-audit-reports .views-exposed-form label {
display: block;
margin-bottom: 7px;
color: #0B4F3A;
font-size: 0.9rem;
font-weight: 600;
}
/* Inputs and select */
.path-audit-reports .view-audit-reports .form-control,
.path-audit-reports .view-audit-reports .form-select {
min-height: 44px;
border: 1px solid #cbdad1;
border-radius: 6px;
background-color: #ffffff;
font-size: 0.95rem;
}
/* Focus state */
.path-audit-reports .view-audit-reports .form-control:focus,
.path-audit-reports .view-audit-reports .form-select:focus {
border-color: #146B4A;
box-shadow:
0 0 0 0.2rem rgba(20, 107, 74, 0.12);
}
/* Apply button */
.path-audit-reports .view-audit-reports .form-actions {
display: flex;
align-items: flex-end;
}
.path-audit-reports .view-audit-reports .form-actions .btn-primary {
min-height: 44px;
padding: 9px 22px;
background: #146B4A !important;
border-color: #146B4A !important;
color: #ffffff !important;
font-weight: 600;
border-radius: 6px;
transition:
background-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.path-audit-reports .view-audit-reports .form-actions .btn-primary:hover,
.path-audit-reports .view-audit-reports .form-actions .btn-primary:focus {
background: #0B4F3A !important;
border-color: #0B4F3A !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(11, 79, 58, 0.18);
}
/* Tablet */
@media (max-width: 1100px) {
.path-audit-reports .view-audit-reports .views-exposed-form > .d-flex {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.path-audit-reports .view-audit-reports .form-actions {
align-items: stretch;
}
}
/* Mobile */
@media (max-width: 650px) {
.path-audit-reports .view-audit-reports .view-filters {
padding: 18px;
}
.path-audit-reports .view-audit-reports .views-exposed-form > .d-flex {
grid-template-columns: 1fr;
}
.path-audit-reports .view-audit-reports .form-actions .btn-primary {
width: 100%;
}
}
/* =========================================================
Audit Reports Page - Results Table
========================================================= */
/* Table container */
.path-audit-reports .view-audit-reports .table-responsive {
margin-top: 6px;
border: 1px solid #dbe7df;
border-radius: 10px;
overflow-x: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Main table */
.path-audit-reports .view-audit-reports .views-table {
margin-bottom: 0;
background: #ffffff;
vertical-align: middle;
}
/* Header */
.path-audit-reports .view-audit-reports .views-table thead th {
padding: 14px 16px;
background: #0B4F3A;
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.35;
border-bottom: 0;
vertical-align: middle;
}
/* Table cells */
.path-audit-reports .view-audit-reports .views-table tbody td {
padding: 15px 16px;
vertical-align: middle;
color: #34443d;
line-height: 1.5;
border-color: #e3ebe6;
}
/* Softer alternating rows */
.path-audit-reports .view-audit-reports .views-table.table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: #f8fbf9;
--bs-table-accent-bg: #f8fbf9;
}
/* Row hover */
.path-audit-reports .view-audit-reports .views-table.table-hover > tbody > tr:hover > * {
background-color: #eef6f2;
--bs-table-accent-bg: #eef6f2;
}
/* Report title */
.path-audit-reports .view-audit-reports .views-field-title a {
color: #0B4F3A;
font-weight: 600;
text-decoration: none;
}
.path-audit-reports .view-audit-reports .views-field-title a:hover,
.path-audit-reports .view-audit-reports .views-field-title a:focus {
color: #146B4A;
text-decoration: underline;
}
/* Category */
.path-audit-reports .view-audit-reports .views-field-field-category {
font-size: 0.92rem;
}
/* Years */
.path-audit-reports .view-audit-reports .views-field-field-report-year,
.path-audit-reports .view-audit-reports .views-field-field-published-year {
text-align: center;
white-space: nowrap;
}
/* Download column */
.path-audit-reports .view-audit-reports .views-field-field-report-file {
text-align: center;
white-space: nowrap;
}
/* Remove Drupal's file icon/padding */
.path-audit-reports .view-audit-reports .views-field-field-report-file .file {
background-image: none !important;
padding-left: 0 !important;
}
/* Turn PDF filename into a clean download button */
.path-audit-reports .view-audit-reports .views-field-field-report-file a {
display: inline-block;
padding: 8px 14px;
background: #146B4A;
color: #ffffff !important;
border-radius: 6px;
font-size: 0;
font-weight: 600;
text-decoration: none !important;
transition:
background-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.path-audit-reports .view-audit-reports .views-field-field-report-file a::after {
content: "Download PDF";
font-size: 0.88rem;
}
.path-audit-reports .view-audit-reports .views-field-field-report-file a:hover,
.path-audit-reports .view-audit-reports .views-field-field-report-file a:focus {
background: #0B4F3A;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(11, 79, 58, 0.18);
}
/* Mobile */
@media (max-width: 767px) {
.path-audit-reports .view-audit-reports .views-table {
min-width: 850px;
}
.path-audit-reports .view-audit-reports .views-table thead th,
.path-audit-reports .view-audit-reports .views-table tbody td {
padding: 12px 14px;
}
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.path-audit-reports .view-audit-reports .views-field-field-report-file a {
transition: none;
}
}
/* =========================================================
Audit Reports - Apply / Reset Button Spacing
========================================================= */
.path-audit-reports .view-audit-reports .form-actions {
gap: 10px;
flex-wrap: wrap;
}
/* Keep Reset button visually secondary */
.path-audit-reports .view-audit-reports .form-actions .btn-secondary,
.path-audit-reports .view-audit-reports .form-actions a {
min-height: 44px;
padding: 9px 22px;
background: #ffffff !important;
border: 1px solid #146B4A !important;
color: #146B4A !important;
border-radius: 6px;
font-weight: 600;
text-decoration: none !important;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.path-audit-reports .view-audit-reports .form-actions .btn-secondary:hover,
.path-audit-reports .view-audit-reports .form-actions a:hover {
background: #eef6f2 !important;
color: #0B4F3A !important;
transform: translateY(-1px);
}
/* =========================================================
Audit Reports - Sortable Header Link Colours
========================================================= */
/* Sortable column headings must remain white */
.path-audit-reports .view-audit-reports .views-table thead th a,
.path-audit-reports .view-audit-reports .views-table thead .views-field-title a {
color: #ffffff !important;
text-decoration: none !important;
font-weight: 600;
}
/* Hover / keyboard focus */
.path-audit-reports .view-audit-reports .views-table thead th a:hover,
.path-audit-reports .view-audit-reports .views-table thead th a:focus {
color: #ffffff !important;
text-decoration: underline !important;
}
/* =========================================================
Audit Reports - Force first sortable heading visible
========================================================= */
.path-audit-reports
.view-audit-reports
.views-table
thead
#view-title-table-column > a {
display: inline-block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
opacity: 1 !important;
visibility: visible !important;
text-indent: 0 !important;
text-decoration: none !important;
background: transparent !important;
}
.path-audit-reports
.view-audit-reports
.views-table
thead
#view-title-table-column > a:hover,
.path-audit-reports
.view-audit-reports
.views-table
thead
#view-title-table-column > a:focus {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: underline !important;
}
/* =========================================================
Audit Reports - Consistent Sortable Column Headers
========================================================= */
/* All sortable table headings */
.path-audit-reports
.view-audit-reports
.views-table
thead th > a {
display: inline-block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
text-decoration: none !important;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
}
/* Underline only when hovering or using keyboard */
.path-audit-reports
.view-audit-reports
.views-table
thead th > a:hover,
.path-audit-reports
.view-audit-reports
.views-table
thead th > a:focus {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: underline !important;
}
/* Keep the currently sorted column from becoming heavier */
.path-audit-reports
.view-audit-reports
.views-table
thead th.is-active > a {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-weight: 600 !important;
text-decoration: none !important;
}
/* Active column still underlines on hover */
.path-audit-reports
.view-audit-reports
.views-table
thead th.is-active > a:hover,
.path-audit-reports
.view-audit-reports
.views-table
thead th.is-active > a:focus {
text-decoration: underline !important;
}
/* =========================================================
Audit Reports - Title Decorative Audit Icon
========================================================= */
.path-audit-reports #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple document + magnifying glass icon */
.path-audit-reports #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10h42l18 18v43H20z'/%3E%3Cpath d='M62 10v19h18'/%3E%3Cpath d='M31 39h27M31 51h22M31 63h15'/%3E%3Ccircle cx='66' cy='68' r='15'/%3E%3Cpath d='M77 79l13 13'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.path-audit-reports #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.path-audit-reports #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Legal Documents - Title Decorative Legal Icon
========================================================= */
.path-legal-documents #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple legal document icon */
.path-legal-documents #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10h42l18 18v62H20z'/%3E%3Cpath d='M62 10v19h18'/%3E%3Cpath d='M32 43h36M32 55h36M32 67h25'/%3E%3Cpath d='M58 79h18'/%3E%3Cpath d='M67 71v16'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.path-legal-documents #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.path-legal-documents #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Legal Documents - Filter Panel
========================================================= */
.path-legal-documents .view-legal-documents .view-filters {
margin: 0 0 30px;
padding: 22px 24px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Two filters + Apply button */
.path-legal-documents
.view-legal-documents
.views-exposed-form > .d-flex {
display: grid !important;
grid-template-columns:
minmax(220px, 0.9fr)
minmax(320px, 1.6fr)
auto;
gap: 16px;
align-items: end;
}
/* Remove Bootstrap spacing */
.path-legal-documents
.view-legal-documents
.views-exposed-form .mb-3 {
margin-bottom: 0 !important;
}
/* Labels */
.path-legal-documents
.view-legal-documents
.views-exposed-form label {
display: block;
margin-bottom: 7px;
color: #0B4F3A;
font-size: 0.9rem;
font-weight: 600;
}
/* Select and search field */
.path-legal-documents .view-legal-documents .form-select,
.path-legal-documents .view-legal-documents .form-control {
min-height: 44px;
background: #ffffff;
border: 1px solid #cbdad1;
border-radius: 6px;
font-size: 0.95rem;
}
/* Focus */
.path-legal-documents .view-legal-documents .form-select:focus,
.path-legal-documents .view-legal-documents .form-control:focus {
border-color: #146B4A;
box-shadow: 0 0 0 0.2rem rgba(20,107,74,0.12);
}
/* Apply / Reset area */
.path-legal-documents .view-legal-documents .form-actions {
display: flex;
align-items: flex-end;
gap: 10px;
flex-wrap: wrap;
}
/* Apply button */
.path-legal-documents
.view-legal-documents
.form-actions .btn-primary {
min-height: 44px;
padding: 9px 22px;
background: #146B4A !important;
border-color: #146B4A !important;
color: #ffffff !important;
border-radius: 6px;
font-weight: 600;
}
.path-legal-documents
.view-legal-documents
.form-actions .btn-primary:hover {
background: #0B4F3A !important;
border-color: #0B4F3A !important;
}
/* Reset button when it appears */
.path-legal-documents
.view-legal-documents
.form-actions .btn-secondary,
.path-legal-documents
.view-legal-documents
.form-actions a {
min-height: 44px;
padding: 9px 22px;
background: #ffffff !important;
border: 1px solid #146B4A !important;
color: #146B4A !important;
border-radius: 6px;
font-weight: 600;
text-decoration: none !important;
}
.path-legal-documents
.view-legal-documents
.form-actions .btn-secondary:hover,
.path-legal-documents
.view-legal-documents
.form-actions a:hover {
background: #eef6f2 !important;
color: #0B4F3A !important;
}
/* Responsive */
@media (max-width: 850px) {
.path-legal-documents
.view-legal-documents
.views-exposed-form > .d-flex {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.path-legal-documents
.view-legal-documents
.views-exposed-form > .d-flex {
grid-template-columns: 1fr;
}
}
/* =========================================================
Legal Documents - Results Table
========================================================= */
.path-legal-documents .view-legal-documents .table-responsive {
margin-top: 6px;
border: 1px solid #dbe7df;
border-radius: 10px;
overflow-x: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Table */
.path-legal-documents .view-legal-documents .views-table {
margin-bottom: 0;
background: #ffffff;
vertical-align: middle;
}
/* Header */
.path-legal-documents .view-legal-documents .views-table thead th {
padding: 14px 16px;
background: #0B4F3A;
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.35;
border-bottom: 0;
vertical-align: middle;
}
/* Table cells */
.path-legal-documents .view-legal-documents .views-table tbody td {
padding: 15px 16px;
vertical-align: middle;
border-color: #e3ebe6;
}
/* Alternating rows */
.path-legal-documents .view-legal-documents .views-table tbody tr:nth-child(odd) td {
background: #f8fbf9;
}
/* Hover row */
.path-legal-documents .view-legal-documents .views-table tbody tr:hover td {
background: #eef6f2;
}
/* Document name */
.path-legal-documents
.view-legal-documents
.views-field-title a {
color: #0B4F3A;
font-weight: 600;
text-decoration: none;
}
.path-legal-documents
.view-legal-documents
.views-field-title a:hover,
.path-legal-documents
.view-legal-documents
.views-field-title a:focus {
color: #146B4A;
text-decoration: underline;
}
/* Document Type */
.path-legal-documents
.view-legal-documents
.views-field-field-document-type {
font-size: 0.92rem;
}
/* File column */
.path-legal-documents
.view-legal-documents
.views-field-field-file {
text-align: center;
}
/* Hide Drupal's normal file icon */
.path-legal-documents
.view-legal-documents
.views-field-field-file .file::before {
display: none;
}
/* Download button */
.path-legal-documents
.view-legal-documents
.views-field-field-file a {
display: inline-block;
min-width: 125px;
padding: 8px 14px;
background: #146B4A;
border: 1px solid #146B4A;
border-radius: 6px;
color: #ffffff !important;
font-size: 0;
font-weight: 600;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
/* Replace long PDF filename with clean button text */
.path-legal-documents
.view-legal-documents
.views-field-field-file a::after {
content: "Download PDF";
font-size: 0.88rem;
}
/* Download hover */
.path-legal-documents
.view-legal-documents
.views-field-field-file a:hover,
.path-legal-documents
.view-legal-documents
.views-field-field-file a:focus {
background: #0B4F3A;
border-color: #0B4F3A;
transform: translateY(-1px);
}
/* Mobile horizontal scrolling */
@media (max-width: 767px) {
.path-legal-documents
.view-legal-documents
.views-table {
min-width: 720px;
}
}
/* =========================================================
Legal Documents - Table Finishing Fixes
========================================================= */
/* Alternating rows - exact Audit Reports behaviour */
.path-legal-documents
.view-legal-documents
.views-table.table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: #f8fbf9;
--bs-table-accent-bg: #f8fbf9;
}
/* Row hover - exact Audit Reports behaviour */
.path-legal-documents
.view-legal-documents
.views-table.table-hover > tbody > tr:hover > * {
background-color: #eef6f2;
--bs-table-accent-bg: #eef6f2;
}
/* Completely remove Drupal PDF/file icon */
.path-legal-documents
.view-legal-documents
.views-field-field-file .file {
background-image: none !important;
padding-left: 0 !important;
}
.path-legal-documents
.view-legal-documents
.views-field-field-file .file::before,
.path-legal-documents
.view-legal-documents
.views-field-field-file .file::after {
display: none !important;
content: none !important;
}
/* Keep only our Download PDF button text */
.path-legal-documents
.view-legal-documents
.views-field-field-file a::after {
display: inline !important;
content: "Download PDF" !important;
font-size: 0.88rem !important;
}
/* =========================================================
Legal Documents - Sortable Header Link
Match Audit Reports
========================================================= */
.path-legal-documents
.view-legal-documents
.views-table
thead
#view-title-table-column > a {
display: inline-block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
opacity: 1 !important;
visibility: visible !important;
text-indent: 0 !important;
text-decoration: none !important;
background: transparent !important;
}
/* Underline only on hover/focus */
.path-legal-documents
.view-legal-documents
.views-table
thead
#view-title-table-column > a:hover,
.path-legal-documents
.view-legal-documents
.views-table
thead
#view-title-table-column > a:focus {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: underline !important;
}
/* Audit Reports - space between table and pager */
.path-audit-reports .view-audit-reports .pager {
margin-top: 24px;
}
/* Audit Reports & Legal Documents - space between table and pagination */
.path-audit-reports
.view-audit-reports
ul.js-pager__items.pagination,
.path-legal-documents
.view-legal-documents
ul.js-pager__items.pagination {
margin-top: 24px !important;
}
/* =========================================================
Audit Reports - Pager left / Result summary right
========================================================= */
.path-audit-reports
.view-audit-reports
nav[aria-label="Page navigation"] {
float: left;
}
.path-audit-reports
.view-audit-reports
.view-footer {
float: right;
margin-top: 24px;
margin-bottom: 24px;
color: #45564e;
font-size: 0.92rem;
}
/* Keep the View containing the floated elements */
.path-audit-reports
.view-audit-reports::after {
content: "";
display: block;
clear: both;
}
/* Mobile - stack them again */
@media (max-width: 600px) {
.path-audit-reports
.view-audit-reports
nav[aria-label="Page navigation"],
.path-audit-reports
.view-audit-reports
.view-footer {
float: none;
}
.path-audit-reports
.view-audit-reports
.view-footer {
margin-top: 10px;
}
}
/* =========================================================
Legal Documents - Pager left / Result summary right
========================================================= */
.path-legal-documents
.view-legal-documents
nav[aria-label="Page navigation"] {
float: left;
}
.path-legal-documents
.view-legal-documents
.view-footer {
float: right;
margin-top: 24px;
margin-bottom: 24px;
color: #45564e;
font-size: 0.92rem;
}
/* Keep the View containing the floated elements */
.path-legal-documents
.view-legal-documents::after {
content: "";
display: block;
clear: both;
}
/* Mobile */
@media (max-width: 600px) {
.path-legal-documents
.view-legal-documents
nav[aria-label="Page navigation"],
.path-legal-documents
.view-legal-documents
.view-footer {
float: none;
}
.path-legal-documents
.view-legal-documents
.view-footer {
margin-top: 10px;
}
}
/* Legal Documents - Document Type sortable heading */
.path-legal-documents
.view-legal-documents
.views-table
thead
#view-field-document-type-table-column > a {
display: inline-block !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
line-height: 1.35 !important;
opacity: 1 !important;
visibility: visible !important;
text-decoration: none !important;
background: transparent !important;
}
/* Underline only on hover/focus */
.path-legal-documents
.view-legal-documents
.views-table
thead
#view-field-document-type-table-column > a:hover,
.path-legal-documents
.view-legal-documents
.views-table
thead
#view-field-document-type-table-column > a:focus {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: underline !important;
}
/* =========================================================
Global Page Title - Space below main navigation
========================================================= */
body:not(.path-frontpage) #block-kao-theme-page-title {
margin-top: 24px;
}
/* =========================================================
Contact Us - Two Column Page Layout
========================================================= */
.page-node-6 .main-content > .section {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
/* Page anchor and title span full width */
.page-node-6 #main-content,
.page-node-6 #block-kao-theme-page-title {
grid-column: 1 / -1;
}
/* Contact form - left */
.page-node-6 #block-kao-theme-contactblock {
grid-column: 1;
}
/* Address and map - right */
.page-node-6 #block-kao-theme-content {
grid-column: 2;
}
/* Responsive */
@media (max-width: 900px) {
.page-node-6 .main-content > .section {
grid-template-columns: 1fr;
}
.page-node-6 #block-kao-theme-contactblock,
.page-node-6 #block-kao-theme-content {
grid-column: 1;
}
}
/* =========================================================
Contact Us - Contact Form Card
========================================================= */
.page-node-6 #block-kao-theme-contactblock {
padding: 26px 28px;
background: #ffffff;
border: 1px solid #dbe7df;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Form labels */
.page-node-6
#block-kao-theme-contactblock
label {
margin-bottom: 7px;
color: #0B4F3A;
font-weight: 600;
font-size: 0.95rem;
}
/* Text fields */
.page-node-6
#block-kao-theme-contactblock
.form-control {
border: 1px solid #cbdad1;
border-radius: 6px;
background: #ffffff;
}
/* Standard inputs */
.page-node-6
#block-kao-theme-contactblock
input.form-control {
min-height: 44px;
}
/* Message box */
.page-node-6
#block-kao-theme-contactblock
textarea.form-control {
min-height: 180px;
}
/* Focus */
.page-node-6
#block-kao-theme-contactblock
.form-control:focus {
border-color: #146B4A;
box-shadow:
0 0 0 0.2rem rgba(20,107,74,0.12);
}
/* Send message button */
.page-node-6
#block-kao-theme-contactblock
#edit-submit {
min-height: 44px;
padding: 9px 22px;
background: #146B4A;
border-color: #146B4A;
color: #ffffff;
border-radius: 6px;
font-weight: 600;
}
.page-node-6
#block-kao-theme-contactblock
#edit-submit:hover,
.page-node-6
#block-kao-theme-contactblock
#edit-submit:focus {
background: #0B4F3A;
border-color: #0B4F3A;
}
/* =========================================================
Contact Us - Office Location Card
========================================================= */
.page-node-6 #block-kao-theme-content {
padding: 26px 28px;
background: #ffffff;
border: 1px solid #dbe7df;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Office address */
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:first-child {
margin: 0 0 20px;
color: #34443d;
line-height: 1.7;
}
/* Office Address heading */
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:first-child strong {
color: #0B4F3A;
font-size: 1.15rem;
font-weight: 600;
}
/* Map */
.page-node-6
#block-kao-theme-content
iframe {
display: block;
width: 100% !important;
height: 420px;
border: 0;
border-radius: 8px;
}
/* Contact Us - Equal height columns on desktop */
@media (min-width: 901px) {
.page-node-6 #block-kao-theme-contactblock,
.page-node-6 #block-kao-theme-content {
height: 100%;
}
.page-node-6 #block-kao-theme-content {
display: flex;
flex-direction: column;
}
.page-node-6 #block-kao-theme-content .content,
.page-node-6 #block-kao-theme-content article,
.page-node-6 #block-kao-theme-content .node__content,
.page-node-6 #block-kao-theme-content .field--name-field-body {
height: 100%;
}
.page-node-6 #block-kao-theme-content .field--name-field-body {
display: flex;
flex-direction: column;
}
/* Let the map expand to fill the remaining height */
.page-node-6 #block-kao-theme-content .field--name-field-body > p:last-child {
flex: 1;
margin-bottom: 0;
}
.page-node-6 #block-kao-theme-content iframe {
height: 100%;
min-height: 420px;
}
}
/* Contact Us - Form Card Heading */
.page-node-6 #block-kao-theme-contactblock > h2 {
margin: 0 0 24px;
padding-bottom: 14px;
color: #0B4F3A;
font-size: 1.35rem;
font-weight: 600;
border-bottom: 2px solid #dbe7df;
}
/* Contact Us - Office Card Heading */
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:first-child strong {
display: block;
margin: 0 0 18px;
padding-bottom: 14px;
color: #0B4F3A;
font-size: 1.35rem;
font-weight: 600;
border-bottom: 2px solid #dbe7df;
}
/* Contact Us - Align Office heading with form heading */
.page-node-6 #block-kao-theme-content .node__content {
margin-top: 0;
}
/* Contact Us - Match heading vertical alignment */
.page-node-6 #block-kao-theme-contactblock > h2,
.page-node-6 #block-kao-theme-content
.field--name-field-body > p:first-child strong {
line-height: 1.2;
}
/* Contact Us - Hide unnecessary Preview button */
.page-node-6 #block-kao-theme-contactblock #edit-preview {
display: none;
}
/* Contact Us - Office Contact Details */
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:nth-of-type(2) {
margin: 0 0 18px;
color: #34443d;
line-height: 1.7;
}
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:nth-of-type(3) {
margin: 0 0 22px;
padding: 14px 16px;
background: #f7faf8;
border-left: 3px solid #146B4A;
border-radius: 4px;
color: #34443d;
line-height: 1.8;
}
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:nth-of-type(3) strong {
color: #0B4F3A;
font-weight: 600;
}
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:nth-of-type(3) a {
color: #146B4A;
font-weight: 500;
text-decoration: none;
}
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:nth-of-type(3) a:hover,
.page-node-6
#block-kao-theme-content
.field--name-field-body > p:nth-of-type(3) a:focus {
color: #0B4F3A;
text-decoration: underline;
}
/* =========================================================
Contact Us - CAPTCHA
========================================================= */
.page-node-6
#block-kao-theme-contactblock
.captcha {
margin: 22px 0;
padding: 18px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-radius: 8px;
}
/* CAPTCHA heading */
.page-node-6
#block-kao-theme-contactblock
.captcha__title {
padding: 0 8px;
color: #0B4F3A;
font-size: 1rem;
font-weight: 600;
}
/* CAPTCHA image */
.page-node-6
#block-kao-theme-contactblock
.captcha__image-wrapper img {
display: block;
margin-bottom: 8px;
border: 1px solid #dbe7df;
border-radius: 4px;
}
/* Refresh CAPTCHA link */
.page-node-6
#block-kao-theme-contactblock
.reload-captcha {
color: #146B4A;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
}
.page-node-6
#block-kao-theme-contactblock
.reload-captcha:hover,
.page-node-6
#block-kao-theme-contactblock
.reload-captcha:focus {
color: #0B4F3A;
text-decoration: underline;
}
/* CAPTCHA explanatory text */
.page-node-6
#block-kao-theme-contactblock
.captcha__description {
margin-top: 10px;
color: #66756e;
font-size: 0.86rem;
line-height: 1.5;
}
/* =========================================================
Contact Us - Title Decorative Contact Icon
========================================================= */
.page-node-6 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple message/envelope icon */
.page-node-6 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='22' width='76' height='56' rx='5'/%3E%3Cpath d='M15 28l35 27 35-27'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-6 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-6 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Contact Us - Get in Touch Intro Block
========================================================= */
.page-node-6 #block-kao-theme-getintouch {
grid-column: 1 / -1;
padding: 24px 28px;
margin-bottom: 2px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 4px solid #146B4A;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Heading */
.page-node-6 #block-kao-theme-getintouch > h2 {
margin: 0 0 12px;
color: #0B4F3A;
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
}
/* Intro text */
.page-node-6 #block-kao-theme-getintouch p {
margin: 0 0 8px;
color: #45564e;
line-height: 1.7;
}
.page-node-6 #block-kao-theme-getintouch p:last-child {
margin-bottom: 0;
font-weight: 500;
color: #34443d;
}
/* Contact Us - Space before footer */
.page-node-6 .main-content > .section {
padding-bottom: 40px;
}
/* Contact Us - Remove extra grid gap above page title */
.page-node-6 #main-content {
position: absolute;
}
/* Contact Us - Tighten title to intro spacing */
.page-node-6 #block-kao-theme-getintouch {
margin-top: -12px;
}
/* =========================================================
About Us - Title Decorative Institution Icon
========================================================= */
.page-node-3 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple institutional building icon */
.page-node-3 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 34L50 12l40 22'/%3E%3Cpath d='M16 37h68'/%3E%3Cpath d='M22 42v36M38 42v36M62 42v36M78 42v36'/%3E%3Cpath d='M14 80h72M9 88h82'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-3 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-3 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Who We Are - Title Decorative People Icon
========================================================= */
.page-node-311 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple people/team icon */
.page-node-311 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='30' r='12'/%3E%3Ccircle cx='23' cy='38' r='9'/%3E%3Ccircle cx='77' cy='38' r='9'/%3E%3Cpath d='M29 78c2-18 10-28 21-28s19 10 21 28'/%3E%3Cpath d='M8 76c2-14 7-22 15-22 5 0 9 3 12 8'/%3E%3Cpath d='M92 76c-2-14-7-22-15-22-5 0-9 3-12 8'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-311 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-311 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Leadership & Organisation - Title Decorative Structure Icon
========================================================= */
.page-node-312 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple organisation chart icon */
.page-node-312 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='38' y='10' width='24' height='18' rx='3'/%3E%3Cpath d='M50 28v16M20 44h60M20 44v14M50 44v14M80 44v14'/%3E%3Crect x='8' y='58' width='24' height='20' rx='3'/%3E%3Crect x='38' y='58' width='24' height='20' rx='3'/%3E%3Crect x='68' y='58' width='24' height='20' rx='3'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-312 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-312 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
History & Milestones - Title Decorative Timeline Icon
========================================================= */
.page-node-313 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple history / timeline icon */
.page-node-313 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 12a38 38 0 1 1-30 15'/%3E%3Cpath d='M10 15v22h22'/%3E%3Cpath d='M50 28v24l17 10'/%3E%3Ccircle cx='50' cy='52' r='3' fill='%23146B4A' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-313 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-313 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Services - Title Decorative Checklist Icon
========================================================= */
.page-node-4 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple audit checklist icon */
.page-node-4 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='10' width='64' height='80' rx='5'/%3E%3Cpath d='M32 34l6 6 10-12'/%3E%3Cpath d='M55 35h15'/%3E%3Cpath d='M32 57l6 6 10-12'/%3E%3Cpath d='M55 58h15'/%3E%3Cpath d='M32 79h38'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-4 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-4 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Financial Audit - Title Decorative Financial Icon
========================================================= */
.page-node-8 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple financial document icon */
.page-node-8 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10h42l18 18v62H20z'/%3E%3Cpath d='M62 10v19h18'/%3E%3Cpath d='M50 38v34'/%3E%3Cpath d='M61 45c-3-5-8-7-13-7-7 0-12 4-12 9 0 6 5 8 14 10 8 2 13 5 13 11 0 6-6 10-14 10-6 0-12-2-16-7'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-8 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-8 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Performance Audit - Title Decorative Results Icon
========================================================= */
.page-node-9 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple performance/results chart icon */
.page-node-9 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 86h74'/%3E%3Crect x='20' y='58' width='13' height='28' rx='2'/%3E%3Crect x='44' y='42' width='13' height='44' rx='2'/%3E%3Crect x='68' y='24' width='13' height='62' rx='2'/%3E%3Cpath d='M21 44l20-15 15 8 24-21'/%3E%3Cpath d='M70 16h10v10'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-9 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-9 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Compliance Audit - Title Decorative Compliance Icon
========================================================= */
.page-node-10 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple compliance shield + check icon */
.page-node-10 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 10l30 12v24c0 21-12 35-30 44-18-9-30-23-30-44V22z'/%3E%3Cpath d='M34 50l11 11 22-25'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-10 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-10 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
IT Audit - Title Decorative Technology Icon
========================================================= */
.page-node-11 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple computer + security icon */
.page-node-11 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='14' width='76' height='50' rx='4'/%3E%3Cpath d='M38 82h24M50 64v18'/%3E%3Cpath d='M68 36l10 4v8c0 8-4 14-10 18-6-4-10-10-10-18v-8z'/%3E%3Cpath d='M63 49l4 4 7-8'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-11 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-11 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Environmental Audit - Title Decorative Environment Icon
========================================================= */
.page-node-17 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple leaf + check icon */
.page-node-17 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M78 15C50 16 27 29 22 52c-4 18 8 31 24 31 25 0 38-27 32-68z'/%3E%3Cpath d='M25 75c15-20 29-31 49-45'/%3E%3Cpath d='M48 61l8 8 18-20'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-17 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-17 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Publications - Title Decorative Publications Icon
========================================================= */
.page-node-5 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple stacked publications/documents icon */
.page-node-5 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 12h40l14 14v48H28z'/%3E%3Cpath d='M68 12v16h14'/%3E%3Cpath d='M18 24v62h52'/%3E%3Cpath d='M38 42h32M38 54h32M38 66h22'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-5 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-5 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
About Section - Space Below Page Banners
========================================================= */
.page-node-3 .kao-about-intro > img,
.page-node-311 .kao-intro > img,
.page-node-312 .kao-lead-intro > img,
.page-node-313 .kao-history-intro > img {
display: block;
width: 100%;
height: auto;
margin-bottom: 28px;
}
/* =========================================================
Audit Reports - Library Intro Block
========================================================= */
.path-audit-reports #block-kao-theme-auditreportslibrary {
padding: 24px 28px;
margin-bottom: 28px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 4px solid #146B4A;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Heading */
.path-audit-reports #block-kao-theme-auditreportslibrary > h2 {
margin: 0 0 12px;
color: #0B4F3A;
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
}
/* Intro text */
.path-audit-reports #block-kao-theme-auditreportslibrary p {
margin: 0 0 8px;
color: #45564e;
line-height: 1.7;
}
.path-audit-reports #block-kao-theme-auditreportslibrary p:last-child {
margin-bottom: 0;
font-weight: 500;
color: #34443d;
}
/* =========================================================
Legal Documents - Library Intro Block
========================================================= */
.path-legal-documents #block-kao-theme-documentlibrary {
padding: 24px 28px;
margin-bottom: 28px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 4px solid #146B4A;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Heading */
.path-legal-documents #block-kao-theme-documentlibrary > h2 {
margin: 0 0 12px;
color: #0B4F3A;
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
}
/* Intro text */
.path-legal-documents #block-kao-theme-documentlibrary p {
margin: 0 0 8px;
color: #45564e;
line-height: 1.7;
}
.path-legal-documents #block-kao-theme-documentlibrary p:last-child {
margin-bottom: 0;
font-weight: 500;
color: #34443d;
}
/* =========================================================
Contact Us - Public Interest Reporting Callout
========================================================= */
.page-node-6 #block-kao-theme-publicinterestreporting {
grid-column: 1 / -1;
padding: 26px 28px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 5px solid #146B4A;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Heading */
.page-node-6 #block-kao-theme-publicinterestreporting > h2 {
margin: 0 0 12px;
color: #0B4F3A;
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
}
/* Text */
.page-node-6 #block-kao-theme-publicinterestreporting p {
margin: 0 0 10px;
color: #45564e;
line-height: 1.7;
}
/* Remove the blank paragraph before the button */
.page-node-6 #block-kao-theme-publicinterestreporting p:nth-of-type(3) {
display: none;
}
/* Button paragraph */
.page-node-6 #block-kao-theme-publicinterestreporting p:last-child {
margin: 18px 0 0;
}
/* Public Interest Reporting button */
.page-node-6 #block-kao-theme-publicinterestreporting p:last-child a {
display: inline-block;
padding: 11px 18px;
background: #146B4A;
border: 1px solid #146B4A;
border-radius: 6px;
color: #ffffff !important;
font-weight: 600;
text-decoration: none !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.page-node-6 #block-kao-theme-publicinterestreporting p:last-child a:hover,
.page-node-6 #block-kao-theme-publicinterestreporting p:last-child a:focus {
background: #0B4F3A;
border-color: #0B4F3A;
transform: translateY(-1px);
}
/* =========================================================
Contact Us - Public Interest Reporting Important Notice
========================================================= */
.page-node-6 #block-kao-theme-publicinterestreporting {
position: relative;
background: #fffaf0;
border-color: #ead9ad;
border-left: 5px solid #c28a2c;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
/* Heading with subtle notice icon */
.page-node-6 #block-kao-theme-publicinterestreporting > h2 {
display: flex;
align-items: center;
gap: 10px;
color: #0B4F3A;
}
/* Small shield / notice symbol */
.page-node-6 #block-kao-theme-publicinterestreporting > h2::before {
content: "";
flex: 0 0 25px;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C28A2C' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 9l31 12v25c0 22-12 36-31 45-19-9-31-23-31-45V21z'/%3E%3Cpath d='M50 30v25'/%3E%3Ccircle cx='50' cy='69' r='3' fill='%23C28A2C' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
/* Keep body text calm and readable */
.page-node-6 #block-kao-theme-publicinterestreporting p {
color: #4d5048;
}
/* Keep the action strongly KAO-branded */
.page-node-6
#block-kao-theme-publicinterestreporting
p:last-child a {
background: #146B4A;
border-color: #146B4A;
}
.page-node-6
#block-kao-theme-publicinterestreporting
p:last-child a:hover,
.page-node-6
#block-kao-theme-publicinterestreporting
p:last-child a:focus {
background: #0B4F3A;
border-color: #0B4F3A;
}
/* =========================================================
Public Interest Reporting - Title Decorative Report Icon
========================================================= */
.page-node-330 #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Simple shield + report icon */
.page-node-330 #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M36 33h28v31H36z'/%3E%3Cpath d='M42 42h16M42 50h16M42 58h10'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.page-node-330 #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.page-node-330 #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Public Interest Reporting - Before You Submit Notice
========================================================= */
.page-node-330 #block-kao-theme-beforeyousubmit {
position: relative;
margin-bottom: 30px;
padding: 26px 28px;
background: #fffaf0;
border: 1px solid #ead9ad;
border-left: 5px solid #c28a2c;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Heading */
.page-node-330 #block-kao-theme-beforeyousubmit > h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 16px;
color: #0B4F3A;
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
}
/* Guidance / notice icon */
.page-node-330 #block-kao-theme-beforeyousubmit > h2::before {
content: "";
flex: 0 0 25px;
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C28A2C' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='38'/%3E%3Cpath d='M50 29v27'/%3E%3Ccircle cx='50' cy='70' r='3' fill='%23C28A2C' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
/* Guidance text */
.page-node-330 #block-kao-theme-beforeyousubmit p {
margin: 0 0 12px;
color: #4d5048;
line-height: 1.7;
}
.page-node-330 #block-kao-theme-beforeyousubmit p:last-child {
margin-bottom: 0;
font-weight: 600;
color: #34443d;
}
/* =========================================================
Public Interest Reporting - Webform Section Cards
========================================================= */
.page-node-330 #block-kao-theme-webform
.webform-submission-public-interest-reporting-form-form
.webform-type-fieldset {
margin: 0 0 28px;
padding: 0;
background: #ffffff;
border: 1px solid #dbe7df;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
overflow: hidden;
}
/* Section heading */
.page-node-330 #block-kao-theme-webform
.webform-submission-public-interest-reporting-form-form
.webform-type-fieldset > legend {
display: block;
float: none;
width: 100%;
margin: 0;
padding: 15px 22px;
background: #f1f7f4;
border-bottom: 1px solid #dbe7df;
color: #0B4F3A;
font-size: 1.18rem;
font-weight: 600;
line-height: 1.35;
}
/* Space around fields inside each section */
.page-node-330 #block-kao-theme-webform
.webform-submission-public-interest-reporting-form-form
.webform-type-fieldset > .fieldset-wrapper {
padding: 24px 26px 10px;
}
/* =========================================================
Public Interest Reporting - Submission Acknowledgement
========================================================= */
.page-node-330 #block-kao-theme-webform
.form-item-i-understand-that-submitting-this-report-does-not-necessarily-me {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 4px 0 20px !important;
padding: 15px 18px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 4px solid #146B4A;
border-radius: 8px;
}
/* Keep checkbox aligned neatly with the text */
.page-node-330 #block-kao-theme-webform
.form-item-i-understand-that-submitting-this-report-does-not-necessarily-me
.form-check-input {
float: none;
flex: 0 0 auto;
margin: 4px 0 0 !important;
}
/* Acknowledgement text */
.page-node-330 #block-kao-theme-webform
.form-item-i-understand-that-submitting-this-report-does-not-necessarily-me
.form-check-label {
margin: 0;
color: #34443d;
font-weight: 500;
line-height: 1.55;
}
/* =========================================================
Public Interest Reporting - Submit Button
========================================================= */
.page-node-330 #block-kao-theme-webform
.webform-button--submit {
padding: 11px 24px;
background: #146B4A;
border: 1px solid #146B4A;
border-radius: 6px;
color: #ffffff;
font-weight: 600;
line-height: 1.4;
box-shadow: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.page-node-330 #block-kao-theme-webform
.webform-button--submit:hover,
.page-node-330 #block-kao-theme-webform
.webform-button--submit:focus {
background: #1F8A61;
border-color: #1F8A61;
color: #ffffff;
}
.page-node-330 #block-kao-theme-webform
.webform-button--submit:active {
transform: translateY(1px);
}
/* =========================================================
Public Interest Reporting - Introductory Block
========================================================= */
.page-node-330 #block-kao-theme-publicinterestreporting-2 {
margin-bottom: 22px;
padding: 22px 26px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 4px solid #146B4A;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Hide duplicate block heading */
.page-node-330 #block-kao-theme-publicinterestreporting-2 > h2 {
display: none;
}
.page-node-330 #block-kao-theme-publicinterestreporting-2 p {
margin: 0 0 10px;
color: #45564e;
line-height: 1.7;
}
.page-node-330 #block-kao-theme-publicinterestreporting-2 p:last-child {
margin-bottom: 0;
font-weight: 500;
color: #34443d;
}
/* =========================================================
Public Interest Reporting - Privacy Notice
========================================================= */
.page-node-330 #block-kao-theme-privacyandcontactdetails {
margin-bottom: 24px;
padding: 22px 26px;
background: #f3f8fb;
border: 1px solid #d4e3ea;
border-left: 4px solid #4f7f93;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Heading */
.page-node-330 #block-kao-theme-privacyandcontactdetails > h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
color: #0B4F3A;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
/* Privacy / information icon */
.page-node-330 #block-kao-theme-privacyandcontactdetails > h2::before {
content: "";
flex: 0 0 24px;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%234F7F93' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l31 12v22c0 21-12 36-31 46-19-10-31-25-31-46V20z'/%3E%3Ccircle cx='50' cy='39' r='3' fill='%234F7F93' stroke='none'/%3E%3Cpath d='M50 50v20'/%3E%3C/g%3E%3C/svg%3E");
}
/* Text */
.page-node-330 #block-kao-theme-privacyandcontactdetails p {
margin: 0 0 10px;
color: #45545a;
line-height: 1.7;
}
.page-node-330 #block-kao-theme-privacyandcontactdetails p:last-child {
margin-bottom: 0;
}
/* =========================================================
Public Interest Reporting - CAPTCHA
========================================================= */
.page-node-330 #block-kao-theme-webform
.captcha {
margin: 0 0 20px;
padding: 20px 22px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* CAPTCHA heading */
.page-node-330 #block-kao-theme-webform
.captcha__title {
float: none;
width: auto;
margin: 0 0 16px;
padding: 0;
color: #0B4F3A;
font-size: 1.18rem;
font-weight: 600;
line-height: 1.3;
}
/* Image and response field */
.page-node-330 #block-kao-theme-webform
.captcha__element {
display: grid;
grid-template-columns: auto minmax(220px, 360px);
gap: 16px;
align-items: start;
}
/* CAPTCHA image */
.page-node-330 #block-kao-theme-webform
.captcha__image-wrapper {
margin-bottom: 0 !important;
}
.page-node-330 #block-kao-theme-webform
.captcha__image-wrapper img {
display: block;
border: 1px solid #d4dfd8;
border-radius: 5px;
background: #ffffff;
}
/* Refresh CAPTCHA link */
.page-node-330 #block-kao-theme-webform
.reload-captcha-wrapper {
margin-top: 7px;
}
.page-node-330 #block-kao-theme-webform
.reload-captcha {
color: #146B4A;
font-size: 0.88rem;
font-weight: 500;
}
.page-node-330 #block-kao-theme-webform
.reload-captcha:hover,
.page-node-330 #block-kao-theme-webform
.reload-captcha:focus {
color: #1F8A61;
}
/* Response field */
.page-node-330 #block-kao-theme-webform
.form-item-captcha-response {
margin-bottom: 0 !important;
}
/* CAPTCHA explanatory text */
.page-node-330 #block-kao-theme-webform
.captcha__description {
margin-top: 14px;
color: #596b62;
font-size: 0.9rem;
line-height: 1.55;
}
/* Mobile */
@media (max-width: 600px) {
.page-node-330 #block-kao-theme-webform
.captcha {
padding: 18px;
}
.page-node-330 #block-kao-theme-webform
.captcha__element {
grid-template-columns: 1fr;
}
}
/* Public Interest Reporting - CAPTCHA refresh icon only */
.page-node-330 #block-kao-theme-webform
.reload-captcha {
display: inline-block;
overflow: hidden;
width: 28px;
height: 28px;
font-size: 0;
line-height: 0;
}
/* =========================================================
Contact Us - CAPTCHA Refresh Icon Only
========================================================= */
.page-node-6 #block-kao-theme-contactblock
.reload-captcha {
display: inline-block;
overflow: hidden;
width: 28px;
height: 28px;
font-size: 0;
line-height: 0;
}
/* =========================================================
Public Interest Reporting - Confirmation Page
========================================================= */
/* Keep confirmation content comfortably contained */
.path-webform .webform-confirmation {
max-width: 900px;
margin: 12px 0 42px;
}
/* Main confirmation card */
.path-webform .webform-confirmation__message {
position: relative;
padding: 30px 32px 30px 76px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 5px solid #146B4A;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
color: #34443d;
line-height: 1.7;
}
/* Success/check icon */
.path-webform .webform-confirmation__message::before {
content: "✓";
position: absolute;
top: 28px;
left: 28px;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: #146B4A;
border-radius: 50%;
color: #ffffff;
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
}
/* Confirmation paragraphs */
.path-webform .webform-confirmation__message p {
margin: 0 0 14px;
}
.path-webform .webform-confirmation__message p:first-child {
color: #0B4F3A;
font-size: 1.08rem;
font-weight: 600;
}
.path-webform .webform-confirmation__message p:last-child {
margin-bottom: 0;
}
/* Back to form area */
.path-webform .webform-confirmation__back {
margin-top: 20px;
}
/* Back to form button */
.path-webform .webform-confirmation__back a {
display: inline-block;
padding: 10px 20px;
background: #146B4A;
border: 1px solid #146B4A;
border-radius: 6px;
color: #ffffff;
font-weight: 600;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
.path-webform .webform-confirmation__back a:hover,
.path-webform .webform-confirmation__back a:focus {
background: #1F8A61;
border-color: #1F8A61;
color: #ffffff;
}
/* Mobile */
@media (max-width: 600px) {
.path-webform .webform-confirmation__message {
padding: 24px 22px 24px 64px;
}
.path-webform .webform-confirmation__message::before {
top: 23px;
left: 20px;
width: 30px;
height: 30px;
}
}
/* =========================================================
Drupal Admin Toolbar - Keep Flyout Menus Above KAO Header
========================================================= */
#toolbar-administration {
z-index: 2000 !important;
}
/* =========================================================
Drupal 11 Navigation - Keep Admin Flyouts Above KAO Header
========================================================= */
/*
* The public KAO header normally uses z-index: 1000.
* When Drupal's admin Navigation toolbar is present, lower
* only the website header so admin flyouts remain on top.
*/
body:has(.admin-toolbar) #navbar-main {
z-index: 400 !important;
}
/* =========================================================
Public Interest Reporting Confirmation - Title Icon
========================================================= */
.path-webform #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Match Public Interest Reporting shield/report icon */
.path-webform #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M36 33h28v31H36z'/%3E%3Cpath d='M42 42h16M42 50h16M42 58h10'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.path-webform #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.path-webform #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Public Interest Reporting Confirmation - Page Height
========================================================= */
/*
* Keep short Webform confirmation pages at full viewport height
* so the header, confirmation content and footer have natural
* vertical breathing room.
*/
.path-webform #page-wrapper,
.path-webform #page {
min-height: 100vh;
}
.path-webform #page {
display: flex;
flex-direction: column;
}
/* Let the main content area occupy the available space */
.path-webform #main-wrapper {
flex: 1 0 auto;
width: 100%;
}
/* Give the confirmation content more breathing room */
.path-webform #main {
padding-bottom: 56px;
}
/* Keep footer at the bottom on short confirmation pages */
.path-webform .site-footer {
margin-top: auto;
}
/* =========================================================
Public Interest Reporting Confirmation - Full Width
========================================================= */
.path-webform .webform-confirmation {
width: 100%;
max-width: none;
}
/* =========================================================
KAO Utility Bar - Motto + Login Polish
========================================================= */
/* Motto */
.kao-utility-motto {
display: flex;
align-items: center;
color: rgba(255, 255, 255, 0.94);
font-size: 0.83rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.025em;
}
/* Subtle Kiribati / institutional gold accent */
.kao-utility-motto::before {
content: "";
width: 3px;
height: 17px;
margin-right: 10px;
background: #c5a24a;
border-radius: 2px;
}
/* Login link */
.kao-utility-links .nav-link--user-login {
padding: 5px 12px;
color: rgba(255, 255, 255, 0.94) !important;
font-size: 0.81rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.38);
border-radius: 5px;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.kao-utility-links .nav-link--user-login:hover,
.kao-utility-links .nav-link--user-login:focus {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.70);
color: #ffffff !important;
}
/* =========================================================
KAO Utility Bar - Refined Login Link
========================================================= */
.kao-utility-links .nav-link--user-login {
padding: 6px 4px;
background: transparent !important;
border: 0 !important;
border-radius: 0;
color: rgba(255, 255, 255, 0.90) !important;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
}
/* Simple utility-link hover */
.kao-utility-links .nav-link--user-login:hover,
.kao-utility-links .nav-link--user-login:focus {
background: transparent !important;
border: 0 !important;
color: #ffffff !important;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================================================
KAO Utility Bar - Account Links
Log in / My account / Log out
========================================================= */
.kao-utility-links .nav-link {
padding: 6px 4px;
background: transparent !important;
border: 0 !important;
border-radius: 0;
color: rgba(255, 255, 255, 0.90) !important;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
}
/* Space between account links when logged in */
.kao-utility-links .nav-item + .nav-item {
margin-left: 14px;
}
/* Hover / keyboard focus */
.kao-utility-links .nav-link:hover,
.kao-utility-links .nav-link:focus {
background: transparent !important;
border: 0 !important;
color: #ffffff !important;
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================================================
Search Page - Hide duplicate search blocks
Keep only the main search form inside page content
========================================================= */
body[class*="path-search"] .highlighted .block-search-form-block,
body[class*="path-search"] #navbar-top .block-search-form-block {
display: none;
}
/* =========================================================
Site Search - Page Title + Search Form
========================================================= */
/* Match other internal page title treatments */
.path-search #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Search / magnifying-glass icon */
.path-search #block-kao-theme-page-title::after {
content: "";
position: absolute;
top: 50%;
right: 24px;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='43' cy='43' r='27'/%3E%3Cpath d='M63 63l24 24'/%3E%3C/g%3E%3C/svg%3E");
}
/* Main search form panel */
.path-search #search-form {
margin: 0 0 28px;
padding: 22px 26px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 4px solid #146B4A;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Input + button row */
.path-search #search-form #edit-basic {
display: flex;
align-items: flex-end;
gap: 12px;
margin-bottom: 8px !important;
}
/* Allow input to use available width */
.path-search #search-form .form-item-keys {
flex: 1 1 auto;
max-width: 620px;
margin-bottom: 0 !important;
}
/* Label */
.path-search #search-form label {
margin-bottom: 6px;
color: #34443d;
font-weight: 600;
}
/* Search input */
.path-search #search-form .form-search {
min-height: 42px;
border-color: #cddbd3;
border-radius: 6px;
}
.path-search #search-form .form-search:focus {
border-color: #146B4A;
box-shadow: 0 0 0 0.2rem rgba(20, 107, 74, 0.12);
}
/* Search button */
.path-search #search-form .form-submit {
min-height: 42px;
padding: 8px 22px;
background: #146B4A;
border-color: #146B4A;
border-radius: 6px;
font-weight: 600;
}
.path-search #search-form .form-submit:hover,
.path-search #search-form .form-submit:focus {
background: #1F8A61;
border-color: #1F8A61;
}
/* Search help link */
.path-search #search-form .search-help-link {
color: #146B4A;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
}
.path-search #search-form .search-help-link:hover,
.path-search #search-form .search-help-link:focus {
color: #1F8A61;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Mobile */
@media (max-width: 600px) {
.path-search #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.path-search #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
.path-search #search-form {
padding: 18px;
}
.path-search #search-form #edit-basic {
flex-direction: column;
align-items: stretch;
}
.path-search #search-form .form-item-keys {
max-width: none;
}
.path-search #search-form .form-submit {
width: 100%;
}
}
/* =========================================================
Site Search - Results List
========================================================= */
/* Results heading */
.path-search #block-kao-theme-content > .content > h2 {
margin: 0 0 14px;
color: #0B4F3A;
font-size: 1.45rem;
font-weight: 600;
line-height: 1.3;
}
/* Results container */
.path-search .node_search-results {
margin: 0 0 20px;
padding: 0;
border: 1px solid #dbe7df;
border-radius: 10px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
list-style: none;
}
/* Individual result */
.path-search .node_search-results .list-group-item {
padding: 18px 22px;
background: #ffffff;
border: 0;
border-bottom: 1px solid #e3ebe6;
}
.path-search .node_search-results .list-group-item:last-child {
border-bottom: 0;
}
/* Subtle hover */
.path-search .node_search-results .list-group-item:hover {
background: #f7faf8;
}
/* Result title */
.path-search .kao-search-result__title {
margin: 0;
font-size: 1.18rem;
font-weight: 600;
line-height: 1.4;
}
/* Result link */
.path-search .kao-search-result__title a {
color: #0B4F3A;
text-decoration: none;
}
.path-search .kao-search-result__title a:hover,
.path-search .kao-search-result__title a:focus {
color: #1F8A61;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Mobile */
@media (max-width: 600px) {
.path-search .node_search-results .list-group-item {
padding: 15px 17px;
}
.path-search .kao-search-result__title {
font-size: 1.05rem;
}
}
/* =========================================================
KAO Header - Compact Site Search
========================================================= */
@media (min-width: 992px) {
#navbar-main #block-kao-theme-search-form-wide {
position: relative;
flex: 0 0 auto;
margin-left: 14px;
}
#navbar-main #block-kao-theme-search-form-wide .content {
margin: 0;
padding: 0;
}
#navbar-main #block-kao-theme-search-form-wide .search-block-form {
display: flex;
align-items: center;
margin: 0;
}
/* Search input wrapper */
#navbar-main #block-kao-theme-search-form-wide .form-item-keys {
width: 0;
margin: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition:
width 0.25s ease,
opacity 0.2s ease,
margin 0.25s ease;
}
/* Search field */
#navbar-main #block-kao-theme-search-form-wide .form-search {
width: 100%;
height: 38px;
border: 1px solid #cddbd3;
border-radius: 6px;
font-size: 0.9rem;
}
/* Expanded state */
#navbar-main #block-kao-theme-search-form-wide.is-open .form-item-keys {
width: 220px;
margin-right: 8px !important;
opacity: 1;
pointer-events: auto;
}
/* Remove Drupal action spacing */
#navbar-main #block-kao-theme-search-form-wide .form-actions {
margin: 0 !important;
}
/* Search icon button */
#navbar-main #block-kao-theme-search-form-wide .form-submit {
position: relative;
width: 38px;
height: 38px;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
font-size: 0;
line-height: 0;
box-shadow: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
#navbar-main #block-kao-theme-search-form-wide .form-submit::before {
content: "";
position: absolute;
inset: 8px;
background: #0B4F3A;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 1 0 4.71 13.34L20.87 22 22 20.87l-5.66-5.66A7.5 7.5 0 0 0 10.5 3zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.5 3a7.5 7.5 0 1 0 4.71 13.34L20.87 22 22 20.87l-5.66-5.66A7.5 7.5 0 0 0 10.5 3zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
#navbar-main #block-kao-theme-search-form-wide .form-submit:hover,
#navbar-main #block-kao-theme-search-form-wide .form-submit:focus {
background: #f1f7f4;
border-color: #dbe7df;
}
#navbar-main #block-kao-theme-search-form-wide .form-submit:hover::before,
#navbar-main #block-kao-theme-search-form-wide .form-submit:focus::before {
background: #1F8A61;
}
}
/* Mobile - show normal usable search field */
@media (max-width: 991px) {
#navbar-main #block-kao-theme-search-form-wide {
width: 100%;
margin: 10px 0 14px;
}
#navbar-main #block-kao-theme-search-form-wide .search-block-form {
display: flex;
gap: 8px;
}
#navbar-main #block-kao-theme-search-form-wide .form-item-keys {
flex: 1 1 auto;
margin: 0 !important;
}
#navbar-main #block-kao-theme-search-form-wide .form-actions {
margin: 0 !important;
}
}
/* =========================================================
Report Content Type - Publication Detail Page
Applies to all Report nodes
========================================================= */
.node--type-report.node--view-mode-full {
margin-bottom: 42px;
}
/* Main report details panel */
.node--type-report.node--view-mode-full .node__content {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
padding: 26px;
background: #ffffff;
border: 1px solid #dbe7df;
border-top: 4px solid #146B4A;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}
/* ---------------------------------------------------------
Metadata fields
--------------------------------------------------------- */
.node--type-report .field--name-field-category,
.node--type-report .field--name-field-report-year,
.node--type-report .field--name-field-published-year {
margin: 0;
padding: 18px 20px;
background: #f7faf8;
border: 1px solid #e0eae4;
border-radius: 8px;
}
/* Arrange fields in logical order */
.node--type-report .field--name-field-category {
order: 1;
}
.node--type-report .field--name-field-report-year {
order: 2;
}
.node--type-report .field--name-field-published-year {
order: 3;
}
/* Metadata labels */
.node--type-report .field--name-field-category .field__label,
.node--type-report .field--name-field-report-year .field__label,
.node--type-report .field--name-field-published-year .field__label {
margin-bottom: 6px;
color: #5e6d66;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.3;
text-transform: uppercase;
}
/* Metadata values */
.node--type-report .field--name-field-category .field__item,
.node--type-report .field--name-field-report-year .field__item,
.node--type-report .field--name-field-published-year .field__item {
color: #183c30;
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
}
/* ---------------------------------------------------------
Report PDF
--------------------------------------------------------- */
.node--type-report .field--name-field-report-file {
order: 4;
grid-column: 1 / -1;
margin-top: 6px;
padding: 20px 22px;
background: #f2f8f5;
border: 1px solid #d7e7de;
border-radius: 8px;
}
/* File label */
.node--type-report .field--name-field-report-file .field__label {
margin-bottom: 10px;
color: #0B4F3A;
font-size: 0.9rem;
font-weight: 700;
}
/* Remove unnecessary default file presentation */
.node--type-report .field--name-field-report-file .file {
display: block;
}
/* PDF link */
.node--type-report .field--name-field-report-file a {
display: inline-flex;
align-items: center;
gap: 9px;
max-width: 100%;
padding: 10px 16px;
background: #146B4A;
border: 1px solid #146B4A;
border-radius: 6px;
color: #ffffff;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
overflow-wrap: anywhere;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
/* PDF document icon */
.node--type-report .field--name-field-report-file a::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l4 4v16H6V2zm7 1.5V7h3.5L13 3.5zM8 11h8v1.5H8V11zm0 3h8v1.5H8V14zm0 3h6v1.5H8V17z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l4 4v16H6V2zm7 1.5V7h3.5L13 3.5zM8 11h8v1.5H8V11zm0 3h8v1.5H8V14zm0 3h6v1.5H8V17z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.node--type-report .field--name-field-report-file a:hover,
.node--type-report .field--name-field-report-file a:focus {
background: #1F8A61;
border-color: #1F8A61;
color: #ffffff;
}
/* ---------------------------------------------------------
Responsive
--------------------------------------------------------- */
@media (max-width: 767px) {
.node--type-report.node--view-mode-full .node__content {
grid-template-columns: 1fr;
padding: 18px;
}
.node--type-report .field--name-field-report-file {
grid-column: 1;
}
.node--type-report .field--name-field-report-file a {
width: 100%;
}
}
/* =========================================================
Report Detail - Remove clearfix from CSS Grid
========================================================= */
.node--type-report.node--view-mode-full .node__content::before,
.node--type-report.node--view-mode-full .node__content::after {
content: none !important;
display: none !important;
}
/* =========================================================
Report Detail - Remove Drupal default file icon
========================================================= */
.node--type-report .field--name-field-report-file .file {
padding-left: 0 !important;
background-image: none !important;
}
.node--type-report .field--name-field-report-file .file::before {
display: none !important;
content: none !important;
}
/* =========================================================
Report Content Type - Page Title Icon
Applies to all Report nodes
========================================================= */
.node--type-report #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
/* Report document + search icon */
.node--type-report #block-kao-theme-page-title::after {
content: "";
position: absolute;
top: 50%;
right: 24px;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h38l16 16v35H22z'/%3E%3Cpath d='M60 12v16h16'/%3E%3Cpath d='M33 40h28M33 50h21'/%3E%3Ccircle cx='63' cy='67' r='14'/%3E%3Cpath d='M73 77l13 13'/%3E%3C/g%3E%3C/svg%3E");
}
/* Mobile */
@media (max-width: 600px) {
.node--type-report #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.node--type-report #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Document Content Type - Publication Detail Page
Applies to all Document nodes
========================================================= */
.node--type-document.node--view-mode-full {
margin-bottom: 42px;
}
/* Main document details panel */
.node--type-document.node--view-mode-full .node__content {
display: grid;
grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2fr);
gap: 16px;
padding: 26px;
background: #ffffff;
border: 1px solid #dbe7df;
border-top: 4px solid #146B4A;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}
/* Bootstrap/Drupal clearfix must not become grid items */
.node--type-document.node--view-mode-full .node__content::before,
.node--type-document.node--view-mode-full .node__content::after {
content: none !important;
display: none !important;
}
/* ---------------------------------------------------------
Document Type
--------------------------------------------------------- */
.node--type-document .field--name-field-document-type {
margin: 0;
padding: 18px 20px;
background: #f7faf8;
border: 1px solid #e0eae4;
border-radius: 8px;
}
.node--type-document .field--name-field-document-type .field__label {
margin-bottom: 6px;
color: #5e6d66;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.3;
text-transform: uppercase;
}
.node--type-document .field--name-field-document-type .field__item {
color: #183c30;
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
}
/* ---------------------------------------------------------
Document File
--------------------------------------------------------- */
.node--type-document .field--name-field-file {
margin: 0;
padding: 18px 22px;
background: #f2f8f5;
border: 1px solid #d7e7de;
border-radius: 8px;
}
.node--type-document .field--name-field-file .field__label {
margin-bottom: 10px;
color: #0B4F3A;
font-size: 0.9rem;
font-weight: 700;
}
/* File wrapper */
.node--type-document .field--name-field-file .file {
display: block;
}
/* PDF link */
.node--type-document .field--name-field-file a {
display: inline-flex;
align-items: center;
gap: 9px;
max-width: 100%;
padding: 10px 16px;
background: #146B4A;
border: 1px solid #146B4A;
border-radius: 6px;
color: #ffffff;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.4;
text-decoration: none;
overflow-wrap: anywhere;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
/* Document icon */
.node--type-document .field--name-field-file a::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
background: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l4 4v16H6V2zm7 1.5V7h3.5L13 3.5zM8 11h8v1.5H8V11zm0 3h8v1.5H8V14zm0 3h6v1.5H8V17z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l4 4v16H6V2zm7 1.5V7h3.5L13 3.5zM8 11h8v1.5H8V11zm0 3h8v1.5H8V14zm0 3h6v1.5H8V17z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.node--type-document .field--name-field-file a:hover,
.node--type-document .field--name-field-file a:focus {
background: #1F8A61;
border-color: #1F8A61;
color: #ffffff;
}
/* ---------------------------------------------------------
Responsive
--------------------------------------------------------- */
@media (max-width: 767px) {
.node--type-document.node--view-mode-full .node__content {
grid-template-columns: 1fr;
padding: 18px;
}
.node--type-document .field--name-field-file a {
width: 100%;
}
}
/* =========================================================
Document Detail - Remove Drupal default file icon
========================================================= */
.node--type-document .field--name-field-file .file {
padding-left: 0 !important;
background-image: none !important;
}
.node--type-document .field--name-field-file .file::before {
display: none !important;
content: none !important;
}
/* =========================================================
Document Content Type - Page Title Icon
Matches Legal Documents page
========================================================= */
.node--type-document #block-kao-theme-page-title {
position: relative;
min-height: 82px;
padding-right: 110px;
display: flex;
align-items: center;
}
.node--type-document #block-kao-theme-page-title::after {
content: "";
position: absolute;
right: 24px;
top: 50%;
width: 72px;
height: 72px;
transform: translateY(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.22;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10h42l18 18v62H20z'/%3E%3Cpath d='M62 10v19h18'/%3E%3Cpath d='M32 43h36M32 55h36M32 67h25'/%3E%3Cpath d='M58 79h18'/%3E%3Cpath d='M67 71v16'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 600px) {
.node--type-document #block-kao-theme-page-title {
min-height: 65px;
padding-right: 75px;
}
.node--type-document #block-kao-theme-page-title::after {
width: 52px;
height: 52px;
right: 12px;
}
}
/* =========================================================
Site Search - No Results State
========================================================= */
.path-search #block-kao-theme-content > .content > em {
display: block;
margin: 24px 0 48px;
padding: 22px 24px;
background: #f7faf8;
border: 1px solid #dbe7df;
border-left: 4px solid #146B4A;
border-radius: 8px;
color: #43564d;
font-size: 1rem;
font-style: normal;
line-height: 1.6;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* =========================================================
Site Search - No Results Simple Message
========================================================= */
.path-search #block-kao-theme-content > .content > em {
display: block;
margin: 22px 0 64px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: #43564d;
font-size: 1rem;
font-style: normal;
line-height: 1.6;
}
.path-search #block-kao-theme-content > .content > em {
margin-bottom: 32px;
}
/* =========================================================
Site Search - Pager left / Result summary right
Matches Audit Reports and Legal Documents
========================================================= */
.path-search
#block-kao-theme-content
nav[aria-label="Page navigation"] {
float: left;
}
.path-search
#block-kao-theme-content
.kao-search-summary {
float: right;
margin-top: 24px;
margin-bottom: 24px;
color: #45564e;
font-size: 0.92rem;
}
/* Keep the content block containing floated elements */
.path-search
#block-kao-theme-content > .content::after {
content: "";
display: block;
clear: both;
}
/* Mobile - stack pager and summary */
@media (max-width: 600px) {
.path-search
#block-kao-theme-content
nav[aria-label="Page navigation"],
.path-search
#block-kao-theme-content
.kao-search-summary {
float: none;
}
.path-search
#block-kao-theme-content
.kao-search-summary {
margin-top: 10px;
}
}
/* =========================================================
Homepage Quick Access
========================================================= */
.kao-quick-access {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 26px 0 34px;
}
.kao-quick-access__item {
min-width: 0;
}
.kao-quick-access__item > a {
position: relative;
display: flex;
align-items: center;
min-height: 104px;
height: 100%;
padding: 20px 18px;
background: #ffffff;
border: 1px solid #dce6e0;
border-top: 3px solid #146B4A;
border-radius: 8px;
box-shadow: 0 3px 12px rgba(11, 79, 58, 0.06);
color: #263a31;
text-decoration: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.kao-quick-access__item > a:hover,
.kao-quick-access__item > a:focus-visible {
transform: translateY(-3px);
border-color: #b9d2c5;
box-shadow: 0 8px 22px rgba(11, 79, 58, 0.12);
text-decoration: none;
}
.kao-quick-access__content {
display: flex;
flex-direction: column;
min-width: 0;
}
.kao-quick-access__content strong {
display: block;
margin-bottom: 5px;
color: #0B4F3A;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.kao-quick-access__content > span {
display: block;
color: #5b6c64;
font-size: 0.88rem;
line-height: 1.45;
}
@media (max-width: 991px) {
.kao-quick-access {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.kao-quick-access {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 20px;
margin-bottom: 28px;
}
.kao-quick-access__item > a {
min-height: 88px;
padding: 17px 16px;
}
}
/* Homepage Quick Access icons */
.kao-quick-access__icon {
flex: 0 0 48px;
width: 48px;
height: 48px;
margin-right: 15px;
background-color: #eef6f1;
background-repeat: no-repeat;
background-position: center;
background-size: 27px 27px;
border-radius: 50%;
}
/* Audit Reports */
.kao-quick-access__icon--reports {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h17l7 7v29H12z'/%3E%3Cpath d='M29 6v8h7'/%3E%3Cpath d='M18 32v-7M24 32V20M30 32v-4'/%3E%3C/g%3E%3C/svg%3E");
}
/* Legal Documents */
.kao-quick-access__icon--documents {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h17l7 7v29H12z'/%3E%3Cpath d='M29 6v8h7'/%3E%3Cpath d='M18 21h12M18 27h12M18 33h8'/%3E%3C/g%3E%3C/svg%3E");
}
/* Public Interest Reporting */
.kao-quick-access__icon--reporting {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5l15 6v10c0 10-6.3 17.3-15 22-8.7-4.7-15-12-15-22V11z'/%3E%3Cpath d='M18 24l4 4 8-9'/%3E%3C/g%3E%3C/svg%3E");
}
/* Contact */
.kao-quick-access__icon--contact {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='11' width='34' height='26' rx='2'/%3E%3Cpath d='M9 14l15 12 15-12'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 575px) {
.kao-quick-access__icon {
flex-basis: 44px;
width: 44px;
height: 44px;
margin-right: 13px;
background-size: 24px 24px;
}
}
/* =========================================================
Homepage Quick Access icons - generated with CSS
========================================================= */
.kao-quick-access__item > a::before {
content: "";
flex: 0 0 48px;
width: 48px;
height: 48px;
margin-right: 15px;
background-color: #eef6f1;
background-repeat: no-repeat;
background-position: center;
background-size: 27px 27px;
border-radius: 50%;
}
/* Audit Reports */
.kao-quick-access__item:nth-child(1) > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h17l7 7v29H12z'/%3E%3Cpath d='M29 6v8h7'/%3E%3Cpath d='M18 32v-7M24 32V20M30 32v-4'/%3E%3C/g%3E%3C/svg%3E");
}
/* Legal Documents */
.kao-quick-access__item:nth-child(2) > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6h17l7 7v29H12z'/%3E%3Cpath d='M29 6v8h7'/%3E%3Cpath d='M18 21h12M18 27h12M18 33h8'/%3E%3C/g%3E%3C/svg%3E");
}
/* Public Interest Reporting */
.kao-quick-access__item:nth-child(3) > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5l15 6v10c0 10-6.3 17.3-15 22-8.7-4.7-15-12-15-22V11z'/%3E%3Cpath d='M18 24l4 4 8-9'/%3E%3C/g%3E%3C/svg%3E");
}
/* Contact Us */
.kao-quick-access__item:nth-child(4) > a::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='11' width='34' height='26' rx='2'/%3E%3Cpath d='M9 14l15 12 15-12'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 575px) {
.kao-quick-access__item > a::before {
flex-basis: 44px;
width: 44px;
height: 44px;
margin-right: 13px;
background-size: 24px 24px;
}
}
/* =========================================================
Homepage Quick Access - Scroll Reveal
========================================================= */
.path-frontpage #block-kao-theme-homepagequickaccess {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
.path-frontpage #block-kao-theme-homepagequickaccess.kao-visible {
opacity: 1;
transform: translateY(0);
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
.path-frontpage #block-kao-theme-homepagequickaccess {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================
KAO Back to Top
========================================================= */
.kao-back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 800;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
background: #146B4A;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
box-shadow: 0 5px 16px rgba(11, 79, 58, 0.22);
color: #ffffff;
font-size: 1.35rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease,
background-color 0.2s ease;
}
.kao-back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.kao-back-to-top:hover {
background: #0B4F3A;
}
.kao-back-to-top:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
box-shadow:
0 0 0 2px #146B4A,
0 5px 16px rgba(11, 79, 58, 0.22);
}
@media (max-width: 575px) {
.kao-back-to-top {
right: 16px;
bottom: 16px;
width: 42px;
height: 42px;
font-size: 1.2rem;
}
}
@media (prefers-reduced-motion: reduce) {
.kao-back-to-top {
transition: none;
}
}
/* Back to Top - labelled pill */
.kao-back-to-top {
width: auto;
min-width: 118px;
height: 44px;
padding: 0 16px;
gap: 8px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
}
.kao-back-to-top > span:first-child {
font-size: 1.15rem;
line-height: 1;
}
.kao-back-to-top__label {
white-space: nowrap;
}
@media (max-width: 575px) {
.kao-back-to-top {
width: auto;
min-width: 108px;
height: 42px;
padding: 0 13px;
gap: 7px;
font-size: 0.84rem;
}
.kao-back-to-top > span:first-child {
font-size: 1.05rem;
}
}
/* =========================================================
KAO HOMEPAGE HERO CAROUSEL
========================================================= */
.path-frontpage .kao-hero-carousel {
position: relative;
/* Break out of Bootstrap/content container */
width: 100vw;
margin-left: calc(50% - 50vw);
height: 380px;
overflow: hidden;
background: #0B4F3A;
}
.path-frontpage .kao-hero-carousel__slides {
position: relative;
width: 100%;
height: 100%;
}
.path-frontpage .kao-hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.path-frontpage .kao-hero-slide--active {
opacity: 1;
visibility: visible;
}
.path-frontpage .kao-hero-slide__background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background:
linear-gradient(
90deg,
#0B4F3A 0%,
#0B4F3A 35%,
#146B4A 65%,
#1F8A61 100%
);
background-size: cover;
background-position: center;
}
/* Keep text aligned with normal Bootstrap page content */
.path-frontpage .kao-hero-slide > .container {
position: relative;
z-index: 2;
display: flex;
align-items: center;
height: 100%;
}
.path-frontpage .kao-hero-slide__content {
max-width: 620px;
color: #fff;
}
.path-frontpage .kao-hero-slide__content h1,
.path-frontpage .kao-hero-slide__content h2 {
margin: 0 0 16px;
color: #fff;
font-size: clamp(2rem, 3.2vw, 3.15rem);
font-weight: 700;
line-height: 1.08;
}
.path-frontpage .kao-hero-slide__content p {
max-width: 570px;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.92);
font-size: 1.05rem;
line-height: 1.65;
}
.path-frontpage .kao-hero-slide__button {
display: inline-flex;
align-items: center;
padding: 11px 22px;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-weight: 600;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease;
}
.path-frontpage .kao-hero-slide__button:hover,
.path-frontpage .kao-hero-slide__button:focus-visible {
border-color: #fff;
background: #fff;
color: #0B4F3A;
text-decoration: none;
}
/* Carousel controls - positioned now, functionality comes later */
.path-frontpage .kao-hero-carousel__arrow {
position: absolute;
z-index: 5;
top: 50%;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
background: rgba(11, 79, 58, 0.48);
color: #fff;
font-size: 1.3rem;
transform: translateY(-50%);
cursor: pointer;
}
.path-frontpage .kao-hero-carousel__arrow--prev {
left: 20px;
}
.path-frontpage .kao-hero-carousel__arrow--next {
right: 20px;
}
.path-frontpage .kao-hero-carousel__dots {
position: absolute;
z-index: 5;
bottom: 18px;
left: 50%;
display: flex;
gap: 9px;
transform: translateX(-50%);
}
.path-frontpage .kao-hero-carousel__dot {
width: 9px;
height: 9px;
padding: 0;
border: 1px solid #fff;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.path-frontpage .kao-hero-carousel__dot--active {
background: #fff;
}
/* Tablet */
@media (max-width: 991.98px) {
.path-frontpage .kao-hero-carousel {
height: 320px;
}
.path-frontpage .kao-hero-slide__content {
max-width: 570px;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.path-frontpage .kao-hero-carousel {
height: 285px;
}
.path-frontpage .kao-hero-slide__content {
max-width: calc(100% - 50px);
}
.path-frontpage .kao-hero-slide__content h1,
.path-frontpage .kao-hero-slide__content h2 {
font-size: clamp(1.7rem, 7vw, 2.25rem);
}
.path-frontpage .kao-hero-slide__content p {
font-size: 0.95rem;
line-height: 1.5;
}
.path-frontpage .kao-hero-carousel__arrow {
width: 36px;
height: 36px;
}
.path-frontpage .kao-hero-carousel__arrow--prev {
left: 8px;
}
.path-frontpage .kao-hero-carousel__arrow--next {
right: 8px;
}
}
/* Homepage hero final layout adjustments */
body.path-frontpage {
overflow-x: hidden;
}
.path-frontpage .kao-hero-slide__content {
max-width: 760px;
}
/* Managed hero background images */
.path-frontpage .kao-hero-slide__background img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Darken the left side for readable HTML text */
.path-frontpage .kao-hero-slide__background::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(11, 79, 58, 0.95) 0%,
rgba(11, 79, 58, 0.78) 34%,
rgba(11, 79, 58, 0.30) 58%,
rgba(11, 79, 58, 0.04) 78%,
rgba(11, 79, 58, 0) 100%
);
}
/* Hero image: show the complete Drupal-generated 2048x420 derivative */
.path-frontpage .kao-hero-slide__background img {
width: 100%;
height: 100%;
object-fit: fill;
object-position: center;
}
/* Hero images: preserve aspect ratio at all screen sizes */
.path-frontpage .kao-hero-slide__background img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* =========================================================
KAO HERO CAROUSEL - CROSS FADE
========================================================= */
.path-frontpage .kao-hero-slide {
pointer-events: none;
transition:
opacity 0.9s ease,
visibility 0s linear 0.9s;
}
.path-frontpage .kao-hero-slide--active {
z-index: 1;
pointer-events: auto;
transition:
opacity 0.9s ease;
}
@media (prefers-reduced-motion: reduce) {
.path-frontpage .kao-hero-slide {
transition: none;
}
}
/* Hero carousel Pause / Play control */
.path-frontpage .kao-hero-carousel__pause {
position: absolute;
z-index: 6;
right: 20px;
bottom: 16px;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 4px;
background: rgba(11, 79, 58, 0.65);
color: #fff;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
}
.path-frontpage .kao-hero-carousel__pause:hover,
.path-frontpage .kao-hero-carousel__pause:focus-visible {
background: #fff;
color: #0B4F3A;
border-color: #fff;
}
@media (max-width: 767.98px) {
.path-frontpage .kao-hero-carousel__pause {
right: 8px;
bottom: 12px;
}
}
/* =========================================================
KAO HERO CAROUSEL - CONTROL POLISH
========================================================= */
.path-frontpage .kao-hero-carousel__arrow {
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.7);
background: rgba(11, 79, 58, 0.38);
font-size: 1.05rem;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.path-frontpage .kao-hero-carousel__arrow:hover,
.path-frontpage .kao-hero-carousel__arrow:focus-visible {
background: rgba(11, 79, 58, 0.85);
border-color: #fff;
}
.path-frontpage .kao-hero-carousel__dots {
bottom: 14px;
gap: 7px;
}
.path-frontpage .kao-hero-carousel__dot {
width: 8px;
height: 8px;
border: 1px solid rgba(255, 255, 255, 0.9);
transition:
width 0.25s ease,
border-radius 0.25s ease,
background-color 0.25s ease;
}
.path-frontpage .kao-hero-carousel__dot--active {
width: 22px;
border-radius: 999px;
background: #fff;
}
.path-frontpage .kao-hero-carousel__pause {
right: 18px;
bottom: 12px;
padding: 5px 10px;
border-radius: 999px;
border-color: rgba(255, 255, 255, 0.65);
background: rgba(11, 79, 58, 0.55);
font-size: 0.75rem;
line-height: 1.2;
}
.path-frontpage .kao-hero-carousel__pause:hover,
.path-frontpage .kao-hero-carousel__pause:focus-visible {
background: #fff;
color: #0B4F3A;
}
/* =========================================================
HOMEPAGE WHO WE ARE - FINAL POLISH
========================================================= */
.path-frontpage #block-kao-theme-kaohomepagewhoweare {
position: relative;
padding: 34px 38px;
background:
linear-gradient(
135deg,
#f8fbf9 0%,
#f2f8f5 100%
);
border: 1px solid rgba(20, 107, 74, 0.14);
border-left: 4px solid #146B4A;
border-radius: 10px;
box-shadow:
0 6px 20px rgba(11, 79, 58, 0.07);
}
/* Heading */
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
.field__item > h3 {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
font-size: 2rem;
font-weight: 600;
color: #0B4F3A;
}
/* Small institutional people icon */
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
.field__item > h3::before {
content: "";
flex: 0 0 34px;
width: 34px;
height: 34px;
background-color: #146B4A;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-6 8v-1c0-2.76 2.69-5 6-5s6 2.24 6 5v1H6zm-1.5-7C2.57 13 1 14.57 1 16.5V18h3v-1c0-1.61.75-3.05 1.93-4H4.5zm15 0h-1.43A5.03 5.03 0 0120 17v1h3v-1.5c0-1.93-1.57-3.5-3.5-3.5z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-6 8v-1c0-2.76 2.69-5 6-5s6 2.24 6 5v1H6zm-1.5-7C2.57 13 1 14.57 1 16.5V18h3v-1c0-1.61.75-3.05 1.93-4H4.5zm15 0h-1.43A5.03 5.03 0 0120 17v1h3v-1.5c0-1.93-1.57-3.5-3.5-3.5z'/%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Body copy */
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
.field__item > p:not(:last-child) {
color: #37443e;
line-height: 1.72;
}
/* CTA */
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
p:last-child a {
display: inline-flex;
align-items: center;
padding: 9px 18px;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
p:last-child a::after {
content: "→";
margin-left: 8px;
}
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
p:last-child a:hover,
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
p:last-child a:focus-visible {
transform: translateY(-1px);
}
/* Mobile */
@media (max-width: 767.98px) {
.path-frontpage #block-kao-theme-kaohomepagewhoweare {
padding: 24px 20px;
border-left-width: 3px;
}
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
.field__item > h3 {
gap: 10px;
font-size: 1.7rem;
}
.path-frontpage
#block-kao-theme-kaohomepagewhoweare
.field__item > h3::before {
flex-basis: 30px;
width: 30px;
height: 30px;
}
}
/* =========================================================
HOMEPAGE AUDIT SERVICES - FINAL POLISH
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-services-home {
padding: 34px 38px;
background:
linear-gradient(
135deg,
#fbfcfb 0%,
#f4f8f6 100%
);
border: 1px solid rgba(20, 107, 74, 0.12);
border-radius: 10px;
box-shadow:
0 6px 20px rgba(11, 79, 58, 0.06);
}
/* Section heading */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-services-home > h2 {
margin-bottom: 10px;
color: #0B4F3A;
font-weight: 600;
}
/* Introductory copy */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-services-intro {
margin-bottom: 24px;
color: #46534d;
line-height: 1.7;
}
/* Service cards */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-service-card {
padding: 1.4rem;
border-radius: 10px;
box-shadow:
0 4px 14px rgba(11, 79, 58, 0.06);
}
/* Service titles */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-service-card h3 {
margin-bottom: 10px;
font-weight: 600;
line-height: 1.3;
}
/* Card copy */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-service-card p {
color: #46534d;
line-height: 1.62;
}
/* Slightly stronger hover without making cards flashy */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-service-card:hover {
transform: translateY(-4px);
box-shadow:
0 10px 24px rgba(11, 79, 58, 0.10);
}
/* Mobile */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-services-home {
padding: 24px 20px;
}
}
/* =========================================================
HOMEPAGE LATEST AUDIT REPORTS - FINAL POLISH
========================================================= */
.path-frontpage
#block-kao-theme-views-block-audit-reports-block-1 {
padding: 34px 38px;
background:
linear-gradient(
135deg,
#fbfcfb 0%,
#f4f8f6 100%
);
border: 1px solid rgba(20, 107, 74, 0.12);
border-radius: 10px;
box-shadow:
0 6px 20px rgba(11, 79, 58, 0.06);
}
/* Section heading */
.path-frontpage
#block-kao-theme-views-block-audit-reports-block-1 > h2 {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
color: #0B4F3A;
font-weight: 600;
}
/* Report/document icon beside heading */
.path-frontpage
#block-kao-theme-views-block-audit-reports-block-1 > h2::before {
content: "";
flex: 0 0 34px;
width: 34px;
height: 34px;
background-color: #146B4A;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2zm8 2v6h6M9 13h8v2H9zm0 4h8v2H9zm0-8h3v2H9z'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6V2zm8 2v6h6M9 13h8v2H9zm0 4h8v2H9zm0-8h3v2H9z'/%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Report cards */
.path-frontpage
.latest-audit-reports .report-card {
border-radius: 10px;
box-shadow:
0 4px 14px rgba(11, 79, 58, 0.06);
}
/* Report title */
.path-frontpage
.latest-audit-reports .views-field-title {
margin-bottom: 14px;
font-size: 1.1rem;
line-height: 1.4;
}
/* Metadata */
.path-frontpage
.latest-audit-reports .views-field-field-report-year,
.path-frontpage
.latest-audit-reports .views-field-field-published-year {
color: #53615a;
}
/* Cleaner hover */
.path-frontpage
.latest-audit-reports .report-card:hover {
transform: translateY(-4px);
box-shadow:
0 10px 24px rgba(11, 79, 58, 0.10);
}
/* Mobile */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-views-block-audit-reports-block-1 {
padding: 24px 20px;
}
.path-frontpage
#block-kao-theme-views-block-audit-reports-block-1 > h2 {
gap: 10px;
font-size: 1.7rem;
}
.path-frontpage
#block-kao-theme-views-block-audit-reports-block-1 > h2::before {
flex-basis: 30px;
width: 30px;
height: 30px;
}
}
/* =========================================================
HOMEPAGE - FINAL SECTION SPACING
========================================================= */
/* Hero sits directly beneath the header */
.path-frontpage .region-featured-top {
margin-top: 0;
margin-bottom: 0;
}
/* Hero -> Who We Are */
.path-frontpage #block-kao-theme-kaohomepagewhoweare {
margin-top: 32px;
margin-bottom: 0;
}
/* Who We Are -> Audit Services */
.path-frontpage #block-kao-theme-kaohomepageauditservices {
margin-top: 32px;
margin-bottom: 0;
}
/* Audit Services -> Latest Audit Reports */
.path-frontpage #block-kao-theme-views-block-audit-reports-block-1 {
margin-top: 32px;
margin-bottom: 40px;
}
/* Mobile spacing */
@media (max-width: 767.98px) {
.path-frontpage #block-kao-theme-kaohomepagewhoweare,
.path-frontpage #block-kao-theme-kaohomepageauditservices,
.path-frontpage #block-kao-theme-views-block-audit-reports-block-1 {
margin-top: 22px;
}
.path-frontpage #block-kao-theme-views-block-audit-reports-block-1 {
margin-bottom: 28px;
}
}
/* =========================================================
KAO HERO - TEXT ENTRANCE ANIMATION
========================================================= */
/* Starting state */
.path-frontpage .kao-hero-slide__content h1,
.path-frontpage .kao-hero-slide__content h2,
.path-frontpage .kao-hero-slide__content p,
.path-frontpage .kao-hero-slide__content .kao-hero-slide__button {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.65s ease,
transform 0.65s ease;
}
/* Active slide */
.path-frontpage
.kao-hero-slide--active
.kao-hero-slide__content h1,
.path-frontpage
.kao-hero-slide--active
.kao-hero-slide__content h2,
.path-frontpage
.kao-hero-slide--active
.kao-hero-slide__content p,
.path-frontpage
.kao-hero-slide--active
.kao-hero-slide__content .kao-hero-slide__button {
opacity: 1;
transform: translateY(0);
}
/* Heading appears first */
.path-frontpage
.kao-hero-slide--active
.kao-hero-slide__content h1,
.path-frontpage
.kao-hero-slide--active
.kao-hero-slide__content h2 {
transition-delay: 0.18s;
}
/* Paragraph follows */
.path-frontpage
.kao-hero-slide--active
.kao-hero-slide__content p {
transition-delay: 0.34s;
}
/* Button appears last */
.path-frontpage
.kao-hero-slide--active
.kao-hero-slide__content .kao-hero-slide__button {
transition-delay: 0.50s;
}
/* Reset delay when slide becomes inactive */
.path-frontpage
.kao-hero-slide:not(.kao-hero-slide--active)
.kao-hero-slide__content > * {
transition-delay: 0s;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.path-frontpage .kao-hero-slide__content h1,
.path-frontpage .kao-hero-slide__content h2,
.path-frontpage .kao-hero-slide__content p,
.path-frontpage .kao-hero-slide__content .kao-hero-slide__button {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================
KAO HERO - INITIAL PAGE ENTRY
========================================================= */
@keyframes kaoHeroInitialBackground {
from {
opacity: 0;
transform: scale(1.015);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes kaoHeroInitialText {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animate the first active banner when entering the homepage */
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__background {
animation: kaoHeroInitialBackground 1s ease both;
}
/* Heading */
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__content h1,
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__content h2 {
animation: kaoHeroInitialText 0.7s ease 0.18s both;
}
/* Paragraph */
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__content p {
animation: kaoHeroInitialText 0.7s ease 0.36s both;
}
/* Button */
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__content .kao-hero-slide__button {
animation: kaoHeroInitialText 0.7s ease 0.54s both;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__background,
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__content h1,
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__content h2,
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__content p,
.path-frontpage
.kao-hero-carousel.kao-hero-initial-entry
.kao-hero-slide--active
.kao-hero-slide__content .kao-hero-slide__button {
animation: none;
}
}
/* =========================================================
KAO GLOBAL WEBSITE BACKGROUND
========================================================= */
body {
background-color: #f4f8f6;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2' opacity='0.055'%3E%3Crect x='24' y='26' width='42' height='52' rx='3'/%3E%3Cpath d='M34 41h22M34 51h22M34 61h13'/%3E%3Cpath d='M40 69l6 6 12-14'/%3E%3Ccircle cx='163' cy='148' r='22'/%3E%3Cpath d='M179 164l18 18'/%3E%3Cpath d='M151 149l7 7 15-18'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(
135deg,
rgba(20, 107, 74, 0.025) 0%,
rgba(255, 255, 255, 0.20) 50%,
rgba(11, 79, 58, 0.025) 100%
);
background-repeat:
repeat,
no-repeat;
background-size:
220px 220px,
cover;
background-attachment:
fixed,
fixed;
}
/*
* Allow the page canvas to show through.
* Individual content panels/cards keep their own backgrounds.
*/
#main-wrapper,
main.main-content,
.layout-main-wrapper {
background-color: transparent;
}
/* Mobile: fixed backgrounds can feel less smooth */
@media (max-width: 767.98px) {
body {
background-attachment:
scroll,
scroll;
background-size:
180px 180px,
cover;
}
}
/* =========================================================
KAO GLOBAL BACKGROUND - PAGE WRAPPER FIX
========================================================= */
html,
body,
.dialog-off-canvas-main-canvas,
#page-wrapper {
background-color: #f4f8f6;
}
/* Put the visible audit pattern on Drupal's actual page wrapper */
#page {
background-color: #f4f8f6;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2' opacity='0.075'%3E%3C!-- Audit document --%3E%3Crect x='25' y='28' width='42' height='52' rx='3'/%3E%3Cpath d='M35 42h22M35 52h22M35 62h12'/%3E%3Cpath d='M39 69l6 6 13-15'/%3E%3C!-- Magnifying glass --%3E%3Ccircle cx='169' cy='157' r='23'/%3E%3Cpath d='M186 174l19 19'/%3E%3Cpath d='M157 158l7 7 15-18'/%3E%3C!-- Small chart --%3E%3Cpath d='M116 61v22M128 51v32M140 68v15'/%3E%3Cpath d='M109 83h38'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(
135deg,
rgba(20, 107, 74, 0.035) 0%,
rgba(255, 255, 255, 0.42) 48%,
rgba(11, 79, 58, 0.025) 100%
);
background-repeat:
repeat,
no-repeat;
background-size:
240px 240px,
cover;
background-position:
top left,
center;
}
/* Let the patterned page show through the main content area */
#main-wrapper,
main.main-content,
.layout-main-wrapper {
background: transparent !important;
}
/* Slightly smaller pattern on phones */
@media (max-width: 767.98px) {
#page {
background-size:
190px 190px,
cover;
}
}
/* =========================================================
KAO GLOBAL BACKGROUND - MAIN CONTAINER FIX
========================================================= */
#main-wrapper,
#main,
#main > .row,
main.main-content,
main.main-content > .section {
background: transparent !important;
}
/* =========================================================
KAO GLOBAL BACKGROUND - FORCE VISIBLE PAGE CANVAS
========================================================= */
.dialog-off-canvas-main-canvas #page-wrapper #page {
background-color: #f4f8f6 !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23146B4A' stroke-width='2' opacity='0.075'%3E%3Crect x='25' y='28' width='42' height='52' rx='3'/%3E%3Cpath d='M35 42h22M35 52h22M35 62h12'/%3E%3Cpath d='M39 69l6 6 13-15'/%3E%3Ccircle cx='169' cy='157' r='23'/%3E%3Cpath d='M186 174l19 19'/%3E%3Cpath d='M157 158l7 7 15-18'/%3E%3Cpath d='M116 61v22M128 51v32M140 68v15'/%3E%3Cpath d='M109 83h38'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(
135deg,
rgba(20, 107, 74, 0.035) 0%,
rgba(255, 255, 255, 0.42) 48%,
rgba(11, 79, 58, 0.025) 100%
) !important;
background-repeat:
repeat,
no-repeat !important;
background-size:
240px 240px,
cover !important;
background-position:
top left,
center !important;
}
@media (max-width: 767.98px) {
.dialog-off-canvas-main-canvas #page-wrapper #page {
background-size:
190px 190px,
cover !important;
}
}
/* =========================================================
KAO GLOBAL BACKGROUND - CLEAN EXECUTIVE VERSION
========================================================= */
.dialog-off-canvas-main-canvas #page-wrapper #page {
background-color: #f7faf8 !important;
background-image:
radial-gradient(
circle at 12% 16%,
rgba(20, 107, 74, 0.06) 0%,
rgba(20, 107, 74, 0.03) 18%,
rgba(20, 107, 74, 0) 42%
),
radial-gradient(
circle at 88% 82%,
rgba(11, 79, 58, 0.05) 0%,
rgba(11, 79, 58, 0.025) 16%,
rgba(11, 79, 58, 0) 38%
),
repeating-linear-gradient(
0deg,
rgba(20, 107, 74, 0.032) 0,
rgba(20, 107, 74, 0.032) 1px,
transparent 1px,
transparent 36px
),
repeating-linear-gradient(
90deg,
rgba(20, 107, 74, 0.022) 0,
rgba(20, 107, 74, 0.022) 1px,
transparent 1px,
transparent 36px
),
linear-gradient(
135deg,
rgba(255, 255, 255, 0.72) 0%,
rgba(244, 248, 246, 0.92) 48%,
rgba(236, 243, 239, 0.96) 100%
) !important;
background-repeat:
no-repeat,
no-repeat,
repeat,
repeat,
no-repeat !important;
background-size:
cover,
cover,
auto,
auto,
cover !important;
background-position:
top left,
bottom right,
top left,
top left,
center !important;
}
@media (max-width: 767.98px) {
.dialog-off-canvas-main-canvas #page-wrapper #page {
background-image:
radial-gradient(
circle at 18% 14%,
rgba(20, 107, 74, 0.05) 0%,
rgba(20, 107, 74, 0.025) 16%,
rgba(20, 107, 74, 0) 34%
),
radial-gradient(
circle at 82% 84%,
rgba(11, 79, 58, 0.045) 0%,
rgba(11, 79, 58, 0.02) 14%,
rgba(11, 79, 58, 0) 32%
),
repeating-linear-gradient(
0deg,
rgba(20, 107, 74, 0.026) 0,
rgba(20, 107, 74, 0.026) 1px,
transparent 1px,
transparent 28px
),
repeating-linear-gradient(
90deg,
rgba(20, 107, 74, 0.018) 0,
rgba(20, 107, 74, 0.018) 1px,
transparent 1px,
transparent 28px
),
linear-gradient(
135deg,
rgba(255, 255, 255, 0.78) 0%,
rgba(244, 248, 246, 0.94) 52%,
rgba(236, 243, 239, 0.98) 100%
) !important;
}
}
/* =========================================================
KAO GLOBAL BACKGROUND - SOFT AUDIT WAVES
========================================================= */
.dialog-off-canvas-main-canvas #page-wrapper #page {
background-color: #f7faf8 !important;
background-image:
/* Soft green glow - upper right */
radial-gradient(
ellipse at 90% 8%,
rgba(20, 107, 74, 0.08) 0%,
rgba(20, 107, 74, 0.035) 24%,
transparent 50%
),
/* Soft green glow - lower left */
radial-gradient(
ellipse at 8% 88%,
rgba(11, 79, 58, 0.06) 0%,
rgba(11, 79, 58, 0.025) 22%,
transparent 48%
),
/* Large subtle curved/wave effect */
repeating-radial-gradient(
ellipse at 105% 35%,
transparent 0,
transparent 52px,
rgba(20, 107, 74, 0.028) 53px,
rgba(20, 107, 74, 0.028) 54px,
transparent 55px,
transparent 92px
),
/* Very faint document-style diagonal lines */
repeating-linear-gradient(
135deg,
rgba(20, 107, 74, 0.018) 0,
rgba(20, 107, 74, 0.018) 1px,
transparent 1px,
transparent 28px
),
/* Base */
linear-gradient(
145deg,
#fbfcfb 0%,
#f5f9f7 48%,
#edf5f1 100%
) !important;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat,
no-repeat !important;
background-size:
cover,
cover,
850px 850px,
auto,
cover !important;
background-position:
top right,
bottom left,
top right,
top left,
center !important;
}
/* Mobile */
@media (max-width: 767.98px) {
.dialog-off-canvas-main-canvas #page-wrapper #page {
background-size:
cover,
cover,
550px 550px,
auto,
cover !important;
}
}
/* =========================================================
KAO INTERNAL PAGE BANNERS - ENTRANCE ANIMATION
========================================================= */
@keyframes kaoPageBannerEnter {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes kaoPageBannerTitleEnter {
from {
opacity: 0;
transform: translateX(-14px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes kaoPageBannerGraphicEnter {
from {
opacity: 0;
transform:
translateY(-50%)
translateX(14px)
scale(0.94);
}
to {
opacity: 0.22;
transform:
translateY(-50%)
translateX(0)
scale(1);
}
}
/* Entire internal page-title banner */
body:not(.path-frontpage) #block-kao-theme-page-title {
animation:
kaoPageBannerEnter 0.7s ease-out both;
}
/* Actual page title */
body:not(.path-frontpage)
#block-kao-theme-page-title h1 {
animation:
kaoPageBannerTitleEnter 0.65s ease-out 0.16s both;
}
/*
* Decorative image/icon.
* This continues to work even when the background image
* itself is replaced later.
*/
body:not(.path-frontpage)
#block-kao-theme-page-title::after {
animation:
kaoPageBannerGraphicEnter 0.8s ease-out 0.30s both;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
body:not(.path-frontpage) #block-kao-theme-page-title,
body:not(.path-frontpage) #block-kao-theme-page-title h1,
body:not(.path-frontpage) #block-kao-theme-page-title::after {
animation: none;
}
}
/* =========================================================
KAO ABOUT SECTION - BANNER IMAGE ENTRANCE
========================================================= */
@keyframes kaoInternalBannerImageEnter {
from {
opacity: 0;
transform: scale(1.025);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Actual internal page banner images */
.page-node-3 .kao-about-intro > img,
.page-node-311 .kao-intro > img,
.page-node-312 .kao-lead-intro > img,
.page-node-313 .kao-history-intro > img {
animation: kaoInternalBannerImageEnter 1s ease-out 0.08s both;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.page-node-3 .kao-about-intro > img,
.page-node-311 .kao-intro > img,
.page-node-312 .kao-lead-intro > img,
.page-node-313 .kao-history-intro > img {
animation: none;
}
}
/* =========================================================
KAO SERVICES - BANNER IMAGE ENTRANCE
========================================================= */
.kao-services-page > img,
.kao-fin-page > img,
.kao-perf-page > img,
.kao-comp-page > img,
.kao-it-page > img,
.kao-env-page > img {
animation: kaoInternalBannerImageEnter 1s ease-out 0.08s both;
}
@media (prefers-reduced-motion: reduce) {
.kao-services-page > img,
.kao-fin-page > img,
.kao-perf-page > img,
.kao-comp-page > img,
.kao-it-page > img,
.kao-env-page > img {
animation: none;
}
}
/* =========================================================
KAO PUBLICATIONS - BANNER IMAGE ENTRANCE
========================================================= */
.kao-pub-banner {
animation: kaoInternalBannerImageEnter 1s ease-out 0.08s both;
}
@media (prefers-reduced-motion: reduce) {
.kao-pub-banner {
animation: none;
}
}
/* =========================================================
HOMEPAGE - PUBLIC INTEREST REPORTING CALLOUT
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
margin-top: 32px;
margin-bottom: 40px;
}
/* Main panel */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
min-height: 250px;
padding: 42px 48px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background:
radial-gradient(
circle at 88% 30%,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0.025) 28%,
transparent 48%
),
linear-gradient(
135deg,
#0B4F3A 0%,
#146B4A 58%,
#0E5B40 100%
);
box-shadow:
0 10px 28px rgba(11, 79, 58, 0.18);
}
/* Content */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__content {
position: relative;
z-index: 2;
max-width: 780px;
}
/* Small section label */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__label {
margin-bottom: 10px;
color: rgba(255, 255, 255, 0.78);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
/* Main heading */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home h2 {
margin: 0 0 15px;
color: #ffffff;
font-size: clamp(1.8rem, 3vw, 2.45rem);
font-weight: 650;
line-height: 1.18;
}
/* Description */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home p {
max-width: 720px;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.90);
font-size: 1.02rem;
line-height: 1.7;
}
/* CTA button */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__button {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 19px;
border: 1px solid rgba(255, 255, 255, 0.92);
border-radius: 6px;
background: #ffffff;
color: #0B4F3A;
font-weight: 650;
text-decoration: none;
transition:
transform 0.2s ease,
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__button:hover,
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__button:focus-visible {
background: #f1f8f4;
color: #0B4F3A;
transform: translateY(-2px);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.16);
}
/* Decorative institutional graphic */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__graphic {
position: relative;
z-index: 1;
flex: 0 0 175px;
width: 175px;
height: 175px;
background: rgba(255, 255, 255, 0.16);
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M35 31h30v32H35z'/%3E%3Cpath d='M42 41h16M42 49h16M42 57h10'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M35 31h30v32H35z'/%3E%3Cpath d='M42 41h16M42 49h16M42 57h10'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Subtle decorative circle behind graphic */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home::after {
content: "";
position: absolute;
right: -85px;
top: -95px;
width: 340px;
height: 340px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 50%;
box-shadow:
0 0 0 45px rgba(255, 255, 255, 0.025),
0 0 0 90px rgba(255, 255, 255, 0.018);
pointer-events: none;
}
/* Tablet */
@media (max-width: 991.98px) {
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home {
padding: 36px 34px;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__graphic {
flex-basis: 135px;
width: 135px;
height: 135px;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
margin-top: 22px;
margin-bottom: 28px;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home {
display: block;
min-height: 0;
padding: 30px 24px;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__content {
max-width: none;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home__graphic {
position: absolute;
right: -15px;
bottom: -22px;
width: 105px;
height: 105px;
opacity: 0.55;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.kao-public-interest-home p {
padding-right: 15px;
font-size: 0.97rem;
}
}
/* =========================================================
HOMEPAGE - PUBLIC INTEREST REPORTING
Actual Drupal-rendered block
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
position: relative;
overflow: hidden;
margin-top: 32px;
margin-bottom: 40px;
padding: 42px 48px;
min-height: 245px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background:
radial-gradient(
circle at 88% 24%,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.03) 26%,
transparent 48%
),
linear-gradient(
135deg,
#0B4F3A 0%,
#146B4A 58%,
#0E5B40 100%
) !important;
box-shadow:
0 10px 28px rgba(11, 79, 58, 0.18);
}
/* Keep content above decorative graphic */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
> .content {
position: relative;
z-index: 2;
max-width: 760px;
}
/* Small PUBLIC INTEREST REPORTING label */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:first-child {
margin: 0 0 10px;
color: rgba(255, 255, 255, 0.76);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
/* Main heading */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 {
margin: 0 0 15px;
color: #ffffff !important;
font-size: clamp(1.8rem, 3vw, 2.45rem);
font-weight: 650;
line-height: 1.18;
}
/* Description */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 + p {
max-width: 700px;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.90);
font-size: 1.02rem;
line-height: 1.7;
}
/* Remove extra space around button paragraph */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:last-child {
margin: 0;
}
/* CTA button */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:last-child > a {
display: inline-flex;
align-items: center;
padding: 11px 20px;
border: 1px solid #ffffff;
border-radius: 6px;
background: #ffffff;
color: #0B4F3A !important;
font-weight: 650;
text-decoration: none !important;
transition:
transform 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:last-child > a:hover,
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:last-child > a:focus-visible {
background: #f0f8f4;
transform: translateY(-2px);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.16);
}
/* Decorative Public Interest Reporting shield/document */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting::after {
content: "";
position: absolute;
z-index: 1;
right: 50px;
top: 50%;
width: 165px;
height: 165px;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.14);
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M35 31h30v32H35z'/%3E%3Cpath d='M42 41h16M42 49h16M42 57h10'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M35 31h30v32H35z'/%3E%3Cpath d='M42 41h16M42 49h16M42 57h10'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
pointer-events: none;
}
/* Mobile */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
margin-top: 22px;
margin-bottom: 28px;
min-height: 0;
padding: 30px 24px;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
> .content {
max-width: none;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting::after {
right: -12px;
bottom: -18px;
top: auto;
width: 105px;
height: 105px;
transform: none;
opacity: 0.65;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 + p {
padding-right: 12px;
font-size: 0.97rem;
}
}
/* =========================================================
HOMEPAGE PUBLIC INTEREST REPORTING - SOFTER VERSION
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
background:
linear-gradient(
135deg,
#f5faf7 0%,
#edf6f1 100%
) !important;
border: 1px solid rgba(20, 107, 74, 0.16);
border-left: 4px solid #146B4A;
box-shadow:
0 6px 20px rgba(11, 79, 58, 0.07);
min-height: 220px;
}
/* Small label */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:first-child {
color: #146B4A;
}
/* Main heading */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 {
color: #0B4F3A !important;
}
/* Description */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 + p {
color: #46534d;
}
/* CTA */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:last-child > a {
background: #146B4A;
border-color: #146B4A;
color: #ffffff !important;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:last-child > a:hover,
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > p:last-child > a:focus-visible {
background: #0B4F3A;
border-color: #0B4F3A;
color: #ffffff !important;
}
/* Make shield a quiet watermark */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting::after {
background-color: #146B4A;
opacity: 0.10;
width: 145px;
height: 145px;
}
/* Mobile */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
min-height: 0;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting::after {
opacity: 0.08;
}
}
/* =========================================================
HOMEPAGE OUR AUDIT SERVICES - TITLE ICON
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-services-home > h2:first-of-type {
display: flex;
align-items: center;
gap: 12px;
}
/* Audit services / checklist icon */
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-services-home > h2:first-of-type::before {
content: "";
flex: 0 0 34px;
width: 34px;
height: 34px;
background-color: #146B4A;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M8 10l1.5 1.5L12 9'/%3E%3Cpath d='M14 10h2'/%3E%3Cpath d='M8 15l1.5 1.5L12 14'/%3E%3Cpath d='M14 15h2'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 3.5h6v3H9z'/%3E%3Cpath d='M8 10l1.5 1.5L12 9'/%3E%3Cpath d='M14 10h2'/%3E%3Cpath d='M8 15l1.5 1.5L12 14'/%3E%3Cpath d='M14 15h2'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Mobile */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-kaohomepageauditservices
.kao-services-home > h2:first-of-type::before {
flex-basis: 30px;
width: 30px;
height: 30px;
}
}
/* =========================================================
CONTACT - PUBLIC INTEREST REPORTING
Final KAO-consistent styling
========================================================= */
.page-node-6
#block-kao-theme-publicinterestreporting {
position: relative;
padding: 24px 28px;
background:
linear-gradient(
135deg,
#f6faf8 0%,
#eef6f2 100%
);
border: 1px solid rgba(20, 107, 74, 0.16);
border-left: 4px solid #146B4A;
border-radius: 10px;
box-shadow:
0 4px 14px rgba(11, 79, 58, 0.06);
}
/* Heading */
.page-node-6
#block-kao-theme-publicinterestreporting > h2 {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 12px;
color: #0B4F3A;
font-size: 1.35rem;
font-weight: 600;
}
/* Matching Public Interest Reporting shield */
.page-node-6
#block-kao-theme-publicinterestreporting > h2::before {
content: "";
flex: 0 0 27px;
width: 27px;
height: 27px;
background-color: #146B4A;
background-image: none;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M35 31h30v32H35z'/%3E%3Cpath d='M42 41h16M42 49h16M42 57h10'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M35 31h30v32H35z'/%3E%3Cpath d='M42 41h16M42 49h16M42 57h10'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Body text */
.page-node-6
#block-kao-theme-publicinterestreporting p {
color: #45564e;
}
/* CTA */
.page-node-6
#block-kao-theme-publicinterestreporting
p:last-child a {
background: #146B4A;
border-color: #146B4A;
color: #ffffff !important;
}
.page-node-6
#block-kao-theme-publicinterestreporting
p:last-child a:hover,
.page-node-6
#block-kao-theme-publicinterestreporting
p:last-child a:focus {
background: #0B4F3A;
border-color: #0B4F3A;
}
/* Mobile */
@media (max-width: 767.98px) {
.page-node-6
#block-kao-theme-publicinterestreporting {
padding: 22px 20px;
}
}
/* =========================================================
HOMEPAGE - HOW MAY WE HELP YOU?
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
position: relative;
overflow: visible;
margin-top: 32px;
margin-bottom: 40px;
min-height: 0;
padding: 34px 38px;
background:
linear-gradient(
135deg,
#f8fbf9 0%,
#f2f8f5 100%
) !important;
border: 1px solid rgba(20, 107, 74, 0.14);
border-radius: 10px;
box-shadow:
0 5px 18px rgba(11, 79, 58, 0.07);
}
/* Remove the old Public Interest Reporting shield */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting::after {
content: none !important;
display: none !important;
}
/* Allow the new cards to use the full width */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
> .content {
max-width: none;
width: 100%;
}
/* =========================================================
SECTION HEADING
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 10px;
color: #0B4F3A !important;
font-size: 2rem;
font-weight: 600;
line-height: 1.25;
}
/* Help / conversation icon */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2::before {
content: "";
flex: 0 0 34px;
width: 34px;
height: 34px;
background-color: #146B4A;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5z'/%3E%3Cpath d='M9.8 9a2.3 2.3 0 0 1 4.4 1c0 1.7-2.2 1.8-2.2 3'/%3E%3Cpath d='M12 15.5h.01'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5z'/%3E%3Cpath d='M9.8 9a2.3 2.3 0 0 1 4.4 1c0 1.7-2.2 1.8-2.2 3'/%3E%3Cpath d='M12 15.5h.01'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Intro */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 + p {
max-width: 760px;
margin: 0 0 26px;
padding: 0;
color: #46534d;
font-size: 1rem;
line-height: 1.7;
}
/* =========================================================
HELP CARDS
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li {
margin: 0;
padding: 0;
list-style: none;
}
/* Entire card is clickable */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a {
position: relative;
display: block;
height: 100%;
min-height: 180px;
padding: 58px 22px 22px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(20, 107, 74, 0.13);
border-top: 3px solid #146B4A;
border-radius: 9px;
box-shadow:
0 3px 12px rgba(11, 79, 58, 0.05);
color: #46534d !important;
line-height: 1.6;
text-decoration: none !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease,
background-color 0.22s ease;
}
/* Card title */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a strong {
display: block;
margin-bottom: 7px;
color: #0B4F3A;
font-size: 1.08rem;
font-weight: 650;
line-height: 1.35;
}
/* Hover */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a:hover,
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a:focus-visible {
transform: translateY(-4px);
background: #ffffff;
border-color: rgba(20, 107, 74, 0.28);
box-shadow:
0 10px 24px rgba(11, 79, 58, 0.10);
}
/* =========================================================
CARD ICONS
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a::before {
content: "";
position: absolute;
top: 19px;
left: 22px;
width: 28px;
height: 28px;
background-color: #146B4A;
}
/* Contact Us - envelope */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li:nth-child(1) > a::before {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Audit Reports - document */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li:nth-child(2) > a::before {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5M9 12h6M9 16h6'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5M9 12h6M9 16h6'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Legal Documents - scales */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li:nth-child(3) > a::before {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M5 6h14'/%3E%3Cpath d='m5 6-3 6h6zM19 6l-3 6h6z'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 21h10M5 6h14'/%3E%3Cpath d='m5 6-3 6h6zM19 6l-3 6h6z'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
margin-top: 22px;
margin-bottom: 28px;
padding: 24px 20px;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 {
gap: 10px;
font-size: 1.7rem;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2::before {
flex-basis: 30px;
width: 30px;
height: 30px;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul {
grid-template-columns: 1fr;
gap: 14px;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a {
min-height: 0;
padding: 54px 20px 20px;
}
}
/* =========================================================
HOMEPAGE - HOW MAY WE HELP YOU?
Compact final layout
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting {
padding: 30px 38px;
}
/* Two-column layout:
heading/text left, contact action right */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
grid-template-rows: auto auto;
column-gap: 46px;
align-items: center;
}
/* Heading stays left */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 {
grid-column: 1;
grid-row: 1;
margin-bottom: 8px;
}
/* Intro stays left */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 + p {
grid-column: 1;
grid-row: 2;
max-width: 650px;
margin: 0;
}
/* Contact card sits on right */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul {
grid-column: 2;
grid-row: 1 / span 2;
display: block;
width: 100%;
margin: 0;
}
/* Only one contact card */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a {
min-height: 0;
padding: 52px 22px 20px;
}
/* Subtle arrow to emphasize navigation */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a::after {
content: "→";
position: absolute;
top: 18px;
right: 20px;
color: #146B4A;
font-size: 1.25rem;
font-weight: 600;
transition: transform 0.2s ease;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a:hover::after,
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li > a:focus-visible::after {
transform: translateX(4px);
}
/* Tablet / mobile */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item {
display: block;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > h2 + p {
margin-bottom: 20px;
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul {
width: 100%;
}
}
/* =========================================================
PUBLICATIONS / DOWNLOADS - FINAL BANNER FIX
Keeps animation and spacing even after image replacement
========================================================= */
.kao-publications-page > img:first-of-type {
display: block;
width: 100%;
height: auto;
/* Consistent breathing room before body text */
margin: 0 0 28px 0;
/* Same entrance animation as other internal banners */
animation:
kaoInternalBannerImageEnter 1s ease-out 0.08s both;
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.kao-publications-page > img:first-of-type {
animation: none;
}
}
/* =========================================================
HOMEPAGE - HOW MAY WE HELP YOU?
Two side-by-side action cards
========================================================= */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item {
grid-template-columns: minmax(0, 1fr) minmax(520px, 680px);
}
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
/* Public Interest Reporting icon */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li:nth-child(1) > a::before {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M35 31h30v32H35z'/%3E%3Cpath d='M42 41h16M42 49h16M42 57h10'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8l30 12v23c0 20-11 34-30 44-19-10-30-24-30-44V20z'/%3E%3Cpath d='M35 31h30v32H35z'/%3E%3Cpath d='M42 41h16M42 49h16M42 57h10'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Contact Us icon */
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul > li:nth-child(2) > a::before {
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/g%3E%3C/svg%3E")
center / contain no-repeat;
}
/* Stack cards on mobile */
@media (max-width: 767.98px) {
.path-frontpage
#block-kao-theme-kaohomepagepublicinterestreporting
.field__item > ul {
grid-template-columns: 1fr;
}
}