/* ───────────────────────────────────────────────────────────────── Ideal Life Advisers — Shared Stylesheet Typography: Lora (display/headings) + Poppins (UI/body) Load both in each page's via Google Fonts. ───────────────────────────────────────────────────────────────── */ /* ─── Tokens ──────────────────────────────────────────────────── */ :root { --accent: oklch(0.58 0.148 244); --accent-ink: oklch(0.43 0.148 244); --accent-hover: oklch(0.37 0.148 244); --accent-on-dark: oklch(0.74 0.110 244); --accent-ring: oklch(0.987 0.005 244); --paper: oklch(0.988 0.004 244); --paper-2: oklch(0.966 0.008 244); --paper-3: oklch(0.942 0.013 244); --dark: oklch(0.132 0.022 244); --dark-2: oklch(0.172 0.020 244); --dark-3: oklch(0.215 0.018 244); --ink: oklch(0.150 0.018 244); --ink-2: oklch(0.425 0.012 244); --ink-3: oklch(0.625 0.008 244); --hair: oklch(0.58 0.148 244 / 0.10); --hair-dark: oklch(0.988 0.004 244 / 0.09); --serif: 'Lora', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', system-ui, -apple-system, sans-serif; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); } /* ─── Reset ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.68; font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; margin: 0; } img { display: block; max-width: 100%; height: auto; } p { margin: 0; text-wrap: pretty; } a { color: inherit; } strong { font-weight: 600; } /* ─── Typography — flowing serif headings ─────────────────────── */ h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; margin: 0; } h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; margin: 0; } h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; line-height: 1.4; margin: 0; } /* ─── Skip link ───────────────────────────────────────────────── */ .skip { position: fixed; top: -100%; left: 16px; z-index: 9999; padding: 12px 20px; background: var(--accent-ink); color: #fff; font-weight: 600; font-size: 14px; border-radius: 0 0 6px 6px; text-decoration: none; } .skip:focus { top: 0; outline: 3px solid var(--accent-ring); } /* ─── Navigation ──────────────────────────────────────────────── */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: 300; padding-block: 16px; background: oklch(0.132 0.022 244 / 0.96); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid oklch(0.988 0.004 244 / 0.08); transition: padding 300ms var(--ease-standard); } .nav.scrolled { padding-block: 10px; } .nav-inner { max-width: 1300px; margin-inline: auto; padding-inline: 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .nav-logo { flex-shrink: 0; text-decoration: none; display: flex; align-items: center; background: #fff; border-radius: 8px; padding: 6px 14px; } .nav-logo img { height: 36px; width: auto; } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 14px; font-weight: 500; color: oklch(0.72 0.06 244); text-decoration: none; letter-spacing: 0.02em; transition: color 150ms var(--ease-standard); position: relative; padding-bottom: 2px; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 100%; height: 1px; background: currentColor; transition: right 200ms var(--ease-standard); } .nav-links a:hover { color: #fff; } .nav-links a:hover::after { right: 0; } .nav-links a.nav-active, .nav-links a[aria-current="page"] { color: var(--accent-on-dark); } .nav-links a.nav-active::after { right: 0; } .nav-btn { flex-shrink: 0; display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; background: var(--accent-on-dark); color: var(--dark); text-decoration: none; transition: background 150ms var(--ease-standard), transform 150ms var(--ease-standard); } .nav-btn:hover { background: #fff; color: var(--dark); transform: translateY(-1px); } .nav-btn:focus-visible { outline: 3px solid var(--accent-on-dark); outline-offset: 2px; } /* Hamburger */ .nav-burger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .nav-burger span { display: block; width: 22px; height: 1.5px; background: oklch(0.72 0.06 244); border-radius: 2px; transition: transform 280ms var(--ease-standard), opacity 280ms var(--ease-standard); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Drawer */ .drawer { position: fixed; inset: 0; z-index: 290; background: var(--paper); transform: translateX(100%); transition: transform 320ms var(--ease-out-expo); display: flex; flex-direction: column; padding: 104px 40px 48px; } .drawer.open { transform: translateX(0); } .drawer-links { list-style: none; margin: 0 0 36px; padding: 0; } .drawer-links li { border-bottom: 1px solid var(--hair); } .drawer-links a { display: block; padding: 18px 0; font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; transition: color 150ms var(--ease-standard); } .drawer-links a:hover, .drawer-links a[aria-current="page"] { color: var(--accent-ink); } /* ─── Section helpers ─────────────────────────────────────────── */ .s { padding-block: 112px; } .s-sm { padding-block: 80px; } .s-xs { padding-block: 56px; } .ctr { max-width: 1300px; margin-inline: auto; padding-inline: 48px; } .ctr-md { max-width: 960px; margin-inline: auto; padding-inline: 48px; } .ctr-sm { max-width: 760px; margin-inline: auto; padding-inline: 48px; } .section-label { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--accent); flex-shrink: 0; } .section-label-dark { color: var(--accent-on-dark); } .section-label-dark::before { background: var(--accent-on-dark); } /* ─── Page hero (inner pages) ─────────────────────────────────── */ .page-hero { position: relative; height: 56vh; min-height: 420px; overflow: hidden; display: flex; align-items: flex-end; } .page-hero-photo { position: absolute; inset: 0; overflow: hidden; } .page-hero-photo img { width: 100%; height: 115%; object-fit: cover; object-position: center 35%; will-change: transform; } .page-hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, oklch(0.132 0.022 244 / .40) 0%, oklch(0.132 0.022 244 / .68) 50%, oklch(0.132 0.022 244 / .88) 100%); } .page-hero-content { position: relative; z-index: 2; width: 100%; padding: 0 48px 72px; max-width: 1300px; margin-inline: auto; } .page-hero-content h1 { font-family: var(--serif); font-size: clamp(36px, 5vw, 64px); font-weight: 500; color: #fff; max-width: 740px; line-height: 1.2; margin-top: 18px; } .page-hero-content p { font-size: 17px; font-weight: 300; line-height: 1.68; color: rgba(255,255,255,.65); max-width: 500px; margin-top: 20px; } /* Content card slides over hero */ .content-wrap { position: relative; z-index: 10; background: var(--paper); border-radius: 32px 32px 0 0; margin-top: -56px; overflow: hidden; } /* ─── Standout text ───────────────────────────────────────────── */ .standout { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); } .italic-lead { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 2vw, 24px); line-height: 1.55; color: var(--ink-2); } /* ─── Split layout (2 columns) ────────────────────────────────── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: center; } .split-wide { gap: 120px; } /* ─── Photo interlude ─────────────────────────────────────────── */ .photo-break { position: relative; height: 70vh; min-height: 480px; overflow: hidden; } .photo-break-img { width: 100%; height: 115%; object-fit: cover; object-position: center 30%; transform: translateY(0); will-change: transform; } .photo-break::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, oklch(0.132 0.022 244 / .84) 0%, oklch(0.132 0.022 244 / .20) 55%, transparent 100% ); } .photo-break-text { position: absolute; bottom: 52px; left: 0; right: 0; z-index: 2; max-width: 1300px; margin-inline: auto; padding-inline: 48px; } .photo-break-text p { font-family: var(--serif); font-size: clamp(22px, 3vw, 38px); font-style: italic; font-weight: 400; line-height: 1.4; color: #fff; max-width: 640px; } /* ─── Dark section ────────────────────────────────────────────── */ .section-dark { background: var(--dark); } /* ─── Divider ─────────────────────────────────────────────────── */ .divider { border: none; border-top: 1px solid var(--hair); } .divider-dark { border-color: var(--hair-dark); } /* ─── Credential / stat row ───────────────────────────────────── */ .cred-row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--hair); } .cred-name { font-size: 15px; font-weight: 500; color: var(--ink); } .cred-val { font-size: 14px; font-weight: 500; color: var(--accent-ink); } /* ─── Benefit/outcome cards ───────────────────────────────────── */ .outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--paper-3); border: 1px solid var(--paper-3); border-radius: 16px; overflow: hidden; } .outcome-item { background: var(--paper); padding: 32px 28px; transition: background 200ms var(--ease-standard); } .outcome-item:hover { background: var(--paper-2); } .outcome-num { font-size: 11px; font-weight: 600; letter-spacing: .10em; color: var(--accent); margin-bottom: 10px; font-variant-numeric: tabular-nums; } .outcome-word { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; } /* ─── Question/answer accordion ──────────────────────────────── */ .questions-list { display: flex; flex-direction: column; } .question-item { border-bottom: 1px solid var(--hair); } .question-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--serif); font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; transition: color 150ms var(--ease-standard); } .question-btn:hover { color: var(--accent-ink); } .question-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 16px; transition: transform 280ms var(--ease-out-expo), background 200ms var(--ease-standard); } .question-item.open .question-icon { transform: rotate(45deg); background: var(--accent-ink); color: #fff; border-color: transparent; } .question-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out-expo); } .question-item.open .question-answer { grid-template-rows: 1fr; } .question-answer-inner { overflow: hidden; padding-bottom: 0; transition: padding-bottom 320ms var(--ease-out-expo); } .question-item.open .question-answer-inner { padding-bottom: 28px; } .question-answer-inner p { font-size: 16px; color: var(--ink-2); line-height: 1.72; font-weight: 300; } /* ─── Numbered process steps ──────────────────────────────────── */ .proc-steps { display: flex; flex-direction: column; } .proc-step { display: grid; grid-template-columns: 100px 1fr; gap: 48px; padding-block: 48px; border-top: 1px solid var(--hair-dark); align-items: start; } .proc-step:last-child { border-bottom: 1px solid var(--hair-dark); } .proc-num { font-family: var(--serif); font-size: 56px; font-weight: 400; font-style: italic; letter-spacing: -.02em; line-height: .9; color: var(--dark-3); transition: color 300ms var(--ease-standard); } .proc-step:hover .proc-num { color: var(--accent-on-dark); } .proc-body h3 { color: #fff; margin-bottom: 12px; } .proc-body p { font-size: 16px; color: oklch(0.56 0.07 244); line-height: 1.72; max-width: 540px; font-weight: 300; } /* ─── Cinematic photo + text split (about/team) ───────────────── */ .about-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; } .about-photo, .team-photo { position: relative; overflow: hidden; } .about-photo img, .team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .about-body, .team-body { background: var(--paper-2); padding: 96px 80px 96px 72px; display: flex; flex-direction: column; justify-content: center; } .about-body h2, .team-body h2 { font-size: clamp(26px, 2.8vw, 40px); margin-bottom: 24px; } .about-body p, .team-body p { font-size: 16px; color: var(--ink-2); line-height: 1.74; font-weight: 300; } .about-body p + p, .team-body p + p { margin-top: 18px; } /* ─── Highlight box ───────────────────────────────────────────── */ .highlight-box { margin-top: 40px; border-left: 2px solid var(--accent); padding: 20px 24px; background: var(--paper); font-size: 14px; color: var(--ink-2); line-height: 1.68; } .highlight-box strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 6px; } /* ─── Testimonial ─────────────────────────────────────────────── */ .testimonial-mark { font-family: var(--serif); font-size: 72px; font-weight: 400; line-height: .8; color: var(--accent); display: block; margin-bottom: 20px; user-select: none; } .testimonial-quote { font-family: var(--serif); font-size: clamp(18px, 2.4vw, 28px); font-weight: 400; font-style: italic; letter-spacing: -0.01em; line-height: 1.5; color: var(--ink); margin-bottom: 40px; } .testimonial-byline { display: flex; align-items: center; gap: 16px; } .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-ink); color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .testimonial-name { font-size: 15px; font-weight: 600; color: var(--ink); } .testimonial-role { font-size: 13px; color: var(--ink-3); margin-top: 2px; } /* ─── Service row list ────────────────────────────────────────── */ .svc-list { display: flex; flex-direction: column; } .svc-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 40px; align-items: center; padding-block: 32px; border-bottom: 1px solid var(--hair); cursor: default; transition: background 200ms var(--ease-standard); } .svc-row:hover { background: var(--paper-2); margin-inline: -48px; padding-inline: 48px; } .svc-n { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent); font-variant-numeric: tabular-nums; align-self: start; padding-top: 4px; } .svc-body { display: flex; flex-direction: column; gap: 6px; } .svc-name { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .svc-desc { font-size: 15px; color: var(--ink-2); line-height: 1.62; max-width: 520px; font-weight: 300; } .svc-arrow { font-size: 18px; color: var(--accent); opacity: 0; transform: translateX(-10px); transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard); } .svc-row:hover .svc-arrow { opacity: 1; transform: none; } /* ─── CTA section ─────────────────────────────────────────────── */ .cta-section { background: var(--accent-ink); padding-block: 140px; text-align: center; } .cta-section h2 { font-size: clamp(30px, 4vw, 56px); color: #fff; margin-bottom: 20px; } .cta-section p { font-size: 17px; font-weight: 300; color: rgba(255,255,255,.68); max-width: 440px; margin-inline: auto; margin-bottom: 48px; line-height: 1.68; } /* ─── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; border-radius: 6px; padding: 13px 26px; border: none; cursor: pointer; white-space: nowrap; transition: background 180ms var(--ease-standard), transform 150ms var(--ease-standard), border-color 150ms var(--ease-standard), color 150ms var(--ease-standard); } .btn:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 3px; } .btn-solid { background: var(--accent-ink); color: #fff; } .btn-solid:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn-ghost { background: transparent; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.28); } .btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.50); } .btn-light { background: #fff; color: var(--accent-ink); } .btn-light:hover { transform: translateY(-1px); opacity: .94; } .btn-outline { background: transparent; color: var(--accent-ink); border: 1.5px solid var(--accent); } .btn-outline:hover { background: var(--accent-ink); color: #fff; transform: translateY(-1px); } /* ─── Footer ──────────────────────────────────────────────────── */ footer { background: var(--dark); padding-block: 72px 40px; } .ft-inner { max-width: 1300px; margin-inline: auto; padding-inline: 48px; } .ft-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 72px; padding-bottom: 56px; border-bottom: 1px solid var(--hair-dark); margin-bottom: 36px; } .ft-logo-wrap { display: inline-block; background: #fff; border-radius: 12px; padding: 18px 28px; margin-bottom: 0; } .ft-brand img { display: block; height: 80px; width: auto; } .ft-brand p { font-size: 14px; font-weight: 300; color: oklch(0.46 0.06 244); line-height: 1.65; max-width: 260px; } .ft-col h4 { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: oklch(0.40 0.06 244); margin-bottom: 20px; } .ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ft-col a { font-size: 14px; font-weight: 300; color: oklch(0.50 0.06 244); text-decoration: none; transition: color 150ms var(--ease-standard); } .ft-col a:hover { color: var(--accent-on-dark); } .ft-col a:focus-visible { outline: 2px solid var(--accent-on-dark); border-radius: 2px; } .ft-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 300; color: oklch(0.38 0.05 244); } /* ─── Compliance bar ──────────────────────────────────────────── */ .ft-compliance { background: var(--dark-2); border-top: 1px solid var(--hair-dark); padding-block: 36px; } .ft-compliance-inner { max-width: 1300px; margin-inline: auto; padding-inline: 48px; } .ft-compliance-rep { font-size: 11px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: oklch(0.52 0.06 244); margin-bottom: 20px; line-height: 1.7; } .ft-compliance-links { display: flex; gap: 36px; flex-wrap: wrap; } .ft-compliance-links a { font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-on-dark); text-decoration: none; border-bottom: 1px solid oklch(0.74 0.110 244 / 0.40); padding-bottom: 2px; transition: color 150ms var(--ease-standard), border-color 150ms var(--ease-standard); } .ft-compliance-links a:hover { color: #fff; border-color: rgba(255,255,255,0.5); } /* ─── Legal disclaimer bar ────────────────────────────────────── */ .ft-disclaimer { background: oklch(0.09 0.015 244); padding-block: 28px; } .ft-disclaimer p { max-width: 1300px; margin-inline: auto; padding-inline: 48px; font-size: 10px; font-weight: 400; letter-spacing: 0.07em; text-transform: uppercase; color: oklch(0.36 0.04 244); text-align: center; line-height: 1.9; } @media (max-width: 768px) { .ft-compliance-inner { padding-inline: 24px; } .ft-compliance-links { gap: 20px; } .ft-disclaimer p { padding-inline: 24px; } } /* ─── Reveal animation system ─────────────────────────────────── */ .js .r { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo); } .js .r.in { opacity: 1; transform: none; } .js .r-clip { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-out-expo); } .js .r-clip.in { clip-path: inset(0 0 0% 0); } .js .about-photo img, .js .team-photo img { transform: scale(1.06); transition: transform 1500ms var(--ease-out-expo); } .js .about-photo.in img, .js .team-photo.in img { transform: scale(1); } .js .photo-break-img { transition: transform 1000ms var(--ease-out-expo); } .r.d1 { transition-delay: 80ms; } .r.d2 { transition-delay: 160ms; } .r.d3 { transition-delay: 240ms; } .r.d4 { transition-delay: 320ms; } .r.d5 { transition-delay: 400ms; } .r-clip.d1 { transition-delay: 80ms; } .r-clip.d2 { transition-delay: 180ms; } .r-clip.d3 { transition-delay: 280ms; } /* ─── Responsive ──────────────────────────────────────────────── */ @media (max-width: 1100px) { .split, .split-wide { gap: 56px; } } @media (max-width: 1024px) { .split { grid-template-columns: 1fr; } .about-split { grid-template-columns: 1fr; } .about-photo, .team-photo { min-height: 400px; } .about-body, .team-body { padding: 64px 48px; } .ft-grid { grid-template-columns: 1fr 1fr; gap: 48px; } } @media (max-width: 768px) { html { font-size: 16px; } .s { padding-block: 72px; } .s-sm { padding-block: 56px; } .ctr, .ctr-md, .ctr-sm { padding-inline: 24px; } .nav-links, .nav-btn { display: none; } .nav-burger { display: flex; } .nav-inner { padding-inline: 24px; } .page-hero-content { padding: 0 24px 56px; } .content-wrap { border-radius: 20px 20px 0 0; margin-top: -40px; } .photo-break-text { padding-inline: 24px; } .svc-row { grid-template-columns: 52px 1fr; gap: 20px; } .svc-arrow { display: none; } .svc-row:hover { margin-inline: -24px; padding-inline: 24px; } .proc-step { grid-template-columns: 72px 1fr; gap: 28px; } .proc-num { font-size: 44px; } .about-body, .team-body { padding: 48px 24px; } .outcomes-grid { grid-template-columns: 1fr 1fr; } .ft-grid { grid-template-columns: 1fr; gap: 36px; } .ft-inner { padding-inline: 24px; } .ft-bottom { flex-direction: column; gap: 8px; text-align: center; } } @media (max-width: 640px) { .btn { width: 100%; justify-content: center; } .hero-actions { flex-direction: column; } .outcomes-grid { grid-template-columns: 1fr; } } @media (max-width: 320px) { html { font-size: 15px; } } /* ─── Image placeholder ───────────────────────────────────────── */ .img-placeholder { background: var(--paper-2); border: 2px dashed oklch(0.58 0.148 244 / 0.22); border-radius: 16px; min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 48px 32px; text-align: center; } .img-placeholder.tall { min-height: 480px; } .img-placeholder.portrait { min-height: 440px; max-width: 400px; } .img-ph-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; } .img-ph-icon { color: var(--ink-3); opacity: .45; } .img-ph-name { font-family: monospace; font-size: 13px; color: var(--ink-3); } .img-ph-hint { font-size: 12px; color: var(--ink-3); font-weight: 300; opacity: .7; } /* ─── Simple question list ────────────────────────────────────── */ .questions-simple { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .questions-simple li { display: flex; gap: 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hair); font-family: var(--serif); font-size: clamp(15px, 1.5vw, 18px); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.4; } .questions-simple li:first-child { border-top: 1px solid var(--hair); } .questions-simple li::before { content: '→'; color: var(--accent); font-family: var(--sans); font-size: 13px; flex-shrink: 0; padding-top: 2px; } .questions-more { font-size: 15px; font-style: italic; color: var(--ink-3); font-weight: 300; margin-top: 20px; font-family: var(--serif); } /* ─── Contact strip ───────────────────────────────────────────── */ .contact-strip { background: var(--paper-2); padding: 36px 48px; text-align: center; border-top: 1px solid var(--hair); } .contact-strip p { font-size: 16px; color: var(--ink-2); font-weight: 300; } .contact-strip a { color: var(--accent-ink); text-decoration: none; font-weight: 500; } .contact-strip a:hover { color: var(--accent-hover); } /* ─── Quote grid (client testimonials) ───────────────────────── */ .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--paper-3); border-radius: 16px; overflow: hidden; margin-top: 40px; } .quote-card { background: var(--paper); padding: 32px 28px; } .quote-text { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-2); line-height: 1.72; font-weight: 400; margin-bottom: 0; } /* ─── Person bio layout ───────────────────────────────────────── */ .bio-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .bio-section.reverse { direction: rtl; } .bio-section.reverse > * { direction: ltr; } .bio-name { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 36px); font-weight: 500; color: var(--ink); margin-bottom: 24px; letter-spacing: -0.01em; } .bio-text p { font-size: 16px; color: var(--ink-2); line-height: 1.74; font-weight: 300; } .bio-text p + p { margin-top: 18px; } /* ─── Values list ─────────────────────────────────────────────── */ .values-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .values-list li { display: grid; grid-template-columns: 36px 1fr; gap: 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--hair); font-size: 16px; color: var(--ink-2); line-height: 1.68; font-weight: 300; } .values-list li:first-child { border-top: 1px solid var(--hair); } .value-n { font-family: var(--serif); font-size: 22px; font-weight: 400; font-style: italic; color: var(--accent); line-height: 1; padding-top: 3px; } /* ─── Survey context note ─────────────────────────────────────── */ .survey-note { font-size: 15px; color: var(--ink-3); line-height: 1.7; font-weight: 300; font-style: italic; border-left: 2px solid var(--hair); padding-left: 20px; margin-bottom: 8px; } /* ─── Responsive additions ────────────────────────────────────── */ @media (max-width: 1024px) { .bio-section { grid-template-columns: 1fr; gap: 40px; } .quote-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .contact-strip { padding: 28px 24px; } } /* ─── Reduced motion ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-word, .hero-p, .hero-actions, .js .r, .js .r-clip, .js .about-photo img, .js .team-photo img, .js .photo-break-img, .nav, .btn, .hero-scroll::after, .nav-links a::after { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } }