/* AGNI — red-light neumorphism + ink smoke / ember field (Claude Design turns 6a, 7a, 7b, 5b) Theme is picked by ; hero field by data-field="ink|ember". */ :root { /* ground + type (dark) */ --bg: #0a0708; --ink: #f3ece9; --ink-rgb: 243, 236, 233; --ink-86: rgba(var(--ink-rgb), .86); --ink-78: rgba(var(--ink-rgb), .78); --ink-72: rgba(var(--ink-rgb), .72); --ink-66: rgba(var(--ink-rgb), .66); --ink-60: rgba(var(--ink-rgb), .6); --ink-50: rgba(var(--ink-rgb), .5); --rule: rgba(var(--ink-rgb), .1); --chip-rule: rgba(var(--ink-rgb), .16); --chip-ink: var(--ink-72); --artefact-rule: rgba(var(--ink-rgb), .22); --artefact-ink: var(--ink-50); --role-ink: var(--ink-60); /* reds */ --crimson: #dc143c; --hot: #ff4d6a; --rose: #ff8a9a; --dim-red: #c9535f; --h1: var(--ink); --h1-em: var(--hot); --brand-ink: var(--ink); --nav-ink: var(--ink-72); --nav-hot: var(--hot); --status-ink: var(--dim-red); --lede-ink: rgba(var(--ink-rgb), .84); --hero-text-shadow: 0 2px 40px rgba(10, 7, 8, .9); --hero-lede-shadow: 0 1px 24px rgba(10, 7, 8, .9); --hero-shade: linear-gradient(rgba(10, 7, 8, .55), rgba(10, 7, 8, 0) 26%, rgba(10, 7, 8, 0) 64%, rgba(10, 7, 8, .7) 86%, #0a0708), linear-gradient(90deg, rgba(10, 7, 8, .72), rgba(10, 7, 8, .3) 46%, rgba(10, 7, 8, 0) 68%); --hero-fallback: radial-gradient(55% 60% at 68% 42%, rgba(150, 12, 40, .55), rgba(150, 12, 40, 0) 70%), radial-gradient(40% 50% at 82% 70%, rgba(80, 8, 22, .5), rgba(80, 8, 22, 0) 70%); --ember-glow: 0 0 16px 4px rgba(220, 20, 60, .6); /* slabs */ --slab-dark: linear-gradient(180deg, #140c0e, #0d0809); --shadow-dark: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 -1px 0 rgba(0, 0, 0, .6) inset, 0 40px 80px -30px rgba(220, 20, 60, .55); --slab-red: linear-gradient(180deg, #5a0a18, #3a0511 60%, #2a040c); --shadow-red: 0 1px 0 rgba(255, 120, 140, .18) inset, 0 -1px 0 rgba(0, 0, 0, .6) inset, 0 40px 80px -30px rgba(220, 20, 60, .6); --slab-cta: linear-gradient(180deg, #6a0c1c, #3a0511); --shadow-cta: 0 1px 0 rgba(255, 120, 140, .2) inset, 0 50px 100px -40px rgba(220, 20, 60, .75); --seam-glow: 0 0 30px 10px rgba(220, 20, 60, .75), 0 0 90px 40px rgba(220, 20, 60, .35); /* buttons */ --btn-bg: #120b0d; --btn-ink: var(--hot); --btn-ink-hover: #ff6b84; --btn-shadow: 0 22px 50px -14px rgba(220, 20, 60, .7), 0 -1px 0 rgba(255, 255, 255, .06) inset, 0 1px 0 rgba(255, 255, 255, .03); --btn-shadow-hover: 0 28px 60px -12px rgba(220, 20, 60, .9), 0 -1px 0 rgba(255, 255, 255, .08) inset, 0 1px 0 rgba(255, 255, 255, .04); --btn2-bg: #0d0809; --btn2-ink: var(--hot); --btn2-shadow: 0 22px 50px -14px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06) inset; --btn2-shadow-hover: 0 28px 60px -12px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .08) inset; /* on red slabs the type is always cream */ --on-red: #f3ece9; --on-red-86: rgba(243, 236, 233, .86); --on-red-78: rgba(243, 236, 233, .78); --on-red-rule: rgba(255, 255, 255, .12); --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --serif: Spectral, Georgia, "Times New Roman", serif; --gutter: clamp(20px, 5.8vw, 72px); --slab-pad-y: clamp(30px, 4vw, 48px); --slab-pad-x: clamp(24px, 4.2vw, 52px); --radius: clamp(26px, 3.5vw, 44px); --max: 1240px; } /* ---- light theme (turn 7b / 5b) ---- */ [data-theme="light"] { --bg: #f6f1eb; --ink: #1a0f12; --ink-rgb: 26, 15, 18; --ink-86: #2a1a1e; --ink-78: #4a3236; --ink-72: #4a3236; --ink-66: #6e3a44; --ink-60: #6e3a44; --ink-50: #6e3a44; --rule: rgba(90, 20, 35, .14); --chip-rule: rgba(90, 20, 35, .22); --chip-ink: #4a3236; --artefact-rule: rgba(90, 20, 35, .3); --artefact-ink: #6e3a44; --role-ink: #6e3a44; --hot: #8a0f26; --dim-red: #8a0f26; --h1: #8a0f26; --h1-em: #1a0f12; --brand-ink: #8a0f26; --nav-ink: #3a2226; --nav-hot: #8a0f26; --status-ink: #5a0818; --lede-ink: #2a1a1e; --hero-text-shadow: 0 0 28px rgba(246, 241, 235, .9), 0 0 8px rgba(246, 241, 235, .8); --hero-lede-shadow: 0 0 14px rgba(246, 241, 235, .95); --hero-shade: linear-gradient(rgba(246, 241, 235, .35), rgba(246, 241, 235, 0) 20%, rgba(246, 241, 235, 0) 58%, rgba(246, 241, 235, .55) 84%, rgba(246, 241, 235, .9)), linear-gradient(90deg, rgba(246, 241, 235, .72), rgba(246, 241, 235, .5) 34%, rgba(246, 241, 235, .18) 54%, rgba(246, 241, 235, 0) 68%); --hero-fallback: radial-gradient(55% 60% at 68% 42%, rgba(220, 20, 60, .28), rgba(220, 20, 60, 0) 70%), radial-gradient(40% 50% at 82% 70%, rgba(138, 15, 38, .22), rgba(138, 15, 38, 0) 70%); --ember-glow: 0 0 12px 2px rgba(138, 15, 38, .35); --slab-dark: linear-gradient(180deg, #fdfbf7, #f3ede6); --shadow-dark: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 -1px 0 rgba(90, 20, 35, .14) inset, 0 40px 80px -30px rgba(220, 20, 60, .45), 0 2px 6px rgba(90, 20, 35, .06); --slab-red: linear-gradient(180deg, #6a0c1c, #4a0713 60%, #3a0511); --shadow-red: 0 1px 0 rgba(255, 140, 160, .3) inset, 0 -1px 0 rgba(0, 0, 0, .5) inset, 0 40px 80px -30px rgba(220, 20, 60, .6); --slab-cta: linear-gradient(180deg, #7a0e20, #4a0713); --shadow-cta: 0 1px 0 rgba(255, 140, 160, .3) inset, 0 50px 100px -40px rgba(220, 20, 60, .7); --seam-glow: 0 0 30px 10px rgba(220, 20, 60, .55), 0 0 90px 40px rgba(220, 20, 60, .22); --btn-bg: #fbf8f3; --btn-ink: #8a0f26; --btn-ink-hover: #a30f2d; --btn-shadow: 0 22px 50px -14px rgba(220, 20, 60, .55), 0 1px 0 rgba(255, 255, 255, .9) inset, 0 -1px 0 rgba(90, 20, 35, .12) inset; --btn-shadow-hover: 0 28px 60px -12px rgba(220, 20, 60, .7), 0 1px 0 rgba(255, 255, 255, .95) inset, 0 -1px 0 rgba(90, 20, 35, .14) inset; --btn2-bg: #fbf8f3; --btn2-ink: #8a0f26; --btn2-shadow: 0 22px 50px -14px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9) inset; --btn2-shadow-hover: 0 28px 60px -12px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .95) inset; --on-red: #f6f1eb; --on-red-86: rgba(246, 241, 235, .88); --on-red-78: rgba(246, 241, 235, .8); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, ul, ol, dl, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- type utilities ---- */ .eyebrow { font: 500 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--dim-red); } .eyebrow.rose { color: var(--rose); } .brand { display: inline-flex; align-items: center; gap: 12px; font: 500 12px var(--mono); letter-spacing: .44em; text-transform: uppercase; color: var(--brand-ink); } .mark { width: 28px; height: 28px; display: none; border-radius: 6px; } [data-theme="dark"] .mark-dark { display: block; mix-blend-mode: screen; } [data-theme="light"] .mark-light { display: block; mix-blend-mode: multiply; } /* ---- hero ---- */ .hero { position: relative; min-height: clamp(640px, 100svh, 1040px); overflow: hidden; background: var(--bg); display: flex; } .hero-fallback { position: absolute; inset: 0; z-index: 0; background: var(--hero-fallback); } .gl .hero-fallback { display: none; } .hero-field, .hero-ink { position: absolute; inset: 0; z-index: 1; display: block; } .hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--hero-shade); } .hero-inner { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding-top: 38px; padding-bottom: clamp(48px, 8vh, 84px); gap: clamp(64px, 10vh, 140px); } .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-links { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.7vw, 34px); font: 500 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--nav-ink); } .nav-links a { transition: color .25s; } .nav-links a:hover { color: var(--ink); } .nav-links .nav-hot, .nav-links .nav-hot:hover { color: var(--nav-hot); } .status { display: flex; align-items: center; gap: 12px; font: 500 10px var(--mono); letter-spacing: .4em; text-transform: uppercase; color: var(--status-ink); margin-bottom: 30px; text-shadow: var(--hero-lede-shadow); } .ember { width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: var(--ember-glow); animation: emberpulse 2.6s infinite; flex: none; } [data-theme="dark"] .ember { background: var(--crimson); } .hero h1 { max-width: 900px; font-family: var(--serif); font-weight: 300; font-size: clamp(42px, 7.4vw, 92px); line-height: 1; letter-spacing: -.035em; color: var(--h1); text-shadow: var(--hero-text-shadow); text-wrap: balance; } .hero h1 em { font-style: normal; font-weight: 300; color: var(--h1-em); } .lede { margin-top: 34px; max-width: 620px; font-size: clamp(16px, 1.45vw, 18px); line-height: 1.65; color: var(--lede-ink); text-shadow: var(--hero-lede-shadow); } .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; margin-top: 44px; } .capacity { font: 500 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-66); } /* ---- buttons ---- */ .cta { display: inline-block; padding: 19px 34px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font: 500 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--btn-shadow); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, letter-spacing .35s, color .35s; } [data-theme="light"] .cta { font-weight: 600; } .cta:hover { transform: translateY(-2px); letter-spacing: .26em; color: var(--btn-ink-hover); box-shadow: var(--btn-shadow-hover); } .cta:active { transform: translateY(0); } .cta:focus-visible, .nav a:focus-visible, .footer a:focus-visible, .variants a:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; } .cta-dark { background: var(--btn2-bg); color: var(--btn2-ink); box-shadow: var(--btn2-shadow); } .cta-dark:hover { box-shadow: var(--btn2-shadow-hover); } /* ---- slabs ---- */ .stack { display: flex; flex-direction: column; position: relative; } #practice { padding-top: 24px; } .slab { position: relative; z-index: 1; border-radius: var(--radius); padding: var(--slab-pad-y) var(--slab-pad-x); } .slab-dark { background: var(--slab-dark); box-shadow: var(--shadow-dark); } .slab-red, .slab-cta { --ink: var(--on-red); --ink-86: var(--on-red-86); --ink-78: var(--on-red-78); --dim-red: var(--rose); color: var(--on-red); } .slab-red { background: var(--slab-red); box-shadow: var(--shadow-red); } .two-col { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 4vw, 48px); } .slab-title { margin-top: 16px; font-weight: 300; font-size: clamp(26px, 2.75vw, 34px); line-height: 1.15; color: var(--ink); text-wrap: balance; } .slab-note { margin-top: 18px; max-width: 420px; font-size: 16px; line-height: 1.65; color: var(--ink-78); } .slab-body { display: flex; flex-direction: column; gap: 18px; font-size: clamp(16px, 1.4vw, 17px); line-height: 1.7; color: var(--ink-78); } .slab-body.end { justify-content: flex-end; } .seam { position: relative; z-index: 0; height: 56px; display: flex; align-items: center; justify-content: center; } .seam i { display: block; width: 78%; height: 3px; border-radius: 3px; background: var(--crimson); box-shadow: var(--seam-glow); } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); } .practice-grid h3 { margin-top: 16px; font-weight: 300; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; color: var(--ink); } .practice-grid p { margin-top: 14px; font-size: 15px; line-height: 1.7; color: var(--ink-86); } /* engagement phases */ .phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.3vw, 40px); margin-top: 34px; } .phases h3 { margin-top: 12px; font-weight: 300; font-size: clamp(28px, 2.75vw, 34px); line-height: 1.15; color: var(--ink); } .phases ul { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.55; color: var(--ink-86); } .phases ul li { padding-left: 14px; position: relative; } .phases ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 4px; height: 4px; border-radius: 50%; background: var(--dim-red); } /* terms */ .terms { display: flex; flex-direction: column; font-size: 16px; line-height: 1.65; color: var(--ink-86); } .terms p { padding: 16px 0; border-bottom: 1px solid var(--on-red-rule); } .terms p:first-child { padding-top: 0; } .terms p:last-child { padding-bottom: 0; border-bottom: 0; } /* chips */ .chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 44px 8px 0; } .chips li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--chip-rule); font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--chip-ink); transition: border-color .25s, color .25s, background .25s; } .chips li:hover { border-color: var(--crimson); color: var(--hot); background: rgba(220, 20, 60, .06); } /* ---- records ---- */ .records { padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 96px); } .quote { margin-top: 34px; max-width: 900px; font-style: italic; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.28; color: var(--ink); } .people { margin-top: clamp(48px, 6vw, 72px); } .person h3 { font-weight: 300; font-size: clamp(26px, 2.4vw, 30px); line-height: 1.2; color: var(--ink); } .role { margin-top: 10px; font: 500 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--role-ink); } .artefact { margin-top: 28px; min-height: 240px; border-radius: 28px; border: 1px dashed var(--artefact-rule); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font: 500 10px/1.8 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--artefact-ink); transition: border-color .3s, color .3s; } .person:hover .artefact { border-color: rgba(220, 20, 60, .55); color: var(--ink-72); } /* ---- enquire ---- */ #enquire { padding-bottom: 72px; } .slab-cta { background: var(--slab-cta); box-shadow: var(--shadow-cta); padding: clamp(40px, 5.2vw, 64px) clamp(28px, 4.5vw, 56px); display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; } .slab-cta h2 { font-weight: 300; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; color: var(--on-red); } /* ---- footer ---- */ .footer { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; padding-top: 40px; padding-bottom: 96px; border-top: 1px solid var(--rule); } .footer-line, .footer-links { font: 500 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-60); } .footer-links { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; } .footer-links a:hover { color: var(--hot); } .footer .footer-line:last-child { flex-basis: 100%; } /* ---- variant switcher (review aid; remove for launch) ---- */ .variants { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: var(--btn-bg); box-shadow: var(--btn-shadow); font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; } .variants a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 10px; border-radius: 999px; color: var(--ink-66); transition: color .2s, background .2s; } .variants a:hover { color: var(--btn-ink); } .variants a[aria-current="true"] { background: var(--crimson); color: #fff; } .variants-all { padding: 0 14px; color: var(--btn-ink); } /* ---- motion ---- */ @keyframes emberpulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ember { animation: none; opacity: 1; } .cta, .chips li, .artefact, .nav-links a, .variants a { transition: none; } } /* ---- responsive ---- */ @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } .phases { grid-template-columns: 1fr; gap: 36px; } .slab-cta { flex-direction: column; align-items: flex-start; gap: 32px; } .slab-cta h2 br { display: none; } } @media (max-width: 640px) { .hero { min-height: min(100svh, 900px); } .hero-inner { padding-top: 28px; } .nav-links { gap: 16px; letter-spacing: .18em; } .hero h1 { font-size: clamp(38px, 11.5vw, 56px); } .lede { margin-top: 26px; } .hero-actions { margin-top: 34px; gap: 18px; } .grid-2 { grid-template-columns: 1fr; } .artefact { min-height: 200px; } .footer-links { margin-left: 0; } .variants { right: 12px; bottom: 12px; padding: 4px; gap: 2px; } .variants a { min-width: 28px; height: 28px; padding: 0 8px; } .variants-all { padding: 0 10px; } } /* hide the review switcher when the page is captured for a link preview */ .og .variants { display: none; }