/* ============================================================ Unified hover & focus system ------------------------------------------------------------ One accent (--accent) drives every link / nav hover state. Site-wide :focus-visible for keyboard accessibility. Loaded LAST in so it wins by source-order cascade. Intentionally NOT touched (per project decision): - .list-v2, .listv2-project, .listv2-wrapper, .project-image, .lv2-images, .grid-project, .list-title, .horizontal-*, .wall-project, .vertical-projects, .detailed-*, .big-slider* None of the selectors below match showcase tiles, so the homepage portfolio showcase behaviour is unaffected. ============================================================ */ :root { --accent: #c4604a; /* Light yellow marker for scroll-triggered text highlights — classic highlighter feel at 35% alpha. Pairs with the half-height bar variant (background-size …38%) so the gray body text (#6d6d6d) sits half on plain page background and half on softened yellow — readable and editorial rather than fluorescent. */ --highlight: rgba(255, 234, 89, 0.35); } @media (hover: hover) { /* Body-copy text links explicitly marked with .underline. This is the Cygni convention for "this is a link in body text". */ a.underline:hover { color: var(--accent); } /* Light-layout variant of the above — overrides the existing styles.css rule that hard-codes #121212 on light pages. */ .light a.underline:hover, .layout-light a.underline:hover { color: var(--accent); } /* Footer navigation variants. Replaces the per-page inline #ede574 yellow and the styles.css #ededed off-white. */ .footer-nav li a:hover, .footer-list li a:hover, .footer-list a:hover, .footer-menu li a:hover { color: var(--accent); } /* Accordion titles (homepage "What do I do?", list page). */ .accordion-title:hover { color: var(--accent); } } /* ============================================================ Keyboard focus indicator — always on, regardless of hover. Currently the site has zero visible focus state; this is a quiet accessibility win. ============================================================ */ a:focus-visible, button:focus-visible, .accordion-title:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } /* ============================================================ h1.big-title entry animation — typographic "settle" ------------------------------------------------------------ Overrides the generic .skew-up entry rule specifically for h1.big-title. The headline lands at wider tracking, slightly displaced, and dimmed — then "focuses" into its final position as Locomotive Scroll adds .is-inview when it enters the viewport. Same trigger mechanism the rest of the site already uses, so no HTML or JS changes are needed. Specificity (0,2,1) beats the original .skew-up rule (0,1,0), and hover.css is loaded after styles.css as a belt-and-braces. ============================================================ */ h1.big-title.skew-up { opacity: 0.25; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); letter-spacing: 0.04em; -webkit-transition: opacity .9s cubic-bezier(.215, .61, .355, 1), -webkit-transform .9s cubic-bezier(.215, .61, .355, 1), letter-spacing .9s cubic-bezier(.215, .61, .355, 1); -o-transition: opacity .9s cubic-bezier(.215, .61, .355, 1), transform .9s cubic-bezier(.215, .61, .355, 1), letter-spacing .9s cubic-bezier(.215, .61, .355, 1); transition: opacity .9s cubic-bezier(.215, .61, .355, 1), transform .9s cubic-bezier(.215, .61, .355, 1), letter-spacing .9s cubic-bezier(.215, .61, .355, 1); } h1.big-title.skew-up.is-inview { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); letter-spacing: -0.02em; } /* ============================================================ Scroll-triggered text highlights — half-height marker ------------------------------------------------------------ Apply … (or any inline element with .text-highlight) to highlight key phrases inside body copy. The marker draws from left to right over ~1.1s once the element enters the viewport. Trigger class .is-inview is added by initTextHighlights() in scripts.js (IntersectionObserver-based — independent of Locomotive Scroll and splitLines). ============================================================ */ .text-highlight { background-image: linear-gradient(120deg, var(--highlight) 0%, var(--highlight) 100%); background-repeat: no-repeat; background-size: 0% 38%; /* width:0 = invisible; 38% = half-height bar */ background-position: 0 88%; /* sit near the baseline like a marker */ padding: 0 .05em; transition: background-size 1.1s cubic-bezier(.215, .61, .355, 1); } /* Reset the native yellow so only our linear-gradient shows */ mark.text-highlight { background-color: transparent; color: inherit; } .text-highlight.is-inview { background-size: 100% 38%; } /* Links wrapped inside a highlight inherit the body color, not the default link blue / underline gray; the highlight visually marks them already. */ .text-highlight a { color: inherit; } /* Hover state for links inside a scroll-triggered highlight (e.g. "Grids & Dots" in the index bio). Deliberately OUTSIDE the @media (hover: hover) block so it fires on every device, and !important to defeat the inline a:hover { color: #ede574 } rule in index.html's