/* ========================================================================== PASHAADAM.COM — "Neon Noir" Palette is strictly white / red / black. Per-book accents are set by a [data-book] attribute on and are drawn from that book's cover art. ========================================================================== */ /* --------------------------------------------------------------- 1. RESET */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[role="list"], ol[role="list"] { list-style: none; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } /* ---------------------------------------------------------- 2. TOKENS */ :root { color-scheme: light; /* brand */ --red: #ED1B24; --red-ink: #C50F18; /* passes on white */ --red-glow: #FF3B42; /* brighter, for black */ /* ground + ink */ --bg: #FFFFFF; --bg-2: #F2F2F2; --fg: #000000; --fg-70: rgba(0,0,0,.70); --fg-55: rgba(0,0,0,.55); --fg-38: rgba(0,0,0,.38); --rule: rgba(0,0,0,.16); --rule-soft: rgba(0,0,0,.08); --scrim: rgba(255,255,255,.86); /* accent — overridden per book. --accent : hairlines, rules, small graphic marks --accent-ink : accent-colored TEXT on the page ground --accent-fill : accent used as a solid BACKGROUND block --on-accent : text sitting on --accent-fill */ --accent: var(--red); --accent-ink: var(--red-ink); --accent-fill: #DE1520; --on-accent: #FFFFFF; /* type */ --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --f-ui: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --f-mark: "Jost", "Futura", "Century Gothic", sans-serif; --f-read: "Newsreader", Georgia, "Times New Roman", serif; /* rhythm */ --gut: clamp(1.25rem, 4vw, 2.5rem); --pad: clamp(1.25rem, 5vw, 4.5rem); --maxw: 1440px; --measure: 66ch; --section: clamp(4.5rem, 11vw, 10rem); /* motion */ --ease: cubic-bezier(.16,.84,.28,1); --dur: .5s; } html[data-theme="dark"], :root:not([data-theme="light"]) { /* placeholder so the cascade below is predictable; real values in the two blocks */ } /* dark, chosen explicitly */ html[data-theme="dark"] { color-scheme: dark; --bg: #000000; --bg-2: #0C0C0C; --fg: #FFFFFF; --fg-70: rgba(255,255,255,.70); --fg-55: rgba(255,255,255,.55); --fg-38: rgba(255,255,255,.38); --rule: rgba(255,255,255,.20); --rule-soft: rgba(255,255,255,.10); --scrim: rgba(0,0,0,.86); --accent-ink: var(--red-glow); --accent: var(--red-glow); } /* dark, by system preference (unless the visitor forced light) */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; --bg: #000000; --bg-2: #0C0C0C; --fg: #FFFFFF; --fg-70: rgba(255,255,255,.70); --fg-55: rgba(255,255,255,.55); --fg-38: rgba(255,255,255,.38); --rule: rgba(255,255,255,.20); --rule-soft: rgba(255,255,255,.10); --scrim: rgba(0,0,0,.86); --accent-ink: var(--red-glow); --accent: var(--red-glow); } } /* ---- per-book accents, sampled from the cover art ---------------------- American Asshole is the one book with a non-red accent: the acid green of its own cover. On white it has to darken to stay legible; on black it goes full brightness and carries BLACK text on the solid blocks. */ body[data-book="aa"] { --accent: #4C8F1C; --accent-ink: #3F7A14; --accent-fill: #3F7A14; --on-accent: #FFFFFF; } body[data-book="ksmc"] { --accent: var(--red); --accent-ink: var(--red-ink); --accent-fill: #DE1520; } body[data-book="coa"] { --accent: #D40606; --accent-ink: #B70000; --accent-fill: #C90505; } body[data-book="alals"] { --accent: var(--red); --accent-ink: var(--red-ink); --accent-fill: #DE1520; } html[data-theme="dark"] body[data-book="aa"] { --accent: #73CB30; --accent-ink: #7FD93A; --accent-fill: #73CB30; --on-accent: #000000; } html[data-theme="dark"] body[data-book="ksmc"] { --accent: #FF3B42; --accent-ink: #FF3B42; --accent-fill: #DE1520; } html[data-theme="dark"] body[data-book="coa"] { --accent: #FF3A2C; --accent-ink: #FF3A2C; --accent-fill: #D51005; } html[data-theme="dark"] body[data-book="alals"] { --accent: #FF3B42; --accent-ink: #FF3B42; --accent-fill: #DE1520; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body[data-book="aa"] { --accent: #73CB30; --accent-ink: #7FD93A; --accent-fill: #73CB30; --on-accent: #000000; } html:not([data-theme="light"]) body[data-book="ksmc"] { --accent: #FF3B42; --accent-ink: #FF3B42; --accent-fill: #DE1520; } html:not([data-theme="light"]) body[data-book="coa"] { --accent: #FF3A2C; --accent-ink: #FF3A2C; --accent-fill: #D51005; } html:not([data-theme="light"]) body[data-book="alals"] { --accent: #FF3B42; --accent-ink: #FF3B42; --accent-fill: #DE1520; } } /* ------------------------------------------------------------ 3. BASE */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { background: var(--bg); color: var(--fg); font-family: var(--f-ui); font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); line-height: 1.6; font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .35s var(--ease), color .35s var(--ease); } ::selection { background: var(--accent-fill); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--fg); color: var(--bg); padding: .75rem 1.25rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; } .skip:focus { left: 0; } /* -------------------------------------------------------- 4. PRIMITIVES */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .wrap--narrow { max-width: 980px; } .wrap--reader { max-width: calc(40rem + 2 * var(--pad)); } .eyebrow { font-family: var(--f-mark); font-size: clamp(.68rem, .62rem + .14vw, .78rem); font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--fg-55); } .eyebrow--accent { color: var(--accent-ink); } .rule { height: 1px; background: var(--rule); border: 0; } .rule--accent { height: 2px; background: var(--accent); border: 0; width: 4.5rem; } /* display type ------------------------------------------------------- */ .d1, .d2, .d3 { font-family: var(--f-display); font-weight: 700; font-stretch: 78%; line-height: .88; letter-spacing: -.015em; text-transform: uppercase; text-wrap: balance; } .d1 { font-size: clamp(2.75rem, 1.2rem + 9.5vw, 9.5rem); } .d2 { font-size: clamp(2rem, 1.1rem + 5vw, 5rem); } .d3 { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.5rem); font-stretch: 84%; line-height: .96; } .d1 em, .d2 em, .d3 em { font-style: normal; color: var(--accent); } .lede { font-family: var(--f-read); font-size: clamp(1.1rem, 1rem + .55vw, 1.5rem); line-height: 1.5; color: var(--fg-70); max-width: 46ch; font-weight: 300; } .prose { font-family: var(--f-read); max-width: var(--measure); } .prose p { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.72; } .prose p + p { margin-top: 1.1em; } .prose a { color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--accent); } .prose a:hover { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); } /* link with a red rule that draws in ---------------------------------- */ .ulink { text-decoration: none; position: relative; display: inline-block; padding-bottom: 2px; } .ulink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .ulink:hover::after, .ulink:focus-visible::after { transform: scaleX(1); } /* buttons ------------------------------------------------------------- */ .btn { --_bg: transparent; --_fg: var(--fg); --_bd: var(--fg); display: inline-flex; align-items: center; gap: .7rem; padding: .95rem 1.6rem; background: var(--_bg); color: var(--_fg); border: 1px solid var(--_bd); font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: color .35s var(--ease), border-color .35s var(--ease); } .btn > * { position: relative; z-index: 1; } .btn::before { content: ""; position: absolute; inset: 0; background: var(--accent-fill); transform: translateY(101%); transition: transform .42s var(--ease); } .btn:hover, .btn:focus-visible { color: var(--on-accent); border-color: var(--accent-fill); } .btn:hover::before, .btn:focus-visible::before { transform: translateY(0); } .btn--solid { --_bg: var(--accent-fill); --_fg: var(--on-accent); --_bd: var(--accent-fill); } .btn--solid::before { background: var(--fg); } .btn--solid:hover { border-color: var(--fg); } .btn--lg { padding: 1.15rem 2.1rem; font-size: .8rem; } .btn .arw { font-size: 1em; transition: transform .35s var(--ease); } .btn:hover .arw { transform: translateX(4px); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } /* ---------------------------------------------------------- 5. HEADER */ .hdr { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--rule-soft); transition: border-color .3s var(--ease), background-color .3s var(--ease); } @supports not (background: color-mix(in srgb, red 50%, transparent)) { .hdr { background: var(--scrim); } } .hdr.is-stuck { border-bottom-color: var(--accent); } .hdr__in { display: flex; align-items: center; gap: var(--gut); min-height: 68px; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .mark { display: block; flex: 0 0 auto; line-height: 0; } .mark img { width: clamp(122px, 15vw, 168px); height: auto; } .m-light { display: block; } .m-dark { display: none; } html[data-theme="dark"] .m-light { display: none; } html[data-theme="dark"] .m-dark { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .m-light { display: none; } html:not([data-theme="light"]) .m-dark { display: block; } } .nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); } .nav a { font-family: var(--f-mark); font-size: .82rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--fg-70); position: relative; padding: .4rem 0; transition: color .3s var(--ease); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav a:hover, .nav a:focus-visible { color: var(--fg); } .nav a:hover::after { transform: scaleX(1); } .nav a[aria-current="page"] { color: var(--fg); } .nav a[aria-current="page"]::after { transform: scaleX(1); } .icons { display: flex; align-items: center; gap: .25rem; margin-left: .35rem; } .ibtn { display: grid; place-items: center; width: 38px; height: 38px; background: none; border: 1px solid transparent; cursor: pointer; color: var(--fg-70); transition: color .3s var(--ease), border-color .3s var(--ease); } .ibtn:hover { color: var(--accent-ink); border-color: var(--rule); } .ibtn svg { width: 17px; height: 17px; } .theme-toggle .ico-moon { display: none; } html[data-theme="dark"] .theme-toggle .ico-moon { display: block; } html[data-theme="dark"] .theme-toggle .ico-sun { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle .ico-moon { display: block; } html:not([data-theme="light"]) .theme-toggle .ico-sun { display: none; } } /* mobile nav */ .burger { display: none; } @media (max-width: 900px) { .burger { display: grid; } .hdr__in > .mark, .hdr__in > .icons { position: relative; z-index: 3; } .icons { margin-left: auto; } .nav { position: fixed; inset: 68px 0 auto 0; z-index: 2; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule); padding: var(--pad) var(--pad) calc(var(--pad) + 1rem); /* closed: hidden AND out of the way, so it can never sit over the bar */ opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .32s var(--ease), transform .38s var(--ease), visibility .38s; max-height: calc(100dvh - 68px); overflow-y: auto; } .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav a { font-size: 1.05rem; letter-spacing: .16em; padding: .85rem 0; width: 100%; border-bottom: 1px solid var(--rule-soft); } .nav a::after { display: none; } } /* ------------------------------------------------------------ 6. HERO */ .hero { padding: clamp(3rem, 8vw, 7rem) 0 clamp(2.5rem, 6vw, 5rem); } .hero__mark { width: min(760px, 100%); } .hero__mark img { width: 100%; height: auto; } .hero__genres { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; margin-top: clamp(1.5rem, 3.5vw, 2.5rem); } .hero__genres span { font-family: var(--f-mark); font-size: clamp(.72rem, .64rem + .2vw, .88rem); font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-55); } .hero__genres i { display: block; width: 5px; height: 5px; background: var(--accent); font-style: normal; } @media (max-width: 620px) { .hero__genres { gap: .35rem 1.15rem; } .hero__genres i { display: none; } } /* big quote hero ------------------------------------------------------ */ .quote-hero { padding-block: clamp(3rem, 8vw, 6.5rem); border-top: 1px solid var(--rule); } .qmark { font-family: var(--f-display); font-weight: 700; font-stretch: 78%; font-size: clamp(3.5rem, 10vw, 8rem); line-height: .6; color: var(--accent); display: block; margin-bottom: -.1em; } .bigquote { font-family: var(--f-display); font-weight: 500; font-stretch: 84%; font-size: clamp(1.75rem, 1rem + 4.6vw, 4.25rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; max-width: 24ch; } .bigquote--wide { max-width: 34ch; } .attrib { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-family: var(--f-mark); font-size: .78rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; } .attrib .src { color: var(--accent-ink); } .attrib .dash { width: 2.5rem; height: 1px; background: var(--accent); } .attrib .meta { color: var(--fg-55); letter-spacing: .16em; } /* ------------------------------------------------- 7. SECTION HEADINGS */ .sec { padding-block: var(--section); } .sec + .sec { padding-top: 0; } .sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gut); flex-wrap: wrap; padding-bottom: 1.1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--rule); } .sec__head h2 { font-family: var(--f-display); font-weight: 700; font-stretch: 80%; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); text-transform: uppercase; letter-spacing: -.005em; } .sec__head .n { font-size: .7rem; font-weight: 600; letter-spacing: .26em; color: var(--fg-38); text-transform: uppercase; } /* ------------------------------------------------------- 8. BOOKS GRID */ .works { display: grid; gap: clamp(2rem, 4.5vw, 4rem) clamp(1.25rem, 3vw, 2.75rem); grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); } .works--4 { grid-template-columns: repeat(4, 1fr); } .works--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1000px) { .works--4, .works--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .works--4, .works--3 { grid-template-columns: 1fr; } } .work { text-decoration: none; display: block; position: relative; } .work__art { position: relative; overflow: hidden; background: var(--bg-2); aspect-ratio: 6300 / 9600; border: 1px solid var(--rule); } .work__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .5s var(--ease); } .work:hover .work__art img { transform: scale(1.035); } .work__art::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--_a, var(--red)); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } .work:hover .work__art::after, .work:focus-visible .work__art::after { transform: scaleX(1); } .work__cap { padding-top: 1.1rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .work__ttl { font-family: var(--f-display); font-weight: 700; font-stretch: 80%; font-size: clamp(1rem, .95rem + .35vw, 1.3rem); line-height: 1.04; text-transform: uppercase; letter-spacing: -.005em; transition: color .35s var(--ease); } .work:hover .work__ttl { color: var(--_a, var(--red)); } .work__yr { font-size: .7rem; font-weight: 600; letter-spacing: .16em; color: var(--fg-38); padding-top: .28rem; } .work__sub { margin-top: .4rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-55); } /* --------------------------------------------------- 9. BOOK PAGE HERO */ .bhero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); } .bhero__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; } @media (max-width: 900px) { .bhero__grid { grid-template-columns: 1fr; } } .bhero__art { position: relative; } .bhero__art img { width: 100%; height: auto; border: 1px solid var(--rule); box-shadow: 0 40px 90px -40px rgba(0,0,0,.55); } html[data-theme="dark"] .bhero__art img { box-shadow: 0 40px 90px -40px rgba(0,0,0,.9); } .bhero__art { isolation: isolate; } .bhero__art picture, .bhero__art img { position: relative; z-index: 2; } .bhero__art::before { content: ""; position: absolute; z-index: 1; left: -14px; bottom: -14px; width: 46%; height: 46%; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); pointer-events: none; } .bhero__title { font-size: clamp(2.25rem, 1.1rem + 6.4vw, 6rem); } .bhero__sub { margin-top: 1.1rem; } .bhero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.6rem; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-55); } .bhero__meta strong { color: var(--fg); font-weight: 600; } .bhero__blurb { margin-top: clamp(1.5rem, 3vw, 2.25rem); } .bhero__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); } /* laurel / award chip */ .chip { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--accent); color: var(--accent-ink); padding: .45rem .85rem; font-size: .65rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; } .chip .star { color: var(--accent); } /* ----------------------------------------------- 10. PULL-QUOTE BANDS */ .band { border-top: 1px solid var(--rule); padding-block: clamp(3.5rem, 9vw, 8rem); position: relative; } .band--invert { background: var(--fg); color: var(--bg); border-top-color: transparent; } .band--invert .attrib .meta { color: var(--bg); opacity: .6; } .band--invert .qmark { color: var(--accent-fill); } .band--invert ::selection { background: var(--bg); color: var(--fg); } .band--accent { background: var(--accent-fill); color: var(--on-accent); border-top-color: transparent; } .band--accent .qmark, .band--accent .attrib .src { color: var(--on-accent); } .band--accent .attrib .dash { background: var(--on-accent); } .band--accent .attrib .meta { color: var(--on-accent); opacity: .82; } .pull { font-family: var(--f-display); font-weight: 600; font-stretch: 82%; font-size: clamp(1.6rem, .95rem + 4vw, 3.5rem); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; max-width: 30ch; } .pull--sm { font-size: clamp(1.35rem, 1rem + 2.2vw, 2.4rem); max-width: 34ch; } .pull mark { background: none; color: var(--accent); } .band--accent .pull mark, .band--invert .pull mark { color: inherit; } .pull-src { margin-top: 1.4rem; font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; opacity: .6; } /* two-column excerpt quote pair */ .qpair { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: repeat(2, 1fr); } @media (max-width: 820px) { .qpair { grid-template-columns: 1fr; } } .qpair .pull { font-size: clamp(1.35rem, 1rem + 2vw, 2.25rem); max-width: 26ch; } /* ---------------------------------------------------- 11. BUY / LINKS */ .buy { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .buy a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg); padding: 1.15rem clamp(1rem, 2.5vw, 1.75rem); text-decoration: none; transition: background-color .3s var(--ease), color .3s var(--ease); } .buy a:hover { background: var(--accent-fill); color: var(--on-accent); } .buy .store { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } .buy .go { font-size: .74rem; letter-spacing: .18em; opacity: .55; } .buy a:hover .go { opacity: 1; } /* spec table */ .spec { border-top: 1px solid var(--rule); } .spec div { display: flex; gap: 1rem; justify-content: space-between; padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .78rem; } .spec dt, .spec .k { font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-55); font-size: .68rem; } .spec dd, .spec .v { margin: 0; text-align: right; color: var(--fg); } /* ------------------------------------------------------ 12. PRESS LIST */ .press { border-top: 1px solid var(--rule); } .press__row { display: grid; align-items: baseline; grid-template-columns: 6.5rem minmax(0, 11rem) minmax(0, 1fr) 2rem; gap: clamp(.75rem, 2vw, 2rem); padding: clamp(1.1rem, 2.4vw, 1.7rem) 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; position: relative; transition: color .35s var(--ease), padding-inline .35s var(--ease); } .press__row::before { content: ""; position: absolute; inset: 0 -1rem; background: var(--accent-fill); transform: scaleY(0); transform-origin: bottom; z-index: -1; transition: transform .4s var(--ease); } .press__row:hover { color: var(--on-accent); } .press__row:hover::before { transform: scaleY(1); } .press__row > * { position: relative; } .press__date { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-38); } .press__row:hover .press__date { color: var(--on-accent); opacity: .74; } .press__out { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); } .press__row:hover .press__out { color: var(--on-accent); } .press__ttl { font-family: var(--f-display); font-weight: 600; font-stretch: 84%; font-size: clamp(1.05rem, .95rem + .7vw, 1.55rem); line-height: 1.12; letter-spacing: -.008em; } .press__note { display: block; margin-top: .4rem; font-family: var(--f-read); font-size: .95rem; line-height: 1.5; color: var(--fg-70); font-weight: 350; max-width: 70ch; } .press__row:hover .press__note { color: var(--on-accent); opacity: .82; } .press__go { justify-self: end; font-size: .95rem; opacity: .4; transition: transform .35s var(--ease), opacity .35s var(--ease); } .press__row:hover .press__go { opacity: 1; transform: translate(3px,-3px); } @media (max-width: 780px) { .press__row { grid-template-columns: 1fr 1.5rem; grid-template-areas: "out go" "ttl ttl" "date date"; row-gap: .45rem; } .press__out { grid-area: out; } .press__go { grid-area: go; } .press__ttl { grid-area: ttl; } .press__date { grid-area: date; } } /* ------------------------------------------------------- 13. ABOUT */ .about { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } @media (max-width: 900px) { .about { grid-template-columns: 1fr; } } .about__photo { position: relative; } .about__photo img { width: 100%; filter: grayscale(1) contrast(1.06); } .about__photo::after { content: ""; position: absolute; inset: auto -12px -12px auto; width: 40%; height: 34%; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); } /* ------------------------------------------------------- 14. EMBEDS */ .embed { border: 1px solid var(--rule); padding: clamp(1rem, 2.5vw, 1.6rem); background: var(--bg-2); } .embed iframe { width: 100%; max-width: 660px; height: 450px; border: 0; overflow: hidden; background: transparent; display: block; } .embed__ph { display: grid; gap: 1.1rem; place-items: start; max-width: 660px; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px dashed var(--rule); } .embed__ph p { font-family: var(--f-read); color: var(--fg-70); font-size: .98rem; max-width: 46ch; } /* ------------------------------------------------ 15. EXCERPT READER */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; background: transparent; pointer-events: none; } .progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; } .xhead { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); } .xhead .back { display: inline-flex; align-items: center; gap: .55rem; font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--fg-55); } .xhead .back:hover { color: var(--accent-ink); } .xhead h1 { margin-top: 1.5rem; } .notice { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); border-left: 2px solid var(--accent); padding: .85rem 0 .85rem 1.1rem; font-size: .84rem; color: var(--fg-55); max-width: 62ch; } .notice b { color: var(--fg-70); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; display: block; margin-bottom: .3rem; } .reader { font-family: var(--f-read); max-width: 40rem; margin-inline: auto; --_reader: 1; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); font-size: clamp(1.075rem, 1rem + .38vw, 1.24rem); line-height: 1.78; font-weight: 350; hyphens: auto; } .reader h2 { font-family: var(--f-display); font-weight: 700; font-stretch: 80%; font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; margin-top: clamp(3rem, 7vw, 5rem); margin-bottom: 1.75rem; padding-bottom: .85rem; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; gap: .8rem; scroll-margin-top: 90px; } .reader h2::before { content: ""; flex: 0 0 auto; width: 1.6rem; height: 2px; background: var(--accent); transform: translateY(-.28em); } .reader h2:first-child { margin-top: 0; } .reader h2.lc { text-transform: none; letter-spacing: -.005em; font-stretch: 84%; } .reader h2 span { display: block; } .reader p { margin: 0; text-indent: 1.5em; } /* A section start (a POV switch in A Los Angeles Love Story) gets a blank line above it; the one that opens a chapter sits tight under the heading. */ .reader p.lead { text-indent: 0; margin-top: clamp(1.9rem, 4vw, 2.6rem); } .reader h2 + p.lead { margin-top: 0; } .reader p.lead::first-line { letter-spacing: .015em; } .reader p.noind { text-indent: 0; } .reader .pov { font-family: var(--f-ui); font-weight: 700; font-stretch: 80%; letter-spacing: .14em; font-size: .82em; color: var(--accent-ink); } .reader .brk { text-indent: 0; text-align: center; color: var(--accent); letter-spacing: .8em; margin-block: 2rem; font-size: .8em; } .reader blockquote { margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid var(--rule); font-style: italic; color: var(--fg-70); text-indent: 0; } .reader blockquote p { text-indent: 0; } .reader .notif { text-indent: 0; margin: 1.5rem 0; padding: .7rem 1rem; border: 1px solid var(--rule); border-left: 2px solid var(--accent); font-family: var(--f-ui); font-size: .78em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-70); background: var(--bg-2); } .reader .notif + .notif { margin-top: -1.1rem; } .reader em { font-style: italic; } .reader strong { font-weight: 600; } .reader .sc { font-variant-caps: all-small-caps; letter-spacing: .06em; } .reader blockquote.wall { border-left: 0; padding: 0; margin-block: 2.25rem; font-style: normal; text-align: center; font-family: var(--f-ui); font-weight: 600; font-stretch: 82%; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; font-size: 1em; color: var(--fg-70); } .reader blockquote.wall p { text-indent: 0; } .reader blockquote.wall p + p { margin-top: .9rem; } .xend { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; } .xend .d3 { max-width: 22ch; margin-inline: auto; } .xend .btn-row { justify-content: center; margin-top: 2rem; } /* ---------------------------------------------------------- 16. FOOTER */ .ftr { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: clamp(3rem,7vw,6rem); } .ftr__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0,1.2fr) repeat(3, minmax(0,.6fr)); } @media (max-width: 860px) { .ftr__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } } .ftr h3 { font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--fg-38); margin-bottom: 1.1rem; } .ftr ul { list-style: none; display: grid; gap: .6rem; } .ftr a { font-size: .86rem; text-decoration: none; color: var(--fg-70); } .ftr a:hover { color: var(--accent-ink); } .ftr__mark img { width: 168px; } .ftr__tag { margin-top: 1.1rem; font-size: .8rem; color: var(--fg-55); max-width: 30ch; } .ftr__base { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; } .ftr__base p, .ftr__base a { font-size: .7rem; letter-spacing: .1em; color: var(--fg-38); text-decoration: none; } .ftr__base a:hover { color: var(--accent-ink); } .ftr__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; } .social { display: flex; gap: .5rem; margin-top: 1.5rem; } .social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rule); color: var(--fg-70); } .social a:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); } .social svg { width: 17px; height: 17px; } /* ------------------------------------------------------ 17. COOKIE BAR */ .ck { position: fixed; z-index: 90; left: var(--pad); bottom: clamp(1rem, 3vw, 1.75rem); width: min(392px, calc(100vw - 2 * var(--pad))); background: var(--bg); color: var(--fg); border: 1px solid var(--fg); padding: 1.25rem 1.35rem 1.35rem; box-shadow: 0 26px 60px -24px rgba(0,0,0,.5); transform: translateY(calc(100% + 3rem)); opacity: 0; transition: transform .55s var(--ease), opacity .4s var(--ease); } .ck.is-in { transform: translateY(0); opacity: 1; } .ck[hidden] { display: none; } .ck__hd { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .ck__hd i { width: 6px; height: 6px; background: var(--red); display: block; } .ck__hd span { font-size: .64rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; } .ck p { font-size: .82rem; line-height: 1.55; color: var(--fg-70); } .ck p a { color: var(--red-ink); text-decoration: none; border-bottom: 1px solid currentColor; } html[data-theme="dark"] .ck p a { color: var(--red-glow); } .ck__row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .ck .btn { padding: .7rem 1.05rem; font-size: .66rem; letter-spacing: .16em; } .ck__x { position: absolute; top: .5rem; right: .5rem; width: 30px; height: 30px; background: none; border: 0; cursor: pointer; color: var(--fg-38); font-size: 1rem; line-height: 1; } .ck__x:hover { color: var(--fg); } @media (max-width: 520px) { .ck { left: var(--pad); right: var(--pad); width: auto; } } /* small "cookie settings" trigger in footer */ .ck-reopen { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; } .ftr .ck-reopen { font-size: .86rem; font-weight: 400; color: var(--fg-70); font-family: var(--f-ui); } .ftr .ck-reopen:hover { color: var(--accent-ink); } .legal .ck-reopen { font-family: var(--f-mark); } /* ------------------------------- 17b. MICRO-CAPS SET IN THE MARK FACE Every small letterspaced all-caps label uses Jost, which echoes the geometric hairline of the PASHA ADAM wordmark. */ .btn, .chip, .buy .store, .buy .go, .press__out, .press__date, .spec .k, .spec dt, .ftr h3, .ftr__base p, .ftr__base a, .ck__hd span, .work__yr, .work__sub, .sec__head .n, .pull-src, .xhead .back, .notice b, .reader .notif { font-family: var(--f-mark); font-weight: 500; } .btn { font-size: .8rem; letter-spacing: .18em; } .btn--lg { font-size: .86rem; } .ck .btn { font-size: .72rem; letter-spacing: .14em; } .chip { font-size: .72rem; } .buy .store, .buy .go { font-size: .82rem; } .press__out { font-size: .78rem; } .press__date { font-size: .74rem; } .spec .k, .spec dt { font-size: .74rem; } .ftr h3 { font-size: .72rem; } .ftr__base p, .ftr__base a { font-size: .76rem; } .ck__hd span { font-size: .72rem; } .work__yr { font-size: .76rem; } .work__sub { font-size: .78rem; font-weight: 400; } .sec__head .n { font-size: .76rem; } .pull-src { font-size: .76rem; } .xhead .back { font-size: .78rem; } .notice b { font-size: .74rem; } .reader .notif { font-size: .82em; font-weight: 500; letter-spacing: .12em; } /* ------------------------------------------------------- 18. UTILITIES */ .stack > * + * { margin-top: var(--_s, 1.5rem); } .stack-sm { --_s: .85rem; } .stack-lg { --_s: clamp(2rem, 4vw, 3rem); } .center { text-align: center; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .mt-0 { margin-top: 0 !important; } /* reveal on scroll */ [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-rv].is-vis { opacity: 1; transform: none; } .no-js [data-rv] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-rv] { opacity: 1; transform: none; } } /* print */ @media print { .hdr, .ftr, .ck, .progress, .xend { display: none !important; } body { background: #fff; color: #000; } .reader { max-width: none; font-size: 11pt; } }