/* ============================================================ omron-lesson.css — shared styling for Sysmac Studio Academy lessons Chunky neo-brutalist look, Omron-blue palette, dark-mode aware. Pair with theme-sync-omron.js (loaded in ). ============================================================ */ :root{ --cream:#E8F2FD; --cream-2:#D2E6FA; --ink:#0E2236; --ink-soft:#43586C; --paper:#FBFDFF; --coral:#0F74D9; --coral-deep:#0A55A8; --blue:#5A52E6; --yellow:#F4A52A; --mint:#13B6A4; --grape:#7A5AF0; --line:#0E2236; } *{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(14,34,54,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:#D8E9FB } .card.blue{ background:#E4E2FE } .card.yellow{ background:#FBEACB } .card.mint{ background:#D2F3EE } .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)}} @keyframes nudge{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}} @keyframes glow{0%{box-shadow:0 0 0 0 rgba(15,116,217,.5)}70%{box-shadow:0 0 0 13px rgba(15,116,217,0)}100%{box-shadow:0 0 0 0 rgba(15,116,217,0)}} /* hero */ .hero{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; padding:46px 0 18px } .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:52ch; 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:150px; height:150px; border-radius:28px; background:var(--coral); border:4px solid var(--line); position:relative; box-shadow:8px 8px 0 var(--line); 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 } .hero-emoji{ width:104px; height:104px; font-size:52px } } /* code */ pre.code{ margin:0; padding:18px 20px; background:#0E2236; color:#E8F2FD; 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:#F4A52A; font-weight:700 } .code .str{ color:#5FE0CD } .code .num{ color:#7FB0FF } .code .com{ color:#6E84A0; font-style:italic } .code .var{ color:#B7C6FF } .code .ty{ color:#5FE0CD; 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:#0E2236; color:#E8F2FD; 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:#B7C6FF } .readout .val{ color:#F4A52A; 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:#E8F2FD } /* 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:#E8F2FD; 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:#D2F3EE } .quiz-opt.correct .badge{ background:var(--mint) } .quiz-opt.wrong{ background:#FAD9D9 } .quiz-opt.wrong .badge{ background:#D64545; color:#fff } .quizMsg{ font-weight:600; margin:14px 0 0; min-height:22px } /* generic chip / node helpers reused by interactives */ .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(14,34,54,0.12) } .h2big{ font-size:30px; margin-top:10px } .lead{ color:var(--ink-soft); font-weight:500; max-width:62ch } footer{ padding:40px 0 80px; text-align:center; color:rgba(14,34,54,.55); font-size:13px } .footnav{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:18px } /* dark */ html.dark body{ background:#0B1726; color:#EAF2FB } 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:#F4F9FF } html.dark .section-num,html.dark .eyebrow{ color:#5FA8F5 } 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 #02060c } html.dark footer{ color:rgba(255,255,255,.45) }