/* ============================================================
templates.css — ResumeAI Templates Page
Loaded by: frontend/templates.html
Requires:  base.css
============================================================ */
/* ── Page header ── */
.templates-header { margin-bottom: 2.5rem; animation: fadeUp 0.6s ease both; }
.templates-title { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--cream); margin-bottom: 0.4rem; }
.templates-sub { font-size: 1rem; color: var(--muted); font-weight: 300; }
/* ── Filter bar ── */
.filter-bar {
display: flex; align-items: center; gap: 0.75rem;
margin-bottom: 2rem; flex-wrap: wrap;
animation: fadeUp 0.6s 0.05s ease both;
}
.filter-btn {
padding: 8px 18px;
background: transparent;
color: var(--muted);
font-family: var(--font-sans);
font-size: 0.83rem;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
white-space: nowrap;
}
.filter-btn:hover { color: var(--cream); border-color: rgba(255,255,255,0.2); }
.filter-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 500; }
.filter-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.filter-search {
margin-left: auto;
position: relative;
}
.filter-search input {
width: 220px;
padding: 8px 16px 8px 36px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-pill);
color: var(--cream);
font-family: var(--font-sans);
font-size: 0.83rem;
outline: none;
transition: border-color 0.2s, width 0.3s;
}
.filter-search input:focus { border-color: rgba(201,168,76,0.5); width: 260px; }
.filter-search input::placeholder { color: rgba(138,128,112,0.6); }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.85rem; pointer-events: none; }
/* ── Template grid ── */
.templates-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
animation: fadeUp 0.6s 0.1s ease both;
}
/* Individual template card */
.template-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
position: relative;
}
.template-card:hover {
transform: translateY(-6px);
border-color: rgba(201,168,76,0.4);
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
/* Pro badge overlay on locked cards */
.template-card.is-pro .template-thumb::after {
content: 'PRO';
position: absolute;
top: 12px; right: 12px;
background: var(--gold);
color: var(--ink);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 3px 9px;
border-radius: var(--radius-pill);
}
/* Hover overlay with action buttons */
.template-card .card-overlay {
position: absolute; inset: 0;
background: rgba(10,10,15,0.85);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px;
opacity: 0;
transition: opacity 0.25s ease;
padding: 1.5rem;
}
.template-card:hover .card-overlay { opacity: 1; }
/* Preview thumbnail area — shows a mini resume mockup */
.template-thumb {
position: relative;
height: 280px;
overflow: hidden;
background: #f5f0e8; /* Light paper colour for contrast */
display: flex; align-items: center; justify-content: center;
}
/* Mini resume lines inside the thumbnail */
.resume-mock {
width: 80%;
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px;
}
.mock-name {
height: 14px;
border-radius: 3px;
background: #1a1a2e;
width: 60%;
}
.mock-title {
height: 8px; border-radius: 3px; background: rgba(26,26,46,0.4); width: 40%;
}
.mock-divider {
height: 1px; background: rgba(26,26,46,0.2); margin: 4px 0;
}
.mock-heading {
height: 8px; border-radius: 3px; width: 30%; margin-top: 4px;
}
.mock-line {
height: 6px; border-radius: 3px; background: rgba(26,26,46,0.15);
}
.mock-line.short { width: 70%; }
.mock-line.medium { width: 85%; }
.mock-line.full   { width: 100%; }
/* Accent colours per template style */
.accent-classic  .mock-heading, .accent-classic  .mock-name { background: #1a1a2e; }
.accent-gold     .mock-heading { background: #c9a84c; }
.accent-gold     .mock-name    { background: #1a1a2e; }
.accent-minimal  .mock-heading { background: #555; }
.accent-minimal  .mock-name    { background: #222; }
.accent-bold     .mock-heading, .accent-bold .mock-name { background: #1a3a5c; }
.accent-creative .mock-heading { background: #7c3aed; }
.accent-creative .mock-name    { background: #1a1a2e; }
.accent-executive .mock-heading, .accent-executive .mock-name { background: #1a4a2e; }
/* Card info row */
.template-info {
padding: 1rem 1.25rem 1.25rem;
border-top: 1px solid var(--border);
}
.template-name {
font-size: 0.9rem; font-weight: 500; color: var(--cream);
margin-bottom: 4px;
}
.template-meta {
display: flex; align-items: center; gap: 8px;
}
.template-tag {
font-size: 0.7rem; padding: 2px 8px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,0.06);
color: var(--muted);
border: 1px solid var(--border);
}
.template-tag.tag-popular {
background: rgba(46,204,138,0.1);
color: var(--green);
border-color: rgba(46,204,138,0.2);
}
.template-tag.tag-new {
background: rgba(74,158,255,0.1);
color: var(--blue);
border-color: rgba(74,158,255,0.2);
}
.template-tag.tag-pro {
background: rgba(201,168,76,0.1);
color: var(--gold);
border-color: rgba(201,168,76,0.2);
}
.template-ats {
margin-left: auto;
font-size: 0.7rem; color: var(--green);
}
/* Overlay CTA buttons */
.btn-use-template {
width: 100%; padding: 11px;
background: var(--gold); color: var(--ink);
font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500;
border: none; border-radius: var(--radius-sm); cursor: pointer;
transition: background 0.2s;
}
.btn-use-template:hover { background: var(--gold-light); }
.btn-preview-template {
width: 100%; padding: 10px;
background: transparent; color: var(--cream);
font-family: var(--font-sans); font-size: 0.875rem;
border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-sm);
cursor: pointer; transition: background 0.2s;
}
.btn-preview-template:hover { background: rgba(255,255,255,0.08); }
/* Empty state when filter has no results */
.templates-empty {
display: none;
grid-column: 1 / -1;
text-align: center;
padding: 4rem 2rem;
color: var(--muted);
}
.templates-empty.visible { display: block; }
.templates-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.templates-empty p { font-size: 0.95rem; }
/* ── Full-screen preview modal ── */
.preview-modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.85);
z-index: 900;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
}
.preview-modal-overlay.open { opacity: 1; pointer-events: all; }
.preview-modal {
background: var(--ink-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
width: 90%; max-width: 820px;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.95);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
.preview-modal-overlay.open .preview-modal { transform: scale(1); }
.preview-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
position: sticky; top: 0;
background: var(--ink-2);
z-index: 1;
}
.preview-modal-header h3 { font-family: var(--font-serif); font-size: 1.3rem; color: var(--cream); }
.preview-modal-actions { display: flex; align-items: center; gap: 10px; }
.btn-close-modal {
background: none; border: none; color: var(--muted);
font-size: 1.4rem; cursor: pointer; line-height: 1;
transition: color 0.2s; padding: 4px;
}
.btn-close-modal:hover { color: var(--cream); }
.preview-modal-body {
padding: 2rem;
background: #f5f0e8; /* Paper white for the resume preview */
flex: 1;
font-family: 'Times New Roman', serif;
color: #1a1a2e;
}
/* Responsive */
@media (max-width: 900px) {
.templates-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
.templates-grid { grid-template-columns: 1fr; }
.filter-bar { gap: 0.5rem; }
.filter-search { margin-left: 0; width: 100%; }
.filter-search input { width: 100%; }
}