/* ============================================================ Studio Schade — design system Studio identity = WOOD & BRASS (home, games, news, shared chrome). Each page can swap its world via a theme class: .theme-nautical / -scifi / -fantasy (book pages) .theme-matrix (Allen — hacker green) .theme-goth (Rachel — goth) Plain static CSS — no build step. ============================================================ */ :root { /* Base "studio" palette — walnut & brass */ --bg: #1d150d; --ink: #f1e7d5; --muted: #b3a184; --rule: #4b3925; --accent: #caa14a; /* brass */ --accent-2: #f0d98c; /* bright brass highlight */ --accent-ink:#1d150d; --card: #271c11; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 40px rgba(0,0,0,.5); --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Site CHROME font (header brand + nav). Deliberately NOT --serif, so it stays consistent even on pages whose theme overrides --serif (e.g. matrix's mono). */ --chrome-serif: "Fraunces", Georgia, "Times New Roman", serif; --maxw: 1080px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); /* faux wood grain + warm brass glow up top */ background-image: radial-gradient(130% 60% at 50% -12%, rgba(202,161,74,.16), transparent 60%), repeating-linear-gradient(91deg, rgba(255,244,222,.018) 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 3px, transparent 3px 11px), linear-gradient(180deg, #241a10, #160f08); background-attachment: fixed; color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, .display { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 .4em; } h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 2.2em 0 .6em; } h3 { font-size: 1.2rem; margin: 1.6em 0 .4em; } p { margin: 0 0 1.1em; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } img { max-width: 100%; display: block; } .muted { color: var(--muted); } .center { text-align: center; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; } .narrow { max-width: 680px; } /* brass gradient text (logo, hero accents) */ .brass-text { background: linear-gradient(180deg, #f6e7b0, #d7b25a 45%, #a87e2b 78%, #f0d98c); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Header / nav ---- */ .site-header { border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.2) blur(8px); z-index: 50; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; } .brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color: var(--ink); } .brand-mark { width:40px; height:40px; flex:none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); } .brand .wm { font-family: var(--chrome-serif); font-weight: 600; font-size: 1.25rem; letter-spacing: .02em; line-height:1; } .brand .wm small { display:block; font-family: var(--sans); font-weight:500; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color: var(--muted); margin-top:3px; } .nav a { color: var(--ink); text-decoration: none; margin-left: 1.7rem; font-family: var(--chrome-serif); font-size: 1.12rem; font-weight: 600; font-variant: small-caps; letter-spacing: .07em; position: relative; padding: .15em 0; transition: color .15s; } .nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background: var(--accent); transition: right .22s ease; } .nav a:hover { color: var(--accent); } .nav a:hover::after { right:0; } /* Nav links are written with no whitespace between them, so without an explicit flex context there is no break opportunity and the nav runs off a phone screen. */ .nav { display:flex; flex-wrap:wrap; justify-content:flex-end; row-gap:.15rem; } @media (max-width:640px){ .nav a { margin-left: 1rem; font-size:.95rem; } .site-header .wrap{ height:auto; min-height:62px; padding-top:8px; padding-bottom:8px; gap:10px; } .brand .wm small{ display:none; } } /* ---- Hero ---- */ .hero { padding: clamp(48px, 9vw, 110px) 0 56px; } .hero .lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); max-width: 42ch; } .kicker { font-family: var(--sans); font-weight:600; text-transform: uppercase; letter-spacing:.22em; font-size:.72rem; color: var(--accent); margin:0 0 1rem; } /* studio (home) hero — engraved nameplate feel */ .studio-hero { text-align:center; padding: clamp(22px, 3.5vw, 44px) 0 30px; } .studio-hero .seal { width: clamp(78px, 11vw, 104px); height:auto; margin:0 auto 14px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); } .studio-hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin:0; } .studio-hero .lede { margin:1.1rem auto 0; max-width: 52ch; } .studio-hero .btn-row { justify-content:center; } /* ornamental brass divider */ .rule-orn { display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0 4px; color:var(--accent); } .rule-orn::before, .rule-orn::after { content:""; height:1px; width:clamp(40px,12vw,100px); background:linear-gradient(90deg, transparent, var(--accent)); } .rule-orn::after { background:linear-gradient(90deg, var(--accent), transparent); } .rule-orn span { font-size:.9rem; letter-spacing:.3em; } /* ---- Buttons ---- */ .btn { display:inline-block; padding:.7rem 1.25rem; border-radius: 999px; font-weight:600; font-size:.92rem; text-decoration:none; border:1px solid var(--accent); color:var(--accent); background:transparent; transition:.15s; cursor:pointer; } .btn:hover { background:var(--accent); color:var(--accent-ink); } .btn.solid { color:var(--accent-ink); background:linear-gradient(180deg, var(--accent-2), var(--accent) 58%, #9c7a2e); border-color:#9c7a2e; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(0,0,0,.4); } .btn.solid:hover { filter:brightness(1.07); } .btn-row { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0; } /* ---- Book / card grid ---- */ .grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 28px; margin: 32px 0; } .card { background:var(--card); border:1px solid var(--rule); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:.18s; text-decoration:none; color:inherit; } .card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.55); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); } .card .body { padding:18px 20px 22px; } .card h3 { margin:.1em 0 .25em; } .card .by { font-size:.8rem; color:var(--muted); } .tag { display:inline-block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding:.25em .6em; border-radius:999px; background:var(--rule); color:var(--accent-2); } .tag.soon { background:#3a2a14; color:#e8c980; } /* Cover placeholder — looks intentional until real art arrives */ .cover { aspect-ratio: 2/3; display:grid; place-items:center; text-align:center; padding:18px; font-family:var(--serif); color:#fff; position:relative; overflow:hidden; } .cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; } .cover .ph { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; position:absolute; bottom:10px; left:0; right:0; opacity:.7; font-family:var(--sans); } .cover .ct { font-size:1.35rem; line-height:1.15; } /* ---- Author portrait ---- */ .avatar { width:260px; height:260px; border-radius:50%; display:grid; place-items:center; text-align:center; margin:0 auto 32px; color:#fff; font-family:var(--serif); position:relative; overflow:hidden; background:linear-gradient(160deg,#7a5c3e,#a8895f); box-shadow: 0 0 0 1px var(--rule), 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow); } .avatar .ph { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; opacity:.85; font-family:var(--sans); } .avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* ---- Book detail page ---- */ .book { display:grid; grid-template-columns: minmax(0,300px) 1fr; gap:48px; align-items:start; padding:48px 0; } .book .cover { border-radius:12px; box-shadow:var(--shadow); max-width:300px; } @media (max-width:760px){ .book{ grid-template-columns:1fr; gap:28px; } .book .cover{ max-width:240px; margin:0 auto; } } /* ---- Mailing signup ---- */ .signup { background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:30px; margin:36px 0; box-shadow: var(--shadow); } .signup form { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; } .signup input[type=email]{ flex:1 1 240px; padding:.75rem 1rem; border:1px solid var(--rule); border-radius:999px; font-size:1rem; background:var(--bg); color:var(--ink); } .signup input[type=email]:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .hp { position:absolute; left:-9999px; } /* honeypot */ /* ---- Footer ---- */ .site-footer { border-top:1px solid var(--rule); margin-top:64px; padding:40px 0; color:var(--muted); font-size:.9rem; } .site-footer a { color:var(--muted); } /* ---- News ---- */ .post { border-bottom:1px solid var(--rule); padding:26px 0; } .post .date { font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } /* ============================================================ PER-PAGE THEMES (applied as a class on ) ============================================================ */ /* The Price of Discovery — antique nautical */ body.theme-nautical { --bg:#f4ecdc; --ink:#22303a; --muted:#5d6b72; --rule:#d8c9a8; --accent:#1f3a52; --accent-2:#3a6b8a; --accent-ink:#f4ecdc; --card:#fbf5e6; background-image: radial-gradient(circle at 50% -10%, #ece0c4 0, transparent 60%); } body.theme-nautical .cover { background: linear-gradient(160deg,#1f3a52,#33586f); } body.theme-nautical .tag { background:#e4d6b4; color:#6b5a33; } body.theme-nautical .avatar { background:linear-gradient(160deg,#1f3a52,#33586f); } /* The Iron Gardener — sci-fi green & purple */ body.theme-scifi { --bg:#0e1014; --ink:#e9ecf2; --muted:#9aa3b2; --rule:#272b36; --accent:#36e0a0; --accent-2:#7df0c4; --accent-ink:#0e1014; --card:#161922; background-image: radial-gradient(circle at 80% -10%, #2a1a44 0, transparent 55%), radial-gradient(circle at 0% 10%, #0c2a22 0, transparent 45%); } body.theme-scifi a { color:#8b7bff; } body.theme-scifi .cover { background: linear-gradient(150deg,#0c2a22,#1a1030 70%); box-shadow:0 0 40px rgba(54,224,160,.15); } body.theme-scifi .cover .ct { color:#36e0a0; text-shadow:0 0 18px rgba(54,224,160,.5); } body.theme-scifi .kicker { color:#36e0a0; } body.theme-scifi .tag.soon { background:#231a3a; color:#b9a7ff; } /* Flames of Rebellion — fantasy gold & flames */ body.theme-fantasy { --bg:#16100c; --ink:#f4e9d6; --muted:#b39e84; --rule:#3a2a1c; --accent:#e8a23a; --accent-2:#f7c873; --accent-ink:#16100c; --card:#201610; background-image: radial-gradient(circle at 50% -5%, #6b2a12 0, transparent 55%); } body.theme-fantasy a { color:#f0b94e; } body.theme-fantasy .cover { background: linear-gradient(160deg,#7a2a10,#c2641a 60%,#e8a23a); } body.theme-fantasy .cover .ct { color:#fff3dc; text-shadow:0 2px 14px rgba(0,0,0,.5); } body.theme-fantasy .kicker { color:#e8a23a; } /* ============================================================ ALLEN — MATRIX / HACKER (theme-matrix) ============================================================ */ body.theme-matrix { --bg:#04070a; --ink:#cfeede; --muted:#7cad92; --rule:#11331f; --accent:#18f07a; --accent-2:#9dffc8; --accent-ink:#04070a; --card:#08120c; --serif: "Share Tech Mono", ui-monospace, "Cascadia Code", monospace; background:#04070a; background-image:none; } body.theme-matrix h1, body.theme-matrix h2, body.theme-matrix h3 { letter-spacing:.01em; } body.theme-matrix .kicker { font-family:"Share Tech Mono", monospace; color:var(--accent); letter-spacing:.32em; } body.theme-matrix a { color:var(--accent); } body.theme-matrix .hero h1 { text-shadow: 0 0 22px rgba(24,240,122,.45); } body.theme-matrix .lede { color:#8fc6aa; } /* digital-rain canvas sits behind everything */ #rain { position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.28; pointer-events:none; } body.theme-matrix .site-header, body.theme-matrix main, body.theme-matrix .site-footer { position:relative; z-index:1; } body.theme-matrix .avatar { border-radius:10px; background:linear-gradient(160deg,#05140c,#0a2a18); box-shadow: 0 0 0 1px var(--accent), 0 0 34px rgba(24,240,122,.35); filter:none; } body.theme-matrix .avatar::after { /* scanlines */ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(24,240,122,.10) 0 1px, transparent 1px 3px); } body.theme-matrix .btn.solid { box-shadow: inset 0 0 0 1px rgba(157,255,200,.6), 0 0 18px rgba(24,240,122,.4); } body.theme-matrix .signup, body.theme-matrix .card { border-color:#16442a; } /* ============================================================ BUILDS — INDUSTRIAL (theme-industrial) The page is the workshop: graphite, brushed steel, safety amber, stamped plates and hazard tape. Each CARD then carries its own project's colours, so the shelf is neutral and the products are not. ============================================================ */ body.theme-industrial { --bg:#14161a; --ink:#dfe3e7; --muted:#8d979f; --rule:#2b3138; --accent:#f0a52a; /* safety amber */ --accent-2:#ffc76a; --accent-ink:#14161a; --card:#1b1f25; --steel:#3a424a; background:#14161a; background-image: /* brushed-steel micro grain */ repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px), /* worklight from above */ radial-gradient(120% 55% at 50% -10%, rgba(240,165,42,.10), transparent 62%), linear-gradient(180deg, #191c21, #101216); background-attachment: fixed; } body.theme-industrial h1, body.theme-industrial h2 { font-family:"Oswald", "Inter", sans-serif; font-weight:600; letter-spacing:.02em; text-transform:uppercase; } /* h3 is a PROJECT NAME. botNET, godot_wayland and pi-simplesay all carry meaning in their casing, so it is set in mono and never transformed. */ body.theme-industrial h3 { font-family:"Share Tech Mono", ui-monospace, monospace; font-weight:400; text-transform:none; letter-spacing:.01em; font-size:1.32rem; color:var(--accent-2); } body.theme-industrial .hero h1 { font-size:clamp(2.4rem,6vw,4rem); letter-spacing:.06em; } body.theme-industrial .hero { padding: clamp(40px,6vw,74px) 0 34px; } body.theme-industrial .section-head { margin:1.4em 0 0; } body.theme-industrial .kicker { font-family:"Oswald", sans-serif; letter-spacing:.34em; color:var(--accent); } body.theme-industrial .lede { color:#a9b3bb; } body.theme-industrial a { color:var(--accent-2); } /* stamped nameplate for the hero */ .plate { display:inline-block; padding:14px 30px 16px; border-radius:3px; position:relative; background:linear-gradient(180deg,#262c33,#1a1e23); border:1px solid #39424b; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 6px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.5); } .plate::before, .plate::after { content:""; position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #8b949c, #383f46 60%, #20252a); box-shadow:0 1px 1px rgba(0,0,0,.7); } .plate::before { left:11px; } .plate::after { right:11px; } .plate h1 { margin:0; } /* hazard tape rule, used under section headings */ .hazard { height:9px; border-radius:2px; margin:.5rem 0 0; background:repeating-linear-gradient(135deg, #f0a52a 0 13px, #14161a 13px 26px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05); opacity:.85; } .section-head { display:flex; flex-direction:column; align-items:center; margin:2.6em 0 0; } .section-head h2 { margin:0; font-size:clamp(1.3rem,2.6vw,1.8rem); letter-spacing:.22em; color:#cfd6dc; } .section-head .hazard { width:min(360px, 70%); } /* riveted card frame */ body.theme-industrial .card { background:var(--card); border:1px solid var(--rule); color:var(--ink); border-radius:5px; position:relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 30px rgba(0,0,0,.5); } body.theme-industrial .card::before, body.theme-industrial .card::after { content:""; position:absolute; bottom:7px; width:6px; height:6px; border-radius:50%; z-index:4; background:radial-gradient(circle at 35% 30%, #79838c, #333a41 60%, #1b1f24); opacity:.75; } body.theme-industrial .card::before { left:7px; } body.theme-industrial .card::after { right:7px; } body.theme-industrial .card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 55%, var(--rule)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 38px rgba(0,0,0,.6), 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent); } body.theme-industrial .card .muted { color:var(--muted); } body.theme-industrial .tag { font-family:"Oswald", sans-serif; font-weight:500; border-radius:3px; letter-spacing:.14em; background:color-mix(in srgb, var(--accent) 16%, #0c0e11); color:var(--accent-2); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); } body.theme-industrial .btn.solid { border-radius:3px; color:#14161a; background:linear-gradient(180deg, var(--accent-2), var(--accent) 60%, #b9781a); border-color:#b9781a; } body.theme-industrial .btn { border-radius:3px; } body.theme-industrial .signup { border-radius:5px; background:var(--card); } /* ---- PER-CARD BRANDS ---------------------------------------------------- Each card overrides the same four variables, so every child (tag, links, rivets, hover glow, terminal plate) recolours with no extra selectors. */ .card[data-brand="godot"] { --accent:#5aa9e6; --accent-2:#9fd0f5; --card:#151b23; --rule:#26333f; } .card[data-brand="watcher"] { --accent:#ffb340; --accent-2:#ffd694; --card:#1e1a14; --rule:#3b3021; } .card[data-brand="say"] { --accent:#4fd6c8; --accent-2:#a5efe6; --card:#131e1e; --rule:#22383a; } .card[data-brand="nebulae"] { --accent:#a78bfa; --accent-2:#cbb8ff; --card:#181430; --rule:#2e2456; } .card[data-brand="botnet"] { --accent:#43d9c4; --accent-2:#9ff2e6; --card:#0d1414; --rule:#1d3634; } /* Lifted straight from consensuslab.ai's own dark theme (src/styles/global.css, :root[data-theme="dark"]), so the card is the site rather than an impression of it. */ .card[data-brand="consensus"] { --accent:#2dd4bf; --accent-2:#5eead4; --card:#121a2b; --rule:#243349; --ink:#e7edf5; --muted:#9fb0c3; } /* ---- Terminal plate: cover art for code projects that have none ---- A card needs something in the top third or it reads as an empty box. Rather than another gradient, these show the thing actually doing its job. Every colour comes from the card's own --accent, so one block serves every brand. */ .cover.term { aspect-ratio:auto; display:block; place-items:stretch; padding:0; overflow:hidden; background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, #0a0c0e), #07090b); font-family:"Share Tech Mono", ui-monospace, "Cascadia Code", monospace; } .cover.term .bar { height:27px; display:flex; align-items:center; gap:7px; padding:0 11px; background:color-mix(in srgb, var(--accent) 11%, #0b0e11); border-bottom:1px solid color-mix(in srgb, var(--accent) 26%, transparent); } .cover.term .bar i { width:8px; height:8px; border-radius:50%; flex:none; background:color-mix(in srgb, var(--accent) 45%, #262c33); } .cover.term .bar span { margin-left:6px; font-size:.62rem; letter-spacing:.14em; color:color-mix(in srgb, var(--accent) 62%, #7d878f); text-transform:none; } .cover.term pre { margin:0; padding:13px 14px; text-align:left; white-space:pre-wrap; font:inherit; font-size:.78rem; line-height:1.65; color:color-mix(in srgb, var(--accent) 58%, #9aa4ac); } .cover.term b { color:var(--accent); font-weight:400; } .cover.term i { font-style:normal; color:color-mix(in srgb, var(--accent) 34%, #6b757d); } .cover.term em { font-style:normal; color:var(--accent-2); text-shadow:0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); } .cover.term::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 3px); } .cur { display:inline-block; width:.55em; height:1em; vertical-align:-.15em; background:var(--accent); } @media (prefers-reduced-motion: no-preference){ .cur { animation:blink 1.1s steps(1,end) infinite; } @keyframes blink { 50% { opacity:0; } } } /* ---- Grade plate: ConsensusLab's own dark theme and its own scale ---- */ .cover.grade { aspect-ratio:auto; display:block; place-items:stretch; padding:18px 18px 16px; text-align:left; font-family:var(--sans); background:#0b1220; background-image: radial-gradient(560px 220px at 78% -20%, #10302e 0, transparent 62%), radial-gradient(360px 180px at 0% 0%, #14213f 0, transparent 58%); } .cover.grade .cl-mark { width:min(215px, 68%); height:auto; display:block; margin:2px 0 15px; } .cover.grade .gl { font-size:.58rem; letter-spacing:.2em; color:#6b7d92; margin:0 0 8px; font-family:"Share Tech Mono", ui-monospace, monospace; } .cover.grade ul { list-style:none; margin:0; padding:0; font-size:.72rem; line-height:1.85; } .cover.grade li { display:flex; align-items:center; gap:8px; color:#9fb0c3; } .cover.grade li s { flex:none; width:26px; height:6px; border-radius:3px; text-decoration:none; } .cover.grade li.hi { color:#5eead4; font-weight:600; } /* ---- Art cover: cards that DO have real artwork ---- */ .cover.art { aspect-ratio:16/10; object-position:center 42%; display:block; padding:0; overflow:hidden; background:#07090b; } .cover.art .cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; z-index:1; } .cover.art::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg, transparent 68%, color-mix(in srgb, var(--card) 78%, transparent)); } .cover.art .art-mark { position:absolute; left:15px; bottom:9px; z-index:3; font-family:"Share Tech Mono", monospace; font-size:1.5rem; letter-spacing:.02em; color:var(--accent-2); text-shadow:0 0 18px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px #000; } .cover.art .art-logo { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); width:78%; max-width:280px; filter:drop-shadow(0 3px 14px rgba(0,0,0,.9)); } .card:hover .cover.art .cover-img { transform:scale(1.03); } .cover.art .cover-img { transition:transform .5s ease; } /* ---- Builds page ---- */ .build-note { font-size:.78rem; letter-spacing:.06em; color:var(--muted); font-family:"Share Tech Mono", ui-monospace, monospace; margin:.9rem 0 0; overflow-wrap:anywhere; } /* Two-up so the prose gets a readable measure — auto-FIT, not auto-fill, or a two-card row leaves phantom tracks and both cards come out skinny. */ .grid.builds { grid-template-columns:repeat(auto-fit, minmax(360px,1fr)); } @media (max-width:420px){ .grid.builds { grid-template-columns:1fr; } } .build-note a { text-decoration:none; } .build-note a:hover { text-decoration:underline; } body.theme-matrix .tag { background:#0f3020; color:#7dffb8; } body.theme-matrix h2 { color:var(--accent-2); } body.theme-matrix h2.center::before { content:"// "; color:#2f7a52; } body.theme-matrix .card:hover { border-color:var(--accent); box-shadow:0 2px 4px rgba(0,0,0,.5), 0 0 26px rgba(24,240,122,.16); } /* ============================================================ BOOKS — LIBRARY (theme-library) The shelf that holds two books whose own pages live in different worlds (nautical parchment, sci-fi green). Deep navy sits between them. ============================================================ */ body.theme-library { --bg:#0f151d; --ink:#e6ecf3; --muted:#94a3b4; --rule:#26313e; --accent:#6fb0d6; --accent-2:#a8d4ee; --accent-ink:#0f151d; --card:#161e28; background:#0f151d; background-image: radial-gradient(120% 60% at 50% -10%, rgba(111,176,214,.13), transparent 62%), radial-gradient(80% 50% at 88% 8%, rgba(54,224,160,.07), transparent 60%), linear-gradient(180deg,#131b25,#0b1017); background-attachment:fixed; } .shelf-item { display:grid; grid-template-columns:220px 1fr; gap:34px; align-items:center; background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:28px 32px; margin:0 0 24px; text-decoration:none; color:var(--ink); transition:transform .18s, border-color .18s, box-shadow .18s; box-shadow:0 2px 4px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.4); } .shelf-item:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 2px 4px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.5), 0 0 28px rgba(111,176,214,.16); } .shelf-cover img { width:100%; height:auto; border-radius:5px; box-shadow:0 12px 30px rgba(0,0,0,.6); transition:transform .35s ease; } .shelf-item:hover .shelf-cover img { transform:scale(1.03) rotate(-1deg); } .shelf-body h2 { margin:.1rem 0 .2rem; font-size:clamp(1.5rem,3vw,2rem); } .shelf-body .sub { color:var(--accent-2); margin:0 0 .9rem; font-size:1.02rem; } .shelf-body p { color:var(--muted); margin:0 0 .9rem; } .shelf-body .note { font-size:.88rem; color:#8fa2b5; } .shelf-body .note strong { color:var(--accent-2); } .shelf-body .go { font-weight:700; color:var(--accent); font-size:.94rem; } body.theme-library .btn.solid { background:linear-gradient(180deg, var(--accent-2), var(--accent) 60%, #3d7ea3); border-color:#3d7ea3; color:#08131c; } .shelf-item:hover .go { text-decoration:underline; text-underline-offset:3px; } @media (max-width:720px){ .shelf-item { grid-template-columns:1fr; gap:20px; padding:22px; } .shelf-cover { max-width:190px; margin:0 auto; } } /* ============================================================ HOME — SECTION CARDS One big card per section of the site. Same idea as the builds page one level up: the page chrome stays studio wood-and-brass, and each card wears the theme of the page it opens. ============================================================ */ .section-cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:26px; margin:34px 0 0; } .section-cards .wide { grid-column:1 / -1; } @media (max-width:760px){ .section-cards { grid-template-columns:1fr; } } .scard { position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:16px; text-decoration:none; color:var(--sc-ink); background:var(--sc-bg); border:1px solid var(--sc-rule); box-shadow:0 2px 4px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.42); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .scard:hover { transform:translateY(-5px); border-color:var(--sc-accent); box-shadow:0 2px 4px rgba(0,0,0,.4), 0 26px 60px rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--sc-accent) 26%, transparent); } /* the art band */ .scard .art { position:relative; height:210px; overflow:hidden; background:var(--sc-art); flex:none; } .scard.wide .art { height:150px; } /* inline variant: no art band at all, the seal sits at the right of the copy */ .scard.inline { flex-direction:row; align-items:center; gap:30px; padding-right:34px; } .scard.inline .body { padding:26px 0 26px 30px; } .scard.inline .seal-side { flex:none; display:flex; align-items:center; justify-content:center; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(202,161,74,.20), transparent 68%); } .scard.inline .seal-side img { width:118px; height:118px; transition:transform .35s ease; } .scard.inline:hover .seal-side img { transform:rotate(-6deg) scale(1.05); } @media (max-width:660px){ .scard.inline { flex-direction:column-reverse; padding:0 0 4px; gap:0; } .scard.inline .body { padding:18px 22px 24px; } .scard.inline .seal-side { margin-top:20px; } } .scard .art > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .55s ease; } .scard:hover .art > img { transform:scale(1.045); } .scard .art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, var(--sc-bg) 100%); } .scard.wide .body p { max-width:74ch; } .scard .body { padding:20px 24px 24px; display:flex; flex-direction:column; flex:1 1 auto; } .scard .sc-kicker { font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sc-accent); margin:0 0 .35rem; font-weight:600; } .scard h2 { font-family:var(--sc-font, var(--serif)); font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 .45rem; color:var(--sc-head); letter-spacing:0; text-transform:none; } .scard p { margin:0 0 1rem; color:var(--sc-muted); font-size:.96rem; line-height:1.55; } .scard ul { list-style:none; margin:0 0 1.1rem; padding:0; display:flex; flex-wrap:wrap; gap:6px; } .scard ul li { font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; padding:.3em .65em; border-radius:999px; background:color-mix(in srgb, var(--sc-accent) 15%, transparent); color:var(--sc-accent); border:1px solid color-mix(in srgb, var(--sc-accent) 32%, transparent); } .scard .go { margin-top:auto; font-weight:700; font-size:.92rem; color:var(--sc-accent); letter-spacing:.02em; } .scard:hover .go { text-decoration:underline; text-underline-offset:3px; } /* --- per-destination themes, lifted from each page --- */ .scard[data-dest="builds"] { --sc-bg:#1b1f25; --sc-rule:#2b3138; --sc-ink:#dfe3e7; --sc-muted:#98a2aa; --sc-accent:#f0a52a; --sc-head:#fff; --sc-art:#0f1216; --sc-font:"Oswald", sans-serif; } .scard[data-dest="builds"] h2 { text-transform:uppercase; letter-spacing:.03em; } .scard[data-dest="bakes"] { --sc-bg:#fffaf2; --sc-rule:#e2d5c1; --sc-ink:#2b211a; --sc-muted:#6d5f52; --sc-accent:#a8571f; --sc-head:#241b15; --sc-art:#2b211a; } .scard[data-dest="books"] { --sc-bg:#141a22; --sc-rule:#28323f; --sc-ink:#e6ecf3; --sc-muted:#94a3b4; --sc-accent:#5b9bc4; --sc-head:#f2f6fa; --sc-art:#0d1218; } .scard[data-dest="author"] { --sc-bg:#08120c; --sc-rule:#16442a; --sc-ink:#cfeede; --sc-muted:#7cad92; --sc-accent:#18f07a; --sc-head:#e6fff0; --sc-art:#04070a; --sc-font:"Share Tech Mono", monospace; } .scard[data-dest="news"] { --sc-bg:#271c11; --sc-rule:#4b3925; --sc-ink:#f1e7d5; --sc-muted:#b3a184; --sc-accent:#caa14a; --sc-head:#f6e7b0; --sc-art:#1d150d; } /* Builds has no single photograph, so its band is built rather than shot. */ .sc-plate { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:9px; padding:0 26px; font-family:"Share Tech Mono", ui-monospace, monospace; background: repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px), linear-gradient(160deg,#20262d,#0f1216); } .sc-plate .row { display:flex; align-items:center; gap:10px; font-size:.82rem; color:#8e9aa4; } .sc-plate .row b { color:#f0a52a; font-weight:400; } .sc-plate .row s { flex:1; height:1px; background:#2c343c; text-decoration:none; } .sc-plate .tape { position:absolute; left:0; right:0; bottom:0; height:8px; background:repeating-linear-gradient(135deg,#f0a52a 0 12px, #14161a 12px 24px); opacity:.8; } /* Books band: the two covers, angled like they are on a shelf */ .sc-shelf { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:26px; background:radial-gradient(120% 90% at 50% 0%, #1c2836, #0b1016); } .sc-shelf a, .sc-shelf span { display:block; height:76%; } .sc-shelf img { height:100%; width:auto; border-radius:3px; transition:transform .35s ease; box-shadow:0 10px 26px rgba(0,0,0,.6); } .sc-shelf > :first-child img { transform:rotate(-4deg); } .sc-shelf > :last-child img { transform:rotate(4deg); } .scard:hover .sc-shelf > :first-child img { transform:rotate(-6deg) translateY(-5px); } .scard:hover .sc-shelf > :last-child img { transform:rotate(6deg) translateY(-5px); } /* a card that is a panel rather than one big link (Books has two destinations) */ .scard.is-panel:hover { transform:none; border-color:var(--sc-rule); box-shadow:0 2px 4px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.42); } .sc-links { margin-top:auto; display:flex; flex-direction:column; gap:9px; } .sc-links a { display:flex; align-items:baseline; justify-content:space-between; gap:12px; text-decoration:none; font-weight:700; font-size:1rem; color:var(--sc-head); border:1px solid var(--sc-rule); border-radius:9px; padding:11px 15px; transition:.16s; } .sc-links a em { font-style:normal; font-weight:500; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sc-accent); flex:none; } .sc-links a:hover { border-color:var(--sc-accent); background:color-mix(in srgb, var(--sc-accent) 10%, transparent); } /* Allen band: an avatar on a matrix field, the same treatment his own page uses. A landscape strip cannot hold a face from a portrait source; do not try. */ .sc-portrait { position:absolute; inset:0; display:flex; align-items:center; gap:22px; padding:0 26px; background:radial-gradient(90% 140% at 20% 50%, #0a2116, #04070a 70%); } .sc-portrait > img { position:static; flex:none; width:132px; height:132px; object-fit:cover; border-radius:10px; box-shadow:0 0 0 1px #18f07a, 0 0 30px rgba(24,240,122,.34); filter:saturate(.6) contrast(1.06); } .sc-portrait .mono { display:flex; flex-direction:column; gap:4px; font-family:"Share Tech Mono", monospace; font-size:.82rem; color:#3f8f65; } .sc-portrait .mono span:nth-child(2) { color:#9dffc8; } .scard[data-dest="author"] .art::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(24,240,122,.10) 0 1px, transparent 1px 3px); } /* Newsletter band: the seal, centred on wood */ .sc-seal { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:22px; background:radial-gradient(110% 130% at 50% -20%, rgba(202,161,74,.20), transparent 62%), #1d150d; } .sc-seal img { position:static !important; width:auto !important; height:104px !important; object-fit:contain !important; filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)); } /* ============================================================ BAKES — HEARTH (theme-hearth) Flour, kraft paper and crust. The only LIGHT theme on the site, because the photographs are warm and food wants daylight. ============================================================ */ body.theme-hearth { --bg:#f6efe3; --ink:#2b211a; --muted:#6d5f52; --rule:#e2d5c1; --accent:#a8571f; --accent-2:#c9722f; --accent-ink:#fffaf1; --card:#fffaf2; --shadow: 0 1px 2px rgba(74,52,32,.06), 0 12px 34px rgba(74,52,32,.10); background:#f6efe3; background-image: /* paper tooth */ repeating-linear-gradient(37deg, rgba(120,90,60,.020) 0 1px, transparent 1px 3px), repeating-linear-gradient(-53deg, rgba(120,90,60,.014) 0 1px, transparent 1px 4px), radial-gradient(120% 60% at 50% -10%, rgba(200,140,70,.14), transparent 60%); background-attachment: fixed; } body.theme-hearth .site-header { background:color-mix(in srgb, #f6efe3 90%, transparent); border-bottom-color:#e2d5c1; } body.theme-hearth .brand { color:#2b211a; } body.theme-hearth .nav a { color:#43342a; } body.theme-hearth h1, body.theme-hearth h2, body.theme-hearth h3 { color:#241b15; } body.theme-hearth .kicker { color:var(--accent); } body.theme-hearth a { color:var(--accent); } body.theme-hearth .site-footer { border-top-color:#e2d5c1; } /* full-bleed hero photograph with the title laid over it */ .hearth-hero { position:relative; margin:0; overflow:hidden; height:clamp(300px, 46vw, 520px); background:#2b211a; } .hearth-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; } .hearth-hero .veil { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(28,18,10,.30) 0%, rgba(28,18,10,.06) 34%, rgba(28,18,10,.55) 68%, rgba(28,18,10,.88) 100%); } .hearth-hero .inner { position:absolute; z-index:2; inset:auto 0 0 0; padding:0 24px 30px; max-width:var(--maxw); margin:0 auto; } /* These must out-specify body.theme-hearth h1, which is dark on purpose everywhere else. */ body.theme-hearth .hearth-hero .kicker { color:#f4cf9f; margin:0 0 .4rem; text-shadow:0 1px 10px rgba(0,0,0,.7); } body.theme-hearth .hearth-hero h1 { color:#fffaf2; margin:0; font-size:clamp(2.6rem,7vw,4.4rem); text-shadow:0 2px 22px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6); } /* narrative figures */ .fig { margin:0 0 6px; } .fig img { width:100%; height:auto; border-radius:10px; box-shadow:var(--shadow); display:block; } .fig figcaption { font-size:.82rem; color:var(--muted); margin:.6rem 2px 0; line-height:1.5; } .fig.tall img { max-height:640px; object-fit:cover; } /* archival photo credit, and the signoff line under a story */ .fig figcaption .credit { opacity:.62; font-style:italic; } .signoff { margin-top:1.4em; font-size:1.05rem; } /* alternating story rows: text one side, picture the other */ .story { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; margin:52px 0; } .story.flip .story-text { order:2; } .story h2 { margin-top:0; } .story p:last-child { margin-bottom:0; } @media (max-width:820px){ .story { grid-template-columns:1fr; gap:24px; margin:38px 0; } .story.flip .story-text { order:0; } } /* the six pillars of real bread */ .pillars { list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; } .pillars li { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:15px 17px; font-size:.95rem; line-height:1.5; box-shadow:0 1px 2px rgba(74,52,32,.05); } .pillars li b { display:block; font-family:var(--serif); font-size:1.02rem; margin-bottom:.2rem; color:var(--accent); } /* trade-off list from the blog: what industry gained, what it cost */ .tradeoffs { margin:20px 0 0; } .tradeoff { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:10px; overflow:hidden; margin:0 0 10px; background:var(--card); } .tradeoff div { padding:16px 19px; font-size:1.02rem; line-height:1.55; } .tradeoff .gain { border-right:1px solid var(--rule); color:#4a3c31; font-weight:600; } .tradeoff .cost { background:#fdf3e6; } .tradeoff .cost b { color:var(--accent); } @media (max-width:640px){ .tradeoff { grid-template-columns:1fr; } .tradeoff .gain { border-right:0; border-bottom:1px solid var(--rule); } } /* pull quote */ .pull { font-family:var(--serif); font-size:clamp(1.3rem,3vw,1.85rem); line-height:1.32; color:#3a2b20; border-left:4px solid var(--accent); padding:2px 0 2px 22px; margin:38px 0; } .pull cite { display:block; font-family:var(--sans); font-size:.8rem; font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:.9rem; } /* the teachers */ .teachers { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin:26px 0 0; } .teacher { background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:18px 20px 20px; box-shadow:0 1px 2px rgba(74,52,32,.05); } .teacher h3 { margin:0 0 .15rem; font-size:1.1rem; } .teacher .role { font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:0 0 .6rem; } .teacher p { font-size:.92rem; color:var(--muted); margin:0 0 .8rem; } .teacher a { font-size:.9rem; font-weight:600; } .teacher .bk { display:block; margin-top:.25rem; } /* photo strip */ .strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:28px 0; } .strip .fig img { aspect-ratio:4/3; object-fit:cover; } /* ============================================================ RACHEL — GOTH (theme-goth) ============================================================ */ body.theme-goth { --bg:#0c0a0d; --ink:#e7e2e6; --muted:#9a8f97; --rule:#2a2230; --accent:#b23048; --accent-2:#d98a99; --accent-ink:#f3eef0; --card:#15111a; background:#0c0a0d; background-image: radial-gradient(120% 70% at 50% -12%, rgba(178,48,72,.20), transparent 55%), radial-gradient(120% 120% at 50% 45%, transparent 52%, rgba(0,0,0,.65)); background-attachment: fixed; } body.theme-goth h1 { font-family:"Pirata One", "Cinzel", var(--serif); font-weight:400; letter-spacing:.015em; line-height:1.04; } body.theme-goth .hero h1 { font-size: clamp(3rem, 8vw, 5.2rem); text-shadow:0 2px 26px rgba(178,48,72,.45); } body.theme-goth h2, body.theme-goth h3 { font-family:"Cinzel", var(--serif); letter-spacing:.045em; font-weight:600; } body.theme-goth .kicker { color:var(--accent-2); letter-spacing:.34em; } body.theme-goth a { color:var(--accent-2); } body.theme-goth .lede { color:#bfb2bb; font-style:italic; } .fleuron { text-align:center; color:var(--accent); font-size:1.5rem; letter-spacing:.5em; margin:.2rem 0 1.4rem; opacity:.9; } body.theme-goth .avatar { border-radius:50%; background:linear-gradient(160deg,#1a0f14,#2a1620); box-shadow: 0 0 0 2px #211a26, 0 0 0 4px var(--accent), 0 0 44px rgba(178,48,72,.4); filter:grayscale(.35) contrast(1.05); } body.theme-goth .btn.solid { background:linear-gradient(180deg,#c9415a,#8d2336); border-color:#8d2336; color:#f6eef0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.5); } body.theme-goth .signup, body.theme-goth .card { border-color:#332838; } /* black-stone trim band — polished slab with bevelled edges */ .stone-trim { height:30px; margin:0; pointer-events:none; border-radius:2px; background: linear-gradient(180deg, rgba(214,206,224,.14), transparent 26%), /* top bevel highlight */ linear-gradient(0deg, rgba(0,0,0,.65), transparent 42%), /* bottom shadow */ repeating-linear-gradient(116deg, rgba(150,142,162,.05) 0 2px, transparent 2px 11px), /* faint veins */ radial-gradient(140% 180% at 28% -20%, #2c2832 0, #18151d 55%, #0a090d 100%); /* mottled stone */ border-top:1px solid rgba(196,188,208,.20); border-bottom:1px solid rgba(0,0,0,.75); box-shadow: inset 0 2px 7px rgba(255,255,255,.05), inset 0 -7px 14px rgba(0,0,0,.55); } .stone-trim.divider { margin:42px 0 8px; height:22px; } /* "Books I Love" favourites */ .faves .card .cover-link { display:block; text-decoration:none; } .faves .cover { aspect-ratio:2/3; transition:.18s; position:relative; overflow:hidden; } .faves .cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; } .faves .card:hover .cover { filter:brightness(1.08); } .faves .card .by { margin:.1em 0 .6em; } .faves .blurb { font-size:.92rem; } .faves .gr { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; } /* Toil & Craft newsletter feature (homepage) */ .newsletter-card { display:flex; flex-direction:row; align-items:center; gap:24px; padding:20px 26px; } .newsletter-card .nl-seal { flex:none; } .newsletter-card .nl-seal img { display:block; width:118px; height:118px; } .newsletter-card .body { padding:0; } .newsletter-card .body p { max-width:60ch; } .newsletter-card .btn.solid { margin-top:.9rem; } @media (max-width:560px){ .newsletter-card { flex-direction:column; text-align:center; gap:14px; padding:22px 20px; } .newsletter-card .body p { margin-left:auto; margin-right:auto; } } /* Toil & Craft newsletter page — post cards */ .nl-posts { margin-top: 1rem; } a.nl-post { display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--rule); border-radius:14px; padding:18px 22px 20px; margin:0 0 14px; transition:transform .16s, border-color .16s, box-shadow .16s; } a.nl-post:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 45%, var(--rule)); box-shadow:var(--shadow); } .nl-post .date { font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .35rem; } .nl-post h3 { margin:.1rem 0 .45rem; } .nl-post .muted { margin:0 0 .7rem; } .nl-more { color:var(--accent); font-weight:600; font-size:.9rem; } .newsletter-card .btn.solid { display:inline-block; }