/* base-responsive.css The one stylesheet every rendered page links, last in the head, so its mobile rules win over whatever the generator wrote inline. Desktop is untouched; the rules below only fire under 760px. Flex over tables: any table becomes a stack of cards on a phone, and any row-style layout container becomes a column. Pages get this through ensure-responsive.py, which runs after every render. It is also the floor the colour system stands on. Read it in four passes: 1. COLOUR TOKENS - every colour in the system, named by the job it does. 2. CONTAINER KINDS - which token a card of each kind picks up as its accent. 3. CONTAINER PATTERN - the card anatomy, including the pinned action line. 4. MOBILE RULES - the original responsive pass, unchanged. A renderer that links this file can stop writing hex codes and write var() instead, which means one edit here reaches every page at once. */ html{-webkit-text-size-adjust:100%} *,*::before,*::after{box-sizing:border-box} /* ============================================================ 1. COLOUR TOKENS -- the one place colour lives for every page this file is linked from. Names say what the colour is for, never what shade it is, so a renderer asks for a role and always gets the right value back: --posting, not amber; --barrier, not red. Nothing below fires until a page opts in with data-tokens on its tag -- that's deliberate: dozens of pages already link this file for the mobile rules above, and none of them asked for a colour system yet. Opting in is a one-line, reversible choice per renderer, so migrating them one at a time (the current plan) never risks recolouring a page nobody has touched. Dark is the default once opted in, matching the convention resumes.html already used before this block existed. A page that wants light -- a client-facing page, say -- adds data-theme="light" alongside data-tokens, and the light block below re-points the few tokens that need a different shade to stay readable on a pale background. ============================================================ */ [data-tokens]{ /* surfaces and text */ --bg:#13121c; --panel:#1d1c2b; --panel-2:#262437; --ink:#f2f0fb; --mute:#9d99bb; --rule:#322f4a; --rule-strong:#4a4670; --shadow:rgba(0,0,0,.45); /* actions */ --btn:#6c5ce7; --btn-off:#463f77; --on-accent:#fff; /* text that sits on top of any accent fill */ --on-accent-dark:#221a00; /* same job where the accent is light enough to want dark ink */ --alert:#ff6b7a; /* container kinds -- what kind of thing is this container. --letter is the thing that gets sent, --posting is the job as they wrote it, --you is your proof, --barrier is what blocks you, --route is the way around it, --person is a human to reach. */ --letter:#4dd6ff; --posting:#ffb347; --you:#6ee7a8; --barrier:#ff6b7a; --route:#7ce7d8; --person:#c08cff; --role:#ffd166; --pub:#8ea2ff; --company:#a9a5c4; --rules:#8f8bb0; --fit:#ffd166; --fit-ink:#ffe49a; /* outcome family -- three shades, then role names pointing at them, so a new outcome reuses a shade instead of inventing one. */ --good:#35d07a; --mid:#ffb347; --bad:#ff6b7a; --won:var(--good); --lost:var(--bad); --replied:var(--mid); --rework:var(--mid); --commit:var(--good); --sent:var(--letter); --interview:#6b3f8f; --passed:#555; --met:#7fd39a; --open:#e08a7a; /* washes -- tints laid over a surface rather than replacing it */ --track:rgba(255,255,255,.12); --hover-wash:rgba(255,255,255,.06); --focus-wash:rgba(255,255,255,.04); --posting-wash:rgba(176,122,16,.16); } [data-tokens][data-theme="light"]{ --bg:#eeeeea; --panel:#fff; --ink:#1a1a1a; --mute:#5a5a5a; --rule:#d3d3cc; --rule-strong:#b8b8b0; --fit-ink:#7a5a1e; --met:#1f6b3a; --open:#8a3a25; --track:rgba(0,0,0,.12); --hover-wash:rgba(0,0,0,.06); --focus-wash:rgba(0,0,0,.04); } /* ============================================================ 2. CONTAINER KINDS -- one line per kind, and that line is the only place a kind is tied to a colour. A card says what it is with data-kind="posting" and everything downstream (its heading fill, its border, its buttons) reads --accent, so the kind decides the look and a renderer never picks a shade by hand. Adding a kind is one row here plus one token above. ============================================================ */ [data-tokens] .card{--accent:var(--rule)} [data-tokens] .card[data-kind="letter"]{--accent:var(--letter)} [data-tokens] .card[data-kind="posting"]{--accent:var(--posting)} [data-tokens] .card[data-kind="you"]{--accent:var(--you)} [data-tokens] .card[data-kind="barrier"]{--accent:var(--barrier)} [data-tokens] .card[data-kind="route"]{--accent:var(--route)} [data-tokens] .card[data-kind="person"]{--accent:var(--person)} [data-tokens] .card[data-kind="role"]{--accent:var(--role)} [data-tokens] .card[data-kind="workshape"]{--accent:var(--role)} [data-tokens] .card[data-kind="publishes"]{--accent:var(--pub)} [data-tokens] .card[data-kind="company"]{--accent:var(--company)} [data-tokens] .card[data-kind="rules"]{--accent:var(--rules)} [data-tokens] .card[data-kind="fit"]{--accent:var(--fit);--on-accent:var(--on-accent-dark)} /* ============================================================ 3. CONTAINER PATTERN -- the card anatomy, shared so every page builds the same shape: a coloured heading that names the card, an action line under it, then the body. WHAT IT IS: data-kind picks the accent above. The heading, the left border and the little go pills all read var(--accent), so one attribute colour-codes the whole container. WHAT TO DO NEXT: .why is the action line, and it is part of the pattern rather than something a renderer remembers to add. A card built without one shows a plain "Next step missing" strip in its place, so an unfinished container announces itself on screen instead of shipping quietly. Same opt-in rule as the tokens: nothing here fires without data-tokens on , so the two steps stay independently reversible. ============================================================ */ [data-tokens] .card{ background:var(--panel); border:1px solid var(--rule); border-radius:8px; overflow:hidden; color:var(--ink); } [data-tokens] .card>h4{ margin:0;padding:9px 14px; background:var(--accent);color:var(--on-accent); font:700 13px var(--face-ui,Arial,sans-serif); display:flex;align-items:center;gap:8px;flex-wrap:wrap; } [data-tokens] .card>h4 .n{font:11px var(--face-ui,Arial,sans-serif);font-weight:400;opacity:.85;margin-left:auto} [data-tokens] .card .why{ font:12px/1.45 var(--face-ui,Arial,sans-serif);color:var(--mute); padding:8px 14px;border-bottom:1px dashed var(--rule); } [data-tokens] .card .why b{color:var(--ink)} [data-tokens] .card:not(:has(.why))::after{ content:"Next step missing"; display:block;padding:8px 14px;border-top:1px dashed var(--rule); font:700 11px var(--face-ui,Arial,sans-serif);color:var(--alert); } [data-tokens] .card ul{margin:0;padding:8px 14px 10px 14px;list-style:none} [data-tokens] .card li{ font:13px/1.55 var(--face-ui,Arial,sans-serif);padding:6px 0; border-bottom:1px solid var(--bg); display:flex;gap:10px;align-items:flex-start; } [data-tokens] .card li:last-child{border-bottom:0} [data-tokens] .card li .t{flex:1} [data-tokens] .card li .go{ flex:0 0 auto;font:11px var(--face-ui,Arial,sans-serif);padding:3px 8px;border-radius:12px; text-decoration:none;white-space:nowrap;margin-top:2px; background:var(--accent);color:var(--on-accent); } [data-tokens] .card li .go.find{background:var(--mute)} [data-tokens] .card.empty{border-style:dashed} img,svg,video,canvas,iframe{max-width:100%} img,svg,video{height:auto} table{max-width:100%} pre,code{white-space:pre-wrap;word-break:break-word} /* ============================================================ 4. MOBILE RULES -- the original responsive pass, unchanged. ============================================================ */ @media (max-width:760px){ html,body{overflow-x:hidden;max-width:100vw} /* Row layouts become columns. Matches the usual container names without a page needing to opt in. */ .wrap,.row,.cols,.columns,.grid,.flex,.two-col,.three-col,.split,.sidebar-layout,[class*="-row"],[class*="columns"]{ display:flex !important;flex-direction:column !important;flex-wrap:wrap;gap:12px; max-width:100% !important;padding-left:12px;padding-right:12px} .wrap > *,.row > *,.cols > *,.columns > *,.grid > *,.flex > *,.split > *{ flex:1 1 100% !important;min-width:0 !important;max-width:100% !important;width:100% !important} /* Tables stack: header row hidden, each row a card, each cell a line. */ table,thead,tbody,tr,th,td{display:block;width:100%} thead{display:none} tr{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid rgba(128,128,128,.35)} td,th{padding:2px 0 !important;white-space:normal !important;position:static !important} td:empty{display:none} /* Long nav rows scroll sideways instead of wrapping into a wall. */ nav,.tabs,.nav{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap !important} nav a,.tabs a{flex:0 0 auto;white-space:nowrap} /* Type and spacing come down a notch. */ h1{font-size:1.45rem !important} h2{font-size:1.2rem !important} h3{font-size:1.05rem !important} body{font-size:15px} input,select,textarea,button{max-width:100%;font-size:16px} form{flex-wrap:wrap} form > *{flex:1 1 100%} header,footer,section,main,article{padding-left:12px;padding-right:12px} iframe{height:calc(100vh - 60px)} .side,.panel,aside{width:100% !important} } /* ============================================================ 5. GLASS THEME -- a bright, glossy surface with prism accents. Opt in per page with data-theme="glass" beside data-tokens, the same one-line, reversible switch the light theme uses. The idea: white frosted panels, depth from blur and light instead of hard rules, and the container-kind accents re-tuned to spectrum hues so a card still says what it is, just in a brighter voice. ============================================================ */ [data-tokens][data-theme="glass"]{ --bg:#f4f6fb; --panel:rgba(255,255,255,.72); --panel-2:rgba(255,255,255,.55); --ink:#12141c; --mute:#5d6478; --rule:rgba(18,20,28,.10); --rule-strong:rgba(18,20,28,.18); --shadow:rgba(24,32,64,.12); --btn:#4f6cf7; --btn-off:#c3cbe4; --on-accent:#ffffff; --on-accent-dark:#1a1400; --alert:#e0355a; /* prism accents -- one hue per kind, walked around the spectrum */ --letter:#0aa2e8; --posting:#f08a1c; --you:#12a86a; --barrier:#e0355a; --route:#12b5a6; --person:#8b5cf6; --role:#d99a00; --pub:#3f63e0; --company:#6b7288; --rules:#7a819a; --fit:#d99a00; --fit-ink:#8a6400; --good:#12a86a; --mid:#f08a1c; --bad:#e0355a; --interview:#8b5cf6; --passed:#9aa0b4; --met:#12a86a; --open:#e07a3c; --track:rgba(18,20,28,.10); --hover-wash:rgba(79,108,247,.08); --focus-wash:rgba(79,108,247,.05); --posting-wash:rgba(240,138,28,.12); } /* The gloss. A soft spectrum wash sits behind the page and the panels float above it as frosted glass, so the colour reads as light in the room rather than as a filled background. */ [data-tokens][data-theme="glass"] body{ background: radial-gradient(1100px 620px at 8% -8%, rgba(139,92,246,.16), transparent 60%), radial-gradient(900px 520px at 92% 0%, rgba(10,162,232,.16), transparent 58%), radial-gradient(900px 620px at 50% 108%, rgba(18,168,106,.13), transparent 60%), var(--bg); background-attachment:fixed; } [data-tokens][data-theme="glass"] header{ background:rgba(255,255,255,.62); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid rgba(255,255,255,.65); box-shadow:0 8px 26px var(--shadow); } [data-tokens][data-theme="glass"] .row, [data-tokens][data-theme="glass"] .card, [data-tokens][data-theme="glass"] .panel{ background:var(--panel); -webkit-backdrop-filter:saturate(170%) blur(14px); backdrop-filter:saturate(170%) blur(14px); border:1px solid rgba(255,255,255,.70); border-radius:14px; box-shadow:0 1px 0 rgba(255,255,255,.90) inset, 0 10px 26px var(--shadow); transition:transform .18s ease, box-shadow .18s ease; } [data-tokens][data-theme="glass"] .row:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 16px 34px var(--shadow); } [data-tokens][data-theme="glass"] .row{border-left:6px solid var(--posting)} [data-tokens][data-theme="glass"] .row.open{border-left-color:var(--letter)} [data-tokens][data-theme="glass"] .card>h4{ background:linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 62%, #ffffff)); box-shadow:0 1px 0 rgba(255,255,255,.50) inset; } [data-tokens][data-theme="glass"] button{ background:linear-gradient(180deg, color-mix(in oklab, var(--btn) 88%, #ffffff), var(--btn)); border-radius:10px; box-shadow:0 1px 0 rgba(255,255,255,.60) inset, 0 4px 12px rgba(79,108,247,.28); } [data-tokens][data-theme="glass"] button:hover{filter:brightness(1.06)} [data-tokens][data-theme="glass"] button:disabled{ background:var(--btn-off); box-shadow:none; color:#ffffff; } [data-tokens][data-theme="glass"] input[type=url], [data-tokens][data-theme="glass"] input[type=search], [data-tokens][data-theme="glass"] textarea, [data-tokens][data-theme="glass"] select{ background:rgba(255,255,255,.80); border:1px solid rgba(18,20,28,.12); border-radius:10px; } [data-tokens][data-theme="glass"] input:focus, [data-tokens][data-theme="glass"] textarea:focus, [data-tokens][data-theme="glass"] select:focus{ outline:0; border-color:var(--btn); box-shadow:0 0 0 3px rgba(79,108,247,.18); } [data-tokens][data-theme="glass"] .nav a, [data-tokens][data-theme="glass"] .links a{ background:rgba(255,255,255,.60); border:1px solid rgba(255,255,255,.80); border-radius:10px; box-shadow:0 2px 8px var(--shadow); } [data-tokens][data-theme="glass"] .nav a:hover, [data-tokens][data-theme="glass"] .links a:hover{background:var(--hover-wash)} [data-tokens][data-theme="glass"] .tag{border-radius:999px; padding:2px 9px} /* The one spectrum moment: a thin prism rule trailing each band heading, so the rainbow lands as a highlight and the reading surface stays white. */ [data-tokens][data-theme="glass"] .band::after{ content:""; flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg,#e0355a,#f08a1c,#d99a00,#12a86a,#0aa2e8,#3f63e0,#8b5cf6); opacity:.55; }