/* =================================================================== CELESTIAL BOOKS — design system A free archive reviving public-domain books. Palette: white · black(ink) · sage | Mood: woodcut · antique · natural Tweakable via data-attrs on : data-theme, data-fonts, data-density, data-texture, data-hero =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Libre+Baskerville:ital@0;1&family=Cutive+Mono&family=UnifrakturCook:wght@700&display=swap'); /* ---------- TOKENS ---------- */ :root{ /* paper / ink — cooler, cleaner antique off-white */ --paper: #F2F1EA; /* soft grey-ivory ground */ --paper-hi: #F9F8F3; /* lifted paper */ --paper-lo: #E8E6DC; --panel: #ECEAE0; /* cards / panels */ --ink: #1B1D19; /* near-black, faint green-grey */ --ink-soft: #3A3D36; --ink-faint: #6E7268; /* cool grey */ --line: #D7D5C8; /* hairline */ --line-soft: #E4E2D7; /* sage scale — muted, cool eucalyptus (olive removed) */ --sage: #7F8C7B; /* grey-sage */ --sage-mid: #5E6C5A; --sage-deep: #41503F; --sage-dark: #2B342A; /* deep green-charcoal */ --sage-soft: #AAB5A4; --sage-tint: #E3E7DD; /* pale cool wash */ --sage-tint2: #D6DCCE; /* fonts (swapped by data-fonts) — antique book print */ --f-display: 'Libre Caslon Display', Georgia, serif; --f-body: 'Libre Caslon Text', Georgia, serif; --f-black: 'UnifrakturCook', 'Libre Caslon Display', serif; --f-mono: 'Cutive Mono', ui-monospace, monospace; /* density (swapped by data-density) */ --su: 8px; /* spacing unit */ --measure: 66ch; --page-max: 1240px; /* type scale */ --fs-eyebrow: 13px; --fs-body: 19px; --lh-body: 1.62; --radius: 3px; --ease: cubic-bezier(.2,.6,.2,1); color-scheme: light; } [data-fonts="editorial"]{ --f-display: 'Newsreader', Georgia, serif; --f-body: 'Newsreader', Georgia, serif; } [data-fonts="baskerville"]{ --f-display: 'Libre Baskerville', Georgia, serif; --f-body: 'Libre Baskerville', Georgia, serif; } [data-density="airy"] { --su: 10px; --fs-body: 20px; --lh-body: 1.7; } [data-density="compact"] { --su: 6px; --fs-body: 18px; --lh-body: 1.5; } /* ---------- RESET ---------- */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ margin:0; font-weight:400; line-height:1.05; } p{ margin:0 0 1em; } ::selection{ background: var(--sage-soft); color: var(--ink); } /* paper grain — toggled by data-texture */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0; transition:opacity .4s var(--ease); background-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.025) 0, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } [data-texture="low"] body::before, html[data-texture="low"] body::before{ opacity:.35; } [data-texture="high"] body::before, html[data-texture="high"] body::before{ opacity:.7; } /* centered transparent logo watermark behind the whole site */ body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image:url("logo.png"); background-repeat:no-repeat; background-position:center 47%; background-size:min(660px,72vmin); opacity:.045; } [data-texture="none"] body::after{ opacity:.03; } [data-texture="high"] body::after{ opacity:.06; } /* ---------- LAYOUT ---------- */ .wrap{ width:100%; max-width:var(--page-max); margin:0 auto; padding:0 calc(var(--su)*4); } .wrap-tight{ max-width:880px; } section{ position:relative; z-index:2; } .stack > * + *{ margin-top:calc(var(--su)*2); } /* ---------- TYPE HELPERS ---------- */ .eyebrow{ font-family: var(--f-mono); font-size: var(--fs-eyebrow); letter-spacing:.28em; text-transform:uppercase; color: var(--sage-mid); display:inline-flex; align-items:center; gap:.7em; } .eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; } .eyebrow.center::after{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; } .eyebrow.center{ justify-content:center; } .display{ font-family: var(--f-display); font-weight:400; letter-spacing:-.005em; } .italic{ font-style:italic; } .drop::first-letter{ font-family: var(--f-black); float:left; font-size:3.1em; line-height:.8; padding:.04em .14em 0 0; color: var(--sage-deep); font-weight:700; } .lede{ font-size:1.18em; color:var(--ink-soft); } .muted{ color: var(--ink-faint); } .serifnum{ font-family:var(--f-display); } /* blackletter accent — used VERY sparingly */ .black-accent{ font-family: var(--f-black); font-weight:700; } /* ---------- LOGO / MEDALLION ---------- */ .medallion{ display:inline-block; background-position:center; background-repeat:no-repeat; background-size:contain; } .medallion.ink{ -webkit-mask:url("logo.png") center/contain no-repeat; mask:url("logo.png") center/contain no-repeat; background-color: var(--ink); } .medallion.sage{ -webkit-mask:url("logo.png") center/contain no-repeat; mask:url("logo.png") center/contain no-repeat; background-color: var(--sage-mid); } .medallion.cream{ -webkit-mask:url("logo.png") center/contain no-repeat; mask:url("logo.png") center/contain no-repeat; background-color: var(--paper-hi); } .medallion.raw{ background-image:url("logo.png"); } /* ---------- ORNAMENTAL RULES ---------- */ .rule{ display:flex; align-items:center; gap:14px; color:var(--line); } .rule::before,.rule::after{ content:""; height:1px; background:currentColor; flex:1; } .rule .dot{ width:5px; height:5px; transform:rotate(45deg); background:var(--sage); } .rule.lozenge .dot{ width:7px; height:7px; border:1px solid var(--sage-mid); background:transparent; } .flourish{ width:34px; height:34px; opacity:.8; } /* ---------- NAV ---------- */ .topbar{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--line); } .topbar .bar{ display:flex; align-items:center; gap:calc(var(--su)*3); height:72px; max-width:var(--page-max); margin:0 auto; padding:0 calc(var(--su)*4); } .brand{ display:flex; align-items:center; gap:13px; margin-right:auto; } .brand .medallion{ width:38px; height:38px; flex:none; } .brand .name{ font-family:var(--f-display); font-size:24px; font-weight:500; letter-spacing:.01em; line-height:1; } .brand .name b{ font-weight:500; } .brand .name small{ display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px; } .nav{ display:flex; align-items:center; gap:calc(var(--su)*3.2); } .nav a{ font-family:var(--f-display); font-size:18px; color:var(--ink-soft); position:relative; padding:4px 0; } .nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--sage-deep); transition:right .3s var(--ease); } .nav a:hover::after, .nav a.active::after{ right:0; } .nav a.active{ color:var(--ink); } /* search pill */ .searchpill{ display:flex; align-items:center; gap:9px; height:38px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--paper-hi); color:var(--ink-faint); font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; transition:border-color .25s; } .searchpill:hover{ border-color:var(--sage); } /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-display); font-size:18px; line-height:1; padding:14px 26px; border:1px solid var(--ink); border-radius:var(--radius); background:transparent; color:var(--ink); cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), transform .25s; } .btn:hover{ background:var(--ink); color:var(--paper-hi); } .btn .arr{ transition:transform .25s var(--ease); } .btn:hover .arr{ transform:translateX(3px); } .btn.solid{ background:var(--sage-deep); border-color:var(--sage-deep); color:var(--paper-hi); } .btn.solid:hover{ background:var(--sage-dark); } .btn.ghost{ border-color:var(--line); color:var(--ink-soft); padding:12px 20px; font-size:16px; } .btn.ghost:hover{ background:var(--panel); color:var(--ink); } .btn.sm{ font-size:15px; padding:10px 16px; } /* tag / chip */ .chip{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-mid); border:1px solid var(--line); border-radius:999px; padding:5px 11px; } .chip.solid{ background:var(--sage-tint); border-color:transparent; color:var(--sage-deep); } /* ---------- BOOK COVER (typographic) ---------- */ .cover{ position:relative; aspect-ratio:2/3; border-radius:2px; overflow:hidden; background:var(--cover-bg, var(--panel)); color:var(--cover-fg, var(--ink)); display:flex; flex-direction:column; box-shadow:0 1px 0 rgba(0,0,0,.06); border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); transition:transform .4s var(--ease), box-shadow .4s var(--ease); } .cover .spine{ position:absolute; left:0; top:0; bottom:0; width:6px; background:color-mix(in srgb, var(--cover-fg, var(--ink)) 22%, transparent); } .cover .inner{ position:absolute; inset:10px; border:1px solid color-mix(in srgb, var(--cover-fg,var(--ink)) 26%, transparent); padding:18px 16px; display:flex; flex-direction:column; } .cover .ct-top{ font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; opacity:.7; text-align:center; } .cover .ct-title{ font-family:var(--f-display); font-weight:500; line-height:1.0; font-size:clamp(18px,2.4vw,27px); margin:auto 0; text-align:center; letter-spacing:-.01em; } .cover .ct-orn{ width:38px; height:38px; margin:8px auto; opacity:.85; } .cover .ct-author{ font-family:var(--f-display); font-style:italic; font-size:15px; text-align:center; opacity:.85; } .cover .ct-bottom{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; text-align:center; } /* cover color variants */ .cover.v-paper{ --cover-bg:var(--paper-hi); --cover-fg:var(--ink); } .cover.v-sage { --cover-bg:var(--sage-deep); --cover-fg:#F2F0E4; } .cover.v-ink { --cover-bg:var(--ink); --cover-fg:#E9E6D7; } .cover.v-tint { --cover-bg:var(--sage-tint); --cover-fg:var(--sage-dark); } .cover.v-sageline{ --cover-bg:var(--paper-hi); --cover-fg:var(--sage-deep); } /* real-image cover (uploaded artwork) */ .cover.cover-img{ background:#15140f; padding:0; border-color:rgba(0,0,0,.35); } .cover.cover-img .spine{ background:rgba(255,255,255,.07); z-index:2; } .cover.cover-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* detail-page image cover: show the FULL artwork, uncropped, plus alt edition */ .book-covers{ width:100%; max-width:300px; position:sticky; top:96px; } .book-covers .bc-main{ display:block; border-radius:3px; overflow:hidden; background:#15140f; box-shadow:0 30px 60px -30px rgba(20,22,12,.6); border:1px solid rgba(0,0,0,.3); } .book-covers .bc-main img{ width:100%; height:auto; display:block; } .book-covers .bc-alt{ display:flex; gap:14px; align-items:center; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } .book-covers .bc-thumb{ width:60px; flex:none; border-radius:2px; overflow:hidden; box-shadow:0 8px 18px -12px rgba(20,22,12,.7); border:1px solid rgba(0,0,0,.25); } .book-covers .bc-thumb img{ width:100%; height:auto; display:block; } .book-covers .bc-alt-cap{ text-align:left; } .book-covers .bc-alt-cap .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); display:block; } .book-covers .bc-alt-cap .v{ font-family:var(--f-display); font-style:italic; font-size:18px; color:var(--ink); } /* ---------- BOOK CARD ---------- */ .bookcard{ display:flex; flex-direction:column; gap:13px; cursor:pointer; } .bookcard .cover{ box-shadow:0 6px 22px -16px rgba(20,22,12,.6); } .bookcard:hover .cover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:0 22px 40px -22px rgba(20,22,12,.55); } .bookcard .meta .t{ font-family:var(--f-display); font-size:21px; font-weight:500; line-height:1.08; } .bookcard .meta .a{ font-style:italic; color:var(--ink-faint); font-size:16px; } .bookcard .meta .tagline{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--sage-mid); margin-top:6px; } .bookcard .meta .row{ display:flex; align-items:center; gap:10px; margin-top:7px; } /* ---------- SECTION HEADER ---------- */ .shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:calc(var(--su)*2); margin-bottom:calc(var(--su)*4); border-bottom:1px solid var(--line); } .shead h2{ font-family:var(--f-display); font-size:clamp(30px,4vw,44px); } .shead .lead{ max-width:42ch; } /* ---------- FOOTER ---------- */ .foot{ background:var(--sage-dark); color:#D9DDC9; margin-top:calc(var(--su)*12); position:relative; z-index:2; } .foot a{ color:#D9DDC9; } .foot .grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; max-width:var(--page-max); margin:0 auto; padding:calc(var(--su)*8) calc(var(--su)*4) calc(var(--su)*5); } .foot .name{ font-family:var(--f-display); font-size:29px; font-weight:500; color:#F1F0E2; } .foot h4{ font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#9DAA84; margin-bottom:16px; font-weight:400; } .foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .foot ul a{ font-family:var(--f-display); font-size:18px; opacity:.82; } .foot ul a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; } .foot .colophon{ border-top:1px solid rgba(255,255,255,.12); font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:#8C9A74; padding:18px calc(var(--su)*4); max-width:var(--page-max); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; } .foot .medallion{ width:30px; height:30px; } /* ---------- THEME: QUIET (earthy minimal) ---------- */ [data-theme="quiet"]{ --paper:#F6F4EC; --panel:#EFEDE3; } [data-theme="quiet"] .ornament-heavy{ display:none; } /* ---------- THEME: LETTERPRESS (antique library) ---------- */ [data-theme="letterpress"]{ --paper:#F1EDDF; --panel:#E8E3D2; } [data-theme="letterpress"] body{ background-image: linear-gradient(90deg, transparent calc(50% - .5px), var(--line-soft) calc(50% - .5px), var(--line-soft) calc(50% + .5px), transparent calc(50% + .5px)); background-size:0; } [data-theme="letterpress"] .shead{ border-bottom:3px double var(--ink-soft); } [data-theme="letterpress"] .cover .inner{ border-style:double; border-width:2px; } [data-theme="letterpress"] .nav a{ font-variant:small-caps; letter-spacing:.04em; } /* ---------- THEME: ILLUMINATED (woodcut / manuscript) ---------- */ [data-theme="illuminated"]{ --paper:#F3EFE2; --panel:#EBE5D3; } [data-theme="illuminated"] .shead h2{ } [data-theme="illuminated"] .frame-orn{ display:block; } /* decorative manuscript border (shown in illuminated/high texture) */ .frame-orn{ display:none; } /* ---------- HERO ---------- */ .hero{ position:relative; overflow:hidden; padding:calc(var(--su)*11) 0 calc(var(--su)*9); } .hero .watermark{ position:absolute; pointer-events:none; opacity:.06; width:760px; height:760px; right:-160px; top:-120px; } .hero .eyebrow{ margin-bottom:calc(var(--su)*3); } .hero h1{ font-family:var(--f-display); font-weight:500; font-size:clamp(46px,7.5vw,100px); line-height:.98; letter-spacing:-.015em; } .hero h1 em{ font-style:italic; color:var(--sage-deep); } .hero .sub{ max-width:52ch; font-size:1.16em; color:var(--ink-soft); margin-top:calc(var(--su)*3); } .hero .cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:calc(var(--su)*5); align-items:center; } .hero .stat-strip{ display:flex; gap:40px; margin-top:calc(var(--su)*7); flex-wrap:wrap; } .hero .stat .n{ font-family:var(--f-display); font-size:40px; font-weight:500; line-height:1; } .hero .stat .l{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:6px; } /* hero layouts */ [data-hero="centered"] .hero .inner{ text-align:center; max-width:920px; margin:0 auto; } [data-hero="centered"] .hero .eyebrow{ justify-content:center; } [data-hero="centered"] .hero .sub{ margin-left:auto; margin-right:auto; } [data-hero="centered"] .hero .cta{ justify-content:center; } [data-hero="centered"] .hero .stat-strip{ justify-content:center; } [data-hero="centered"] .hero .hero-figure{ display:none; } [data-hero="centered"] .hero .watermark{ left:50%; top:50%; transform:translate(-50%,-50%); right:auto; opacity:.05; width:640px; height:640px; } [data-hero="split"] .hero .inner{ display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; } [data-hero="split"] .hero .watermark{ display:none; } [data-hero="medallion"] .hero .inner{ text-align:center; max-width:880px; margin:0 auto; } [data-hero="medallion"] .hero .eyebrow{ justify-content:center; } [data-hero="medallion"] .hero .sub{ margin:calc(var(--su)*3) auto 0; } [data-hero="medallion"] .hero .cta{ justify-content:center; } [data-hero="medallion"] .hero .stat-strip{ justify-content:center; } [data-hero="medallion"] .hero .hero-figure{ display:none; } [data-hero="medallion"] .hero .big-med{ display:block; } .hero .big-med{ display:none; width:200px; height:200px; margin:0 auto calc(var(--su)*4); } .hero-figure{ position:relative; } .hero-figure .cover{ width:280px; margin:0 auto; box-shadow:0 30px 60px -30px rgba(20,22,12,.6); } .hero-figure .float-med{ position:absolute; width:120px; height:120px; right:-6px; bottom:-18px; } /* stacked presentation covers (EN front, FR behind) — borderless, contained */ .hero-stack{ position:relative; width:330px; height:452px; margin:0 auto; } .hero-stack .cv{ position:absolute; border-radius:3px; overflow:hidden; background:#15140f; display:block; } .hero-stack .cv img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-stack .cv-back{ width:212px; height:318px; top:10px; right:10px; transform:rotate(6deg); box-shadow:0 18px 38px -22px rgba(20,22,12,.7); filter:brightness(.8) saturate(.92); } .hero-stack .cv-front{ width:258px; height:387px; bottom:0; left:6px; transform:rotate(-2.5deg); box-shadow:0 30px 58px -26px rgba(20,22,12,.82); z-index:2; } .hero-cap{ position:relative; z-index:3; margin-top:calc(var(--su)*4); text-align:center; max-width:330px; margin-left:auto; margin-right:auto; } .hero-cap .t{ font-family:var(--f-display); font-size:23px; line-height:1.05; } .hero-cap .t em{ font-style:italic; color:var(--sage-deep); } .hero-cap .s{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:9px; display:block; } .hero-cap a.read{ display:inline-flex; align-items:center; gap:.5em; margin-top:14px; font-family:var(--f-display); font-size:17px; color:var(--sage-deep); border-bottom:1px solid var(--sage); padding-bottom:2px; } .hero-cap a.read .arr{ transition:transform .25s var(--ease); } .hero-cap a.read:hover .arr{ transform:translateX(3px); } @media (max-width:900px){ :root{ --page-max:1240px; } .hero{ padding:calc(var(--su)*7) 0 calc(var(--su)*6); } [data-hero="split"] .hero .inner{ grid-template-columns:1fr; gap:calc(var(--su)*6); justify-items:center; } [data-hero="split"] .hero .hero-copy{ text-align:center; display:flex; flex-direction:column; align-items:center; order:2; } [data-hero="split"] .hero .hero-figure{ order:1; } [data-hero="split"] .hero .sub{ margin-left:auto; margin-right:auto; } [data-hero="split"] .hero .cta{ justify-content:center; } [data-hero="split"] .hero-figure .cover{ width:200px; } .hero h1{ font-size:clamp(40px,11vw,72px); } .hero .watermark{ width:420px; height:420px; right:-120px; top:-60px; } .foot .grid{ grid-template-columns:1fr 1fr; padding:calc(var(--su)*6) calc(var(--su)*4) calc(var(--su)*4); } .nav{ display:none; } } @media (max-width:560px){ .wrap{ padding:0 22px; } .topbar .bar{ height:62px; padding:0 22px; gap:14px; } .brand .medallion{ width:32px; height:32px; } .brand .name{ font-size:21px; } .searchpill-t{ display:none; } .searchpill{ width:38px; padding:0; justify-content:center; } .hero .cta{ flex-direction:column; align-items:stretch; } .hero .cta .btn{ justify-content:center; } /* scale the cover stack down so it never overflows */ .hero-stack{ width:288px; height:394px; } .hero-stack .cv-back{ width:185px; height:277px; top:9px; right:8px; } .hero-stack .cv-front{ width:225px; height:337px; left:5px; } .hero-cap .t{ font-size:21px; } } /* utility */ .center{ text-align:center; } .mt-0{ margin-top:0; }