/* * Sulfur — the yellow.vision palette. * An illuminated-manuscript triad tuned dark and occult: gold leaf on bitumen. * * Two registers, switched by [data-palette] on : * • Illuminated (default, :root) — the canonical gold-on-bitumen. * • Carcosa ([data-palette="carcosa"]) — a sallow, foxed shadow variant * for horror / apocalyptic contexts. * * Raw palette colours are exposed as named tokens; semantic tokens * (--bg, --text, --accent, …) map onto them and are what you should style with. */ /* ── Illuminated (canonical) ─────────────────────────────────────────── */ :root { /* raw palette */ --sulfur-gold: #E9B233; /* primary; gold leaf, not highlighter */ --oxblood: #6E1F1A; /* accents */ --bitumen: #15110E; /* baseline dark ground */ --ash: #3A332C; /* hairlines, borders */ --bone: #D8CFB8; /* body text on dark */ --vellum: #E7DCC2; /* light surfaces / headings */ /* semantic tokens */ --bg: var(--bitumen); --bg-raised: #1b1610; --bg-sunken: #100d0a; --text: var(--bone); --text-dim: color-mix(in srgb, var(--bone) 65%, transparent); --heading: var(--vellum); --accent: var(--sulfur-gold); --accent-2: var(--oxblood); --rule: var(--ash); /* glow used on the gold so it reads as illumination, not flat ink */ --accent-glow: 0 0 24px -6px color-mix(in srgb, var(--sulfur-gold) 55%, transparent); --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Spectral", Georgia, serif; } /* ── Carcosa (shadow sub-palette) ────────────────────────────────────── */ [data-palette="carcosa"] { /* raw palette */ --sallow-gold: #C9BB45; --foxing-sepia: #8A6A38; --pallid-verdigris: #5F6B53; --carcosa-ground: #14150F; --mold-ash: #36382B; --sour-vellum: #CBC09A; /* semantic tokens remapped onto the shadow palette */ --bg: var(--carcosa-ground); --bg-raised: #1b1c14; --bg-sunken: #0e0f0a; --text: var(--sour-vellum); --text-dim: color-mix(in srgb, var(--sour-vellum) 60%, transparent); --heading: var(--sour-vellum); --accent: var(--sallow-gold); --accent-2: var(--foxing-sepia); --rule: var(--mold-ash); --accent-glow: 0 0 22px -8px color-mix(in srgb, var(--sallow-gold) 45%, transparent); } /* ── Base element styling on the active palette ──────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent) 12%, var(--bg)) 0%, var(--bg) 55%) fixed, var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .4s ease; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; color: var(--heading); margin: 0 0 .4em; } a { color: var(--accent); } hr, .rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7; margin: 2.5rem 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { transition: none; } } /* * yellow.vision homepage styles. * Palette + base typography come from @kung-fu/sulfur (bundled ahead of this * file). Style only against sulfur's tokens — never hard-code the palette here. * Page stays in the Illuminated register (the canonical default); Carcosa is * reserved for special issues only. */ .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; } .kicker { font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--accent); opacity: .85; text-indent: .4em; } a { text-decoration: none; } .gold { color: var(--accent); } /* ── Header / nav ────────────────────────────────────────────────────── */ header.site { padding: 26px 0; border-bottom: 1px solid var(--rule); } .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 13px; } .brand .mark { width: 30px; height: 30px; display: block; } .brand .name { font-family: var(--font-display); font-size: 23px; font-weight: 600; color: var(--accent); letter-spacing: .01em; } .brand .name .dot { color: var(--accent-2); } .brand .name .tld { color: var(--vellum); font-style: italic; font-weight: 400; } abbr.name { text-decoration: none; cursor: help; } nav.menu { display: flex; gap: 26px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; } nav.menu a { color: var(--text); opacity: .75; transition: opacity .2s, color .2s; } nav.menu a:hover { opacity: 1; color: var(--accent); } @media (max-width: 620px) { nav.menu { display: none; } } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { text-align: center; padding: 88px 0 76px; } .hero .mark { width: 104px; height: 104px; margin: 0 auto 30px; display: block; } .hero h1 { font-size: clamp(42px, 9vw, 86px); margin: 14px auto 0; max-width: 12ch; } .hero h1 em { font-style: italic; color: var(--accent); } .hero p { max-width: 54ch; margin: 26px auto 0; font-size: clamp(16px, 2.4vw, 19px); color: var(--text); opacity: .9; } .seal { width: 62px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); margin: 40px auto 0; opacity: .8; } /* ── Reveal-on-load (respects reduced-motion via the reset below) ─────── */ .reveal { opacity: 0; transform: translateY(14px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; } .d1 { animation-delay: .05s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .35s; } .d4 { animation-delay: .5s; } @keyframes rise { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; transform: none; } } /* ── Feature sections ────────────────────────────────────────────────── */ section.feature { padding: 72px 0; border-top: 1px solid var(--rule); } .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; gap: 30px; } } .feature h2 { font-size: clamp(32px, 5vw, 52px); margin-top: 10px; } .feature p { margin-top: 18px; max-width: 46ch; color: var(--text); opacity: .88; font-size: 16.5px; } .more { display: inline-block; margin-top: 26px; font-family: var(--font-body); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent-2); padding-bottom: 4px; transition: border-color .2s; } .more:hover { border-color: var(--accent); } /* zine cover */ .cover { aspect-ratio: 3/4; border: 1px solid var(--rule); background: linear-gradient(155deg, var(--bg-raised), var(--bg-sunken)); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); } .cover .mark { width: 46%; height: 46%; opacity: .92; } .cover .tag { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: var(--text); opacity: .5; } /* audio card */ .audio-card { background: linear-gradient(155deg, var(--bg-raised), var(--bg-sunken)); border: 1px solid var(--rule); padding: 38px; display: flex; align-items: center; gap: 26px; } .play { flex: 0 0 auto; width: 74px; height: 74px; border: 1px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s; } .play:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .play svg { width: 24px; height: 24px; } .audio-card .meta .ep { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); opacity: .8; } .audio-card .meta h3 { font-size: 27px; margin-top: 7px; } .audio-card .meta .sub { font-size: 14px; opacity: .7; margin-top: 6px; } /* ── Subscribe ───────────────────────────────────────────────────────── */ .subscribe { padding: 78px 0; border-top: 1px solid var(--rule); text-align: center; } .subscribe h2 { font-size: clamp(28px, 4.5vw, 42px); } .subscribe p { opacity: .85; margin: 14px auto 0; max-width: 42ch; } .field { display: flex; gap: 10px; max-width: 420px; margin: 30px auto 0; } .field input { flex: 1; background: var(--bg-sunken); border: 1px solid var(--rule); color: var(--text); padding: 13px 15px; font-family: var(--font-body); font-size: 15px; border-radius: 2px; } .field input::placeholder { color: var(--text); opacity: .4; } .field input:focus { outline: none; border-color: var(--accent); } .field button { background: var(--accent); color: var(--bg); border: none; padding: 0 22px; font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; cursor: pointer; transition: filter .2s; } .field button:hover { filter: brightness(1.08); } /* ── Colophon (name gloss) ───────────────────────────────────────────── */ .colophon { max-width: 54ch; margin: 0 auto; padding: 56px 0 6px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--text); opacity: .75; } .colophon .term { font-style: normal; color: var(--accent); letter-spacing: .02em; } /* ── Footer ──────────────────────────────────────────────────────────── */ footer.site { border-top: 1px solid var(--rule); padding: 40px 0; } .foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .foot .brand .name { font-size: 18px; } .foot .brand .mark { width: 22px; height: 22px; } .foot small { font-size: 12px; opacity: .5; letter-spacing: .04em; color: var(--text); }