/*! * Kahuna — storefront theme for Grav + KahunaCart * * One hand-written stylesheet, no build step. Everything is driven by the * custom properties in the token block below: the admin options write * --k-accent and --k-grid-max inline, a site's css/custom.css overrides * whatever else it wants, and nothing in the rules below needs touching. * * Light and dark come from the same token block. Every colour is written as * light-dark(light, dark) and the page's `color-scheme` picks the side: the * system preference by default, or the admin's Colour Scheme option, which * pins it through data-theme on . There is no second palette to keep in * sync. * * The storefront's own markup is very nearly NOT styled here. KahunaCart * ships assets/kahunacart.css, which styles every kahunacart-* class in the * plugin's templates and partials and resolves its internals through * --kahunacart-* -> --grav-* -> --theme-accent -> neutral fallback. This * theme integrates by publishing those tokens (see "KahunaCart integration" * below), not by writing rules against the plugin's classes. * * Four blocks are the exception, and each says so where it sits: the product * gallery (13), the catalog sidebar (14), the storefront search form (12) and * the account area (18). Those are partials and pages the theme lays out * rather than merely spaces, and every rule in them is scoped under a theme * class — which is also what puts them ahead of the plugin's single-class * rules, since the plugin's stylesheet loads after this one. * * Order of business: * 1. Tokens / 2. Texture / KahunaCart integration * 3. Reset & base / 4. Typography * 5. Layout / 6. Header & nav / 7. Footer / 8. Buttons / 9. Forms * 10. Tables / 11. Callouts / 12. Storefront: listing head, grid & cards * 13. Product detail / 14. Catalog: sidebar, tree, filters, crumbs, tags * 15. Cart / 16. Checkout / 17. Receipt & downloads * 18. Account area & login / 19. Home page / 20. Processing, denied, error * 21. Utilities / 22. Print */ /* ------------------------------------------------------------------ 1. tokens */ /* * The brand block. These are the ones a site changes; everything else is * derived from them or is furniture. */ :root { color-scheme: light dark; /* Two brand colours, split by job. --k-brand is the identity: links, current states, emphasis. --k-accent is the action: buttons, the cart count, the lead price — the things that want a hand on them. */ --k-brand: #1a6f83; --k-accent: #ca5415; --k-font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif; --k-font: "Albert Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --k-font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --k-radius: 18px; /* containers: tiles, panels, the receipt */ --k-radius-sm: 10px; /* inner elements: inputs, thumbnails, menus */ --k-radius-btn: 999px; /* buttons and chips — set to var(--k-radius-sm) for square */ } /* The admin's Colour Scheme option. `auto` sets nothing and the system preference decides; light and dark pin the page either way. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* * The palette, light side first in every pair. KahunaCart's own: salt and * sand grounds, koa ink, lagoon and board for the two brand colours. Every * neutral shares the same warm hue so nothing on the page is grey-blue next * to something grey-brown. */ :root { --k-bg: light-dark(#fcf6ea, #17110b); --k-bg-alt: light-dark(#f6ead7, #1e160e); --k-surface: light-dark(#fffcf4, #241b12); --k-surface-sunk: light-dark(#f3e6d0, #1c140d); --k-ink: light-dark(#2b1c0c, #f6ead7); --k-ink-soft: light-dark(#5c4a38, #d8c8b1); --k-muted: light-dark(#8a7660, #a28d75); --k-line: light-dark(#e4d5bc, #382b1d); --k-line-strong: light-dark(#c9b9a4, #4d3d2c); /* A brand colour used as ink (links, labels) needs to be deeper than the same colour used as a fill on the light side, and lighter on the dark side. Both are derived, so changing --k-brand or --k-accent is enough. */ --k-brand-strong: light-dark( color-mix(in oklab, var(--k-brand) 82%, #2b1c0c), color-mix(in oklab, var(--k-brand) 58%, #ffffff) ); --k-brand-deep: color-mix(in oklab, var(--k-brand) 80%, #0b1a1e); --k-brand-soft: light-dark( color-mix(in oklab, var(--k-brand) 14%, var(--k-surface)), color-mix(in oklab, var(--k-brand) 22%, var(--k-surface)) ); --k-brand-line: light-dark( color-mix(in oklab, var(--k-brand) 40%, var(--k-line)), color-mix(in oklab, var(--k-brand) 45%, var(--k-line)) ); --k-on-brand-deep: #f6ead7; --k-accent-ink: #ffffff; --k-accent-strong: light-dark( color-mix(in oklab, var(--k-accent) 84%, #2b1c0c), color-mix(in oklab, var(--k-accent) 72%, #ffffff) ); --k-accent-soft: light-dark( color-mix(in oklab, var(--k-accent) 11%, var(--k-surface)), color-mix(in oklab, var(--k-accent) 18%, var(--k-surface)) ); --k-accent-line: light-dark( color-mix(in oklab, var(--k-accent) 40%, var(--k-line)), color-mix(in oklab, var(--k-accent) 45%, var(--k-line)) ); --k-focus: color-mix(in oklab, var(--k-brand) 50%, transparent); /* The arrow on a select, since `appearance: none` takes the native one away. The same stroke as the catalogue tree's chevron, turned to point down. A data URI cannot read a custom property, so the colour is written into it and the dark palette gets its own copy below — these are --k-muted in each scheme. */ --k-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7660' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* The glyph on the line under a greyed-out button. Masked and filled with currentColor, like the catalogue tree's chevron, so it follows the ink in both schemes on its own. */ --k-info-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Cpath d='M12 7.6h.01'/%3E%3C/svg%3E"); /* The footer is the one region painted in the ink: koa with a board- coloured rule across the top, sand text. */ --k-footer-bg: light-dark(#2b1c0c, #100b07); --k-footer-ink: #e8decf; --k-footer-muted: #9a8670; --k-footer-line: rgb(246 234 215 / .14); --k-ok: light-dark(#2e7d4f, #6fc893); --k-warn: light-dark(#99610f, #e3ae52); --k-danger: light-dark(#b4382c, #f18d80); /* Shadows carry the hue of the ground they fall on, never plain black. */ --k-shadow-rgb: light-dark(62 44 22, 0 0 0); --k-shadow: 0 1px 2px rgb(var(--k-shadow-rgb) / .06), 0 10px 30px -14px rgb(var(--k-shadow-rgb) / .22); --k-shadow-lift: 0 2px 6px rgb(var(--k-shadow-rgb) / .08), 0 24px 48px -20px rgb(var(--k-shadow-rgb) / .35); } /* The one token that is a URL rather than a colour, so `light-dark()` cannot carry it: the select arrow on the dark side. Both halves of the scheme question are here — the system preference, unless the page is pinned light, and the page pinned dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --k-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a28d75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } } :root[data-theme="dark"] { --k-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a28d75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Browsers without light-dark() would otherwise lose every colour above. They get the light palette and no dark mode, which is a graceful place to land. */ @supports not (color: light-dark(#000, #fff)) { :root { --k-bg: #fcf6ea; --k-bg-alt: #f6ead7; --k-surface: #fffcf4; --k-surface-sunk: #f3e6d0; --k-ink: #2b1c0c; --k-ink-soft: #5c4a38; --k-muted: #8a7660; --k-line: #e4d5bc; --k-line-strong: #c9b9a4; --k-brand-strong: color-mix(in oklab, var(--k-brand) 82%, #2b1c0c); --k-brand-soft: color-mix(in oklab, var(--k-brand) 14%, #fffcf4); --k-brand-line: color-mix(in oklab, var(--k-brand) 40%, #e4d5bc); --k-accent-strong: color-mix(in oklab, var(--k-accent) 84%, #2b1c0c); --k-accent-soft: color-mix(in oklab, var(--k-accent) 11%, #fffcf4); --k-accent-line: color-mix(in oklab, var(--k-accent) 40%, #e4d5bc); --k-footer-bg: #2b1c0c; --k-ok: #2e7d4f; --k-warn: #99610f; --k-danger: #b4382c; --k-shadow-rgb: 62 44 22; } } /* Scale, rhythm and the few numbers the layout is built from. */ :root { --k-step--1: .875rem; --k-step-0: 1rem; --k-step-1: 1.125rem; --k-step-2: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem); --k-step-3: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --k-step-4: clamp(2.7rem, 1.5rem + 4.8vw, 5rem); --k-gap: 1.75rem; --k-gutter: clamp(1rem, 4vw, 2.5rem); --k-container: 80rem; --k-auth-width: 26rem; /* the sign-in card, and the flash region above it */ --k-grid-max: 3; --k-header-h: 4.25rem; --k-ease: cubic-bezier(.2, .7, .2, 1); --k-dur: 180ms; --k-z-header: 30; --k-z-menu: 40; --k-z-grain: 60; --k-z-skip: 100; } /* Kept for sites whose custom.css keys off the body class the font option used to set; the font stacks above already fall back on their own. */ body.has-display-font { --k-font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif; } /* ----------------------------------------------------------------- 2. texture */ /* * A film of grain over the whole page. It is what stops a flat sand colour * from reading as a flat sand colour. Fixed, blended, and inert to the * pointer; remove it with `body::before { content: none }` in custom.css. */ body::before { content: ""; position: fixed; inset: 0; z-index: var(--k-z-grain); pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* ------------------------------------------------- KahunaCart integration */ /* * The entire hand-off between this theme and the KahunaCart storefront. * * The plugin's own stylesheet (assets/kahunacart.css) owns the appearance of * every kahunacart-* class in its templates and partials. It resolves each of * its internal --kc-* values through the chain * * --kahunacart-* (site or theme override — what this block writes) * -> --grav-* (a theme's design-token system) * -> --theme-accent (generic hook any theme can publish) * -> neutral fallback that follows the page's own palette * * so a theme claims the storefront by naming tokens, never by out-specifying * the plugin's selectors. Nothing in this block is a rule against plugin * markup, and the general answer to "the storefront looks wrong" is a token * here or a change in the plugin's CSS — not a selector. * * These map to Kahuna's own --k-* tokens, which already carry both sides of * the palette — so light and dark are both covered by defining the hand-off * exactly once. */ :root { --kahunacart-fg: var(--k-ink); --kahunacart-bg: var(--k-bg); --kahunacart-muted: var(--k-muted); --kahunacart-subtle: var(--k-muted); --kahunacart-border: var(--k-line); --kahunacart-border-strong: var(--k-line-strong); /* Split by job, the way the plugin uses them: --accent is ink and borders, --accent-strong is the only one that ever fills a box. */ --kahunacart-accent: var(--k-brand-strong); --kahunacart-accent-strong: var(--k-accent); --kahunacart-accent-ink: var(--k-accent-strong); --kahunacart-on-accent-strong: var(--k-accent-ink); --kahunacart-surface: var(--k-surface); --kahunacart-surface-2: var(--k-surface-sunk); --kahunacart-surface-sunk: var(--k-surface-sunk); --kahunacart-card: var(--k-surface); --kahunacart-input: var(--k-surface); --kahunacart-radius: var(--k-radius-sm); --kahunacart-radius-lg: var(--k-radius); --kahunacart-font-mono: var(--k-font-mono); --kahunacart-success: var(--k-ok); --kahunacart-warning: var(--k-warn); --kahunacart-danger: var(--k-danger); --kahunacart-ease: var(--k-ease); --kahunacart-duration: var(--k-dur); /* --- generic tokens, for anything else that reads them ---------------- */ --theme-accent: var(--k-brand); --grav-bg: var(--k-bg); --grav-bg-subtle: var(--k-surface-sunk); --grav-bg-elevated: var(--k-surface); --grav-fg: var(--k-ink); --grav-fg-muted: var(--k-muted); --grav-fg-subtle: var(--k-muted); --grav-border: var(--k-line); --grav-border-strong: var(--k-line-strong); --grav-radius-md: var(--k-radius-sm); --grav-radius-lg: var(--k-radius); --grav-font-display: var(--k-font-display); --grav-font-mono: var(--k-font-mono); --grav-success: var(--k-ok); --grav-warning: var(--k-warn); --grav-danger: var(--k-danger); --grav-header-height: var(--k-header-h); --grav-ease: var(--k-ease); --grav-duration-2: var(--k-dur); } /* --------------------------------------------------------- 3. reset and base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--k-header-h) + 1rem); } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--k-bg); color: var(--k-ink); font-family: var(--k-font); font-size: var(--k-step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--k-brand-strong); text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--k-brand-line); transition: color var(--k-dur) var(--k-ease), text-decoration-color var(--k-dur) var(--k-ease); } a:hover { color: var(--k-ink); text-decoration-color: currentColor; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--k-focus); outline-offset: 2px; border-radius: var(--k-radius-sm); } ::selection { background: var(--k-brand); color: var(--k-on-brand-deep); } hr { border: 0; border-top: 1px solid var(--k-line); margin: 2.5rem 0; } code, kbd, samp, pre { font-family: var(--k-font-mono); font-size: .9em; } code { background: var(--k-surface-sunk); border: 1px solid var(--k-line); border-radius: 5px; padding: .1em .35em; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ------------------------------------------------------------ 4. typography */ h1, h2, h3, h4, h5, h6 { font-family: var(--k-font-display); font-weight: 700; font-optical-sizing: auto; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; } h1, .k-page-title { font-size: var(--k-step-3); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; } h2 { font-size: var(--k-step-2); } h3 { font-size: var(--k-step-1); font-family: var(--k-font); font-weight: 600; letter-spacing: -.01em; } h4, h5, h6 { font-family: var(--k-font); font-size: var(--k-step-0); font-weight: 600; } p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1rem; } /* Labels: the small-caps voice the theme uses for anything that names a region rather than reads as a sentence. One place to change it. */ .k-label-caps, .k-panel-title, .k-section-eyebrow { font-family: var(--k-font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--k-muted); } .k-page-lede { font-size: var(--k-step-1); color: var(--k-ink-soft); max-width: 48ch; text-wrap: pretty; } .k-prose { max-width: 66ch; text-wrap: pretty; } .k-prose > :last-child { margin-bottom: 0; } .k-prose h2 { margin-top: 2em; } .k-prose h3 { margin-top: 1.6em; } .k-prose li + li { margin-top: .25em; } .k-prose blockquote { border-left: 3px solid var(--k-brand); padding-left: 1.25rem; margin-left: 0; color: var(--k-ink-soft); font-size: 1.08em; } .k-prose pre { background: var(--k-surface-sunk); border: 1px solid var(--k-line); border-radius: var(--k-radius-sm); padding: 1rem; overflow-x: auto; } .k-prose pre code { background: none; border: 0; padding: 0; } .k-prose ul, .k-prose ol { padding-inline-start: 1.4rem; } .k-prose li::marker { color: var(--k-muted); } .k-prose h2, .k-prose h3, .k-prose h4 { text-wrap: balance; } .k-prose strong { color: var(--k-ink); font-weight: 600; } .k-prose hr { margin-block: 2rem; } /* Markdown tables. `.k-table` is the class the theme's own templates put on a cart or an order table; a table written in a page has no class to give it, so the same treatment is written against the element inside prose. */ .k-prose table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--k-line); font-size: .95rem; } .k-prose :is(th, td) { padding: .7rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--k-line); overflow-wrap: anywhere; } .k-prose :is(th, td):last-child { padding-inline-end: 0; } /* A content table in this theme is nearly always a name and an explanation: a short label on the left — "KahunaCart Licenses", "Shortcode Core" — and a sentence or two on the right. Automatic table layout shares the width out by how much each column wants, and a column of sentences wants far more than a column of names, so the names end up in a strip barely wide enough for one word and come apart a word per line. Holding the first cell of every row on one line asks for exactly the width the longest name needs and leaves the whole rest of the table to the explanation. */ .k-prose :is(th, td):first-child { padding-inline-start: 0; white-space: nowrap; } .k-prose thead th { padding-block: .55rem; font-family: var(--k-font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--k-muted); } .k-prose tbody tr:hover { background: var(--k-surface); } /* On a phone the two columns can want more room than there is. A markdown table has no wrapper to scroll inside — Grav writes the `` straight into the content — so the table itself becomes the scroll port, the way the plugin's own cart and order tables do at this width: `display: block` puts the row groups in a single anonymous table box that keeps the columns lined up and is free to be wider than the port. The page then stays put and the table is what moves sideways. */ @media (max-width: 40rem) { .k-prose table { display: block; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; } /* With the names held on one line there is not much of a phone left for the explanation beside them, and a paragraph two words wide is no better than a name one word wide. Every column after the first asks for a readable measure instead, which is what pushes the table past the port and gives the scroll something to do. */ .k-prose :is(th, td) ~ :is(th, td) { min-inline-size: 15rem; } } .k-num, .k-price, .k-tabular { font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- 5. layout */ .k-container { width: 100%; max-width: var(--k-container); margin-inline: auto; padding-inline: var(--k-gutter); } .k-main { flex: 1 0 auto; padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem); } /* The home page opens with its own hero and needs no top padding of its own. */ body.tmpl-home .k-main { padding-top: 0; } .k-modular > * + * { margin-top: clamp(2rem, 6vw, 4rem); } /* * An ordinary page — the `default` template, which is what a hand-written * markdown page gets. * * The storefront templates fill the container because they are grids of * things. A page of prose is not, and a 68ch measure pinned to the left edge * of an 80rem container is a narrow column of text with half a screen of * nothing beside it. So the article is centred in the container and the * measure stays a measure: nobody wants an 80rem line of text either. * * The two things in a markdown page that genuinely want more room than a * sentence does — a table and a code block — lean out past the measure by * `--k-measure-bleed`, which is zero until the viewport is wide enough that * leaning out cannot push them off the screen. Everything else stays on the * measure, so the left edge of the article is one straight line all the way * down. * * The marketing `home` template is not this; it has its own full-width layout * in section 19 and never carries `.k-page`. */ .k-page { --k-measure: 68ch; --k-measure-bleed: 0rem; max-width: var(--k-measure); margin-inline: auto; } /* The measure is the article's now, so the wrapper stops setting a second, narrower one of its own. */ .k-page > .k-prose { max-width: none; } .k-page > .k-prose > :is(table, pre, figure, .k-wide) { width: calc(100% + 2 * var(--k-measure-bleed)); margin-inline: calc(-1 * var(--k-measure-bleed)); } @media (min-width: 64rem) { .k-page { --k-measure-bleed: 5rem; } } .k-page-hero { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } /* A section heading with an action on the right: "Featured — View all". */ .k-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.5rem; } .k-section-head h2 { margin: 0; } .k-section-eyebrow { display: block; margin-bottom: .5rem; } .k-link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; text-decoration: none; color: var(--k-ink-soft); white-space: nowrap; } .k-link-arrow::after { content: "\2192"; transition: transform var(--k-dur) var(--k-ease); } .k-link-arrow:hover { color: var(--k-brand-strong); } .k-link-arrow:hover::after { transform: translateX(3px); } .k-back { margin-top: 1.5rem; font-size: .93rem; } .k-back a { text-decoration: none; color: var(--k-muted); } .k-back a:hover { color: var(--k-brand-strong); text-decoration: underline; } .k-empty { color: var(--k-muted); font-size: var(--k-step-1); } .k-empty-state { background: var(--k-surface); border: 1px dashed var(--k-line-strong); border-radius: var(--k-radius); padding: clamp(2rem, 6vw, 4rem); text-align: center; } .k-empty-state > :last-child { margin-bottom: 0; } /* * Spacing wrappers around the plugin's own partials. These exist so the theme * can place the storefront's blocks in its layout without writing a single * rule against a kahunacart-* class — the wrapper is theme markup, what is * inside it belongs to the plugin's stylesheet. */ .k-messages:not(:empty) { margin-bottom: 1.75rem; } .k-totals { margin-top: 1rem; } .k-coupon { margin-top: .5rem; } /* * The cart's estimate box. It is a panel's worth of content that htmx replaces * whole, so everything it needs is inside `#kahunacart-estimate` and the panel * around it is the part that survives a swap. Same loading state as the search * grid, for the same reason: a spinner over a block about to be replaced by a * nearly identical block is movement rather than information. */ .k-estimate { transition: opacity var(--k-dur) var(--k-ease); } .k-estimate.htmx-request { opacity: .5; } .k-estimate .k-panel-title { margin-bottom: .85rem; } .k-estimate-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem .85rem; margin-bottom: .9rem; } .k-estimate-form .button { width: 100%; } .k-estimate-lines { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--k-line-strong); font-size: .93rem; } .k-estimate-lines dt { margin: 0; color: var(--k-ink-soft); } .k-estimate-lines dd { margin: 0; text-align: right; white-space: nowrap; } .k-estimate-lines dd.k-estimate-quiet { color: var(--k-muted); white-space: normal; } .k-estimate-total-label, .k-estimate-lines .k-estimate-total { font-weight: 600; color: var(--k-ink); padding-top: .45rem; border-top: 1px solid var(--k-line); } .k-estimate-note { margin: .8rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--k-muted); } /* The coupon form ships in a dashed box of its own; inside a Kahuna panel that is a box in a box, so the wrapper takes the box away. */ .k-coupon .kahunacart-coupon { border: 0; padding: 0; margin: 0; } /* -------------------------------------------------------- 6. header and nav */ .k-skip-link { position: absolute; left: .75rem; top: -4rem; z-index: var(--k-z-skip); background: var(--k-ink); color: var(--k-bg); padding: .6rem 1rem; border-radius: var(--k-radius-sm); text-decoration: none; transition: top .15s ease; } .k-skip-link:focus { top: .75rem; color: var(--k-bg); } /* The announcement bar: one line above the header, off until the option is filled in. Tinted with the accent rather than painted a different colour so it reads as part of the page, not a banner dropped on it. */ .k-announce { background: var(--k-brand-deep); color: var(--k-on-brand-deep); font-size: .88rem; font-weight: 500; text-align: center; padding: .5rem var(--k-gutter); text-wrap: balance; } .k-announce p { margin: 0; } .k-announce a { color: inherit; text-decoration-color: currentColor; } .k-announce strong { color: #fff; } .k-header { position: relative; z-index: var(--k-z-header); background: color-mix(in srgb, var(--k-bg) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--k-line); } body.has-sticky-header .k-header { position: sticky; top: 0; } /* Brand on the left, the page links in the middle, the store controls on the right. The outer columns share the leftover space so the middle stays on the centre line whatever the brand and the controls weigh. */ .k-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: var(--k-header-h); } .k-brand { justify-self: start; display: inline-flex; align-items: center; gap: .7rem; font-family: var(--k-font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; color: var(--k-ink); text-decoration: none; } .k-brand:hover { color: var(--k-ink); } /* The second word of a two-word store name takes the action colour: KahunaCart. A one-word name has no and is simply the ink. */ .k-brand-name em { font-style: normal; color: var(--k-accent); } /* The default mark is KahunaCart's microbus, shipped with the theme. A logo uploaded in the theme options replaces the whole lockup. */ .k-brand-mark { width: 3rem; height: 3rem; flex: none; } .k-brand-logo { height: 2.5rem; width: auto; } .k-footer .k-brand { color: var(--k-footer-ink); font-size: 1.35rem; } .k-footer .k-brand-mark { width: 2.5rem; height: 2.5rem; } .k-nav-list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; } .k-nav-link { display: inline-block; padding: .45rem .8rem; border-radius: var(--k-radius-btn); color: var(--k-ink); font-weight: 600; font-size: .95rem; text-decoration: none; transition: background-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease); } .k-nav-link:hover { background: var(--k-bg-alt); color: var(--k-ink); } .k-nav-link.is-active { color: var(--k-brand-strong); background: var(--k-brand-soft); } .k-actions { justify-self: end; display: flex; align-items: center; gap: .5rem; } .k-cart-link { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem .5rem .8rem; border: 1px solid var(--k-line-strong); border-radius: var(--k-radius-btn); color: var(--k-ink); font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color var(--k-dur) var(--k-ease), background-color var(--k-dur) var(--k-ease); } .k-cart-link:hover { border-color: var(--k-ink); background: var(--k-surface); color: var(--k-ink); } .k-cart-link.has-items { border-color: var(--k-accent-line); } .k-cart-icon { width: 1.15rem; height: 1.15rem; flex: none; } .k-cart-badge { min-width: 1.4rem; padding: 0 .35rem; border-radius: var(--k-radius-btn); background: var(--k-bg-alt); color: var(--k-muted); font-family: var(--k-font-mono); font-size: .74rem; font-weight: 600; line-height: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; } .k-cart-link.has-items .k-cart-badge { background: var(--k-accent); color: var(--k-accent-ink); } .k-signin { padding: .5rem .8rem; border-radius: var(--k-radius-btn); color: var(--k-ink-soft); text-decoration: none; font-weight: 500; white-space: nowrap; } .k-signin:hover { background: var(--k-bg-alt); color: var(--k-ink); } /* * The light / dark / auto control. * * Which of the three icons and which of the three state names are visible is * decided entirely here, from `data-scheme-pref` on — written by the * inline script in the head before the first paint. No JavaScript writes into * the button, so the control never shows one state for a frame and another * afterwards. * * A page with nothing stored carries no attribute at all, so every `auto` rule * is paired with a `:not([data-scheme-pref])` twin. That is also what a * JavaScript-free browser lands on, which is the honest answer for it: the * system preference is what it is following. */ .k-scheme { display: inline-flex; align-items: center; gap: .55rem; border: 1px solid var(--k-line-strong); border-radius: var(--k-radius-btn); background: transparent; color: var(--k-ink-soft); font: inherit; cursor: pointer; transition: border-color var(--k-dur) var(--k-ease), background-color var(--k-dur) var(--k-ease), color var(--k-dur) var(--k-ease); } .k-scheme:hover { border-color: var(--k-ink); background: var(--k-surface); color: var(--k-ink); } .k-scheme--control { width: 2.6rem; height: 2.6rem; padding: 0; justify-content: center; } .k-scheme-icons { display: inline-flex; } .k-scheme-icon { display: none; width: 1.2rem; height: 1.2rem; flex: none; } :root:not([data-scheme-pref]) .k-scheme-icon--auto, :root[data-scheme-pref="auto"] .k-scheme-icon--auto, :root[data-scheme-pref="light"] .k-scheme-icon--light, :root[data-scheme-pref="dark"] .k-scheme-icon--dark { display: block; } .k-scheme-state > span { display: none; } :root:not([data-scheme-pref]) .k-scheme-state--auto, :root[data-scheme-pref="auto"] .k-scheme-state--auto, :root[data-scheme-pref="light"] .k-scheme-state--light, :root[data-scheme-pref="dark"] .k-scheme-state--dark { display: inline; } /* The icon variant says everything with the icon, so the two words go off-screen rather than away — they are the button's whole accessible name once the icon is aria-hidden. */ .k-scheme--control .k-scheme-title, .k-scheme--control .k-scheme-state { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The panel copy: a labelled row in the mobile menu, matching the nav links it sits under. Hidden until that menu is the one in use. */ .k-scheme--panel { display: none; width: 100%; margin-top: .5rem; padding: .7rem .9rem; border: 0; border-radius: var(--k-radius-sm); color: var(--k-ink); font-size: 1.05rem; font-weight: 600; text-align: left; } .k-scheme--panel:hover { background: var(--k-bg-alt); } .k-scheme--panel .k-scheme-state { margin-left: auto; color: var(--k-muted); font-weight: 500; font-size: .95rem; } .k-nav-toggle { display: none; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--k-line-strong); border-radius: var(--k-radius-btn); background: transparent; color: var(--k-ink); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .k-nav-toggle-bar { display: block; width: 1.05rem; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; } @media (max-width: 51.99rem) { .k-header-inner { grid-template-columns: 1fr auto; padding-block: .4rem; } .k-nav-toggle { display: flex; } /* Wordless on a phone; the icon and the badge carry it. */ .k-cart-label { display: none; } .k-cart-link { padding-inline: .7rem; } /* The panel opens under the whole header row; `order` keeps the controls in the top row rather than letting the panel push them down. */ .k-nav { display: none; order: 10; grid-column: 1 / -1; padding-block: .75rem 1.25rem; border-top: 1px solid var(--k-line); } body.k-nav-open .k-nav { display: block; } body.k-nav-open .k-nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.k-nav-open .k-nav-toggle-bar:nth-child(2) { opacity: 0; } body.k-nav-open .k-nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .k-nav-list { flex-direction: column; align-items: stretch; gap: .1rem; } .k-nav-link { padding: .7rem .9rem; font-size: 1.05rem; border-radius: var(--k-radius-sm); } .k-nav-link.is-active { box-shadow: inset 3px 0 0 var(--k-brand); background: var(--k-brand-soft); } .k-nav .k-signin { display: block; margin-top: .5rem; padding: .7rem .9rem; } .k-actions .k-signin { display: none; } /* The scheme control moves into the panel with the sign-in link, for the same reason: the controls row on a phone is already carrying the cart and the menu button. */ .k-nav .k-scheme--panel { display: flex; } .k-actions .k-scheme--control { display: none; } } @media (min-width: 52rem) { .k-nav .k-signin { display: none; } } /* ---------------------------------------------------------------- 7. footer */ .k-footer { margin-top: clamp(3rem, 10vw, 6rem); border-top: 5px solid var(--k-accent); background: var(--k-footer-bg); color: var(--k-footer-ink); font-size: .93rem; } .k-footer-grid { display: grid; gap: 2.25rem 3rem; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3rem); } @media (min-width: 52rem) { .k-footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr)); } } .k-footer-brand { max-width: 36ch; } .k-footer-brand .k-brand { margin-bottom: .9rem; } .k-footer-tagline { color: var(--k-footer-muted); margin: 0 0 1rem; text-wrap: pretty; } .k-footer a { color: var(--k-footer-ink); text-decoration-color: var(--k-footer-line); } .k-footer a:hover { color: #fff; text-decoration-color: currentColor; } .k-footer-text > :last-child { margin-bottom: 0; } .k-footer-group h2 { font-family: var(--k-font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--k-footer-muted); margin: 0 0 .9rem; } .k-footer-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .k-footer-group a { color: var(--k-footer-ink); text-decoration: none; } .k-footer-group a:hover { color: #fff; text-decoration: underline; } .k-footer-bottom { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; justify-content: space-between; padding-block: 1.25rem 1.75rem; border-top: 1px solid var(--k-footer-line); font-size: .85rem; color: var(--k-footer-muted); } .k-footer-bottom p { margin: 0; } .k-footer-bottom a { color: inherit; text-decoration: none; } .k-footer-bottom a:hover { color: #fff; text-decoration: underline; } .k-footer-meta { display: flex; gap: .6rem; } /* --------------------------------------------------------------- 8. buttons */ /* * `.button` is the class the plugin's partials and the Form plugin both emit, * so it is the one the theme styles. A bare