/* ========================================================================= * pauarco.es — design system v2.1 * * Single stylesheet for the v2 landing. Loaded once via from the * mu-plugin. Order of sections in this file: * 1. Self-hosted @font-face declarations (Source Serif 4 + Inter) * 2. CSS custom properties (palette, type scale, spacing tokens) * 3. Reset + base typography * 4. Layout primitives (container, sections, grids, hairlines) * 5. Reusable components (buttons, links, form fields, cursor) * 6. Section-specific styles in document order * 7. Animation entry/exit states (CSS half of the GSAP pairing) * 8. prefers-reduced-motion overrides * 9. Responsive (mobile-first deltas at the end of each component) * ========================================================================= */ /* ------------------------------------------------------------------------- * 1. Self-hosted webfonts. Source Serif 4 covers headlines + emphasis; * Inter is the body face. Both shipped as WOFF2 variable fonts so a * single file resolves every weight we use (regular, medium, semibold). * `font-display: swap` keeps text readable while WOFF2 loads. The serif * is preloaded from the document for first-paint speed. * ------------------------------------------------------------------------- */ @font-face { font-family: "Source Serif"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/SourceSerif4-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/SourceSerif4-Variable-latinExt.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Serif"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/SourceSerif4-Italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/SourceSerif4-Italic-latinExt.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/InterVariable-Italic.woff2") format("woff2"); } /* ------------------------------------------------------------------------- * 2. Design tokens. Edited here and only here. Anything magic-numbered in * the rest of the file is a bug — promote it to a token. * ------------------------------------------------------------------------- */ :root { /* Palette — see CLAUDE.md for the rationale (azul tinta + nude apagado). */ --color-primary: #14304F; /* azul tinta — headings, primary CTA */ --color-primary-d: #0F2A44; /* darker primary — hover states */ --color-accent: #C9A77E; /* nude apagado — used very sparingly */ --bg-base: #FBFBFA; /* blanco roto — default page bg */ --bg-alt: #F4F4F2; /* gris muy claro — alternating sections */ --bg-deep: #14304F; /* dark sections (footer, end CTA) */ --ink: #1F1F1F; /* main text */ --ink-soft: #5A5A5A; /* secondary text */ --rule: rgba(31, 31, 31, .12); /* hairline divider */ --rule-strong: rgba(31, 31, 31, .26); /* Type — `clamp` does the desktop→mobile fluid scale for free. */ --font-serif: "Source Serif", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem); /* 16-18 px */ --fs-lead: clamp(1.075rem, 1rem + .4vw, 1.25rem); /* 17-20 px */ --fs-eyebrow: .76rem; --fs-h1: clamp(2rem, 1.4rem + 3.2vw, 3.75rem); /* 32-60 px */ --fs-h2: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); /* 27-42 px */ --fs-h3: clamp(1.15rem, 1.05rem + .4vw, 1.3rem); /* 18-21 px */ --fs-numeral: clamp(2.6rem, 2rem + 3vw, 4.4rem); /* big editorial numerals */ --fs-micro: .76rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.65; --tracking-eyebrow: .12em; --tracking-tight: -0.012em; /* Spacing — geometric scale, tight at the bottom for tweaks. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 120px; /* canonical section spacing */ --space-11: 160px; /* Layout */ --container: 1140px; --container-tight: 720px; /* Motion — durations short and ease-out for a measured feel. */ --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --t-quick: 180ms; --t-base: 280ms; --t-slow: 560ms; --t-trace: 720ms; /* hairlines drawing left-to-right */ } /* ------------------------------------------------------------------------- * 3. Reset + base typography. Modern reset, no Normalize bloat. * ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg-base); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } h3 { font-size: var(--fs-h3); font-weight: 600; } em { font-style: italic; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ::selection { background: var(--color-primary); color: var(--bg-base); } /* Base link treatment is "no underline by default, animated underline on hover". Inline body links can opt back in with .link-inline (see §5). */ a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; } /* ------------------------------------------------------------------------- * 4. Layout primitives. Container is the only width-constraining element; * everything else inherits. * ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); } .container-tight { max-width: var(--container-tight); } section { padding-block: var(--space-10); } section:first-of-type { padding-top: var(--space-9); } section.alt { background: var(--bg-alt); } section.deep { background: var(--bg-deep); color: var(--bg-base); } section.deep h1, section.deep h2, section.deep h3 { color: var(--bg-base); } section.deep p { color: rgba(251, 251, 250, .76); } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-soft); margin: 0 0 var(--space-5); display: inline-flex; align-items: center; gap: var(--space-3); } .eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--ink-soft); flex-shrink: 0; } section.deep .eyebrow, section.deep .eyebrow::before { color: rgba(251, 251, 250, .65); background: rgba(251, 251, 250, .65); } .lead { font-family: var(--font-sans); font-size: var(--fs-lead); color: var(--ink-soft); max-width: 56ch; margin: 0 0 var(--space-7); } .section-head { max-width: 720px; margin-bottom: var(--space-9); } .split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .split.split-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } @media (max-width: 880px) { .split, .split.split-reverse { grid-template-columns: 1fr; gap: var(--space-7); } } /* The hairline rule used between sub-blocks (3 perfiles, 5 pasos, FAQ). Animated on scroll: see §7 (.hairline.is-traced). */ .hairline { height: 1px; background: var(--rule); transform-origin: left center; border: 0; margin: 0; } /* ------------------------------------------------------------------------- * 5. Reusable components: buttons, links, form fields, custom cursor, * scroll progress bar. * ------------------------------------------------------------------------- */ /* Buttons — solid primary; ghost is a discreet secondary. */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 14px 26px; border-radius: 0; border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--bg-base); font-family: var(--font-sans); font-weight: 500; font-size: .95rem; letter-spacing: .005em; cursor: pointer; transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); text-decoration: none; } .btn:hover { background: var(--color-primary-d); border-color: var(--color-primary-d); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--color-primary); } .btn-ghost:hover { background: var(--color-primary); color: var(--bg-base); } section.deep .btn { background: var(--bg-base); color: var(--color-primary); border-color: var(--bg-base); } section.deep .btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary-d); } /* Inline editorial link — animated underline that draws left-to-right. */ .link-inline { position: relative; display: inline; color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%; padding-bottom: 2px; transition: background-size var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); } .link-inline:hover { background-size: 100% 1px; color: var(--color-primary); } .link-inline.is-on { background-size: 100% 1px; } /* permanent underline */ section.deep .link-inline { color: var(--bg-base); background-image: linear-gradient(var(--bg-base), var(--bg-base)); } /* Form fields — austere, single hairline below each input that thickens and recolors to primary on focus. */ form.contact { display: grid; gap: var(--space-6); max-width: 520px; } form.contact .field { position: relative; } form.contact label { display: block; font-family: var(--font-sans); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-soft); margin-bottom: var(--space-2); font-weight: 500; } form.contact input, form.contact textarea { width: 100%; padding: 12px 0 14px; border: 0; border-bottom: 1px solid var(--rule-strong); background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-body); line-height: 1.4; transition: border-color var(--t-base) var(--ease-out); outline: none; } form.contact textarea { min-height: 140px; resize: vertical; line-height: var(--lh-body); } /* Focus underline traced via animated pseudo-element under the input. */ form.contact .field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-primary); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-slow) var(--ease-out); pointer-events: none; } form.contact .field:focus-within::after { transform: scaleX(1); } form.contact .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; } /* Form status — success replaces the form, error sits above it. */ .form-status { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.4; color: var(--ink); padding: var(--space-5) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: 520px; } .form-status.is-error { color: #7f1d1d; border: 1px solid #fca5a5; background: rgba(254, 226, 226, .35); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5); border-radius: 2px; font-family: var(--font-sans); font-size: .95rem; } section.final .form-status { color: var(--bg-base); border-color: rgba(251, 251, 250, .26); } section.final .form-status.is-error { color: #fecaca; background: rgba(220, 38, 38, .14); border-color: rgba(254, 202, 202, .28); } /* Custom cursor — desktop only, fine pointer only, opt-in via body class. */ .pa-cursor, .pa-cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate3d(-100px, -100px, 0); will-change: transform; } .pa-cursor { width: 28px; height: 28px; border: 1px solid var(--color-primary); border-radius: 50%; transition: width var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); margin: -14px 0 0 -14px; mix-blend-mode: difference; border-color: var(--bg-base); } .pa-cursor.is-hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(251, 251, 250, .14); } .pa-cursor-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary); margin: -2px 0 0 -2px; } @media (hover: none), (pointer: coarse) { .pa-cursor, .pa-cursor-dot { display: none; } } .pa-has-cursor, .pa-has-cursor a, .pa-has-cursor button { cursor: none; } /* Scroll progress bar pinned to the top of the viewport. */ .pa-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform-origin: left center; transform: scaleX(0); background: var(--color-primary); opacity: .5; z-index: 100; pointer-events: none; } /* ------------------------------------------------------------------------- * 6. Section-specific styles, in document order. * ------------------------------------------------------------------------- */ /* Header — sticky, hairline below, lang switch + nav. */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 251, 250, .82); backdrop-filter: saturate(1.05) blur(14px); -webkit-backdrop-filter: saturate(1.05) blur(14px); border-bottom: 1px solid var(--rule); padding: 18px 0; } .site-header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: nowrap; } .brand { font-family: var(--font-serif); font-weight: 600; font-size: 1.2rem; letter-spacing: -.005em; color: var(--ink); line-height: 1; display: inline-flex; flex-direction: column; gap: 4px; } .brand small { font-family: var(--font-sans); font-weight: 400; font-size: .68rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-soft); } nav.primary ul { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; } nav.primary a { font-family: var(--font-sans); font-size: .9rem; color: var(--ink); position: relative; padding: 4px 0; } nav.primary a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right center; transition: transform var(--t-base) var(--ease-out); } nav.primary a:hover::after { transform: scaleX(1); transform-origin: left center; } .lang-switch { display: inline-flex; align-items: center; gap: 0; font-family: var(--font-sans); font-size: .82rem; } .lang-switch a { padding: 6px 10px; color: var(--ink-soft); transition: color var(--t-quick) var(--ease-out); letter-spacing: .04em; } .lang-switch a:hover { color: var(--ink); } .lang-switch a.active { color: var(--ink); font-weight: 500; } .lang-switch span { color: var(--rule-strong); font-size: .72rem; } @media (max-width: 820px) { nav.primary { display: none; } .site-header .row { gap: var(--space-4); } } /* Hero — split layout with editorial composition on the right. */ .hero { padding-top: var(--space-9); padding-bottom: var(--space-11); } .hero-h1 { font-size: var(--fs-h1); line-height: 1.04; max-width: 16ch; margin: 0 0 var(--space-6); letter-spacing: -.018em; } .hero-h1 em { color: var(--color-primary); font-style: italic; } .hero-lead { font-family: var(--font-sans); font-size: var(--fs-lead); color: var(--ink-soft); max-width: 50ch; margin: 0 0 var(--space-7); line-height: 1.55; } .hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin: 0; } .hero-cta-row .ghost-link { font-family: var(--font-sans); font-size: .92rem; color: var(--ink-soft); position: relative; } .hero-cta-row .ghost-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--t-base) var(--ease-out); } .hero-cta-row .ghost-link:hover { color: var(--ink); } .hero-cta-row .ghost-link:hover::after { transform: scaleX(1); transform-origin: left center; } .hero-micro { font-family: var(--font-sans); font-size: var(--fs-micro); color: var(--ink-soft); margin-top: var(--space-4); } /* Hero composition — borderless editorial mark on the right of the H1. No box; the ICAB number is the visual anchor, framed by two hairlines that read as a register entry rather than a sticker. */ .hero .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .hero-mark { background: transparent; border: 0; padding: 0; aspect-ratio: auto; max-width: 260px; margin-left: auto; display: flex; flex-direction: column; text-align: center; position: relative; padding-top: var(--space-3); } /* Eyebrow + italic name sit above the rule. */ .hero-mark > div:first-child { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--space-5); } .hero-mark .seal-eyebrow { font-family: var(--font-sans); font-size: .62rem; text-transform: uppercase; letter-spacing: .28em; color: var(--ink-soft); line-height: 1.4; } .hero-mark .seal-name { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--ink); font-size: 1.08rem; line-height: 1.25; } /* ICAB block — anchor, framed top & bottom by hairlines. */ .hero-mark .seal-icab { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--space-5) 0; border-top: 1px solid var(--rule); color: var(--color-primary); font-family: var(--font-serif); line-height: 1; } .hero-mark .seal-icab .label { order: 1; font-family: var(--font-sans); font-weight: 500; font-size: .6rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .32em; } .hero-mark .seal-icab .number { order: 2; font-weight: 400; font-size: clamp(2.8rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: .01em; color: var(--color-primary); font-feature-settings: "lnum" 1, "tnum" 0; } .hero-mark .seal-icab .prefix { font-style: italic; font-weight: 400; color: var(--ink-soft); font-size: .38em; margin-right: .25em; vertical-align: .55em; letter-spacing: 0; } /* The seal-rule keeps the trace animation; sits between ICAB and footer. */ .hero-mark .seal-rule { height: 1px; background: var(--rule); margin: 0; transform-origin: left center; } .hero-mark .seal-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: var(--space-5); font-family: var(--font-sans); font-size: .6rem; text-transform: uppercase; letter-spacing: .26em; color: var(--ink-soft); line-height: 1.3; } @media (max-width: 880px) { .hero .split { grid-template-columns: 1fr; } .hero { padding-bottom: var(--space-9); } .hero-mark { max-width: 240px; margin-left: 0; margin-top: var(--space-5); } } /* For whom — three editorial paragraphs separated by hairlines. */ .profiles { display: grid; gap: var(--space-7); } .profile { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 64px); padding-block: var(--space-7) 0; align-items: start; } .profile + .profile { border-top: 1px solid var(--rule); padding-top: var(--space-8); } .profile h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); margin: 0; color: var(--ink); } .profile p { color: var(--ink-soft); font-size: var(--fs-body); margin: 0; max-width: 60ch; } @media (max-width: 720px) { .profile { grid-template-columns: 1fr; gap: var(--space-3); } } /* How it works — big editorial numerals on the left of each step. */ .steps { display: grid; gap: 0; } .step { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: clamp(24px, 4vw, 80px); padding: var(--space-8) 0; align-items: start; border-top: 1px solid var(--rule); } .step:last-of-type { border-bottom: 1px solid var(--rule); } .step .numeral { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-numeral); color: var(--color-primary); line-height: 1; letter-spacing: -.02em; } .step h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); margin: 0 0 var(--space-3); } .step p { color: var(--ink-soft); margin: 0; max-width: 56ch; } @media (max-width: 720px) { .step { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-7) 0; } .step .numeral { font-size: clamp(2.4rem, 8vw, 3rem); } } /* Scope (alcance) — single column of editorial prose, no in/out lists. */ .scope-prose { max-width: 60ch; font-size: var(--fs-lead); color: var(--ink); line-height: var(--lh-body); } .scope-prose p + p { margin-top: 1.1em; } .scope-prose p { color: var(--ink-soft); } .scope-prose p:first-child { color: var(--ink); font-size: 1.05em; } /* About Pau — portrait at 4:5. Slightly smaller than full column, with a subtle radial mask softening the edges so the image breathes into the page instead of sitting hard against a border. */ .about-image { aspect-ratio: 4 / 5; width: 100%; max-width: 340px; margin: 0 0 0 auto; /* sit at the right of its column */ overflow: hidden; background: var(--bg-alt); position: relative; border: 0; /* Soft feathered edge — solid through 78%, gentle fade to ~92%, the last 8% goes transparent. Subtle, not vignette-heavy. */ -webkit-mask-image: radial-gradient(ellipse 105% 105% at center, rgba(0,0,0,1) 78%, rgba(0,0,0,.7) 92%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 105% 105% at center, rgba(0,0,0,1) 78%, rgba(0,0,0,.7) 92%, rgba(0,0,0,0) 100%); } @media (max-width: 880px) { .about-image { max-width: 280px; margin-left: 0; } } .about-image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(16px); opacity: 0; transition: filter 700ms var(--ease-out), opacity 500ms var(--ease-out); } .about-image img.is-loaded { filter: blur(0); opacity: 1; } .about-text dl { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3) var(--space-6); margin: var(--space-7) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--rule); font-family: var(--font-sans); font-size: .95rem; } .about-text dt { text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow); color: var(--ink-soft); font-weight: 500; } .about-text dd { margin: 0; color: var(--ink); } @media (max-width: 720px) { .about-text dl { grid-template-columns: 1fr; gap: 4px var(--space-4); } .about-text dt { margin-top: var(--space-3); } } /* Fees — short prose, no price callout (price is discussed in the intro call). */ /* Fees section: tighten the gap between the eyebrow/H2 and the prose below — the section-head default is too generous for short copy. */ #fees .section-head { margin-bottom: var(--space-6); } /* Approach section: match the tight H2→prose gap used in #about, where the heading and the first paragraph sit as direct siblings with no extra margin between them. */ #approach .section-head { margin-bottom: 0; } .pricing-prose { max-width: 56ch; font-size: var(--fs-lead); color: var(--ink); } .pricing-prose p { color: var(--ink-soft); } .pricing-prose p:first-child { color: var(--ink); font-size: 1.05em; margin-bottom: 1em; } .pricing-figure { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-serif); font-weight: 600; color: var(--color-primary); font-size: 1.6em; line-height: 1; letter-spacing: -.01em; } .pricing-figure small { font-family: var(--font-sans); font-weight: 400; font-size: .56em; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--ink-soft); } .pricing-cta-row { margin-top: var(--space-7); display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; } /* FAQ — clean accordion with hairlines, a rotating + on the right. */ .faq-list { display: grid; gap: 0; border-top: 1px solid var(--rule); } .faq-item { border-bottom: 1px solid var(--rule); } .faq-item summary { list-style: none; cursor: pointer; padding: var(--space-7) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; color: var(--ink); transition: color var(--t-quick) var(--ease-out); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--color-primary); } .faq-item .marker { flex-shrink: 0; width: 16px; height: 16px; position: relative; transition: transform var(--t-base) var(--ease-out); } .faq-item .marker::before, .faq-item .marker::after { content: ""; position: absolute; background: currentColor; inset: 0; margin: auto; } .faq-item .marker::before { width: 100%; height: 1px; } .faq-item .marker::after { height: 100%; width: 1px; transition: transform var(--t-base) var(--ease-out); } .faq-item[open] .marker { transform: rotate(180deg); } .faq-item[open] .marker::after { transform: scaleY(0); } .faq-item p { margin: 0 0 var(--space-7); color: var(--ink-soft); max-width: 64ch; } /* Final CTA + form — split layout, dark section. */ section.final { background: var(--bg-deep); color: var(--bg-base); } section.final .lead { color: rgba(251, 251, 250, .76); } section.final form.contact label { color: rgba(251, 251, 250, .65); } section.final form.contact input, section.final form.contact textarea { color: var(--bg-base); border-bottom-color: rgba(251, 251, 250, .26); } section.final form.contact .field::after { background: var(--color-accent); } section.final form.contact .form-foot { font-family: var(--font-sans); font-size: .85rem; color: rgba(251, 251, 250, .65); } section.final form.contact .form-foot a { color: var(--bg-base); border-bottom: 1px solid rgba(251, 251, 250, .4); } /* Footer — three-column, sober, small type. */ footer.site-footer { background: var(--bg-deep); color: rgba(251, 251, 250, .65); padding: var(--space-9) 0 var(--space-7); font-family: var(--font-sans); font-size: .88rem; } footer.site-footer .row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; } footer.site-footer .brand-block { font-family: var(--font-serif); font-weight: 600; color: var(--bg-base); font-size: 1.15rem; margin-bottom: var(--space-4); } footer.site-footer .meta { line-height: 1.85; } footer.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } footer.site-footer a { color: rgba(251, 251, 250, .76); transition: color var(--t-quick) var(--ease-out); } footer.site-footer a:hover { color: var(--bg-base); } footer.site-footer .copyright { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(251, 251, 250, .12); font-size: .8rem; color: rgba(251, 251, 250, .5); } @media (max-width: 720px) { footer.site-footer .row { grid-template-columns: 1fr; gap: var(--space-6); } } /* The approach — single-paragraph editorial prose. */ .approach-prose { max-width: 60ch; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.2rem, .95rem + .8vw, 1.6rem); line-height: 1.45; color: var(--ink); letter-spacing: -.005em; } /* Legal pages — narrow column, generous line-height, hairlines for h2. */ .legal-page { padding-block: var(--space-9) var(--space-9); background: var(--bg-base); } .legal-page .eyebrow { color: var(--color-primary); } .legal-page h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin-bottom: var(--space-3); } .legal-meta { font-size: .85rem; color: var(--ink-soft); margin-bottom: var(--space-4); } .legal-review-note { font-family: var(--font-sans); font-size: .85rem; color: #78350f; background: #fef3c7; border: 1px solid #fde68a; padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-7); border-radius: 2px; } .legal-body { color: var(--ink); } .legal-body h2 { font-size: 1.4rem; margin: var(--space-7) 0 var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--rule); } .legal-body h2:first-of-type { padding-top: 0; border-top: 0; } .legal-body h3 { font-size: 1.05rem; margin: var(--space-5) 0 var(--space-2); } .legal-body p { color: var(--ink-soft); max-width: 70ch; margin: 0 0 1em; } .legal-body ul, .legal-body ol { color: var(--ink-soft); padding-left: 1.4em; margin: 0 0 1em; max-width: 70ch; } .legal-body li { margin-bottom: .35em; } .legal-body dl { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0; font-size: .95rem; } .legal-body dt { font-weight: 500; color: var(--ink); } .legal-body dd { margin: 0; color: var(--ink-soft); } .legal-body a { color: var(--color-primary); border-bottom: 1px solid currentColor; padding-bottom: 1px; } .legal-body a:hover { color: var(--color-primary-d); } @media (max-width: 720px) { .legal-body dl { grid-template-columns: 1fr; gap: 4px var(--space-4); } .legal-body dt { margin-top: var(--space-3); } } .legal-back { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--rule); } /* Cookie consent banner — pinned to bottom, shown only on first visit. */ .pa-cookies { position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-base); border-top: 1px solid var(--rule); box-shadow: 0 -8px 24px rgba(15, 23, 42, .07); z-index: 90; padding: var(--space-4) 0; font-family: var(--font-sans); animation: pa-cookies-in 320ms var(--ease-out) both; } .pa-cookies[hidden] { display: none; } @keyframes pa-cookies-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } } .pa-cookies .container { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .pa-cookies-text { flex: 1 1 320px; margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); } .pa-cookies-text .link-inline { white-space: nowrap; } .pa-cookies-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } .pa-cookies-actions .btn { padding: 10px 20px; font-size: .88rem; } @media (max-width: 720px) { .pa-cookies .container { flex-direction: column; align-items: stretch; } .pa-cookies-actions { justify-content: flex-end; } } /* Skeleton dev banner — only present in v2.x-skeleton builds. */ .dev-banner { background: #fef3c7; color: #78350f; text-align: center; padding: 6px 12px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .72rem; letter-spacing: .04em; border-bottom: 1px solid #fde68a; } .dev-banner code { background: rgba(120, 53, 15, .12); padding: 1px 6px; border-radius: 2px; } /* ------------------------------------------------------------------------- * 6.5 Responsive — phone overrides. * * Component-level breakpoints further up handle layout (grid → 1col). * This block tightens vertical rhythm, padding, and large editorial * spacing tokens so the page reads cleanly on a 360-414px viewport. * * Breakpoints used here: * 720px — most phones in portrait (default phone overrides). * 480px — small phones / cramped portrait (further tighten + stack). * ------------------------------------------------------------------------- */ @media (max-width: 720px) { /* Header — tighter padding so it doesn't eat 1/8 of the viewport. */ .site-header { padding: 12px 0; } .brand { font-size: 1.05rem; } .brand small { font-size: .62rem; } .lang-switch a { padding: 6px 6px; } /* Sections — collapse the generous editorial padding to phone-sized. */ section { padding-block: var(--space-7); } section:first-of-type { padding-top: var(--space-6); } section.alt, section.deep { padding-block: var(--space-7); } /* Section heads — shrink the gap to body content. */ .section-head { margin-bottom: var(--space-6); } /* Hero — drop the heavy desktop padding. */ .hero { padding-top: var(--space-5); padding-bottom: var(--space-8); } .hero-h1 { margin-bottom: var(--space-5); } .hero-lead { margin-bottom: var(--space-6); font-size: var(--fs-body); } .hero-micro { margin-top: var(--space-3); } /* Hero seal — already smaller from earlier breakpoint, just align left and keep the typographic anchor readable on narrow viewports. */ .hero-mark { max-width: 100%; text-align: left; align-items: flex-start; padding-top: 0; } .hero-mark > div:first-child, .hero-mark .seal-icab, .hero-mark .seal-foot { align-items: flex-start; } .hero-mark .seal-icab { padding: var(--space-4) 0; } .hero-mark .seal-icab .number { font-size: 2.4rem; } .hero-mark .seal-foot { padding-top: var(--space-4); } /* Lead paragraph — tighten the bottom margin. */ .lead { margin-bottom: var(--space-5); } /* About section — image already stacks below text via .split. Pull it in a bit on the side and add a small breath above. */ .about-image { max-width: 240px; margin-top: var(--space-5); } .about-text dl { margin-top: var(--space-5); padding-top: var(--space-4); } /* Steps & profiles already collapse to 1fr at 720px. Reduce the giant vertical numeral so it doesn't take half the row. */ .step .numeral { font-size: clamp(2rem, 8vw, 2.8rem); } /* Approach prose — slightly smaller serif to fit one line per phrase. */ .approach-prose { font-size: clamp(1.1rem, 1rem + 1vw, 1.3rem); } /* Forms — keep full width, slightly tighter gaps between fields. */ form.contact { gap: var(--space-5); max-width: 100%; } form.contact textarea { min-height: 110px; } /* Buttons — make sure tap targets are large enough. */ .btn { padding: 13px 22px; width: 100%; justify-content: center; } .hero-cta-row { flex-direction: column; align-items: stretch; gap: var(--space-3); } .hero-cta-row .ghost-link { text-align: center; padding: 6px 0; } /* Footer — collapse to single column, shrink top padding, smaller type. */ footer.site-footer { padding: var(--space-7) 0 var(--space-5); font-size: .82rem; } footer.site-footer .row { gap: var(--space-5); } footer.site-footer .copyright { margin-top: var(--space-5); padding-top: var(--space-4); font-size: .72rem; } /* Legal pages — same compression. */ .legal-page { padding-block: var(--space-7); } .legal-body h2 { font-size: 1.2rem; margin-top: var(--space-5); padding-top: var(--space-4); } /* Cookie banner — already stacks at 720; tighten copy + buttons. */ .pa-cookies { padding: var(--space-3) 0; } .pa-cookies-text { font-size: .82rem; } .pa-cookies-actions .btn { width: auto; padding: 9px 16px; font-size: .82rem; } /* Scroll progress bar — hide on phones (visual noise, mobile already has native scroll indicators). */ .pa-progress { display: none; } } @media (max-width: 480px) { .container { padding-inline: 16px; } .site-header { padding: 10px 0; } .brand small { display: none; } /* "ICAB nº 48797" subtitle */ .hero-h1 { letter-spacing: -.012em; } .hero-mark .seal-icab .number { font-size: 2.1rem; } .hero-mark .seal-foot { letter-spacing: .18em; font-size: .58rem; } .step { padding: var(--space-6) 0; } .profile { padding-block: var(--space-6) 0; } /* About image even smaller for the smallest phones. */ .about-image { max-width: 210px; } } /* ------------------------------------------------------------------------- * 7. Animation states. The CSS half of the GSAP pairing: elements start * in their "before" state via these classes; animations.js cleans them * up by animating to identity. If JS fails to load, the elements stay * invisible — so we *only* apply pre-states when JS is available. The * `.pa-js` class is added by animations.js at the top of . * ------------------------------------------------------------------------- */ .pa-js .pa-fade-up { opacity: 0; transform: translateY(20px); will-change: opacity, transform; } .pa-js .pa-stagger > * { opacity: 0; transform: translateY(10px); will-change: opacity, transform; } .pa-js .hairline.pa-trace, .pa-js .seal-rule.pa-trace { transform: scaleX(0); will-change: transform; } .pa-js .step.pa-step .numeral { opacity: 0; transform: translateY(8px); will-change: opacity, transform; } /* ------------------------------------------------------------------------- * 8. prefers-reduced-motion — disable all transforms/animations and reveal * immediately. The motion-reduced experience is intentionally identical * to the static fallback. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .pa-js .pa-fade-up, .pa-js .pa-stagger > *, .pa-js .step.pa-step .numeral { opacity: 1 !important; transform: none !important; } .pa-js .hairline.pa-trace, .pa-js .seal-rule.pa-trace { transform: scaleX(1) !important; } .pa-cursor, .pa-cursor-dot { display: none !important; } .pa-progress { display: none !important; } }