/* * Utility pages: 404, search, favourites, empty cart, login/register, order * tracking, my account. One shared vocabulary so they read as the same site. * * Site-wide by design — these pages are spread across WordPress and * WooCommerce templates, so page-scoped CSS would leave half of them unstyled. */ .utility-page { padding-block: 44px 64px; } .utility-page--flush { padding-block: 24px 48px; } /* ── Shared empty / message state ────────────────────────────────────────── */ .state { max-width: 560px; margin-inline: auto; padding-block: 24px; text-align: center; } .state__icon { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-block-end: 18px; border-radius: 50%; background: #ede8fd; color: var(--color-primary); } .state__icon .icon { width: 34px; height: 34px; stroke-width: 1.7; } .state__numeral { margin: 0 0 6px; font-family: var(--font-logo); font-size: clamp(56px, 9vw, 88px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--color-primary); } .state__title { margin: 0 0 10px; font-family: var(--font-display); font-size: var(--fs-section); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; } .state__text { margin: 0 auto 24px; max-width: 46ch; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-muted); } .state__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .state__action { display: inline-block; padding: 13px 26px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; text-transform: uppercase; } .state__action--primary { background: #1a1a1a; color: var(--color-white); } .state__action--primary:hover { background: var(--color-primary); } .state__action--ghost { border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-text); } .state__action--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } .utility-page__search { max-width: 520px; margin: 26px auto 0; } /* ── Search results ──────────────────────────────────────────────────────── */ /* * Not `.search-results`: WordPress puts that exact word on for every * search page, so this rule styled the whole document and shrank the header and * shipping bar to a 760px column along with the results. */ .search-list { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; } .search-result { padding-block: 20px; border-block-end: 1px solid var(--color-border); } .search-result__title { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--fs-subsection); font-weight: 700; text-transform: uppercase; } .search-result__title a { color: inherit; text-decoration: none; } .search-result__title a:hover { color: var(--color-primary); } .search-result__excerpt { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-muted); } /* ── Empty cart categories ───────────────────────────────────────────────── */ .cart-empty__cats { margin-block-start: 20px; } .cart-empty__heading { margin: 0 0 18px; font-family: var(--font-display); font-size: var(--fs-subsection); font-weight: 700; text-align: center; text-transform: uppercase; } .cart-empty__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--banner-gap); margin: 0; padding: 0; list-style: none; } /* ── Account: login / register switcher ─────────────────────────────────── */ .account { max-width: 460px; margin-inline: auto; } .account__card { padding: 8px 30px 30px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); } /* Segmented control. Hidden without JavaScript, where both panels render. */ .account__tabs { display: none; gap: 4px; margin: 22px 0 26px; padding: 4px; border-radius: 999px; background: #eeeeee; } .js .account__tabs { display: flex; } .account__tab { flex: 1 1 0; padding: 11px 10px; border-radius: 999px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.05em; text-align: center; text-decoration: none; text-transform: uppercase; color: var(--color-text-muted); } .account__tab.is-active { background: var(--color-white); color: var(--color-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .account__panel { padding-block-start: 22px; } .js .account__panel { padding-block-start: 0; } /* Only hide the inactive panel once the tabs are available to bring it back. */ .js .account__panel[data-inactive] { display: none; } .account__title { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--fs-subsection); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; } .account__lead { margin: 0 0 22px; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--color-text-muted); } /* WooCommerce wraps these forms in their own bordered box. */ .account form.login, .account form.register, .track-order form.track_order { margin: 0; padding: 0; border: 0; } .account .form-row, .track-order .form-row { margin: 0 0 16px; text-align: start; } .account label, .track-order label { display: block; margin-block-end: 6px; font-family: var(--font-body); font-size: 14px; font-weight: 600; } .account .input-text, .track-order .input-text, .account input[type="text"], .account input[type="email"], .account input[type="password"] { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-white); font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text); } .account .input-text:focus, .track-order .input-text:focus { border-color: var(--color-primary); outline: 2px solid var(--header-search-glow); outline-offset: 0; } .account__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .account__remember { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; } .account__remember input { width: auto; height: auto; accent-color: var(--color-primary); } .account__link { font-family: var(--font-body); font-size: 14px; color: var(--color-primary); text-underline-offset: 3px; } .account__note { margin: 0 0 16px; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); } .account__submit { width: 100%; padding: 15px 20px; border: 0; border-radius: 8px; background: #1a1a1a; color: var(--color-white); font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; } .account__submit:hover { background: var(--color-primary); } .account__switch { margin: 18px 0 0; font-family: var(--font-body); font-size: 14px; text-align: center; color: var(--color-text-muted); } .account__switch a { color: var(--color-primary); font-weight: 600; text-underline-offset: 3px; } .account .woocommerce-privacy-policy-text p { margin: 0 0 16px; font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--color-text-muted); } .account .woocommerce-privacy-policy-text a { color: var(--color-primary); } .account__benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 22px 0 0; padding: 0; list-style: none; } .account__benefits li { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); } .account__benefits .icon { width: 17px; height: 17px; color: var(--color-primary); } /* Order tracking keeps the same card language. */ .track-order { max-width: 460px; margin-inline: auto; padding: 30px 28px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); text-align: center; } .track-order__help { margin: 18px 0 0; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); } .track-order__help a { color: var(--color-primary); text-underline-offset: 3px; } .track-order .account__submit, .track-order button[type="submit"] { width: 100%; padding: 15px 20px; border: 0; border-radius: 8px; background: #1a1a1a; color: var(--color-white); font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; } /* ── My account ──────────────────────────────────────────────────────────── */ .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0 0 24px; padding: 0; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation li { border-block-end: 1px solid var(--color-border); } .woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 12px 4px; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: 0.03em; color: var(--color-text); text-decoration: none; text-transform: uppercase; } .woocommerce-account .woocommerce-MyAccount-navigation a:hover, .woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color: var(--color-primary); } @media (min-width: 900px) { .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 230px; } .woocommerce-account .woocommerce-MyAccount-content { float: right; width: calc(100% - 270px); } } @media (max-width: 899px) { .account-auth--split { grid-template-columns: minmax(0, 1fr); } .cart-empty__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── Customer-service pages ──────────────────────────────────────────────── */ .policy { max-width: 760px; margin-inline: auto; } .policy__head { margin-block-end: 34px; text-align: center; } .policy__title { margin: 0 0 10px; font-family: var(--font-display); font-size: var(--fs-page-title); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; } .policy__intro { max-width: 54ch; margin: 0 auto; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--color-text-muted); } .policy__section + .policy__section { margin-block-start: 30px; padding-block-start: 26px; border-block-start: 1px solid var(--color-border); } .policy__heading { margin: 0 0 14px; font-family: var(--font-display); font-size: var(--fs-subsection); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .policy__list { margin: 0; padding: 0; list-style: none; } /* A purple tick rather than a bullet: these are things we do, not a shopping list. */ .policy__list li { position: relative; padding-inline-start: 26px; margin-block-end: 12px; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; } .policy__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); } .policy__list a { color: var(--color-primary); text-underline-offset: 3px; } /* FAQ accordion */ .policy__qa { border-block-end: 1px solid var(--color-border); } .policy__q { margin: 0; } .policy__q-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 0; border: 0; background: none; font-family: var(--font-body); font-size: 16px; font-weight: 600; text-align: start; color: var(--color-text); cursor: pointer; } .policy__q-toggle:hover { color: var(--color-primary); } .policy__q-icon { position: relative; flex: none; width: 14px; height: 14px; } .policy__q-icon::before, .policy__q-icon::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0; width: 100%; height: 2px; background: var(--color-primary); transform: translateY(-50%); } .policy__q-icon::after { transform: translateY(-50%) rotate(90deg); transition: opacity 0.15s ease; } .policy__q-toggle[aria-expanded="true"] .policy__q-icon::after { opacity: 0; } .policy__a { padding: 0 0 18px; } .policy__a p { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--color-text-muted); } .policy__foot { margin-block-start: 34px; padding: 18px 20px; border-radius: 12px; background: var(--header-bg); text-align: center; } .policy__foot p { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); } .policy__foot a { color: var(--color-primary); font-weight: 600; text-underline-offset: 3px; } /* ── Contact form ────────────────────────────────────────────────────────── */ .contact-form { margin-block-start: 30px; padding-block-start: 26px; border-block-start: 1px solid var(--color-border); } .contact-form__lead { margin: 0 0 20px; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; color: var(--color-text-muted); } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .contact-form .form-row { margin: 0 0 16px; } .contact-form label { display: block; margin-block-end: 6px; font-family: var(--font-body); font-size: 14px; font-weight: 600; } .contact-form__optional { font-weight: 400; color: var(--color-text-muted); } .contact-form .input-text, .contact-form select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-white); font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-text); } /* Match the 48px control height without the text sitting against the top. */ .contact-form select { appearance: none; padding-inline-end: 38px; background-image: url( 'data:image/svg+xml;charset=utf-8,' ); background-repeat: no-repeat; background-position: right 14px center; line-height: 46px; } .contact-form textarea.input-text { height: auto; padding: 12px 14px; line-height: 1.55; resize: vertical; } .contact-form .input-text:focus, .contact-form select:focus { border-color: var(--color-primary); outline: 2px solid var(--header-search-glow); outline-offset: 0; } .contact-form__note { margin: 0 0 18px; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); } .contact-form__note a { color: var(--color-primary); font-weight: 600; text-underline-offset: 3px; } .contact-form__submit { min-width: 200px; height: 48px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--color-primary); color: var(--color-white); font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease; } .contact-form__submit:hover, .contact-form__submit:focus-visible { background: var(--color-primary-dark); } /* Confirmation shown in the form's place once it is submitted. */ .contact-form__thanks { padding: 32px 24px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--header-bg); text-align: center; } .contact-form__thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-block-end: 14px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); } .contact-form__thanks-icon .icon { width: 26px; height: 26px; stroke-width: 2.6; } .contact-form__thanks-title { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--fs-subsection); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .contact-form__thanks-text { max-width: 46ch; margin: 0 auto 10px; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-muted); } .contact-form__thanks-meta { margin: 0; font-family: var(--font-body); font-size: 14px; color: var(--color-text-muted); } .contact-form__thanks-meta a { color: var(--color-primary); font-weight: 600; text-underline-offset: 3px; } /* ── Policy tables ───────────────────────────────────────────────────────── */ .policy__table-scroll { /* Four columns do not fit a phone; scroll the table rather than the page. Both axes declared — see the overflow rule in the README. */ overflow-x: auto; overflow-y: hidden; margin-block-start: 6px; border: 1px solid var(--color-border); border-radius: 12px; } .policy__table-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .policy__table { width: 100%; min-width: 520px; border-collapse: collapse; font-family: var(--font-body); font-size: var(--fs-body); text-align: start; } .policy__table th, .policy__table td { padding: 12px 16px; text-align: start; vertical-align: middle; } .policy__table thead th { background: var(--header-bg); font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .policy__table tbody tr + tr th, .policy__table tbody tr + tr td { border-block-start: 1px solid var(--color-border); } /* The destination column is the row's label, so it carries the weight. */ .policy__table tbody th { font-weight: 600; line-height: 1.4; } .policy__table tbody td { color: var(--color-text-muted); white-space: nowrap; } /* Beats `.policy__table tbody td`, which would otherwise mute it. */ .policy__table tbody td.policy__table-free { color: var(--color-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .policy__table-note { margin: 10px 0 0; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--color-text-muted); } @media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } .contact-form__submit { width: 100%; } }