89 lines
2.8 KiB
CSS
89 lines
2.8 KiB
CSS
/* ============================================================================
|
|
SHARP-ER - stylesheet entry
|
|
----------------------------------------------------------------------------
|
|
Load order matters:
|
|
1. tailwindcss - preflight + the utility engine
|
|
2. primitives.css - TIER 1, raw scales in a @theme block
|
|
3. semantic.css - TIER 2, roles that alias tier 1, per surface
|
|
4. typography.css - type roles + @font-face + the EN/AR font switch
|
|
|
|
See ./styles/README.md for the rules components have to follow.
|
|
========================================================================= */
|
|
|
|
@import "tailwindcss";
|
|
@import "./styles/primitives.css";
|
|
@import "./styles/semantic.css";
|
|
@import "./styles/typography.css";
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
DIRECTION VARIANTS
|
|
The site is served at /en/* (LTR) and /ar/* (RTL) and lays out with logical
|
|
properties, so these are only for the rare case that genuinely cannot be
|
|
expressed logically (an asymmetric icon, a background position).
|
|
------------------------------------------------------------------------ */
|
|
@custom-variant rtl (&:where([dir="rtl"], [dir="rtl"] *));
|
|
@custom-variant ltr (&:where([dir="ltr"], [dir="ltr"] *));
|
|
|
|
@layer base {
|
|
/* Every surface paints itself, so <footer data-surface="light"> inside a
|
|
dark page is complete on its own. :root defaults to the dark surface. */
|
|
html,
|
|
body,
|
|
[data-surface] {
|
|
background-color: var(--surface-page);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
/* Tier-2 only, like everything else: --type-body-base-* is the semantic
|
|
alias of the Body/Medium role (16/24) and lives in semantic.css. */
|
|
font-size: var(--type-body-base-size);
|
|
line-height: var(--type-body-base-leading);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: start;
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--surface-selection);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--focus-ring-color);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
|
|
/* Headings inherit the heading family; size comes from a type role utility
|
|
so that an <h2> used as a card title can still be body-lg-bold. */
|
|
:is(h1, h2, h3, h4, h5, h6) {
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--field-placeholder);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
}
|