/* ========================================= Swiggy SPARK — Clean CSS (final, tidy) ========================================= */ /* 0) Font (HTML ) */ /* 1) Brand tokens */ :root{ --swiggy:#fb5404; --swiggy-dark:#e14a00; --swiggy-light:#fff2e6; --swiggy-border:#ffd2b5; --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#fff7f0; --card:#ffffff; --radius:18px; --container-max:1120px; --font-primary:'Gilroy',sans-serif; } /* 2) Reset + base */ *{box-sizing:border-box} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink);line-height:1.55;font-weight:400; font-family: "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } h1,h2,h3,h4,h5,h6,p,a,span,div,li,button,input,textarea,label,small,strong,em{ font-family:var(--font-primary) } h1,h2,.brand,.step__badge{font-weight:800} h3,h4,.step__title,.cta,.nav a,.label{font-weight:700} .muted,p,li,.t-body{font-weight:400} .container{max-width:var(--container-max);margin:0 auto;padding:0 20px} section{scroll-margin-top:80px} /* 3) Header */ .header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9); backdrop-filter:blur(8px);border-bottom:1px solid var(--line) } .header__row{ display:flex;align-items:center;justify-content:space-between;gap:24px; padding:12px 0;flex-wrap:nowrap; /* keep in one line */ } .brand{display:flex;align-items:center;gap:10px;letter-spacing:-.01em} .brand__logo{height:38px;width:auto;display:block;object-fit:contain} .nav{display:none;gap:28px;flex-wrap:nowrap} .nav a{transition:color .15s ease;white-space:nowrap;display:inline-block;line-height:1;padding:10px 0} .nav a:hover{color:var(--swiggy)} @media (min-width:760px){.nav{display:flex}} @media (max-width:759px){.brand__logo{height:32px}} /* 4) Buttons */ .cta{ display:inline-flex;align-items:center;padding:12px 16px;border-radius:12px;cursor:pointer; background:var(--swiggy);color:#fff;font-weight:700;transition:all .15s ease } .cta:hover{background:var(--swiggy-dark);transform:translateY(-1px)} /* 5) Hero - compact mobile-first responsive image */ .hero-banner{ background: none !important; padding: 0 !important; margin: 0 !important; border-bottom: 1px solid var(--line); width: 100%; max-width: 100%; overflow: hidden; position: relative; height: auto; min-height: 250px; box-sizing: border-box; } .hero-img{ display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: center; margin: 0; padding: 0; } /* Mobile hero - more compact */ @media (max-width: 768px){ .hero-banner{ min-height: 200px; width: 100%; margin: 0 !important; padding: 0 !important; } .hero-img{ width: 95%; max-width: 95%; height: auto; margin: 0 auto; } } @media (max-width: 480px){ .hero-banner{ min-height: 160px; } .hero-img{ width: 90%; max-width: 90%; } } @media (max-width: 360px){ .hero-banner{ min-height: 140px; } .hero-img{ width: 88%; max-width: 88%; } } /* 6) Facts (cards at top incl. PPI) */ .facts{background:#fff;padding:24px 0;border-bottom:1px solid var(--line)} .facts h2{margin:0 0 8px;font-size:1.6rem;text-align:center} .facts p.lead{margin:0 0 22px;text-align:center;color:var(--muted)} section.facts .facts-row{ display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; } @media (max-width:1024px){section.facts .facts-row{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){section.facts .facts-row{grid-template-columns:1fr}} .fact{ display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff7f0;box-shadow:0 4px 16px rgba(0,0,0,.04) } .fact svg{width:28px;height:28px;stroke:var(--swiggy);margin-bottom:8px} .fact .title{font-weight:700;font-size:1.02rem} .fact .sub{color:var(--muted);font-size:.95rem;margin-top:6px} /* stop the PPI card from spanning a full row */ section.facts .fact--ppi{grid-column:auto;justify-self:stretch;width:auto} /* 7) Prose */ .prose{max-width:980px;margin:0 auto;padding:5px 0} .prose h2{font-size:1.8rem;margin:0 0 12px} .facts + section .prose{padding-top:24px} .muted{color:var(--muted)} /* 8) Generic cards + grids */ .grid{display:grid;gap:16px} .grid-2{grid-template-columns:1fr} @media (min-width:760px){.grid-2{grid-template-columns:repeat(2,1fr)}} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.04) } .kbd{background:#f1f5f9;border:1px solid var(--line);border-radius:8px;padding:2px 8px;font-size:.78rem;font-weight:600} /* 9) Judging criteria (2x2) */ #judging{margin-top:48px} .criteria-grid{display:grid;gap:16px;grid-template-columns:1fr} @media (min-width:760px){.criteria-grid{grid-template-columns:repeat(2,1fr)}} .crit{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.04) } .crit__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} .crit__title{font-weight:800;letter-spacing:-.01em} .badge{ display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;border-radius:999px; background:var(--swiggy-light);color:var(--swiggy);border:1px solid var(--swiggy-border);font-weight:800;font-size:.9rem } .crit__list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px} .crit__list li{position:relative;padding-left:16px} .crit__list li::before{ content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--swiggy) } .crit__bonus{margin:10px 0 0;padding:10px 12px;background:var(--swiggy-light);border:1px dashed var(--swiggy-border);border-radius:12px} /* 10) Hints — orange square + white ✓ */ #hints{margin-top:48px} .hints-card{padding:16px 18px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)} #hints .hints-list{ list-style:none;margin:0;padding:0;display:grid;gap:14px; } #hints .hints-list li{ position:relative;padding-left:48px;line-height:1.55;min-height:28px;margin:0 } #hints .hints-list li::before{ content:"";position:absolute;left:0;top:.36em;width:28px;height:28px;background:var(--swiggy);border-radius:8px } #hints .hints-list li::after{ content:"";position:absolute;left:0;top:.36em;width:28px;height:28px;background-repeat:no-repeat;background-position:center; background-size:18px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cpath d='M2 7.5 7 12l9-10' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") } #hints .hints-list li:last-child{margin-bottom:0} /* 11) Problem section: uniform text colour */ #problem h2,#problem p,#problem li,#problem strong,#problem em,#problem span{color:var(--ink)} #problem .muted{color:var(--ink) !important} #problem a{color:var(--ink)} /* Site-wide uniform text colour */ p,li,span,strong,em{color:var(--ink) !important} /* 12) Submission guidelines block */ #submission-guidelines{max-width:var(--container-max);margin:0 auto;padding:0 20px} #submission-guidelines .section-h{ margin:0 0 12px;font-size:clamp(1.6rem,2vw,2rem);font-weight:800;letter-spacing:-.01em;color:var(--ink) } #submission-guidelines .guidelines-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:18px 20px;box-shadow:0 6px 18px rgba(0,0,0,.04);max-width:980px } #submission-guidelines .guidelines-min{ list-style:none;margin:0;padding:0;display:grid;gap:10px } #submission-guidelines .guidelines-min li{ position:relative;padding-left:28px;line-height:1.55;color:var(--ink) } #submission-guidelines .guidelines-min li::before{ content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%; background:var(--swiggy);box-shadow:0 0 0 3px var(--swiggy-light) } #submission-guidelines .kbd{ background:#f1f5f9;border:1px solid var(--line);border-radius:8px;padding:2px 8px;font-size:.86rem;font-weight:600;color:var(--ink) } @media (max-width:640px){#submission-guidelines .guidelines-card{padding:16px}} /* 13) “Competition Structure” + “Presentation should cover” (final) */ /* HTML wrapper id assumed as #guidelines; two columns inside .make-grid */ #guidelines{padding-top:24px} /* equal columns, tidy gap */ #guidelines .make-grid{ display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start } @media (max-width:979px){#guidelines .make-grid{grid-template-columns:1fr}} #guidelines .make-col{min-width:0} #guidelines .make-h{ margin:0 0 12px;font-size:clamp(1.8rem,2.4vw,2.2rem);font-weight:800;letter-spacing:-.01em } /* keep the right subheading in one line on desktop */ @media (min-width:900px){ #guidelines .make-col .make-sub{ white-space:nowrap;overflow-wrap:normal;word-break:normal;text-wrap:nowrap; font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.2;margin:0 0 12px } } @media (max-width:899px){ #guidelines .make-col .make-sub{white-space:normal;text-wrap:wrap} } /* lists */ #guidelines .rounds, #guidelines .step-list{ list-style:none;margin:0;padding:0;display:grid;gap:16px } /* remove any spine/timeline styles that might exist */ #guidelines .rounds::before{display:none} /* unified compact card on both sides */ #guidelines .round-card, #guidelines .step-card{ position:relative;display:flex;align-items:center;width:100%; padding:12px 16px 12px 56px;min-height:78px; background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.06) } /* numbers INSIDE the cards (counters) */ #guidelines .rounds{counter-reset:r} #guidelines .round{counter-increment:r} #guidelines .round-card::before{ content:counter(r);position:absolute;left:12px;top:50%;transform:translateY(-50%); width:32px;height:32px;border-radius:50%;display:grid;place-items:center; background:var(--swiggy);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(251,84,4,.25) } #guidelines .step-list{counter-reset:s} #guidelines .step-card{counter-increment:s} #guidelines .step-card::before{ content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%); width:32px;height:32px;border-radius:50%;display:grid;place-items:center; background:var(--swiggy);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(251,84,4,.25) } /* text blocks inside those cards */ #guidelines .round-title, #guidelines .step-title{font-weight:800;letter-spacing:-.01em;margin:0 0 2px} #guidelines .round-sub, #guidelines .step-sub{color:var(--muted);font-weight:600;margin:0} /* 14) Embed */ .embed{aspect-ratio:16/9;width:100%;border:0} .mail-chip{ display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--swiggy-light); border:1px solid var(--swiggy-border);color:var(--swiggy);font-weight:600;transition:all .15s ease } .mail-chip:hover{background:var(--swiggy-border);transform:translateY(-1px)} .mail-chip svg{width:18px;height:18px;stroke:var(--swiggy)} /* 15) Back-to-top */ .back-top{ position:fixed;right:20px;bottom:24px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:999px; background:var(--swiggy);color:#fff;box-shadow:0 10px 20px rgba(0,0,0,.12);cursor:pointer;z-index:9999;opacity:0; transform:translateY(8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,background .15s ease } .back-top.show{opacity:1;transform:translateY(0);pointer-events:auto} .back-top:hover{background:var(--swiggy-dark)} /* 16) Responsive polish */ @media (max-width:759px){ .container{padding:0 16px} .prose{padding:40px 0} .facts{padding:24px 0} } /* 17) Motion + focus */ @media (prefers-reduced-motion:reduce){.cta:hover,.mail-chip:hover{transform:none}} .cta:focus,.mail-chip:focus,.nav a:focus{outline:2px solid var(--swiggy);outline-offset:2px} /* 18) Print */ @media print{ .header,.cta,.marquee{display:none} body{background:#fff;color:#000} } /* =============================== FIX: Structure / Guidelines area =============================== */ /* 1) Equal two-column grid */ #guidelines .make-grid, #structure-guidelines .make-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:28px !important; align-items:start !important; } /* 2) Make the two lists use identical spacing */ #guidelines .rounds, #guidelines .step-list, #structure-guidelines .rounds, #structure-guidelines .step-list{ list-style:none; margin:0 !important; padding:0 !important; display:grid !important; gap:18px !important; } /* 3) One card style for BOTH sides */ #guidelines .round-card, #guidelines .step-card, #structure-guidelines .round-card, #structure-guidelines .step-card{ box-sizing:border-box; width:100%; margin:0; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.04); /* badge | text */ display:grid; grid-template-columns:56px 1fr; align-items:center; /* keep row heights consistent across left & right */ min-height:112px; } /* 4) Use the *real* orange badges (not counters) */ #guidelines .round-dot, #guidelines .step-num, #structure-guidelines .round-dot, #structure-guidelines .step-num{ width:44px; height:44px; border-radius:999px; display:grid; place-items:center; background:var(--swiggy); color:#fff; font-weight:800; border:4px solid #fff; box-shadow:0 0 0 1px rgba(15,23,42,.12), 0 6px 16px rgba(251,84,4,.25); } /* 5) HARD-REMOVE all counter numbers that were leaking as stray 1/2/3 */ #guidelines .rounds::before, #structure-guidelines .rounds::before{ display:none !important; } /* hide the timeline spine */ #guidelines .round-card::before, #guidelines .step-card::before, #structure-guidelines .round-card::before, #structure-guidelines .step-card::before{ content:none !important; } #guidelines .rounds, #guidelines .step-list, #structure-guidelines .rounds, #structure-guidelines .step-list{ counter-reset: none !important; } /* 6) Put title and date on separate lines (both sides) */ #guidelines .round-card > *:nth-child(2), #guidelines .step-card > *:nth-child(2), #structure-guidelines .round-card > *:nth-child(2), #structure-guidelines .step-card > *:nth-child(2){ display:flex; flex-direction:column; gap:6px; /* space between title and date */ min-width:0; /* avoid overflow */ } /* If your markup uses these class names, keep them block-level */ .round-title, .step-title{ font-weight:800; letter-spacing:-.01em; display:block; } .round-sub, .step-sub { color:var(--muted); font-weight:600; display:block; } /* 7) Match the big headings’ size to the rest of the site */ #structure-guidelines .make-col .make-h, #guidelines .make-col .make-h{ margin:0 0 12px !important; font-size:clamp(1.6rem, 2vw, 2rem) !important; /* same scale as other section heads */ line-height:1.15; } /* 8) Small rhythm/spacing polish so rows line up perfectly */ #guidelines .step-list, #structure-guidelines .step-list{ margin-top:2px; } #guidelines .rounds, #structure-guidelines .rounds { margin-top:2px; } /* === Compact headings (like Image 3) === */ h1{font-size:clamp(1.8rem,3.2vw,2.3rem)!important;line-height:1.25} .prose h2, #about h2,#problem h2,#judging h2,#hints h2,#prizes h2,#submission-guidelines h2{ font-size:clamp(1.15rem,1.8vw,1.45rem)!important;line-height:1.2 } .make-h{font-size:clamp(1.05rem,1.6vw,1.32rem)!important;line-height:1.2;margin:0 0 10px!important} /* === Structure vs Presentation: balanced, identical cards (like Image 2) === */ #guidelines .make-grid{ display:grid;gap:24px;grid-template-columns:1fr;align-items:start } @media (min-width:900px){ #guidelines .make-grid{grid-template-columns:1fr 1fr} } /* lists */ #guidelines .rounds, #guidelines .step-list{ list-style:none;margin:0;padding:0;display:grid;gap:16px } /* item wrappers: badge | text */ #guidelines .round, #guidelines .step-card{ display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px;margin:0 } /* the white-number orange badges */ #guidelines .round-dot, #guidelines .step-num{ width:44px;height:44px;border-radius:999px;display:grid;place-items:center; background:var(--swiggy);color:#fff!important;font-weight:800; border:4px solid #fff;box-shadow:0 0 0 1px rgba(15,23,42,.12),0 6px 16px rgba(251,84,4,.25) } /* card boxes unified on both sides */ #guidelines .round-card, #guidelines .step-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:16px 18px;box-shadow:0 6px 18px rgba(15,23,42,.06);min-height:120px } /* typography inside cards */ #guidelines .round-title, #guidelines .step-title{margin:0 0 2px;font-weight:800;letter-spacing:-.01em;font-size:1rem} #guidelines .round-sub, #guidelines .step-sub{margin:0;color:var(--muted);font-weight:600;font-size:.95rem} /* keep both headings above columns visually even */ #guidelines .make-h{margin:0 0 12px!important} /* Minor polish: ensure equal width and no overflow clipping */ #guidelines .make-col{min-width:0} #guidelines .round-card>*:nth-child(2), #guidelines .step-card>*:nth-child(2){min-width:0} #guidelines .round{ display:grid !important; grid-template-columns:56px 1fr !important; /* badge | card */ align-items:center !important; gap:12px !important; margin:0 !important; } #guidelines .round-card{ display:flex !important; /* stack title + date */ flex-direction:column !important; align-items:flex-start !important; gap:2px !important; min-width:0 !important; /* stop content push-out */ padding:16px 18px !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; background:#fff !important; box-shadow:0 6px 18px rgba(15,23,42,.06) !important; } #guidelines .round-title{ /* stage name */ display:block !important; margin:0 0 2px !important; font-weight:800 !important; letter-spacing:-.01em !important; font-size:1rem !important; } #guidelines .round-sub{ /* date */ display:block !important; margin:0 !important; color:var(--muted) !important; font-weight:600 !important; font-size:.95rem !important; } /* keep number chips white-on-orange */ #guidelines .round-dot, #guidelines .step-num{ width:44px !important;height:44px !important;border-radius:999px !important; display:grid !important;place-items:center !important; background:var(--swiggy) !important;color:#fff !important;font-weight:800 !important; border:4px solid #fff !important;box-shadow:0 0 0 1px rgba(15,23,42,.12),0 6px 16px rgba(251,84,4,.25) !important; } /* ensure both columns stay balanced */ #guidelines .make-grid{grid-template-columns:1fr 1fr !important;align-items:start !important} #guidelines .step-card{min-height:120px !important} #guidelines .rounds,#guidelines .step-list{gap:16px !important} /* =========================== STRUCTURE / GUIDELINES FIX =========================== */ /* 0) Nuke any counters/timeline spines (stray numbers) */ #guidelines .rounds::before, #guidelines .round-card::before, #guidelines .step-card::before { content: none !important; } /* 1) Make each left item a single block (no external badge column) */ #guidelines .round{ display:block !important; position:relative !important; margin:0 !important; } /* 2) Cards on BOTH sides use the same compact box model */ #guidelines .round-card, #guidelines .step-card{ position:relative !important; box-sizing:border-box !important; width:100% !important; /* compact + room for in-card badge */ padding:14px 18px 14px 64px !important; min-height:96px !important; background:#fff !important; border:1px solid var(--line) !important; border-radius:12px !important; box-shadow:0 4px 12px rgba(0,0,0,.06) !important; display:flex !important; flex-direction:column !important; gap:4px !important; } /* 3) Visually place the orange number chips INSIDE each card */ #guidelines .round-dot, #guidelines .step-num{ position:absolute !important; left:18px !important; top:50% !important; transform:translateY(-50%) !important; z-index:1 !important; width:36px !important; height:36px !important; border-radius:50% !important; display:grid !important; place-items:center !important; background:var(--swiggy) !important; color:#fff !important; font-weight:800 !important; border:4px solid #fff !important; box-shadow:0 0 0 1px rgba(15,23,42,.12), 0 6px 16px rgba(251,84,4,.25) !important; } /* 4) Text rhythm (title + date on separate lines) */ #guidelines .round-title, #guidelines .step-title{ margin:0 0 2px !important; font-weight:800 !important; letter-spacing:-.01em !important; font-size:1rem !important; } #guidelines .round-sub, #guidelines .step-sub{ margin:0 !important; color:var(--muted) !important; font-weight:600 !important; font-size:.95rem !important; } /* 5) Equal columns + even gaps (symmetric layout) */ #guidelines .make-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:24px !important; align-items:start !important; } #guidelines .rounds, #guidelines .step-list{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid !important; gap:16px !important; /* same row spacing both sides */ } /* 6) Headings same scale as the rest of the site */ #guidelines .make-h{ margin:0 0 12px !important; font-size:clamp(1.6rem, 2vw, 2rem) !important; line-height:1.15 !important; } /* === ALIGN ROWS + KEEP RIGHT HEADING ON ONE LINE === */ /* Desktop: give the right column a smidge more width so the heading fits */ @media (min-width: 1100px){ #guidelines .make-grid{ grid-template-columns: 0.98fr 1.02fr !important; /* tiny nudge to the right */ } /* keep the big right heading on one line */ #guidelines .make-col:nth-child(2) .make-h{ white-space: nowrap !important; } } /* Keep both lists in perfect lockstep: same row height + spacing */ #guidelines .rounds, #guidelines .step-list{ display: grid !important; gap: 16px !important; /* identical gaps */ grid-auto-rows: minmax(120px, auto); /* SAME base height per row */ align-items: stretch !important; } /* Make sure both card types are using the same compact box model */ #guidelines .round-card, #guidelines .step-card{ min-height: 120px !important; /* matches grid-auto-rows */ padding: 14px 18px 14px 64px !important; display: flex !important; flex-direction: column !important; justify-content: center; /* vertical centering of text */ } /* Keep number badges identical and inside the cards */ #guidelines .round-dot, #guidelines .step-num{ position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; } /* Tidy heading sizes so both titles look consistent with the site */ #guidelines .make-h{ font-size: clamp(1.6rem, 2vw, 2rem) !important; margin: 0 0 12px !important; } /* (Safety) Kill any leftover counter-generated numbers */ #guidelines .rounds::before, #guidelines .round-card::before, #guidelines .step-card::before{ content:none !important; } /* === Student initiatives tiles: equal spacing inside the big box === */ .marquee{ position: relative; margin: 16px auto 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; max-width: var(--container-max); } /* Use a single gap variable so gutters == side paddings */ .marquee .track{ --tile-gap: 28px; /* change once, affects all */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); /* space between cards */ padding: var(--tile-gap); /* makes edge gutter = gap */ align-items: stretch; /* equal card heights */ } @media (max-width: 1024px){ .marquee .track{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px){ .marquee .track{ grid-template-columns: 1fr; } } /* Ensure each card fills its grid cell neatly */ .marquee .tile{ height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.04); display: flex; flex-direction: column; } .marquee .tile img{ width: 100%; height: 180px; object-fit: cover; display: block; border-bottom: 1px solid var(--line); } .marquee .t-body{ padding: 16px 20px; } /* === Student initiatives tiles: perfectly even gutters === */ .marquee{ padding: 0; /* no extra inner padding here */ border: 1px solid var(--line); border-radius: 16px; background: #fff; max-width: var(--container-max); margin: 16px auto 0; overflow: hidden; } .marquee .track{ --tile-gap: 28px; /* single source of truth */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); /* space between cards */ padding: var(--tile-gap); /* edge gutters == gap */ align-items: stretch; justify-items: stretch; box-sizing: border-box; } .marquee .tile{ margin: 0; /* no external margins */ height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.04); display: flex; flex-direction: column; } .marquee .tile img{ display: block; /* removes inline-gap */ width: 100%; height: 180px; object-fit: cover; border-bottom: 1px solid var(--line); } .marquee .t-body{ padding: 16px 20px; } /* Responsive: keep gutters equal at smaller breakpoints */ @media (max-width: 1024px){ .marquee .track{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ .marquee .track{ grid-template-columns: 1fr; } } /* Make all prize cards equal-height columns */ .prize-grid { align-items: stretch; } /* if you're using a grid for the cards */ .prize-card{ display: flex; flex-direction: column; align-items: flex-start; /* optional: ensure both cards have enough height for a nice bottom align */ min-height: 260px; /* tweak if needed to match your design */ } /* Push the amount to the bottom of each card */ .prize-card .prize-amt{ margin-top: auto; } /* If your markup doesn’t use .prize-amt, this catch-all targets common names */ .prize-card :is(.prize-amt, .amount, .rupee, .value, .money){ margin-top: auto; } /* Right column (presentation) — keep badges aligned to the top line */ #guidelines .step-card{ display: grid; grid-template-columns: 56px 1fr; align-items: start; /* top-align contents instead of centering */ padding: 16px 18px; } #guidelines .step-num{ align-self: start; /* badge hugs the top */ margin-top: 2px; /* tiny optical nudge so it lines with the title */ } /* If you want the left column to match exactly too */ #guidelines .round{ display: grid; grid-template-columns: 56px 1fr; align-items: start; } #guidelines .round-dot{ align-self: start; margin-top: 2px; } /* Force ALL “facts” icons to use Swiggy orange */ .facts .fact svg { color: var(--swiggy) !important; /* for icons that use currentColor */ } .facts .fact svg *, .facts .fact svg { stroke: var(--swiggy) !important; /* outline icons */ } /* If any icon is filled instead of stroked, make it orange too */ .facts .fact svg [fill] { fill: var(--swiggy) !important; } /* Tighten the gap between the last paragraph and “Problem Statement” */ #about .prose { padding-bottom: 8px; } /* was larger */ #problem .prose { padding-top: 8px; } /* was larger */ /* Kill the default top margin on that section heading */ #problem .prose h2 { margin-top: 0; } /* (Optional) also trim the last paragraph’s bottom margin in the block above */ #about .prose p:last-child { margin-bottom: 8px; } /* Prize chips (PPI / Rewarded) — keep them as inline pills */ .prize-card .pill, .prize-card .pill-ppi, .prize-card .pill-reward{ display: inline-flex !important; /* no full-width bar */ align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--swiggy-light); border: 1px solid var(--swiggy-border); color: var(--swiggy); font-weight: 800; width: fit-content; /* size to content */ max-width: 100%; white-space: nowrap; /* keep text on one line */ } .prize-card .pill-reward svg{ width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } /* PRIZES: keep chips inline, not full-width bars */ #prizes .card .pill, #prizes .card .pill-reward { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--swiggy-light); border: 1px solid var(--swiggy-border); color: var(--swiggy); font-weight: 800; width: auto !important; /* kill width:100% */ max-width: none !important; white-space: nowrap !important; /* keep to one line */ } /* optional: icon size in the chip */ #prizes .card .pill-reward svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; } #prizes .card .pill, #prizes .card .pill-reward { display:inline-flex!important; width:auto!important; white-space:nowrap!important; } /* === Student Initiatives — perfectly even gutters === */ .marquee{ padding: 0 !important; /* no extra padding on the wrapper */ } .marquee .track{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* 3 equal columns */ gap: 28px !important; /* space between the cards */ padding: 28px !important; /* same space on the outer edges */ align-items: stretch !important; justify-items: stretch !important; box-sizing: border-box !important; } .marquee .tile{ margin: 0 !important; /* kill any external margins */ height: 100% !important; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.04); display: flex; flex-direction: column; } .marquee .tile img{ display: block !important; /* remove inline gap */ width: 100% !important; height: 180px !important; /* identical image heights */ object-fit: cover !important; border-bottom: 1px solid var(--line); } .marquee .t-body{ padding: 16px 20px !important; } /* responsive: keep edge gutters = gaps */ @media (max-width: 1024px){ .marquee .track{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } } @media (max-width: 640px){ .marquee .track{ grid-template-columns: 1fr !important; } } /* === Student initiatives — enforce perfectly even gutters === */ .marquee{ padding:0 !important; overflow:hidden; } /* kill any old flex track rules and enforce grid */ .marquee .track{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; /* 3 equal columns */ gap:28px !important; /* space between cards */ padding-inline:28px !important; /* left/right gutters == gap */ padding-block:28px !important; /* top/bottom padding */ align-items:stretch !important; justify-items:stretch !important; box-sizing:border-box !important; } /* make tiles fill their grid cells; remove fixed widths */ .marquee .tile{ min-width:0 !important; max-width:none !important; width:100% !important; margin:0 !important; height:100%; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.04); display:flex; flex-direction:column; } /* clean image + body spacing */ .marquee .tile img{ display:block !important; width:100% !important; height:180px !important; object-fit:cover !important; border-bottom:1px solid var(--line); } .marquee .t-body{ padding:16px 20px !important; } /* responsive: gutters still equal to gaps */ @media (max-width:1024px){ .marquee .track{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } } @media (max-width:640px){ .marquee .track{ grid-template-columns:1fr !important; } } /* Student initiatives card headers in Swiggy orange */ .marquee .tile .label, .marquee .tile h4 { color: var(--swiggy) !important; /* use Swiggy orange */ } /* =========================== MOBILE POLISH (drop-in) =========================== */ /* Small tablets and down */ @media (max-width: 768px){ .container{ padding:0 8px; } /* Reduced from 16px */ /* Header */ .brand__logo{ height:32px; } .nav{ display:none; } /* keep links hidden on mobile for now */ .cta{ padding:8px 12px; border-radius:8px; } /* Hero - mobile responsive */ .hero-banner{ min-height:180px; padding:0 !important; margin:0 !important; } .hero-img{ width:96%; height:auto; max-width:96%; margin:0 auto; } /* Generic cards */ .card{ padding:10px; border-radius:12px; } /* Two-column helpers -> stack */ .grid-2{ grid-template-columns:1fr; gap:12px; } } /* Phones */ @media (max-width: 640px){ .container{ padding:0 4px; } /* Minimal padding for phones */ /* Header/Navbar - add padding for phones */ .header__row{ padding:20px 15px; } /* Type scales that don't overwhelm small screens */ h1{ font-size:clamp(22px, 5.5vw, 28px); } .prose h2, #about h2,#problem h2,#judging h2,#hints h2,#prizes h2,#submission-guidelines h2{ font-size:clamp(18px, 4.4vw, 22px); } /* Facts row -> single column, tighter spacing */ section.facts .facts-row{ grid-template-columns:1fr; gap:8px; } .fact{ padding:10px; border-radius:10px; } .fact svg{ width:22px; height:22px; } /* Guidelines: stack columns + smaller badges/padding */ #guidelines .make-grid{ grid-template-columns:1fr !important; gap:12px !important; } #guidelines .round-card, #guidelines .step-card{ min-height:auto !important; padding:8px 10px 8px 48px !important; border-radius:10px !important; gap:2px !important; } #guidelines .round-dot, #guidelines .step-num{ width:28px !important; height:28px !important; left:10px !important; } /* Student Initiatives (the three promo tiles) — equal gutters left/right */ .marquee{ border-radius:12px; } .marquee .track{ --tile-gap:8px; /* Reduced spacing */ grid-template-columns:1fr; /* one per row */ gap:var(--tile-gap); padding:var(--tile-gap); /* makes left/right gutters match the gaps */ } .marquee .tile{ border-radius:12px; } .marquee .tile img{ height:150px; } .marquee .t-body{ padding:10px; } /* Prizes section */ #prizes .grid-2{ grid-template-columns:1fr; gap:12px; } #prizes .card{ padding:10px; min-height:auto; } #prizes .card svg{ width:32px; height:32px; } #prizes .card .pill, #prizes .card .pill-reward{ padding:4px 8px; font-size:.85rem; } #prizes .card [style*="font-size:1.6rem"]{ font-size:1.3rem !important; } /* prize amount */ /* Back-to-top button a touch smaller on phones */ .back-top{ width:36px; height:36px; right:8px; bottom:12px; } } /* Very small phones */ @media (max-width: 360px){ .container{ padding:0 2px; } /* Almost no padding for very small phones */ .hero-banner{ min-height:120px; padding:0 !important; margin:0 !important; } .hero-img{ width:98%; max-width:98%; } .marquee .tile img{ height:140px; } .marquee .track{ --tile-gap:4px; padding:4px; } } /* Mobile polish for step numbers */ @media (max-width: 640px){ #guidelines .round-card, #guidelines .step-card{ padding:12px 14px 12px 52px !important; /* tighter left padding */ min-height:auto !important; } #guidelines .round-dot, #guidelines .step-num{ width:28px !important; height:28px !important; font-size:.9rem !important; left:14px !important; top:14px !important; /* align to top instead of vertical center */ transform:none !important; /* cancel translateY(-50%) */ margin-top:0 !important; } #guidelines .round-title, #guidelines .step-title{ font-size:1rem !important; line-height:1.3 !important; } #guidelines .round-sub, #guidelines .step-sub{ font-size:.9rem !important; line-height:1.3 !important; } } /* HINTS: use Swiggy tick image instead of the drawn square+check */ #hints .hints-list li{ position: relative; padding-left: 56px; /* room for the icon */ min-height: 34px; /* ensures enough height for the badge */ line-height: 1.55; } /* kill any previous white-check overlay */ #hints .hints-list li::after{ content: none !important; } /* new icon */ #hints .hints-list li::before{ content: ""; position: absolute; left: 0; top: 0.35em; /* aligns with first text line */ width: 34px; height: 34px; /* the uploaded Swiggy tick */ background-image: url("https://res.cloudinary.com/dsnlfhjpm/image/upload/v1757573928/1688818271739__1_-removebg-preview_a137x3.png"); background-repeat: no-repeat; background-position: center; background-size: contain; /* subtle depth so it matches the rest of the UI */ border-radius: 8px; /* keeps the token vibe */ background-color: transparent; /* PNG has its own shape */ box-shadow: 0 1px 0 rgba(15,23,42,.06); } /* Mobile: slightly smaller icon + tighter indent */ @media (max-width: 640px){ #hints .hints-list li{ padding-left: 44px; min-height: 28px; } #hints .hints-list li::before{ width: 28px; height: 28px; top: 0.3em; } } /* HINTS — use Swiggy tick, no faint boxes, perfect vertical alignment */ #hints .hints-list li{ position: relative; padding-left: 48px; /* room for the icon */ line-height: 1.55; min-height: 28px; } /* Kill any previous check overlay */ #hints .hints-list li::after{ content: none !important; } /* New tick icon (no background box, no shadow) */ #hints .hints-list li::before{ content: ""; position: absolute; left: 0; top: 50%; /* center relative to whole item */ transform: translateY(-50%); /* perfect vertical centering */ width: 28px; height: 28px; background: url("https://res.cloudinary.com/dsnlfhjpm/image/upload/v1757573928/1688818271739__1_-removebg-preview_a137x3.png") center / contain no-repeat; /* ensure there's zero “box” around the tick */ background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Mobile tweaks: slightly smaller and tighter indent */ @media (max-width: 640px){ #hints .hints-list li{ padding-left: 42px; min-height: 24px; } #hints .hints-list li::before{ width: 24px; height: 24px; } } .highlight-note { font-weight: 700; /* bold text */ margin-top: 18px; margin-bottom: 18px; color: var(--ink); /* keep consistent text colour */ } .highlight-note a { color: var(--swiggy); /* Swiggy orange */ text-decoration: underline dashed; /* dashed underline */ font-weight: 700; } /* Make the “click here” orange and dashed in the Problem section */ #problem .highlight-note a{ color: var(--swiggy) !important; text-decoration: underline dashed; text-underline-offset: 3px; font-weight: 700; } #problem .highlight-note a:hover, #problem .highlight-note a:focus{ color: var(--swiggy-dark) !important; } #problem .highlight-note a:visited{ color: var(--swiggy) !important; } #problem .highlight-note a { color: var(--swiggy); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; margin-right: 2px; /* gives breathing room before the period */ } /* =========================== MOBILE FIX: Structure/Steps =========================== */ @media (max-width: 600px){ /* Headings: smaller + tighter */ #guidelines .make-h{ font-size: clamp(1.35rem, 5.2vw, 1.6rem) !important; line-height: 1.15 !important; margin: 0 0 10px !important; } /* Lists + grid rhythm */ #guidelines .make-grid{ gap: 14px !important; } #guidelines .rounds, #guidelines .step-list{ gap: 12px !important; } /* Cards: shallower, compact padding */ #guidelines .round-card, #guidelines .step-card{ padding: 12px 14px 12px 56px !important; /* room for the chip */ min-height: 86px !important; box-shadow: 0 3px 10px rgba(15,23,42,.06) !important; align-items: flex-start !important; /* ensure text starts at top */ } /* Typography inside cards */ #guidelines .round-title, #guidelines .step-title{ font-size: 1.02rem !important; margin: 0 0 2px !important; } #guidelines .round-sub, #guidelines .step-sub{ font-size: .95rem !important; margin: 0 !important; } /* Number chips: slightly smaller and aligned to the first line */ #guidelines .round-dot, #guidelines .step-num{ width: 34px !important; height: 34px !important; left: 14px !important; top: 22px !important; /* align to top line of text */ transform: none !important; /* stop vertical centering */ border-width: 3px !important; } } /* === Stack Structure (left) above Presentation (right) globally === */ #guidelines .make-grid{ display: grid !important; grid-template-columns: 1fr !important; /* single column, always */ gap: 24px !important; } /* Optional polish: keep both blocks nicely centered and consistent */ #guidelines .make-col{ min-width: 0 !important; max-width: 980px !important; margin: 0 auto !important; } /* === ALIGN TIMELINE SECTIONS LIKE "Case submission guidelines" === */ /* 1) Keep the two blocks stacked but full-width inside the container */ #guidelines .make-grid{ grid-template-columns: 1fr !important; gap: 24px !important; } /* 2) Remove the centreing we added earlier */ #guidelines .make-col{ max-width: 980px !important; margin: 0 !important; } /* 3) Make each item fill the column and left-align its content */ #guidelines .round, #guidelines .step-card{ align-items: stretch !important; /* not center */ } #guidelines .round-card, #guidelines .step-card{ width: 100% !important; text-align: left !important; } /* Limit the horizontal width of the timeline and step cards so they visually match "Case submission guidelines" boxes */ #guidelines .timeline .tl-list, #guidelines .step-list { max-width: 900px; /* tweak: 880–920px works nicely */ margin-left: 0; /* align with heading */ margin-right: auto; /* keeps it left-aligned */ } /* === Make boxes the same width as "Case submission guidelines" === */ /* Use the same cap the guidelines card uses (980px) */ :root{ --content-max: 980px; } /* tweak here if you ever change the target width */ /* Limit both lists and keep them left-aligned under their headings */ #guidelines .timeline .tl-list, #guidelines .step-list{ max-width: var(--content-max) !important; width: 100% !important; margin-left: 0 !important; /* align with section heading */ margin-right: auto !important; /* not centered */ } /* Ensure each row/card fills the capped list width */ #guidelines .timeline .tl-row, #guidelines .step-list > .step-card{ width: 100% !important; } /* === Make all three stacks the same horizontal width === */ :root { --content-max: 980px; } /* same as #submission-guidelines card */ /* Cap and center the two lists inside #guidelines */ #guidelines .make-col .tl-list, /* your left timeline (tl-*) */ #guidelines .make-col .rounds, /* if any left side still uses .rounds */ #guidelines .make-col .step-list { /* right side cards */ max-width: var(--content-max) !important; width: 100% !important; margin: 0 auto !important; /* centre like the guidelines card */ } /* Ensure rows/cards don’t overflow the capped wrapper */ #guidelines .tl-row, #guidelines .round, #guidelines .step-list > .step-card { width: 100% !important; box-sizing: border-box !important; } :root { --content-max: 980px; } /* match Case submission guidelines */ #guidelines .make-col .tl-list, #guidelines .make-col .rounds, #guidelines .make-col .step-list{ max-width: var(--content-max) !important; width: 100% !important; margin: 0 auto !important; /* centre; use L-align below if preferred */ } /* If you want left-aligned under the heading instead of centred, use this: */ /* #guidelines .make-col .tl-list, #guidelines .make-col .rounds, #guidelines .make-col .step-list{ margin-left: 0 !important; margin-right: auto !important; } */ #guidelines .tl-row, #guidelines .round, #guidelines .step-list > .step-card{ width: 100% !important; box-sizing: border-box !important; } /* === One left-aligned rail for all guideline stacks === */ :root{ /* match the target width you want (same as guidelines card) */ --content-max: 980px; } /* Left column & right column headings on the same rail */ #guidelines .make-col .make-h{ max-width: var(--content-max) !important; margin-left: 0 !important; margin-right: auto !important; /* left-aligned */ margin-bottom: 12px !important; } /* Put BOTH lists on that rail (left timeline + right steps) */ #guidelines .make-col .tl-list, /* LEFT: timeline (tl-*) */ #guidelines .make-col .rounds, /* safety if .rounds exists */ #guidelines .make-col .step-list{ /* RIGHT: presentation steps */ max-width: var(--content-max) !important; width: 100% !important; margin-left: 0 !important; /* left-aligned */ margin-right: auto !important; } /* Ensure rows/cards don’t overflow the capped width */ #guidelines .tl-row, #guidelines .round, #guidelines .step-list > .step-card{ width: 100% !important; box-sizing: border-box !important; } /* Keep "Case submission guidelines" on the same left rail too */ #submission-guidelines .guidelines-card{ max-width: var(--content-max) !important; margin-left: 0 !important; margin-right: auto !important; } /* Tighten the gap ABOVE the "Competition Structure and Deadlines" section */ #problem .prose{ padding-bottom: 16px !important; } /* was larger */ #problem .prose p:last-child{ margin-bottom: 8px !important; } /* trims final para */ /* Reduce the section's own top spacing */ #guidelines{ padding-top: 8px !important; margin-top: 0 !important; } /* Ensure the heading itself isn't adding surprise space */ #guidelines .make-h{ margin-top: 0 !important; } /* =========================== TIMELINE STYLES =========================== */ /* Timeline container with left-aligned vertical line */ .timeline-container { position: relative; padding-left: 60px; /* More space for bigger circles */ max-width: var(--content-max); margin: 0 auto; counter-reset: timeline-counter; } /* Vertical timeline line */ .timeline-container::before { content: ''; position: absolute; left: 32px; /* Center the line perfectly with 30px circles */ top: 30px; bottom: 30px; width: 4px; background: rgba(0,0,0,.2); border-radius: 2px; z-index: 0; animation: fadeInLine 1s ease-out; } /* Timeline items */ .timeline-item { position: relative; margin-bottom: 32px; padding-left: 32px; opacity: 0; animation: slideInFromLeft 0.8s ease-out forwards; } .timeline-item:nth-child(1) { animation-delay: 0.2s; } .timeline-item:nth-child(2) { animation-delay: 0.4s; } .timeline-item:nth-child(3) { animation-delay: 0.6s; } .timeline-item:last-child { margin-bottom: 0; } /* Enhanced timeline dots/circles with numbers */ .timeline-item::before { content: counter(timeline-counter); counter-increment: timeline-counter; position: absolute; left: -45px; /* Align with centered line (32px line center - 15px circle radius = -47px, adjusted to -45px) */ top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background: var(--swiggy); border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px var(--swiggy-light), 0 4px 12px rgba(251, 84, 4, 0.3), 0 0 20px rgba(251, 84, 4, 0.15); z-index: 10; transition: all 0.3s ease; animation: pulseIn 0.6s ease-out forwards; /* Text styling for numbers */ display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; font-family: 'Gilroy', Inter, system-ui, Segoe UI, Roboto, Arial; } .timeline-item:nth-child(1)::before { animation-delay: 0.4s; } .timeline-item:nth-child(2)::before { animation-delay: 0.6s; } .timeline-item:nth-child(3)::before { animation-delay: 0.8s; } /* Hover effect for dots */ .timeline-item:hover::before { transform: translateY(-50%) scale(1.2); box-shadow: 0 0 0 3px var(--swiggy-border), 0 6px 16px rgba(251, 84, 4, 0.4), 0 0 25px rgba(251, 84, 4, 0.25); } /* Enhanced timeline content styling */ .timeline-content { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08), 0 3px 10px rgba(15, 23, 42, 0.05), 0 1px 4px rgba(15, 23, 42, 0.05); position: relative; transition: all 0.3s ease; border-left: 4px solid var(--swiggy-light); } /* Hover effect for content */ .timeline-content:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(15, 23, 42, 0.12), 0 5px 15px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06); border-left-color: var(--swiggy); } /* Timeline title and date */ .timeline-title { font-weight: 800; font-size: 1.1rem; margin: 0 0 6px 0; color: var(--ink); letter-spacing: -.01em; transition: color 0.3s ease; } .timeline-date { font-weight: 600; font-size: 1rem; margin: 0; color: var(--muted); transition: color 0.3s ease; } .timeline-content:hover .timeline-title { color: var(--swiggy); } .timeline-content:hover .timeline-date { color: var(--ink); } /* Animations */ @keyframes fadeInLine { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } } @keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulseIn { 0% { opacity: 0; transform: translateY(-50%) scale(0); } 50% { opacity: 0.8; transform: translateY(-50%) scale(1.3); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } } /* Mobile responsive adjustments */ @media (max-width: 768px) { .timeline-container { padding-left: 50px; } .timeline-container::before { left: 26px; width: 3px; } .timeline-item { padding-left: 28px; margin-bottom: 28px; } .timeline-item::before { left: -36px; width: 20px; height: 20px; border-width: 3px; font-size: 10px; } .timeline-content { padding: 16px 18px; border-radius: 14px; border-left-width: 3px; } .timeline-title { font-size: 1rem; } .timeline-date { font-size: .92rem; } } /* Extra small phones */ @media (max-width: 480px) { .timeline-container { padding-left: 45px; } .timeline-container::before { left: 23px; width: 2px; } .timeline-item { padding-left: 24px; margin-bottom: 24px; } .timeline-item::before { left: -35px; width: 24px; height: 24px; border-width: 2px; font-size: 9px; box-shadow: 0 0 0 2px var(--swiggy-light), 0 2px 8px rgba(251, 84, 4, 0.25); } .timeline-content { padding: 14px 16px; border-radius: 12px; } .timeline-title { font-size: .95rem; margin-bottom: 4px; } .timeline-date { font-size: .88rem; } } /* =========================== HOVER EFFECTS FOR CARDS =========================== */ /* Step cards hover effect (Presentation should cover the following) */ #guidelines .step-card { transition: all 0.3s ease; } #guidelines .step-card:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(15, 23, 42, 0.15), 0 5px 15px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.08); } /* Judging criteria cards hover effect */ .crit { transition: all 0.3s ease; } .crit:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(15, 23, 42, 0.15), 0 5px 15px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.08); } /* =========================== FINAL CTA SECTION =========================== */ .final-cta-section { background: #fff; padding: 30px 0; border-top: 1px solid var(--line); } .simple-cta { text-align: center; max-width: 500px; margin: 0 auto; } .cta-quote { margin-bottom: 32px; opacity: 0; animation: fadeInUp 0.8s ease-out 0.1s forwards; } .quote-icon { font-size: 2rem; display: block; margin-bottom: 12px; } .quote-text { font-size: 1.2rem; font-style: italic; color: var(--ink); margin: 0 0 8px; line-height: 1.4; font-weight: 500; } .quote-author { font-size: 0.9rem; color: var(--swiggy); font-weight: 600; } .cta-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 24px; color: var(--ink); opacity: 0; animation: fadeInUp 0.8s ease-out 0.3s forwards; } .animated-register-btn { display: inline-flex; align-items: center; gap: 8px; padding: 18px 36px; background: var(--swiggy); color: #fff !important; text-decoration: none; border-radius: 14px; font-weight: 700; font-size: 1.1rem; position: relative; overflow: hidden; transition: all 0.3s ease; opacity: 0; animation: fadeInUp 0.8s ease-out 0.5s forwards; box-shadow: 0 4px 15px rgba(251, 84, 4, 0.25); } .animated-register-btn::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, var(--swiggy), var(--swiggy-dark), var(--swiggy), var(--swiggy-light)); background-size: 300% 300%; border-radius: 14px; z-index: -1; animation: borderGlow 3s ease-in-out infinite; } .animated-register-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--swiggy); border-radius: 12px; z-index: -1; transition: all 0.3s ease; } .animated-register-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(251, 84, 4, 0.4); } .animated-register-btn:hover::after { background: var(--swiggy-dark); } .animated-register-btn:hover .btn-arrow { transform: translateX(4px); } .animated-register-btn:active { transform: translateY(-1px) scale(0.98); animation: clickPulse 0.3s ease-out; } #initiatives { margin-bottom: 20px; } .btn-text { position: relative; z-index: 1; color: #fff !important; } .btn-arrow { position: relative; z-index: 1; color: #fff !important; font-size: 1.2rem; transition: transform 0.3s ease; } .cta-subtitle { margin: 16px 0 0; color: var(--muted); font-size: 0.9rem; opacity: 0; animation: fadeInUp 0.8s ease-out 0.7s forwards; } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes borderGlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes clickPulse { 0% { transform: translateY(-1px) scale(0.98); } 50% { transform: translateY(-1px) scale(1.02); } 100% { transform: translateY(-1px) scale(0.98); } } @keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInFromRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Responsive Design */ @media (max-width: 640px) { .final-cta-section { padding: 30px 0; } .quote-text { font-size: 1.1rem; } .cta-title { font-size: 1.4rem; margin-bottom: 20px; } .animated-register-btn { padding: 16px 30px; font-size: 1rem; } .cta-subtitle { font-size: 0.85rem; } } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { .timeline-container::before, .timeline-item, .timeline-item::before { animation: none; } .timeline-item { opacity: 1; } .timeline-item::before, .timeline-content { transition: none; } .timeline-content:hover { transform: none; } .timeline-item:hover::before { transform: translateY(-50%) scale(1); } /* Disable hover animations for reduced motion */ #guidelines .step-card, .crit { transition: none; } #guidelines .step-card:hover, .crit:hover { transform: none; } /* Disable CTA animations */ .cta-quote, .cta-title, .animated-register-btn, .cta-subtitle { animation: none; opacity: 1; } .animated-register-btn::before { animation: none; } .animated-register-btn:hover { transform: none; } .animated-register-btn:hover .btn-arrow { transform: none; } .animated-register-btn:active { animation: none; transform: none; } } /* Big orange prize amount used across prize cards */ .prize-amt{ font-size:1.6rem; font-weight:800; color:var(--swiggy); } /* Alternative: bullet inside, text aligned with paragraph edge */ #problem .prose ul { margin-left: 0; padding-left: 0; list-style-position: inside; } /* Problem section — align bullets with paragraph edge */ #problem .prose ul { margin-left: 0; /* remove default left margin */ padding-left: 1.25rem; /* small, clean indent so it doesn't stick out */ list-style: disc outside; /* normal bullets, no hanging text */ } #problem .prose li { margin: 0 0 8px 0; /* even vertical rhythm */ } /* Hero Banner Adjustments */ .hero { max-height: 75vh; /* shrink it: only 75% of screen height */ min-height: 500px; /* don’t let it collapse on small screens */ display: flex; align-items: center; /* vertically center content */ justify-content: space-between; overflow: hidden; /* trim extra space */ padding: 2rem 4rem; /* tighter padding */ box-sizing: border-box; } .hero img, .hero svg { max-height: 60vh; /* scale illustrations proportionally */ height: auto; } /* Headline Scaling */ .hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); /* responsive font sizing */ line-height: 1.2; } .hero h2 { font-size: clamp(1.2rem, 3vw, 2rem); line-height: 1.3; } /* Prize card layout */ .prize-card{ display:flex; flex-direction:column; justify-content:space-between; min-height:180px; position:relative; padding-bottom:18px; /* room for the corner icon */ } /* Amount styling (orange, bold) */ .prize-amt{ font-size:1.6rem; font-weight:800; color:var(--swiggy); } /* Corner icon look */ .prize-card .corner-icon{ text-align:right; } .prize-card .corner-icon svg{ width:44px; height:44px; color:var(--swiggy); opacity:.95; stroke:currentColor; fill:none; stroke-width:1.8; }/* prize card base (you probably already have this) */ .prize-card{ display:flex; flex-direction:column; justify-content:space-between; min-height:180px; position:relative; padding-bottom:18px; /* space for corner icon */ } /* amount look */ .prize-amt{ font-size:1.6rem; font-weight:800; color:var(--swiggy); } /* bottom-right corner icon */ .prize-corner{ position:absolute; right:16px; bottom:14px; display:inline-flex; } .prize-corner svg{ width:44px; height:44px; stroke:var(--swiggy); fill:none; stroke-width:1.8; opacity:.95; } /* Problem section — align bullets with paragraph edge */ #problem .prose ul { margin-left: 0; /* remove default left margin */ padding-left: 1.15rem; /* small, clean indent so it doesn't stick out */ list-style: disc outside; /* normal bullets, no hanging text */ } #problem .prose li { margin: 0 0 8px 0; /* even vertical rhythm */ } /* Alternative: bullet inside, text aligned with paragraph edge */ #problem .prose ul { margin-left: 0; padding-left: 0; list-style-position: inside; } /* PROBLEM section – make bullets flush with paragraph left edge */ #problem .prose ul, #problem .prose ol{ /* remove the extra list padding */ margin-left: 0; padding-left: 0; } /* Hanging bullets: marker sits in the gutter, text aligns with paragraphs */ #problem .prose ul li, #problem .prose ol li{ padding-left: 1.15rem; /* width of the gutter */ text-indent: -1.15rem; /* same negative value to pull text back */ margin: 0 0 8px; /* keep your vertical rhythm tidy */ list-style-position: outside; /* keep the browser marker */ } /* Problem bullets — hang the dot in the gutter, text aligns with paragraphs */ #problem .prose .problem-outcomes{ margin: 0; /* no extra left margin */ padding: 0; /* remove default padding */ list-style: disc outside; } #problem .prose .problem-outcomes li{ /* "hanging bullet": bullet sits left, text aligns with paragraph edge */ --gutter: 1.15rem; padding-left: var(--gutter); text-indent: calc(-1 * var(--gutter)); margin: 0 0 8px 0; /* tidy vertical rhythm */ } /* Problem bullets — nudge the whole list inward a bit */ #problem .prose > ul, #problem .prose > ol, #problem .prose .problem-outcomes{ /* if you used this class */ margin-left: 1.25rem !important; /* tweak 1.0–1.5rem to taste */ padding-left: 0 !important; /* keep a clean block indent */ list-style: disc outside !important; } /* Reset any previous “hanging bullet” styles */ #problem .prose > ul li, #problem .prose > ol li, #problem .prose .problem-outcomes li{ padding-left: 0 !important; text-indent: 0 !important; margin: 0 0 8px 0; /* tidy vertical rhythm */ } /* ========================================= Presentation cards — tighter line spacing ========================================= */ /* Title line: reduce line-height + trim bottom gap */ #guidelines .make-col:nth-child(2) .step-card .step-title{ line-height: 1.18 !important; /* was ~1.35+ */ margin-bottom: 2px !important; /* smaller gap above the body line */ letter-spacing: -.01em; /* cleaner wrap on long words */ } /* Body line under the title: slightly tighter too */ #guidelines .make-col:nth-child(2) .step-card .step-sub{ line-height: 1.38 !important; /* was ~1.55 */ } /* Reduce the space between the orange number chip and text */ #guidelines .make-col:nth-child(2) .step-card{ column-gap: 10px !important; /* was 12–16px */ padding-top: 14px !important; padding-bottom: 14px !important; } /* Mobile: keep it readable but still compact */ @media (max-width: 640px){ #guidelines .make-col:nth-child(2) .step-card .step-title{ line-height: 1.2 !important; } #guidelines .make-col:nth-child(2) .step-card .step-sub{ line-height: 1.42 !important; } } /* FOOTER — mobile-first with proper spacing and boxes */ footer{ border-top: 1px solid var(--line); background: #fff; padding: 0; /* Reset any inherited padding */ } .foot{ max-width: var(--container-max); margin: 0 auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; box-sizing: border-box; } /* Copyright text - with padding box */ .copyright{ margin: 0; padding: 12px 16px; font-weight: 700; font-size: 0.9rem; color: var(--ink); letter-spacing: 0.02em; background: var(--bg); border-radius: 8px; border: 1px solid var(--line); width: 100%; max-width: 500px; box-sizing: border-box; } /* Contact paragraph - with padding box */ .footer-contact{ margin: 0; padding: 16px 20px; max-width: 600px; line-height: 1.6; font-size: 0.95rem; color: var(--ink); background: var(--card); border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,0.04); width: 100%; box-sizing: border-box; } /* Email link styling */ .footer-contact a{ color: var(--swiggy); font-weight: 800; text-decoration: none; border-bottom: 2px solid var(--swiggy-border); transition: all 0.2s ease; word-break: break-all; /* Prevent email from overflowing */ } .footer-contact a:hover{ color: var(--swiggy-dark); border-bottom-color: var(--swiggy); } /* Tablet optimizations */ @media (max-width: 768px){ .foot{ padding: 28px 20px; gap: 14px; } .copyright{ font-size: 0.85rem; line-height: 1.4; padding: 10px 14px; max-width: 100%; } .footer-contact{ font-size: 0.9rem; line-height: 1.65; max-width: 100%; padding: 14px 18px; } } /* Mobile optimizations */ @media (max-width: 480px){ .foot{ padding: 16px 8px; gap: 8px; } .copyright{ font-size: 0.75rem; text-align: center; padding: 6px 8px; line-height: 1.4; } .footer-contact{ font-size: 0.8rem; line-height: 1.6; padding: 8px 12px; } .footer-contact a{ word-break: break-word; /* Better word breaking on very small screens */ } } /* Keep short phrases on a single line */ .no-wrap { white-space: nowrap; } /* (Optional) slightly tighten title size on very small screens so it still fits */ @media (max-width: 480px){ .cta-title{ font-size: 1.4rem; } }