snaps open and shut with no way to transition it, so the
answer is wrapped at runtime in .kk-acc__panel and its height is animated.
See the accordion module in assets/js/main.js.
========================================================================== */
.kk-acc__panel {
overflow: hidden;
transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Summary keeps its own marker hidden across browsers */
details.group > summary {
list-style: none;
}
details.group > summary::-webkit-details-marker {
display: none;
}
details.group > summary::marker {
content: "";
}
/* While collapsing, the [open] attribute is still present (it is removed only
once the height animation finishes), so the chevron would stay flipped until
the very end. Spin it back immediately instead.
Needs to outrank Tailwind's .group[open] .group-open\:rotate-180, hence the
extra element selector. */
details.group.is-closing span.material-symbols-outlined {
transform: rotate(0deg);
}
/* --- Privacy policy sections ---------------------------------------------- */
.kk-policy {
scroll-margin-top: 6rem; /* clears the sticky header when jumped to */
}
.kk-policy__title {
display: flex;
align-items: center;
gap: 0.65rem;
margin: 0 0 1rem;
color: #1b1c1c;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1.3;
}
.kk-policy__title .material-symbols-outlined {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: rgba(255, 218, 185, 0.5);
color: #8a6544;
font-size: 22px;
}
.kk-policy__sub {
margin: 1.5rem 0 0.5rem;
color: #8a6544;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
}
.kk-policy__sub:first-of-type {
margin-top: 0.5rem;
}
.kk-policy__text {
margin: 0 0 0.9rem;
color: #4f453d;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
line-height: 1.7;
}
.kk-policy__text:last-child {
margin-bottom: 0;
}
@media (max-width: 640px) {
.kk-policy__title {
font-size: 18px;
}
.kk-policy__title .material-symbols-outlined {
width: 34px;
height: 34px;
font-size: 19px;
}
}
/* ==========================================================================
.input-glass
This class is applied to inputs across the theme - the login and lost
password forms, account details, the contact form, and every WooCommerce
field via the woocommerce_form_field_args filter in functions.php - but it
had no styles defined anywhere, so all of those fell back to the Tailwind
forms plugin's plain grey-bordered box.
Element selectors are used (input./textarea./select.) so these beat the
forms plugin's [type='text'] rules, which are equal specificity and load
after main.css.
========================================================================== */
input.input-glass,
textarea.input-glass,
select.input-glass {
background-color: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(128, 117, 108, 0.25);
color: #1b1c1c;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px; /* keeps iOS from zooming the page on focus */
transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
input.input-glass::placeholder,
textarea.input-glass::placeholder {
color: rgba(79, 69, 61, 0.45);
}
input.input-glass:hover,
textarea.input-glass:hover,
select.input-glass:hover {
border-color: rgba(128, 117, 108, 0.4);
}
input.input-glass:focus,
textarea.input-glass:focus,
select.input-glass:focus {
outline: none;
background-color: #ffffff;
border-color: rgba(255, 218, 185, 0.95);
box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.45);
}
/* Invalid fields, once the browser or WooCommerce has flagged them */
input.input-glass[aria-invalid="true"],
input.input-glass.woocommerce-invalid-required-field {
border-color: #ba1a1a;
background-color: rgba(255, 240, 238, 0.75);
}
/* --- WooCommerce form fields: catch anything .input-glass misses -----------
Safety net for the account, address and classic checkout forms. Some fields
are rendered by WooCommerce itself and never receive the theme class, so they
fell back to Tailwind's grey border, which reads as near-black against the
warm palette. Checkboxes, radios and buttons are excluded deliberately. */
.woocommerce-EditAccountForm input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.woocommerce-EditAccountForm textarea,
.woocommerce-EditAccountForm select,
.woocommerce-address-fields input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.woocommerce-address-fields textarea,
.woocommerce-address-fields select,
.woocommerce-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.woocommerce-form select {
background-color: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(128, 117, 108, 0.25);
border-radius: 0.5rem;
color: #1b1c1c;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
padding: 0.75rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.woocommerce-EditAccountForm input:focus,
.woocommerce-EditAccountForm textarea:focus,
.woocommerce-EditAccountForm select:focus,
.woocommerce-address-fields input:focus,
.woocommerce-address-fields textarea:focus,
.woocommerce-address-fields select:focus,
.woocommerce-form input:focus,
.woocommerce-form select:focus {
outline: none;
background-color: #ffffff;
border-color: rgba(255, 218, 185, 0.95);
box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.45);
}
/* --- select2 / selectWoo -------------------------------------------------
WooCommerce swaps the Country and State selects for a select2 widget, which
builds its own markup and carries a hard grey border of its own. None of the
rules above can reach it, so it is matched directly. */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
height: auto !important;
min-height: 48px;
padding: 0.35rem 0.4rem;
background-color: rgba(255, 255, 255, 0.75) !important;
border: 1px solid rgba(128, 117, 108, 0.25) !important;
border-radius: 0.5rem !important;
font-family: 'Plus Jakarta Sans', sans-serif;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 0.35rem;
color: #1b1c1c;
line-height: 34px;
}
.select2-container .select2-selection--single .select2-selection__arrow {
height: 46px;
}
.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
border-color: rgba(255, 218, 185, 0.95) !important;
box-shadow: 0 0 0 4px rgba(255, 218, 185, 0.45);
}
/* The dropdown panel itself */
.select2-dropdown {
border: 1px solid rgba(128, 117, 108, 0.25) !important;
border-radius: 0.75rem !important;
overflow: hidden;
background-color: #ffffff;
box-shadow: 0 8px 32px 0 rgba(255, 218, 185, 0.25);
}
.select2-container .select2-search--dropdown .select2-search__field {
border: 1px solid rgba(128, 117, 108, 0.25) !important;
border-radius: 0.5rem;
padding: 0.5rem;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.select2-container .select2-results__option--highlighted[aria-selected],
.select2-container .select2-results__option--highlighted {
background-color: #ffdab9 !important;
color: #795e44 !important;
}
/* WooCommerce's show/hide password toggle sits inside a wrapper - keep the
field and its eye button on the same rounded surface. */
.woocommerce .password-input,
.woocommerce-page .password-input {
display: block;
position: relative;
width: 100%;
}
.woocommerce .password-input .show-password-input,
.woocommerce-page .password-input .show-password-input {
top: 50%;
transform: translateY(-50%);
right: 0.85rem;
color: rgba(79, 69, 61, 0.6);
}
/* --- Form rows inside a CSS grid ------------------------------------------
WooCommerce styles .form-row-first / .form-row-last as 47%-wide floats,
which suits its own float-based layout. These templates put the rows in a
CSS grid instead: the float is ignored, but the 47% width is not - so each
field rendered at roughly half the width of its own grid column.
Needs to outrank ".woocommerce form .form-row-first" (0,2,1), hence the
extra .grid in the chain. */
.woocommerce form .grid > .form-row,
.woocommerce-page form .grid > .form-row,
.woocommerce form .grid > .woocommerce-form-row,
.woocommerce-page form .grid > .woocommerce-form-row {
width: 100%;
float: none;
margin: 0;
padding: 0;
}
/* Same problem wherever a first/last pair is laid out with flex or grid */
.woocommerce form .flex > .form-row-first,
.woocommerce form .flex > .form-row-last,
.woocommerce-page form .flex > .form-row-first,
.woocommerce-page form .flex > .form-row-last {
width: 100%;
float: none;
}
/* WooCommerce wraps some fields in an inline span, which stops a width:100%
input from filling the row. */
.woocommerce form .woocommerce-input-wrapper,
.woocommerce-page form .woocommerce-input-wrapper {
display: block;
width: 100%;
}
/* ==========================================================================
My Account: orders, downloads, single order
========================================================================== */
/* --- Status pill ---------------------------------------------------------
One class per WooCommerce order status so the state is readable at a glance
rather than being plain text in a table cell. */
.kk-order__status {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.75rem;
border-radius: 9999px;
background: #f0eded;
color: #4f453d;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.kk-order__status--completed { background: #dcedc8; color: #445c30; }
.kk-order__status--processing { background: #ffdab9; color: #795e44; }
.kk-order__status--on-hold { background: #fff3c4; color: #735c1c; }
.kk-order__status--pending { background: #e6e6fa; color: #4d4d80; }
.kk-order__status--cancelled,
.kk-order__status--failed { background: #ffdad6; color: #93000a; }
.kk-order__status--refunded { background: #d2e4e9; color: #45585d; }
/* --- Order row actions (View, Pay, Cancel, Track...) --------------------- */
.kk-order__action {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.1rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(210, 196, 185, 0.9);
color: #8a6544;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.kk-order__action:hover {
background: #ffdab9;
color: #795e44;
border-color: transparent;
transform: translateY(-1px);
}
/* "Pay" is the one that matters when an order is awaiting payment */
.kk-order__action.pay {
background: #ffdab9;
border-color: transparent;
color: #795e44;
}
.kk-order__action.cancel:hover {
background: #ffdad6;
color: #93000a;
}
/* --- Downloads ----------------------------------------------------------- */
.kk-download__link {
color: #1b1c1c;
text-decoration: none;
transition: color 0.3s ease;
}
.kk-download__link:hover {
color: #8a6544;
}
/* --- The tables WooCommerce renders inside woocommerce_view_order ---------
Items, totals and addresses come from Woo's own templates, so they arrive as
bare tables. These are restyled in place rather than overridden, and made to
scroll instead of overflowing on a phone. */
.kk-order-details table.shop_table {
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
}
.kk-order-details table.shop_table th,
.kk-order-details table.shop_table td {
padding: 0.85rem 0.75rem;
border: 0;
border-bottom: 1px solid rgba(228, 226, 225, 0.8);
text-align: left;
vertical-align: top;
}
.kk-order-details table.shop_table thead th {
color: #8a6544;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.kk-order-details table.shop_table tfoot th,
.kk-order-details table.shop_table tfoot td {
font-weight: 600;
}
/* The grand total, addressed by name rather than by position. WooCommerce
appends the payment-method row *after* order_total, so `tfoot tr:last-child`
put the brown emphasis on "Direct bank transfer" and left the actual total
in plain text. The class comes from the order/order-details.php override. */
.kk-order-details table.shop_table tfoot tr.woocommerce-table__total--order_total th,
.kk-order-details table.shop_table tfoot tr.woocommerce-table__total--order_total td {
color: #8a6544;
font-size: 17px;
font-weight: 700;
}
/* Payment method, customer note and actions trail after the total as
footnotes, so they read quieter than the figures above them. */
.kk-order-details table.shop_table tfoot tr.woocommerce-table__total--payment_method td,
.kk-order-details table.shop_table tfoot tr.woocommerce-table__total--customer_note td {
font-size: 14px;
font-weight: 600;
color: #4f453d;
}
.kk-order-details table.shop_table tfoot tr.woocommerce-table__total--payment_method th,
.kk-order-details table.shop_table tfoot tr.woocommerce-table__total--customer_note th {
font-size: 14px;
font-weight: 500;
color: #80756c;
}
/* Nothing rules off under the final row, whichever one that turns out to be */
.kk-order-details table.shop_table tfoot tr:last-child th,
.kk-order-details table.shop_table tfoot tr:last-child td {
border-bottom: 0;
}
.kk-order-details table.shop_table a {
color: #1b1c1c;
text-decoration: none;
}
.kk-order-details table.shop_table a:hover {
color: #8a6544;
}
.kk-order-details .woocommerce-order-details__title,
.kk-order-details .woocommerce-column__title {
margin: 0 0 0.75rem;
color: #1b1c1c;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 20px;
font-weight: 600;
}
/* --- Billing / shipping address cards ------------------------------------
Markup comes from the theme's order/order-details-customer.php override,
which drops WooCommerce's col2-set float scaffolding - see the note at the
top of that file for why. Equal-height cards, side by side from 640px up. */
.kk-addresses {
margin-top: 2rem;
}
.kk-addresses__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: stretch;
}
@media (min-width: 640px) {
.kk-addresses__grid:not(.kk-addresses__grid--single) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.kk-addresses__grid--single {
max-width: 30rem;
}
.kk-address {
display: flex;
flex-direction: column;
gap: 0.6rem;
min-width: 0;
}
.kk-order-details .kk-address__title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #8a6544;
}
.kk-address__title .material-symbols-outlined {
font-size: 20px;
color: rgba(138, 101, 68, 0.75);
}
.kk-order-details .kk-address address {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 0.35rem;
min-width: 0;
margin: 0;
padding: 1.1rem 1.25rem;
border: 1px solid rgba(228, 226, 225, 0.9);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.6);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-style: normal;
line-height: 1.65;
color: #4f453d;
overflow-wrap: anywhere;
}
.kk-address__lines {
display: block;
font-weight: 500;
}
/* Phone and email sit under the address block, divided off from it */
.kk-address__row {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
font-size: 14px;
color: rgba(79, 69, 61, 0.85);
}
.kk-address__row:first-of-type,
.kk-address__lines + .kk-address__row {
margin-top: 0.5rem;
padding-top: 0.6rem;
border-top: 1px solid rgba(228, 226, 225, 0.8);
}
.kk-address__row .material-symbols-outlined {
flex: 0 0 auto;
font-size: 18px;
color: rgba(138, 101, 68, 0.7);
}
/* WooCommerce hangs its own icon-font glyph off these two classes. The markup
now carries a Material icon instead, so the pseudo-element has to go or
every row gets two icons. */
.kk-address__row::before {
content: none !important;
display: none !important;
}
/* Safety net: should any other Woo template render col2-set inside this panel,
neutralise the float widths and the clearfix pseudo-elements that would
otherwise become stray grid items. */
.kk-order-details .col2-set::before,
.kk-order-details .col2-set::after {
display: none !important;
}
.woocommerce .kk-order-details .col2-set .col-1,
.woocommerce .kk-order-details .col2-set .col-2 {
float: none;
width: auto;
}
/* Money reads right-aligned, the way it does on a receipt */
.kk-order-details table.shop_table thead th:last-child,
.kk-order-details table.shop_table tbody td.product-total,
.kk-order-details table.shop_table tfoot td {
text-align: right;
white-space: nowrap;
}
.kk-order-details table.shop_table tbody td,
.kk-order-details table.shop_table tfoot th,
.kk-order-details table.shop_table tfoot td {
vertical-align: middle;
}
.kk-order-details table.shop_table tbody tr:last-child td {
border-bottom: 1px solid rgba(228, 226, 225, 0.8);
}
/* The line item: thumbnail, then name over quantity / meta */
.kk-order-item {
display: flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
}
.kk-order-item__thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 0.75rem;
overflow: hidden;
background: #f0eded;
border: 1px solid rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
}
.kk-order-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Beats the blanket `.woocommerce img { border-radius: 10px }`, which
otherwise rounds the image inside an already-rounded frame. */
border-radius: 0;
mix-blend-mode: multiply;
}
.kk-order-item__thumb .material-symbols-outlined {
font-size: 24px;
color: rgba(79, 69, 61, 0.4);
}
.kk-order-item__body {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.kk-order-item__name {
font-weight: 600;
line-height: 1.35;
}
.kk-order-item__meta {
font-size: 13px;
color: #80756c;
line-height: 1.5;
}
.kk-order-details table.shop_table .product-quantity {
font-weight: 600;
color: #80756c;
}
/* Woo renders item meta as