/* ──────────────────────────────────────────────────────────── AXESS VERTICAL PAGE — shared stylesheet for /compute.html and /energy.html. Extends the axess-xyz design tokens with a scrollable long-form layout suitable for iframe embedding in the AXESS OS desktop web-window. Design principles: - Same tokens as index.html (JetBrains Mono / General Sans, deep-navy background, hairline accents) - Section spacing and card patterns modeled on axessmobility.com - Per-vertical accent driven by ──────────────────────────────────────────────────────────── */ :root { --bg: #070c14; --bg-deep: #04070c; --bg-card: rgba(255, 255, 255, 0.025); --bg-card-2: rgba(255, 255, 255, 0.04); --ink: #e6f1ee; --ink-dim: #6b8590; --ink-mute: #4a626d; --hairline: rgba(70, 210, 220, 0.10); --hairline-strong: rgba(70, 210, 220, 0.22); /* Default accent — overridden per vertical below */ --accent: #46d2dc; --accent-2: #2b8fe0; --accent-3: #22b573; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-sans: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --wrap: 1120px; --pad-x: clamp(1.25rem, 4vw, 3rem); } /* Per-vertical accent overrides */ body[data-vert="compute"] { --accent: #22b573; /* compute green */ --accent-2: #12a5a5; --accent-3: #46d2dc; } body[data-vert="energy"] { --accent: #12a5a5; /* energy teal */ --accent-2: #22b573; --accent-3: #46d2dc; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; min-height: 100%; background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 70%), linear-gradient(180deg, #0b131f 0%, var(--bg) 40%, var(--bg-deep) 100%); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Subtle grid backdrop — very faint so it feels like the AXESS OS grid without competing with the Tron canvas on the parent page. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 80%); opacity: 0.35; z-index: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } /* ────────────────────────────────────────────────────────── Utility bar — top strip like axessmobility.com's AXESS LANE™ ────────────────────────────────────────────────────────── */ .util { position: relative; z-index: 2; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, #0b131f) 0%, color-mix(in srgb, var(--accent-2) 55%, #0b131f) 50%, color-mix(in srgb, var(--accent-3) 45%, #0b131f) 100%); padding: 0.55rem var(--pad-x); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } .util a { border-bottom: 1px dashed rgba(255, 255, 255, 0.25); } .util a:hover { border-color: rgba(255, 255, 255, 0.6); } /* ────────────────────────────────────────────────────────── Header ────────────────────────────────────────────────────────── */ .hdr { position: sticky; top: 0; z-index: 10; padding: 1rem var(--pad-x); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; } .hdr__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink); } .hdr__brand .brand-x { width: 22px; height: 22px; color: var(--accent); } .hdr__brand sup { font-size: 8px; letter-spacing: 0; vertical-align: super; color: var(--ink-dim); margin-left: 2px; } .hdr__nav { display: flex; gap: 1.5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); } .hdr__nav a { padding: 0.35em 0; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .hdr__nav a:hover { color: var(--ink); border-color: var(--accent); } .hdr__nav a[aria-current="page"] { color: var(--ink); } @media (max-width: 640px) { .hdr__nav { display: none; } } /* ────────────────────────────────────────────────────────── Section frame ────────────────────────────────────────────────────────── */ .section { position: relative; z-index: 1; padding: clamp(4rem, 9vw, 7rem) var(--pad-x); } .section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); } .wrap { max-width: var(--wrap); margin: 0 auto; } /* Section eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; } .eyebrow::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent), 0 0 8px 0 color-mix(in srgb, currentColor 65%, transparent); } .h1 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(2.1rem, 5.5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 1.25rem; max-width: 20ch; } .h1 .accent { color: var(--accent); } .h2 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.55rem, 3.5vw, 2.35rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 1rem; } .lead { font-size: clamp(1rem, 1.35vw, 1.1rem); line-height: 1.6; color: color-mix(in srgb, var(--ink) 78%, transparent); max-width: 62ch; margin: 0; } .body { font-size: 0.98rem; line-height: 1.62; color: var(--ink-dim); max-width: 60ch; margin: 0; } /* Trademark symbol */ sup.tm { font-size: 0.55em; letter-spacing: 0; vertical-align: super; color: var(--ink-dim); } /* ────────────────────────────────────────────────────────── Hero ────────────────────────────────────────────────────────── */ .hero { min-height: 78vh; display: flex; align-items: center; padding-block: clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--hairline); position: relative; overflow: hidden; } .hero__wrap { position: relative; z-index: 2; } .hero__mark { display: inline-flex; align-items: center; gap: 0.85rem; margin-bottom: 2rem; font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); } .hero__mark .brand-x { width: 36px; height: 36px; color: var(--accent); } /* Glowing X watermark behind hero content */ .hero__watermark { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: min(58vw, 640px); aspect-ratio: 1; color: var(--accent); opacity: 0.10; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 40%, transparent)); } /* Data readout under hero — mono, tabular-ish */ .readout { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; max-width: 620px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); border-top: 1px solid var(--hairline); padding-top: 1.5rem; } .readout__k { display: block; margin-bottom: 0.35rem; color: var(--ink-mute); } .readout__v { color: var(--ink); font-size: 15px; letter-spacing: 0.06em; } @media (max-width: 540px) { .readout { grid-template-columns: 1fr 1fr; } } /* ────────────────────────────────────────────────────────── Three-up cards (Platform section) ────────────────────────────────────────────────────────── */ .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } @media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } } .card { padding: 1.75rem; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 12px; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .card:hover { border-color: var(--hairline-strong); background: var(--bg-card-2); } .card__index { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; } .card__title { font-family: var(--font-sans); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--ink); margin: 0 0 0.6rem; } .card__body { font-size: 0.94rem; line-height: 1.55; color: var(--ink-dim); margin: 0; } /* ────────────────────────────────────────────────────────── Deep-feature cards — sub-items grouped inside a card ────────────────────────────────────────────────────────── */ .feature-card { padding: 2rem 1.75rem; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 14px; position: relative; } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 1px; background: var(--accent); } .feature-card__title { font-family: var(--font-sans); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: 0 0 1.4rem; } .feature-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; } .feature-card__list li { padding-left: 0; } .feature-card__list dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; } .feature-card__list dd { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-dim); } .feature-card__list--plain li { font-size: 0.94rem; line-height: 1.5; color: color-mix(in srgb, var(--ink) 75%, transparent); display: flex; align-items: baseline; gap: 0.7rem; } .feature-card__list--plain li::before { content: "+"; color: var(--accent); font-family: var(--font-mono); font-weight: 700; flex-shrink: 0; transform: translateY(-1px); } /* ────────────────────────────────────────────────────────── CTA / Contact section ────────────────────────────────────────────────────────── */ .cta { text-align: center; padding: clamp(4rem, 8vw, 6rem) var(--pad-x); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: radial-gradient(ellipse 60% 100% at 50% 100%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%); } .cta .h2 { max-width: 22ch; margin-inline: auto; } .cta .lead { margin-inline: auto; margin-top: 0.75rem; text-align: center; } .btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85em 1.6em; background: var(--accent); color: #04121a; font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.15s ease; margin-top: 2rem; } .btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 55%, transparent); } .btn__arrow { transition: transform 0.2s ease; } .btn:hover .btn__arrow { transform: translateX(2px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--accent); box-shadow: none; } /* ────────────────────────────────────────────────────────── Footer ────────────────────────────────────────────────────────── */ .foot { padding: 3.5rem var(--pad-x) 2rem; color: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .foot__row { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .foot__brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); } .foot__brand .brand-x { width: 18px; height: 18px; color: var(--accent); } .foot__links { display: flex; gap: 1.5rem; flex-wrap: wrap; } .foot__links a { border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .foot__links a:hover { color: var(--ink); border-color: var(--accent); } .foot__legal { max-width: var(--wrap); margin: 1.5rem auto 0; color: var(--ink-mute); font-size: 10px; letter-spacing: 0.14em; } /* ────────────────────────────────────────────────────────── Iframe-embed adjustments — when the page is loaded inside the web-window, drop redundant chrome. We detect via ?embed=1. The parent web-window sets its own scrollbar treatment. ────────────────────────────────────────────────────────── */ body.is-embedded .util { display: none; } body.is-embedded .hero { min-height: calc(100vh - 60px); } /* Cyan scrollbar — wider (8px) + higher opacity so it reads on the OS's gradient backgrounds without disappearing into the ambient glow. */ html { scrollbar-width: thin; scrollbar-color: rgba(140, 220, 230, 0.45) rgba(0, 0, 0, 0.25); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: rgba(140, 220, 230, 0.45); border-radius: 999px; transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(140, 220, 230, 0.70); }