/* * base.css — reset, elements, typography. * * Design tokens come from theme.json (--wp--preset--* custom properties). * This file wires those tokens onto element defaults and provides a light * reset. Theme-authored tokens use the --tek-* namespace. * * The site sits on a per-page colour: inc/colors.php paints * --tek-page-color onto ; body backgrounds itself with it. * Aktiv Grotesk Arabic 400 (Adobe Fonts) is the only face; the scale is * 14 / 20 / 30 / 48 / 70px and everything defaults to 20px. */ :root { --tek-measure: var(--wp--style--global--content-size, 50rem); --tek-gap: 20px; /* the site-wide rhythm unit */ --tek-header-logo-width: 200px; --tek-hover: var(--wp--preset--color--background); /* links warm to white */ } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background-color: var(--tek-page-color, var(--wp--preset--color--background)); color: var(--wp--preset--color--foreground); font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--base); font-weight: 400; line-height: 1.4; -webkit-font-smoothing: antialiased; overscroll-behavior: none; } img, picture, svg, video { max-width: 100%; height: auto; } img { display: block; } /* --- Typography --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--wp--preset--font-family--sans); font-weight: 400; line-height: 1.1; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--wp--preset--font-size--3-xl); } h2 { font-size: var(--wp--preset--font-size--lg); } h3, h4, h5, h6 { font-size: var(--wp--preset--font-size--base); } @media (max-width: 1024px) { h1 { font-size: var(--wp--preset--font-size--2-xl); } } @media (max-width: 767px) { h1 { font-size: var(--wp--preset--font-size--xl); } } p, ul, ol, blockquote, figure { margin: 0 0 1em; } /* Links: black, warming to white on the coloured grounds — live's rule. */ a { color: currentColor; text-decoration: none; transition: color 0.2s ease; } a:hover, a:focus { color: var(--tek-hover); } /* Every external link (anything opening a new tab) carries the offsite arrow, drawn in currentColor so it warms with the link. Icon-only links (the footer row) are excluded — an arrow beside an icon is noise. */ a[target="_blank"]:not(.footer-icon)::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.35em; vertical-align: baseline; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1h7.5v7.5h-2V4.4L3.7 9.7 2.3 8.3 7.6 3H3.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 1h7.5v7.5h-2V4.4L3.7 9.7 2.3 8.3 7.6 3H3.5z'/%3E%3C/svg%3E") no-repeat center / contain; } ::selection { background: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); } /* --- Forms (the search field and contact form) --- */ input, textarea, button, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } /* --- Utilities --- */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .skip-link { left: -9999rem; position: absolute; top: 0; z-index: 999; background: var(--wp--preset--color--foreground); color: var(--wp--preset--color--background); padding: 0.5rem 1rem; } .skip-link:focus { left: 1rem; top: 1rem; }