/* ========================================================================== Practice-area pages (sucesiones, familia, previsional) Loaded after site.css. Adds per-section behaviour on top of the shared components; never renames what site.css already styles. The area colour comes from --area / --area-soft / --area-tint set on . ========================================================================== */ /* -------------------------------------------------------------------------- Hero: orchestrated entrance + photo that settles, then drifts on scroll -------------------------------------------------------------------------- */ .area-hero { position: relative; overflow: hidden; } .area-hero [data-in] { opacity: 0; transform: translateY(14px); animation: area-in var(--dur-slow) var(--ease-out) forwards; } .area-hero [data-in="1"] { animation-delay: 80ms; } .area-hero [data-in="2"] { animation-delay: 200ms; } .area-hero [data-in="3"] { animation-delay: 380ms; } .area-hero [data-in="4"] { animation-delay: 540ms; } @keyframes area-in { to { opacity: 1; transform: none; } } .area-hero__text .kicker { display: inline-flex; align-items: center; gap: 0.75rem; } .area-hero__text .kicker::before { content: ""; width: 2.25rem; height: 1.5px; background: var(--area); transform-origin: left; animation: area-rule 900ms var(--ease-out) 260ms both; } @keyframes area-rule { from { transform: scaleX(0); } } .area-hero__figure img { height: calc(100% + 4rem); margin-top: -4rem; translate: 0 var(--py, 0px); animation: area-photo 1.8s var(--ease-out) both; } @keyframes area-photo { from { scale: 1.06; opacity: 0.6; } to { scale: 1; opacity: 0.9; } } /* -------------------------------------------------------------------------- Ventajas: the plain list from site.css (hairline rows, thin check in the area colour). Rows fade in one after another when the list scrolls into view; site.js flags the list with .is-visible. Nothing reacts to hover. The hidden start state only applies when the .js hook is present, so the list is always readable without scripts. -------------------------------------------------------------------------- */ .benefits__list.reveal { opacity: 1; transform: none; transition: none; } .benefits__list li { grid-template-columns: 1.75rem 1fr; gap: 0.9rem; padding: 1.2rem 0; } .benefits__list svg { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; } .js .benefits__list li { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .js .benefits__list li:nth-child(2) { transition-delay: 100ms; } .js .benefits__list li:nth-child(3) { transition-delay: 200ms; } .js .benefits__list li:nth-child(4) { transition-delay: 300ms; } .js .benefits__list li:nth-child(5) { transition-delay: 400ms; } .js .benefits__list li:nth-child(n + 6) { transition-delay: 500ms; } .js .benefits__list.is-visible li { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Proceso: a scroll-driven reading of the five steps. Desktop (JS, no reduced motion, stage fits): the section's .container becomes a stage stuck to the viewport while the section runs 320svh, so the pin holds for 2.2 viewport heights. area.js maps the scroll to --p (0–4, the node the line has reached) and to three discrete states per step: nothing (still to come: hollow node, faint number, no text), .is-current (filled node, cream title, description at full tone) and .is-done (same, description one tone down). The line is continuous and scrubs both ways; the states are discrete so the title/description stagger is a real 100ms, not a scroll distance. Narrow screens: no pin. The vertical line fills up to a reading line and the step whose node crossed it is current (--track/--fill in px). .is-unpinned (stage does not fit): the one-shot reveal from site.css, driven by the .is-visible flag site.js still sets. That flag is also set in the other modes and is simply out-ranked there. Without JS, or with reduced motion, all five steps are complete and static from the start. Nothing here reacts to hover: the steps are not controls. -------------------------------------------------------------------------- */ /* The track ends on the fifth node instead of running to the list edge */ @media (min-width: 901px) { .steps::before { right: calc((100% - 4 * 1.25rem) / 5 - 1.4rem); } .steps::after { width: calc((100% + 1.25rem) * 4 / 5); } } html:not(.js) .steps::after { transform: none; } html:not(.js) .step::before { background: var(--cream); color: var(--navy); border-color: var(--cream); } /* One-shot fallback: title and text of each step follow the line with the same stagger site.css gives the numbers */ .js .step h3, .js .step p { opacity: 0; transform: translateY(6px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 260ms + 160ms); } .js .steps.is-visible .step h3, .js .steps.is-visible .step p { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { /* Step states, shared by the pinned and the flow readings */ .js .process:not(.is-unpinned) .steps .step::before { background: var(--navy); color: rgba(255, 249, 243, 0.38); border-color: var(--on-dark-line); transition-delay: 0s; } .js .process:not(.is-unpinned) .steps .step:is(.is-done, .is-current)::before { background: var(--cream); color: var(--navy); border-color: var(--cream); } .js .process:not(.is-unpinned) .steps .step h3, .js .process:not(.is-unpinned) .steps .step p { opacity: 0; transform: translateY(8px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out), color var(--dur-slow) var(--ease-out); transition-delay: 0s; } .js .process:not(.is-unpinned) .steps .step:is(.is-done, .is-current) h3, .js .process:not(.is-unpinned) .steps .step:is(.is-done, .is-current) p { opacity: 1; transform: none; } /* The description enters 100ms after the title; leaving, nothing waits */ .js .process:not(.is-unpinned) .steps .step.is-current p { color: var(--on-dark); transition-delay: 100ms, 100ms, 0s; } /* The line: continuous, one node per unit of --p */ .js .process:not(.is-unpinned) .steps::after { transform: none; transition: width 240ms linear, height 240ms linear; } } /* Pinned stage */ @media (prefers-reduced-motion: no-preference) and (min-width: 901px) { .js .process:not(.is-unpinned) { padding: 0; height: 320vh; height: 320svh; } .js .process:not(.is-unpinned) > .container { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; padding: calc(var(--header-h) + 1rem) 0 1.5rem; } /* Grid items do not collapse margins: the head's bottom margin is the gap */ .js .process:not(.is-unpinned) .steps { margin-top: 0; } .js .process:not(.is-unpinned) .steps::after { width: calc(var(--p, 0) * (100% + 1.25rem) / 5); } } /* Flow reading on narrow screens */ @media (prefers-reduced-motion: no-preference) and (max-width: 900px) { .js .process:not(.is-unpinned) .steps::before { bottom: auto; height: var(--track, calc(100% - 2.8rem)); } .js .process:not(.is-unpinned) .steps::after { height: var(--fill, 0px); } } /* -------------------------------------------------------------------------- Preguntas frecuentes: open AND close animate (JS holds the

open until the collapse finishes); the open item carries the area colour -------------------------------------------------------------------------- */ .faq__item { position: relative; } .faq__item::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--area); transform: scaleY(0); transform-origin: top; transition: transform var(--dur) var(--ease-out); } .faq__item summary { transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur) var(--ease-out); } .faq__item summary svg { width: 1.9rem; height: 1.9rem; padding: 0.35rem; border-radius: 50%; border: 1px solid var(--line); transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .faq__item summary:hover svg { border-color: var(--area); } .faq__item .faq__body { transition: grid-template-rows var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out); } .faq__body > div { opacity: 0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } /* Enhanced list: the class .is-open drives the animation instead of [open] */ .faq__list.is-enhanced .faq__item[open] .faq__body { grid-template-rows: 0fr; } .faq__list.is-enhanced .faq__item[open] summary svg { transform: none; } .faq__list.is-enhanced .faq__item.is-open .faq__body { grid-template-rows: 1fr; } .faq__list.is-enhanced .faq__item.is-open summary svg { transform: rotate(45deg); } .faq__list.is-enhanced .faq__item.is-open .faq__body > div, .faq__list:not(.is-enhanced) .faq__item[open] .faq__body > div { opacity: 1; transform: none; transition-delay: 120ms, 120ms; } .faq__list.is-enhanced .faq__item.is-open::before, .faq__list:not(.is-enhanced) .faq__item[open]::before { transform: scaleY(1); } .faq__list.is-enhanced .faq__item.is-open summary, .faq__list:not(.is-enhanced) .faq__item[open] summary { color: var(--area); padding-left: 1.25rem; } .faq__list.is-enhanced .faq__item.is-open .faq__body, .faq__list:not(.is-enhanced) .faq__item[open] .faq__body { padding-left: 1.25rem; } .faq__list.is-enhanced .faq__item.is-open summary svg, .faq__list:not(.is-enhanced) .faq__item[open] summary svg { background: var(--area); border-color: var(--area); color: var(--cream); } /* -------------------------------------------------------------------------- CTA final: a quiet, static wash of light in the area colour and a faint photo at the edges -------------------------------------------------------------------------- */ .cta-final { position: relative; isolation: isolate; overflow: hidden; } .cta-final::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../../images/photos/handshake.webp") center / cover no-repeat; opacity: 0.11; filter: grayscale(1) contrast(1.05); mask-image: radial-gradient(70% 90% at 50% 50%, transparent 35%, #000 100%); -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, transparent 35%, #000 100%); } .cta-final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 55% at 28% 38%, color-mix(in srgb, var(--area-soft) 70%, transparent), transparent 70%), radial-gradient(38% 48% at 74% 66%, color-mix(in srgb, var(--cream) 9%, transparent), transparent 70%); } .cta-final .btn { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .cta-final .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); } .cta-final .btn:active { transform: translateY(0); } /* -------------------------------------------------------------------------- Otras áreas: each card wears its own colour and fills with it on hover -------------------------------------------------------------------------- */ .other-areas a { --card: var(--blue); position: relative; isolation: isolate; overflow: hidden; border-left: 3px solid var(--card); transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .other-areas a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--card); transform: translateX(-101%); transition: transform var(--dur) var(--ease-out); } .other-areas .is-sucesiones { --card: var(--green); } .other-areas .is-familia { --card: var(--bordeaux); } .other-areas .is-previsional { --card: var(--blue); } .other-areas a > div { flex: 1 1 auto; min-width: 0; } .other-areas a svg { transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .other-areas small { transition: color var(--dur) var(--ease-out); } .other-areas__arrow { width: 1.4rem; height: 1.4rem; margin-left: auto; opacity: 0; transform: translateX(-8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .other-areas a:hover, .other-areas a:focus-visible { background: transparent; border-color: var(--card); color: var(--cream); } .other-areas a:hover::before, .other-areas a:focus-visible::before { transform: none; } .other-areas a:hover svg, .other-areas a:focus-visible svg { color: var(--cream); } .other-areas a:hover .other-areas__arrow, .other-areas a:focus-visible .other-areas__arrow { opacity: 1; transform: none; } .other-areas a:hover small, .other-areas a:focus-visible small { color: var(--on-dark-soft); } .other-areas a:focus-visible { outline-color: var(--card); } /* -------------------------------------------------------------------------- Otras áreas, `other-areas--books`: the plain card, with the home's leather spine standing in for the coloured left border. The pre-rendered flat spine is cropped from the top so the stamp shows. The link is the whole card; on hover the leather catches a little more light and the arrow nudges, nothing else. -------------------------------------------------------------------------- */ .other-areas--books a { padding: 0; gap: 0; align-items: stretch; border: 1px solid var(--line); border-left: 0; border-radius: 2px; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .other-areas--books a::before { content: none; } .other-areas--books .other-areas__spine { flex: 0 0 2.75rem; /* Plain leather: the neutral grain the spines are rendered from, tinted with the area colour. A slight highlight down the middle rounds the spine. */ background: linear-gradient(to right, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.08) 45%, rgba(0, 0, 0, 0.18)), url("../../images/textures/leather.webp") center / 11rem auto repeat, var(--card); background-blend-mode: normal, soft-light, normal; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25); transition: filter var(--dur) var(--ease-out); } .other-areas--books .other-areas__page { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; } .other-areas--books .other-areas__page > svg { width: 2rem; height: 2rem; flex: none; color: var(--card); } .other-areas--books .other-areas__text { flex: 1 1 auto; min-width: 0; } .other-areas--books small { display: block; color: var(--ink-soft); } .other-areas--books .other-areas__more { flex: none; margin-left: auto; color: var(--card); } .other-areas--books .other-areas__more svg { width: 1em; height: 1em; } /* Hover: the old colour-fill rules above are out-ranked here */ .other-areas--books a:hover, .other-areas--books a:focus-visible { color: var(--ink); background: #fff; border-color: var(--line-strong); } .other-areas--books a:hover svg, .other-areas--books a:focus-visible svg { color: var(--card); } .other-areas--books a:hover small, .other-areas--books a:focus-visible small { color: var(--ink-soft); } .other-areas--books a:hover .other-areas__spine, .other-areas--books a:focus-visible .other-areas__spine { filter: brightness(1.08); } .other-areas--books a:hover .other-areas__more { border-bottom-color: currentColor; } .other-areas--books a:hover .other-areas__more svg { transform: translateX(3px); } .other-areas--books a:focus-visible { outline: 2px solid var(--card); outline-offset: 2px; } @media (max-width: 640px) { .other-areas--books .other-areas__page { padding: 1.1rem 1.25rem; } .other-areas--books .other-areas__more span { display: none; } } /* -------------------------------------------------------------------------- Reduced motion: everything lands in its final state -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .area-hero [data-in] { opacity: 1; transform: none; animation: none; } .area-hero__text .kicker::before { animation: none; } .area-hero__figure img { animation: none; translate: none; } .js .benefits__list li, .js .step h3, .js .step p { opacity: 1; transform: none; transition: none; } .steps::after { transform: none; transition: none; } .step::before { background: var(--cream); color: var(--navy); border-color: var(--cream); transition: none; } .cta-final::after { animation: none; } }