/* * Kindi base layer. * Bridges theme.json presets to short brand aliases and provides custom * utilities that cannot be expressed in theme.json (gradients, marquee setup, * text strokes, scrollbar hiding). Keep this file tiny — design tokens live in * theme.json. */ :root { /* Short aliases → theme.json presets (single source of truth) */ --brand-red: var(--wp--preset--color--brand-red); --brand-red-dark: var(--wp--preset--color--brand-red-dark); --brand-red-soft: var(--wp--preset--color--brand-red-soft); --brand-blue: var(--wp--preset--color--brand-blue); --brand-blue-soft: var(--wp--preset--color--brand-blue-soft); --brand-navy: var(--wp--preset--color--brand-navy); --brand-navy-dark: var(--wp--preset--color--brand-navy-dark); --brand-yellow: var(--wp--preset--color--brand-yellow); --surface: var(--wp--preset--color--surface); --background: var(--wp--preset--color--background, #fff); --accent: var(--wp--preset--color--brand-yellow); --foreground: var(--wp--preset--color--foreground); --muted: var(--wp--preset--color--muted); --muted-foreground: var(--wp--preset--color--muted-foreground); --border: var(--wp--preset--color--border); --shadow-card: var(--wp--preset--shadow--card); --shadow-pop: var(--wp--preset--shadow--pop); --radius-base: var(--wp--custom--radius--base); } html { direction: rtl; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Accessibility: always-visible, high-contrast focus ring */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--brand-red); outline-offset: 2px; border-radius: 4px; } /* Screen-reader-only text */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip link (rendered in header part). Hidden ABOVE the viewport — never to the * side, so it can't create horizontal scroll (especially in RTL). */ .skip-link { position: absolute; top: -200px; left: 1rem; z-index: 100000; padding: 0.75rem 1.25rem; background: var(--brand-navy); color: #fff; font-weight: 700; border-radius: 0 0 0.5rem 0.5rem; } .skip-link:focus { top: 0; } /* Accessibility toolbar preferences (set by a11y.js on ) */ .a11y-contrast { filter: contrast(1.3) saturate(1.15); } .a11y-links a { text-decoration: underline !important; text-underline-offset: 2px; } .a11y-readable, .a11y-readable * { font-family: Arial, "Helvetica Neue", sans-serif !important; letter-spacing: 0.01em; } .a11y-stop-motion *, .a11y-stop-motion *::before, .a11y-stop-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Accessibility toolbar UI */ .kindi-a11y { position: fixed; bottom: 6rem; left: 1.5rem; z-index: 220; width: 17rem; max-width: calc(100vw - 2rem); background: #fff; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35); border: 1px solid var(--border); overflow: hidden; } .kindi-a11y[hidden] { display: none; } .kindi-a11y__head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--brand-navy); color: #fff; } .kindi-a11y__head strong { font-family: var(--wp--preset--font-family--display); } .kindi-a11y__close { background: none; border: 0; color: #fff; cursor: pointer; } .kindi-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 1rem; } .kindi-a11y__btn { padding: 0.6rem 0.5rem; border: 1px solid var(--border); border-radius: 0.625rem; background: var(--muted); font-weight: 600; font-size: 0.8125rem; cursor: pointer; color: var(--brand-navy); transition: all 0.15s; } .kindi-a11y__btn:hover { background: var(--brand-blue-soft); border-color: var(--brand-blue); } .kindi-a11y__btn--reset { grid-column: 1 / -1; background: var(--brand-red-soft); color: var(--brand-red); border-color: transparent; } .kindi-a11y__statement { display: block; text-align: center; padding: 0.75rem; border-top: 1px solid var(--border); font-size: 0.8125rem; font-weight: 700; color: var(--brand-navy); text-decoration: none; } /* --- Utilities ported from the Lovable design (src/styles.css) --- */ .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } .text-stroke-red { -webkit-text-stroke: 2px var(--brand-red); color: transparent; } .text-underline-red { background-image: linear-gradient( 180deg, transparent 65%, color-mix(in oklab, var(--brand-red) 30%, transparent) 65% ); background-repeat: no-repeat; background-size: 100% 100%; } /* Accessibility statement page */ .kindi-a11y-statement { max-width: 60rem; margin-inline: auto; line-height: 1.8; } .kindi-a11y-statement h1 { font-family: var(--wp--preset--font-family--display); font-weight: 900; color: var(--brand-navy); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: 1rem; } .kindi-a11y-statement h2 { font-weight: 800; color: var(--brand-navy); margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.25rem; } .kindi-a11y-statement ul { padding-inline-start: 1.25rem; } .kindi-a11y-statement li { margin-block: 0.35rem; } .kindi-a11y-statement a { color: var(--brand-red); font-weight: 600; } /* Prevent accidental horizontal scroll at the root only. A clip on would become the scroll container for the (display:contents header) sticky category nav and stop it sticking in some browsers — so keep the guard on . */ /* Clip horizontal overflow on BOTH html and body. `overflow: clip` (unlike hidden/auto) does NOT create a scroll container, so the sticky category nav still works — but any element that reaches past the viewport (a full-bleed hero, a 100vw band) is contained and can't widen the page or shove the header content off the edge. */ html, body { overflow-x: clip; } body { max-width: 100%; }