@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap'); /* ============================================================ manuel.css — Custom styles for Manuel Sanches portfolio Import AFTER reset.css and styles.css in ============================================================ */ /* --Variables-- */ :root { --periwinkle: #9B97E8; --periwinkle-dark: #7A75D6; --periwinkle-light: #C4C1F5; --bg-main: #9B97E8; --text-dark: #1a1a2e; --text-white: #ffffff; --text-muted: rgba(255, 255, 255, 0.75); --contact-box: rgba(255, 255, 255, 0.25); --font-display: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; } /* --Base Overrides-- */ body { background-color: var(--bg-main); color: var(--text-dark); font-family: var(--font-body); } p { color: var(--text-dark); opacity: 0.85; font-family: var(--font-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); } /* --Header & Nav-- */ header { background-color: rgba(155, 151, 232, 0); transition: background-color 0.3s; } header h1 { font-family: var(--font-display); font-weight: 700; color: var(--text-dark); font-size: 1.1em; } .header-solid { background-color: rgba(155, 151, 232, 0.95) !important; backdrop-filter: blur(8px); } nav a { font-family: var(--font-display); font-weight: 400; color: var(--text-dark); } nav a:hover { color: var(--text-white); } /* Mobile nav background */ @media screen and (max-width: 799px) { nav { background-color: var(--periwinkle-dark); color: var(--text-white); } nav a { color: var(--text-white); } } /* --Hero-- */ .hero { background-image: url(../img/splash-temp.jpg); background-size: cover; background-position: center; background-color: var(--bg-main); justify-content: flex-start; align-items: flex-start; padding: 0; margin-bottom: 0; } .hero-content { padding: 160px 8% 80px; max-width: 600px; } .hero-heading { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 800; color: var(--text-dark); line-height: 1.05; padding-bottom: 24px; } .hero-subtext { font-family: var(--font-body); font-size: clamp(0.95rem, 1.4vw, 1.15rem); color: var(--text-white); line-height: 1.7; opacity: 1; margin-bottom: 0; } /* --Section Title Blocks-- */ .section-title-block { padding: 60px 8% 20px; justify-content: center; align-items: center; flex-direction: column; background-color: var(--bg-main); } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; color: var(--text-dark); text-align: center; padding-bottom: 0; width: 100%; } /* --Project Rows-- */ .project-row { background-color: var(--bg-main); padding: 50px 8%; display: flex; flex-direction: column; align-items: center; gap: 30px; } .col-left-project, .col-right-project { width: 100%; } .project-label { display: block; font-family: var(--font-body); font-size: 0.8em; font-weight: 400; color: var(--text-dark); opacity: 0.6; margin-bottom: 6px; } .project-name { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 700; color: var(--text-dark); line-height: 1.1; margin-bottom: 6px; } .project-date { font-family: var(--font-body); font-size: 0.9em; color: var(--text-dark); opacity: 0.7; margin-bottom: 14px; } .project-desc { font-family: var(--font-body); font-size: 0.95em; color: var(--text-dark); line-height: 1.65; opacity: 0.85; margin-bottom: 10px; } .project-arrow { display: inline-block; font-size: 1.8em; color: var(--text-dark); margin-top: 10px; transition: transform 0.3s; text-decoration: none; } .project-arrow:hover { transform: translateX(6px); color: var(--text-dark); } .project-image { width: 100%; border-radius: 10px; overflow: hidden; } .project-image img { width: 100%; height: 260px; object-fit: cover; border-radius: 10px; display: block; } .text-right { text-align: right; } .text-right .project-arrow { display: block; text-align: right; } @media only screen and (min-width: 800px) { .project-row { flex-direction: row; gap: 60px; align-items: center; } .project-row.flex-reverse { flex-direction: row-reverse; } .col-left-project { width: 45%; } .col-right-project { width: 45%; } .project-image img { height: 320px; } } /* --Personal Photography & Promo Grids-- */ .personal-photo-section { background-color: var(--bg-main); padding: 30px 8% 60px; display: flex; flex-direction: column; align-items: flex-start; } .subsection-title { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 700; color: var(--text-dark); margin-bottom: 20px; } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; } .photo-grid figure img { width: 100%; height: 180px; object-fit: cover; display: block; border-radius: 6px; } .promo-grid { grid-template-columns: repeat(2, 1fr); } /* Portrait override for promo grid (Instagram 4:5 content) */ .promo-grid figure img { height: auto; aspect-ratio: 4/5; } @media only screen and (min-width: 800px) { .promo-grid { grid-template-columns: repeat(5, 1fr); } .photo-grid figure img { height: 200px; } } /* --Design Tools-- */ .design-tools-section { background-color: var(--bg-main); padding: 60px 8%; display: flex; flex-direction: column; align-items: center; } .tools-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 30px; } .tool-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 90px; } .tool-item img { width: 70px; height: 70px; object-fit: contain; border-radius: 16px; } .tool-item span { font-family: var(--font-body); font-size: 0.72em; text-align: center; color: var(--text-dark); opacity: 0.8; } /* --About Section-- */ .about-section { background-color: var(--bg-main); padding: 60px 8%; flex-direction: column; align-items: flex-start; gap: 0; } .about-top { display: flex; flex-direction: column; gap: 30px; width: 100%; margin-bottom: 50px; } .about-text { max-width: 500px; } .about-heading { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: var(--text-dark); padding-bottom: 16px; } .about-text p { font-size: 1em; line-height: 1.7; color: var(--text-dark); opacity: 0.85; } .about-photo { width: 100%; max-width: 220px; } .about-photo img { width: 100%; border-radius: 10px; object-fit: cover; aspect-ratio: 3/4; } @media only screen and (min-width: 800px) { .about-top { flex-direction: row; justify-content: space-between; align-items: flex-start; } .about-photo { max-width: 260px; } } /* --Skills-- */ .skills-block { width: 100%; margin-bottom: 60px; } .skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; margin-top: 20px; } @media only screen and (min-width: 800px) { .skills-grid { grid-template-columns: repeat(4, 1fr); } } .skill-col h5 { font-family: var(--font-display); font-size: 0.85em; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; } .skill-col ul { list-style: disc; padding-left: 16px; } .skill-col ul li { font-family: var(--font-body); font-size: 0.88em; color: var(--text-dark); opacity: 0.85; line-height: 1.9; } .skill-col p { font-size: 0.85em; line-height: 1.6; color: var(--text-dark); opacity: 0.85; margin-bottom: 12px; } .skill-col strong { font-weight: 600; } /* Social Icons in Skills */ .social-icons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .social-icons a { display: flex; align-items: center; justify-content: center; color: var(--text-dark); transition: opacity 0.2s, transform 0.2s; } .social-icons a:hover { opacity: 0.6; transform: translateY(-2px); } .social-icons img { width: 28px; height: 28px; object-fit: contain; /* invert to make white SVGs dark on the periwinkle bg */ filter: invert(1) brightness(0); } .social-icons svg { width: 28px; height: 28px; } /* --Contact Block-- */ .contact-block { width: 100%; } .contact-heading { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; color: var(--text-dark); padding-bottom: 12px; } .contact-block > p { font-size: 1em; color: var(--text-dark); opacity: 0.85; margin-bottom: 20px; } .contact-info-box { background-color: var(--contact-box); border-radius: 10px; padding: 16px 20px; max-width: 400px; } .contact-label { font-family: var(--font-display); font-size: 0.7em; font-weight: 700; letter-spacing: 0.1em; color: var(--text-dark); opacity: 0.6; margin-bottom: 10px !important; } .contact-details p { font-size: 0.88em; line-height: 1.9; color: var(--text-dark); opacity: 0.9; margin-bottom: 0; } .contact-details strong { font-weight: 600; } /* --Project Page-- */ .project-hero { background-color: var(--bg-main); padding: 140px 8% 50px; display: flex; flex-direction: column; align-items: flex-start; } .project-hero-text { max-width: 620px; } .back-link { display: inline-block; font-family: var(--font-body); font-size: 0.9em; color: var(--text-dark); opacity: 0.65; margin-bottom: 20px; transition: opacity 0.2s, transform 0.2s; text-decoration: none; } .back-link:hover { opacity: 1; transform: translateX(-4px); color: var(--text-dark); } .project-page-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; color: var(--text-dark); line-height: 1.05; padding-bottom: 10px; } .project-page-date { font-family: var(--font-body); font-size: 0.9em; color: var(--text-dark); opacity: 0.65; margin-bottom: 16px; } .project-page-desc { font-family: var(--font-body); font-size: 1em; color: var(--text-dark); line-height: 1.7; opacity: 0.85; max-width: 520px; } .slider-section { background-color: var(--bg-main); padding: 10px 8% 80px; display: flex; flex-direction: column; align-items: center; } .slider-section .slider { border-radius: 16px; overflow: hidden; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15); } .slide-counter { margin-top: 16px; font-family: var(--font-display); font-size: 0.9em; color: var(--text-dark); opacity: 0.6; text-align: center; margin-bottom: 0; } /* --Footer-- */ footer { background-color: var(--text-dark); margin-top: 0; }