/* Theme Name: Thad Theme URI: https://thadkerkhoff.example Author: Kerkhoff project Description: Your Mortgage First Responder. A classic theme on purpose: the standing footer, the license number and the structured data belong in code where they cannot be edited by accident. Posts, series, stories and takeaways are yours to edit. Version: 1.0.0 Requires at least: 6.5 Tested up to: 7.1 Requires PHP: 8.1 License: Proprietary Text Domain: thad */ /* ========================================================================= Thad Kerkhoff, Your Mortgage First Responder Token layer. Every color and typeface here traces to docs/design-tokens.md. Do not add a value that is not in that file. ========================================================================= */ :root{ /* palette */ --amber:#F2A63B; --amber-lift:#FFBE5C; --brown-deep:#231402; --brown-deeper:#1B1000; --ink:#0C161B; --ink-body:#0F1D18; --ink-raised:#1A2A25; --ink-raised-2:#10201B; --slate:#22404B; --slate-deep:#132630; --teal:#218073; --steel:#89A3AB; --sage:#5C6E68; --sage-2:#6B7B75; --sage-3:#6C7A75; --sage-pale:#C3CCC5; --sage-pale-2:#C8D3D1; --sage-pale-3:#D6DEDC; --paper:#EDF1EF; --paper-warm:#E4E8E3; /* accent, split by job. Amber stays the one accent in both modes: as a fill, a bar or display type it is always amber. As small text on a light ground it cannot meet contrast, so it hands over to amber's own shadow. */ --accent-text:#F2A63B; --amber-display:#F2A63B; /* management pages sit a shade off the site ground in both modes */ --mgmt-ground:#0A1216; /* type */ --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Source Serif 4',Georgia,'Times New Roman',serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; /* metrics */ --measure:34rem; --pad:clamp(1.25rem,5vw,4rem); --rail:8.5rem; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.mono,.btn,button,nav a,.eyebrow{font-family:var(--display)} p{margin:0 0 1.1em} a{color:inherit} img{max-width:100%;height:auto;display:block} ::selection{background:var(--amber);color:var(--brown-deeper)} /* accent-text, not amber: amber on paper is 1.79 to 1 and a focus ring has to clear 3 to 1. On the dark ground accent-text is amber anyway. */ :focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px} .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--amber);color:var(--brown-deeper); font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase; padding:.75rem 1.25rem;text-decoration:none; } .skip:focus{left:0} .visually-hidden{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- staging gate ------------------------------------------------ */ /* Driven by data-verified on . When facts are confirmed the flag flips to "true", every badge disappears, and only then may this reach production. */ .staging-bar{ background:var(--amber);color:var(--brown-deep); font-family:var(--mono);font-size:.75rem;line-height:1.6; letter-spacing:.01em; padding:.7rem var(--pad);text-align:center; padding-right:clamp(9rem,22vw,13rem); } .staging-bar b{font-weight:500;letter-spacing:.02em} .staging-bar .tag{ display:inline-block;font-weight:500;font-size:.625rem; letter-spacing:.16em;text-transform:uppercase; border:1px solid rgba(35,20,2,.35);border-radius:2px; padding:.1em .5em;margin-right:.6em;vertical-align:.05em; } html[data-verified="true"] .staging-bar{display:none} .tv{ display:inline-block;vertical-align:baseline; font-family:var(--mono);font-size:.5625rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase; color:var(--brown-deep);background:var(--amber); padding:.15em .5em;border-radius:2px;margin-left:.45em; white-space:nowrap; } .tv.missing{background:var(--slate);color:var(--paper)} html[data-verified="true"] .tv{display:none} /* ---------- shell ------------------------------------------------------- */ .wrap{max-width:72rem;margin-inline:auto;padding-inline:var(--pad)} main section{border-top:1px solid var(--slate)} /* The rail. On a phone it becomes a hairline the label sits against, so the device survives instead of collapsing into an orphaned line of text. */ .bay{ display:grid;grid-template-columns:var(--rail) 1fr; padding-block:clamp(3rem,7vw,6rem); } @media(max-width:820px){ .bay{grid-template-columns:1fr;gap:1.5rem} .stamp{border-left:2px solid var(--slate);padding-left:.9rem} } .stamp{font-family:var(--mono);font-size:.75rem;line-height:1.5;color:var(--steel)} .stamp b{display:block;color:var(--accent-text);font-weight:500;font-size:1.0625rem;letter-spacing:-.01em} .stamp span{display:block;text-transform:uppercase;letter-spacing:.13em;font-size:.625rem;margin-top:.35rem} .body-col{max-width:var(--measure)} .lede{font-size:1.15rem;color:var(--sage-pale-3);max-width:var(--measure)} h2{font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.06;letter-spacing:-.03em;font-weight:700;margin:0 0 1.1rem;max-width:24ch} h3{font-size:1.0625rem;letter-spacing:-.01em;margin:0 0 .5rem;font-weight:700} .eyebrow{ font-family:var(--mono);font-size:.6875rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text); margin:0 0 1rem; } /* ---------- nav --------------------------------------------------------- */ .topnav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;flex-wrap:wrap} .mark{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1rem;text-transform:uppercase;text-decoration:none} .mark em{font-style:normal;color:var(--accent-text)} .mark-name{display:block} /* Job title and license number, under the first mention of his name on every page. Quiet type, but never smaller than the navigation beside it: a regulator reading this should not have to hunt for it. */ .mark-id{ display:block;margin-top:.3rem; font-family:var(--mono);font-weight:400;font-size:.6875rem; letter-spacing:.11em;color:var(--steel); } .navlinks{display:flex;gap:1.35rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);align-items:center} .navlinks a{text-decoration:none;padding-block:.35rem} .navlinks a:hover{color:var(--accent-text)} .navlinks a[aria-current="page"]{color:var(--paper);box-shadow:inset 0 -2px 0 var(--accent-text)} /* ---------- buttons ----------------------------------------------------- */ .btn{ display:inline-block;text-decoration:none;font-weight:700;font-size:.9rem; padding:.85rem 1.5rem;border:1.5px solid var(--amber);border-radius:2px; transition:background .18s ease,border-color .18s ease,color .18s ease; } .btn.solid{background:var(--amber);color:var(--brown-deeper)} .btn.solid:hover{background:var(--amber-lift);border-color:var(--amber-lift)} .btn.ghost{color:var(--accent-text)} .btn.ghost:hover{background:rgba(242,166,59,.12)} .cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem} /* ---------- hero -------------------------------------------------------- */ .hero{ display:grid;grid-template-columns:1fr clamp(20rem,30vw,27rem); gap:clamp(1.5rem,4vw,3.5rem);align-items:end; padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,5.5rem); } @media(max-width:900px){.hero{grid-template-columns:1fr}} h1{ font-size:clamp(2.6rem,8.6vw,6.4rem);line-height:.92;letter-spacing:-.045em; font-weight:800;text-transform:uppercase;margin:.6rem 0 0; } h1 .your{display:block;color:var(--amber-display)} .tagline{font-size:clamp(1.15rem,2.4vw,1.6rem);margin:1.4rem 0 0;max-width:26rem} /* The amber left bar means Thad is speaking. Nothing that is not his own words may use this class. Third parties use .quote-pale. */ .thad-bar{ border-left:2px solid var(--amber);padding-left:1rem; max-width:30rem;margin:1.9rem 0 0; } .proof{font-family:var(--mono);font-size:.8125rem;line-height:1.8;color:var(--steel);margin:0} /* ---------- the map ----------------------------------------------------- */ /* What used to be here was a framed placeholder waiting on a photograph of Thad at his desk. The photograph never came, and a visitor gets more out of knowing whether their state is one of the five than out of a picture. Outlines are generated, see tools/make-us-map.py. The five states come from thad_licensed_states(), the same array the contact page and the structured data read, so this cannot end up showing a state the prose does not claim. Two movements, overlapping on purpose: Washington lights while the eastern states are still arriving, so the thing has some life in it rather than waiting its turn. The country comes in west to east, then his five light one at a time: a flash of the lifted amber settling to the flat one, which is the same gesture as a lamp coming on, and a ripple in the state's own outline. CSS only. Every step fills both ways, so the site wide prefers-reduced-motion rule lands on the finished map instead of an empty frame, and the whole thing works with scripting off. */ .licensed{ margin:0;border:1px solid var(--slate);background:var(--slate-deep); padding:1.1rem;overflow:hidden; /* When the first state lights, and how long between them. One place. */ --lit-in:.52s;--lit-step:.28s; } .usmap{display:block;width:100%;height:auto} /* Everywhere else. --w is how far across the country the state sits, nought at the Pacific and one at the Atlantic, so the sweep follows geography rather than the order the paths happen to be written in. */ .usmap .rest path{ --w:0; fill:var(--slate);stroke:var(--slate-deep);stroke-width:1.6;stroke-linejoin:round; animation:map-arrive .42s ease-out both; animation-delay:calc(.05s + var(--w) * .34s); } .usmap .st{--i:0;--w:0} /* His five arrive slate with their neighbours and then turn amber. Two animations: the first owns opacity, the second owns fill and transform, so they never argue over a property. */ .usmap .land{ fill:var(--slate);stroke:var(--slate-deep);stroke-width:1.8;stroke-linejoin:round; transform-box:fill-box;transform-origin:center; animation:map-arrive .42s ease-out both,map-lit .62s cubic-bezier(.16,.84,.3,1) both; animation-delay:calc(.05s + var(--w) * .34s),calc(var(--lit-in) + var(--i) * var(--lit-step)); } /* The state's own outline, thrown outwards once as it lights. A circle here read as a map pin. This reads as the state. */ .usmap .ripple{ fill:none;stroke:var(--amber);stroke-width:3; transform-box:fill-box;transform-origin:center; animation:map-ripple 1.15s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--lit-in) + var(--i) * var(--lit-step)); } /* Amber's own shadow, because small text on amber cannot carry the amber. */ .usmap text{ font-family:var(--mono);font-weight:600;font-size:32px;letter-spacing:.03em; fill:var(--brown-deep);text-anchor:middle; animation:map-tag .4s ease-out both; animation-delay:calc(var(--lit-in) + var(--i) * var(--lit-step) + .26s); } /* One glow around the five of them, blooming as the last one lands and then breathing on the site's own six second rhythm, so the map settles rather than freezes. Filtering the group costs one pass, not five. */ .usmap .lit{ animation:map-bloom .9s ease-out both,map-glow 6s ease-in-out infinite; animation-delay:calc(var(--lit-in) + 4 * var(--lit-step)),calc(var(--lit-in) + 4 * var(--lit-step) + .9s); } .licensed figcaption{margin-top:1.15rem} .licensed .k{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)} .licensed figcaption p{ margin:.5rem 0 0;color:var(--paper);font-size:.95rem;line-height:1.5; display:flex;flex-wrap:wrap;gap:0 .38rem; } .licensed figcaption span{ --i:0; animation:map-name .45s ease-out both; animation-delay:calc(var(--lit-in) + var(--i) * var(--lit-step) + .26s); } .licensed figcaption span+span::before{content:"\00b7";margin-right:.38rem;color:var(--steel)} @keyframes map-arrive{from{opacity:0}to{opacity:1}} /* The flash of the lifted amber settling to the flat one is a lamp coming on, which is the oldest idea on this site. */ @keyframes map-lit{ 0%{fill:var(--slate);transform:scale(1)} /* Slate is a blue grey and the lifted amber is nearly yellow, so the colours between them are olive. Get across that gap in fifty milliseconds and it reads as a switch. Linger in it and the state looks muddy on its way in. */ 8%{fill:var(--amber-lift)} 30%{fill:var(--amber-lift);transform:scale(1.05)} 100%{fill:var(--amber);transform:scale(1)} } @keyframes map-ripple{ 0%{opacity:0;transform:scale(1);stroke-width:3} 12%{opacity:.85} 100%{opacity:0;transform:scale(1.45);stroke-width:1} } @keyframes map-tag{from{opacity:0}to{opacity:1}} @keyframes map-name{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @keyframes map-bloom{ 0%{filter:drop-shadow(0 0 0 rgba(242,166,59,0))} 40%{filter:drop-shadow(0 0 16px rgba(242,166,59,.55))} 100%{filter:drop-shadow(0 0 7px rgba(242,166,59,.32))} } @keyframes map-glow{ 0%,100%{filter:drop-shadow(0 0 7px rgba(242,166,59,.32))} 50%{filter:drop-shadow(0 0 12px rgba(242,166,59,.5))} } /* ---------- answer first ------------------------------------------------ */ .answer{font-size:clamp(1.2rem,2.6vw,1.5rem);line-height:1.5;max-width:38rem;margin:0} .answer strong{color:var(--accent-text);font-weight:400} /* ---------- the three rooms --------------------------------------------- */ .rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--slate);border:1px solid var(--slate);margin-top:2.5rem} @media(max-width:820px){.rooms{grid-template-columns:1fr}} .room{background:var(--ink);padding:1.75rem 1.5rem 1.9rem;text-decoration:none;display:block;transition:background .2s ease} .room:hover,.room:focus-visible{background:var(--slate-deep)} .room .num{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--accent-text);text-transform:uppercase} .room h3{margin-top:1.1rem;font-size:1.25rem} .room .standing{font-style:italic;color:var(--accent-text);margin:.2rem 0 .8rem;font-size:1rem} .room p{font-size:.95rem;color:var(--sage-pale-2);margin:0} .room .go{display:block;margin-top:1.2rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)} /* ---------- on my desk -------------------------------------------------- */ .desk{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start} @media(max-width:760px){.desk{grid-template-columns:1fr}} .bignum{font-family:var(--display);font-weight:800;font-size:clamp(4.5rem,13vw,9rem);line-height:.82;letter-spacing:-.06em;color:var(--amber)} .bignum sub{font-size:.22em;vertical-align:super;letter-spacing:.05em;font-weight:500} .desk-cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-top:.9rem;max-width:14rem;line-height:1.7} .noforecast{border-top:1px solid var(--slate);margin-top:1.8rem;padding-top:1.2rem;font-style:italic;color:var(--accent-text);font-size:1.05rem;max-width:var(--measure)} /* ---------- social proof, pale box -------------------------------------- */ /* Third party words. Never the amber bar. */ .quote-pale{ background:var(--paper);color:var(--ink-body); border:1px solid var(--sage-pale);border-radius:2px; padding:1.6rem 1.75rem;max-width:38rem; } .quote-pale blockquote{margin:0;font-size:1.0625rem;line-height:1.6} .quote-pale .who{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase; color:var(--sage);margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--sage-pale); } .wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem;margin-top:2.5rem} .story{border:1px solid var(--slate);padding:1.5rem;display:flex;flex-direction:column} .story.filled{background:var(--paper);color:var(--ink-body);border-color:var(--sage-pale)} .story.filled .who{color:var(--sage);border-top-color:var(--sage-pale)} .story .face{aspect-ratio:1;width:3.25rem;border-radius:50%;background:var(--slate-deep);border:1px solid var(--slate);display:grid;place-items:center;font-family:var(--mono);font-size:.55rem;color:var(--steel);letter-spacing:.08em;margin-bottom:1.1rem;text-align:center} .story.filled .face{background:var(--paper-warm);border-color:var(--sage-pale);color:var(--sage)} .story blockquote{margin:0;font-size:1rem;line-height:1.6} .story .who{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--steel);margin-top:auto;padding-top:1rem;border-top:1px solid var(--slate)} .story.open{opacity:.55} .story.open p{font-family:var(--mono);font-size:.75rem;color:var(--steel);letter-spacing:.05em;line-height:1.8} /* ---------- daylight flip: takeaways ------------------------------------ */ .daylight{background:var(--paper);color:var(--ink-raised-2);border-top:1px solid var(--paper)} .daylight .stamp{color:var(--sage)} .daylight .stamp b{color:var(--teal)} .daylight .lede{color:#2C3A36} .daylight h2{color:var(--ink-raised-2)} @media(max-width:820px){.daylight .stamp{border-left-color:var(--sage-pale)}} .takeaways{margin-top:2.25rem;border-top:1px solid var(--sage-pale)} .take{display:grid;grid-template-columns:6.5rem 1fr;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--sage-pale);align-items:baseline} @media(max-width:620px){.take{grid-template-columns:1fr;gap:.4rem}} .take .src{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--sage)} .take q{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2.6vw,1.55rem);line-height:1.25;letter-spacing:-.035em;quotes:none;display:block} .take.pending q{font-family:var(--body);font-weight:400;font-style:italic;color:var(--sage-3);font-size:1rem;letter-spacing:0} .take a{color:inherit;text-decoration-color:var(--sage-pale);text-underline-offset:3px} .daylight .btn.ghost{color:var(--teal);border-color:var(--teal)} .daylight .btn.ghost:hover{background:rgba(33,128,115,.1)} /* ---------- faq --------------------------------------------------------- */ details{border-bottom:1px solid var(--slate);padding:1.1rem 0} summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline} summary::-webkit-details-marker{display:none} summary::after{content:'+';color:var(--accent-text);font-weight:500;font-size:1.3rem;line-height:1} details[open] summary::after{content:'\2013'} details p{margin:.9rem 0 .2rem;max-width:var(--measure);color:var(--sage-pale-2);font-size:1rem} /* ---------- article ----------------------------------------------------- */ .article{max-width:var(--measure);font-size:1.125rem} .article h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-top:2.6rem} .article .dateline{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--steel);line-height:1.9;margin-bottom:1.6rem} .article .dateline b{color:var(--accent-text);font-weight:500} .pull{ border-left:2px solid var(--amber);padding-left:1.25rem;margin:2.4rem 0; font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.28;letter-spacing:-.025em; } .takeaway-card{ background:var(--paper);color:var(--ink-raised-2);border-radius:2px; padding:1.75rem;margin:2.8rem 0 0; } .takeaway-card .src{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0 0 .8rem} .takeaway-card q{font-family:var(--display);font-weight:700;font-size:1.35rem;line-height:1.25;letter-spacing:-.035em;quotes:none;display:block} /* ---------- series index ------------------------------------------------ */ .series{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1px;margin-top:2.5rem} .serie{background:var(--ink);box-shadow:0 0 0 1px var(--slate);padding:1.6rem 1.5rem;display:block;text-decoration:none} .serie:hover,.serie:focus-visible{background:var(--slate-deep)} .serie h3{color:var(--paper);font-size:1.15rem;margin-bottom:.4rem} .serie p{font-size:.95rem;color:var(--sage-pale-2);margin:0} .serie .count{display:block;margin-top:1rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)} .postlist{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--slate)} .postlist li{border-bottom:1px solid var(--slate);padding:1.5rem 0} .postlist .meta{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 .5rem} .postlist h3{font-size:1.25rem;margin:0 0 .4rem} .postlist h3 a{text-decoration:none} .postlist h3 a:hover{color:var(--accent-text)} .postlist p{font-size:.98rem;color:var(--sage-pale-2);margin:0;max-width:var(--measure)} /* ---------- contact / data ---------------------------------------------- */ .datalist{margin:2.5rem 0 0;border-top:1px solid var(--slate)} .datalist div{display:grid;grid-template-columns:11rem 1fr;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--slate);align-items:baseline} @media(max-width:620px){.datalist div{grid-template-columns:1fr;gap:.3rem}} .datalist dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)} .datalist dd{margin:0;font-size:1.0625rem} .datalist dd a{color:var(--accent-text)} /* ---------- form -------------------------------------------------------- */ .signup{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem;max-width:32rem} .signup label{flex:1 1 16rem} .signup input{ width:100%;font-family:var(--body);font-size:1rem;color:var(--paper); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px; padding:.85rem 1rem; } .signup input::placeholder{color:var(--steel)} .formnote{font-family:var(--mono);font-size:.6875rem;line-height:1.9;letter-spacing:.06em;color:var(--steel);margin-top:1rem;max-width:32rem} /* ---------- footer ------------------------------------------------------ */ footer{border-top:1px solid var(--slate);padding-block:clamp(2.5rem,6vw,4rem) 2.5rem} .standing{font-size:1.2rem;line-height:1.5;max-width:30rem;margin:0} .standing .sig{ color:var(--accent-text);display:block;margin-top:.7rem;font-family:var(--mono); font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;line-height:2; } .footcols{display:grid;grid-template-columns:1fr auto;gap:2.5rem;align-items:start;flex-wrap:wrap} @media(max-width:760px){.footcols{grid-template-columns:1fr}} .footnav{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;line-height:2.4;color:var(--steel)} .footnav a{text-decoration:none} .footnav a:hover{color:var(--accent-text)} .legal{ margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--slate); font-family:var(--mono);font-size:.6875rem;line-height:2;color:var(--steel); letter-spacing:.03em;max-width:52rem; } .legal p{margin:0 0 .6rem} /* ------------------------------------------------------------------------- Lights on. Not a second palette. The same tokens with the dark family and the light family swapping jobs, which is exactly what the daylight flip already does for one section. So the night sections become paper, the daylight section becomes night, and the flip keeps meaning something. Amber is untouched as a fill, a bar and display type. Only small amber text changes, to amber's own shadow, because #F2A63B on paper is about 1.9 to 1 and the site has to pass AA. ---------------------------------------------------------------------- */ :root[data-lights="on"]{ --ink:#EDF1EF; --ink-body:#0F1D18; --ink-raised:#E4E8E3; --ink-raised-2:#EDF1EF; --slate:#C3CCC5; --slate-deep:#E4E8E3; --steel:#5C6E68; --sage:#89A3AB; --sage-2:#6B7B75; --sage-3:#6C7A75; --sage-pale:#22404B; --sage-pale-2:#1A2A25; --sage-pale-3:#0F1D18; --paper:#0F1D18; --paper-warm:#132630; --accent-text:#231402; --mgmt-ground:#EDF1EF; } /* Amber cannot carry text on paper. It is 1.79 to 1, which fails even the large text allowance, so in this mode it becomes a fill instead. Still the one accent, still amber, doing the job the token file actually gives it. */ :root[data-lights="on"] h1 .your{ background:var(--amber);color:var(--brown-deep); /* block so it keeps its own line, fit-content so the fill hugs the word */ display:block;width:fit-content;padding:0 .12em .04em;margin-bottom:.05em; } :root[data-lights="on"] .bignum{color:var(--accent-text)} :root[data-lights="on"] .bignum sub{color:var(--brown-deeper)} /* The few places that name a color outright rather than through a token. */ :root[data-lights="on"] .daylight{background:#0C161B;color:#EDF1EF;border-top-color:#0C161B} :root[data-lights="on"] .daylight .lede{color:#C8D3D1} :root[data-lights="on"] .daylight h2{color:#EDF1EF} :root[data-lights="on"] .daylight .take q{color:#EDF1EF} :root[data-lights="on"] .daylight .stamp b{color:#F2A63B} :root[data-lights="on"] .take a{color:inherit} :root[data-lights="on"] .quote-pale{background:#E4E8E3;color:#0F1D18;border-color:#C3CCC5} :root[data-lights="on"] .quote-pale .who{color:#5C6E68;border-top-color:#C3CCC5} :root[data-lights="on"] .story.filled{background:#E4E8E3;color:#0F1D18;border-color:#C3CCC5} :root[data-lights="on"] .story.filled .who{color:#5C6E68;border-top-color:#C3CCC5} :root[data-lights="on"] .story.filled .face{background:#EDF1EF;border-color:#C3CCC5;color:#5C6E68} :root[data-lights="on"] .takeaway-card{background:#0C161B;color:#EDF1EF} :root[data-lights="on"] .takeaway-card .src{color:#89A3AB} /* The map keeps its night ground in daylight: a pale country with amber states on it loses the five states, which are the whole point of it. */ :root[data-lights="on"] .licensed{background:#132630;border-color:#22404B} :root[data-lights="on"] .usmap .rest path{fill:#22404B;stroke:#132630} :root[data-lights="on"] .usmap .land{stroke:#132630} :root[data-lights="on"] .licensed .k{color:#89A3AB} :root[data-lights="on"] .licensed figcaption p{color:#EDF1EF} :root[data-lights="on"] .licensed figcaption span+span::before{color:#89A3AB} :root[data-lights="on"] .signup input{background:#FFFFFF;border-color:#C3CCC5;color:#0F1D18} :root[data-lights="on"] .signup input::placeholder{color:#6B7B75} :root[data-lights="on"] .btn.solid{color:#231402} :root[data-lights="on"] .staging-bar{color:#231402} /* ------------------------------------------------------------------------- The switch. Fixed top right, on every page, remembers what you chose. ---------------------------------------------------------------------- */ /* The switches sit in a fixed pair so more can be added beside them. */ .topswitches{ position:fixed;top:.85rem;right:.85rem;z-index:60; display:flex;align-items:center;gap:.5rem; } .lights{ position:relative; display:inline-flex;align-items:center;gap:.55rem; font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--steel);background:var(--ink); border:1px solid var(--slate);border-radius:2px; padding:.5rem .75rem;cursor:pointer;line-height:1; box-shadow:0 2px 14px rgba(0,0,0,.28); transition:border-color .18s ease,color .18s ease; } .lights:hover{border-color:var(--accent-text);color:var(--accent-text)} .lights .bulb{ width:9px;height:9px;border-radius:50%;flex:none; background:var(--slate);box-shadow:none;transition:background .18s ease,box-shadow .18s ease; } :root[data-lights="on"] .lights .bulb{background:var(--amber);box-shadow:0 0 10px 2px rgba(242,166,59,.55)} .lights .off-label{display:inline} .lights .on-label{display:none} :root[data-lights="on"] .lights .off-label{display:none} :root[data-lights="on"] .lights .on-label{display:inline} @media(max-width:520px){ .topswitches{top:.6rem;right:.6rem;gap:.35rem} .lights{padding:.45rem .6rem;font-size:.5625rem;gap:.4rem} } @media print{.topswitches{display:none}} /* ---- the required footer ------------------------------------------------- */ /* A definite width, not a max-width: the image inside is 100 percent of the box, so an inline-block with only a max-width collapses to nothing. */ .cmg-mark{ background:#FFFFFF;border-radius:2px;padding:.4rem .55rem; display:inline-block;width:9.5rem;margin:0 0 1.4rem; } .cmg-mark img{width:100%;height:auto;display:block} .legal-who{color:var(--sage-pale-3);line-height:1.9} .legal-contact a{color:var(--accent-text)} .legal-corporate{max-width:52rem;line-height:1.95} .legal-corporate a{color:var(--steel);text-underline-offset:3px} .legal-links{margin-top:1rem} .legal-links a{color:var(--accent-text);margin-right:1.4rem;display:inline-block;text-underline-offset:3px} .legal-note{margin-top:1.2rem;color:var(--sage);max-width:52rem} /* ------------------------------------------------------------------------- WordPress specifics. Editor output, alignment classes and the bits the block editor emits that the static build never had to deal with. ---------------------------------------------------------------------- */ .article > *:first-child{margin-top:0} .article img,.article figure{margin:2rem 0} .article figure{max-width:100%} .article figcaption{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-top:.7rem} .article ul,.article ol{padding-left:1.3em;margin:0 0 1.2em} .article li{margin-bottom:.5em} .article a{color:var(--amber);text-underline-offset:3px} .article blockquote{margin:2rem 0;padding-left:1.25rem;border-left:1px solid var(--slate);font-style:italic;color:var(--sage-pale-3)} .alignwide{max-width:52rem} .alignfull{max-width:none} .aligncenter{margin-inline:auto} .wp-block-image img{border-radius:2px} .admin-bar .staging-bar{position:relative} .pagination{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2.5rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase} .pagination .page-numbers{padding:.6rem .95rem;border:1px solid var(--slate);text-decoration:none;border-radius:2px} .pagination .current{border-color:var(--amber);color:var(--amber)} .pagination a:hover{border-color:var(--amber);color:var(--amber)} .notice-empty{ font-family:var(--mono);font-size:.75rem;line-height:1.9;letter-spacing:.05em; color:var(--steel);border:1px dashed var(--slate);padding:1.5rem;border-radius:2px;margin-top:2rem; } /* ------------------------------------------------------------------------- The character portrait. A hidden front end page, gated to administrators or a password, built to be shown to Thad rather than read by a developer. ---------------------------------------------------------------------- */ .portrait-head{border-bottom:1px solid var(--slate)} .tuning-summary{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2.5rem} .tuning-summary div{min-width:6rem} .tuning-summary b{ display:block;font-family:var(--display);font-weight:800; font-size:clamp(2rem,5vw,3.2rem);line-height:.9;letter-spacing:-.05em;color:var(--amber); } .tuning-summary span{ display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em; text-transform:uppercase;color:var(--steel);margin-top:.6rem;line-height:1.6; } /* the dial board */ .dialboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1px;margin-top:2.5rem} .dial{background:var(--ink);box-shadow:0 0 0 1px var(--slate);padding:1.5rem 1.5rem 1.6rem} .dial .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .dial h3{margin:0;font-size:1.0625rem;letter-spacing:-.01em} .dial .level{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);white-space:nowrap} .dial .level.low{color:var(--steel)} .meter{display:flex;gap:4px;margin:1rem 0 1rem} .meter i{flex:1;height:5px;border-radius:1px;background:var(--slate);display:block} .meter i.on{background:var(--amber)} .meter i.on.low{background:var(--steel)} .dial p{margin:0;font-size:.95rem;line-height:1.55;color:var(--sage-pale-2)} .dial.off h3,.dial.off p{color:var(--sage)} /* devices */ .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.25rem} .chip{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase; border:1px solid var(--slate);border-radius:2px;padding:.5rem .8rem;color:var(--sage-pale-2); display:inline-flex;align-items:center;gap:.5rem; } .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none} .chip.off{color:var(--sage);border-style:dashed} .chip.off::before{background:var(--slate)} /* observations */ .obs-group{margin-top:2.5rem} .obs-group > h3{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase; color:var(--steel);margin:0 0 1.1rem;display:flex;align-items:baseline;gap:.7rem; } .obs-group > h3 em{font-style:normal;color:var(--amber);font-size:.75rem} .obs{border-top:1px solid var(--slate);padding:1.25rem 0} .obs h4{margin:0 0 .4rem;font-size:1.0625rem;letter-spacing:-.015em;font-weight:700} .obs p{margin:0;font-size:.98rem;line-height:1.6;color:var(--sage-pale-2);max-width:46rem} .obs .from{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-top:.7rem;display:block} .obs.ruled h4{color:var(--sage)} .obs.ruled h4::before{content:"Not this. ";color:var(--amber);font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;vertical-align:.25em;margin-right:.2em} .obs.ruled p{color:var(--sage)} /* Steel, not amber. The amber bar means Thad is speaking and an open question is not his words. The tag carries the signal instead. */ .obs.open{border-left:2px solid var(--steel);padding-left:1.1rem;border-top-color:var(--slate)} .obs.open h4::after{content:"Still open";display:inline-block;margin-left:.6em;font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brown-deep);background:var(--amber);padding:.15em .5em;border-radius:2px;vertical-align:.2em} /* his own words, the one place the bar belongs */ .his-words{border-left:2px solid var(--amber);padding-left:1.5rem;margin:2.5rem 0;max-width:40rem} .his-words blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.25;letter-spacing:-.03em} .his-words .attr{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);margin-top:1rem;line-height:1.8} /* the sources */ .sources{list-style:none;margin:2.25rem 0 0;padding:0;border-top:1px solid var(--slate)} .sources li{display:grid;grid-template-columns:9rem 1fr;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--slate);align-items:baseline} @media(max-width:620px){.sources li{grid-template-columns:1fr;gap:.3rem}} .sources .when{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)} .sources .what{font-size:.98rem;color:var(--sage-pale-2)} /* the assembled prompt */ .promptwrap{margin-top:2.5rem;border:1px solid var(--slate);border-radius:2px;background:var(--slate-deep)} .promptwrap summary{ padding:1.1rem 1.4rem;font-family:var(--display);font-weight:700;font-size:1rem; cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center; } .promptwrap summary::-webkit-details-marker{display:none} .promptwrap summary::after{content:'+';color:var(--amber);font-size:1.3rem;line-height:1} .promptwrap[open] summary::after{content:'\2013'} .promptwrap pre{ margin:0;padding:0 1.4rem 1.4rem;overflow-x:auto; font-family:var(--mono);font-size:.78rem;line-height:1.85;color:var(--sage-pale-3); white-space:pre-wrap;word-wrap:break-word; } .promptwrap .count{font-family:var(--mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);font-weight:400} /* the gate */ .gate{max-width:26rem;margin:0 auto;padding:clamp(3rem,10vw,7rem) 0} .gate h1{font-size:clamp(1.8rem,4.5vw,2.6rem);line-height:1.05;letter-spacing:-.03em;text-transform:none;margin:1rem 0 0} .gate p{color:var(--sage-pale-2);margin-top:1rem} .gate form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.8rem} .gate input[type=password]{ flex:1 1 12rem;font-family:var(--body);font-size:1rem;color:var(--paper); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px;padding:.85rem 1rem; } /* ---- the card wall ------------------------------------------------------ */ .cardwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.5rem;margin-top:2.5rem} .cardshot{margin:0} .cardshot img{width:100%;height:auto;border:1px solid var(--slate);border-radius:2px;display:block;background:var(--slate-deep)} .cardshot-empty{ aspect-ratio:4/5;border:1px dashed var(--slate);border-radius:2px;display:grid;place-items:center; font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel); } .cardshot figcaption{font-size:.92rem;line-height:1.5;color:var(--sage-pale-2);margin-top:.9rem} .cardshot figcaption .k{ display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.13em; text-transform:uppercase;color:var(--steel);margin-bottom:.3rem; } .cardshot figcaption .k + .k,.cardshot figcaption .k:last-child{margin:.45rem 0 0} /* ---- interests on the portrait ------------------------------------------ */ .interests{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1px;margin-top:2.25rem} .interest{background:var(--ink);box-shadow:0 0 0 1px var(--slate);padding:1.4rem 1.5rem} .interest h4{margin:0 0 .45rem;font-size:1.0625rem;letter-spacing:-.015em} .interest p{margin:0;font-size:.95rem;line-height:1.55;color:var(--sage-pale-2)} .interest .heat{ display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em; text-transform:uppercase;margin-bottom:.7rem;color:var(--steel); } .interest.hot .heat{color:var(--amber)} /* Lit dial segments go dark on paper. Amber against the gray track is about 1.5 to 1, so on a light ground amber cannot carry "this one is lit". Same reasoning as the display type: amber fills, it does not mark. */ :root[data-lights="on"] .meter i{background:#C3CCC5} :root[data-lights="on"] .meter i.on{background:var(--accent-text)} :root[data-lights="on"] .meter i.on.low{background:#6B7B75} :root[data-lights="on"] .dial .level{color:var(--accent-text)} :root[data-lights="on"] .dial .level.low{color:#5C6E68} :root[data-lights="on"] .chip::before{background:var(--accent-text)} :root[data-lights="on"] .chip.off::before{background:#C3CCC5} :root[data-lights="on"] .interest.hot .heat{color:var(--accent-text)} :root[data-lights="on"] .obs.ruled h4::before{color:var(--accent-text)} :root[data-lights="on"] .obs.open h4::after{background:var(--accent-text);color:#EDF1EF} :root[data-lights="on"] .his-words blockquote{color:var(--ink-body)} :root[data-lights="on"] .sources .when{color:var(--accent-text)} :root[data-lights="on"] .tuning-summary b{color:var(--accent-text)} :root[data-lights="on"] .promptwrap{background:#E4E8E3;border-color:#C3CCC5} :root[data-lights="on"] .promptwrap summary::after{color:var(--accent-text)} :root[data-lights="on"] .gate input[type=password]{background:#FFFFFF;border-color:#C3CCC5;color:#0F1D18} /* ---- management chrome --------------------------------------------------- */ /* Not the site. A different register on purpose. */ body.is-management{background:var(--mgmt-ground)} /* The bar stays dark in both modes on purpose: a dark strip on a light page reads as a tool rather than a page. Its colors are stated outright rather than taken from tokens, so it cannot go dark on dark when the lights flip. */ .mgmt-bar{background:#132630;border-bottom:1px solid #22404B} .mgmt-bar-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:.85rem;padding-right:clamp(11rem,26vw,16rem)} .mgmt-tag{ font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:#0C161B;background:#C8D3D1; padding:.25em .6em;border-radius:2px;flex:none; } .mgmt-what{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em; color:#C8D3D1;line-height:1.6;flex:1;min-width:14rem; } .mgmt-foot{border-top:1px solid var(--slate);padding-block:2.5rem 3rem;margin-top:2rem} .mgmt-foot p{ font-family:var(--mono);font-size:.6875rem;line-height:2;letter-spacing:.04em; color:var(--steel);margin:0;max-width:44rem; } .mgmt-foot a{color:var(--steel);margin-left:.6em} body.is-management .portrait-head{border-bottom-color:var(--slate)} /* ---- the work itself, shown on the portrait ------------------------------ */ .made{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1.25rem;margin-top:2.25rem} .made figure{margin:0} .made img{width:100%;height:auto;display:block;border:1px solid var(--slate);border-radius:2px;background:var(--slate-deep)} .made figcaption{ font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase; color:var(--steel);margin-top:.7rem;line-height:1.7; } .made .none{ grid-column:1/-1;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--steel); border:1px dashed var(--slate);padding:1.5rem;border-radius:2px;line-height:1.8; } .letter-shot{display:grid;grid-template-columns:15rem 1fr;gap:2rem;align-items:start;margin-top:2.25rem} @media(max-width:760px){.letter-shot{grid-template-columns:1fr}} .letter-shot img{width:100%;height:auto;border:1px solid var(--slate);border-radius:2px;display:block} /* The issue is about ten times taller than it is wide, so the page shows the top of it and opens the rest only when somebody asks. */ .letter-preview > img{ aspect-ratio:3/4;object-fit:cover;object-position:top center; } .letter-open{margin-top:.8rem} .letter-open summary{ cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem; font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-text); } .letter-open summary::-webkit-details-marker{display:none} .letter-open summary::after{content:'+';font-size:.95rem;line-height:1} .letter-open[open] summary::after{content:'\2013'} .letter-open img{margin-top:.9rem} .letter-shot .about p{font-size:.98rem;line-height:1.6;color:var(--sage-pale-2);max-width:34rem} .letter-shot .about .k{ display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.13em; text-transform:uppercase;color:var(--steel);margin-bottom:.6rem; } /* ---- editing a decision from the front end ------------------------------- */ .stance-edit{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;align-items:center} .stance-edit button{ font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase; background:none;color:var(--steel);border:1px solid var(--slate); border-radius:2px;padding:.35rem .6rem;cursor:pointer;line-height:1; } .stance-edit button:hover{border-color:var(--accent-text);color:var(--accent-text)} .stance-edit button[aria-pressed="true"]{ background:var(--amber);border-color:var(--amber);color:var(--brown-deep); } .stance-edit .saved{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)} /* ---- jumping around a long page ------------------------------------------ */ .jumpnav{ position:sticky;top:0;z-index:40; background:var(--mgmt-ground); border-bottom:1px solid var(--slate); /* the switch lives top right, so keep clear of it */ padding-right:clamp(11rem,26vw,16rem); } .jumpnav ul{ list-style:none;margin:0;padding:.7rem 0;display:flex;gap:.35rem;flex-wrap:nowrap; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .jumpnav ul::-webkit-scrollbar{display:none} .jumpnav a[aria-current="true"]{scroll-snap-align:start} .jumpnav a{ display:block;white-space:nowrap;text-decoration:none; font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase; color:var(--steel);border:1px solid transparent;border-radius:2px;padding:.5rem .75rem; transition:color .15s ease,border-color .15s ease; } .jumpnav a:hover{color:var(--accent-text);border-color:var(--slate)} .jumpnav a[aria-current="true"]{color:var(--accent-text);border-color:var(--accent-text)} /* One of these is not a place on this page, it is somewhere else, so it does not look like the others. */ .jumpnav a.is-away{ background:var(--amber);color:var(--brown-deep);border-color:var(--amber); margin-left:.5rem;font-weight:500; } .jumpnav a.is-away::after{content:'\2192';margin-left:.45rem} .jumpnav a.is-away:hover{background:var(--amber-lift);border-color:var(--amber-lift);color:var(--brown-deep)} .jumpnav a.is-away[aria-current="true"]{background:var(--amber);color:var(--brown-deep);border-color:var(--amber)} .jumpnav li:has(.is-away){margin-left:auto} main section[id]{scroll-margin-top:4rem} /* ---- the record, filtered rather than scrolled --------------------------- */ .record-controls{margin-top:2rem} .record-tabs{display:flex;gap:.4rem;flex-wrap:wrap} .record-tabs button{ font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:-.01em; background:none;color:var(--steel);border:1px solid var(--slate); border-radius:2px;padding:.6rem .9rem;cursor:pointer;line-height:1; display:inline-flex;align-items:baseline;gap:.5rem; } .record-tabs button:hover{border-color:var(--accent-text);color:var(--accent-text)} .record-tabs button[aria-selected="true"]{ background:var(--amber);border-color:var(--amber);color:var(--brown-deep); } .record-tabs .n{ font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;opacity:.75; } .facet-chips{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.9rem} .facet-chips button{ font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;text-transform:uppercase; background:none;color:var(--steel);border:1px solid var(--slate); border-radius:2px;padding:.4rem .65rem;cursor:pointer;line-height:1; } .facet-chips button:hover{border-color:var(--accent-text);color:var(--accent-text)} .facet-chips button[aria-pressed="true"]{border-color:var(--accent-text);color:var(--accent-text)} .record-empty{ font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:var(--steel); border:1px dashed var(--slate);padding:1.4rem;border-radius:2px;margin-top:1.5rem;line-height:1.8; } .obs-group[hidden],.obs[hidden]{display:none} .obs{padding:1.1rem 0} .obs h4{margin-bottom:.3rem} /* ---- the newsletter history --------------------------------------------- */ .issues{margin-top:2.5rem;border-top:1px solid var(--slate)} .issue{ display:grid;grid-template-columns:11rem 1fr;gap:2rem; padding:2rem 0;border-bottom:1px solid var(--slate);align-items:start; } @media(max-width:700px){.issue{grid-template-columns:1fr;gap:1.25rem}} .issue-shot{display:block;border:1px solid var(--slate);border-radius:2px;overflow:hidden;background:var(--slate-deep)} .issue-shot img{ width:100%;height:auto;display:block; aspect-ratio:3/4;object-fit:cover;object-position:top center; } .issue-shot-empty{ display:grid;place-items:center;aspect-ratio:3/4; font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel); } .issue-about .meta{ font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--steel);margin:0 0 .5rem; } .issue-about h2{font-size:clamp(1.3rem,2.8vw,1.8rem);margin:0 0 .6rem;max-width:24ch} .issue-about h2 a{text-decoration:none} .issue-about h2 a:hover{color:var(--accent-text)} .issue-sub{font-size:1rem;color:var(--sage-pale-2);margin:0 0 1rem;max-width:var(--measure)} .issue-take{border-left:2px solid var(--slate);padding-left:1rem;margin:0 0 1.1rem;max-width:var(--measure)} .issue-take .k{ display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em; text-transform:uppercase;color:var(--steel);margin-bottom:.4rem; } .issue-take q{ font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.3; letter-spacing:-.02em;quotes:none;display:block; } .issue-links{margin:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase} .issue-links a{margin-right:1.2rem;color:var(--accent-text);text-underline-offset:4px} /* ---- an issue, shown as it went out -------------------------------------- */ .issue-frame{ margin-top:2.25rem;border:1px solid var(--slate);border-radius:2px; background:#EFF2F0;overflow:hidden;max-width:600px; } .issue-frame iframe{display:block;width:100%;border:0} @media(max-width:660px){ /* the email is a fixed 600 column, so scale it rather than let it overflow */ .issue-frame{max-width:100%;overflow-x:auto} .issue-frame iframe{width:600px} } /* ---- what this page is for ---------------------------------------------- */ .explainer-wrap{border-bottom:1px solid var(--slate)} .explainer{ max-width:44rem;padding:clamp(1.5rem,4vw,2.25rem) 0; border-left:2px solid var(--amber);padding-left:clamp(1.25rem,3vw,2rem);margin-left:.25rem; } .explainer summary{ cursor:pointer;list-style:none;display:block; } .explainer summary::-webkit-details-marker{display:none} .explainer .k{ display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.16em; text-transform:uppercase;color:var(--steel);margin:0 0 .7rem; } .explainer .h{ display:block;font-family:var(--display);font-weight:700; font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.15;letter-spacing:-.03em;max-width:24ch; } .explainer .cue{ display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem; font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-text); } .explainer .cue::after{content:'+';font-size:.95rem;line-height:1} .explainer[open] .cue::after{content:'\2013'} .explainer[open] .cue{opacity:.6} .explainer summary:hover .cue{opacity:1} .explainer > p:first-of-type{margin-top:1.3rem} .explainer p{font-size:1.0625rem;line-height:1.65;color:var(--sage-pale-3);max-width:40rem} .explainer p:last-of-type{margin-bottom:0} .explainer-links{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase; margin-top:1.4rem!important; } .explainer-links a{color:var(--accent-text);margin-right:1.4rem;text-underline-offset:4px} /* ---- habits, explained --------------------------------------------------- */ /* Nine of these stacked full width was a wall. Two columns, one short line each, and the full explanation only when somebody wants it. */ .habits{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1px;margin-top:2.25rem} .habit{background:var(--ink);box-shadow:0 0 0 1px var(--slate);padding:1.3rem 1.4rem} .habit-name{ font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.015em; display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin:0 0 .5rem; } .habit-name .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none;transform:translateY(-2px)} .habit-name .state{ font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase; color:var(--steel);font-weight:400;margin-left:auto; } .habit-short{margin:0;font-size:.92rem;line-height:1.55;color:var(--sage-pale-2)} .habit.is-off .habit-name,.habit.is-off .habit-short{color:var(--sage)} .habit.is-off .habit-name .dot{background:var(--slate)} .habit-more{margin-top:.8rem;border:0;padding:0} .habit-more summary{ font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--steel);cursor:pointer;list-style:none;display:inline-flex;gap:.4rem;align-items:center; } .habit-more summary::-webkit-details-marker{display:none} .habit-more summary::after{content:'+';color:var(--accent-text);font-size:.9rem;line-height:1} .habit-more[open] summary::after{content:'\2013'} .habit-more summary:hover{color:var(--accent-text)} .habit-more p{ margin:.7rem 0 0;font-size:.9rem;line-height:1.6;color:var(--sage-pale-2); padding-left:.9rem;border-left:1px solid var(--slate); } .explainer-note{ font-family:var(--mono);font-size:.72rem;line-height:1.9;letter-spacing:.03em; color:var(--steel);margin-top:1.4rem!important;max-width:38rem; } .explainer-note a{color:var(--accent-text);text-underline-offset:4px} /* ---- editing on the page ------------------------------------------------- */ .edit-only{display:none} body.editing .edit-only{display:block} body.editing .stance-edit,body.editing .interest-edit,body.editing .habit-edit{display:flex} body.editing .dial-edit{display:block} body.editing .dial,body.editing .interest,body.editing .obs,body.editing .habit{outline:1px dashed rgba(242,166,59,.28);outline-offset:6px} .dial-edit{margin-top:1rem} .dial-edit input[type=range]{width:100%} .habit-edit{gap:.5rem;margin-top:.9rem} .interest-edit{gap:.35rem;flex-wrap:wrap;margin-top:.9rem} button.mini{ font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase; background:none;color:var(--steel);border:1px solid var(--slate);border-radius:2px; padding:.35rem .6rem;cursor:pointer;line-height:1; } button.mini:hover{border-color:var(--accent-text);color:var(--accent-text)} button.mini[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--brown-deep)} button.bin:hover{border-color:#C2453B;color:#C2453B} .adder{ margin-top:2.5rem;border:1px dashed var(--slate);border-radius:2px; padding:1.5rem;max-width:44rem; } .adder .k{ font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase; color:var(--steel);margin:0 0 1rem; } .adder label{display:block;margin-bottom:.9rem} .adder label span{ display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em; text-transform:uppercase;color:var(--steel);margin-bottom:.4rem; } .adder input[type=text],.adder textarea,.adder select{ width:100%;font-family:var(--body);font-size:1rem;color:var(--paper); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px;padding:.7rem .85rem; } .adder-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end} .adder-row label{flex:1 1 11rem;margin-bottom:0} .adder-row .btn{flex:none} .standing-note{ border-left:2px solid var(--slate);padding-left:1.25rem;margin-top:1.5rem; font-size:1.0625rem;line-height:1.6;color:var(--sage-pale-3);max-width:var(--measure); } .saved{font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)} /* ---- the administrator dock --------------------------------------------- */ /* Bottom of the page, out of the way of the reading, impossible to miss once you look for it. Only ever rendered for somebody who can use it. */ .dock{ position:fixed;bottom:1.1rem;right:1.1rem;z-index:70; display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-end; } .dock-btn{ display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;line-height:1; font-family:var(--mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase; text-decoration:none;border-radius:2px;padding:.7rem .95rem; background:var(--ink);color:var(--steel);border:1px solid var(--slate); box-shadow:0 4px 18px rgba(0,0,0,.34); transition:background .18s ease,color .18s ease,border-color .18s ease; } .dock-btn:hover{border-color:var(--accent-text);color:var(--accent-text)} .dock-btn .ico{font-size:.9rem;line-height:1} .dock-btn.is-primary{background:var(--amber);color:var(--brown-deep);border-color:var(--amber)} .dock-btn.is-primary:hover{background:var(--amber-lift);border-color:var(--amber-lift);color:var(--brown-deep)} .dock-btn.is-primary[aria-pressed="true"]{background:var(--ink);color:var(--amber);border-color:var(--amber)} @media(max-width:640px){ .dock{bottom:.7rem;right:.7rem;gap:.35rem} .dock-btn{padding:.6rem .75rem;font-size:.5625rem;letter-spacing:.1em} } /* Only drop the words when there is genuinely no room. An icon on its own tells nobody anything. */ @media(max-width:380px){ .dock-btn .label{display:none} } @media print{.dock{display:none}} /* ---- waiting on Thad ----------------------------------------------------- */ .whoami{display:block;max-width:26rem} .whoami span{ display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em; text-transform:uppercase;color:var(--steel);margin-bottom:.5rem; } .whoami input{ width:100%;font-family:var(--body);font-size:1.0625rem;color:var(--paper); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px;padding:.8rem 1rem; } .approvals{margin-top:2.25rem;border-top:1px solid var(--slate)} .approval{ display:grid;grid-template-columns:19rem 1fr;gap:2rem; padding:2.25rem 0;border-bottom:1px solid var(--slate);align-items:start; } @media(max-width:760px){.approval{grid-template-columns:1fr;gap:1.25rem}} /* Decided, and saying so. The old behaviour faded the whole card to 45 per cent, which made the thing he had just agreed to look like the least important thing on the page. */ .approval.is-decided{opacity:1} .decide-stamp{ display:inline-flex;flex-direction:column;gap:.3rem; margin:1.1rem 0 0;padding:.7rem .95rem;border-radius:2px; border:1px solid var(--slate);background:var(--slate-deep); } .decide-stamp b{ font-family:var(--mono);font-size:.6875rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase; } .decide-stamp span{ font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;color:var(--steel); } .decide-stamp em{ font-family:var(--body);font-style:normal;font-size:.9rem; color:var(--sage-pale-3);max-width:26rem;margin-top:.15rem; } .is-approved .decide-stamp{border-color:var(--teal)} .is-approved .decide-stamp b{color:var(--teal)} .is-changes .decide-stamp{border-color:var(--accent-text)} .is-changes .decide-stamp b{color:var(--accent-text)} .approval-art img{ width:100%;height:auto;display:block;border:1px solid var(--slate);border-radius:2px; } /* A card is looked at, so a picture of it is enough and bigger is better. An issue is read, so it is the issue itself, scrollable, at its real width. */ .approval.is-issue{grid-template-columns:1fr} .letter-read{ border:1px solid var(--slate);border-radius:2px;background:#EFF2F0; max-width:600px;height:70vh;min-height:26rem;overflow:hidden; } .letter-read iframe{display:block;width:100%;height:100%;border:0} .letter-read-note{ font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;color:var(--steel); margin:.7rem 0 0; } .letter-read-note a{color:var(--accent-text)} @media(max-width:660px){ .letter-read{max-width:100%;overflow-x:auto} .letter-read iframe{width:600px} } .approval-none{ aspect-ratio:4/5;border:1px dashed var(--slate);border-radius:2px;display:grid;place-items:center; font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel); } .approval-about .meta{ font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase; color:var(--steel);margin:0 0 .5rem; } .approval-about h2{font-size:clamp(1.2rem,2.6vw,1.6rem);margin:0 0 .7rem;max-width:26ch} .approval-line{ font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1.3; letter-spacing:-.02em;margin:0 0 1.1rem;max-width:34rem; } .decide{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem} .decide-note{display:none;margin-top:1rem;max-width:34rem} .approval.wants-note .decide-note{display:block} .decide-note span{ display:block;font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em; text-transform:uppercase;color:var(--steel);margin-bottom:.4rem; } .decide-note textarea{ width:100%;font-family:var(--body);font-size:1rem;color:var(--paper); background:var(--slate-deep);border:1px solid var(--slate);border-radius:2px;padding:.7rem .85rem; } .decide-said{ font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;margin:.9rem 0 0;min-height:1.2em; } .decide-said.is-good{color:var(--teal)} .decide-said.is-bad{color:#C2453B} .decided{list-style:none;margin:2.25rem 0 0;padding:0;border-top:1px solid var(--slate)} .decided li{ display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline; padding:.9rem 0;border-bottom:1px solid var(--slate); font-family:var(--mono);font-size:.6875rem;letter-spacing:.05em;color:var(--steel); } .decided .what{font-family:var(--body);font-size:1rem;letter-spacing:0;color:var(--sage-pale-3);flex:1 1 16rem} .decided .state{text-transform:uppercase;letter-spacing:.13em;font-size:.5625rem} .decided li.is-approved .state{color:var(--teal)} .decided li.is-changes .state{color:#C2453B} .decided .note{flex:1 1 100%;font-family:var(--body);font-size:.95rem;letter-spacing:0;color:var(--sage);font-style:italic} /* Approving something is not being finished with it. Somebody still has to send it, so each decided row opens on the files. */ .decided li{display:block} .decided summary{ display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline; cursor:pointer;list-style:none; } .decided summary::-webkit-details-marker{display:none} .decided summary .open{ color:var(--accent-text);text-transform:uppercase;letter-spacing:.13em;font-size:.5625rem; margin-left:auto;white-space:nowrap; } /* A title on its own is not a record of anything. The row carries the picture it was, and the line it said, so the list can be read rather than decoded. */ .decided .thumb{ flex:none;width:2.75rem;height:2.75rem;overflow:hidden; border:1px solid var(--slate);background:var(--slate-deep);align-self:center; } .decided .thumb img{width:100%;height:100%;object-fit:cover;object-position:top} .decided .what{display:block;flex:1 1 14rem} .decided .what em{ display:block;font-family:var(--mono);font-style:normal;font-size:.625rem; line-height:1.6;letter-spacing:.04em;color:var(--steel);margin-top:.2rem; } .decided .decided-shows{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:flex-start} .decided .decided-shows .shot{ flex:0 0 15rem;max-width:100%;display:block; border:1px solid var(--slate);background:var(--slate-deep); } .decided .decided-shows .shot img{display:block;width:100%;max-height:22rem;object-fit:cover;object-position:top} .decided .decided-said{flex:1 1 18rem;min-width:0} .decided .decided-said .post-copy{margin-top:0} /* Something that has been round before. Quiet, but it has to be there, or the page asks him to approve a picture he already said yes to and says nothing about why. */ .approval .again{ font-family:var(--mono);font-size:.6875rem;line-height:1.65;letter-spacing:.02em; color:var(--steel);border-left:2px solid var(--slate);padding-left:.8rem; margin:.9rem 0 0;max-width:var(--measure); } /* Copy the HTML. A button that has to sit in a row of links, so it is dressed as one rather than fighting them. */ /* As a button in a row of buttons. The one on the issue page is a .btn, so it only needs the cursor and the confirmation colour. */ .btn.copy-html{cursor:pointer;font-family:var(--display)} .btn.copy-html.did{border-color:var(--teal);color:var(--teal)} .issue-links .copy-html{ background:none;border:0;padding:0;cursor:pointer; font-family:var(--mono);font-size:inherit;letter-spacing:inherit; color:var(--accent-text);text-decoration:underline;text-underline-offset:.2em; } .issue-links .copy-html:hover,.issue-links .copy-html:focus-visible{color:var(--amber-lift)} .issue-links .copy-html.did{color:var(--teal);text-decoration:none} .copy-src{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0} .copy-src.is-picking{position:static;width:1px;height:1px} @media(max-width:640px){ .decided .decided-shows .shot{flex:1 1 100%} } .decided summary .open::after{content:" +";} .decided details[open] summary .open::after{content:" –";} .decided summary:hover .what{color:var(--paper)} .decided .decided-more{padding:.9rem 0 .3rem} .decided .decided-more .note{margin:0 0 .8rem} .decided .decided-more .downloads{margin-top:.2rem} /* The caption a card would be posted with. Approval page only: it is a draft of a post, not something the site publishes. Deliberately not given the amber bar, which stays the signal for Thad speaking in public. */ .post-copy{margin:1.1rem 0 0;border:1px solid var(--slate);background:var(--slate-deep);padding:.9rem 1rem} .post-copy-k{ display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap; font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em; text-transform:uppercase;color:var(--steel);margin:0 0 .55rem; } /* Approving a post and then not being able to lift the words out of it would be a strange place to stop. */ .post-copy .copy-post{ background:none;border:0;padding:0;cursor:pointer;margin-left:auto; font-family:inherit;font-size:inherit;letter-spacing:inherit;text-transform:inherit; color:var(--accent-text);text-decoration:underline;text-underline-offset:.25em; } .post-copy .copy-post:hover,.post-copy .copy-post:focus-visible{color:var(--amber-lift)} .post-copy .copy-post.did{color:var(--teal);text-decoration:none} .post-copy-body{font-family:var(--body);font-size:.95rem;line-height:1.55;color:var(--sage-pale-3)} .post-copy-body p{margin:0 0 .7em} .post-copy-body p:last-child{margin-bottom:0} .dock-btn .count{ background:var(--amber);color:var(--brown-deep);border-radius:999px; font-size:.625rem;padding:.1em .45em;margin-left:.1rem; } .dock-btn.is-primary .count{background:var(--ink);color:var(--amber)} /* ---- taking the finished files away -------------------------------------- */ .downloads{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 0;align-items:center} .downloads .k{ flex:1 1 100%;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em; text-transform:uppercase;color:var(--steel);margin-bottom:.2rem; } .downloads a{ display:inline-flex;align-items:baseline;gap:.45rem;text-decoration:none; font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase; color:var(--sage-pale-2);border:1px solid var(--slate);border-radius:2px;padding:.4rem .6rem; } .downloads a:hover{border-color:var(--accent-text);color:var(--accent-text)} .downloads a:first-of-type{border-color:var(--amber);color:var(--accent-text)} .downloads .dim{font-size:.5rem;letter-spacing:.06em;color:var(--steel)} .cardshot .downloads{margin-top:.7rem} /* The copy button sits in the same row as the download chips, so it is dressed as one. A bare