:root{ --ug-ink:#121316; --ug-panel:#1c1e22; --ug-panel-2:#23262b; --ug-line:rgba(255,255,255,.14); --ug-text:#eceef0; --ug-muted:#9aa1a8; --ug-accent:#e8342a; --ug-accent-2:#e8342a; --ug-ok:#35c46a; --ug-font-d:'Oswald',sans-serif; --ug-font-b:'Inter',sans-serif; --ug-font-m:'IBM Plex Mono',monospace; } /* ── LIGHT THEME OVERRIDE (page-scoped, does NOT touch header/menu) ── how-to-install.js reads the same 'ug_theme' localStorage key the site toggle writes, and adds/removes ONLY this .ug-light class on .ug-guide. No [data-theme] attribute on / is ever set, so nothing outside this page's content can be affected. */ .ug-guide.ug-light{ --ug-ink:#f7f7f5; --ug-panel:#ffffff; --ug-panel-2:#f1f1ee; --ug-line:rgba(0,0,0,.13); --ug-text:#15171a; --ug-muted:#5b6066; --ug-accent:#e8342a; --ug-accent-2:#c92a21; --ug-ok:#1f9c53; } /* peel-corner effect uses --ug-ink as its "backing" color — in light mode that backing should read as the page background, not black */ .ug-guide.ug-light .ug-step::after{ border-color:transparent transparent var(--ug-ink) transparent; } .ug-guide{ background:var(--ug-ink); color:var(--ug-text); padding:0 0 5rem; overflow:hidden; transition:background-color .2s ease, color .2s ease; } .ug-guide *{box-sizing:border-box;} /* ---------- layout primitives (replaces Bootstrap container/row/col) ---------- */ .ug-container{ width:100%; max-width:1140px; margin:0 auto; padding:0 1.25rem; } .ug-donts-grid{ display:grid; grid-template-columns:7fr 5fr; gap:2.5rem; align-items:start; } @media (max-width:850px){ .ug-donts-grid{grid-template-columns:1fr;} } .ug-eyebrow{ font-size:.72rem; text-transform: capitalize; color:var(--ug-accent-2); display:inline-flex; align-items:center; gap:.5rem; } .ug-eyebrow::before{ content:''; width:18px; height:1px; background:var(--ug-accent-2); } /* ---------- registration / crop marks — the signature motif ---------- */ .ug-marks{position:relative;} .ug-marks::before, .ug-marks::after, .ug-marks .ug-mark-tr, .ug-marks .ug-mark-br{ content:''; position:absolute; width:14px; height:14px; border:1.5px solid var(--ug-accent-2); opacity:.55; } .ug-marks::before{top:-1px;left:-1px;border-right:0;border-bottom:0;} .ug-marks::after{bottom:-1px;left:-1px;border-right:0;border-top:0;} .ug-marks .ug-mark-tr{top:-1px;right:-1px;border-left:0;border-bottom:0;} .ug-marks .ug-mark-br{bottom:-1px;right:-1px;border-left:0;border-top:0;} /* ---------- hero ---------- */ .ug-hero{ position:relative; padding:5.5rem 0 4rem; border-bottom:1px dashed var(--ug-line); } .ug-hero-title{ font-weight:700; font-size:35px; line-height:1.05; text-transform: capitalize; margin:1rem 0 1.1rem; } .ug-hero-title span{color:var(--ug-accent);} .ug-hero-sub{ color:var(--ug-muted); font-size:1.02rem; line-height:1.65; max-width:100%; } .ug-hero-stats{ display:flex; gap:1.6rem; margin-top:2.2rem; flex-wrap:wrap; } .ug-hero-stat b{ display:block; font-size:1.5rem; color:var(--ug-text); } .ug-hero-stat span{ font-size:.68rem; text-transform: capitalize; color:var(--ug-muted); } /* precision-cut diagram */ .ug-diagram-wrap{ padding:1.6rem; background:var(--ug-panel); border:1px dashed var(--ug-line); } .ug-diagram-wrap svg{width:100%;height:auto;display:block;} .ug-diagram-cap{ font-size:.68rem; color:var(--ug-muted); text-transform: capitalize; margin-top:.85rem; display:flex; justify-content:space-between; } /* ---------- section heads ---------- */ .ug-section{padding:4rem 0;} .ug-section-head{margin-bottom:2.2rem;} .ug-section-title{ font-weight:600; text-transform: capitalize; font-size:clamp(1.5rem,2.6vw,2.1rem); margin:.5rem 0 0; color:var(--ug-text); } /* ---------- kit list ---------- */ .ug-kit{ border-top:1px dashed var(--ug-line); border-bottom:1px dashed var(--ug-line); } .ug-kit-list{ display:flex; flex-wrap:wrap; gap:.7rem; list-style:none; padding:0; margin:0; } .ug-kit-item{ display:flex; align-items:center; gap:.55rem; padding:.6rem .95rem; background:var(--ug-panel); border:1px solid var(--ug-line); font-size:.82rem; color:var(--ug-text); } .ug-kit-item i{color:var(--ug-accent-2);font-size:.9rem;} .ug-kit-item small{ display:block; color:var(--ug-muted); font-size:.72rem; margin-top:.1rem; } /* ---------- step cards ---------- */ .ug-steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; } @media (max-width:991px){.ug-steps-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:575px){.ug-steps-grid{grid-template-columns:1fr;}} .ug-step{ position:relative; background:var(--ug-panel); border:1px solid var(--ug-line); padding:1.5rem 1.4rem 1.4rem; opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease, clip-path .55s ease, background-color .2s ease, border-color .2s ease; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); } .ug-step.is-visible{opacity:1;transform:translateY(0);} /* peeled-corner reveal — nods to peeling the backing off precut film */ .ug-step::after{ content:''; position:absolute; top:0;right:0; width:0;height:0; border-style:solid; border-width:0 0 0 0; border-color:transparent transparent var(--ug-ink) transparent; transition:border-width .35s ease; } .ug-step:hover::after{border-width:0 26px 26px 0;} .ug-step:hover{border-color:var(--ug-accent-2);} .ug-step-num{ font-size:1rem; width:34px;height:34px; border:1.5px solid var(--ug-accent); color:var(--ug-accent); display:flex;align-items:center;justify-content:center; margin-bottom:1rem; } .ug-step-title{ font-size:1.05rem; text-transform: capitalize; margin-bottom:.5rem; color:var(--ug-text); } .ug-step-body{ color:var(--ug-muted); font-size:.9rem; line-height:1.6; margin:0; } .ug-step-connector{ font-size:.65rem; color:var(--ug-line); text-align:right; margin-top:1rem; text-transform: capitalize; } /* ---------- don'ts ---------- */ .ug-donts{ border-top:1px dashed var(--ug-line); } .ug-warn{ position:relative; padding:1.2rem 1.3rem 1.2rem 1.6rem; background:var(--ug-panel); border:1px solid var(--ug-line); margin-bottom:.9rem; background-image:repeating-linear-gradient(135deg,var(--ug-accent-2) 0 10px,transparent 10px 20px); background-size:6px 100%; background-repeat:no-repeat; } .ug-warn-title{ text-transform: capitalize; font-size:1rem; color:var(--ug-accent-2); margin-bottom:.35rem; display:flex; align-items:center; gap:.5rem; } .ug-warn-body{color:var(--ug-muted);font-size:.9rem;line-height:1.6;margin:0;} /* ---------- pro tip ---------- */ .ug-tip{ background:var(--ug-panel-2); border:1px dashed var(--ug-line); padding:1.8rem; } .ug-tip-title{ text-transform: capitalize; font-size:1.15rem; color:var(--ug-ok); margin-bottom:1rem; } .ug-tip-list{list-style:none;padding:0;margin:0;} .ug-tip-list li{ display:flex; gap:.7rem; padding:.55rem 0; border-top:1px solid var(--ug-line); font-size:.92rem; color:var(--ug-text); } .ug-tip-list li:first-child{border-top:none;} .ug-tip-list li i{color:var(--ug-ok);margin-top:.2rem;} @media (prefers-reduced-motion: reduce){ .ug-step{transition:none;opacity:1;transform:none;} }