/* One Headlight — Blog Concept: the article's thesis is the gap between what a brand promises and what the consumer experiences. The design carries that gap: the brand's loud voice lives in the furniture (labels, chains, callouts), the author's voice lives in a calm reading column. Blue and yellow appear only where the argument turns. Enqueued only on blog views (is_home() / is_singular('post')), never on the front page — see functions.php. */ /* Loaded AFTER the theme's css/styles.css. Brand tokens (--azul, --amarillo, --display, --body) come from there; this file only adds the reading surface the marketing site has no equivalent for, and the site's own chrome — pills, fullscreen menu, brandmark ring, footer, language switcher — is inherited rather than reinvented. */ :root { /* The theme has no ink token — its text is white on blue. */ --ink: #111111; /* Paper is cool, not cream: the brand is blue, so the reading ground leans analytical rather than warm-editorial. */ --paper: #f7f8fb; --paper-pure: #ffffff; /* #6b6f8c cleared AA by 0.12 — too thin a margin for text this small. 5.75:1 on paper, 6.11:1 on white. */ --muted: #5c6080; /* Two greys, two jobs. --rule is decoration (section hairlines); anything that BOUNDS a component uses --rule-strong, which clears the 3:1 that WCAG 1.4.11 asks of UI boundaries (3.19:1 on paper, 3.39:1 on white). */ --rule: #e2e4ef; --rule-strong: #868aa6; --measure: 34rem; --gutter: clamp(1.25rem, 5vw, 3rem); --f-display: var(--display); --f-read: 'Newsreader', Georgia, serif; --f-ui: var(--body); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* The site's default canvas is blue with white text; the blog inverts it to a reading surface. Scoped to .blog so nothing leaks back into the theme. */ /* Paper is the page's ground, but the ink stops at the reading surface. Setting `color` on leaked dark text into the borrowed chrome: the footer's current-language "ES" is a , so it inherited ink and went near-black on the deep-blue footer. */ body.blog { background: var(--paper); } .blog main, .blog .toc { color: var(--ink); } /* The serif is the READING voice — it belongs to the article column, never to the site chrome. Menu, footer and pills keep the theme's Quicksand and the theme's own colours, so the blog does not restyle furniture it borrowed. */ .blog main { font-family: var(--f-read); font-size: 1.175rem; line-height: 1.68; font-optical-sizing: auto; } /* No blanket `a { color: inherit }` here: it outranked .crumb and .upnext__empty a and quietly repainted both. Every link in the reading surface names its own colour. */ .blog main a:not([class]) { color: var(--azul); } /* The theme's focus ring is yellow, which is right over blue and invisible over paper (~1.1:1). Blue on paper, yellow on the dark surfaces — same intent, legible on both grounds. */ .blog a:focus-visible, .blog button:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; } .menu a:focus-visible, .menu button:focus-visible, .footer a:focus-visible, .article__panel a:focus-visible, .feature__panel a:focus-visible, .test a:focus-visible { outline-color: var(--amarillo); } /* Chrome tucked away while reading down (see chrome.js). The brandmark keeps its own translateX(-50%) centring, so it gets its own transform. */ .blog .pill { transition: opacity .3s ease, transform .4s var(--ease-spring), box-shadow .25s ease; } .blog .pill.is-tucked { opacity: 0; pointer-events: none; transform: translateY(-96px); } .blog .brandmark.is-tucked { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-96px); } @media (prefers-reduced-motion: reduce) { .blog .pill, .blog .brandmark { transition: none; } } .skip { position: absolute; left: -9999px; top: 0; background: var(--azul); color: #fff; font-family: var(--f-ui); font-weight: 700; padding: .75rem 1rem; z-index: 400; } .skip:focus { left: 0; } /* ---------- Shared layout ---------- */ .wrap { padding-inline: var(--gutter); } .column { max-width: var(--measure); margin-inline: auto; } .eyebrow { font-family: var(--f-ui); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--azul); margin: 0 0 1rem; } .eyebrow--onblue { color: var(--amarillo); } /* ---------- Index: cover ---------- */ .cover { /* 7rem floor clears the fixed pill nav (26px top + 52px tall) */ padding: clamp(7rem, 12vw, 9rem) var(--gutter) clamp(2rem, 5vw, 3.5rem); max-width: 62rem; margin-inline: auto; } .cover__lede { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.45; max-width: 30rem; margin: 0; color: var(--ink); } .cover__lede em { font-style: normal; background: linear-gradient(transparent 62%, var(--amarillo) 62%); } /* ---------- Index: the featured essay ---------- */ .feature { max-width: 62rem; margin: 0 auto clamp(3rem, 8vw, 6rem); padding-inline: var(--gutter); display: block; text-decoration: none; color: inherit; } .feature__panel { background: var(--azul); color: #fff; padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem); position: relative; } .feature__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.1rem, 6.4vw, 4.4rem); line-height: .98; letter-spacing: -.02em; margin: 0; text-transform: uppercase; } /* The seam: the title's second half steps off the blue onto paper, shifted. Promise above, reality below, and the offset between them is the gap. */ .feature__seam { background: var(--paper-pure); border: 1px solid var(--rule-strong); border-top: 0; margin-top: 0; padding: clamp(1.4rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem); } /* The title's second half, on both the index card and the article header. On the article it is a

, not a second

: one document, one level-1 heading. / .featuretitle--reality, .articletitle--reality { color: var(--azul); margin: 0 0 0 clamp(0rem, 6vw, 4.5rem); } .featuresub { font-family: var(--f-ui); font-weight: 600; font-size: clamp(.95rem, 1.6vw, 1.05rem); letter-spacing: .01em; color: var(--muted); margin: 1.15rem 0 0; max-width: 34rem; } .featuremeta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.1rem; margin-top: 1.6rem; font-family: var(--f-ui); font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; } .tag { border: 1px solid var(--rule-strong); border-radius: 999px; padding: .28rem .7rem; color: var(--azul); } .featurecta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.75rem; font-family: var(--f-ui); font-weight: 700; font-size: .9rem; letter-spacing: .04em; color: var(--azul); text-transform: uppercase; } .feature:hover .featurecta { gap: .95rem; } .featurecta span { transition: gap .2s; } / ---------- Index: what's coming ---------- / .upnext { max-width: 62rem; margin: 0 auto clamp(4rem, 10vw, 7rem); padding-inline: var(--gutter); } .upnexthead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 2px solid var(--ink); padding-top: .9rem; margin-bottom: 1.5rem; font-family: var(--f-ui); } .upnexttitle { font-family: var(--f-display); font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; margin: 0; } .upnextcount { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; } .upnextempty { font-family: var(--f-ui); font-size: 1rem; color: var(--muted); max-width: 30rem; margin: 0; } .upnextempty a { color: var(--azul); font-weight: 700; } / ---------- Index: everything published before the featured piece ---------- / .postlist { list-style: none; margin: 0; padding: 0; font-family: var(--f-ui); } .postlistlink { display: grid; grid-template-columns: 6rem 1fr; gap: .3rem 1.5rem; align-items: baseline; padding: 1.15rem 0; border-top: 1px solid var(--rule-strong); text-decoration: none; color: inherit; } .postlistitem:last-child .postlistlink { border-bottom: 1px solid var(--rule-strong); } .postlistdate { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .postlisttitle { font-family: var(--f-display); font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.18; text-transform: uppercase; letter-spacing: -.01em; } .postlistlink:hover .postlisttitle { color: var(--azul); } .postlistsub { grid-column: 2; font-size: .92rem; font-weight: 600; color: var(--muted); max-width: 34rem; } @media (max-width: 560px) { .postlistlink { grid-template-columns: 1fr; gap: .35rem; } .postlistsub { grid-column: 1; } } / ---------- Pagination ---------- / .blog .pagination { max-width: 62rem; margin: 0 auto clamp(4rem, 10vw, 7rem); padding-inline: var(--gutter); font-family: var(--f-ui); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .blog .pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; } .blog .pagination .page-numbers { display: inline-block; padding: .5rem .8rem; border: 1px solid var(--rule-strong); text-decoration: none; color: var(--azul); } .blog .pagination .page-numbers.current { background: var(--azul); border-color: var(--azul); color: #fff; } .blog .pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } / ---------- Article ---------- / .articlehead { max-width: 62rem; margin-inline: auto; / same 7rem floor: the crumb must not sit under the burger pill / padding: clamp(7rem, 10vw, 8rem) var(--gutter) 0; } .crumb { font-family: var(--f-ui); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: none; display: inline-block; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } .crumb:hover { color: var(--azul); } .articlepanel { background: var(--azul); color: #fff; padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 3.75rem); } .articleseam { background: var(--paper-pure); border: 1px solid var(--rule-strong); border-top: 0; padding: clamp(1.4rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 3rem) clamp(1.75rem, 4vw, 2.5rem); } .articletitle { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.1rem, 6.4vw, 4.4rem); line-height: .98; letter-spacing: -.02em; text-transform: uppercase; margin: 0; } .articlestandfirst { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; color: var(--muted); margin: 1.1rem 0 0; max-width: 32rem; font-family: var(--f-ui); font-weight: 600; } .byline { display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; align-items: center; max-width: 62rem; margin: 1.5rem auto 0; padding-inline: var(--gutter); font-family: var(--f-ui); font-size: .8rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; } .byline strong { color: var(--ink); font-weight: 700; } .articlebody { padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 0; } .articlebody p { margin: 0 0 1.35em; } .articlebody > .column > p:first-of-type::first-letter { font-family: var(--f-display); float: left; font-size: 3.6em; line-height: .82; padding: .06em .12em 0 0; color: var(--azul); } h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 3.2vw, 2rem); line-height: 1.1; letter-spacing: -.01em; margin: 3.2rem 0 1.1rem; scroll-margin-top: 5rem; } h2 .h2num { display: block; font-family: var(--f-ui); font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--azul); margin-bottom: .5rem; } .lead-in { font-size: 1.06em; } / Emphasis that carries the argument, not decoration / .mark { background: linear-gradient(transparent 60%, var(--amarillo) 60%); font-weight: 500; } .stat { font-family: var(--f-ui); font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; } / ---------- Signature: the chain ---------- / / The author builds his argument with arrow chains four times over. It is his rhetorical device, so it gets a first-class typographic treatment. Every step is a plain paragraph carrying a class, not a nested inside an
: that is what the block editor can produce and an author can edit. Add a step, remove a step, rewrite a step — the arrows are CSS and follow. / .chain { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .3rem; margin: 2rem 0; font-family: var(--f-ui); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } / The block editor wraps a group's children in .wp-block-groupinner-container, which would sit between the flex container and its steps and collapse the whole row into one item. display:contents dissolves the wrapper so the steps are the flex children the layout expects — in the editor and on the front end alike. / .chain > .wp-block-groupinner-container { display: contents; } .chain > , .chain > .wp-block-groupinner-container > * { margin: 0; } .chainstep { position: relative; background: var(--paper-pure); border: 1px solid var(--rule-strong); border-bottom: 2px solid var(--azul); padding: .5rem .7rem; } .chainstep:not(:last-child)::after { content: '→'; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); color: var(--azul); font-size: .95rem; padding-inline: .25rem; } /* The gap chain: identity is designed, perception is built, and between them sits the brecha the article says must be managed. / .chain--gap { flex-direction: column; align-items: flex-start; gap: 0; } .chain--gap .chainstep { min-width: 15rem; margin-bottom: 1.6rem; } .chain--gap .chainstep:last-child { margin-bottom: 0; } .chain--gap .chainstep:not(:last-child)::after { content: '↓'; left: 1.15rem; top: 100%; transform: none; padding: .35rem 0 0; } / A side note sits between two boxes, so the connector moves onto the note: suppressing it outright (the first version of this) left Brand Identity and Touchpoints visibly unconnected, breaking the chain the diagram is arguing. / .chain--gap .chainstep:has(+ .chainside)::after { content: none; } .chain--gap .chainside:not(:last-child)::after { content: '↓'; position: absolute; left: 1.15rem; top: 100%; color: var(--azul); font-family: var(--f-ui); font-style: normal; font-size: .95rem; padding: .1rem 0 0; } .chain--gap .chainside { position: relative; } / The connector into the gap fades: the chain is interrupted here, not cut. / .chain--gap .chainstep:has(+ .chaingap)::after { opacity: .25; } / Side notes name who owns each end of the chain / .chainside { font-family: var(--f-read); font-style: italic; font-weight: 400; font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--muted); padding: .4rem 0 0 .1rem; margin-bottom: 1.2rem !important; } .chain--gap .chainside + .chainstep { margin-top: 0; } / The gap itself: the chain's connector breaks open and is labelled. / .chaingap { display: flex; align-items: center; gap: .65rem; color: var(--azul); font-size: .7rem; letter-spacing: .2em; padding: .1rem 0 .55rem; margin-bottom: 1rem !important; } .chaingap::before, .chaingap::after { content: ''; height: 0; border-top: 2px dashed var(--azul); } .chaingap::before { width: 1.1rem; } .chaingap::after { flex: 1; max-width: 6rem; } / ---------- Pull quote ---------- / .pull { margin: 2.6rem 0; padding: 0 0 0 1.4rem; border-left: 3px solid var(--amarillo); font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.32; font-weight: 500; } .pull p { margin: 0; } .pull cite { display: block; margin-top: .7rem; font-family: var(--f-ui); font-size: .78rem; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } / ---------- Evidence figure ---------- / .evidence { margin: 2.6rem 0; padding: 1.5rem 0 0; border-top: 2px solid var(--ink); font-family: var(--f-ui); } .evidencetitle { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1.15rem; } / One row = one paragraph the author writes as "Label 66%". The bar's width is read off that percentage by blog.js, so there is no second number to keep in sync — the figure the reader sees IS the figure that draws the bar. / .evidencerow { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .5rem; font-size: .88rem; font-weight: 600; margin: 0 0 .55rem; } .evidencerow::after { content: ''; grid-column: 1 / -1; height: 6px; width: var(--bar, 0%); background: var(--azul); margin-top: .3rem; } .evidencerow strong { font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; } .evidencesrc { font-size: .72rem; color: var(--muted); letter-spacing: .04em; margin: 1rem 0 0; } / ---------- The coherence test: the article's payoff, in the loud register ---------- / / Full-bleed from inside the reading column: the block sits in the content flow (it is a pattern the author inserts), so it has to break out of the measure rather than be positioned outside it. / .test { background: var(--ink); color: #fff; width: 100vw; margin: 3.5rem 0 3.5rem calc(50% - 50vw); padding: clamp(2.25rem, 6vw, 3.5rem) var(--gutter); counter-reset: ohl-test; } .testinner { max-width: var(--measure); margin-inline: auto; } .testtitle { font-family: var(--f-display); font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.08; margin: 0 0 .6rem; text-transform: uppercase; } .testintro { font-family: var(--f-ui); font-weight: 600; color: #b9bcd6; margin: 0 0 2rem; font-size: .95rem; } / The numerals are a CSS counter, not typed: an author who reorders or inserts a question never has to renumber, and the list can never disagree with itself. / .testitem { counter-increment: ohl-test; padding: 1.25rem 0; border-top: 1px solid #33356b; } .testitem h3 { font-family: var(--f-ui); font-size: 1.02rem; font-weight: 700; margin: 0 0 .5rem; display: flex; gap: .75rem; align-items: baseline; } .testitem h3::before { content: counter(ohl-test, decimal-leading-zero); font-family: var(--f-display); font-weight: 400; color: var(--amarillo); font-size: .95rem; font-variant-numeric: tabular-nums; } .testitem p { margin: 0; font-size: .98rem; line-height: 1.55; color: #d5d7ea; padding-left: 2.35rem; } / ---------- Closing ---------- / .closing { font-family: var(--f-display); font-size: clamp(1.5rem, 3.6vw, 2.25rem); line-height: 1.14; text-transform: uppercase; color: var(--azul); margin: 3rem 0 3.5rem; } / ---------- Author + refs ---------- / .author { border-top: 2px solid var(--ink); margin-top: 3.5rem; padding-top: 1.5rem; font-family: var(--f-ui); } .author h2 { font-family: var(--f-ui); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .75rem; color: var(--muted); } .author p { font-size: .98rem; margin: 0; } .refs { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-family: var(--f-ui); font-size: .8rem; line-height: 1.5; color: var(--muted); } .refs h2 { font-family: var(--f-ui); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .75rem; color: var(--muted); } .refs ol { margin: 0; padding-left: 1.1rem; } .refs li { margin-bottom: .5rem; } / ---------- Footer ---------- / / The footer is the theme's own .footer, styled by the theme stylesheet. The blog only has to give it air after a long reading column. / .blog .footer { margin-top: clamp(3.5rem, 8vw, 6rem); } / ---------- Section index (desktop only) ---------- / .toc { display: none; } @media (min-width: 1180px) { .toc { display: block; position: fixed; top: 50%; right: clamp(1rem, 3vw, 2.5rem); transform: translateY(-50%); z-index: 5; font-family: var(--f-ui); font-size: .72rem; font-weight: 600; letter-spacing: .04em; max-width: 11rem; / The index carries its own paper. Invisible over the reading surface, it keeps its 5.75:1 while the full-bleed dark block scrolls past — otherwise the muted links drop to 3.1:1 on near-black. / background: var(--paper); padding: .9rem .85rem .9rem .35rem; border-radius: 4px; } .toc ol { list-style: none; margin: 0; padding: 0; } .toc li { margin-bottom: .45rem; } .toc a { text-decoration: none; color: var(--muted); display: block; padding-left: .8rem; border-left: 2px solid var(--rule-strong); line-height: 1.25; } .toc a:hover { color: var(--ink); } .toc a.is-active { color: var(--azul); border-left-color: var(--azul); } } / ---------- Motion ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(14px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); } .reveal.is-in.d1 { transition-delay: .08s; } .reveal.is-in.d2 { transition-delay: .16s; } .featurecta span { transition: transform .2s; } .feature:hover .feature__cta span { transform: translateX(4px); } }