/* ============================================================================= CMER&TI — motion and interaction layer ============================================================================= Loaded on every page, after base.css. This file adds movement only. It defines no colours of its own — every hue below is var(--wine), var(--wine-tint) and friends from base.css, so the palette is untouched and a future theme change still flows through one file. Everything degrades: with JavaScript off, the reveal states stay visible rather than staying hidden; with prefers-reduced-motion, all of it stops. ========================================================================== */ /* --------------------------------------------------------------- 1. reveal Sections rise into place as they enter the viewport. The `js-on` class is set by js/effects.js on , so without JS nothing is ever hidden. */ .js-on [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); will-change:opacity, transform; } .js-on [data-reveal].is-in{opacity:1; transform:none} /* Children stagger, so a grid of cards arrives as a wave rather than a slab. */ .js-on [data-reveal-stagger] > *{ opacity:0; transform:translateY(16px); transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); } .js-on [data-reveal-stagger].is-in > *{opacity:1; transform:none} .js-on [data-reveal-stagger].is-in > *:nth-child(1){transition-delay:.04s} .js-on [data-reveal-stagger].is-in > *:nth-child(2){transition-delay:.09s} .js-on [data-reveal-stagger].is-in > *:nth-child(3){transition-delay:.14s} .js-on [data-reveal-stagger].is-in > *:nth-child(4){transition-delay:.19s} .js-on [data-reveal-stagger].is-in > *:nth-child(5){transition-delay:.24s} .js-on [data-reveal-stagger].is-in > *:nth-child(6){transition-delay:.29s} .js-on [data-reveal-stagger].is-in > *:nth-child(7){transition-delay:.34s} .js-on [data-reveal-stagger].is-in > *:nth-child(n+8){transition-delay:.38s} /* ------------------------------------------------------ 2. scroll progress A hairline of wine across the very top, showing how far down the page you are. Fixed above the sticky nav. */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--wine), #c2185b, var(--wine)); z-index:200; pointer-events:none; will-change:transform; } /* ------------------------------------------------------------ 3. card lift Cards rise slightly and light up along a soft gradient that follows the pointer. --mx/--my are written by js/effects.js as percentages. */ .card, .dcard, .tech-card, .stats-card, .dstat, .ar-card, .social-card{ position:relative; isolation:isolate; transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease; } .card::after, .dcard::after, .tech-card::after, .stats-card::after, .dstat::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s ease; background:radial-gradient( 22rem circle at var(--mx,50%) var(--my,50%), rgba(122,20,66,.09), transparent 62%); } .card:hover, .dcard:hover, .tech-card:hover, .stats-card:hover, .dstat:hover, .ar-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(122,20,66,.16); border-color:var(--line-wine); } .card:hover::after, .dcard:hover::after, .tech-card:hover::after, .stats-card:hover::after, .dstat:hover::after{opacity:1} /* ------------------------------------------------------- 4. link underline Body links draw their underline from the left instead of just appearing. */ .prose a:not(.btn), .dsection a:not(.btn), .datapage__intro a, .dnote a{ position:relative; text-decoration:none; background-image:linear-gradient(var(--wine), var(--wine)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 1.5px; transition:background-size .3s cubic-bezier(.2,.8,.2,1), color .2s ease; padding-bottom:1px; } .prose a:not(.btn):hover, .dsection a:not(.btn):hover, .datapage__intro a:hover, .dnote a:hover{background-size:100% 1.5px} /* --------------------------------------------------------------- 5. button A light sweeps across on hover, and the button presses down on click. */ .btn{position:relative; overflow:hidden; isolation:isolate} .btn::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); transition:left .55s cubic-bezier(.2,.8,.2,1); z-index:-1; } .btn:hover::after{left:130%} .btn:active{transform:translateY(1px)} /* ------------------------------------------------------------- 6. nav bar The section a page belongs to keeps a lit underline; the others draw one on hover. */ .nav__list > li > a{position:relative} .nav__list > li > a::after{ content:""; position:absolute; left:16px; right:16px; bottom:6px; height:2px; background:#fff; border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.2,1); } .nav__list > li > a:hover::after, .nav__list > li.is-current > a::after, .nav__list > li.is-open > a::after{transform:scaleX(1)} .nav__item.is-open > a .caret, .nav__item:hover > a .caret{transform:rotate(180deg)} .nav__list > li > a .caret{display:inline-block; transition:transform .25s ease} /* --------------------------------------------------------------- 7. tables A wine rail slides in on the hovered row, so the eye can track across a wide table of figures without losing the line. */ .dtable tbody tr, .tech-table tbody tr, .prose table tbody tr{ transition:background .18s ease; } .dtable tbody tr:hover td, .dtable tbody tr:hover th, .tech-table tbody tr:hover td, .prose table tbody tr:hover td{background:var(--wine-tint)} .dtable tbody tr{position:relative} .dtable tbody tr td:first-child, .dtable tbody tr th:first-child{ box-shadow:inset 0 0 0 0 var(--wine); transition:box-shadow .2s ease; } .dtable tbody tr:hover td:first-child, .dtable tbody tr:hover th:first-child{box-shadow:inset 3px 0 0 0 var(--wine)} /* ---------------------------------------------------------- 8. back to top */ .to-top{ position:fixed; right:22px; bottom:22px; width:46px; height:46px; display:grid; place-items:center; background:var(--wine); color:#fff; border:0; border-radius:50%; box-shadow:0 8px 22px rgba(122,20,66,.34); cursor:pointer; z-index:150; opacity:0; visibility:hidden; transform:translateY(12px) scale(.9); transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s, background .2s ease; } .to-top.is-in{ opacity:1; visibility:visible; transform:none; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s, background .2s ease; } .to-top:hover{background:var(--wine-dark); transform:translateY(-2px)} .to-top svg{width:20px; height:20px} /* -------------------------------------------------------------- 9. tabs The active tab grows a wine bar along its base. */ .tabs button, .tabs a{position:relative; transition:color .2s ease, background .2s ease} .tabs button::after, .tabs a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--wine); transform:scaleX(0); transform-origin:center; transition:transform .3s cubic-bezier(.2,.8,.2,1); } .tabs button[aria-selected="true"]::after, .tabs a.is-active::after{transform:scaleX(1)} /* ------------------------------------------------- 10. focus and selection A visible, on-brand focus ring for keyboard users — and only for them. */ :focus-visible{ outline:3px solid var(--wine); outline-offset:2px; border-radius:3px; } ::selection{background:var(--wine); color:#fff} /* ------------------------------------------------------- 11. counting text Tabular figures so a number animating from 0 up to its value doesn't make the layout jitter as digit widths change. */ [data-count]{font-variant-numeric:tabular-nums} /* ---------------------------------------------------------- 12. page enter A short settle on first paint, so a navigation doesn't feel like a jump cut. Deliberately brief — this is a reference site, not a showreel. */ .js-on .content, .js-on .datapage, .js-on .stats-page{ animation:pageIn .4s cubic-bezier(.2,.8,.2,1) both; } @keyframes pageIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} } /* ------------------------------------------------------------- 13. respect One switch turns the whole file off for anyone who has asked their system to reduce motion. */ @media (prefers-reduced-motion:reduce){ .js-on [data-reveal], .js-on [data-reveal-stagger] > *{opacity:1 !important; transform:none !important; transition:none} .js-on .content, .js-on .datapage, .js-on .stats-page{animation:none} .scroll-progress{display:none} .card, .dcard, .tech-card, .stats-card, .dstat, .ar-card, .btn, .to-top, .nav__list > li > a::after, .tabs button::after, .tabs a::after{transition:none !important} .card:hover, .dcard:hover, .tech-card:hover, .stats-card:hover, .dstat:hover, .ar-card:hover, .to-top:hover{transform:none} .btn::after{display:none} }