manoel freitas
b54908541f
Introduce a focal Home opening, chapter index, and restrained continuity reveals while keeping reduced-motion and visual baselines intact. Co-authored-by: Cursor <cursoragent@cursor.com>
249 lines
7.6 KiB
CSS
249 lines
7.6 KiB
CSS
@import 'tailwindcss';
|
|
@import './tokens.css';
|
|
|
|
@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);
|
|
|
|
--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);
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: var(--amare-color-bg);
|
|
color: var(--amare-color-text);
|
|
font-family: var(--amare-font-serif);
|
|
}
|
|
|
|
[id$='-heading'] {
|
|
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);
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
/* Dossiê vivo — content visible by default; enhance only when opted in */
|
|
[data-chapter-index] {
|
|
display: none;
|
|
}
|
|
|
|
[data-chapter-progress] {
|
|
display: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
[data-chapter-index] a[aria-current="true"] {
|
|
color: var(--amare-color-accent-deep);
|
|
}
|
|
|
|
[data-chapter-index] a[aria-current="true"]::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0.35em;
|
|
bottom: 0.35em;
|
|
width: 1px;
|
|
background: var(--amare-color-accent);
|
|
}
|
|
|
|
[data-chapter-progress] > span {
|
|
display: block;
|
|
height: 100%;
|
|
width: var(--chapter-progress, 0%);
|
|
background: var(--amare-color-accent);
|
|
transform-origin: left center;
|
|
}
|
|
|
|
@media (min-width: 1280px) {
|
|
[data-chapter-index] {
|
|
display: flex;
|
|
position: fixed;
|
|
top: 50%;
|
|
right: max(1rem, calc((100vw - var(--amare-container-max)) / 2 - 7.5rem));
|
|
z-index: 30;
|
|
max-width: 6.5rem;
|
|
translate: 0 -50%;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
[data-chapter-index] a {
|
|
position: relative;
|
|
padding-left: 0.75rem;
|
|
font-size: var(--amare-text-xs);
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--amare-color-muted);
|
|
text-decoration: none;
|
|
transition: color var(--amare-duration-fast) var(--amare-ease-standard);
|
|
}
|
|
|
|
[data-chapter-index] a:hover {
|
|
color: var(--amare-color-accent);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1279px) {
|
|
[data-chapter-progress] {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 45;
|
|
width: 100%;
|
|
height: 2px;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"] [data-motion-beat="seal"],
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"] [data-motion-beat="cta"] {
|
|
opacity: 0;
|
|
transform: translateY(0.5rem);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"] [data-motion-beat="title"] {
|
|
transform: translateY(0.4rem);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"] [data-motion-beat="media"] {
|
|
clip-path: inset(4% 0 0 0);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat] {
|
|
opacity: 1;
|
|
transform: none;
|
|
clip-path: inset(0 0 0 0);
|
|
transition:
|
|
opacity var(--amare-duration-slow) var(--amare-ease-arrival),
|
|
transform var(--amare-duration-slow) var(--amare-ease-arrival),
|
|
clip-path var(--amare-duration-focal) var(--amare-ease-arrival);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat="seal"] {
|
|
transition-delay: 0ms;
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat="title"] {
|
|
transition-delay: 80ms;
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat="media"] {
|
|
transition-delay: 120ms;
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="dossie-hero"].is-active [data-motion-beat="cta"] {
|
|
transition-delay: 220ms;
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal]:not(.is-revealed) {
|
|
opacity: 0;
|
|
transform: translateY(0.5rem);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-reveal].is-revealed {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition:
|
|
opacity var(--amare-duration-slow) var(--amare-ease-arrival),
|
|
transform var(--amare-duration-slow) var(--amare-ease-arrival);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="page-open"]:not(.is-active) {
|
|
opacity: 0;
|
|
transform: translateY(0.4rem);
|
|
}
|
|
|
|
html[data-motion="enhance"] [data-motion="page-open"].is-active {
|
|
opacity: 1;
|
|
transform: none;
|
|
transition:
|
|
opacity var(--amare-duration-normal) var(--amare-ease-arrival),
|
|
transform var(--amare-duration-normal) var(--amare-ease-arrival);
|
|
}
|
|
}
|
|
}
|