/* ============================================================ INGEX site stylesheet Type: IBM Plex Sans + IBM Plex Mono (OFL, no copyright issues) Palette: warm paper, deep ink, INGEX brand red accent ============================================================ */ :root { /* Clean warm off-white, near-black ink, INGEX brand red accent */ --paper: #F8F6EF; /* warm off-white — restful, premium, NOT cream */ --paper-2: #EFEDE3; /* one soft step deeper, used for very few moments */ --paper-3: #E2DFD2; --ink: #0E1E33; /* INGEX brand dark navy — used as near-black */ --ink-2: #1A2A40; --muted: #6A6E78; --muted-2: #939AA5; --hairline: #D7D2C4; --hairline-2:#C2BBA5; /* INGEX brand red — used as the single accent. */ --accent: #E51F25; --accent-2: #B0141C; --accent-tint:#FBE4E5; --ink-blue: #0E1E33; --warning: #9A2A1E; --whatsapp: #25D366; --max: 1280px; --gutter: clamp(20px, 4vw, 56px); --radius: 2px; --serif: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } * { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-size: 16px; line-height: 1.55; font-weight: 400; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -0.018em; margin: 0; color: var(--ink); text-wrap: balance; } h1 { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.04; font-weight: 500; letter-spacing: -0.028em; } h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; } h3 { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.28; font-weight: 500; } h4 { font-size: 17px; line-height: 1.35; font-weight: 500; } p { margin: 0; text-wrap: pretty; } .italic { font-style: normal; } /* italic styling intentionally disabled — too editorial */ .serif { font-family: var(--sans); font-weight: 500; letter-spacing: -0.015em; } .mono { font-family: var(--mono); font-weight: 400; } /* ---------- Scroll-reveal animations ---------- Defensive pattern: elements are visible by DEFAULT (no-JS, slow JS, blocked CDN — content still shows). Only when animations.js confirms it's running by adding `js` class on do the elements start hidden, then fade in via the IntersectionObserver. */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } html.js .reveal.is-in { opacity: 1; transform: translateY(0); } .reveal--lg { transform: translateY(40px); transition-duration: 1.1s; } .reveal--sm { transform: translateY(12px); transition-duration: .7s; } .reveal-stagger > * { opacity: 1; transform: none; } html.js .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } html.js .reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); } .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; } .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; } .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 400ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Hero number count animation ---------- */ .count { display: inline-block; font-variant-numeric: tabular-nums; } /* ---------- Layout primitives ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); } .section { padding-block: clamp(64px, 9vw, 128px); border-top: 1px solid var(--hairline); } .section--tight { padding-block: clamp(48px, 6vw, 88px); } .section--dark { background: var(--ink); color: var(--paper-3); border-top-color: var(--ink-2); position: relative; overflow: hidden; } /* Subtle ambient glow — adds depth without distraction */ .section--dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%), radial-gradient(circle at -5% 110%, rgba(255,255,255,0.04), transparent 50%); pointer-events: none; z-index: 0; } .section--dark > * { position: relative; z-index: 1; } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); } .section--dark h2 { color: #FFFFFF; } .section--dark p { color: var(--paper-3); } .section--dark a:hover { color: var(--accent); } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--muted); } .section--dark .eyebrow { color: rgba(255,255,255,0.55); } .section--dark .eyebrow::before { background: var(--accent) !important; } .section--dark .lede { color: var(--paper-3); } .section--dark .muted { color: rgba(255,255,255,0.6); } .section--dark .mono { color: rgba(255,255,255,0.5); } .section--dark .tag { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); background: transparent; } /* Elevated cells / grids inside dark sections — overrides inline backgrounds */ .section--dark [style*="background:var(--ink-2)"] { background: rgba(255,255,255,0.06) !important; } .section--dark [style*="background:var(--ink)"]:not([class*="btn"]) { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; } .section--dark [style*="border:1px solid var(--ink-2)"] { border-color: rgba(255,255,255,0.08) !important; } /* Ghost button on dark sections — make border crisp */ .section--dark .btn--ghost { border-color: rgba(255,255,255,0.4) !important; color: var(--paper) !important; } .section--dark .btn--ghost:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--paper) !important; } /* Solid button on dark sections — invert so it stands out */ .section--dark .btn:not(.btn--ghost):not(.btn--whatsapp) { background: var(--paper); color: var(--ink); border-color: var(--paper); } .section--dark .btn:not(.btn--ghost):not(.btn--whatsapp):hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--paper) !important; } .lede { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.35; color: var(--ink-2); text-wrap: pretty; } .muted { color: var(--muted); } /* ---------- Header / nav ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter: saturate(120%) blur(10px); -webkit-backdrop-filter: saturate(120%) blur(10px); border-bottom: 1px solid var(--hairline); } .topbar__inner { max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; color: var(--ink); } .brand__mark { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid var(--ink); border-radius: 999px; } .brand__mark::after { content: ""; width: 8px; height: 8px; background: var(--ink); border-radius: 999px; } .brand small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--hairline); padding-left: 10px; margin-left: 2px; } .nav { display: flex; gap: 28px; justify-content: center; font-size: 14px; } .nav a { color: var(--ink-2); position: relative; padding-block: 6px; } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); } .nav__cta { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; } .nav__cta .phone { font-family: var(--mono); color: var(--muted); font-size: 12px; letter-spacing: 0.04em; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 999px; cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease; } .btn:hover { transform: translateY(-1px); color: var(--paper); background: var(--accent); border-color: var(--accent); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #0a2412; } .btn--whatsapp:hover { background: #1ebe5a; border-color: #1ebe5a; color: #0a2412; } .btn--sm { padding: 9px 14px; font-size: 13px; } .btn .arrow { transition: transform .2s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ---------- Hairline / divider ---------- */ .hr { height: 1px; background: var(--hairline); border: 0; } .vr { width: 1px; background: var(--hairline); align-self: stretch; } /* ---------- Cards ---------- */ .card { border: 1px solid var(--hairline); background: var(--paper); padding: 28px; display: flex; flex-direction: column; gap: 14px; } .card--ink { background: var(--ink); border-color: var(--ink-2); color: var(--paper); } .card--ink h3, .card--ink h4 { color: var(--paper); } /* ---------- Stat ---------- */ .stat__num { font-family: var(--sans); font-weight: 300; font-size: clamp(44px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; } .stat__num sub { font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em; color: var(--muted); margin-left: 6px; vertical-align: baseline; bottom: 0; } .section--dark .stat__num { color: var(--paper); } .section--dark .stat__num sub { color: var(--paper-3); } .stat__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; } .section--dark .stat__label { color: var(--paper-3); } /* ---------- Footer ---------- */ .footer { background: var(--ink); color: var(--paper-3); padding-block: 72px 28px; } .footer h4 { color: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin-bottom: 14px; } .footer a { color: var(--paper-3); } .footer a:hover { color: var(--paper); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; } .footer__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink-2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--muted-2); } /* ---------- Sparkline / microchart ---------- */ .spark { display:block; width:100%; height:36px; margin-top: 12px; overflow:visible; } .spark path.line { fill:none; stroke: var(--accent); stroke-width: 1.5; } .spark path.area { fill: var(--accent); opacity: 0.12; stroke:none; } .spark .bar { fill: var(--accent); } .spark .bar.dim { fill: var(--ink-2); opacity: .35; } .spark .axis { stroke: var(--hairline); stroke-width: 0.5; } .section--dark .spark .axis { stroke: var(--ink-2); } .section--dark .spark .bar.dim { fill: var(--paper-3); opacity: .25; } /* ---------- Sankey / cost-flow viz ---------- */ .flowviz { position: relative; background: #1B1813; border: 1px solid var(--ink-2); padding: 36px 32px 28px; overflow: hidden; } .flowviz__legend { display:flex; justify-content:space-between; align-items:baseline; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-3); border-bottom: 1px solid var(--ink-2); padding-bottom: 12px; margin-bottom: 20px; } .flowviz__rows { display:grid; gap: 14px; } .flowrow { display:grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: center; } .flowrow__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--paper-3); } .flowrow__bar { position: relative; height: 44px; background: linear-gradient(90deg, #2a241d 0%, #2a241d 100%); border: 0; display:flex; align-items:stretch; } .flowrow__remain { background: #3a342a; position: relative; } .flowrow__cut { background: var(--accent); position: relative; display:flex; align-items:center; justify-content:center; color: #0a2412; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; } .flowrow__cut[data-tone="warn"] { background: #C28B4A; color: #1f1409; } .flowrow__label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--paper); letter-spacing: -0.005em; pointer-events: none; } .flowrow__pct { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--paper-3); } .flowviz__axis { display:grid; grid-template-columns: 28px 1fr; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted-2); margin-top: 12px; } .flowviz__axis > div:nth-child(2) { display:grid; grid-template-columns: repeat(11,1fr); } .flowviz__axis span { text-align:left; padding-top:6px; border-top: 1px solid var(--ink-2); } .flowviz__final { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ink-2); display:grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; } .flowviz__final .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--paper-3); text-transform: uppercase; } .flowviz__final .v { font-family: var(--sans); font-weight: 300; font-size: 38px; letter-spacing: -0.03em; color: var(--paper); font-variant-numeric: tabular-nums; } /* ---------- Gantt / timeline ---------- */ .gantt { background: var(--paper); border: 1px solid var(--hairline); padding: 28px 28px 20px; position: relative; } .gantt__head { display:grid; grid-template-columns: 220px 1fr; gap: 24px; border-bottom: 1px solid var(--hairline); padding-bottom: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .gantt__scale { display:grid; grid-template-columns: repeat(17, 1fr); position: relative; } .gantt__scale span { padding-left: 4px; } .gantt__row { display:grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--hairline); align-items: center; } .gantt__row:last-child { border-bottom: 0; } .gantt__label .t { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); } .gantt__label .s { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; margin-top: 2px; } .gantt__track { position: relative; height: 28px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/17 - 1px), var(--hairline) calc(100%/17 - 1px), var(--hairline) calc(100%/17)); } .gantt__bar { position: absolute; top:4px; bottom:4px; background: var(--ink); display:flex; align-items:center; padding: 0 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--paper); text-transform: uppercase; } .gantt__bar--accent { background: var(--accent); color:#0a2412; } .gantt__bar--soft { background: var(--paper-2); color: var(--ink-2); border:1px solid var(--hairline); } .gantt__milestone { position: absolute; top:50%; width:14px; height:14px; background: var(--accent); transform: translate(-50%,-50%) rotate(45deg); border: 2px solid var(--paper); } .gantt__today { position: absolute; top:-8px; bottom:-8px; width: 0; border-left: 1px dashed var(--accent); } .gantt__today::before { content: "TODAY"; position: absolute; top:-12px; left:6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--accent); white-space: nowrap; } /* ---------- Scatter / portfolio matrix ---------- */ .matrix { background: var(--paper); border: 1px solid var(--hairline); padding: 32px; position: relative; aspect-ratio: 16/9; } .matrix__grid { position: absolute; inset: 60px 60px 60px 90px; border-left: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: linear-gradient(to right, transparent 24.5%, var(--hairline) 24.5%, var(--hairline) 25.1%, transparent 25.1%) repeat-x, linear-gradient(to top, transparent 24.5%, var(--hairline) 24.5%, var(--hairline) 25.1%, transparent 25.1%) repeat-y; background-size: 25% 100%, 100% 25%; } .matrix__dot { position: absolute; border-radius: 999px; background: color-mix(in oklab, var(--accent) 20%, transparent); border: 1.5px solid var(--accent); transform: translate(-50%, 50%); display:flex; align-items:center; justify-content:center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; color: var(--accent); } .matrix__axis-x, .matrix__axis-y { position: absolute; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .matrix__axis-x { left: 90px; right: 60px; bottom: 28px; display:flex; justify-content:space-between; } .matrix__axis-y { left: 28px; top: 60px; bottom: 60px; writing-mode: vertical-rl; transform: rotate(180deg); display:flex; justify-content:space-between; } /* ---------- Heatmap (risk register) ---------- */ .heatmap { display:grid; grid-template-columns: 80px repeat(5, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); } .heatmap__cell { background: var(--paper); padding: 14px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; min-height: 64px; display:flex; align-items:flex-start; } .heatmap__cell--head { background: var(--paper-2); } .heatmap__cell--y { background: var(--paper-2); align-items:center; } .heatmap__cell--data { position: relative; align-items: center; justify-content:center; font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); letter-spacing: -0.005em; } .heatmap__cell[data-h="0"] { background: var(--paper); color: var(--muted); } .heatmap__cell[data-h="1"] { background: color-mix(in oklab, var(--accent) 10%, var(--paper)); } .heatmap__cell[data-h="2"] { background: color-mix(in oklab, var(--accent) 25%, var(--paper)); } .heatmap__cell[data-h="3"] { background: color-mix(in oklab, #C28B4A 35%, var(--paper)); color: var(--ink); } .heatmap__cell[data-h="4"] { background: color-mix(in oklab, #B5482E 55%, var(--paper)); color: #fff; } /* ---------- Donut ---------- */ .donut { width:100%; aspect-ratio:1; } .donut .track { fill:none; stroke: var(--hairline); stroke-width: 12; } .donut .arc { fill:none; stroke: var(--accent); stroke-width: 12; stroke-linecap:butt; transform: rotate(-90deg); transform-origin:center; } /* ---------- Case-study viz ---------- */ .csviz { position: relative; display:flex; flex-direction:column; min-height: 280px; padding: 36px 28px 24px; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); gap: 20px; } .csviz__head { display:flex; justify-content:space-between; align-items:baseline; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .csviz__hero { display:flex; align-items:baseline; gap: 10px; margin-top: -4px; } .csviz__big { font-family: var(--sans); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 0.95; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums; } .csviz__big sub { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--muted); bottom: 0; vertical-align: baseline; margin-left: -2px; } .csviz__caption { font-family: var(--sans); font-size: 13px; color: var(--ink-2); max-width: 30ch; line-height: 1.4; } /* Horizontal cost recovery bar */ .csviz__bar { height: 36px; display:flex; border: 1px solid var(--hairline); background: var(--paper); position: relative; margin-top: auto; } .csviz__bar .seg { position: relative; display:flex; align-items:center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 10px; color: var(--paper); } .csviz__bar .seg.kept { background: var(--ink); } .csviz__bar .seg.saved { background: var(--accent); color: #0a2412; } .csviz__legend { display:flex; justify-content:space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; } /* Schedule recovery */ .csviz__sched { margin-top: auto; display:grid; gap: 10px; } .csviz__schedrow { display:grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; } .csviz__schedrow .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .csviz__schedrow .track { position: relative; height: 22px; background: var(--paper); border: 1px solid var(--hairline); } .csviz__schedrow .track .planned { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, var(--paper-2), var(--paper-2) 4px, var(--paper) 4px, var(--paper) 8px); } .csviz__schedrow .track .actual { position: absolute; top:0; bottom:0; left:0; background: var(--accent); } .csviz__schedrow .track .ink { position: absolute; top:0; bottom:0; left:0; background: var(--ink); } .csviz__schedrow .track .overrun { position: absolute; top:0; bottom:0; background: #C28B4A; opacity:0.85; } .csviz__schedrow .track .pin { position: absolute; top:-4px; bottom:-4px; border-left: 1px dashed var(--accent); } .csviz__schedrow .track .pin::before { content: attr(data-l); position: absolute; top: -14px; left: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: var(--accent); white-space: nowrap; } /* Burndown line */ .csviz__burn { margin-top:auto; } .csviz__burn svg { width:100%; height: 90px; } .csviz__burn .gline { stroke: var(--hairline); stroke-width: 0.5; } .csviz__burn .area { fill: var(--accent); opacity: 0.14; } .csviz__burn .line { fill:none; stroke: var(--accent); stroke-width: 1.5; } .csviz__burn .pt { fill: var(--accent); } /* VO log */ .csviz__vo { margin-top:auto; display:grid; gap: 6px; } .csviz__vo .row { display:grid; grid-template-columns: 92px 1fr 60px; gap: 10px; align-items:center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .csviz__vo .bar { height: 14px; background: var(--paper); border:1px solid var(--hairline); position:relative; } .csviz__vo .bar .fill { position:absolute; top:0; bottom:0; left:0; } .csviz__vo .bar .fill.rej { background: var(--accent); } .csviz__vo .bar .fill.neg { background: #C28B4A; } .csviz__vo .bar .fill.acc { background: var(--ink-2); } .csviz__vo .v { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink); letter-spacing: -0.005em; text-transform: none; text-align:right; } /* Diagram corner overlay still works on top */ .pcard__diagram .csviz + .pcard__corner { z-index: 2; } /* ---------- Diagrams (shared SVG colors) ---------- */ .diagram { background: var(--paper-2); border: 1px solid var(--hairline); position: relative; overflow: hidden; } .diagram__corner { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .diagram__corner--right { left: auto; right: 12px; } /* ---------- Tag pill ---------- */ .tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--hairline); padding: 5px 9px; border-radius: 999px; background: var(--paper); } .tag--accent { background: var(--accent) !important; color: var(--paper) !important; border-color: var(--accent) !important; } /* ---------- Marquee of credentials ---------- */ .cred-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--hairline); background: var(--paper); } .cred-row > div { padding: 28px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; border-right: 1px solid var(--hairline); min-height: 120px; } .cred-row > div:last-child { border-right: 0; } .cred-row .name { font-family: var(--serif); font-size: 17px; color: var(--ink); line-height: 1.1; } .cred-row .meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } @media (max-width: 880px) { .cred-row { grid-template-columns: repeat(3, 1fr); } .cred-row > div:nth-child(3n) { border-right: 0; } .cred-row > div { border-bottom: 1px solid var(--hairline); } .cred-row > div:nth-last-child(-n+3) { border-bottom: 0; } } /* ---------- Utilities ---------- */ .grid { display: grid; gap: 24px; } .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .flex { display: flex; } .flex--col { flex-direction: column; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; } .split { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: clamp(28px, 5vw, 80px); align-items: start; } .split--rev { grid-template-columns: 1.6fr 0.9fr; } @media (max-width: 900px) { .grid--2, .grid--3, .grid--4, .split, .split--rev { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .nav { display: none; } .topbar__inner { grid-template-columns: 1fr auto; } } /* ---------- Inline icons ---------- */ .icon { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ---------- Skip-to ---------- */ .skip { position: absolute; left: -9999px; top: 0; } .skip:focus { left: 12px; top: 12px; background: var(--ink); color: var(--paper); padding: 8px 12px; } /* Credential marquee CSS removed — was unused and ran an infinite GPU-bound animation in the background. */ /* ---------- FAQ ---------- */ .faq { display: grid; border-top: 1px solid var(--ink); } .faq__row { border-bottom: 1px solid var(--hairline); } .faq__row[open] { background: var(--paper-2); } .faq__row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px 1fr 32px; align-items: baseline; gap: 18px; padding: 22px 0 22px 4px; font-family: var(--sans); font-size: 19px; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); transition: color .15s ease; } .faq__row summary::-webkit-details-marker { display: none; } .faq__row summary:hover { color: var(--accent-ink, var(--ink)); } .faq__num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); align-self: center; padding-left: 4px; } .faq__q { padding-right: 8px; } .faq__chev { font-family: var(--mono); font-size: 22px; font-weight: 300; color: var(--muted); text-align: right; padding-right: 8px; transition: transform .25s ease, color .15s ease; transform-origin: center; line-height: 1; } .faq__row[open] .faq__chev { transform: rotate(45deg); color: var(--ink); } .faq__a { padding: 0 8px 28px 78px; max-width: 64ch; animation: faqIn .28s ease both; } .faq__a p { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; } @keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 720px) { .faq__row summary { grid-template-columns: 40px 1fr 28px; font-size: 17px; gap: 12px; } .faq__a { padding-left: 52px; } } /* ============================================================ /* EDITORIAL-ENHANCEMENTS */ Drop cap, paper texture, accent mark on eyebrow, colored stamp underline on hero accent words. ============================================================ */ /* Subtle paper texture across the whole page */ body::before { content: none; } main, header, footer { position: relative; z-index: 1; } /* Hero accent words — red with a stamp underline that draws on */ h1 span[style*="--accent"], h1 span[style*="color:var(--accent)"] { color: var(--accent) !important; position: relative; display: inline-block; } h1 span[style*="color:var(--accent)"]::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.18em; background: var(--accent); opacity: 0.22; z-index: -1; transform: scaleX(0); transform-origin: left center; animation: heroUlDraw 900ms cubic-bezier(.2,.7,.2,1) 700ms forwards; } @keyframes heroUlDraw { to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { h1 span[style*="color:var(--accent)"]::after { animation: none; transform: scaleX(1); } } /* Eyebrow gets a colored mark in front of the rule */ .eyebrow::before { background: var(--accent) !important; width: 22px !important; height: 2px !important; } /* Drop cap helper: opt-in via .lede--drop on first paragraph of major sections */ .lede--drop::first-letter, .section .wrap > p.lede:first-of-type::first-letter { font-family: var(--serif); font-weight: 500; float: left; font-size: 4.4em; line-height: 0.86; padding: 0.04em 0.12em 0 0; margin-top: 0.06em; color: var(--accent); font-feature-settings: "ss01"; } /* Oversized section numerals — opt-in via .section__num */ .section__num { font-family: var(--mono); font-weight: 300; font-size: clamp(72px, 9vw, 132px); line-height: 0.85; letter-spacing: -0.04em; color: var(--accent); display: block; margin-bottom: 18px; font-variant-numeric: tabular-nums; opacity: 0.92; } .section--dark .section__num { color: var(--paper-3); } /* Accent tag color */ .tag--accent { background: var(--accent) !important; color: var(--paper) !important; border-color: var(--accent) !important; } /* Buttons hover to accent */ .btn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--paper) !important; } .btn--whatsapp:hover { background: #1ebe5a !important; border-color: #1ebe5a !important; color: #0a2412 !important; } /* Card accent rail — a thin terracotta rule on the top of feature cards */ .card--accent-rail { position: relative; } .card--accent-rail::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); } /* Make sankey accent stripes use terracotta */ .flowrow__cut { background: var(--accent) !important; color: #1A1208 !important; } .gantt__bar--accent { background: var(--accent) !important; color: #1A1208 !important; } .gantt__milestone { background: var(--accent) !important; } .gantt__today { border-color: var(--accent) !important; } .csviz__bar .seg.saved { background: var(--accent) !important; color: #1A1208 !important; } .csviz__schedrow .track .actual { background: var(--accent) !important; } .csviz__vo .bar .fill.rej { background: var(--accent) !important; } /* Section numerals already in the document (eyebrows like "01" in problem grid) bump up */ .problem-num { font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: 0.16em; } /* Reduce-motion respect */ @media (prefers-reduced-motion: reduce) { body::before { opacity: 0.18; } } /* SECTION-BG-VARIANTS — radical restraint: variants render as default paper */ .section--sand, .section--clay, .section--terracotta, .section--blueprint, .section--oxblood, .section--forest, .section--parchment, .section--paper2 { background: var(--paper); color: var(--ink); border-top-color: var(--hairline); } /* ============================================================ Project gallery cards (with photos) ============================================================ */ .pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 980px) { .pgrid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 600px) { .pgrid { grid-template-columns: 1fr; } } .pcard-photo { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hairline); overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; /* Skip layout + paint for cards far below the fold. contain-intrinsic-size reserves the right amount of space so the page scrollbar doesn't jump as cards render in. */ content-visibility: auto; contain-intrinsic-size: 480px; } .pcard-photo:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(14,30,51,0.22); } .pcard-photo__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); } .pcard-photo__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); } /* Placeholder until a project photo is supplied */ .pcard-photo__img--placeholder { background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 8%, var(--paper-2)) 0%, color-mix(in oklab, var(--accent) 2%, var(--paper-2)) 60%, var(--paper-2) 100%); position: relative; } .pcard-photo__img--placeholder::after { content: "Photo coming"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .pcard-photo:hover .pcard-photo__img img { transform: scale(1.04); } .pcard-photo__tag { position: absolute; top: 14px; left: 14px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 10px; z-index: 2; } .pcard-photo__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .pcard-photo__loc { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .pcard-photo__title { font-family: var(--sans); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); } .pcard-photo__meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; } .pcard-photo__meta b { display: block; font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink); letter-spacing: -0.005em; text-transform: none; margin-top: 2px; } .pcard-photo__svc { display: flex; flex-wrap: wrap; gap: 6px; } .pcard-photo__svc span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); padding: 4px 8px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 5%, transparent); } /* ============================================================ Client logo strip ============================================================ */ .client-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border: 1px solid var(--hairline); background: var(--paper); } .client-strip__cell { padding: 28px 22px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--hairline); min-height: 110px; text-align: center; font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); filter: grayscale(1); opacity: 0.7; transition: opacity .25s ease, filter .25s ease; } .client-strip__cell img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; } .client-strip__cell:last-child { border-right: 0; } .client-strip__cell:hover { opacity: 1; filter: grayscale(0); color: var(--accent); } @media (max-width: 980px) { .client-strip { grid-template-columns: repeat(3, 1fr); } .client-strip__cell:nth-child(3n) { border-right: 0; } .client-strip__cell { border-bottom: 1px solid var(--hairline); } .client-strip__cell:nth-last-child(-n+1) { border-bottom: 0; } } @media (max-width: 520px) { .client-strip { grid-template-columns: repeat(2, 1fr); } .client-strip__cell:nth-child(2n) { border-right: 0; } .client-strip__cell:nth-child(3n) { border-right: 1px solid var(--hairline); } } /* ============================================================ Life-cycle wheel (9 stages) ============================================================ */ .lifecycle { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (max-width: 760px) { .lifecycle { grid-template-columns: 1fr; } } .lifecycle__wheel { width: 100%; aspect-ratio: 1; } .lifecycle__list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } @media (max-width: 460px) { .lifecycle__list { grid-template-columns: 1fr; } } .lifecycle__row { display: grid; grid-template-columns: 32px 1fr; align-items: baseline; gap: 14px; padding-block: 10px; border-top: 1px solid var(--hairline); } .lifecycle__row:first-child, .lifecycle__row:nth-child(2) { border-top: 0; } .lifecycle__num { font-family: var(--mono); font-size: 22px; font-weight: 300; color: var(--accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .lifecycle__t { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: -0.005em; color: var(--ink); } .section--dark .lifecycle__t { color: var(--paper); } .section--dark .lifecycle__row { border-top-color: rgba(255,255,255,0.1); } .section--dark .lifecycle__num { color: var(--accent); } /* ============================================================ Brand — full horizontal lockup (mark + INGEX + Project Mgmt) ============================================================ */ .brand--lockup { gap: 0; font-size: 0; /* removes any inline-flex baseline whitespace */ } .brand__lockup { height: 42px; width: auto; display: block; flex: 0 0 auto; object-fit: contain; } @media (max-width: 720px) { .brand__lockup { height: 36px; } } @media (max-width: 480px) { .brand__lockup { height: 30px; } } /* Legacy mark+text variant retained for any page that still uses it */ .brand__logo { height: 30px; width: 30px; display: block; flex: 0 0 auto; object-fit: contain; } .brand--logo { gap: 12px; } .brand--logo small { padding-left: 12px; margin-left: 2px; } @media (max-width: 480px) { .brand__logo { height: 24px; width: 24px; } .brand--logo { gap: 8px; } .brand--logo small { padding-left: 8px; } } /* ============================================================ Founder portrait block ============================================================ */ .founder { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } @media (max-width: 800px) { .founder { grid-template-columns: 1fr; } } .founder__photo { border: 1px solid var(--hairline); background: var(--paper-2); aspect-ratio: 3 / 4; overflow: hidden; } .founder__photo img { width: 100%; height: 100%; object-fit: cover; } .founder__caption { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* Monograph — final overrides */ html, body { background: var(--paper); color: var(--ink); } .topbar { background: color-mix(in oklab, var(--paper) 92%, transparent) !important; border-bottom-color: var(--hairline) !important; } .brand, .nav a { color: var(--ink); } .brand__mark { border-color: var(--ink); } .brand__mark::before { background: var(--ink); } .nav__cta .phone { color: var(--muted); } .btn { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); } /* Restore WhatsApp green on light backgrounds (cascade had been stealing the bg via the later .btn rule above). */ .btn--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #0a2412; } /* On dark sections: outlined by default, fills on hover so it reads as a discrete button without dominating the section. */ .section--dark .btn--whatsapp { background: transparent; border-color: var(--whatsapp); color: var(--whatsapp); } .section--dark .btn--whatsapp:hover { background: var(--whatsapp); border-color: var(--whatsapp); color: #0a2412; } .card { background: var(--paper); border-color: var(--hairline); color: var(--ink); } .section { border-top-color: var(--hairline) !important; } .footer { background: var(--ink); color: var(--paper-3); border-top-color: var(--ink-2); } .footer h4 { color: var(--paper); } .footer a { color: var(--paper-3); } .footer a:hover { color: var(--accent-tint); } /* ============================================================ Problem / Solution — two parallel columns side-by-side with a hairline divider between them. Stacks on mobile. ============================================================ */ .ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); position: relative; } .ps-grid::before { /* vertical divider between the two columns */ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--hairline); transform: translateX(-50%); } .ps-col { display: flex; flex-direction: column; } .ps-col__title { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.02em; max-width: 18ch; } .ps-col__lede { font-family: var(--serif); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--ink-2); } .ps-col__eyebrow--accent { color: var(--accent); } .ps-col__eyebrow--accent::before { background: var(--accent) !important; } @media (max-width: 760px) { .ps-grid { grid-template-columns: 1fr; gap: 40px; } .ps-grid::before { /* horizontal divider when stacked */ top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform: translateY(-50%); } .ps-col { padding-block: 0; } .ps-col--solution { padding-top: 8px; } .ps-col__title { max-width: none; } } /* ============================================================ RIBA Timeline — services as 8 stages (Stage 00 → Stage 07) Pinned scrollytelling pattern: section is tall, content pins in the viewport, scroll drives which stage is visible. ============================================================ */ .riba { --riba-dot: 14px; --riba-dot-active: 22px; --riba-progress: 0%; } /* Natural-flow timeline — no scroll pinning. Stages switch on click. */ .riba { position: relative; } .riba__sticky { /* Kept as a structural wrapper only — no pinning. */ display: flex; flex-direction: column; gap: 0; } /* Mobile layout — horizontal dot strip below the panel */ @media (max-width: 900px) { .riba__prompt { margin-bottom: 16px !important; } .riba__prompt-label { font-size: 10px; } .riba__prompt-text { font-size: 14px; } .riba__track { display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; overflow: visible !important; padding: 14px 4px 18px !important; margin: 0 0 20px !important; border-bottom: 1px solid var(--hairline); position: relative; } .riba__line { left: 12px !important; right: 12px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%); width: auto !important; height: 1px !important; } .riba__line-fill { width: var(--riba-progress, 0%) !important; height: 1px !important; top: 0 !important; transition: width .55s cubic-bezier(.2,.7,.2,1); } .riba__dot { flex-direction: column !important; align-items: center !important; padding: 14px 6px !important; gap: 0 !important; flex: 0 1 auto; min-width: 36px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .riba__dot:active .riba__dot-mark { transform: scale(1.4); } .riba__num { order: 1 !important; margin: 0 0 4px !important; font-size: 9px !important; min-width: 0 !important; } .riba__dot-mark { order: 2 !important; margin: 0 !important; width: 10px !important; height: 10px !important; } .riba__dot.is-active .riba__dot-mark, .riba__dot:hover .riba__dot-mark { width: 14px !important; height: 14px !important; } .riba__lbl { display: none !important; } /* Panel sized to its content (no viewport constraint) */ .riba__panel { padding: 24px 4px 28px !important; border: 0 !important; background: transparent !important; } .riba__panel-services { grid-template-columns: 1fr !important; } .riba__panel-cta .btn { width: 100%; justify-content: center; } } .riba__prompt { max-width: 64ch; margin-bottom: clamp(32px, 4vw, 56px); } .riba__prompt-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .riba__prompt-text { font-size: 16px; line-height: 1.55; color: var(--muted); } /* Horizontal track with 8 evenly-spaced dots */ .riba__track { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; padding: 26px 0 40px; } .riba__line { position: absolute; left: calc(100% / 16); right: calc(100% / 16); top: calc(26px + 11px); /* num-row + half dot */ height: 1px; background: var(--hairline); pointer-events: none; } .riba__line-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--riba-progress); background: var(--accent); transition: width .55s cubic-bezier(.2,.7,.2,1); } .riba__dot { position: relative; display: flex; flex-direction: column; align-items: center; background: transparent; border: 0; cursor: pointer; padding: 0; font: inherit; color: inherit; text-align: center; } .riba__num { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 12px; transition: color .2s ease; } .riba__dot-mark { width: var(--riba-dot); height: var(--riba-dot); border-radius: 999px; background: var(--paper); border: 1.5px solid var(--hairline-2); position: relative; z-index: 2; transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), background .2s ease, border-color .2s ease; } .riba__dot-mark::after { content: ""; position: absolute; inset: -8px; border-radius: 999px; border: 1px solid transparent; transition: border-color .2s ease; } .riba__lbl { margin-top: 14px; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: -0.005em; color: var(--muted); line-height: 1.25; transition: color .2s ease; max-width: 110px; } .riba__dot:hover .riba__dot-mark, .riba__dot.is-active .riba__dot-mark { background: var(--accent); border-color: var(--accent); width: var(--riba-dot-active); height: var(--riba-dot-active); } .riba__dot.is-active .riba__dot-mark::after { border-color: color-mix(in oklab, var(--accent) 35%, transparent); } .riba__dot:hover .riba__num, .riba__dot.is-active .riba__num { color: var(--accent); } .riba__dot:hover .riba__lbl, .riba__dot.is-active .riba__lbl { color: var(--ink); } .riba__dot:focus-visible { outline: 0; } .riba__dot:focus-visible .riba__dot-mark::after { border-color: var(--accent); } /* Detail panel */ .riba__panel { border: 1px solid var(--hairline); background: var(--paper); padding: clamp(28px, 4vw, 48px); min-height: 320px; position: relative; overflow: hidden; } .riba__panel-content { display: none; } .riba__panel-content.is-visible { display: block; animation: ribaPanelIn .52s cubic-bezier(.2,.7,.2,1); } /* Slide-in from right when changing stages */ @keyframes ribaPanelIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } } /* Stagger internal elements as the panel reveals */ .riba__panel-content.is-visible .riba__panel-head { animation: ribaItemIn .55s cubic-bezier(.2,.7,.2,1) .08s both; } .riba__panel-content.is-visible .riba__service:nth-child(1) { animation: ribaItemIn .55s cubic-bezier(.2,.7,.2,1) .18s both; } .riba__panel-content.is-visible .riba__service:nth-child(2) { animation: ribaItemIn .55s cubic-bezier(.2,.7,.2,1) .26s both; } .riba__panel-content.is-visible .riba__service:nth-child(3) { animation: ribaItemIn .55s cubic-bezier(.2,.7,.2,1) .34s both; } .riba__panel-content.is-visible .riba__panel-cta { animation: ribaItemIn .55s cubic-bezier(.2,.7,.2,1) .44s both; } @keyframes ribaItemIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } /* Soft pulse on the active dot. animation-play-state: paused by default; JS adds .is-visible to .riba when the timeline section enters the viewport, which unpauses it. Pausing when off-screen keeps the CPU/GPU idle. */ .riba__dot.is-active .riba__dot-mark::after { animation: dotPulse 2.4s ease-in-out infinite paused; } .riba.is-visible .riba__dot.is-active .riba__dot-mark::after { animation-play-state: running; } @keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .riba__panel-content.is-visible, .riba__panel-content.is-visible .riba__panel-head, .riba__panel-content.is-visible .riba__service, .riba__panel-content.is-visible .riba__panel-cta { animation: none; } .riba__dot.is-active .riba__dot-mark::after { animation: none; } .riba__line-fill { transition: none; } .riba__dot-mark { transition: none; } } .riba__panel-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); } .riba__panel-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .riba__panel-title { font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -0.018em; color: var(--ink); margin: 0; line-height: 1.1; } .riba__panel-lede { font-family: var(--serif); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.45; color: var(--ink-2); margin: 8px 0 0; max-width: 64ch; } .riba__panel-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .riba__service h4 { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 8px; } .riba__service p { font-size: 14px; line-height: 1.55; color: var(--muted); } /* CTA below timeline */ .riba__cta { margin-top: 24px; padding: 22px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--hairline); background: var(--paper-2); } .riba__cta-text { font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink); } /* Inline CTA inside each panel, linking to the corresponding service page */ .riba__panel-cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .riba__panel-cta .btn { font-weight: 500; } /* ============================================================ Form block — wraps the smart stage form section on service pages. Centered single-column layout (replaces the awkward narrow-left .split that was wrapping H2s to 4 lines). ============================================================ */ .form-block { max-width: 720px; margin: 0 auto; display: block; } .form-block > div { /* header wrapper (eyebrow + h2 + muted) */ text-align: left; } .form-block .stage-form { margin-top: 36px; max-width: 100%; } .form-block h2 { max-width: 22ch; /* keeps long-line break at a natural width */ } /* ============================================================ Smart stage form — used on every service page "What is your current project stage?" lead capture ============================================================ */ .stage-form { display: grid; gap: 18px; max-width: 560px; } /* Explicit gap inside the fields wrapper so spacing is consistent */ .stage-form__fields { display: grid; gap: 18px; } /* The button + note row sits at the end. Extra breathing room above so the CTA doesn't feel crammed against the textarea. */ .stage-form__fields > .flex { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--hairline); } .stage-form .field { display: flex; flex-direction: column; gap: 6px; } .stage-form label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .stage-form input, .stage-form select, .stage-form textarea { font-family: var(--sans); font-size: 15px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 0; color: var(--ink); width: 100%; transition: border-color .15s ease; } .stage-form input:focus, .stage-form select:focus, .stage-form textarea:focus { outline: 0; border-color: var(--accent); } .stage-form textarea { min-height: 110px; resize: vertical; } .stage-form__note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ============================================================ .process — sequential numbered steps (service-page methodology) ============================================================ */ .process { display: grid; gap: 0; border-top: 1px solid var(--hairline); } .process__step { display: grid; grid-template-columns: 60px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--hairline); align-items: start; } .process__num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 4px; } .process__title { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin: 0; } .process__desc { margin-top: 8px; color: var(--ink-2); line-height: 1.55; max-width: 64ch; } .process__meta { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } @media (max-width: 760px) { .process__step { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; } .process__num { padding-top: 0; } } /* Honeypot — hidden from real users, visible to bots */ .stage-form__hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; opacity: 0; pointer-events: none; } /* Field error state */ .stage-form .field.is-error input, .stage-form .field.is-error select, .stage-form .field.is-error textarea { border-color: var(--accent); } .stage-form .field__error { display: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-top: 2px; } .stage-form .field.is-error .field__error { display: block; } /* Success state — replaces form on submission */ .stage-form__success { display: none; padding: 28px; border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); background: color-mix(in oklab, var(--accent) 5%, transparent); animation: ribaItemIn .5s cubic-bezier(.2,.7,.2,1); } .stage-form.is-submitted .stage-form__fields { display: none; } .stage-form.is-submitted .stage-form__success { display: block; } .stage-form__success-title { font-family: var(--sans); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); } .stage-form__success-text { margin-top: 10px; color: var(--ink-2); font-size: 15px; line-height: 1.5; } .stage-form__success-meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in oklab, var(--accent) 25%, transparent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* Tablet (≤1000px) — labels tighten */ @media (max-width: 1000px) { .riba__lbl { font-size: 10px; max-width: 90px; } .riba__panel-services { grid-template-columns: repeat(2, 1fr); } } /* Mobile (≤760px) — handled by the scrollytelling block above (≤900px). The old vertical-stack track styles are superseded by the compact horizontal dot strip at the bottom of the pinned card. */ @media (max-width: 480px) { .riba__panel-title { font-size: clamp(22px, 6.5vw, 30px); } } /* ============================================================ Risk cards (homepage — Technical Risks We Mitigate) ============================================================ */ .risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); } @media (max-width: 980px) { .risk-grid { grid-template-columns: 1fr; } } .risk-card { background: var(--paper); padding: 36px 32px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; transition: background .3s ease, transform .35s cubic-bezier(.2,.7,.2,1); } .risk-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.2,.7,.2,1); } .reveal-stagger.is-in .risk-card::before { transform: scaleX(1); } .reveal-stagger.is-in .risk-card:nth-child(1)::before { transition-delay: 120ms; } .reveal-stagger.is-in .risk-card:nth-child(2)::before { transition-delay: 240ms; } .reveal-stagger.is-in .risk-card:nth-child(3)::before { transition-delay: 360ms; } .risk-card:hover { background: color-mix(in oklab, var(--accent) 3%, var(--paper)); transform: translateY(-4px); } .risk-card__head { display: flex; align-items: baseline; gap: 14px; } .risk-card__num { font-family: var(--mono); font-size: 38px; font-weight: 300; color: var(--accent); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .risk-card__cat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent); border: 1px solid var(--accent); padding: 5px 10px; text-transform: uppercase; background: color-mix(in oklab, var(--accent) 6%, transparent); transition: background .3s ease, color .3s ease; } .risk-card:hover .risk-card__cat { background: var(--accent); color: var(--paper); } .risk-card__title { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); margin: 0; } /* + icon top-right hint that rotates to × when the card is open */ .risk-card__hint { margin-left: auto; font-family: var(--mono); font-size: 24px; font-weight: 300; color: var(--muted); line-height: 1; transition: transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease; align-self: center; } .risk-card { cursor: pointer; } .risk-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* Open state — controlled by .is-open class (added/removed via JS click). Hover does NOT auto-open: that previously created sticky-hover confusion on touch devices where iOS would leave :hover applied after a tap, making cards appear to open at random. */ .risk-card.is-open .risk-card__hint { transform: rotate(45deg); color: var(--accent); } /* Collapsible body — grid-template-rows trick animates height auto */ .risk-card__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); } .risk-card__body-inner { overflow: hidden; opacity: 0; display: flex; flex-direction: column; gap: 16px; transition: opacity .35s ease, padding-top .35s ease; padding-top: 0; } .risk-card.is-open .risk-card__body { grid-template-rows: 1fr; } .risk-card.is-open .risk-card__body-inner { opacity: 1; padding-top: 6px; } .risk-card__block { display: flex; flex-direction: column; gap: 6px; } .risk-card__block--protocol { padding-top: 14px; border-top: 1px solid var(--hairline); } .risk-card__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .risk-card__label--accent { color: var(--accent); } .risk-card__block p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; } @media (max-width: 640px) { .risk-card { padding: 28px 24px; gap: 16px; } .risk-card__num { font-size: 28px; } .risk-card__title { font-size: 19px; } .risk-card__hint { font-size: 22px; } /* On mobile, open is more visible than hover — make sure tap toggles work; the JS handler adds .is-open. */ } @media (prefers-reduced-motion: reduce) { .risk-card__body { transition: none; } .risk-card__body-inner { transition: none; } .risk-card__hint { transition: none; } } /* ============================================================ MOBILE RESPONSIVENESS — comprehensive overrides Targets inline grid-template-columns:repeat(N,1fr) patterns used throughout the site, plus topbar nav, typography, padding. Breakpoints: 1000px / 760px / 640px / 400px ============================================================ */ /* ---------- Tablet (≤1000px) ---------- */ @media (max-width: 1000px) { :root { --gutter: clamp(20px, 4vw, 32px); } [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; } [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .client-strip { grid-template-columns: repeat(4, 1fr); } .client-strip__cell:nth-child(4n) { border-right: 0; } .client-strip__cell { border-bottom: 1px solid var(--hairline); } .client-strip__cell:nth-last-child(-n+3) { border-bottom: 0; } } /* ---------- Topbar: nav drops below brand row (≤900px) ---------- */ @media (max-width: 900px) { .topbar__inner { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 16px !important; padding: 12px var(--gutter) !important; } .brand { flex: 1 1 auto; } .nav__cta { order: 2; flex-shrink: 0; } .nav { display: flex !important; order: 3; flex-basis: 100%; width: 100%; gap: 22px; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 0 4px; margin-top: 4px; border-top: 1px solid var(--hairline); font-size: 13px; } .nav::-webkit-scrollbar { display: none; } .nav a { white-space: nowrap; flex-shrink: 0; padding-block: 4px; } } /* ---------- Small tablet / large phone (≤760px) ---------- */ @media (max-width: 760px) { /* Tighten typography */ h1 { font-size: clamp(34px, 6.5vw, 54px); } h2 { font-size: clamp(24px, 4.5vw, 36px); } .lede { font-size: clamp(17px, 2.4vw, 22px); } /* Tighter section padding */ .section { padding-block: clamp(48px, 8vw, 84px); } .section--tight { padding-block: clamp(36px, 6vw, 64px); } /* Founder layout */ .founder { grid-template-columns: 1fr !important; } .founder__photo { max-width: 280px; } /* Step rows on homepage how-we-work */ .step { grid-template-columns: 1fr !important; gap: 8px !important; padding: 24px 0 !important; } /* Service-page disciplines/pillars 2-col → 1 */ [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; } /* Eyebrow before-mark slightly smaller */ .eyebrow::before { width: 16px !important; } /* Lifecycle wheel single column already at 760 */ .lifecycle { grid-template-columns: 1fr !important; gap: 32px !important; } .lifecycle__wheel { max-width: 280px; margin: 0 auto; } } /* ---------- Mobile (≤640px) ---------- */ @media (max-width: 640px) { /* Everything multi-col → 1 col, except hero/about stat strips which stay 2-col */ [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; } .grid--3, .grid--4 { grid-template-columns: 1fr; } .client-strip { grid-template-columns: repeat(2, 1fr); } .client-strip__cell:nth-child(2n) { border-right: 0; } .client-strip__cell:nth-child(2n+1) { border-right: 1px solid var(--hairline); } /* Reset directional borders / padding on stacked stat cells */ [style*="grid-template-columns:repeat(4,1fr)"] > div, [style*="grid-template-columns:repeat(5,1fr)"] > div { border-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-block: 20px !important; border-bottom: 1px solid var(--hairline); } [style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(2n), [style*="grid-template-columns:repeat(5,1fr)"] > div:nth-child(2n) { padding-left: 16px !important; border-left: 1px solid var(--hairline); } /* Dark-section variant: lighter borders */ .section--dark [style*="grid-template-columns:repeat(4,1fr)"] > div, .section--dark [style*="grid-template-columns:repeat(5,1fr)"] > div { border-bottom-color: rgba(255,255,255,0.1) !important; border-left-color: rgba(255,255,255,0.1) !important; } /* Footer 4-col → stack */ .footer__grid { grid-template-columns: 1fr !important; gap: 36px !important; } /* Hero tighter */ h1 { font-size: clamp(30px, 8vw, 44px); line-height: 1.08; } h2 { font-size: clamp(22px, 6vw, 32px); } h3 { font-size: clamp(17px, 4.5vw, 20px) !important; } .lede { font-size: clamp(16px, 4.5vw, 19px); } /* Section padding tighter still */ .section { padding-block: clamp(40px, 7vw, 64px); } /* Topbar small-screen tightening */ .topbar__inner { padding: 10px var(--gutter) !important; } .brand { font-size: 18px; gap: 6px; } .brand small { font-size: 9px; padding-left: 6px; margin-left: 0; } .nav__cta { gap: 8px; } .nav__cta .phone { display: none; } /* Buttons */ .btn { padding: 12px 18px; font-size: 13px; } .btn--sm { padding: 8px 12px; font-size: 12px; } /* Cards extra padding tighter */ .card { padding: 22px; } .pcard-photo__body { padding: 18px 18px 20px; gap: 8px; } .pcard-photo__title { font-size: 17px; } /* Channel rows (contact page) */ .channel { grid-template-columns: 44px 1fr !important; gap: 14px !important; padding: 20px 0 !important; } .channel > a:last-child { grid-column: 1 / -1; margin-top: 6px; justify-self: start; } /* Form field rows */ .field--row { grid-template-columns: 1fr !important; } /* FAQ summary tighter */ .faq__row summary { grid-template-columns: 36px 1fr 24px !important; font-size: 16px !important; gap: 10px !important; } .faq__a { padding-left: 46px !important; padding-right: 0 !important; } .faq__a p { font-size: 15px !important; } /* Drop cap smaller on mobile */ .lede--drop::first-letter, .section .wrap > p.lede:first-of-type::first-letter { font-size: 3.4em; padding: 0.04em 0.08em 0 0; } /* Filter pills wrap nicely */ .filters { gap: 6px; } .filter { padding: 7px 12px !important; font-size: 10px !important; } } /* ---------- Very small phone (≤400px) ---------- */ @media (max-width: 400px) { :root { --gutter: 16px; } /* Stack hero stats 1 col */ [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(4,1fr)"] > div:nth-child(2n) { padding-left: 0 !important; border-left: 0 !important; } [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: 1fr !important; } [style*="grid-template-columns:repeat(5,1fr)"] > div:nth-child(2n) { padding-left: 0 !important; border-left: 0 !important; } /* Stack client strip 1 col */ .client-strip { grid-template-columns: 1fr; } .client-strip__cell { border-right: 0 !important; border-bottom: 1px solid var(--hairline); } .client-strip__cell:last-child { border-bottom: 0; } /* Hide brand suffix entirely */ .brand small { display: none; } /* Tighten further */ h1 { font-size: clamp(28px, 9vw, 38px); } h2 { font-size: clamp(20px, 7vw, 28px); } /* Single-column lifecycle list */ .lifecycle__list { grid-template-columns: 1fr !important; } } /* ============================================================ Tools landing page — card grid ============================================================ */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); } .tool-card { background: var(--paper); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; min-height: 280px; text-decoration: none; color: inherit; position: relative; transition: background .2s ease; } .tool-card[href]:hover { background: color-mix(in oklab, var(--accent) 4%, var(--paper)); } .tool-card[href]:hover .tool-card__icon { border-color: var(--accent); color: var(--accent); } .tool-card[href]:hover .arrow { transform: translateX(6px); } .tool-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; } .tool-card__icon { width: 52px; height: 52px; border: 1px solid var(--hairline-2); display: grid; place-items: center; color: var(--ink); transition: border-color .2s ease, color .2s ease; flex-shrink: 0; } .tool-card__icon svg { width: 30px; height: 30px; } .tool-card__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); } .tool-card__title { font-family: var(--sans); font-weight: 500; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); margin: 0; } .tool-card__title small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); font-weight: 400; margin-top: 4px; } .tool-card__desc { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 50ch; flex: 1; } .tool-card__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline); } .tool-card__cta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; } .tool-card__cta .arrow { transition: transform .25s ease; } .tool-card__badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--hairline); border-radius: 999px; color: var(--muted); background: var(--paper); } /* "Coming soon" card variant: faded, not clickable */ .tool-card--soon { cursor: default; } .tool-card--soon .tool-card__title, .tool-card--soon .tool-card__desc, .tool-card--soon .tool-card__icon { opacity: 0.6; } /* CTA-style card (Need a different calculator?) — sits in the empty grid cell */ .tool-card--cta { background: var(--paper-2); } .tool-card--cta:hover { background: color-mix(in oklab, var(--accent) 6%, var(--paper-2)); } /* Breadcrumb (used on sub-tool pages) */ .breadcrumb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .breadcrumb a { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: color .15s ease; } .breadcrumb a:hover { color: var(--accent); } @media (max-width: 600px) { .tool-grid { grid-template-columns: 1fr; } .tool-card { min-height: 0; padding: 28px 24px; } } /* ============================================================ Project Budget Calculator (/tools) ============================================================ */ .calc { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; border: 1px solid var(--hairline); background: var(--paper); } .calc__inputs { padding: clamp(24px, 3vw, 40px); border-right: 1px solid var(--hairline); background: var(--paper); } .calc__results { padding: clamp(24px, 3vw, 40px); background: var(--paper-2); } .calc__step { border: 0; padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--hairline); } .calc__step:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .calc__step legend { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding: 0; margin-bottom: 14px; display: block; width: 100%; } .calc__cards { display: grid; gap: 8px; } .calc__cards--2 { grid-template-columns: 1fr 1fr; } .calc__cards--3 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .calc__cards--4 { grid-template-columns: repeat(4, 1fr); } .calc__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; padding: 14px 14px; border: 1px solid var(--hairline); background: var(--paper); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; font-size: 14px; font-weight: 500; color: var(--ink-2); min-height: 56px; } .calc__card input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .calc__card small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; font-weight: 400; color: var(--muted); margin-top: 4px; text-transform: none; } .calc__card:hover { border-color: var(--accent); color: var(--ink); } .calc__card.is-selected { background: var(--ink); border-color: var(--ink); color: var(--paper); } .calc__card.is-selected small { color: var(--paper-3); } .calc__card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .calc__area { display: grid; gap: 14px; } .calc__area-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .calc__area input[type="number"], .calc__area input[type="text"] { font-family: var(--sans); font-size: 22px; font-weight: 500; padding: 14px 16px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 0; color: var(--ink); width: 100%; transition: border-color .15s ease; font-variant-numeric: tabular-nums; } .calc__area input[type="number"]:focus, .calc__area input[type="text"]:focus { outline: 0; border-color: var(--accent); } .calc__unit-toggle { display: flex; } .calc__unit-toggle button { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 14px; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink-2); cursor: pointer; transition: background .15s ease, color .15s ease; } .calc__unit-toggle button:first-child { border-right: 0; } .calc__unit-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* Slider */ .calc__area input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--hairline); cursor: pointer; outline: none; padding: 0; margin: 4px 0; } .calc__area input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--accent); cursor: pointer; border: 0; transition: transform .15s ease; } .calc__area input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); } .calc__area input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: var(--accent); border: 0; cursor: pointer; } .calc__area-range { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* Results */ .calc__results-block { display: grid; gap: 0; } .calc__results-block + .calc__results-block { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hairline); } .calc__block-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; } .calc__block-sub { font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } .calc__line { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; } .calc__line-label { font-size: 14px; color: var(--ink-2); display: flex; align-items: baseline; gap: 8px; } .calc__line-value { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; /* Two-column grid: prefix locks left edge, number locks right edge, so AED labels stack vertically and digit groups align cleanly. */ display: inline-grid; grid-template-columns: auto minmax(110px, auto); column-gap: 8px; align-items: baseline; justify-self: end; } .calc__line-prefix { color: var(--muted); font-weight: 400; text-align: right; } .calc__line-num { text-align: right; font-variant-numeric: tabular-nums; } /* Expandable line (Soft costs) */ .calc__line--expandable { border-bottom: 1px solid var(--hairline); } .calc__line--expandable summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 6px; padding: 14px 0; align-items: baseline; transition: color .15s ease; } .calc__line--expandable summary::-webkit-details-marker { display: none; } .calc__line--expandable summary .calc__line-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } /* Expand affordance — lives on its own quiet row under the value, spans full width so it reads as a discrete "click to view" cue rather than math notation next to the percentage. */ .calc__line-hint { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color .15s ease; justify-self: start; } .calc__line-hint-text { position: relative; } .calc__line-hint-text [data-state="open"] { display: none; } .calc__line-hint-text [data-state="closed"] { display: inline; } .calc__line-hint-icon { width: 12px; height: 12px; transition: transform .25s ease; flex: 0 0 auto; } .calc__line--expandable summary:hover .calc__line-hint, .calc__line--expandable summary:focus-visible .calc__line-hint { color: var(--accent); } .calc__line--expandable[open] .calc__line-hint { color: var(--accent); } .calc__line--expandable[open] .calc__line-hint-icon { transform: rotate(180deg); } .calc__line--expandable[open] .calc__line-hint-text [data-state="open"] { display: inline; } .calc__line--expandable[open] .calc__line-hint-text [data-state="closed"] { display: none; } .calc__breakdown { list-style: none; padding: 0 0 14px 0; margin: 0; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.5; } .calc__breakdown li { padding-left: 14px; position: relative; } .calc__breakdown li::before { content: "·"; position: absolute; left: 0; color: var(--accent); } /* Total */ .calc__total { margin-top: 24px; padding-top: 22px; border-top: 2px solid var(--ink); } .calc__total-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .calc__total-value { font-family: var(--sans); font-weight: 300; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -0.025em; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; display: inline-grid; grid-template-columns: auto auto; column-gap: 12px; align-items: baseline; } .calc__total-value .calc__line-prefix { font-family: var(--mono); font-size: 0.4em; font-weight: 400; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; } .calc__total-value .calc__line-num { text-align: right; font-variant-numeric: tabular-nums; } /* Impact block */ .calc__impact-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); align-items: start; } .calc__impact-row:last-of-type { border-bottom: 0; } .calc__impact-dot { width: 10px; height: 10px; border-radius: 999px; margin-top: 6px; } .calc__impact-row--risk .calc__impact-dot { background: #C2453E; } .calc__impact-row--savings .calc__impact-dot { background: #2F8D50; } .calc__impact-label { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink); } .calc__impact-desc { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 50ch; line-height: 1.5; } .calc__impact-value { font-family: var(--mono); font-size: 16px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-grid; grid-template-columns: auto minmax(110px, auto); column-gap: 8px; align-items: baseline; justify-self: end; } .calc__impact-row--risk .calc__line-prefix { color: #C2453E; } .calc__impact-row--savings .calc__line-prefix { color: #2F8D50; } .calc__impact-row--risk .calc__impact-value { color: #C2453E; } .calc__impact-row--savings .calc__impact-value { color: #2F8D50; } .calc__cta { margin-top: 18px; width: 100%; justify-content: center; } /* Error */ .calc__error { padding: 20px 22px; border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); background: color-mix(in oklab, var(--accent) 6%, transparent); color: var(--ink-2); font-size: 14px; line-height: 1.5; } .calc__error a { color: var(--accent); text-decoration: underline; } /* Lead-gen below calculator */ .calc__lead-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--hairline); align-items: start; } .calc__lead-wrap .stage-form { max-width: 100%; } /* Disclaimer */ .calc__disclaimer { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); line-height: 1.6; max-width: 72ch; } /* Inline variant — when the disclaimer sits directly under the lead-form description (inside the left column of .calc__lead-wrap), tighten the spacing so it reads as a footnote to the paragraph above rather than a standalone block. */ .calc__disclaimer--inline { margin-top: clamp(20px, 2.5vw, 32px); padding-top: 18px; } /* ============================================================ Cash-Flow / S-Curve dashboard ============================================================ */ /* Wide layout: inputs left (narrower), dashboard right (wider) */ .calc--wide { grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.6fr); } .calc__dashboard { padding: clamp(24px, 3vw, 40px); background: var(--paper-2); display: grid; gap: clamp(24px, 3vw, 36px); align-content: start; min-width: 0; /* allow chart canvas to shrink */ } /* Chart container */ .calc__chart-wrap { background: var(--paper); border: 1px solid var(--hairline); padding: clamp(16px, 2vw, 22px); position: relative; } .calc__chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .calc__chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .calc__chart-legend span { display: inline-flex; align-items: center; gap: 6px; } .calc__chart-legend span::before { content: ""; width: 10px; height: 10px; display: inline-block; border-radius: 50%; } .calc__chart-legend .lg-line::before { background: var(--ink); } .calc__chart-legend .lg-bar::before { background: var(--accent); } .calc__chart-canvas-box { position: relative; width: 100%; height: clamp(280px, 38vw, 420px); } /* Financial milestones */ .calc__milestones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--paper); border: 1px solid var(--hairline); } .calc__milestones--2 { grid-template-columns: repeat(2, 1fr); } .calc__milestone { padding: clamp(16px, 2vw, 22px); border-right: 1px solid var(--hairline); display: grid; gap: 6px; align-content: start; } .calc__milestone:last-child { border-right: 0; } .calc__milestone-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .calc__milestone-value { font-family: var(--sans); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; } .calc__milestone-sub { font-size: 12px; color: var(--muted); line-height: 1.45; } .calc__milestone--peak .calc__milestone-value { color: var(--accent); } /* Monthly cash-flow table */ .calc__table-wrap { background: var(--paper); border: 1px solid var(--hairline); } .calc__table-wrap summary { list-style: none; cursor: pointer; padding: 16px clamp(16px, 2vw, 22px); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .calc__table-wrap summary::-webkit-details-marker { display: none; } .calc__table-wrap[open] summary { border-bottom-color: var(--hairline); } .calc__table-wrap .chev { font-family: var(--sans); font-size: 18px; font-weight: 300; color: var(--muted); transition: transform .2s ease; } .calc__table-wrap[open] .chev { transform: rotate(45deg); } .calc__table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .calc__table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; } .calc__table thead th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; text-align: right; padding: 12px clamp(12px, 1.5vw, 18px); border-bottom: 1px solid var(--hairline); background: var(--paper-2); position: sticky; top: 0; } .calc__table thead th:first-child, .calc__table thead th:nth-child(2) { text-align: left; } .calc__table tbody td { padding: 10px clamp(12px, 1.5vw, 18px); border-bottom: 1px solid var(--hairline); text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; } .calc__table tbody td:first-child { text-align: left; font-family: var(--mono); font-size: 12px; color: var(--muted); width: 64px; } .calc__table tbody td:nth-child(2) { text-align: left; color: var(--ink); } .calc__table tbody tr:last-child td { border-bottom: 0; } .calc__table tbody tr.is-milestone td { background: color-mix(in oklab, var(--accent) 5%, transparent); } .calc__table tbody tr.is-milestone td:nth-child(2) { color: var(--accent); font-weight: 500; } /* ============================================================ Area-efficiency: horizontal bars (BUA/GFA/NSA leakage chart) ============================================================ */ .calc__bars { display: grid; gap: clamp(18px, 2vw, 26px); } .calc__bar { display: grid; gap: 8px; } .calc__bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .calc__bar-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; } .calc__bar-label::before { content: ""; width: 10px; height: 10px; display: inline-block; background: currentColor; } .calc__bar--bua .calc__bar-label { color: var(--accent); } .calc__bar--gfa .calc__bar-label { color: var(--ink); } .calc__bar--nsa .calc__bar-label { color: #2F8D50; } .calc__bar-value { font-family: var(--sans); font-size: clamp(18px, 2vw, 24px); font-weight: 500; color: var(--ink); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; line-height: 1.1; } .calc__bar-track { height: 26px; background: var(--paper-2); border: 1px solid var(--hairline); position: relative; overflow: hidden; } .calc__bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .8s cubic-bezier(.2,.7,.2,1); } .calc__bar--bua .calc__bar-fill { background: var(--accent); } .calc__bar--gfa .calc__bar-fill { background: var(--ink); } .calc__bar--nsa .calc__bar-fill { background: #2F8D50; } .calc__bar-sub { font-size: 12px; color: var(--muted); line-height: 1.5; max-width: 56ch; } /* Warning-style callout for dead area / inefficiency */ .calc__warn { border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); background: color-mix(in oklab, var(--accent) 5%, transparent); padding: clamp(16px, 2vw, 22px); display: grid; gap: 6px; } .calc__warn-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .calc__warn-value { font-family: var(--sans); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; } .calc__warn-sub { font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 62ch; } /* INGEX Impact narrative block (used by area-efficiency CTA) */ .calc__impact-block { border: 1px solid var(--hairline); background: var(--ink); color: var(--paper); padding: clamp(20px, 2.5vw, 28px); display: grid; gap: 14px; } .calc__impact-block .eyebrow { color: var(--accent); } .calc__impact-block h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 500; letter-spacing: -0.01em; color: var(--paper); margin: 0; line-height: 1.3; } .calc__impact-block p { color: var(--paper-3); font-size: 14px; line-height: 1.55; margin: 0; max-width: 62ch; } .calc__impact-block .btn { margin-top: 4px; justify-self: start; } /* ============================================================ Count-input grid (used by parking calculator unit mix) ============================================================ */ .calc__count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .calc__count-grid--2 { grid-template-columns: 1fr 1fr; } .calc__count { display: grid; gap: 6px; min-width: 0; } .calc__count label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .calc__count input { font-family: var(--sans); font-size: 18px; font-weight: 500; padding: 12px 14px; border: 1px solid var(--hairline); background: var(--paper); width: 100%; color: var(--ink); border-radius: 0; transition: border-color .15s ease; -moz-appearance: textfield; } .calc__count input::-webkit-outer-spin-button, .calc__count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .calc__count input:focus { outline: none; border-color: var(--accent); } /* ============================================================ Basement-level stack (visualisation for parking calculator) ============================================================ */ .calc__stack { display: grid; gap: 4px; background: var(--paper); border: 1px solid var(--hairline); padding: clamp(14px, 1.5vw, 18px); } .calc__stack-level { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); transition: background .25s ease, border-color .25s ease, color .25s ease; } .calc__stack-level small { font-family: var(--sans); font-size: 11px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; } .calc__stack-level--ground { background: transparent; border-style: dashed; color: var(--muted); } .calc__stack-level--risk { background: color-mix(in oklab, var(--accent) 8%, transparent); border-color: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent); } .calc__stack-level--risk small { color: color-mix(in oklab, var(--accent) 70%, var(--ink)); } .calc__stack-empty { padding: 18px 16px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--hairline); background: transparent; } /* Helper to compactly note an input's recommended hint */ .calc__hint { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 8px; } /* Mobile */ @media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc--wide { grid-template-columns: 1fr; } .calc__inputs { border-right: 0; border-bottom: 1px solid var(--hairline); } .calc__lead-wrap { grid-template-columns: 1fr; } .calc__milestones { grid-template-columns: 1fr; } .calc__milestone { border-right: 0; border-bottom: 1px solid var(--hairline); } .calc__milestone:last-child { border-bottom: 0; } .calc__chart-canvas-box { height: 280px; } } @media (max-width: 600px) { .calc__cards--3 { grid-template-columns: 1fr 1fr; } .calc__cards--4 { grid-template-columns: 1fr 1fr; } .calc__count-grid { grid-template-columns: 1fr; } .calc__count-grid--2 { grid-template-columns: 1fr; } } /* ============================================================ Home hero — Option C · full-bleed video Composition: brand mark stays visible in the centre of the video. Headline sits in the upper third. Lede + CTAs sit in the lower band over a paper-tinted gradient. ============================================================ */ .hero { position: relative; overflow: hidden; isolation: isolate; color: var(--paper); } .hero--video { min-height: clamp(580px, 92vh, 880px); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(90px, 13vw, 152px) 0 clamp(40px, 5vw, 80px); } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero__veil { position: absolute; inset: 0; z-index: -1; /* Vertical gradient: dark at top so the nav contrasts, fading to transparent over the centre (lets the brand mark show), deepening again at the bottom so the lede + buttons are readable. */ background: linear-gradient( 180deg, rgba(14,30,51,0.45) 0%, rgba(14,30,51,0.10) 25%, rgba(14,30,51,0.06) 60%, rgba(14,30,51,0.55) 88%, rgba(14,30,51,0.86) 100% ); } .hero .wrap { width: 100%; display: grid; grid-template-rows: auto 1fr auto; height: 100%; } .hero__top { align-self: start; } .hero__top .eyebrow { color: color-mix(in oklab, var(--paper) 80%, transparent); letter-spacing: 0.16em; } .hero__title { color: var(--paper); font-family: var(--sans); font-size: clamp(36px, 6vw, 76px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.04; margin: 18px 0 0; max-width: 17ch; text-shadow: 0 2px 32px rgba(0,0,0,0.45); } .hero__title .accent { color: var(--accent); } .hero__bottom { align-self: end; display: grid; gap: 24px; max-width: 64ch; } .hero__lede { color: var(--paper); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,0.55); } .hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; } .hero__ctas .btn--ghost { background: transparent; color: var(--paper); border-color: color-mix(in oklab, var(--paper) 72%, transparent); } .hero__ctas .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } /* Reduced-motion fallback — swap the video for the still poster */ @media (prefers-reduced-motion: reduce) { .hero__video { display: none; } .hero--video { background-image: url(/assets/img/hero/hero-loop-poster.jpg); background-size: cover; background-position: center; } } /* Mobile — shorten min-height, soften gradient a touch */ @media (max-width: 720px) { .hero--video { min-height: 88vh; padding-top: clamp(96px, 18vw, 132px); } .hero__title { max-width: 14ch; } } /* ============================================================ Intro overlay — first-visit "lockup → zoom-in" cover The element is rendered in DOM on every load but a tiny inline gate-script in adds either: html.intro-locked — first visit, overlay will show html.intro-skip — sessionStorage already saw it, skip so there is no FOUC for returning visitors. ============================================================ */ /* Lock scroll while overlay is on screen */ html.intro-locked, html.intro-locked body { overflow: hidden; touch-action: none; overscroll-behavior: none; } /* If session-flagged as seen, never render the overlay */ html.intro-skip .intro { display: none !important; } .intro { position: fixed; inset: 0; z-index: 250; background: var(--paper); display: grid; place-items: center; overflow: hidden; isolation: isolate; opacity: 1; visibility: visible; /* Fade + hide once dismiss completes */ transition: opacity 0.55s ease 0.85s, visibility 0s linear 1.45s; } /* Faint architect's graph paper inside the overlay — premium quiet detail */ .intro::after { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(14,30,51,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(14,30,51,0.025) 1px, transparent 1px), linear-gradient(rgba(14,30,51,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(14,30,51,0.05) 1px, transparent 1px); background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); pointer-events: none; } .intro.is-dismissed { opacity: 0; visibility: hidden; pointer-events: none; } .intro__inner { position: relative; z-index: 2; text-align: center; display: grid; gap: clamp(24px, 3vw, 36px); justify-items: center; padding: clamp(24px, 3vw, 48px); } .intro__lockup { width: clamp(280px, 52vw, 760px); height: auto; display: block; transform-origin: center center; opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 1.0s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s, transform 1.0s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s; will-change: transform, opacity; } .intro.is-in .intro__lockup { opacity: 1; transform: none; } /* Zoom toward the camera on dismiss */ .intro.is-dismissed .intro__lockup { transition: transform 1.4s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.55s cubic-bezier(0.4, 0, 0.6, 1) 0.85s; transform: scale(8); opacity: 0; } .intro__rule { width: clamp(80px, 14vw, 200px); height: 1px; background: var(--ink); opacity: 0; transform: scaleX(0.3); transition: opacity .8s ease 0.55s, transform 1.0s cubic-bezier(0.2,0.8,0.2,1) 0.55s; } .intro.is-in .intro__rule { opacity: 1; transform: scaleX(1); } .intro.is-dismissed .intro__rule { transition: opacity 0.35s ease; opacity: 0; } .intro__caption { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity .8s ease 0.75s, transform .8s ease 0.75s; } .intro.is-in .intro__caption { opacity: 1; transform: none; } .intro.is-dismissed .intro__caption { transition: opacity 0.3s ease; opacity: 0; } .intro__caption .dot { color: var(--accent); margin: 0 0.5em; } .intro__hint { position: absolute; bottom: clamp(40px, 6vw, 88px); left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .8s ease 1.3s; } .intro.is-in .intro__hint { opacity: 1; } .intro.is-dismissed .intro__hint { transition: opacity 0.25s ease; opacity: 0; } .intro__hint .arr { display: inline-block; animation: intro-hint 2.0s ease-in-out 1.6s infinite; } @keyframes intro-hint { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(6px); opacity: 1; } } .intro__edge { position: absolute; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .8s ease 0.95s; } .intro.is-in .intro__edge { opacity: 1; } .intro.is-dismissed .intro__edge { transition: opacity 0.3s ease; opacity: 0; } .intro__edge--tl { top: clamp(20px, 3vw, 36px); left: clamp(20px, 3vw, 36px); color: var(--accent); } .intro__edge--tr { top: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); } @media (prefers-reduced-motion: reduce) { .intro, .intro__lockup, .intro__rule, .intro__caption, .intro__hint, .intro__edge { transition: none !important; animation: none !important; opacity: 1; transform: none; } .intro.is-dismissed .intro__lockup { transform: none; opacity: 0; } .intro.is-dismissed { transition: none !important; opacity: 0; visibility: hidden; } }