/* ========================================================================== Tria Wen — All of Us Wildflowers Production stylesheet, transcribed from the Claude Design handoff. Dark "book" half, light "author" half; tokens swap on [data-palette]. ========================================================================== */ :root { --ink: #EAECF4; --muted: #9AA3BC; --accent: #E3C27C; --accent-deep: #D5AC5E; --card: rgba(255, 255, 255, 0.04); --line: rgba(255, 255, 255, 0.14); --bg1: #080C1B; --bg2: #091020; --bg3: #0A162F; --nav-bg: rgba(8, 12, 27, 0.75); --gutter: clamp(20px, 5vw, 48px); /* Large-CTA height. 49px is what the handoff's .btn-gold works out to (15px of padding around 13px Jost); the hero's newsletter pill is pinned to the same number so the two match side by side and when they wrap. */ --cta-h: 49px; } [data-palette="light"] { --ink: #1D2536; --muted: #5C6579; --accent: #A87E2C; --accent-deep: #8F681F; --card: rgba(255, 255, 255, 0.55); --line: rgba(25, 35, 60, 0.14); --bg1: #EDEEF0; --bg2: #E6E9EC; --bg3: #DFE3E9; --nav-bg: rgba(237, 238, 240, 0.75); } /* ---- base ---------------------------------------------------------------- */ html { scroll-behavior: smooth; /* Opaque base under everything. Mobile browsers can leave a strip at the leading edge of a scroll unpainted for a frame or two (the collapsing toolbar resizes the visual viewport as you go), and with a transparent root that strip flashes the canvas white - which is what was peeking in at the bottom of the dark half. This is the gradient's own top colour, so it stays invisible wherever it does show. */ background-color: var(--bg1); } /* `clip`, not `hidden`: hidden on html makes it a scroll container and kills vertical scrolling along with every scroll-driven effect. */ html, body { margin: 0; padding: 0; overflow-x: clip; } *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Source Serif 4', Georgia, serif; min-height: 100vh; position: relative; color: var(--ink); /* The page gradient lives on the fixed .bg-bokeh layer rather than on a fixed background-attachment here - see the note on .bg-bokeh. */ -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } ::selection { background: rgba(227, 194, 124, 0.35); } img { max-width: 100%; } input::placeholder { color: var(--muted); opacity: 1; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .pill-form:focus-within, .connect-form:focus-within { border-color: var(--accent); } .bg-bokeh { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* The design calls for a viewport-anchored page gradient (handoff: "full-page background ... background-attachment: fixed"). It is carried here instead of on , because a fixed background attachment paints into a viewport-sized layer that mobile Safari and Chrome fail to repaint when the toolbar collapses - the white strip that showed up at the bottom of the dark half mid-scroll. This element is already position: fixed, so it gives the same picture as a properly composited layer. */ background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%); } .page { position: relative; z-index: 1; } /* ---- tooltips ------------------------------------------------------------ */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-2px); background: #10182C; color: #EAECF4; font-family: Jost, sans-serif; font-weight: 300; font-size: 12px; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.12); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; } [data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- shared type ----------------------------------------------------------- */ .h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(34px, 6vw, 52px); letter-spacing: 0.03em; line-height: 1; text-align: center; margin: 0; color: var(--ink); } .h2--praise { letter-spacing: 0.02em; line-height: normal; margin: 0 0 8px; } .h2--spaced { margin: 0 0 clamp(40px, 6vw, 56px); } .h2--connect { margin: 0 0 18px; } /* Gold CTA: literal colours so it stays gold in both halves. */ .btn-gold, .btn-gold-sm, .menu-cta, .nav-cta { font-family: Jost, sans-serif; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: #0A1122; background: #E3C27C; border-radius: 999px; white-space: nowrap; text-align: center; } .btn-gold { font-size: 13px; /* Height is set rather than derived from vertical padding so it cannot drift away from the newsletter pill while Jost is still loading. Same 49px the handoff's 15px padding produces. */ height: var(--cta-h); padding: 0 clamp(28px, 6vw, 40px); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .btn-gold:hover, .btn-gold-sm:hover, .menu-cta:hover, .nav-cta:hover { text-decoration: none; filter: brightness(1.05); color: #0A1122; } /* Preorder is not open yet: same pill, drained to a faint gold wash so it keeps its identity but reads as unavailable. Not focusable, not clickable. */ .is-disabled, .is-disabled:hover, .nav-cta.is-disabled.is-visible { background: rgba(227, 194, 124, 0.2); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(227, 194, 124, 0.42); filter: none; cursor: default; pointer-events: none; } /* ---- nav ----------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px 36px; padding: 14px clamp(18px, 4vw, 32px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom: 1px solid var(--line); } .wordmark { font-family: Jost, sans-serif; font-weight: 400; font-size: 19px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); } .wordmark:hover { color: var(--ink); text-decoration: none; } .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 28px; font-family: Jost, sans-serif; font-weight: 300; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; transition: transform .5s cubic-bezier(.22, 1, .36, 1); } [data-navlink] { color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; } [data-navlink]:hover { color: var(--accent); text-decoration: none; } [data-navlink].is-active { color: var(--accent); border-bottom-color: var(--accent); } /* Pinned outside the row's flow so it never displaces the links while hidden. */ .nav-cta { position: absolute; right: 100%; top: 50%; margin-right: 28px; font-size: 12px; letter-spacing: 0.18em; padding: 9px 22px; opacity: 0; transform: translateY(calc(-50% - 8px)); pointer-events: none; transition: opacity .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1); } .nav-cta.is-visible { opacity: 1; transform: translateY(-50%); pointer-events: auto; } .nav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; } .icon-link { color: var(--ink); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; } .icon-link:hover { color: var(--accent); text-decoration: none; } .menu-btn { display: none; cursor: pointer; margin-left: 4px; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: none; padding: 0; color: var(--ink); } .menu-btn span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .25s ease; } .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); } .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); } .menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; gap: 4px; padding: 14px clamp(18px, 4vw, 32px) 22px; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); font-family: Jost, sans-serif; font-weight: 300; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; } .menu-panel[hidden] { display: none; } .menu-panel a[data-navlink] { padding: 12px 0; border-bottom: 1px solid var(--line); } .menu-panel a[data-navlink]:last-of-type { border-bottom: none; } .menu-cta { margin-top: 14px; align-self: flex-start; font-size: 13px; padding: 14px 30px; } @media (max-width: 1039px) { .nav-links { display: none; } .menu-btn { display: flex; } } /* ---- hero ---------------------------------------------------------------- */ .hero { scroll-margin-top: 90px; max-width: 1140px; margin: 0 auto; padding: clamp(52px, 9vw, 100px) var(--gutter) 40px; } .hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(36px, 6vw, 56px); } .hero-text { flex: 1 1 440px; min-width: 320px; max-width: 620px; position: relative; z-index: 1; padding: 24px 0; } .title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(46px, 10.5vw, 92px); line-height: 1.02; margin: 0 0 18px; letter-spacing: 0.01em; text-wrap: balance; } .subtitle { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: clamp(20px, 3.4vw, 26px); color: var(--muted); margin: 0 0 32px; letter-spacing: 0.02em; } .pitch { font-size: clamp(18px, 2.4vw, 21px); line-height: 1.65; color: var(--ink); margin: 0; max-width: 460px; text-wrap: pretty; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px; margin-top: 36px; } .hero-news { flex: 1 1 260px; width: 290px; max-width: 100%; } .pill-form { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 5px; min-height: var(--cta-h); transition: border-color .2s ease; } .pill-form input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; color: var(--ink); font-family: 'Source Serif 4', Georgia, serif; font-size: 14px; /* 1px border + 5px padding either side, so the pill lands on --cta-h exactly */ height: calc(var(--cta-h) - 12px); padding: 0 0 0 16px; line-height: calc(var(--cta-h) - 12px); } .pill-form button { cursor: pointer; flex: 0 0 auto; width: calc(var(--cta-h) - 12px); height: calc(var(--cta-h) - 12px); border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; transition: color .2s ease, border-color .2s ease, background .2s ease; } /* The CTA lights up as you start typing, and on its own hover. */ .pill-form.is-focused button, .pill-form button:hover { color: #0A1122; background: #E3C27C; border-color: #E3C27C; } /* The 3D cover replaces the flat floating image. The column sizes to the book; .cover-float is the positioning box for the bokeh drifting in front (the design's vertical bob was dropped — the book's own motion carries it). */ .cover-col { flex: 0 0 auto; position: relative; z-index: 2; } .cover-float { position: relative; } .cover-col .bk-stage { --bk-w: clamp(300px, 34vw, 430px); } .cover-bokeh { position: absolute; left: -50%; top: -42%; width: 200%; height: 184%; z-index: 3; pointer-events: none; mix-blend-mode: screen; } .hero-desc { max-width: 660px; margin: clamp(48px, 8vw, 72px) auto 0; font-size: 18px; line-height: 1.75; color: var(--muted); display: flex; flex-direction: column; gap: 18px; text-wrap: pretty; } .hero-desc p { margin: 0; } /* ---- advance praise ------------------------------------------------------- */ .praise { scroll-margin-top: 90px; max-width: 1200px; margin: 0 auto; padding: 60px var(--gutter) 0; position: relative; } .orb-row { display: flex; justify-content: flex-start; padding: 30px 0 0; } .orb-row--second { justify-content: flex-end; padding: 0 0 20px; margin-top: -80px; } .orb { max-width: 100%; aspect-ratio: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .orb--lg { width: 760px; padding: clamp(34px, 9vw, 105px); } .orb--sm { width: 540px; padding: clamp(34px, 9vw, 100px); } .orb .quote { font-size: 18px; line-height: 1.6; margin: 0 0 18px; text-wrap: pretty; color: var(--ink); } .orb .quote--loose { line-height: 1.65; } .orb .attrib { font-family: Jost, sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.04em; color: var(--accent); margin: 0; } .orb .attrib em { text-transform: none; letter-spacing: 0.04em; } @media (max-width: 1039px) { /* a square box plus 105px of padding crushed the long quote into a sliver */ .orb { aspect-ratio: auto; } .orb-row--second { margin-top: 0; } } /* ---- bokeh transition band ------------------------------------------------ */ /* The cluster's big orb is sized off the viewport width (15-22%), so past about 1200px it stands taller than the 300px band and the band's own box sliced it flat along the top. The canvas is anchored to the band's bottom and grown upward by site.js to whatever the largest orb needs, and painted behind the page content (z-index -1) so the glow never washes over the praise copy. The bottom stays covered by the opaque light half - that clip is the intended dark-to-light seam. */ .band { position: relative; height: 300px; } .band canvas { position: absolute; left: 0; bottom: 0; /* width must be explicit: a canvas is a replaced element, so left/right alone do not stretch it - it would fall back to its backing store's aspect ratio. */ width: 100%; height: 100%; z-index: -1; pointer-events: none; mix-blend-mode: screen; } /* ---- light half ------------------------------------------------------------ */ .light { background: linear-gradient(180deg, #EDEEF0 0%, #E6E9EC 45%, #DFE3E9 100%); color: var(--ink); position: relative; } .seam { position: absolute; left: 0; right: 0; top: 0; height: 110px; background: linear-gradient(180deg, rgba(10, 22, 47, 0.28) 0%, rgba(10, 22, 47, 0) 100%); pointer-events: none; } .section { scroll-margin-top: 90px; margin: 0 auto; position: relative; } .seed-wrap { display: flex; justify-content: center; } .seed { display: block; width: 88px; opacity: 0.55; will-change: transform; } /* About */ .about { max-width: 1160px; padding: 0 var(--gutter) 90px; } .about-head { padding: clamp(72px, 12vw, 116px) 0 clamp(76px, 13vw, 140px); } .about-head .seed-wrap { margin: 0 0 clamp(64px, 11vw, 116px); } .about-row { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 56px); align-items: start; } .about-photo { flex: 0 1 380px; min-width: 260px; } .about-photo img { width: 100%; height: auto; border-radius: 6px; display: block; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45); } .credit { font-family: Jost, sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 12px 0 0; } .about-text { font-size: 18px; line-height: 1.75; color: var(--muted); display: flex; flex-direction: column; gap: 18px; flex: 1 1 380px; max-width: 680px; text-wrap: pretty; } .about-text p { margin: 0; } .about-text p:first-child { color: var(--ink); } .about-text strong { font-weight: 500; } /* Awards */ .awards { max-width: 1160px; padding: 0 var(--gutter) 70px; } .seed-wrap--awards { margin: 20px 0 clamp(62px, 11vw, 110px); } .awards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 22px clamp(24px, 4vw, 40px); font-size: 18px; line-height: 1.5; color: var(--muted); } .awards-grid > div { border-top: 1px solid var(--line); padding-top: 12px; } .awards-grid span { color: var(--ink); } /* Writing */ .writing { max-width: 1160px; padding: 0 var(--gutter) 70px; } .seed-wrap--writing { margin: 40px 0 clamp(62px, 11vw, 110px); } .writing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 36px clamp(32px, 5vw, 56px); } .card { display: block; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); text-decoration: none; transition: color .2s ease, border-color .2s ease; } .card:hover { color: var(--ink); border-top-color: var(--accent); text-decoration: none; } .card .pub { font-family: Jost, sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .card .pub-note { font-family: Jost, sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: 12px; } .card p { font-style: italic; font-size: 18px; line-height: 1.6; color: inherit; margin: 12px 0 0; text-wrap: pretty; } /* Connect */ .connect { max-width: 860px; padding: 0 var(--gutter) 60px; text-align: center; } .seed-wrap--connect { margin: 20px 0 clamp(78px, 14vw, 145px); } .lede { font-size: 18px; line-height: 1.7; color: var(--muted); max-width: 540px; margin: 0 auto 32px; text-wrap: pretty; } .connect-row { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 48px; } .connect-form { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); max-width: 100%; flex: 0 1 auto; transition: border-color .2s ease; } .connect-form input { border: none; outline: none; background: transparent; color: var(--ink); font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; padding: 0 12px 0 24px; flex: 1 1 140px; min-width: 0; width: 210px; } .btn-gold-sm { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; border: none; padding: 15px clamp(20px, 5vw, 28px); flex: 0 0 auto; } .btn-outline { display: inline-flex; align-items: center; gap: 10px; font-family: Jost, sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); padding: 15px clamp(24px, 6vw, 34px); border-radius: 999px; transition: color .2s ease, border-color .2s ease; } .btn-outline:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); } .contact { display: flex; justify-content: center; gap: clamp(28px, 6vw, 64px); flex-wrap: wrap; font-size: 16px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 36px; } .contact p { margin: 0; } .contact .label { font-family: Jost, sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--ink); } /* Footer */ .footer { text-align: center; padding: 20px 48px 44px; font-family: Jost, sans-serif; font-weight: 300; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---- reduced motion --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav-links, .nav-cta, [data-tip]::after, .menu-btn span { transition: none; } }