/* ============================================================ CASTRIX PRESS — tokens.css ------------------------------------------------------------ Castrix is a romance press housing a collective of authors. The chrome is romance-coded, not neutral: a blush paper base, hot pink + magenta as the publisher's voice, and oxblood reserved for ink, hairlines, and primary CTA. Each author additionally defines their OWN saturated accent (Callie Lee = oxblood/blood red; reserved slot = plum) which takes over on author detail pages via a `.theme-*` wrapper. On pages without a single author (home, authors index, catalogue), the publisher palette carries the page. ============================================================ */ /* Brand fonts. Plus Jakarta Sans does everything UI/body/display. Tenor Sans is reserved for book titles only — upright, never italic. Caveat is a hand-drawn accent for romantic moments (pull quotes, hero corners) — never on chrome. */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Tenor+Sans&family=Caveat:wght@400;500;600&display=swap"); :root { /* ---------- TYPE FAMILIES ---------- --font-sans : Plus Jakarta Sans. The system voice. Display, UI, body, headings, eyebrow, navigation, buttons, metadata. --font-titles : Tenor Sans. Used ONLY for book titles and series names. Upright, never italic. --font-script : Caveat. Hand-drawn accent. Pull quotes, hero corner scripts, "with all the feels" moments. NEVER on chrome, navigation, labels, buttons, body, or headings. */ --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-titles: "Tenor Sans", "Cormorant Garamond", "Times New Roman", Georgia, serif; --font-script: "Caveat", "Caveat Brush", cursive; /* ---------- COLOR — PAPER & INK ---------- Blush paper base. Three steps: page, card, divider/well. Ink is a deep wine-tinted near-black so it harmonises with the pink palette instead of fighting it. */ --paper: #FFF4F4; /* page base — soft blush */ --paper-2: #FFE7EA; /* card / sub-section background */ --paper-3: #FFD3D8; /* well / divider tint */ --ink: #1F0B12; /* primary text + chrome */ --ink-2: #4A2230; /* secondary text */ --ink-3: #7B4A5A; /* tertiary / metadata */ --ink-4: #B89AA3; /* placeholder / disabled */ --rule: #2A0E1A; /* hairlines on light surfaces */ --rule-soft: rgba(110, 11, 28, 0.18); /* soft inline divider */ /* ---------- COLOR — PUBLISHER PALETTE ---------- Castrix's publisher voice. Hot pink leads on light surfaces; magenta is the deeper companion; oxblood anchors text-button CTAs and structural rules. */ --pink: #FF2D87; /* primary publisher accent — pink CTA, "Newsletter →" */ --magenta: #C4136B; /* deeper accent — eyebrow text on light, link colour */ --oxblood: #6E0B1C; /* primary chrome rule, top border, primary button */ /* On-color companions (text colour to use ON each saturated surface). */ --on-pink: #FFFFFF; --on-oxblood: #FFF4F4; /* Soft tint — for backgrounds, shadows, hover wells. */ --oxblood-tint: rgba(110, 11, 28, 0.08); /* ---------- COLOR — AUTHOR ACCENT ---------- The accent is set per-page from the author. Default fallback is the publisher oxblood so neutral chrome remains readable. Each author defines: --accent : their saturated accent --accent-ink : the readable text colour ON --accent --accent-tint : a soft wash for backgrounds */ --accent: var(--oxblood); --accent-ink: var(--on-oxblood); --accent-tint: var(--oxblood-tint); /* Author: Callie Lee — paranormal / werewolf romance. Oxblood / blood red — the bite, the danger. */ --accent-callie: #6E0B1C; --accent-callie-ink: #FFF4F4; --accent-callie-tint: rgba(110, 11, 28, 0.10); --accent-callie-soft: #FFB3CC; /* pink companion swatch for Callie */ /* Reserved slot — plum, to demonstrate the system handles a different hue family. */ --accent-reserved: #6B3A5C; --accent-reserved-ink: #FFF4F4; --accent-reserved-tint: rgba(107, 58, 92, 0.10); /* ---------- SPACING ---------- 4px base, 8px rhythm. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---------- RADII ---------- Friendlier than the previous system but not playful. Cards/buttons/inputs use 8–12px (modern romance), pills and avatars are full-radius, cover frames are 8px. */ --r-0: 0; --r-1: 4px; --r-2: 8px; /* cover frames, default cards */ --r-3: 12px; /* feature card / large surfaces */ --r-4: 16px; /* author hero panel */ --r-pill: 999px; /* ---------- ELEVATION ---------- Romance shelf has a small amount of cover lift. Two tonal steps for chrome + a dedicated cover shadow that uses oxblood-tinted black so it harmonises with the palette. */ --e-0: none; --e-1: 0 1px 0 rgba(110, 11, 28, 0.04); --e-2: 0 12px 24px -16px rgba(110, 11, 28, 0.18); --e-3: 0 18px 40px -22px rgba(110, 11, 28, 0.30); --shadow-cover: 0 24px 50px -22px rgba(110, 11, 28, 0.45), 0 4px 10px rgba(31, 11, 18, 0.10); --shadow-cta-pink: 0 6px 16px -6px rgba(255, 45, 135, 0.7); /* ---------- BORDERS ---------- */ --bw-1: 1px; --bw-2: 2px; /* ---------- LAYOUT ---------- */ --container: 1200px; --container-wide: 1440px; --gutter: var(--s-5); /* ---------- TYPE — SCALE ---------- Display = sans (Plus Jakarta 800, tight tracking). Book titles = Tenor Sans, upright. Body 16/1.55. */ --t-display: 72px; --t-display-sm: 56px; --t-h1: 44px; --t-h2: 32px; --t-h3: 22px; --t-body: 16px; --t-small: 14px; --t-micro: 12px; --t-eyebrow: 11px; --lh-tight: 0.98; --lh-snug: 1.15; --lh-body: 1.55; --lh-loose: 1.7; --tracking-display: -0.04em; /* big sans display */ --tracking-h: -0.03em; /* h1 / h2 */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-eyebrow: 0.18em; /* eyebrow caps */ /* ---------- MOTION ---------- Restrained but warmer than the old system — small lifts on book covers are fair game. */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; } /* Per-author accent theming is disabled — the storefront uses one site-wide --accent (see :root). The .theme-{slug} overrides were removed with it. */ /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Sticky footer: column layout with the page
growing to fill, so the footer sits at the viewport bottom on short pages. */ min-height: 100dvh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } ::selection { background: var(--oxblood); color: var(--on-oxblood); } /* ============================================================ SEMANTIC TYPOGRAPHY ============================================================ */ h1, .h1 { font-family: var(--font-sans); font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-h); font-weight: 800; margin: 0; } h2, .h2 { font-family: var(--font-sans); font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-h); font-weight: 800; margin: 0; } h3, .h3 { font-family: var(--font-sans); font-size: var(--t-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700; margin: 0; } p { margin: 0 0 var(--s-4) 0; max-width: 64ch; text-wrap: pretty; } /* Display class — for the home featured-book hero, author hero, and book detail title. Sans, tight, heavy. */ .display { font-family: var(--font-sans); font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 800; } .display-sm { font-family: var(--font-sans); font-size: var(--t-display-sm); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 800; } /* The .accent span inside a display heading recolors a single word to the publisher pink. Use sparingly — once per heading. */ .display .accent, .display-sm .accent, h1 .accent { color: var(--pink); } /* Book titles — Tenor Sans, upright, never italic. Slightly open tracking to read romantically without going precious. */ .book-title { font-family: var(--font-titles); font-style: normal; font-weight: 400; letter-spacing: 0.005em; } /* The eyebrow style — wide-tracked caps. The single all-caps treatment in the system. Marks series numbers, section labels, "Book one of ...", "Out now", etc. */ .eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: 700; color: var(--ink-3); } /* Eyebrow gets a magenta colour when it sits inside a card or section that's framing an author's work. Use deliberately. */ .eyebrow.brand { color: var(--magenta); } .eyebrow.author { color: var(--oxblood); } .metadata { font-family: var(--font-sans); font-size: var(--t-small); color: var(--ink-3); line-height: var(--lh-snug); } .lede { font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--ink-2); max-width: 56ch; } /* Hand-drawn accent. Use ONLY for romantic flourishes: — with all the feels — Never on buttons, navigation, eyebrows, body, or headings. */ .script { font-family: var(--font-script); font-weight: 500; font-size: 22px; color: var(--pink); } .script.tilt { display: inline-block; transform: rotate(-2deg); } a { color: inherit; text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity var(--dur) var(--ease); } a:hover { opacity: 0.65; } hr { border: 0; border-top: var(--bw-1) solid var(--rule-soft); margin: var(--s-6) 0; }