/* ========================================================================== shared.css Common styles for desigNIKA portfolio. Loaded on every page alongside Tailwind CSS (CDN). ========================================================================== */ /* ---------- Custom Properties ---------- */ :root { --color-bg: #f5f5f5; --color-text: #1a1a1a; --color-text-secondary: #666666; --color-accent: #6B3E3E; --color-border: #e0e0e0; --color-card-bg: #ffffff; --color-header-bg: #ffffff; --color-footer-bg: #ffffff; --color-tag-bg: #e5e7eb; --color-tag-text: #4b5563; --noise-opacity: 0.4; } /* ---------- Base ---------- */ html { background-color: var(--color-bg); } body { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; background-color: var(--color-bg); color: var(--color-text); transition: background-color 0.3s ease, color 0.3s ease; overflow-x: hidden; } /* SVG noise paper texture */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E"); background-repeat: repeat; } /* Typography hierarchy */ h1 { font-size: 48px; font-weight: 700; line-height: 1.1; } h2 { font-size: 36px; font-weight: 600; line-height: 1.2; } h3 { font-size: 24px; font-weight: 500; line-height: 1.3; } @media (max-width: 768px) { h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 20px; } } /* ---------- Dark Mode (applied to ) ---------- */ .dark-mode { --color-bg: #1a1a1a; --color-text: #e8e8e8; --color-text-secondary: #aaaaaa; --color-accent: #9B6B6B; --color-border: #333333; --color-card-bg: #252525; --color-header-bg: #252525; --color-footer-bg: #141414; --color-tag-bg: #374151; --color-tag-text: #f3f4f6; --noise-opacity: 0.25; } .dark-mode { background-color: var(--color-bg); color: var(--color-text); } .dark-mode body { background-color: var(--color-bg); color: var(--color-text); } /* Tailwind utility overrides */ .dark-mode .text-black { color: var(--color-text) !important; } .dark-mode .bg-white { background-color: var(--color-card-bg) !important; } .dark-mode .bg-gray-50 { background-color: var(--color-card-bg) !important; } .dark-mode .bg-gray-100 { background-color: #333 !important; } .dark-mode .bg-gray-200 { background-color: #333 !important; } .dark-mode .border-gray-200 { border-color: var(--color-border) !important; } .dark-mode .text-gray-500 { color: var(--color-text-secondary) !important; } .dark-mode .text-gray-600, .dark-mode .text-gray-800 { color: var(--color-text) !important; } /* Header */ .dark-mode header { background-color: var(--color-header-bg) !important; } .dark-mode .menu-toggle span, .dark-mode header .bg-black { background-color: var(--color-text) !important; } /* Navigation */ .dark-mode #menuOverlay { background-color: var(--color-bg) !important; color: var(--color-text) !important; } /* Footer */ .dark-mode footer { background-color: var(--color-footer-bg) !important; } .dark-mode footer p { color: var(--color-text) !important; } .dark-mode footer .text-gray-500 { color: var(--color-text-secondary) !important; } /* Project tags */ .dark-mode .project-tag { background-color: var(--color-tag-bg); color: var(--color-tag-text); } /* Project card image containers */ .dark-mode .project-image-container { background-color: var(--color-card-bg) !important; } /* Back to top button */ .dark-mode #backToTop { background-color: var(--color-text) !important; color: var(--color-bg) !important; } /* Gallery artwork text */ .dark-mode .artwork-title { color: var(--color-text); } .dark-mode .artwork-meta { color: var(--color-text-secondary); } .dark-mode .artwork-caption { color: #ccc; } .dark-mode .artwork img { border-color: var(--color-border); background-color: var(--color-card-bg); } /* Avatar circle border */ .dark-mode .avatar-circle { border-color: var(--color-text); } /* Profile page */ .dark-mode .profile-pic { border-color: #555; } .dark-mode .resume-link { color: var(--color-accent); } /* ---------- Logo ---------- */ .logo-container { position: relative; width: 60px; height: 60px; } .logo, .logo-hover { position: absolute; width: 100%; height: 100%; transition: opacity 0.3s ease; } .logo-hover { opacity: 0; } .logo-container:hover .logo { opacity: 0; } .logo-container:hover .logo-hover { opacity: 1; } /* ---------- Desktop Nav ---------- */ .desktop-nav a { font-size: 16px; font-weight: 500; color: var(--color-text); transition: color 0.3s ease; position: relative; } .desktop-nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--color-accent); transition: width 0.3s ease; } .desktop-nav a:hover { color: var(--color-accent); } .desktop-nav a:hover::after { width: 100%; } .dark-mode .desktop-nav a { color: var(--color-text); } .dark-mode .desktop-nav a:hover { color: var(--color-accent); } /* ---------- Mobile Menu Overlay ---------- */ .menu-overlay { transition: all 0.3s ease; transform: translateX(100%); } .menu-overlay.active { transform: translateX(0); } /* ---------- Back to Top ---------- */ #backToTop { position: fixed; bottom: 30px; right: 30px; background-color: var(--color-text); color: var(--color-bg); padding: 10px 14px; border-radius: 9999px; cursor: pointer; display: none; font-size: 14px; z-index: 100; transition: opacity 0.3s ease; } /* ---------- Hero ---------- */ .avatar-circle { display: inline-block; width: 1.5em; height: 1.5em; border-radius: 50%; overflow: hidden; vertical-align: middle; margin: 0 0.2em; border: 2px solid var(--color-text); } .avatar-circle img { width: 100%; height: 100%; object-fit: cover; } .hero-heading { font-family: 'Inter', sans-serif; font-weight: 700; } .hero-welcome { font-family: 'Inter', sans-serif; font-weight: 300; } /* ---------- Project Cards ---------- */ .project-tag { background-color: var(--color-tag-bg); color: var(--color-tag-text); } .project-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .project-card:hover { transform: scale(1.01); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .dark-mode .project-card { border-color: var(--color-border); } .dark-mode .project-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .project-image-container { height: 12rem; width: 100%; overflow: hidden; background-color: #f9fafb; display: flex; align-items: center; justify-content: center; } .project-image-container img { width: 100%; height: 100%; object-fit: cover; } .project-content { flex: 1; display: flex; flex-direction: column; } .projects-label { font-size: 0.875rem; line-height: 1.25rem; } @media (min-width: 768px) { .projects-label { font-size: 1rem; line-height: 1.5rem; } } /* Project description: hidden by default, revealed on card hover */ .project-description { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; } .project-card:hover .project-description { max-height: 300px; opacity: 1; } @media (max-width: 768px) { .project-description { max-height: none; opacity: 1; } } /* ---------- Case Study Pages ---------- */ .toc-link { font-family: 'Inter', sans-serif; font-weight: 700; transition: all 0.3s ease; } .toc-link:hover { transform: translateX(5px); } .toc-link.active { color: var(--color-accent); font-weight: 700; } .dark-mode .toc-link.active { color: var(--color-accent); } /* Case study section headings (Spark, Build, Launch) */ .case-study-section-heading { color: var(--color-accent); } /* ---------- Project Navigation ---------- */ .project-nav-inner { display: flex; justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--color-border); padding-top: 2rem; } .project-nav-link { display: flex; flex-direction: column; transition: color 0.3s ease; } .project-nav-link:hover .project-nav-name { color: var(--color-accent); } .project-nav-next { text-align: right; margin-left: auto; } .project-nav-label { font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: #888; } .project-nav-name { font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin-top: 0.25rem; transition: color 0.3s ease; } .dark-mode .project-nav-inner { border-color: var(--color-border); } .dark-mode .project-nav-label { color: var(--color-text-secondary); } .dark-mode .project-nav-name { color: var(--color-text); } .dark-mode .project-nav-link:hover .project-nav-name { color: var(--color-accent); } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--color-border); padding: 40px 0; } footer p { font-size: 14px; color: var(--color-text-secondary); } /* ---------- About Page ---------- */ .profile-pic { width: 140px; height: 140px; border-radius: 9999px; border: 2.5px solid #e3e3e3; object-fit: cover; } .resume-link { color: var(--color-accent); } .resume-link:hover { text-decoration: underline; }