/* Remove extra dark stripe above the footer on blog archive */ .colibri-main-content-archive .main-section { padding-bottom: 0 !important; } /* Stick the call button to the top-right of the viewport (all users) */ a.fixed-call-btn { position: fixed !important; top: 80px !important; right: 20px !important; left: auto !important; width: auto !important; z-index: 9999 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); border-radius: 6px; } .h-button__outer:has(> a.fixed-call-btn) { position: static !important; } /* usg-intro for HOME page: logo appears, then text TYPES out. Plays on every load. */ /* Timeline over 5s: 0.00-1.20s logo grows/appears on solid black backdrop 1.20-3.20s "LANGUAGE OF LUXURY" types out (18 steps), caret blinks 3.20-4.20s hold 4.20-5.00s whole overlay fades out */ /* --- logo + backdrop layer (::before) --- */ @keyframes silLogoSize{ 0%{background-size:0px 0px;} 34.78%{background-size:150px 150px;} 100%{background-size:150px 150px;} } @keyframes silFade{ 0%,89.57%{opacity:1;visibility:visible;} 100%{opacity:0;visibility:hidden;} } /* --- typed text layer (::after) --- */ @keyframes silTypeWidth{ from{width:0px;} to{width:396px;} } @keyframes silCaret{ 0%,26%{border-right-color:rgba(255,255,255,0);} 27%{border-right-color:rgba(255,255,255,0.85);} 41%{border-right-color:rgba(255,255,255,0);} 55%{border-right-color:rgba(255,255,255,0.85);} 69%{border-right-color:rgba(255,255,255,0);} 83%{border-right-color:rgba(255,255,255,0.85);} 85%,100%{border-right-color:rgba(255,255,255,0);} } body.home::before { content: ""; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 2147483646; pointer-events: none; background-color: #050505; background-image: url("https://usstonegroup.com/wp-content/uploads/2026/06/Logo_v2-300x300.png?crop=1"); background-repeat: no-repeat; background-position: center calc(50% - 55px); background-size: 0px 0px; opacity: 1; visibility: visible; animation: silLogoSize 3.74s ease forwards, silFade 3.74s ease forwards; } body.home::after { content: "LANGUAGE OF LUXURY"; position: fixed; left: 50%; top: calc(50% + 65px); transform: translate(calc(-50% + 1px), -50%); z-index: 2147483647; pointer-events: none; width: 0; max-width: 90vw; overflow: hidden; white-space: nowrap; box-sizing: content-box; border-right: 2px solid rgba(255,255,255,0); color: #fff; font-family: "Italiana", "Times New Roman", serif; font-size: 21px; letter-spacing: 10px; line-height: 31.5px; opacity: 1; visibility: visible; animation: silTypeWidth 1.35s steps(18) 1.5s 1 normal forwards, silCaret 3.74s ease 0s 1 normal forwards, silFade 3.74s ease 0s 1 normal forwards; } /* Slideshow: fill frame (cover) instead of fixed-height letterbox black stripes */ #usgSlideshow .usg-slide { background-size: cover !important; background-position: center !important; } /* Photo Gallery 2 cleanup: trim leftover gallery shell/padding so slideshow sits flush (slideshow still sourced from this block) */ #photo-gallery-2{ padding-top:0 !important; padding-bottom:0 !important; height:calc(100vh - 92px) !important; min-height:0 !important; overflow:hidden !important; } #photo-gallery-2 .h-section-grid-container{ display:none !important; } .admin-bar #photo-gallery-2{ height:calc(100vh - 124px) !important; } /* Give the logo 10px breathing space at the top of the header (logo was being cut off) */ #usgHeader { height: 102px !important; align-items: flex-start !important; padding-top: 10px !important; box-sizing: border-box !important; } #usgActions { top: 10px !important; } html body { padding-top: 102px !important; } /* ==== USG custom-2 video (large screens only) ==== */ @media (min-width: 768px){ /* Full-screen height video */ #custom-2 .video-container{ padding-top: 100vh !important; height: 100vh !important; } #custom-2 .ratio-inner{ height: 100% !important; } #custom-2 video.h-video-main{ width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Remove/hide controls and block interaction */ #custom-2 video.h-video-main{ pointer-events: none !important; } #custom-2 video.h-video-main::-webkit-media-controls{ display: none !important; } #custom-2 video.h-video-main::-webkit-media-controls-enclosure{ display: none !important; } #custom-2 video.h-video-main::-webkit-media-controls-panel{ display: none !important; } /* 10px white gap between this block and neighbours */ #custom-2{ margin-top: 10px !important; margin-bottom: 10px !important; } } /* USG FOOTER OVERRIDES START */ /* 1. Bold separation line under US STONE GROUP */ footer.usg-footer hr.usg-brandline{border-top:1px solid #000 !important;height:0 !important;} /* 2. Social icons centered, ABOVE the separation line; copyright/legal row last */ footer.usg-footer .usg-bottom{border-top:0 !important;padding-top:0 !important;margin-top:4px !important;} /* center icon cluster on the true page center to align with the centered copyright (corrects trailing-gap offset) */ footer.usg-footer .usg-socials{justify-content:center !important;padding-left:44px !important;margin-bottom:2px !important;} footer.usg-footer .usg-legal{border-top:1px solid #d8d8d8 !important;padding-top:24px !important;margin-top:0 !important;} /* 3. Align "(c) US Stone Group 2026" on the same line as Terms/Privacy/Cookies (offsets the absolute-centered copyright by half the legal padding-top so it matches the flex links) */ footer.usg-footer .usg-copyright-inline{top:calc(50% + 12px) !important;} /* keep the trailing-gap fix desktop-only so stacked mobile layout stays centered */ @media (max-width:820px){footer.usg-footer .usg-socials{padding-left:0 !important;}footer.usg-footer .usg-copyright-inline{top:auto !important;}} /* USG FOOTER OVERRIDES END */ /* USG HEADER MOBILE FIX START - keep brand text inside header stripe on small screens (iPhone 15+) */ @media (max-width: 600px) { #usgHeader .usg-brand img { height: 48px !important; } #usgHeader .usg-brand { margin-bottom: 4px !important; } #usgHeader .usg-brand span { font-size: 15px !important; letter-spacing: 3px !important; line-height: 1.1 !important; } } /* USG HEADER MOBILE FIX END */