/* ============================================================ GYAANSHALA — COURSES CATALOGUE (courses_page.php) page-specific styles Ported from the "courses listing" section of docs/design/artifacts/gyaanshala-courses.html: the inner-page banner, the filters aside, the results toolbar, the course grid and the pager, plus the "Not sure where to start?" band. Chrome (topbar/hdr/nav/ftr) and the shared primitives (buttons, .gs-wrap, .eyebrow, .sec-head, .badge, the .course-card family) live in gs-brand.css, already linked on every page by includes_top.php -- this file only carries what is unique to this page. Two deliberate departures from the artifact's mock, both explained in courses_page.php's header comment: - no "Course length" filter group (no $_GET param / model support) - the toolbar carries a grid/list layout toggle + reset control the artifact never needed (its markup is a static screenshot); the $layout session switch is real behaviour this rebuild keeps working SCOPED UNDER .gsx, same convention gs-brand.css / gs-page-home.css use: every top-level selector starts with `.gsx`, tokens stay on `.gsx` (defined in gs-brand.css, not redeclared here). ============================================================ */ /* ---------- inner-page banner ---------- */ .gsx .banner{ background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:44px 0 48px; } .gsx .banner::before{ content:"";position:absolute;inset:0;background-image:var(--booti);background-size:64px 64px;opacity:.15; } .gsx .banner-in{position:relative;z-index:2} .gsx .banner h1{color:#fff;font-size:clamp(30px,4.2vw,50px);margin-top:14px} .gsx .banner p{margin-top:14px;color:rgba(255,255,255,.75);max-width:56ch;font-size:16.5px} /* Social proof, counted at render. Sits on the dark banner, so it is set against the same white-on-dark scale as .banner p rather than the page ink colours -- var(--ink-2) here would be near-invisible. Deliberately quieter than the h1 and only slightly brighter than the intro paragraph. A real number stated plainly reads as a fact; the same number in a loud badge reads as marketing, which is the opposite of the point. */ .gsx .banner-proof{ margin-top:16px;font-size:15px;color:rgba(255,255,255,.72); display:flex;gap:8px;flex-wrap:wrap;align-items:baseline; } .gsx .banner-proof b{color:#fff;font-weight:750;font-variant-numeric:tabular-nums} /* One more chip in the card's existing meta row, which is already a flex of spans -- it inherits size, colour and spacing from .course-card-meta and only needs the count itself to read as a figure. */ .gsx .course-card-proof{font-weight:700;opacity:1;font-variant-numeric:tabular-nums} .gsx .crumbs{font-size:13.5px;color:rgba(255,255,255,.6);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .gsx .crumbs a:hover{color:var(--haldi-soft)} .gsx .crumbs span{opacity:.5} .gsx .searchbar{display:flex;gap:10px;margin-top:24px;max-width:560px} .gsx .searchbar input{ flex:1;min-width:0;background:rgba(255,255,255,.08);border:1.5px solid var(--line-dark); border-radius:100px;padding:14px 20px;color:#fff;font:inherit;font-size:15.5px; } .gsx .searchbar input::placeholder{color:rgba(255,255,255,.5)} .gsx .searchbar input:focus{outline:0;border-color:var(--haldi);background:rgba(255,255,255,.12)} /* ---------- section shell ---------- */ .gsx .sec{padding:72px 0} @media(max-width:640px){.gsx .sec{padding:54px 0}} /* ---------- two-column layout ---------- */ .gsx .layout{display:grid;grid-template-columns:262px 1fr;gap:36px;align-items:start} @media(max-width:940px){.gsx .layout{grid-template-columns:1fr;gap:0}} /* ---------- filters aside ---------- */ .gsx .filters{ position:sticky;top:96px;background:var(--white);border:1px solid var(--line); border-radius:var(--r-l);padding:24px 22px; } .gsx .filters-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .gsx .filters-head strong{font-family:var(--display);font-size:17px} @media(max-width:940px){ .gsx .filters{display:none;position:static;margin-bottom:26px} .gsx .filters.open{display:block} } .gsx .fgroup{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)} .gsx .fgroup:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0} .gsx .fgroup h4{ font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.15em; text-transform:uppercase;color:var(--neem);margin-bottom:14px; } .gsx .fopt{ display:flex;align-items:center;gap:8px;font-size:14.5px;padding:6px 0;line-height:1.35;color:var(--ink); } .gsx .fopt .n{margin-left:auto;font-size:12.5px;color:var(--ink-2);opacity:.55;font-variant-numeric:tabular-nums} .gsx .fopt:hover{color:var(--indigo)} .gsx .fopt.is-active{color:var(--indigo);font-weight:700} .gsx .fopt-sub{padding-left:16px;font-size:13.5px} .gsx .fopt-stars{letter-spacing:1px;color:var(--haldi);font-size:13px} .gsx .clear-all{font-size:13px;font-weight:700;color:var(--rose);text-decoration:underline;text-underline-offset:3px} /* ---------- results toolbar ---------- */ .gsx .toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px} .gsx .toolbar .count{font-size:15px;color:var(--ink-2);font-weight:600} .gsx .toolbar .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .gsx .toolbar select{ padding:10px 38px 10px 14px;font-size:14px;border-radius:100px; border:1.5px solid var(--line-strong);background:var(--white);font:inherit;color:var(--ink); appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101A33' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .gsx .toolbar select:focus{outline:0;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(38,64,126,.13)} .gsx .toolbar .btn.is-active{background:var(--ink);color:#fff;border-color:var(--ink)} .gsx .filter-toggle{display:none} @media(max-width:940px){.gsx .filter-toggle{display:inline-flex}} /* phones: the sort select wrapped onto a ragged third line; give it the row */ @media(max-width:640px){ .gsx .toolbar{gap:10px} .gsx .toolbar .count{flex:0 0 100%} .gsx .toolbar .right{margin-left:0;width:100%} .gsx .toolbar select{flex:1 1 100%;width:100%} } /* ---------- course grid ---------- */ .gsx .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:1000px){.gsx .grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.gsx .grid{grid-template-columns:1fr;gap:18px}} /* list mode: same .course-card markup, one column -- see the controller ruling in courses_page_grid_layout.php's header comment. */ .gsx .grid.is-list{grid-template-columns:1fr} .gsx .grid.is-list .course-card{flex-direction:row;align-items:stretch} .gsx .grid.is-list .course-card-art{flex:0 0 220px;aspect-ratio:1/1;align-self:flex-start} .gsx .grid.is-list .course-card-body{flex:1} .gsx .grid.is-list .course-card-foot{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px} @media(max-width:768px){ .gsx .grid.is-list .course-card{flex-direction:column} .gsx .grid.is-list .course-card-art{flex:none;aspect-ratio:1/1} } /* Real course thumbnails (get_course_thumbnail_url) fill the shared course-card-art box instead of the artifact's flat colour + emoji glyph -- gs-brand.css only lays out the box, it has no img rule of its own. */ .gsx .course-card-art{background:var(--paper-2)} .gsx .course-card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1} .gsx .courses-empty{ grid-column:1/-1;padding:32px 24px;border:1px dashed var(--line-strong); border-radius:var(--r-l);background:var(--white);color:var(--ink-2); opacity:.8;font-size:15px;text-align:center;margin-top:24px; } /* ---------- pager ---------- $this->pagination->create_links() renders CI3's own default markup (application/helpers/pagination_helper.php's pagintaion()):