From ad58f114fdc179211dafd6d886dc82479385370e Mon Sep 17 00:00:00 2001 From: shahrzad011 Date: Wed, 19 Aug 2026 08:08:34 +0330 Subject: [PATCH] feat: add custom frontend styles --- public/assets/css/custom.css | 606 +++++++++++++++++++++++++++++++++++ 1 file changed, 606 insertions(+) create mode 100644 public/assets/css/custom.css diff --git a/public/assets/css/custom.css b/public/assets/css/custom.css new file mode 100644 index 0000000..d68af3b --- /dev/null +++ b/public/assets/css/custom.css @@ -0,0 +1,606 @@ +/* ========================================================= + Travel Agency - Home Page + ========================================================= */ + +.travel-page { + background: #f6f8fb; + min-height: 100vh; + padding: 60px 0; + direction: rtl; +} + +.travel-page .section-heading { + text-align: center; + margin-bottom: 35px; +} + +.travel-page .section-heading h2 { + font-size: 28px; + font-weight: 700; + color: #1f2937; + margin-bottom: 10px; +} + +.travel-page .section-heading p { + color: #7b8494; + font-size: 14px; + margin: 0; +} + + +/* ========================================================= + Tour Cards + ========================================================= */ + +.travel-page .travel-card { + background: #fff; + border-radius: 14px; + overflow: hidden; + border: 1px solid #edf0f4; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); + transition: all .25s ease; + height: 100%; +} + +.travel-page .travel-card:hover { + transform: translateY(-6px); + box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10); +} + + +/* تصویر کارت */ + +.travel-page .travel-card-image { + width: 100%; + height: 210px; + overflow: hidden; + background: #eef1f5; +} + +.travel-page .travel-card-image img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + transition: transform .35s ease; +} + +.travel-page .travel-card:hover .travel-card-image img { + transform: scale(1.05); +} + + +/* بدنه کارت */ + +.travel-page .travel-card-body { + padding: 20px; +} + +.travel-page .travel-card-title { + font-size: 19px; + font-weight: 700; + color: #202936; + margin: 0 0 12px; +} + +.travel-page .travel-card-summary { + color: #737d8d; + font-size: 14px; + line-height: 1.9; + min-height: 52px; + margin-bottom: 15px; +} + +.travel-page .travel-date { + color: #555f70; + font-size: 13px; + margin-bottom: 18px; +} + +.travel-page .travel-date i { + margin-left: 6px; + color: #1687d9; +} + + +/* ========================================================= + Buttons + ========================================================= */ + +.travel-page .travel-btn { + display: block; + text-align: center; + text-decoration: none !important; + background: #1687d9; + color: #fff !important; + border-radius: 8px; + padding: 10px 15px; + font-size: 14px; + transition: .2s; +} + +.travel-page .travel-btn:hover { + background: #0d6fae; +} + + +/* ========================================================= + Empty State + ========================================================= */ + +.travel-page .empty-box { + background: #fff; + border: 1px dashed #d9dee7; + border-radius: 12px; + padding: 35px; + text-align: center; + color: #8a93a1; +} + + +/* ========================================================= + Pagination + ========================================================= */ + +.travel-page .pagination-wrapper { + display: flex; + justify-content: center; + margin-top: 30px; + direction: rtl; +} + +.travel-page .pagination-wrapper nav { + margin: 0; +} + + +/* ========================================================= + Flights + ========================================================= */ + +.travel-page .flights-section { + margin-top: 80px; +} + +.travel-page .flight-card { + background: #fff; + border-radius: 14px; + border: 1px solid #edf0f4; + padding: 22px; + height: 100%; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); + transition: all .25s ease; +} + +.travel-page .flight-card:hover { + transform: translateY(-5px); + box-shadow: 0 14px 30px rgba(0, 0, 0, 0.09); +} + +.travel-page .flight-icon { + width: 50px; + height: 50px; + border-radius: 50%; + background: #e9f5ff; + color: #1687d9; + display: flex; + align-items: center; + justify-content: center; + font-size: 21px; + margin-bottom: 17px; +} + +.travel-page .flight-title { + font-size: 19px; + font-weight: 700; + color: #202936; + margin-bottom: 12px; +} + +.travel-page .flight-summary { + color: #737d8d; + font-size: 14px; + line-height: 1.9; + min-height: 52px; + margin-bottom: 14px; +} + +.travel-page .flight-date { + color: #555f70; + font-size: 13px; + margin-bottom: 18px; +} + + +/* ========================================================= + Responsive + ========================================================= */ + +@media (max-width: 767px) { + + .travel-page { + padding: 35px 15px; + } + + .travel-page .section-heading h2 { + font-size: 23px; + } + + .travel-page .travel-card-image { + height: 190px; + } + + .travel-page .flights-section { + margin-top: 55px; + } + +} + + +.tour-details-page { + direction: rtl; + padding: 50px 0; + background: #f7f8fa; +} + +.tour-details-card { + max-width: 1050px; + margin: auto; + background: #fff; + border-radius: 16px; + overflow: hidden; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); +} + +.tour-details-image { + width: 100%; + height: 400px; + overflow: hidden; +} + +.tour-details-image img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.tour-no-image { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: #eeeeee; + color: #777; +} + +.tour-details-content { + padding: 35px; +} + +.tour-details-title { + margin: 0 0 25px; + font-size: 32px; + font-weight: 700; + color: #222; +} + +.tour-details-info { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 15px; + margin-bottom: 35px; +} + +.tour-info-box { + padding: 20px; + background: #f7f8fa; + border-radius: 12px; + text-align: center; +} + +.tour-info-label { + display: block; + color: #888; + font-size: 13px; + margin-bottom: 8px; +} + +.tour-info-box strong { + color: #222; + font-size: 15px; +} + +.tour-description { + border-top: 1px solid #eee; + padding-top: 30px; +} + +.tour-description h2, +.tour-flights h2, +.related-tours h2 { + margin-bottom: 20px; + font-size: 22px; +} + +.tour-description p { + color: #555; + line-height: 2.2; + font-size: 15px; +} + +.tour-flights { + margin-top: 35px; + padding-top: 30px; + border-top: 1px solid #eee; +} + +.flight-item { + display: flex; + justify-content: space-between; + gap: 20px; + padding: 18px; + margin-bottom: 10px; + background: #f7f8fa; + border-radius: 10px; +} + +.flight-item span { + display: block; + color: #888; + font-size: 13px; + margin-bottom: 5px; +} + +.related-tours { + margin-top: 40px; + padding-top: 30px; + border-top: 1px solid #eee; +} + +.related-tours-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 15px; +} + +.related-tour-card { + display: block; + overflow: hidden; + background: #f7f8fa; + border-radius: 10px; + color: inherit; + text-decoration: none; +} + +.related-tour-card img { + width: 100%; + height: 130px; + object-fit: cover; + display: block; +} + +.related-tour-card div { + padding: 12px; +} + +.related-tour-card h3 { + margin: 0 0 8px; + font-size: 15px; +} + +.related-tour-card span { + color: #888; + font-size: 12px; +} + +.tour-back { + margin-top: 35px; +} + +.tour-back-button { + display: inline-block; + padding: 12px 25px; + background: #222; + color: #fff; + border-radius: 8px; + text-decoration: none; +} + +.tour-back-button:hover { + color: #fff; + text-decoration: none; + opacity: .9; +} + +@media (max-width: 768px) { + + .tour-details-page { + padding: 20px 10px; + } + + .tour-details-image { + height: 250px; + } + + .tour-details-content { + padding: 20px; + } + + .tour-details-title { + font-size: 25px; + } + + .tour-details-info { + grid-template-columns: 1fr 1fr; + } + + .related-tours-grid { + grid-template-columns: 1fr 1fr; + } + + .flight-item { + flex-direction: column; + } +} + +/* ========================================================= + Main Navbar - RTL Fix +========================================================= */ + +#main-nav { + direction: rtl; + width: 100%; + position: relative; + z-index: 1000; +} + +#main-nav .container { + width: 100%; +} + +#main-nav .navbar-inner { + display: flex; + align-items: center; + min-height: 80px; +} + +/* لوگو */ +#main-nav .navbar-header { + float: none; + flex-shrink: 0; +} + +#main-nav .navbar-brand { + display: flex; + align-items: center; + height: 80px; + padding: 10px 0 10px 30px; +} + +#main-nav .navbar-brand img { + max-height: 55px; + width: auto; +} + + +/* بخش منو */ +#main-nav .navbar-collapse { + display: flex !important; + align-items: center; + justify-content: space-between; + flex: 1; + border: 0; + box-shadow: none; +} + + +/* منوی اصلی */ +#main-nav .navbar-nav { + float: none !important; + display: flex; + align-items: center; + margin: 0; +} + +#main-nav .navbar-nav > li { + float: none; +} + +#main-nav .navbar-nav > li > a { + display: flex; + align-items: center; + min-height: 80px; + padding: 0 16px; + white-space: nowrap; +} + + +/* منوی سمت راست */ +#main-nav .navbar-nav.navbar-right { + margin-right: auto; + margin-left: 0; +} + + +/* آیکون حساب */ +#main-nav .navbar-nav-item-user-icon { + margin-left: 7px; + font-size: 18px; +} + + +/* Dropdown */ +#main-nav .dropdown-menu { + right: 0; + left: auto; + min-width: 180px; + text-align: right; +} + +#main-nav .navbar-right .dropdown-menu { + right: auto; + left: 0; +} + + +/* موبایل */ +@media (max-width: 767px) { + + #main-nav .navbar-inner { + display: block; + min-height: auto; + } + + #main-nav .navbar-header { + display: flex; + align-items: center; + justify-content: space-between; + min-height: 70px; + } + + #main-nav .navbar-brand { + height: 70px; + padding: 8px 0; + } + + #main-nav .navbar-toggle { + float: left; + margin-left: 0; + margin-right: 15px; + } + + #main-nav .navbar-collapse { + display: block !important; + width: 100%; + padding: 0; + } + + #main-nav .navbar-nav { + display: block; + width: 100%; + } + + #main-nav .navbar-nav > li { + display: block; + width: 100%; + } + + #main-nav .navbar-nav > li > a { + min-height: 45px; + padding: 12px 15px; + display: block; + } + + #main-nav .navbar-nav.navbar-right { + margin: 0; + } + + #main-nav .dropdown-menu { + position: static; + float: none; + width: 100%; + box-shadow: none; + } +}