/* Kasoria motion layer * Attribute-selector rules that the Bricks HTML importer cannot express as * global classes. Everything here is gated behind .kasoria-motion, which the * accompanying JS adds to . If the JS never runs, nothing is hidden. */ /* Bricks renders a sticky header as position:fixed, which reserves no space in the document flow, so it would overlay the top of the first section. The real header height is measured in JS and published as --kasoria-header-height. Doubled selectors keep these above the generated Bricks page CSS. */ .hero.hero { padding-top: var(--kasoria-header-height, 75px); } section[id] { scroll-margin-top: calc(var(--kasoria-header-height, 75px) + 8px); } /* Inline accent type inside headings. Lives here because the span sits inside a heading's rich text, so it has no Bricks element to carry a global class. */ .serif-accent { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--accent); } .kasoria-motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1); will-change: opacity, transform; } .kasoria-motion [data-reveal].is-shown { opacity: 1; transform: none; } /* Word-by-word highlight in the problem statement */ .statement__text span { transition: color 0.2s linear; } /* The process cards pin into a stack only once the JS has measured that every card fits between its sticky offset and the bottom of the viewport. On a phone they are ~700px tall against an ~800px viewport, so pinning would cut off the last lines. The global class therefore keeps them in normal flow below 992px and stacking is opted into here, which also means the no-JS and reduced-motion renderings stay readable. */ .process__stack.is-stacked .process-card { position: sticky; } /* Mobile menu open state — kept here so the toggle works even if the compound selector did not survive class conversion. */ .header-mobile.is-open { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; } @media (prefers-reduced-motion: reduce) { .kasoria-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .statement { height: auto !important; } .statement__sticky { position: static !important; height: auto !important; padding-top: 80px; padding-bottom: 80px; } .hero__sticker { transform: rotate(5deg) !important; } .process-card { position: static !important; transform: none !important; filter: none !important; } }