/* system_setup - shared stylesheet No external requests: no CDN, no web fonts, no analytics. */ /* ------------------------------------------------------------------ tokens */ :root { color-scheme: light dark; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --bg: #fbfaf8; --bg-raised: #ffffff; --bg-sunken: #f1efea; --bg-code: #1c1e26; --fg: #1f2430; --fg-muted: #5c6478; --fg-faint: #8b93a6; --border: #e2ded6; --border-strong: #cdc7bb; --accent: #4f46b8; --accent-soft: #ece9ff; --accent-fg: #ffffff; --amber: #b45309; --amber-soft: #fdf1dc; --green: #1a7f52; --green-soft: #e2f4ea; --red: #b42318; --red-soft: #fdecea; --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(28, 30, 38, .06), 0 8px 24px rgba(28, 30, 38, .06); --measure: 68ch; } @media (prefers-color-scheme: dark) { :root { --bg: #14161c; --bg-raised: #1b1e26; --bg-sunken: #101218; --bg-code: #0e1015; --fg: #e7e9ee; --fg-muted: #a3aab9; --fg-faint: #767e8f; --border: #2a2f3a; --border-strong: #3a4150; --accent: #a5a0ff; --accent-soft: #23213d; --accent-fg: #14161c; --amber: #f0b357; --amber-soft: #2c2313; --green: #6dd39c; --green-soft: #12251b; --red: #f08a7f; --red-soft: #2a1614; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); } } /* The header toggle stamps data-theme on ; it must beat the media query in both directions. */ :root[data-theme="light"] { --bg: #fbfaf8; --bg-raised: #ffffff; --bg-sunken: #f1efea; --bg-code: #1c1e26; --fg: #1f2430; --fg-muted: #5c6478; --fg-faint: #8b93a6; --border: #e2ded6; --border-strong: #cdc7bb; --accent: #4f46b8; --accent-soft: #ece9ff; --accent-fg: #ffffff; --amber: #b45309; --amber-soft: #fdf1dc; --green: #1a7f52; --green-soft: #e2f4ea; --red: #b42318; --red-soft: #fdecea; --shadow: 0 1px 2px rgba(28, 30, 38, .06), 0 8px 24px rgba(28, 30, 38, .06); } :root[data-theme="dark"] { --bg: #14161c; --bg-raised: #1b1e26; --bg-sunken: #101218; --bg-code: #0e1015; --fg: #e7e9ee; --fg-muted: #a3aab9; --fg-faint: #767e8f; --border: #2a2f3a; --border-strong: #3a4150; --accent: #a5a0ff; --accent-soft: #23213d; --accent-fg: #14161c; --amber: #f0b357; --amber-soft: #2c2313; --green: #6dd39c; --green-soft: #12251b; --red: #f08a7f; --red-soft: #2a1614; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); } /* ------------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } img { max-width: 100%; height: auto; } /* ------------------------------------------------------------------ header */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header .inner { max-width: 1080px; margin: 0 auto; padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 650; letter-spacing: -.01em; color: var(--fg); text-decoration: none; font-size: .98rem; } .brand .mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-fg); font-family: var(--font-mono); font-size: .8rem; font-weight: 700; } .brand:hover { color: var(--accent); } .header-nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; } .header-nav a { color: var(--fg-muted); text-decoration: none; font-size: .88rem; padding: .3rem .6rem; border-radius: var(--radius-sm); } .header-nav a:hover { color: var(--fg); background: var(--bg-sunken); } .theme-toggle { border: 1px solid var(--border); background: var(--bg-raised); color: var(--fg-muted); border-radius: var(--radius-sm); width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0; } .theme-toggle:hover { color: var(--fg); border-color: var(--border-strong); } /* ------------------------------------------------------------------ layout */ main { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; } .prose { max-width: var(--measure); } .breadcrumb { font-size: .85rem; color: var(--fg-faint); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--fg-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--accent); text-decoration: underline; } /* --------------------------------------------------------------- typography */ h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.02em; font-weight: 660; margin: 0 0 .6rem; /* Keep anchor jumps clear of the sticky header. */ scroll-margin-top: 4.5rem; } h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); } h2 { font-size: 1.42rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); } h3 { font-size: 1.1rem; margin-top: 2rem; } h4 { font-size: .98rem; margin-top: 1.6rem; color: var(--fg-muted); } h2 + h3 { margin-top: 1.4rem; } p { margin: 0 0 1.1rem; } a { color: var(--accent); text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } .lede { font-size: 1.16rem; color: var(--fg-muted); margin-bottom: 2rem; } ul, ol { margin: 0 0 1.2rem; padding-left: 1.4rem; } li { margin-bottom: .4rem; } li > ul, li > ol { margin-top: .4rem; margin-bottom: .4rem; } strong { font-weight: 640; } hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } kbd { font-family: var(--font-mono); font-size: .82em; background: var(--bg-raised); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; padding: .1em .4em; white-space: nowrap; } /* ------------------------------------------------------------------- code */ code { font-family: var(--font-mono); font-size: .875em; } /* inline code */ :not(pre) > code { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 5px; padding: .1em .35em; color: var(--fg); word-break: break-word; } .codeblock { position: relative; margin: 0 0 1.4rem; } .codeblock .label { position: absolute; top: .55rem; left: .9rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: #8b93a6; pointer-events: none; } pre { margin: 0; background: var(--bg-code); color: #dfe3ec; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.1rem; overflow-x: auto; font-size: .875rem; line-height: 1.6; tab-size: 4; } .codeblock.has-label pre { padding-top: 2.1rem; } pre code { background: none; border: 0; padding: 0; font-size: inherit; color: inherit; } /* A leading $ marks a command you type; make it unselectable so copying by hand does not drag the prompt along. */ pre .prompt { color: #6dd39c; user-select: none; } pre .comment { color: #767e8f; } pre .out { color: #a3aab9; } .copy-btn { position: absolute; top: .5rem; right: .5rem; border: 1px solid #333a48; background: #232733; color: #b9c0cf; font-family: var(--font-sans); font-size: .74rem; padding: .28rem .6rem; border-radius: var(--radius-sm); cursor: pointer; opacity: 0; transition: opacity .12s ease, background .12s ease; } .codeblock:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; } .copy-btn:hover { background: #2e3342; color: #fff; } .copy-btn.copied { background: var(--green); border-color: var(--green); color: #06180f; opacity: 1; } @media (hover: none) { .copy-btn { opacity: 1; } } /* ---------------------------------------------------------------- callouts */ .callout { border: 1px solid var(--border); border-left: 3px solid var(--fg-faint); border-radius: var(--radius-sm); background: var(--bg-raised); padding: .9rem 1.1rem; margin: 0 0 1.4rem; font-size: .95rem; } .callout > :last-child { margin-bottom: 0; } .callout .callout-title { font-weight: 640; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; } .callout.note { border-left-color: var(--accent); background: var(--accent-soft); } .callout.note .callout-title { color: var(--accent); } .callout.warn { border-left-color: var(--amber); background: var(--amber-soft); } .callout.warn .callout-title { color: var(--amber); } .callout.tip { border-left-color: var(--green); background: var(--green-soft); } .callout.tip .callout-title { color: var(--green); } .callout.stop { border-left-color: var(--red); background: var(--red-soft); } .callout.stop .callout-title { color: var(--red); } /* ------------------------------------------------------------------- table */ .table-wrap { overflow-x: auto; margin: 0 0 1.6rem; } table { border-collapse: collapse; width: 100%; font-size: .92rem; } th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-weight: 620; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted); border-bottom-color: var(--border-strong); white-space: nowrap; } tbody tr:hover { background: var(--bg-sunken); } td code { white-space: nowrap; } /* -------------------------------------------------------------- step cards */ .hero { padding: 1rem 0 2.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2.5rem; } .hero h1 { max-width: 18ch; } .hero .lede { max-width: var(--measure); } .eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; } .steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; } .step-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; } .step-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .step-card .num { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); } .step-card h3 { margin: 0; font-size: 1.05rem; } .step-card p { margin: 0; font-size: .9rem; color: var(--fg-muted); line-height: 1.55; } .step-card .tools { margin-top: auto; padding-top: .6rem; font-family: var(--font-mono); font-size: .76rem; color: var(--fg-faint); word-spacing: .3em; } .step-card.platform-windows .num::after { content: " · WINDOWS"; color: var(--fg-faint); } .step-card.platform-ubuntu .num::after { content: " · UBUNTU"; color: var(--fg-faint); } /* ------------------------------------------------------------ command list */ .cmd-list { list-style: none; padding: 0; margin: 0 0 1.6rem; } .cmd-list li { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: .2rem 1.2rem; padding: .6rem 0; border-bottom: 1px solid var(--border); margin: 0; align-items: baseline; } .cmd-list li > code { font-weight: 600; background: none; border: 0; padding: 0; color: var(--accent); font-size: .9rem; } .cmd-list li > span { color: var(--fg-muted); font-size: .93rem; } @media (max-width: 560px) { .cmd-list li { grid-template-columns: 1fr; } } /* -------------------------------------------------------------- page nav */ .page-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid var(--border); } .page-nav a { flex: 1 1 220px; padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; background: var(--bg-raised); transition: border-color .12s ease; } .page-nav a:hover { border-color: var(--accent); } .page-nav .dir { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: .15rem; } .page-nav .title { color: var(--fg); font-weight: 600; font-size: .95rem; } .page-nav .next { text-align: right; } /* --------------------------------------------------------------- footer */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-sunken); color: var(--fg-muted); font-size: .87rem; } .site-footer .inner { max-width: 1080px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; } .site-footer a { color: var(--fg-muted); } .site-footer .spacer { margin-left: auto; } /* --------------------------------------------------------------- utility */ .muted { color: var(--fg-muted); } .mono { font-family: var(--font-mono); } .center { text-align: center; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-fg); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 50; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ------------------------------------------------------- figures & diagrams */ .figure { margin: 0 0 1.6rem; } .figure svg { width: 100%; height: auto; display: block; } .figcaption { font-size: .85rem; color: var(--fg-muted); margin-top: .6rem; line-height: 1.5; } /* Diagram tokens. Inline SVG inherits these, so a diagram follows the theme without a second copy for dark mode. */ .dg-box { fill: var(--bg-raised); stroke: var(--border-strong); stroke-width: 1.5; } .dg-box-warm { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 1.5; } .dg-box-key { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; } .dg-text { fill: var(--fg); font-family: var(--font-sans); font-size: 13px; } .dg-mono { fill: var(--fg); font-family: var(--font-mono); font-size: 12px; } .dg-muted { fill: var(--fg-muted); font-family: var(--font-sans); font-size: 11px; } .dg-row { fill: var(--accent); font-family: var(--font-mono); font-size: 13px; font-weight: 700; } .dg-line { stroke: var(--fg-faint); stroke-width: 1.5; fill: none; } .dg-head { fill: var(--fg-faint); } .dg-divide { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 5 5; } /* ------------------------------------------------------------- stat tiles */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 0 0 1.2rem; } .stat { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; } .stat .stat-value { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 650; line-height: 1.05; letter-spacing: -.02em; color: var(--accent); } .stat .stat-label { font-size: .95rem; font-weight: 620; margin-top: .4rem; } .stat .stat-note { font-size: .82rem; color: var(--fg-muted); margin-top: .1rem; } /* ------------------------------------------------------------------- toc */ /* "On this page" box. Worth having on any page long enough that someone arrives looking for one specific section - step 1 in particular, where a locked-out student needs the password reset and nothing else. */ .toc { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.2rem 1rem; margin: 0 0 2.2rem; } .toc-title { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 640; color: var(--fg-muted); margin-bottom: .5rem; } .toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; } .toc li { margin: 0 0 .3rem; break-inside: avoid; font-size: .93rem; } .toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; } /* The entry someone is most likely to have come looking for. */ .toc .toc-key a { font-weight: 620; } .toc .toc-key a::after { content: "←"; margin-left: .4rem; color: var(--fg-faint); font-weight: 400; } @media (max-width: 560px) { .toc ul { columns: 1; } } /* ------------------------------------------------------------- book logo */ /* The AIKaryashala mark, at the head of every page of the book. The file has a transparent background, so it sits on the page colour in either theme and needs no second copy for dark mode. */ .book-logo { margin: 0 0 1.5rem; } .book-logo img { width: 210px; max-width: 62%; height: auto; display: block; }