/* ========================================================================== Tribe Aura — Base -------------------------------------------------------------------------- Reset, base typography, links, buttons and form primitives. Loaded AFTER _tokens.css and after hello-elementor's reset.css/theme.css, so it is the last word on element defaults. Every value here references a token. If you need a colour or size that has no token, add the token to _tokens.css first — never inline a raw value. Class naming: .ta-block__element--modifier ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET Modern, minimal. hello-elementor already ships a normalize-style reset, so this only corrects what remains and what the brand direction changes. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* 1rem === 16px. Tokens assume this; do not set a percentage here or the whole clamp()-based type scale shifts. */ -webkit-text-size-adjust: 100%; /* Canvas colour behind everything, matched to the FOOTER rather than the page ground. The sticky footer normally leaves nothing visible here, but rubber-band overscroll and a few zoom levels can expose it — showing the footer colour there is far less jarring than a strip of the page ground. body paints its own background over its own box, so the two differing is deliberate. */ background-color: var(--ta-color-bg-alt); text-size-adjust: 100%; scroll-behavior: smooth; /* * Never let a wide table or gallery scroll the page sideways. * * This belongs on the ROOT, not on body. A non-visible overflow on body stops * the viewport propagating to and makes BODY the scroll container: * window.scrollTo() then silently does nothing, scroll-behavior on html never * applies, and anything that scrolls the page programmatically breaks while * looking perfectly normal to a mouse or a finger. Declared here the root * stays the scroller and the sideways clamp still holds. */ overflow-x: hidden; /* Offset for the sticky header added in Phase 2, so in-page anchors do not land underneath it. */ scroll-padding-top: var(--ta-space-3xl); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background-color: var(--ta-color-bg); color: var(--ta-color-text); /* Same pattern as the headings: client-settable, shipped value as fallback. */ font-family: var(--ta-body-font, var(--ta-font-body)); font-size: var(--ta-body-size, var(--ta-text-base)); font-weight: var(--ta-body-weight, var(--ta-weight-regular)); line-height: var(--ta-body-leading, var(--ta-leading-normal)); letter-spacing: var(--ta-tracking-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Balance the heading/paragraph rhythm ourselves rather than relying on browser defaults, which differ between engines. */ h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre { margin: 0; } /* Media defaults — §05 asks for stable, well-cropped imagery. Declaring height:auto alongside max-width prevents layout shift when width/height attributes are present. */ img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; } img, video, canvas { height: auto; } img { border-style: none; /* Keep handmade textures from being over-sharpened when scaled down. */ image-rendering: auto; } /* * A CSS declaration beats an SVG presentation attribute, so `svg { fill }` here * overrode the fill="none" on every icon in inc/icons.php and painted the line * art in as a solid block — the header's search, account and bag read as heavy * black blobs against a script logo and a fine serif. * * Solid glyphs still need currentColor, so the default stays; the icon * component opts back out below, which is the case that actually exists here. */ svg { fill: currentColor; } /* Line icons: stroked, never filled. */ .ta-icon { fill: none; stroke: currentColor; /* Hairline weight to sit with the display serif rather than shout over it. */ stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; /* Never squashed by a flex parent. */ flex: 0 0 auto; } /* A shape inside an icon must not pick the fill up either. */ .ta-icon * { fill: none; } /* Form controls do not inherit type by default in any browser. */ input, button, textarea, select, optgroup { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; } textarea { resize: vertical; } /* Long product names, SKUs and URLs must not blow out a card or a table. */ p, li, h1, h2, h3, h4, h5, h6, dd, dt, figcaption, td, th { overflow-wrap: break-word; } /* Remove list styling only where we opt in — Woo and the editor both rely on real list markers in content. */ ul[role="list"], ol[role="list"], .ta-list--bare { list-style: none; padding: 0; margin: 0; } hr { border: 0; border-top: var(--ta-border-width) solid var(--ta-color-border); margin-block: var(--ta-space-xl); } table { border-collapse: collapse; width: 100%; } ::selection { background-color: var(--ta-palette-sand); color: var(--ta-color-text); } /* -------------------------------------------------------------------------- 2. TYPOGRAPHY Serif for display moments; sans for everything that supports shopping. (Brand guidelines §04.) -------------------------------------------------------------------------- */ /* * Per-level variables with the shipped value as the fallback. * * The portal's Appearance screen lets the client set the font, size, weight, * line height and letter spacing of each heading level separately. Those * settings arrive as custom properties on :root, and custom properties cascade * through var() regardless of stylesheet order — so the override can be * attached to the token sheet, which loads before this file, and still win. * * Writing element rules instead would have meant the override loading BEFORE * the rule it needed to beat, and losing silently. * * Every var() carries the original as its fallback, so a client who changes * nothing gets exactly the design that shipped. */ h1, h2, h3, .ta-h1, .ta-h2, .ta-h3 { font-family: var(--ta-font-display); font-weight: var(--ta-weight-medium); line-height: var(--ta-leading-tight); letter-spacing: var(--ta-tracking-tight); color: var(--ta-color-heading); text-wrap: balance; } /* h4–h6 are UI-scale headings (card titles, accordion headers, widget titles), so they stay in the sans face for readability. */ h4, h5, h6, .ta-h4, .ta-h5, .ta-h6 { font-family: var(--ta-font-body); font-weight: var(--ta-weight-medium); line-height: var(--ta-leading-snug); letter-spacing: var(--ta-tracking-normal); color: var(--ta-color-heading); text-wrap: balance; } h1, .ta-h1 { font-family: var(--ta-h1-font, var(--ta-font-display)); font-size: var(--ta-h1-size, var(--ta-text-3xl)); font-weight: var(--ta-h1-weight, var(--ta-weight-medium)); line-height: var(--ta-h1-leading, var(--ta-leading-tight)); letter-spacing: var(--ta-h1-tracking, var(--ta-tracking-tight)); } h2, .ta-h2 { font-family: var(--ta-h2-font, var(--ta-font-display)); font-size: var(--ta-h2-size, var(--ta-text-2xl)); font-weight: var(--ta-h2-weight, var(--ta-weight-medium)); line-height: var(--ta-h2-leading, var(--ta-leading-snug)); letter-spacing: var(--ta-h2-tracking, var(--ta-tracking-tight)); } h3, .ta-h3 { font-family: var(--ta-h3-font, var(--ta-font-display)); font-size: var(--ta-h3-size, var(--ta-text-xl)); font-weight: var(--ta-h3-weight, var(--ta-weight-medium)); line-height: var(--ta-h3-leading, var(--ta-leading-snug)); letter-spacing: var(--ta-h3-tracking, var(--ta-tracking-tight)); } h4, .ta-h4 { font-family: var(--ta-h4-font, var(--ta-font-body)); font-size: var(--ta-h4-size, var(--ta-text-lg)); font-weight: var(--ta-h4-weight, var(--ta-weight-medium)); line-height: var(--ta-h4-leading, var(--ta-leading-snug)); letter-spacing: var(--ta-h4-tracking, var(--ta-tracking-normal)); } h5, .ta-h5 { font-size: var(--ta-text-base); } h6, .ta-h6 { font-size: var(--ta-text-sm); } /* Hero-scale display type — larger than h1, used deliberately. */ .ta-display { font-family: var(--ta-font-display); font-size: var(--ta-text-4xl); font-weight: var(--ta-weight-light); line-height: var(--ta-leading-tight); letter-spacing: var(--ta-tracking-tight); color: var(--ta-color-heading); text-wrap: balance; } /* Eyebrow / section kicker — the small tracked-out label above a headline. */ .ta-eyebrow { font-family: var(--ta-font-body); font-size: var(--ta-text-2xs); font-weight: var(--ta-weight-medium); letter-spacing: var(--ta-tracking-wider); text-transform: uppercase; color: var(--ta-color-accent-text); } p { max-width: var(--ta-measure); } /* Stacking rhythm — space between flow siblings rather than bottom margins, so the first and last child never leave a stray gap inside a container. */ p + p, p + ul, p + ol, ul + p, ol + p, p + blockquote, blockquote + p { margin-top: var(--ta-space-md); } h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { margin-top: var(--ta-space-sm); } p + h2, ul + h2, ol + h2 { margin-top: var(--ta-space-xl); } p + h3, ul + h3, ol + h3 { margin-top: var(--ta-space-lg); } p + h4, ul + h4, ol + h4 { margin-top: var(--ta-space-md); } .ta-lead { font-size: var(--ta-text-md); line-height: var(--ta-leading-relaxed); color: var(--ta-color-text-muted); max-width: var(--ta-measure); } small, .ta-text--small { font-size: var(--ta-text-sm); color: var(--ta-color-text-muted); } strong, b { font-weight: var(--ta-weight-semibold); } em, i { font-style: italic; } blockquote { font-family: var(--ta-font-display); font-size: var(--ta-text-lg); font-style: italic; line-height: var(--ta-leading-snug); color: var(--ta-color-accent-soft); border-left: var(--ta-border-width-thick) solid var(--ta-color-accent); padding-left: var(--ta-space-md); max-width: var(--ta-measure-narrow); } ul, ol { padding-left: var(--ta-space-md); } li + li { margin-top: var(--ta-space-3xs); } code, kbd, samp, pre { font-family: var(--ta-font-mono); font-size: var(--ta-text-sm); } code { background-color: var(--ta-color-bg-alt); border-radius: var(--ta-radius-xs); padding: 0.1em 0.35em; } figcaption { font-size: var(--ta-text-sm); color: var(--ta-color-text-muted); margin-top: var(--ta-space-2xs); } abbr[title] { text-decoration: underline dotted; cursor: help; } /* -------------------------------------------------------------------------- 3. LINKS Underlines stay on in body copy (accessibility); navigation and components opt out with .ta-link--bare. -------------------------------------------------------------------------- */ a { color: var(--ta-color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--ta-color-border-strong); transition: color var(--ta-transition), text-decoration-color var(--ta-transition); } a:hover { color: var(--ta-color-link-hover); text-decoration-color: currentColor; } a:active { color: var(--ta-color-accent-soft-hover); } /* Structural links — nav items, cards, logos, buttons-as-links. */ .ta-link--bare, a.ta-btn { text-decoration: none; } /* Kept in its OWN rule on purpose. A selector list is all-or-nothing: a browser that does not understand :has() discards the whole rule it appears in, not just that one selector. Grouped with the two above, a pre-15.4 Safari or a pre-121 Firefox would drop text-decoration: none from every .ta-btn as well and underline every button on the site. Isolated, it can fail on its own and the only cost is an underline on image links. */ a:has(> img) { text-decoration: none; } /* Quiet link that reveals its underline on hover — used in footers and editorial captions. */ .ta-link--quiet { text-decoration: none; color: var(--ta-color-text-muted); } .ta-link--quiet:hover { color: var(--ta-color-text); text-decoration: underline; text-underline-offset: 0.18em; } /* -------------------------------------------------------------------------- 4. FOCUS & ACCESSIBILITY Keyboard users must always see where they are (guidelines §10.9). -------------------------------------------------------------------------- */ :focus-visible { outline: var(--ta-focus-width) solid var(--ta-color-focus); outline-offset: var(--ta-focus-offset); border-radius: var(--ta-radius-xs); } /* Only suppress the ring for pointer users; :focus-visible above still fires for keyboard navigation. */ :focus:not(:focus-visible) { outline: none; } .ta-visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link — visible only once focused. */ .ta-skip-link { position: absolute; top: var(--ta-space-2xs); left: var(--ta-space-2xs); z-index: var(--ta-z-toast); padding: var(--ta-space-2xs) var(--ta-space-sm); background-color: var(--ta-color-text); color: var(--ta-color-text-invert); border-radius: var(--ta-radius-sm); text-decoration: none; transform: translateY(-200%); } .ta-skip-link:focus-visible { transform: translateY(0); } [hidden] { display: none !important; } /* -------------------------------------------------------------------------- 5. BUTTONS §04: 13–15px, medium weight. §06: strong contrast, generous touch targets. 44px minimum height throughout, which is the WCAG target-size floor. -------------------------------------------------------------------------- */ /* #wpadminbar is excluded throughout: it is WordPress chrome, not part of the storefront, and restyling its buttons breaks the toolbar layout for any logged-in visitor. The exclusion is wrapped in :where() because :not() otherwise inherits the specificity of its argument — :not(#wpadminbar button) would score (1,0,2) and beat every single-class component rule, making .ta-header__action and friends impossible to override without !important. :where() is always 0. */ .ta-btn, button:not(:where(#wpadminbar *)), input[type="button"], input[type="reset"], input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; gap: var(--ta-space-2xs); min-height: 2.75rem; /* 44px touch target */ padding: var(--ta-space-xs) var(--ta-space-lg); font-family: var(--ta-font-body); font-size: var(--ta-text-xs); font-weight: var(--ta-weight-medium); line-height: var(--ta-leading-none); letter-spacing: var(--ta-tracking-wide); text-transform: uppercase; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; border: var(--ta-border-width) solid transparent; border-radius: var(--ta-radius-button); background-color: var(--ta-btn-primary-bg); color: var(--ta-btn-primary-text); transition: background-color var(--ta-transition), border-color var(--ta-transition), color var(--ta-transition); -webkit-appearance: none; appearance: none; } .ta-btn:hover, button:not(:where(#wpadminbar *)):hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: var(--ta-btn-primary-bg-hover); color: var(--ta-btn-primary-text); } .ta-btn:disabled, .ta-btn[aria-disabled="true"], button:not(:where(#wpadminbar *)):disabled, input[type="submit"]:disabled { background-color: var(--ta-palette-ink-40); border-color: transparent; color: var(--ta-palette-white); cursor: not-allowed; opacity: 0.7; } /* --- Variants --- */ .ta-btn--secondary { background-color: var(--ta-btn-secondary-bg); color: var(--ta-btn-secondary-text); border-color: var(--ta-btn-secondary-border); } .ta-btn--secondary:hover { background-color: var(--ta-btn-secondary-text); color: var(--ta-color-text-invert); } .ta-btn--ghost { background-color: transparent; color: var(--ta-color-text); border-color: var(--ta-color-border-strong); } .ta-btn--ghost:hover { background-color: var(--ta-color-bg-alt); color: var(--ta-color-text); border-color: var(--ta-color-border-strong); } /* Text-only button — "Continue Shopping", inline actions. */ .ta-btn--link { min-height: 0; padding: 0; background: transparent; color: var(--ta-color-text); border: 0; border-bottom: var(--ta-border-width) solid var(--ta-color-accent); border-radius: 0; } .ta-btn--link:hover { background: transparent; color: var(--ta-color-link-hover); border-bottom-color: currentColor; } /* -------------------------------------------------------------------------- Hit-area expansion -------------------------------------------------------------------------- WCAG 2.2 AA (2.5.8) asks for a 24x24 CSS px target. Underlined text links styled as buttons are only as tall as their text — 14px for .ta-btn--link — and the underline IS the design: adding padding would push that rule away from the text and change how they look. So the box stays exactly where it is and an invisible overlay extends the clickable region above and below it. The ::after is a child of the link, so clicks on it still land on the link. Vertical only — growing sideways would overlap neighbouring text. -------------------------------------------------------------------------- */ .ta-btn--link, .ta-product__reviews-link { position: relative; } .ta-btn--link::after, .ta-product__reviews-link::after { content: ""; position: absolute; left: 0; right: 0; /* Text is 14-20px tall; 6px each side clears the 24px minimum. */ top: -6px; bottom: -6px; } .ta-btn--sm { min-height: 2.25rem; padding: var(--ta-space-2xs) var(--ta-space-md); font-size: var(--ta-text-2xs); } .ta-btn--lg { min-height: 3.25rem; padding: var(--ta-space-sm) var(--ta-space-xl); font-size: var(--ta-text-sm); } .ta-btn--block { display: flex; width: 100%; } /* Icon-only control — header cart/search/account. */ .ta-btn--icon { min-height: 2.75rem; min-width: 2.75rem; padding: var(--ta-space-2xs); background: transparent; color: var(--ta-color-text); border-color: transparent; } .ta-btn--icon:hover { background-color: var(--ta-color-bg-alt); color: var(--ta-color-text); } /* -------------------------------------------------------------------------- 6. FORM PRIMITIVES -------------------------------------------------------------------------- */ fieldset { border: var(--ta-border-width) solid var(--ta-color-border); border-radius: var(--ta-radius-sm); padding: var(--ta-space-md); margin: 0; } legend { padding-inline: var(--ta-space-2xs); font-size: var(--ta-text-sm); font-weight: var(--ta-weight-medium); } label, .ta-form__label { display: inline-block; font-size: var(--ta-text-sm); font-weight: var(--ta-weight-medium); color: var(--ta-color-text); margin-bottom: var(--ta-space-3xs); } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime-local"], textarea, select, .ta-form__control { display: block; width: 100%; min-height: 2.75rem; padding: var(--ta-space-2xs) var(--ta-space-sm); font-family: var(--ta-font-body); font-size: var(--ta-input-size); line-height: var(--ta-leading-normal); color: var(--ta-color-text); background-color: var(--ta-color-surface); border: var(--ta-border-width) solid var(--ta-color-border-strong); border-radius: var(--ta-radius-input); transition: border-color var(--ta-transition), box-shadow var(--ta-transition); -webkit-appearance: none; appearance: none; } textarea { min-height: 8rem; padding: var(--ta-space-sm); } /* Native select needs its arrow back after appearance:none. The glyph lives in --ta-select-arrow so no raw value appears outside the tokens file. */ select { background-image: var(--ta-select-arrow); background-repeat: no-repeat; background-position: right var(--ta-space-sm) center; padding-right: var(--ta-space-xl); cursor: pointer; } input:hover, textarea:hover, select:hover { border-color: var(--ta-color-accent-soft); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ta-color-focus); box-shadow: 0 0 0 var(--ta-focus-width) var(--ta-palette-sand); } input::placeholder, textarea::placeholder { color: var(--ta-color-text-disabled); opacity: 1; /* Firefox dims placeholders by default */ } input:disabled, textarea:disabled, select:disabled { background-color: var(--ta-color-bg-alt); color: var(--ta-color-text-disabled); cursor: not-allowed; } input[aria-invalid="true"], input.ta-form__control--error, textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--ta-color-danger); } /* Checkboxes and radios keep native rendering but take the brand accent, which is far more robust across browsers than a custom-drawn control. */ input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; min-height: 0; padding: 0; accent-color: var(--ta-color-accent-soft); cursor: pointer; -webkit-appearance: auto; appearance: auto; } input[type="file"] { width: 100%; font-size: var(--ta-input-size); } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* Strip the spinner from quantity inputs — Woo supplies its own controls. */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ta-form__field + .ta-form__field { margin-top: var(--ta-space-md); } .ta-form__hint { display: block; margin-top: var(--ta-space-3xs); font-size: var(--ta-text-2xs); color: var(--ta-color-text-muted); } .ta-form__error { display: block; margin-top: var(--ta-space-3xs); font-size: var(--ta-text-2xs); color: var(--ta-color-danger); } /* Required marker */ .ta-form__label .required, .required { color: var(--ta-color-danger); text-decoration: none; } /* -------------------------------------------------------------------------- 7. LAYOUT PRIMITIVES Minimal set only — full layout arrives with Phase 2's header/footer. -------------------------------------------------------------------------- */ .ta-container { width: 100%; max-width: var(--ta-container); margin-inline: auto; padding-inline: var(--ta-gutter); } .ta-container--narrow { max-width: var(--ta-container-narrow); } .ta-container--content { max-width: var(--ta-container-content); } .ta-container--wide { max-width: var(--ta-container-wide); } .ta-container--full { max-width: var(--ta-container-full); } .ta-section { padding-block: var(--ta-section-y); } .ta-section--tight { padding-block: var(--ta-section-y-tight); } .ta-section--loose { padding-block: var(--ta-section-y-loose); } .ta-section--alt { background-color: var(--ta-color-bg-alt); } .ta-section--surface { background-color: var(--ta-color-surface); } /* Flow utility — vertical rhythm for arbitrary stacked children. */ .ta-flow > * + * { margin-top: var(--ta-space-md); } .ta-flow--tight > * + * { margin-top: var(--ta-space-2xs); } .ta-flow--loose > * + * { margin-top: var(--ta-space-lg); } /* -------------------------------------------------------------------------- 8. WORDPRESS CORE CLASSES Required for editor content and theme-check compliance. -------------------------------------------------------------------------- */ .alignleft { float: left; margin-right: var(--ta-space-md); margin-bottom: var(--ta-space-sm); } .alignright { float: right; margin-left: var(--ta-space-md); margin-bottom: var(--ta-space-sm); } .aligncenter { display: block; margin-inline: auto; } .alignwide { max-width: var(--ta-container-wide); } .alignfull { max-width: none; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: var(--ta-text-sm); color: var(--ta-color-text-muted); margin-top: var(--ta-space-2xs); } .sticky, .gallery-caption, .bypostauthor { /* Present for WordPress theme-check; no visual treatment required yet. */ } /* -------------------------------------------------------------------------- Form control size floor — backstop -------------------------------------------------------------------------- The rules above already use --ta-input-size, but component stylesheets load AFTER this file and a later, more specific rule can quietly undercut the floor — which is exactly how the WooCommerce sort dropdown ended up at 14px. This is the safety net: it names the controls that matter and nothing else, so it cannot be defeated by ordering alone. Checkboxes and radios are excluded: they have no text to zoom toward, and sizing them here would change their box. -------------------------------------------------------------------------- */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .ta-form__control { font-size: var(--ta-input-size); } /* -------------------------------------------------------------------------- Reading measure -------------------------------------------------------------------------- Between about 700 and 1100px a paragraph in a single-column layout stretches to ~86 characters, which is past the point where the eye reliably finds the start of the next line. Capping the measure is a tablet fix specifically: phones are already narrow enough, and the desktop layouts are already columned. Applied to prose containers only — never to a grid cell, a table or a component, where a max-width would break the layout. -------------------------------------------------------------------------- */ @media (min-width: 700px) { .ta-prose p, .ta-prose li, .ta-support__body p, .ta-support__body li, .ta-craft__lead, .ta-craft__cta-text, .ta-contact__lead, .ta-journal-archive__intro, .ta-jcard__excerpt, .ta-story__text { max-width: 68ch; } } /* -------------------------------------------------------------------------- Transition hygiene for bare buttons -------------------------------------------------------------------------- The parent theme's reset declares `transition: all .3s` on every