/* ============================================================ codesys-lesson.css — shared styling for the TIA Portal Academy lessons Chunky neo-brutalist shell (same family DNA as the Sysmac/TwinCAT academies) recoloured into a Siemens "Petrol + Deep Blue" palette. Pair with theme-sync-omron.js (shared dark mode) in . ============================================================ */ :root{ --cream:#E3EFEE; --cream-2:#CFE6E3; --ink:#04232B; --ink-soft:#41606A; --paper:#F6FBFB; --coral:#3A6EA5; --coral-deep:#27517D; --blue:#2C6FE0; --yellow:#F2B705; --mint:#12B58D; --grape:#7A5AF0; --line:#04232B; --signal:#E5384B; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:"DM Sans",system-ui,sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden } body::before{ content:""; position:fixed; inset:0; background-image:radial-gradient(rgba(4,35,43,0.09) 1.2px,transparent 1.2px); background-size:22px 22px; pointer-events:none; z-index:0 } #root{ position:relative; z-index:1 } h1,h2,h3,h4{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800; letter-spacing:-0.02em; margin:0; line-height:1.12 } code,.mono{ font-family:"JetBrains Mono",ui-monospace,monospace } .wrap{ max-width:1080px; margin:0 auto; padding:0 28px } .eyebrow{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--coral); display:inline-flex; align-items:center; gap:9px } .eyebrow .dot{ width:9px; height:9px; border-radius:50%; background:var(--coral); border:2px solid var(--line) } .section-num{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px; color:var(--coral); text-transform:uppercase; letter-spacing:.12em } .card{ background:var(--paper); border:3px solid var(--line); border-radius:22px; box-shadow:8px 8px 0 var(--line); padding:28px; position:relative } .card.coral{ background:#D3ECEC } .card.blue{ background:#DCE8FC } .card.yellow{ background:#FBEFC9 } .card.mint{ background:#CFF1E7 } .card.grape{ background:#EBE3FE } .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:2px solid var(--line); border-radius:999px; background:#fff; font-weight:700; font-size:13px; box-shadow:3px 3px 0 var(--line) } .tag{ display:inline-block; padding:3px 9px; border-radius:999px; border:2px solid var(--line); background:#fff; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:12px } .btn{ appearance:none; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:8px; border:3px solid var(--line); border-radius:14px; padding:12px 18px; font-weight:700; font-size:15px; background:var(--yellow); color:var(--ink); box-shadow:5px 5px 0 var(--line); transition:transform .08s ease, box-shadow .08s ease, background .12s ease } .btn:hover{ transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--line) } .btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--line) } .btn.coral{ background:var(--coral); color:#fff } .btn.blue{ background:var(--blue); color:#fff } .btn.ghost{ background:#fff } .btn[disabled]{ opacity:.45; cursor:not-allowed } .row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap } .stack{ display:flex; flex-direction:column; gap:14px } .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start } @media (max-width:860px){ .grid2{ grid-template-columns:1fr } } @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}} /* hero — premium framed panel (shared across all lessons) */ .hero{ position:relative; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:42px 40px 38px; margin:22px 0 8px; border:3px solid var(--line); border-radius:30px; box-shadow:10px 10px 0 var(--line); overflow:hidden; background:linear-gradient(135deg, var(--paper) 0%, var(--cream-2,#CFE6E3) 120%) } .hero::before{ content:""; position:absolute; top:-40%; right:-12%; width:46%; height:180%; background:radial-gradient(closest-side, color-mix(in srgb, var(--coral) 26%, transparent), transparent); filter:blur(8px); pointer-events:none; opacity:.7 } .hero::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(27,27,47,0.07) 1.1px, transparent 1.1px); background-size:18px 18px; pointer-events:none; opacity:.6 } .hero > *{ position:relative; z-index:1 } .hero h1{ font-size:clamp(34px,6vw,60px); margin:12px 0 0 } .hero p.lede{ font-size:18px; line-height:1.55; color:var(--ink-soft); font-weight:500; max-width:54ch; margin:16px 0 0 } .squiggle{ background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat-x; background-position:0 100%; background-size:120px 14px; padding-bottom:.16em } .hero-emoji{ width:148px; height:148px; border-radius:30px; background:linear-gradient(150deg, var(--coral), color-mix(in srgb, var(--coral) 55%, var(--line))); border:4px solid var(--line); position:relative; box-shadow:8px 8px 0 var(--line), inset 0 3px 12px rgba(255,255,255,.25); animation:bob 2.8s ease-in-out infinite; display:flex; align-items:center; justify-content:center; font-size:74px } @media (max-width:860px){ .hero{ grid-template-columns:1fr; padding:30px 22px 26px; box-shadow:7px 7px 0 var(--line) } .hero-emoji{ width:104px; height:104px; font-size:52px } } html.dark .hero{ background:linear-gradient(135deg, #112430 0%, #0a1b24 120%) } html.dark .hero::after{ background-image:radial-gradient(rgba(255,255,255,0.05) 1.1px, transparent 1.1px) } /* code */ pre.code{ margin:0; padding:18px 20px; background:#04232B; color:#DCF1EF; border:3px solid var(--line); border-radius:16px; box-shadow:6px 6px 0 var(--line); font-family:"JetBrains Mono",monospace; font-size:13.5px; line-height:1.6; overflow-x:auto } .code .kw{ color:#F2B705; font-weight:700 } .code .str{ color:#46D6C4 } .code .num{ color:#7FB0FF } .code .com{ color:#5E8088; font-style:italic } .code .var{ color:#A9D6EA } .code .ty{ color:#46D6C4; font-weight:700 } .code .hi{ background:var(--coral); color:#fff; padding:0 4px; border-radius:4px } .readout{ border:3px solid var(--line); border-radius:16px; background:#04232B; color:#DCF1EF; padding:16px 18px; box-shadow:5px 5px 0 var(--line); font-family:"JetBrains Mono",monospace; font-size:14px; line-height:1.7 } .readout .lbl{ color:#7FE3DC } .readout .val{ color:#F2B705; font-weight:700 } .readout .miss{ color:#7FB0FF } .chunky-input{ appearance:none; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:15px; padding:10px 12px; border:3px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); box-shadow:3px 3px 0 var(--line); outline:none } .chunky-input:focus{ background:#E3EFEE } /* quiz */ .quiz-opt{ text-align:left; width:100%; display:flex; gap:10px; align-items:center; padding:14px 16px; background:#fff; border:3px solid var(--line); border-radius:14px; cursor:pointer; font-weight:600; font-size:15px; transition:transform .08s ease, background .12s ease; font-family:inherit; margin-top:10px } .quiz-opt:hover{ background:#E3EFEE; transform:translate(-1px,-1px) } .quiz-opt .badge{ width:28px; height:28px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-weight:700; background:#fff; flex:0 0 auto } .quiz-opt.correct{ background:#CFF1E7 } .quiz-opt.correct .badge{ background:var(--mint) } .quiz-opt.wrong{ background:#FAD9D9 } .quiz-opt.wrong .badge{ background:var(--signal); color:#fff } .quizMsg{ font-weight:600; margin:14px 0 0; min-height:22px } .chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:3px solid var(--line); border-radius:12px; background:#fff; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px; box-shadow:3px 3px 0 var(--line) } .chip.on{ background:var(--mint); } .chip.off{ background:#fff; color:var(--ink-soft) } section{ padding:54px 0; position:relative } section + section{ border-top:2px dashed rgba(4,35,43,0.13) } .h2big{ font-size:30px; margin-top:10px } .lead{ color:var(--ink-soft); font-weight:500; max-width:64ch } footer{ padding:40px 0 80px; text-align:center; color:rgba(4,35,43,.55); font-size:13px } .footnav{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:18px } /* dark */ html.dark body{ background:#07191F; color:#E7F3F2 } html.dark body::before{ background-image:radial-gradient(rgba(255,255,255,0.06) 1.2px,transparent 1.2px) } html.dark h1,html.dark h2,html.dark h3,html.dark h4{ color:#EBFBF9 } html.dark .section-num,html.dark .eyebrow{ color:#6FA8DC } html.dark section + section{ border-top-color:rgba(255,255,255,0.12) } html.dark .card,html.dark .card h1,html.dark .card h2,html.dark .card h3,html.dark .pill,html.dark .tag,html.dark .quiz-opt,html.dark .chunky-input,html.dark .chip{ color:var(--ink) } html.dark .card,html.dark .btn,html.dark .pill,html.dark pre.code,html.dark .readout,html.dark .chunky-input,html.dark .chip{ box-shadow:6px 6px 0 #02090b } html.dark footer{ color:rgba(255,255,255,.45) }