juanatsap
ed0760fe3f
- Add companyURL field to Experience model (optional) - Update cv-content.html template to display company name with conditional link - Add company-link CSS styling for clickable company names - Add companyURL data for major companies (Olympic Broadcasting, AENA, SAP, Gigya, Everis, Indra) - Companies without URLs display as plain text, maintaining flexibility This addresses the issue where company names were missing from the experience section and ensures links are included throughout the CV as per the original React version.
1041 lines
19 KiB
CSS
1041 lines
19 KiB
CSS
/* CV Design - Original Style Recreation */
|
|
|
|
/* Import Quicksand Font */
|
|
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;600&display=swap');
|
|
|
|
:root {
|
|
--bg-gray: rgb(82, 86, 89);
|
|
--sidebar-gray: #d1d4d2;
|
|
--black-bar: #2b2b2b;
|
|
--paper-white: #ffffff;
|
|
--text-dark: rgb(0, 0, 0);
|
|
--text-gray: rgb(51, 51, 51);
|
|
--accent-blue: #0066cc;
|
|
--border-gray: #dddddd;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
|
|
background-color: var(--bg-gray);
|
|
color: rgb(41, 43, 44);
|
|
line-height: 1.5;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent-blue);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Single Black Top Bar */
|
|
.action-bar {
|
|
background: var(--black-bar);
|
|
color: white;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.action-bar-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem 2rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.language-toggle {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-self: start;
|
|
}
|
|
|
|
.lang-btn {
|
|
padding: 0.4rem 1rem;
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
background: transparent;
|
|
color: white;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
text-transform: capitalize;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.lang-btn:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
border-color: rgba(255,255,255,0.5);
|
|
}
|
|
|
|
.lang-btn.active {
|
|
background: #27ae60 !important;
|
|
border-color: #27ae60 !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.export-btn {
|
|
padding: 0.4rem 1rem;
|
|
background: transparent;
|
|
color: white;
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 400;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none; /* For anchor tags */
|
|
}
|
|
|
|
.export-btn:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
border-color: rgba(255,255,255,0.5);
|
|
text-decoration: none; /* Override default anchor hover */
|
|
}
|
|
|
|
/* CV Length Toggle - Center of action bar */
|
|
.cv-length-toggle {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-self: center;
|
|
}
|
|
|
|
.length-btn {
|
|
padding: 0.4rem 1rem;
|
|
border: 1px solid rgba(255,255,255,0.4);
|
|
background: rgba(255,255,255,0.1);
|
|
color: white;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.length-btn:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
border-color: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
.length-btn.active {
|
|
background: white;
|
|
color: #1a1a1a;
|
|
border-color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Action buttons on right */
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
justify-self: end;
|
|
}
|
|
|
|
/* Loading Indicator */
|
|
.htmx-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.htmx-indicator.htmx-request {
|
|
display: inline-block;
|
|
}
|
|
|
|
.loader {
|
|
border: 2px solid #f3f3f3;
|
|
border-top: 2px solid white;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Main CV Container */
|
|
.cv-container {
|
|
width: 100%;
|
|
max-width: 100%; /* Full width to accommodate pages */
|
|
margin: 0 auto;
|
|
padding: 100px 0 0 0; /* Top padding to prevent sticky action bar overlap */
|
|
display: block; /* Changed from flex */
|
|
}
|
|
|
|
/* CV Paper - Container for two-page layout */
|
|
.cv-paper {
|
|
width: 100%;
|
|
background: transparent; /* Remove white background - each page has its own */
|
|
box-shadow: none; /* Remove shadow - each page has its own */
|
|
margin: 0;
|
|
position: relative;
|
|
display: block; /* Changed from grid to block for stacking pages */
|
|
min-height: auto; /* Changed from 100vh */
|
|
}
|
|
|
|
/* Page break helpers */
|
|
.page-break {
|
|
page-break-after: always;
|
|
break-after: page;
|
|
}
|
|
|
|
.avoid-break {
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
/* Sidebar - Left column */
|
|
.cv-sidebar {
|
|
background: var(--sidebar-gray);
|
|
padding: 2rem 1.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.sidebar-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-size: 1.3em;
|
|
font-weight: 500;
|
|
line-height: 1.2em;
|
|
margin-bottom: 8px;
|
|
padding: 8px 0;
|
|
color: rgb(51, 51, 51);
|
|
}
|
|
|
|
.sidebar-content {
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.skill-item {
|
|
margin-bottom: 0.3rem;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
/* Main Content - Right column */
|
|
.cv-main {
|
|
background: var(--paper-white);
|
|
padding: 2rem 2.5rem;
|
|
}
|
|
|
|
/* Professional Title Badges - Spans Both Columns */
|
|
.cv-title-badges-header {
|
|
grid-column: 1 / -1; /* Span all columns */
|
|
background: #303030 !important; /* Elegant dark gray */
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 0;
|
|
border-bottom: 2px solid #34495e;
|
|
}
|
|
|
|
.title-badge {
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
color: #ccc;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.badge-separator {
|
|
color: #ccc;
|
|
font-weight: normal;
|
|
padding: 0 15px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
/* Header with photo and name */
|
|
.cv-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.cv-header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.cv-header-left {
|
|
flex: 1;
|
|
}
|
|
|
|
.cv-photo {
|
|
width: 150px;
|
|
height: 200px;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
border: 3px solid white;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.cv-photo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.cv-name {
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-size: 2.2em;
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
margin-bottom: 8px;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
.cv-experience-years {
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
line-height: 1.5;
|
|
color: rgb(0, 0, 0);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Intro/Excerpt Text - Positioned inside header, matching old React CV */
|
|
.intro-text {
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-size: 1.0em;
|
|
line-height: 1.6;
|
|
color: rgb(51, 51, 51);
|
|
margin-top: 20px;
|
|
text-align: justify;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Sections */
|
|
.cv-section {
|
|
margin-bottom: 2rem;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-size: 1.3em;
|
|
font-weight: 500;
|
|
line-height: 1.2em;
|
|
margin: 10px 0;
|
|
padding: 0;
|
|
color: rgb(51, 51, 51);
|
|
}
|
|
|
|
.summary-text {
|
|
font-family: 'Quicksand', sans-serif;
|
|
line-height: 1.5;
|
|
text-align: justify;
|
|
font-size: 0.9em;
|
|
font-weight: 400;
|
|
color: rgb(0, 0, 0);
|
|
}
|
|
|
|
/* Experience */
|
|
.experience-item {
|
|
margin-bottom: 1.5rem;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.experience-header {
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.experience-title-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.position {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.experience-period {
|
|
color: var(--text-gray);
|
|
font-size: 0.85rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
.short-desc {
|
|
color: var(--text-dark);
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.responsibilities {
|
|
list-style: none;
|
|
margin-top: 0.5rem;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.responsibilities li {
|
|
padding-left: 1.2rem;
|
|
margin-bottom: 0.4rem;
|
|
position: relative;
|
|
font-size: 0.9rem;
|
|
color: var(--text-dark);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.responsibilities li:before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--text-gray);
|
|
}
|
|
|
|
/* Education */
|
|
.education-item {
|
|
margin-bottom: 1rem;
|
|
font-size: 0.9rem;
|
|
line-height: 1.6;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
|
|
/* Languages */
|
|
.languages-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.language-item {
|
|
font-size: 0.9rem;
|
|
color: var(--text-dark);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.language-item small {
|
|
display: block;
|
|
font-size: 0.8em;
|
|
margin-top: 0.2rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Courses */
|
|
.course-item {
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.8rem;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.course-item:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.course-item strong {
|
|
font-size: 0.95em;
|
|
color: var(--text-dark);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.course-item small {
|
|
display: block;
|
|
font-size: 0.85em;
|
|
color: var(--text-gray);
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.course-desc {
|
|
font-size: 0.85em;
|
|
color: var(--text-gray);
|
|
margin-top: 0.4rem;
|
|
line-height: 1.4;
|
|
text-align: justify;
|
|
}
|
|
|
|
/* References */
|
|
.reference-item {
|
|
margin-bottom: 0.6rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.reference-item a {
|
|
font-size: 0.9em;
|
|
color: var(--accent-blue);
|
|
text-decoration: none;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.reference-item a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.ref-type {
|
|
display: block;
|
|
font-size: 0.8em;
|
|
color: var(--text-gray);
|
|
font-style: italic;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
|
|
/* CV Version Toggle Animations */
|
|
@keyframes fadeInGrow {
|
|
from {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
transform: scaleY(0.8);
|
|
transform-origin: top;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
max-height: 5000px;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutShrink {
|
|
from {
|
|
opacity: 1;
|
|
max-height: 5000px;
|
|
transform: scaleY(1);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
max-height: 0;
|
|
transform: scaleY(0.8);
|
|
transform-origin: top;
|
|
}
|
|
}
|
|
|
|
/* Elements that appear/disappear */
|
|
.long-only,
|
|
.short-desc {
|
|
overflow: hidden;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Short CV - Hide detailed content with animation */
|
|
.cv-short .long-only {
|
|
display: none;
|
|
animation: fadeOutShrink 0.3s ease-in-out;
|
|
}
|
|
|
|
.cv-short .short-desc {
|
|
display: block;
|
|
animation: fadeInGrow 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Long CV - Hide short descriptions with animation */
|
|
.cv-long .short-desc,
|
|
.short-desc {
|
|
display: none;
|
|
animation: fadeOutShrink 0.3s ease-in-out;
|
|
}
|
|
|
|
.cv-long .long-only {
|
|
display: block;
|
|
animation: fadeInGrow 0.3s ease-in-out;
|
|
}
|
|
|
|
.cv-long .responsibilities {
|
|
display: block;
|
|
animation: fadeInGrow 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Responsive - tablet/mobile */
|
|
@media (max-width: 900px) {
|
|
.cv-paper {
|
|
grid-template-columns: 1fr;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.cv-sidebar {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
.cv-main {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
.cv-name {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.cv-photo {
|
|
width: 120px;
|
|
height: 150px;
|
|
}
|
|
|
|
.action-bar-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.language-toggle,
|
|
.cv-length-toggle,
|
|
.action-buttons {
|
|
justify-self: center !important;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.experience-title-line {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.intro-text {
|
|
font-size: 0.9em;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
|
|
.no-print {}
|
|
|
|
/* Smooth Transitions for HTMX Swaps */
|
|
.cv-paper {
|
|
transition: opacity 200ms ease-in-out;
|
|
}
|
|
|
|
.cv-paper.htmx-swapping {
|
|
opacity: 0;
|
|
}
|
|
|
|
.cv-paper.htmx-settling {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Focus Styles for Accessibility */
|
|
button:focus,
|
|
a:focus {
|
|
outline: 2px solid var(--accent-blue);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Loading indicator animation */
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Error Toast */
|
|
.error-toast {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
background: #fee2e2;
|
|
color: #dc2626;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #dc2626;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
max-width: 400px;
|
|
z-index: 1000;
|
|
animation: slideIn 0.3s ease-out;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(120%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.error-icon {
|
|
font-size: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.error-toast button.error-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
color: #dc2626;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 0.2s;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.error-toast button.error-close:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.error-toast button.error-close:focus {
|
|
outline: 2px solid #dc2626;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Mobile responsive error toast */
|
|
@media (max-width: 768px) {
|
|
.error-toast {
|
|
left: 1rem;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
/* ===============================================
|
|
TWO-PAGE LAYOUT STYLES
|
|
=============================================== */
|
|
|
|
/* Page Container - Each CV page */
|
|
.cv-page {
|
|
background: var(--paper-white);
|
|
max-width: 1200px;
|
|
margin: 2rem auto;
|
|
box-shadow: 2px 2px 9px rgba(0,0,0,0.5);
|
|
border: 1px solid #333;
|
|
transform: scale(0.95);
|
|
transform-origin: top center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
/* Page Content Grid */
|
|
.page-content {
|
|
display: grid;
|
|
}
|
|
|
|
/* Page 1: Left sidebar + Main content */
|
|
.page-1 .page-content {
|
|
grid-template-columns: 300px 1fr;
|
|
}
|
|
|
|
/* Page 2: Main content + Right sidebar */
|
|
.page-2 .page-content {
|
|
grid-template-columns: 1fr 300px;
|
|
}
|
|
|
|
/* Sidebar positioning */
|
|
.cv-sidebar-left {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.cv-sidebar-right {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
/* Main content positioning */
|
|
.page-1 .cv-main {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.page-2 .cv-main {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
/* ===============================================
|
|
FOOTER STYLES
|
|
=============================================== */
|
|
|
|
.cv-footer {
|
|
background: #303030;
|
|
color: #ccc;
|
|
padding: 20px 0;
|
|
margin: 0;
|
|
grid-column: 1 / -1; /* Span all columns */
|
|
}
|
|
|
|
.footer-content {
|
|
list-style: none;
|
|
text-align: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.footer-content li {
|
|
display: inline-block;
|
|
margin: 0;
|
|
}
|
|
|
|
.footer-content li > div {
|
|
display: inline-block;
|
|
margin: 0 20px;
|
|
text-align: left;
|
|
}
|
|
|
|
.footer-label {
|
|
width: 200px;
|
|
font-size: 1.7em;
|
|
}
|
|
|
|
.footer-value {
|
|
width: 450px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.footer-value b {
|
|
font-weight: normal;
|
|
font-size: 1.7em;
|
|
}
|
|
|
|
.footer-separator {
|
|
position: relative;
|
|
left: -4%;
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
.footer-separator i {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.cv-footer a {
|
|
color: inherit;
|
|
}
|
|
|
|
.cv-footer a:hover {
|
|
color: #0275d8;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ===============================================
|
|
PRINT STYLES - TWO-PAGE LAYOUT
|
|
=============================================== */
|
|
|
|
@media print {
|
|
body {
|
|
background: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.action-bar {
|
|
display: none !important;
|
|
}
|
|
|
|
.cv-page {
|
|
box-shadow: none;
|
|
border: none;
|
|
margin: 0 auto;
|
|
transform: scale(1);
|
|
max-width: 100%;
|
|
page-break-after: always;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.cv-page.page-2 {
|
|
page-break-after: auto;
|
|
}
|
|
|
|
.page-content {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.cv-section {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
/* Ensure footer only on page 2 */
|
|
.page-1 .cv-footer {
|
|
display: none !important;
|
|
}
|
|
|
|
.cv-footer {
|
|
page-break-inside: avoid;
|
|
background: #ddd !important;
|
|
color: #333 !important;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
font-weight: 800;
|
|
color: inherit;
|
|
}
|
|
|
|
/* Set up proper A4 page dimensions */
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 0.5in;
|
|
}
|
|
}
|
|
|
|
/* ===============================================
|
|
SECTION STYLES FOR PAGE 2
|
|
=============================================== */
|
|
|
|
.award-item,
|
|
.course-item,
|
|
.language-item,
|
|
.reference-item,
|
|
.other-content {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.award-item strong,
|
|
.course-item strong,
|
|
.language-item strong {
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.award-item small,
|
|
.course-item small {
|
|
color: #666;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.award-desc,
|
|
.course-desc {
|
|
margin-top: 0.5em;
|
|
color: var(--text-gray);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.reference-item {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.reference-item a {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ref-type {
|
|
color: #999;
|
|
margin-left: 0.5em;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
/* ===============================================
|
|
MOBILE RESPONSIVE - TWO-PAGE LAYOUT
|
|
=============================================== */
|
|
|
|
@media (max-width: 900px) {
|
|
.cv-page {
|
|
margin: 1rem;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* Stack layout on mobile */
|
|
.page-1 .page-content,
|
|
.page-2 .page-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.cv-sidebar-left,
|
|
.cv-sidebar-right {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.page-1 .cv-main,
|
|
.page-2 .cv-main {
|
|
grid-column: 1;
|
|
}
|
|
|
|
/* Hide header on page 2 for mobile to merge pages */
|
|
.page-2 .cv-title-badges-header {
|
|
display: none;
|
|
}
|
|
|
|
/* Adjust footer for mobile */
|
|
.footer-content li > div {
|
|
display: block;
|
|
margin: 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer-label {
|
|
font-size: 1em;
|
|
margin-top: 15px;
|
|
color: #777;
|
|
}
|
|
|
|
.footer-separator {
|
|
display: none;
|
|
}
|
|
|
|
.footer-value {
|
|
font-size: 1.5em;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
/* ===============================================
|
|
TABLET RESPONSIVE
|
|
=============================================== */
|
|
|
|
@media (max-width: 768px) and (min-width: 577px) {
|
|
.page-content {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.footer-label {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.footer-value {
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
/* Company link styling */
|
|
.company-link {
|
|
color: var(--accent-blue);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.company-link:hover {
|
|
text-decoration: underline;
|
|
color: #0052a3;
|
|
}
|