/* ============================================================ TESSERACT AI — one pager Type: Geist / Geist Mono (variable, Google Fonts) Paper palette + brand gradient (#F68D0D -> #FF463A -> #FB2A51) ============================================================ */ :root{ color-scheme: light only; /* ---- surfaces ---- */ --paper: #F7F7F4; --paper-warm: #F2F1ED; /* section tones — the "different colours per section" ladder, kept neutral */ --tone-1: #F7F7F4; --tone-2: #F1EFE9; --tone-3: #E9E6DE; --surface: #FFFFFF; --surface-sunk: #EDEBE5; --ink-block: #1B1A16; /* ---- line ---- */ --line: #E4E2DB; --line-strong: #D6D3CA; --line-faint: #EDEBE5; /* ---- text ---- */ --ink: #1B1A16; --ink-70: rgba(27,26,22,.70); --ink-58: rgba(27,26,22,.58); --ink-42: rgba(27,26,22,.58); --ink-28: rgba(27,26,22,.45); --on-ink: #F7F7F4; --on-ink-60: rgba(247,247,244,.60); --on-ink-38: rgba(247,247,244,.38); /* ---- brand ---- */ --amber: #F68D0D; --flame: #FF463A; --rose: #FB2A51; --rose-pale: #F9909B; --amber-pale: #FBB388; --accent: #E8431F; --ok: #43B77D; /* success only - deliberately outside the brand ramp */ --brand: linear-gradient(104deg, var(--amber) 0%, var(--flame) 54%, var(--rose) 100%); --brand-v: linear-gradient(180deg, var(--rose) 0%, var(--flame) 50%, var(--amber) 100%); /* ---- geometry ---- */ --r-sm: 4px; --r: 6px; --r-lg: 10px; --gutter: clamp(20px, 5vw, 56px); --maxw: 1280px; --measure: 62ch; --nav-h: 62px; /* ---- motion ---- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur: .5s; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; font-size:16px; font-weight:400; line-height:1.6; letter-spacing:-.011em; font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } body.is-locked{ overflow:hidden; } /* height:auto is essential: wp_get_attachment_image() emits real width/height attributes, and without this the height attribute wins over width:100% and the image renders stretched. */ img{ max-width:100%; height:auto; display:block; } svg,video{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } h1,h2,h3,h4,p,figure,ul,ol{ margin:0; } ul,ol{ padding:0; list-style:none; } ::selection{ background:rgba(255,70,58,.18); color:var(--ink); } .inkblock ::selection{ background:rgba(255,70,58,.32); color:var(--on-ink); } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } /* paper grain — the Cursor-ish tactility, very low opacity */ .grain{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.038; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .skip{ position:absolute; left:-9999px; top:0; z-index:10000; background:var(--ink); color:var(--on-ink); padding:12px 18px; border-radius:0 0 var(--r) 0; font-size:13px; } .skip:focus{ left:0; } /* ------------------------------------------------------------ TYPE ------------------------------------------------------------ */ .display{ font-size:clamp(2.6rem, 7.2vw, 5.6rem); font-weight:450; line-height:.96; letter-spacing:-.042em; text-wrap:balance; } .h2{ font-size:clamp(1.85rem, 4.2vw, 3.1rem); font-weight:450; line-height:1.05; letter-spacing:-.034em; text-wrap:balance; } .h3{ font-size:clamp(1.15rem, 1.9vw, 1.4rem); font-weight:500; line-height:1.2; letter-spacing:-.021em; } .h4{ font-size:1.0625rem; font-weight:500; line-height:1.3; letter-spacing:-.017em; } .lead{ font-size:clamp(1.0625rem, 1.35vw, 1.28rem); line-height:1.52; letter-spacing:-.014em; color:var(--ink-70); max-width:var(--measure); } .body{ color:var(--ink-58); max-width:var(--measure); } .lead strong,.body strong,.card p strong{ font-weight:500; color:var(--ink); } .body + .body{ margin-top:1.1em; } .lead + .body{ margin-top:1.15em; } .lead + .flist,.body + .flist{ margin-top:28px; } .flist + .body{ margin-top:26px; } .small{ font-size:.9375rem; line-height:1.55; letter-spacing:-.012em; color:var(--ink-58); } .mono{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-ligatures:none; } /* mono eyebrow with brand tick — the section signature */ .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.6875rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-42); margin-bottom:26px; } .eyebrow::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--brand); flex:none; } .eyebrow--light{ color:var(--on-ink-60); } /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } .section{ padding-block:clamp(52px, 7vh, 96px); position:relative; } .section--tight{ padding-block:clamp(44px, 5.5vh, 76px); } .rule{ height:1px; background:var(--line); border:0; margin:0; } .wrap > .rule{ margin-inline:calc(var(--gutter) * -1); } .grid{ display:grid; gap:clamp(28px,4vw,56px); } .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,80px); align-items:start; } .tone-1{ background:var(--tone-1); } .tone-2{ background:var(--tone-2); } .tone-3{ background:var(--tone-3); } /* cards need to stay distinct from whatever tone sits behind them */ .tone-2 .card,.tone-3 .card,.tone-2 .pcard,.tone-3 .pcard, .tone-2 .figbox,.tone-3 .figbox{ background:var(--surface); } /* ------------------------------------------------------------ NAV ------------------------------------------------------------ */ .nav{ position:fixed; inset:0 0 auto 0; z-index:8000; height:var(--nav-h); display:flex; align-items:center; border-bottom:1px solid transparent; transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease); } .nav.is-stuck{ background:rgba(247,247,244,.78); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); border-bottom-color:var(--line); } .nav__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:24px; } .brand{ display:flex; align-items:center; flex:none; } .brand img{ height:21px; width:auto; } .nav__links{ display:flex; align-items:center; gap:4px; margin-left:auto; } .nav__link{ position:relative; font-size:.8125rem; letter-spacing:-.008em; color:var(--ink-58); padding:7px 12px; border-radius:var(--r-sm); transition:color .2s var(--ease), background .2s var(--ease); } .nav__link:hover{ color:var(--ink); background:rgba(27,26,22,.045); } .nav__link.is-active{ color:var(--ink); } .nav__link.is-active::after{ content:""; position:absolute; left:12px; right:12px; bottom:1px; height:2px; border-radius:2px; background:var(--brand); } .nav__cta{ margin-left:12px; } .nav__burger{ display:none; margin-left:auto; width:38px; height:38px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; } .nav__burger span{ display:block; width:15px; height:1.5px; background:var(--ink); position:relative; transition:transform .3s var(--ease), background .2s; } .nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:15px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; } .nav__burger span::before{ top:-5px; } .nav__burger span::after{ top:5px; } .nav__burger[aria-expanded="true"] span{ background:transparent; } .nav__burger[aria-expanded="true"] span::before{ transform:translateY(5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span::after{ transform:translateY(-5px) rotate(-45deg); } .mobilenav{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:7900; background:var(--paper); padding:32px var(--gutter) 48px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; overflow-y:auto; } .mobilenav.is-open{ opacity:1; visibility:visible; transform:none; } .mobilenav a{ font-size:1.6rem; font-weight:450; letter-spacing:-.03em; padding:14px 0; border-bottom:1px solid var(--line-faint); } .mobilenav .btn{ margin-top:28px; font-size:.8125rem; justify-content:center; } /* ------------------------------------------------------------ BUTTONS ------------------------------------------------------------ */ .btn{ display:inline-flex; align-items:center; gap:9px; font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.6875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:12px 18px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); } .btn__arrow{ transition:transform .28s var(--ease-out); flex:none; } .btn:hover .btn__arrow{ transform:translateX(3px); } .btn--primary{ background:var(--ink); color:var(--on-ink); } .btn--primary:hover{ background:#000; } .btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; } .btn--ghost:hover{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); } .btn--onink{ background:var(--on-ink); color:var(--ink); } .btn--onink:hover{ background:#fff; } .btn--sm{ padding:9px 14px; } /* text link with animated brand underline */ .tlink{ display:inline-flex; align-items:center; gap:8px; position:relative; font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.6875rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); padding-bottom:5px; } .tlink::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%; background:var(--brand); transform-origin:left; transform:scaleX(0); transition:transform .38s var(--ease-out); } .tlink:hover::after{ transform:scaleX(1); } .tlink .btn__arrow{ transition:transform .28s var(--ease-out); } .tlink:hover .btn__arrow{ transform:translateX(3px); } /* ------------------------------------------------------------ HERO ------------------------------------------------------------ */ .hero{ padding-top:calc(var(--nav-h) + clamp(48px, 9vh, 104px)); padding-bottom:0; } .hero__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:end; } .hero__title .accent-stop{ display:inline-block; width:.30em; height:.30em; border-radius:50%; background:var(--brand); vertical-align:baseline; margin-left:.04em; } .hero__card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper-warm); padding:clamp(24px,2.6vw,32px); } .hero__card .h3{ margin-bottom:14px; } .hero__card .small{ margin-bottom:24px; } .hero__meta{ display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:34px; font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-42); } .hero__meta span{ display:inline-flex; align-items:center; gap:8px; } .hero__meta span::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); flex:none; } .hero__figure{ margin-top:clamp(40px,6vh,72px); position:relative; } .hero__figure img{ width:100%; height:clamp(230px,42vh,420px); object-fit:cover; border-radius:var(--r-lg); filter:saturate(.72) contrast(1.04); } .hero__figure::after{ content:""; position:absolute; inset:0; border-radius:var(--r-lg); background:linear-gradient(175deg, rgba(247,247,244,0) 55%, rgba(247,247,244,.5) 100%); pointer-events:none; } .hero__caption{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; flex-wrap:wrap; gap:6px 26px; padding:16px clamp(18px,2.4vw,26px); font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.82); background:linear-gradient(to top, rgba(20,20,18,.55), rgba(20,20,18,0)); border-radius:0 0 var(--r-lg) var(--r-lg); } /* ------------------------------------------------------------ STATS ------------------------------------------------------------ */ .stats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); } .stat{ padding:30px 22px 30px 0; border-right:1px solid var(--line); } .stat:last-child{ border-right:0; } .stat:not(:first-child){ padding-left:22px; } .stat__value{ font-size:clamp(1.9rem,3.4vw,2.85rem); font-weight:450; letter-spacing:-.045em; line-height:1; margin-bottom:12px; font-variant-numeric:tabular-nums; } .stat__label{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); margin-bottom:7px; } .stat__note{ font-size:.8125rem; line-height:1.45; color:var(--ink-42); } /* ------------------------------------------------------------ CARDS ------------------------------------------------------------ */ .card{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:clamp(22px,2.2vw,28px); display:flex; flex-direction:column; gap:12px; transition:border-color .28s var(--ease), transform .38s var(--ease-out), background .28s var(--ease); } .card:hover{ border-color:var(--line-strong); transform:translateY(-2px); } .card__idx{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.12em; color:var(--ink-28); display:flex; align-items:center; gap:10px; margin-bottom:6px; } .card__idx::after{ content:""; height:1px; flex:1; background:var(--line); } .card p:not(.card__idx){ color:var(--ink-58); font-size:.9375rem; line-height:1.55; } /* feature list — hairline separated, no boxes */ .flist{ border-top:1px solid var(--line); } .flist__item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,3vw,44px); padding:26px 0; border-bottom:1px solid var(--line); } .flist__num{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.12em; color:var(--ink-28); padding-top:5px; } .flist__item .h4{ margin-bottom:9px; } .flist__item p{ color:var(--ink-58); font-size:.9375rem; line-height:1.6; max-width:58ch; } /* pull quote */ .pull{ margin-top:clamp(44px,6vw,72px); padding-left:clamp(20px,2.6vw,34px); border-left:2px solid transparent; border-image:var(--brand-v) 1; font-size:clamp(1.4rem,2.9vw,2.15rem); font-weight:450; line-height:1.18; letter-spacing:-.03em; max-width:22ch; } /* ------------------------------------------------------------ INK BLOCK (the dark section) ------------------------------------------------------------ */ .inkblock{ background:var(--ink-block); color:var(--on-ink); } .inkblock .h2,.inkblock .h3,.inkblock .h4{ color:var(--on-ink); } .inkblock .lead{ color:var(--on-ink-60); } .inkblock p{ color:var(--on-ink-60); } .inkblock .rule,.inkblock .flist,.inkblock .flist__item{ border-color:rgba(247,247,244,.13); } .inkblock .flist__num{ color:var(--on-ink-38); } /* responsibility split */ .layers{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; margin-top:clamp(36px,5vw,60px); } .layer{ padding:clamp(24px,2.6vw,34px); border:1px solid rgba(247,247,244,.13); } .layer:first-child{ border-radius:var(--r) 0 0 var(--r); border-right:0; position:relative; } .layer:last-child{ border-radius:0 var(--r) var(--r) 0; background:rgba(247,247,244,.028); } .layer:first-child::after{ content:""; position:absolute; top:0; right:-1px; bottom:0; width:2px; background:var(--brand-v); z-index:2; } .layer__title{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.6875rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-ink); margin-bottom:6px; } .layer__sub{ font-size:.8125rem; color:var(--on-ink-38); margin-bottom:22px; line-height:1.5; } .layer ul{ display:flex; flex-direction:column; } .layer li{ padding:11px 0; border-top:1px solid rgba(247,247,244,.1); font-size:.9375rem; letter-spacing:-.01em; display:flex; align-items:center; gap:12px; } .layer li::before{ content:""; width:5px; height:5px; border-radius:1px; flex:none; background:var(--on-ink-38); } .layer:first-child li::before{ background:var(--brand); } /* ------------------------------------------------------------ FIGURES / CHARTS ------------------------------------------------------------ */ .figbox{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:clamp(20px,2.4vw,30px); } .inkblock .figbox{ background:rgba(247,247,244,.03); border-color:rgba(247,247,244,.13); } .figbox__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .figbox__title{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); } .inkblock .figbox__title{ color:var(--on-ink); } .legend{ display:flex; flex-wrap:wrap; gap:6px 18px; font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-42); } .inkblock .legend{ color:var(--on-ink-38); } .legend i{ display:inline-flex; align-items:center; gap:7px; font-style:normal; } .legend i::before{ content:""; width:10px; height:3px; border-radius:2px; background:currentColor; flex:none; } .legend .k-grid::before{ background:rgba(27,26,22,.30); } .inkblock .legend .k-grid::before{ background:rgba(247,247,244,.3); } .legend .k-batt::before{ background:var(--brand); } .legend .k-price::before{ background:var(--ink-42); } .inkblock .legend .k-price::before{ background:rgba(247,247,244,.5); } .figcap{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:.8125rem; line-height:1.5; color:var(--ink-42); max-width:56ch; } .inkblock .figcap{ border-color:rgba(247,247,244,.13); color:var(--on-ink-38); } /* australia map */ .map{ width:100%; height:auto; } .map__outline{ fill:var(--surface-sunk); stroke:var(--line-strong); stroke-width:2.5; stroke-linejoin:round; } .map__site{ opacity:0; transform-box:fill-box; transform-origin:center; } .map__site circle{ fill:var(--accent); } .map__site .halo{ fill:none; stroke:var(--accent); stroke-width:2; opacity:.3; } .reveal-in .map__site{ animation:pop .5s var(--ease-out) forwards; } @keyframes pop{ from{ opacity:0; transform:scale(.2);} to{ opacity:1; transform:scale(1);} } @keyframes ping{ 0%{ r:5; opacity:.5;} 100%{ r:16; opacity:0;} } .reveal-in .map__site .halo{ animation:ping 2.6s var(--ease-out) infinite; } .map__label{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:30px; letter-spacing:.09em; fill:var(--ink-58); font-weight:500; paint-order:stroke fill; stroke:var(--paper); stroke-width:6px; stroke-linejoin:round; text-transform:uppercase; } /* line charts */ .chart-grid line{ stroke:var(--line); stroke-width:1; } .inkblock .chart-grid line{ stroke:rgba(247,247,244,.1); } .chart-axis{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; /* user units: scaled by the viewBox, so ~12px on screen at desktop widths */ font-size:20px; letter-spacing:.06em; fill:var(--ink-58); text-transform:uppercase; } .inkblock .chart-axis{ fill:rgba(247,247,244,.62); } .path-draw{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); } .reveal-in .path-draw{ animation:draw 1.5s var(--ease-out) forwards; } @keyframes draw{ to{ stroke-dashoffset:0; } } .area-fade{ opacity:0; } .reveal-in .area-fade{ animation:fadein .9s .7s var(--ease) forwards; } @keyframes fadein{ to{ opacity:1; } } .bar{ transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); } .reveal-in .bar{ animation:grow .55s var(--ease-out) forwards; } @keyframes grow{ to{ transform:scaleY(1); } } /* ------------------------------------------------------------ NVIDIA INCEPTION PANEL (foot of About) ------------------------------------------------------------ */ .nvpanel{ margin-top:clamp(40px,4.6vw,64px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.46fr); gap:clamp(26px,3.4vw,56px); align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,3vw,44px); } .nvpanel p{ color:var(--ink-70); font-size:.9375rem; line-height:1.62; } .nvpanel p + p{ margin-top:14px; } /* the theme reset strips link styling, so body links in here need their own */ .nvpanel a{ color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--line-strong); transition:text-decoration-color .25s var(--ease), color .25s var(--ease); } .nvpanel a:hover{ color:var(--accent); text-decoration-color:var(--accent); } .nvpanel__mark{ margin:0; } /* the supplied lockup is artwork on white, so it sits on the panel's own surface without a frame of its own */ .nvpanel__mark img{ display:block; width:100%; height:auto; max-width:430px; margin-left:auto; } @media (max-width:900px){ .nvpanel{ grid-template-columns:1fr; } .nvpanel__mark img{ margin-left:0; max-width:380px; } } /* ------------------------------------------------------------ LEADERSHIP ------------------------------------------------------------ */ .team{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,52px) clamp(24px,2.8vw,44px); } .person__frame{ border-radius:var(--r-lg); overflow:hidden; background:var(--surface-sunk); border:1px solid var(--line); } .person__frame img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; /* the same matte the hero and section photos carry, so the headshots sit in the paper palette instead of punching out of it */ filter:saturate(.72) contrast(1.04); transition:filter .45s var(--ease), transform .6s var(--ease-out); } .person:hover .person__frame img{ filter:saturate(.95) contrast(1.02); transform:scale(1.03); } .person__name{ margin-top:16px; font-size:1.0625rem; font-weight:560; letter-spacing:-.012em; color:var(--ink); } .person__role{ margin-top:3px; font-size:.875rem; line-height:1.45; color:var(--ink-58); } @media (max-width:860px){ .team{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .person__name{ font-size:1rem; } .person__role{ font-size:.8125rem; } } /* ------------------------------------------------------------ PARTNER LOGO WALL A 1px grid gap over a line-coloured backing paints the hairline rules between cells, so no cell needs its own borders to line up. ------------------------------------------------------------ */ .logowall{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } .logowall__cell{ background:var(--surface); display:grid; place-items:center; min-height:clamp(104px,10vw,138px); padding:clamp(24px,2.8vw,36px) clamp(18px,2.4vw,34px); transition:background .3s var(--ease); } .logowall__cell:hover{ background:var(--paper); } .logowall img{ display:block; width:auto; height:auto; max-width:min(100%,190px); /* --logo-h is set per cell: a wordmark and a square mark of the same pixel height do not read as the same size, so each is capped where it balances. */ max-height:calc(var(--logo-h,46px) * var(--logo-s,1)); } @media (max-width:860px){ .logowall{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .logowall{ --logo-s:.8; } .logowall img{ max-width:min(100%,150px); } } /* ------------------------------------------------------------ PARTNERSHIP CARDS ------------------------------------------------------------ */ .pcard{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:clamp(24px,2.4vw,30px); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:border-color .3s var(--ease), transform .4s var(--ease-out); } .pcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-out); } .pcard:hover{ border-color:var(--line-strong); transform:translateY(-3px); } .pcard:hover::before{ transform:scaleX(1); } .pcard .h3{ margin-bottom:12px; } .pcard p:not(.card__idx){ color:var(--ink-58); font-size:.9375rem; line-height:1.58; margin-bottom:26px; flex:1; } /* ------------------------------------------------------------ CONTACT ------------------------------------------------------------ */ .contact{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(36px,5vw,80px); } .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; } .field label{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-60); } .field input,.field select,.field textarea{ background:rgba(247,247,244,.045); border:1px solid rgba(247,247,244,.16); border-radius:var(--r-sm); padding:12px 14px; color:var(--on-ink); font-size:.9375rem; letter-spacing:-.008em; width:100%; transition:border-color .22s var(--ease), background .22s var(--ease); } .field textarea{ resize:vertical; min-height:104px; } .field input::placeholder,.field textarea::placeholder{ color:var(--on-ink-38); } .field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(247,247,244,.28); } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--flame); background:rgba(247,247,244,.07); } .field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23F7F7F4' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; } .field select option{ background:#1B1A16; color:#F7F7F4; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field-row .field{ margin-bottom:18px; } .cdetails{ display:flex; flex-direction:column; } .cdetail{ padding:22px 0; border-top:1px solid rgba(247,247,244,.13); } .cdetail:last-child{ border-bottom:1px solid rgba(247,247,244,.13); } .cdetail__k{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-38); margin-bottom:9px; } .cdetail__v{ font-size:1.0625rem; letter-spacing:-.018em; color:var(--on-ink); } a.cdetail__v{ position:relative; display:inline-block; } a.cdetail__v::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease-out); } a.cdetail__v:hover::after{ transform:scaleX(1); } .formnote{ font-size:.75rem; color:var(--on-ink-38); margin-top:14px; line-height:1.5; } .foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-block:28px; border-top:1px solid rgba(247,247,244,.13); } .foot__c{ font-size:.8125rem; color:var(--on-ink-38); } .foot__mark{ display:flex; align-items:center; gap:12px; } .foot__mark svg{ width:22px; height:22px; } .foot__mark span{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-ink); } .totop{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-38); display:inline-flex; align-items:center; gap:8px; transition:color .2s; } .totop:hover{ color:var(--on-ink); } /* ------------------------------------------------------------ REVEAL ------------------------------------------------------------ */ [data-reveal]{ opacity:0; transform:translateY(18px); } [data-reveal].reveal-in{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:var(--d,0ms); } @media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1 !important; transform:none !important; } .reveal-in .path-draw,.reveal-in .area-fade,.reveal-in .bar,.reveal-in .map__site{ animation:none !important; } .path-draw{ stroke-dashoffset:0 !important; } .area-fade{ opacity:1 !important; } .bar{ transform:none !important; } .map__site{ opacity:1 !important; } *{ transition-duration:.01ms !important; } } /* ------------------------------------------------------------ RESPONSIVE ------------------------------------------------------------ */ @media (max-width:1080px){ .stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } .stat{ border-bottom:1px solid var(--line); padding-inline:0 22px; } .stat:nth-child(3n){ border-right:0; } .stat:nth-child(3n+1){ padding-left:0; } .stat:nth-child(n+4){ border-bottom:0; } .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:900px){ :root{ --nav-h:58px; } .grid-3{ grid-template-columns:1fr; } .nav__links,.nav__cta{ display:none; } .nav__burger{ display:flex; } .hero__grid{ grid-template-columns:1fr; align-items:start; gap:34px; } .split{ grid-template-columns:1fr; } .contact{ grid-template-columns:1fr; } .layers{ grid-template-columns:1fr; } .layer:first-child{ border-radius:var(--r) var(--r) 0 0; border-right:1px solid rgba(247,247,244,.13); border-bottom:0; } .layer:last-child{ border-radius:0 0 var(--r) var(--r); } .layer:first-child::after{ top:auto; bottom:-1px; left:0; right:0; width:auto; height:2px; background:var(--brand); } } /* --- mobile diagram legibility --------------------------------------- These SVGs scale with their viewBox, so their text shrank with them: measured 4.1-5.2px on a 390px screen. Sizes below are in user units, chosen so each lands at ~11-12px once the viewBox scale is applied. --- */ @media (max-width:760px){ .chart-axis{ font-size:24px; letter-spacing:.05em; } .figbox svg .chart-axis[style*="font-size"]{ font-size:24px !important; } .map__label{ display:none; } /* labels collide once legible; dots carry the meaning */ .map__site circle{ r:9; } .map__site .halo{ stroke-width:4; } .legend{ font-size:.6875rem; } .figbox__title{ font-size:.6875rem; } .hero__caption{ font-size:.6875rem !important; letter-spacing:.08em; } .stat__label,.card__idx,.flist__num,.cdetail__k,.figbox__title{ font-size:.6875rem; } /* sticky panels pin awkwardly once the layout is a single column */ #product figure,#energy .figbox{ position:static !important; } } @media (max-width:640px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .stat{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 18px 24px 0; } .stat:nth-child(2n){ border-right:0; padding-left:18px; } .stat:nth-child(2n+1){ padding-left:0; } .stat:last-child{ border-bottom:0; grid-column:1/-1; } .grid-2,.grid-4{ grid-template-columns:1fr; } .field-row{ grid-template-columns:1fr; gap:0; } .flist__item{ grid-template-columns:1fr; gap:10px; } .flist__num{ padding-top:0; } .hero__caption{ font-size:.5625rem; gap:4px 16px; } } /* ============================================================ DATA TABLE (Western Sydney grid-connection figures) ============================================================ */ .dtable-wrap{ margin-top:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .dtable{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; } .dtable caption{ caption-side:top; text-align:left; color:var(--ink-70); font-size:.9375rem; line-height:1.5; margin-bottom:16px; max-width:52ch; } .dtable th,.dtable td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); } .dtable thead th{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink); background:var(--ink); border-bottom:0; } .dtable thead th:last-child,.dtable td:last-child{ text-align:right; } .dtable tbody tr:nth-child(odd){ background:var(--paper-warm); } .dtable tbody td{ font-size:.9375rem; color:var(--ink-70); } .dtable tbody td:last-child{ color:var(--ink); font-weight:500; } .dtable tbody tr:last-child td{ border-bottom:0; } /* ============================================================ SLA SECTION ============================================================ */ .slapanel{ margin-top:clamp(34px,4.5vw,56px); border:1px solid rgba(247,247,244,.15); border-radius:var(--r); padding:clamp(24px,3vw,44px); background:rgba(247,247,244,.03); } .slatiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(12px,1.4vw,18px); margin-top:clamp(26px,3vw,38px); } .slatile{ border:1px solid rgba(247,247,244,.15); border-radius:var(--r); padding:clamp(18px,2vw,26px); text-align:center; background:rgba(247,247,244,.035); } .slatile__v{ font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:450; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; background:var(--brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; margin-bottom:12px; } .slatile__k{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-ink-60); line-height:1.5; } .slabanner{ margin-top:clamp(22px,2.6vw,32px); border-radius:var(--r); padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,32px); background:var(--on-ink); font-size:clamp(1.05rem,1.75vw,1.4rem); font-weight:500; letter-spacing:-.024em; line-height:1.3; text-align:center; } .slafoot{ margin-top:18px; font-size:.8125rem; text-align:center; } /* These three live inside .inkblock, whose `.inkblock p` rule (0,1,1) out-specifies a bare class (0,1,0). Scope them so the component keeps its own colours. */ .inkblock .slabanner{ color:var(--ink); } .inkblock .slafoot{ color:var(--on-ink-38); } .inkblock .slatile__k{ color:var(--on-ink-60); } /* ============================================================ FLEXDC FLOW ============================================================ */ .pill{ display:inline-flex; align-items:center; font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; padding:8px 15px 8px 12px; border-radius:100px; background:var(--ink); color:var(--on-ink); gap:9px; margin-bottom:24px; } .pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none; } .flow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1vw,14px); margin-top:clamp(34px,4.5vw,56px); } .flowstep{ position:relative; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:clamp(16px,1.7vw,22px); display:flex; flex-direction:column; gap:10px; } .flowstep--hub{ background:var(--ink); border-color:var(--ink); } .flowstep--hub::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--r) var(--r) 0 0; background:var(--brand); } .flowstep__k{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.625rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--ink); } .flowstep--hub .flowstep__k{ color:var(--on-ink); } .flowstep p{ font-size:.8125rem; line-height:1.5; color:var(--ink-58); } .flowstep--hub p{ color:var(--on-ink-60); } /* connector chevrons */ .flowstep:not(:last-child)::after{ content:""; position:absolute; top:50%; right:calc(clamp(8px,1vw,14px) * -1); width:clamp(10px,1.2vw,16px); height:11px; transform:translateY(-50%); background:var(--ink-58); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5h9M6.5 1L10 4.5 6.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5h9M6.5 1L10 4.5 6.5 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* contact: the mark that balances the right-hand column */ .cmark{ display:flex; align-items:center; gap:14px; margin-bottom:34px; } .cmark svg{ width:34px; height:34px; flex:none; } .cmark span{ font-family:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace; font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-ink); } @media (max-width:1000px){ .flow{ grid-template-columns:1fr; gap:30px; } .flowstep:not(:last-child)::after{ top:auto; bottom:-21px; right:auto; left:50%; width:12px; height:12px; transform:translateX(-50%) rotate(90deg); } } @media (max-width:760px){ .slatiles{ grid-template-columns:1fr; } .slatile{ display:flex; align-items:baseline; gap:14px; text-align:left; } .slatile__v{ margin-bottom:0; } } /* ============================================================ ADJUSTMENTS FROM THE v4 REVIEW ============================================================ */ /* four stats, not five — no orphan cell at any breakpoint */ .stats--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } @media (max-width:1080px){ .stats--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .stats--4 .stat{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 22px 26px 0; } .stats--4 .stat:nth-child(2n){ border-right:0; padding-left:22px; } .stats--4 .stat:nth-child(2n+1){ padding-left:0; } .stats--4 .stat:nth-child(n+3){ border-bottom:0; } } @media (max-width:640px){ .stats--4 .stat:last-child{ grid-column:auto; } } /* the split: Tesseract's ten items run in two columns, then the seam, then Operator — the three-column balance asked for in the review */ .layers{ grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); } .layer--us ul{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,38px); } @media (max-width:900px){ .layers{ grid-template-columns:1fr; } .layer--us ul{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .layer--us ul{ grid-template-columns:1fr; } } @media (max-width:560px){ .chart-axis{ font-size:32px; } .figbox svg .chart-axis[style*="font-size"]{ font-size:32px !important; } } /* ------------------------------------------------------------ Mobile legibility — kept last so it wins the cascade over the component blocks above. 10px mono with wide tracking is not readable on a phone; everything here lifts to 11px. ------------------------------------------------------------ */ @media (max-width:760px){ .dtable thead th,.slatile__k,.pill,.flowstep__k, .layer__title,.stat__label,.card__idx,.flist__num,.cdetail__k, .figbox__title,.legend,.eyebrow,.hero__caption,.foot__mark span,.field label{ font-size:.6875rem; } .slafoot,.dtable tbody td,.figcap,.layer__sub{ font-size:.875rem; } } /* ============================================================ LABEL INTEGRITY — must stay last in the file. Every one of these labels is a

, so an ancestor rule such as `.card p`, `.pcard p`, `.flowstep p`, `.step p` or `.inkblock p` (specificity 0,1,1) out-specifies the bare label class (0,1,0) and silently repaints it as body copy. This is the same defect that made .slabanner invisible. Re-assert each one here. ============================================================ */ .card .card__idx,.pcard .card__idx{ font-size:.625rem; line-height:1.4; color:var(--ink-28); } .flowstep .flowstep__k{ font-size:.625rem; line-height:1.4; color:var(--ink); } .flowstep--hub .flowstep__k{ color:var(--on-ink); } .step .flist__item .h4{ font-size:1.0625rem; line-height:1.3; color:var(--ink); } .inkblock .eyebrow--light{ color:var(--on-ink-60); } .inkblock .layer__title{ color:var(--on-ink); } .inkblock .layer__sub{ color:var(--on-ink-38); } .inkblock .cdetail__k{ color:var(--on-ink-38); } .inkblock .cdetail__v{ color:var(--on-ink); } .inkblock .formnote{ color:var(--on-ink-38); } .inkblock .foot__c{ color:var(--on-ink-38); } @media (max-width:760px){ .card .card__idx,.pcard .card__idx,.flowstep .flowstep__k{ font-size:.6875rem; } } /* ============================================================ TOP-LEVEL LANDMARKS

nav ·