/* ============================================================ NYAMO — Calm premium architectural design system Tokens + components. Mobile-first. ============================================================ */ /* Fonts are loaded via a in each page (parallel, non-chained) instead of an @import here to avoid render-blocking request chaining. */ /* ---------- Design tokens ---------- */ :root { /* Color — sand */ --paper: #FBF8F1; --sand-100: #F5EFE2; --sand-200: #ECE3D2; --sand-300: #DED2BB; --line: #D8CCB6; --line-soft:#E6DDCC; /* Color — midnight blue */ --blue-900: #0E1A2B; --blue-800: #15243B; /* primary */ --blue-700: #1E3147; --blue-600: #2C4258; --blue-200: #B7C2CF; /* Color — ink / neutral text */ --ink: #20201C; --ink-soft: #45433C; --muted: #78725F; /* Accent — restrained warm bronze */ --bronze: #A07242; --bronze-d: #835B33; --bronze-l: #C9A983; /* Semantic */ --bg: var(--sand-100); --surface: var(--paper); --text: var(--ink); --heading: var(--blue-800); /* Type */ --serif: 'Spectral', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Type scale (fluid) */ --fs-eyebrow: 0.78rem; --fs-small: 0.875rem; --fs-body: 1.0625rem; --fs-lead: clamp(1.18rem, 1.05rem + 0.6vw, 1.45rem); --fs-h6: 0.82rem; --fs-h5: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); --fs-h4: clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem); --fs-h3: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); --fs-h2: clamp(2.1rem, 1.6rem + 2.2vw, 3.3rem); --fs-h1: clamp(2.6rem, 1.9rem + 3.6vw, 4.6rem); /* Spacing scale (8pt-ish) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; /* Radius */ --r-xs: 2px; --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-pill: 999px; /* Shadows — whisper soft */ --sh-1: 0 1px 2px rgba(21,36,59,0.05); --sh-2: 0 8px 24px -12px rgba(21,36,59,0.18); --sh-3: 0 24px 60px -28px rgba(21,36,59,0.30); /* Layout */ --maxw: 1240px; --gutter: clamp(1.25rem, 4vw, 4rem); --header-h: 76px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } ::selection { background: var(--blue-800); color: var(--paper); } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--serif); color: var(--heading); font-weight: 400; line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); line-height: 1.18; } p { text-wrap: pretty; text-align: justify; hyphens: auto; } .serif { font-family: var(--serif); } em, .italic { font-style: italic; } .eyebrow { font-family: var(--sans); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze-d); display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--bronze); display: inline-block; } .eyebrow.no-rule::before { display: none; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); } .muted { color: var(--muted); } .small { font-size: var(--fs-small); } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container-wide { max-width: 1400px; } .section { padding-block: clamp(3.5rem, 7vw, 7rem); } .section-sm { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .divider { height: 1px; background: var(--line); border: 0; } .stack > * + * { margin-top: var(--s-4); } .center { text-align: center; } .eyebrow + h2, .eyebrow + h1, .eyebrow + h3 { margin-top: var(--s-4); } /* surfaces */ .on-blue { background: var(--blue-800); color: var(--sand-200); } .on-blue h1, .on-blue h2, .on-blue h3, .on-blue h4 { color: var(--paper); } .on-blue .eyebrow { color: var(--bronze-l); } .on-blue .eyebrow::before { background: var(--bronze-l); } .on-blue .lead { color: var(--blue-200); } .on-sand { background: var(--sand-200); } .on-paper { background: var(--paper); } /* ---------- Buttons ---------- */ .btn { --bg: var(--blue-800); --fg: var(--paper); display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.005em; padding: 0.95em 1.6em; background: var(--bg); color: var(--fg); border: 1px solid var(--bg); border-radius: var(--r-sm); transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, box-shadow .25s; will-change: transform; } .btn .arrow { transition: transform .3s cubic-bezier(.2,.7,.2,1); } .btn:hover { background: var(--blue-700); box-shadow: var(--sh-2); transform: translateY(-2px); } .btn:hover .arrow { transform: translateX(4px); } .btn:active { transform: translateY(1px); } .btn-ghost { --bg: transparent; --fg: var(--blue-800); border-color: var(--blue-800); } .btn-ghost:hover { background: var(--blue-800); color: var(--paper); } .btn-bronze { --bg: var(--bronze); border-color: var(--bronze); } .btn-bronze:hover { background: var(--bronze-d); border-color: var(--bronze-d); } .btn-light { --bg: var(--paper); --fg: var(--blue-800); border-color: var(--paper); } .btn-light:hover { background: var(--sand-200); border-color: var(--sand-200); color: var(--blue-800); } .btn-outline-light { --bg: transparent; --fg: var(--paper); border-color: rgba(251,248,241,0.4); } .btn-outline-light:hover { background: rgba(251,248,241,0.08); border-color: var(--paper); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.95rem; color: var(--blue-800); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: gap .25s, border-color .25s; } .link-arrow .arrow { transition: transform .3s; } .link-arrow:hover { border-color: var(--bronze); } .link-arrow:hover .arrow { transform: translateX(4px); } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 80; background: color-mix(in srgb, var(--sand-100) 86%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s, box-shadow .3s; } .site-header.scrolled { border-bottom-color: var(--line); box-shadow: var(--sh-1); } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: var(--header-h); } .brand { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; } .brand img { height: 52px; width: auto; display: block; } .brand-lockup { display: flex; flex-direction: column; line-height: 1; gap: 3px; } .brand-mark { font-family: var(--serif); font-size: 1.4rem; letter-spacing: 0.16em; color: var(--blue-800); font-weight: 500; } .brand-sub { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .nav-links { display: none; align-items: center; gap: clamp(1rem, 2vw, 2rem); } .nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); position: relative; padding-block: 0.4rem; transition: color .2s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--bronze); transition: width .28s cubic-bezier(.2,.7,.2,1); } .nav-links a:hover, .nav-links a.active { color: var(--blue-800); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-actions { display: none; align-items: center; gap: var(--s-4); } .nav-actions .btn { white-space: nowrap; } .nav-phone { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; } .nav-phone:hover { color: var(--blue-800); } .nav-phone svg { color: var(--bronze); } .burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 8px; background: transparent; border: 0; margin-right: -8px; } .burger span { width: 24px; height: 1.6px; background: var(--blue-800); transition: transform .3s, opacity .3s; } .burger.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); } /* mobile drawer */ .mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 70; background: var(--sand-100); padding: var(--s-6) var(--gutter) var(--s-8); display: flex; flex-direction: column; gap: var(--s-2); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; overflow-y: auto; } .mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; } .mobile-menu a.m-link { font-family: var(--serif); font-size: 1.5rem; color: var(--blue-800); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; } .mobile-menu a.m-link .arrow { color: var(--bronze); } .mobile-cta { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); } .mobile-contact { margin-top: var(--s-5); color: var(--muted); font-size: 0.9rem; } .mobile-contact a { color: var(--blue-800); font-weight: 600; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); padding-block: clamp(2.5rem, 6vw, 5.5rem); align-items: center; } .hero-copy { max-width: 640px; } .hero h1 { margin-top: var(--s-4); } .hero h1 em { color: var(--bronze-d); } .hero .lead { margin-top: var(--s-5); max-width: 52ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); align-items: center; } .hero-phone { font-size: 0.9rem; color: #726C59; display: inline-flex; gap: .4em; align-items: center; } .hero-phone a { color: var(--blue-800); font-weight: 600; } .hero-media { position: relative; } /* ---------- Placeholder (architectural) ---------- */ .ph { position: relative; overflow: hidden; background-color: var(--sand-200); background-image: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--bronze) 9%, transparent) 11px 12px); border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; align-items: flex-end; justify-content: flex-start; min-height: 240px; } .ph.has-image { background-image: none; } .ph.blueprint.has-image { background-image: none; } .ph.has-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ph.has-image img.fit-contain { object-fit: contain; padding: var(--s-4); background: var(--paper); } .ph.has-image .ph-tag { position: relative; z-index: 1; } .ph.blueprint { background-color: var(--blue-800); background-image: linear-gradient(color-mix(in srgb, var(--blue-200) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--blue-200) 12%, transparent) 1px, transparent 1px); background-size: 28px 28px; border-color: var(--blue-700); } .ph .ph-tag { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze-d); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 0.4em 0.7em; margin: var(--s-4); } .ph.blueprint .ph-tag { color: var(--blue-200); background: rgba(14,26,43,0.7); border-color: var(--blue-600); } .ph.tall { min-height: 460px; } .ph.cover { position: absolute; inset: 0; border-radius: 0; min-height: 0; } /* portrait frame with real headshot */ .portrait { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--sand-200); border: 1px solid var(--line); aspect-ratio: 4 / 5; } .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .portrait .ph-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: .6rem; padding: 2rem; color: var(--muted); font-size: 0.85rem; } .portrait.is-missing img { display: none; } .portrait.is-missing .ph-fallback { display: flex; } /* ---------- Pathway cards ---------- */ .pathways { display: grid; grid-template-columns: 1fr; gap: var(--s-4); } .pathway { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; } .pathway::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bronze); transform: scaleY(0); transform-origin: top; transition: transform .45s cubic-bezier(.2,.7,.2,1); } .pathway:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line); } .pathway:hover::after { transform: scaleY(1); } .pathway .p-num { font-family: var(--serif); font-size: 0.9rem; color: var(--bronze-d); letter-spacing: 0.1em; } .pathway h3 { font-size: var(--fs-h4); margin-top: var(--s-3); } .pathway p { margin-top: var(--s-3); color: var(--ink-soft); font-size: 1rem; } .pathway .p-list { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 0.4rem; } .pathway .p-list span { font-size: 0.78rem; color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.3em 0.8em; background: var(--sand-100); } .pathway .link-arrow { margin-top: var(--s-5); } .pathway.is-pro { background: var(--blue-800); border-color: var(--blue-700); } .pathway.is-pro h3 { color: var(--paper); } .pathway.is-pro p { color: var(--blue-200); } .pathway.is-pro .p-num { color: var(--bronze-l); } .pathway.is-pro .p-list span { color: var(--blue-200); border-color: var(--blue-600); background: rgba(255,255,255,0.04); } .pathway.is-pro .link-arrow { color: var(--paper); } .pathway.is-pro .link-arrow:hover { border-color: var(--bronze-l); } /* ---------- Pillars ---------- */ .pillars { display: grid; grid-template-columns: 1fr; gap: 0; } .pillar { padding: var(--s-6) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-3); } .pillar:last-child { border-bottom: 1px solid var(--line); } .pillar .p-idx { font-family: var(--serif); font-size: 1rem; color: var(--bronze-d); } .pillar h3 { color: var(--heading); font-size: var(--fs-h4); line-height: 1.18; } .pillar p { color: var(--ink-soft); } /* ---------- Method timeline ---------- */ .method { display: grid; grid-template-columns: 1fr; gap: 0; counter-reset: step; } .step { position: relative; padding: var(--s-5) 0 var(--s-5) var(--s-7); border-top: 1px solid var(--line); } .step:last-child { border-bottom: 1px solid var(--line); } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: var(--s-5); font-family: var(--serif); font-size: 0.95rem; color: var(--bronze-d); letter-spacing: 0.05em; } .step h3 { font-size: var(--fs-h5); font-family: var(--serif); line-height: 1.18; } .step p { color: var(--ink-soft); margin-top: var(--s-2); font-size: 1rem; } .on-blue .step { border-color: var(--blue-700); } .on-blue .step::before { color: var(--bronze-l); } .on-blue .step p { color: var(--blue-200); } /* ---------- Expertise cards ---------- */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); } .feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); } .feature .f-icon { width: 44px; height: 44px; border: 1px solid var(--bronze); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--bronze-d); } .feature h3 { font-size: var(--fs-h5); line-height: 1.18; } .feature p { color: var(--ink-soft); font-size: 1rem; } .on-blue .feature { background: var(--blue-700); border-color: var(--blue-600); } .on-blue .feature p { color: var(--blue-200); } /* ---------- Stat / proof strip ---------- */ .factstrip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } .fact .f-num { font-family: var(--serif); font-size: clamp(2rem,1.4rem+2vw,3rem); color: var(--blue-800); line-height: 1; } .on-blue .fact .f-num { color: var(--paper); } .fact .f-label { font-size: 0.9rem; color: var(--muted); margin-top: var(--s-2); } .on-blue .fact .f-label { color: var(--blue-200); } /* ---------- Quote / positioning ---------- */ .statement { max-width: 22ch; } blockquote.pull { font-family: var(--serif); font-size: clamp(1.5rem,1.1rem+1.8vw,2.4rem); line-height: 1.25; color: var(--heading); font-weight: 300; } blockquote.pull .hl { color: var(--bronze-d); font-style: italic; } /* ---------- Form ---------- */ .form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.75rem); box-shadow: var(--sh-2); } .form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); } .field { display: flex; flex-direction: column; gap: 0.45rem; } .field.col-2 { grid-column: span 1; } .field label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); display: flex; gap: .35em; align-items: baseline; } .field label .opt { font-weight: 400; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.02em; } .field input, .field select, .field textarea { font: inherit; font-size: 0.98rem; color: var(--ink); background: var(--sand-100); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.8em 0.9em; width: 100%; transition: border-color .2s, box-shadow .2s, background .2s; } .field input::placeholder, .field textarea::placeholder { color: #A39B86; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-700); background: var(--paper); box-shadow: 0 0 0 3px rgba(21,36,59,0.08); } .field textarea { resize: vertical; min-height: 120px; } .field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #B4452F; box-shadow: 0 0 0 3px rgba(180,69,47,0.08); } .field .err { font-size: 0.76rem; color: #B4452F; display: none; } .field.invalid .err { display: block; } .check { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); } .check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue-800); flex-shrink: 0; } .form-micro { font-size: 0.84rem; color: var(--muted); line-height: 1.5; } .form-success { display: none; text-align: center; padding: var(--s-6) var(--s-4); } .form-success.show { display: block; } .form-success .tick { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--bronze); color: var(--bronze-d); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s-4); } .form-hidden { display: none !important; } /* ---------- Contact aside ---------- */ .contact-aside { display: flex; flex-direction: column; gap: var(--s-5); } .contact-line { display: flex; gap: var(--s-3); align-items: flex-start; } .contact-line .ci { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--bronze-d); } .contact-line .cl-label { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .contact-line .cl-value { font-size: 1.05rem; color: var(--heading); font-weight: 500; } .contact-line a.cl-value:hover { color: var(--bronze-d); } .on-blue .contact-line .ci { border-color: var(--blue-600); color: var(--bronze-l); } .on-blue .contact-line .cl-value { color: var(--paper); } .on-blue .contact-line .cl-label { color: var(--blue-200); } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; } .cta-inner { display: grid; gap: var(--s-6); align-items: center; } /* ---------- Footer ---------- */ .site-footer { background: var(--blue-900); color: var(--blue-200); } .footer-top { display: grid; grid-template-columns: 1fr; gap: var(--s-7); padding-block: var(--s-8) var(--s-7); } .footer-brand .brand-mark { color: var(--paper); } .footer-brand p { color: var(--blue-200); font-size: 0.95rem; margin-top: var(--s-3); max-width: 34ch; } .footer-col h3 { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze-l); margin-bottom: var(--s-4); font-weight: 600; line-height: 1.65; } .footer-col ul { display: flex; flex-direction: column; gap: var(--s-3); } .footer-col a { font-size: 0.95rem; color: var(--blue-200); transition: color .2s; } .footer-col a:hover { color: var(--paper); } .footer-social { display: inline-flex; align-items: center; gap: 0.5em; } .footer-social svg { width: 16px; height: 16px; flex-shrink: 0; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-block: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); justify-content: space-between; font-size: 0.82rem; color: var(--blue-200); } .footer-bottom a:hover { color: var(--paper); } /* ---------- Footer — light variant (home/index, carries the logo) ---------- */ .site-footer--light { background: var(--sand-100); color: var(--ink-soft); border-top: 1px solid var(--line); } .site-footer--light .footer-logo { width: clamp(132px, 15vw, 184px); height: auto; display: block; } .site-footer--light .footer-brand p { color: var(--ink-soft); margin-top: var(--s-4); } .site-footer--light .footer-col h3 { color: var(--bronze-d); } .site-footer--light .footer-col a { color: var(--ink-soft); } .site-footer--light .footer-col a:hover { color: var(--blue-800); } .site-footer--light .footer-bottom { border-top-color: var(--line); color: var(--ink-soft); } .site-footer--light .footer-bottom a:hover { color: var(--blue-800); } /* ---------- Misc accents ---------- */ .badge { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; color: var(--bronze-d); background: color-mix(in srgb, var(--bronze) 10%, var(--paper)); border: 1px solid color-mix(in srgb, var(--bronze) 35%, transparent); border-radius: var(--r-pill); padding: 0.4em 0.9em; } .note { font-size: 0.84rem; color: var(--muted); border-left: 2px solid var(--bronze); padding-left: var(--s-4); background: color-mix(in srgb, var(--bronze) 5%, transparent); padding-block: var(--s-3); border-radius: 0 var(--r-xs) var(--r-xs) 0; } /* ---------- Tabs ---------- */ .tabs-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); } .tabs-nav [data-tab] { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.6em 1.1em; transition: all .25s; } .tabs-nav [data-tab]:hover { border-color: var(--blue-700); color: var(--blue-800); } .tabs-nav [data-tab].active { background: var(--blue-800); border-color: var(--blue-800); color: var(--paper); } [data-panel] { display: none; } [data-panel].active { display: block; animation: fade .4s ease; } @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tab-panel-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; } @media (min-width: 880px) { .tab-panel-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } } /* ============================================================ Motion — scroll reveals, staggered groups, hover & entrance JS adds .in when an element scrolls into view (see nyamo.js); per-group stagger delays are set there too. ============================================================ */ /* Base reveal: a slow, gentle fade + rise. */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); } .reveal.in { opacity: 1; transform: none; } /* Eyebrow rule line draws in with its block (transform — no text reflow). */ .eyebrow::before { transform-origin: left center; transition: transform .7s cubic-bezier(.16,1,.3,1); } .reveal .eyebrow::before { transform: scaleX(0); } .reveal.in .eyebrow::before { transform: scaleX(1); } /* Photography settles from a slight zoom as its card reveals; subtle hover zoom. */ .ph.has-image img, .portrait img { transition: transform .9s cubic-bezier(.16,1,.3,1); } .reveal .ph.has-image img, .reveal .portrait img { transform: scale(1.06); } .reveal.in .ph.has-image img, .reveal.in .portrait img { transform: scale(1); } .ph.has-image:hover img, .portrait:hover img { transform: scale(1.045); } /* Method steps cascade in when the timeline reveals (parent itself doesn't fade). */ .method.reveal { opacity: 1; transform: none; } .method.reveal .step { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } .method.reveal.in .step { opacity: 1; transform: none; } .method.reveal.in .step:nth-child(1) { transition-delay: .04s; } .method.reveal.in .step:nth-child(2) { transition-delay: .10s; } .method.reveal.in .step:nth-child(3) { transition-delay: .16s; } .method.reveal.in .step:nth-child(4) { transition-delay: .22s; } .method.reveal.in .step:nth-child(5) { transition-delay: .28s; } .method.reveal.in .step:nth-child(6) { transition-delay: .34s; } .method.reveal.in .step:nth-child(7) { transition-delay: .40s; } /* Footer settles column by column (parent triggers only). */ .footer-top.reveal { opacity: 1; transform: none; } .footer-top.reveal .footer-brand, .footer-top.reveal .footer-col { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } .footer-top.reveal.in .footer-brand, .footer-top.reveal.in .footer-col { opacity: 1; transform: none; } .footer-top.reveal.in > :nth-child(2) { transition-delay: .07s; } .footer-top.reveal.in > :nth-child(3) { transition-delay: .14s; } .footer-top.reveal.in > :nth-child(4) { transition-delay: .21s; } /* Header eases in on load. */ @keyframes nyamo-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .site-header .nav > * { animation: nyamo-fade-down .7s cubic-bezier(.16,1,.3,1) both; } .site-header .brand { animation-delay: .04s; } .site-header .nav-links { animation-delay: .12s; } .site-header .nav-actions { animation-delay: .18s; } /* Hover lift on expertise cards, matching the pathway cards. */ .feature { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; } .feature:hover { transform: translateY(-4px); box-shadow: var(--sh-3); } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal, .method.reveal .step, .footer-top.reveal .footer-brand, .footer-top.reveal .footer-col { opacity: 1 !important; transform: none !important; transition: none !important; } .eyebrow::before { transform: none !important; transition: none !important; } .ph.has-image img, .portrait img, .reveal .ph.has-image img, .reveal .portrait img { transform: none !important; transition: none !important; } .site-header .nav > * { animation: none !important; } .btn:hover, .feature:hover { transform: none !important; } } /* Print: force every animated element to its final visible state. */ @media print { .reveal, .method.reveal .step, .footer-top.reveal .footer-brand, .footer-top.reveal .footer-col { opacity: 1 !important; transform: none !important; } .eyebrow::before { transform: none !important; } .reveal .ph.has-image img, .reveal .portrait img { transform: none !important; } .site-header .nav > * { animation: none !important; } } /* ============================================================ Responsive — mobile-first breakpoints ============================================================ */ @media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } .factstrip { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 880px) { .pathways { grid-template-columns: 1fr 1fr; } .feature-grid { grid-template-columns: 1fr 1fr; } .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } .pillar { border-top: none; border-bottom: none; padding-top: 0; } .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .footer-bottom { flex-direction: row; align-items: center; } } @media (min-width: 980px) { .nav-links, .nav-actions { display: flex; } .burger { display: none; } .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); } .hero-grid.solo { grid-template-columns: 1fr; } .cta-inner.split { grid-template-columns: 1.2fr 0.8fr; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; } .two-col.narrow-right { grid-template-columns: 1.15fr 0.85fr; } .method.two { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); } .contact-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-8); align-items: start; } } @media (min-width: 1100px) { .feature-grid.three { grid-template-columns: repeat(3, 1fr); } }