/* ============================================================ MINI CASE STUDY — shared brand-themed styles Used by: dis-mobile.html, saife-store.html, some.html Shared case study structure lives in css/casestudy.css Each page sets its accent by adding a theme-* class to : .theme-dis → #00B0E0 (DIS Mobile, sky blue) .theme-ss → #10B981 (Saife Store, emerald green) .theme-some → #3B82F6 (SOME, blue) ============================================================ */ .theme-dis { --mcs-accent: #00B0E0; --mcs-accent-2: #38C4E8; --mcs-a10: rgba(0,176,224,0.1); --mcs-a12: rgba(0,176,224,0.12); --mcs-glow: rgba(0,176,224,0.18); --mcs-a20: rgba(0,176,224,0.2); --mcs-a25: rgba(0,176,224,0.25); --mcs-a40: rgba(0,176,224,0.4); --mcs-a45: rgba(0,176,224,0.45); } .theme-ss { --mcs-accent: #10B981; --mcs-accent-2: #0D9488; --mcs-a10: rgba(16,185,129,0.1); --mcs-a12: rgba(16,185,129,0.12); --mcs-glow: rgba(16,185,129,0.18); --mcs-a20: rgba(16,185,129,0.2); --mcs-a25: rgba(16,185,129,0.25); --mcs-a40: rgba(16,185,129,0.4); --mcs-a45: rgba(16,185,129,0.45); } .theme-some { --mcs-accent: #3B82F6; --mcs-accent-2: #6366F1; --mcs-a10: rgba(59,130,246,0.1); --mcs-a12: rgba(59,130,246,0.12); --mcs-glow: rgba(59,130,246,0.18); --mcs-a20: rgba(59,130,246,0.2); --mcs-a25: rgba(59,130,246,0.25); --mcs-a40: rgba(59,130,246,0.4); --mcs-a45: rgba(59,130,246,0.45); } /* ---- Hero blobs --------------------------------------------- */ .cs-hero__blob--1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--mcs-accent), transparent); top: -200px; left: -150px; } .cs-hero__blob--2 { width: 500px; height: 500px; background: radial-gradient(circle, var(--mcs-accent-2), transparent); bottom: -100px; right: -100px; } /* ---- Section tag ---------------------------------------------- */ .mcs-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mcs-accent); background: var(--mcs-a10); border: 1px solid var(--mcs-a25); padding: 6px 14px; border-radius: 100px; margin-bottom: 20px; } /* ---- Hero title ------------------------------------------- */ .mcs-title { font-family: var(--font-display); font-size: clamp(42px, 5.5vw, 72px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--text); margin-bottom: 12px; } .mcs-title span { color: var(--mcs-accent); } .mcs-tagline { font-size: clamp(14px, 1.5vw, 18px); font-weight: 500; color: var(--mcs-accent); margin-bottom: 20px; letter-spacing: 0.01em; } /* ---- Meta label accent ------------------------------------ */ .cs-meta__label { color: var(--mcs-accent); } /* ---- Hero visual -------------------------------------------- */ .mcs-visual { position: relative; display: flex; align-items: center; justify-content: flex-end; } .mcs-visual__img { width: 100%; max-width: 640px; height: auto; display: block; border-radius: var(--radius-xl); border: 1px solid var(--mcs-a20); box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 40px var(--mcs-glow); } /* ---- Showcase accent -------------------------------------- */ .pg-tag { border-color: var(--mcs-a20); } .pg-tag:hover { border-color: var(--mcs-a45); color: var(--text); } /* ---- Feature list accent ---------------------------------- */ .pg-tag-list--features .pg-tag svg { background: var(--mcs-a12); color: var(--mcs-accent); } .pg-tag-list--features .pg-tag:hover { border-color: var(--mcs-a40); }