/* ============================================================================ DeskMate — "Aperture" design system Structure & motion grammar adapted from the Federico Pian study (DESIGN.md). Palette, voice and content are DeskMate / BrightPath AI Solutions. ========================================================================== */ /* ---------------------------------------------------------------- 1. RESET */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, picture, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } ::selection { background: var(--color-primary); color: var(--color-bg); } /* ------------------------------------------------- 2. PROPORTIONAL CANVAS */ /* Everything on this site is sized in rem. The root font-size is a pure function of viewport width, so the whole composition scales rather than reflows. --size is the design width the mock was drawn at. */ :root { --size: 390; } @media (min-width: 1024px) { :root { --size: 1600; } } html { font-size: min(10 * 100vw / var(--size), 10px); height: 100%; } @media (min-width: 1024px) { html { font-size: min(10 * 100vw / var(--size), 22px); } } /* ------------------------------------------------------------- 3. TOKENS */ html { /* ---- DeskMate brand, sampled from the logo ------------------------- ember #D93A1C the dark end of the mark's gradient flame #F95B2B its midpoint orange #FF6B20 the dominant hue amber #FF7819 the light end ink #151517 the wordmark black navy #131722 the product UI background paper #F4F2EE the product UI foreground */ --brand-ember: #D93A1C; --brand-flame: #F95B2B; --brand-orange: #FF6B20; --brand-amber: #FF7819; --brand-ink: #151517; --brand-navy: #131722; --brand-paper: #F4F2EE; /* the ambient field colours, re-tweened per page by JS */ --field-1: 255, 107, 32; --field-2: 19, 23, 34; --field-a: .5; /* motion */ --e-out: cubic-bezier(.215, .61, .355, 1); --e-snap: cubic-bezier(.43, .195, .02, 1); --e-glide: cubic-bezier(.165, .84, .44, 1); --e-std: cubic-bezier(.4, 0, .2, 1); background-color: var(--color-bg); color: var(--color-secondary); transition: background-color .6s var(--e-std), color .6s var(--e-std); } /* ---------------------------------------------------- 3b. PAGE PALETTES */ /* Every page owns its ground, and the ink follows it. Same lightness band, different hue, so each page reads as its own room without any of them looking like a mistake. `data-page` is stamped on before first paint and re-stamped by the router — which happens while the aperture covers the viewport, so the ground never visibly snaps. It eases in behind the drain. */ /* --- the front door — now a light room in light mode, dark room in dark mode -- */ html[data-page="home"] { --color-bg: #F7F4F0; --color-primary: #151517; --color-secondary: #3C3E44; --color-border: rgba(21, 21, 23, .18); --color-hairline: rgba(21, 21, 23, .10); --color-circle: rgba(21, 21, 23, .05); --color-switch: #151517; --color-panel: rgba(255, 255, 255, .50); --color-accent: #E1481F; --grain-opacity: .035; } html.dark[data-page="home"] { --color-bg: #201A17; --color-primary: #F7EFE7; --color-secondary: #CBB9AB; --color-border: rgba(247, 239, 231, .22); --color-hairline: rgba(247, 239, 231, .10); --color-circle: rgba(247, 239, 231, .05); --color-switch: #F7EFE7; --color-panel: rgba(247, 239, 231, .05); --color-accent: #FF9A4A; --grain-opacity: .09; } /* --- light ------------------------------------------------------------ */ html[data-page="skills"] { --color-bg: #F4F2EE; --color-primary: #151517; --color-secondary: #3C3E44; --color-border: rgba(21,21,23,.18); --color-hairline: rgba(21,21,23,.10); --color-circle: rgba(21,21,23,.05); --color-switch: #151517; --color-panel: rgba(255,255,255,.50); --color-accent: #E1481F; --grain-opacity: .035; } html[data-page="pricing"] { --color-bg: #E5DCD0; --color-primary: #1A1613; --color-secondary: #443E36; --color-border: rgba(26,22,19,.20); --color-hairline: rgba(26,22,19,.11); --color-circle: rgba(26,22,19,.05); --color-switch: #1A1613; --color-panel: rgba(255,252,246,.46); --color-accent: #A93A16; --grain-opacity: .05; } html[data-page="security"] { --color-bg: #DFE4E8; --color-primary: #12171B; --color-secondary: #3A4147; --color-border: rgba(18,23,27,.20); --color-hairline: rgba(18,23,27,.11); --color-circle: rgba(18,23,27,.05); --color-switch: #12171B; --color-panel: rgba(255,255,255,.48); --color-accent: #B4441C; --grain-opacity: .04; } html[data-page="cases"] { --color-bg: #E3E7DE; --color-primary: #15180F; --color-secondary: #3C4134; --color-border: rgba(21,24,15,.20); --color-hairline: rgba(21,24,15,.11); --color-circle: rgba(21,24,15,.05); --color-switch: #15180F; --color-panel: rgba(255,255,255,.48); --color-accent: #A8461A; --grain-opacity: .045; } html[data-page="case"] { --color-bg: #E7E2D4; --color-primary: #1A1710; --color-secondary: #403C31; --color-border: rgba(26,23,16,.20); --color-hairline: rgba(26,23,16,.11); --color-circle: rgba(26,23,16,.05); --color-switch: #1A1710; --color-panel: rgba(255,255,255,.48); --color-accent: #A63F16; --grain-opacity: .05; } html[data-page="thanks"] { --color-bg: #E6E9E0; --color-primary: #181C16; --color-secondary: #3C4238; --color-border: rgba(24,28,22,.20); --color-hairline: rgba(24,28,22,.11); --color-circle: rgba(24,28,22,.05); --color-switch: #181C16; --color-panel: rgba(255,255,255,.52); --color-accent: #4F7A3A; --grain-opacity: .05; } html[data-page="login"] { --color-bg: #EDE7E1; --color-primary: #17161A; --color-secondary: #3E3B38; --color-border: rgba(23,22,26,.20); --color-hairline: rgba(23,22,26,.11); --color-circle: rgba(23,22,26,.05); --color-switch: #17161A; --color-panel: rgba(255,255,255,.56); --color-accent: #C24A1D; --grain-opacity: .05; } html[data-page="contact"] { --color-bg: #F0E0D9; --color-primary: #1D1411; --color-secondary: #453A35; --color-border: rgba(29,20,17,.20); --color-hairline: rgba(29,20,17,.11); --color-circle: rgba(29,20,17,.05); --color-switch: #1D1411; --color-panel: rgba(255,255,255,.48); --color-accent: #B23F1B; --grain-opacity: .045; } html[data-page="legal"] { --color-bg: #ECECEA; --color-primary: #17181A; --color-secondary: #3E4043; --color-border: rgba(23,24,26,.20); --color-hairline: rgba(23,24,26,.11); --color-circle: rgba(23,24,26,.05); --color-switch: #17181A; --color-panel: rgba(255,255,255,.48); --color-accent: #C4471E; --grain-opacity: .035; } /* --- dark ------------------------------------------------------------- */ html.dark[data-page="skills"] { --color-bg: #131722; --color-primary: #F4F2EE; --color-secondary: #C6CCD9; --color-border: rgba(255,255,255,.20); --color-hairline: rgba(255,255,255,.11); --color-circle: rgba(255,255,255,.05); --color-switch: #F4F2EE; --color-panel: rgba(255,255,255,.045); --color-accent: #FF7819; --grain-opacity: .07; } html.dark[data-page="pricing"] { --color-bg: #1C1613; --color-primary: #F6EFE7; --color-secondary: #CFC3B7; --color-border: rgba(255,244,232,.20); --color-hairline: rgba(255,244,232,.10); --color-circle: rgba(255,244,232,.05); --color-switch: #F6EFE7; --color-panel: rgba(255,240,228,.05); --color-accent: #FF9A4A; --grain-opacity: .085; } html.dark[data-page="security"] { --color-bg: #101519; --color-primary: #EAEFF3; --color-secondary: #BDC7CF; --color-border: rgba(234,239,243,.20); --color-hairline: rgba(234,239,243,.10); --color-circle: rgba(234,239,243,.05); --color-switch: #EAEFF3; --color-panel: rgba(234,239,243,.05); --color-accent: #FF8A3D; --grain-opacity: .075; } html.dark[data-page="cases"] { --color-bg: #14170F; --color-primary: #EDF0E6; --color-secondary: #BFC7B6; --color-border: rgba(237,240,230,.20); --color-hairline: rgba(237,240,230,.10); --color-circle: rgba(237,240,230,.05); --color-switch: #EDF0E6; --color-panel: rgba(237,240,230,.05); --color-accent: #FF8F42; --grain-opacity: .08; } html.dark[data-page="case"] { --color-bg: #171610; --color-primary: #F2EDE0; --color-secondary: #C9C1AE; --color-border: rgba(242,237,224,.20); --color-hairline: rgba(242,237,224,.10); --color-circle: rgba(242,237,224,.05); --color-switch: #F2EDE0; --color-panel: rgba(242,237,224,.05); --color-accent: #FF9040; --grain-opacity: .08; } html.dark[data-page="thanks"] { --color-bg: #161A14; --color-primary: #EDF1E8; --color-secondary: #BAC2B4; --color-border: rgba(237,241,232,.20); --color-hairline: rgba(237,241,232,.10); --color-circle: rgba(237,241,232,.05); --color-switch: #EDF1E8; --color-panel: rgba(237,241,232,.05); --color-accent: #8FC46B; --grain-opacity: .085; } html.dark[data-page="login"] { --color-bg: #17161A; --color-primary: #F3EFEA; --color-secondary: #C3BCB6; --color-border: rgba(243,239,234,.20); --color-hairline: rgba(243,239,234,.10); --color-circle: rgba(243,239,234,.05); --color-switch: #F3EFEA; --color-panel: rgba(243,239,234,.05); --color-accent: #FF8A3D; --grain-opacity: .085; } html.dark[data-page="contact"] { --color-bg: #1F1512; --color-primary: #F7EBE4; --color-secondary: #D2BDB3; --color-border: rgba(247,235,228,.20); --color-hairline: rgba(247,235,228,.10); --color-circle: rgba(247,235,228,.05); --color-switch: #F7EBE4; --color-panel: rgba(247,235,228,.05); --color-accent: #FF9A5C; --grain-opacity: .085; } html.dark[data-page="legal"] { --color-bg: #16161A; --color-primary: #EDEDEF; --color-secondary: #C1C3C7; --color-border: rgba(237,237,239,.20); --color-hairline: rgba(237,237,239,.10); --color-circle: rgba(237,237,239,.05); --color-switch: #EDEDEF; --color-panel: rgba(237,237,239,.05); --color-accent: #FF8330; --grain-opacity: .07; } /* never leave the page unstyled if the attribute is missing */ html:not([data-page]) { --color-bg: #F4F2EE; --color-primary: #151517; --color-secondary: #3C3E44; --color-border: rgba(21,21,23,.18); --color-hairline: rgba(21,21,23,.10); --color-circle: rgba(21,21,23,.05); --color-switch: #151517; --color-panel: rgba(255,255,255,.5); --color-accent: #E1481F; --grain-opacity: .035; } /* one transition per property, so a theme flip eases instead of snapping */ .primary { color: var(--color-primary); transition: color .45s var(--e-std); } .secondary { color: var(--color-secondary); transition: color .45s var(--e-std); } .hair { background: var(--color-border); transition: background .45s var(--e-std); } .stroke-p { stroke: var(--color-primary); transition: stroke .45s var(--e-std); } .stroke-b { stroke: var(--color-border); transition: stroke .45s var(--e-std); } /* --------------------------------------------------------------- 4. TYPE */ /* Two registers, deliberately separated by scale so the pairing reads as intentional rather than accidental: Switzer — display only. A Helvetica-lineage neo-grotesk with a real drawn italic, which is what makes the big lowercase headline work. Nothing under 3.6rem uses it. General Sans — every piece of UI. DeskMate's existing brand face. */ :root { --font-display: "Switzer", "General Sans", "Helvetica Neue", sans-serif; --font-ui: "General Sans", "Switzer", "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body { font-family: var(--font-ui); font-weight: 450; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100%; overflow-x: hidden; } .t-xxs { font-size: 1.45rem; line-height: 1.1; letter-spacing: -.01em; } .t-xs { font-size: 1.65rem; line-height: 1.15; letter-spacing: -.01em; } .t-sm { font-size: 1.9rem; line-height: 1.35; letter-spacing: -.012em; } .t-md { font-size: 2.2rem; line-height: 1.35; letter-spacing: -.025em; } .t-lg { font-size: 4.2rem; line-height: 1.03; letter-spacing: -.04em; font-family: var(--font-display); } .t-xl { font-size: min(6.8rem, 9.6vw); line-height: .96; letter-spacing: -.04em; font-family: var(--font-display); } .t-xxl { font-size: min(9.2rem, 11.6vw); line-height: .92; letter-spacing: -.045em; font-family: var(--font-display); } @media (min-width: 1024px) { .slide { left: 46%; } .ds-t-xl { font-size: min(9.4rem, 6.4vw); line-height: .92; letter-spacing: -.04em; font-family: var(--font-display); } .ds-t-xxl { font-size: min(12.4rem, 8.8vw); line-height: .9; letter-spacing: -.045em; font-family: var(--font-display); } } .italic { font-style: italic; } .medium { font-weight: 500; } .upper { text-transform: uppercase; letter-spacing: .04em; } .tabular { font-variant-numeric: tabular-nums; } /* SplitText bleed — without this the italic overhang and the clip-path reveal shave the glyph. Equal negative margin + padding. */ .char { display: inline-block; margin: 0 -1.3rem; padding: 0 1.3rem; will-change: transform; } .line { display: block; } /* the word wrapper is what stops a headline breaking between two letters — without it every char is an independent inline-block and the browser is free to wrap anywhere */ .sp-word { display: inline-block; white-space: nowrap; } /* ------------------------------------------------------- 5. THE BACKDROP */ /* Lerped colour blobs + film grain. Persists across page swaps — the page changes, the atmosphere does not. */ #field { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; opacity: var(--field-a); transition: opacity .8s var(--e-out); } #field .blob { position: absolute; border-radius: 50%; will-change: transform; } #field .blob-1 { width: 90rem; height: 90rem; background: radial-gradient(circle at 50% 50%, rgba(var(--field-1), 1) 0%, rgba(var(--field-1), .62) 32%, rgba(var(--field-1), 0) 68%); } #field .blob-2 { width: 120rem; height: 120rem; background: radial-gradient(circle at 50% 50%, rgba(var(--field-2), .42) 0%, rgba(var(--field-2), .20) 34%, rgba(var(--field-2), 0) 70%); } #field .blob-3 { width: 64rem; height: 64rem; background: radial-gradient(circle at 50% 50%, rgba(var(--field-1), .60) 0%, rgba(var(--field-1), 0) 66%); } html.dark #field { mix-blend-mode: screen; } #grain { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); background-image: var(--grain-url); background-size: 220px 220px; animation: grain 2s steps(3) infinite both; transition: opacity .45s var(--e-std); } /* steps(3) is the point — the grain JUMPS between three positions, which is what reads as film rather than a sliding texture. */ @keyframes grain { 0% { transform: translateZ(0); } 10% { transform: translate3d(-5%, -5%, 0); } 20% { transform: translate3d(-10%, 5%, 0); } 30% { transform: translate3d( 5%,-10%, 0); } 40% { transform: translate3d( -5%, 15%, 0); } 50% { transform: translate3d(-10%, 5%, 0); } 60% { transform: translate3d( 15%, 0, 0); } 70% { transform: translate3d( 10%, 0, 0); } 80% { transform: translate3d(-15%, 0, 0); } 90% { transform: translate3d( 10%, 5%, 0); } 100% { transform: translate3d( 15%, 8%, 0); } } /* ------------------------------------------------------------ 6. HEADER */ /* three tracks: logo left, navigation dead centre, utilities right */ #chrome-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 2.6rem 3.4rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 2rem; } #chrome-header .header-left { justify-self: start; display: flex; align-items: center; gap: 3.2rem; } #chrome-header nav.mainnav { justify-self: center; } #chrome-header .header-right { justify-self: end; display: flex; align-items: center; gap: 2.2rem; } .logo { display: inline-flex; align-items: center; gap: 1.4rem; } .logo .mark { width: 4.4rem; height: auto; flex: none; transition: transform .5s var(--e-snap); transform-origin: 62% 38%; /* the elbow of the mark */ } .logo .word { font-size: 2.4rem; letter-spacing: -.04em; line-height: 1; display: block; } .logo .sub { font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-secondary); display: block; margin-top: .5rem; transition: color .45s var(--e-std); } @media (hover: hover) { .logo:hover .mark { transform: rotate(90deg); } } nav.mainnav { display: flex; align-items: center; gap: 1.6rem; font-size: 1.55rem; font-weight: 500; } .nav-item { position: relative; padding-bottom: .2rem; } .nav-item::before { content: ""; position: absolute; left: 0; bottom: -.3rem; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 100%; transition: transform .6s var(--e-snap); pointer-events: none; } /* origin flips between rest and hover — draws in from the left, retracts to the right. Never a rewind. */ @media (hover: hover) { .nav-item:hover::before { transform: scaleX(1); transform-origin: 0 100%; } } .nav-item.is-active { color: var(--color-primary); } .nav-item.is-active::before { transform: scaleX(1); transform-origin: 0 100%; opacity: .45; } .nav-sep { width: 1.7rem; height: 1px; background: var(--color-border); transform: rotate(-45deg); } .nav-cta { display: inline-flex; align-items: center; gap: 1rem; padding: .7rem 1.4rem; border: 1px solid currentColor; border-radius: 1.2rem; font-size: 1.4rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--color-primary); transition: color .45s var(--e-std), background .4s var(--e-out); } .nav-cta .dot { width: .7rem; height: .7rem; border-radius: 999px; background: var(--color-accent); transition: transform .4s var(--e-out); } @media (hover: hover) { .nav-cta:hover .dot { transform: scale(1.9); } } @media (max-width: 1023px) { .nav-cta { display: none; } } #theme-toggle { width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--color-switch); transition: background .45s var(--e-std), transform .34s var(--e-out); } @media (hover: hover) { #theme-toggle:hover { transform: scale(1.18); } } #clock { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- 7. CTA */ .cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.4rem; padding: .9rem 1.5rem; border: 1px solid currentColor; border-radius: 1.4rem; color: var(--color-primary); transition: transform .4s var(--e-out), color .45s var(--e-std); } .cta.small { padding: .6rem 1.4rem; gap: 1.2rem; border-radius: 1.1rem; } .cta .lbl-wrap { position: relative; overflow: hidden; } .cta .lbl { display: block; text-transform: uppercase; font-size: 1.35rem; letter-spacing: .05em; line-height: 1.2; white-space: nowrap; transition: transform .4s var(--e-out); } .cta .lbl::after { content: attr(data-text); position: absolute; left: 0; top: 100%; width: 100%; opacity: 0; transition: opacity .3s var(--e-out); } .cta .ico { position: relative; overflow: hidden; width: 1.5rem; height: 1.5rem; flex: none; } .cta .ico svg { width: 1.5rem; height: auto; transition: transform .4s var(--e-out); } .cta .ico svg:last-child { position: absolute; left: 0; top: 0; transform: translate3d(-100%, 100%, 0); } /* the arrow leaves through the top-right on the same 45° as the glyph, and a second arrow enters from the bottom-left */ @media (hover: hover) { .cta:hover { transform: translateY(-.2rem); } .cta:hover .lbl { transform: translateY(-100%); } .cta:hover .lbl::after { opacity: 1; } .cta:hover .ico svg:first-child{ transform: translate3d(100%, -100%, 0); } .cta:hover .ico svg:last-child { transform: translateZ(0); } } .cta.accent { color: var(--color-accent); } /* --------------------------------------------------------- 8. THE DIAL */ /* An isometric 3x3x3 cube — 27 visible tiles across three faces. Tiles light in the DeskMate gradient as progress advances: the top face first, then the two side faces, so the run-in to 100% is the cube filling out its sides. Slide counter on the skills page, read progress elsewhere, and the origin point of every page transition. */ #dial { position: fixed; z-index: 40; width: 21rem; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; pointer-events: none; top: 50%; transform: translateY(-50%); transition: left .9s var(--e-glide), right .9s var(--e-glide), opacity .5s var(--e-out); } #dial.at-right { right: 3.4rem; left: auto; } #dial.at-left { left: 3.4rem; right: auto; } /* on the landing the cube sits UNDER the stage — the sticky scene is still pinned when the cube starts to appear, and it must never cover the shell */ html[data-page="home"] #dial { z-index: 5; } #dial .cube-wrap { position: relative; width: 100%; aspect-ratio: 1; } #dial svg.cube { width: 100%; height: 100%; overflow: visible; } #dial .cube polygon { stroke-linejoin: round; } #dial .cube .base polygon { fill: var(--color-hairline); stroke: var(--color-border); stroke-width: .5; transition: fill .45s var(--e-std), stroke .45s var(--e-std); } #dial .cube .lit polygon { opacity: 0; stroke: none; } #dial .cap { font-size: 1.25rem; letter-spacing: .1em; text-transform: uppercase; } #dial .cap.top { order: -1; } #dial .readout { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; } #dial .slash-big { width: 3.4rem; height: 1px; background: var(--color-border); transform: rotate(-60deg); margin: 0 -.2rem; } #dial .num-col { position: relative; height: 3.8rem; overflow: hidden; width: 4.4rem; } #dial .num-col .roll { position: absolute; inset: 0; will-change: transform; } #dial .num-col .roll span { display: flex; align-items: center; justify-content: center; height: 3.8rem; font-size: 3.2rem; letter-spacing: -.05em; line-height: 1; } #dial .num-a { font-size: 3.2rem; letter-spacing: -.05em; line-height: 1; } #dial .pct { font-size: 3.2rem; letter-spacing: -.05em; line-height: 1; min-width: 7rem; text-align: center; } #dial .arrows { display: contents; } #dial .arw { width: 2.8rem; height: 2rem; pointer-events: auto; display: grid; place-items: center; transition: opacity .3s var(--e-out), transform .4s var(--e-out); } #dial .arw.prev { order: -1; } #dial .arw.next { order: 99; } #dial .arw svg { width: 2.2rem; } @media (hover: hover) { #dial .arw.prev:hover { transform: translateX(-.4rem); } #dial .arw.next:hover { transform: translateX( .4rem); } } #dial .arw[disabled] { opacity: .3; } /* ------------------------------------------------- 9. THE BLOCK TRAIL */ /* A chained trail of blocks behind the pointer. Every value is driven by TRAIL config in app.js — see the comments there. */ #trail { position: fixed; inset: 0; z-index: 80; pointer-events: none; } #trail .blk { position: absolute; top: 0; left: 0; display: grid; place-items: center; will-change: transform; transform: translate3d(-100px, -100px, 0); } #trail .blk.lead { padding: 0 12px; } #trail .blk .txt { white-space: nowrap; line-height: 1; user-select: none; transition: opacity .3s var(--e-out); } html.trail-quiet #trail .blk { opacity: .28 !important; } html.trail-quiet #trail .blk .txt { opacity: 0; } /* -------------------------------------------- 10. THE SHUTTER NAVIGATOR */ /* A sphere split down a vertical seam. Left half is the previous page, right half the next. Both sit under a warm veil at rest and share ONE inset lighting layer, so the object reads as a single lit sphere rather than two photographs. Hovering a half lifts its veil and pushes it out from the seam; clicking navigates, and the halves re-fill on arrival. */ .shutter { position: relative; z-index: 20; width: 28rem; height: 28rem; isolation: isolate; filter: drop-shadow(0 1.6rem 3.6rem rgba(60, 20, 8, .28)); --seam: 0.8%; --veil-rest: 1; --veil-hot: .06; } .shutter .half { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; padding: 0; background: none; border: 0; cursor: pointer; transition: transform .5s cubic-bezier(.2,.85,.25,1); } .shutter .half.l { clip-path: polygon(0 0, calc(50% - var(--seam)) 0, calc(50% - var(--seam)) 100%, 0 100%); } .shutter .half.r { clip-path: polygon(calc(50% + var(--seam)) 0, 100% 0, 100% 100%, calc(50% + var(--seam)) 100%); } .shutter .img { position: absolute; inset: -1px; /* -1px kills the sub-pixel rim */ background-size: cover; background-position: var(--frame, 50%) center; transform: scale(1); transform-origin: var(--frame, 50%) center; transition: transform .6s cubic-bezier(.2,.85,.25,1); } /* each half frames the middle of its own artwork via background-position, NOT a translate — a translated box leaves bare rim on the outer edge */ .shutter .half.l .img { --frame: 68%; } .shutter .half.r .img { --frame: 32%; } .shutter .veil { position: absolute; inset: 0; background: radial-gradient(120% 120% at 32% 26%, rgba(255, 154, 74, .97) 0%, rgba(255, 107, 32, .96) 38%, rgba(166, 58, 30, .94) 78%, rgba(60, 26, 18, .92) 100%); opacity: var(--veil-rest); transition: opacity .4s cubic-bezier(.2,.85,.25,1); } /* one shared specular ring across both halves — this is the whole illusion */ .shutter .lighting { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 4; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), inset 0 -2.2rem 4.6rem rgba(70,18,4,.42), inset 0 1.8rem 3.8rem rgba(255,180,150,.16); } .shutter .seamline { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255,255,255,.18) 22%, rgba(255,255,255,.18) 78%, transparent); pointer-events: none; z-index: 5; } .shutter .lab { position: absolute; bottom: 1.6rem; z-index: 6; font-size: 1.1rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.92); opacity: 0; pointer-events: none; transition: opacity .35s var(--e-out); text-shadow: 0 1px 6px rgba(0,0,0,.5); } .shutter .lab-l { left: 1.6rem; } .shutter .lab-r { right: 1.6rem; } @media (hover: hover) { .shutter .half:hover { transform: translateX(var(--push, 0)) scale(1.03); } .shutter .half.l:hover { --push: -.7rem; } .shutter .half.r:hover { --push: .7rem; } .shutter .half:hover .img { transform: scale(1.16); } .shutter .half:hover .veil{ opacity: var(--veil-hot); } .shutter .half.l:hover ~ .lab-l, .shutter .half.r:hover ~ .lab-r { opacity: 1; } } .shutter .half:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* Placement — the sphere takes the corner opposite the cube, so the two never crowd each other and the pairing flips as you move through the site. Every page must set this: without a fixed position the sphere falls into normal flow and shoves the whole page down. */ #shutter-skills { position: fixed; left: 1.8rem; bottom: 1.8rem; width: 20rem; height: 20rem; } #shutter-pricing { position: fixed; right: 2.5rem; bottom: 2rem; width: 18rem; height: 18rem; } #shutter { position: fixed; z-index: 20; bottom: 3.4rem; width: 21rem; height: 21rem; } html[data-page="security"] #shutter, html[data-page="case"] #shutter, html[data-page="legal"] #shutter, html[data-page="home"] #shutter { left: 3.4rem; right: auto; } html[data-page="cases"] #shutter, html[data-page="contact"] #shutter { right: 3.4rem; left: auto; } /* login runs a two-column card, so the sphere sits right and a little smaller — the reading column's right edge is the limit it must clear */ html[data-page="thanks"] #shutter { right: 4.4rem; left: auto; bottom: 4.4rem; width: 18rem; height: 18rem; } html[data-page="login"] #shutter { right: 4.4rem; left: auto; bottom: 4.4rem; width: 18rem; height: 18rem; } /* ------------------------------------------------------- 11. CORNER TAGS */ .corner { position: fixed; z-index: 30; font-size: 1.2rem; font-style: italic; letter-spacing: -.01em; } .corner.tl { left: 3.4rem; top: 13rem; } .corner.rm { right: 3.4rem; bottom: 13rem; } /* ------------------------------------------- 12. THE SKILLS COMPOSITION */ #app-main { position: relative; z-index: 10; } .stage { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none; } .slide { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(118rem, 86vw); /* keep clear of the fixed cube dial on the right */ padding-right: clamp(2rem, 14vw, 22rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; text-align: left; opacity: 0; pointer-events: none; } .slide.is-active { pointer-events: auto; } /* keep skill copy clear of the split-sphere navigator in the bottom-left */ html[data-page="skills"] .slide { padding-left: clamp(0rem, 11vw, 16rem); padding-bottom: 6rem; } /* ---- left content column ---- */ .skill-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; } .skill-label { display: flex; align-items: center; gap: 1.6rem; margin-bottom: .6rem; } .skill-num { position: relative; width: 4.2rem; height: 4.2rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--color-accent); } .skill-num::before { content: ''; position: absolute; inset: 0; background: var(--color-accent); opacity: .18; transform: rotate(45deg); border-radius: .6rem; } .skill-category { font-size: 1.3rem; letter-spacing: .1em; } .slide h2 { font-weight: 400; font-style: italic; color: var(--color-primary); transition: color .45s var(--e-std); line-height: .92; text-wrap: balance; font-size: clamp(4rem, 6.5vw, 8.5rem); } .skill-tags { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: -.4rem; } .skill-tags .tag { font-size: 1.25rem; font-weight: 500; letter-spacing: .02em; padding: .6rem 1.2rem; border: 1px solid var(--color-border); border-radius: 99rem; color: var(--color-secondary); background: var(--color-panel); backdrop-filter: blur(8px) saturate(140%); transition: color .45s var(--e-std), background .45s var(--e-std), border-color .45s var(--e-std); } .skill-tags .tag.active { border-color: var(--color-accent); color: var(--color-accent); background: rgba(var(--field-1), .12); } .slide .meta { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.2rem; font-size: 1.35rem; letter-spacing: .08em; } .slide .meta .sep { width: 1.7rem; height: 1px; background: var(--color-border); transform: rotate(-45deg); } .slide .row { display: flex; align-items: flex-start; justify-content: flex-start; gap: 4rem; margin-top: 1.6rem; width: min(62rem, 100%); } .slide .row p { width: 36rem; text-align: left; } /* ---- right visual column ---- */ .skill-visual { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 50rem; justify-self: center; display: flex; align-items: center; justify-content: center; } .visual-sphere { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 38% 30%, rgba(var(--field-1), .95) 0%, rgba(var(--field-1), .72) 42%, rgba(var(--field-1), .32) 74%, transparent 100%); box-shadow: 0 0 10rem rgba(var(--field-1), .32), inset 0 0 6rem rgba(255, 255, 255, .18); opacity: .95; will-change: transform; } html.dark .visual-sphere { background: radial-gradient(circle at 38% 30%, rgba(var(--field-1), .88) 0%, rgba(var(--field-1), .55) 42%, rgba(var(--field-1), .22) 74%, transparent 100%); box-shadow: 0 0 12rem rgba(var(--field-1), .22), inset 0 0 8rem rgba(255, 255, 255, .08); } .visual-stage { position: relative; width: 74%; height: 74%; will-change: transform; } .glass-block { position: absolute; border-radius: 1.8rem; background: var(--color-panel); border: 1px solid rgba(var(--field-1), .22); box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, .08); backdrop-filter: blur(18px) saturate(140%); display: flex; flex-direction: column; justify-content: center; padding: 2rem; transition: transform .6s var(--e-glide), background .45s var(--e-std), border-color .45s var(--e-std); will-change: transform; } html.dark .glass-block { background: rgba(255, 255, 255, .06); border-color: rgba(var(--field-1), .28); box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, .18); } .glass-tall { width: 50%; height: 74%; left: -2%; top: 5%; transform: rotate(-6deg) skewX(1.5deg); } .glass-wide { width: 56%; height: 50%; right: -4%; bottom: 4%; transform: rotate(5deg) skewY(-1.5deg); z-index: 2; } /* generic micro-elements inside glass blocks */ .doc-lines { display: flex; flex-direction: column; gap: .9rem; } .doc-lines .line { height: .7rem; border-radius: 99rem; background: var(--color-secondary); opacity: .25; } .doc-lines .line.short { width: 60%; } .doc-lines .line-head { width: 40%; height: 1rem; border-radius: 99rem; background: var(--color-accent); opacity: .55; margin-bottom: .4rem; } .float-cube { position: absolute; border-radius: .7rem; will-change: transform; } .float-cube.cube-1 { width: 2.8rem; height: 2.8rem; background: var(--color-accent); right: 14%; top: 4%; transform: rotate(18deg); } .float-cube.cube-2 { width: 1.8rem; height: 1.8rem; background: var(--color-primary); left: 18%; bottom: 8%; transform: rotate(-12deg); opacity: .85; } /* --- skill-specific visual accents --- */ [data-visual="reporting"] .chart-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; height: 100%; } [data-visual="reporting"] .bar { flex: 1; height: var(--h, 50%); border-radius: .4rem; background: linear-gradient(180deg, rgba(var(--field-1), .9) 0%, rgba(var(--field-1), .4) 100%); } [data-visual="invoice"] .invoice-icon { display: flex; flex-direction: column; gap: 1.2rem; } [data-visual="invoice"] .inv-header { height: 1.2rem; width: 45%; border-radius: 99rem; background: var(--color-accent); opacity: .6; } [data-visual="invoice"] .inv-amount { font-size: 3.6rem; font-weight: 700; color: var(--color-primary); opacity: .8; } [data-visual="invoice"] .status-pill { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .9rem; border-radius: 99rem; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: clamp(.75rem, .42vw + .45rem, .95rem); font-weight: 600; margin-bottom: 1.4rem; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; } [data-visual="invoice"] .status-dot { flex: 0 0 auto; } [data-visual="invoice"] .status-pill > span:not(.status-dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } [data-visual="invoice"] .status-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--color-accent); } [data-visual="onboarding"] .checklist { display: flex; flex-direction: column; gap: .7rem; } [data-visual="onboarding"] .check-item { display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 500; color: var(--color-secondary); } [data-visual="onboarding"] .check-mark { width: 1.4rem; height: 1.4rem; border-radius: .35rem; display: flex; align-items: center; justify-content: center; background: var(--color-accent); color: #fff; font-size: .85rem; } [data-visual="onboarding"] .check-item:not(.done) .check-mark { background: var(--color-border); color: transparent; } [data-visual="onboarding"] .tickets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.2rem; } [data-visual="onboarding"] .ticket { font-size: .8rem; font-weight: 600; padding: .35rem .7rem; border-radius: .5rem; background: rgba(var(--field-1), .15); color: var(--color-accent); } [data-visual="triage"] .mail-stack { display: flex; flex-direction: column; gap: -1rem; align-items: center; } [data-visual="triage"] .mail { width: 84%; height: 3.4rem; border-radius: .6rem; background: rgba(var(--field-1), .12); border: 1px solid rgba(var(--field-1), .2); display: flex; align-items: center; padding: 0 1rem; margin-bottom: -1rem; box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.06); } [data-visual="triage"] .mail-flag { width: .6rem; height: .6rem; border-radius: 50%; } [data-visual="triage"] .mail-flag.low { background: #4ade80; } [data-visual="triage"] .mail-flag.high { background: var(--color-accent); } [data-visual="triage"] .sort-badges { display: flex; gap: .5rem; margin-top: 1.2rem; } [data-visual="triage"] .badge { font-size: .85rem; font-weight: 600; padding: .35rem .7rem; border-radius: .5rem; background: var(--color-border); color: var(--color-secondary); } [data-visual="triage"] .badge.urgent { background: rgba(var(--field-1), .2); color: var(--color-accent); } [data-visual="compliance"] .shield { width: 8rem; height: 9rem; margin: 0 auto; background: rgba(var(--field-1), .18); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; display: flex; align-items: center; justify-content: center; } [data-visual="compliance"] .shield-inner { width: 6.4rem; height: 7.2rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--color-accent); display: flex; align-items: center; justify-content: center; } [data-visual="compliance"] .shield-check { color: #fff; font-size: 2.8rem; font-weight: 700; } [data-visual="compliance"] .doc-lines .line.exception { display: flex; align-items: center; gap: .6rem; height: auto; background: transparent; color: var(--color-accent); opacity: 1; font-size: clamp(.8rem, .48vw + .48rem, .95rem); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-visual="compliance"] .ex-mark { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .9rem; } [data-visual="compliance"] .evidence-link { margin-top: 1.2rem; min-width: 0; display: flex; } [data-visual="compliance"] .evidence-clip { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; font-size: clamp(.75rem, .42vw + .45rem, .95rem); font-weight: 600; color: var(--color-accent); padding: .35rem .7rem; border-radius: .5rem; border: 1px solid rgba(var(--field-1), .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* keep any label inside the glass cards from spilling past their edges */ .glass-block { overflow: hidden; min-width: 0; } .glass-block > * { min-width: 0; max-width: 100%; } [data-visual] .badge, [data-visual] .ticket, [data-visual] .status-pill, [data-visual] .check-item { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-visual="triage"] .sort-badges { flex-wrap: wrap; } /* hover lift on the active slide */ .slide.is-active .glass-tall:hover { transform: rotate(-6deg) skewX(1.5deg) translateY(-1rem); } .slide.is-active .glass-wide:hover { transform: rotate(5deg) skewY(-1.5deg) translateY(-1rem); } .hint { position: fixed; left: 50%; bottom: 2.4rem; transform: translateX(-50%); z-index: 30; font-size: 1.2rem; letter-spacing: .06em; display: flex; align-items: center; gap: 1rem; opacity: .75; } .hint .key { border: 1px solid var(--color-border); border-radius: .5rem; padding: .25rem .6rem; font-size: 1.05rem; } /* on the skills page the hint sits above the scrolling wave */ html[data-page="skills"] .hint { bottom: 6.2rem; } /* ------------------------------------------------ 13. SCROLLING LAYOUT */ .rail { position: fixed; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; justify-content: center; padding: 10rem 0; pointer-events: none; transition: opacity .6s var(--e-out); } .rail > * { pointer-events: auto; } .at-footer .rail { opacity: 0; pointer-events: none; } /* one meta rail only, on the right — the left edge is the cube's */ .rail-r { right: 3.4rem; width: 26rem; align-items: flex-end; text-align: right; padding-bottom: 34rem; } .rail-r .jump { margin-top: 3.4rem; } .rail-r .jump li { margin-bottom: 1.1rem; } @media (max-width: 1279px) { .rail { display: none; } } .rail-r .counter { display: flex; align-items: baseline; gap: .6rem; } .rail-r .counter .big { font-size: 5.6rem; letter-spacing: -.05em; line-height: 1; } .rail-r .counter .sl { width: 3.4rem; height: 1px; background: var(--color-border); transform: rotate(-58deg); margin: 0 .4rem; } .rail-r dl { margin-top: 3.4rem; } .rail-r dt { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); } .rail-r dd { font-size: 1.4rem; margin-bottom: 1.6rem; } /* short viewports: keep the meta rail clear of the fixed header */ @media (max-height: 900px) { .rail { padding-top: 12rem; } .rail-r { padding-bottom: 18rem; } .rail-r .counter .big { font-size: 4.2rem; } .rail-r dl { margin-top: 2.2rem; } .rail-r dd { margin-bottom: 1.1rem; } .rail-r .jump { margin-top: 2.2rem; } } @media (max-height: 760px) { .rail { padding-top: 12rem; justify-content: flex-start; } .rail-r { padding-bottom: 6rem; } .rail-r .counter .big { font-size: 3.4rem; } .rail-r dt { font-size: 1.1rem; } .rail-r dd { font-size: 1.25rem; margin-bottom: .9rem; } } .scroller { position: relative; z-index: 10; } .column { width: min(92rem, 92vw); margin: 0 auto; padding: 22rem 0 4rem; } @media (min-width: 1280px) { .column { width: 92rem; } } @media (min-width: 1600px) { .column { width: 100rem; } } .section { position: relative; margin-bottom: 12rem; } .section > *:not(.disc) { position: relative; z-index: 1; } .eyebrow { font-size: 1.6rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 550; color: var(--color-secondary); margin-bottom: 2.4rem; display: flex; align-items: center; gap: 1rem; } .eyebrow .bar { width: 3rem; height: 1px; background: var(--color-border); } .panel { position: relative; background: var(--color-panel); border-radius: 2rem; padding: 3.4rem; transition: background .45s var(--e-std), transform .45s var(--e-out), box-shadow .45s var(--e-out); } .panel::before { content: ""; position: absolute; inset: 0; border-radius: 2rem; box-shadow: inset 0 0 0 1px var(--color-hairline); pointer-events: none; transition: box-shadow .45s var(--e-out); } /* ---------------------------------------------------------- 14. PRICING */ .tier { margin-bottom: 1.6rem; } .tier .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; } .tier .name { font-size: 2.6rem; letter-spacing: -.04em; line-height: 1; color: var(--color-primary); } .tier .sub { font-size: 1.5rem; margin-top: .8rem; } .tier .price { font-size: 4.4rem; letter-spacing: -.05em; line-height: .9; color: var(--color-primary); } .tier .per { font-size: 1.4rem; margin-top: .6rem; text-align: right; } .tier ul { margin-top: 2.6rem; display: grid; gap: 1.1rem; } .tier li { display: flex; gap: 1.2rem; font-size: 1.6rem; line-height: 1.4; align-items: flex-start; } .tier li .tick { width: 1.6rem; height: 1.6rem; flex: none; border-radius: 50%; margin-top: .3rem; display: grid; place-items: center; background: var(--color-circle); } .tier li .tick svg { width: .85rem; } .tier .foot { margin-top: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .tier.featured::before { box-shadow: inset 0 0 0 1px var(--color-accent); } .tier .badge { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 999px; padding: .35rem .9rem; } .toggle { display: inline-flex; align-items: center; gap: .4rem; position: relative; border: 1px solid var(--color-hairline); border-radius: 999px; padding: .35rem; } .toggle button { position: relative; z-index: 2; padding: .6rem 1.5rem; border-radius: 999px; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-secondary); transition: color .35s var(--e-out); } .toggle button.on { color: var(--color-bg); } .toggle .knob { position: absolute; top: .35rem; bottom: .35rem; left: .35rem; border-radius: 999px; background: var(--color-primary); z-index: 1; transition: transform .5s var(--e-out), width .5s var(--e-out), background .45s var(--e-std); } .spec { display: grid; gap: 0; } .spec .r { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 1.6rem; padding: 1.5rem 0; border-top: 1px solid var(--color-hairline); font-size: 1.45rem; align-items: center; transition: background-color .45s var(--e-std), box-shadow .45s var(--e-out), color .45s var(--e-std); } .spec .r:first-child { border-top: 0; color: var(--color-primary); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .1em; } .spec .r span:first-child { color: var(--color-primary); } .faq details { border-top: 1px solid var(--color-hairline); } .faq details:last-child { border-bottom: 1px solid var(--color-hairline); } .faq summary { list-style: none; cursor: pointer; padding: 2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-size: 1.85rem; color: var(--color-primary); letter-spacing: -.02em; transition: color .4s var(--e-out); } .faq summary::-webkit-details-marker { display: none; } .faq summary .plus { position: relative; width: 1.2rem; height: 1.2rem; flex: none; } .faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: currentColor; transition: transform .45s var(--e-out); } .faq summary .plus::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; } .faq summary .plus::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; } .faq details[open] summary .plus::after { transform: rotate(90deg); } .faq details[open] summary .plus::before { transform: rotate(180deg); } .faq .ans { padding: 0 0 2.2rem; font-size: 1.7rem; line-height: 1.65; max-width: 72rem; } .big-cta { text-align: center; } .big-cta h3 { font-weight: 400; color: var(--color-primary); } #disc-pricing { position: fixed; right: -12rem; top: -12rem; width: 36rem; height: 36rem; z-index: 20; opacity: .95; } /* ----------------------------------------------------- 15. PAGE PIECES */ /* Shared vocabulary for every scrolling page: a lede, card grids, step flows, spec tables and stat rows. Nothing here is page-specific. */ .lede { max-width: 66rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } .card { padding: 2.8rem; transition: transform .45s var(--e-out), background-color .45s var(--e-std), box-shadow .45s var(--e-out); } .card .icon { width: 3.4rem; height: 3.4rem; border-radius: 999px; margin-bottom: 2rem; display: grid; place-items: center; background: var(--color-circle); } .card .icon svg { width: 1.6rem; } .card h3 { font-size: 2.1rem; letter-spacing: -.03em; font-weight: 400; color: var(--color-primary); margin-bottom: 1rem; } .card p { font-size: 1.7rem; line-height: 1.6; } /* numbered step flow */ .flow { counter-reset: step; } .flow .step { display: grid; grid-template-columns: 4.4rem 1fr; gap: 2.4rem; padding: 2.6rem 0; border-top: 1px solid var(--color-hairline); align-items: start; transition: background-color .45s var(--e-std), box-shadow .45s var(--e-out); } .flow .step:last-child { border-bottom: 1px solid var(--color-hairline); } .flow .step .n { counter-increment: step; font-size: 1.5rem; letter-spacing: .1em; color: var(--color-accent); padding-top: .3rem; transition: transform .4s var(--e-out); } .flow .step .n::before { content: counter(step, decimal-leading-zero); } .flow .step h3 { font-size: 2.1rem; letter-spacing: -.03em; font-weight: 400; color: var(--color-primary); margin-bottom: .8rem; } .flow .step p { font-size: 1.7rem; line-height: 1.6; max-width: 66rem; transition: color .45s var(--e-std); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } .stats .stat { transition: transform .45s var(--e-out); } .stats .stat .n { font-family: var(--font-display); font-size: 5.4rem; line-height: 1; letter-spacing: -.05em; color: var(--color-primary); transition: color .4s var(--e-out); } .stats .stat .l { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .12em; margin-top: 1rem; } .pill { display: inline-flex; align-items: center; gap: .8rem; border: 1px solid var(--color-hairline); border-radius: 999px; padding: .55rem 1.3rem; font-size: 1.2rem; transition: transform .45s var(--e-out), border-color .4s var(--e-out), color .4s var(--e-out); } /* ------------------------------------------------- 16. CASE STUDIES */ .case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } .case-tile { position: relative; display: block; overflow: hidden; border-radius: 2rem; transition: transform .45s var(--e-out), box-shadow .45s var(--e-out); } .case-tile .shot { aspect-ratio: 4 / 3; background-size: cover; background-position: center; transition: transform 1s var(--e-glide); } .case-tile .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,12,.05) 0%, rgba(20,16,12,.82) 100%); transition: opacity .5s var(--e-out); } .case-tile .meta { position: absolute; left: 2.6rem; right: 2.6rem; bottom: 2.4rem; color: #FBF6EF; } .case-tile .ind { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .14em; opacity: .8; } .case-tile h3 { font-family: var(--font-display); font-size: 3rem; line-height: 1.05; letter-spacing: -.04em; font-weight: 400; margin-top: 1rem; } .case-tile::after { content: ""; position: absolute; inset: 0; border-radius: 2rem; box-shadow: inset 0 0 0 1px var(--color-hairline); pointer-events: none; } @media (hover: hover) { .case-tile:hover .shot { transform: scale(1.06); } .case-tile:hover .veil { opacity: .82; } } .case-hero-shot { border-radius: 2.4rem; overflow: hidden; aspect-ratio: 16 / 8; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px var(--color-hairline); } .pull { font-family: var(--font-display); font-style: italic; font-size: 3.2rem; line-height: 1.2; letter-spacing: -.035em; color: var(--color-primary); max-width: 70rem; } /* --------------------------------------------------------- 17. CONTACT */ .field { margin-bottom: 2rem; } .field label { display: block; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .14em; color: var(--color-primary); margin-bottom: .9rem; } .field input, .field textarea, .field select { width: 100%; padding: 1.3rem 1.5rem; border-radius: 1.2rem; background: var(--color-panel); color: var(--color-primary); font-size: 1.5rem; outline: none; box-shadow: inset 0 0 0 1px var(--color-hairline); transition: box-shadow .35s var(--e-out); } .field input::placeholder, .field textarea::placeholder { color: var(--color-secondary); opacity: .7; } .field input:focus, .field textarea:focus, .field select:focus { box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 0 3px rgba(217, 58, 28, .12); } .field textarea { min-height: 13rem; resize: vertical; } .channel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--color-hairline); transition: background-color .45s var(--e-std), box-shadow .45s var(--e-out); } .channel:last-child { border-bottom: 1px solid var(--color-hairline); } .channel .k { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .14em; color: var(--color-primary); } .channel .v { font-size: 1.65rem; transition: color .45s var(--e-std); } /* ----------------------------------------------------------- 18. LEGAL */ /* Maximum legibility: one narrow column, a sticky index, quiet glass. */ .legal-col { max-width: 72rem; } .legal-col h2 { font-size: 2.4rem; letter-spacing: -.03em; font-weight: 400; color: var(--color-primary); margin: 5rem 0 1.4rem; } .legal-col h2:first-child { margin-top: 0; } .legal-col p { font-size: 1.75rem; line-height: 1.75; margin-bottom: 1.5rem; } .legal-col ul { margin: 0 0 1.8rem 0; } .legal-col ul li { font-size: 1.65rem; line-height: 1.65; margin-bottom: .9rem; padding-left: 2rem; position: relative; } .legal-col ul li::before { content: ""; position: absolute; left: 0; top: 1rem; width: .9rem; height: 1px; background: var(--color-accent); } .legal-toc { position: sticky; top: 14rem; font-size: 1.45rem; } .legal-toc li { margin-bottom: 1rem; } .legal-layout { display: grid; grid-template-columns: 24rem minmax(0, 1fr); gap: 8rem; align-items: start; } /* ------------------------------------------------- 19. WAVE TEXT BAND */ /* The wordmark running along a sine path. Used as the seam between the page and the footer, and as the skills page's bottom edge. */ .wave { position: relative; width: 100%; overflow: hidden; pointer-events: none; } .wave svg { display: block; width: 100%; height: 100%; overflow: visible; } .wave text.run { font-family: var(--font-display); font-size: 2.3rem; /* small enough that many repeats fit — that is what makes it read as one continuous ribbon and not a stamp */ font-style: italic; letter-spacing: -.02em; fill: var(--color-primary); transition: fill .45s var(--e-std); } .wave text.m2, .wave text.m4 { visibility: hidden; pointer-events: none; } .wave.faint text.run { fill: var(--color-border); } /* skills page: a thin band across the very bottom, behind the sphere */ #wave-skills { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; height: 7.5rem; } #wave-skills text.run { font-size: 1.9rem; } /* two ribbons crossing in opposite directions — the seam never resolves into a still frame, so it reads as perpetual motion rather than a repeated graphic */ .wave-stack { position: relative; height: 19rem; margin: 3rem 0 5rem; width: 100vw; left: 50%; transform: translateX(-50%); } /* each ribbon gets its own lane, with a small overlap where they weave — sharing one centreline made them collide into an illegible tangle */ .wave-stack .wave { position: absolute; left: 0; right: 0; height: 58%; } .wave-stack .wave.back { top: 0; } .wave-stack .wave.front { bottom: 0; } .wave-stack .wave.back text.run { font-size: 1.75rem; opacity: .42; } /* ---------------------------------------------------------- 20. FOOTER */ .site-footer { position: relative; z-index: 10; padding: 0 0 6rem; } .site-footer .inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 4rem; align-items: start; } .site-footer .lock { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 2.4rem; } .site-footer .lock img { width: 4rem; height: auto; } .site-footer .lock .word { font-size: 2.2rem; letter-spacing: -.04em; line-height: 1; } .site-footer .blurb { max-width: 30rem; } .site-footer h4 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .16em; color: var(--color-primary); font-weight: 400; margin-bottom: 1.8rem; } .site-footer ul li { margin-bottom: 1.2rem; font-size: 1.6rem; } .site-footer .legal { margin-top: 5rem; padding-top: 2.4rem; border-top: 1px solid var(--color-hairline); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; font-size: 1.4rem; } .site-footer .legal .dots { display: flex; align-items: center; gap: 1.4rem; } .site-footer .to-top { display: inline-flex; align-items: center; gap: .9rem; text-transform: uppercase; letter-spacing: .12em; font-size: 1.15rem; pointer-events: auto; } .site-footer .to-top svg { width: 1.4rem; transition: transform .4s var(--e-out); } @media (hover: hover) { .site-footer .to-top:hover svg { transform: translateY(-.4rem); } } /* ---------------------------------------------------- 21. THE APERTURE */ /* The page-transition surface. A colour disc that swallows the outgoing page from the cube, then drains into the incoming page's sphere. */ #aperture { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; clip-path: circle(0% at 50% 50%); } #aperture .paint { position: absolute; inset: 0; } #aperture .label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .3em; color: rgba(255, 255, 255, .82); opacity: 0; white-space: nowrap; } /* ============================================== 22. HOVER LIFT (global) */ /* Every box, card, tile, row and pill answers the pointer the same way: a small rise, a brighter surface, and a firmer edge. One vocabulary, so the whole site feels like it is made of the same material. Forms are excluded — a panel that moves while you type is hostile. */ @media (hover: hover) { .panel:not(form):hover { transform: translateY(-.5rem) scale(1.008); box-shadow: 0 2.4rem 5rem -2rem rgba(26, 18, 12, .22); } .panel:not(form):hover::before { box-shadow: inset 0 0 0 1px var(--color-border); } .panel:not(form):hover h3, .panel:not(form):hover .name { color: var(--color-primary); } .tier.featured:hover::before { box-shadow: inset 0 0 0 1.5px var(--color-accent); } .case-tile:hover { transform: translateY(-.5rem); box-shadow: 0 2.6rem 5.4rem -2rem rgba(26, 18, 12, .3); } .stats .stat:hover { transform: translateY(-.4rem); } .stats .stat:hover .n { color: var(--color-accent); } /* rows: no rise, they nudge and warm instead */ .channel:hover, .spec .r:not(:first-child):hover { background-color: var(--color-circle); box-shadow: -1.4rem 0 0 var(--color-circle), 1.4rem 0 0 var(--color-circle); } .channel:hover .v, .spec .r:not(:first-child):hover span { color: var(--color-primary); } .flow .step:hover { background-color: var(--color-circle); box-shadow: -1.6rem 0 0 var(--color-circle), 1.6rem 0 0 var(--color-circle); } .flow .step:hover .n { transform: translateX(.4rem); } .flow .step:hover p { color: var(--color-primary); } .pill:hover { transform: translateY(-.2rem) scale(1.04); border-color: var(--color-accent); color: var(--color-primary); } .faq summary:hover { color: var(--color-accent); } } /* ================================================= 23. MESH TEXT HOVER */ /* The heading stays in the DOM for screen readers, search and selection — the canvas only takes over its pixels once it has an identical frame. */ .mesh-host { position: relative; } .mesh-host canvas.mesh { position: absolute; display: block; pointer-events: none; /* the bleed must never eat a click */ z-index: 1; max-width: none; /* never let the reset shrink the backing store */ } .mesh-host.is-live > [data-hero-title] { pointer-events: none; } /* ========================================== 24. LANDING ASSEMBLY SCENE */ /* One fixed 1400x860 stage, uniformly scaled, inside a sticky viewport. Every pose is a plain pixel pair in that space, so the fly-in is a straight lerp — mixing viewport-positioned and stage-positioned elements is what makes this kind of scene impossible to tune. */ #scroll-root { position: relative; height: 420vh; } #stage-view { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; /* centre the stage in the space BELOW the fixed header — centring it in the whole viewport left a dead band under the header and pushed the composer and account chip off the bottom edge */ padding-top: 6rem; } #stage { position: relative; width: 1400px; height: 860px; transform: scale(var(--stage-scale, 1)); transform-origin: 50% 50%; /* transform does not shrink the LAYOUT box, so the grid was centring an 860px box no matter how small the stage actually drew — pull the margins in by the same amount so the centring matches what you see */ margin: calc((var(--stage-scale, 1) - 1) * 430px) 0; /* the product pieces are a light surface floating on the night ground — they read as product, the page around them stays ours */ /* sampled from the real DeskMate workspace: white cards on a peach ground, one orange gradient for anything active */ --ui-surface: #FFFFFF; --ui-ink: #2A1A12; --ui-muted: #8B7361; --ui-line: #F0E0D3; --ui-accent: #E4622F; --ui-soft: #FDEADF; --ui-grad: linear-gradient(180deg, #F0793F, #E05A24); } /* Pieces and the hero are transform-driven from the origin. Scenery is NOT — it carries its own left/top, and `#stage .scenery {left:0}` would out-specify a plain `.sc-panel` class rule and stack all three at 0,0. */ #stage .piece, #stage .hero-block { position: absolute; top: 0; left: 0; will-change: transform, opacity; z-index: 3; /* the pieces LAND on the shell — the scenery is opaque, so without this it buries them */ } #stage .scenery { position: absolute; will-change: opacity; opacity: 0; z-index: 1; } #planet { position: absolute; left: 468px; top: 172px; width: 464px; height: 464px; pointer-events: none; } /* an with no width defaults to 300x150 and blows the component apart */ #stage svg { width: 16px; height: 16px; flex: none; } #stage .card-ui { background: var(--ui-surface); color: var(--ui-ink); border-radius: 18px; font-family: var(--font-ui); box-shadow: var(--ui-shadow, 0 26px 60px -18px rgba(0, 0, 0, .55)); } #stage .scenery .card-ui { box-shadow: 0 18px 46px -22px rgba(0, 0, 0, .5); } .piece-brand { width: 270px; } .piece-newchat { width: 208px; } .piece-skill { width: 330px; } .piece-composer{ width: 720px; } .piece-account { width: 234px; } .ui-row { display: flex; align-items: center; gap: 13px; padding: 14px 16px; } .ui-ico { width: 32px; height: 32px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--ui-soft); color: var(--ui-accent); } /* the workspace draws skill icons as bare glyphs and puts a go-arrow on the right — no filled disc */ .piece-skill .card-ui { border: 1px solid var(--ui-line); } .piece-skill .ui-row { padding: 16px 18px; gap: 15px; } .piece-skill .ui-ico { background: none; width: 22px; height: 22px; } .piece-skill .go { color: var(--ui-muted); flex: none; } .piece-skill .ui-t { margin-bottom: 3px; } .piece-skill .ui-s { line-height: 1.35; } .ui-t { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; } .ui-s { font-size: 12px; color: var(--ui-muted); margin-top: 2px; line-height: 1.2; } .ui-lbl{ font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-muted); } .piece-newchat .btn { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border-radius: 999px; color: #fff; font-size: 14.5px; font-weight: 500; background: var(--ui-grad); box-shadow: 0 10px 24px -8px rgba(239, 82, 34, .7); } .piece-composer .bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 22px; background: var(--ui-surface); } .piece-composer .inp { flex: 1; font-size: 14.5px; color: var(--ui-muted); } .piece-composer .bar { border: 1px solid var(--ui-line); } .piece-composer .send { height: 42px; border-radius: 999px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: var(--ui-grad); color: #fff; font-size: 14px; font-weight: 600; } .piece-composer .clip { width: 40px; height: 40px; border-radius: 999px; flex: none; display: grid; place-items: center; border: 1px solid var(--ui-line); color: var(--ui-muted); } .piece-account .who { display: flex; align-items: center; gap: 11px; padding: 11px 13px; } .piece-account .card-ui { border: 1px solid var(--ui-line); } .piece-account .av { width: 34px; height: 34px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--ui-soft); color: var(--ui-accent); font-size: 12.5px; font-weight: 600; } .piece-brand .lock { display: flex; align-items: center; gap: 13px; padding: 14px 16px; } .piece-brand .lock .logo-wrap { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in oklab, var(--ui-accent) 22%, #fff), color-mix(in oklab, var(--ui-accent) 14%, #fff)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ui-accent) 28%, transparent), 0 8px 18px -6px color-mix(in oklab, var(--ui-accent) 38%, transparent); } .piece-brand .lock img { width: 30px; height: auto; display: block; } .piece-brand .nm { font-size: 19px; font-weight: 650; letter-spacing: -.02em; color: var(--ui-ink); } .piece-brand .sb { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-accent); margin-top: 3px; } /* scenery — the shell the pieces land into. It never moves. */ .sc-sidebar { left: 24px; top: 16px; width: 300px; height: 812px; } .sc-history { left: 336px; top: 16px; width: 260px; height: 812px; } .sc-panel { left: 608px; top: 16px; width: 768px; height: 812px; } .sc-body { position: absolute; inset: 0; border-radius: 22px; background: var(--ui-surface); } .sc-slot { position: absolute; left: 20px; right: 20px; top: 104px; } .sc-nav { position: absolute; left: 14px; right: 14px; top: 134px; } .sc-nav .ni { display: flex; align-items: center; gap: 11px; height: 40px; padding: 0 12px; border-radius: 12px; font-size: 14px; color: var(--ui-muted); } .sc-nav .ni.on { background: var(--ui-grad); color: #fff; font-weight: 500; box-shadow: 0 8px 18px -8px rgba(224, 90, 36, .6); } .sc-custom { position: absolute; left: 20px; right: 20px; bottom: 96px; } .sc-custom .ghost { margin-top: 10px; height: 40px; border-radius: 12px; border: 1px dashed var(--ui-line); color: var(--ui-muted); display: grid; place-items: center; font-size: 13.5px; } .sc-list { position: absolute; left: 16px; right: 16px; top: 134px; } .sc-list .li { height: 40px; border-radius: 11px; margin-bottom: 8px; display: flex; align-items: center; padding: 0 12px; font-size: 12.5px; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-list .li.on { color: var(--ui-accent); } .sc-head { position: absolute; left: 26px; right: 26px; top: 22px; height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid color-mix(in oklab, var(--ui-accent) 26%, var(--ui-line)); } .sc-head .who { display: flex; align-items: center; gap: 12px; } .sc-head .who .ui-ico { width: 38px; height: 38px; background: color-mix(in oklab, var(--ui-accent) 16%, var(--ui-surface)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ui-accent) 22%, transparent); } .sc-head .ui-t { font-size: 16.5px; font-weight: 650; letter-spacing: -.015em; color: var(--ui-ink); } .sc-head .ui-s { color: color-mix(in oklab, var(--ui-muted) 78%, var(--ui-ink)); font-size: 12.5px; } .sc-head .ui-lbl { color: color-mix(in oklab, var(--ui-muted) 60%, var(--ui-ink)); } .sc-head .ui-t, .sc-head .ui-s { display: block; } .sc-greet { position: absolute; left: 0; right: 0; top: 196px; text-align: center; } .sc-greet .badge { width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 999px; display: grid; place-items: center; background: var(--ui-soft); color: var(--ui-accent); } .sc-greet .g1 { font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--ui-ink); } .sc-greet .g2 { font-size: 15px; color: var(--ui-muted); margin-top: 12px; line-height: 1.5; } .sc-greet .ui-lbl { display: block; margin-top: 34px; } /* hero copy — lives inside the stage so it shares one coordinate space */ .hero-block { left: 0; top: 52px; width: 1400px; text-align: center; } .hero-block .eyebrow { justify-content: center; font-size: 1.7rem; margin-bottom: 3.4rem; letter-spacing: .16em; } .hero-block h1 { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1.08; letter-spacing: -.04em; color: var(--color-primary); white-space: nowrap; margin-bottom: 2.6rem; } /* connector strip — the marks stand on the ground in their own colours; a tile behind each one just made them look like buttons */ .conn-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 3.6rem; } .conn { display: grid; place-items: center; transition: transform .45s var(--e-out); } .conn img { width: 5.6rem; height: auto; opacity: .85; transition: opacity .4s var(--e-out); } @media (hover: hover) { .conn:hover { transform: translateY(-.5rem) scale(1.06); } .conn:hover img { opacity: 1; } } /* --------------------------------------------------------- 25. STATES */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } /* animated-in elements start hidden ONLY when JS is running, so the page is never blank if the script fails */ html.js [data-anim], html.js [data-reveal] { opacity: 0; } .skip { position: fixed; top: 1rem; left: 1rem; z-index: 200; background: var(--color-primary); color: var(--color-bg); padding: .8rem 1.4rem; border-radius: .6rem; font-size: 1.3rem; transform: translateY(-150%); transition: transform .3s var(--e-out); } .skip:focus { transform: none; } /* -------------------------------------------------- 26. SMALL SCREENS */ /* The composition is proportional, so most of the work is already done — this only removes what genuinely does not fit on a phone. */ @media (max-width: 1023px) { #clock { display: none; } #chrome-header { padding: 1.8rem 2rem; column-gap: 1rem; } .logo { gap: .9rem; } .logo .mark { width: 3rem; } .logo .word { font-size: 1.9rem; } .logo .sub { display: none; } /* the strapline needs room it has not got */ nav.mainnav { font-size: 1.45rem; gap: 1rem; } #chrome-header .header-left { gap: 1.6rem; } #chrome-header .header-right { gap: 1.4rem; } #dial { width: 10.5rem; top: auto; bottom: 1.2rem; transform: none; gap: .5rem; } #dial.at-right, #dial.at-left { right: auto; left: 1.6rem; } #dial .num-a, #dial .slash-big, #dial .arrows { display: none !important; } #dial .num-col { width: 4rem; height: 3rem; } #dial .num-col .roll span { height: 3rem; font-size: 2.4rem; } #dial .pct { font-size: 2.4rem; min-width: 0; } #dial .cap { font-size: 1.05rem; } #dial .cap.bot { display: none; } #shutter-skills { width: 12rem; height: 12rem; left: auto; right: 1.6rem; bottom: 1.6rem; } #shutter-pricing { width: 11rem; height: 11rem; right: 1.6rem; bottom: 1.6rem; } /* the cube owns the bottom-left on small screens, so the sphere always takes the right */ #shutter, html[data-page] #shutter { width: 11rem; height: 11rem; right: 1.6rem; left: auto; bottom: 1.6rem; } .shutter .lab { display: none; } #trail { display: none; } .corner.rm { display: none; } .corner.tl { left: 2rem; top: 7.4rem; font-size: 1.3rem; } .hint { display: none; } .slide { width: 88vw; padding-right: 0; grid-template-columns: 1fr; gap: 1.8rem; text-align: center; top: 44%; align-content: center; } .skill-content { align-items: center; gap: 1.2rem; } .skill-label { margin-bottom: 0; } .skill-num { width: 3.4rem; height: 3.4rem; font-size: 1.3rem; } .skill-tags { justify-content: center; } .skill-tags .tag { font-size: 1.05rem; padding: .45rem .95rem; } .slide h2 { white-space: normal; font-size: 4rem; line-height: .95; text-align: center; text-wrap: balance; } .slide .meta { margin-top: .5rem; font-size: 1.15rem; flex-wrap: wrap; justify-content: center; } .slide .row { flex-direction: column; align-items: center; width: 100%; margin-top: .8rem; gap: 1.6rem; } .slide .row p { width: auto; text-align: center; font-size: 1.5rem; } .slide .row .cta { margin-top: 0; } .skill-visual { width: min(16rem, 60vw); max-width: 18rem; aspect-ratio: 1 / 1; margin: 1.2rem auto 0; } .glass-tall, .glass-wide { padding: 1.2rem; } .glass-tall { width: 48%; height: 70%; } .glass-wide { width: 54%; height: 46%; } [data-visual="invoice"] .inv-amount { font-size: 2.2rem; } [data-visual="compliance"] .shield { width: 5.4rem; height: 6.2rem; } [data-visual="compliance"] .shield-inner { width: 4.4rem; height: 5rem; } [data-visual="compliance"] .shield-check { font-size: 1.8rem; } .grid-2, .grid-3, .grid-4, .case-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); gap: 3rem 1.6rem; } .legal-layout { grid-template-columns: 1fr; gap: 3rem; } .legal-toc { position: static; } .column { width: 88vw; padding: 14rem 0 10rem; } .section { margin-bottom: 8rem; } .panel { padding: 2.4rem; border-radius: 1.6rem; } .panel::before { border-radius: 1.6rem; } .tier .head { flex-direction: column; gap: 1.6rem; } .tier .per { text-align: left; } .tier .foot { flex-direction: column; align-items: flex-start; gap: 1.6rem; } /* a matrix does not survive a phone — stack it */ .spec .r { grid-template-columns: 1fr 1fr !important; row-gap: .6rem; } .spec .r:first-child { display: none; } .toggle button { padding: .6rem 1.1rem; font-size: 1.15rem; } #disc-pricing { width: 19rem; height: 19rem; right: -5rem; top: -5rem; } .site-footer .inner { grid-template-columns: 1fr 1fr; gap: 3rem; } .site-footer .blurb { grid-column: 1 / -1; } .wave-stack { height: 11rem; margin-bottom: 3.5rem; } .wave text.run { font-size: 2.1rem; } #wave-skills { height: 5.4rem; } #wave-skills text.run { font-size: 1.7rem; } #scroll-root { height: 300vh; } .hero-block h1 { font-size: 34px; } .conn img { width: 4.4rem; } /* the ambient field is far denser on a small viewport — pull it back */ html { --field-a: .34; } } /* -------------------------------------------------- 27. REDUCED MOTION */ /* The reference site ships none of this. We do. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } #grain { animation: none; } #field .blob { transition: none !important; } .panel:hover, .case-tile:hover, .stats .stat:hover, .pill:hover, .cta:hover { transform: none !important; } } /* ------------------------------------------------ contact page polish --- */ .anchor-flash{animation:anchorFlash 1.3s ease-out} @keyframes anchorFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-accent) 40%,transparent)}100%{box-shadow:0 0 0 0 transparent}} .live-dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:var(--color-accent);margin-right:.7rem;vertical-align:middle;animation:livePulse 2.2s ease-in-out infinite} @keyframes livePulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}} .contact-strip{margin-top:5rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem; border-top:1px solid color-mix(in srgb,var(--color-primary) 14%,transparent);padding-top:2.6rem;max-width:68rem} .contact-strip .cs-item{display:flex;flex-direction:column;gap:.6rem} .contact-strip .cs-n{font-size:2.9rem;line-height:1;font-weight:550;color:var(--color-accent)} .contact-strip .cs-l{font-size:1.25rem;letter-spacing:.04em} .route-grid{gap:2.2rem} a.route-card{display:flex;flex-direction:column;gap:1.2rem;text-decoration:none;position:relative;overflow:hidden; isolation:isolate; transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s ease,border-color .4s ease} a.route-card .route-num{font-size:1.15rem;letter-spacing:.16em;color:var(--color-accent);opacity:.8} /* soft sheen that sweeps across on hover */ a.route-card::before{content:"";position:absolute;inset:-20% -40%;z-index:-1;pointer-events:none; background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--color-accent) 16%,transparent) 50%,transparent 62%); transform:translateX(-60%);opacity:0;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .4s ease} a.route-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--color-accent); transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.7,.2,1)} a.route-card .route-go{margin-top:auto;padding-top:1.8rem;display:flex;align-items:center;gap:1rem; font-size:1.3rem;letter-spacing:.03em;color:var(--color-accent);opacity:.9;transition:opacity .35s ease,gap .45s cubic-bezier(.2,.7,.2,1)} a.route-card .rg-label{position:relative} a.route-card .rg-label::after{content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:1px;background:currentColor; transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)} a.route-card .rg-ico{position:relative;flex:none;width:3rem;height:3rem;border-radius:50%;overflow:hidden; display:grid;place-items:center; border:1px solid color-mix(in srgb,var(--color-accent) 38%,transparent); background:color-mix(in srgb,var(--color-accent) 8%,transparent); transition:background .4s ease,border-color .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)} a.route-card .rg-ico svg{position:absolute;width:1.35rem;height:1.35rem;flex:none; transition:transform .5s cubic-bezier(.2,.7,.2,1)} a.route-card .rg-ico svg:last-child{transform:translate3d(-115%,115%,0)} @media (hover:hover){ a.route-card:hover{transform:translateY(-.8rem);box-shadow:0 2.6rem 5.4rem -2rem rgba(60,26,10,.34); border-color:color-mix(in srgb,var(--color-accent) 45%,transparent)} a.route-card:hover::before{transform:translateX(60%);opacity:1} a.route-card:hover::after{transform:scaleX(1)} a.route-card:hover .route-go{opacity:1;gap:1.4rem} a.route-card:hover .rg-label::after{transform:scaleX(1);transform-origin:0 50%} a.route-card:hover .rg-ico{transform:rotate(45deg) scale(1.06); background:color-mix(in srgb,var(--color-accent) 18%,transparent); border-color:var(--color-accent)} a.route-card:hover .rg-ico svg:first-child{transform:translate3d(115%,-115%,0)} a.route-card:hover .rg-ico svg:last-child{transform:translateZ(0)} } a.route-card:active{transform:translateY(-.3rem) scale(.995)} button.cta{border:0;background:none;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none} .contact-form.sent .form-note{color:var(--color-accent);opacity:1} .contact-form .field input:focus,.contact-form .field textarea:focus{outline:none;border-color:var(--color-accent)} .contact-form .field.invalid input,.contact-form .field.invalid textarea{border-color:#c0392b} @media (max-width:760px){.contact-strip{grid-template-columns:1fr;gap:2.2rem}} /* ---- booking embed (Calendly) ---- */ .book-head{max-width:56rem;margin-bottom:3.4rem} .book-head h2{margin-bottom:1.6rem} /* Sized to the embed, not the column. Calendly's card is capped at 800px in its two-pane layout (680px stacked) and cannot be widened from out here — it lives in a cross-origin iframe. A full-width panel therefore strands the card in dead space and pushes Calendly's own footer link far below the content. 1000px is the narrowest width that still triggers the two-pane layout, which puts the card at 800 of 1000 and removes the vertical slack. */ .panel.booking{padding:1.2rem;overflow:hidden;max-width:660px;margin-inline:auto} /* px, deliberately: the page scales its root font-size with the viewport, so a rem height would shrink the embed and clip Calendly's own layout. */ .booking-mount{position:relative;width:620px;max-width:100%;margin-inline:auto; height:620px;border-radius:calc(var(--radius, 1.4rem) - .6rem);overflow:hidden} .booking-mount>iframe{display:block;width:100%!important;height:100%!important;border:0} /* the skeleton is the mount's own background, so it is covered the instant the iframe paints — no flash, no second element to remove */ .booking-mount[data-state="loading"]{background: linear-gradient(100deg,transparent 20%,var(--color-circle) 50%,transparent 80%) var(--color-panel); background-size:200% 100%;animation:book-sweep 1.5s linear infinite} @keyframes book-sweep{from{background-position:100% 0}to{background-position:-100% 0}} .booking-mount[data-state="unset"],.booking-mount[data-state="error"]{min-height:140px;background:var(--color-panel); border:1px dashed var(--color-border)} .booking-note{margin-top:1.8rem;letter-spacing:.06em} .booking-note span{display:none} .booking-mount[data-state="loading"]~.booking-note .bn-loading, .booking-mount[data-state="unset"]~.booking-note .bn-unset, .booking-mount[data-state="error"]~.booking-note .bn-error{display:inline} .booking-mount[data-state="ready"]~.booking-note, .booking-mount[data-state="idle"]~.booking-note{display:none} .booking-note a{color:var(--color-accent);text-decoration:underline;text-underline-offset:.3rem} @media (max-width:760px){.panel.booking{padding:.8rem}} /* ---- thank-you page ---- */ .thanks-section{margin-bottom:9rem} .panel.thanks-next{padding:3.4rem;margin-top:4.6rem;max-width:62rem} .thanks-list{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.8rem} .thanks-list li{display:flex;gap:1.4rem;align-items:baseline;font-size:1.55rem;line-height:1.55} .thanks-list .n{color:var(--color-accent);font-size:1.2rem;letter-spacing:.06em;flex:none} .thanks-note{margin:2.6rem 0 0;padding-top:2rem;border-top:1px solid var(--color-hairline);letter-spacing:.04em} .thanks-go{display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap;margin-top:3.4rem} .thanks-alt{text-decoration:underline;text-underline-offset:.3rem} .nowrap{white-space:nowrap} @media (max-width:760px){.panel.thanks-next{padding:2.4rem}} /* ---- header Run now CTA (replaces the clock) ---- */ /* The label rolls to "Log in" on hover using the CTA's own two-line mechanism: the visible word slides up, data-text rises in behind it. */ .run-now{flex:none;white-space:nowrap} .run-now .lbl{font-weight:500} @media (hover:hover){.run-now:hover{color:var(--color-accent);border-color:var(--color-accent)}} @media (max-width:1023px){.run-now{display:none}} /* ---- sign in / create account ---- */ .auth-section{margin-bottom:9rem} .auth-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem; align-items:start;margin-top:4.6rem} .panel.auth-card{padding:3.4rem} .panel.auth-side{padding:3rem} .auth-switch{position:relative;display:inline-flex;padding:.35rem;gap:.2rem;margin-bottom:2.8rem; border:1px solid var(--color-border);border-radius:1.3rem} .auth-switch .knob{position:absolute;top:.35rem;bottom:.35rem;left:.35rem;width:0; border-radius:1rem;background:var(--color-primary);z-index:0} .auth-switch button{position:relative;z-index:1;border:0;background:none;font:inherit;cursor:pointer; padding:.7rem 1.6rem;border-radius:1rem;font-size:1.35rem;letter-spacing:.04em; color:var(--color-secondary);transition:color .34s var(--e-std)} .auth-switch button.on{color:var(--color-bg)} .sso{display:grid;gap:1rem} .sso-btn{display:flex;align-items:center;gap:1.2rem;width:100%;cursor:pointer; padding:1.1rem 1.4rem;border:1px solid var(--color-border);border-radius:1.2rem; background:none;font:inherit;font-size:1.45rem;color:var(--color-primary); transition:border-color .34s var(--e-std),transform .3s var(--e-out),background .34s var(--e-std)} .sso-btn img{width:1.8rem;height:1.8rem;object-fit:contain;flex:none} @media (hover:hover){.sso-btn:hover{border-color:var(--color-accent);transform:translateY(-.2rem)}} .auth-or{display:flex;align-items:center;gap:1.4rem;margin:2.4rem 0} .auth-or .hair{flex:1;height:1px;background:var(--color-hairline)} .auth-or span:not(.hair){letter-spacing:.1em;white-space:nowrap} .auth-form .field{margin-bottom:1.8rem} .auth-form .field input:focus{outline:none;border-color:var(--color-accent)} .auth-form .field.invalid input{border-color:#c0392b} .auth-row{display:flex;align-items:center;justify-content:space-between;gap:1.6rem; flex-wrap:wrap;margin:-.4rem 0 2rem} .check{display:inline-flex;align-items:center;gap:.9rem;cursor:pointer; font-size:1.35rem;color:var(--color-secondary)} .check input{width:1.5rem;height:1.5rem;accent-color:var(--color-accent);cursor:pointer} .auth-terms{margin:-.4rem 0 2rem;line-height:1.6} .auth-terms a{text-decoration:underline;text-underline-offset:.3rem} .auth-go{width:100%;justify-content:space-between} .auth-note{margin-top:1.8rem;letter-spacing:.05em;line-height:1.6} .auth-form.sent .auth-note{color:var(--color-accent);opacity:1} .auth-alt{margin-top:2.4rem} .linkish{border:0;background:none;font:inherit;cursor:pointer;color:var(--color-accent); text-decoration:underline;text-underline-offset:.3rem;padding:0} /* one card, two modes — the fields that do not belong are simply not there */ .auth-card[data-auth="in"] .only-up, .auth-card[data-auth="up"] .only-in{display:none} .auth-list{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.6rem} .auth-list li{display:flex;gap:1.4rem;align-items:baseline;font-size:1.5rem;line-height:1.5} .auth-list .n{color:var(--color-accent);font-size:1.2rem;letter-spacing:.06em;flex:none} .auth-meta{margin-top:3rem;padding-top:2.4rem;border-top:1px solid var(--color-hairline);display:grid;gap:1.4rem} @media (max-width:1023px){.auth-wrap{grid-template-columns:1fr;gap:2.4rem}} @media (max-width:760px){.panel.auth-card,.panel.auth-side{padding:2.2rem} .auth-switch{width:100%}.auth-switch button{flex:1;text-align:center}} /* ---- floating motes above each skill title ---- */ .skill-motes { display: flex; align-items: center; gap: 1rem; margin-bottom: -.4rem; pointer-events: none; } .skill-motes .mote { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 1.1rem; color: var(--color-accent); border: 1px solid var(--color-border); background: var(--color-panel); backdrop-filter: blur(10px) saturate(150%); box-shadow: 0 .8rem 2.2rem rgba(var(--field-1), .18); animation: mote-float 5.2s var(--e-std) infinite; will-change: transform; } .skill-motes .mote svg { width: 1.7rem; height: 1.7rem; } .skill-motes .m1 { animation-delay: 0s; transform: rotate(-6deg); } .skill-motes .m2 { animation-delay: -1.7s; } .skill-motes .m3 { animation-delay: -3.4s; transform: rotate(5deg); } .skill-motes .m2 { border-color: color-mix(in oklab, var(--color-accent) 45%, transparent); } @keyframes mote-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.7rem; } } @media (prefers-reduced-motion: reduce) { .skill-motes .mote { animation: none; } } @media (max-width: 860px) { .skill-motes { justify-content: center; gap: .8rem; } .skill-motes .mote { width: 2.8rem; height: 2.8rem; border-radius: .9rem; } .skill-motes .mote svg { width: 1.4rem; height: 1.4rem; } } /* --------------------------- short windows: keep the dial clear of chrome */ /* Keep the dial's centre inside a header-safe vertical corridor. Unlike a plain 50% position this remains stable when browser chrome changes the dynamic viewport after a page opens in a new tab. */ @media (min-width: 861px) and (min-height: 761px) { #dial { top: clamp(14rem, 50dvh, calc(100dvh - 13rem)); bottom: auto; transform: translateY(-50%); } } @media (max-height: 980px) and (min-width: 861px) { #dial { width: 16rem; gap: .8rem; } #dial .num-col { width: 3.6rem; height: 3.2rem; } #dial .num-col .roll span { height: 3.2rem; font-size: 2.8rem; } #dial .num-a, #dial .pct { font-size: 2.8rem; } #dial .pct { min-width: 5.6rem; } #dial .cap { font-size: 1.05rem; } #dial .arw svg { width: 1.8rem; } } @media (max-height: 860px) and (min-width: 861px) { #dial { width: 13rem; gap: .6rem; } #dial .num-a, #dial .slash-big, #dial .arrows { display: none !important; } #dial .num-col { width: 3.2rem; height: 2.8rem; } #dial .num-col .roll span { height: 2.8rem; font-size: 2.4rem; } #dial .pct { font-size: 2.4rem; min-width: 0; } #dial .cap.bot { display: none; } } @media (max-height: 760px) { #dial { width: 11rem; top: auto; bottom: 1.4rem; transform: none; gap: .5rem; } #dial.at-right { right: 2rem; left: auto; } #dial.at-left { left: 2rem; right: auto; } #dial .num-a, #dial .slash-big, #dial .arrows { display: none !important; } #dial .cap.bot { display: none; } }