/* ═══════════════════════════════════════════════════════════════════════ editorial.css — magazine/editorial design overlay for grxhub-tools. Applies cream-paper + dark-ink aesthetic, Erode/Inter/JetBrains Mono typography, and editorial chrome (rules, mastheads, eyebrow lines) to every tool page through scoped variable overrides and class restyles. Loaded via @import in main.css so every page that links main.css inherits the editorial look automatically — no per-page changes needed. ═══════════════════════════════════════════════════════════════════════ */ /* ── Editorial typefaces ──────────────────────────────────────────────── */ @import url('https://api.fontshare.com/v2/css?f[]=erode@400,500,600,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); /* ═══════════════════════════════════════════════════════════════════════ GLOBAL EDITORIAL TOKEN OVERRIDES These reshape the entire tools site palette + type — applied to so they cascade everywhere. ═══════════════════════════════════════════════════════════════════════ */ body { /* Cream-paper palette (light) ─────────────────────────────────────── */ --bg-base: #f5f1ea; --bg-primary: #efe9df; --bg-secondary: #e8e1d4; --bg-tertiary: #ddd5c4; --bg-elevated: #ffffff; --bg-overlay: rgba(245, 241, 234, 0.94); --text-primary: #161413; --text-secondary: #4a4641; --text-muted: #8a847a; --text-disabled: #b8b2a6; --border-subtle: rgba(22, 20, 19, 0.06); --border-default: rgba(22, 20, 19, 0.12); --border-hover: rgba(22, 20, 19, 0.24); --border-active: rgba(22, 20, 19, 0.36); /* Editorial vars ─────────────────────────────────────────────────── */ --ed-ink: #161413; --ed-ink-soft: #4a4641; --ed-ink-mute: #8a847a; --ed-paper: #f5f1ea; --ed-paper-deep: #ebe4d6; --ed-rule: 1px solid var(--ed-ink); --ed-hair: 1px solid rgba(22, 20, 19, 0.18); --ed-gutter: clamp(1.25rem, 3.5vw, 3.5rem); --ed-serif: 'Erode', 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --ed-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --ed-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Reroute display/body/mono fonts so old class names get editorial type */ --font-display: var(--ed-serif); --font-body: var(--ed-sans); --font-mono: var(--ed-mono); background: var(--ed-paper); color: var(--ed-ink); font-family: var(--ed-sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Dark theme overrides — restores warm ink-on-paper feel inverted ───── */ [data-theme="dark"] body { --bg-base: #21201d; --bg-primary: #272623; --bg-secondary: #2e2d29; --bg-tertiary: #383632; --bg-elevated: #3d3b36; --bg-overlay: rgba(33, 32, 29, 0.94); --text-primary: #f5f1ea; --text-secondary: #b8b2a6; --text-muted: #706b60; --text-disabled: #4a4641; --border-subtle: rgba(245, 241, 234, 0.05); --border-default: rgba(245, 241, 234, 0.10); --border-hover: rgba(245, 241, 234, 0.18); --border-active: rgba(245, 241, 234, 0.28); --ed-ink: #f5f1ea; --ed-ink-soft: #b8b2a6; --ed-ink-mute: #706b60; --ed-paper: #21201d; --ed-paper-deep: #1a1917; --ed-rule: 1px solid var(--ed-ink); --ed-hair: 1px solid rgba(255, 255, 255, 0.12); } /* ── Hide the cinematic dark-mode decoration layers ───────────────────── */ .fixed-grid, .ambient-splashes { display: none !important; } /* Soft paper grain — replaces the loud film-grain overlay ─────────────── */ .grain-overlay { opacity: 0.5 !important; mix-blend-mode: multiply !important; z-index: 0 !important; background-image: url("data:image/svg+xml;utf8,") !important; } [data-theme="dark"] .grain-overlay { mix-blend-mode: screen !important; opacity: 0.3 !important; } /* ═══════════════════════════════════════════════════════════════════════ SITE NAVIGATION — restyled to editorial ═══════════════════════════════════════════════════════════════════════ */ /* Editorial flat strip only in the non-scrolled state — once `.site-nav--compact` is added (>50px scroll), main.css's floating glass pill takes over. */ .site-nav:not(.site-nav--compact) { background: var(--ed-paper); box-shadow: none; border-bottom: var(--ed-hair); } [data-theme="dark"] .site-nav:not(.site-nav--compact) { background: var(--ed-paper); } .site-nav .nav-name { font-family: var(--ed-serif) !important; font-weight: 500; font-style: italic; color: var(--ed-ink) !important; letter-spacing: 0; } .site-nav .nav-section, .site-nav .nav-section-label { color: var(--ed-ink-soft) !important; font-family: var(--ed-sans); } .site-nav .nav-section.active, .site-nav .nav-section:hover { color: var(--ed-ink) !important; } .site-nav .nav-social, .site-nav .nav-login-btn, .site-nav .nav-theme { color: var(--ed-ink) !important; background: transparent !important; border-color: var(--border-default) !important; } .site-nav .nav-social:hover, .site-nav .nav-login-btn:hover, .site-nav .nav-theme:hover { background: color-mix(in srgb, var(--ed-ink) 6%, transparent) !important; border-color: var(--border-hover) !important; } .site-nav .nav-separator { background: var(--border-default) !important; } .site-nav .nav-login-label { font-family: var(--ed-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; } /* ═══════════════════════════════════════════════════════════════════════ PAGE SHELL ═══════════════════════════════════════════════════════════════════════ */ .main-content { position: relative; z-index: 1; } .page-content { max-width: 1100px; margin: 0 auto; padding: calc(var(--header-height, 80px) + 2.5rem) var(--ed-gutter) 2rem; } /* ═══════════════════════════════════════════════════════════════════════ EDITORIAL PRIMITIVES — shared classes reusable across tool pages ═══════════════════════════════════════════════════════════════════════ */ /* Top masthead strip — quiet meta line above the title ───────────────── */ .ed-masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0 0.6rem; border-bottom: var(--ed-rule); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); font-family: var(--ed-mono); font-size: clamp(0.66rem, 0.78vw, 0.74rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-ink-soft); transform-origin: left center; } .ed-masthead__left, .ed-masthead__right { display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: nowrap; white-space: nowrap; } .ed-masthead__sep { color: var(--ed-ink-mute); } /* Eyebrow rule — short tick + uppercase label, above page titles ─────── */ .ed-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--ed-mono); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ed-ink-mute); margin-bottom: 1rem; } .ed-eyebrow__line { display: inline-block; width: 32px; height: 1px; background: var(--ed-ink); } /* Display heading + subhead ──────────────────────────────────────────── */ .ed-display { font-family: var(--ed-serif); font-weight: 500; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 0.92; letter-spacing: -0.025em; color: var(--ed-ink); margin: 0 0 0.5rem; } .ed-subhead { font-family: var(--ed-serif); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.4; color: var(--ed-ink-soft); margin: 0; max-width: 52ch; } /* Section heading — small mono uppercase tag ─────────────────────────── */ .ed-heading { font-family: var(--ed-mono); font-weight: 500; font-size: clamp(0.68rem, 0.78vw, 0.78rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ed-ink-mute); margin: 0 0 0.55rem; } /* Rule divider ──────────────────────────────────────────────────────── */ .ed-rule { border: none; border-top: var(--ed-rule); margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); transform-origin: left center; } /* ═══════════════════════════════════════════════════════════════════════ HUB HERO (landing) — restyled ═══════════════════════════════════════════════════════════════════════ */ .hub-hero { margin-bottom: clamp(2rem, 4vw, 3rem); animation: none; } .hub-hero-text { flex-shrink: 0; } .hub-hero-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .hub-hero-eyebrow-line { width: 32px; height: 1px; background: var(--ed-ink); border-radius: 0; filter: none; } .hub-hero-eyebrow-line::after { display: none; } .hub-hero-eyebrow-label { font-family: var(--ed-mono); font-size: 0.7rem; font-weight: 500; color: var(--ed-ink-mute); letter-spacing: 0.32em; text-transform: uppercase; } .hub-hero-title { font-family: var(--ed-serif); font-size: clamp(3.5rem, 9vw, 6rem); font-weight: 500; letter-spacing: -0.025em; line-height: 0.92; margin: 0 0 0.5rem; color: var(--ed-ink); } .hub-hero-desc { font-family: var(--ed-serif); font-style: italic; font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ed-ink-soft); max-width: 38ch; line-height: 1.45; } /* ═══════════════════════════════════════════════════════════════════════ HUB TABS — flat editorial tabs (text + count) ═══════════════════════════════════════════════════════════════════════ */ .hub-tabs { position: static; margin: 0; padding: 0; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: var(--ed-hair); border-top: var(--ed-hair); animation: none; } .hub-tabs-track { gap: 0; padding: 0; } .hub-tab { padding: 0.45rem 0.95rem; border-radius: 0; border: none; border-right: var(--ed-hair); background: transparent; font-family: var(--ed-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-ink-mute); transition: color var(--transition-fast); } .hub-tab:last-child { border-right: none; } .hub-tab-icon { display: none; } /* Favorites filter tab — show its star inline before the label. */ .hub-tab--fav .hub-tab-icon { display: inline-block; margin-right: 0.4em; font-size: 0.92em; vertical-align: -0.06em; color: inherit; } .hub-tab-count { background: transparent; color: var(--ed-ink-mute); font-family: var(--ed-mono); font-size: 0.6rem; padding: 0 0 0 0.3rem; letter-spacing: 0.1em; } .hub-tab:hover { background: transparent; color: var(--ed-ink); } .hub-tab.active { background: transparent; color: var(--ed-ink); border-right: var(--ed-hair); box-shadow: inset 0 -1px 0 0 var(--ed-ink); } .hub-tab.active:last-child { border-right: none; } .hub-tab.active .hub-tab-count { background: transparent; color: var(--ed-ink); } .hub-tab.active .hub-tab-icon { color: var(--ed-ink); } /* ═══════════════════════════════════════════════════════════════════════ HUB GRID — bento grid with variable card spans ═══════════════════════════════════════════════════════════════════════ */ .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; animation: none; } /* Grid spans live on .tool-card-wrap — it is the real grid item (the inner .tool-card is an wrapped so the favorite button can sit outside the anchor). */ .tool-card-wrap[data-cols="2"] { grid-column: span 2; } .tool-card-wrap[data-cols="3"] { grid-column: span 3; } .tool-card-wrap[data-rows="2"] { grid-row: span 2; } /* ═══════════════════════════════════════════════════════════════════════ TOOL CARD — editorial card with large background icon ═══════════════════════════════════════════════════════════════════════ */ .tool-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.4rem; min-height: 180px; background: color-mix(in srgb, var(--ed-ink) 2.5%, transparent); border: var(--ed-hair); border-radius: 8px; text-decoration: none; overflow: hidden; color: var(--ed-ink); animation: none; transition: background-color 300ms ease, transform 350ms cubic-bezier(.22,1,.36,1), box-shadow 350ms cubic-bezier(.22,1,.36,1); } .tool-card::before { display: none; } .tool-card:hover { background: color-mix(in srgb, var(--ed-ink) 5%, transparent); border-color: rgba(22, 20, 19, 0.26); box-shadow: 0 8px 28px rgba(22, 20, 19, 0.07); } [data-theme="dark"] .tool-card { background: color-mix(in srgb, var(--ed-ink) 3%, transparent); } [data-theme="dark"] .tool-card:hover { background: color-mix(in srgb, var(--ed-ink) 6%, transparent); border-color: rgba(245, 241, 234, 0.14); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); } /* ── Background icon (large decorative Remix Icon) ─────────────────── */ .card-bg-icon { position: absolute; bottom: -12px; right: -8px; font-size: 6.5rem; line-height: 1; color: var(--ed-ink); opacity: 0.04; pointer-events: none; transition: opacity 400ms ease, transform 500ms cubic-bezier(.22,1,.36,1); z-index: 0; } .tool-card:hover .card-bg-icon { opacity: 0.08; transform: scale(1.08) rotate(-4deg); } [data-theme="dark"] .card-bg-icon { opacity: 0.035; } [data-theme="dark"] .tool-card:hover .card-bg-icon { opacity: 0.07; } /* Wide cards: bigger background icon */ .tool-card[data-cols="2"] .card-bg-icon { font-size: 8rem; bottom: -16px; right: 8px; } /* ── Content layout ────────────────────────────────────────────────── */ .tool-card .card-content { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; z-index: 1; flex: 1; } /* ── Icon (inline, functional) ─────────────────────────────────────── */ .tool-card .card-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ed-ink) 5%, transparent); border: var(--ed-hair); border-radius: 10px; margin-bottom: 0; transition: transform 300ms cubic-bezier(.22,1,.36,1), background 300ms ease; } .tool-card .card-icon::before { display: none; } .tool-card .card-icon i { font-size: 1.2rem; color: var(--ed-ink); transition: transform 300ms cubic-bezier(.22,1,.36,1); } .tool-card:hover .card-icon { background: color-mix(in srgb, var(--ed-ink) 8%, transparent); transform: translateY(-1px); } .tool-card:hover .card-icon i { transform: scale(1.08); } /* ── Text ──────────────────────────────────────────────────────────── */ .tool-card .card-text { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; } .tool-card .card-title { position: relative; display: inline; font-family: var(--ed-serif); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.005em; line-height: 1.2; color: var(--ed-ink); margin: 0; background-image: linear-gradient(var(--ed-ink), var(--ed-ink)); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size 350ms cubic-bezier(.22,1,.36,1); padding-bottom: 1px; } .tool-card:hover .card-title { color: var(--ed-ink); background-size: 100% 1px; } .tool-card .card-subtitle { font-family: var(--ed-sans); font-size: 0.82rem; font-weight: 400; color: var(--ed-ink-soft); line-height: 1.5; margin: 0; } /* ── Tags (card-meta) ──────────────────────────────────────────────── */ .card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.75rem; } .card-tag { font-family: var(--ed-mono); font-size: 0.58rem; font-weight: 500; color: var(--ed-ink-mute); padding: 1px 0; background: transparent; border: none; border-radius: 0; letter-spacing: 0.12em; text-transform: uppercase; transition: color 200ms ease; } .card-tag:not(:last-child)::after { content: '·'; margin-left: 0.4rem; color: var(--ed-ink-mute); } .tool-card:hover .card-tag { color: var(--ed-ink-soft); } /* ── Arrow indicator (bottom-right; top-right is the favorite star) ──── */ .tool-card .card-arrow { position: absolute; bottom: 1.2rem; right: 1.2rem; width: auto; height: auto; background: transparent; border: none; opacity: 0; transform: translateX(-6px); transition: opacity 280ms ease, transform 280ms cubic-bezier(.22,1,.36,1); z-index: 2; } .tool-card .card-arrow i { font-size: 1rem; color: var(--ed-ink); } .tool-card:hover .card-arrow { opacity: 1; transform: translateX(0); } .tool-card:hover .card-arrow i { transform: none; } /* ── Card wrap + favorite star ───────────────────────────────────────── The wrap is the grid item; the inner .tool-card fills it so cards in the same row share a height. The favorite button is positioned to the wrap (it can't live inside the card). */ .tool-card-wrap { --fav: 32px; /* favorite button size */ --fav-gap: 7px; /* breathing room on the carved (bottom + left) edges */ --notch: calc(var(--fav) + var(--fav-gap)); /* carved square size */ --notch-r: 9px; /* radius of the carved inner corner */ position: relative; display: flex; min-width: 0; transition: transform 350ms cubic-bezier(.22, 1, .36, 1); } /* Lift the whole unit (card + carved patch + button) together on hover. Scoped + higher specificity than hub.css's .tool-card:hover lift, which cascades after editorial (hub.css @imports editorial at its top). */ .page-tools--editorial .tool-card-wrap:hover { transform: translateY(-6px); } /* Stop the card lifting on its own — the wrap already carries the card, the carved patch and the favorite button, so they all move together. */ .page-tools--editorial .tool-card-wrap:hover .tool-card { transform: none; } .tool-card-wrap .tool-card { flex: 1; width: 100%; } /* A square is "carved" out of the top-right corner: a page-coloured patch covers the corner, drawing a hairline only on the two carved edges (left + bottom). Top & right read as open, so the corner looks removed; the favorite star nests inside the pit (see .card-fav). */ .tool-card-wrap::before { content: ""; position: absolute; top: 0; right: 0; z-index: 2; width: var(--notch); height: var(--notch); background: var(--ed-paper); border-left: var(--ed-hair); border-bottom: var(--ed-hair); border-bottom-left-radius: var(--notch-r); pointer-events: none; } /* Favorite button — a real button nested in the carved pit, hugging its open (top-right) corner. It carries the card's OWN material: a faint ink tint + the standard editorial hairline. The old button used the page/paper colour instead, which read as a mismatched patch — and in dark mode resolved to the light paper value, so it looked like a pale box on a dark card. Ink-based tints track the theme correctly. */ .card-fav { position: absolute; top: 0; right: 0; z-index: 3; width: var(--fav); height: var(--fav); display: grid; place-items: center; padding: 0; font-size: 0.95rem; line-height: 1; color: var(--ed-ink-mute); background: color-mix(in srgb, var(--ed-ink) 5%, transparent); border: var(--ed-hair); border-radius: 6px; cursor: pointer; transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 160ms cubic-bezier(.22,1,.36,1); } .card-fav:hover { color: var(--ed-ink); background: color-mix(in srgb, var(--ed-ink) 9%, transparent); border-color: color-mix(in srgb, var(--ed-ink) 30%, transparent); } .card-fav:focus-visible { outline: 2px solid var(--ed-ink); outline-offset: 2px; } .card-fav:active { transform: scale(0.9); } .card-fav[aria-pressed="true"] { color: var(--ed-ink); background: color-mix(in srgb, var(--ed-ink) 12%, transparent); border-color: color-mix(in srgb, var(--ed-ink) 35%, transparent); } .card-fav[aria-pressed="true"] i { animation: card-fav-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes card-fav-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } /* ── Favorite burst — ink star + hairline ring + spark particles ────── A star springs in the card centre, a thin ring expands behind it, and a ring of sparks sprays outward — all in the editorial ink palette. Injected by favorites.js, removed on animationend. Transform/opacity only, so it stays composited (60fps). */ .fav-burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .fav-burst__star { position: absolute; top: 50%; left: 50%; font-size: 3.4rem; line-height: 1; color: var(--ed-ink); transform: translate(-50%, -50%) scale(0.3); opacity: 0; will-change: transform, opacity; /* faint paper halo only — lifts the mark off busy card text, no glow */ filter: drop-shadow(0 1px 6px color-mix(in srgb, var(--ed-paper) 70%, transparent)); animation: fav-star 760ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .fav-burst__ring { position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ed-ink) 32%, transparent); transform: translate(-50%, -50%) scale(0.2); opacity: 0; will-change: transform, opacity; animation: fav-ring 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .fav-burst__spark { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--ed-ink) 55%, transparent); opacity: 0; will-change: transform, opacity; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.4); animation: fav-spark 660ms cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms) forwards; } @keyframes fav-star { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(0.94); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); } } @keyframes fav-ring { 0% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } } @keyframes fav-spark { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0.9); } } @media (prefers-reduced-motion: reduce) { .fav-burst__star, .fav-burst__ring, .fav-burst__spark { animation-duration: 1ms; } } /* ── Filter animation ──────────────────────────────────────────────── */ .tool-card-wrap.card-hidden, .tool-card.card-hidden { opacity: 0; transform: scale(0.96); pointer-events: none; position: absolute; width: 0; height: 0; overflow: hidden; margin: 0; padding: 0; border: none; min-height: 0; } /* ═══════════════════════════════════════════════════════════════════════ EMPTY STATE ═══════════════════════════════════════════════════════════════════════ */ .hub-empty { padding: clamp(2.5rem, 6vw, 4.5rem) var(--ed-gutter); text-align: center; } .hub-empty-icon { width: auto; height: auto; margin: 0 auto 1rem; background: transparent; border: none; font-size: 2rem; color: var(--ed-ink-mute); } .hub-empty-icon i { font-size: 2rem; color: var(--ed-ink-mute); } .hub-empty-title { font-family: var(--ed-serif); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--ed-ink); margin: 0 0 0.5rem; } .hub-empty-desc { font-family: var(--ed-sans); font-size: 0.9rem; color: var(--ed-ink-soft); margin-bottom: 1.25rem; } /* ═══════════════════════════════════════════════════════════════════════ TOOL PAGE — header, container, form chrome ═══════════════════════════════════════════════════════════════════════ */ .tool-page { --accent: var(--ed-ink); color: var(--ed-ink); } .tool-container { max-width: 760px; margin: 0 auto; } .tool-back { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--ed-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ed-ink-mute); text-decoration: none; margin-bottom: 1.5rem; transition: color var(--transition-fast); } .tool-back:hover { color: var(--ed-ink); } .tool-back i { font-size: 0.9rem; } .tool-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-bottom: 1.25rem; border-bottom: var(--ed-rule); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .tool-header .tool-icon { width: auto; height: auto; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0; margin-bottom: 0.25rem; color: var(--ed-ink) !important; } .tool-header .tool-icon i { font-size: 1.6rem; color: var(--ed-ink) !important; } .tool-title { font-family: var(--ed-serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.0; letter-spacing: -0.02em; color: var(--ed-ink); margin: 0; } .tool-subtitle { font-family: var(--ed-serif); font-style: italic; font-weight: 400; font-size: clamp(0.95rem, 1.4vw, 1.15rem); color: var(--ed-ink-soft); line-height: 1.45; margin: 0.4rem 0 0; max-width: 54ch; } /* ── Forms (used by individual tool pages) ────────────────────────────── */ .tool-form { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-label { font-family: var(--ed-mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ed-ink-mute); } .form-input, .form-select, .form-textarea, input[type="text"].form-input, input[type="number"].form-input, input[type="email"].form-input, input[type="url"].form-input, input[type="password"].form-input, textarea.form-textarea, select.form-select { width: 100%; padding: 0.7rem 0.9rem; font-family: var(--ed-sans); font-size: 0.95rem; color: var(--ed-ink); background: var(--ed-paper-deep); border: var(--ed-hair); border-radius: 4px; outline: none; transition: border-color var(--transition-fast), background var(--transition-fast); } [data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea { background: var(--bg-secondary); } .form-input::placeholder, .form-textarea::placeholder { color: var(--ed-ink-mute); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--ed-ink); background: var(--ed-paper); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .form-textarea:focus { background: var(--bg-tertiary); } .form-hint { font-family: var(--ed-mono); font-size: 0.66rem; color: var(--ed-ink-mute); letter-spacing: 0.06em; } /* ── Dropzone ─────────────────────────────────────────────────────────── */ .file-dropzone { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 4vw, 3rem) 1.5rem; background: transparent; border: 1px dashed var(--ed-ink); border-radius: 4px; cursor: pointer; transition: background 200ms ease, border-color 200ms ease; } .file-dropzone:hover, .file-dropzone--drag { background: color-mix(in srgb, var(--ed-ink) 5%, transparent); } .file-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .file-dropzone-content { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; pointer-events: none; } .file-dropzone-icon { font-size: 2rem; color: var(--ed-ink); } .file-dropzone-text { font-family: var(--ed-serif); font-weight: 500; font-size: 1.1rem; color: var(--ed-ink); } .file-dropzone-hint { font-family: var(--ed-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ed-ink-mute); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.25rem; font-family: var(--ed-mono); font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; color: var(--ed-ink); background: transparent; border: 1px solid var(--ed-ink); border-radius: 4px; cursor: pointer; transition: background 200ms ease, color 200ms ease, opacity 200ms ease; } .btn:hover { background: var(--ed-ink); color: var(--ed-paper); } .btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; } .btn:disabled:hover { background: transparent; color: var(--ed-ink); } .btn i { font-size: 0.95rem; } .btn--primary { background: var(--ed-ink); color: var(--ed-paper); } .btn--primary:hover { background: transparent; color: var(--ed-ink); } [data-theme="dark"] .btn--primary { background: var(--ed-ink); color: var(--ed-paper); } .btn--success { background: var(--ed-ink); color: var(--ed-paper); border-color: var(--ed-ink); } .btn--success:hover { background: transparent; color: var(--ed-ink); } .btn--ghost { background: transparent; color: var(--ed-ink-soft); border-color: var(--border-default); } .btn--ghost:hover { color: var(--ed-ink); background: transparent; border-color: var(--ed-ink); } /* ── Progress ─────────────────────────────────────────────────────────── */ .progress { display: none; flex-direction: column; gap: 0.5rem; } .progress.active { display: flex; } .progress-bar { width: 100%; height: 2px; background: var(--border-default); overflow: hidden; } .progress-bar-fill { height: 100%; width: 0%; background: var(--ed-ink); transition: width 240ms cubic-bezier(.22,1,.36,1); } .progress-text { font-family: var(--ed-mono); font-size: 0.7rem; color: var(--ed-ink-mute); text-transform: uppercase; letter-spacing: 0.18em; margin: 0; } /* ── Result card ──────────────────────────────────────────────────────── */ .result-card { display: none; flex-direction: column; gap: 1rem; padding: 1.25rem 1.25rem; background: transparent; border: var(--ed-rule); border-radius: 4px; } .result-card.active { display: flex; } .result-header { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.75rem; border-bottom: var(--ed-hair); } .result-header i { font-size: 1.1rem; color: var(--ed-ink); } .result-title { font-family: var(--ed-serif); font-weight: 500; font-size: 1.05rem; color: var(--ed-ink); } .result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* ── File list (pdf-merge etc) ───────────────────────────────────────── */ .merge-file-list-container { display: none; flex-direction: column; gap: 0.5rem; padding: 1rem; background: transparent; border: var(--ed-hair); border-radius: 4px; } .merge-file-list-container.active { display: flex; } .merge-file-list-header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.5rem; border-bottom: var(--ed-hair); } .merge-file-count { font-family: var(--ed-mono); font-size: 0.66rem; color: var(--ed-ink-mute); text-transform: uppercase; letter-spacing: 0.18em; } .merge-file-list { display: flex; flex-direction: column; } .merge-file-list .file-item, .merge-file-list > div { border-bottom: var(--ed-hair); } .merge-file-list > div:last-child { border-bottom: none; } .merge-file-hint { font-family: var(--ed-mono); font-size: 0.65rem; color: var(--ed-ink-mute); letter-spacing: 0.06em; margin: 0; } /* ═══════════════════════════════════════════════════════════════════════ ENTRANCE ANIMATION HOOKS — reused from main site ═══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { .ed-anim-rule { transform: scaleX(0); transition: transform 600ms cubic-bezier(.22,1,.36,1); } .ed-anim-rise { opacity: 0; transform: translateY(12px); transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); } .ed-anim-card { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); } .ed-anim-rule.is-in { transform: scaleX(1); } .ed-anim-rise.is-in { opacity: 1; transform: translateY(0); } .ed-anim-card.is-in { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ed-anim-rule, .ed-anim-rise, .ed-anim-card { transform: none !important; opacity: 1 !important; } } /* ═══════════════════════════════════════════════════════════════════════ COLOPHON — bottom signature line ═══════════════════════════════════════════════════════════════════════ */ .ed-colophon { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.6rem; padding: 2.5rem 0 2rem; margin-top: clamp(2rem, 4vw, 3.5rem); border-top: var(--ed-hair); font-family: var(--ed-mono); font-size: clamp(0.66rem, 0.74vw, 0.74rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ed-ink-soft); } .ed-colophon__name { display: inline-block; padding-bottom: 0.4rem; border-bottom: 1px solid var(--ed-ink); } .ed-colophon__socials { display: flex; gap: 1rem; } .ed-colophon__socials a { color: var(--ed-ink-soft); font-size: 1rem; text-decoration: none; transition: color var(--transition-fast); } .ed-colophon__socials a:hover { color: var(--ed-ink); } /* ═══════════════════════════════════════════════════════════════════════ LEGAL PAGES — editorial typography overrides ═══════════════════════════════════════════════════════════════════════ */ .legal-page { max-width: 720px; margin: 0 auto; background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; } .legal-page .back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--ed-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ed-ink-mute); text-decoration: none; margin-bottom: 1.5rem; background: transparent; border: none; padding: 0; transition: color var(--transition-fast); } .legal-page .back-link:hover { color: var(--ed-ink); background: transparent; } .legal-header { padding-bottom: 1.25rem; border-bottom: var(--ed-rule); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .legal-title { font-family: var(--ed-serif); font-weight: 500; font-size: clamp(2.4rem, 5.5vw, 3.6rem); line-height: 1.0; letter-spacing: -0.02em; color: var(--ed-ink); margin: 0 0 0.4rem; } .legal-updated { font-family: var(--ed-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ed-ink-mute); margin: 0; } .legal-content { font-family: var(--ed-sans); font-size: 1rem; line-height: 1.7; color: var(--ed-ink); } .legal-section { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); } .legal-section h2 { font-family: var(--ed-serif); font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.45rem); color: var(--ed-ink); margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: var(--ed-hair); letter-spacing: -0.005em; } .legal-section p { font-family: var(--ed-sans); color: var(--ed-ink-soft); margin: 0 0 0.85rem; } .legal-section p:last-child { margin-bottom: 0; } .legal-section ul { list-style: none; margin: 0 0 0.85rem; padding: 0; } .legal-section li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; color: var(--ed-ink-soft); } .legal-section li::before { content: '·'; position: absolute; left: 0; color: var(--ed-ink-mute); font-weight: 700; } .legal-section a { color: var(--ed-ink); text-decoration: underline; text-decoration-color: var(--ed-ink-mute); text-underline-offset: 2px; transition: text-decoration-color 180ms ease; } .legal-section a:hover { text-decoration-color: var(--ed-ink); } .legal-section strong { color: var(--ed-ink); font-weight: 600; } .legal-address { font-style: normal; padding: 0.85rem 1rem; background: color-mix(in srgb, var(--ed-ink) 4%, transparent); border-left: 2px solid var(--ed-ink); margin: 0.5rem 0; font-family: var(--ed-sans); color: var(--ed-ink); } .legal-warning { display: flex; gap: 0.75rem; padding: 1rem 1.1rem; background: color-mix(in srgb, var(--ed-ink) 5%, transparent); border-left: 2px solid var(--ed-ink); margin: 0.5rem 0; } .legal-warning > i { font-size: 1.1rem; color: var(--ed-ink); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════ FOOTER — hide the dark cinematic footer when editorial colophon shown ═══════════════════════════════════════════════════════════════════════ */ .site-footer { background: var(--ed-paper); border-top: var(--ed-hair); color: var(--ed-ink-soft); } .site-footer a { color: var(--ed-ink-soft); } .site-footer a:hover { color: var(--ed-ink); } /* ═══════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } .tool-card-wrap[data-cols="3"] { grid-column: span 2; } } @media (max-width: 640px) { .page-content { padding: calc(var(--header-height, 80px) + 1.25rem) 1.25rem 1.5rem; } .hub-hero-title { font-size: clamp(2.6rem, 12vw, 4rem); } .tool-title { font-size: clamp(1.8rem, 8vw, 2.6rem); } .hub-grid { grid-template-columns: 1fr; gap: 8px; } .tool-card-wrap[data-cols="2"], .tool-card-wrap[data-cols="3"] { grid-column: span 1; } .tool-card-wrap[data-rows="2"] { grid-row: span 1; } .tool-card { min-height: 150px; } .card-bg-icon { font-size: 5rem; bottom: -8px; right: -4px; } .tool-card[data-cols="2"] .card-bg-icon { font-size: 5rem; } .ed-masthead { font-size: 0.6rem; letter-spacing: 0.14em; } .ed-colophon { font-size: 0.62rem; letter-spacing: 0.16em; } }