manoel freitas
dfd9763029
Co-authored-by: manoel freitas <manoel.josefneto@gmail.com> Co-committed-by: manoel freitas <manoel.josefneto@gmail.com>
279 lines
9.4 KiB
CSS
279 lines
9.4 KiB
CSS
@import 'tailwindcss';
|
|
@import './tokens.css';
|
|
|
|
@plugin "daisyui" {
|
|
themes: false;
|
|
}
|
|
|
|
@plugin "daisyui/theme" {
|
|
name: "amare";
|
|
default: true;
|
|
color-scheme: light;
|
|
|
|
--color-base-100: var(--amare-color-bg);
|
|
--color-base-200: var(--amare-color-bg-deep);
|
|
--color-base-300: var(--amare-color-bg-archive);
|
|
--color-base-content: var(--amare-color-text);
|
|
--color-primary: var(--amare-color-accent);
|
|
--color-primary-content: var(--amare-color-accent-text);
|
|
--color-secondary: var(--amare-color-sage);
|
|
--color-secondary-content: var(--amare-color-text);
|
|
--color-accent: var(--amare-color-accent-deep);
|
|
--color-accent-content: var(--amare-color-accent-text);
|
|
--color-neutral: var(--amare-color-muted);
|
|
--color-neutral-content: var(--amare-color-accent-text);
|
|
--color-info: #2563eb;
|
|
--color-info-content: #ffffff;
|
|
--color-success: var(--amare-color-success);
|
|
--color-success-content: var(--amare-color-accent-text);
|
|
--color-warning: var(--amare-color-warning);
|
|
--color-warning-content: var(--amare-color-accent-text);
|
|
--color-error: var(--amare-color-error);
|
|
--color-error-content: var(--amare-color-accent-text);
|
|
|
|
--radius-selector: 0;
|
|
--radius-field: 0;
|
|
--radius-box: 0;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
--border: 1px;
|
|
--depth: 0;
|
|
--noise: 0;
|
|
}
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
@source '../views/**/*.blade.php';
|
|
|
|
@theme {
|
|
--font-sans: var(--amare-font-sans);
|
|
--font-serif: var(--amare-font-serif);
|
|
|
|
--text-xs: var(--amare-text-xs);
|
|
--text-sm: var(--amare-text-sm);
|
|
--text-base: var(--amare-text-base);
|
|
--text-lg: var(--amare-text-lg);
|
|
--text-xl: var(--amare-text-xl);
|
|
--text-2xl: var(--amare-text-2xl);
|
|
--text-3xl: var(--amare-text-3xl);
|
|
--text-4xl: var(--amare-text-4xl);
|
|
|
|
--text-display: clamp(3rem, 7.7vw, 5.875rem);
|
|
--text-display--line-height: 0.94;
|
|
--text-display--letter-spacing: -0.01em;
|
|
|
|
--text-hero-spread: clamp(3rem, 5.5vw, 5rem);
|
|
--text-hero-spread--line-height: 0.94;
|
|
--text-hero-spread--letter-spacing: -0.01em;
|
|
|
|
--text-headline: clamp(2.375rem, 5.2vw, 4rem);
|
|
--text-headline--line-height: 1.02;
|
|
|
|
--spacing-1: var(--amare-space-1);
|
|
--spacing-2: var(--amare-space-2);
|
|
--spacing-3: var(--amare-space-3);
|
|
--spacing-4: var(--amare-space-4);
|
|
--spacing-6: var(--amare-space-6);
|
|
--spacing-8: var(--amare-space-8);
|
|
--spacing-12: var(--amare-space-12);
|
|
--spacing-16: var(--amare-space-16);
|
|
|
|
--radius-sm: var(--amare-radius-sm);
|
|
--radius-md: var(--amare-radius-md);
|
|
--radius-lg: var(--amare-radius-lg);
|
|
--radius-xl: var(--amare-radius-xl);
|
|
--radius-full: var(--amare-radius-full);
|
|
|
|
--color-amare-bg: var(--amare-color-bg);
|
|
--color-amare-bg-deep: var(--amare-color-bg-deep);
|
|
--color-amare-bg-archive: var(--amare-color-bg-archive);
|
|
--color-amare-bg-muted: var(--amare-color-bg-muted);
|
|
--color-amare-text: var(--amare-color-text);
|
|
--color-amare-muted: var(--amare-color-muted);
|
|
--color-amare-text-muted: var(--amare-color-text-muted);
|
|
--color-amare-border: var(--amare-color-border);
|
|
--color-amare-accent: var(--amare-color-accent);
|
|
--color-amare-accent-deep: var(--amare-color-accent-deep);
|
|
--color-amare-accent-hover: var(--amare-color-accent-hover);
|
|
--color-amare-sage: var(--amare-color-sage);
|
|
--color-amare-accent-text: var(--amare-color-accent-text);
|
|
--color-amare-success: var(--amare-color-success);
|
|
--color-amare-warning: var(--amare-color-warning);
|
|
--color-amare-error: var(--amare-color-error);
|
|
|
|
--ease-amare: var(--amare-ease-standard);
|
|
--default-transition-duration: var(--amare-duration-normal);
|
|
|
|
/* Neutralised, not omitted. Tailwind's Vite plugin shares one context
|
|
* across every entry in the build, so the Filament theme entry's
|
|
* `@source app/Filament/**` makes Filament's `shadow-*` usage visible and
|
|
* Tailwind then emits its DEFAULT --shadow-sm/md/lg into this public
|
|
* bundle too — verified by diffing the built app.css with and without
|
|
* that entry. Nothing public uses a shadow utility today, so rendering is
|
|
* unchanged either way, but leaving real shadow values defined here would
|
|
* let a future `shadow-sm` on a public element silently violate
|
|
* DESIGN.md's Tonal Layer Rule, and HeritageEditorialTokensTest only
|
|
* inspects source files, so it would not catch it. Zeroing them keeps the
|
|
* rule true in the artifact that actually ships. */
|
|
--shadow-2xs: 0 0 #0000;
|
|
--shadow-xs: 0 0 #0000;
|
|
--shadow-sm: 0 0 #0000;
|
|
--shadow: 0 0 #0000;
|
|
--shadow-md: 0 0 #0000;
|
|
--shadow-lg: 0 0 #0000;
|
|
--shadow-xl: 0 0 #0000;
|
|
--shadow-2xl: 0 0 #0000;
|
|
--shadow-inner: 0 0 #0000;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: var(--amare-color-bg);
|
|
color: var(--amare-color-text);
|
|
font-family: var(--amare-font-serif);
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
[id$='-heading'],
|
|
.home-chapter[id] {
|
|
scroll-margin-top: 5.5rem;
|
|
}
|
|
|
|
a:focus-visible,
|
|
button:focus-visible,
|
|
summary:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
select:focus-visible,
|
|
[tabindex]:focus-visible {
|
|
outline: 2px solid var(--amare-color-accent);
|
|
outline-offset: 3px;
|
|
}
|
|
}
|
|
|
|
@utility container-amare {
|
|
width: 100%;
|
|
max-width: var(--amare-container-max);
|
|
margin-inline: auto;
|
|
padding-inline: var(--amare-container-padding);
|
|
}
|
|
|
|
@utility img-editorial {
|
|
filter: saturate(0.88) contrast(0.96);
|
|
}
|
|
|
|
@utility honeypot {
|
|
position: absolute;
|
|
left: -9999px;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@layer components {
|
|
.main-nav.is-open {
|
|
display: flex;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.main-nav {
|
|
transition: opacity var(--amare-duration-normal) var(--amare-ease-standard);
|
|
}
|
|
}
|
|
|
|
body.menu-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
main {
|
|
overflow-x: clip;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
:where(a, button, input, textarea, select) {
|
|
transition-duration: var(--amare-motion-feedback);
|
|
transition-property: color, background-color, border-color, transform;
|
|
transition-timing-function: var(--amare-ease-arrival);
|
|
}
|
|
|
|
:where(a, button:not(:disabled)):active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Transform/clip only — never fade text opacity (axe + WCAG mid-transition). */
|
|
html[data-motion="enhance"] [data-motion="page-open"]:not(.is-active) [data-motion-beat] {
|
|
transform: translateY(var(--amare-motion-distance-y));
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="page-open"]:not(.is-active) [data-motion-beat="media"] {
|
|
clip-path: inset(4% 0 0 0);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="page-open"].is-active [data-motion-beat] {
|
|
transform: none;
|
|
clip-path: inset(0 0 0 0);
|
|
transition:
|
|
transform var(--amare-motion-enter) var(--amare-ease-arrival),
|
|
clip-path var(--amare-motion-enter) var(--amare-ease-arrival);
|
|
transition-delay: min(
|
|
calc(var(--motion-index, 0) * var(--amare-motion-stagger)),
|
|
var(--amare-motion-stagger-cap)
|
|
);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal] {
|
|
--motion-translate-x: 0;
|
|
--motion-translate-y: var(--amare-motion-distance-y);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal-from="left"] {
|
|
--motion-translate-x: calc(-1 * var(--amare-motion-distance-x-mobile));
|
|
--motion-translate-y: 0;
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal-from="right"] {
|
|
--motion-translate-x: var(--amare-motion-distance-x-mobile);
|
|
--motion-translate-y: 0;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
html[data-motion="enhance"] [data-reveal-from="left"] {
|
|
--motion-translate-x: calc(-1 * var(--amare-motion-distance-x));
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal-from="right"] {
|
|
--motion-translate-x: var(--amare-motion-distance-x);
|
|
}
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal]:not(.is-revealed) {
|
|
transform: translate3d(var(--motion-translate-x), var(--motion-translate-y), 0);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal][data-reveal-media]:not(.is-revealed) {
|
|
clip-path: inset(3% 0 0 0);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal-group] [data-reveal].is-revealed,
|
|
html[data-motion="enhance"] [data-reveal].is-revealed {
|
|
transform: none;
|
|
clip-path: inset(0 0 0 0);
|
|
transition:
|
|
transform var(--amare-motion-enter) var(--amare-ease-arrival),
|
|
clip-path var(--amare-motion-enter) var(--amare-ease-arrival);
|
|
transition-delay: min(
|
|
calc(var(--motion-index, 0) * var(--amare-motion-stagger)),
|
|
var(--amare-motion-stagger-cap)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* daisyUI emits unlayered; match focus ring to the amare accent. */
|
|
.input:focus,
|
|
.select:focus,
|
|
.textarea:focus,
|
|
.checkbox:focus-visible {
|
|
--input-color: var(--amare-color-accent);
|
|
}
|