/* ============================================================ index.css — simple stylesheet for the Allen Brokken site The colors, fonts, and font sizes below were taken from the Shopify theme (towersoflight.com) and given plain, generic names so they're easy to remember and change. HOW TO USE: - Edit the values inside :root { } to restyle the whole site. - Everything else just plugs those values into the page. ============================================================ */ /* Load the "Libre Baskerville" font (the theme's font). If you delete this line, the browser falls back to Georgia or another serif font automatically. */ @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap'); /* :root is a selector that matches the element — the top of the page, the parent of everything. Any rule written here applies to the whole document unless something more specific overrides it. We use it here to declare "custom properties" (also called CSS variables): the lines starting with -- below. Two dashes marks a name you invented; the value after the colon is stored under that name. Declaring them on :root means every element on the page can read them, via var(--name) (see the base styles further down). So this block doesn't style anything by itself — it's the single place where the site's colors, fonts, and sizes are defined. Change a value here and every rule that says var(--that-name) updates. */ :root { /* ---------- COLORS ---------- */ --color-text: #422915; /* body text (soft black) */ --color-heading: #422915; /* headings (pure black) */ --color-background: #F9F8F2; /* page background (offwhite) */ --color-accent: rgb(0 0 0 / 0.81); /* links & buttons */ --color-border: rgb(0 0 0 / 0.06); /* thin lines / dividers */ --color-error: #8b0000; /* dark red (error messages) */ --color-success: #006400; /* dark green (success msgs) */ /* ---------- FONTS ---------- */ /* The list is a fallback chain: if the first font isn't available, the browser tries the next one. */ --font-body: "Libre Baskerville", Georgia, "Times New Roman", serif; --font-heading: "Libre Baskerville", Georgia, "Times New Roman", serif; /* ---------- FONT SIZES ---------- */ /* 1rem = 16px by default. So 1.125rem = 18px. */ --text-size: 1.125rem; /* normal paragraph text */ /* clamp(MINIMUM, PREFERRED, MAXIMUM) = a responsive size. The browser uses PREFERRED but never goes below MINIMUM or above MAXIMUM, so the heading grows/shrinks with the window without needing media queries. - rem: 1rem = 16px (3rem = 48px, 3.5rem = 56px) - vw: 1vw = 1% of the window's width, so this is the part that actually flexes as the window resizes. h1 below: wants 5.6vw (~56px on a 1000px-wide window), but clamps up to 48px on a phone and down to 56px on a big desktop. h2 works the same between 36px and 48px. Prefer something simpler? Replace either line with one fixed value, e.g. --size-h1: 2.5rem; */ --size-h1: clamp(3rem, 5.6vw, 3.5rem); /* biggest heading */ --size-h2: clamp(1.25rem, 3.8vw, 1.5rem); --size-h3: 2rem; --size-h4: 1.5rem; --size-h5: 0.875rem; /* note: the theme's h5 is smaller than h6 on purpose (it's used as a small label). Swap the two values if that feels backwards to you. */ --size-h6: 1.125rem; /* ---------- LINE SPACING ---------- */ --line-body: 1.6; /* space between lines of paragraph text (roomy) */ --line-heading: 1.1; /* headings sit tighter */ } /* ============================================================ Base styles — these apply the variables above to the page. You usually won't need to touch this part. ============================================================ */ body { margin: 0; padding: 2rem; background-color: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-size); line-height: var(--line-body); } @media (max-width: 600px) { body { padding: 1rem; } } h1 { margin: 0 0 0.5em; margin-bottom: 0.15rem; color: var(--color-heading); text-align: center; font-family: var(--font-heading); line-height: var(--line-heading); font-weight: 400; /* Libre Baskerville looks best at its normal weight */ } h2, h3, h4, h5, h6 { margin: 0 10 0.5em; margin-bottom: 2rem; color: var(--color-heading); text-align: center; font-family: var(--font-heading); line-height: var(--line-heading); font-weight: 400; } h1 { font-size: var(--size-h1); } h2 { font-size: var(--size-h2); } h3 { font-size: var(--size-h3); } h4 { font-size: var(--size-h4); } h5 { font-size: var(--size-h5); } h6 { font-size: var(--size-h6); } p { margin: 50px auto 1em; max-width: 500px; min-width: 250px; } a { color: var(#F9F8F2); } .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; } /*iframe { display: block; justify-content: center; margin: auto; }*/ .bodybreaks { margin-top: 50px; margin-bottom: 50px; } .biobody { display: flex; /*flex-direction: column;*/ align-items: center; max-width: 800px; margin: 25px auto 1em; } .biotext { display: block; margin-right: 25px; max-width: 800px; } #cover { display: block; margin: 0 auto; max-width: 100%; height: auto; } .headshot { display: inline-block; margin-left: 25px; max-width: 100%; height: auto; } @media (max-width: 600px) { .biobody { flex-direction: column; } .biotext { margin-right: 0; margin-bottom: 25px; } .headshot { margin-left: 0; } } .linkrow { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .linkbox { box-sizing: border-box; width: 160px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; background-color: #5D714A; text-align: center; border-radius: 10px; flex-wrap: wrap; box-sizing: border-box; text-decoration: none; color: #F9F8F2; } .linkbox--wide { width: 100%; max-width: 340px; padding: 20px; } #links { display: flex; flex-direction: column; align-items: center; margin: auto; max-width: 350px; gap: 1rem; } .topics { width: 100%; /* was a hardcoded 500px from when this lived in a full-width block; now it just fills whatever width .media-text actually has */ margin-bottom: 25px; } /* ---------- contact form ---------- */ .contact-form { display: flex; flex-direction: column; /* label, field, label, field... stacked */ gap: 6px; max-width: 500px; margin: 0 auto 50px; /* centered, block, has a width -> auto works */ } .contact-form label { font-weight: 700; margin-top: 12px; } .contact-form input, .contact-form textarea { font: inherit; /* use the page font, not the browser default */ padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; background-color: #fff; color: var(--color-text); } .contact-form textarea { resize: vertical; /* let the user drag it taller, not wider */ } .contact-form button { align-self: center; /* the inputs stretch full width; the button doesn't */ margin-top: 16px; border: none; color: #F9F8F2; font: inherit; appearance: none; cursor: pointer; width: 220px; } /* honeypot field: pull it off-screen so people never see it, but bots still fill it */ .cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cf-status { min-width: 0; /* override the site-wide p { min-width: 250px } */ margin: 12px 0 0; text-align: center; font-style: italic; } .mediakit { display: flex; flex-direction: row; align-items: flex-start; gap: 50px; max-width: 1100px; margin: 0 auto; margin-bottom: 25px } .media-text { flex: 1; min-width: 0; /* same fix as #mediaimg — otherwise its content (see .topics below) floors it above its 50% share */ display: flex; flex-direction: column; gap: 12px; } #mediaimg { flex: 1; min-width: 0; /* overrides the flex item default of min-width: auto, which was holding the image at its own intrinsic width instead of letting it shrink to a 50% share */ display: block; margin: 0; max-width: 100%; height: auto; } .topics { width: 100%; margin-bottom: 25px; padding-left: 1.2rem; } .media-text p { margin: 0; } .media-text h3 { font-size: 1.5rem; text-align: left; } @media (max-width: 600px) { .mediakit { flex-direction: column; } .topics { width: 100%; margin-bottom: 25px; padding-left: 1.2rem; } .media-text p { margin: 0; } .media-text h3 { font-size: 1.5rem; text-align: left; } #mediaimg { flex: none; } .media-text { flex: none; } } .video-embed { display: block; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; height: auto; margin: 0 auto; } .subscribe-embed { display: block; width: 100%; max-width: 480px; aspect-ratio: 3 / 2; height: auto; margin: 0 auto; }