/* ----- button : idle state ----- */ .sidebar-close { --t: 250ms; /* reuse timing */ font-size: 2rem; /* keeps “×” crisp on Hi-DPI */ line-height: 1; background: transparent; border: 0; cursor: pointer; transition: transform var(--t) cubic-bezier(.33,1,.68,1); } /* ----- micro-hover cue ----- */ .sidebar-close:hover { transform: rotate(90deg) scale(1.05); } /* ----- active/click: spin once ----- */ .sidebar-closing .sidebar-close { animation: btnSpin 400ms cubic-bezier(.33,1,.68,1) forwards; } @keyframes btnSpin { to { transform: rotate(-360deg); } } /* ----- motion safety ----- */ @media (prefers-reduced-motion: reduce) { .sidebar-close, .sidebar-close:hover, .sidebar-closing .sidebar-close { animation: none; transition: none; transform: none; } } /* ----- (optional) sidebar slide-out ----- */ .sidebar { transition: transform var(--t) cubic-bezier(.33,1,.68,1); } .sidebar.open { transform: translateX(0); } .sidebar.closing { transform: translateX(120%); } /* Burger button frame */ .burger{ width: 32px; height: 24px; position: relative; padding: 0; border: none; background: transparent; } /* The three lines */ .burger .bar{ position: absolute; left: 0; width: 100%; height: 3px; background:#212529; /* matches text-dark */ transition: transform .3s ease, opacity .3s ease, background-color .3s ease; } /* resting positions */ .burger .bar:nth-child(1){ top: 0; } .burger .bar:nth-child(2){ top: 10px; } .burger .bar:nth-child(3){ top: 20px; } /* Hover / focus effect */ .burger:hover .bar, .burger:focus-visible .bar{ background:#dc3545; /* Bootstrap “danger” red */ } .burger:hover .bar:nth-child(1), .burger:focus-visible .bar:nth-child(1){ transform: translateY(-2px); } .burger:hover .bar:nth-child(3), .burger:focus-visible .bar:nth-child(3){ transform: translateY(2px); } .burger:hover .bar:nth-child(2), .burger:focus-visible .bar:nth-child(2){ opacity: .7; /* subtle fade */ } /* Typical hero setup (flexible height, position-relative) */ .hero{ position:relative; } /* — 2-A · overlay always hugs the bottom centre — */ .hero-button-overlay{ position:absolute; left:50%; bottom:6vh; /* distance from viewport bottom (tweak) */ transform:translateX(-50%); /* centre horizontally */ display:flex; flex-direction:column; gap:1rem; align-items:center; } /* — 2-B · preload state: invisible + 40 px further down — */ .js-hero-overlay{ opacity:1; /*transform:translate(-50%, 40px); */ /* X = -50% (centred) ; Y = +40 px */ } /* — 2-C · when gets .hero-loaded — */ .hero-loaded .js-hero-overlay{ /*animation:slideUpFade .8s ease-out .25s forwards;*/ } @keyframes slideUpFade{ to{ opacity:1; transform:translate(-50%, 0); /* final bottom-centre spot */ } } /* optional bounce for the arrow after reveal */ .hero-loaded .arrow img{ /*animation:bounce 2s ease-in-out 1.2s infinite;*/ } @keyframes bounce{ 0%,100%{ transform:translateY(0); } 50% { transform:translateY(8px); } } .show { opacity: 1; transform: translateY(0); } .title { text-align: center; font-size: 2rem; font-weight: bold; margin-bottom: 20px; opacity: 0; transform: translateY(-20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .title.show { opacity: 1; transform: translateY(0); } .animate { opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .show { opacity: 1; transform: translateY(0); } @keyframes fadePopIn { 0% { opacity: 0; transform: translateY(80px) scale(0.8); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .animate-on-scroll { /* start hidden */ opacity: 0; } .animate-on-scroll.in-view { animation: fadePopIn 0.8s ease-out forwards; } section.animate-on-scroll { min-height:40vh; } @media screen and (max-width:778px) { body .js-hero-overlay { opacity: 1; transform: none; position: relative; bottom: 0; top: 0; left: 0; padding: 15px 0; background: white; } }