/* ============================================================ FIELD NOTES — portfolio redesign system (home / index) Reviewable, self-contained. Scoped under body.fn so it can later be folded into css/styles.css without colliding. Re-expresses the designs/ prototypes in the site's real pattern (no support.js / / inline-style mechanism). ============================================================ */ body.fn { --paper:#fdfcfa; --paper-tint:#f4f1ec; --paper-tint-2:#f1ede4; --band:#f7f5f1; --ink:#1a1a1a; --body:#33312c; --muted:#4a443a; --faint:#8a8478; --faint-2:#6a6256; --navy:#2a3a5c; --footer:#161616; --hairline:rgba(40,36,30,.16); --rule:#1a1a1a; --font-display:"Schibsted Grotesk",system-ui,sans-serif; --font-body:"Schibsted Grotesk",system-ui,sans-serif; --font-mono:"Schibsted Grotesk",system-ui,sans-serif; --ease:cubic-bezier(.22,1,.36,1); margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-kerning:normal; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* Stop iOS Safari from auto-inflating text (a common cause of mobile-only horizontal overflow that doesn't reproduce in desktop emulation). */ -webkit-text-size-adjust:100%; text-size-adjust:100%; /* Break any overlong word/URL rather than let it force a line wider than the viewport — another mobile-only overflow that exact-width emulation can miss. Inherited, so it protects all case-study body copy; only actually breaks a word when it wouldn't otherwise fit. */ overflow-wrap:break-word; } body.fn *, body.fn *::before, body.fn *::after { box-sizing:border-box; } html { scroll-behavior:smooth; } body.fn ::selection { background:var(--navy); color:var(--paper); } body.fn a { color:inherit; } body.fn img { max-width:100%; } /* Keep the HTML hidden attribute authoritative (CMS-hidden portfolio items, e.g. the "Design at Prosper" card) — class display rules must not override it. */ body.fn [hidden] { display:none !important; } .fn-wrap { max-width:1240px; margin:0 auto; padding:0 56px; } /* Screen-reader-only (carried over from styles.css) */ body.fn .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Skip link (carried over) */ body.fn .skip-link { position:absolute; left:-9999px; top:0; z-index:13000; background:var(--ink); color:var(--paper); padding:10px 16px; font:600 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; } body.fn .skip-link:focus { left:12px; top:12px; } /* Ruled text link — replaces every pill CTA (ref: 600/15px, 2px ink rule) */ .fn-rl { display:inline-block; text-decoration:none; font:600 15px/1 var(--font-body); color:var(--ink); border-bottom:2px solid var(--navy); padding-bottom:4px; } .fn-rl .arr { display:inline-block; transition:transform .3s var(--ease); } .fn-rl:hover .arr { transform:translateX(6px); } .fn-rl--sm { font-size:14px; padding-bottom:3px; } /* Kicker / eyebrow — 9px square marker + tracked uppercase (per reference). The square takes currentColor, so it stays ink on light and light on dark. */ .fn-kicker { margin:0; font:700 12px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--navy); display:flex; align-items:center; gap:10px; } .fn-kicker::before { content:""; width:9px; height:9px; background:currentColor; flex-shrink:0; } .fn-meta { font:600 10px/1.5 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } /* Duotone recipe (navy ink behind a grayscale, screen-blended image) */ .fn-duo { position:relative; background:var(--navy); overflow:hidden; } .fn-duo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(1.05); mix-blend-mode:screen; opacity:.92; transition:filter .55s var(--ease), opacity .55s ease; } .fn-duo .fn-figref { position:absolute; left:16px; top:14px; z-index:2; font:600 9.5px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(253,252,250,.9); } /* ===================== NAV ===================== */ /* Sticky frosted bar: background + blur + the bold ink top rule live on the edge-to-edge container; the content row stays centered at a fixed height. */ body.fn .nav-container { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px); border-top:4px solid var(--ink); border-bottom:1px solid var(--hairline); } body.fn #global-nav { display:flex; align-items:center; justify-content:space-between; max-width:1240px; margin:0 auto; padding:0 56px; height:66px; background:transparent; } body.fn .fn-wordmark { text-decoration:none; display:inline-flex; align-items:center; color:var(--ink); font:800 24px/1 var(--font-display); letter-spacing:-.02em; white-space:nowrap; } body.fn #desktop-nav-links { display:flex; align-items:center; gap:32px; } body.fn #mobile-nav-links { display:none; align-items:center; gap:26px; } /* Quiet text links: muted color, no underline, no hover shift — the CTA is the only link that visually activates. */ body.fn .fn-navlink, body.fn .caseStudiesLink, body.fn .aboutme, body.fn .articleLink { text-decoration:none; cursor:pointer; font:500 15px/1 var(--font-body); letter-spacing:normal; text-transform:none; color:var(--muted); } /* Mobile hamburger toggle — created by js/fn-nav.js. Hidden on desktop; the mobile drawer styles live in the max-width:920px block and are gated on .fn-nav-ready so no-JS falls back to the inline mobile nav. */ body.fn .fn-nav-toggle { display:none; } /* Coaching CTA = the one link that activates: full ink + solid ink underline */ body.fn .coaching-nav-cta { text-decoration:none; display:inline-flex; align-items:baseline; gap:6px; font:500 15px/1 var(--font-body); letter-spacing:normal; text-transform:none; color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:3px; } body.fn .coaching-nav-cta span[aria-hidden="true"] { font-size:13px; } body.fn .coaching-nav-cta-text--short { display:none; } /* ===================== HERO ===================== */ .fn-hero { padding:84px 0 96px; border-bottom:1px solid var(--hairline); } .fn-hero-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:64px; align-items:center; } .fn-hero h1 { margin:0 0 28px; font:800 64px/1.05 var(--font-display); letter-spacing:-.03em; color:var(--ink); text-wrap:balance; max-width:14ch; } .fn-hero-deck { margin:0; font:400 20px/1.6 var(--font-body); color:var(--muted); max-width:52ch; font-weight:400; } .fn-hero-deck em { font-style:normal; font-weight:600; color:var(--navy); } .fn-portrait { margin:0; /* kill the UA figure margin (1em 40px) — misaligns the stacked mobile hero */ position:relative; background:var(--navy); border-radius:2px; aspect-ratio:4/5; overflow:hidden; } .fn-portrait::before { content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 50% 0%, rgba(74,90,124,.5), rgba(42,58,92,0) 60%); } .fn-portrait img { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block; } .fn-portrait figcaption { position:absolute; left:18px; bottom:16px; z-index:2; margin:0; font:600 9.5px/1.5 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:rgba(253,252,250,.92); } .fn-portrait figcaption span { color:rgba(253,252,250,.6); } /* Section kicker spacing (about / coaching teaser) */ .fn-about .fn-kicker { margin-bottom:22px; } .fn-coach .fn-kicker { margin-bottom:18px; } /* Hero support (per Mono reference): kicker spacing, CTA row under the deck */ .fn-hero .fn-kicker { margin-bottom:26px; } .fn-hero-ctas { display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:34px; } /* Selected-work section head (kicker + display H2, no rule — per reference) */ .fn-work-head { margin:0 0 48px; } .fn-work-head .fn-kicker { margin-bottom:14px; } .fn-work-head h2 { margin:0; font:800 40px/1.02 var(--font-display); letter-spacing:-.02em; color:var(--ink); } /* Footer copyright line (right-aligned by the footer flex row) */ .fn-footer-copy { margin:0; font:600 10px/1.6 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); } /* ===================== SECTION HEADER ===================== */ .fn-section { padding:46px 0 50px; } .fn-shead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:46px; border-bottom:2px solid var(--rule); padding-bottom:18px; } .fn-shead h2 { margin:10px 0 0; font:800 40px/1.02 var(--font-display); letter-spacing:-.02em; color:var(--ink); } /* ===================== SELECTED WORK ===================== */ .fn-lead.fn-plate { display:grid; grid-template-columns:1.15fr .85fr; gap:0; text-decoration:none; margin-bottom:64px; align-items:stretch; background:var(--paper-tint-2); } .fn-lead.fn-plate .fn-plate-img { min-height:520px; aspect-ratio:auto; margin-bottom:0; display:flex; align-items:center; justify-content:center; padding:36px; } .fn-lead-panel { padding:52px 48px; display:flex; flex-direction:column; } .fn-lead-meta { margin:0 0 18px; font:600 10px/1.5 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .fn-lead.fn-plate .fn-lead-panel h3 { margin:34px 0 18px; font:800 40px/1.05 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-lead.fn-plate .fn-lead-panel h3 em { font-style:normal; color:var(--navy); } .fn-lead-desc { margin:0 0 36px; font:400 16.5px/1.6 var(--font-body); color:var(--muted); max-width:44ch; } .fn-lead-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:auto; } .fn-fig { font:800 78px/.78 var(--font-display); color:var(--navy); letter-spacing:-.02em; white-space:nowrap; font-variant-numeric:tabular-nums; } .fn-fig .count-up, .fn-fig sub { font-style:normal; } .fn-fig-suffix { font-size:36px; } .fn-3up { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } /* 3-up cards are flex columns so "Read more" pins to the card bottom (ref). */ .fn-plate { text-decoration:none; display:flex; flex-direction:column; } .fn-plate .fn-plate-img { position:relative; background:var(--navy); overflow:hidden; aspect-ratio:16/10; margin-bottom:22px; display:flex; align-items:center; justify-content:center; padding:24px; } .fn-plate .fn-plate-img img { position:static; width:100%; height:auto; max-height:100%; object-fit:contain; filter:grayscale(1) contrast(1.06) brightness(1.05); mix-blend-mode:screen; opacity:.92; transition:filter .55s var(--ease), opacity .55s ease, transform .6s var(--ease); } /* Hover = the duotone lifts and the image blooms to full real color (ref). */ .fn-plate:hover .fn-plate-img img { filter:none; mix-blend-mode:normal; opacity:1; transform:scale(1.035); } .fn-plate .fn-rl { margin-top:auto; align-self:flex-start; } .fn-lead .fn-plate-img img { position:static; width:100%; height:auto; max-height:100%; object-fit:contain; filter:grayscale(1) contrast(1.08) brightness(1.05); mix-blend-mode:screen; opacity:.92; transition:filter .55s var(--ease), opacity .55s ease, transform .6s var(--ease); } .fn-lead:hover .fn-plate-img img { filter:none; mix-blend-mode:normal; opacity:1; transform:scale(1.035); } .fn-plate-eyebrow { margin:0 0 8px; font:600 9.5px/1.4 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--navy); } .fn-plate-eyebrow span { color:var(--faint); } .fn-plate h3 { margin:0 0 12px; font:700 23px/1.2 var(--font-display); letter-spacing:-.015em; color:var(--ink); text-wrap:balance; } .fn-plate h3 em { font-style:normal; color:var(--ink); } .fn-plate-desc { margin:0 0 18px; font:400 15px/1.6 var(--font-body); color:var(--muted); } .fn-otherwork { margin-top:44px; padding-top:22px; border-top:1px solid var(--hairline); display:flex; align-items:baseline; justify-content:space-between; gap:24px; } .fn-otherwork p { margin:0; font:400 16px/1.5 var(--font-body); color:var(--muted); } /* ===================== CULTURE (full-bleed duotone) ===================== */ .fn-culture { position:relative; background:var(--navy); overflow:hidden; } .fn-culture > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(1.04); mix-blend-mode:screen; opacity:.5; } .fn-culture-grad { position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,26,42,.86) 0%, rgba(20,26,42,.5) 55%, rgba(20,26,42,.2) 100%); } .fn-culture-inner { position:relative; z-index:2; padding:52px 56px 48px; cursor:pointer; } .fn-culture .fn-kicker { color:rgba(199,208,227,.95); margin-bottom:22px; } .fn-culture h2 { margin:0 0 22px; font:800 50px/1.05 var(--font-display); letter-spacing:-.025em; color:var(--paper); max-width:16ch; text-wrap:balance; } .fn-culture h2 em { font-style:normal; color:#c7d0e3; } .fn-culture-deck { margin:0 0 36px; font:400 18px/1.65 var(--font-body); color:rgba(253,252,250,.82); max-width:48ch; } body.fn .culture-video-play { display:inline-flex; align-items:center; gap:14px; background:none; border:none; cursor:pointer; padding:0; } body.fn .culture-video-play-icon { width:52px; height:52px; border-radius:50%; border:1.5px solid rgba(253,252,250,.7); display:inline-flex; align-items:center; justify-content:center; transition:background .3s var(--ease); } body.fn .culture-video-play-icon::after { content:""; width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--paper); margin-left:3px; } body.fn .culture-video-play:hover .culture-video-play-icon { background:rgba(253,252,250,.12); } body.fn #culture-video-inline { display:none; } /* ===================== WRITING / PUBLICATIONS INDEX ===================== */ /* Tighten this section's header-to-first-row gap (others keep the default 46px). */ #featured-articles .fn-shead { margin-bottom:8px; } .fn-wrow { text-decoration:none; display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--hairline); transition:background-color .3s ease; } .fn-wrow:hover { background:var(--paper-tint); } .fn-wrow-date { font:600 10px/1.5 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } .fn-wrow h3 { margin:0 0 6px; font:700 24px/1.15 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-wrow-desc { margin:0; font:400 15.5px/1.55 var(--font-body); color:var(--muted); max-width:64ch; } .fn-wrow-arr { font:400 22px/1 var(--font-body); color:var(--navy); display:inline-block; transition:transform .3s var(--ease); } .fn-wrow:hover .fn-wrow-arr { transform:translateX(6px); } /* ===================== COACHING ===================== */ .fn-coach-band { padding:40px 0 44px; background:var(--paper-tint); } .fn-coach { display:grid; grid-template-columns:1.25fr .75fr; gap:64px; align-items:start; } .fn-coach h2 { margin:18px 0 20px; font:800 40px/1.06 var(--font-display); letter-spacing:-.02em; color:var(--ink); max-width:20ch; } .fn-coach-deck { margin:0 0 26px; font:400 17px/1.65 var(--font-body); color:var(--muted); max-width:52ch; } .fn-coach-aside { border-top:2px solid var(--rule); padding-top:18px; } .fn-coach-aside .fn-meta { display:block; margin-bottom:8px; } .fn-coach-aside ul { margin:0; padding:0; list-style:none; } .fn-coach-aside li { font:500 15px/1.4 var(--font-body); color:var(--body); padding:12px 0; border-bottom:1px solid var(--hairline); } .fn-coach-aside li:last-child { border-bottom:none; } /* ===================== ABOUT ===================== */ .fn-about { display:grid; grid-template-columns:1.6fr .9fr; gap:72px; align-items:start; } .fn-about-h { margin:0 0 22px; font:800 30px/1 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-about .lead { margin:0 0 22px; font:500 22px/1.5 var(--font-body); color:var(--ink); max-width:60ch; } .fn-about p { margin:0 0 18px; font:400 17px/1.7 var(--font-body); color:var(--muted); max-width:62ch; } .fn-about p:last-child { margin-bottom:0; } .fn-about p a { border-bottom:1.5px solid var(--navy); text-decoration:none; padding-bottom:1px; } .fn-contact { border-top:2px solid var(--rule); padding-top:22px; } .fn-contact .fn-meta { display:block; margin-bottom:8px; } .fn-contact-email { text-decoration:none; display:inline-block; font:700 20px/1.2 var(--font-display); letter-spacing:-.02em; color:var(--ink); border-bottom:2px solid var(--navy); padding-bottom:3px; margin-bottom:28px; word-break:break-all; } .fn-contact-rows { display:flex; flex-direction:column; } .fn-contact-rows a { text-decoration:none; font:600 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--body); padding:13px 0; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:center; transition:color .25s var(--ease); } .fn-contact-rows a:last-child { border-bottom:1px solid var(--hairline); } .fn-contact-rows a:hover { color:var(--navy); } .fn-contact-rows a span { color:var(--navy); } /* Additional articles — editorial index reused below the letter */ .fn-articles { margin-top:64px; } .fn-articles h3.fn-articles-h { margin:0 0 8px; font:800 30px/1 var(--font-display); letter-spacing:-.02em; color:var(--ink); } /* ===================== FIGMA / PARITY (kept; not in handoff) ===================== */ .fn-figma-band { padding:44px 0; background:var(--band); } .fn-figma { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .fn-figma h2 { margin:14px 0 18px; font:800 36px/1.05 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-figma-deck { margin:0 0 28px; font:400 17px/1.65 var(--font-body); color:var(--muted); max-width:52ch; } .fn-figma-ctas { display:flex; gap:34px; flex-wrap:wrap; } .fn-figma-art { border:1px solid var(--hairline); border-radius:2px; overflow:hidden; background:var(--paper); max-width:460px; justify-self:center; } /* Grayscale at rest, real color on hover — matches the site-wide image treatment (§4). */ .fn-figma-art img { display:block; width:100%; height:auto; border-radius:2px; /* matches .fn-portrait */ filter:grayscale(1); transition:filter .55s var(--ease); } .fn-figma-art:hover img { filter:none; } /* ===================== FOOTER ===================== */ body.fn .site-footer { background:var(--footer); color:var(--paper); padding:56px 0 48px; margin-top:0; } .fn-footer-inner { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; } .fn-footer-word { margin:0 0 10px; font:800 26px/1 var(--font-display); letter-spacing:-.02em; color:var(--paper); } .fn-footer-tag { margin:0; font:600 10px/1.6 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:rgba(253,252,250,.55); } .fn-footer-links { display:flex; gap:26px; align-items:center; } .fn-footer-links a { text-decoration:none; font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(253,252,250,.75); border-bottom:1.5px solid rgba(253,252,250,.4); padding-bottom:4px; transition:color .25s var(--ease), border-color .25s var(--ease); } body.fn .site-footer ul { list-style:none; margin:0; padding:0; display:inline; } body.fn .site-footer ul li { display:inline; } .fn-footer-links a:hover { color:var(--paper); border-color:var(--paper); } /* ===================== THEATER (carried over from styles.css) ===================== */ #theater-backdrop { position:fixed; inset:0; background:rgba(5,8,12,.78); -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1500; } body.theater-mode #theater-backdrop { opacity:1; pointer-events:auto; } #theater-player { position:fixed; top:0; left:0; width:320px; transform:translate3d(0,0,0) scale(1); transform-origin:center center; opacity:0; pointer-events:none; transition:opacity .24s ease, transform .28s ease; z-index:2005; } #theater-video { width:100%; display:block; border-radius:.25rem; border:1px solid rgba(42,58,92,.16); box-shadow:0 12px 34px rgba(0,0,0,.32); } body.theater-mode #theater-player { opacity:1; pointer-events:auto; transform:translate3d(0,-2px,0) scale(1.025); } /* ===================== FOCUS / MOTION ===================== */ body.fn a:focus-visible, body.fn button:focus-visible, body.fn summary:focus-visible { outline:2px solid var(--navy); outline-offset:4px; border-radius:1px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } body.fn .fn-plate-img img, body.fn .fn-rl .arr, body.fn .fn-wrow-arr, body.fn #theater-backdrop, body.fn #theater-player { transition:none !important; } body.fn .fn-plate:hover .fn-plate-img img, body.fn .fn-lead:hover .fn-plate-img img { transform:none !important; } body.fn .count-up { opacity:1; } } /* ===================== RESPONSIVE (collapse at ≤920px) ===================== */ @media (max-width:760px) { .fn-wrap { padding:0 24px; } } @media (max-width:920px) { body.fn #global-nav { padding:0 20px; gap:16px; } body.fn .fn-wordmark { font-size:22px; } body.fn #desktop-nav-links { display:none; } body.fn #mobile-nav-links { display:flex; } /* --- Hamburger nav (progressive enhancement; active once fn-nav.js adds .fn-nav-ready — otherwise the inline #mobile-nav-links above is the fallback) --- */ body.fn.fn-nav-ready .fn-nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:-6px -6px -6px 0; padding:0; background:none; border:none; cursor:pointer; color:var(--ink); } body.fn.fn-nav-ready .fn-nav-toggle-bars { position:relative; display:block; width:24px; height:14px; } body.fn.fn-nav-ready .fn-nav-toggle-bars span { position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px; transition:transform .25s var(--ease), opacity .2s var(--ease); } body.fn.fn-nav-ready .fn-nav-toggle-bars span:nth-child(1) { top:0; } body.fn.fn-nav-ready .fn-nav-toggle-bars span:nth-child(2) { top:6px; } body.fn.fn-nav-ready .fn-nav-toggle-bars span:nth-child(3) { top:12px; } body.fn.fn-nav-ready .nav-container.fn-nav-open .fn-nav-toggle-bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); } body.fn.fn-nav-ready .nav-container.fn-nav-open .fn-nav-toggle-bars span:nth-child(2) { opacity:0; } body.fn.fn-nav-ready .nav-container.fn-nav-open .fn-nav-toggle-bars span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); } /* Drawer: full-width panel under the bar, revealed on toggle. */ body.fn.fn-nav-ready #mobile-nav-links { display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; top:100%; left:0; right:0; margin:0; background:var(--paper); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); box-shadow:0 16px 34px rgba(20,18,14,.09); padding:6px 20px 14px; visibility:hidden; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; } body.fn.fn-nav-ready .nav-container.fn-nav-open #mobile-nav-links { visibility:visible; opacity:1; transform:none; pointer-events:auto; transition:opacity .22s var(--ease), transform .22s var(--ease); } body.fn.fn-nav-ready #mobile-nav-links > a { display:flex; align-items:center; min-height:48px; padding:2px; font:400 18px/1.25 var(--font-body); color:var(--body); text-decoration:none; border-bottom:1px solid var(--hairline); } body.fn.fn-nav-ready #mobile-nav-links > a:last-child { border-bottom:none; } body.fn.fn-nav-ready #mobile-nav-links > a.coaching-nav-cta { color:var(--navy); } body.fn .coaching-nav-cta-text--long { display:none; } body.fn .coaching-nav-cta-text--short { display:inline; } .fn-hero { padding:56px 0 32px; } .fn-hero-grid { grid-template-columns:1fr; gap:18px; } .fn-hero h1 { font-size:46px; max-width:none; } .fn-section { padding:32px 0 36px; } .fn-shead h2, .fn-coach h2 { font-size:30px; } .fn-lead.fn-plate, .fn-3up, .fn-coach, .fn-about, .fn-figma { grid-template-columns:1fr; } .fn-lead.fn-plate { gap:0; } .fn-lead .fn-plate-img { min-height:300px; } .fn-lead-panel { padding:40px 28px; } .fn-lead.fn-plate .fn-lead-panel h3 { font-size:32px; } .fn-3up { gap:44px; } .fn-culture-inner { padding:36px 24px 32px; } .fn-culture h2 { font-size:36px; } .fn-coach { gap:40px; } .fn-about { gap:40px; } /* Single column so the date sits ABOVE the title as an eyebrow (mono/uppercase already), instead of squeezing the title into a narrow second column. */ .fn-wrow { grid-template-columns:1fr; gap:5px; } .fn-wrow-date { margin-bottom:1px; } .fn-wrow-arr { display:none; } .fn-wrow h3 { font-size:23px; } .fn-figma { gap:36px; } .fn-figma-art { order:-1; } /* --- Touch targets: grow standalone links to a comfortable tap size --- */ .fn-rl { padding-top:14px; padding-bottom:8px; } /* ~38px tall (was ~21) */ .fn-footer-links a { padding-top:14px; padding-bottom:12px; } .fn-footer-links { gap:22px 26px; flex-wrap:wrap; } /* Keep the floating "Ask Jeremy" launcher from covering footer content. */ body.fn .site-footer { padding-bottom:96px; } } @media (max-width:560px) { .fn-hero h1 { font-size:38px; } .fn-fig { font-size:58px; } } /* ============================================================ CASE STUDY (Field Notes) — masthead, meta rail, sticky-label sections, numbered process chapters, navy outcome figures. ============================================================ */ .fn-cs { padding-top:0; } .fn-cs-section { padding:80px 0; } .fn-cs-section--tint { background:var(--paper-tint); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); } .fn-cs-section--band { background:var(--band); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); } .fn-cs-section--ruled { border-top:1px solid var(--hairline); } /* Topbar */ .fn-cs-topbar { display:flex; align-items:center; justify-content:space-between; padding-top:30px; padding-bottom:30px; } .fn-cs-topbar a, .fn-cs-topbar span { text-decoration:none; font:600 10px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--faint); } .fn-cs-topbar a { display:inline-flex; align-items:center; gap:8px; transition:color .25s var(--ease); } .fn-cs-topbar a:hover { color:var(--navy); } .fn-cs-topbar .arr { display:inline-block; transition:transform .3s var(--ease); } .fn-cs-topbar a:hover .arr { transform:translateX(-4px); } /* Masthead */ .fn-masthead { display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:end; padding-bottom:8px; } .fn-cs-eyebrow { margin:0 0 18px; font:600 11px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--navy); } .fn-masthead h1 { margin:0 0 24px; font:800 60px/1.02 var(--font-display); letter-spacing:-.025em; color:var(--ink); max-width:16ch; text-wrap:balance; } .fn-masthead h1 em { font-style:normal; color:var(--navy); } .fn-cs-deck { margin:0; font:400 20px/1.6 var(--font-body); color:var(--muted); max-width:54ch; } .fn-cs-hero { position:relative; background:var(--navy); overflow:hidden; aspect-ratio:4/5; border-radius:2px; margin:0; display:flex; align-items:center; justify-content:center; padding:22px; } .fn-cs-hero img { position:static; width:100%; height:auto; max-height:100%; object-fit:contain; filter:grayscale(1) contrast(1.08) brightness(1.05); mix-blend-mode:screen; opacity:.92; transition:filter .55s var(--ease), opacity .55s ease; } /* Case pages: hovering the image frame lifts the duotone (ref behavior). */ .fn-cs-hero:hover img, .fn-duo:hover img { filter:none; mix-blend-mode:normal; opacity:1; } .fn-cs-hero .fn-figref { position:absolute; left:16px; top:14px; font:600 9px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(253,252,250,.9); } /* Meta rail */ .fn-meta-rail { display:grid; grid-template-columns:.8fr 1.6fr 1.6fr 1.2fr; margin:48px 0 0; border-top:2px solid var(--rule); border-bottom:1px solid var(--hairline); } .fn-meta-rail > div { padding:18px; border-right:1px solid var(--hairline); } .fn-meta-rail > div:first-child { padding-left:0; } .fn-meta-rail > div:last-child { padding-right:0; border-right:none; } .fn-meta-rail dt { margin:0 0 6px; font:600 9px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .fn-meta-rail dd { margin:0; font:400 15px/1.4 var(--font-body); color:var(--ink); } /* Section label (mono § + serif heading), sticky in two-col layout */ .fn-cs-two { display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:start; } .fn-cs-label { position:sticky; top:100px; } .fn-cs-label .fn-sect-num { margin:0 0 8px; font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--navy); } .fn-cs-label h2 { margin:0; font:800 30px/1.08 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-cs-head { margin:0 0 40px; } .fn-cs-head .fn-sect-num { margin:0 0 8px; font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--navy); } .fn-cs-head h2 { margin:0; font:800 30px/1.05 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-cs-head-deck { margin:14px 0 0; font:400 18px/1.65 var(--font-body); color:var(--muted); max-width:64ch; } /* Prose */ .fn-cs-body > p { margin:0 0 20px; font:400 18px/1.7 var(--font-body); color:var(--body); } .fn-cs-body > p:last-child { margin-bottom:0; } .fn-cs-body .fn-cs-lead, .fn-cs-summary { margin:0; font:400 21px/1.65 var(--font-body); color:var(--body); } .fn-cs-body strong, .fn-cs-body b { font-weight:600; color:var(--ink); } /* Ruled bullet list */ .fn-cs-bullets { margin:0 0 28px; padding:0; list-style:none; } .fn-cs-bullets li { position:relative; font:400 16.5px/1.6 var(--font-body); color:var(--body); padding:12px 0 12px 26px; border-top:1px solid var(--hairline); } .fn-cs-bullets li:last-child { border-bottom:1px solid var(--hairline); } .fn-cs-bullets li::before { content:"\2014"; position:absolute; left:0; color:var(--navy); } .fn-cs-bullets li strong { font-weight:600; } /* 3-col role grid (overview / learnings) */ .fn-role-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--rule); } .fn-role-grid > div { padding:26px 28px; border-right:1px solid var(--hairline); } .fn-role-grid > div:first-child { padding-left:0; } .fn-role-grid > div:last-child { padding-right:0; border-right:none; } .fn-role-label { margin:0 0 12px; font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .fn-role-grid p:not(.fn-role-label) { margin:0; font:400 16px/1.62 var(--font-body); color:var(--body); } .fn-cs-nextsteps { margin-top:44px; padding-top:28px; border-top:1px solid var(--hairline); max-width:72ch; } .fn-cs-nextsteps .fn-role-label { margin-bottom:10px; } .fn-cs-nextsteps p:not(.fn-role-label) { margin:0; font:400 16.5px/1.7 var(--font-body); color:var(--body); } /* Problem screenshots: 3 duotone plates */ .fn-img3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 0 18px; } .fn-img3 figure { margin:0; } .fn-img3 .fn-duo { aspect-ratio:3/4; } .fn-img3 .fn-duo img { object-position:top; filter:grayscale(1) contrast(1.12) brightness(1.02); } .fn-img3 figcaption { margin:8px 0 0; font:600 8.5px/1.4 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } /* Process chapters */ .fn-chap { display:grid; grid-template-columns:84px 1fr; gap:32px; padding:48px 0; border-top:1px solid var(--hairline); } .fn-chap:first-of-type { padding-top:0; border-top:none; } .fn-chap-num { margin:0; font:400 44px/.8 var(--font-display); color:#c2bcae; } .fn-chap-body { max-width:820px; } .fn-chap-body h3 { margin:0 0 16px; font:700 26px/1.15 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-chap-body > p { margin:0 0 14px; font:400 16.5px/1.7 var(--font-body); color:var(--body); } .fn-chap-body > p:last-child { margin-bottom:0; } .fn-chap-media { margin:28px 0 0; } .fn-chap-media + .fn-chap-media { margin-top:18px; } .fn-chap-media figcaption, .fn-chap-fig-cap { margin:10px 0 0; font:600 9.5px/1.5 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); } /* Embedded prototypes + videos (Figma, YouTube). The fallback sits behind the iframe; if the embed is blocked/slow it shows instead of a blank white box. Grayscale at rest, real color on hover — matching the site image treatment (§4); hovering to interact with the prototype/player brings it into full color. */ .fn-figma-embed { position:relative; aspect-ratio:16/9; border:1px solid var(--hairline); border-radius:2px; overflow:hidden; background:var(--navy); } .fn-figma-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:1; background:transparent; filter:grayscale(1); transition:filter .55s var(--ease); } .fn-figma-embed:hover iframe { filter:none; } .fn-figma-fallback { position:absolute; inset:0; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; text-decoration:none; background:repeating-linear-gradient(135deg, rgba(253,252,250,.04) 0 14px, rgba(253,252,250,.08) 14px 28px); } .fn-figma-fallback .ff-tag { margin:0; font:600 10px/1.5 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:rgba(253,252,250,.72); max-width:36ch; } .fn-figma-fallback .ff-cta { font:400 15px/1 var(--font-body); color:#fdfcfa; border-bottom:1.5px solid rgba(253,252,250,.6); padding-bottom:3px; } /* Board/diagram images — framed; grayscale at rest, real color on hover (§4) */ .fn-board { display:block; width:100%; height:auto; border:1px solid var(--hairline); border-radius:2px; background:var(--paper); filter:grayscale(1); transition:filter .55s var(--ease); } figure:hover .fn-board, .fn-board:hover { filter:none; } /* Inline Design-Thinking stage line (Elevance ref) */ .fn-dt-line { margin:0 0 22px; font:400 15px/1.7 var(--font-body); color:var(--ink); letter-spacing:.02em; } .fn-chap-media-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; } /* Outcomes — four navy impact figures */ .fn-out-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--rule); } .fn-out-grid > div { padding:28px 22px; border-right:1px solid var(--hairline); } .fn-out-grid > div:first-child { padding-left:0; } .fn-out-grid > div:last-child { padding-right:0; border-right:none; } .fn-out-value { margin:0 0 8px; font:800 58px/.85 var(--font-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--navy); } .fn-out-value .fn-out-suffix { font-size:28px; } .fn-out-label { margin:0 0 8px; font:600 10px/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); } .fn-out-desc { margin:0; font:400 14px/1.5 var(--font-body); color:var(--faint-2); } /* Next case */ .fn-nextcase { display:flex; align-items:center; justify-content:space-between; gap:24px; text-decoration:none; padding-top:38px; padding-bottom:80px; } .fn-nextcase .fn-nextcase-eyebrow { margin:0 0 10px; font:600 10px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--faint); } .fn-nextcase h2 { margin:0; font:800 36px/1.05 var(--font-display); letter-spacing:-.02em; color:var(--ink); max-width:22ch; } .fn-nextcase h2 em { font-style:normal; color:var(--navy); } .fn-nextcase .fn-nextcase-arr { font:400 42px/1 var(--font-display); color:var(--navy); display:inline-block; transition:transform .3s var(--ease); } .fn-nextcase:hover .fn-nextcase-arr { transform:translateX(7px); } @media (max-width:920px) { .fn-masthead, .fn-cs-two, .fn-meta-rail, .fn-role-grid, .fn-out-grid, .fn-img3, .fn-chap-media-2 { grid-template-columns:1fr; } .fn-cs-section { padding:48px 0; } .fn-masthead { gap:32px; } .fn-masthead h1 { font-size:40px; } .fn-cs-hero { aspect-ratio:3/2; max-width:480px; } .fn-cs-two { gap:28px; } .fn-cs-label { position:static; } .fn-meta-rail > div, .fn-role-grid > div, .fn-out-grid > div { border-right:none; border-bottom:1px solid var(--hairline); padding-left:0; padding-right:0; } .fn-meta-rail > div:last-child, .fn-role-grid > div:last-child, .fn-out-grid > div:last-child { border-bottom:none; } .fn-chap { grid-template-columns:auto 1fr; gap:6px 18px; } .fn-chap-num { font-size:30px; } .fn-nextcase { flex-direction:column; align-items:flex-start; gap:18px; padding-bottom:56px; } .fn-nextcase h2 { font-size:28px; } } /* ===================== CASE STUDY — additional components ===================== */ /* Meta-rail proportion variant (wide first cell) */ .fn-meta-rail--wide-first { grid-template-columns:1.6fr .8fr 1.1fr 1.3fr; } /* Author note (left navy rule) */ .fn-cs-note { border-left:2px solid var(--navy); padding:4px 0 4px 24px; max-width:80ch; margin:32px 0 8px; } .fn-cs-note-tag { margin:0 0 6px; font:600 10px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--navy); } .fn-cs-note p:not(.fn-cs-note-tag) { margin:0; font:400 16px/1.6 var(--font-body); font-style:normal; color:var(--muted); } /* Phase stack (ordered overview of process phases) */ .fn-phase-stack { display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0; padding:0; border-top:2px solid var(--rule); } .fn-phase-stack li { padding:22px; border-right:1px solid var(--hairline); } .fn-phase-stack li:first-child { padding-left:0; } .fn-phase-stack li:last-child { padding-right:0; border-right:none; } .fn-phase-num { display:block; font:800 30px/1 var(--font-display); color:var(--navy); margin-bottom:12px; } .fn-phase-title { margin:0 0 5px; font:600 11px/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); } .fn-phase-desc { margin:0; font:400 14px/1.5 var(--font-body); color:var(--faint-2); } /* Operating-cadence list (when / what rows) */ .fn-cadence { margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); } .fn-cadence li { display:grid; grid-template-columns:180px 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--hairline); } .fn-cadence-when { font:600 10px/1.5 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); } .fn-cadence-what { font:400 15.5px/1.55 var(--font-body); color:var(--body); } .fn-cadence-what strong { display:block; margin-bottom:2px; font-weight:600; color:var(--ink); } /* Pull-quote (centered) */ .fn-pullquote { margin:0 auto; max-width:900px; text-align:center; border-top:2px solid var(--rule); border-bottom:2px solid var(--rule); padding:40px 0; } .fn-pullquote p { margin:0 0 18px; font:500 34px/1.22 var(--font-display); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; } .fn-pullquote footer { font:600 10px/1 var(--font-mono); letter-spacing:.15em; text-transform:uppercase; color:var(--faint); } /* Framed video — grayscale at rest, real color on hover OR while playing (the .is-playing class is toggled by cs-lightbox.js so a playing clip stays in color even if the pointer leaves the frame). Matches the site image treatment (§4). */ .fn-cs-video { position:relative; aspect-ratio:16/9; border:1px solid var(--hairline); border-radius:2px; overflow:hidden; background:var(--ink); } .fn-cs-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); transition:filter .55s var(--ease); } .fn-cs-video:hover video, .fn-cs-video.is-playing video { filter:none; } /* Supporting-artifact links */ .fn-cs-artifacts-label { margin:24px 0 0; font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .fn-cs-artifacts { margin:10px 0 0; padding:0; list-style:none; } .fn-cs-artifacts li { border-top:1px solid var(--hairline); } .fn-cs-artifacts li:last-child { border-bottom:1px solid var(--hairline); } .fn-cs-artifacts a { display:flex; align-items:center; justify-content:space-between; padding:11px 0; text-decoration:none; font:400 15.5px/1.4 var(--font-body); color:var(--ink); transition:color .25s var(--ease); } .fn-cs-artifacts a::after { content:"\2197"; color:var(--navy); } .fn-cs-artifacts a:hover { color:var(--navy); } @media (max-width:920px) { .fn-meta-rail--wide-first { grid-template-columns:1fr; } .fn-phase-stack { grid-template-columns:1fr 1fr; } .fn-phase-stack li { border-right:none; border-bottom:1px solid var(--hairline); padding-left:0; } .fn-cadence li { grid-template-columns:1fr; gap:4px; } .fn-pullquote p { font-size:25px; } } /* Hero: keep the 4/5 plate, fit a landscape image to width with padding (no crop), on the navy duotone field — navy overlay via grayscale + screen blend. */ .fn-cs-hero.fn-cs-hero--matte { background:var(--navy); display:flex; align-items:center; justify-content:center; padding:22px; } .fn-cs-hero.fn-cs-hero--matte img { position:static; inset:auto; width:100%; height:auto; max-height:100%; object-fit:contain; mix-blend-mode:screen; opacity:1; filter:grayscale(1) contrast(1.2) brightness(1); } /* Portrait media (e.g. phone-screen demo video) — match the frame to the clip, centered */ .fn-chap-media--portrait .fn-cs-video { aspect-ratio:1280 / 2543; max-width:340px; margin-left:auto; margin-right:auto; } .fn-chap-media--portrait .fn-cs-video video { object-fit:contain; } .fn-chap-media--portrait figcaption { text-align:center; } /* ===================== EYEBROWS (restored per Mono reference audit) ========= The Mono references bring kickers, § section numbers, Fig. annotations, and the lead-plate category line back. Only the 3-up work-card eyebrows stay hidden — the reference cards carry no category line. */ body.fn .fn-plate-eyebrow { display:none; } /* ===================== CASE STUDY — Uppd components ===================== */ /* Italic serif descriptive caption (vs the mono short-label figcaptions) */ .fn-cap { margin:10px 0 0; font:400 13px/1.5 var(--font-body); font-style:normal; color:var(--faint-2); } /* Generic body figure spacing */ .fn-cs-fig { margin:28px 0 0; } /* In-body subheadings (e.g. Outcomes / The wind-down) */ .fn-cs-body h3 { margin:30px 0 12px; font:700 22px/1.2 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-cs-body > h3:first-child { margin-top:0; } /* Zoomable framed image → lightbox (cs-lightbox.js targets .cs-zoomable) */ body.fn .cs-zoomable { display:block; width:100%; margin:0; padding:0; border:0; background:none; cursor:zoom-in; position:relative; } body.fn .cs-zoomable img { display:block; width:100%; height:auto; border:1px solid var(--hairline); border-radius:2px; background:var(--paper); } body.fn .cs-zoomable-badge { position:absolute; right:12px; bottom:12px; width:30px; height:30px; border-radius:50%; background:rgba(17,17,17,.92); color:#FFFFFF; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s var(--ease); } body.fn .cs-zoomable-badge svg { width:15px; height:15px; } body.fn .cs-zoomable:hover .cs-zoomable-badge, body.fn .cs-zoomable:focus-visible .cs-zoomable-badge { opacity:1; } /* Press-clip thumbnail under a sticky section label */ .fn-cs-label-media { margin:18px 0 0; } /* Lightbox overlay (cs-lightbox.js) — ported from styles.css, neutral palette. Needed here because promoted case pages load fieldnotes.css only. */ body.fn .cs-lightbox { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:48px; background:rgba(17,17,17,.84); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .25s var(--ease); } body.fn .cs-lightbox.is-open { opacity:1; pointer-events:auto; } body.fn .cs-lightbox-content { position:relative; max-width:100%; max-height:100%; } body.fn .cs-lightbox-content img, body.fn .cs-lightbox-content video { display:block; max-width:100%; max-height:calc(100vh - 96px); height:auto; width:auto; border-radius:2px; background:var(--paper); box-shadow:0 20px 60px rgba(0,0,0,.55); transform-origin:center center; will-change:transform; } body.fn .cs-lightbox-content video { background:var(--ink); } /* Imagery expanded off a dark plate keeps the site's charcoal behind any transparent regions (set per-origin by cs-lightbox.js). */ body.fn .cs-lightbox--plate .cs-lightbox-content img { background:var(--ink); } body.fn .cs-lightbox-content img[hidden], body.fn .cs-lightbox-content video[hidden] { display:none; } body.fn .cs-lightbox-close { position:absolute; top:-16px; right:-16px; width:40px; height:40px; border-radius:50%; background:var(--paper); border:1px solid var(--hairline); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.35); padding:0; opacity:0; transform:scale(.85); transition:opacity .2s var(--ease), transform .2s var(--ease); } body.fn .cs-lightbox.is-open .cs-lightbox-close { opacity:1; transform:scale(1); transition:opacity .2s var(--ease) .32s, transform .2s var(--ease) .32s; } body.fn .cs-lightbox-close svg { width:16px; height:16px; } body.fn.cs-lightbox-open { overflow:hidden; } /* Reflections closing paragraph */ .fn-cs-closing { margin:44px 0 0; font:400 18px/1.75 var(--font-body); color:var(--muted); max-width:74ch; } /* ===================== CASE STUDY — Prop Firm Match components ===================== */ /* Meta-rail variant: wide Tools column; 2-col overview role grid */ .fn-meta-rail--wide-tools { grid-template-columns:.8fr 2fr .7fr 1.1fr; } .fn-role-grid--two { grid-template-columns:1fr 1fr; } /* Inline navy mono number prefix inside a problem subheading */ .fn-num { color:var(--navy); font:600 13px/1 var(--font-mono); letter-spacing:.1em; } /* Before / after compare pairs (clean framed UI screenshots) */ .fn-compare { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:28px 0 0; } .fn-compare--three { grid-template-columns:repeat(3,1fr); } .fn-compare-item { margin:0; } .fn-compare-label { margin:0 0 10px; font:600 9.5px/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .fn-compare-label--prototype { color:var(--navy); } .fn-compare-img { border:1px solid var(--hairline); border-radius:2px; overflow:hidden; background:var(--paper); } .fn-compare-img img { display:block; width:100%; height:auto; filter:grayscale(1); transition:filter .55s var(--ease); } .fn-compare-img:hover img { filter:none; } .fn-compare-caption { margin:10px 0 0; font:400 13px/1.5 var(--font-body); font-style:normal; color:var(--faint-2); } /* Narrow centered standalone figure (e.g. the signup-error screenshot) */ .fn-cs-fig--narrow { max-width:460px; margin-left:auto; margin-right:auto; } /* Personas (three ruled columns) */ .fn-personas { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); margin:24px 0 0; } .fn-personas > div { padding:22px 24px; border-right:1px solid var(--hairline); } .fn-personas > div:first-child { padding-left:0; } .fn-personas > div:last-child { padding-right:0; border-right:none; } .fn-persona-name { margin:0 0 4px; font:700 19px/1.2 var(--font-display); letter-spacing:-.02em; color:var(--ink); } .fn-persona-tag { margin:0 0 12px; font:600 9px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--navy); } .fn-persona p { margin:0 0 12px; font:400 14px/1.55 var(--font-body); color:var(--body); } .fn-persona blockquote { margin:0; font:400 14px/1.5 var(--font-body); font-style:normal; color:var(--faint-2); } /* Before / after metrics table */ .fn-metrics-table { width:100%; border-collapse:collapse; margin:0 0 14px; font-variant-numeric:tabular-nums; } .fn-metrics-table th { text-align:left; padding:11px 8px; font:600 9px/1.4 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .fn-metrics-table th:first-child { padding-left:0; } .fn-metrics-table th:last-child { padding-right:0; } .fn-metrics-table td { padding:12px 8px; font:400 15px/1.4 var(--font-body); border-bottom:1px solid var(--hairline); } .fn-metrics-table td:first-child { padding-left:0; color:var(--ink); } /* ============================================================ MONOCHROME MODE — additive, color-only override layer Activated by `html.theme-mono` (see js/theme-toggle.js + the early inline script in index.html's ). Strips the navy accent to a neutral black/white/gray system, mapped by role — design_handoff_monochrome/README.md §1 — and lets work imagery bloom into real color on hover (§2). Every rule below is scoped under `html.theme-mono`, so the default colored site is provably untouched unless this class is present. SCOPE (this pass): index.html only. Selectors that exist only on case-study markup (.fn-cs-hero, .fn-chap-num, .fn-figma-fallback, .cs-zoomable-badge, etc.) are deferred to that review pass. ============================================================ */ /* ---- §1a token override — cascades through every rule already reading var(--paper/--ink/--navy/etc.), including the duotone plate backgrounds (.fn-duo, .fn-plate-img, .fn-culture all use background:var(--navy)) so their at-rest screen-blend tint clears to true neutral gray automatically once --navy itself is neutral — no extra per-image override needed for that. ---- */ html.theme-mono body.fn { --paper:#FFFFFF; --paper-tint:#F4F4F2; --paper-tint-2:#F4F4F2; --band:#F4F4F2; --ink:#111111; --body:#2E2E2E; --muted:#4A4A4A; --faint:#8A8A8A; --faint-2:#777777; --navy:#111111; --footer:#111111; --hairline:#E6E6E3; --rule:#111111; } /* ---- §1b stray-hue sweep — literal rgba()/hex values that never referenced a token (gradients, glows, shadows, on-dark-band opacity text), so the §1a override can't reach them. Matched by role/lightness per the README table, alpha preserved exactly. ---- */ html.theme-mono .fn-portrait::before { background:radial-gradient(120% 90% at 50% 0%, rgba(120,120,118,.5), rgba(17,17,17,0) 60%); } /*