/* ========================================================================== SVARL Portfolio — Warm & Editorial Design System Mobile-first. Single source of truth for all pages. ========================================================================== */ /* Google Fonts now loaded via in HTML for performance (no waterfall) */ /* ----- 0a. First-visit intro animation --------------------------------- */ /* Flash-prevention: the inline script in the of every HTML page sets .svarl-intro-pending on *before* the body is parsed, when it detects the user is about to see the intro for the first time. The rule below then hides the body until script.js has a chance to inject the intro overlay on top. Without this, the browser paints the page content for ~1 frame before the overlay is appended, producing a visible flash followed by "the page disappearing" behind the animation. The exception targets the .svarl-intro overlay itself so it remains visible even though its parent body is hidden — `visibility` is the one CSS property that lets a descendant override an inherited hidden state (opacity and display cannot). The pending class is removed at the start of the panel-parting phase by initIntroAnimation() in script.js, restoring the body so it is revealed as the panels slide apart. A 3-second safety-net timer in the inline script removes the class unconditionally if script.js ever fails to load — the body is never stuck hidden. */ html.svarl-intro-pending body { visibility: hidden; } html.svarl-intro-pending body .svarl-intro, html.svarl-intro-pending body .svarl-intro * { visibility: visible; } /* One-off editorial reveal played on the very first page the visitor lands on in a given tab session. The animation is staged in 3 acts: 1. A fine terracotta rule draws itself from the centre outward. 2. The five letters of the SVARL mark rise up from underneath that rule, staggered like letterpress blocks being set by hand. 3. The rule itself then grows to full viewport width and becomes the dividing line along which two opaque panels part vertically to reveal the page — a creative twist that re-uses the decorative element as the functional curtain-divider. The overlay is injected by script.js only when sessionStorage shows this tab has not seen it before, and is skipped entirely when prefers-reduced-motion is set. */ .svarl-intro { position: fixed; inset: 0; z-index: 10001; /* above page-loader (9999) and everything else */ pointer-events: none; overflow: hidden; contain: layout paint; } /* Two opaque panels — together they cover the whole viewport at rest, and slide apart vertically on .is-parting to reveal the page. */ .svarl-intro__panel { position: absolute; left: 0; right: 0; height: 50%; background: var(--bg, #FBF9F4); will-change: transform; transition: transform 520ms cubic-bezier(.86,.01,.2,.99); } .svarl-intro__panel--top { top: 0; } .svarl-intro__panel--bottom { bottom: 0; } .svarl-intro.is-parting .svarl-intro__panel--top { transform: translateY(-100%); } .svarl-intro.is-parting .svarl-intro__panel--bottom { transform: translateY(100%); } /* Centred stage that holds the mark, the rule and the caption. */ .svarl-intro__stage { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 1rem; } /* The SVARL mark. overflow:hidden clips the letters as they rise from below the baseline, creating a "letterpress set" effect. */ .svarl-intro__mark { display: flex; gap: .04em; overflow: hidden; padding: .12em 0; line-height: 1; } .svarl-intro__mark span { display: inline-block; font-family: var(--font-display, 'Fraunces', serif); font-size: clamp(3rem, 10vw, 6rem); font-weight: 500; letter-spacing: .14em; line-height: 1; color: var(--accent, #C14A1C); transform: translateY(110%); opacity: 0; will-change: transform, opacity; animation: svarl-intro-rise 680ms cubic-bezier(.2,.75,.2,1) forwards; } .svarl-intro__mark span:nth-child(1) { animation-delay: 320ms; } .svarl-intro__mark span:nth-child(2) { animation-delay: 380ms; } .svarl-intro__mark span:nth-child(3) { animation-delay: 440ms; } .svarl-intro__mark span:nth-child(4) { animation-delay: 500ms; } .svarl-intro__mark span:nth-child(5) { animation-delay: 560ms; } @keyframes svarl-intro-rise { to { transform: translateY(0); opacity: 1; } } /* The horizontal rule — starts at 0 width, grows to ~260px while the letters rise, then expands to full viewport width just before the panels part along it. */ .svarl-intro__rule { width: 0; height: 1.5px; background: var(--accent, #C14A1C); border-radius: 1px; will-change: width; transition: width 350ms cubic-bezier(.22,.61,.36,1); } .svarl-intro.is-ready .svarl-intro__rule { width: clamp(180px, 24vw, 300px); } .svarl-intro.is-parting .svarl-intro__rule { width: 100vw; transition: width 520ms cubic-bezier(.86,.01,.2,.99); } /* Tagline under the rule. Fades in once the letters have settled. */ .svarl-intro__caption { font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: .7rem; font-weight: 600; letter-spacing: .35em; color: var(--ink-soft, #54524A); opacity: 0; transform: translateY(6px); will-change: transform, opacity; transition: opacity 340ms ease 900ms, transform 340ms ease 900ms; } .svarl-intro.is-ready .svarl-intro__caption { opacity: 1; transform: translateY(0); } /* Fade the mark and caption upward just before the curtain parts. */ .svarl-intro.is-fading .svarl-intro__mark, .svarl-intro.is-fading .svarl-intro__caption { transition: opacity 280ms ease, transform 280ms ease; opacity: 0; transform: translateY(-8px); } @media (prefers-reduced-motion: reduce) { .svarl-intro { display: none !important; } } /* ----- 0b. Page transition loader --------------------------------------- */ /* Anti-flash: hide body while loader is being set up on arrival */ html.is-page-transitioning body { opacity: 0; } /* Smooth fade-in of body once the incoming page is ready */ body { transition: opacity 220ms ease-out; } @media (prefers-reduced-motion: reduce) { body { transition: none; } } .page-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(251, 249, 244, .35); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); opacity: 0; will-change: opacity; pointer-events: none; transition: opacity 120ms ease; } .page-loader.is-active { opacity: 1; pointer-events: auto; } /* Inner content */ .page-loader__inner { display: flex; flex-direction: column; align-items: center; gap: .75rem; } /* Brand letters */ .page-loader__brand { display: flex; overflow: hidden; gap: .08em; } .page-loader__brand span { display: inline-block; font-family: var(--font-display, 'Fraunces', serif); font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); font-weight: 600; letter-spacing: .14em; color: var(--accent, #C14A1C); will-change: transform, opacity; } .page-loader.is-animating .page-loader__brand span { animation: letterUp 150ms cubic-bezier(.22,.61,.36,1) both; } .page-loader.is-animating .page-loader__brand span:nth-child(1){animation-delay:20ms} .page-loader.is-animating .page-loader__brand span:nth-child(2){animation-delay:35ms} .page-loader.is-animating .page-loader__brand span:nth-child(3){animation-delay:50ms} .page-loader.is-animating .page-loader__brand span:nth-child(4){animation-delay:65ms} .page-loader.is-animating .page-loader__brand span:nth-child(5){animation-delay:80ms} /* Accent line */ .page-loader__line { width: 32px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-soft, #D98F65), transparent); border-radius: 1px; transform-origin: center; } .page-loader.is-animating .page-loader__line { animation: lineScale 150ms ease both 50ms; } /* Pulsing dots */ .page-loader__dots { display: flex; gap: 6px; margin-top: .25rem; } .page-loader__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--accent-soft, #D98F65); opacity: .3; } .page-loader.is-active .page-loader__dot { animation: dotPulse .8s ease-in-out infinite; } .page-loader.is-active .page-loader__dot:nth-child(2){animation-delay:.1s} .page-loader.is-active .page-loader__dot:nth-child(3){animation-delay:.2s} /* Keyframes */ @keyframes letterUp { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: translateY(0); } } @keyframes lineScale { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes dotPulse { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .8; transform: scale(1.5); } } /* ----- 1. Design tokens -------------------------------------------------- */ :root { /* Palette — warm cream + terracotta */ --bg: #FBF9F4; --bg-alt: #F2EDE3; --bg-deep: #EAE1CE; --ink: #1C1B17; --ink-soft: #54524A; --ink-mute: #6B675B; --line: #E6DFD2; --line-soft: #EFE9DB; --accent: #B5430F; --accent-soft:#D98F65; --accent-ink: #7A2D0F; --danger: #B3261E; --success: #4F7D45; /* Typography */ --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.9375rem; /* 15 */ --fs-base: 1rem; /* 16 */ --fs-md: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem); --fs-lg: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem); --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); --fs-2xl: clamp(1.85rem, 1.3rem + 2.4vw, 2.75rem); --fs-3xl: clamp(2.25rem, 1.4rem + 3.8vw, 4rem); --fs-4xl: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem); --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.6; --lh-loose: 1.8; /* Spacing — fluid, 8-pt ish */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.75rem; --space-8: 3.5rem; --space-9: 4.5rem; --space-10: 6rem; --space-11: 8rem; /* Section vertical rhythm */ --section-y: clamp(3.5rem, 2rem + 5vw, 7rem); /* Radius & shadow */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(28, 27, 23, 0.06); --shadow-md: 0 10px 30px -12px rgba(28, 27, 23, 0.18); --shadow-lg: 0 25px 60px -20px rgba(28, 27, 23, 0.22); /* Layout */ --container: min(72rem, 92vw); --container-narrow: min(56rem, 92vw); /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 150ms; --dur: 280ms; --dur-slow: 520ms; /* Header height (used for anchor scroll offsets) */ --header-h: 72px; } /* ----- 2. Reset + base --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--accent-ink); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); line-height: var(--lh-tight); letter-spacing: -0.01em; margin: 0 0 var(--space-4); } h1 { font-size: var(--fs-3xl); font-weight: 500; } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); font-weight: 600; font-family: var(--font-body); letter-spacing: 0; } p { margin: 0 0 var(--space-4); color: var(--ink-soft); } ul { margin: 0 0 var(--space-4); padding-left: 1.25rem; color: var(--ink-soft); } li { margin-bottom: var(--space-2); } strong { color: var(--ink); font-weight: 600; } hr { border: 0; height: 1px; background: var(--line); margin: var(--space-7) 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--accent-soft); color: var(--ink); } /* ----- 3. Utilities ------------------------------------------------------ */ .container { width: var(--container); margin-inline: auto; } .container--narrow { width: var(--container-narrow); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -40px; background: var(--ink); color: var(--bg); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); z-index: 1000; transition: top var(--dur-fast) var(--ease); } .skip-link:focus { top: var(--space-4); color: var(--bg); } .stack > * + * { margin-top: var(--space-4); } .stack--lg > * + * { margin-top: var(--space-6); } .stack--xl > * + * { margin-top: var(--space-8); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); } .lead { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--ink-soft); max-width: 58ch; } .text-mute { color: var(--ink-mute); } .text-soft { color: var(--ink-soft); } .text-ink { color: var(--ink); } .text-accent{ color: var(--accent); } /* ----- 4. Site header --------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .site-header--scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 96%, transparent); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); padding-block: var(--space-3); } .brand { display: inline-flex; align-items: baseline; gap: var(--space-3); color: var(--ink); text-decoration: none; } .brand:hover { color: var(--ink); } .brand__mark { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.08em; color: var(--accent); } .brand__name { display: none; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-soft); } /* ----- 5. Navigation ---------------------------------------------------- */ .site-nav { position: relative; } .site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .site-nav__toggle:hover { border-color: var(--accent-soft); background: var(--bg-alt); } .site-nav__bars, .site-nav__bars::before, .site-nav__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease); } .site-nav__bars { position: relative; } .site-nav__bars::before, .site-nav__bars::after { content: ''; position: absolute; left: 0; } .site-nav__bars::before { top: -6px; } .site-nav__bars::after { top: 6px; } .site-nav__toggle[aria-expanded="true"] .site-nav__bars { background: transparent; } .site-nav__toggle[aria-expanded="true"] .site-nav__bars::before { transform: translateY(6px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__bars::after { transform: translateY(-6px) rotate(-45deg); } .site-nav__list { display: none; list-style: none; margin: 0; padding: 0; gap: var(--space-5); } /* Mobile menu — compact popover anchored to top-right of the viewport. Replaces the previous full-screen drawer. The list is always `display: flex` at this breakpoint and gated by opacity / pointer-events instead of display, so the scale + fade transitions actually fire on first open (display: none → display: flex would skip the transition). */ @media (max-width: 899px) { .site-nav__list { display: flex; position: fixed; top: calc(var(--header-h) - 6px); right: max(16px, env(safe-area-inset-right, 16px)); width: min(280px, calc(100vw - 32px)); max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-2); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 22px 50px -22px rgba(28, 27, 23, 0.28), 0 4px 14px -8px rgba(28, 27, 23, 0.10); transform-origin: top right; transform: scale(0.96) translateY(-6px); opacity: 0; pointer-events: none; transition: transform 240ms var(--ease), opacity 200ms var(--ease); z-index: 50; } .site-nav__list.is-open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; } .site-nav__list > li { width: 100%; } .site-nav__link { position: relative; display: flex; align-items: center; width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--fs-base); font-weight: 500; color: var(--ink); border-radius: var(--radius-md); transition: background 180ms var(--ease), color 180ms var(--ease), padding-left 180ms var(--ease); } .site-nav__link:hover, .site-nav__link:focus-visible { background: var(--bg-alt); color: var(--accent); outline: none; } .site-nav__link.is-active { background: var(--bg-alt); color: var(--accent); font-weight: 600; padding-left: calc(var(--space-4) + 8px); } /* Active-row accent rule, sits inside the rounded row */ .site-nav__link.is-active::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--accent); border-radius: 2px; } /* Contact CTA stays a filled pill, separated from the list with a hairline. */ .site-nav__link--cta { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); justify-content: center; background: var(--ink); color: var(--bg); border-radius: var(--radius-pill); } .site-nav__link--cta::after { /* Top hairline above the CTA. Pseudo-element keeps it independent of the rounded background and survives :hover state changes. */ content: ''; position: absolute; top: calc(-1 * var(--space-2) + 1px); left: var(--space-2); right: var(--space-2); height: 1px; background: var(--line-soft); } .site-nav__link--cta:hover, .site-nav__link--cta:focus-visible { background: var(--accent); color: var(--bg); padding-left: var(--space-4); } .site-nav__link--cta.is-active { background: var(--accent); color: var(--bg); padding-left: var(--space-4); } .site-nav__link--cta.is-active::before { display: none; } @media (prefers-reduced-motion: reduce) { .site-nav__list { transition: opacity 120ms linear; transform: none; } .site-nav__list.is-open { transform: none; } .site-nav__link { transition: none; } } } @media (min-width: 900px) { .site-nav__toggle { display: none; } .site-nav__list { display: flex; align-items: center; } .site-nav__link { position: relative; font-size: var(--fs-sm); color: var(--ink-soft); padding: var(--space-2) 0; font-weight: 500; } .site-nav__link:hover { color: var(--ink); } .site-nav__link.is-active { color: var(--ink); } .site-nav__link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); border-radius: 2px; } .site-nav__link--cta { padding: var(--space-2) var(--space-4); border: 1px solid var(--ink); border-radius: var(--radius-pill); color: var(--ink); } .site-nav__link--cta:hover { background: var(--ink); color: var(--bg); } .site-nav__link--cta.is-active::after { display: none; } .brand__name { display: inline; } } /* ----- 6. Language switcher --------------------------------------------- */ .lang-switcher { position: relative; } .lang-switcher__btn { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); color: var(--ink-soft); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .lang-switcher__btn:hover { border-color: var(--accent-soft); color: var(--ink); } .lang-switcher__menu { list-style: none; margin: 0; padding: var(--space-2); position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); z-index: 120; } .lang-switcher__menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .lang-switcher__menu li { margin: 0; } .lang-option { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: var(--space-3) var(--space-4); font: inherit; color: var(--ink-soft); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .lang-option:hover, .lang-option:focus-visible { background: var(--bg-alt); color: var(--ink); } .lang-option.active { background: var(--accent-soft); color: var(--ink); } /* "(β)" pill rendered next to language picker entries whose native key coverage is below the beta threshold (see BETA_LANGS in script.js). Tells the user upfront that some strings will fall through to French. */ .lang-option__beta { display: inline-block; margin-left: var(--space-2); padding: 0 6px; font-size: 0.7em; font-weight: 700; line-height: 1.6; color: var(--accent-ink); background: rgba(193, 74, 28, 0.12); border: 1px solid rgba(193, 74, 28, 0.25); border-radius: var(--radius-pill); vertical-align: middle; letter-spacing: .02em; } .lang-option:hover .lang-option__beta, .lang-option:focus-visible .lang-option__beta, .lang-option.active .lang-option__beta { background: rgba(255, 255, 255, 0.4); color: var(--accent-ink); border-color: rgba(122, 45, 15, 0.3); } /* ----- 7. Main & sections ----------------------------------------------- */ .main { min-height: 60vh; } .section { padding-block: var(--section-y); } .section--alt { background: var(--bg-alt); } .section--deep { background: var(--bg-deep); } .section__header { margin-bottom: var(--space-8); max-width: 60ch; } .section__header--center { margin-inline: auto; text-align: center; } .section-title { font-size: var(--fs-2xl); margin: 0 0 var(--space-3); } /* ----- 8. Buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; line-height: 1; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); text-decoration: none; min-height: 44px; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 8px 24px -12px rgba(193, 74, 28, 0.6); } .btn--accent { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn--accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--bg); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--bg-alt); border-color: var(--ink); color: var(--ink); } .btn--link { padding: 0; border: 0; min-height: 0; background: none; color: var(--accent); border-radius: 0; font-weight: 600; } .btn--link:hover { color: var(--accent-ink); transform: none; } .btn--block { width: 100%; } /* ----- 9. Cards --------------------------------------------------------- */ .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card:hover { transform: translateY(-2px); border-color: var(--accent-soft); box-shadow: var(--shadow-md); } .card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .card__title { font-size: var(--fs-lg); margin: 0 0 var(--space-2); } .card__subtitle { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); margin: 0 0 var(--space-3); } .card__meta { font-size: var(--fs-xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; } .badge { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--bg-alt); color: var(--ink-soft); border: 1px solid var(--line); } /* Text darkened to #5A2008 (4.9:1 on --accent-soft) to meet WCAG AA; --accent-ink (#7A2D0F) only reached 3.65:1 on this badge background. */ .badge--accent { background: var(--accent-soft); color: #5A2008; border-color: transparent; } .badge--ink { background: var(--ink); color: var(--bg); border-color: transparent; } /* ----- 10. Grids -------------------------------------------------------- */ .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } /* ----- 11. Hero --------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(4rem, 3rem + 5vw, 7rem); background: radial-gradient(ellipse at 100% 0%, rgba(217, 143, 101, 0.18), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(193, 74, 28, 0.10), transparent 50%), var(--bg); overflow: hidden; } .hero__inner { display: grid; gap: var(--space-7); align-items: center; } .hero__text { max-width: 60ch; } .hero__title { font-size: var(--fs-4xl); font-weight: 400; font-style: normal; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--space-4); } .hero__title em { font-style: italic; font-weight: 400; color: var(--accent); white-space: nowrap; } .hero__lead { font-size: var(--fs-md); color: var(--ink-soft); line-height: var(--lh-loose); max-width: 52ch; margin-bottom: var(--space-6); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); } .hero__media { position: relative; justify-self: center; max-width: 360px; width: 100%; } .hero__media::before { content: ''; position: absolute; inset: -12px -12px auto auto; width: 100%; height: 100%; border: 1px solid var(--accent-soft); border-radius: var(--radius-xl); z-index: 0; pointer-events: none; } .hero__media img { position: relative; z-index: 1; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; } @media (min-width: 900px) { .hero__inner { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-10); } .hero__media { max-width: none; } } /* ----- 12. Page header (non-hero pages) --------------------------------- */ .page-header { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) var(--space-7); background: var(--bg); border-bottom: 1px solid var(--line); } .page-header__inner { max-width: 60ch; } .page-header__title { font-size: var(--fs-3xl); margin: 0 0 var(--space-3); font-weight: 400; } .page-header__lead { font-size: var(--fs-md); color: var(--ink-soft); line-height: var(--lh-loose); } /* ----- 13. Timeline ----------------------------------------------------- */ .timeline { position: relative; list-style: none; padding: 0; margin: 0; } .timeline::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--line); } .timeline__item { position: relative; padding-left: var(--space-6); padding-bottom: var(--space-7); } .timeline__item:last-child { padding-bottom: 0; } .timeline__item::before { content: ''; position: absolute; left: 0; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); } .timeline__date { display: inline-block; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: var(--space-2); } .timeline__title { font-size: var(--fs-xl); margin: 0 0 var(--space-1); } .timeline__org { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); margin-bottom: var(--space-3); } .timeline__desc { margin: 0; } .timeline__desc li { color: var(--ink-soft); } /* ----- 14. Project card ------------------------------------------------- */ .project { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .project:hover { transform: translateY(-3px); border-color: var(--accent-soft); box-shadow: var(--shadow-md); } .project__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); } .project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .project:hover .project__media img { transform: scale(1.04); } .project__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .project__title { font-size: var(--fs-lg); margin: 0; } .project__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .project__tag { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg-alt); } .project__desc { margin: 0; } .project__links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line-soft); } .project__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 500; } /* ----- 15. Honors ------------------------------------------------------- */ .honor { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; gap: var(--space-4); align-items: flex-start; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .honor:hover { transform: translateY(-2px); border-color: var(--accent-soft); } .honor__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-size: 1.25rem; } .honor[data-rank="gold"] .honor__icon { background: #F5D692; color: #7B5A1B; } .honor[data-rank="special"] .honor__icon { background: #D9C5E8; color: #4B2A7A; } .honor__body { flex: 1; } .honor__rank { display: inline-block; font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: var(--space-2); } .honor__title { font-size: var(--fs-md); margin: 0 0 var(--space-2); font-family: var(--font-body); font-weight: 600; } /* ----- 16. Skills & tags ------------------------------------------------ */ .skills { display: grid; gap: var(--space-5); } .skill-group { padding: var(--space-5); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); } .skill-group h4 { font-size: var(--fs-md); margin: 0 0 var(--space-3); font-family: var(--font-body); font-weight: 600; } .skill-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); } .skill-tag { font-size: var(--fs-xs); letter-spacing: 0.06em; padding: 6px 12px; background: var(--bg-alt); color: var(--ink-soft); border-radius: var(--radius-pill); border: 1px solid var(--line); } .skill-bar { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); margin-bottom: var(--space-2); } .skill-bar__label { min-width: 100px; color: var(--ink-soft); } .skill-bar__track { flex: 1; height: 6px; background: var(--bg-deep); border-radius: var(--radius-pill); overflow: hidden; } .skill-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); border-radius: var(--radius-pill); } @media (min-width: 700px) { .skills { grid-template-columns: repeat(2, 1fr); } .skills .full-width { grid-column: 1 / -1; } } /* ----- 17. Contact form ------------------------------------------------- */ .contact-wrap { display: grid; gap: var(--space-7); align-items: start; } @media (min-width: 900px) { .contact-wrap { grid-template-columns: 0.9fr 1.1fr; } } .contact-info__item { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); } .contact-info__item:last-child { border-bottom: 0; } .contact-info__label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); } .contact-info__value { font-size: var(--fs-md); color: var(--ink); text-decoration: none; } .contact-info__value:hover { color: var(--accent); } .contact-form { display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); } .form-group { display: grid; gap: var(--space-2); } .form-group label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .form-group input, .form-group textarea { width: 100%; padding: var(--space-3) var(--space-4); font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(193, 74, 28, 0.15); } .form-group textarea { resize: vertical; min-height: 140px; } /* ----- 18. Footer ------------------------------------------------------- */ .site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: var(--space-8) var(--space-5); margin-top: var(--section-y); } .site-footer__inner { display: grid; gap: var(--space-7); align-items: start; } @media (min-width: 700px) { .site-footer__inner { grid-template-columns: 1.2fr 1fr 0.8fr; gap: var(--space-6); } } .site-footer__tagline { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 32ch; margin: var(--space-3) 0 0; } .site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); } .site-footer__nav a { font-size: var(--fs-sm); color: var(--ink-soft); } .site-footer__nav a:hover { color: var(--ink); } .site-footer__social { display: flex; gap: var(--space-3); } .site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-soft); transition: all var(--dur-fast) var(--ease); } .site-footer__social a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .site-footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); text-align: center; color: var(--ink-mute); font-size: var(--fs-xs); } /* ----- 19. Education cards ---------------------------------------------- */ .edu-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .edu-card:hover { transform: translateY(-2px); border-color: var(--accent-soft); } .edu-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .edu-card__date { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .edu-card__title { font-size: var(--fs-lg); margin: 0; } .edu-card__sub { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; } /* ----- 20. Creative section --------------------------------------------- */ .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-3); background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: var(--space-7); width: fit-content; max-width: 100%; margin-inline: auto; /* Center the entire filter block horizontally */ } .filter-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: transparent; border: 0; border-radius: var(--radius-pill); font: inherit; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: all var(--dur-fast) var(--ease); } .filter-btn:hover { color: var(--ink); } .filter-btn.is-active { background: var(--ink); color: var(--bg); } .activity { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-6); transition: border-color var(--dur) var(--ease); } .activity:hover { border-color: var(--accent-soft); } .activity__head { padding: var(--space-6); border-bottom: 1px solid var(--line-soft); } .activity__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); } .activity__title { font-size: var(--fs-xl); margin: 0 0 var(--space-3); } .activity__desc { margin: 0; max-width: 70ch; } .activity__cta { margin-top: var(--space-5); } .activity__link .fa-facebook-f { color: #1877f2; } .activity__gallery { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--bg-alt); } .material { position: relative; aspect-ratio: 1; background: var(--bg); border: 0; padding: 0; cursor: pointer; overflow: hidden; } .material img, .material video { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .material:hover img, .material:hover video { transform: scale(1.05); } .material__type { position: absolute; left: var(--space-2); top: var(--space-2); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; background: rgba(28, 27, 23, 0.8); color: var(--bg); border-radius: var(--radius-pill); } /* ----- 21. Lightbox ----------------------------------------------------- */ .lightbox { position: fixed; inset: 0; background: rgba(28, 27, 23, 0.92); display: grid; place-items: center; padding: var(--space-4); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } .lightbox.is-open { opacity: 1; pointer-events: auto; } .lightbox__content { position: relative; max-width: min(92vw, 1200px); max-height: 86vh; display: flex; align-items: center; justify-content: center; } .lightbox__content img, .lightbox__content video { max-width: 100%; max-height: 86vh; width: auto; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; background: var(--bg); color: var(--ink); border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; transition: transform var(--dur-fast) var(--ease); } .lightbox__close { top: -56px; right: 0; } .lightbox__prev { left: -56px; top: 50%; transform: translateY(-50%); } .lightbox__next { right: -56px; top: 50%; transform: translateY(-50%); } .lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: var(--accent); color: var(--bg); } .lightbox__caption { position: absolute; bottom: -44px; left: 0; right: 0; text-align: center; color: var(--bg); font-size: var(--fs-sm); } @media (max-width: 700px) { .lightbox__close { top: var(--space-3); right: var(--space-3); } .lightbox__prev { left: var(--space-3); } .lightbox__next { right: var(--space-3); } } /* ----- 22. Contact popup (used by contact-form.js) ---------------------- */ .contact-popup { position: fixed; inset: 0; background: rgba(28, 27, 23, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: var(--space-4); z-index: 1100; animation: fadeIn var(--dur) var(--ease); } .contact-popup-content { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); max-width: 92vw; width: 440px; text-align: center; box-shadow: var(--shadow-lg); animation: popIn var(--dur) var(--ease); } .contact-popup-content.error { border-color: var(--danger); } .contact-popup-content.success { border-color: var(--success); } .contact-popup-icon { font-size: 2.5rem; margin-bottom: var(--space-3); } .contact-popup-content.success .contact-popup-icon { color: var(--success); } .contact-popup-content.error .contact-popup-icon { color: var(--danger); } .contact-popup-content h3 { font-size: var(--fs-xl); margin: 0 0 var(--space-3); } .contact-popup-content p { font-size: var(--fs-base); color: var(--ink-soft); margin-bottom: var(--space-5); } .contact-popup-close { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--ink); color: var(--bg); border: 0; border-radius: var(--radius-pill); font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; transition: background var(--dur-fast) var(--ease); } .contact-popup-close:hover { background: var(--accent); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ----- 23. Prose content ------------------------------------------------ */ .prose p { color: var(--ink-soft); line-height: var(--lh-loose); max-width: 68ch; } .prose p + p { margin-top: var(--space-4); } /* ----- 24. Reveal on scroll --------------------------------------------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ----- 25. Hero featured strip ------------------------------------------ */ .feature-strip { display: grid; gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); } .feature-strip__label { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .feature-strip__items { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); } .feature-strip__item { font-family: var(--font-display); font-size: var(--fs-md); color: var(--ink); } /* ----- 26. Misc --------------------------------------------------------- */ .inline-icon { display: inline-flex; align-items: center; gap: var(--space-2); } .divider { height: 1px; background: var(--line); margin: var(--space-7) 0; border: 0; } [hidden] { display: none !important; } /* ----- 27. Page navigation (prev / next inter-page buttons) -------------- */ /* Animated prev/next page links injected by script.js into every non-home page. Two cards sit side-by-side (stacked on mobile) and react to hover with a coordinated set of motions: a magnetic lift, a sweeping highlight wash, an under-line that grows in from the inside edge, an arrow icon that pulses outward, and a subtle background fade. Reduced-motion users keep all the affordances but lose the ongoing animations. */ .page-nav { position: relative; margin-top: var(--space-9); padding: var(--space-8) 0; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, var(--bg-alt) 60%); overflow: hidden; } .page-nav__rule { position: absolute; top: -1px; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: translateX(-50%); transition: width 600ms var(--ease); } .page-nav.is-visible .page-nav__rule { width: clamp(160px, 28vw, 320px); } .page-nav__eyebrow { display: block; text-align: center; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: var(--space-5); } .page-nav__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } @media (max-width: 720px) { .page-nav__inner { grid-template-columns: 1fr; } } .page-nav__card { --pn-arrow-shift: 0px; position: relative; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 280ms var(--ease), background 360ms var(--ease); will-change: transform; } /* Sweeping highlight wash that crosses the card on hover */ .page-nav__card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(217, 143, 101, .18) 50%, transparent 70%); transform: translateX(-110%); transition: transform 900ms var(--ease); pointer-events: none; z-index: 0; } .page-nav__card:hover::before, .page-nav__card:focus-visible::before { transform: translateX(110%); } /* Under-line that grows in from the inside edge */ .page-nav__card::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent-soft), var(--accent), var(--accent-ink)); transform: scaleX(0); transform-origin: var(--pn-line-origin, left); transition: transform 540ms var(--ease); z-index: 0; } .page-nav__card:hover::after, .page-nav__card:focus-visible::after { transform: scaleX(1); } .page-nav__card:hover, .page-nav__card:focus-visible { transform: translateY(-4px); border-color: var(--accent); background: var(--bg); box-shadow: 0 22px 50px -22px rgba(193, 74, 28, 0.45), 0 4px 14px -8px rgba(28, 27, 23, 0.14); outline: none; } .page-nav__card--prev { --pn-line-origin: right; } .page-nav__card--next { --pn-line-origin: left; flex-direction: row-reverse; text-align: right; } /* When only one direction exists, centre it */ .page-nav__inner > .page-nav__card:only-child { grid-column: 1 / -1; max-width: 32rem; margin-inline: auto; width: 100%; } /* Idle "breathing" pulse to draw the eye even before hover. Only runs while the section is actually inside the viewport (.is-in-view is toggled by the IO in script.js) so we don't burn CPU/battery while the user is reading content elsewhere on the page. */ .page-nav.is-in-view .page-nav__card { animation: pageNavBreathe 4.6s ease-in-out infinite; } .page-nav.is-in-view .page-nav__card--next { animation-delay: 1.2s; } @keyframes pageNavBreathe { 0%, 100% { box-shadow: 0 1px 2px rgba(28, 27, 23, 0.04); } 50% { box-shadow: 0 14px 36px -22px rgba(193, 74, 28, 0.3); } } .page-nav__card:hover { animation: none; } .page-nav__arrow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bg-alt); color: var(--accent); flex-shrink: 0; font-size: 1.05rem; transition: transform 420ms var(--ease), background 280ms var(--ease), color 280ms var(--ease), box-shadow 360ms var(--ease); z-index: 1; } .page-nav__arrow::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent-soft); opacity: 0; transform: scale(0.7); transition: opacity 420ms var(--ease), transform 420ms var(--ease); pointer-events: none; } .page-nav__card:hover .page-nav__arrow, .page-nav__card:focus-visible .page-nav__arrow { background: var(--accent); color: var(--bg); box-shadow: 0 10px 26px -10px rgba(193, 74, 28, .55); } .page-nav__card:hover .page-nav__arrow::after { opacity: 1; transform: scale(1); animation: pageNavRipple 1.8s ease-out infinite; } .page-nav__card--prev:hover .page-nav__arrow { animation: pageNavArrowPrev 1.4s var(--ease) infinite; } .page-nav__card--next:hover .page-nav__arrow { animation: pageNavArrowNext 1.4s var(--ease) infinite; } @keyframes pageNavArrowPrev { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } } @keyframes pageNavArrowNext { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } } @keyframes pageNavRipple { 0% { opacity: .9; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.6); } } .page-nav__text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; z-index: 1; } .page-nav__label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-mute); transition: color 280ms var(--ease); } .page-nav__card:hover .page-nav__label { color: var(--accent); } .page-nav__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform 420ms var(--ease); } .page-nav__card--prev:hover .page-nav__title { transform: translateX(4px); } .page-nav__card--next:hover .page-nav__title { transform: translateX(-4px); } /* Initial reveal animation when the section enters the viewport */ .page-nav .page-nav__card { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .page-nav.is-visible .page-nav__card { opacity: 1; transform: translateY(0); } .page-nav.is-visible .page-nav__card--prev { transition-delay: 80ms; } .page-nav.is-visible .page-nav__card--next { transition-delay: 200ms; } @media (prefers-reduced-motion: reduce) { .page-nav__card, .page-nav__card::before, .page-nav__card::after, .page-nav__arrow, .page-nav__arrow::after, .page-nav__title, .page-nav__rule { animation: none !important; transition: none !important; } .page-nav .page-nav__card { opacity: 1; transform: none; } } /* ----- 28. Pagination --------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); } .pagination__pages { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--space-2); align-items: center; } .pagination__page, .pagination__arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius-pill); cursor: pointer; transition: transform 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease); } .pagination__page:hover:not(.is-active), .pagination__arrow:hover:not([disabled]) { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); box-shadow: 0 6px 16px -10px rgba(193, 74, 28, 0.5); } .pagination__page:active, .pagination__arrow:active { transform: translateY(0); } .pagination__page.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); cursor: default; } /* Pulse only runs while the pagination strip is actually in viewport; `.is-in-view` is toggled by an IntersectionObserver so the animation doesn't burn CPU/battery while the user is scrolled past the list. */ .pagination.is-in-view .pagination__page.is-active { animation: paginationPulse 2.4s ease-in-out infinite; } @keyframes paginationPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(193, 74, 28, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(193, 74, 28, 0); } } .pagination__arrow { width: 44px; padding: 0; } .pagination__arrow[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .pagination__ellipsis { color: var(--ink-mute); padding: 0 var(--space-1); align-self: center; user-select: none; } .pagination__status { width: 100%; text-align: center; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--ink-mute); letter-spacing: .12em; text-transform: uppercase; } /* Smooth fade when the visible page items swap */ .is-paginated.is-changing > * { animation: pageContentFade 380ms var(--ease); } @keyframes pageContentFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .pagination__page.is-active { animation: none; } .is-paginated.is-changing > * { animation: none; } }