/* The course site — one stylesheet for every page.
*
* CANONICAL PAGE SKELETON (all builders use exactly this):
*
*
*
*
*
*
* PAGE TITLE - Idea to App Store
* (absolute path)
*
*
*
*
* ...content...
*
*
*
*
* Tokens: light is the default on :root; dark overrides via the media
* query. Never hard-code a color outside this file.
*/
:root {
--paper: #FBFAF8;
--ink: #1B1D22;
--muted: #5A5E6A;
--accent: #2F5FA8;
--accent-ink: #FFFFFF;
--line: #E3E1DC;
--card: #FFFFFF;
--code-bg: #F1EFEA;
--warn-bg: #FFF7E0;
--warn-line: #E0C468;
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
:root {
--paper: #14151A;
--ink: #E8E6E1;
--muted: #9BA0AC;
--accent: #7FA7E0;
--accent-ink: #10131A;
--line: #2A2C33;
--card: #1B1D24;
--code-bg: #20222A;
--warn-bg: #2A2410;
--warn-line: #7A6A30;
}
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 17px/1.65 -apple-system, "Segoe UI", system-ui, sans-serif;
}
a { color: var(--accent); }
.site-header {
display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
align-items: baseline; justify-content: space-between;
padding: 1rem 1.2rem; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1.05rem; }
.brand span { font-weight: 400; color: var(--muted); margin-left: .55rem; font-size: .95rem; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-header nav a { text-decoration: none; color: var(--muted); }
.site-header nav a:hover { color: var(--accent); }
.page { max-width: 46rem; margin: 0 auto; padding: 2rem 1.2rem 4rem; }
.page h1 { font-size: 1.7rem; line-height: 1.25; }
.page h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.page h3 { font-size: 1.05rem; margin-top: 1.6rem; }
.page img { max-width: 100%; }
pre, code { font: .86em/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
code { background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
pre {
background: var(--code-bg); padding: .9rem 1rem; border-radius: 8px;
overflow-x: auto;
}
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
th, td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
blockquote {
margin: 1rem 0; padding: .2rem 1rem;
border-left: 3px solid var(--accent); color: var(--muted);
}
/* Screenshot placeholder until the capture pass fills it: renders the
[SCREENSHOT: ...] description so the text stands alone meanwhile. */
.shot {
border: 2px dashed var(--line); border-radius: 10px;
padding: 1.4rem 1rem; margin: 1rem 0;
color: var(--muted); font-size: .92rem; text-align: center;
}
.shot::before { content: "Picture coming here: "; font-weight: 600; }
figure.shot-live { margin: 1rem 0; }
figure.shot-live img { border: 1px solid var(--line); border-radius: 10px; }
figure.shot-live figcaption { color: var(--muted); font-size: .9rem; }
.note {
background: var(--warn-bg); border: 1px solid var(--warn-line);
border-radius: 8px; padding: .8rem 1rem; margin: 1rem 0;
}
.button {
display: inline-block; background: var(--accent); color: var(--accent-ink);
padding: .6rem 1.1rem; border-radius: 8px; text-decoration: none;
border: 0; font-size: 1rem; cursor: pointer;
}
.button:hover { filter: brightness(1.08); }
/* The license gate form (gate.html) */
.gate-card {
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
padding: 1.6rem; max-width: 30rem; margin: 3rem auto;
}
.gate-card input[type=text] {
width: 100%; padding: .6rem .7rem; font-size: 1rem;
border: 1px solid var(--line); border-radius: 8px;
background: var(--paper); color: var(--ink);
}
.gate-error { color: #B4442C; margin-top: .6rem; }
.site-footer {
border-top: 1px solid var(--line); color: var(--muted);
font-size: .88rem; padding: 1.4rem 1.2rem 2.4rem; text-align: center;
}
.site-footer p { max-width: 46rem; margin: .4rem auto; }
/* Guidebook index cards */
.guide-list { list-style: none; padding: 0; }
.guide-list li { border-bottom: 1px solid var(--line); padding: .7rem 0; }
.guide-list a { text-decoration: none; font-weight: 600; }
.guide-list small { display: block; color: var(--muted); }