/* --- Global Variables --- */ :root { --accent-color: #007bff; /* Default global accent color - USER EDITOR CONTROLS THIS */ font-family: 'Arial', sans-serif; color: #333333; /* Default global text color - dark */ background-color: #ffffff; /* Default global background - light (applies to or #cv-page) */ } /* Base layout assumption for two-column (can be overridden by app/user via layout classes) */ .cv-body { display: flex; gap: 1.5em; } .main-content { flex: 2.5; } .sidebar { flex: 1; padding-left: 1.5em; border-left: 1px solid #e0e0e0; /* Default sidebar separator */ } /* --- TEMPLATES (Revised for Light Backgrounds, Layout Flexibility, Global Accent Priority) --- */ /* 1. Template: Classic */ .template-classic { --classic-h1-color: #333; --classic-header-p-color: #555; --classic-h2-color: #333; --classic-base-text-color: #333; --classic-header-border-color: #f0f0f0; } .template-classic { color: var(--classic-base-text-color); } .template-classic header.cv-header { text-align: center; border-bottom: 2px solid var(--classic-header-border-color); padding-bottom: 1.25em; margin-bottom: 1.25em; } .template-classic header.cv-header h1 { font-size: 2.6em; color: var(--classic-h1-color); } .template-classic header.cv-header p { color: var(--classic-header-p-color); } .template-classic .section h2 { color: var(--classic-h2-color); } .template-classic .skills-list li { color: var(--classic-base-text-color); border: 1px solid #ccc; background: none; padding: 0.2em 0.5em; margin:0.2em; display:inline-block;} /* 2. Template: Modern */ .template-modern { --modern-h1-color: #2c3e50; /* --modern-header-p-color: var(--accent-color); /* Directly use global */ /* --modern-skill-bg-color: var(--accent-color); /* Directly use global */ --modern-skill-text-color: white; --modern-header-bg-color: #f8f9fa; color: #333; } .template-modern header.cv-header { text-align: left; border-bottom: none; background-color: var(--modern-header-bg-color); padding: 1.5em; margin: -10mm -10mm 1.25em -10mm; } .template-modern header.cv-header h1 { color: var(--modern-h1-color); font-size: 2.4em; } .template-modern header.cv-header p { color: var(--accent-color); font-size: 1.25em; font-weight: 500; } .template-modern .skills-list li { background-color: var(--accent-color); color: var(--modern-skill-text-color); border-radius: 20px; padding: 0.3em 0.8em; display: inline-block; margin: 0.2em; } .template-modern .section h2 { color: #333; } /* 3. Template: Minimalist */ .template-minimalist { --minimalist-h1-color: #222; --minimalist-header-p-color: #555; --minimalist-h2-color: #333; --minimalist-skill-border-color: #ccc; --minimalist-skill-text-color: #555; color: #444; } .template-minimalist header.cv-header h1 { color: var(--minimalist-h1-color); } .template-minimalist header.cv-header p { color: var(--minimalist-header-p-color); } .template-minimalist .section h2 { font-size: 1em; color: var(--minimalist-h2-color); border: none; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1em; } .template-minimalist .skills-list li { background: none; border: 1px solid var(--minimalist-skill-border-color); color: var(--minimalist-skill-text-color); padding: 0.3em 0.8em; display: inline-block; margin: 0.2em; } .template-minimalist header.cv-header { text-align: left; border:none; margin-bottom:1.5em; } /* 4. Template: Corporate (Light theme with corporate accents) */ .template-corporate { --corporate-header-bg: #eaf2f8; --corporate-header-text-color: #003366; /* For H1 */ /* --corporate-header-p-color: #5499c7; /* This can be an accent */ --corporate-h2-bg: #f2f2f2; --corporate-h2-text-color: #003366; color: #333; } .template-corporate header.cv-header { background-color: var(--corporate-header-bg); color: var(--corporate-header-text-color); padding: 1.25em; margin: -10mm -10mm 1.25em -10mm; } .template-corporate header.cv-header p { color: var(--accent-color); /* Using global accent */ font-size: 1.1em; opacity: 0.9;} .template-corporate .section h2 { background-color: var(--corporate-h2-bg); padding: 0.3em 0.6em; color: var(--corporate-h2-text-color); border: none; font-size: 1.2em; margin-bottom: 0.8em; } .template-corporate .skills-list li { background-color: var(--accent-color); color: white; padding: 0.2em 0.6em; margin: 0.2em; display: inline-block; border-radius: 3px;} /* 5. Template: Elegant */ .template-elegant { --elegant-h1-font: 'Georgia', serif; --elegant-h1-color: #333; --elegant-header-p-color: #555; /* Subdued, not accent */ --elegant-h2-font: 'Georgia', serif; --elegant-h2-color: #444; --elegant-skill-border-color: var(--accent-color); /* Accent for skill underline */ --elegant-skill-text-color: #333; color: #333; } .template-elegant header.cv-header { text-align: center; margin-bottom: 2em; } .template-elegant header.cv-header h1 { font-family: var(--elegant-h1-font); color: var(--elegant-h1-color); } .template-elegant header.cv-header p { font-style: italic; color: var(--elegant-header-p-color); } .template-elegant .section h2 { text-align: center; font-style: italic; font-family: var(--elegant-h2-font); border: none; color: var(--elegant-h2-color); margin-bottom: 1em; } .template-elegant .skills-list { text-align: center; } .template-elegant .skills-list li { display: inline-block; margin: 0 5px; background: none; border-bottom: 1px solid var(--elegant-skill-border-color); padding: 0.2em 0.1em; color: var(--elegant-skill-text-color); } .template-elegant .contact-info { text-align: center; margin-top: 0.5em; color: #444; } /* 6. Template: Bold Header */ .template-bold-header { --bold-header-bg: #1a1a1a; --bold-header-text-color: white; /* For H1 */ /* --bold-header-p-color: var(--accent-color); /* Directly use global */ --bold-h2-color: #1a1a1a; --bold-h2-border-color: var(--accent-color); /* Use accent for border */ --bold-skill-bg: #333; --bold-skill-text-color: white; color: #333; } .template-bold-header header.cv-header { background-color: var(--bold-header-bg); color: var(--bold-header-text-color); padding: 2.5em; text-align: center; margin: -10mm -10mm 1.25em -10mm; } .template-bold-header header.cv-header p { color: var(--accent-color); font-size: 1.3em; } .template-bold-header .section h2 { color: var(--bold-h2-color); border-bottom: 2px solid var(--bold-h2-border-color); padding-bottom: 0.3em; font-size: 1.4em; } .template-bold-header .skills-list li { background-color: var(--bold-skill-bg); color: var(--bold-skill-text-color); padding: 0.4em 0.9em; display: inline-block; margin: 0.2em; border-radius: 4px; } /* 7. Template: Creative (Solarized Light) */ .template-creative { --creative-bg: #fdf6e3; --creative-text-color: #586e75; --creative-font: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; --creative-h1-color: var(--accent-color); /* Main heading is accent */ --creative-header-p-color: #2aa198; /* Secondary color */ --creative-h2-color: #cb4b16; /* Tertiary color */ --creative-h2-border-color: #b58900; --creative-skill-bg: #eee8d5; --creative-skill-border-color: var(--accent-color); /* Skill border is accent */ --creative-skill-text-color: #073642; } .template-creative { background-color: var(--creative-bg); color: var(--creative-text-color); font-family: var(--creative-font); } .template-creative header.cv-header { text-align: right; padding: 1em 0; margin-bottom: 1.5em; } .template-creative header.cv-header h1 { color: var(--creative-h1-color); font-size: 2.5em; } .template-creative header.cv-header p { color: var(--creative-header-p-color); } .template-creative .section h2 { color: var(--creative-h2-color); border-bottom: 2px solid var(--creative-h2-border-color); padding-bottom: 0.2em; text-align: left; } .template-creative .skills-list li { background-color: var(--creative-skill-bg); border-left: 3px solid var(--creative-skill-border-color); padding: 0.4em 0.8em; margin-bottom: 0.3em; color: var(--creative-skill-text-color); } /* 8. Template: Academic */ .template-academic { --academic-font: 'Times New Roman', Times, serif; --academic-text-color: #333; --academic-h1-color: #111; --academic-header-p-color: #333; /* Subdued */ --academic-h2-color: var(--accent-color); /* Section titles can be accent */ --academic-h2-border-color: var(--accent-color); } .template-academic { color: var(--academic-text-color); } .template-academic .cv-body { font-family: var(--academic-font); line-height: 1.6; } .template-academic header.cv-header { text-align: left; margin-bottom: 1.5em; border-bottom: 1px solid #000; padding-bottom: 1em; } .template-academic header.cv-header h1 { font-size: 2.2em; margin-bottom: 0.1em; color: var(--academic-h1-color); } .template-academic header.cv-header p { font-size: 1.1em; color: var(--academic-header-p-color); } .template-academic .section h2 { border-bottom: 1px solid var(--academic-h2-border-color); color: var(--academic-h2-color); font-size: 1.3em; padding-bottom: 0.2em; margin-bottom: 0.8em; text-transform: none; } .template-academic .contact-info { columns: 2; gap: 1.5rem; color: var(--academic-text-color); } .template-academic ul { list-style-position: outside; padding-left: 1.5em; } .template-academic .skills-list li { color: var(--academic-text-color); border: 1px solid var(--accent-color); background: none; padding: 0.2em 0.5em; margin:0.2em; display:inline-block;} /* 9. Template: Technical */ .template-technical { --technical-font: 'Roboto Mono', monospace; --technical-header-bg: #f0f0f0; --technical-header-h1-color: var(--accent-color); --technical-header-p-color: #555; /* --technical-h2-color: var(--accent-color); /* Directly use global */ /* --technical-h2-border-color: var(--accent-color); /* Directly use global */ --technical-skill-prefix-color: var(--accent-color); color: #333; } .template-technical { font-family: var(--technical-font); font-size: 0.95em; } .template-technical header.cv-header { padding: 1em; background-color: var(--technical-header-bg); margin: -10mm -10mm 1.5em -10mm; } .template-technical header.cv-header h1 { color: var(--technical-header-h1-color); font-size: 2em; } .template-technical header.cv-header p { color: var(--technical-header-p-color); } .template-technical .section h2 { color: var(--accent-color); border-bottom: 1px dashed var(--accent-color); padding-bottom: 0.4em; font-size: 1.2em; text-transform: uppercase; letter-spacing: 1px; } .template-technical .skills-list { column-count: 2; column-gap: 1rem; list-style-type: var(--technical-skill-prefix-color) '> '; } .template-technical .skills-list li { padding: 0.1em 0; color: #333; } /* 10. Template: Compact */ .template-compact { --compact-h1-color: #333; /* --compact-h2-color: var(--accent-color); /* Directly use global */ --compact-skill-bg: var(--accent-color); /* Skills use accent bg */ --compact-skill-text-color: white; /* Text on accent bg */ color: #444; } .template-compact .main-content { flex: 3; } .template-compact .sidebar { flex: 1; border-left: 1px solid #ddd; padding-left: 1.5em; font-size: 0.95em; } .template-compact header.cv-header { margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 1px solid #eee; } .template-compact header.cv-header h1 { font-size: 2em; margin-bottom: 0.1em; color: var(--compact-h1-color); } .template-compact header.cv-header p { color: #555; } .template-compact .section h2 { font-size: 1.1em; color: var(--accent-color); margin-bottom: 0.5em; border: none; } .template-compact .skills-list li { padding: 0.2em 0.6em; margin: 0.1em; background-color: var(--compact-skill-bg); color: var(--compact-skill-text-color); border-radius: 3px; display: inline-block; } /* 11. Template: Timeline Focus */ .template-timeline { --timeline-h1-color: #333; --timeline-header-p-color: #555; --timeline-h2-color: #333; /* Section titles are not accent by default */ /* --timeline-line-color: var(--accent-color); /* Directly use global */ /* --timeline-dot-color: var(--accent-color); /* Directly use global */ --timeline-dot-border-color: white; color: #333; } .template-timeline header.cv-header { text-align: center; padding-bottom: 1em; margin-bottom: 2em; } .template-timeline header.cv-header h1{ color: var(--timeline-h1-color); } .template-timeline header.cv-header p{ color: var(--timeline-header-p-color); } .template-timeline .section.experience-section .entry { position: relative; padding-left: 2em; margin-bottom: 1.5em; border-left: 2px solid var(--accent-color); } .template-timeline .section.experience-section .entry::before { content: ''; position: absolute; left: -7px; top: 0; width: 12px; height: 12px; border-radius: 50%; background-color: var(--accent-color); border: 2px solid var(--timeline-dot-border-color); } .template-timeline .section h2 { color: var(--timeline-h2-color); margin-bottom: 1.5em; } .template-timeline .skills-list li { color: #333; background-color: var(--accent-color); color:white; padding: 0.2em 0.5em; margin:0.2em; display:inline-block; border-radius:3px;} /* 12. Template: Photo Focus */ .template-photo-focus { --photofocus-h1-color: #333; /* --photofocus-header-p-color: var(--accent-color); /* Directly use global */ --photofocus-h2-color: #444; /* --photofocus-photo-border-color: var(--accent-color); /* Directly use global */ color: #333; } .template-photo-focus .profile-photo-placeholder { width: 150px; height: 150px; background-color: #e0e0e0; border-radius: 50%; margin: 0 auto 1em auto; border: 3px solid var(--accent-color); } .template-photo-focus header.cv-header { text-align: center; margin-bottom: 1em; } .template-photo-focus header.cv-header h1 { font-size: 2.2em; color: var(--photofocus-h1-color); } .template-photo-focus header.cv-header p { font-size: 1.2em; color: var(--accent-color); } .template-photo-focus .section h2 { color: var(--photofocus-h2-color); border-bottom: 1px solid #eee; padding-bottom: 0.3em; } .template-photo-focus .skills-list li { color: #333; border: 1px solid var(--accent-color); background: none; padding: 0.2em 0.5em; margin:0.2em; display:inline-block;} /* 13. Template: Monochrome Grey (Light) */ .template-monochrome-grey { --monogrey-bg: #f5f5f5; --monogrey-text-base: #333333; --monogrey-h1-color: #111111; --monogrey-header-p-color: #555555; --monogrey-h2-color: #222222; /* H2 not accent by default */ --monogrey-h3-color: #444444; --monogrey-skill-bg: #e0e0e0; --monogrey-skill-text-color: #333333; --monogrey-skill-border-color: #cccccc; /* --monogrey-link-color: var(--accent-color); /* Directly use global */ /* --monogrey-link-hover-color: color-mix(in srgb, var(--accent-color) 80%, black 20%); /* Derived */ --monogrey-border-light: #dddddd; --monogrey-border-medium: #cccccc; } .template-monochrome-grey { background-color: var(--monogrey-bg); color: var(--monogrey-text-base); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .template-monochrome-grey p, .template-monochrome-grey li, .template-monochrome-grey div, .template-monochrome-grey span, .template-monochrome-grey ul, .template-monochrome-grey ol, .template-monochrome-grey td, .template-monochrome-grey th { color: var(--monogrey-text-base); } .template-monochrome-grey header.cv-header { padding: 1.5em 0; border-bottom: 1px solid var(--monogrey-border-medium); margin-bottom: 2em; } .template-monochrome-grey header.cv-header h1 { color: var(--monogrey-h1-color); font-size: 2.8em; text-align: center; } .template-monochrome-grey header.cv-header p { color: var(--monogrey-header-p-color); text-align: center; font-size: 1.2em; } .template-monochrome-grey .section h2 { color: var(--monogrey-h2-color); font-size: 1.3em; border-bottom: 1px solid var(--monogrey-border-light); padding-bottom: 0.4em; text-transform: uppercase; letter-spacing: 1px; } .template-monochrome-grey .section h3 { color: var(--monogrey-h3-color); } .template-monochrome-grey .skills-list li { background-color: var(--monogrey-skill-bg); color: var(--monogrey-skill-text-color); border: 1px solid var(--monogrey-skill-border-color); padding: 0.3em 0.7em; border-radius: 3px; display: inline-block; margin: 0.2em; } .template-monochrome-grey a { color: var(--accent-color); text-decoration: none; } .template-monochrome-grey a:hover { color: color-mix(in srgb, var(--accent-color) 80%, black 20%); text-decoration: underline; } /* 14. Template: Monochrome Light */ .template-monochrome-light { --monolight-bg: #fff; --monolight-text-base: #555; --monolight-h1-color: #222; --monolight-header-p-color: #777; --monolight-h2-color: #333; --monolight-skill-text-color: #666; } .template-monochrome-light { background-color: var(--monolight-bg); color: var(--monolight-text-base); font-family: 'Arial', sans-serif; } .template-monochrome-light header.cv-header { text-align: left; margin-bottom: 2em; padding: 1em 0; } .template-monochrome-light header.cv-header h1 { font-size: 2.5em; color: var(--monolight-h1-color); font-weight: normal; } .template-monochrome-light header.cv-header p { font-size: 1.1em; color: var(--monolight-header-p-color); font-style: italic; } .template-monochrome-light .section h2 { font-size: 1.1em; color: var(--monolight-h2-color); font-weight: bold; border: none; margin-bottom: 0.7em; text-transform: none; } .template-monochrome-light .skills-list { list-style: none; padding-left: 0; } .template-monochrome-light .skills-list li { color: var(--monolight-skill-text-color); padding: 0.1em 0; border: none; background: none; } /* 15. Template: Initials Brand */ .template-initials-brand { /* --initials-logo-bg: var(--accent-color); /* Directly use global */ --initials-logo-text-color: white; /* Text on accent bg */ /* --initials-header-border-color: var(--accent-color); /* Directly use global */ --initials-h1-color: #333; --initials-header-p-color: #555; /* --initials-h2-color: var(--accent-color); /* Directly use global */ color: #333; } .template-initials-brand header.cv-header { display: flex; align-items: center; margin-bottom: 2em; padding-bottom: 1em; border-bottom: 2px solid var(--accent-color); } .template-initials-brand .initials-logo { font-size: 3em; font-weight: bold; color: var(--initials-logo-text-color); background-color: var(--accent-color); width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 0.8em; } .template-initials-brand header.cv-header .header-text h1 { font-size: 2.2em; margin-bottom: 0.1em; color: var(--initials-h1-color); } .template-initials-brand header.cv-header .header-text p { font-size: 1.2em; color: var(--initials-header-p-color); } .template-initials-brand .section h2 { color: var(--accent-color); font-size: 1.4em; margin-bottom: 0.8em; } .template-initials-brand .skills-list li { color: #333; background-color: var(--accent-color); color:white; padding: 0.2em 0.5em; margin:0.2em; display:inline-block; border-radius:3px;} /* 16. Template: Geometric */ .template-geometric { --geometric-header-bg: #f0f0f0; --geometric-h1-color: #333; /* --geometric-header-p-color: var(--accent-color); /* Directly use global */ --geometric-h2-text-color: #333; --geometric-h2-bg: #e9e9e9; /* --geometric-h2-shape-color: var(--accent-color); /* Directly use global for shape */ --geometric-skill-bg: #e9e9e9; /* --geometric-skill-border-color: var(--accent-color); /* Directly use global */ --geometric-skill-text-color: #333; color: #333; } .template-geometric header.cv-header { padding: 2em 1.5em; margin: -10mm -10mm 1.5em -10mm; background-color: var(--geometric-header-bg); clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%); text-align: left; } .template-geometric header.cv-header h1 { color: var(--geometric-h1-color); font-size: 2.7em; } .template-geometric header.cv-header p { color: var(--accent-color); font-size: 1.3em; font-weight: bold; } .template-geometric .section h2 { color: var(--geometric-h2-text-color); background-color: var(--geometric-h2-bg); padding: 0.4em 0.8em 0.4em 1.5em; margin-left: -1.5em; position: relative; font-size: 1.2em; margin-bottom: 1em; } .template-geometric .section h2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: calc(0.6em + 0.4em) 0 calc(0.6em + 0.4em) 1.2em; border-color: transparent transparent transparent var(--accent-color); } .template-geometric .skills-list li { background: var(--geometric-skill-bg); color: var(--geometric-skill-text-color); border-left: 3px solid var(--accent-color); padding: 0.3em 0.8em; margin: 0.3em 0; } /* 17. Template: Newspaper Columns (Revised for Layout Flexibility) - Copied from above */ .template-newspaper { --newspaper-font: 'Georgia', serif; --newspaper-h1-font: 'Playfair Display', serif; --newspaper-h1-color: #111; --newspaper-header-p-color: #555; --newspaper-h2-font: 'Arial Black', sans-serif; --newspaper-h2-color: #333; --newspaper-column-rule-color: #ccc; color: #333; } .template-newspaper { font-family: var(--newspaper-font); } .template-newspaper header.cv-header { text-align: center; border-bottom: 3px double #333; margin-bottom: 1.5em; padding-bottom: 1em; } .template-newspaper header.cv-header h1 { font-family: var(--newspaper-h1-font); font-size: 3em; color: var(--newspaper-h1-color); } .template-newspaper header.cv-header p { font-size: 1.1em; color: var(--newspaper-header-p-color); text-transform: uppercase; letter-spacing: 1px; } .template-newspaper .main-content { column-count: 2; column-gap: 2em; column-rule: 1px solid var(--newspaper-column-rule-color); } .template-newspaper .main-content .section { break-inside: avoid-column; margin-bottom: 1.5em; } .template-newspaper .section h2 { font-family: var(--newspaper-h2-font); font-size: 1.2em; color: var(--newspaper-h2-color); margin-bottom: 0.5em; border: none; } .template-newspaper .skills-list li { color: #333; padding: 0.1em 0; border: 1px solid var(--accent-color); margin: 0.1em; display: inline-block; padding: 0.2em 0.4em;} /* 18. Template: Gradient Splash */ .template-gradient-splash { /* --gradient-start-color: var(--accent-color); /* Directly use global */ --gradient-end-color: color-mix(in srgb, var(--accent-color) 70%, black 30%); /* Darker shade of accent */ --gradient-header-text-color: white; --gradient-h2-color: #333; color: #333; } .template-gradient-splash header.cv-header { background: linear-gradient(135deg, var(--accent-color) 0%, var(--gradient-end-color) 100%); color: var(--gradient-header-text-color); padding: 2.5em 1.5em; margin: -10mm -10mm 1.5em -10mm; text-align: center; } .template-gradient-splash header.cv-header h1 { font-size: 2.8em; margin-bottom: 0.2em; } .template-gradient-splash header.cv-header p { font-size: 1.3em; opacity: 0.9; } .template-gradient-splash .section h2 { font-size: 1.5em; color: var(--gradient-h2-color); padding-bottom: 0.3em; margin-bottom: 0.8em; position: relative; } .template-gradient-splash .section h2::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 50px; background: linear-gradient(135deg, var(--accent-color) 0%, var(--gradient-end-color) 100%); } .template-gradient-splash .skills-list li { color: #333; background-color: var(--accent-color); color:white; border-radius:3px; padding: 0.2em 0.5em; margin:0.2em; display:inline-block;} /* 19. Template: Retro Light */ .template-retro-light { --retrolight-font: 'Press Start 2P', cursive; --retrolight-bg: #e0f0e0; --retrolight-text-color: #003300; --retrolight-header-border-color: #003300; --retrolight-h1-color: #003300; --retrolight-header-p-color: #004d00; --retrolight-h2-color: #003300; --retrolight-h2-prefix-text: "> "; --retrolight-h2-prefix-color: var(--accent-color); /* Prefix color can be accent */ --retrolight-link-color: var(--accent-color); /* Links can be accent */ } .template-retro-light { font-family: var(--retrolight-font); background-color: var(--retrolight-bg); color: var(--retrolight-text-color); padding: 10mm; } .template-retro-light header.cv-header { text-align: left; border: 2px solid var(--retrolight-header-border-color); padding: 1em; margin-bottom: 1.5em; } .template-retro-light header.cv-header h1 { font-size: 1.5em; color: var(--retrolight-h1-color); } .template-retro-light header.cv-header p { font-size: 0.8em; color: var(--retrolight-header-p-color); } .template-retro-light .section h2 { font-size: 1em; color: var(--retrolight-h2-color); margin-bottom: 0.5em; text-transform: uppercase; } .template-retro-light .section h2::before { content: var(--retrolight-h2-prefix-text); color: var(--retrolight-h2-prefix-color); } .template-retro-light .skills-list { list-style: none; padding-left: 0; } .template-retro-light .skills-list li { margin-bottom: 0.3em; color: var(--retrolight-text-color); border: 1px solid var(--accent-color); padding: 0.1em 0.3em;} .template-retro-light a { color: var(--retrolight-link-color); text-decoration: underline; } /* 20. Template: Handwritten Touch */ .template-handwritten-touch { --hw-heading-font: 'Caveat', cursive; --hw-body-font: 'Arial', sans-serif; --hw-h1-color: #2c3e50; /* --hw-header-p-color: var(--accent-color); /* Directly use global */ --hw-h2-color: #34495e; --hw-body-text-color: #333; --hw-skill-text-color: #444; --hw-skill-border-color: var(--accent-color); /* Skill underline is accent */ color: #333; } .template-handwritten-touch { font-family: var(--hw-heading-font); } .template-handwritten-touch header.cv-header { text-align: center; margin-bottom: 2em; } .template-handwritten-touch header.cv-header h1 { font-size: 3.5em; color: var(--hw-h1-color); margin-bottom: 0; } .template-handwritten-touch header.cv-header p { font-size: 1.8em; color: var(--accent-color); margin-top: -0.2em; } .template-handwritten-touch .section h2 { font-size: 2em; color: var(--hw-h2-color); text-align: left; border-bottom: 1px solid #bdc3c7; padding-bottom: 0.2em; margin-bottom: 0.8em; } .template-handwritten-touch .section p, .template-handwritten-touch .section ul li { font-family: var(--hw-body-font); font-size: 1em; color: var(--hw-body-text-color); } .template-handwritten-touch .skills-list li { font-family: var(--hw-heading-font); font-size: 1.4em; margin: 0.1em 0.5em; display: inline-block; padding: 0.1em 0.3em; border-bottom: 1px dashed var(--hw-skill-border-color); color: var(--hw-skill-text-color); } /* 21. Template: Sidebar Accent */ .template-sidebar-accent { --sideaccent-header-bg: #333; --sideaccent-header-text-color: white; --sideaccent-header-p-color: #ccc; --sideaccent-sidebar-bg: #f9f9f9; /* --sideaccent-sidebar-border-color: var(--accent-color); /* Directly use global */ --sideaccent-main-h2-color: #333; /* --sideaccent-sidebar-h2-color: var(--accent-color); /* Directly use global */ color: #333; } .template-sidebar-accent .sidebar { background-color: var(--sideaccent-sidebar-bg); padding: 1.5em; border-left: 3px solid var(--accent-color); color: #444; } .template-sidebar-accent header.cv-header { background-color: var(--sideaccent-header-bg); color: var(--sideaccent-header-text-color); padding: 1.5em; margin: -10mm -10mm 1.5em -10mm; } .template-sidebar-accent header.cv-header h1 { font-size: 2.4em; } .template-sidebar-accent header.cv-header p { color: var(--sideaccent-header-p-color); font-size: 1.2em; } .template-sidebar-accent .main-content .section h2 { color: var(--sideaccent-main-h2-color); border-bottom: 2px solid #eee; padding-bottom: 0.3em; } .template-sidebar-accent .sidebar .section h2 { color: var(--accent-color); font-size: 1.1em; text-transform: uppercase; } .template-sidebar-accent .skills-list li { color: #fff; background-color: var(--accent-color); border-radius: 3px; padding: 0.2em 0.5em; margin:0.2em; display:inline-block;} /* 22. Template: Top Bar Nav Style */ .template-top-bar-nav { /* --topbar-header-bg: var(--accent-color); /* Directly use global */ --topbar-header-text-color: white; /* Text on accent bg */ --topbar-h2-color: #333; /* --topbar-h2-border-color: var(--accent-color); /* Directly use global */ color: #333; } .template-top-bar-nav header.cv-header { background-color: var(--accent-color); color: var(--topbar-header-text-color); padding: 0.8em 1.5em; margin: -10mm -10mm 1.5em -10mm; display: flex; justify-content: space-between; align-items: center; } .template-top-bar-nav header.cv-header .name-title h1 { font-size: 1.8em; margin: 0; } .template-top-bar-nav header.cv-header .name-title p { font-size: 1em; margin: 0; opacity: 0.8; } .template-top-bar-nav header.cv-header .contact-info { font-size: 0.9em; text-align: right; } .template-top-bar-nav header.cv-header .contact-info p { margin: 0.1em 0; } .template-top-bar-nav .section h2 { font-size: 1.6em; color: var(--topbar-h2-color); margin-bottom: 0.8em; border-left: 4px solid var(--accent-color); padding-left: 0.5em; } .template-top-bar-nav .skills-list li { color: #fff; background-color: var(--accent-color); border-radius: 20px; padding: 0.3em 0.8em; margin:0.2em; display:inline-block;} /* 23. Template: Boxed Sections */ .template-boxed-sections { --boxed-outer-bg: #f7f7f7; --boxed-section-bg: white; --boxed-header-h1-color: #333; --boxed-header-p-color: #555; /* --boxed-h2-color: var(--accent-color); /* Directly use global */ color: #444; } .template-boxed-sections { background-color: var(--boxed-outer-bg); } .template-boxed-sections #cv-content { padding: 10mm; } .template-boxed-sections header.cv-header { background-color: var(--boxed-section-bg); padding: 1.5em; margin-bottom: 1.5em; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-align: center; } .template-boxed-sections header.cv-header h1 { color: var(--boxed-header-h1-color); } .template-boxed-sections header.cv-header p { color: var(--boxed-header-p-color); } .template-boxed-sections .section { background-color: var(--boxed-section-bg); padding: 1.5em; margin-bottom: 1.5em; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .template-boxed-sections .section h2 { color: var(--accent-color); font-size: 1.3em; margin-top: 0; margin-bottom: 1em; padding-bottom: 0.5em; border-bottom: 1px solid #eee; } .template-boxed-sections .skills-list li { color: #fff; background-color: var(--accent-color); border-radius:3px; padding: 0.2em 0.5em; margin:0.2em; display:inline-block;} /* 24. Template: Icon Heavy */ .template-icon-heavy { --iconheavy-h2-color: #2c3e50; /* --iconheavy-h2-icon-color: var(--accent-color); /* Directly use global */ --iconheavy-h1-color: #333; --iconheavy-contact-icon-color: #555; /* Contact icons subdued */ /* --iconheavy-skill-icon-color: var(--accent-color); /* Directly use global */ --iconheavy-skill-text-color: #444; color: #333; } .template-icon-heavy .section h2 { display: flex; align-items: center; font-size: 1.4em; color: var(--iconheavy-h2-color); margin-bottom: 0.8em; } .template-icon-heavy .section h2 i { color: var(--accent-color); font-size: 1.2em; margin-right: 0.5em; width: 1.5em; text-align: center; } .template-icon-heavy header.cv-header { text-align: center; margin-bottom: 2em; } .template-icon-heavy header.cv-header h1 { font-size: 2.8em; color: var(--iconheavy-h1-color); } .template-icon-heavy header.cv-header p { color: #555; } .template-icon-heavy .contact-info p, .template-icon-heavy .contact-info li { color: #444; } .template-icon-heavy .contact-info p i, .template-icon-heavy .contact-info li i { margin-right: 0.5em; color: var(--iconheavy-contact-icon-color); } .template-icon-heavy .skills-list { list-style: none; padding-left: 0; } .template-icon-heavy .skills-list li { padding: 0.3em 0; border-bottom: 1px solid #f0f0f0; color: var(--iconheavy-skill-text-color); } .template-icon-heavy .skills-list li i { margin-right: 0.5em; color: var(--accent-color); } /* 25. Template: Full Width Image Header */ .template-full-width-image-header { --fullwidthimg-header-text-color: white; --fullwidthimg-h2-color: #333; color: #333; } .template-full-width-image-header header.cv-header { height: 200px; background-image: url('placeholder-cv-header-image.jpg'); background-size: cover; background-position: center; position: relative; color: var(--fullwidthimg-header-text-color); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: -10mm -10mm 1.5em -10mm; } .template-full-width-image-header header.cv-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0, 0.5); } .template-full-width-image-header header.cv-header h1, .template-full-width-image-header header.cv-header p { position: relative; z-index: 1; } .template-full-width-image-header header.cv-header h1 { font-size: 3em; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); } .template-full-width-image-header header.cv-header p { font-size: 1.4em; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); } .template-full-width-image-header .section h2 { color: var(--fullwidthimg-h2-color); font-size: 1.5em; } .template-full-width-image-header .skills-list li { color: #fff; background-color: var(--accent-color); border-radius:3px; padding: 0.2em 0.5em; margin:0.2em; display:inline-block;} /* 26. Template: Pastel Dream */ .template-pastel-dream { --pastel-bg: #fdf5f8; --pastel-font: 'Quicksand', sans-serif; --pastel-header-bg: #e6f7ff; --pastel-h1-color: #5d54a4; --pastel-header-p-color: var(--accent-color); /* Header p can be accent */ --pastel-h2-color: #ff8c94; /* Secondary pastel */ --pastel-skill-bg: var(--accent-color); /* Skills use main accent */ --pastel-skill-text-color: white; /* Text on accent */ color: #6a609f; } .template-pastel-dream { background-color: var(--pastel-bg); font-family: var(--pastel-font); } .template-pastel-dream header.cv-header { background-color: var(--pastel-header-bg); padding: 1.5em; text-align: center; margin: -10mm -10mm 1.5em -10mm; border-bottom: 3px solid var(--accent-color); } .template-pastel-dream header.cv-header h1 { color: var(--pastel-h1-color); font-size: 2.5em; } .template-pastel-dream header.cv-header p { color: var(--pastel-header-p-color); font-size: 1.2em; } .template-pastel-dream .section h2 { color: var(--pastel-h2-color); font-size: 1.4em; border-bottom: 2px dotted color-mix(in srgb, var(--pastel-h2-color) 60%, white 40%); padding-bottom: 0.3em; margin-bottom: 1em; } .template-pastel-dream .skills-list li { background-color: var(--pastel-skill-bg); color: var(--pastel-skill-text-color); padding: 0.4em 0.8em; border-radius: 15px; margin: 0.3em; display: inline-block; border: 1px solid color-mix(in srgb, var(--pastel-skill-bg) 80%, black 20%); } /* 27. Template: Industrial */ .template-industrial { --industrial-font: 'Roboto Condensed', sans-serif; --industrial-bg: #e0e0e0; --industrial-text-color: #212121; --industrial-header-bg: #424242; --industrial-header-text-color: #f5f5f5; --industrial-header-p-color: #bdbdbd; /* --industrial-header-border-color: var(--accent-color); /* Directly use global */ --industrial-h2-color: #303030; --industrial-skill-bg: var(--accent-color); /* Skills use accent */ --industrial-skill-text-color: white; /* Text on accent */ } .template-industrial { font-family: var(--industrial-font); background-color: var(--industrial-bg); color: var(--industrial-text-color); } .template-industrial header.cv-header { background-color: var(--industrial-header-bg); color: var(--industrial-header-text-color); padding: 1.5em; margin: -10mm -10mm 1.5em -10mm; border-bottom: 5px solid var(--accent-color); } .template-industrial header.cv-header h1 { font-size: 2.6em; text-transform: uppercase; letter-spacing: 1px; } .template-industrial header.cv-header p { color: var(--industrial-header-p-color); font-size: 1.1em; text-transform: uppercase; } .template-industrial .section h2 { color: var(--industrial-h2-color); font-size: 1.2em; text-transform: uppercase; border-top: 1px solid #757575; border-bottom: 1px solid #757575; padding: 0.5em 0; margin-bottom: 1em; letter-spacing: 0.5px; } .template-industrial .skills-list li { background-color: var(--industrial-skill-bg); color: var(--industrial-skill-text-color); padding: 0.3em 1em; margin: 0.2em; display: inline-block; text-transform: uppercase; font-size: 0.9em; } /* 28. Template: Earthy Tones */ .template-earthy-tones { --earthy-bg: #f5f0e1; --earthy-text-color: #5a3e2b; --earthy-font: 'Merriweather', serif; --earthy-h1-color: #4a7c59; /* Specific theme color */ --earthy-header-p-color: var(--accent-color); /* Header p is accent */ --earthy-h2-color: #4a7c59; /* Specific theme color */ --earthy-skill-bg: var(--accent-color); /* Skills are accent */ --earthy-skill-text-color: white; /* Text on accent */ --earthy-secondary-border: #c8ad7f; } .template-earthy-tones { background-color: var(--earthy-bg); color: var(--earthy-text-color); font-family: var(--earthy-font); } .template-earthy-tones header.cv-header { text-align: center; padding-bottom: 1.5em; margin-bottom: 2em; } .template-earthy-tones header.cv-header h1 { color: var(--earthy-h1-color); font-size: 2.7em; } .template-earthy-tones header.cv-header p { color: var(--earthy-header-p-color); font-size: 1.2em; } .template-earthy-tones .section h2 { color: var(--earthy-h2-color); border-bottom: 2px solid var(--earthy-secondary-border); padding-bottom: 0.4em; font-size: 1.4em; font-weight: bold; } .template-earthy-tones .skills-list { text-align: center; } .template-earthy-tones .skills-list li { background-color: var(--earthy-skill-bg); color: var(--earthy-skill-text-color); padding: 0.4em 0.9em; border-radius: 5px; margin: 0.3em; display: inline-block; border: 1px solid color-mix(in srgb, var(--earthy-skill-bg) 80%, black 20%);} /* 29. Template: Data-Driven / Analytical */ .template-data-driven { --data-font: 'Lato', sans-serif; --data-header-bg: #eef1f5; /* --data-header-border-color: var(--accent-color); /* Directly use global */ --data-h1-color: #2d3748; --data-header-p-color: #4a5568; /* --data-h2-color: var(--accent-color); /* Directly use global */ --data-bullet-char: '▪'; /* --data-bullet-color: var(--accent-color); /* Directly use global for editor target */ --data-skill-bg: var(--accent-color); /* Skills accent bg */ --data-skill-text-color: white; /* Text on accent */ color: #333; } .template-data-driven { font-family: var(--data-font); line-height: 1.6; } .template-data-driven header.cv-header { background-color: var(--data-header-bg); padding: 1.5em; margin-bottom: 2em; border-left: 5px solid var(--accent-color); } .template-data-driven header.cv-header h1 { font-size: 2.4em; color: var(--data-h1-color); margin-bottom: 0.1em; } .template-data-driven header.cv-header p { font-size: 1.1em; color: var(--data-header-p-color); } .template-data-driven .section h2 { font-size: 1.2em; color: var(--accent-color); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1em; padding-bottom: 0.3em; border-bottom: 1px solid #cbd5e0; } .template-data-driven ul { list-style-type: none; padding-left: 0; } .template-data-driven ul li { padding-left: 1.2em; position: relative; margin-bottom: 0.5em; } .template-data-driven ul li::before { content: var(--data-bullet-char); position: absolute; left: 0; color: var(--accent-color); font-size: 0.9em; } .template-data-driven .skills-list li { background-color: var(--data-skill-bg); color: var(--data-skill-text-color); padding: 0.2em 0.8em; margin: 0.2em; border-radius: 12px; display: inline-block; font-size: 0.9em; border: 1px solid color-mix(in srgb, var(--data-skill-bg) 80%, black 20%); } /* 30. Template: Asymmetric Layout */ .template-asymmetric { --asym-h1-color: #333; --asym-header-p-color: #555; /* --asym-h2-color: var(--accent-color); /* Directly use global */ --asym-skill-border-color: #ccc; /* --asym-skill-accent-border-color: var(--accent-color); /* Directly use global */ --asym-skill-text-color: #444; color: #333; } .template-asymmetric header.cv-header { padding: 2em 0; margin-bottom: 2.5em; position: relative; overflow: hidden; } .template-asymmetric header.cv-header::before { content: ''; position: absolute; top: -20px; left: 60%; width: 50%; height: 150%; background-color: var(--accent-color); opacity: 0.1; transform: skewX(-15deg); z-index: 0; } .template-asymmetric header.cv-header .header-content { position: relative; z-index: 1; width: 70%; } .template-asymmetric header.cv-header h1 { font-size: 3em; color: var(--asym-h1-color); margin-left: 0.5em; } .template-asymmetric header.cv-header p { font-size: 1.3em; color: var(--asym-header-p-color); margin-left: 2em; } .template-asymmetric .section { margin-bottom: 2em; } .template-asymmetric .section h2 { font-size: 1.6em; color: var(--accent-color); text-align: right; margin-right: 10%; border: none; } .template-asymmetric .skills-list { text-align: right; padding-right: 5%; } .template-asymmetric .skills-list li { background: none; color: var(--asym-skill-text-color); border: 1px solid var(--asym-skill-border-color); border-right: 3px solid var(--accent-color); padding: 0.3em 0.8em; margin: 0.3em; display: inline-block; } /* 31. Template: Luxury Brand */ .template-luxury-brand { --luxury-font: 'Cormorant Garamond', serif; --luxury-bg: #fdfcfb; --luxury-text-base: #3a3a3a; --luxury-h1-font: 'Playfair Display SC', serif; --luxury-h1-color: #2b2b2b; --luxury-header-p-color: #707070; --luxury-h2-color: #3a3a3a; --luxury-skill-text-color: #5a5a5a; --luxury-accent-line-color: var(--accent-color); /* Accent line uses global accent */ --luxury-skill-border-color: color-mix(in srgb, var(--accent-color) 60%, white 40%); /* Lighter accent for skill border */ } .template-luxury-brand { font-family: var(--luxury-font); background-color: var(--luxury-bg); color: var(--luxury-text-base); } .template-luxury-brand header.cv-header { text-align: center; padding: 2.5em 0; margin-bottom: 2.5em; } .template-luxury-brand header.cv-header h1 { font-family: var(--luxury-h1-font); font-size: 2.8em; font-weight: 600; letter-spacing: 2px; color: var(--luxury-h1-color); margin-bottom: 0.1em; } .template-luxury-brand header.cv-header p { font-size: 1.1em; color: var(--luxury-header-p-color); text-transform: uppercase; letter-spacing: 3px; font-weight: 300; } .template-luxury-brand .section { margin-bottom: 2.5em; } .template-luxury-brand .section h2 { text-align: center; font-size: 1.3em; font-weight: 500; color: var(--luxury-h2-color); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 1.5em; position: relative; padding-bottom: 0.5em; } .template-luxury-brand .section h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background-color: var(--luxury-accent-line-color); } .template-luxury-brand .skills-list { text-align: center; } .template-luxury-brand .skills-list li { display: inline-block; font-size: 0.9em; color: var(--luxury-skill-text-color); padding: 0.3em 1em; margin: 0.2em 0.5em; border: 1px solid var(--luxury-skill-border-color); border-radius: 2px; } /* 32. Template: Code Syntax Light */ .template-code-syntax-light { --cslight-font: 'Fira Code', 'Source Code Pro', monospace; --cslight-bg: #f8f8f8; --cslight-text-base: #333333; --cslight-h1-color: var(--accent-color); /* H1 is accent */ --cslight-h1-prefix-text: "class "; --cslight-h1-prefix-color: #aa0077; /* Secondary color for prefix, editor targets this var */ --cslight-header-p-color: #777777; --cslight-header-p-prefix-text: "// "; --cslight-header-p-prefix-color: #777777; /* Editor targets this var */ --cslight-h2-color: #b8860b; --cslight-h2-prefix-text: "def "; --cslight-h2-prefix-color: #aa0077; /* Editor targets this var */ --cslight-h2-suffix-text: "():"; --cslight-h2-suffix-color: #333333; /* Editor targets this var */ --cslight-skill-text-color: #008000; --cslight-skill-prefix-text: "- "; --cslight-skill-prefix-color: var(--accent-color); /* Skill prefix is accent, editor targets this var */ --cslight-link-color: var(--accent-color); /* Links are accent */ --cslight-border-color: #dddddd; } .template-code-syntax-light { font-family: var(--cslight-font); background-color: var(--cslight-bg); color: var(--cslight-text-base); font-size: 0.95em; } .template-code-syntax-light #cv-content { padding: 10mm; } .template-code-syntax-light header.cv-header { border: 1px solid var(--cslight-border-color); padding: 1em; margin-bottom: 2em; } .template-code-syntax-light header.cv-header h1 { color: var(--cslight-h1-color); font-size: 1.8em; } .template-code-syntax-light header.cv-header h1::before { content: var(--cslight-h1-prefix-text); color: var(--cslight-h1-prefix-color); } .template-code-syntax-light header.cv-header p { color: var(--cslight-header-p-color); font-style: italic; } .template-code-syntax-light header.cv-header p::before { content: var(--cslight-header-p-prefix-text); color: var(--cslight-header-p-prefix-color); } .template-code-syntax-light .section h2 { color: var(--cslight-h2-color); font-size: 1.3em; margin-bottom: 0.8em; } .template-code-syntax-light .section h2::before { content: var(--cslight-h2-prefix-text); color: var(--cslight-h2-prefix-color); } .template-code-syntax-light .section h2::after { content: var(--cslight-h2-suffix-text); color: var(--cslight-h2-suffix-color); } .template-code-syntax-light .skills-list { list-style-type: none; padding-left: 1em; } .template-code-syntax-light .skills-list li { color: var(--cslight-skill-text-color); margin-bottom: 0.2em; } .template-code-syntax-light .skills-list li::before { content: var(--cslight-skill-prefix-text); color: var(--cslight-skill-prefix-color); } .template-code-syntax-light a { color: var(--cslight-link-color); text-decoration: underline; } /* 33. Template: Blueprint Light */ .template-blueprint-light { --bplight-bg: #e8f0f8; --bplight-text-base: #003366; --bplight-font: 'Architects Daughter', 'Segoe UI Symbol', sans-serif; --bplight-h1-color: #002244; --bplight-header-p-color: var(--accent-color); /* Header P is accent */ --bplight-h2-color: #002244; --bplight-skill-text-color: #003366; --bplight-skill-border-color: var(--accent-color); /* Skill border is accent */ --bplight-skill-bg-color: rgba(173, 216, 230, 0.3); --bplight-content-border-color: #adcce6; --bplight-header-divider-color: #8cb3d9; } .template-blueprint-light { background-color: var(--bplight-bg); color: var(--bplight-text-base); font-family: var(--bplight-font); } .template-blueprint-light #cv-content { border: 2px solid var(--bplight-content-border-color); padding: 10mm; } .template-blueprint-light header.cv-header { text-align: left; padding-bottom: 1em; margin-bottom: 2em; border-bottom: 1px dashed var(--bplight-header-divider-color); } .template-blueprint-light header.cv-header h1 { color: var(--bplight-h1-color); font-size: 2.5em; text-transform: uppercase; } .template-blueprint-light header.cv-header p { color: var(--bplight-header-p-color); font-size: 1.1em; } .template-blueprint-light .section h2 { color: var(--bplight-h2-color); font-size: 1.2em; text-transform: uppercase; padding: 0.3em 0.5em; border: 1px solid var(--bplight-header-divider-color); margin-bottom: 1em; display: inline-block; } .template-blueprint-light .section p, .template-blueprint-light .section ul { line-height: 1.7; } .template-blueprint-light .skills-list { list-style: none; padding-left: 0; } .template-blueprint-light .skills-list li { padding: 0.2em 0.5em; margin-bottom: 0.3em; border-left: 2px solid var(--bplight-skill-border-color); background-color: var(--bplight-skill-bg-color); color: var(--bplight-skill-text-color); } /* 34. Template: Minimal Serif */ .template-minimal-serif { --minserif-font: 'Lora', serif; --minserif-text-base: #333333; --minserif-bg: #ffffff; --minserif-h1-color: #222222; --minserif-header-p-color: #666666; /* Subdued */ --minserif-h2-color: var(--accent-color); /* H2 is accent */ --minserif-skill-text-color: #555555; --minserif-skill-separator-text: "•"; --minserif-skill-separator-color: var(--accent-color); /* Separator is accent, editor targets this var */ } .template-minimal-serif { font-family: var(--minserif-font); color: var(--minserif-text-base); background-color: var(--minserif-bg); line-height: 1.7; } .template-minimal-serif header.cv-header { text-align: left; margin-bottom: 2.5em; padding-top: 1em; } .template-minimal-serif header.cv-header h1 { font-size: 2.2em; font-weight: 400; margin-bottom: 0.1em; color: var(--minserif-h1-color); } .template-minimal-serif header.cv-header p { font-size: 1.1em; color: var(--minserif-header-p-color); font-style: italic; } .template-minimal-serif .section { margin-bottom: 2em; } .template-minimal-serif .section h2 { font-size: 1.3em; font-weight: 600; color: var(--minserif-h2-color); margin-bottom: 0.7em; border: none; } .template-minimal-serif .skills-list { list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; gap: 0.5em 1em; } .template-minimal-serif .skills-list li { color: var(--minserif-skill-text-color); font-size: 0.95em; } .template-minimal-serif .skills-list li:not(:last-child)::after { content: var(--minserif-skill-separator-text); margin-left: 1em; color: var(--minserif-skill-separator-color); } /* 35. Template: Vibrant Accent (Revised to use global --accent-color) - Copied from above */ .template-vibrant-accent { --vibrant-font: 'Open Sans', sans-serif; --vibrant-text-base: #333; --vibrant-h1-color: #111; --vibrant-header-p-color: #555; --vibrant-h2-color: #222; /* --vibrant-skill-bg: var(--accent-color); /* Directly use global */ --vibrant-skill-text-color: white; /* --vibrant-link-color: var(--accent-color); /* Directly use global */ color: #333; } .template-vibrant-accent { font-family: var(--vibrant-font); color: var(--vibrant-text-base); } .template-vibrant-accent header.cv-header { padding: 2em 0; margin-bottom: 2em; text-align: center; border-bottom: 3px solid var(--accent-color); } .template-vibrant-accent header.cv-header h1 { font-size: 3em; color: var(--vibrant-h1-color); margin-bottom: 0.1em; } .template-vibrant-accent header.cv-header p { font-size: 1.3em; color: var(--vibrant-header-p-color); font-weight: 300; } .template-vibrant-accent .section h2 { font-size: 1.5em; color: var(--vibrant-h2-color); margin-bottom: 1em; padding-left: 1em; border-left: 4px solid var(--accent-color); } .template-vibrant-accent .skills-list { display: flex; flex-wrap: wrap; gap: 0.5em; } .template-vibrant-accent .skills-list li { background-color: var(--accent-color); color: var(--vibrant-skill-text-color); padding: 0.4em 1em; border-radius: 20px; font-size: 0.9em; font-weight: 600; } .template-vibrant-accent a { color: var(--accent-color); text-decoration: none; font-weight: bold; } .template-vibrant-accent a:hover { text-decoration: underline; }