Home Header

/* ========================================================= ARC — SITE-WIDE MOTION (CSS only) ========================================================= */ /* 1. Smooth scrolling for anchor links (#arc-contact, #arcp-find-us …) */ html{scroll-behavior:smooth} /* 2. Page load — header slides down, content fades up */ @keyframes arcm-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} @keyframes arcm-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes arcm-fade{from{opacity:0}to{opacity:1}} header,.site-header,.wp-block-template-part:first-child{animation:arcm-down .6s cubic-bezier(.2,.7,.2,1) both} main,.site-main,.entry-content,.wp-site-blocks > main{animation:arcm-up .7s cubic-bezier(.2,.7,.2,1) .1s both} footer,.site-footer{animation:arcm-fade .8s ease .3s both} /* 3. Scroll reveal — sections and Arc snippets rise in as they enter the screen (modern browsers only; older browsers simply show everything normally) */ @supports (animation-timeline: view()){ .entry-content > *, .wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-cover, .arc-scope,.arcp-scope{ animation:arcm-reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 35%; } @keyframes arcm-reveal{from{opacity:0;transform:translateY(40px) scale(.985)}to{opacity:1;transform:none}} } /* 4. Buttons — lift + glow on hover */ .wp-block-button__link,.wp-element-button,button,input[type="submit"]{ transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease} .wp-block-button__link:hover,.wp-element-button:hover,input[type="submit"]:hover{ transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,32,96,.22)} .wp-block-button__link:active,.wp-element-button:active{transform:translateY(0)} /* 5. Text links — animated underline (content area only, not nav or buttons) */ .entry-content a:not(.wp-block-button__link):not([class*="arc"]){ text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat; transition:background-size .3s ease} .entry-content a:not(.wp-block-button__link):not([class*="arc"]):hover{background-size:100% 2px} /* 6. Navigation — amber underline grows on hover */ .wp-block-navigation-item__content,.main-navigation a,.menu-item > a{ position:relative;transition:color .2s ease} .wp-block-navigation-item__content::after,.main-navigation a::after,.menu-item > a::after{ content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px; background:#FCAF19;transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .wp-block-navigation-item__content:hover::after,.main-navigation a:hover::after,.menu-item > a:hover::after, .current-menu-item > a::after{transform:scaleX(1)} /* 7. Images — soft zoom on hover */ .wp-block-image,.wp-block-post-featured-image{overflow:hidden;border-radius:inherit} .wp-block-image img,.wp-block-post-featured-image img{transition:transform .6s cubic-bezier(.2,.7,.2,1)} .wp-block-image:hover img,.wp-block-post-featured-image:hover img{transform:scale(1.04)} /* 8. Cards / columns / blog posts — gentle lift */ .wp-block-column,.wp-block-post,.arc-card{transition:transform .25s ease,box-shadow .25s ease} .wp-block-post:hover,.arc-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,32,96,.10)} /* 9. Form fields — glow on focus */ input,textarea,select{transition:border-color .2s ease,box-shadow .2s ease} input:focus,textarea:focus,select:focus{box-shadow:0 0 0 4px rgba(252,175,25,.3)} /* 10. Accessibility — respect "reduce motion" settings */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }

Arc

Share with