/* Sin Filtro — Design System (concatenated for propshaft). Source: SF Design System zip. */ /* ============================================================ FONTS — Sin Filtro Display serif : DM Serif Display (mastheads, big headlines) Reading serif : Newsreader (body, long-form prose) Mono : IBM Plex Mono (numbers, dates, datelines, tags, receipts) These are the real families (Google Fonts). If you self-host, drop the binaries beside this file and replace the @import. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap'); /* ============================================================ COLOR — Sin Filtro Ink-on-cream is the default. Oxblood is a SIGNAL, not a theme. Two surfaces: cream paper (light) and paper-deep (dark editorial). ============================================================ */ :root { /* ---- Raw palette (anchor tokens — do not drift) ---- */ --color-paper: #F4ECD9; /* cream paper, default surface */ --color-paper-2: #EFE6CF; /* paper, one step deeper (insets, wells) */ --color-paper-3: #E7DCC0; /* paper, sunken / hover field */ --color-paper-deep: #2A2620; /* dark editorial surface */ --color-paper-deep-2:#221E19;/* dark surface, sunken */ --color-ink: #1A1611; /* primary text */ --color-ink-2: #3D362C; /* secondary text */ --color-ink-3: #6E6354; /* muted / meta */ --color-ink-4: #968874; /* faint / disabled */ --color-accent: #A8331C; /* oxblood — "live", shipped, the signal */ --color-accent-2: #8B2614; /* oxblood pressed / hover */ --color-accent-tint:#E9D9CA; /* oxblood wash on cream (rare fill) */ --color-gold: #B8902F; /* rare honorific accent — use sparingly */ --color-rule: #C9BC9F; /* hairline rules / borders */ --color-rule-2: #DBD0B6; /* faint rule on cream */ --color-rule-strong:#1A1611; /* full-ink rule (mastheads, emphasis) */ /* On-dark ink ramp (for paper-deep surfaces) */ --color-paper-ink: #F4ECD9; /* primary text on dark */ --color-paper-ink-2: #CFC4AC; /* secondary on dark */ --color-paper-ink-3: #9A8E78; /* muted on dark */ --color-paper-rule: #4A4136; /* hairline on dark */ /* ---- Semantic aliases (light is default) ---- */ --surface: var(--color-paper); --surface-sunken: var(--color-paper-2); --surface-well: var(--color-paper-3); --surface-inverse: var(--color-paper-deep); --text: var(--color-ink); --text-2: var(--color-ink-2); --text-muted: var(--color-ink-3); --text-faint: var(--color-ink-4); --text-on-inverse: var(--color-paper-ink); --signal: var(--color-accent); --signal-pressed: var(--color-accent-2); --honor: var(--color-gold); --rule: var(--color-rule); --rule-faint: var(--color-rule-2); --rule-ink: var(--color-rule-strong); --selection-bg: var(--color-accent); --selection-fg: var(--color-paper); } /* ---- Dark mode: paper-deep surface ---- Apply with or .theme-dark wrapper. Oxblood stays the same signal; ink ramp flips to the cream ramp. */ [data-theme="dark"], .theme-dark { --surface: var(--color-paper-deep); --surface-sunken: var(--color-paper-deep-2); --surface-well: #1C1813; --surface-inverse: var(--color-paper); --text: var(--color-paper-ink); --text-2: var(--color-paper-ink-2); --text-muted: var(--color-paper-ink-3); --text-faint: #6E6354; --text-on-inverse: var(--color-ink); --signal: #C24A30; /* oxblood lifts slightly to hold on dark */ --signal-pressed: var(--color-accent); --rule: var(--color-paper-rule); --rule-faint: #3A332A; --rule-ink: var(--color-paper-ink); --selection-bg: #C24A30; --selection-fg: var(--color-paper-deep); } ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* ============================================================ TYPOGRAPHY — Sin Filtro Three voices: display = DM Serif Display (mastheads, headlines, N.º numbering) serif = Newsreader (reading — body & long-form) mono = IBM Plex Mono (numbers, dates, datelines, tags, receipts) Scale is a print-journal scale: large headlines, generous reading body. ============================================================ */ :root { /* ---- Families ---- */ --font-display: 'DM Serif Display', 'Newsreader', Georgia, 'Times New Roman', serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ---- Weights ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; /* ---- Type scale (px-based, print-journal proportions) ---- */ --text-7xl: 5.5rem; /* 88 — masthead wordmark / theme hero */ --text-6xl: 4rem; /* 64 — page-one headline */ --text-5xl: 3rem; /* 48 — headline */ --text-4xl: 2.25rem; /* 36 — sub-headline */ --text-3xl: 1.75rem; /* 28 — section head */ --text-2xl: 1.375rem; /* 22 — standfirst / deck */ --text-xl: 1.1875rem;/* 19 — large body */ --text-lg: 1.0625rem;/* 17 — body */ --text-md: 0.9375rem;/* 15 — small body */ --text-sm: 0.8125rem;/* 13 — meta / captions */ --text-xs: 0.6875rem;/* 11 — micro labels, tag chips */ /* ---- Line heights ---- */ --leading-tight: 1.04; /* display headlines */ --leading-snug: 1.18; /* sub-heads */ --leading-normal: 1.6; /* reading body (Newsreader) */ --leading-relaxed: 1.72; /* long-form body */ --leading-mono: 1.5; /* mono blocks */ /* ---- Tracking (mono labels want air; serif wants none) ---- */ --tracking-tag: 0.14em; /* uppercase mono tag chips / kickers */ --tracking-meta: 0.06em; /* datelines / meta mono */ --tracking-tight: -0.01em; /* large display */ --tracking-normal: 0; /* ---- Semantic roles ---- */ --type-masthead: var(--weight-regular) var(--text-7xl)/var(--leading-tight) var(--font-display); --type-headline: var(--weight-regular) var(--text-6xl)/var(--leading-tight) var(--font-display); --type-title: var(--weight-regular) var(--text-4xl)/var(--leading-snug) var(--font-display); --type-deck: var(--weight-regular) var(--text-2xl)/var(--leading-snug) var(--font-serif); --type-body: var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-serif); --type-meta: var(--weight-medium) var(--text-sm)/var(--leading-mono) var(--font-mono); } /* ============================================================ SPACING — Sin Filtro A column-friendly scale. Whitespace is structural here: depth comes from rules + space, never shadows. ============================================================ */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* ---- Measure (line length) ---- */ --measure-prose: 38rem; /* ~66ch reading column */ --measure-narrow: 28rem; /* pull-quotes, asides */ --measure-wide: 72rem; /* masthead / grid container */ /* ---- Gutters ---- */ --gutter: var(--space-6); --gutter-tight: var(--space-4); --page-margin: var(--space-7); } /* ============================================================ BORDERS & RULES — Sin Filtro Sharp corners only (0 radius). Hairline rules carry structure. NO shadows. Depth = rules + type scale + whitespace. ============================================================ */ :root { /* ---- Radius — sharp, always ---- */ --radius: 0; /* the only radius. corners are square. */ /* ---- Hairlines ---- */ --hairline: 1px solid var(--rule); --hairline-faint: 1px solid var(--rule-faint); --hairline-ink: 1px solid var(--rule-ink); --rule-thick: 2px solid var(--rule-ink); /* masthead top/bottom */ --rule-double: 3px double var(--rule-ink); /* section breaks */ --rule-signal: 2px solid var(--signal); /* oxblood dateline rule */ /* ---- Border widths ---- */ --bw-hair: 1px; --bw-rule: 2px; --bw-heavy:3px; /* ---- Focus ring (no glow, just an honest outline) ---- */ --focus-ring: 2px solid var(--signal); --focus-offset: 2px; /* ---- Explicitly: no shadow system. ---- */ --shadow-none: none; } /* ============================================================ MOTION — Sin Filtro Editorial restraint: fades and short slides. NO bounce, no spring, no overshoot. Things settle like ink, not like jelly. ============================================================ */ :root { --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* Eases: linear-ish and decelerating only. Never elastic. */ --ease-out: cubic-bezier(0.2, 0.0, 0.2, 1); /* @kind other */ --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */ --ease-std: ease; /* @kind other */ --transition-color: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); --transition-fade: opacity var(--dur-base) var(--ease-out); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; /* @kind other */ --dur-base: 0ms; /* @kind other */ --dur-slow: 0ms; /* @kind other */ } } /* ============================================================ BASE — Sin Filtro Minimal element defaults + a few editorial utilities. Imported last so it can consume the tokens above. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface); color: var(--text); font: var(--type-body); font-feature-settings: "liga" 1, "kern" 1, "onum" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Headings default to display serif ---- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); color: var(--text); margin: 0 0 var(--space-4); } h1 { font-size: var(--text-6xl); } h2 { font-size: var(--text-4xl); line-height: var(--leading-snug); } h3 { font-size: var(--text-3xl); line-height: var(--leading-snug); } h4 { font-size: var(--text-2xl); font-family: var(--font-serif); } p { margin: 0 0 var(--space-5); max-width: var(--measure-prose); } a { color: var(--signal); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); transition: var(--transition-color); } a:hover { color: var(--signal-pressed); border-bottom-color: var(--signal); } hr { border: 0; border-top: var(--hairline); margin: var(--space-6) 0; } /* ---- Mono helpers — datelines, numbers, tags, receipts ---- */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } .meta { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-meta); color: var(--text-muted); } .kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--signal); } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* ---- Container ---- */ .sf-container { max-width: var(--measure-wide); margin-inline: auto; padding-inline: var(--page-margin); } .sf-prose { max-width: var(--measure-prose); } /* ---- Dark editorial surface: display headings stay cream ---- Brand rule + safety net for inverse heroes (mastheads, theme heroes, newsletter/subscribe heroes) so a headline never sits dark-on-dark. Uses !important to win over component inline color while keeping the light/cream contrast guaranteed on any [data-theme="dark"] / .theme-dark scope. */ [data-theme="dark"] h1, [data-theme="dark"] h2, .theme-dark h1, .theme-dark h2 { color: var(--color-paper) !important; } /* ============================================================ COMPONENT LAYER — Sin Filtro (Rails port) Classes for the interactive/repeated primitives so hover & focus work server-rendered. Structure/layout stays inline in the ERB, faithful to the design-system components. ============================================================ */ .sf-wrap { max-width: var(--measure-wide); margin-inline: auto; padding-inline: var(--page-margin); } /* ---- Button: square, hairline-or-fill, no radius, no shadow ---- */ .sf-btn { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-weight: 500; letter-spacing: var(--tracking-tag); text-transform: uppercase; line-height: 1; white-space: nowrap; border-radius: 0; cursor: pointer; text-decoration: none; border: 1px solid transparent; padding: 0.7em 1.2em; font-size: var(--text-sm); transition: var(--transition-color), transform var(--dur-fast) var(--ease-out); } .sf-btn:active { transform: translateY(1px); } .sf-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .sf-btn--primary { background: var(--signal); color: var(--color-paper); border-color: var(--signal); } .sf-btn--primary:hover { background: var(--signal-pressed); color: var(--color-paper); } .sf-btn--outline { background: transparent; color: var(--text); border: var(--hairline-ink); } .sf-btn--outline:hover { background: var(--text); color: var(--color-paper); } .sf-btn--ghost { background: transparent; color: var(--signal); padding-inline: 0; } .sf-btn--ghost:hover { color: var(--signal-pressed); } .sf-btn--sm { padding: 0.5em 0.9em; font-size: var(--text-xs); } .sf-btn .sf-arrow { font-family: var(--font-serif); } /* ---- TagChip ---- */ .sf-tag { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-tag); text-transform: uppercase; line-height: 1; white-space: nowrap; padding: 0.42em 0.6em; border-radius: 0; text-decoration: none; border: 1px solid var(--rule); color: var(--text-2); background: transparent; transition: var(--transition-color); } .sf-tag--solid { color: var(--color-paper); background: var(--text); border-color: var(--text); } .sf-tag--live { color: var(--color-paper); background: var(--signal); border-color: var(--signal); } .sf-tag--ghost { color: var(--text-muted); border-color: transparent; padding-inline: 0; } a.sf-tag:hover { color: var(--signal); border-color: var(--signal); } a.sf-tag--solid.is-active { color: var(--color-paper); background: var(--text); border-color: var(--text); } .sf-tag--live .sf-livedot { width: 0.42em; height: 0.42em; background: var(--color-paper); display: inline-block; } /* ---- Masthead nav link ---- */ .sf-navlink { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: var(--transition-color); } .sf-navlink:hover { color: var(--signal); } .sf-navlink.is-active { color: var(--signal); border-bottom-color: var(--signal); } /* ---- Plain mono link (back links, "ver todo", footer) ---- */ .sf-meta-link { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-meta); color: var(--text-muted); text-transform: uppercase; text-decoration: none; border-bottom: none; transition: var(--transition-color); } .sf-meta-link:hover { color: var(--signal); } /* ---- List rows (diario / boletín / archive) become clickable blocks ---- */ a.sf-row { color: inherit; text-decoration: none; border-bottom: none; display: block; } a.sf-row:hover h3 { color: var(--signal); } /* ---- Long-form article body (markdown → html) ---- */ .sf-article-body { font-family: var(--font-serif); font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--text); } .sf-article-body > * { max-width: none; } .sf-article-body p { margin: 0 0 var(--space-5); max-width: none; } .sf-article-body h2 { margin: var(--space-7) 0 var(--space-4); font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-snug); } .sf-article-body h3 { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-display); font-size: var(--text-2xl); } .sf-article-body ul, .sf-article-body ol { margin: 0 0 var(--space-5); padding-left: 1.2em; } .sf-article-body li { margin-bottom: var(--space-2); } .sf-article-body a { border-bottom: 1px solid color-mix(in srgb, var(--signal) 35%, transparent); } .sf-article-body blockquote { margin: var(--space-7) 0; border-left: var(--rule-signal); padding-left: var(--space-5); font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-snug); color: var(--text); } .sf-article-body code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-sunken); padding: 0.1em 0.35em; } .sf-article-body pre { font-family: var(--font-mono); font-size: var(--text-md); background: var(--color-paper-deep); color: var(--color-paper-ink); padding: var(--space-5); overflow-x: auto; border-radius: 0; } .sf-article-body pre code { background: none; padding: 0; } .sf-article-body img { max-width: 100%; height: auto; border: var(--hairline); } .sf-article-body hr { border: 0; border-top: var(--hairline); margin: var(--space-7) 0; } /* ---- Subscribe form ---- */ .sf-subscribe { display: grid; gap: var(--space-2); max-width: 30rem; } .sf-subscribe .sf-field { display: flex; gap: 0; border: 1px solid var(--rule-ink); } .sf-subscribe input[type="email"] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 0.8em 1em; font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-meta); color: var(--text); } .sf-subscribe .sf-note { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-meta); color: var(--text-muted); } .sf-subscribe--inverse .sf-field { border-color: var(--color-paper-rule); } .sf-subscribe--inverse input[type="email"] { color: var(--color-paper-ink); } .sf-subscribe--inverse .sf-note { color: var(--color-paper-ink-3); } .sf-subscribe-done { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-meta); color: var(--signal); border-top: 2px solid var(--signal); padding-top: var(--space-3); } /* Drop cap on the opening paragraph of a long-form article body. */ .sf-dropcap-lead > p:first-of-type::first-letter { font-family: var(--font-display); float: left; font-size: 3.5em; line-height: 0.78; padding: 0.04em 0.14em 0 0; color: var(--signal); font-weight: 400; }