/* ============================================================ 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; --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(--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(--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; } @media (max-width:640px){ .nav a { margin-left: 1rem; font-size:.95rem; } .site-header .wrap{ height:62px; } .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(54px, 9vw, 116px) 0 40px; } .studio-hero .seal { width: clamp(96px, 16vw, 132px); height:auto; margin:0 auto 22px; 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:#5f8f76; --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; } /* ============================================================ 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; }