/* ===================================================================== UNFYD.COMPASS — site-wide polish layer Loaded LAST so it layers on top of each page's own styles. Tune everything from this one file. Three parts: 1) micro-interactions (transitions + subtle hover lift + focus ring) 2) heading / hero size refinement (gentle trim of oversized display text) 3) scroll-reveal (only active when polish.js runs — fails safe = visible) ===================================================================== */ /* ---------- 1. Micro-interactions ---------- */ a, button, [class*="btn"], [class*="cta"], [class*="card"], [class*="pill"], [class*="chip"], [role="button"] { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease, opacity .2s ease; } button:hover, [class*="btn"]:hover, [class*="cta"]:hover, [class*="card"]:hover, [role="button"]:hover { transform: translateY(-2px); } button:active, [class*="btn"]:active, [class*="cta"]:active, [role="button"]:active { transform: translateY(0); } a:focus-visible, button:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 2px solid rgba(237, 28, 36, .55); outline-offset: 3px; border-radius: 4px; } /* ---------- 2. Heading / hero size refinement ---------- Caps oversized display text; lower these numbers to shrink further. */ h1 { font-size: clamp(1.7rem, 4vw, 2.5rem) !important; line-height: 1.14 !important; } h2 { font-size: clamp(1.35rem, 3vw, 1.9rem) !important; line-height: 1.2 !important; } [class*="hero"] [class*="title"], [class*="hero-title"], [class*="hero"] h1 { font-size: clamp(2rem, 4.8vw, 2.9rem) !important; line-height: 1.1 !important; } /* ---------- 3. Scroll-reveal ---------- CSS only hides elements when polish.js has added .reveal-on to , so if JS is disabled/fails, nothing is ever hidden. */ html.reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); will-change: opacity, transform; } html.reveal-on [data-reveal].in { opacity: 1; transform: none; transition: opacity .6s ease, transform .65s cubic-bezier(.2, .8, .2, 1); } /* ---------- Respect reduced-motion ---------- */ @media (prefers-reduced-motion: reduce) { html.reveal-on [data-reveal], html.reveal-on [data-reveal].in { opacity: 1 !important; transform: none !important; transition: none !important; } button:hover, [class*="btn"]:hover, [class*="cta"]:hover, [class*="card"]:hover { transform: none !important; } } /* ---------- Social rail: fixed at the RIGHT edge, ALWAYS OPEN, no toggle arrow (all pages) ---------- Most pages ship a collapsible rail (translated off-screen, opened via an arrow). Forcing translateX(0) keeps it permanently open and overrides that collapse; the visual styling is mirrored for the right edge, and the arrow is removed. */ .social-rail { left: auto !important; right: 0 !important; /* flush to the right edge (no gap) */ transform: translateY(-50%) translateX(0) !important; /* always open — overrides the off-screen default */ animation: none !important; border-radius: 16px 0 0 16px !important; /* rounded on the inner (left) side only — no right-corner radius */ border-left: 1px solid rgba(255, 255, 255, 0.22) !important; border-right: none !important; /* open edge hugs the screen's right */ box-shadow: -5px 0 26px -8px rgba(88, 35, 139, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; gap: 3px !important; padding: 9px 6px !important; /* tight icon spacing, like TigerTeams */ } .social-rail-toggle { display: none !important; } /* remove the open/close arrow */ /* hover tooltip appears to the LEFT of the icons, arrow pointing right */ .social-ico .lbl { left: auto !important; right: calc(100% + 12px) !important; } .social-ico .lbl::before { right: auto !important; left: 100% !important; border-right-color: transparent !important; border-left-color: #1a1a2e !important; } /* ---------- Match the TigerTeams icon look on every page: no resting background, smaller size ---------- */ .social-ico { width: 32px !important; height: 32px !important; border-radius: 9px !important; background: transparent !important; /* remove the rgba(0,0,0,0.22) box */ } .social-ico svg { width: 18px !important; height: 18px !important; } .social-ico:hover { background: rgba(255, 255, 255, 0.16) !important; } /* subtle hover, like TigerTeams */ @media (max-width: 600px) { .social-rail { right: 0 !important; gap: 1px !important; padding: 7px 5px !important; } /* flush to the extreme right on mobile (overlay scrollbars, no clipping risk) */ .social-ico { width: 29px !important; height: 29px !important; } .social-ico svg { width: 16px !important; height: 16px !important; } }