/* ============================================= DOC MARKETING — design system reale Token e pattern estratti da SITO.html (repo Doc-Marketing/doc-marketing-sito-2026) ============================================= */ :root { --orange: #E65512; --orange-lt: #F07030; --orange-dk: #B33A00; --black: #090909; --black-2: #161616; --white: #FFFFFF; --off-white: #FBFDFF; --muted: #C8C8C8; --gray: #8C8C8C; --hot: #E65512; --warm: #F0A830; --cold: #4FA8D8; --on-surface-rgb: 255,255,255; /* base per i bordi/overlay sottili — bianco su sfondo scuro */ --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'DM Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', "SF Mono", "Cascadia Code", Consolas, monospace; } /* ============================================= TEMA CHIARO — toggle manuale (data-theme="light" su ) Stessi nomi di token, valori invertiti: il resto del CSS e tutti gli stili inline var(--muted)/var(--white)/ecc. nelle pagine si adattano automaticamente. ============================================= */ :root[data-theme="light"] { --black: #F7F5F1; --black-2: #FFFFFF; --white: #17130F; --off-white: #14110D; --muted: #4A4642; --gray: #6B6560; --on-surface-rgb: 15,12,9; /* bordi/overlay sottili scuri su sfondo chiaro */ } /* logo: variante scura (jpg, sfondo nero) di default, variante chiara (png trasparente) quando data-theme="light" — evita che il logo scuro "sparisca" su sfondo chiaro */ img.logo-light { display: none; } :root[data-theme="light"] img.logo-dark { display: none; } :root[data-theme="light"] img.logo-light { display: block; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.025em; font-weight: 700; } body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: radial-gradient(900px 520px at 78% 0%, rgba(230,85,18,.07), transparent 70%), var(--black); color: var(--white); overflow-x: hidden; padding-top: 80px; /* spazio per navbar fissa */ position: relative; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(var(--on-surface-rgb),.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--on-surface-rgb),.03) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(1100px 700px at 50% 0%, black, transparent 78%); mask-image: radial-gradient(1100px 700px at 50% 0%, black, transparent 78%); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } code { font-family: var(--font-mono); font-size: 0.9em; color: var(--orange-lt); } .container { max-width: 1180px; margin: 0 auto; padding: 0 32px; } .section { padding: 64px 0; } /* ============================================= NAVBAR — replica esatta dal sito ============================================= */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 80px; background: var(--black); display: flex; align-items: center; border-bottom: 1px solid rgba(230,85,18,0.15); } /* L'header non usa il .container centrato/a larghezza fissa delle altre sezioni: deve restare a piena larghezza con il logo allineato esattamente sopra il bordo sinistro della sidebar (18px), non sopra il contenuto centrato a 1180px. */ .navbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: none; margin: 0; padding: 0 24px 0 18px; } .navbar-logo { display: inline-flex; align-items: center; gap: 9px; } .navbar-logo img { height: 24px; } .navbar-links { display: flex; gap: 28px; list-style: none; flex-wrap: wrap; } .navbar-links a { font-size: 13.5px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; } .navbar-links a:hover, .navbar-links a.active { color: var(--orange); } .navbar-links a.active { font-weight: 700; } .navbar-links li { position: relative; } .navbar-links li.has-dropdown > a::after { content: "▾"; margin-left: 5px; font-size: 10px; opacity: .7; } .navbar-links .dropdown { display: none; position: absolute; top: calc(100% + 14px); left: -14px; z-index: 200; min-width: 190px; list-style: none; padding: 8px; margin: 0; background: var(--black-2); border: 1px solid rgba(var(--on-surface-rgb),0.1); border-radius: 14px; box-shadow: 0 20px 44px rgba(0,0,0,0.5); } .navbar-links li.has-dropdown:hover .dropdown, .navbar-links li.has-dropdown:focus-within .dropdown, .navbar-links li.has-dropdown.open .dropdown { display: block; } .navbar-links .dropdown li { padding: 0; } .navbar-links .dropdown a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; } .navbar-links .dropdown a:hover, .navbar-links .dropdown a.active { background: rgba(230,85,18,0.08); } .navbar-links .dropdown .disabled { display: block; padding: 9px 12px; font-size: 13px; color: var(--gray); opacity: 0.55; cursor: default; } .navbar-icon-btn, .navbar-icon-link { appearance: none; border: 1px solid rgba(var(--on-surface-rgb),0.16); background: rgba(var(--on-surface-rgb),0.04); color: var(--muted); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; transition: border-color 0.2s ease, transform 0.2s ease; } .navbar-profile > a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(var(--on-surface-rgb),0.16); background: rgba(var(--on-surface-rgb),0.04); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, transform 0.2s ease; } .navbar-profile > a:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); } .navbar-profile .icon-inline { width: 20px; height: 20px; } .navbar-icon-btn:hover, .navbar-icon-link:hover { border-color: var(--orange); transform: translateY(-1px); } .navbar-icon-link.active { border-color: var(--orange); color: var(--orange); } .navbar-links li.has-dropdown.navbar-profile > a::after { display: none; } .navbar-profile .dropdown { left: auto; right: -14px; } @media (max-width: 780px) { .navbar .container { flex-direction: column; height: auto; padding: 14px 20px; gap: 10px; } .navbar { height: auto; position: relative; } body { padding-top: 0; } .navbar-links { gap: 16px; overflow-x: auto; width: 100%; padding-bottom: 4px; } .navbar-links .dropdown { position: static; display: block; box-shadow: none; border: none; background: transparent; padding: 4px 0 0 12px; } .navbar-links li.has-dropdown > a::after { display: none; } } .theme-toggle { appearance: none; border: 1px solid rgba(var(--on-surface-rgb),0.16); background: rgba(var(--on-surface-rgb),0.04); color: var(--muted); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; transition: border-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { border-color: var(--orange); transform: translateY(-1px); } /* ============================================= TIPOGRAFIA ============================================= */ .eyebrow { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); } .section-title { font-size: clamp(30px, 4.2vw, 48px); font-weight: 700; line-height: 1.08; color: var(--white); letter-spacing: -0.03em; margin: 12px 0 14px; } .section-subtitle { font-size: 16.5px; font-weight: 400; line-height: 1.65; color: var(--muted); max-width: 780px; } /* ============================================= BOTTONI — replica esatta dal sito ============================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; border-radius: 48px; font-size: 13.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; border: none; transition: all 0.25s ease; } .btn-primary { background: linear-gradient(180deg, var(--black) 0%, #200a00 100%); border: 1.5px solid var(--orange); color: var(--white); box-shadow: 0 0 32px rgba(230,85,18,0.4); } .btn-primary:hover { box-shadow: 0 0 52px rgba(230,85,18,0.7); transform: translateY(-2px); } .btn-ghost { background: transparent; border: 1.5px solid rgba(var(--on-surface-rgb),0.2); color: var(--muted); } /* ============================================= CARD — pattern reale (black-2 + bordo/glow arancio) ============================================= */ .card { background: var(--black-2); border: 1px solid rgba(var(--on-surface-rgb),0.08); border-radius: 18px; box-shadow: 0 20px 44px rgba(0,0,0,0.38); padding: 24px 26px; transition: border-color 0.25s ease, transform 0.25s ease; } .card.glow { box-shadow: 0 20px 44px rgba(0,0,0,0.38), 0 0 34px rgba(230,85,18,0.14); } .card.rules, .card.checklist, .card.hub-card { border-color: rgba(230,85,18,0.22); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } } /* Regole usa/evita */ .rules { border-left: 3px solid var(--orange); } .rules.evita { border-left-color: #C0392B; } .rules h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; color: var(--white); } .rules ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.65; color: var(--muted); } /* Scala consapevolezza */ .scale { display: flex; align-items: center; margin: 28px 0 20px; } .scale .stop { flex: 1; text-align: center; position: relative; padding-top: 20px; } .scale .stop::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: rgba(var(--on-surface-rgb),0.12); } .scale .stop:first-child::before { left: 50%; } .scale .stop:last-child::before { right: 50%; } .scale .dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: rgba(var(--on-surface-rgb),0.15); border: 2px solid var(--black); } .scale .stop.on .dot { background: var(--orange); width: 18px; height: 18px; top: -3px; box-shadow: 0 0 12px rgba(230,85,18,0.7); } .scale .stop.on::before { background: var(--orange); } .scale span { font-size: 11px; color: var(--gray); } .scale .stop.on span { color: var(--orange); font-weight: 700; } /* Timeline fasi */ .timeline { display: flex; flex-direction: column; } .tstep { display: grid; grid-template-columns: 40px 1fr; gap: 18px; position: relative; padding-bottom: 26px; } .tstep:last-child { padding-bottom: 0; } .tnum { width: 34px; height: 34px; border-radius: 50%; background: rgba(230,85,18,0.12); color: var(--orange); border: 1px solid rgba(230,85,18,0.4); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; font-family: ui-monospace, monospace; position: relative; z-index: 1; } .tstep:not(:last-child) .tnum::after { content: ""; position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% + 8px); background: rgba(var(--on-surface-rgb),0.12); } .tbody h4 { font-size: 15px; margin-bottom: 6px; color: var(--white); } .tbody p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; max-width: 72ch; } .roletag { display: inline-block; font-size: 10.5px; font-family: ui-monospace, monospace; color: var(--orange-lt); background: rgba(230,85,18,0.1); border: 1px solid rgba(230,85,18,0.25); padding: 3px 10px; border-radius: 10px; } /* Home: menu resources timeline */ .menu-timeline-section{padding-top:20px} .menu-resource-timeline{max-width:1050px} .menu-resource-timeline .tstep{grid-template-columns:48px 1fr;gap:20px;padding-bottom:20px} .menu-resource-timeline .tnum{width:40px;height:40px;background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 8px 22px rgba(230,85,18,.2)} .menu-resource-timeline .tstep:not(:last-child) .tnum::after{top:40px;height:calc(100% + 2px)} .menu-resource-card{display:block;padding:22px 24px;border:1px solid rgba(230,85,18,.22);border-radius:14px;background:var(--black-2);text-decoration:none;transition:border-color .2s ease,transform .2s ease,background .2s ease} .menu-resource-card:not(.is-pending):hover{border-color:var(--orange);transform:translateX(5px);background:rgba(230,85,18,.055)} .menu-resource-card h4{font-size:20px;margin:5px 0 7px} .menu-resource-card p{margin-bottom:12px} .resource-group{font:700 10px var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--orange)} .resource-contents{display:block;padding-top:11px;border-top:1px solid rgba(var(--on-surface-rgb),.09);font-size:12px;line-height:1.55;color:var(--gray)} .menu-resource-card.is-pending{opacity:.62} .resource-card-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.resource-card-links a{padding:7px 10px;border:1px solid rgba(230,85,18,.28);border-radius:8px;color:var(--orange-lt);font:700 10px var(--font-mono);text-decoration:none}.resource-card-links a:hover{background:rgba(230,85,18,.1);border-color:var(--orange)} .sidebar-resource-group{margin-top:1px} .sidebar-resource-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:3px 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;text-align:left;cursor:pointer}.sidebar-resource-toggle:hover,.sidebar-resource-group.open>.sidebar-resource-toggle{background:rgba(230,85,18,.08);color:var(--orange-lt)}.sidebar-resource-toggle .sidebar-group-label{margin-top:0;padding:0}.sidebar-resource-toggle b{font-size:9px;font-weight:400;transition:transform .2s;flex-shrink:0}.sidebar-resource-group.open>.sidebar-resource-toggle b{transform:rotate(180deg)}.sidebar-resource-submenu{display:none;list-style:none;margin:1px 0 2px;padding:0}.sidebar-resource-group.open>.sidebar-resource-submenu{display:block}.sidebar-resource-submenu a{padding-top:3px!important;padding-bottom:3px!important;padding-left:17px!important;font-size:11.5px!important}.sidebar-resource-submenu a.active{color:var(--orange-lt)!important;background:rgba(230,85,18,.08)}.sidebar-resource-submenu .disabled{padding-left:17px} [data-swipe-category]>.sidebar-resource-toggle .sidebar-group-label{font-size:9px;letter-spacing:.065em;white-space:normal;line-height:1.25}[data-swipe-category]>.sidebar-resource-submenu a{font-size:11px} @media(max-width:640px){.menu-resource-timeline .tstep{grid-template-columns:38px 1fr;gap:12px}.menu-resource-timeline .tnum{width:34px;height:34px}.menu-resource-card{padding:18px}.menu-resource-card h4{font-size:18px}} /* Checklist */ .checklist ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.8; color: var(--muted); } .checklist li::before { content: "▢ "; color: var(--orange); } .checklist h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; color: var(--white); } /* Copy cards */ .copy-part { margin-bottom: 32px; } .copy-part h3 { font-size: 18px; margin-bottom: 4px; color: var(--white); } .copy-part .ph { font-size: 13px; color: var(--gray); margin-bottom: 16px; } .copy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .cc .label { font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; } .cc .formula { font-size: 13.5px; line-height: 1.55; color: var(--white); } .cc .formula b { color: var(--orange-lt); font-weight: 600; font-style: italic; } .cc .why { margin-top: 10px; font-size: 12px; color: var(--gray); line-height: 1.5; border-top: 1px solid rgba(var(--on-surface-rgb),0.08); padding-top: 8px; } /* Board procedure */ .board { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } .brow { border: 1px solid rgba(230,85,18,0.2); border-radius: 12px; overflow: hidden; background: var(--black-2); } .brow-head { padding: 12px 18px; background: rgba(230,85,18,0.08); display: flex; align-items: center; gap: 10px; } .brow-head .n { font-family: ui-monospace, monospace; color: var(--orange); font-weight: 700; font-size: 12px; } .brow-head h4 { font-size: 14.5px; color: var(--white); } .brow-grid { display: grid; grid-template-columns: repeat(5, 1fr); } .bcell { padding: 14px 16px; border-top: 1px solid rgba(var(--on-surface-rgb),0.08); border-left: 1px solid rgba(var(--on-surface-rgb),0.08); } .bcell:first-child { border-left: none; } .bcell .disc { font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; } .bcell ul { margin: 0; padding-left: 15px; font-size: 11.5px; line-height: 1.6; color: var(--muted); } .bcell .none { font-size: 11.5px; color: var(--gray); font-style: italic; } @media (max-width: 1100px) { .brow-grid { grid-template-columns: repeat(3, 1fr); } .bcell:nth-child(3n+1) { border-left: none; } .bcell:nth-child(n+4) { border-top: 1px solid rgba(var(--on-surface-rgb),0.08); } } @media (max-width: 640px) { .brow-grid { grid-template-columns: 1fr; } .bcell { border-left: none !important; border-top: 1px solid rgba(var(--on-surface-rgb),0.08) !important; } .bcell:first-child { border-top: none !important; } } /* Screens (template) */ .screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 820px) { .screens { grid-template-columns: 1fr; } } .screen-card h4 { font-size: 14.5px; margin-bottom: 10px; color: var(--white); } .screen-card ul { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.6; color: var(--muted); } /* Diagramma SVG */ .diagram-card { background: var(--black-2); border: 1px solid rgba(230,85,18,0.2); border-radius: 14px; padding: 24px; margin-bottom: 20px; } .diagram-scroll { overflow-x: auto; } .diagram-scroll svg { display: block; width: 100%; min-width: 900px; height: auto; } .flabel { font-size: 12px; fill: var(--muted); } .fname { font-family: var(--font-display); font-weight: 700; font-size: 14px; fill: var(--white); } .ftag { font-family: ui-monospace, monospace; font-size: 10px; } /* ============================================= WIREFRAME ANNOTATO — layout + cosa scrivere + setup ============================================= */ .wf-section { margin-bottom: 40px; } .wf-section-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(230,85,18,0.12); border: 1px solid rgba(230,85,18,0.4); color: var(--orange); font-family: ui-monospace, monospace; font-weight: 700; font-size: 12px; margin-right: 10px; flex: none; } .wf-section-title { display: flex; align-items: center; font-size: 17px; color: var(--white); margin-bottom: 14px; } .wf-row { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 20px; align-items: start; } @media (max-width: 780px) { .wf-row { grid-template-columns: 1fr; } } .wf-block { background: var(--black-2); border: 1.5px dashed rgba(230,85,18,0.4); border-radius: 10px; padding: 14px; min-height: 40px; } .wf-bar { height: 12px; border-radius: 3px; background: rgba(var(--on-surface-rgb),0.1); } .wf-bar + .wf-bar { margin-top: 8px; } .wf-btn { height: 34px; border-radius: 17px; background: rgba(230,85,18,0.18); border: 1px dashed rgba(230,85,18,0.5); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--orange-lt); letter-spacing: 0.03em; } .wf-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .wf-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--on-surface-rgb),0.1); flex: none; } .wf-note { font-size: 11px; color: var(--gray); margin-top: 8px; font-style: italic; } .wf-copy { font-size: 13.5px; line-height: 1.6; color: var(--muted); } .wf-copy .formula { color: var(--white); } .wf-copy .formula b { color: var(--orange-lt); font-weight: 600; font-style: italic; } .wf-copy .ref { display: block; margin-top: 6px; font-size: 11px; color: var(--gray); } .wf-setup { margin-top: 10px; padding: 10px 14px; background: rgba(230,85,18,0.06); border-left: 2px solid var(--orange); border-radius: 0 8px 8px 0; } .wf-setup .role { font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--orange); margin-right: 6px; } .wf-setup span.txt { font-size: 12px; color: var(--muted); } .wf-callout { background: rgba(230,85,18,0.06); border: 1px solid rgba(230,85,18,0.25); border-radius: 10px; padding: 14px 18px; font-size: 13px; color: var(--muted); margin-bottom: 28px; } .wf-callout b { color: var(--white); } .step-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; } .step-nav a { font-size: 12.5px; padding: 9px 16px; border-radius: 20px; border: 1px solid rgba(var(--on-surface-rgb),0.15); color: var(--muted); } .step-nav a.current { border-color: var(--orange); color: var(--orange); font-weight: 700; } .step-nav a:hover:not(.current) { border-color: var(--orange); color: var(--orange-lt); } /* Hub cards (home) */ .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 32px; } .hub-card { padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(230,85,18,0.25); transition: border-color 0.2s, transform 0.2s; } .hub-card:hover { border-color: var(--orange); transform: translateY(-3px); } .status { font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; } .status.done { color: #4FBE6E; } .status.todo { color: var(--gray); } .status.progress { color: var(--orange-lt); } .hub-card h3 { font-size: 17px; color: var(--white); } .hub-card p { font-size: 13px; color: var(--muted); line-height: 1.5; } /* Footer */ footer.site-footer { border-top: 1px solid rgba(var(--on-surface-rgb),0.08); padding: 32px 0; margin-top: 40px; } footer.site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } footer.site-footer img { height: 22px; } footer.site-footer .src-note { font-size: 12px; color: var(--gray); } footer.site-footer .src-note a { color: var(--orange-lt); } .pill-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); border: 1px solid rgba(var(--on-surface-rgb),0.15); border-radius: 20px; padding: 8px 16px; margin-top: 20px; } .pill-link:hover { border-color: var(--orange); color: var(--orange); } /* ============================================= VAULT — pagine "a prova di scimmia" per fase di build ispirate a bridges-agency.com (mega-prompt vault, section vault) ============================================= */ .vault-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 22px; } .badge { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 12px; border-radius: 20px; border: 1px solid rgba(var(--on-surface-rgb),0.15); color: var(--muted); } .badge.role { border-color: rgba(230,85,18,0.35); color: var(--orange-lt); background: rgba(230,85,18,0.06); } .badge.time { border-color: rgba(79,168,216,0.35); color: var(--cold); background: rgba(79,168,216,0.06); } .badge.depends { border-color: rgba(240,168,48,0.35); color: var(--warm); background: rgba(240,168,48,0.06); } .howto { background: rgba(230,85,18,0.06); border: 1px solid rgba(230,85,18,0.25); border-radius: 12px; padding: 18px 22px; margin: 20px 0 36px; font-size: 13.5px; line-height: 1.7; color: var(--muted); } .howto b { color: var(--white); } .howto ol { margin: 8px 0 0; padding-left: 20px; } .howto li { margin-bottom: 4px; } /* Fasi hub — tab numerate stile "1-10" della vault */ .phase-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; } .phase-tabs a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--on-surface-rgb),0.15); color: var(--muted); font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px; } .phase-tabs a:hover, .phase-tabs a.current { border-color: var(--orange); color: var(--orange); } /* Step dettagliatissimi — numerati, con sotto-punti operativi */ .bigsteps { display: flex; flex-direction: column; gap: 0; counter-reset: bigstep; margin: 28px 0; } .bigstep { display: grid; grid-template-columns: 44px 1fr; gap: 20px; position: relative; padding-bottom: 34px; } .bigstep:last-child { padding-bottom: 0; } .bigstep .bn { counter-increment: bigstep; width: 40px; height: 40px; border-radius: 50%; background: rgba(230,85,18,0.12); border: 1px solid rgba(230,85,18,0.4); color: var(--orange); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, monospace; font-weight: 700; font-size: 15px; position: relative; z-index: 1; flex: none; } .bigstep .bn::before { content: counter(bigstep); } .bigstep:not(:last-child) .bn::after { content: ""; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% + 10px); background: rgba(var(--on-surface-rgb),0.12); } .bigstep .bbody h3 { font-size: 17px; color: var(--white); margin-bottom: 8px; } .bigstep .bbody p { font-size: 13.5px; line-height: 1.7; color: var(--muted); max-width: 78ch; margin-bottom: 8px; } .bigstep .bbody ul.sub, .bigstep .bbody ol.sub { margin: 10px 0; padding-left: 20px; font-size: 13px; line-height: 1.75; color: var(--muted); } .bigstep .bbody ul.sub li, .bigstep .bbody ol.sub li { margin-bottom: 4px; } .bigstep .bbody code { background: rgba(var(--on-surface-rgb),0.06); padding: 1px 6px; border-radius: 4px; } .bigstep .warn { margin-top: 10px; padding: 10px 14px; border-left: 2px solid var(--orange); background: rgba(230,85,18,0.06); border-radius: 0 8px 8px 0; font-size: 12.5px; color: var(--muted); } .bigstep .warn b { color: var(--orange-lt); } /* Blocco prompt copiabile — stile mega-prompt vault */ .promptcard { background: var(--black-2); border: 1px solid rgba(230,85,18,0.25); border-radius: 14px; overflow: hidden; margin: 16px 0 28px; box-shadow: 0 14px 34px rgba(0,0,0,0.4); } .promptcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: rgba(230,85,18,0.08); border-bottom: 1px solid rgba(230,85,18,0.2); } .promptcard-head h4 { font-size: 14px; color: var(--white); } .copybtn { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #090909; background: var(--orange); border: none; border-radius: 20px; padding: 8px 14px; cursor: pointer; transition: transform 0.15s, background 0.15s; } .copybtn:hover { background: var(--orange-lt); transform: translateY(-1px); } .copybtn.copied { background: #4FBE6E; } .promptcard pre { margin: 0; padding: 20px 22px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; line-height: 1.75; color: var(--off-white); white-space: pre-wrap; overflow-wrap: break-word; max-height: 480px; overflow-y: auto; } .promptcard pre mark { background: none; color: var(--orange-lt); font-weight: 700; display: block; margin: 14px 0 6px; } /* Checklist finale di fase */ .donelist { list-style: none; margin: 24px 0; padding: 0; } .donelist li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(var(--on-surface-rgb),0.08); font-size: 13.5px; color: var(--muted); line-height: 1.6; } .donelist li:first-child { border-top: none; } .donelist li::before { content: "▢"; color: var(--orange); flex: none; font-size: 15px; line-height: 1.4; } /* Checklist reale, checkabile (input reali, non solo visive) */ .checkbox-list { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .checkbox-list li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 12px; transition: background 0.15s ease; } .checkbox-list li:hover { background: rgba(var(--on-surface-rgb),0.03); } .checkbox-list input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin-top: 1px; border: 1.5px solid rgba(var(--on-surface-rgb),0.25); border-radius: 6px; cursor: pointer; position: relative; background: rgba(var(--on-surface-rgb),0.03); transition: all 0.15s ease; } .checkbox-list input[type="checkbox"]:hover { border-color: var(--orange); } .checkbox-list input[type="checkbox"]:checked { background: var(--orange); border-color: var(--orange); } .checkbox-list input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .checkbox-list label { font-size: 13.5px; color: var(--muted); line-height: 1.6; cursor: pointer; } .checkbox-list input[type="checkbox"]:checked ~ label { color: var(--gray); text-decoration: line-through; text-decoration-color: rgba(230,85,18,0.5); } /* Template pagina reparto */ .dept-hero { padding: 26px 28px; border-radius: 18px; margin: 28px 0 40px; background: linear-gradient(160deg, rgba(230,85,18,.09), rgba(22,22,22,.4)); border: 1px solid rgba(230,85,18,.22); } .dept-hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; } @media (max-width: 860px) { .dept-hero-grid { grid-template-columns: 1fr; } } .dept-hero-item { padding: 14px 16px; background: rgba(0,0,0,.22); border-radius: 12px; } .dept-hero-item .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-lt); margin-bottom: 6px; display: block; } .dept-hero-item p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; } .dept-section { margin: 40px 0; } .dept-section > h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; color: var(--white); margin-bottom: 14px; } .dept-section > h2 .qn { width: 26px; height: 26px; border-radius: 50%; background: rgba(230,85,18,.14); border: 1px solid rgba(230,85,18,.4); color: var(--orange); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; flex: none; } .watch-out { border-left: 3px solid #C0392B; background: rgba(192,57,43,.06); } .watch-out h3 { color: #E06A5A; } .watch-out ul { padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--muted); } .watch-out li::marker { color: #E06A5A; } /* ============================================= PROMPT VAULT — libreria di mega-prompt cercabile ============================================= */ .vault-search { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; padding: 4px 6px 4px 18px; background: var(--black-2); border: 1px solid rgba(var(--on-surface-rgb),0.1); border-radius: 14px; } .vault-search input { flex: 1; background: none; border: none; outline: none; color: var(--white); font-family: var(--font-body); font-size: 14px; padding: 12px 0; } .vault-search input::placeholder { color: var(--gray); } .vault-search .count { font-family: var(--font-mono); font-size: 11px; color: var(--gray); padding: 8px 12px; white-space: nowrap; } .vault-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .vault-filters button { appearance: none; border: 1px solid rgba(var(--on-surface-rgb),0.14); background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .15s ease; } .vault-filters button:hover { border-color: var(--orange); color: var(--orange-lt); } .vault-filters button.on { background: var(--orange); border-color: var(--orange); color: #090909; font-weight: 700; } .vault-grid { display: grid; gap: 16px; } .vault-card { border: 1px solid rgba(var(--on-surface-rgb),0.09); border-radius: 16px; background: var(--black-2); overflow: hidden; } .vault-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; } .vault-card-meta { display: flex; align-items: baseline; gap: 12px; } .vault-card-num { font-family: var(--font-mono); font-size: 18px; color: rgba(230,85,18,.5); font-weight: 700; flex: none; } .vault-card-title { font-size: 15px; color: var(--white); font-weight: 600; } .vault-card-cat { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--orange-lt); } .vault-card-body { display: none; border-top: 1px solid rgba(var(--on-surface-rgb),0.08); } .vault-card.expanded .vault-card-body { display: block; } .vault-card-body pre { margin: 0; padding: 20px 22px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: var(--off-white); white-space: pre-wrap; overflow-wrap: break-word; max-height: 460px; overflow-y: auto; } .vault-card-body pre mark { background: none; color: var(--orange-lt); font-weight: 700; display: block; margin: 14px 0 6px; } .vault-card-tip { padding: 12px 22px 18px; font-size: 12px; color: var(--gray); line-height: 1.6; border-top: 1px dashed rgba(var(--on-surface-rgb),0.08); } .vault-card-tip b { color: var(--muted); } .vault-expand-btn { appearance: none; border: 1px solid rgba(var(--on-surface-rgb),0.14); background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; padding: 7px 12px; border-radius: 8px; cursor: pointer; flex: none; } .vault-expand-btn:hover { border-color: var(--orange); color: var(--orange-lt); } .vault-card.hidden-by-filter { display: none; } .md-content { margin-top: 24px; max-width: 74ch; } .md-content h1, .md-content h2, .md-content h3 { color: var(--white); margin: 28px 0 12px; } .md-content p { color: var(--muted); line-height: 1.7; margin-bottom: 14px; } .md-content ul { padding-left: 20px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; } .md-content a { color: var(--orange-lt); } .md-content .md-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 13.5px; } .md-content .md-table th, .md-content .md-table td { border: 1px solid rgba(var(--on-surface-rgb),0.12); padding: 8px 12px; text-align: left; color: var(--muted); } .md-content .md-table th { color: var(--white); background: rgba(230,85,18,0.08); } .search-box { margin-top: 24px; } .search-box input { width: 100%; max-width: 520px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(var(--on-surface-rgb),0.16); background: var(--black-2); color: var(--white); font-size: 14px; } .search-results { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; } .search-result { display: block; padding: 16px 18px; border: 1px solid rgba(230,85,18,0.18); border-radius: 12px; text-decoration: none; } .search-result .dept { font-family: ui-monospace, monospace; font-size: 10.5px; text-transform: uppercase; color: var(--orange); } .search-result h3 { font-size: 15px; margin: 6px 0; color: var(--white); } .search-result p { font-size: 13px; color: var(--muted); line-height: 1.5; } /* ============================================= SIDEBAR — nav laterale (home, visualizzatore SOP, ricerca) ============================================= */ .layout { display: flex; align-items: flex-start; position: relative; } .layout::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 228px; border-right: 1px solid rgba(var(--on-surface-rgb),0.08); z-index: -1; } .sidebar { width: 228px; flex-shrink: 0; align-self: flex-start; position: sticky; top: 80px; max-height: calc(100vh - 80px); overflow-y: auto; padding: 16px 14px; border-right: 1px solid transparent; } .navbar-hub-word { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-style: italic; font-size: 16px; letter-spacing: -0.01em; color: var(--orange-lt); line-height: 1; } .sidebar-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .sidebar-nav li { padding: 0; } .sidebar-nav a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 12.5px; color: var(--muted); text-decoration: none; } .sidebar-nav a:hover, .sidebar-nav a.active { background: rgba(230,85,18,0.14); color: var(--orange-lt); } .sidebar-group-label { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 3px 8px 1px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); font-weight: 700; } .sidebar-subnav { list-style: none; margin: 0 0 1px; padding: 0; } .sidebar-subnav li { padding: 0; } .sidebar-subnav a { padding-top: 3px; padding-bottom: 3px; padding-left: 17px; font-size: 11.5px; } .sidebar-nav .disabled { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 6px; font-size: 11.5px; color: var(--gray); opacity: 0.55; cursor: default; } .sidebar-subnav .disabled { padding-left: 17px; } /* Sotto-gruppo dentro un gruppo (es. "Prompt Vault" dentro Risorse): un'etichetta muta seguita da voci indentate di un livello in più. */ .sidebar-subnav-heading { display: block; margin-top: 3px; padding: 3px 8px 1px 17px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray); font-weight: 700; opacity: 0.75; } .sidebar-subnav a.sidebar-subnav-nested { padding-left: 25px; } /* Voce con flyout a comparsa al passaggio del mouse (es. Organigramma -> persone) */ .sidebar-nav .has-submenu { position: relative; } .sidebar-nav .submenu-flyout { display: none; flex-direction: column; list-style: none; margin: 0; padding: 6px; position: absolute; left: 100%; top: 0; margin-left: 8px; min-width: 200px; background: var(--black-2); border: 1px solid rgba(var(--on-surface-rgb),0.12); border-radius: 12px; box-shadow: 0 20px 44px rgba(0,0,0,0.5); z-index: 60; } .sidebar-nav .has-submenu:hover .submenu-flyout, .sidebar-nav .has-submenu:focus-within .submenu-flyout { display: flex; } .sidebar-nav .submenu-flyout li { padding: 0; } .sidebar-nav .submenu-flyout a { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; } @media (max-width: 900px) { .sidebar-nav .submenu-flyout { position: static; left: auto; margin-left: 0; box-shadow: none; border: none; padding: 4px 0 4px 18px; } } .main-content { flex: 1; min-width: 0; } @media (max-width: 900px) { .layout { flex-direction: column; } .layout::before { display: none; } .sidebar { width: 100%; position: static; max-height: none; overflow-y: visible; border-right: none; border-bottom: 1px solid rgba(var(--on-surface-rgb),0.08); padding: 20px; } } /* Saluto in cima alla home — la ricerca ora vive nell'header. Il nome è statico per ora: diventerà automatico quando ci saranno utenti/ruoli veri, niente form da compilare a mano nel frattempo. */ .hero-welcome { padding-bottom: 56px; } .section-divider { height: 1px; margin: 0 auto 56px; background: linear-gradient(90deg, transparent, rgba(230,85,18,0.4) 50%, transparent); } .hero-welcome-grid { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; } .hero-welcome .section-subtitle { margin-bottom: 22px; } .hero-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 62ch; } .hero-tips li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.6; color: var(--muted); } .hero-tips li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); } .hero-tips li b, .hero-tips li strong { color: var(--white); } /* Hero di sezione riutilizzabile per le pagine-area (Organigramma, Mappe, Libreria Video, ecc.): stesso linguaggio visivo della hero di Home (hero-doc-stack sotto), ma più compatta e senza la lista di consigli. */ .page-hero { padding: 6px 0 10px; } .page-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; } .page-hero-grid .section-subtitle { max-width: 62ch; } .page-hero-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .page-hero-stat { padding: 9px 16px; border: 1px solid rgba(230,85,18,.22); border-radius: 12px; background: var(--black-2); } .page-hero-stat strong { display: block; font-size: 19px; color: var(--white); line-height: 1.2; } .page-hero-stat span { font: 700 9px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gray); } @media (max-width: 860px) { .page-hero-grid { grid-template-columns: 1fr; gap: 28px; } .page-hero-grid .hero-doc-stack { margin: 0 auto; } } /* Grafica SOP dinamica e vettoriale: dettagli nitidi a ogni risoluzione */ .hero-doc-stack { position: relative; width: 340px; height: 320px; flex-shrink: 0; perspective: 1100px; isolation:isolate; } .hero-doc-stack::before{content:"";position:absolute;inset:34px 38px 28px;border-radius:50%;background:radial-gradient(circle,rgba(230,85,18,.2),transparent 68%);filter:blur(14px);animation:heroGlow 4.5s ease-in-out infinite} .hero-doc-orbit{position:absolute;left:50%;top:47%;border:1px solid rgba(230,85,18,.18);border-radius:50%;transform:translate(-50%,-50%) rotate(-10deg);pointer-events:none} .hero-doc-orbit::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange)} .orbit-1{width:308px;height:210px;animation:heroOrbit 14s linear infinite}.orbit-1::after{left:26px;top:31px} .orbit-2{width:230px;height:285px;animation:heroOrbitReverse 18s linear infinite}.orbit-2::after{right:14px;bottom:58px} .hero-doc-card { position: absolute; top: 28px; left: 50%; width: 176px; height: 232px; background:linear-gradient(145deg,var(--black-2),var(--black));border:1px solid rgba(var(--on-surface-rgb),.16); border-radius:16px;box-shadow:0 24px 54px rgba(0,0,0,.48);padding:16px; backface-visibility:hidden;will-change:transform;overflow:hidden; } .hero-doc-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.07) 48%,transparent 67%);transform:translateX(-130%);animation:heroSheen 6s ease-in-out infinite} .hero-doc-card .icon { width: 16px; height: 16px; } .hero-doc-card-1 { transform: translateX(-73%) translateY(20px) rotate(-13deg); z-index: 1;animation:cardLeft 5.8s ease-in-out infinite; } .hero-doc-card-2 { transform: translateX(-50%) rotate(2deg); z-index: 3;animation:cardCenter 5.2s ease-in-out infinite; } .hero-doc-card-3 { transform: translateX(-27%) translateY(18px) rotate(13deg); z-index: 2;animation:cardRight 6.1s ease-in-out infinite; } .hero-doc-card-1 .icon, .hero-doc-card-3 .icon { color: var(--muted); } .hero-doc-card-2 .icon { color: var(--orange); } .hero-doc-head{display:grid;grid-template-columns:18px 1fr auto;gap:7px;align-items:center;padding-bottom:10px;border-bottom:1px solid rgba(var(--on-surface-rgb),.09);font:700 8px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gray)} .hero-doc-head b{font-size:8px;color:var(--orange)}.hero-doc-title{margin:13px 0 10px;font-size:12px;font-weight:750;color:var(--white)} .hero-doc-line{width:65%;height:4px;border-radius:3px;background:rgba(var(--on-surface-rgb),.09);margin:7px 0}.hero-doc-line.wide{width:100%} .hero-doc-check{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:8px;color:var(--muted)}.hero-doc-check i{width:9px;height:9px;border:1px solid rgba(230,85,18,.55);border-radius:3px;background:rgba(230,85,18,.12)} .hero-doc-progress{position:absolute;left:16px;right:16px;bottom:16px;height:4px;border-radius:4px;background:rgba(var(--on-surface-rgb),.09);overflow:hidden}.hero-doc-progress span{display:block;height:100%;border-radius:inherit;background:var(--orange);animation:heroProgress 3.8s ease-in-out infinite} .hero-doc-status{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:99px;background:rgba(63,180,108,.1);color:#69cd8f;font:7px var(--font-mono)}.hero-doc-status i,.hero-doc-live i{width:5px;height:5px;border-radius:50%;background:#55cf84;box-shadow:0 0 7px #55cf84} .hero-doc-metric{display:flex;align-items:baseline;gap:5px;margin-top:15px}.hero-doc-metric strong{font-size:23px;color:var(--white)}.hero-doc-metric span{font:8px var(--font-mono);color:var(--gray)} .hero-doc-chart{height:35px;display:flex;align-items:end;gap:5px;margin-top:10px}.hero-doc-chart i{width:9px;border-radius:3px 3px 0 0;background:rgba(230,85,18,.45)}.hero-doc-chart i:nth-child(1){height:35%}.hero-doc-chart i:nth-child(2){height:60%}.hero-doc-chart i:nth-child(3){height:48%}.hero-doc-chart i:nth-child(4){height:88%;background:var(--orange)} .hero-doc-badge { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 5; width: 82px; height: 82px; border-radius: 25px; background: var(--black); border: 3px solid var(--black); box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 0 1px rgba(230,85,18,0.4); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-doc-badge img { width: 100%; height: 100%; object-fit: cover; } .hero-doc-live{position:absolute;right:26px;bottom:36px;z-index:6;display:flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid rgba(85,207,132,.25);border-radius:99px;background:var(--black);color:#69cd8f;font:700 7px var(--font-mono);letter-spacing:.1em} @keyframes cardLeft{50%{transform:translateX(-76%) translateY(13px) rotate(-15deg)}}@keyframes cardCenter{50%{transform:translateX(-50%) translateY(-8px) rotate(0)}}@keyframes cardRight{50%{transform:translateX(-24%) translateY(10px) rotate(15deg)}} @keyframes heroGlow{50%{opacity:.62;transform:scale(1.08)}}@keyframes heroSheen{0%,45%{transform:translateX(-130%)}70%,100%{transform:translateX(150%)}}@keyframes heroProgress{50%{filter:brightness(1.45);box-shadow:0 0 9px var(--orange)}} @keyframes heroOrbit{to{transform:translate(-50%,-50%) rotate(350deg)}}@keyframes heroOrbitReverse{to{transform:translate(-50%,-50%) rotate(-370deg)}} @media (max-width: 860px) { .hero-welcome-grid { grid-template-columns: 1fr; gap: 32px; } .hero-doc-stack { margin: 0 auto; } } @media(max-width:420px){.hero-doc-stack{width:290px;transform:scale(.88);transform-origin:top center;margin-bottom:-36px}} @media(prefers-reduced-motion:reduce){.hero-doc-stack *,.hero-doc-stack::before{animation:none!important}} /* UI shell 2026 — navigazione più pulita, dinamica e coerente. */ .navbar{background:color-mix(in srgb,var(--black) 86%,transparent);backdrop-filter:blur(18px);border-bottom-color:rgba(var(--on-surface-rgb),.07);transition:box-shadow .2s,border-color .2s}.navbar.is-scrolled{box-shadow:0 12px 34px rgba(0,0,0,.22);border-bottom-color:rgba(230,85,18,.16)}.sidebar{background:linear-gradient(180deg,var(--black),color-mix(in srgb,var(--black-2) 72%,var(--black)));border-right-color:rgba(var(--on-surface-rgb),.07);scrollbar-width:thin;scrollbar-color:rgba(230,85,18,.28) transparent}.sidebar-nav a{border-radius:8px;margin:1px 7px;transition:background .16s,color .16s,transform .16s}.sidebar-nav a:hover{transform:translateX(2px)}.sidebar-nav a.active{position:relative;background:linear-gradient(90deg,rgba(230,85,18,.18),rgba(230,85,18,.055));box-shadow:inset 0 0 0 1px rgba(230,85,18,.12)}.sidebar-nav a.active::before{content:"";position:absolute;left:-7px;top:20%;bottom:20%;width:3px;border-radius:4px;background:var(--orange)}.sidebar-group-label{margin-top:12px;opacity:.72}.main-content{background:radial-gradient(circle at 74% 4%,rgba(230,85,18,.035),transparent 26%)}.page-context{display:flex;align-items:center;gap:8px;max-width:1180px;margin:0 auto;padding:22px 32px 0;color:var(--gray);font:10px var(--font-mono);text-transform:uppercase;letter-spacing:.06em}.page-context a{color:var(--gray);text-decoration:none}.page-context a:hover{color:var(--orange-lt)}.page-context strong{color:var(--muted);font-weight:600}.section{padding:56px 0}.section+.section{border-top:1px solid rgba(var(--on-surface-rgb),.045)}.section-title{letter-spacing:-.035em;text-wrap:balance}.section-subtitle{max-width:72ch}.card{border-color:rgba(var(--on-surface-rgb),.09);box-shadow:0 12px 30px rgba(0,0,0,.12);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.card:hover{border-color:rgba(230,85,18,.26);box-shadow:0 16px 38px rgba(0,0,0,.2)}.reading-progress{position:fixed;z-index:1001;left:0;right:0;top:0;height:2px;pointer-events:none}.reading-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--orange),#ff9a48);box-shadow:0 0 10px var(--orange)}.back-to-top{position:fixed;z-index:90;right:22px;bottom:22px;width:42px;height:42px;border:1px solid rgba(230,85,18,.3);border-radius:50%;background:color-mix(in srgb,var(--black-2) 92%,transparent);color:var(--orange-lt);font-size:19px;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;box-shadow:0 10px 28px rgba(0,0,0,.3)}.back-to-top.show{opacity:1;transform:none;pointer-events:auto}.sidebar-mobile-toggle,.sidebar-overlay{display:none} @media(max-width:900px){.navbar{position:sticky;top:0}.navbar .container{flex-direction:row;height:62px;padding:0 18px}.navbar-links{width:auto;margin-left:auto;overflow:visible}.sidebar-mobile-toggle{display:grid;place-content:center;gap:4px;position:absolute;left:15px;top:14px;width:38px;height:36px;border:1px solid rgba(var(--on-surface-rgb),.12);border-radius:9px;background:var(--black-2)}.sidebar-mobile-toggle span{display:block;width:17px;height:2px;background:var(--white);border-radius:3px}.navbar-logo{margin-left:44px}.layout{display:block}.sidebar{display:block!important;position:fixed!important;z-index:150;top:0!important;left:0;width:min(310px,86vw)!important;height:100dvh!important;max-height:none!important;padding:78px 12px 24px!important;transform:translateX(-105%);transition:transform .24s ease;box-shadow:20px 0 55px rgba(0,0,0,.42)}body.sidebar-open .sidebar{transform:none}.sidebar-overlay{display:block;position:fixed;z-index:140;inset:0;border:0;background:rgba(0,0,0,.58);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s}body.sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}.page-context{padding:16px 20px 0}.container{padding-left:20px;padding-right:20px}.section{padding:42px 0}} @media(max-width:600px){.navbar-links>li:not(:has(.theme-toggle)):not(.navbar-profile){display:none}.section-title{font-size:clamp(28px,9vw,42px)}.page-context{white-space:nowrap;overflow:hidden}.back-to-top{right:14px;bottom:14px}} body.map-focus .page-context{display:none}body.map-focus .sidebar-overlay,body.map-focus .sidebar-mobile-toggle{display:none!important} /* ============================================= ICONE — stile lineare minimale (ispirazione SF Symbols), zero dipendenze ============================================= */ .icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .sidebar-subnav .icon, .eyebrow .icon { width: 14px; height: 14px; } .eyebrow .icon { margin-right: 2px; vertical-align: -2px; } .icon-home { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9a1 1 0 0 0 1 1H9v-5.5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1V20h2.5a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9a1 1 0 0 0 1 1H9v-5.5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1V20h2.5a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E"); } .icon-areas { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); } .icon-delivery { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 7v10l8 4 8-4V7z'/%3E%3Cpath d='M4 7l8 4 8-4M12 11v10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 7v10l8 4 8-4V7z'/%3E%3Cpath d='M4 7l8 4 8-4M12 11v10'/%3E%3C/svg%3E"); } .icon-vendita { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); } .icon-hr { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M15.5 14a4.5 4.5 0 0 1 5.5 4.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M15.5 14a4.5 4.5 0 0 1 5.5 4.4'/%3E%3C/svg%3E"); } .icon-marketing { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h2l11 5V4L6 9H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M17 9.5a4 4 0 0 1 0 5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h2l11 5V4L6 9H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M17 9.5a4 4 0 0 1 0 5'/%3E%3C/svg%3E"); } .icon-sviluppo { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6 2.5 12 8 18'/%3E%3Cpath d='M16 6l5.5 6-5.5 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6 2.5 12 8 18'/%3E%3Cpath d='M16 6l5.5 6-5.5 6'/%3E%3C/svg%3E"); } .icon-finance { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10M9.5 9.3c0-1.3 1.1-2.3 2.5-2.3s2.5.7 2.5 1.9-1.1 1.8-2.5 2c-1.6.2-2.7.9-2.7 2.1S10.7 15 12.2 15s2.4-.6 2.5-1.7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10M9.5 9.3c0-1.3 1.1-2.3 2.5-2.3s2.5.7 2.5 1.9-1.1 1.8-2.5 2c-1.6.2-2.7.9-2.7 2.1S10.7 15 12.2 15s2.4-.6 2.5-1.7'/%3E%3C/svg%3E"); } .icon-org { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Crect x='3' y='17' width='6' height='4' rx='1'/%3E%3Crect x='15' y='17' width='6' height='4' rx='1'/%3E%3Cpath d='M12 7v5M6 17v-3a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='4' rx='1'/%3E%3Crect x='3' y='17' width='6' height='4' rx='1'/%3E%3Crect x='15' y='17' width='6' height='4' rx='1'/%3E%3Cpath d='M12 7v5M6 17v-3a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3'/%3E%3C/svg%3E"); } .icon-roles { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } .icon-training { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-4 10 4-10 4-10-4z'/%3E%3Cpath d='M6 11v4c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-4'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-4 10 4-10 4-10-4z'/%3E%3Cpath d='M6 11v4c0 1.4 2.7 2.5 6 2.5s6-1.1 6-2.5v-4'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E"); } .icon-resources { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); } .icon-template { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 9v12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 9v12'/%3E%3C/svg%3E"); } .icon-playbooks { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5c-1.8-1.4-4.3-2-6.5-2A2.5 2.5 0 0 0 3 7v10.5A2.5 2.5 0 0 1 5.5 16c2.2 0 4.7.6 6.5 2'/%3E%3Cpath d='M12 6.5c1.8-1.4 4.3-2 6.5-2A2.5 2.5 0 0 1 21 7v10.5a2.5 2.5 0 0 0-2.5-1.5c-2.2 0-4.7.6-6.5 2z'/%3E%3Cpath d='M12 6.5v12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5c-1.8-1.4-4.3-2-6.5-2A2.5 2.5 0 0 0 3 7v10.5A2.5 2.5 0 0 1 5.5 16c2.2 0 4.7.6 6.5 2'/%3E%3Cpath d='M12 6.5c1.8-1.4 4.3-2 6.5-2A2.5 2.5 0 0 1 21 7v10.5a2.5 2.5 0 0 0-2.5-1.5c-2.2 0-4.7.6-6.5 2z'/%3E%3Cpath d='M12 6.5v12'/%3E%3C/svg%3E"); } .icon-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E"); } .icon-fullscreen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4H4v4M16 4h4v4M8 20H4v-4M16 20h4v-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4H4v4M16 4h4v4M8 20H4v-4M16 20h4v-4'/%3E%3C/svg%3E"); } /* .icon-profile: niente mask-image data-URI qui — su questo file quella regola spariva misteriosamente dal CSSOM in fase di parse del file completo (non riproducibile isolando la stessa identica regola). L'icona profilo usa un inline nell'HTML invece della mask CSS, per aggirare il problema. */ .icon-inline { display: block; } /* ============================================= ORGANIGRAMMA — schede team stile "figurina" ============================================= */ .team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; } .team-card { border-radius: 20px; padding: 3px; scroll-margin-top: 96px; background: linear-gradient(160deg, var(--orange) 0%, var(--orange-dk) 100%); box-shadow: 0 20px 44px rgba(0,0,0,0.4); transition: transform 0.25s ease; } .team-card:hover { transform: translateY(-4px); } .team-card-inner { background: var(--black-2); border-radius: 17px; overflow: hidden; } .team-card-photo { position: relative; aspect-ratio: 3 / 4; background: var(--black); } .team-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .team-card-photo .initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 42px; font-weight: 800; color: rgba(230,85,18,0.55); } .team-card-tag { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: var(--orange-lt); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; border: 1px solid rgba(230,85,18,0.4); } .team-card-body { padding: 14px 16px 16px; } .team-card-body h3 { font-size: 15.5px; color: var(--white); margin: 0 0 8px; } .team-card-roles { display: flex; flex-wrap: wrap; gap: 5px; } .team-card-roles span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: rgba(var(--on-surface-rgb),0.06); border: 1px solid rgba(var(--on-surface-rgb),0.1); padding: 3px 8px; border-radius: 20px; } .team-note { margin-top: 32px; padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(var(--on-surface-rgb),0.08); background: var(--black-2); font-size: 13px; color: var(--muted); line-height: 1.6; } .team-note-draft { margin-top: 20px; margin-bottom: 0; border-color: rgba(230,85,18,0.3); background: rgba(230,85,18,0.06); color: var(--white); } .team-card-duties { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--orange-lt); text-decoration: none; } .team-card-duties:hover { text-decoration: underline; } .team-directory { margin-top: 112px; padding: 42px; border: 1px solid rgba(var(--on-surface-rgb),0.1); border-radius: 24px; background: linear-gradient(145deg, rgba(var(--on-surface-rgb),0.035), rgba(230,85,18,0.025)); box-shadow: 0 22px 60px rgba(0,0,0,0.16); } .team-directory-head { max-width: 760px; } .team-directory-head h2 { margin-bottom: 8px; } .team-card-contact-list { display: grid; gap: 8px; margin-top: 14px; } .team-card-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--on-surface-rgb),0.1); background: rgba(var(--on-surface-rgb),0.04); font-family: var(--font-mono); font-size: 10.5px; } .team-card-contact-label { color: var(--muted); text-transform: uppercase; letter-spacing: .03em; } .team-card-contact-value { color: var(--gray); text-align: right; } .team-card-contact[href] { text-decoration: none; transition: border-color .2s ease, background .2s ease; } .team-card-contact[href]:hover { border-color: rgba(230,85,18,.45); background: rgba(230,85,18,.08); } .team-card-contact[href] .team-card-contact-value { color: var(--orange-lt); } .team-card-contact-whatsapp { justify-content: flex-start; } .team-card-contact-whatsapp::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: #25d366; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.8 11.8 0 0 0 12.1 0C5.6 0 .3 5.3.3 11.8c0 2.1.5 4.1 1.6 5.9L.2 24l6.5-1.7c1.7.9 3.6 1.4 5.5 1.4 6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.1-3.5-8.4zm-8.4 18.2c-1.7 0-3.4-.5-4.9-1.3l-.4-.2-3.8 1 1-3.7-.2-.4a9.7 9.7 0 1 1 8.3 4.6zm5.3-7.3c-.3-.1-1.7-.8-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-4-3.4-.3-.5.3-.5.8-1.5.1-.2 0-.4 0-.6l-.9-2.1c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.8.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.3c.2.2 2.3 3.5 5.6 4.9 2.1.9 2.9 1 3.9.8.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.2-.2-.4-.3-.7-.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5A11.8 11.8 0 0 0 12.1 0C5.6 0 .3 5.3.3 11.8c0 2.1.5 4.1 1.6 5.9L.2 24l6.5-1.7c1.7.9 3.6 1.4 5.5 1.4 6.5 0 11.8-5.3 11.8-11.8 0-3.2-1.2-6.1-3.5-8.4zm-8.4 18.2c-1.7 0-3.4-.5-4.9-1.3l-.4-.2-3.8 1 1-3.7-.2-.4a9.7 9.7 0 1 1 8.3 4.6zm5.3-7.3c-.3-.1-1.7-.8-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-4-3.4-.3-.5.3-.5.8-1.5.1-.2 0-.4 0-.6l-.9-2.1c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.8.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.3c.2.2 2.3 3.5 5.6 4.9 2.1.9 2.9 1 3.9.8.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.2-.2-.4-.3-.7-.4z'/%3E%3C/svg%3E") center / contain no-repeat; } .team-card-contact-whatsapp .team-card-contact-value { margin-left: auto; } .team-card-photo.team-card-photo-initial { aspect-ratio: 3 / 4; } @media (max-width: 720px) { .team-directory { margin-top: 72px; padding: 28px 20px; border-radius: 18px; } .team-grid { grid-template-columns: 1fr; } } @media (min-width: 721px) and (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================= ALBERO ORGANIGRAMMA — connettori CSS puri (tecnica "family tree" classica) ============================================= */ .org-chart-frame { margin-top: 20px; } .org-chart-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; } .org-fullscreen-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 30px; font-size: 12.5px; font-weight: 600; background: var(--black-2); border: 1.5px solid rgba(var(--on-surface-rgb),0.16); color: var(--muted); cursor: pointer; transition: all 0.2s ease; } .org-fullscreen-btn:hover { border-color: var(--orange); color: var(--white); } /* Centratura via flexbox, non text-align: .org-tree è inline-flex e con un transform:scale() applicato text-align non lo ricentra in modo affidabile (resta ancorato all'origine sinistra, poi lo scale lo lascia fuori dal contenitore) — flexbox centra il layout box a prescindere dal transform. */ .org-chart-scroll { overflow: hidden; padding: 0; margin-top: 20px; display: flex; justify-content: center; align-items: center; } /* A schermo intero: .org-chart-frame diventa il riquadro pieno, la toolbar resta in alto e .org-chart-scroll centra l'albero (in orizzontale e verticale) nello spazio restante — niente calcolo manuale dell'altezza. */ .org-chart-frame:fullscreen, .org-chart-frame:-webkit-full-screen { display: flex; flex-direction: column; background: var(--black); padding: 28px 40px; margin-top: 0; } .org-chart-frame:fullscreen .org-chart-toolbar, .org-chart-frame:-webkit-full-screen .org-chart-toolbar { flex: 0 0 auto; margin-bottom: 14px; } .org-chart-frame:fullscreen .org-chart-scroll, .org-chart-frame:-webkit-full-screen .org-chart-scroll { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; } .org-tree, .org-tree ul { padding-top: 26px; position: relative; } .org-tree { display: inline-flex; justify-content: center; padding-left: 0; margin: 0; list-style: none; } .org-tree ul { display: flex; padding-left: 0; margin: 0; list-style: none; } .org-tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 26px 10px 0 10px; } .org-tree li::before, .org-tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid rgba(230,85,18,0.4); width: 50%; height: 26px; } .org-tree li::after { right: auto; left: 50%; border-left: 2px solid rgba(230,85,18,0.4); } .org-tree li:only-child::after, .org-tree li:only-child::before { display: none; } .org-tree li:only-child { padding-top: 0; } .org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; } .org-tree li:last-child::before { border-right: 2px solid rgba(230,85,18,0.4); border-radius: 0 6px 0 0; } .org-tree li:first-child::after { border-radius: 6px 0 0 0; } .org-tree ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid rgba(230,85,18,0.4); width: 0; height: 26px; } .org-tree > li { padding-top: 0; } .org-tree > li::before, .org-tree > li::after { display: none; } .org-node { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 14px; border-radius: 10px; font-size: 12px; line-height: 1.35; white-space: nowrap; border: 1px solid transparent; } .org-node small { display: block; font-size: 10px; opacity: 0.8; margin-top: 1px; } .org-node-ceo { background: linear-gradient(160deg, var(--orange) 0%, var(--orange-dk) 100%); color: #fff; font-weight: 700; font-size: 13px; padding: 12px 22px; } .org-node-exec { background: rgba(230,85,18,0.16); border-color: rgba(230,85,18,0.4); color: var(--white); font-weight: 600; } .org-node-dept { background: rgba(45,166,178,0.14); border-color: rgba(45,166,178,0.4); color: var(--white); font-weight: 600; } .org-node-role { background: rgba(230,85,18,0.07); border-color: rgba(230,85,18,0.28); color: var(--muted); } .org-node-person { background: var(--black-2); border-color: rgba(var(--on-surface-rgb),0.14); color: var(--muted); flex-direction: row; gap: 7px; padding: 6px 12px 6px 6px; } .org-node-multihat { border-color: var(--orange); box-shadow: 0 0 0 1px rgba(230,85,18,0.5); color: var(--white); } .org-node-stack { display: flex; flex-direction: column; gap: 6px; } .org-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--black); } .org-avatar-initial { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: var(--orange-lt); background: var(--black); } .org-node-person, .org-node-ceo { cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .org-node-person:hover, .org-node-person:focus-visible, .org-node-ceo:hover, .org-node-ceo:focus-visible { border-color: var(--orange); transform: translateY(-2px); outline: none; } .org-node-ceo:hover, .org-node-ceo:focus-visible { box-shadow: 0 6px 20px rgba(230,85,18,0.4); } /* ===== Scheda "ruoli e responsabilità" — dialog nativo aperto al click su una persona ===== */ .person-modal { width: min(440px, calc(100vw - 48px)); max-height: calc(100vh - 64px); overflow-y: auto; border: none; border-radius: 18px; margin: auto; padding: 0; background: var(--black-2); color: var(--white); box-shadow: 0 30px 70px rgba(0,0,0,0.5); } .person-modal::backdrop { background: rgba(0,0,0,0.65); } .person-modal-inner { padding: 26px 26px 22px; position: relative; } .person-modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--on-surface-rgb),0.08); border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; } .person-modal-close:hover { color: var(--white); background: rgba(230,85,18,0.2); } .person-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-right: 30px; } .person-modal-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--black); } .person-modal-avatar-initial { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 20px; color: var(--orange-lt); } .person-modal-name { font-size: 19px; margin: 0; color: var(--white); } .person-modal-count { margin: 3px 0 0; font-size: 12px; color: var(--gray); font-family: var(--font-mono); } .person-modal-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .person-modal-role { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--white); background: rgba(230,85,18,0.14); border: 1px solid rgba(230,85,18,0.32); } .person-modal-role small { font-weight: 500; font-size: 11px; color: var(--muted); } .person-modal-note { margin: 0; padding-top: 16px; border-top: 1px solid rgba(var(--on-surface-rgb),0.1); font-size: 12.5px; line-height: 1.6; color: var(--muted); } .person-modal-note a { color: var(--orange-lt); text-decoration: none; } .person-modal-note a:hover { text-decoration: underline; } /* ===== GHL Knowledge Base — guide step-by-step ===== */ #guideGrid .vault-card-body { padding: 20px 22px; } .guide-steps { margin: 0 0 14px; padding-left: 20px; font-size: 13.5px; line-height: 1.75; color: var(--muted); } .guide-steps li { margin-bottom: 8px; } .guide-screenshot-pending { border: 1px dashed rgba(230,85,18,0.35); border-radius: 8px; padding: 14px 16px; font-size: 12.5px; color: var(--gray); background: rgba(230,85,18,0.04); margin-bottom: 14px; } .guide-source-link { display: inline-block; font-size: 11.5px; color: var(--gray); } .guide-source-link:hover { color: var(--orange-lt); } .updates-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .updates-item { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border: 1px solid rgba(var(--on-surface-rgb),0.09); border-radius: 8px; font-size: 13px; } .updates-item .updates-date { font-family: var(--font-mono); font-size: 11px; color: var(--gray); white-space: nowrap; } .updates-item a { color: var(--white); } .updates-item a:hover { color: var(--orange-lt); } /* ============================================= VIDEO LIBRARY — libreria di video incorporati, filtrabile ============================================= */ .video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 22px; margin-top: 8px; } .video-card { border: 1px solid rgba(var(--on-surface-rgb),0.09); border-radius: 16px; background: var(--black-2); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s ease; } .video-card:hover { border-color: rgba(230,85,18,0.32); } .video-card.hidden-by-filter { display: none; } .video-thumb { position: relative; aspect-ratio: 16/9; cursor: pointer; background: #000; overflow: hidden; } .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.82; transition: opacity 0.2s ease; } .video-thumb:hover img { opacity: 1; } .video-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(230,85,18,0.92); border: none; color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,0.45); transition: transform 0.2s ease, background 0.2s ease; } .video-thumb:hover .video-play { background: var(--orange); transform: scale(1.07); } .video-thumb .video-dur { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.78); color: #fff; font-family: var(--font-mono); font-size: 10.5px; padding: 2px 7px; border-radius: 5px; } .video-embed-frame { width: 100%; aspect-ratio: 16/9; border: 0; display: block; } .video-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .video-meta-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .video-author { font-size: 11.5px; color: var(--gray); font-family: var(--font-mono); } .video-title { font-size: 16.5px; color: var(--white); line-height: 1.35; } .video-takeaways-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; } .video-takeaways ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.65; color: var(--muted); } .video-takeaways li { margin-bottom: 5px; } .video-tip { background: rgba(230,85,18,0.06); border-left: 2px solid var(--orange); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); } .video-tip b { color: var(--white); } .video-tip a { color: var(--orange-lt); } .video-tags { display: flex; flex-wrap: wrap; gap: 6px; } .tagpill { appearance: none; border: 1px solid rgba(var(--on-surface-rgb),0.14); background: transparent; color: var(--gray); font-family: var(--font-mono); font-size: 10px; padding: 4px 9px; border-radius: 999px; cursor: pointer; } .tagpill:hover { border-color: var(--orange); color: var(--orange-lt); } .video-yt-link { font-size: 11.5px; color: var(--gray); } .video-yt-link:hover { color: var(--orange-lt); } .video-related { font-size: 11.5px; color: var(--gray); font-style: italic; } /* Sidebar icon — Libreria SOP */ .icon-sop { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v1h1a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v1h1a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); } /* ============================================= LIBRERIA SOP — pagine di dettaglio procedura importata ============================================= */ .hub-card .status.warn { color: var(--warm); } .hub-card .status.risk { color: #E06A5A; } .hub-card.hidden-by-filter { display: none; } .sop-meta-table { width: 100%; border-collapse: collapse; margin: 20px 0 8px; font-size: 13.5px; } .sop-meta-table th, .sop-meta-table td { text-align: left; padding: 10px 14px; border-top: 1px solid rgba(var(--on-surface-rgb),0.08); vertical-align: top; } .sop-meta-table th { width: 200px; color: var(--orange-lt); font-weight: 600; font-size: 12.5px; } .sop-meta-table td { color: var(--muted); line-height: 1.6; } .sop-meta-table tr:first-child th, .sop-meta-table tr:first-child td { border-top: none; } .step-shot { margin: 18px 0 24px; border: 1px solid rgba(var(--on-surface-rgb),0.12); border-radius: 12px; overflow: hidden; background: var(--black-2); box-shadow: 0 14px 30px rgba(0,0,0,0.3); } .step-shot .shot-img-wrap { position: relative; line-height: 0; } .step-shot img { width: 100%; display: block; } .step-shot figcaption { padding: 10px 16px; font-size: 12px; color: var(--gray); line-height: 1.55; border-top: 1px solid rgba(var(--on-surface-rgb),0.08); } /* Marcatore "disegnato" sullo screenshot, per i casi senza cerchio/freccia nativi */ .shot-mark { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2.5px solid #FF4B4B; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,75,75,0.22), 0 4px 14px rgba(0,0,0,0.45); pointer-events: none; } .shot-mark::after { content: ""; position: absolute; inset: -7px; border: 1.5px solid rgba(255,75,75,0.55); border-radius: 50%; animation: shot-pulse 1.7s ease-out infinite; } @keyframes shot-pulse { 0% { transform: scale(0.75); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } } /* Box di traduzione — cosa dice lo screenshot in inglese + cosa fare */ .translate-box { margin: 0; padding: 14px 18px 16px; border-top: 1px solid rgba(79,168,216,0.25); background: rgba(79,168,216,0.06); } .translate-box .tb-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cold); margin-bottom: 10px; } .translate-box dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 12.5px; align-items: baseline; } .translate-box dt { color: var(--gray); font-family: var(--font-mono); font-size: 11px; white-space: nowrap; } .translate-box dt::before { content: "EN "; opacity: .55; } .translate-box dd { color: var(--white); margin: 0; } .translate-box .tb-action { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(79,168,216,0.22); font-size: 13px; color: var(--muted); line-height: 1.65; } .translate-box .tb-action b { color: var(--white); } /* Respiro extra tra gli elementi dentro ogni bigstep, per non far leggere tutto attaccato */ .bigstep { padding-bottom: 42px; } .bigstep .bbody > p { margin-bottom: 14px; } .bigstep .bbody > .checkbox-list { margin: 16px 0 20px; } .bigstep .bbody > .checkbox-list:last-child { margin-bottom: 0; } .bigstep .bbody .step-divider { margin: 26px 0; border: none; border-top: 1px dashed rgba(var(--on-surface-rgb),0.1); } .qa-verdict { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .qa-verdict .badge.ok { border-color: rgba(79,190,110,0.4); color: #4FBE6E; background: rgba(79,190,110,0.08); } .qa-verdict .badge.warn { border-color: rgba(240,168,48,0.4); color: var(--warm); background: rgba(240,168,48,0.08); } .qa-verdict .badge.risk { border-color: rgba(224,106,90,0.4); color: #E06A5A; background: rgba(224,106,90,0.08); } .video-related a { color: var(--orange-lt); font-style: normal; } /* ============================================= CORSI — catalogo corsi del team (accesso via login + PM/1Password) ============================================= */ .course-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 8px; } .course-card { display: flex; flex-direction: column; gap: 7px; padding: 12px; } .course-card.hidden-by-filter { display: none; } .course-cover { height: 110px; border-radius: 8px; overflow: hidden; background: var(--black); display: flex; align-items: center; justify-content: center; color: var(--gray); font-size: 10px; text-align: center; padding: 8px; } .course-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .course-card-head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .course-card-head .badge { font-size: 8.5px; padding: 4px 8px; } .course-author-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .course-author { font-size: 10px; color: var(--gray); font-family: var(--font-mono); } .course-price { font-size: 10.5px; color: var(--orange-lt); font-family: var(--font-mono); font-weight: 700; } .course-title { font-size: 13px; color: var(--white); line-height: 1.3; } .course-desc { font-size: 10.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .course-outcomes-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; } .course-outcomes ul { margin: 0; padding-left: 14px; font-size: 10.5px; line-height: 1.45; color: var(--muted); } .course-outcomes li { margin-bottom: 2px; } .course-access-btn { margin-top: auto; align-self: flex-start; padding: 8px 18px; font-size: 10.5px; letter-spacing: 0.8px; } @media (max-width: 1100px) { .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 800px) { .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .course-grid { grid-template-columns: 1fr; } }