/* ============================================================================ ALAMO — shared site stylesheet alamo.k5yzw.com/assets/site.css COLOUR SCHEME: "Lone Star" (Texas flag — red, white and blue on deep navy) Everything on the site consumes the tokens below. No page should name a colour directly. ------------------------------------------------------------------------ TO CHANGE THE WHOLE SITE'S SCHEME ------------------------------------------------------------------------ Six schemes are defined below. Exactly one of them carries `:root,` at the front of its selector — that is the live DEFAULT, what a first-time visitor sees. To change it, move the `:root,` prefix onto a different block. One edit, one file, whole site. A reader can override the default for themselves at /colors/, which stores their pick in an `alamo-scheme` cookie. Every page carries a small inline script in that reads that cookie before first paint. ========================================================================= */ /* ========================================================================== SCHEME 1 — "Lone Star" ACTIVE Texas flag: PMS 281 blue, PMS 193 red, white. Ground runs darker than the flag blue so body text can hold contrast; the flag blue itself becomes the raised-panel colour. ========================================================================== */ :root, [data-scheme="lonestar"]{ /* ---- surfaces ---- */ --bg:#060d1c; /* page background */ --bg-raised:#0d1a35; /* cards, panels, code */ --line:#1d2f52; /* rules, borders */ /* ---- text ---- */ --ink:#e8edf6; /* body text 16.5:1 */ --ink-dim:#9aa8c0; /* secondary 8.1:1 */ --steel:#7d8aa3; /* chrome labels */ --ink-faint:#3a4763; /* placeholder / disabled */ /* ---- accent (interactive / emphasis) ---- --accent is TEXT red, lifted off the flag red so it clears 4.5:1 on the ground. --accent-solid is the true flag red and is for FILLS only, where white sits on top of it (6.4:1). Do not swap them. */ --accent:#e8455c; /* links, eyebrows, markers 5.0:1 */ --accent-solid:#bf0a30;/* flag red — badge/pill fills */ --accent-deep:#b03a52; /* nav rest state, hovers 3.3:1 */ --bright:#ffffff; /* flag white — wordmark, highlights */ --bright-rgb:255,255,255; --flash:#ffc300; /* attention tag — ALWAYS pair with dark text */ --flash-rgb:255,195,0; /* ---- rgb channels, for translucent tints ---- Must be kept in step with --bg and --accent above. */ --bg-rgb:6,13,28; --accent-rgb:232,69,92; --rule-mid:#ffffff; } /* ========================================================================== SCHEME 2 — "Lone Star Night" not active Charcoal ground, flag red accent, bone white text, dusty gold secondary. Quieter and more editorial than the flag scheme. ========================================================================== */ [data-scheme="night"]{ --bg:#0d0f14; --bg-raised:#171b23; --line:#2b323f; --ink:#dfe3e8; --ink-dim:#98a0ab; --steel:#828b98; --ink-faint:#3c434f; --accent:#e8455c; --accent-solid:#c8102e; --accent-deep:#a83346; --bright:#f2f4f7; --bright-rgb:242,244,247; --flash:#c9a227; --flash-rgb:201,162,39; --bg-rgb:13,15,20; --accent-rgb:232,69,92; --rule-mid:#f2f4f7; } /* ========================================================================== SCHEME 3 — "Desert Dusk" not active West Texas earth: sand and mesquite ground, burnt-orange accent, cream text. ========================================================================== */ [data-scheme="dusk"]{ --bg:#14100c; --bg-raised:#1e1811; --line:#33291c; --ink:#ede2cf; --ink-dim:#a89578; --steel:#9c8b70; --ink-faint:#4a3d28; --accent:#f08a45; --accent-solid:#c05314; --accent-deep:#b06a34; --bright:#f5c77e; --bright-rgb:245,199,126; --flash:#ffc300; --flash-rgb:255,195,0; --bg-rgb:20,16,12; --accent-rgb:240,138,69; --rule-mid:#f5c77e; } /* ========================================================================== SCHEME 4 — "Bluebonnet" not active Texas state flower. Deep indigo ground, bluebonnet-blue accent, cream highlights. The one scheme here that is not built around red. ========================================================================== */ [data-scheme="bluebonnet"]{ --bg:#0b0f22; --bg-raised:#141a38; --line:#26305c; --ink:#e6e9f5; --ink-dim:#a0a8c8; --steel:#848cab; --ink-faint:#3a4166; --accent:#8fa8ff; --accent-solid:#3d55c9; --accent-deep:#5f74c9; --bright:#f2ead9; --bright-rgb:242,234,217; --flash:#ffc300; --flash-rgb:255,195,0; --bg-rgb:11,15,34; --accent-rgb:143,168,255; --rule-mid:#f2ead9; } /* ========================================================================== SCHEME 5 — "Daylight" not active The only LIGHT scheme. Warm paper ground, flag navy ink, flag red accent. Easier on eyes that dislike white-on-dark, and better in a bright room. Note for anyone adding a scheme: --bright means "the brightest, most emphatic ink", NOT "white". In a light scheme it has to run DARK or the wordmark and pull quotes disappear. ========================================================================== */ [data-scheme="daylight"]{ --bg:#f7f5f0; --bg-raised:#ffffff; --line:#ddd8cd; --ink:#1a2438; --ink-dim:#5a6478; --steel:#7a8394; --ink-faint:#b8bfcb; --accent:#bf0a30; /* flag red reads at 5.7:1 on this ground */ --accent-solid:#bf0a30; --accent-deep:#a05263; --bright:#002868; /* flag navy — wordmark, pull quotes */ --bright-rgb:0,40,104; --flash:#ffc300; --flash-rgb:255,195,0; --bg-rgb:247,245,240; --accent-rgb:191,10,48; --rule-mid:#9aa7bb; } /* ========================================================================== SCHEME 6 — "Lone Star Daylight" not active Lone Star with the ground inverted: white paper instead of navy, keeping the same flag palette — red accents, navy emphasis, near-black text. The lightest scheme here, and the one to reach for in a bright room or on a projector. ========================================================================== */ [data-scheme="lonestar-day"]{ --bg:#ffffff; --bg-raised:#f4f7fb; /* barely blue-tinted panels */ --line:#d3dce8; --ink:#0b1220; /* near-black body text ~18:1 */ --ink-dim:#4d5a6e; /* 7.0:1 */ --steel:#5d6a80; /* 5.5:1 */ --ink-faint:#aab5c5; --accent:#bf0a30; /* true flag red reads 6.4:1 on white */ --accent-solid:#bf0a30; --accent-deep:#002868; /* flag navy for nav rest — hovers to red */ --bright:#002868; /* flag navy — wordmark, pull quotes 14:1 */ --bright-rgb:0,40,104; --rule-mid:#9fb0c6; --flash:#ffc300; --flash-rgb:255,195,0; --bg-rgb:255,255,255; --accent-rgb:191,10,48; } /* ========================================================================== SCHEME-INDEPENDENT TOKENS Status colours and type do NOT change between schemes. A green that means "ok" has to mean "ok" in every scheme, or the pages stop being readable at a glance. ========================================================================== */ :root{ /* ---- status: solid fills — used as pill/badge BACKGROUNDS, so they run dark and expect light text on top ---- */ --ok:#1f8f3a; /* normal, on, healthy */ --warn:#b36b00; /* caution */ --bad:#a00000; /* critical, fault */ --idle:#555555; /* no data / unknown */ /* ---- foreground variants — the same meanings as COLOURED TEXT on a dark ground, so they run lighter to hold contrast. Do not swap these with the solid fills above; a pill filled with --ok-fg is unreadable. ---- */ --ok-fg:#57ad74; --warn-fg:#ff9e4e; --bad-fg:#ff6b6b; --cool-fg:#4ea3ff; --info:#ae63f3; /* ---- type ---- */ --font-body:Georgia,"Iowan Old Style",Palatino,"Times New Roman",serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --font-disp:system-ui,-apple-system,"Segoe UI",sans-serif; --font-stencil:"Saira Stencil One","Stardos Stencil",Impact,system-ui,sans-serif; } /* ============================ base ====================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body); font-size:1.075rem;line-height:1.75;-webkit-font-smoothing:antialiased} a{color:var(--accent)} img{max-width:100%} /* ============================ top bar =================================== */ .bar{display:flex;justify-content:space-between;align-items:center; padding:1rem 1.5rem;border-bottom:1px solid var(--line); font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em; text-transform:uppercase;color:var(--accent-deep); position:sticky;top:0;background:rgba(var(--bg-rgb),.85); backdrop-filter:blur(8px);z-index:10} .bar a{color:inherit;text-decoration:none;border-bottom:1px solid transparent; transition:color .15s ease,border-color .15s ease} .bar a:hover,.bar a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)} .bar-nav{display:flex;gap:1.4rem;margin-left:1.6rem;margin-right:auto;flex-wrap:wrap} .bar .cs{color:var(--ink-dim)} /* Six nav items will not sit on one line on a phone. Let the bar itself wrap rather than crushing the labels, and drop the row gap so it stays compact. */ @media(max-width:46rem){ .bar{flex-wrap:wrap;row-gap:.55rem} .bar-nav{order:3;width:100%;margin-left:0} } @media(max-width:34rem){.bar{font-size:.62rem;padding:.8rem 1rem}.bar-nav{gap:.9rem}} /* ============================ layout ==================================== */ .wrap{max-width:52rem;margin:0 auto;padding:3.5rem 1.5rem 5rem} .column{max-width:44rem;margin:0 auto;padding:0 1.5rem 4rem} .eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em; text-transform:uppercase;color:var(--accent);margin-bottom:.75rem} h1{font-family:var(--font-mono);font-size:2rem;letter-spacing:.1em;margin:0 0 .6rem; text-transform:uppercase;color:var(--ink)} .standfirst{color:var(--ink-dim);font-size:1.05rem;line-height:1.6; margin:0 0 2.5rem;max-width:38rem} .note{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line); color:var(--ink-dim);font-size:.85rem;line-height:1.6} .foot{padding:1.5rem;border-top:1px solid var(--line);text-align:center; font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-dim)} /* ============================ hero ====================================== */ .hero{max-width:52rem;margin:0 auto;padding:4.5rem 1.5rem 2.5rem;text-align:center} .hero-eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.3em; text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem} .wordmark{font-family:var(--font-stencil);font-weight:400; font-size:clamp(3.6rem,15vw,7.5rem);line-height:.95;letter-spacing:.06em; margin:0;color:var(--bright);text-transform:uppercase} .coords{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--steel);margin-top:1.2rem} .hero .standfirst{margin:2rem auto 0;text-align:left;font-size:1.1rem; color:var(--ink-dim);max-width:34rem} /* the three-bar rule under the wordmark — flag red / white / blue */ .flagrule{display:flex;gap:0;width:9rem;height:3px;margin:1.5rem auto 0; border-radius:2px;overflow:hidden} .flagrule i{flex:1} .flagrule i:nth-child(1){background:var(--accent-solid)} .flagrule i:nth-child(2){background:var(--rule-mid)} .flagrule i:nth-child(3){background:var(--accent-deep)} /* ============================ cards / tiles ============================= */ .cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))} .card{display:block;text-decoration:none;background:var(--bg-raised); border:1px solid var(--line);border-radius:4px;padding:1.4rem 1.5rem; transition:border-color .15s,transform .15s} .card:hover{border-color:var(--accent-deep);transform:translateY(-2px)} .card .idx{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.5rem} .card h2{font-family:var(--font-mono);font-size:1rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink);margin:0 0 .45rem} .card p{margin:0;color:var(--ink-dim);font-size:.92rem;line-height:1.5} .card.locked .idx::after{content:" · restricted";color:var(--steel)} /* ---- restricted marker ---- Anything behind the /admin login gets one of these, so a public reader is never sent at a door that will ask for a password they do not have. */ .lock{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em; text-transform:uppercase;color:var(--steel);border:1px solid var(--line); border-radius:999px;padding:.15em .5em;margin-left:.5em;white-space:nowrap; vertical-align:.12em} .tile.locked{opacity:.86} .tile.locked:hover{opacity:1} /* the homepage tile grid (same idea, tighter) */ .grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); max-width:52rem;margin:0 auto 4rem;padding:0 1.5rem} .tile{display:block;text-decoration:none;background:var(--bg-raised); border:1px solid var(--line);border-radius:4px;padding:1.3rem 1.4rem; transition:border-color .15s,transform .15s} .tile:hover{border-color:var(--accent-deep);transform:translateY(-2px)} .tile-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.45rem} .tile h3{font-family:var(--font-mono);font-size:.95rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink);margin:0 0 .4rem} .tile p{margin:0;color:var(--ink-dim);font-size:.88rem;line-height:1.5} /* ============================ chapters ================================== */ /* Sections are deep-linkable (/#partnership etc). scroll-margin-top keeps the sticky top bar from covering the heading you just jumped to. */ .chapter{margin:0 0 3.5rem;scroll-margin-top:5.5rem} .anchor{font-family:var(--font-mono);color:var(--accent);text-decoration:none; opacity:0;margin-left:.4em;font-size:.8em;transition:opacity .15s} .ch-title:hover .anchor,.anchor:focus-visible{opacity:1} @media(hover:none){.anchor{opacity:.45}} /* touch: no hover, so keep it visible */ .ch-index{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em; text-transform:uppercase;color:var(--accent);margin-bottom:.7rem} .ch-title{font-family:var(--font-mono);font-size:1.25rem;letter-spacing:.05em; text-transform:uppercase;color:var(--ink);margin:0 0 1.1rem;line-height:1.35} .chapter p{margin:0 0 1.15rem} .chapter p.pull{font-size:1.25rem;line-height:1.55;color:var(--bright); border-left:2px solid var(--accent-solid);padding-left:1.2rem;margin:1.8rem 0} /* ============================ log / article ============================= */ .entry-list{list-style:none;margin:0;padding:0} .entry-list li{border-top:1px solid var(--line)} .entry-list li:last-child{border-bottom:1px solid var(--line)} .entry-list a{display:block;text-decoration:none;padding:1.6rem .25rem; transition:background .15s ease,padding-left .15s ease} .entry-list a:hover{background:var(--bg-raised);padding-left:1rem} .entry-date{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.4rem} .entry-title{font-family:var(--font-mono);font-size:1.05rem;letter-spacing:.05em; text-transform:uppercase;color:var(--ink);margin:0 0 .45rem} .entry-list p{margin:0;color:var(--ink-dim);font-size:.94rem;line-height:1.55} article h1{margin-bottom:.4rem} article p{color:var(--ink);font-size:1.05rem;line-height:1.75;margin:0 0 1.15rem} article h2{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.1em; text-transform:uppercase;color:var(--accent);margin:2.25rem 0 .8rem} article ul{color:var(--ink);font-size:1.02rem;line-height:1.7; padding-left:1.2rem;margin:0 0 1.15rem} article li{margin-bottom:.35rem} code{font-family:var(--font-mono);font-size:.88em;color:var(--accent); background:var(--bg-raised);padding:.12em .38em;border-radius:3px} .backlink{display:inline-block;margin-top:2.5rem;padding-top:1.5rem; border-top:1px solid var(--line);width:100%; font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--accent-deep);text-decoration:none} .backlink:hover{color:var(--accent)} /* ---- station "element" blocks ---- */ .elements{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); margin:2rem 0 2.5rem} .el{background:var(--bg-raised);border:1px solid var(--line);border-radius:4px; padding:1.3rem 1.4rem} .el-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.5rem} .el-name{font-family:var(--font-mono);font-size:1rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink);margin:0 0 .5rem} .el p{margin:0;color:var(--ink-dim);font-size:.92rem;line-height:1.55} /* ---- spec table (hardware lists) ---- */ .spec{width:100%;border-collapse:collapse;margin:1rem 0 1.8rem;font-size:.95rem} .spec th,.spec td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line); vertical-align:top} .spec th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em; text-transform:uppercase;color:var(--steel);font-weight:400;white-space:nowrap} .spec td{color:var(--ink-dim)} .spec td:first-child{color:var(--ink)} .spec-wrap{overflow-x:auto} /* ---- callsigns & instrument terms ---- */ .cs{font-family:var(--font-mono);font-size:.88em;letter-spacing:.04em; color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent); padding:.06em .34em;border-radius:3px} /* Callsigns are links: K5YZW to Ed's page, VK1HF to Ian's QRZ entry. Styled as the same chip, just clickable — an underline inside the tinted box is noisy. */ a.cs{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s} a.cs:hover,a.cs:focus-visible{border-bottom-color:currentColor} .foot a{color:inherit;text-decoration:none;border-bottom:1px solid transparent; transition:border-color .15s,color .15s} .foot a:hover,.foot a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)} .term{border-bottom:1px dotted var(--steel);cursor:help} /* ============================ status ==================================== */ .status-ok{color:var(--ok-fg)} .status-warn{color:var(--warn-fg)} .status-bad{color:var(--bad-fg)} .pill{display:inline-block;font-family:var(--font-mono);font-size:.62rem; letter-spacing:.16em;text-transform:uppercase;padding:.25em .6em; border-radius:999px;color:#fff} .pill.ok{background:var(--ok)} .pill.warn{background:var(--warn)} .pill.bad{background:var(--bad)} .pill.idle{background:var(--idle)} .pill.flag{background:var(--accent-solid)}