/* ============================================================ * directory.css * ---------------------------------------------------------- * Extracted from the legacy Laravel app on 2026-05-06 (originally at * legacy/frontend_v3_goodfirm/public/static/css/directory.css). * * Styles the /directories and /directories/software A-Z directory pages. * Used by app/directories/software/layout.tsx via a per-route . * Sourceoftruth lives here now — edit this file directly. * ============================================================ */ @media (min-width:1025px) { main .container { /*max-width:1054px */ } .directoryHeader::before { background-image: url("https://assets.goodfirms.co/static/home-bg.svg"); background-repeat: no-repeat; } .directoryHeader::before { background-position: 100% 0; content: ""; width: 687px; height: 354px; position: absolute; bottom: 0; z-index: 0; right: 0; } } .directoryHeader{background: var(--primary);padding:70px 0;position:relative;text-align: center;border-bottom: 1px solid var(--border-color);overflow: hidden;color: var(--white)} .directoryHeader p{font-weight:600} h1{margin-bottom:20px;} .directories-image-top-left {position: absolute;left: 0;top: -15px;display: flex;height: 204px;} .directories-image-bottom-right {position: absolute;right: 0;bottom: -10px;display: flex;height:211px;} .directories-image-center {position: absolute;left: 10%;bottom: 18%;} .service-directory-list{background: var(--white);padding:30px 0 50px 0} .software-directory-list{background: var(--white);padding:50px 0} .explore-page{display: flex;gap: 30px} .explore-menu-wrapper{width:280px;display: flex;flex-direction: column;border:1px solid var(--border-color);border-radius: var(--border-radius);height: fit-content;} .explore-menu-header{height: 46px;border-bottom: 1px solid var(--border-color);display: flex;align-items: center;gap: 10px;padding: 0 15px;color: var(--primary);} .explore-menu-header::before,.tablet-explore-menu::before{content: "";background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M13.802 8.492A2.2 2.2 0 0 1 16 10.69v3.113a2.2 2.2 0 0 1-2.198 2.198H10.69a2.2 2.2 0 0 1-2.198-2.198V10.69a2.2 2.2 0 0 1 2.198-2.198h3.112zm-8.491 0a2.2 2.2 0 0 1 2.198 2.198v3.113a2.2 2.2 0 0 1-2.198 2.198H2.198A2.2 2.2 0 0 1 0 13.802V10.69a2.2 2.2 0 0 1 2.198-2.198H5.31zm5.379 1.284c-.504 0-.914.41-.914.914v3.113c0 .504.41.914.914.914h3.112c.504 0 .914-.41.914-.914V10.69c0-.503-.41-.914-.914-.914H10.69zm-5.379 0H2.198c-.503 0-.914.41-.914.914v3.113c0 .504.41.914.914.914H5.31c.504 0 .914-.41.914-.914V10.69c0-.503-.41-.914-.914-.914zM5.31 0a2.2 2.2 0 0 1 2.198 2.198v3.113A2.2 2.2 0 0 1 5.31 7.51H2.198A2.2 2.2 0 0 1 0 5.311V2.198A2.2 2.2 0 0 1 2.198 0H5.31zm8.491 0A2.2 2.2 0 0 1 16 2.198v3.113a2.2 2.2 0 0 1-2.198 2.198H10.69a2.2 2.2 0 0 1-2.198-2.198V2.198A2.2 2.2 0 0 1 10.69 0h3.112zM5.31 1.285H2.198c-.503 0-.914.41-.914.914v3.113c0 .503.41.914.914.914H5.31c.504 0 .914-.41.914-.914V2.198c0-.503-.41-.914-.914-.914zm8.491 0H10.69c-.504 0-.914.41-.914.914v3.113c0 .503.41.914.914.914h3.112c.504 0 .914-.41.914-.914V2.198c0-.503-.41-.914-.914-.914z' fill='%23C5A063' fill-rule='evenodd'/%3E%3C/svg%3E");;height: 16px;width: 16px;} .tablet-explore-menu{color: var(--primary);cursor:pointer;font-size: 15px;display: flex;align-items: center;gap: 10px;display: none} /* Golden right arrow after the "Categories" word on the mobile rail toggle (stakeholder 2026-06-24). Mobile-only since .tablet-explore-menu is hidden on desktop. Inline data-URI gold (#C5A063) arrow to match the ::before grid icon convention already used in this legacy file. The flex gap:10px spaces it from the word. */ .tablet-explore-menu::after{content: "";background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11M9 3.5L13.5 8 9 12.5' fill='none' stroke='%23C5A063' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center;height: 16px;width: 16px;} .explore-menus{padding:15px} .explore-title{color: var(--primary);height:40px;border-radius:var(--border-radius);display: flex;align-items: center;padding:0 14px;cursor: pointer;border:1px solid var(--white)} .explore-title:hover,.explore-title:focus{color: var(--black-hover);background: #FDF6E9;border-color: var(--secondary)} li.active .explore-title{background:#FDF6E9;cursor: pointer;border-color: var(--secondary)} .explore-menu-detail-wrapper{display: flex;width: calc(100% - 310px);} .explore-page-container{display: flex;flex-direction: column;width: 100%;} .explore-page-in{display: flex;justify-content: space-between;position: relative} .explore-page-in a{font-size:20px;color: var(--primary)} .explore-page-in a.view-all-menu{display: flex;justify-content: center;align-items: center;gap: 8px;color: var(--primary);font-size: 14px;font-weight: 600;cursor: pointer} .hunt-page{margin: 15px 0 30px 0;border: 1px solid var(--border-color);height: 44px;border-radius: var(--border-radius);display: flex;padding: 0 15px;position: relative} .hunt-page::before{content: "";display: block;height: 22px;position: relative;left:-6px;top:10px;margin: 0;width: 22px;background-color:var(--primary);-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');mask-image:url('data:image/svg+xml;charset=utf-8,');-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;} .hunt{height:42px;width:100%;font-size: 16px;} .result-section{border: 1px solid var(--border-color);border-radius: var(--border-radius);margin-bottom:20px} .result-section-title{display: flex;height: 57px;align-items: center;color: var(--gray);font-size:16px;text-transform: uppercase;font-weight:600;cursor:pointer} .tab-content-list-title{width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;} .tab-content-list-title button{cursor: pointer} .result-section-output{border-top: 1px solid var(--border-color);display:none} .result-section.open .result-section-output{display: block} .result-section button.collapse svg {transform: rotate(270deg);} .result-section.open button.collapse svg {transform: rotate(0deg);} .result-section-output ul{display: flex;flex-wrap: wrap;padding: 15px 30px;} .result-section-output ul li{width:33.33%} .result-section-output ul li a{font-size:14px;color: var(--primary);line-height: 28px;} .result-section-output ul li a:hover{color: var(--secondary)} .result-section-output ul.result-in-row{display: flex;flex-direction: column;padding:0} .result-section-output ul.result-in-row li{border-bottom: 1px solid var(--border-color);width:100%;position: relative;} .result-section-output ul.result-in-row li a{height:54px;display: flex;align-items: center;color: var(--primary);font-size: 16px;padding-left: 30px;} .result-section-output ul.result-in-row li a:hover{color: var(--secondary)} .level-3-container{display: none} .level-3-menu.open .level-3-container{display:flex;margin-left: 30px;border-top: 1px solid var(--border-color);padding: 20px 0 30px 5px;gap:20px} .lev_3_area{flex-grow: 1;flex-basis: 0;} .level-3-menu > a{position:relative;width:calc(100% - 50px)} .sub-menu-tab::after {content: "";position: absolute;top: 0;right: 15px;background: linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary));background-position: center;background-size: 50% 2px, 2px 50%;background-repeat: no-repeat;border: none;height: 20px;width: 20px;display: inline-block;margin-top: 16px;margin-right: 1px;} .level-3-menu.open .sub-menu-tab::after {background-size: 50% 2px,0 50%;} .sub-menu-tab{cursor: pointer;position: absolute;right: 0;top: 0;} .result-section-output ul.result-in-row li:last-child{border-bottom:0} .lev_3_title{font-size:14px;text-transform: uppercase;font-weight:600;color: var(--gray);margin-bottom: 5px;} .lev_3_output ul{padding:0} ul.result-in-row .lev_3_output ul li{border:none;padding-bottom: 15px;} ul.result-in-row .lev_3_output ul li a{height:auto;line-height:28px;font-size:14px;padding:0;line-height: normal;} .view-all-menu-list{cursor:pointer;color: var(--blue);font-size:14px} .view-all-menu-list:hover{color: var(--blue-hover)} .result-not-found{align-items: center;display: flex;flex-direction: column;border: 0;border-radius: var(--border-radius);padding: 30px 20px;text-align: center;} .result-not-found p{color: var(--gray)} .explore-overlay{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 15;background-color: rgba(0,0,0,.10);display:none} .software-explore-page .hunt-page{margin-top:0} .software-explore-list a{color: var(--primary)} .software-explore-list a:hover{color: var(--secondary)} .explore-alpha{color: var(--gray);font-size:20px;font-weight:600;border-bottom:1px solid var(--border-color);margin-bottom: 20px;padding-bottom: 15px;} .explore-row ul{display: flex;flex-wrap: wrap;} .explore-row ul li{width:33.33%;padding:5px 0 15px 0;} .explore-row{padding-bottom:20px} @media (max-width:1024px) { .directories .container{padding:0 35px} .directories-static-image{display: none} .directoryHeader{padding:60px 0} .tablet-explore-menu{display: flex;position: absolute;left: 0px;top: 5px;} .explore-menu-detail-wrapper{width:100%} .explore-menu-wrapper{bottom: 0;left: 0;position: fixed;z-index: 1001;display: none;top: 0;background-color: #fff;overflow: hidden;width:309px;border-radius: 0;border:0;box-shadow: var(--box-shadow)} a.view-all-menu{position: absolute;right: 0px;top: 5px;} .explore-page-in{justify-content: center;} .level-3-menu.open .level-3-container{flex-wrap: wrap;padding-bottom:0;gap: 0;} .lev_3_area{width: 50%;flex-basis: auto;margin-bottom: 30px;} .explore-menus{overflow-y: auto} .software-directory-list{padding:30px 0} .explore-alpha{font-size:16px} .explore-row ul li{width:50%} } @media (max-width:767px) { .directories .container { padding: 0 20px; } .directoryHeader { padding: 30px 0 } .service-directory-list{padding:20px 0 30px 0} .explore-page-in {justify-content: left;height:54px;align-items: flex-end;} .explore-page-in a{line-height:normal;font-size:16px} a.view-all-menu {top: auto;bottom: 0;} .tablet-explore-menu{top:0} .hunt-page{margin: 15px 0;height: 32px;} .hunt {height: 30px;} .hunt-page::before{top:4px} .result-section-title{height:46px} .result-section-output ul.result-in-row li a{height:44px;font-size:14px} .sub-menu-tab::after{margin-top:13px} .result-section-title{font-size:14px} .lev_3_area{width:100%;} .result-section-output ul li{width:100%} h3{font-size:18px} .explore-row ul li{width:100%} .software-explore-page .hunt-page{margin-bottom:30px} .hunt{font-size:12px} } /* ============================================================ * Tailwind .collapse override. * Tailwind ships a `.collapse` utility (visibility: collapse) which * collides with the legacy class hook used here as a JS toggle target * on `.result-section-title` and the chevron `