Merge pull request #65 from Krish-2118/development

Development

Author: Krish-2118

src/app/globals.css

@@ -215,6 +215,8 @@ body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;o
 .hero-kicker{--ls:.42em;gap:.55em;font-size:clamp(11px,1.05vw,16px);letter-spacing:var(--ls)}
 /* Second kicker line: a little smaller and lighter, so NIT ROURKELA leads. --ls is in em, so the centring pad shrinks with it. */
 .hero-kicker-sub{font-size:.88em;font-weight:700;opacity:.78}
+/* Third kicker line: PRESENTS, smaller and quieter again, a hand-off from the kicker to the title. */
+.hero-kicker-presents{font-size:max(.78em,8px);font-weight:500;opacity:.66}
 .hero-title{margin:clamp(10px,2vh,22px) 0 clamp(8px,1.4vh,16px);font-size:clamp(36px,12.4vw,224px)}
 .hero-sub{--ls:.32em;gap:18px;font-size:clamp(12px,1.35vw,21px);letter-spacing:var(--ls)}
 .hero-sub-rule{width:clamp(24px,4vw,64px);flex:none}

src/app/opengraph-image.tsx

@@ -9,5 +9,5 @@ export const size = OG_SIZE;
 export const contentType = 'image/png';
 
 export default function OpengraphImage() {
-  return ogCard({ kicker: 'NIT ROURKELA', kickerSub: 'STUDENT ACTIVITY CENTRE PRESENTS', title: 'INNOVISION', subtitle: '2026 · THE CELESTIAL ODYSSEY' });
+  return ogCard({ kicker: 'NIT ROURKELA', kickerSub: 'STUDENT ACTIVITY CENTRE', kickerTail: 'PRESENTS', title: 'INNOVISION', subtitle: '2026 · THE CELESTIAL ODYSSEY' });
 }

src/components/innovision/HomeView.tsx

@@ -55,12 +55,13 @@ export default function HomeView({ v }: { v: V }) {
             </div>
             <div className="hero-copy" style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", pointerEvents: "none" }}>
               {/* Wide screens: display contents, so copy and buttons share one centred column. Stacked screens: a box the size of the disc.
-                  The page's one heading is the whole visible line-up: NIT ROURKELA / STUDENT ACTIVITY CENTRE PRESENTS / INNOVISION / 2026 · THE CELESTIAL ODYSSEY.
+                  The page's one heading is the whole visible line-up: NIT ROURKELA / STUDENT ACTIVITY CENTRE / PRESENTS / INNOVISION / 2026 · THE CELESTIAL ODYSSEY.
                   Its parts are spans (phrasing content); the spaces between them are not rendered between flex items but keep the words apart in the text. */}
               <h1 aria-label="NIT Rourkela Student Activity Centre presents Innovision 2026: The Celestial Odyssey" className="hero-copy-disc" style={{ margin: "0", fontSize: "inherit", fontWeight: "inherit" }}>
                 <span data-h-kicker="" className="hero-kicker" style={{ display: "flex", flexDirection: "column", alignItems: "center", color: "#ECE8DF", fontFamily: "var(--font-sans)", fontWeight: "700", whiteSpace: "nowrap" }}>
                   <span className="hero-track">NIT ROURKELA</span>{" "}
-                  <span className="hero-track hero-kicker-sub">STUDENT ACTIVITY CENTRE PRESENTS</span>
+                  <span className="hero-track hero-kicker-sub">STUDENT ACTIVITY CENTRE</span>{" "}
+                  <span className="hero-track hero-kicker-presents">PRESENTS</span>
                 </span>{" "}
                 <span className="hero-title" style={{ display: "flex", fontFamily: "var(--font-display)", fontWeight: "400", lineHeight: ".95", letterSpacing: ".01em", color: "#fff", mixBlendMode: "difference", whiteSpace: "nowrap" }}>
                   {v.heroChars.map((c, cI) => (

src/components/innovision/Loader.tsx

@@ -64,7 +64,8 @@ export default function Loader({ v }: { v: V }) {
         <div data-l-fade="" style={{ overflow: "hidden" }}>
           <div data-l-line="" style={{ fontSize: "12px", fontWeight: "500", letterSpacing: ".34em" }}>
             NIT ROURKELA
-            <span style={{ display: "block", marginTop: "6px", fontSize: "min(11px, 3.2vw)", fontWeight: "700", letterSpacing: ".24em", opacity: ".75" }}>STUDENT ACTIVITY CENTRE PRESENTS</span>
+            <span style={{ display: "block", marginTop: "6px", fontSize: "min(11px, 3.2vw)", fontWeight: "700", letterSpacing: ".24em", opacity: ".75" }}>STUDENT ACTIVITY CENTRE</span>
+            <span style={{ display: "block", marginTop: "5px", fontSize: "max(8px, min(9px, 2.6vw))", fontWeight: "500", letterSpacing: ".24em", opacity: ".6" }}>PRESENTS</span>
           </div>
         </div>
         <div data-l-fade="" style={{ overflow: "hidden" }}>

src/lib/og-card.tsx

@@ -15,11 +15,12 @@ export const OG_SIZE = { width: OG_IMAGE.width, height: OG_IMAGE.height };
 
 /**
  * @param kicker small caps line above the title, e.g. 'NIT ROURKELA'.
- * @param kickerSub optional smaller second kicker line, e.g. 'STUDENT ACTIVITY CENTRE PRESENTS'.
+ * @param kickerSub optional smaller second kicker line, e.g. 'STUDENT ACTIVITY CENTRE'.
+ * @param kickerTail optional smallest third kicker line, e.g. 'PRESENTS'.
  * @param title the big serif line; anything longer than INNOVISION is set smaller and may wrap onto two lines.
  * @param subtitle the gold line under the title.
  */
-export async function ogCard({ kicker, kickerSub, title, subtitle }: { kicker: string; kickerSub?: string; title: string; subtitle: string }) {
+export async function ogCard({ kicker, kickerSub, kickerTail, title, subtitle }: { kicker: string; kickerSub?: string; kickerTail?: string; title: string; subtitle: string }) {
   const [serif, starfield, logo] = await Promise.all([
     readFile(join(process.cwd(), 'src/assets/fonts/DMSerifDisplay-Regular.ttf')),
     readFile(join(process.cwd(), 'public/assets/starfield.svg')),
@@ -44,6 +45,7 @@ export async function ogCard({ kicker, kickerSub, title, subtitle }: { kicker: s
           <img src={`data:image/png;base64,${logo.toString('base64')}`} alt="" width={84} height={84} style={{ marginBottom: 18 }} />
           <div style={{ color: BONE, fontSize: 20, letterSpacing: 6, fontWeight: 700 }}>{kicker}</div>
           {kickerSub && <div style={{ color: BONE, opacity: 0.78, fontSize: 17, letterSpacing: 4, fontWeight: 700, marginTop: 8 }}>{kickerSub}</div>}
+          {kickerTail && <div style={{ color: BONE, opacity: 0.66, fontSize: 14, letterSpacing: 4, fontWeight: 500, marginTop: 7 }}>{kickerTail}</div>}
           <div
             style={{
               display: 'flex', justifyContent: 'center', maxWidth: 470, textAlign: 'center', color: '#fff', fontFamily: 'DM Serif Display',