/* ============================================================ TAS — tas.tech homepage Theming system drives the three "identity directions" the user can toggle via Tweaks (the blue/purple ↔ navy/orange clash resolution). data-theme is set on . ============================================================ */ /* ---- Fonts (brand: Archivo + JetBrains Mono, matching the video) ---- */ :root { --font-display: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* ---- Base layout tokens ---- */ :root { --maxw: 1240px; --pad: clamp(20px, 5vw, 72px); --radius: 16px; --radius-sm: 10px; --ease: cubic-bezier(.22,.61,.36,1); } /* ============================================================ DIRECTION 1 — Navy + Orange (evolve toward the video) ============================================================ */ html[data-theme="navy"] { --bg: #060e1c; --bg-2: #0a1730; --surface: #0f1f3b; --surface-2: #16294a; --border: rgba(168,196,236,.16); --border-2: rgba(168,196,236,.28); --text: #eef3fb; --muted: #9db1cf; --faint: #6f86a8; --accent: #f6822d; --accent-2: #ffb070; --accent-ink:#0a1326; --glow: radial-gradient(60% 80% at 70% 20%, rgba(246,130,45,.22), transparent 70%); --hero-scrim: linear-gradient(180deg, rgba(6,14,28,.55) 0%, rgba(6,14,28,.18) 32%, rgba(6,14,28,.30) 60%, rgba(6,14,28,.92) 100%); } /* ============================================================ DIRECTION 2 — Blue + Purple (keep brand, frame the video) ============================================================ */ html[data-theme="purple"] { --bg: #090c2c; --bg-2: #11164a; --surface: #161b55; --surface-2: #1f266f; --border: rgba(176,178,255,.18); --border-2: rgba(176,178,255,.32); --text: #f1f1ff; --muted: #aab0e6; --faint: #7e83c4; --accent: #7d6cff; --accent-2: #4f86ff; --accent-ink:#0a0d2e; --glow: radial-gradient(60% 80% at 70% 20%, rgba(125,108,255,.30), transparent 70%); --hero-scrim: linear-gradient(180deg, rgba(9,12,44,.55) 0%, rgba(9,12,44,.20) 32%, rgba(9,12,44,.34) 60%, rgba(9,12,44,.94) 100%); } /* ============================================================ DIRECTION 3 — Bridge (deep navy + warm accent tying orange to the existing violet) ============================================================ */ html[data-theme="bridge"] { --bg: #070e20; --bg-2: #0c1834; --surface: #112142; --surface-2: #1a2d54; --border: rgba(180,190,235,.16); --border-2: rgba(180,190,235,.30); --text: #eef2fb; --muted: #a1b2cf; --faint: #71869f; --accent: #ff7a4d; --accent-2: #9b7cff; --accent-ink:#0b1326; --glow: radial-gradient(50% 70% at 28% 18%, rgba(155,124,255,.24), transparent 70%), radial-gradient(55% 75% at 78% 24%, rgba(255,122,77,.22), transparent 70%); --hero-scrim: linear-gradient(180deg, rgba(7,14,32,.55) 0%, rgba(7,14,32,.18) 32%, rgba(7,14,32,.32) 60%, rgba(7,14,32,.93) 100%); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } /* ---- Shared type ---- */ .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .8; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; margin: 0; } .section { padding: clamp(72px, 11vw, 150px) 0; position: relative; } .section--alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%); } .section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); } .section-head h2 { font-size: clamp(30px, 4.4vw, 52px); } .section-head p { color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); margin: 20px 0 0; max-width: 620px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s, color .25s; white-space: nowrap; } .btn svg { width: 14px; height: 14px; } .btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px var(--accent); } .btn--ghost { background: rgba(255,255,255,.04); color: var(--text); border-color: var(--border-2); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--pad); transition: background .35s var(--ease), border-color .35s, padding .35s var(--ease); border-bottom: 1px solid transparent; } .nav[data-scrolled="true"] { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--border); padding-top: 12px; padding-bottom: 12px; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__links a { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s; } .nav__links a:hover { color: var(--text); background: rgba(255,255,255,.05); } .nav__right { display: flex; align-items: center; gap: 16px; } @media (max-width: 880px) { .nav__links { display: none; } } /* ---- Liminal Systems logo ---- */ .logo { display: inline-flex; align-items: center; } .logo-svg { height: 30px; width: auto; display: block; color: var(--text); fill: currentColor; transition: color .25s var(--ease); } .logo:hover .logo-svg { color: var(--accent); } .footer .logo-svg { height: 36px; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg-2); } .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--hero-scrim); pointer-events: none; } .hero__video, .hero__video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; z-index: 2; pointer-events: auto; transform: translate(-50%, -50%) scale(1.05); } .hero__glow { position: absolute; inset: 0; z-index: 1; background: var(--glow); pointer-events: none; } .hero__inner { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--pad) clamp(60px, 9vw, 110px); max-width: var(--maxw); margin: 0 auto; } .hero__content { max-width: 880px; } .hero h1 { font-size: clamp(42px, 7.4vw, 104px); letter-spacing: -.035em; } .hero h1 .accent { color: var(--accent); } .hero__sub { font-size: clamp(18px, 2vw, 23px); color: var(--muted); margin: 26px 0 0; max-width: 560px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; } .hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); display: flex; flex-direction: column; align-items: center; gap: 10px; } .hero__scroll .line { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); animation: scrollPulse 2.2s var(--ease) infinite; } @keyframes scrollPulse { 0%,100%{ opacity:.3; transform: scaleY(.6); } 50%{ opacity:1; transform: scaleY(1);} } @media (max-height: 700px) { .hero__scroll { display: none; } } /* ---- Framed hero variant: headline below the nav, video panel beneath it ---- */ html[data-hero="frame"] .hero { display: flex; flex-direction: column; padding: clamp(124px, 17vh, 210px) var(--pad) clamp(64px, 9vw, 112px); } html[data-hero="frame"] .hero__inner { order: 1; min-height: auto; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0; justify-content: flex-start; align-items: center; text-align: center; } html[data-hero="frame"] .hero__content { max-width: 820px; } html[data-hero="frame"] .hero h1 { font-size: clamp(40px, 6vw, 84px); } html[data-hero="frame"] .hero__sub { margin-left: auto; margin-right: auto; } html[data-hero="frame"] .hero__cta { justify-content: center; } html[data-hero="frame"] .hero__media { order: 2; position: relative; inset: auto; z-index: 0; width: 100%; max-width: 1180px; margin: clamp(40px, 5vw, 68px) auto 0; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--border-2); box-shadow: 0 50px 130px -55px var(--accent), 0 0 0 1px rgba(255,255,255,.04) inset; } html[data-hero="frame"] .hero__video, html[data-hero="frame"] .hero__video iframe { top: 0; left: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; transform: scale(1.02); } html[data-hero="frame"] .hero__media::after { display: none; } html[data-hero="frame"] .hero__glow { display: none; } html[data-hero="frame"] .hero__scroll { display: none; } /* video tint toggle off */ html[data-overlay="off"] .hero__media::after { opacity: .35; } /* ============================================================ CAPABILITIES / DIFFERENTIATORS ============================================================ */ .cap-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; } @media (max-width: 900px){ .cap-grid { grid-template-columns: 1fr; } } .cap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .cap-list li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--border); font-size: 18px; } .cap-list li:last-child { border-bottom: 1px solid var(--border); } .cap-list .num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; } .diff-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; display: grid; gap: 22px; } .diff-item { display: grid; gap: 8px; } .diff-item h4 { font-family: var(--font-display); font-size: 19px; margin: 0; color: var(--text); } .diff-item p { margin: 0; color: var(--muted); font-size: 15.5px; } .diff-item .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } /* ============================================================ PRODUCTS (TABS) ============================================================ */ .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 44px; } .tab { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 13px 24px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); transition: all .25s var(--ease); display: inline-flex; align-items: center; gap: 10px; } .tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: background .25s; } .tab:hover { color: var(--text); border-color: var(--border-2); } .tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .tab[aria-selected="true"] .dot { background: var(--accent-ink); } .panel { display: none; } .panel[data-active="true"] { display: block; } .product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; } @media (max-width: 920px){ .product { grid-template-columns: 1fr; } } .product__name { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .product__name h3 { font-size: clamp(34px, 5vw, 60px); } .product__name .tm { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: .14em; } .product__expand { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .08em; margin: 14px 0 0; } .product__lede { font-size: clamp(18px, 1.8vw, 22px); color: var(--text); margin: 26px 0 0; line-height: 1.45; } .product__feats { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; } .product__feats li { display: grid; gap: 6px; padding-left: 20px; position: relative; } .product__feats li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); } .product__feats h5 { font-family: var(--font-display); font-size: 18px; margin: 0; } .product__feats p { margin: 0; color: var(--muted); font-size: 15.5px; } .product__cta { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; } /* media side */ .product__media { display: grid; gap: 14px; } .shot { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); aspect-ratio: 4 / 3; display: grid; place-items: center; } .shot--wide { aspect-ratio: 16 / 7; } .shot--shot-fit { aspect-ratio: 3 / 2; background: #0b0d16; } .shot__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .shot__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(70% 70% at 50% 40%, black, transparent); opacity: .5; } .shot__label { position: relative; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px; } .shot__icon { width: 40px; height: 40px; opacity: .8; } .shot__icon path, .shot__icon circle, .shot__icon line { stroke: var(--accent); } .shot__video { position: absolute; inset: 0; } .shot__video video { width: 100%; height: 100%; object-fit: cover; } .shot__video::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 55%, transparent)); } /* placeholder note */ .note { margin-top: 22px; padding: 14px 18px; border-radius: var(--radius-sm); border: 1px dashed var(--border-2); background: rgba(255,255,255,.03); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--faint); display: flex; gap: 10px; align-items: flex-start; } .note b { color: var(--accent); font-weight: 600; } .product__sub-tabs { display: flex; gap: 6px; margin: 28px 0 4px; } .product__sub-tab { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px; border-radius: 8px; cursor: pointer; color: var(--muted); border: 1px solid var(--border); background: transparent; transition: all .2s; } .product__sub-tab[aria-selected="true"] { color: var(--text); border-color: var(--accent); background: rgba(255,255,255,.04); } /* ============================================================ RESEARCH & CONSULTANCY ============================================================ */ .research-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px){ .research-grid { grid-template-columns: 1fr; } } .rcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; display: grid; gap: 16px; align-content: start; transition: border-color .3s, transform .3s var(--ease); } .rcard:hover { border-color: var(--accent); transform: translateY(-4px); } .rcard__no { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .14em; } .rcard h4 { font-family: var(--font-display); font-size: 23px; margin: 0; } .rcard p { margin: 0; color: var(--muted); font-size: 15.5px; } /* ============================================================ PARTICIPANTS ============================================================ */ .part-block { display: grid; gap: 16px; margin-bottom: 44px; } .part-block:last-child { margin-bottom: 0; } .part-block > h4 { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .chips { display: flex; flex-wrap: wrap; gap: 12px; } .chip { font-family: var(--font-body); font-size: 15px; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color .25s, color .25s; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip--lead { font-family: var(--font-display); font-size: 18px; padding: 16px 24px; } /* ============================================================ QUAD / CTA STRIP ============================================================ */ .strip { border-radius: calc(var(--radius) + 6px); border: 1px solid var(--border-2); background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); padding: clamp(36px, 5vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; overflow: hidden; } .strip::before { content:""; position:absolute; inset:0; background: var(--glow); opacity:.7; pointer-events:none; } .strip__txt { position: relative; max-width: 560px; } .strip__txt h3 { font-size: clamp(26px, 3.4vw, 40px); } .strip__txt p { color: var(--muted); margin: 14px 0 0; } .strip .btn { position: relative; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--border); padding: 56px 0 40px; } .footer__top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; } .footer__links { display: flex; gap: 28px; flex-wrap: wrap; } .footer__links a { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .footer__links a:hover { color: var(--accent); } .footer__bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--faint); } .footer__bottom a { color: var(--accent); } /* reveal on scroll — content is visible by default; .in is a no-op safeguard so content never depends on a transition completing */ .reveal { opacity: 1; transform: none; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }