/* Template CSS – Scheda Ruolo Professionale Ispirato a pagine "career role" (es. Cyber Security Analyst) con enfasi su leggibilità, componenti riutilizzabili e responsive design. Include tema chiaro/scuro automatico. USO RAPIDO: ... Sezioni consigliate: .hero, .section, .grid, .card, .skills-list, .cta, .faq/accordion */ /* ======================== 1) RESET & TOKENS ======================== */ :root { /* Tipografia */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; /* Colori (tema chiaro) */ --bg: #ffffff; --surface: #f7f7fb; --elev: #ffffff; --text: #111827; /* zinc-900 */ --text-muted: #4b5563; /* gray-600 */ --primary: #2563eb; /* blue-600 */ --primary-weak: #dbeafe; /* blue-100 */ --accent: #06b6d4; /* cyan-500 */ --ok: #16a34a; /* green-600 */ --warn: #ca8a04; /* yellow-600 */ --danger: #dc2626; /* red-600 */ --border: #e5e7eb; /* gray-200 */ --shadow: 0 6px 24px rgba(17, 24, 39, 0.08); /* Raggi e spazi */ --r-sm: .5rem; --r-md: 1rem; --r-lg: 1.25rem; --gap-1: .5rem; --gap-2: .75rem; --gap-3: 1rem; --gap-4: 1.5rem; --gap-5: 2rem; --container: 1120px; } @media (prefers-color-scheme: dark) { :root { --bg: #0b1020; --surface: #0f172a; /* slate-900 */ --elev: #111827; /* zinc-900 */ --text: #f3f4f6; /* gray-100 */ --text-muted: #9ca3af; /* gray-400 */ --primary: #60a5fa; /* blue-400 */ --primary-weak: #1e3a8a; /* blue-900 */ --accent: #67e8f9; /* cyan-300 */ --ok: #22c55e; --warn: #f59e0b; --danger: #ef4444; --border: #1f2937; /* gray-800 */ --shadow: 0 10px 30px rgba(0, 0, 0, .45); } } /* A) Reset minimale */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--text); background: radial-gradient(1200px 1200px at 80% -10%, var(--primary-weak) 0, transparent 40%), var(--bg); line-height: 1.55; } img { max-width: 100%; display: block; } /* ======================== 2) LAYOUT & CONTAINER ======================== */ .role-page .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; } .section { padding: clamp(1rem, 2vw, 2rem) 0; } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-3); margin-bottom: var(--gap-4); } .section-title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; } .section-subtitle { color: var(--text-muted); } .grid { display: grid; gap: var(--gap-4); } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 960px) { .grid.cols-4, .grid.cols-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } } /* Responsive utilities */ @media (max-width: 768px) { .section-header { flex-direction: column; align-items: flex-start !important; gap: 1rem; } .hero-actions { flex-direction: column; width: 100%; } .hero-actions .button { width: 100%; justify-content: center; } } /* ======================== 3) HERO / INTRO ======================== */ .hero { padding: clamp(1rem, 3vw, 3rem) 0; position: relative; overflow: clip; } .hero .eyebrow { display: inline-flex; gap: .5rem; align-items: center; padding: .25rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 600; font-size: .85rem; } .hero h1 { margin: .75rem 0 1rem; font-size: clamp(2rem, 5.5vw, 3.25rem); line-height: 1.1; font-weight: 900; } .hero p { color: var(--text-muted); font-size: clamp(1rem, 2vw, 1.125rem); max-width: 60ch; } .hero-actions { display: flex; gap: var(--gap-3); margin-top: var(--gap-4); flex-wrap: wrap; } /* ======================== 4) CARDS & SURFACES ======================== */ .card { background: var(--elev); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(1rem, 2.5vw, 1.5rem); box-shadow: var(--shadow); } .card.headed > .card-title { font-weight: 700; margin-bottom: .75rem; font-size: 1.1rem; } .card.kpi { text-align: center; } .card.kpi .value { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 900; } .card.kpi .label { color: var(--text-muted); } /* ======================== 5) TIPOGRAFIA & ELENCHI ======================== */ .lead { font-size: 1.125rem; color: var(--text-muted); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } ul.clean { list-style: none; padding: 0; margin: 0; } ul.clean > li { display: flex; gap: .6rem; align-items: flex-start; } .icon-bullet { inline-size: 1.15rem; block-size: 1.15rem; border-radius: .35rem; background: var(--primary); margin-top: .3rem; flex: none; } /* Chips abilità/competenze */ .skills-list { display: flex; flex-wrap: wrap; gap: .5rem; } .chip { border: 1px dashed color-mix(in srgb, var(--text) 20%, transparent); border-radius: 999px; padding: .35rem .7rem; font-size: .9rem; color: var(--text-muted); background: color-mix(in srgb, var(--surface) 60%, transparent); } .chip.ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); } .chip.warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); } /* ======================== 6) BOTTONI & BADGE ======================== */ .button { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; border-radius: .75rem; font-weight: 700; text-decoration: none; background: var(--primary); color: #fff; box-shadow: var(--shadow); } .button:hover { filter: brightness(1.05); transform: translateY(-1px); } .button:active { transform: translateY(0); } .button.ghost { background: transparent; color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); } .badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; border-radius: .5rem; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 600; font-size: .85rem; } /* ======================== 7) TABELLE (es. stipendio, opportunità) ======================== */ .table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); } .table thead th { background: color-mix(in srgb, var(--surface) 85%, transparent); text-align: left; font-weight: 800; font-size: .95rem; } .table th, .table td { padding: .85rem 1rem; border-bottom: 1px solid var(--border); } .table tr:last-child td { border-bottom: 0; } .table .pos { color: var(--ok); font-weight: 700; } .table .neg { color: var(--danger); font-weight: 700; } /* Responsive table wrapper */ .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; } @media (max-width: 768px) { .table { font-size: 0.875rem; } .table th, .table td { padding: 0.6rem 0.5rem; } .table thead th { font-size: 0.75rem; } } /* ======================== 8) ACCORDION / FAQ ======================== */ .accordion { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .accordion-item + .accordion-item { border-top: 1px solid var(--border); } .accordion-button { width: 100%; background: transparent; border: 0; text-align: left; cursor: pointer; font-size: 1rem; padding: 1rem; color: var(--text); font-weight: 700; display: flex; align-items: center; justify-content: space-between; } .accordion-content { padding: 0 1rem 1rem; color: var(--text-muted); display: none; } .accordion-item[open] .accordion-content { display: block; } /* ======================== 9) CALL-OUT / ALERT ======================== */ .callout { padding: 1rem; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); } .callout .title { font-weight: 800; margin-bottom: .35rem; } /* ======================== 10) BREADCRUMB & FOOTER ======================== */ .breadcrumb { display: flex; flex-wrap: wrap; gap: .35rem .6rem; color: var(--text-muted); } .breadcrumb a { color: inherit; text-decoration: none; } .breadcrumb .sep { opacity: .55; } .footer { color: var(--text-muted); padding: 2rem 0; font-size: .95rem; } /* ======================== 11) COMPONENTI SPECIFICI DELLA SCHEDA RUOLO ======================== */ .role-meta { display: grid; gap: var(--gap-4); grid-template-columns: repeat(4, minmax(0, 1fr)); } .role-meta .meta-card { text-align: center; } .role-meta .meta-card .meta-title { color: var(--text-muted); font-weight: 600; } .role-meta .meta-card .meta-value { font-size: 1.75rem; font-weight: 900; } @media (max-width: 960px) { .role-meta { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .role-meta { grid-template-columns: 1fr; } } .outcomes { display: grid; gap: var(--gap-4); grid-template-columns: 1fr 1fr; } .outcomes .card { min-height: 100%; } @media (max-width: 900px) { .outcomes { grid-template-columns: 1fr; } } /* Timeline percorso formativo */ .timeline { position: relative; padding-left: 1.25rem; } .timeline::before { content: ""; position: absolute; inset: 0 auto 0 .4rem; width: 2px; background: var(--border); } .timeline-item { position: relative; margin-bottom: 1rem; } .timeline-item::marker { content: none; } .timeline-bullet { position: absolute; left: -0.05rem; top: .4rem; inline-size: .6rem; block-size: .6rem; border-radius: 999px; background: var(--primary); } .timeline-title { font-weight: 700; } .timeline-meta { color: var(--text-muted); font-size: .95rem; } /* ======================== 12) UTILITIES (helper classes) ======================== */ .mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem} .mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem} .p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem} .center { display: grid; place-items: center; } .max-w-prose { max-width: 70ch; } .hidden { display: none !important; } /* ======================== 13) ESEMPI DI SELETTORI PER POPOLARE DATI DINAMICI (opzionali, da usare con data-attributes) ======================== */ [data-level="beginner"] .level-badge::after { content: "Beginner"; } [data-level="intermediate"] .level-badge::after { content: "Intermediate"; } [data-level="advanced"] .level-badge::after { content: "Advanced"; } .level-badge { padding: .2rem .5rem; border-radius: .4rem; background: var(--surface); font-weight: 700; font-size: .8rem; color: var(--text-muted); } /* ======================== 14) PRINT STYLES (CV / PDF) ======================== */ @media print { :root { --shadow: none; } .button, .breadcrumb, .hero-actions { display: none !important; } .card { page-break-inside: avoid; } body { background: #fff; } }