/* ========================================================================== Algi marketing site - shared stylesheet Oxyvias Limited trading as Algi. One sheet for every public page. Locked design: Apple muted industrial, built entirely from the brand book's own elements. Four neutrals, Work Sans, alternating light and Air Black full-bleed bands for rhythm. Page-specific rules live at the bottom, scoped by a page class on (page-home, page-platform, page-innovation, page-pricing, page-contact, page-legal, page-notfound). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Brand neutrals. These are the only colours on the site. */ --air-black: #373737; --grey: #4B4B4B; --light-blue-grey: #D6DDE3; --canvas: #F4F4F4; /* The brand book palette is exactly these four. Bleached Canvas is the page ground and the surface colour, Light Blue Grey the alternate band and every hairline, Grey the muted ink and the softer dark, Air Black the primary ink and the strongest dark. Nothing else is used. */ /* Layout */ --max-w: 1180px; --pad: 32px; --r: 2px; --r-lg: 3px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Structural band dividers follow whatever ground they sit on. Set once per band type so every strip, step row, and rule stays consistent. */ --band-line: var(--light-blue-grey); } /* -------------------------------------------------------------------------- 2. Reset and base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16.5px; line-height: 1.65; color: var(--grey); background: var(--canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; } img { display: block; height: auto; } /* -------------------------------------------------------------------------- 3. Type scale Display headings in Work Sans 200 with tight negative tracking. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--air-black); } h1 { font-size: clamp(44px, 6vw, 84px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; } h2 { font-size: clamp(32px, 4.2vw, 56px); font-weight: 300; line-height: 1.06; letter-spacing: -0.02em; } h3 { font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; } h4 { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.008em; } p { margin: 0 0 18px; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 600; color: var(--air-black); } /* Eyebrow: the brand book's small caps label */ .eyebrow { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey); } .lead { font-size: clamp(17px, 1.35vw, 20px); font-weight: 300; line-height: 1.6; color: var(--grey); max-width: 56ch; } .section-sub { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--grey); max-width: 60ch; margin-top: 20px; } .fineprint { font-size: 12.5px; line-height: 1.7; color: var(--grey); } /* -------------------------------------------------------------------------- 4. Layout and bands Light and Air Black full-bleed bands alternate to give the page weight. -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); } .band { position: relative; padding: 120px 0; overflow: hidden; } .band-tight { position: relative; padding: 80px 0; overflow: hidden; } .band-dark { position: relative; padding: 120px 0; overflow: hidden; background: var(--air-black); color: var(--light-blue-grey); } .band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--canvas); } .band-dark p, .band-dark li, .band-dark .lead, .band-dark .section-sub, .band-dark .fineprint { color: var(--light-blue-grey); } .band-dark .eyebrow { color: var(--light-blue-grey); } .band-dark > .container { position: relative; z-index: 1; } .band-dark.band-tight { padding: 80px 0; } /* The four sanctioned pairings. 1. Air Black on Bleached Canvas -> the default ground 2. Air Black on Light Blue Grey -> .band-tint 3. Bleached Canvas on Air Black -> .band-dark 4. Bleached Canvas on Grey -> .band-dark.band-slate */ /* Pairing 2: a soft tinted band. Dividers darken so they stay visible on the tint, and white surfaces sitting on it keep their own hairline. */ .band-tint { background: var(--light-blue-grey); --band-line: rgba(55, 55, 55, 0.22); } /* Pairing 4: a softer dark. Inherits every .band-dark rule and changes only the ground, so it is always used as class="band-dark band-slate". */ .band-slate { background: var(--grey); } /* Dividers on a dark ground, both pairings 3 and 4 */ .band-dark { --band-line: rgba(214, 221, 227, 0.26); } .band-head { max-width: 780px; } .band-head h2 { margin-top: 18px; } /* Hairline divider between stacked light rows */ .rule { height: 1px; background: var(--band-line); border: 0; } /* -------------------------------------------------------------------------- 5. Links, buttons, focus -------------------------------------------------------------------------- */ a { color: var(--air-black); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } .band-dark a { color: var(--canvas); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--grey); outline-offset: 3px; border-radius: var(--r); } .band-dark a:focus-visible, .band-dark button:focus-visible { outline-color: var(--light-blue-grey); } .btn { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; padding: 17px 32px; border: 1px solid transparent; border-radius: var(--r); cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn:hover { text-decoration: none; } .btn-primary { background: var(--air-black); color: var(--canvas); border-color: var(--air-black); } .btn-primary:hover { background: var(--grey); border-color: var(--grey); color: var(--canvas); } /* Ghost: transparent with an Air Black border, fills on hover */ .btn-ghost { background: transparent; color: var(--air-black); border-color: var(--air-black); } .btn-ghost:hover { background: var(--air-black); color: var(--canvas); } .band-dark .btn-primary, .btn-on-dark { background: var(--canvas); color: var(--air-black); border-color: var(--canvas); } .band-dark .btn-primary:hover, .btn-on-dark:hover { background: var(--light-blue-grey); border-color: var(--light-blue-grey); color: var(--air-black); } .band-dark .btn-ghost { color: var(--canvas); border-color: var(--light-blue-grey); } .band-dark .btn-ghost:hover { background: var(--canvas); color: var(--air-black); border-color: var(--canvas); } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } /* -------------------------------------------------------------------------- 6. Navigation Emblem plus ALGI wordmark. The mark is never stretched or recoloured. -------------------------------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 100; background: rgba(244, 244, 244, 0.94); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); border-bottom: 1px solid var(--light-blue-grey); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); height: 80px; } /* Lockup geometry, taken from the brand reference artwork and expressed against one font-size, so mark, gap and wordmark always hold the same proportions. To resize the whole lockup, change only font-size. cap height == mark height, which is the defining relationship. Work Sans cap height is 0.660em, measured from the font file, so mark 0.660em, and the cropped emblem viewBox is 210 tall for 141.91 of ink, so the img box is 0.660 * 210/141.91 = 0.977em gap 0.169em wordmark weight 300 (Light, brand book p14), letter-spacing 0.18em (brand book p7 calls for wide letter-spacing; the lockup SVG's 0.029em is not wide, so the book governs) assets/images/algi-lockup.svg has been regenerated to these same numbers, so the artwork file and this rule now agree. */ .nav-logo { display: inline-flex; align-items: center; font-size: 22px; gap: 0.169em; flex-shrink: 0; } .nav-logo:hover { text-decoration: none; } /* Uniform scale only: width follows from the emblem's own ratio. */ .nav-logo img { height: 0.977em; width: auto; display: block; } .nav-wordmark { font-size: 1em; font-weight: 300; letter-spacing: 0.18em; margin-right: -0.18em; color: var(--air-black); line-height: 1; } .nav-links { display: flex; align-items: center; gap: 38px; list-style: none; margin: 0 auto; } .nav-links a { font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); padding: 6px 0; border-bottom: 1px solid transparent; transition: color 0.16s var(--ease), border-color 0.16s var(--ease); } .nav-links a:hover { color: var(--air-black); text-decoration: none; border-bottom-color: var(--air-black); } .nav-links a[aria-current="page"] { color: var(--air-black); border-bottom-color: var(--light-blue-grey); } .nav-cta { flex-shrink: 0; padding: 13px 24px; font-size: 12px; } /* -------------------------------------------------------------------------- 7. Hero Big type left, full image right at roughly 4/5. -------------------------------------------------------------------------- */ .hero { position: relative; padding: 108px 0 116px; overflow: hidden; } .hero > .container { position: relative; z-index: 1; } .hero-split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 76px; align-items: center; } .hero-copy h1 { margin-top: 26px; } .hero-copy .lead { margin-top: 30px; } .hero-figure { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); } .hero-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .hero-centred { text-align: center; padding: 104px 0 84px; } .hero-centred h1 { margin: 26px auto 0; max-width: 16ch; } .hero-centred .lead { margin: 30px auto 0; } .hero-centred .btn-row { justify-content: center; } /* -------------------------------------------------------------------------- 8. Stat strip Three bordered columns. Density right under the hero. -------------------------------------------------------------------------- */ .statstrip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); } .statstrip-item { padding: 52px 44px 52px 0; border-right: 1px solid var(--band-line); } .statstrip-item:last-child { border-right: none; } .statstrip-item:not(:first-child) { padding-left: 44px; } .statstrip-key { font-size: clamp(28px, 2.6vw, 38px); font-weight: 300; letter-spacing: -0.028em; line-height: 1.05; color: var(--air-black); margin-bottom: 18px; } .statstrip-val { font-size: 15px; line-height: 1.7; color: var(--grey); margin: 0; } .band-dark .statstrip-key { color: var(--canvas); } .band-dark .statstrip-val { color: var(--light-blue-grey); } /* -------------------------------------------------------------------------- 9. Feature rows Alternating image and copy, hairline divided. -------------------------------------------------------------------------- */ .featurerow { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 96px 0; border-bottom: 1px solid var(--band-line); } .featurerow:last-of-type { border-bottom: none; } .featurerow-copy h2 { margin-top: 18px; } .figure { border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); } .figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .figure-tall img { aspect-ratio: 4 / 5; } /* Neutral block used where no suitable muted image exists */ .figure-blank { border-radius: var(--r-lg); background: var(--canvas); border: 1px solid var(--light-blue-grey); aspect-ratio: 4 / 3; } /* -------------------------------------------------------------------------- 10. Steps, lists, cards -------------------------------------------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border-top: 1px solid var(--band-line); } .step { padding: 44px 44px 0 0; border-right: 1px solid var(--band-line); } .step:last-child { border-right: none; } .step:not(:first-child) { padding-left: 44px; } .step-num { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; color: var(--grey); margin-bottom: 24px; } .step h3 { margin-bottom: 12px; } .step p { font-size: 15px; line-height: 1.72; color: var(--grey); margin: 0; } .steps-4 { grid-template-columns: repeat(4, 1fr); } .band-dark .step p { color: var(--light-blue-grey); } .band-dark .step-num { color: var(--light-blue-grey); } .check-list { list-style: none; margin-top: 32px; } .check-list li { position: relative; padding-left: 30px; margin-bottom: 15px; font-size: 15px; line-height: 1.7; color: var(--grey); } .check-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 16px; height: 1px; background: var(--air-black); } .band-dark .check-list li { color: var(--light-blue-grey); } .band-dark .check-list li::before { background: var(--light-blue-grey); } .spec-row { display: flex; align-items: baseline; gap: 13px; font-size: 14px; line-height: 1.6; color: var(--grey); margin-top: 13px; } .spec-row::before { content: ""; flex-shrink: 0; width: 12px; height: 1px; background: var(--light-blue-grey); transform: translateY(-4px); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 76px; align-items: center; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card { background: var(--canvas); border: 1px solid var(--band-line); border-radius: var(--r-lg); padding: 36px; } .card h3 { margin-bottom: 12px; } .card p { font-size: 15px; line-height: 1.7; color: var(--grey); margin: 0; } a.card { display: block; transition: border-color 0.18s var(--ease); } a.card:hover { border-color: var(--air-black); text-decoration: none; } a.card h3 { color: var(--air-black); } .band-dark .card { background: transparent; } .band-dark .card p { color: var(--light-blue-grey); } .band-dark a.card h3 { color: var(--canvas); } .band-dark a.card:hover { border-color: var(--light-blue-grey); } /* -------------------------------------------------------------------------- 11. Closing call to action -------------------------------------------------------------------------- */ .cta { position: relative; overflow: hidden; background: var(--air-black); padding: 128px 0; text-align: center; } .cta > .container { position: relative; z-index: 1; } .cta h2 { color: var(--canvas); max-width: 18ch; margin: 0 auto; } .cta p { color: var(--light-blue-grey); font-size: 17px; font-weight: 300; line-height: 1.7; max-width: 58ch; margin: 26px auto 40px; } .cta .btn-primary { background: var(--canvas); color: var(--air-black); border-color: var(--canvas); } .cta .btn-primary:hover { background: var(--light-blue-grey); border-color: var(--light-blue-grey); } .cta a:focus-visible { outline-color: var(--light-blue-grey); } .cta .btn-row { justify-content: center; } .cta .btn-ghost { color: var(--canvas); border-color: var(--light-blue-grey); } .cta .btn-ghost:hover { background: var(--canvas); color: var(--air-black); border-color: var(--canvas); } /* Closing band with no action of its own, used where the page IS the action. */ .cta-quiet p { margin-bottom: 0; } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--canvas); border-top: 1px solid var(--light-blue-grey); padding: 88px 0 36px; } .footer-grid { display: grid; grid-template-columns: 2.1fr 1fr 1fr 1fr; gap: 52px; padding-bottom: 60px; } /* Same lockup geometry as the nav, driven by .footer-mark font-size. */ .footer-mark { display: flex; align-items: center; font-size: 18px; gap: 0.169em; margin-bottom: 24px; } .footer-mark img { height: 0.977em; width: auto; } .footer-wordmark { font-size: 1em; font-weight: 300; letter-spacing: 0.18em; margin-right: -0.18em; color: var(--air-black); line-height: 1; } .footer-brand p { font-size: 14.5px; line-height: 1.75; color: var(--grey); max-width: 40ch; margin: 0; } .footer-col h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey); margin-bottom: 22px; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 12px; } .footer-col a { font-size: 14.5px; color: var(--grey); transition: color 0.16s var(--ease); } .footer-col a:hover { color: var(--air-black); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 30px; border-top: 1px solid var(--light-blue-grey); font-size: 12.5px; color: var(--grey); } .footer-bottom a { font-size: 12.5px; color: var(--grey); } .footer-bottom a:hover { color: var(--air-black); } .footer-legal { margin-left: auto; display: flex; gap: 22px; } /* -------------------------------------------------------------------------- 13. Page load branding moment The mark draws itself in line by line, breathes once, then the whole overlay zooms into the mark and that zoom reveals the page. Uniform scale only, so the mark never distorts. Pure CSS with forwards fill, so the overlay clears itself even if the inline remover script never runs. -------------------------------------------------------------------------- */ .algi-boot { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: var(--canvas); overflow: hidden; animation: algi-boot-out 900ms linear 560ms both; } /* The mark carries the zoom, not the overlay. The overlay is a flat ground, so scaling it was invisible - all the motion now lives on the mark itself, which accelerates out past the edges of the viewport. Nothing ever scales back down. */ .algi-boot svg { width: 132px; height: auto; overflow: visible; animation: algi-boot-rush 900ms linear 560ms both; } .algi-boot path { fill: none; stroke: var(--air-black); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: algi-boot-draw 420ms var(--ease-out) both; } .algi-boot path:nth-child(1) { animation-delay: 0ms; } .algi-boot path:nth-child(2) { animation-delay: 70ms; } .algi-boot path:nth-child(3) { animation-delay: 140ms; } @keyframes algi-boot-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } /* The mark rushes the viewer, ending at 22x - on a 132px mark that is roughly twice the width of a desktop viewport, so it leaves the screen rather than stopping short of it. The stops are GEOMETRIC, not linear: each fifth multiplies the scale by about 1.8 rather than adding a fixed amount. A zoom is perceived as a ratio, so equal ratios per unit time read as constant velocity. Paired with linear timing this gives one continuous, gently accelerating rush. A single ease-in cubic-bezier across a 1-to-22 range does the opposite: it holds the mark nearly still for the first half and then explodes, which reads as a snap rather than a zoom. Uniform scale, never a stretch, never back down. */ @keyframes algi-boot-rush { 0% { transform: scale(1); } 20% { transform: scale(1.7); } 40% { transform: scale(3); } 60% { transform: scale(5.4); } 80% { transform: scale(10); } 100% { transform: scale(22); } } /* The dissolve. Holds solid for the first 30% so the mark is read at full strength, then falls away across the remaining 630ms, accelerating to match the mark pulling away. The page is already showing through by the midpoint, so the mark appears to expand out of the page rather than off a white card. Shaped by the stops rather than a timing function, so it stays a smooth dissolve instead of the abrupt clip a late ease-in produced. */ @keyframes algi-boot-out { 0% { opacity: 1; } 30% { opacity: 1; } 55% { opacity: 0.85; } 78% { opacity: 0.45; } 100% { opacity: 0; visibility: hidden; } } /* -------------------------------------------------------------------------- 14. In page loader The same airflow lines, streaming, for fetch states. -------------------------------------------------------------------------- */ .algi-loader { display: inline-flex; align-items: center; gap: 12px; } .algi-loader[hidden] { display: none; } .algi-loader svg { width: 34px; height: 24px; overflow: visible; animation: algi-inhale 4.6s ease-in-out infinite; } .algi-loader path { fill: none; stroke: var(--air-black); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 30 100; stroke-dashoffset: 30; animation: algi-stream 2.3s cubic-bezier(0.45, 0, 0.3, 1) infinite; } .algi-loader path:nth-child(2) { animation-delay: 0.14s; } .algi-loader path:nth-child(3) { animation-delay: 0.28s; } .algi-loader .algi-loader-text { font-size: 13px; color: var(--grey); letter-spacing: 0.02em; } /* Paths carry pathLength="100", so the sweep is geometry independent. */ @keyframes algi-stream { 0% { stroke-dashoffset: 30; opacity: 0; } 16% { opacity: 1; } 78% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes algi-inhale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* -------------------------------------------------------------------------- 15. Reduced motion Straight to the page, static mark, no sweeps. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .algi-boot { display: none; } .algi-loader svg, .algi-loader path { animation: none; } .algi-loader path { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- 16. Forms -------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], textarea { font-family: inherit; font-size: 16px; font-weight: 400; color: var(--air-black); background: var(--canvas); border: 1px solid var(--light-blue-grey); border-radius: var(--r); padding: 16px 18px; width: 100%; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } input::placeholder, textarea::placeholder { color: var(--grey); } input:focus, textarea:focus { outline: none; border-color: var(--grey); box-shadow: 0 0 0 3px var(--light-blue-grey); } input:focus-visible, textarea:focus-visible { outline: none; } .field-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; } .form-error { font-size: 14.5px; color: var(--air-black); margin-top: 16px; min-height: 1em; } .form-error:not(:empty) { border-left: 2px solid var(--grey); padding-left: 14px; } /* -------------------------------------------------------------------------- 17. Tables and tags -------------------------------------------------------------------------- */ .table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); padding: 16px 18px; border-bottom: 1px solid var(--air-black); } .table td { padding: 17px 18px; border-bottom: 1px solid var(--light-blue-grey); color: var(--grey); } .table tr:last-child td { border-bottom: none; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tag { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--light-blue-grey); border-radius: var(--r); padding: 5px 10px; line-height: 1; } .tag-solid { background: var(--air-black); border-color: var(--air-black); color: var(--canvas); } /* -------------------------------------------------------------------------- 18. Page scoped: home -------------------------------------------------------------------------- */ .page-home .brief-search { position: relative; max-width: 680px; margin-top: 36px; } .page-home .brief-form { display: flex; gap: 14px; flex-wrap: wrap; } .page-home .brief-form input { flex: 1 1 260px; min-width: 0; } .page-home .brief-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--canvas); border: 1px solid var(--light-blue-grey); border-radius: var(--r); box-shadow: 0 16px 40px rgba(55, 55, 55, 0.24); z-index: 30; max-height: 320px; overflow-y: auto; } .page-home .brief-suggest .opt { padding: 14px 18px; cursor: pointer; border-bottom: 1px solid var(--light-blue-grey); } .page-home .brief-suggest .opt:last-child { border-bottom: none; } .page-home .brief-suggest .opt:hover, .page-home .brief-suggest .opt.active { background: var(--canvas); } .page-home .brief-suggest .o1 { font-size: 14.5px; color: var(--air-black); } .page-home .brief-suggest .o2 { font-size: 12.5px; color: var(--grey); margin-top: 2px; } .page-home .brief-status { margin-top: 20px; font-size: 14.5px; color: var(--light-blue-grey); min-height: 24px; display: flex; align-items: center; gap: 12px; } .page-home .brief-status .algi-loader path { stroke: var(--canvas); } .page-home .brief-status .algi-loader-text { color: var(--light-blue-grey); } .page-home .brief-note { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-top: 26px; } /* -------------------------------------------------------------------------- 19. Page scoped: platform -------------------------------------------------------------------------- */ .page-platform .panel { background: var(--canvas); border: 1px solid var(--light-blue-grey); border-radius: var(--r-lg); padding: 32px; } .page-platform .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; } .page-platform .panel-title { font-size: 13.5px; font-weight: 600; color: var(--air-black); } .page-platform .panel-note { font-size: 12px; line-height: 1.65; color: var(--grey); margin-top: 20px; } .page-platform .plot { display: flex; align-items: flex-end; gap: 9px; height: 108px; } .page-platform .plot span { flex: 1; background: var(--light-blue-grey); border-radius: var(--r) var(--r) 0 0; } .page-platform .plot span.on { background: var(--air-black); } .page-platform .plot-axis { display: flex; gap: 9px; margin-top: 10px; } .page-platform .plot-axis span { flex: 1; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); text-align: center; } .page-platform .stack-panels { display: grid; gap: 24px; } /* -------------------------------------------------------------------------- 20. Page scoped: innovation -------------------------------------------------------------------------- */ .page-innovation .stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 64px; } .page-innovation .stack-card { background: var(--canvas); border: 1px solid var(--light-blue-grey); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; } .page-innovation .stack-card-body { padding: 34px; flex: 1; } .page-innovation .stack-card h3 { margin: 16px 0 12px; } .page-innovation .stack-card p { font-size: 14.5px; line-height: 1.72; color: var(--grey); margin-bottom: 20px; } /* Product photography is pulled toward the muted palette so the hardware images sit in the same register as the rest of the page. Source files are never altered. */ .page-innovation .stack-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(0.5) contrast(0.96); } .page-innovation .metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); max-width: 820px; } .page-innovation .metric-card { padding: 48px 48px 48px 0; border-right: 1px solid var(--band-line); } .page-innovation .metric-card:last-child { border-right: none; padding-left: 48px; } .page-innovation .metric-num { font-size: clamp(46px, 5.2vw, 68px); font-weight: 300; letter-spacing: -0.035em; line-height: 1; color: var(--air-black); margin-bottom: 20px; } .page-innovation .metric-label { font-size: 15px; line-height: 1.7; color: var(--grey); } /* Design targets read hardest on an Air Black band. */ .band-dark .metric-num { color: var(--canvas); } .band-dark .metric-label { color: var(--light-blue-grey); } /* -------------------------------------------------------------------------- 21. Page scoped: pricing -------------------------------------------------------------------------- */ .page-pricing .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .page-pricing .plan { position: relative; background: var(--canvas); border: 1px solid var(--light-blue-grey); border-radius: var(--r-lg); padding: 42px 36px; display: flex; flex-direction: column; } .page-pricing .plan-featured { border-color: var(--air-black); background: var(--canvas); } .page-pricing .plan-badge { position: absolute; top: -1px; right: 28px; background: var(--air-black); color: var(--canvas); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 7px 14px; border-radius: 0 0 var(--r) var(--r); } .page-pricing .plan-name { font-size: 30px; font-weight: 300; letter-spacing: -0.028em; color: var(--air-black); margin: 16px 0 16px; } .page-pricing .plan-desc { font-size: 14.5px; line-height: 1.72; color: var(--grey); margin-bottom: 30px; } .page-pricing .plan-features { list-style: none; margin: 0 0 36px; padding-top: 28px; border-top: 1px solid var(--light-blue-grey); flex: 1; } .page-pricing .plan-features li { position: relative; padding-left: 26px; margin-bottom: 14px; font-size: 14.5px; line-height: 1.6; color: var(--grey); } .page-pricing .plan-features li::before { content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 1px; background: var(--air-black); } .page-pricing .plan-features li.off { color: var(--grey); } .page-pricing .plan-features li.off::before { background: var(--light-blue-grey); width: 7px; } .page-pricing .compare th:not(:first-child), .page-pricing .compare td:not(:first-child) { text-align: center; width: 15%; } .page-pricing .compare td:first-child { color: var(--air-black); } .page-pricing .mark { color: var(--air-black); } .page-pricing .mark svg { display: inline-block; vertical-align: middle; } .page-pricing .mark-off { color: var(--grey); } .page-pricing .faq-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 64px; border-top: 1px solid var(--band-line); } .page-pricing .faq-cell { padding: 44px 48px 44px 0; border-bottom: 1px solid var(--band-line); border-right: 1px solid var(--band-line); } .page-pricing .faq-cell:nth-child(even) { border-right: none; padding-left: 48px; } .page-pricing .faq-cell .q { font-size: 20px; font-weight: 400; letter-spacing: -0.018em; color: var(--air-black); line-height: 1.35; margin-bottom: 14px; } .page-pricing .faq-cell .a { font-size: 14.5px; color: var(--grey); line-height: 1.72; } /* -------------------------------------------------------------------------- 22. Page scoped: contact -------------------------------------------------------------------------- */ .page-contact .flow { max-width: 760px; position: relative; z-index: 1; } .page-contact .flow-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey); margin-bottom: 18px; } .page-contact .flow-dots { display: flex; gap: 9px; margin-bottom: 56px; } .page-contact .flow-dot { width: 40px; height: 2px; background: var(--light-blue-grey); transition: background-color 0.24s var(--ease); } .page-contact .flow-dot.active, .page-contact .flow-dot.done { background: var(--air-black); } .page-contact .flow-step { display: none; } .page-contact .flow-step.active { display: block; } .page-contact .flow-q { font-size: clamp(34px, 4.4vw, 58px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; color: var(--air-black); margin-bottom: 44px; } .page-contact .flow-options { display: grid; gap: 11px; max-width: 520px; } .page-contact .flow-option { font-family: inherit; font-size: 17px; font-weight: 400; color: var(--air-black); text-align: left; background: var(--canvas); border: 1px solid var(--light-blue-grey); border-radius: var(--r); padding: 20px 24px; cursor: pointer; transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease); } .page-contact .flow-option:hover { border-color: var(--grey); background: var(--canvas); } .page-contact .flow-option.selected { border-color: var(--air-black); background: var(--air-black); color: var(--canvas); } .page-contact .flow-field { margin-bottom: 24px; max-width: 520px; } .page-contact .flow-nav { margin-top: 52px; } .page-contact .flow-back { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); background: none; border: none; border-bottom: 1px solid var(--light-blue-grey); padding: 0 0 4px; cursor: pointer; } .page-contact .flow-back:hover { color: var(--air-black); border-bottom-color: var(--air-black); } .page-contact .flow-back[hidden] { display: none; } .page-contact .flow-confirm-mark { width: 44px; height: 44px; margin-bottom: 30px; color: var(--air-black); } .page-contact .flow-submit-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 12px; } /* -------------------------------------------------------------------------- 23. Page scoped: legal -------------------------------------------------------------------------- */ .page-legal .legal { max-width: 760px; } .page-legal .legal h2 { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; margin: 56px 0 16px; } .page-legal .legal h3 { font-size: 17px; font-weight: 600; margin: 30px 0 10px; } .page-legal .legal p { font-size: 16.5px; line-height: 1.75; color: var(--grey); margin-bottom: 17px; } .page-legal .legal ul { margin: 0 0 17px 24px; } .page-legal .legal li { margin-bottom: 10px; color: var(--grey); } .page-legal .legal a { color: var(--air-black); text-decoration: underline; text-underline-offset: 3px; } .page-legal .legal .box { border: 1px solid var(--light-blue-grey); border-radius: var(--r-lg); background: var(--canvas); padding: 28px 30px; margin: 30px 0; } .page-legal .legal .box .k { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; } .page-legal .legal table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; } .page-legal .legal th, .page-legal .legal td { text-align: left; padding: 14px 16px; border: 1px solid var(--light-blue-grey); vertical-align: top; color: var(--grey); } .page-legal .legal th { background: var(--canvas); font-weight: 600; color: var(--air-black); } .page-legal .legal-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--light-blue-grey); margin-top: 26px; } /* -------------------------------------------------------------------------- 24. Page scoped: 404 -------------------------------------------------------------------------- */ .page-notfound .notfound-code { font-size: clamp(88px, 15vw, 190px); font-weight: 300; letter-spacing: -0.045em; line-height: 0.9; color: var(--light-blue-grey); margin-bottom: 32px; } /* -------------------------------------------------------------------------- 25. Utilities -------------------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mt-14 { margin-top: 14px; } .mt-18 { margin-top: 18px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } /* -------------------------------------------------------------------------- 26. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1080px) { .grid-2, .featurerow { gap: 52px; } .hero-split { gap: 52px; } .page-innovation .stack-grid { grid-template-columns: 1fr 1fr; } .page-pricing .plans { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; } .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 44px; } .footer-brand { grid-column: 1 / -1; } .steps-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .band, .band-dark { padding: 84px 0; } .band-dark.band-tight { padding: 60px 0; } .band-tight { padding: 60px 0; } .cta { padding: 88px 0; } .hero { padding: 68px 0 76px; } .featurerow { padding: 64px 0; } .hero-split, .grid-2, .grid-3, .featurerow { grid-template-columns: 1fr; } /* Copy leads on mobile for every two-column row, whatever the second column holds (figure, data panel, or card stack). */ .featurerow > *, .grid-2 > * { order: 2; } .featurerow > .featurerow-copy, .grid-2 > .grid-copy { order: 1; } .hero-figure img { aspect-ratio: 4 / 3; } .figure-tall img { aspect-ratio: 4 / 3; } .statstrip, .steps, .steps-4 { grid-template-columns: 1fr; } .statstrip-item, .step { border-right: none; border-bottom: 1px solid var(--band-line); padding: 38px 0; } .statstrip-item:not(:first-child), .step:not(:first-child) { padding-left: 0; } .statstrip-item:last-child, .steps .step:last-child { border-bottom: none; } .page-innovation .stack-grid { grid-template-columns: 1fr; } .page-innovation .metric-row { grid-template-columns: 1fr; } .page-innovation .metric-card { border-right: none; border-bottom: 1px solid var(--band-line); padding: 38px 0; } .page-innovation .metric-card:last-child { border-bottom: none; padding-left: 0; } .page-pricing .faq-grid { grid-template-columns: 1fr; } .page-pricing .faq-cell { border-right: none; padding: 36px 0; } .page-pricing .faq-cell:nth-child(even) { padding-left: 0; } .page-pricing .faq-cell:last-child { border-bottom: none; } } @media (max-width: 760px) { :root { --pad: 22px; } .site-footer { padding: 64px 0 30px; } /* Two row nav: brand and action on top, links beneath. No script needed. */ .nav-inner { height: auto; flex-wrap: wrap; padding-top: 16px; padding-bottom: 6px; gap: 12px; } .nav-logo { order: 1; } .nav-cta { order: 2; margin-left: auto; } .nav-links { order: 3; width: 100%; margin: 0; gap: 24px; justify-content: flex-start; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { font-size: 12px; white-space: nowrap; } .nav-logo { font-size: 20px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 44px; } .footer-brand { grid-column: 1 / -1; } .footer-legal { margin-left: 0; width: 100%; } .algi-boot svg { width: 104px; } .page-legal .legal table { font-size: 14px; } .page-legal .legal th, .page-legal .legal td { padding: 11px; } } @media (max-width: 420px) { .btn { padding: 16px 22px; } .btn-row .btn { width: 100%; } .page-home .brief-form .btn { width: 100%; } .nav-logo { font-size: 18px; } }