/* ========================================================================== YELLOW STRAW INTERNSHIP PORTFOLIO — STYLESHEET Phase 1: Homepage (index.html) Table of contents 1. Custom properties / design tokens 2. Reset & base styles 3. Layout utilities 4. Typography helpers 5. Buttons 6. Header / Navigation 7. Hero section 8. My Story section 9. Internship Highlights section 10. Featured Projects section 11. Footer 12. Scroll animations (fade-in) 13. Responsive breakpoints ========================================================================== */ /* -------------------------------------------------------------------------- 1. CUSTOM PROPERTIES / DESIGN TOKENS VISUAL IDENTITY — rich midnight navy, deep graphite, warm ivory/pearl, and a champagne–brass–bronze–copper metallic accent family, replacing the earlier flat "white background, navy card, gold text" system. Variable NAMES are kept wherever possible (--color-navy-*, --color-gold-*, --color-white/off-white, --color-ink*) so every existing rule in this file — hundreds of them — inherits the new palette automatically with zero risk of a missed spot; only genuinely new surfaces get new names (--color-graphite-*, --color-cream-100, --color-bronze-600, --color-copper-500, --gradient-metallic*). -------------------------------------------------------------------------- */ :root { /* Rich midnight navy — deeper and slightly indigo-leaning rather than a flat corporate navy, so dark sections read as "premium dusk sky" rather than a plain dark-mode fill. */ --color-navy-950: #06060f; --color-navy-900: #0c0e1e; --color-navy-800: #141a30; --color-navy-700: #1e2843; --color-navy-600: #2c3a63; /* Deep graphite — a warm-neutral near-black, distinct from the navy scale, used to give a couple of sections their own subtle identity rather than every dark section being identical navy. */ --color-graphite-900: #1c1811; --color-graphite-800: #262019; /* Champagne → brushed brass → metallic bronze → warm copper. The old single flat gold is now a family: brass carries the everyday accent role gold used to play, champagne is the light/hover tone, bronze and copper are reserved for gradients, depth and occasional warmth rather than being repeated flat everywhere. */ --color-gold-500: #c9a463; --color-gold-400: #ddc48f; --color-gold-300: #ecdcb8; --color-bronze-600: #8f6a3e; --color-copper-500: #ad6b45; --gradient-metallic: linear-gradient(120deg, #ecdcb8 0%, #c9a463 45%, #8f6a3e 100%); --gradient-metallic-text: linear-gradient(120deg, #f2e4c4 0%, #d4b06e 50%, #a67a44 100%); /* Pearl white (card surfaces) and warm ivory (page/section surfaces) — both carry a whisper of cream rather than being stark, cool white, which was the single biggest "template" tell. */ --color-white: #fdfbf6; --color-off-white: #f5efe1; --color-cream-100: #ede1c9; /* Warm charcoal ink instead of cool blue-black, plus a genuinely blue-grey secondary tone for use on dark surfaces. */ --color-ink: #221d17; --color-ink-soft: #5b5245; --color-blue-grey: #8891a3; --color-border: rgba(34, 29, 23, 0.09); /* Typography */ --font-display: "Playfair Display", "Georgia", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3rem; --space-xl: 5rem; --space-2xl: 8rem; /* Layout */ --container-width: 1240px; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 0.25s var(--ease-out); --transition-med: 0.55s var(--ease-out); --transition-slow: 0.9s var(--ease-out); /* Shadows */ --shadow-sm: 0 4px 18px rgba(12, 14, 30, 0.09); --shadow-md: 0 18px 45px rgba(12, 14, 30, 0.16); --shadow-gold: 0 12px 30px rgba(201, 164, 99, 0.28); } /* -------------------------------------------------------------------------- 2. RESET & BASE STYLES -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: 400; color: var(--color-ink); background-color: var(--color-off-white); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* -------------------------------------------------------------------------- 2b. GLOBAL AMBIENT BACKGROUND A fixed, whole-viewport layer of soft gradient blooms plus a fine grain wash, sitting behind (blooms) and above (grain) the page so the off-white sections read as a living surface rather than a flat fill. Pure CSS — no extra DOM, no JS, transform/opacity only for the slow drift — so it costs nothing beyond first paint and is fully frozen by the reduced-motion rule above like every other animation on the site. The light sections (.story, .projects, .gallery) sit on a transparent background so these blooms show through; navy sections keep their own opaque background and radial blooms untouched. */ body::before { content: ""; position: fixed; inset: -10%; z-index: -2; background: radial-gradient(ellipse 640px 520px at 12% -8%, rgba(201, 164, 99, 0.13), transparent 60%), radial-gradient(ellipse 560px 560px at 108% 18%, rgba(28, 58, 104, 0.09), transparent 58%), radial-gradient(ellipse 720px 580px at 46% 106%, rgba(201, 164, 99, 0.09), transparent 58%); animation: ambient-drift 46s var(--ease-out) infinite alternate; pointer-events: none; will-change: transform; } /* Fine grain, washed over the *entire* page (including navy sections) at a very high z-index but with pointer-events disabled, so it never blocks clicks or competes with content — just a whisper of texture, the kind premium sites use to keep large flat colour fields from looking sterile. */ body::after { content: ""; position: fixed; inset: 0; z-index: 950; opacity: 0.045; pointer-events: none; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); background-size: 180px 180px; } @keyframes ambient-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.05); } } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; background: none; border: none; cursor: pointer; } /* Icon system — CSS mask, not . SVGs in assets/icons/ use stroke="currentColor" so a single file can render navy, white or gold depending on context. That only works if the icon is painted via CSS (mask-image + background-color), since a plain loads the SVG as an opaque sub-document and ignores the host page's `color` entirely (currentColor resolves to the SVG's own default, i.e. black) — every icon on the site was rendering black regardless of its intended colour. Markup is now instead of . */ .icon { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex-shrink: 0; } .icon-menu { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iMyIgeTE9IjEyIiB4Mj0iMjEiIHkyPSIxMiIvPgogIDxsaW5lIHgxPSIzIiB5MT0iNiIgeDI9IjIxIiB5Mj0iNiIvPgogIDxsaW5lIHgxPSIzIiB5MT0iMTgiIHgyPSIyMSIgeTI9IjE4Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iMyIgeTE9IjEyIiB4Mj0iMjEiIHkyPSIxMiIvPgogIDxsaW5lIHgxPSIzIiB5MT0iNiIgeDI9IjIxIiB5Mj0iNiIvPgogIDxsaW5lIHgxPSIzIiB5MT0iMTgiIHgyPSIyMSIgeTI9IjE4Ii8+Cjwvc3ZnPgo="); } .icon-close { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iMTgiIHkxPSI2IiB4Mj0iNiIgeTI9IjE4Ii8+CiAgPGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iMTgiIHkxPSI2IiB4Mj0iNiIgeTI9IjE4Ii8+CiAgPGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCIvPgo8L3N2Zz4K"); } .icon-arrow-down { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSIvPgogIDxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSIvPgogIDxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiLz4KPC9zdmc+Cg=="); } .icon-arrow-up-right { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iNyIgeTE9IjE3IiB4Mj0iMTciIHkyPSI3Ii8+CiAgPHBvbHlsaW5lIHBvaW50cz0iNyA3IDE3IDcgMTcgMTciLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iNyIgeTE9IjE3IiB4Mj0iMTciIHkyPSI3Ii8+CiAgPHBvbHlsaW5lIHBvaW50cz0iNyA3IDE3IDcgMTcgMTciLz4KPC9zdmc+Cg=="); } .icon-chevron-left { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSIxNSAxOCA5IDEyIDE1IDYiLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSIxNSAxOCA5IDEyIDE1IDYiLz4KPC9zdmc+Cg=="); } .icon-chevron-right { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSI5IDE4IDE1IDEyIDkgNiIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cG9seWxpbmUgcG9pbnRzPSI5IDE4IDE1IDEyIDkgNiIvPgo8L3N2Zz4K"); } .icon-download { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMjEgMTV2NGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnYtNCIvPgogIDxwb2x5bGluZSBwb2ludHM9IjcgMTAgMTIgMTUgMTcgMTAiLz4KICA8bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMjEgMTV2NGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnYtNCIvPgogIDxwb2x5bGluZSBwb2ludHM9IjcgMTAgMTIgMTUgMTcgMTAiLz4KICA8bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyIvPgo8L3N2Zz4K"); } .icon-linkedin { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTYgOGE2IDYgMCAwIDEgNiA2djdoLTR2LTdhMiAyIDAgMCAwLTItMiAyIDIgMCAwIDAtMiAydjdoLTR2LTdhNiA2IDAgMCAxIDYtNnoiLz4KICA8cmVjdCB4PSIyIiB5PSI5IiB3aWR0aD0iNCIgaGVpZ2h0PSIxMiIvPgogIDxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSIyIi8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTYgOGE2IDYgMCAwIDEgNiA2djdoLTR2LTdhMiAyIDAgMCAwLTItMiAyIDIgMCAwIDAtMiAydjdoLTR2LTdhNiA2IDAgMCAxIDYtNnoiLz4KICA8cmVjdCB4PSIyIiB5PSI5IiB3aWR0aD0iNCIgaGVpZ2h0PSIxMiIvPgogIDxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSIyIi8+Cjwvc3ZnPgo="); } .icon-phone { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMjIgMTYuOTJ2M2EyIDIgMCAwIDEtMi4xOCAyIDE5Ljc5IDE5Ljc5IDAgMCAxLTguNjMtMy4wNyAxOS41IDE5LjUgMCAwIDEtNi02IDE5Ljc5IDE5Ljc5IDAgMCAxLTMuMDctOC42N0EyIDIgMCAwIDEgNC4xMSAyaDNhMiAyIDAgMCAxIDIgMS43MmMuMTI3Ljk2LjM2MSAxLjkwMy43IDIuODFhMiAyIDAgMCAxLS40NSAyLjExTDguMDkgOS45MWExNiAxNiAwIDAgMCA2IDZsMS4yNy0xLjI3YTIgMiAwIDAgMSAyLjExLS40NWMuOTA3LjMzOSAxLjg1LjU3MyAyLjgxLjdBMiAyIDAgMCAxIDIyIDE2LjkyeiIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMjIgMTYuOTJ2M2EyIDIgMCAwIDEtMi4xOCAyIDE5Ljc5IDE5Ljc5IDAgMCAxLTguNjMtMy4wNyAxOS41IDE5LjUgMCAwIDEtNi02IDE5Ljc5IDE5Ljc5IDAgMCAxLTMuMDctOC42N0EyIDIgMCAwIDEgNC4xMSAyaDNhMiAyIDAgMCAxIDIgMS43MmMuMTI3Ljk2LjM2MSAxLjkwMy43IDIuODFhMiAyIDAgMCAxLS40NSAyLjExTDguMDkgOS45MWExNiAxNiAwIDAgMCA2IDZsMS4yNy0xLjI3YTIgMiAwIDAgMSAyLjExLS40NWMuOTA3LjMzOSAxLjg1LjU3MyAyLjgxLjdBMiAyIDAgMCAxIDIyIDE2LjkyeiIvPgo8L3N2Zz4K"); } .icon-mail { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNNCA0aDE2YzEuMSAwIDIgLjkgMiAydjEyYzAgMS4xLS45IDItMiAySDRjLTEuMSAwLTItLjktMi0yVjZjMC0xLjEuOS0yIDItMnoiLz4KICA8cG9seWxpbmUgcG9pbnRzPSIyMiw2IDEyLDEzIDIsNiIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNNCA0aDE2YzEuMSAwIDIgLjkgMiAydjEyYzAgMS4xLS45IDItMiAySDRjLTEuMSAwLTItLjktMi0yVjZjMC0xLjEuOS0yIDItMnoiLz4KICA8cG9seWxpbmUgcG9pbnRzPSIyMiw2IDEyLDEzIDIsNiIvPgo8L3N2Zz4K"); } /* Custom illustration set (Awwwards elevation pass) — a consistent, editorial line-art icon family replacing generic emoji glyphs across the case studies. Same Feather-style stroke language as the icons above, so they read as one system. */ .icon-research { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI2LjUiLz4KICA8bGluZSB4MT0iNyIgeTE9IjgiIHgyPSIxMyIgeTI9IjgiLz4KICA8bGluZSB4MT0iNyIgeTE9IjEwLjUiIHgyPSIxMyIgeTI9IjEwLjUiLz4KICA8bGluZSB4MT0iNyIgeTE9IjEzIiB4Mj0iMTEiIHkyPSIxMyIvPgogIDxsaW5lIHgxPSIxNC44IiB5MT0iMTQuOCIgeDI9IjIxIiB5Mj0iMjEiLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMCIgY3k9IjEwIiByPSI2LjUiLz4KICA8bGluZSB4MT0iNyIgeTE9IjgiIHgyPSIxMyIgeTI9IjgiLz4KICA8bGluZSB4MT0iNyIgeTE9IjEwLjUiIHgyPSIxMyIgeTI9IjEwLjUiLz4KICA8bGluZSB4MT0iNyIgeTE9IjEzIiB4Mj0iMTEiIHkyPSIxMyIvPgogIDxsaW5lIHgxPSIxNC44IiB5MT0iMTQuOCIgeDI9IjIxIiB5Mj0iMjEiLz4KPC9zdmc+Cg=="); } .icon-strategy { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSI1IiBjeT0iMTIiIHI9IjIiLz4KICA8Y2lyY2xlIGN4PSIxOSIgY3k9IjUiIHI9IjIiLz4KICA8Y2lyY2xlIGN4PSIxOSIgY3k9IjE5IiByPSIyIi8+CiAgPHBhdGggZD0iTTcgMTFsMTAtNSIvPgogIDxwYXRoIGQ9Ik03IDEzbDEwIDUiLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSI1IiBjeT0iMTIiIHI9IjIiLz4KICA8Y2lyY2xlIGN4PSIxOSIgY3k9IjUiIHI9IjIiLz4KICA8Y2lyY2xlIGN4PSIxOSIgY3k9IjE5IiByPSIyIi8+CiAgPHBhdGggZD0iTTcgMTFsMTAtNSIvPgogIDxwYXRoIGQ9Ik03IDEzbDEwIDUiLz4KPC9zdmc+Cg=="); } .icon-consumer-psychology { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNOSAzYTYgNiAwIDAgMSA2IDZjMCAyLjItMSAzLjQtMS44IDQuNC0uNS42LS45IDEuMS0uOSAxLjh2MS4zYTEuNSAxLjUgMCAwIDEtMS41IDEuNWgtM0ExLjUgMS41IDAgMCAxIDYuMyAxNi41di0xLjNjMC0uNy0uNC0xLjItLjktMS44QzQuNSAxMi40IDMgMTEuMiAzIDlhNiA2IDAgMCAxIDYtNnoiLz4KICA8Y2lyY2xlIGN4PSI5IiBjeT0iOSIgcj0iMS40Ii8+CiAgPHBhdGggZD0iTTkgMjB2MSIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNOSAzYTYgNiAwIDAgMSA2IDZjMCAyLjItMSAzLjQtMS44IDQuNC0uNS42LS45IDEuMS0uOSAxLjh2MS4zYTEuNSAxLjUgMCAwIDEtMS41IDEuNWgtM0ExLjUgMS41IDAgMCAxIDYuMyAxNi41di0xLjNjMC0uNy0uNC0xLjItLjktMS44QzQuNSAxMi40IDMgMTEuMiAzIDlhNiA2IDAgMCAxIDYtNnoiLz4KICA8Y2lyY2xlIGN4PSI5IiBjeT0iOSIgcj0iMS40Ii8+CiAgPHBhdGggZD0iTTkgMjB2MSIvPgo8L3N2Zz4K"); } .icon-politics { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSIyIi8+CiAgPHBhdGggZD0iTTggMTJsMi41IDIuNUwxNiA5Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cmVjdCB4PSI0IiB5PSI0IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSIyIi8+CiAgPHBhdGggZD0iTTggMTJsMi41IDIuNUwxNiA5Ii8+Cjwvc3ZnPgo="); } .icon-branding { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTIuNSAzSDZhMiAyIDAgMCAwLTIgMnY2LjVhMiAyIDAgMCAwIC42IDEuNGw4LjUgOC41YTIgMiAwIDAgMCAyLjggMGw1LTVhMiAyIDAgMCAwIDAtMi44bC04LjUtOC41QTIgMiAwIDAgMCAxMi41IDN6Ii8+CiAgPGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSIxLjI1Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTIuNSAzSDZhMiAyIDAgMCAwLTIgMnY2LjVhMiAyIDAgMCAwIC42IDEuNGw4LjUgOC41YTIgMiAwIDAgMCAyLjggMGw1LTVhMiAyIDAgMCAwIDAtMi44bC04LjUtOC41QTIgMiAwIDAgMCAxMi41IDN6Ii8+CiAgPGNpcmNsZSBjeD0iOC41IiBjeT0iOC41IiByPSIxLjI1Ii8+Cjwvc3ZnPgo="); } .icon-campaigns { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMyAxMXYyYTEgMSAwIDAgMCAxIDFoMmw0LjUgM1Y3TDYgMTBINGExIDEgMCAwIDAtMSAxeiIvPgogIDxwYXRoIGQ9Ik0xNCA4LjVhMy41IDMuNSAwIDAgMSAwIDciLz4KICA8cGF0aCBkPSJNMTYuNSA2YTcgNyAwIDAgMSAwIDEyIi8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMyAxMXYyYTEgMSAwIDAgMCAxIDFoMmw0LjUgM1Y3TDYgMTBINGExIDEgMCAwIDAtMSAxeiIvPgogIDxwYXRoIGQ9Ik0xNCA4LjVhMy41IDMuNSAwIDAgMSAwIDciLz4KICA8cGF0aCBkPSJNMTYuNSA2YTcgNyAwIDAgMSAwIDEyIi8+Cjwvc3ZnPgo="); } .icon-analytics { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iNCIgeTE9IjIwIiB4Mj0iMjAiIHkyPSIyMCIvPgogIDxyZWN0IHg9IjYiIHk9IjE0IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjYiLz4KICA8cmVjdCB4PSIxMSIgeT0iMTAiIHdpZHRoPSIyLjUiIGhlaWdodD0iMTAiLz4KICA8cmVjdCB4PSIxNiIgeT0iNiIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIxNCIvPgogIDxwYXRoIGQ9Ik02IDEybDUtNCA0IDMgNS02IiBzdHJva2Utd2lkdGg9IjEuNCIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8bGluZSB4MT0iNCIgeTE9IjIwIiB4Mj0iMjAiIHkyPSIyMCIvPgogIDxyZWN0IHg9IjYiIHk9IjE0IiB3aWR0aD0iMi41IiBoZWlnaHQ9IjYiLz4KICA8cmVjdCB4PSIxMSIgeT0iMTAiIHdpZHRoPSIyLjUiIGhlaWdodD0iMTAiLz4KICA8cmVjdCB4PSIxNiIgeT0iNiIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIxNCIvPgogIDxwYXRoIGQ9Ik02IDEybDUtNCA0IDMgNS02IiBzdHJva2Utd2lkdGg9IjEuNCIvPgo8L3N2Zz4K"); } .icon-communication { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMjAgMTJhNyA3IDAgMCAxLTEwLjUgNi4xTDQgMTlsMS4zLTRBNyA3IDAgMSAxIDIwIDEyeiIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMjAgMTJhNyA3IDAgMCAxLTEwLjUgNi4xTDQgMTlsMS4zLTRBNyA3IDAgMSAxIDIwIDEyeiIvPgo8L3N2Zz4K"); } .icon-pillar-growth { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTIgMjFWMTAiLz4KICA8cGF0aCBkPSJNMTIgMTBDMTIgNiA5IDQgNSA0YzAgNCAyIDcgNyA3eiIvPgogIDxwYXRoIGQ9Ik0xMiAxM2MwLTQgMy02IDctNiAwIDQtMiA3LTcgNyIvPgo8L3N2Zz4K"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTIgMjFWMTAiLz4KICA8cGF0aCBkPSJNMTIgMTBDMTIgNiA5IDQgNSA0YzAgNCAyIDcgNyA3eiIvPgogIDxwYXRoIGQ9Ik0xMiAxM2MwLTQgMy02IDctNiAwIDQtMiA3LTcgNyIvPgo8L3N2Zz4K"); } .icon-pillar-health { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTIgNC41Yy0xLjQtMS43LTMuNi0yLjItNS41LTEuMUM0LjQgNC41IDMuNiA3LjIgNC45IDkuNGMxLjYgMi43IDQuNyA1LjMgNy4xIDcuMSAyLjQtMS44IDUuNS00LjQgNy4xLTcuMSAxLjMtMi4yLjUtNC45LTEuNi02QzE1LjYgMi4zIDEzLjQgMi44IDEyIDQuNXoiLz4KICA8cGF0aCBkPSJNOSAxMGgybDEtMiAxLjUgNCAxLTJIMTYiLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTIgNC41Yy0xLjQtMS43LTMuNi0yLjItNS41LTEuMUM0LjQgNC41IDMuNiA3LjIgNC45IDkuNGMxLjYgMi43IDQuNyA1LjMgNy4xIDcuMSAyLjQtMS44IDUuNS00LjQgNy4xLTcuMSAxLjMtMi4yLjUtNC45LTEuNi02QzE1LjYgMi4zIDEzLjQgMi44IDEyIDQuNXoiLz4KICA8cGF0aCBkPSJNOSAxMGgybDEtMiAxLjUgNCAxLTJIMTYiLz4KPC9zdmc+Cg=="); } .icon-pillar-skill { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMiA4bDEwLTQgMTAgNC0xMCA0LTEwLTR6Ii8+CiAgPHBhdGggZD0iTTYgMTAuNXY0YzAgMS40IDIuNyAyLjUgNiAyLjVzNi0xLjEgNi0yLjV2LTQiLz4KICA8cGF0aCBkPSJNMjAgOHY2Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMiA4bDEwLTQgMTAgNC0xMCA0LTEwLTR6Ii8+CiAgPHBhdGggZD0iTTYgMTAuNXY0YzAgMS40IDIuNyAyLjUgNiAyLjVzNi0xLjEgNi0yLjV2LTQiLz4KICA8cGF0aCBkPSJNMjAgOHY2Ii8+Cjwvc3ZnPgo="); } .icon-pillar-farm { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTIgM2MyIDIuNSA0IDUuMyA0IDhhNCA0IDAgMCAxLTggMGMwLTIuNyAyLTUuNSA0LTh6Ii8+CiAgPHBhdGggZD0iTTEyIDE1djYiLz4KICA8cGF0aCBkPSJNOSAyMWg2Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTIgM2MyIDIuNSA0IDUuMyA0IDhhNCA0IDAgMCAxLTggMGMwLTIuNyAyLTUuNSA0LTh6Ii8+CiAgPHBhdGggZD0iTTEyIDE1djYiLz4KICA8cGF0aCBkPSJNOSAyMWg2Ii8+Cjwvc3ZnPgo="); } .icon-pillar-transparency { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMiAxMnMzLjUtNi41IDEwLTYuNVMyMiAxMiAyMiAxMnMtMy41IDYuNS0xMCA2LjVTMiAxMiAyIDEyeiIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMiAxMnMzLjUtNi41IDEwLTYuNVMyMiAxMiAyMiAxMnMtMy41IDYuNS0xMCA2LjVTMiAxMiAyIDEyeiIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiLz4KPC9zdmc+Cg=="); } .icon-process-discover { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5Ii8+CiAgPHBhdGggZD0iTTE1IDlsLTQuNSAxLjVMOSAxNWw0LjUtMS41TDE1IDl6Ii8+Cjwvc3ZnPgo="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5Ii8+CiAgPHBhdGggZD0iTTE1IDlsLTQuNSAxLjVMOSAxNWw0LjUtMS41TDE1IDl6Ii8+Cjwvc3ZnPgo="); } .icon-process-impact { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5Ii8+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNSIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEiLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5Ii8+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNSIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEiLz4KPC9zdmc+Cg=="); } .icon-award { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjYiLz4KICA8cGF0aCBkPSJNOC41IDEzLjVMNyAyMmw1LTMgNSAzLTEuNS04LjUiLz4KPC9zdmc+Cg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjYiLz4KICA8cGF0aCBkPSJNOC41IDEzLjVMNyAyMmw1LTMgNSAzLTEuNS04LjUiLz4KPC9zdmc+Cg=="); } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Accessible skip link */ .skip-link { position: absolute; top: -50px; left: 1rem; background: var(--color-navy-900); color: var(--color-white); padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); z-index: 1000; transition: top var(--transition-fast); } .skip-link:focus { top: 1rem; } /* Visible focus states for keyboard users */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-gold-500); outline-offset: 3px; border-radius: 4px; } /* -------------------------------------------------------------------------- 3. LAYOUT UTILITIES -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: clamp(1.5rem, 5vw, 3rem); } section { position: relative; } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY HELPERS -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; color: var(--color-navy-900); } .eyebrow { display: block; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-500); margin-bottom: var(--space-sm); } .eyebrow.center { text-align: center; } .section-title { font-size: clamp(2rem, 3.2vw, 2.85rem); margin-bottom: var(--space-lg); } .section-title.center { text-align: center; } /* -------------------------------------------------------------------------- 5. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 0.95rem 2rem; border-radius: 999px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .btn-primary { position: relative; overflow: hidden; /* A true metallic gradient — champagne to brass to bronze — rather than a single flat gold fill. */ background: var(--gradient-metallic); background-size: 160% 160%; background-position: 0% 50%; color: var(--color-navy-950); box-shadow: var(--shadow-gold); transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-position 0.6s var(--ease-out); } /* A single light sheen that sweeps across the pill on hover — a quiet, premium touch rather than a playful one; it only ever plays once per hover, never loops. */ .btn-primary::before { content: ""; position: absolute; inset: 0; left: -60%; width: 40%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg); transition: left 0.85s var(--ease-out); pointer-events: none; } .btn-primary:hover::before { left: 130%; } .btn-primary:hover { /* Shifts the metallic gradient rather than swapping to a flat lighter fill — reads like brushed metal catching the light. */ background-position: 100% 50%; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(201, 164, 99, 0.4); } .btn-outline { border: 1.5px solid var(--color-navy-800); color: var(--color-navy-900); padding: 0.8rem 1.6rem; font-size: 0.9rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .btn-outline .icon { transition: transform var(--transition-fast); } .btn-outline:hover { background: var(--color-navy-900); border-color: var(--color-gold-500); color: var(--color-white); box-shadow: 0 14px 30px -10px rgba(201, 164, 99, 0.35); } .btn-outline:hover .icon { transform: translate(2px, -2px); } /* Light variant of .btn-outline for use on dark/navy backgrounds (e.g. the Resume CTA section), where the navy-bordered default would be invisible. */ .btn-outline-light { border: 1.5px solid rgba(255, 255, 255, 0.35); color: var(--color-white); padding: 0.8rem 1.6rem; font-size: 0.9rem; background: transparent; } .btn-outline-light .icon { transition: transform var(--transition-fast); color: var(--color-gold-400); } .btn-outline-light:hover { background: rgba(237, 220, 184, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: var(--color-gold-400); color: var(--color-gold-300); box-shadow: 0 0 24px rgba(201, 164, 99, 0.18); } .btn-outline-light:hover .icon { transform: translate(2px, -2px); } /* -------------------------------------------------------------------------- 6. HEADER / NAVIGATION Transparent over the hero; becomes a glass bar once scrolled (the "scrolled" class is toggled by js/script.js). -------------------------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 900; padding-block: var(--space-md); transition: padding var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), backdrop-filter var(--transition-fast); } .site-header.scrolled { padding-block: 0.9rem; background: rgba(12, 14, 30, 0.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--shadow-sm); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .brand { display: flex; align-items: center; gap: 0.65rem; } .brand-mark { width: 34px; height: 34px; } .brand-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--color-white); letter-spacing: 0.01em; } .brand-name em { font-style: normal; color: var(--color-gold-400); } .main-nav ul { display: flex; gap: var(--space-lg); } .main-nav a { position: relative; font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); padding-block: 0.3rem; transition: color var(--transition-fast); } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--color-gold-400); transition: width var(--transition-fast); } .main-nav a:hover { color: var(--color-white); } .main-nav a:hover::after { width: 100%; } .nav-toggle { display: none; position: relative; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--color-white); } .nav-toggle .icon { width: 22px; height: 22px; position: absolute; transition: opacity var(--transition-fast), transform var(--transition-fast); } .nav-toggle .icon-close { opacity: 0; transform: rotate(-45deg); } .nav-toggle[aria-expanded="true"] .icon-menu { opacity: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .icon-close { opacity: 1; transform: rotate(0deg); } .mobile-nav { display: none; max-height: 0; overflow: hidden; background: rgba(12, 14, 30, 0.96); backdrop-filter: blur(16px); transition: max-height var(--transition-med); } .mobile-nav.open { max-height: 320px; } .mobile-nav ul { display: flex; flex-direction: column; padding: var(--space-md) clamp(1.5rem, 5vw, 3rem) var(--space-lg); gap: var(--space-md); } .mobile-nav a { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-white); } /* -------------------------------------------------------------------------- 7. HERO SECTION -------------------------------------------------------------------------- */ .hero { height: 100vh; min-height: 640px; display: flex; align-items: center; overflow: hidden; background: var(--color-navy-950); } .hero-media { position: absolute; inset: 0; width: 100%; height: 112%; top: -6%; will-change: transform; } .hero-image { width: 100%; height: 100%; object-fit: cover; /* Real photograph is a crowd shot whose most important subjects (the GenZ'27 team in the front rows) sit in the lower-middle of the frame. Biasing object-position downward keeps them in view once the image is cropped to fill the viewport. Fine-tuned further per breakpoint below, since narrower viewports crop much more aggressively. */ object-position: center 62%; } .hero-overlay { position: absolute; inset: 0; /* Dark navy wash (~45% opacity) for text readability over a busy, colourful photograph, with a touch of extra depth on the left (behind the headline) and toward the bottom (into the scroll cue). */ background: linear-gradient(180deg, rgba(6, 6, 15, 0.5) 0%, rgba(6, 6, 15, 0.42) 45%, rgba(6, 6, 15, 0.62) 100%), linear-gradient(100deg, rgba(6, 6, 15, 0.18) 0%, rgba(6, 6, 15, 0) 45%); } .hero-content { position: relative; z-index: 2; max-width: 780px; } .hero-tagline { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; color: var(--color-gold-300); font-size: 0.98rem; font-weight: 500; letter-spacing: 0.02em; margin-block: var(--space-md) var(--space-lg); } .hero-tagline .dot { color: rgba(230, 205, 156, 0.5); } .hero-title { font-size: clamp(2.8rem, 7vw, 5.6rem); color: var(--color-white); margin-bottom: var(--space-sm); } .hero-subtitle { font-family: var(--font-body); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; color: rgba(255, 255, 255, 0.85); } .scroll-indicator { position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); z-index: 2; color: var(--color-white); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 50%; animation: bounce 2.4s var(--ease-out) infinite; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .scroll-indicator:hover { border-color: var(--color-gold-400); background: rgba(255, 255, 255, 0.08); } .scroll-indicator .icon { width: 18px; height: 18px; } @keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } } /* -------------------------------------------------------------------------- 8. MY STORY SECTION -------------------------------------------------------------------------- */ .story { padding-block: var(--space-2xl); /* Transparent so the fixed ambient blooms (body::before) read through instead of a flat fill. */ background: transparent; } /* Stacked layout: a wide editorial image "stage" on top, prose column below. Rebuilt around a landscape team photograph — the stage's aspect-ratio narrows at each breakpoint (wide on desktop, closer to the source photo's own ratio on mobile) so object-fit: contain never needs to crop a single person out, at any viewport. */ .story-grid { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); } .story-image-wrap { position: relative; width: 100%; aspect-ratio: 2 / 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-navy-950); display: flex; align-items: center; justify-content: center; } .story-image { /* Intentionally NOT object-fit: cover — the whole point of this stage is that the full team photo is always visible, uncropped and undistorted. contain scales the image to fit inside the stage on its shorter axis, leaving even, deliberate matting on the other axis (part of the design, not a layout bug). No hover-zoom either: any scale transform here would push people outside the frame. */ width: 100%; height: 100%; object-fit: contain; display: block; } .story-image-frame { position: absolute; inset: 16px; border: 1.5px solid rgba(247, 246, 242, 0.55); border-radius: calc(var(--radius-lg) - 10px); pointer-events: none; } .story-copy { max-width: 680px; margin-inline: auto; } .story-copy .eyebrow, .story-copy h2 { text-align: center; } .story-copy h2 { font-size: clamp(2.1rem, 3.6vw, 3rem); margin-bottom: var(--space-md); } .story-copy p { color: var(--color-ink-soft); font-size: 1.05rem; } .story-copy p + p { margin-top: var(--space-md); } /* -------------------------------------------------------------------------- 9. INTERNSHIP HIGHLIGHTS SECTION -------------------------------------------------------------------------- */ .highlights { padding-block: var(--space-2xl); /* A mesh of brass warmth and a whisper of cool blue-grey, over a subtle top-to-bottom depth gradient rather than one flat navy — this section's own identity within the shared midnight family. */ background: radial-gradient(circle at 15% 20%, rgba(201, 164, 99, 0.13), transparent 45%), radial-gradient(circle at 85% 15%, rgba(136, 145, 163, 0.08), transparent 40%), radial-gradient(circle at 85% 80%, rgba(201, 164, 99, 0.08), transparent 45%), linear-gradient(160deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%); } .highlights .eyebrow { color: var(--color-gold-400); } .highlights .section-title { color: var(--color-white); } .highlights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .highlight-card { position: relative; padding: var(--space-lg) var(--space-md); text-align: center; border-radius: var(--radius-md); /* Champagne-tinted glass rather than plain white glass — a warm frosted panel instead of a neutral one. */ background: linear-gradient(165deg, rgba(237, 220, 184, 0.07), rgba(237, 220, 184, 0.02)); border: 1px solid rgba(237, 220, 184, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform var(--transition-med), background-color var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med); } .highlight-card:hover { transform: translateY(-8px); background: linear-gradient(165deg, rgba(237, 220, 184, 0.11), rgba(237, 220, 184, 0.03)); border-color: rgba(201, 164, 99, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px -18px rgba(201, 164, 99, 0.35); } .highlight-number { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 700; color: var(--color-gold-400); line-height: 1; margin-bottom: 0.6rem; } .highlight-label { font-size: 1.05rem; font-weight: 600; color: var(--color-white); margin-bottom: 0.5rem; } .highlight-desc { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); line-height: 1.55; } /* -------------------------------------------------------------------------- 10. FEATURED PROJECTS SECTION -------------------------------------------------------------------------- */ .projects { padding-block: var(--space-2xl); /* Transparent so the fixed ambient blooms (body::before) read through instead of a flat fill. */ background: transparent; } .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .project-card { display: flex; flex-direction: column; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(201, 164, 99, 0.14); box-shadow: var(--shadow-sm); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .project-card:hover { transform: translateY(-10px); border-color: rgba(201, 164, 99, 0.4); /* Existing lift shadow plus a soft gold glow underneath — depth through light rather than a heavier drop shadow. */ box-shadow: var(--shadow-md), 0 30px 60px -20px rgba(201, 164, 99, 0.22); } /* Editorial "frame" treatment (redesign): the three source images are a tall portrait (0.75), a perfect square (1.0) and a near-square ad creative (1.15) — forcing all three into one 16:9 cover-crop made the portrait lose most of its subject and the square creatives lose their edges. Instead every image now sits at its own natural aspect ratio, fully visible (object-fit: contain, zero cropping), centred inside a fixed-height parchment "stage" with generous padding — like a print mounted on a mat board. The fixed stage height is what keeps all three cards the same height despite the images being completely different shapes; the mat colour reads as an intentional design choice rather than empty leftover space. */ .project-image-wrap { position: relative; height: 340px; padding: 2.25rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(165deg, var(--color-cream-100) 0%, #e2d3ae 100%); } /* A hairline inner border, inset from the padding, reinforces the "mounted print" feel — now a whisper of brass rather than plain ink, so the frame itself carries the metallic accent family. */ .project-image-wrap::after { content: ""; position: absolute; inset: var(--space-sm); border: 1px solid rgba(201, 164, 99, 0.22); border-radius: var(--radius-sm); pointer-events: none; } .project-image { position: relative; z-index: 1; max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 20px 45px rgba(12, 14, 30, 0.18), 0 4px 14px rgba(12, 14, 30, 0.1); transition: transform var(--transition-slow), filter 1.1s var(--ease-out); /* Soft focus-pull reveal: blurred until the card's fade-in triggers, then resolves to sharp alongside the existing opacity/translate reveal — a small cinematic touch on first scroll into view. */ filter: blur(14px); } .project-card.in-view .project-image { filter: blur(0); } /* One restrained hover zoom for every image now — contain means nothing is ever at risk of cropping out of frame, so the three cards no longer need different zoom ceilings per image. */ .project-card:hover .project-image { transform: scale(1.035); } .project-body { padding: var(--space-md) var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: 0.6rem; } .project-category { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-500); } .project-title { font-size: 1.5rem; } .project-desc { color: var(--color-ink-soft); font-size: 0.95rem; margin-bottom: 0.4rem; } .project-body .btn-outline { align-self: flex-start; margin-top: auto; } /* -------------------------------------------------------------------------- 9b. INTERNSHIP TIMELINE SECTION Editorial, alternating vertical timeline. The gold line grows and markers "pop" as each card is revealed — see js/script.js. Card fade/slide reuses the site-wide .fade-in/.in-view mechanism. Elevated to a cinematic, cardinal moment for the page: a deep navy canvas with slow-drifting gold glow blooms and a field of soft floating light particles (.timeline-ambient / .tl-particle, markup in index.html), all CSS-only keyframe animations so nothing here costs a JS frame. The cards themselves are untouched in content/typography — only the environment behind them changed, per the brief that the cards stay the primary focus. */ .timeline { position: relative; padding-block: var(--space-2xl); background: radial-gradient(ellipse 900px 500px at 18% -10%, rgba(201, 164, 99, 0.14), transparent 60%), radial-gradient(ellipse 800px 600px at 88% 110%, rgba(201, 164, 99, 0.1), transparent 58%), linear-gradient(180deg, var(--color-navy-950) 0%, var(--color-navy-900) 45%, var(--color-navy-950) 100%); overflow: hidden; isolation: isolate; } .timeline .eyebrow { color: var(--color-gold-400); } .timeline .section-title { color: var(--color-white); } /* Non-positioned elements paint below any positioned z-index:0 descendant regardless of DOM order, so .container needs an explicit stacking context here to guarantee it — and everything inside it, including the eyebrow/title above the track — renders above .timeline-ambient rather than beneath it. */ .timeline .container { position: relative; z-index: 1; } /* Decorative particle field — purely atmospheric, hidden from assistive tech, never intercepts clicks. Sits between the section background and the timeline content (z-index 0 vs. the track's z-index 1). */ .timeline-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .timeline-glow { position: absolute; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 164, 99, 0.16), transparent 70%); filter: blur(10px); animation: timeline-glow-drift 34s var(--ease-out) infinite alternate; } .timeline-glow--one { top: -12%; left: -10%; } .timeline-glow--two { bottom: -16%; right: -8%; animation-duration: 40s; animation-delay: -8s; background: radial-gradient(circle, rgba(217, 184, 118, 0.12), transparent 70%); } @keyframes timeline-glow-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(4%, 3%, 0) scale(1.12); } } .tl-particle { position: absolute; bottom: -4%; width: 4px; height: 4px; border-radius: 50%; background: var(--color-gold-300); box-shadow: 0 0 6px 1px rgba(230, 205, 156, 0.7); opacity: 0; animation: tl-particle-rise linear infinite; } @keyframes tl-particle-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 8% { opacity: 0.75; } 85% { opacity: 0.5; } 100% { opacity: 0; transform: translate3d(var(--drift, 20px), -112vh, 0); } } /* 18 particles, each given its own lane / timing / size via nth-child so the field reads as organic rather than a repeating tile. Values are hand-picked, not random, so the layout never shifts between loads. */ .tl-particle:nth-child(1) { left: 4%; width: 3px; height: 3px; --drift: 24px; animation-duration: 19s; animation-delay: -1s; } .tl-particle:nth-child(2) { left: 11%; width: 5px; height: 5px; --drift: -18px; animation-duration: 24s; animation-delay: -6s; } .tl-particle:nth-child(3) { left: 18%; width: 3px; height: 3px; --drift: 14px; animation-duration: 17s; animation-delay: -11s; } .tl-particle:nth-child(4) { left: 25%; width: 4px; height: 4px; --drift: -22px; animation-duration: 22s; animation-delay: -3s; } .tl-particle:nth-child(5) { left: 32%; width: 3px; height: 3px; --drift: 10px; animation-duration: 20s; animation-delay: -14s; } .tl-particle:nth-child(6) { left: 40%; width: 6px; height: 6px; --drift: -12px; animation-duration: 27s; animation-delay: -8s; } .tl-particle:nth-child(7) { left: 47%; width: 3px; height: 3px; --drift: 20px; animation-duration: 18s; animation-delay: -16s; } .tl-particle:nth-child(8) { left: 54%; width: 4px; height: 4px; --drift: -16px; animation-duration: 23s; animation-delay: -4s; } .tl-particle:nth-child(9) { left: 61%; width: 3px; height: 3px; --drift: 12px; animation-duration: 21s; animation-delay: -18s; } .tl-particle:nth-child(10) { left: 68%; width: 5px; height: 5px; --drift: -24px; animation-duration: 26s; animation-delay: -9s; } .tl-particle:nth-child(11) { left: 75%; width: 3px; height: 3px; --drift: 16px; animation-duration: 19s; animation-delay: -2s; } .tl-particle:nth-child(12) { left: 82%; width: 4px; height: 4px; --drift: -10px; animation-duration: 25s; animation-delay: -13s; } .tl-particle:nth-child(13) { left: 89%; width: 3px; height: 3px; --drift: 18px; animation-duration: 20s; animation-delay: -7s; } .tl-particle:nth-child(14) { left: 96%; width: 5px; height: 5px; --drift: -14px; animation-duration: 24s; animation-delay: -19s; } .tl-particle:nth-child(15) { left: 7%; width: 4px; height: 4px; --drift: -20px; animation-duration: 28s; animation-delay: -21s; } .tl-particle:nth-child(16) { left: 35%; width: 3px; height: 3px; --drift: 8px; animation-duration: 16s; animation-delay: -10s; } .tl-particle:nth-child(17) { left: 58%; width: 3px; height: 3px; --drift: -8px; animation-duration: 22s; animation-delay: -15s; } .tl-particle:nth-child(18) { left: 92%; width: 4px; height: 4px; --drift: 22px; animation-duration: 18s; animation-delay: -5s; } .timeline-intro { position: relative; z-index: 1; max-width: 560px; margin: 0 auto var(--space-2xl); text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 1.02rem; } .timeline-track { position: relative; z-index: 1; max-width: 920px; margin-inline: auto; } .timeline-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(255, 255, 255, 0.14); border-radius: 999px; overflow: hidden; } .timeline-line-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--color-gold-500), var(--color-gold-300)); transition: height 0.8s var(--ease-out); } .timeline-list { position: relative; display: flex; flex-direction: column; gap: var(--space-xl); } .timeline-item { position: relative; display: flex; width: 100%; min-height: 40px; } .timeline-marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); width: 16px; height: 16px; border-radius: 50%; background: var(--color-gold-500); border: 3px solid var(--color-navy-950); box-shadow: 0 0 0 4px rgba(201, 164, 99, 0.22); z-index: 2; transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); } .timeline-item.in-view .timeline-marker { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 6px rgba(201, 164, 99, 0.28), 0 0 30px rgba(201, 164, 99, 0.55); } .timeline-card { position: relative; width: 44%; padding: var(--space-md) var(--space-lg); background: var(--color-white); border-radius: var(--radius-md); /* A thin champagne outline instead of a neutral border — these cards float on the cinematic navy canvas, so the edge itself should read as part of the metallic accent family. */ border: 1px solid rgba(201, 164, 99, 0.18); box-shadow: var(--shadow-md); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .timeline-card:hover { transform: translateY(-6px); border-color: rgba(201, 164, 99, 0.4); box-shadow: var(--shadow-md), 0 0 42px rgba(201, 164, 99, 0.28); } .timeline-item:nth-child(even) .timeline-card { margin-left: auto; } .timeline-week { display: block; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-500); margin-bottom: 0.6rem; } .timeline-desc { color: var(--color-ink-soft); font-size: 0.98rem; line-height: 1.6; } /* -------------------------------------------------------------------------- 10a. SKILLS SECTION — recruiter-focused proficiency bars Navy band (matches the Highlights treatment) so the gold bar fills read clearly. Bars animate via the existing .fade-in/.in-view scroll observer; percentages count up via js/script.js. -------------------------------------------------------------------------- */ .skills { padding-block: var(--space-2xl); /* Warmer bronze/copper undertone (vs. Highlights' brass + blue-grey mesh) — its own identity within the same midnight family. */ background: radial-gradient(circle at 88% 12%, rgba(201, 164, 99, 0.11), transparent 45%), radial-gradient(circle at 8% 90%, rgba(173, 107, 69, 0.1), transparent 48%), linear-gradient(200deg, var(--color-navy-900) 0%, var(--color-navy-950) 100%); } .skills .eyebrow { color: var(--color-gold-400); } .skills .section-title { color: var(--color-white); margin-bottom: var(--space-md); } .skills-intro { max-width: 560px; margin: 0 auto var(--space-lg); text-align: center; color: rgba(255, 255, 255, 0.65); font-size: 1.02rem; } .skills-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-xl); max-width: 980px; margin-inline: auto; } .skill-row-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.65rem; } .skill-name { font-weight: 600; font-size: 1.02rem; color: var(--color-white); letter-spacing: 0.01em; } .skill-percent { font-weight: 700; font-size: 0.92rem; color: var(--color-gold-400); font-variant-numeric: tabular-nums; } .skill-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .skill-bar-fill { position: absolute; inset: 0; display: block; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--color-gold-500), var(--color-gold-300)); transition: width 1.1s var(--ease-out); } .skill-row.in-view .skill-bar-fill { width: var(--fill); } /* -------------------------------------------------------------------------- 10b. GALLERY SECTION + LIGHTBOX A Pinterest-style masonry grid (CSS multi-column) of behind-the-scenes photography, opening into a full-screen lightbox with keyboard and click navigation (see js/script.js). -------------------------------------------------------------------------- */ .gallery { padding-block: var(--space-2xl); /* Transparent so the fixed ambient blooms (body::before) read through instead of a flat fill. */ background: transparent; } .gallery-grid { columns: 3; column-gap: var(--space-md); } .gallery-item { display: block; width: 100%; margin-bottom: var(--space-md); break-inside: avoid; position: relative; border: none; padding: 0; background: none; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; /* A hairline champagne ring (inset shadow, since the button reset above needs border: none) rather than a plain drop shadow only. */ box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(201, 164, 99, 0.12); transition: transform var(--transition-med), box-shadow var(--transition-med); } .gallery-item img { width: 100%; display: block; transition: transform 0.8s var(--ease-out), filter 1.1s var(--ease-out); /* Same soft focus-pull reveal used on the project images. */ filter: blur(12px); } .gallery-item.in-view img { filter: blur(0); } .gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 6, 15, 0) 55%, rgba(6, 6, 15, 0.55) 100%); opacity: 0; transition: opacity var(--transition-fast); } .gallery-item:hover, .gallery-item:focus-visible { transform: translateY(-6px); /* Same lift shadow plus a soft gold glow used across the other card types on the page, for a consistent sense of depth. */ box-shadow: var(--shadow-md), 0 26px 50px -18px rgba(201, 164, 99, 0.24), inset 0 0 0 1px rgba(201, 164, 99, 0.3); } .gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.07); } .gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; } /* Stagger the gallery fade-in slightly, matching the highlight/project grids */ .gallery-grid .gallery-item:nth-child(2) { transition-delay: 0.06s; } .gallery-grid .gallery-item:nth-child(3) { transition-delay: 0.12s; } .gallery-grid .gallery-item:nth-child(4) { transition-delay: 0.18s; } .gallery-grid .gallery-item:nth-child(5) { transition-delay: 0.24s; } .gallery-grid .gallery-item:nth-child(6) { transition-delay: 0.3s; } .gallery-grid .gallery-item:nth-child(7) { transition-delay: 0.36s; } .gallery-grid .gallery-item:nth-child(8) { transition-delay: 0.42s; } /* Lightbox overlay */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(6, 6, 15, 0.92); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--transition-med), visibility var(--transition-med); } .lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; } .lightbox-figure { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); max-width: 90vw; transform: scale(0.96); transition: transform var(--transition-med); } .lightbox.open .lightbox-figure { transform: scale(1); } .lightbox-image { max-width: min(86vw, 1100px); max-height: 78vh; border-radius: var(--radius-md); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .lightbox-caption { color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; } .lightbox-close, .lightbox-nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--color-white); transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .lightbox-close .icon, .lightbox-nav .icon { width: 20px; height: 20px; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(201, 164, 99, 0.25); border-color: var(--color-gold-400); } .lightbox-close { top: var(--space-lg); right: var(--space-lg); } .lightbox-nav { top: 50%; transform: translateY(-50%); } .lightbox-nav:hover { transform: translateY(-50%) scale(1.08); } .lightbox-prev { left: clamp(0.75rem, 4vw, var(--space-lg)); } .lightbox-next { right: clamp(0.75rem, 4vw, var(--space-lg)); } /* -------------------------------------------------------------------------- 10bb. KEY LEARNINGS SECTION Five reflective glass cards on navy — 2 cards in row one, 3 in row two, via a 6-column grid with column spans (no reordering needed at mobile, where every span collapses to a single column). -------------------------------------------------------------------------- */ .learnings { padding-block: var(--space-2xl); /* Deep graphite rather than navy — a warm near-black instead of a blue one, so this section reads distinctly from Highlights/Skills while staying in the same premium dark family. */ background: radial-gradient(circle at 12% 15%, rgba(201, 164, 99, 0.11), transparent 45%), radial-gradient(circle at 90% 80%, rgba(173, 107, 69, 0.09), transparent 48%), linear-gradient(170deg, var(--color-graphite-900) 0%, var(--color-navy-950) 100%); } .learnings .eyebrow { color: var(--color-gold-400); } .learnings .section-title { color: var(--color-white); } .learnings-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-lg); max-width: 1080px; margin-inline: auto; } .learning-card:nth-child(1), .learning-card:nth-child(2) { grid-column: span 3; } .learning-card:nth-child(3), .learning-card:nth-child(4), .learning-card:nth-child(5) { grid-column: span 2; } .learning-card { padding: var(--space-lg) var(--space-md); border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(237, 220, 184, 0.07), rgba(237, 220, 184, 0.02)); border: 1px solid rgba(237, 220, 184, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform var(--transition-med), background-color var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med); } .learning-card:hover { transform: translateY(-8px); background: linear-gradient(165deg, rgba(237, 220, 184, 0.1), rgba(237, 220, 184, 0.03)); border-color: rgba(201, 164, 99, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px -18px rgba(201, 164, 99, 0.3); } .learning-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: var(--space-sm); border-radius: 50%; background: linear-gradient(165deg, rgba(201, 164, 99, 0.18), rgba(201, 164, 99, 0.04)); border: 1px solid rgba(201, 164, 99, 0.35); color: var(--color-gold-400); transition: transform var(--transition-fast), border-color var(--transition-fast); } .learning-icon .icon { width: 20px; height: 20px; } .learning-card:hover .learning-icon { transform: scale(1.08); border-color: var(--color-gold-500); } .learning-heading { font-size: 1.1rem; color: var(--color-white); margin-bottom: 0.6rem; } .learning-text { font-style: italic; color: rgba(255, 255, 255, 0.68); font-size: 0.96rem; line-height: 1.65; } /* -------------------------------------------------------------------------- 10bc. CERTIFICATE OF RECOGNITION SECTION Sits between Key Learnings and the closing Resume CTA — same navy/ gold "closing sequence" family as both neighbours. The certificate itself sits in a glass card (the same tinted-champagne, blurred panel recipe as .learning-card / .resume-cta-panel, just with its own padding), so nothing here is a new visual language — it's the existing one applied to a new artefact. Preview opens a dedicated lightbox (below) rather than the gallery's, since that one's JS iterates a fixed .gallery-item slide list and has no single-image mode. -------------------------------------------------------------------------- */ .certificate { padding-block: var(--space-2xl); background: radial-gradient(circle at 15% 20%, rgba(201, 164, 99, 0.1), transparent 45%), radial-gradient(circle at 85% 75%, rgba(201, 164, 99, 0.08), transparent 48%), linear-gradient(180deg, var(--color-navy-900), var(--color-navy-950)); } .certificate .eyebrow { color: var(--color-gold-400); } .certificate .section-title { display: flex; align-items: center; justify-content: center; gap: 0.65rem; color: var(--color-white); } .certificate-title-icon { width: 0.82em; height: 0.82em; color: var(--color-gold-400); } .certificate-intro { max-width: 620px; margin: 0 auto var(--space-lg); text-align: center; color: rgba(255, 255, 255, 0.68); font-size: 1.02rem; line-height: 1.7; } .certificate-card { max-width: 760px; margin: 0 auto var(--space-md); padding: clamp(1.25rem, 3.4vw, 2.25rem); border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(237, 220, 184, 0.09), rgba(237, 220, 184, 0.02)); border: 1px solid rgba(237, 220, 184, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.07); text-align: center; } .certificate-preview { position: relative; display: block; width: 100%; border: none; padding: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55); } .certificate-image { display: block; width: 100%; height: auto; border-radius: var(--radius-md); transition: transform var(--transition-med); } .certificate-preview:hover .certificate-image, .certificate-preview:focus-visible .certificate-image { transform: scale(1.015); } .certificate-preview:focus-visible { outline: 2px solid var(--color-gold-400); outline-offset: 4px; } .certificate-expand-hint { position: absolute; right: var(--space-sm); bottom: var(--space-sm); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: 999px; background: rgba(6, 6, 15, 0.72); color: var(--color-white); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; opacity: 0; transform: translateY(6px); transition: opacity var(--transition-fast), transform var(--transition-fast); pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .certificate-expand-hint .icon { width: 14px; height: 14px; color: var(--color-gold-400); } .certificate-preview:hover .certificate-expand-hint, .certificate-preview:focus-visible .certificate-expand-hint { opacity: 1; transform: translateY(0); } .certificate-caption { margin-top: var(--space-sm); font-size: 0.85rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.55); } .certificate-actions { display: flex; justify-content: center; } @media (max-width: 640px) { .certificate-expand-hint span:last-child { display: none; } } /* -------------------------------------------------------------------------- 10c. RESUME CTA SECTION Large closing panel before the footer — glass card on a navy gradient, echoing the Skills/Highlights treatment so the site ends on the same premium note it opened with. -------------------------------------------------------------------------- */ .resume-cta { padding-block: var(--space-2xl); background: linear-gradient(180deg, var(--color-navy-900), var(--color-navy-950)); position: relative; overflow: hidden; } .resume-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(201, 164, 99, 0.12), transparent 45%), radial-gradient(circle at 80% 85%, rgba(201, 164, 99, 0.1), transparent 45%); pointer-events: none; } .resume-cta-panel { position: relative; max-width: 760px; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem); text-align: center; border-radius: var(--radius-lg); background: linear-gradient(165deg, rgba(237, 220, 184, 0.075), rgba(237, 220, 184, 0.02)); border: 1px solid rgba(237, 220, 184, 0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .resume-cta-title { font-size: clamp(2rem, 4vw, 2.85rem); color: var(--color-white); margin-bottom: var(--space-lg); } .resume-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); } /* -------------------------------------------------------------------------- 11. FOOTER -------------------------------------------------------------------------- */ .site-footer { background: var(--color-navy-950); color: rgba(255, 255, 255, 0.75); padding-block: var(--space-xl) var(--space-lg); } .footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); } .footer-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); color: var(--color-white); font-size: 1.05rem; } .footer-links { display: flex; gap: var(--space-lg); flex-wrap: wrap; justify-content: center; } .footer-links a { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); transition: color var(--transition-fast), transform var(--transition-fast); } .footer-links .icon { width: 18px; height: 18px; color: var(--color-gold-400); } .footer-links a:hover { color: var(--color-gold-400); transform: translateY(-2px); } .footer-copy { font-size: 0.82rem; color: rgba(255, 255, 255, 0.4); margin-top: var(--space-sm); } /* -------------------------------------------------------------------------- 12. SCROLL ANIMATIONS (fade-in) Elements start slightly translated + transparent; script.js adds the "in-view" class via IntersectionObserver to trigger the transition. -------------------------------------------------------------------------- */ .fade-in { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); } .fade-in.in-view { opacity: 1; transform: translateY(0); } /* Stagger children of the highlight / project grids slightly */ .highlights-grid .highlight-card:nth-child(2) { transition-delay: 0.08s; } .highlights-grid .highlight-card:nth-child(3) { transition-delay: 0.16s; } .highlights-grid .highlight-card:nth-child(4) { transition-delay: 0.24s; } .projects-grid .project-card:nth-child(2) { transition-delay: 0.1s; } .projects-grid .project-card:nth-child(3) { transition-delay: 0.2s; } /* -------------------------------------------------------------------------- 13. RESPONSIVE BREAKPOINTS -------------------------------------------------------------------------- */ /* Tablet */ @media (max-width: 1024px) { /* Slightly less wide than the desktop 2:1 stage — still landscape, still zero cropping (object-fit: contain), just a touch taller so the team reads clearly at tablet width. */ .story-image-wrap { aspect-ratio: 16 / 10; } .highlights-grid { grid-template-columns: repeat(2, 1fr); } .projects-grid { grid-template-columns: repeat(2, 1fr); } .project-image-wrap { height: 300px; padding: 2rem; } .gallery-grid { columns: 2; } /* Learnings: the 6-column span layout gets cramped before mobile; drop to a plain 2-up wrap (2 / 2 / 1) at tablet widths. */ .learnings-grid { grid-template-columns: repeat(2, 1fr); } .learning-card:nth-child(1), .learning-card:nth-child(2), .learning-card:nth-child(3), .learning-card:nth-child(4), .learning-card:nth-child(5) { grid-column: span 1; } /* Timeline collapses to a single left-aligned column — the alternating layout needs more breathing room than tablet gives it. */ .timeline-line { left: 20px; transform: none; } .timeline-marker { left: 20px; } .timeline-card, .timeline-item:nth-child(even) .timeline-card { width: 100%; margin-left: 52px; margin-right: 0; } /* Portrait/tablet viewports crop the hero photo's sides more heavily; bias further toward the bottom-centre group so faces stay in frame. */ .hero-image { object-position: center 68%; } } /* Mobile nav breakpoint */ @media (max-width: 860px) { .main-nav { display: none; } .nav-toggle { display: flex; } .mobile-nav { display: block; } } /* Mobile */ @media (max-width: 640px) { :root { --space-2xl: 5rem; --space-xl: 3.5rem; } .hero-title { font-size: clamp(2.3rem, 11vw, 3.2rem); } .hero-tagline { font-size: 0.85rem; } /* Narrow portrait screens crop most of the photo's width away; keep the centred, front-row subjects (and away from the very top banner). */ .hero-image { object-position: center 72%; } /* Close to the team photo's own ~4:3 ratio, so on small screens the stage sits almost flush against the image — no wasted letterbox space, everyone still fully visible via object-fit: contain. */ .story-image-wrap { aspect-ratio: 4 / 3; } .highlights-grid { grid-template-columns: 1fr; } .projects-grid { grid-template-columns: 1fr; } .project-image-wrap { height: 280px; padding: 1.5rem; } .gallery-grid { columns: 1; } .skills-list { grid-template-columns: 1fr; gap: var(--space-lg); } .learnings-grid { grid-template-columns: 1fr; } .timeline-line, .timeline-marker { left: 12px; } .timeline-card { padding: var(--space-md); margin-left: 38px; } .lightbox-nav { width: 40px; height: 40px; } .lightbox-close { top: var(--space-md); right: var(--space-md); } .footer-links { gap: var(--space-md); } } /* ========================================================================== 14. PROJECTS PAGE (projects.html) Case-study detail page: page intro band, per-project hero banner, meta grid, stat cards, data tables, pillar/concept/dealer card grids and a pull-quote — all built from the same design tokens as the homepage so the page reads as one continuous site rather than a bolted-on template. ========================================================================== */ /* --- Page intro band (navy, matches Highlights/Skills treatment) --- */ .page-intro { padding-block: calc(var(--space-2xl) + 3rem) var(--space-2xl); background: var(--color-navy-900); background-image: radial-gradient(circle at 15% 20%, rgba(201, 164, 99, 0.12), transparent 45%), radial-gradient(circle at 85% 80%, rgba(201, 164, 99, 0.08), transparent 45%); text-align: center; } .page-intro .eyebrow { color: var(--color-gold-400); } .page-title { font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--color-white); margin-bottom: var(--space-md); } .page-intro-text { max-width: 680px; margin-inline: auto; color: rgba(255, 255, 255, 0.7); font-size: 1.05rem; line-height: 1.7; } .case-jumpnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: var(--space-lg); } .case-jumpnav a { display: inline-flex; align-items: center; padding: 0.65rem 1.4rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.22); color: var(--color-white); font-size: 0.88rem; font-weight: 600; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); } .case-jumpnav a:hover { border-color: var(--color-gold-400); background: rgba(201, 164, 99, 0.12); color: var(--color-gold-300); } /* --- Case study wrapper --- */ .case-study { background: var(--color-off-white); } .case-study-alt { background: var(--color-white); } /* --- Per-project hero banner --- */ .case-hero { position: relative; height: clamp(340px, 46vw, 480px); display: flex; align-items: flex-end; overflow: hidden; background: var(--color-navy-950); } .case-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } /* Sakarni's hero photo is a near-square product/brand poster rather than a wide candid shot — biasing the crop toward its lower portion keeps the product range in frame instead of the mostly-empty space above the logo. Scoped to this one image only. */ .case-study#sakarni .case-hero-image { object-position: center 50%; } .case-hero-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(6, 6, 15, 0.55), rgba(6, 6, 15, 0.55)), linear-gradient(180deg, rgba(6, 6, 15, 0.55) 0%, rgba(6, 6, 15, 0.5) 55%, rgba(6, 6, 15, 0.92) 100%), linear-gradient(100deg, rgba(6, 6, 15, 0.35) 0%, rgba(6, 6, 15, 0) 55%); } /* JK Tyre's hero photo places its human subject on the left, exactly where the diagonal + flat scrim layers above are darkest (tuned for the other two heroes' text-only left edge). Lightening this page's overlay keeps him visible while the bottom-loaded vertical gradient still protects heading/subtitle legibility. Scoped to this one hero only. */ .case-study#jk-tyre .case-hero-overlay { background: linear-gradient(rgba(6, 6, 15, 0.28), rgba(6, 6, 15, 0.28)), linear-gradient(180deg, rgba(6, 6, 15, 0.4) 0%, rgba(6, 6, 15, 0.45) 55%, rgba(6, 6, 15, 0.92) 100%), linear-gradient(100deg, rgba(6, 6, 15, 0.16) 0%, rgba(6, 6, 15, 0) 55%); } .case-hero-content { position: relative; z-index: 2; padding-block-end: var(--space-lg); } .case-category { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-400); margin-bottom: 0.6rem; } .case-title { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--color-white); margin-bottom: 0.5rem; } .case-subtitle { font-family: var(--font-body); font-size: clamp(0.98rem, 1.6vw, 1.15rem); font-weight: 400; color: rgba(255, 255, 255, 0.82); max-width: 640px; } /* --- Case study body --- */ .case-body { padding-block: var(--space-2xl); } .case-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); padding: var(--space-lg); margin-bottom: var(--space-2xl); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .case-study-alt .case-meta-grid { background: var(--color-off-white); } .case-meta-item { display: flex; flex-direction: column; gap: 0.35rem; } .case-meta-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-500); } .case-meta-value { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.5; } .case-block { max-width: 860px; margin: 0 auto var(--space-2xl); } .case-block h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: var(--space-md); } .case-block p { color: var(--color-ink-soft); font-size: 1.02rem; line-height: 1.75; max-width: 68ch; } .case-block p + p { margin-top: var(--space-md); } /* Editorial "lead" treatment — the opening statement of The Brief, set larger and in the display face so it reads as a headline the rest of the paragraph supports, rather than one more line of body copy. Same words as before, just given editorial weight. */ .case-lead { font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.7rem) !important; line-height: 1.45 !important; color: var(--color-navy-900) !important; max-width: 46ch !important; } .case-block .table-wrap, .case-block .pillar-grid, .case-block .concept-grid, .case-block .pull-quote, .case-block .pillar-taglist { margin-top: var(--space-lg); } /* --- Stat grid (compact highlight cards on a light background) --- */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); max-width: 1080px; margin: 0 auto var(--space-2xl); } .stat-card { padding: var(--space-lg) var(--space-md); text-align: center; border-radius: var(--radius-md); background: var(--color-navy-900); background-image: radial-gradient(circle at 20% 15%, rgba(201, 164, 99, 0.14), transparent 55%); border: 1px solid rgba(201, 164, 99, 0.2); transition: transform var(--transition-med), border-color var(--transition-med); } .stat-card:hover { transform: translateY(-6px); border-color: rgba(201, 164, 99, 0.5); } .stat-number { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; color: var(--color-gold-400); line-height: 1; margin-bottom: 0.65rem; } .stat-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.68); line-height: 1.5; } /* --- Data tables --- */ .table-wrap { max-width: 860px; margin-inline: auto; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); } .data-table { width: 100%; min-width: 480px; border-collapse: collapse; background: var(--color-white); font-size: 0.9rem; } .data-table caption { caption-side: top; text-align: left; padding: 0.9rem 1.1rem; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold-500); background: var(--color-off-white); border-bottom: 1px solid var(--color-border); } .data-table th, .data-table td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--color-border); } .data-table th { font-weight: 700; color: var(--color-navy-900); background: rgba(201, 164, 99, 0.08); } .data-table td { color: var(--color-ink-soft); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover td { background: rgba(201, 164, 99, 0.05); } /* --- Pull quote --- */ .pull-quote { max-width: 700px; margin-inline: auto; padding: var(--space-lg) var(--space-lg); border-left: 3px solid var(--color-gold-500); background: rgba(201, 164, 99, 0.06); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.65; color: var(--color-navy-900); } /* --- Pillar cards (five-pillar architecture / content pillars) --- */ .pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .pillar-card { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform var(--transition-med), box-shadow var(--transition-med); } .case-study-alt .pillar-card { background: var(--color-off-white); } .pillar-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .pillar-icon { display: block; font-size: 1.7rem; margin-bottom: 0.7rem; } .pillar-card h4 { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-navy-900); margin-bottom: 0.5rem; } .pillar-card p { font-size: 0.88rem; color: var(--color-ink-soft); line-height: 1.55; } .pillar-taglist { max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.75rem; } .pillar-taglist li { position: relative; padding-left: 1.4rem; font-size: 0.96rem; color: var(--color-ink-soft); line-height: 1.55; } .pillar-taglist li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-gold-500); } /* --- Concept cards (creative deliverables / reel concepts) --- */ .concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .concept-card { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform var(--transition-med), box-shadow var(--transition-med); } .case-study-alt .concept-card { background: var(--color-off-white); } .concept-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .concept-card h4 { font-family: var(--font-display); font-size: 1.08rem; color: var(--color-navy-900); margin-bottom: 0.55rem; } .concept-card p { font-size: 0.88rem; color: var(--color-ink-soft); line-height: 1.55; } .concept-card p + p { margin-top: 0.55rem; } .concept-hook { font-style: italic; color: var(--color-gold-500) !important; } /* --- Dealer story cards (JK Tyre) --- */ .dealer-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); max-width: 1080px; margin: 0 auto var(--space-2xl); } .dealer-card { position: relative; z-index: 1; padding: var(--space-lg) var(--space-md); border-radius: var(--radius-md); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); text-align: center; transition: transform var(--transition-med), box-shadow var(--transition-med); } .dealer-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .dealer-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 0.85rem; border-radius: 50%; background: linear-gradient(165deg, rgba(201, 164, 99, 0.12), rgba(201, 164, 99, 0.03)); border: 1px solid rgba(201, 164, 99, 0.28); color: var(--color-gold-500); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .dealer-icon .icon { width: 22px; height: 22px; } .dealer-card:hover .dealer-icon { transform: scale(1.08); border-color: var(--color-gold-500); box-shadow: 0 10px 22px -8px rgba(201, 164, 99, 0.4); } .dealer-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-navy-900); margin-bottom: 0.2rem; } .dealer-context { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gold-500); margin-bottom: 0.9rem; } .dealer-theme { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.55; margin-bottom: 0.9rem; } .dealer-line { font-family: var(--font-display); font-style: italic; font-size: 1.12rem; line-height: 1.5; color: var(--color-gold-500); padding-top: 0.9rem; border-top: 1px solid var(--color-border); } /* --- Outcome panel (closes each case study) --- */ .case-outcome { max-width: 860px; margin: 0 auto; padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-navy-900); background-image: radial-gradient(circle at 85% 20%, rgba(201, 164, 99, 0.14), transparent 50%); text-align: center; } .case-outcome h3 { color: var(--color-white); margin-bottom: var(--space-sm); } .case-outcome p { color: rgba(255, 255, 255, 0.75); font-size: 1rem; line-height: 1.7; max-width: 62ch; margin-inline: auto; } /* --- Projects page responsive breakpoints --- */ @media (max-width: 1024px) { .case-meta-grid { grid-template-columns: repeat(2, 1fr); } .stat-grid { grid-template-columns: repeat(2, 1fr); } .pillar-grid, .concept-grid, .dealer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .case-meta-grid { grid-template-columns: 1fr; } .stat-grid { grid-template-columns: 1fr; } .pillar-grid, .concept-grid, .dealer-grid { grid-template-columns: 1fr; } .case-hero { height: auto; min-height: clamp(300px, 60vw, 400px); } .case-hero-content { padding-block-start: 4.5rem; } .pull-quote { padding: var(--space-md); font-size: 1rem; } } /* ========================================================================== 15. PROJECTS DASHBOARD (projects.html rebuild) The dashboard's own sections — a large horizontal Featured Project card, a condensed Other Projects grid, a "skills applied" flow diagram, and a condensed reuse of the homepage Timeline. Built entirely from existing tokens/components (.project-image-wrap, .project-card, .timeline, .resume-cta) so the page reads as part of the same site rather than a bolted-on template. ========================================================================== */ /* --- Wrapper for the Featured Project + Other Projects sections --- Transparent, matching the homepage's .projects treatment, so the fixed ambient mesh-gradient background (body::before) reads through both light sections without a hard seam between them. */ .dashboard-projects { padding-block: var(--space-2xl); background: transparent; } .dashboard-projects--alt { padding-top: 0; } /* --- Featured Project (Raja Warring) — large horizontal card --- */ .featured-card { display: flex; align-items: stretch; max-width: 1080px; margin-inline: auto; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(201, 164, 99, 0.16); box-shadow: var(--shadow-md); position: relative; transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } /* A soft gold glow that fades in behind the card on hover, rather than an always-on animated border — premium without costing a frame while idle. */ .featured-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gradient-metallic); opacity: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: opacity var(--transition-med); } .featured-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md), 0 34px 70px -22px rgba(201, 164, 99, 0.32); } .featured-card:hover::before { opacity: 1; } .featured-media { flex: 0 0 44%; height: auto; min-height: 480px; padding: 2.75rem; } .featured-card:hover .project-image { transform: scale(1.035); } /* The blur-reveal rule elsewhere is scoped to .project-card.in-view — the featured card uses its own wrapper class, so it needs its own matching rule to ever resolve to sharp. */ .featured-card.in-view .project-image { filter: blur(0); } .featured-body { flex: 1 1 56%; display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(2rem, 4vw, 3.25rem); } .featured-title { font-size: clamp(1.9rem, 3vw, 2.4rem); } .featured-desc { color: var(--color-ink-soft); font-size: 1.02rem; line-height: 1.7; } .featured-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); padding: var(--space-md) 0; margin: 0.4rem 0 0.6rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .featured-meta-item { display: flex; flex-direction: column; gap: 0.3rem; } .featured-cta { align-self: flex-start; margin-top: 0.4rem; } /* --- Other Projects — reuses .project-card, just a 2-up grid --- */ .other-projects-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-inline: auto; } /* Enriched meta row for the JK Tyre / Sakarni cards — same Role / Deliverables detail the featured Raja Warring card shows, scaled down to fit the compact grid card. Reuses .case-meta-label / .case-meta-value (already standalone classes, not scoped to a parent) so no new text styling is needed, just the layout. */ .project-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); padding-block: 0.85rem; margin: 0.15rem 0 0.3rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .project-meta-item { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 45%; } .project-meta-row .case-meta-value { font-size: 0.85rem; } /* --- Skills Applied — flow diagram --- */ .skills-flow { padding-block: var(--space-2xl); /* Graphite rather than navy, so this dark section reads distinctly from the Timeline Overview immediately below it. */ background: radial-gradient(circle at 10% 12%, rgba(201, 164, 99, 0.11), transparent 45%), radial-gradient(circle at 92% 85%, rgba(173, 107, 69, 0.1), transparent 48%), linear-gradient(170deg, var(--color-graphite-900) 0%, var(--color-navy-950) 100%); } .skills-flow .eyebrow { color: var(--color-gold-400); } .skills-flow .section-title { color: var(--color-white); margin-bottom: var(--space-md); } .skills-flow .skills-intro { margin-bottom: var(--space-2xl); } .flow-board { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 1080px; margin-inline: auto; } .flow-row { display: flex; flex-direction: column; gap: 0.85rem; } .flow-row-label { display: inline-block; align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy-950); background: var(--gradient-metallic); padding: 0.4rem 0.9rem; border-radius: 999px; } .flow-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.15rem; } .flow-node { display: inline-flex; align-items: center; font-size: 0.88rem; font-weight: 600; color: var(--color-white); padding: 0.75rem 1.2rem; border-radius: var(--radius-sm); background: linear-gradient(165deg, rgba(237, 220, 184, 0.08), rgba(237, 220, 184, 0.02)); border: 1px solid rgba(237, 220, 184, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); } .flow-node:hover { transform: translateY(-3px); border-color: rgba(201, 164, 99, 0.55); box-shadow: 0 14px 30px -12px rgba(201, 164, 99, 0.4); } .flow-node--result { color: var(--color-navy-950); background: var(--gradient-metallic); border-color: transparent; font-weight: 700; } .flow-arrow { width: 0.85em; height: 0.85em; color: var(--color-gold-500); opacity: 0.75; flex-shrink: 0; margin-inline: 0.1rem; } /* --- Closing CTA subtitle (added to .resume-cta-panel on this page) --- */ .resume-cta-text { color: rgba(255, 255, 255, 0.68); font-size: 1.02rem; margin: -1.75rem 0 var(--space-lg); } /* --- Projects Dashboard responsive breakpoints --- */ @media (max-width: 1024px) { .featured-card { flex-direction: column; } .featured-media { flex: none; width: 100%; min-height: 340px; } .other-projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .featured-media { min-height: 280px; padding: 1.75rem; } .featured-meta-row { flex-direction: column; gap: var(--space-sm); } .other-projects-grid { grid-template-columns: 1fr; } .flow-chain { flex-direction: column; align-items: flex-start; } .flow-node { width: 100%; } .flow-arrow { transform: rotate(90deg); margin-block: 0.1rem; } } /* ========================================================================== 16. AWWWARDS ELEVATION PASS Elevates the Projects Dashboard and all three case studies from a "read the report" experience to visual storytelling, using only content that already exists on the page — every component below re-presents real numbers/copy already written, it never adds new claims. Built from the same tokens as everything else (gold-brass- bronze-copper family, navy/graphite darks, off-white/cream lights), so it reads as one continuous design system. ========================================================================== */ /* --- 16a. Signature Process Track — reused on every case study --- */ .process-track { position: relative; margin-block: var(--space-lg) var(--space-2xl); padding-top: var(--space-sm); } .process-line { position: absolute; top: 27px; left: 4%; right: 4%; height: 2px; background: var(--color-border); border-radius: 999px; overflow: hidden; z-index: 0; } .process-line-fill { position: absolute; inset: 0; width: 0; background: var(--gradient-metallic); transition: width 1.6s var(--ease-out) 0.15s; } .process-track.in-view .process-line-fill { width: 100%; } .process-steps { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: var(--space-sm); } .process-step { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; flex: 1; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .process-track.in-view .process-step { opacity: 1; transform: translateY(0); } .process-track.in-view .process-step:nth-child(1) { transition-delay: 0.05s; } .process-track.in-view .process-step:nth-child(2) { transition-delay: 0.15s; } .process-track.in-view .process-step:nth-child(3) { transition-delay: 0.25s; } .process-track.in-view .process-step:nth-child(4) { transition-delay: 0.35s; } .process-track.in-view .process-step:nth-child(5) { transition-delay: 0.45s; } .process-track.in-view .process-step:nth-child(6) { transition-delay: 0.55s; } .process-track.in-view .process-step:nth-child(7) { transition-delay: 0.65s; } .process-node { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(165deg, rgba(201, 164, 99, 0.1), rgba(201, 164, 99, 0.02)); border: 1px solid rgba(201, 164, 99, 0.3); box-shadow: var(--shadow-sm); color: var(--color-gold-500); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .process-node .icon { width: 22px; height: 22px; } .process-step:hover .process-node { transform: translateY(-4px) scale(1.06); border-color: var(--color-gold-500); box-shadow: 0 14px 30px -10px rgba(201, 164, 99, 0.4); } .process-label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); } @media (max-width: 900px) { .process-line { display: none; } .process-steps { flex-wrap: wrap; row-gap: var(--space-lg); } .process-step { flex: 0 0 calc(33.333% - var(--space-sm)); } } @media (max-width: 560px) { .process-step { flex: 0 0 calc(50% - var(--space-sm)); } } /* --- 16b. Animated statistic blocks --- */ .stat-card { position: relative; overflow: hidden; } .stat-icon { position: absolute; right: -0.4rem; bottom: -0.6rem; width: 4.5rem; height: 4.5rem; color: var(--color-gold-500); opacity: 0.1; transition: opacity var(--transition-med), transform var(--transition-med); pointer-events: none; } .stat-card:hover .stat-icon { opacity: 0.22; transform: scale(1.08) rotate(-4deg); } .stat-count { font-variant-numeric: tabular-nums; } /* --- 16c. Sentiment chart — visual bar comparison, Month 1 vs Month 2 --- */ .sentiment-chart { margin-block: var(--space-lg); padding: var(--space-lg); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .sentiment-legend { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-md); } .legend-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: var(--color-ink-soft); } .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .legend-dot--positive { background: var(--color-gold-500); } .legend-dot--neutral { background: var(--color-blue-grey); } .legend-dot--negative { background: var(--color-copper-500); } .sentiment-row { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-sm); } .sentiment-row:last-of-type { margin-bottom: 0; } .sentiment-row-label { flex: 0 0 72px; font-size: 0.82rem; font-weight: 700; color: var(--color-navy-900); } .sentiment-bar { flex: 1; display: flex; height: 30px; border-radius: 999px; overflow: hidden; background: rgba(34, 29, 23, 0.05); } .sentiment-seg { width: 0; height: 100%; transition: width 1.1s var(--ease-out); } .sentiment-chart.in-view .sentiment-seg { width: var(--seg-fill); } .sentiment-seg--positive { background: var(--color-gold-500); } .sentiment-seg--neutral { background: var(--color-blue-grey); } .sentiment-seg--negative { background: var(--color-copper-500); } /* Scoped with the parent class (.sentiment-chart / .comparison-bars / .concept-card / .case-outcome below) so these beat the more generic ".case-block p" / ".case-outcome p" rules on specificity — both are 1 class + 1 element (0-1-1), while a bare .sentiment-insight etc. is only 1 class (0-1-0) and would silently lose. */ .sentiment-chart .sentiment-insight { display: flex; align-items: baseline; gap: 0.4rem; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: 0.92rem; color: var(--color-ink-soft); max-width: none; } .sentiment-insight strong { color: var(--color-gold-500); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; flex-shrink: 0; } /* --- 16d. Comparison bars — Warring vs AAP, per metric --- */ .comparison-bars { margin-block: var(--space-lg); padding: var(--space-lg); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .comparison-row { margin-bottom: var(--space-md); } .comparison-row:last-child { margin-bottom: 0; } .comparison-bars .comparison-metric { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-navy-900); margin-bottom: 0.55rem; max-width: none; } .comparison-track { position: relative; height: 30px; border-radius: 999px; background: rgba(34, 29, 23, 0.05); margin-bottom: 0.4rem; overflow: hidden; } .comparison-track:last-child { margin-bottom: 0; } .comparison-fill { position: absolute; inset: 0; width: 0; display: flex; align-items: center; padding-inline: 0.85rem; border-radius: inherit; transition: width 1.1s var(--ease-out); } .comparison-bars.in-view .comparison-fill { width: var(--cmp-fill); } .comparison-fill span { font-size: 0.76rem; font-weight: 700; white-space: nowrap; } .comparison-fill--a { background: var(--gradient-metallic); color: var(--color-navy-950); } .comparison-fill--b { background: var(--color-blue-grey); color: var(--color-white); opacity: 0.88; } /* --- 16e. Persona grid — voter segmentation as psychographic cards --- */ .persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .persona-card { padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med); } .persona-card:hover { transform: translateY(-6px); border-color: rgba(201, 164, 99, 0.4); box-shadow: var(--shadow-md), 0 24px 48px -20px rgba(201, 164, 99, 0.24); } .persona-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 0.85rem; background: rgba(201, 164, 99, 0.1); color: var(--color-gold-500); } .persona-icon .icon { width: 20px; height: 20px; } .persona-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-navy-900); margin-bottom: 0.5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; } .persona-share { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; color: var(--color-gold-500); background: rgba(201, 164, 99, 0.1); padding: 0.15rem 0.5rem; border-radius: 999px; } /* Specificity note: these live inside .case-block, whose own `.case-block p` rule (0 ids, 1 class, 1 element) would otherwise beat a plain .persona-state / .persona-trigger class selector (0 ids, 1 class, 0 elements) and silently win on font-size/color. The `.persona-card` prefix bumps these to 2 classes so they hold. */ .persona-card .persona-state { display: inline-block; font-size: 0.76rem; font-weight: 600; font-style: italic; color: var(--color-copper-500); margin-bottom: 0.6rem; max-width: none; line-height: 1.4; } .persona-card .persona-trigger { font-size: 0.88rem; color: var(--color-ink-soft); line-height: 1.55; max-width: none; } /* --- 16f. Connected pillar cards — animated framework with hover expand --- */ .pillar-grid { position: relative; } .pillar-grid::before { content: ""; position: absolute; top: 46px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 164, 99, 0.4) 15%, rgba(201, 164, 99, 0.4) 85%, transparent); z-index: 0; } .pillar-card { position: relative; z-index: 1; overflow: hidden; } .pillar-number { position: absolute; top: 0.4rem; right: 0.9rem; font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--color-navy-900); opacity: 0.07; line-height: 1; pointer-events: none; } .pillar-icon-badge { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 0.85rem; background: linear-gradient(165deg, rgba(201, 164, 99, 0.12), rgba(201, 164, 99, 0.03)); border: 1px solid rgba(201, 164, 99, 0.28); color: var(--color-gold-500); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .pillar-icon-badge .icon { width: 22px; height: 22px; } .pillar-card:hover .pillar-icon-badge { transform: scale(1.08); border-color: var(--color-gold-500); box-shadow: 0 10px 22px -8px rgba(201, 164, 99, 0.4); } .pillar-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); } .pillar-expand-inner { overflow: hidden; } .pillar-card:hover .pillar-expand, .pillar-card:focus .pillar-expand, .pillar-card:focus-within .pillar-expand { grid-template-rows: 1fr; margin-top: 0.6rem; } /* Touch devices have no hover — always show the full explanation rather than hiding it behind an interaction that can't happen. */ @media (hover: none) { .pillar-expand { grid-template-rows: 1fr; margin-top: 0.6rem; } } /* --- 16g. Concept showcase cards — movie-poster styling --- */ .concept-grid { position: relative; } .concept-card { position: relative; overflow: hidden; z-index: 1; } .concept-number { position: absolute; top: -0.3rem; right: 0.6rem; font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--color-navy-900); opacity: 0.06; line-height: 1; pointer-events: none; z-index: 0; } .concept-card h4, .concept-card p, .concept-card .concept-quote { position: relative; z-index: 1; } .concept-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201, 164, 99, 0.1), transparent 60%); opacity: 0; transition: opacity var(--transition-med); pointer-events: none; z-index: 0; } .concept-card:hover::after { opacity: 1; } .concept-card:hover { border-color: rgba(201, 164, 99, 0.4); } .concept-card .concept-quote { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--color-gold-500) !important; line-height: 1.5; margin-top: 0.6rem; padding-top: 0.6rem; max-width: none; border-top: 1px dashed rgba(201, 164, 99, 0.3); } /* --- 16h. Outcome dashboard --- */ .outcome-dashboard { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: var(--space-md) 0 var(--space-lg); } .outcome-chip { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.1rem; border-radius: 999px; background: rgba(237, 220, 184, 0.08); border: 1px solid rgba(237, 220, 184, 0.2); color: var(--color-white); font-size: 0.85rem; font-weight: 600; transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .outcome-chip:hover { transform: translateY(-3px); border-color: rgba(201, 164, 99, 0.55); box-shadow: 0 12px 26px -12px rgba(201, 164, 99, 0.4); } .outcome-chip .icon { width: 17px; height: 17px; color: var(--color-gold-400); flex-shrink: 0; } .case-outcome .outcome-summary { max-width: 62ch; margin-inline: auto; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } /* --- 16i. Sakarni — industrial / material visual language --- Scoped entirely to .case-study#sakarni so nothing else on the site is affected: a warm construction-orange accent replacing the gold family, plus a coarse concrete-like grain wash instead of the fine sitewide grain, and warmer greys instead of navy on the divider surfaces. */ .case-study#sakarni { position: relative; --sakarni-accent: #c15a2b; --sakarni-accent-soft: rgba(193, 90, 43, 0.12); } .case-study#sakarni::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.05; pointer-events: none; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; } .case-study#sakarni > * { position: relative; z-index: 1; } .case-study#sakarni .case-category, .case-study#sakarni .case-meta-label, .case-study#sakarni .stat-label ~ .case-meta-label { color: var(--sakarni-accent); } .case-study#sakarni .pull-quote, .case-study#sakarni .concept-hook { color: var(--sakarni-accent) !important; border-left-color: var(--sakarni-accent); } .case-study#sakarni .pull-quote { background: var(--sakarni-accent-soft); } .case-study#sakarni .data-table caption { color: var(--sakarni-accent); } .case-study#sakarni .data-table th { background: var(--sakarni-accent-soft); } .case-study#sakarni .concept-card:hover, .case-study#sakarni .pillar-card:hover, .case-study#sakarni .persona-card:hover { border-color: rgba(193, 90, 43, 0.45); } .case-study#sakarni .concept-card::after { background: linear-gradient(135deg, var(--sakarni-accent-soft), transparent 60%); } .case-study#sakarni .concept-number { color: var(--sakarni-accent); } .case-study#sakarni .process-line-fill { background: linear-gradient(120deg, #e8c9a8, var(--sakarni-accent) 60%, #7a3a18 100%); } .case-study#sakarni .process-node, .case-study#sakarni .outcome-chip:hover { border-color: rgba(193, 90, 43, 0.4); } .case-study#sakarni .process-node { color: var(--sakarni-accent); } .case-study#sakarni .case-outcome { background-image: radial-gradient(circle at 85% 20%, var(--sakarni-accent-soft), transparent 50%); } /* Content pillar chips — replaces the plain bullet list with small icon chips, matching the outcome-chip / persona-card visual family. */ .content-pillar-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; } .content-pillar-chip { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.1rem; border-radius: var(--radius-sm); background: var(--color-white); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); font-size: 0.88rem; color: var(--color-ink-soft); transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); } .content-pillar-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .content-pillar-chip .icon { width: 18px; height: 18px; color: var(--sakarni-accent, var(--color-gold-500)); flex-shrink: 0; } /* --- 16j. Dashboard hero — mouse parallax ambient glow --- */ .page-intro { position: relative; overflow: hidden; } .page-intro-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .page-intro-ambient::before, .page-intro-ambient::after { content: ""; position: absolute; width: 50vw; height: 50vw; max-width: 620px; max-height: 620px; border-radius: 50%; filter: blur(20px); animation: page-intro-drift 30s var(--ease-out) infinite alternate; } .page-intro-ambient::before { top: -18%; left: -12%; background: radial-gradient(circle, rgba(201, 164, 99, 0.16), transparent 70%); } .page-intro-ambient::after { bottom: -22%; right: -10%; background: radial-gradient(circle, rgba(136, 145, 163, 0.13), transparent 70%); animation-duration: 36s; animation-delay: -10s; } @keyframes page-intro-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(3%, 4%, 0) scale(1.1); } } /* Cursor-reactive spotlight — follows the pointer via --mx/--my custom properties set by script.js, gated behind pointer:fine and prefers-reduced-motion there. Falls back to sitting still (still looks intentional) if JS never sets the variables. */ .page-intro-spotlight { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(480px 480px at var(--mx, 50%) var(--my, 30%), rgba(201, 164, 99, 0.14), transparent 65%); transition: background-position 0.2s linear; } .page-intro .container { position: relative; z-index: 1; } /* --- 16k. Featured project — showcase depth (Dashboard) --- */ .featured-media { position: relative; } .featured-media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.35) 100%); pointer-events: none; border-radius: inherit; } .dashboard-projects { position: relative; } #raja-warring.dashboard-projects::before { content: ""; position: absolute; inset: -10% -5%; z-index: -1; background: radial-gradient(circle at 15% 20%, rgba(201, 164, 99, 0.1), transparent 45%), radial-gradient(circle at 88% 78%, rgba(136, 145, 163, 0.08), transparent 45%); pointer-events: none; } /* --- 16l. Awwwards elevation — responsive breakpoints --- */ @media (max-width: 1024px) { .persona-grid { grid-template-columns: repeat(2, 1fr); } .comparison-track { height: auto; min-height: 30px; } } @media (max-width: 640px) { .persona-grid { grid-template-columns: 1fr; } .sentiment-row { flex-direction: column; align-items: flex-start; gap: 0.4rem; } .sentiment-row-label { flex: none; } .sentiment-bar { width: 100%; } .outcome-dashboard { flex-direction: column; align-items: stretch; } .outcome-chip { justify-content: center; } } /* ========================================================================== 17. RECRUITER POLISH PASS Small, surgical additions on top of the existing system — a flagship badge for Raja Warring's own hero (it already reads as the flagship on the Dashboard; this carries that signal onto its own page), and an editorial "proof" photo break that reuses the exact letterboxed, never-cropped image treatment already established by .project-image-wrap elsewhere on the site. No new visual language. ========================================================================== */ /* --- Flagship badge (Raja Warring case-hero only) --- */ .flagship-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; margin-bottom: 0.9rem; border-radius: 999px; background: rgba(201, 164, 99, 0.16); border: 1px solid rgba(201, 164, 99, 0.5); color: var(--color-gold-400); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .flagship-tag .icon { width: 13px; height: 13px; } /* --- Editorial photo break (real proof imagery inside a case study) --- Same letterboxed, object-fit: contain logic as .project-image-wrap, so nothing is ever cropped — just a taller, dark "gallery wall" stage sized for a single full case-width photograph, with a captioned credit line underneath in the same small-caps treatment as .data-table caption. */ .case-photo { max-width: 980px; margin: 0 auto var(--space-2xl); } .case-photo-frame { position: relative; height: clamp(320px, 44vw, 520px); padding: var(--space-lg); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--color-navy-950); background-image: radial-gradient(circle at 82% 12%, rgba(201, 164, 99, 0.16), transparent 55%); box-shadow: var(--shadow-md); overflow: hidden; } .case-photo-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius-sm); box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.55); } .case-photo-caption { margin-top: 0.85rem; font-size: 0.85rem; line-height: 1.6; color: var(--color-ink-soft); text-align: center; max-width: 66ch; margin-inline: auto; } .case-photo-caption strong { display: inline-block; margin-right: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold-500); } @media (max-width: 640px) { .case-photo-frame { padding: var(--space-md); } } /* ========================================================================== 18. PROJECT PERSONALITY & FINAL PROOF PASS Each case study keeps the same visual system, but gets one small, genuine personality cue: JK Tyre (human/emotional) gets a connecting thread across its three dealer stories, echoing "three different people, one truth"; Sakarni (creative/experimental) gets a pinned "mood board" tape corner on its concept cards, scoped entirely to .case-study#sakarni so nothing else on the site is touched. Also adds a small "Reflection" label above each closing pull-quote, making the Challenge → ... → Outcome → Reflection arc explicit without changing a single word of existing copy. ========================================================================== */ /* --- JK Tyre: a connecting thread across the three dealer stories --- */ .dealer-grid::before { content: ""; position: absolute; top: 68px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 164, 99, 0.4) 15%, rgba(201, 164, 99, 0.4) 85%, transparent); z-index: 0; } @media (max-width: 900px) { .dealer-grid::before { display: none; } } /* --- Sakarni: a pinned "mood board" tape corner on concept cards --- */ .case-study#sakarni .concept-card::before { content: ""; position: absolute; top: -0.5rem; left: 1.6rem; width: 46px; height: 18px; background: linear-gradient(100deg, rgba(193, 90, 43, 0.55), rgba(193, 90, 43, 0.32)); border: 1px solid rgba(193, 90, 43, 0.3); transform: rotate(-4deg); box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.25); z-index: 2; pointer-events: none; } /* --- Reflection label (all three case studies) --- */ .case-outcome .case-meta-label { display: block; margin-bottom: 0.6rem; color: var(--color-gold-400); }