/* custom.css */ .tt-card{ border-radius: 1rem; background: #fff; border-color: #e5e7eb; box-shadow: 0 10px 30px rgba(17,24,39,.08); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; margin-right: 2em; margin-left: 2em; } .tt-card:hover{ transform: translateY(-2px); border-color: #111827; box-shadow: 0 16px 44px rgba(17,24,39,.12); } /* optional extras */ .tt-card h3{ letter-spacing:.01em } .tt-card p{ color:#6b7280 } .tt-card-intro { margin-left: 2em !important; } /* default (assume light until told otherwise) */ .tt-logo--light { display: inline-block !important; } .tt-logo--dark { display: none !important; } /* when Typhoon sets */ html.dark .tt-logo--light { display: none !important; } html.dark .tt-logo--dark { display: inline-block !important; } /* when Typhoon sets (be explicit) */ html.light .tt-logo--light { display: inline-block !important; } html.light .tt-logo--dark { display: none !important; } /* Let the hero content span the full container width */ @media (min-width: 768px){ /* md+ */ #hero .flex > div{ width:100% !important; max-width:none !important; } }