juanatsap
ae08ebde05
- Scale recommended card 12% larger on desktop for emphasis - Add subtle golden border to Default CV (full opacity when selected) - Pre-select Default CV by default with download button enabled - Fix double border issue: exclude recommended card from red selection border - Remove red focus outline for recommended card (transparent) - Reduce modal height: thumbnail 280px→220px, padding 16px→12px - Redesign mobile layout as compact button-style cards - Hide full thumbnails on mobile, show page count badges instead - Horizontal layout on mobile with left-aligned text - Reduce mobile gap from 24px to 12px for better space efficiency Improves visual hierarchy and mobile usability on small screens (iPhone 13 Mini, Samsung S24).
956 lines
20 KiB
CSS
956 lines
20 KiB
CSS
/* =============================================================================
|
|
MODALS - Info Modal, Keyboard Shortcuts Modal, PDF Download Modal
|
|
============================================================================= */
|
|
|
|
/* Native <dialog> element - force centering */
|
|
.info-modal {
|
|
border: none;
|
|
border-radius: 24px;
|
|
padding: 0;
|
|
max-width: 420px;
|
|
width: calc(100% - 2rem);
|
|
background: transparent;
|
|
/* Force centering - override any browser defaults */
|
|
position: fixed;
|
|
inset: 0;
|
|
margin: auto;
|
|
/* Constrain height so margin:auto can center vertically */
|
|
max-height: fit-content;
|
|
}
|
|
|
|
/* Native ::backdrop pseudo-element replaces manual backdrop div */
|
|
.info-modal::backdrop {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* Dialog opening animation - native dialog uses [open] attribute */
|
|
.info-modal[open] {
|
|
animation: modalFadeIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes modalFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9) translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
.info-modal-content {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-radius: 24px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 100px rgba(39, 174, 96, 0.1);
|
|
width: 100%;
|
|
padding: 2.5rem;
|
|
position: relative;
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.info-modal-close {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
transition: all 0.2s ease;
|
|
z-index: 10;
|
|
}
|
|
|
|
.info-modal-close:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.info-modal-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.info-modal-header h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0 0 1.5rem 0;
|
|
}
|
|
|
|
.info-modal-cv-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #f39c12; /* Orange subtitle */
|
|
margin-bottom: 0;
|
|
letter-spacing: 0.05em;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
#info-modal .info-modal-cv-title {
|
|
color: #27ae60;
|
|
}
|
|
|
|
.info-modal-photo {
|
|
width: 40px;
|
|
height: 53px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.photo-bracket-wrapper {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 22px;
|
|
}
|
|
|
|
.photo-bracket-wrapper::before {
|
|
content: '{';
|
|
position: absolute;
|
|
left: 2px;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #27ae60;
|
|
line-height: 1;
|
|
top: 8px;
|
|
}
|
|
|
|
.photo-bracket-wrapper::after {
|
|
content: '}';
|
|
position: absolute;
|
|
right: 2px;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #27ae60;
|
|
line-height: 1;
|
|
top: 8px;
|
|
}
|
|
|
|
.info-modal-body {
|
|
color: #333;
|
|
}
|
|
|
|
.info-modal-description {
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
margin-bottom: 2rem;
|
|
color: #444;
|
|
}
|
|
|
|
.info-modal-description strong {
|
|
color: #27ae60;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.info-modal-tech {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.info-tech-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
background: rgba(39, 174, 96, 0.05);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(39, 174, 96, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.info-tech-item:hover {
|
|
background: rgba(39, 174, 96, 0.1);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
|
|
}
|
|
|
|
.info-tech-item iconify-icon {
|
|
color: #27ae60;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.info-tech-item span {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.info-modal-github {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
padding: 1rem 1.5rem;
|
|
background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
|
|
}
|
|
|
|
.info-modal-github:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(39, 174, 96, 0.4);
|
|
background: linear-gradient(135deg, #229954 0%, #27ae60 100%);
|
|
}
|
|
|
|
.info-modal-github:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
|
|
}
|
|
|
|
.info-modal-github-subtext {
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 768px) {
|
|
.info-modal-content {
|
|
padding: 2rem 1.5rem;
|
|
max-width: calc(100% - 2rem);
|
|
}
|
|
|
|
.info-modal-header h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.info-modal-tech {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.info-modal-description {
|
|
font-size: 0.95rem;
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
KEYBOARD SHORTCUTS MODAL
|
|
============================================================================= */
|
|
|
|
/* Shortcuts Modal - Very wide for 3-column grid, less tall */
|
|
#shortcuts-modal {
|
|
max-width: 900px; /* Much wider - was 750px */
|
|
max-height: 80vh; /* Limit height */
|
|
}
|
|
|
|
/* Keyboard icon with green curly brackets (matching info modal style) */
|
|
.keyboard-icon-wrapper {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0 22px;
|
|
}
|
|
|
|
.keyboard-icon-wrapper::before {
|
|
content: '{';
|
|
position: absolute;
|
|
left: 2px;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #575757ff; /* Dark brackets - matching info modal */
|
|
line-height: 1;
|
|
top: -3px;
|
|
}
|
|
|
|
.keyboard-icon-wrapper::after {
|
|
content: '}';
|
|
position: absolute;
|
|
right: 2px;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #575757ff; /* Dark brackets - matching info modal */
|
|
line-height: 1;
|
|
top: -3px;
|
|
}
|
|
|
|
.keyboard-icon-wrapper iconify-icon {
|
|
color: #f39c12;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
/* Add margin-bottom to subtitle */
|
|
#shortcuts-modal .info-modal-cv-title {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
#shortcuts-modal .info-modal-body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr; /* 2 columns for 5 sections (3+2) */
|
|
gap: 1.2rem 1.5rem; /* row gap, column gap */
|
|
margin-top: 1.5rem; /* Increased spacing since no description */
|
|
}
|
|
|
|
/* Shortcuts Modal Content - Extends info-modal styles */
|
|
.shortcuts-section {
|
|
margin-top: 0; /* Grid handles spacing */
|
|
background: #f8f9fa;
|
|
border: 1px solid #e1e4e8;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.shortcuts-section:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.shortcuts-section-title {
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
color: #827a6e; /* Brownish-gray for section header text */
|
|
margin-bottom: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid rgba(130, 122, 110, 0.2); /* Matching border */
|
|
}
|
|
|
|
.shortcuts-section-title iconify-icon {
|
|
color: #f39c12; /* ORANGE icons for section headers */
|
|
}
|
|
|
|
.shortcuts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.shortcut-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.shortcut-keys {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.shortcut-keys kbd {
|
|
font-family: 'Monaco', 'Courier New', monospace;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
background: rgba(52, 152, 219, 0.08); /* Light blue background */
|
|
border: 1px solid rgba(52, 152, 219, 0.35); /* Blue border */
|
|
border-radius: 6px;
|
|
padding: 0.3rem 0.6rem;
|
|
box-shadow: 0 2px 4px rgba(52, 152, 219, 0.12), inset 0 -1px 0 rgba(52, 152, 219, 0.25);
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
color: #3498db; /* Blue text */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.2rem;
|
|
transition: all 0.2s ease;
|
|
min-width: 2rem;
|
|
}
|
|
|
|
/* Iconify icons inside kbd elements */
|
|
.shortcut-keys kbd iconify-icon {
|
|
color: inherit;
|
|
vertical-align: middle;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.shortcut-item:hover .shortcut-keys kbd {
|
|
background: rgba(52, 152, 219, 0.15);
|
|
border-color: rgba(52, 152, 219, 0.5);
|
|
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.25);
|
|
}
|
|
|
|
.shortcut-desc {
|
|
flex: 1;
|
|
font-size: 0.95rem;
|
|
color: var(--text-gray);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 768px) {
|
|
#shortcuts-modal {
|
|
max-width: calc(100% - 2rem);
|
|
}
|
|
|
|
#shortcuts-modal .info-modal-body {
|
|
grid-template-columns: 1fr; /* Single column on mobile */
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Tablet - 2 columns */
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
#shortcuts-modal {
|
|
max-width: 700px;
|
|
}
|
|
|
|
#shortcuts-modal .info-modal-body {
|
|
grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
|
|
gap: 1.2rem 1.5rem;
|
|
}
|
|
|
|
.shortcuts-section-title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.shortcut-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.shortcut-keys kbd {
|
|
font-size: 0.7rem;
|
|
padding: 0.2rem 0.4rem;
|
|
}
|
|
|
|
.shortcut-desc {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
PDF DOWNLOAD MODAL
|
|
============================================================================= */
|
|
|
|
/* PDF Modal Specific Overrides */
|
|
.pdf-download-modal {
|
|
max-width: 800px;
|
|
width: calc(100% - 2rem);
|
|
}
|
|
|
|
/* Modal Subtitle */
|
|
.pdf-modal-subtitle {
|
|
font-size: 0.95rem;
|
|
color: var(--text-gray);
|
|
margin-top: 0.5rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* PDF Options Grid */
|
|
.pdf-options-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32px;
|
|
margin: 2rem 0 1.5rem 0;
|
|
}
|
|
|
|
/* PDF Option Card */
|
|
.pdf-option-card {
|
|
border: 2px solid transparent;
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
transition: all 250ms ease;
|
|
position: relative;
|
|
background: #ffffff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.pdf-option-card:hover {
|
|
border-color: #e0e0e0;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.pdf-option-card:focus {
|
|
outline: 2px solid transparent;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Remove red outline for recommended card */
|
|
.pdf-option-recommended:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Selected State - ONLY for non-recommended cards */
|
|
.pdf-option-card.selected:not(.pdf-option-recommended) {
|
|
border-color: #ef4444;
|
|
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.2);
|
|
background: #fff5f5;
|
|
}
|
|
|
|
/* PDF Thumbnail Container */
|
|
.pdf-thumbnail {
|
|
background: #ffffff;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
height: 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Skeleton Blocks inside Thumbnails */
|
|
.pdf-thumbnail .skeleton-block {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: skeleton-shimmer 1.8s ease-in-out infinite;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Custom Placeholder (for Custom CV card) */
|
|
.custom-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
color: #999;
|
|
text-align: center;
|
|
}
|
|
|
|
.custom-placeholder iconify-icon {
|
|
margin-bottom: 12px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.custom-placeholder p {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Thumbnail Badge (Page Count / Coming Soon) */
|
|
.thumbnail-badge {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
color: white;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Badge for recommended option */
|
|
.thumbnail-badge.badge-recommended {
|
|
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
|
|
box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
|
|
}
|
|
|
|
/* Recommended ribbon */
|
|
.recommended-ribbon {
|
|
position: absolute;
|
|
top: -4px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
|
|
color: white;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
padding: 3px 12px;
|
|
border-radius: 0 0 8px 8px;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
|
|
z-index: 2;
|
|
}
|
|
|
|
/* Recommended badge in title */
|
|
.recommended-badge {
|
|
display: inline-block;
|
|
margin-left: 0.25rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* PDF Option Recommended Card */
|
|
.pdf-option-recommended {
|
|
position: relative;
|
|
overflow: visible;
|
|
transform: scale(1.12);
|
|
z-index: 1;
|
|
border: 2px solid rgba(243, 156, 18, 0.15) !important;
|
|
box-shadow: 0 2px 8px rgba(243, 156, 18, 0.08);
|
|
}
|
|
|
|
.pdf-option-recommended:hover {
|
|
transform: scale(1.12) translateY(-2px);
|
|
box-shadow: 0 4px 16px rgba(243, 156, 18, 0.15);
|
|
}
|
|
|
|
/* When recommended card is selected - full golden border, NO RED */
|
|
.pdf-option-recommended.selected {
|
|
border: 2px solid #f39c12 !important;
|
|
box-shadow: 0 6px 16px rgba(243, 156, 18, 0.3) !important;
|
|
background: #fffbf5 !important;
|
|
}
|
|
|
|
/* PDF Option Info */
|
|
.pdf-option-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.pdf-option-info h3 {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-dark);
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
.pdf-option-info p {
|
|
font-size: 0.875rem;
|
|
color: var(--text-gray);
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* PDF Option Badge (Checkmark) */
|
|
.pdf-option-badge {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: all 250ms ease;
|
|
color: #4caf50;
|
|
}
|
|
|
|
.pdf-option-card.selected .pdf-option-badge {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
/* PDF Modal Footer */
|
|
.pdf-modal-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #e0e0e0;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* PDF Download Button */
|
|
.pdf-download-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 32px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 250ms ease;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.pdf-download-btn iconify-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Disabled State */
|
|
.pdf-download-btn:disabled {
|
|
background: #e0e0e0;
|
|
color: #999999;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Enabled State */
|
|
.pdf-download-btn:not(:disabled) {
|
|
background: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
.pdf-download-btn:not(:disabled):hover {
|
|
background: #dc2626;
|
|
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.pdf-download-btn:not(:disabled):active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Screen Reader Only */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* =============================================================================
|
|
RESPONSIVE DESIGN - PDF MODAL
|
|
============================================================================= */
|
|
|
|
/* Tablet: Two columns */
|
|
@media (min-width: 480px) and (max-width: 767px) {
|
|
.pdf-options-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Custom card spans full width */
|
|
.pdf-option-card[data-cv-format="custom"] {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.pdf-thumbnail {
|
|
height: 220px;
|
|
}
|
|
}
|
|
|
|
/* Mobile: Single column - Button-like style */
|
|
@media (max-width: 479px) {
|
|
.pdf-download-modal {
|
|
max-width: calc(100% - 1rem);
|
|
}
|
|
|
|
.pdf-options-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Remove scale transform in mobile */
|
|
.pdf-option-recommended {
|
|
transform: none;
|
|
}
|
|
|
|
.pdf-option-recommended:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Button-like cards on mobile */
|
|
.pdf-option-card {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 16px;
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Hide full thumbnail on mobile, show compact badge instead */
|
|
.pdf-thumbnail {
|
|
display: none;
|
|
}
|
|
|
|
/* Show page count badge in place of thumbnail */
|
|
.pdf-option-card::before {
|
|
content: attr(data-cv-format);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
height: 60px;
|
|
flex-shrink: 0;
|
|
background: #f5f5f5;
|
|
border-radius: 8px;
|
|
font-weight: 700;
|
|
font-size: 0.75rem;
|
|
color: #666;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Custom content for each format */
|
|
.pdf-option-card[data-cv-format="short"]::before {
|
|
content: "4\APAGES";
|
|
white-space: pre;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.pdf-option-card[data-cv-format="default"]::before {
|
|
content: "5\APAGES";
|
|
white-space: pre;
|
|
line-height: 1.3;
|
|
background: #fff8e6;
|
|
color: #f39c12;
|
|
}
|
|
|
|
.pdf-option-card[data-cv-format="long"]::before {
|
|
content: "9\APAGES";
|
|
white-space: pre;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* Adjust text alignment */
|
|
.pdf-option-info {
|
|
text-align: left;
|
|
flex: 1;
|
|
}
|
|
|
|
.pdf-option-info h3 {
|
|
font-size: 1rem;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.pdf-option-info p {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Move checkmark to right side */
|
|
.pdf-option-badge {
|
|
position: static;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.pdf-download-btn {
|
|
padding: 12px 24px;
|
|
font-size: 0.95rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
ACCESSIBILITY - REDUCED MOTION
|
|
============================================================================= */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pdf-thumbnail .skeleton-block {
|
|
animation: none;
|
|
background: #e8e8e8;
|
|
}
|
|
|
|
.pdf-option-card {
|
|
transition: none;
|
|
}
|
|
|
|
.pdf-option-badge {
|
|
transition: none;
|
|
}
|
|
|
|
.pdf-download-btn {
|
|
transition: none;
|
|
}
|
|
|
|
.pdf-loading-overlay {
|
|
animation: none;
|
|
}
|
|
|
|
.pdf-loading-spinner {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
PDF LOADING OVERLAY - Visual Feedback During Download
|
|
============================================================================= */
|
|
|
|
.pdf-loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border-radius: 24px;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
animation: overlayFadeIn 0.3s ease;
|
|
}
|
|
|
|
.pdf-loading-overlay.active {
|
|
display: flex;
|
|
}
|
|
|
|
@keyframes overlayFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.pdf-loading-content {
|
|
text-align: center;
|
|
max-width: 300px;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.pdf-loading-spinner {
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 0 auto 1.5rem;
|
|
border: 4px solid rgba(239, 68, 68, 0.2);
|
|
border-top-color: #ef4444;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.pdf-loading-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.pdf-loading-message {
|
|
font-size: 0.95rem;
|
|
color: var(--text-gray);
|
|
margin: 0 0 0.5rem 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.pdf-loading-estimate {
|
|
font-size: 0.85rem;
|
|
color: #999;
|
|
font-style: italic;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Blur the modal content when overlay is active */
|
|
.info-modal-content.loading-active > *:not(.pdf-loading-overlay) {
|
|
filter: blur(3px);
|
|
pointer-events: none;
|
|
}
|