/* ================================================================ skeleton.css — Content-wise page skeletons Colours match React content-loader: bg #d9d9d9 · fg #ededed Usage: .gp-sk-placeholder shown by default, .gp-sk-real hidden. JS adds .page-loaded to on window.load → swap visibility. ================================================================ */ /* ── Shimmer animation ── */ @keyframes gp-shimmer { 0% { background-position: -1200px 0; } 100% { background-position: 1200px 0; } } .gp-sk { display: block; background: linear-gradient(90deg, #d9d9d9 25%, #ededed 50%, #d9d9d9 75%); background-size: 1200px 100%; animation: gp-shimmer 1.6s linear infinite; border-radius: 6px; } /* ── Show / hide logic ── */ .gp-sk-placeholder { display: block; } .gp-sk-real { display: none; } body.page-loaded .gp-sk-placeholder { display: none; } body.page-loaded .gp-sk-real { display: block; } /* ================================================================ 1. BANNER SKELETON Source: banner.php | image: 1440 × 522 px ================================================================ */ .gp-sk-banner { background: #19263a; width: 100%; overflow: hidden; } .gp-sk-banner .gp-sk { width: 100%; /* 522 / 1440 ≈ 36.25% */ aspect-ratio: 1440 / 522; border-radius: 0; opacity: 0.45; /* darken over dark bg so shimmer is visible */ } /* ================================================================ 2. NEED-HELP SKELETON Source: NeedHelpLoading.js | viewBox 1256 × 43 Layout: title label + 5 pill tags + arrow circle ================================================================ */ .gp-sk-need-help-wrap { background: #f9f5f2; padding: 17px 0; } .gp-sk-need-help { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; } /* Title label 125 × 22 */ .gp-sk-nh-label { width: 125px; height: 22px; flex-shrink: 0; } /* Pills — heights 43px, rx=22 → border-radius: 22px */ .gp-sk-nh-pill { height: 43px; border-radius: 22px; flex-shrink: 0; } .gp-sk-nh-pill:nth-child(2) { width: 122px; } .gp-sk-nh-pill:nth-child(3) { width: 142px; } .gp-sk-nh-pill:nth-child(4) { width: 193px; } .gp-sk-nh-pill:nth-child(5) { width: 162px; } .gp-sk-nh-pill:nth-child(6) { width: 122px; } /* Arrow circle r=20 → 40 × 40 */ .gp-sk-nh-circle { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; margin-left: auto; } /* ================================================================ 3. RECENT BLOGS SKELETON Source: BlogLoading.js | viewBox 1258 × 1314 Layout: 3 cols × 3 rows of blog cards Card: image 413×254, tag 86×17, title 397×52, read-more 125×24 ================================================================ */ .gp-sk-blogs-wrap { padding: 70px 0; } .gp-sk-blogs-heading { width: 260px; height: 36px; margin: 0 auto 40px; /* section-title is centered */ } .gp-sk-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 9px; row-gap: 72px; } .gp-sk-blog-card { display: flex; flex-direction: column; gap: 0; } /* Image 413 × 254 → aspect-ratio 413/254 */ .gp-sk-blog-img { width: 100%; aspect-ratio: 413 / 254; margin-bottom: 22px; } /* Tag line 86 × 17 */ .gp-sk-blog-tag { width: 86px; height: 17px; margin-bottom: 16px; } /* Title full-width × 52 */ .gp-sk-blog-title { width: 100%; height: 52px; margin-bottom: 17px; } /* Read-more button 125 × 24 */ .gp-sk-blog-btn { width: 125px; height: 24px; } /* ================================================================ 4. HOME DESIGNS BLOCK SKELETON Source: HomeHomeDesignLoading.js | viewBox 1245 × 477 Layout: big-left (366×477) + center-text + right 2×2 grid (212×222 each) ================================================================ */ .gp-sk-home-designs-wrap { padding: 128px 0 117px; } .gp-sk-home-designs { display: flex; align-items: center; gap: 40px; } /* Big left image 366 × 477 */ .gp-sk-hd-big { width: 366px; height: 477px; flex-shrink: 0; } /* Center text column (path at x=466, width=263, height=166 + button) */ .gp-sk-hd-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; } /* Heading + paragraph block 263 × 166 */ .gp-sk-hd-text { width: 263px; height: 166px; } /* Button 174 × 40, rx=20 */ .gp-sk-hd-btn { width: 174px; height: 40px; border-radius: 20px; } /* Right 2×2 grid — each cell 212 × 222 */ .gp-sk-hd-right { display: grid; grid-template-columns: 212px 212px; grid-template-rows: 222px 222px; gap: 26px 24px; flex-shrink: 0; } .gp-sk-hd-small { width: 100%; height: 100%; } /* ================================================================ 5. NEARBY PROFESSIONALS SKELETON Source: nearby-professionals.php | bg #19263a Layout: heading + 3-col × 3-row grid of category cards (image + title) Image: 123 × 107 per card ================================================================ */ .gp-sk-professionals-wrap { background: #19263a; padding: 82px 0; } /* Heading centred */ .gp-sk-prof-heading { width: 320px; height: 36px; margin: 0 auto 48px; opacity: 0.35; } .gp-sk-prof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } .gp-sk-prof-card { display: flex; flex-direction: column; align-items: center; gap: 12px; } /* Category image 123 × 107 */ .gp-sk-prof-img { width: 123px; height: 107px; opacity: 0.35; } /* Category title bar */ .gp-sk-prof-title { width: 100px; height: 18px; opacity: 0.35; } /* ================================================================ 6. FEATURED VIDEOS SKELETON Source: HomeVideosLoading.js | viewBox 1160 × 521 Layout: big-left (645×385 + tag + title) + right 3-row list ================================================================ */ .gp-sk-videos-wrap { padding: 110px 0 156px; background: #f9f5f2; } .gp-sk-videos-heading { width: 280px; height: 36px; margin: 0 auto 54px; } .gp-sk-videos { display: flex; gap: 40px; align-items: flex-start; } /* Left column — 645 / 1160 = 55.6% */ .gp-sk-video-left { flex: 0 0 55.6%; display: flex; flex-direction: column; gap: 16px; } /* Big video image 645 × 385 → aspect-ratio 645/385 */ .gp-sk-vid-big { width: 100%; aspect-ratio: 645 / 385; } /* Tag below big image 112 × 20 */ .gp-sk-vid-big-tag { width: 112px; height: 20px; } /* Title below big image 334 × 30 */ .gp-sk-vid-big-title { width: 334px; height: 30px; } /* Right column — 3 stacked small video rows */ .gp-sk-video-right { flex: 1; display: flex; flex-direction: column; gap: 28px; } .gp-sk-vid-row { display: flex; gap: 20px; align-items: flex-start; } /* Small video thumbnail 190 × 143 */ .gp-sk-vid-small { flex-shrink: 0; width: 190px; aspect-ratio: 190 / 143; } .gp-sk-vid-info { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 10px; } /* Category tag 76 × 13 */ .gp-sk-vid-tag { width: 76px; height: 13px; } /* Title line 1 226 × 16 */ .gp-sk-vid-l1 { width: 100%; height: 16px; } /* Title line 2 126 × 16 */ .gp-sk-vid-l2 { width: 65%; height: 16px; } /* ================================================================ RESPONSIVE — stack columns on small screens ================================================================ */ @media (max-width: 1024px) { .gp-sk-hd-big { width: 280px; height: 365px; } .gp-sk-hd-right { grid-template-columns: 160px 160px; grid-template-rows: 168px 168px; } } @media (max-width: 767px) { /* Need Help — hide extra pills, stack */ .gp-sk-nh-pill:nth-child(n+5) { display: none; } .gp-sk-nh-circle { display: none; } /* Blogs — 1 column */ .gp-sk-blog-grid { grid-template-columns: 1fr; row-gap: 40px; } /* Show only 3 cards on mobile */ .gp-sk-blog-card:nth-child(n+4) { display: none; } /* Home Designs — stack vertically */ .gp-sk-home-designs { flex-direction: column; gap: 24px; } .gp-sk-hd-big { width: 100%; height: auto; aspect-ratio: 366/477; } .gp-sk-hd-right { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .gp-sk-hd-small { height: 150px; } /* Professionals — 1 column */ .gp-sk-prof-grid { grid-template-columns: 1fr; } .gp-sk-prof-card:nth-child(n+4) { display: none; } /* Videos — stack */ .gp-sk-videos { flex-direction: column; } .gp-sk-video-left { flex: none; width: 100%; } .gp-sk-vid-big-title { width: 100%; } /* Blog page sections */ .gp-sk-blog12-grid { grid-template-columns: 1fr; row-gap: 40px; } .gp-sk-blog12-card:nth-child(n+4) { display: none; } .gp-sk-inh-grid { grid-template-columns: 1fr; } .gp-sk-inh-card:nth-child(n+2) { display: none; } .gp-sk-hd-slider { grid-template-columns: repeat(2, 1fr); } .gp-sk-hd-slide:nth-child(n+3) { display: none; } .gp-sk-relvid-grid { grid-template-columns: 1fr; } .gp-sk-relvid-card:nth-child(n+2) { display: none; } .gp-sk-bloggers-list { gap: 24px; } .gp-sk-blogger-card:nth-child(n+4) { display: none; } } /* ================================================================ BLOG PAGE SKELETONS (home.php — /blog/) ================================================================ */ /* ── B1. Blog Banner (reuses .gp-sk-banner from homepage) ── */ /* ── B2. DISCOVER MORE SKELETON Source: discover-more.php | bg #f9f5f2 | padding 50px 0 29px React: DiscoverMore — centred heading + pill tags ================================================================ */ .gp-sk-discover-wrap { background: #f9f5f2; padding: 50px 0 29px; text-align: center; } .gp-sk-discover-heading { width: 360px; height: 28px; margin: 0 auto 28px; } .gp-sk-discover-pills { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .gp-sk-disc-pill { height: 40px; border-radius: 22px; flex-shrink: 0; } .gp-sk-disc-pill:nth-child(1) { width: 130px; } .gp-sk-disc-pill:nth-child(2) { width: 160px; } .gp-sk-disc-pill:nth-child(3) { width: 120px; } .gp-sk-disc-pill:nth-child(4) { width: 180px; } .gp-sk-disc-pill:nth-child(5) { width: 140px; } .gp-sk-disc-pill:nth-child(6) { width: 110px; } .gp-sk-disc-pill:nth-child(7) { width: 155px; } .gp-sk-disc-pill:nth-child(8) { width: 125px; } /* ── B3. RECENT BLOGS (Blog listing — 12 cards, 3×4) Source: home.php main loop | BlogLoading (viewBox 1258×1314) Header row: title left + CTA button right ================================================================ */ .gp-sk-blogs-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .gp-sk-blogs-page-title { width: 220px; height: 36px; } .gp-sk-blogs-cta { width: 148px; height: 44px; border-radius: 8px; } /* 12-card grid (3 cols × 4 rows) — same card anatomy as gp-sk-blog-* */ .gp-sk-blog12-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 9px; row-gap: 72px; } /* Reuses .gp-sk-blog-card / .gp-sk-blog-img etc. from homepage section */ /* ── B4. I NEED HELP (Blog dark section) Source: i-need-help.php | bg #19263a | padding 92px 0 56px Layout: heading + tab-pills row + 3-col blog card grid ================================================================ */ .gp-sk-ineedhelp-wrap { background: #19263a; padding: 92px 0 56px; } .gp-sk-inh-heading { width: 280px; height: 40px; margin-bottom: 50px; opacity: 0.35; } .gp-sk-inh-tabs { display: flex; gap: 18px; margin-bottom: 40px; flex-wrap: wrap; } .gp-sk-inh-tab { height: 43px; border-radius: 22px; flex-shrink: 0; opacity: 0.35; } .gp-sk-inh-tab:nth-child(1) { width: 140px; } .gp-sk-inh-tab:nth-child(2) { width: 175px; } .gp-sk-inh-tab:nth-child(3) { width: 130px; } .gp-sk-inh-tab:nth-child(4) { width: 155px; } .gp-sk-inh-tab:nth-child(5) { width: 160px; } .gp-sk-inh-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 9px; row-gap: 72px; } .gp-sk-inh-card { display: flex; flex-direction: column; gap: 0; } .gp-sk-inh-img { width: 100%; aspect-ratio: 413/254; margin-bottom: 22px; opacity: 0.35; } .gp-sk-inh-tag { width: 86px; height: 17px; margin-bottom: 16px; opacity: 0.35; } .gp-sk-inh-title { width: 100%; height: 52px; opacity: 0.35; } /* ── B5. TRENDING BLOGS — reuses home-recent-blog-wrap + blog card grid ── Header: "Trending Blogs" title left + View All link right, same grid No extra CSS needed — uses .gp-sk-blogs-wrap + .gp-sk-blog12-grid + .gp-sk-blog-card ================================================================ */ .gp-sk-trending-title { width: 240px; height: 36px; } .gp-sk-trending-cta { width: 110px; height: 24px; } /* ── B6. POPULAR BLOGGERS SKELETON Source: popular-bloggers.php | bg #f9f5f2 | padding 86px 0 185px Layout: heading + row of 5 avatar circles + name + count ================================================================ */ .gp-sk-bloggers-wrap { background: #f9f5f2; padding: 86px 0 185px; } .gp-sk-bloggers-heading { width: 300px; height: 36px; margin: 0 auto 65px; } .gp-sk-bloggers-list { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; } .gp-sk-blogger-card { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; } /* Avatar circle */ .gp-sk-blogger-avatar { width: 90px; height: 90px; border-radius: 50%; } .gp-sk-blogger-name { width: 110px; height: 18px; } .gp-sk-blogger-count { width: 80px; height: 14px; } /* ── B7. HOME DESIGNS SLIDER SKELETON Source: home-designs-slider.php | bg #f9f5f2 | padding 80px 0 13px React: HomeDesignLoading — 5 tall cards (viewBox 1263×304) Each card: 227/228px wide × 303px tall, gap ≈ 31px ================================================================ */ .gp-sk-hd-slider-wrap { background: #f9f5f2; padding: 80px 0 13px; } .gp-sk-hd-slider-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .gp-sk-hd-slider-title { width: 220px; height: 36px; } .gp-sk-hd-slider-cta { width: 110px; height: 24px; } /* 5-column slider — aspect-ratio matches 228×303 */ .gp-sk-hd-slider { display: grid; grid-template-columns: repeat(5, 1fr); gap: 31px; } /* aspect-ratio: 228/303 ≈ 0.752 → height = width × 1.33 */ .gp-sk-hd-slide { width: 100%; aspect-ratio: 228 / 303; } /* ── B8. RELATED VIDEOS SKELETON Source: related-videos.php | padding 80px 0 1px React: Blog3ItemLoading (viewBox 1234×314) — 3 cols Each card: image 386×201, tag 86×17, title 386×52 ================================================================ */ .gp-sk-relvideos-wrap { padding: 80px 0 1px; } .gp-sk-relvideos-heading { width: 260px; height: 36px; margin-bottom: 40px; } .gp-sk-relvid-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 38px; row-gap: 0; } .gp-sk-relvid-card { display: flex; flex-direction: column; gap: 0; } /* Image 386×201 */ .gp-sk-relvid-img { width: 100%; aspect-ratio: 386/201; margin-bottom: 22px; } .gp-sk-relvid-tag { width: 86px; height: 17px; margin-bottom: 11px; } .gp-sk-relvid-title { width: 100%; height: 52px; } /* ================================================================ ALL-PAGES SKELETONS (shared patterns used across many templates) ================================================================ */ /* ── CAT-TITLE: Category / tag / author page header Source: .blog-category-page-title | bg #fff | padding 64px 0 32px ================================================================ */ .gp-sk-cat-title-wrap { padding: 64px 0 32px; background: #fff; text-align: center; } .gp-sk-cat-title { width: 300px; height: 40px; margin: 0 auto 20px; } .gp-sk-cat-desc { width: 600px; max-width: 100%; height: 16px; margin: 0 auto 10px; } .gp-sk-cat-desc-2 { width: 440px; max-width: 100%; height: 16px; margin: 0 auto; } /* ── DETAIL HEADER: Blog / infographic / vocabulary / resolve-query detail Source: BlogContentLoader | viewBox 1030×1537 Layout: thumbnail left (215×215) + meta right + full-width hero image ================================================================ */ .gp-sk-detail-wrap { padding: 40px 0 0; } .gp-sk-detail-top { display: flex; gap: 24px; margin-bottom: 40px; } .gp-sk-detail-thumb { width: 215px; height: 215px; flex-shrink: 0; border-radius: 4px; } .gp-sk-detail-meta { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; } .gp-sk-detail-tag { width: 179px; height: 30px; border-radius: 15px; } .gp-sk-detail-date { width: 252px; height: 14px; } .gp-sk-detail-title-1 { width: 100%; height: 16px; } .gp-sk-detail-title-2 { width: 82%; height: 16px; } .gp-sk-detail-title-3 { width: 64%; height: 16px; } /* Full-width hero image 1029×532 */ .gp-sk-detail-hero { width: 100%; aspect-ratio: 1029/532; border-radius: 0; margin-bottom: 40px; } /* Article body text lines (818px wide in SVG, centered) */ .gp-sk-detail-body { display: flex; flex-direction: column; gap: 14px; padding: 0 8%; } .gp-sk-detail-line { width: 100%; height: 16px; } .gp-sk-detail-line-s { width: 65%; height: 16px; } /* Section heading inside article */ .gp-sk-detail-subhead { width: 182px; height: 30px; border-radius: 15px; margin-bottom: 8px; } /* ── MASONRY: Infographics / Home-Designs grid Source: MasonryLoader | viewBox 1242×2023 4 columns (288px each, gap 30px), varying heights ================================================================ */ .gp-sk-masonry-wrap { padding: 70px 0; } .gp-sk-masonry-filter-row { display: flex; gap: 16px; margin-bottom: 32px; } .gp-sk-masonry-filter { height: 40px; border-radius: 4px; } .gp-sk-masonry-filter:nth-child(1) { width: 409px; } .gp-sk-masonry-filter:nth-child(2) { width: 130px; } .gp-sk-masonry-filter:nth-child(3) { width: 110px; } .gp-sk-masonry { column-count: 4; column-gap: 30px; } .gp-sk-masonry-item { break-inside: avoid; width: 100%; border-radius: 4px; margin-bottom: 20px; display: block; } /* Alternate heights per column to mimic MasonryLoader rects */ .gp-sk-masonry-item:nth-child(4n+1) { height: 359px; } .gp-sk-masonry-item:nth-child(4n+2) { height: 288px; } .gp-sk-masonry-item:nth-child(4n+3) { height: 412px; } .gp-sk-masonry-item:nth-child(4n) { height: 323px; } .gp-sk-masonry-loadmore { display: flex; justify-content: center; margin-top: 32px; } .gp-sk-masonry-btn { width: 169px; height: 49px; border-radius: 8px; } /* ── VOCABULARY GRID Source: VocabularyLoading | viewBox 1243×414 3×3 grid, each card 385×122, gap ~44px ================================================================ */ .gp-sk-vocab-wrap { padding: 70px 0; } .gp-sk-vocab-search { width: 100%; height: 56px; border-radius: 28px; margin-bottom: 32px; } .gp-sk-vocab-filter-row { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } .gp-sk-vocab-letter { width: 44px; height: 44px; border-radius: 6px; } .gp-sk-vocab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 44px; } .gp-sk-vocab-card { width: 100%; height: 122px; border-radius: 4px; } /* ── TEAM PAGE Source: TeamPageLoader | viewBox 1244×1690 Layout: title → nav tabs → 3 founder photos → 4-col team member grid ================================================================ */ .gp-sk-team-wrap { padding: 60px 0 60px; } .gp-sk-team-title { width: 272px; height: 48px; margin: 0 auto 32px; } .gp-sk-team-nav { display: flex; gap: 40px; justify-content: center; margin-bottom: 48px; flex-wrap: wrap; } .gp-sk-team-tab { height: 22px; } .gp-sk-team-tab:nth-child(1) { width: 83px; } .gp-sk-team-tab:nth-child(2) { width: 121px; } .gp-sk-team-tab:nth-child(3) { width: 76px; } .gp-sk-team-tab:nth-child(4) { width: 76px; } .gp-sk-team-tab:nth-child(5) { width: 81px; } .gp-sk-team-tab:nth-child(6) { width: 148px; } .gp-sk-team-tab:nth-child(7) { width: 246px; } .gp-sk-team-founders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px; } .gp-sk-team-founder { width: 100%; aspect-ratio: 394/382; border-radius: 6px; } .gp-sk-team-section-title { width: 208px; height: 44px; margin-bottom: 32px; } .gp-sk-team-members { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; } .gp-sk-team-member { display: flex; flex-direction: column; gap: 12px; } .gp-sk-team-member-img { width: 100%; aspect-ratio: 288/279; border-radius: 6px; } .gp-sk-team-member-name { height: 29px; } .gp-sk-team-member-role { height: 24px; } /* ── PROFILE SIDEBAR (Professional detail / Designer profile) Source: ProfileInfoLoader | viewBox 346×625 ================================================================ */ .gp-sk-profile-sidebar { width: 346px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .gp-sk-pro-avatar { width: 182px; height: 182px; border-radius: 91px; } .gp-sk-pro-name { width: 100%; height: 48px; } .gp-sk-pro-subtitle { width: 275px; height: 26px; } .gp-sk-pro-info-box { width: 301px; height: 168px; } .gp-sk-pro-social-name { width: 151px; height: 18px; } .gp-sk-pro-social-count { width: 118px; height: 12px; } /* Detail page with sidebar layout */ .gp-sk-detail-with-sidebar { display: flex; gap: 40px; align-items: flex-start; } .gp-sk-detail-main { flex: 1; min-width: 0; } /* ── FAQ LIST ================================================================ */ .gp-sk-faq-wrap { padding: 60px 0; } .gp-sk-faq-page-title { width: 280px; height: 40px; margin: 0 auto 48px; } .gp-sk-faq-list { display: flex; flex-direction: column; gap: 12px; } .gp-sk-faq-item { height: 60px; border-radius: 4px; } /* ── SEARCH RESULTS PAGE ================================================================ */ .gp-sk-search-wrap { padding: 40px 0; } .gp-sk-search-bar { width: 100%; height: 56px; border-radius: 28px; margin-bottom: 32px; } .gp-sk-search-filters { display: flex; gap: 12px; margin-bottom: 40px; } .gp-sk-search-filter { height: 40px; border-radius: 20px; } .gp-sk-search-filter:nth-child(1) { width: 120px; } .gp-sk-search-filter:nth-child(2) { width: 100px; } .gp-sk-search-filter:nth-child(3) { width: 140px; } .gp-sk-search-filter:nth-child(4) { width: 110px; } .gp-sk-search-section-head { width: 200px; height: 32px; margin-bottom: 24px; } /* ── PLANS ANALYSIS PAGE ================================================================ */ .gp-sk-plans-wrap { padding: 60px 0; } .gp-sk-plans-banner { width: 100%; height: 280px; border-radius: 6px; margin-bottom: 40px; } .gp-sk-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .gp-sk-plan-card { height: 220px; border-radius: 6px; } /* ── RESOLVE QUERIES / QUERIES LIST ================================================================ */ .gp-sk-queries-wrap { padding: 60px 0; } .gp-sk-query-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .gp-sk-query-card { height: 200px; border-radius: 6px; } /* ── CAREER PAGE ================================================================ */ .gp-sk-career-wrap { padding: 60px 0; } .gp-sk-career-heading { width: 280px; height: 40px; margin-bottom: 40px; } .gp-sk-career-list { display: flex; flex-direction: column; gap: 20px; } .gp-sk-career-item { height: 80px; border-radius: 6px; } /* ── ABOUT US ================================================================ */ .gp-sk-about-hero { width: 100%; height: 400px; border-radius: 0; } .gp-sk-about-text-wrap { padding: 80px 0; } .gp-sk-about-text { display: flex; flex-direction: column; gap: 16px; max-width: 820px; margin: 0 auto; } .gp-sk-about-heading { width: 320px; height: 40px; margin-bottom: 8px; } .gp-sk-about-line { width: 100%; height: 16px; } .gp-sk-about-line-s { width: 70%; height: 16px; } /* ── PROFESSIONAL LISTING PAGE (banner + filter + cards) ================================================================ */ .gp-sk-pro-listing-banner { width: 100%; aspect-ratio: 1440/350; border-radius: 0; } .gp-sk-pro-listing-filter { display: flex; gap: 12px; padding: 24px 0; flex-wrap: wrap; } .gp-sk-pro-filter-pill { height: 40px; border-radius: 20px; flex-shrink: 0; } .gp-sk-pro-filter-pill:nth-child(1) { width: 130px; } .gp-sk-pro-filter-pill:nth-child(2) { width: 150px; } .gp-sk-pro-filter-pill:nth-child(3) { width: 110px; } .gp-sk-pro-filter-pill:nth-child(4) { width: 140px; } .gp-sk-pro-filter-pill:nth-child(5) { width: 120px; } .gp-sk-pro-listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 40px 0; } .gp-sk-pro-listing-card { height: 280px; border-radius: 6px; } /* ── EXCLUSIVE / GHARPEDIA-EXCLUSIVE GRID ================================================================ */ .gp-sk-exclusive-wrap { padding: 60px 0; } .gp-sk-exclusive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .gp-sk-exclusive-card { height: 260px; border-radius: 6px; } /* ── HOME DESIGN DETAIL PAGE ================================================================ */ .gp-sk-hd-detail-banner { width: 100%; aspect-ratio: 1440/500; border-radius: 0; } .gp-sk-hd-detail-info { display: flex; gap: 40px; padding: 60px 0; align-items: flex-start; } .gp-sk-hd-detail-main { flex: 1; display: flex; flex-direction: column; gap: 20px; } .gp-sk-hd-detail-title { width: 60%; height: 40px; } .gp-sk-hd-detail-meta { width: 40%; height: 20px; } .gp-sk-hd-detail-desc { width: 100%; height: 80px; } .gp-sk-hd-detail-side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; } .gp-sk-hd-detail-img { width: 100%; height: 200px; border-radius: 6px; } /* ── CALCULATOR DETAIL PAGE ================================================================ */ .gp-sk-calc-wrap { display: flex; gap: 40px; padding: 60px 0; align-items: flex-start; } .gp-sk-calc-sidebar { width: 340px; flex-shrink: 0; height: 500px; border-radius: 6px; } .gp-sk-calc-main { flex: 1; display: flex; flex-direction: column; gap: 20px; } .gp-sk-calc-title { width: 70%; height: 40px; } .gp-sk-calc-form { width: 100%; height: 300px; border-radius: 6px; } /* ── RESPONSIVE — all-pages additions ================================================================ */ @media (max-width: 1024px) { .gp-sk-masonry { column-count: 3; } .gp-sk-team-members { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .gp-sk-cat-desc, .gp-sk-cat-desc-2 { display: none; } .gp-sk-detail-top { flex-direction: column; } .gp-sk-detail-thumb { width: 100%; height: auto; aspect-ratio: 1/1; } .gp-sk-detail-body { padding: 0; } .gp-sk-masonry { column-count: 2; } .gp-sk-team-founders { grid-template-columns: 1fr; } .gp-sk-team-members { grid-template-columns: repeat(2, 1fr); } .gp-sk-vocab-grid { grid-template-columns: 1fr; gap: 16px; } .gp-sk-plans-grid { grid-template-columns: 1fr; } .gp-sk-query-grid { grid-template-columns: 1fr; } .gp-sk-pro-listing-grid { grid-template-columns: 1fr; } .gp-sk-exclusive-grid { grid-template-columns: 1fr; } .gp-sk-detail-with-sidebar { flex-direction: column; } .gp-sk-profile-sidebar { width: 100%; } .gp-sk-calc-wrap { flex-direction: column; } .gp-sk-calc-sidebar { width: 100%; } .gp-sk-hd-detail-info { flex-direction: column; } .gp-sk-hd-detail-side { width: 100%; } .gp-sk-team-nav { gap: 16px; } .gp-sk-search-filters { flex-wrap: wrap; } }