/* ========================================================================== spainpulse.com — main stylesheet No framework: only what the site actually uses. ========================================================================== */ /* --- Design tokens -------------------------------------------------------- */ :root { --c-bg: #ffffff; --c-bg-soft: #faf7f4; /* warm off-white, not the usual cold grey */ --c-bg-elevated: #ffffff; --c-border: #e8e1da; --c-text: #211a16; --c-text-soft: #6d6058; --c-brand: #b3452b; /* terracotta — Spanish without using the flag */ --c-brand-dark: #8d3320; --c-brand-soft: #fbeee9; --c-accent: #d99a2b; /* ochre, used sparingly */ --c-warn: #a8600c; --c-warn-soft: #fdf3e2; --c-focus: #1a73e8; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(40, 24, 16, .06), 0 4px 12px rgba(40, 24, 16, .05); --shadow-lg: 0 4px 8px rgba(40, 24, 16, .06), 0 16px 32px rgba(40, 24, 16, .09); --wrap: 1180px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --c-bg: #14181d; --c-bg-soft: #1a1f25; --c-bg-elevated: #1e242b; --c-border: #333c46; --c-text: #ecebe8; --c-text-soft: #a8a29b; --c-brand: #e8865f; --c-brand-dark: #f2a583; --c-brand-soft: #35211a; --c-warn: #e0a755; --c-warn-soft: #33270f; --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 16px 32px rgba(0, 0, 0, .45); } } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; } /* Safety net against horizontal scrolling. On rather than , because overflow on breaks `position: sticky` on the table of contents. */ html { overflow-x: hidden; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--c-brand-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--c-brand); } h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; } h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); } h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); } h3 { font-size: 1.12rem; } p { margin: 0 0 1rem; } :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; background: var(--c-brand-dark); color: #fff; padding: .7rem 1.2rem; z-index: 100; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; top: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- Header --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--c-border); } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 74px; } .brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--c-text); flex-shrink: 0; } /* Mark: a sun over a horizon in a rounded square. Recognisably Spanish without a flag, and it gives the wordmark a visual anchor. */ .brand__logo { display: grid; place-items: center; flex-shrink: 0; width: 2.35rem; height: 2.35rem; background: var(--c-brand); border-radius: 10px; color: #fff; transition: transform .18s ease, background .18s; } .brand:hover .brand__logo { background: var(--c-brand-dark); transform: rotate(-4deg); } .brand__logo svg { width: 1.35rem; height: 1.35rem; } .brand__text { display: flex; flex-direction: column; line-height: 1.12; } .brand__name { font-weight: 800; font-size: 1.16rem; letter-spacing: -.025em; display: flex; align-items: baseline; gap: .3rem; } .brand__mark { color: var(--c-brand); } .brand__tagline { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-soft); } /* In the footer the brand may breathe a little more. */ .site-footer .brand__logo { width: 2.6rem; height: 2.6rem; } .site-footer .brand__logo svg { width: 1.5rem; height: 1.5rem; } @media (max-width: 480px) { .brand__tagline { display: none; } .brand__logo { width: 2.1rem; height: 2.1rem; } .brand__name { font-size: 1.05rem; } } .nav { margin-left: auto; } .nav__list { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; } .nav__link { display: block; padding: .5rem .8rem; border-radius: var(--radius-sm); color: var(--c-text-soft); text-decoration: none; font-size: .94rem; font-weight: 550; white-space: nowrap; transition: background .15s, color .15s; } .nav__link:hover { background: var(--c-bg-soft); color: var(--c-text); } .nav__link[aria-current="page"] { color: var(--c-brand-dark); background: var(--c-brand-soft); } .nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: .45rem .6rem; cursor: pointer; color: var(--c-text); } @media (max-width: 900px) { .nav-toggle { display: block; } .nav { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--c-bg); border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-lg); padding: .5rem 20px 1rem; } .nav.is-open { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { padding: .8rem .6rem; border-radius: 0; } } /* --- Hero ----------------------------------------------------------------- */ .hero { padding: clamp(2.5rem, 1rem + 6vw, 5rem) 0 clamp(2rem, 1rem + 3vw, 3.5rem); background: radial-gradient(60rem 24rem at 12% -10%, var(--c-brand-soft), transparent 60%), var(--c-bg); text-align: center; } .hero__title { margin-bottom: .4rem; } .hero__title em { font-style: normal; color: var(--c-brand); } .hero__lead { max-width: 44rem; margin: 0 auto 1.6rem; font-size: clamp(1rem, .95rem + .4vw, 1.16rem); color: var(--c-text-soft); } .hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-bottom: 1.4rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid transparent; border-radius: 999px; padding: .6rem 1.3rem; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, transform .1s; } .btn--primary { background: var(--c-brand); color: #fff; } .btn--primary:hover { background: var(--c-brand-dark); color: #fff; } .btn--primary:active { transform: translateY(1px); } .btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-border); } .btn--ghost:hover { background: var(--c-bg-soft); color: var(--c-text); } .hero__suggest { font-size: .88rem; color: var(--c-text-soft); display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; align-items: center; } .chip { display: inline-block; padding: .28rem .75rem; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 999px; text-decoration: none; color: var(--c-text-soft); font-size: .85rem; } .chip:hover { background: var(--c-brand-soft); color: var(--c-brand-dark); border-color: var(--c-brand); } /* ========================================================================== HOMEPAGE ONLY The landing page has its own layout so it does not read as a section page with different words. Everything here is namespaced .home- and is used on index.php alone — subpages use the .page-head / .layout / .cards furniture further down this file. ========================================================================== */ /* --- Split hero ----------------------------------------------------------- */ /* Asymmetric rather than centred: text on the left, hard facts on the right, with a warm wash bleeding in from the right edge. */ .home-hero { padding: clamp(2.5rem, 1rem + 5vw, 4.5rem) 0 clamp(2.5rem, 1rem + 4vw, 4rem); border-bottom: 1px solid var(--c-border); background: radial-gradient(50rem 30rem at 100% 0%, var(--c-brand-soft), transparent 70%), var(--c-bg); } .home-hero__inner { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .home-hero__inner { grid-template-columns: 1.15fr .85fr; } } .home-hero__main { min-width: 0; } .home-hero__eyebrow { font-size: .76rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft); margin: 0 0 1rem; } /* Tighter and larger than the generic h1: this is the one place on the site where the type is allowed to be the main event. */ .home-hero__title { font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.1rem); line-height: 1.03; letter-spacing: -.035em; margin: 0 0 1.1rem; } .home-hero__title em { font-style: normal; color: var(--c-brand); } .home-hero__lead { max-width: 34rem; margin: 0 0 1.75rem; font-size: clamp(1.02rem, .95rem + .45vw, 1.2rem); color: var(--c-text-soft); } .home-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; } /* Provenance card. Replaces an earlier 2×2 stat grid: with three entries it always left an empty cell, and a wall of oversized numbers reads as marketing, which undercuts the one thing this panel exists to establish. A labelled list cannot leave a hole and every row says something a reader can check. */ .home-hero__card { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg-elevated); box-shadow: var(--shadow); overflow: hidden; min-width: 0; } .home-hero__card-title { margin: 0; padding: .85rem 1.35rem; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-border); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-soft); } .home-facts { margin: 0; padding: .35rem 1.35rem 1.1rem; } .home-facts__row { display: grid; gap: .1rem .9rem; grid-template-columns: 1fr; padding: .85rem 0; border-bottom: 1px solid var(--c-border); } .home-facts__row:last-child { border-bottom: 0; padding-bottom: .25rem; } /* Label column appears once there is room for it; below that the label sits above its value so neither gets squeezed to two characters per line. */ @media (min-width: 420px) { .home-facts__row { grid-template-columns: 5.6rem 1fr; align-items: baseline; } } .home-facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-brand); } .home-facts dd { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--c-text-soft); } .home-facts dd a { color: var(--c-brand-dark); text-decoration-thickness: 1px; } .home-facts dd abbr { text-decoration: none; border-bottom: 1px dotted var(--c-border); } /* --- Editorial index ------------------------------------------------------ */ /* A numbered list, not a card grid: the order is an argument about what the site is for, and a grid would flatten that. */ .home-index__head { max-width: 40rem; margin-bottom: 2.5rem; } .home-index__head h2 { margin-bottom: .4rem; } .home-index__head p { color: var(--c-text-soft); margin: 0; } .home-list { list-style: none; counter-reset: idx; margin: 0; padding: 0; } .home-item { counter-increment: idx; position: relative; border-top: 1px solid var(--c-border); } .home-item:last-child { border-bottom: 1px solid var(--c-border); } /* The whole row is the link target — a big, obvious hit area rather than a small "read more" at the bottom of a card. */ .home-item__link { display: grid; gap: .1rem 1.75rem; grid-template-columns: 1fr; padding: 1.75rem .5rem 1.75rem 0; text-decoration: none; color: inherit; transition: background .15s, padding-left .15s; } @media (min-width: 760px) { .home-item__link { grid-template-columns: 13rem 1fr; padding-left: 4.25rem; } /* The number sits in the left margin, set in the brand colour. */ .home-item__link::before { content: counter(idx, decimal-leading-zero); position: absolute; margin-left: -4.25rem; font-size: .9rem; font-weight: 700; letter-spacing: .04em; color: var(--c-brand); font-variant-numeric: tabular-nums; padding-top: .3rem; } .home-item__kicker { grid-row: 1 / 4; } } .home-item__link:hover { background: var(--c-brand-soft); } @media (min-width: 760px) { .home-item__link:hover { padding-left: 4.75rem; } } .home-item__kicker { margin: 0; font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-text-soft); padding-top: .35rem; } .home-item__title { margin: 0 0 .4rem; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); letter-spacing: -.02em; } .home-item__link:hover .home-item__title { color: var(--c-brand-dark); } .home-item__lead { margin: 0 0 .8rem; max-width: 44rem; color: var(--c-text-soft); font-size: .96rem; } .home-item__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; } .home-item__meta span { font-size: .76rem; font-weight: 600; color: var(--c-text-soft); background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 999px; padding: .12rem .6rem; } .home-item__link:hover .home-item__meta span { background: var(--c-bg-elevated); } /* --- Why this site -------------------------------------------------------- */ .home-why__inner { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .home-why__inner { grid-template-columns: 1fr 1fr; } } .home-why__statement { min-width: 0; } /* A statement, so it is set larger than a normal section heading and is not followed by a grid of icons. */ .home-why__statement h2 { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem); letter-spacing: -.02em; margin-bottom: 1rem; } .home-why__statement p { color: var(--c-text-soft); max-width: 34rem; } .home-why__sig { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--c-border); font-size: .9rem; } .home-rules { margin: 0; display: grid; gap: 0; min-width: 0; } .home-rules > div { padding: 1.15rem 0; border-top: 1px solid var(--c-border); } .home-rules > div:last-child { border-bottom: 1px solid var(--c-border); } .home-rules dt { font-weight: 700; font-size: .95rem; margin-bottom: .25rem; display: flex; align-items: baseline; gap: .55rem; } .home-rules dt::before { content: ""; flex-shrink: 0; width: .5rem; height: .28rem; border-left: 2px solid var(--c-brand); border-bottom: 2px solid var(--c-brand); transform: rotate(-45deg) translateY(-.15em); } .home-rules dd { margin: 0; font-size: .9rem; color: var(--c-text-soft); padding-left: 1.05rem; } /* --- Homepage FAQ --------------------------------------------------------- */ /* Two columns on wide screens: a standing intro on the left, the accordion on the right. Keeps the block from reading as a wall of collapsed rows. */ .home-faq__inner { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .home-faq__inner { grid-template-columns: .8fr 1.2fr; } .home-faq__intro { position: sticky; top: 6rem; } } .home-faq__intro { min-width: 0; } .home-faq__intro h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); letter-spacing: -.02em; margin-bottom: .8rem; } .home-faq__intro p { color: var(--c-text-soft); font-size: .95rem; } .home-faq__aside { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--c-border); font-size: .85rem !important; } .home-faq__list { min-width: 0; } /* Slightly roomier than the in-page FAQ on subpages: on the homepage this is a primary block, not a footnote to an article. */ .home-faq__list .faq summary { padding: 1.05rem 0; font-size: 1rem; } .home-faq__list .faq details > *:not(summary) { font-size: .93rem; } /* --- Status box ----------------------------------------------------------- */ /* Says plainly what is finished and what is not. A visitor finding four "coming soon" labels with no explanation assumes the site is abandoned. */ .home-status__box { max-width: 52rem; border: 1px solid var(--c-border); border-left: 3px solid var(--c-brand); border-radius: 0 var(--radius) var(--radius) 0; background: var(--c-bg-elevated); padding: 1.6rem 1.75rem; } .home-status__box h2 { font-size: 1.15rem; margin-bottom: .6rem; } .home-status__box p { color: var(--c-text-soft); font-size: .95rem; } .home-status__box p:last-child { margin-bottom: 0; } .home-status__box em { font-style: normal; font-weight: 650; color: var(--c-text); } /* --- Sections ------------------------------------------------------------- */ .section { padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; } .section--soft { background: var(--c-bg-soft); border-block: 1px solid var(--c-border); } .section__head { max-width: 44rem; margin-bottom: 2rem; } .section__head p { color: var(--c-text-soft); margin: 0; } .eyebrow { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-brand); margin-bottom: .45rem; } /* --- Pillars (large cards) ------------------------------------------------ */ .pillars { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .pillar { display: flex; flex-direction: column; background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; } .pillar:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .pillar__icon { font-size: 2rem; line-height: 1; margin-bottom: .8rem; } .pillar__title { margin-bottom: .5rem; } .pillar__title a { color: inherit; text-decoration: none; } .pillar__title a:hover { color: var(--c-brand); } .pillar__lead { color: var(--c-text-soft); font-size: .96rem; } .linklist { list-style: none; margin: .4rem 0 1.4rem; padding: 0; } .linklist li + li { margin-top: .1rem; } .linklist a { display: block; padding: .42rem .6rem; margin-inline: -.6rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--c-text); font-size: .94rem; } .linklist a::before { content: "→"; color: var(--c-brand); margin-right: .55rem; } .linklist a:hover { background: var(--c-brand-soft); color: var(--c-brand-dark); } /* Not published yet: no link, so no dead URL or soft 404. */ .linklist__soon { display: flex; align-items: baseline; gap: .5rem; padding: .42rem 0; font-size: .94rem; color: var(--c-text-soft); } .linklist__soon::before { content: "·"; color: var(--c-border); margin-right: .3rem; } .linklist__soon em { font-style: normal; font-size: .7rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-soft); background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 999px; padding: .1rem .5rem; margin-left: auto; white-space: nowrap; } .pillar__stat { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--c-border); display: flex; align-items: baseline; gap: .6rem; } .pillar__stat b { font-size: 1.5rem; color: var(--c-brand); letter-spacing: -.02em; } .pillar__stat span { font-size: .84rem; color: var(--c-text-soft); } /* --- Compact cards -------------------------------------------------------- */ .cards { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); } .card { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.4rem; transition: box-shadow .2s, transform .2s; } .card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .card__icon { font-size: 1.5rem; line-height: 1; margin-bottom: .55rem; } .card__title { margin-bottom: .35rem; font-size: 1.05rem; } .card__title a { color: inherit; text-decoration: none; } .card__title a:hover { color: var(--c-brand); } .card__lead { color: var(--c-text-soft); font-size: .9rem; margin-bottom: .7rem; } .card .linklist a { font-size: .89rem; padding: .3rem .6rem; } /* --- "Why this site" ------------------------------------------------------ */ .promises { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .promise { background: var(--c-bg-elevated); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.35rem; } .promise h3 { font-size: 1rem; margin-bottom: .4rem; } .promise p { margin: 0; font-size: .91rem; color: var(--c-text-soft); } /* --- Subpages ------------------------------------------------------------- */ .breadcrumb { padding: 1rem 0 0; font-size: .86rem; color: var(--c-text-soft); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; } .breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--c-border); } .breadcrumb a { color: var(--c-text-soft); text-decoration: none; } .breadcrumb a:hover { color: var(--c-brand); text-decoration: underline; } .page-head { padding: 1.5rem 0 clamp(1.75rem, 1rem + 2vw, 2.75rem); border-bottom: 1px solid var(--c-border); background: radial-gradient(48rem 18rem at 8% -30%, var(--c-brand-soft), transparent 65%); } .page-head__icon { font-size: 2.2rem; line-height: 1; margin-bottom: .6rem; } .page-head__lead { max-width: 44rem; font-size: clamp(1rem, .95rem + .35vw, 1.12rem); color: var(--c-text-soft); margin: 0; } /* "Last checked" — a trust signal, so it gets a visible marker rather than being buried in small print. */ .checked { display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0; padding: .3rem .8rem .3rem .7rem; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 999px; font-size: .82rem; color: var(--c-text-soft); } .checked__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-brand); flex-shrink: 0; } .page-head .checked { background: var(--c-bg-elevated); } /* Text column inside .layout: a sidebar sits next to it and already limits the width. */ .prose { max-width: 44rem; } /* If .prose sits directly in a .wrap (page without sidebar) it uses the full container width. Only running text keeps a readable line length; headings and blocks do run wider. */ .wrap > .prose { max-width: none; } .wrap > .prose > p, .wrap > .prose > ul, .wrap > .prose > ol { max-width: 46rem; } .prose__meta { color: var(--c-text-soft); font-size: .9rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-border); } /* Long unbreakable text (URLs, email addresses, code) must not stretch the column — otherwise the whole page scrolls sideways. `anywhere` also breaks mid-URL, which `break-word` does not do for a long host name. */ .prose, .prose p, .prose li, .prose a, .prose code, .prose td, .prose th { overflow-wrap: anywhere; } .prose code { background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: 4px; padding: .08em .35em; font-size: .88em; word-break: break-all; } /* Anchor offset, so a heading does not disappear under the sticky header. */ .prose [id] { scroll-margin-top: 6rem; } .prose h2 { margin-top: 2.25rem; } .prose h3 { margin-top: 1.5rem; } .prose > *:first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1rem; } .prose li { margin-bottom: .35rem; } .prose strong { font-weight: 650; } /* --- Ordered checklist (the "do this in this order" pattern) -------------- */ /* Used on the moving-to-Spain page, where sequence is the whole point: doing step 3 before step 2 is the single most common expensive mistake. */ .steps { list-style: none; counter-reset: step; margin: 1.75rem 0; padding: 0; } .steps > li { counter-increment: step; position: relative; padding-left: 3.1rem; margin-bottom: 1.5rem; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--c-brand); color: #fff; border-radius: 50%; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; } /* The connecting line makes the sequence read as one chain rather than four unrelated blocks. */ .steps > li:not(:last-child)::after { content: ""; position: absolute; left: 1.03rem; top: 2.35rem; bottom: -1.5rem; width: 2px; background: var(--c-border); } .steps h3 { margin: 0 0 .35rem; } .steps p:last-child { margin-bottom: 0; } .steps__when { display: inline-block; margin-bottom: .4rem; font-size: .74rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--c-brand-dark); background: var(--c-brand-soft); border-radius: 999px; padding: .1rem .6rem; } /* --- Table of contents (sidebar on text pages) ---------------------------- */ .toc { background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius); /* Narrower side padding: the links have .5rem of their own, which lines up. */ padding: 1.25rem .85rem; font-size: .9rem; /* Without min-width:0 a flex/grid item refuses to shrink below the width of its content — that caused overflow on mobile. */ min-width: 0; max-width: 100%; } .toc h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-soft); margin: 0 0 .8rem; padding-inline: .5rem; } .toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; } .toc li { counter-increment: toc; } .toc a { display: flex; gap: .6rem; padding: .38rem .5rem; border-radius: var(--radius-sm); color: var(--c-text-soft); text-decoration: none; line-height: 1.4; overflow-wrap: break-word; } .toc a::before { content: counter(toc) "."; flex-shrink: 0; color: var(--c-brand); font-variant-numeric: tabular-nums; font-size: .82em; padding-top: .12em; } .toc a:hover { background: var(--c-brand-soft); color: var(--c-brand-dark); } .toc + .panel { margin-top: 1.15rem; } @media (min-width: 980px) { .toc { position: sticky; top: 6rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; } } /* On narrow screens the table of contents sits at the top, collapsed: a list of fifteen items would otherwise fill half the screen before the first paragraph. */ @media (max-width: 979px) { .layout--toc { display: flex; flex-direction: column; } .layout--toc > aside { order: -1; min-width: 0; } .toc[open] > ol { margin-top: .6rem; } .toc > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-soft); padding-inline: .5rem; } .toc > summary::-webkit-details-marker { display: none; } .toc > summary::after { content: ""; margin-left: auto; flex-shrink: 0; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; } .toc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } } /* On wide screens there is room enough: always open, no chevron. */ @media (min-width: 980px) { .toc > summary { list-style: none; } .toc > summary::-webkit-details-marker { display: none; } } /* --- Tables --------------------------------------------------------------- */ .table-scroll { overflow-x: auto; margin: 1.5rem 0; } .table { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 34rem; } .table th, .table td { text-align: left; vertical-align: top; padding: .7rem .85rem; border-bottom: 1px solid var(--c-border); } .table thead th { background: var(--c-bg-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-soft); border-bottom-width: 2px; } .table tbody th { font-weight: 650; color: var(--c-text); } .table tbody tr:hover { background: var(--c-bg-soft); } .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- Layout --------------------------------------------------------------- */ .layout { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr; } /* Grid and flex items default to min-width:auto and therefore refuse to shrink below their longest content (a URL, a

 fragment). That pushes
   the whole page wider than the screen. */
.layout > * { min-width: 0; }

@media (min-width: 980px) {
    .layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

.panel {
    background: var(--c-bg-elevated); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 1.4rem;
}
.panel + .panel { margin-top: 1.15rem; }
.panel h2, .panel h3 { font-size: 1rem; margin-top: 0; margin-bottom: .8rem; }
.panel__note {
    margin: .9rem 0 0; padding-top: .9rem;
    border-top: 1px solid var(--c-border);
    font-size: .84rem; color: var(--c-text-soft);
}
.panel__note em { font-style: normal; font-weight: 650; }

/* --- Notes ---------------------------------------------------------------- */
.note {
    border-left: 3px solid var(--c-brand);
    background: var(--c-brand-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: .9rem 1.1rem; margin: 1.5rem 0;
    font-size: .92rem;
}
.note p:last-child { margin-bottom: 0; }

/* Legal warning: visually distinct from an ordinary tip, because on the
   immigration and tax pages the difference matters. */
.note--warn {
    border-left-color: var(--c-warn);
    background: var(--c-warn-soft);
}

/* Admin action item — not meant for visitors. */
.note--todo {
    border-left-color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 8%, transparent);
}

/* --- Sources -------------------------------------------------------------- */
/* Every silo page cites the body that publishes the figures. Rendered as a
   distinct block so it is obvious these are primary sources, not a blogroll. */
.sources { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.sources li { padding: .5rem 0; border-bottom: 1px solid var(--c-border); }
.sources li:last-child { border-bottom: 0; padding-bottom: 0; }
.sources a { color: var(--c-text); text-decoration: none; font-weight: 550; }
.sources a:hover { color: var(--c-brand); text-decoration: underline; }
.sources__note { display: block; color: var(--c-text-soft); font-size: .84rem; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); padding: .35rem 0; }
.faq summary {
    cursor: pointer; padding: .85rem 0; font-weight: 600;
    list-style: none; display: flex; align-items: center; gap: .7rem;
}
.faq summary::-webkit-details-marker { display: none; }
/* The +/− marker.
   `place-items: center` alone centres the text *box*, not the glyph inside it:
   both signs sit above their box's centre and carry uneven side bearings, so
   the mark reads as offset up and to the left. Centring the glyph itself needs
   line-height:1 (kills the leading that pushes it down-then-up), an explicit
   inherited-font reset so the summary's own font metrics do not leak in, and
   text-align/justify on both axes. */
.faq summary::before {
    content: "+"; flex-shrink: 0;
    box-sizing: border-box;
    width: 1.4rem; height: 1.4rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-border); border-radius: 50%;
    color: var(--c-brand);
    font-family: var(--font);
    font-weight: 700; font-size: 1rem; line-height: 1;
    text-align: center; text-indent: 0;
}
/* U+2212 MINUS SIGN is metrically matched to "+" in most UI fonts, so the
   circle does not shift when a question is opened. */
.faq details[open] summary::before { content: "\2212"; }
.faq details > *:not(summary) { margin-bottom: .9rem; color: var(--c-text-soft); font-size: .94rem; }

/* --- Contact form --------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.field input, .field textarea, .field select {
    width: 100%; font: inherit; color: var(--c-text);
    background: var(--c-bg-elevated);
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    padding: .6rem .8rem;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-brand); }
.field__hint { font-size: .84rem; color: var(--c-text-soft); margin: .3rem 0 0; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
    background: var(--c-bg-soft); border-top: 1px solid var(--c-border);
    padding: 3rem 0 1.5rem; font-size: .91rem;
}
/* Note: `repeat(auto-fit, …)` may not be combined with a fixed track — the
   whole declaration becomes invalid. Hence explicit breakpoints. */
.footer__grid {
    display: grid; gap: 2rem;
    grid-template-columns: 1fr;
    margin-bottom: 2rem;
}
@media (min-width: 600px) {
    .footer__grid { grid-template-columns: repeat(3, 1fr); }
    .footer__about { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
    .footer__grid { grid-template-columns: 1.75fr repeat(3, minmax(140px, 1fr)); }
    .footer__about { grid-column: auto; }
}
.footer__about { max-width: 30rem; }
.footer__intro { color: var(--c-text-soft); margin: .6rem 0 1.1rem; }

/* Concrete promises, no marketing language — hence the plain check marks. */
.footer__usp { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.footer__usp li {
    position: relative; padding-left: 1.5rem; margin-bottom: .4rem;
    font-size: .88rem; color: var(--c-text-soft); line-height: 1.5;
}
.footer__usp li::before {
    content: ""; position: absolute; left: 0; top: .42em;
    width: .5rem; height: .28rem;
    border-left: 2px solid var(--c-brand); border-bottom: 2px solid var(--c-brand);
    transform: rotate(-45deg);
}

.footer__correction {
    margin: 0; padding-top: .9rem; border-top: 1px solid var(--c-border);
    font-size: .85rem; color: var(--c-text-soft);
}

.footer__disclaimer {
    max-width: 62rem; margin: 0 0 1.5rem;
    padding: .9rem 1.1rem;
    background: var(--c-bg-elevated); border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: .82rem; color: var(--c-text-soft); line-height: 1.6;
}
.footer__disclaimer em { font-style: italic; }

/* Masthead block. The copyright line carries slightly more weight than the
   attribution beneath it, so the eye reads publication first and person
   second — an imprint, not a personal sign-off. */
.footer__imprint { display: flex; flex-direction: column; gap: .15rem; }
.footer__copy { margin: 0; font-weight: 600; color: var(--c-text); }
.footer__byline { margin: 0; color: var(--c-text-soft); font-size: .83rem; }
.footer__contact {
    margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .55rem;
}
.footer__sep { color: var(--c-border); }
.footer__legal { margin: 0; font-size: .83rem; font-variant-numeric: tabular-nums; }
.footer__col h3 {
    font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--c-text-soft); margin-bottom: .7rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: .35rem; }
.footer__list a { color: var(--c-text); text-decoration: none; }
.footer__list a:hover { color: var(--c-brand); text-decoration: underline; }
.footer__bottom {
    border-top: 1px solid var(--c-border); padding-top: 1.2rem;
    display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; justify-content: space-between;
    /* Bottom-aligned: the imprint block is two or three lines tall, so aligning
       the link row to its baseline keeps the two sides visually related instead
       of the links floating at the top of the taller column. */
    align-items: flex-end;
    color: var(--c-text-soft); font-size: .85rem;
}

/* --- Cookie banner (GDPR) ------------------------------------------------- */
.cookiebar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    background: var(--c-bg-elevated); border-top: 1px solid var(--c-border);
    box-shadow: 0 -8px 32px rgba(40, 24, 16, .12);
    padding: 1.1rem 0;
}
.cookiebar[hidden] { display: none; }
.cookiebar__inner {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    justify-content: space-between;
}
.cookiebar p { margin: 0; font-size: .89rem; color: var(--c-text-soft); max-width: 46rem; }
.cookiebar__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}