/* ============================================================================ * styles.css — Base, layout i components del curs Packet Tracer * Variables de color a themes.css (data-theme al ) * ==========================================================================*/ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --radius:16px; --radius-sm:10px; --ease:cubic-bezier(.22,.8,.22,1); --maxw:1180px; --font:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace; } html{scroll-behavior:smooth} body{ font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--accent);color:#fff} /* ─── Capçalera ──────────────────────────────────────────────────────────── */ .topbar{ position:sticky;top:0;z-index:50; background:var(--bg-bar); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .topbar-inner{ max-width:var(--maxw);margin:0 auto; display:flex;align-items:center;gap:1rem; padding:.65rem 1.25rem; } .brand{display:flex;align-items:center;gap:.7rem;margin-right:auto} .brand-logo{ display:grid;place-items:center;width:40px;height:40px; border-radius:11px;background:var(--accent);color:#fff; } .brand-logo svg{width:22px;height:22px} .brand-text strong{display:block;font-size:1.02rem;letter-spacing:-.01em} .brand-text small{display:block;font-size:.72rem;color:var(--text-dim)} .mainnav{display:flex;align-items:center;gap:.35rem} .mainnav a{ padding:.5rem .8rem;border-radius:9px;font-size:.9rem;font-weight:500; color:var(--text-dim);transition:.15s var(--ease); } .mainnav a:hover{color:var(--text);background:var(--hover)} .mainnav a.active{color:var(--accent);background:var(--accent-soft)} .theme-select select{ font-family:inherit;font-size:.85rem; background:var(--bg-card);color:var(--text); border:1px solid var(--border);border-radius:9px; padding:.45rem .5rem;cursor:pointer; } .hamburger{display:none;flex-direction:column;gap:5px;padding:.5rem} .hamburger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.25s var(--ease)} .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.active span:nth-child(2){opacity:0} .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ─── Layout general ─────────────────────────────────────────────────────── */ .view{max-width:var(--maxw);margin:0 auto;padding:2.2rem 1.25rem 4rem;min-height:60vh} .loading{display:grid;place-items:center;gap:1rem;padding:6rem 0;color:var(--text-dim)} .spinner{width:38px;height:38px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .page-head{margin-bottom:1.6rem} .page-head h1{font-size:1.9rem;letter-spacing:-.02em} .page-head .sub{color:var(--text-dim);margin-top:.3rem} .section-title{font-size:1.4rem;margin:2.2rem 0 1.1rem;letter-spacing:-.01em} .empty{color:var(--text-dim);padding:2rem;text-align:center;font-style:italic} /* ─── Botons ─────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:.5rem; padding:.7rem 1.2rem;border-radius:11px;font-weight:600;font-size:.95rem; transition:.18s var(--ease);border:1px solid transparent; } .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn-ghost{background:var(--bg-card);border-color:var(--border);color:var(--text)} .btn-ghost:hover{background:var(--hover)} .btn-ghost.danger{color:#f87171;border-color:rgba(248,113,113,.4)} /* ─── Hero ───────────────────────────────────────────────────────────────── */ .hero{ display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center; padding:1.5rem 0 2.5rem; } .pill{ display:inline-block;padding:.35rem .8rem;border-radius:999px; background:var(--accent-soft);color:var(--accent); font-size:.78rem;font-weight:600;margin-bottom:1rem; } .hero h1{font-size:2.7rem;line-height:1.08;letter-spacing:-.03em} .grad{background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent} .lead{color:var(--text-dim);font-size:1.08rem;margin:1.1rem 0 1.6rem;max-width:34rem} .hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem} .hero-progress{max-width:22rem} .hero-progress .bar{height:8px;background:var(--bg-card);border-radius:99px;overflow:hidden;border:1px solid var(--border)} .hero-progress .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px;transition:width .5s var(--ease)} .hero-progress small{color:var(--text-dim);font-size:.8rem;display:block;margin-top:.4rem} /* ─── Graella de mòduls ──────────────────────────────────────────────────── */ .modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.1rem} .modcard{ position:relative;display:flex;gap:.9rem; background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius); padding:1.2rem;overflow:hidden;transition:.2s var(--ease); } .modcard::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--mc)} .modcard:hover{transform:translateY(-3px);border-color:var(--mc);box-shadow:0 12px 30px -12px var(--mc)} .modcard-num{ flex:none;width:34px;height:34px;border-radius:9px; display:grid;place-items:center;font-weight:800;font-family:var(--mono); background:color-mix(in srgb,var(--mc) 18%,transparent);color:var(--mc); } .modcard-ico{font-size:1.3rem} .modcard-body h3{font-size:1.08rem;margin:.2rem 0 .3rem;letter-spacing:-.01em} .modcard-body p{color:var(--text-dim);font-size:.88rem;line-height:1.45} .modcard-meta{display:flex;gap:.8rem;align-items:center;margin-top:.7rem;font-size:.78rem;color:var(--text-muted)} .modcard-meta .chk{color:var(--accent);font-weight:600} .modcard.is-done{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))} /* ─── Ajuda portada ──────────────────────────────────────────────────────── */ .home-help{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.5rem} .help-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem} .help-card h3{margin-bottom:.5rem;font-size:1.05rem} .help-card p{color:var(--text-dim);font-size:.92rem} .help-card a{color:var(--accent)} /* ─── Capçalera de mòdul + pestanyes ─────────────────────────────────────── */ .module-head{border-bottom:1px solid var(--border);padding-bottom:0;margin-bottom:1.5rem} .back{color:var(--text-dim);font-size:.88rem;display:inline-block;margin-bottom:1rem} .back:hover{color:var(--accent)} .module-title{display:flex;align-items:center;gap:1rem} .module-ico{font-size:2.4rem} .module-kicker{color:var(--mc);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em} .module-title h1{font-size:1.9rem;letter-spacing:-.02em;line-height:1.1} .module-intro{color:var(--text-dim);margin:.9rem 0 1.2rem;max-width:50rem} .tabs{display:flex;gap:.3rem;flex-wrap:wrap} .tab{ padding:.7rem 1.1rem;border-radius:10px 10px 0 0;font-weight:600;font-size:.92rem; color:var(--text-dim);border-bottom:2px solid transparent; } .tab:hover{color:var(--text);background:var(--hover)} .tab.active{color:var(--mc);border-bottom-color:var(--mc);background:var(--accent-soft)} .tabpanel{display:none;animation:fade .3s var(--ease)} .tabpanel.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .module-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)} .mnav{padding:.8rem 1rem;border-radius:11px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);font-weight:600;font-size:.9rem;max-width:48%} .mnav:hover{color:var(--accent);border-color:var(--accent)} .mnav.next{margin-left:auto;text-align:right} /* ─── Teoria: acordió + prosa ────────────────────────────────────────────── */ .accordion-item{border:1px solid var(--border);border-radius:12px;margin-bottom:.7rem;overflow:hidden;background:var(--bg-card)} .accordion-head{ width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1rem 1.2rem;font-weight:600;font-size:1.02rem;text-align:left; } .accordion-head:hover{background:var(--hover)} .acc-arrow{transition:.25s var(--ease);color:var(--text-dim)} .accordion-item.open .acc-arrow{transform:rotate(180deg)} .accordion-body{display:none;padding:0 1.2rem 1.3rem} .accordion-item.open .accordion-body{display:block} .prose{color:var(--text);font-size:.96rem} .prose code,code{font-family:var(--mono);font-size:.86em;background:var(--code-bg);padding:.12em .4em;border-radius:5px;color:var(--code-fg)} .keypoints{margin:.9rem 0 0;padding-left:1.2rem;display:grid;gap:.35rem} .keypoints li{color:var(--text-dim);font-size:.92rem} .keypoints li::marker{content:"▸ ";color:var(--accent)} .callout{margin:1rem 0 0;padding:.8rem 1rem;border-radius:10px;font-size:.9rem;border-left:3px solid} .callout.tip{background:var(--tip-bg);border-color:var(--accent)} .callout.warn{background:var(--warn-bg);border-color:#f59e0b} /* Snippet CLI dins la teoria */ .cli-snippet{margin:1rem 0 0;border-radius:10px;overflow:hidden;border:1px solid var(--cli-border)} .cli-snippet-bar{background:var(--cli-bar);color:var(--text-dim);font-size:.75rem;padding:.4rem .8rem;font-family:var(--mono)} .cli-snippet pre{background:var(--cli-bg);color:var(--cli-fg);font-family:var(--mono);font-size:.84rem;padding:.9rem 1rem;overflow-x:auto;line-height:1.6} .cli-prompt::before{content:"› ";color:var(--accent)} .cli-comment{color:#7dd3a8;font-style:italic} /* Figures / imatges */ .figure{position:relative;margin:0 0 1rem;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--bg-elev)} .figure img{width:100%} .figure figcaption{padding:.55rem .8rem;font-size:.82rem;color:var(--text-dim);background:var(--bg-card)} .figure .img-fallback{display:none;padding:2.4rem 1rem;text-align:center;color:var(--text-muted);font-size:.9rem} .figure.img-missing img{display:none} .figure.img-missing .img-fallback{display:block} /* Lightbox */ .lightbox{position:fixed;inset:0;z-index:100;background:rgba(2,6,15,.85);backdrop-filter:blur(4px);display:none;place-items:center;padding:2rem} .lightbox.open{display:grid} .lightbox figure{max-width:min(1000px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:.6rem} .lightbox img{max-height:80vh;object-fit:contain;border-radius:10px} .lightbox figcaption{text-align:center;color:#cbd5e1;font-size:.9rem} .lb-close{position:absolute;top:1.2rem;right:1.4rem;font-size:1.6rem;color:#fff;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12)} /* ─── Cerca / comandes / glossari ────────────────────────────────────────── */ .search-box input{ width:100%;padding:.85rem 1rem;border-radius:12px;font-size:1rem; background:var(--bg-card);border:1px solid var(--border);color:var(--text); margin-bottom:1rem; } .search-box input:focus{outline:2px solid var(--accent);border-color:var(--accent)} .cmd-filters{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.2rem} .chip{padding:.4rem .85rem;border-radius:999px;font-size:.82rem;font-weight:600;background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim)} .chip.active,.chip:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} .cmd-list{display:grid;gap:.6rem} .cmd-row{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:11px;padding:.8rem 1rem;align-items:start} .cmd-code{font-family:var(--mono);font-size:.86rem;background:var(--code-bg);color:var(--code-fg);padding:.4rem .55rem;border-radius:7px;word-break:break-word} .cmd-info p{font-size:.92rem} .cmd-tags{display:flex;gap:.4rem;margin-top:.4rem;flex-wrap:wrap} .tag-cat,.tag-mode{font-size:.72rem;padding:.15rem .5rem;border-radius:6px;font-weight:600} .tag-cat{background:var(--accent-soft);color:var(--accent)} .tag-mode{background:var(--hover);color:var(--text-dim);font-family:var(--mono)} .no-results{color:var(--text-dim);text-align:center;padding:1.5rem;font-style:italic} .glossary{display:grid;gap:.6rem} .gloss-item{background:var(--bg-card);border:1px solid var(--border);border-radius:11px;padding:.9rem 1.1rem} .gloss-item dt{font-weight:700;margin-bottom:.25rem} .gloss-acr{font-family:var(--mono);font-size:.75rem;color:var(--accent);font-weight:600} .gloss-item dd{color:var(--text-dim);font-size:.92rem} /* ─── Progrés ────────────────────────────────────────────────────────────── */ .prog-summary{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;margin-bottom:1.5rem} .ring{ --pct:0;width:130px;height:130px;border-radius:50%;display:grid;place-items:center; background:conic-gradient(var(--accent) calc(var(--pct)*1%),var(--bg-card) 0); position:relative; } .ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--bg)} .ring span{position:relative;font-size:1.5rem;font-weight:800} .prog-list{display:grid;gap:.7rem} .prog-row{display:grid;grid-template-columns:minmax(0,1.3fr) 2fr auto;gap:1rem;align-items:center} .prog-row a{font-weight:600;font-size:.92rem;display:flex;gap:.5rem;align-items:center} .prog-row a:hover{color:var(--accent)} .prog-row .bar{height:8px;background:var(--bg-card);border-radius:99px;overflow:hidden;border:1px solid var(--border)} .prog-row .bar span{display:block;height:100%;border-radius:99px} .prog-row small{color:var(--text-dim);font-family:var(--mono);font-size:.8rem} /* ─── Peu ────────────────────────────────────────────────────────────────── */ .site-footer{border-top:1px solid var(--border);padding:2rem 1.25rem;text-align:center;color:var(--text-dim);font-size:.85rem} .site-footer strong{color:var(--text)} .foot-dim{color:var(--text-muted);font-size:.78rem;margin-top:.5rem} /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media(max-width:820px){ .hero{grid-template-columns:1fr;gap:1.5rem} .hero h1{font-size:2.1rem} .home-help{grid-template-columns:1fr} .hamburger{display:flex} .mainnav{ position:fixed;top:56px;right:0;left:0;flex-direction:column;align-items:stretch; background:var(--bg-bar);border-bottom:1px solid var(--border); padding:.8rem 1.25rem 1.2rem;gap:.2rem; transform:translateY(-120%);transition:.3s var(--ease); } .mainnav.open{transform:translateY(0)} .cmd-row{grid-template-columns:1fr} .prog-summary{grid-template-columns:1fr;justify-items:center} .prog-row{grid-template-columns:1fr auto} .prog-row .bar{grid-column:1/-1;order:3} } /* ─── Calculadora de subxarxes (eina de suport) ──────────────────────────── */ .calc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem} .calc-modes{display:flex;gap:.4rem;margin-bottom:1.1rem} .calc-inputs{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.2rem} .calc-inputs label{display:flex;flex-direction:column;gap:.35rem;font-size:.82rem;color:var(--text-dim);font-weight:600} .calc-inputs input,.calc-inputs select{font-family:var(--mono);font-size:.95rem;background:var(--bg-elev);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:.6rem .7rem} .calc-inputs input:focus,.calc-inputs select:focus{outline:2px solid var(--accent);border-color:var(--accent)} .calc-out{border-top:1px solid var(--border);padding-top:1.2rem} .calc-err{color:#f87171;font-weight:600} .calc-note{color:var(--text-dim);margin-bottom:1rem;font-size:.92rem} .calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem} .calc-cell{background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.2rem} .calc-cell span{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em} .calc-cell b{font-family:var(--mono);font-size:1.05rem;color:var(--text)} .calc-cell.hi b{color:var(--accent)} .calc-table-wrap{overflow-x:auto} .calc-table{width:100%;border-collapse:collapse;font-size:.88rem} .calc-table th,.calc-table td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--border);font-family:var(--mono)} .calc-table th{color:var(--text-dim);font-family:var(--font);font-weight:600;font-size:.8rem} .calc-table tbody tr:hover{background:var(--hover)}