/* 10-base.css — ground, type scale, links, focus. Also the bridge into Voxel and Elementor, which is what makes one file re-skin the whole site. */ /* Voxel derives its entire appearance from eight custom properties it sets on (voxel/assets/dist/commons.css). Redefining them here re-skins every Voxel component — buttons, filters, popups, forms, cart, inbox, the create-post flow — without touching the parent theme. */ body{ --ts-shade-1:var(--tb-ink); --ts-shade-2:var(--tb-muted); --ts-shade-3:var(--tb-border-strong); --ts-shade-4:var(--tb-border); --ts-shade-5:#F1EBE4; --ts-shade-6:#FAF5F1; --ts-shade-7:var(--tb-ground); --ts-accent-1:var(--tb-action); --ts-accent-2:var(--tb-action-hover); background-color:var(--tb-ground); color:var(--tb-body); font-family:var(--tb-sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Elementor widgets read the Kit, not this file, for their defaults. Mapping the Kit's own variables here covers every widget I haven't overridden. This is a stopgap — handmatig.md #1 asks Fatih to set them in the Kit UI so the editor shows the same thing the visitor sees. */ .elementor-kit-6065{ --e-global-color-primary:var(--tb-ink); --e-global-color-text:var(--tb-muted); --e-global-color-accent:var(--tb-action); --e-global-color-b5c83a0:var(--tb-action-hover); --e-global-color-1892ed8:var(--tb-blush); --e-global-color-9339ae9:var(--tb-mint-solid); --e-global-color-7d14244:var(--tb-border); /* The Kit sets "Text" typography to Fraunces — a display face, used for all body copy. DM Sans reads; Fraunces keeps the headings. Family only, so the per-widget sizes Fatih set are untouched. */ --e-global-typography-text-font-family:"DM Sans"; --e-global-typography-secondary-font-family:"DM Sans"; } h1,h2,h3,h4, .elementor-heading-title{ font-family:var(--tb-serif); color:var(--tb-ink); letter-spacing:-.02em; } h1,.elementor-widget-heading h1.elementor-heading-title{letter-spacing:-.025em;} a{color:inherit;} /* Every interactive element needs a visible ring at 3:1 (CLAUDE_1.md §6). :focus-visible so a mouse click doesn't paint one. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--tb-action); outline-offset:2px; border-radius:2px; }