/* ========================================================================== Appalore — design system One stylesheet, no framework. Two axes of theming, both driven by attributes on : [data-platform] — which product's accent hues apply [data-theme] — absent (or "light") is the default; "dark" opts in ========================================================================== */ /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } /* --- tokens --------------------------------------------------------------- */ /* Light is the default theme: everything below is the light palette, and the [data-theme="dark"] block further down swaps only what has to change. */ :root { /* surfaces — a deliberate ramp, not arbitrary greys */ --bg: #ffffff; --surface-1: #f7f7fa; --surface-2: #f0f0f5; --surface-3: #e6e6ee; /* ink */ --ink: #0d0d12; --ink-2: #4b4b58; --ink-3: #70707e; --ink-4: #9a9aa9; /* hairlines */ --line: color-mix(in oklab, var(--ink) 12%, transparent); --line-2: color-mix(in oklab, var(--ink) 20%, transparent); /* accent — overridden per platform */ --accent: #5257d8; --accent-2: #8b2fd6; --accent-ink:#ffffff; /* text sitting on a filled accent */ /* derived accent washes */ --accent-a08: color-mix(in oklab, var(--accent) 8%, transparent); --accent-a15: color-mix(in oklab, var(--accent) 15%, transparent); --accent-a30: color-mix(in oklab, var(--accent) 30%, transparent); --accent-a55: color-mix(in oklab, var(--accent) 55%, transparent); /* hover on a filled accent: darken on light, lighten on dark */ --accent-soft: color-mix(in oklab, var(--accent) 82%, black); /* the solid-ink button pair, and the elevation shadow */ --primary-hover: #2a2a33; --shadow-lift: 0 26px 50px -30px rgba(15, 15, 25, .28); --shadow-panel: 0 24px 48px -26px rgba(15, 15, 25, .22); color-scheme: light; /* type */ --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace; /* fluid type scale */ --t-mega: clamp(2.85rem, 1.30rem + 6.4vw, 6.5rem); --t-h1: clamp(2.35rem, 1.35rem + 4.2vw, 4.6rem); --t-h2: clamp(1.95rem, 1.30rem + 2.7vw, 3.4rem); --t-h3: clamp(1.35rem, 1.10rem + 1.0vw, 1.85rem); --t-lead: clamp(1.06rem, 0.98rem + 0.40vw, 1.32rem); /* structure */ --container: 1280px; --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 3rem); --radius: 18px; --radius-lg: 26px; /* motion */ --ease: cubic-bezier(.22, 1, .36, 1); --dur: .45s; } /* --- dark theme ------------------------------------------------------------ Opt-in via data-theme="dark" on . Only the palette moves; every spacing, type and motion token above is shared. */ :root[data-theme="dark"] { --bg: #08080b; --surface-1: #0e0e13; --surface-2: #15151c; --surface-3: #1d1d26; --ink: #f4f4f6; --ink-2: #a9a9b6; --ink-3: #74747f; --ink-4: #4a4a55; --line: color-mix(in oklab, var(--ink) 10%, transparent); --line-2: color-mix(in oklab, var(--ink) 16%, transparent); --accent: #8b93ff; --accent-2: #c084fc; --accent-ink:#0a0a10; --accent-soft: color-mix(in oklab, var(--accent) 78%, white); --primary-hover: #ffffff; --shadow-lift: 0 26px 50px -30px rgba(0, 0, 0, .9); --shadow-panel: 0 24px 48px -26px rgba(0, 0, 0, .8); color-scheme: dark; } /* per-platform accents. Hues chosen for separation when the four sit side by side. Each needs two versions: the dark-theme hue is tuned to glow against near-black, which is far too pale to read as text on white, so light gets a deeper cousin of the same hue. [data-platform] lives on for product pages and on .pcard for the homepage grid, so the dark rules need both a self and a descendant match. */ [data-platform="eigenmap"] { --accent: #1d5fd0; --accent-2: #8a6111; } /* azure + gold */ [data-platform="numidroid"] { --accent: #0b7a6d; --accent-2: #0369a1; } /* teal + sky */ [data-platform="nexametry"] { --accent: #15803d; --accent-2: #4d7c0f; } /* jade + lime */ [data-platform="lanternrealm"]{ --accent: #8b2fd6; --accent-2: #b525c9; } /* violet + pink */ :root[data-theme="dark"][data-platform="eigenmap"], :root[data-theme="dark"] [data-platform="eigenmap"] { --accent: #5b9dff; --accent-2: #e0b169; } :root[data-theme="dark"][data-platform="numidroid"], :root[data-theme="dark"] [data-platform="numidroid"] { --accent: #2dd4bf; --accent-2: #38bdf8; } :root[data-theme="dark"][data-platform="nexametry"], :root[data-theme="dark"] [data-platform="nexametry"] { --accent: #4ade80; --accent-2: #bef264; } :root[data-theme="dark"][data-platform="lanternrealm"], :root[data-theme="dark"] [data-platform="lanternrealm"]{ --accent: #c084fc; --accent-2: #f0abfc; } /* --- base ----------------------------------------------------------------- */ html { background: var(--bg); overscroll-behavior-y: none; scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink-2); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior-y: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; } p { text-wrap: pretty; } strong { color: var(--ink); font-weight: 600; } ::selection { background: var(--accent-a30); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%); background: var(--accent); color: var(--accent-ink); padding: .7rem 1.25rem; border-radius: 0 0 12px 12px; font-weight: 600; font-size: .9rem; z-index: 300; transition: transform .2s var(--ease); } .skip-link:focus { transform: translate(-50%, 0); } /* --- layout --------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* Grid and flex children default to min-width:auto, which lets replaced elements (canvas) and long unbroken strings push past the viewport. Opt every layout child down to 0 so columns can actually shrink. */ .container > *, .split > *, .hero__split > *, .cards > *, .platforms > *, .steps > *, .footer__grid > *, .footer__cols > *, .stats > * { min-width: 0; } .section { padding-block: clamp(2.75rem, 2rem + 3vw, 4.85rem); } .section--tight { padding-block: clamp(2rem, 1.55rem + 2vw, 3.2rem); } .rule { border-top: 1px solid var(--line); } #platforms { padding-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); } /* Information-dense platform pages need a deliberate rhythm rather than the roomier editorial spacing used elsewhere. */ html[data-platform="nexametry"] main > .section, html[data-platform="lanternrealm"] main > .section { padding-block: clamp(2.5rem, 2.1rem + 1vw, 3rem); } .section-intro { max-width: 46rem; margin-bottom: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); } .section-intro.is-center { margin-inline: auto; text-align: center; } .section-intro h2 { font-size: var(--t-h2); margin-bottom: .85rem; } .section-intro p { font-size: var(--t-lead); color: var(--ink-2); } /* eyebrow — the small mono label above headings */ .eyebrow { font-family: var(--font-mono); font-size: .69rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem; } .section-intro.is-center .eyebrow { justify-content: center; } .eyebrow--center { justify-content: center; } .eyebrow::before { content: ""; width: 1.65rem; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); flex: none; } .section-intro.is-center .eyebrow::after { content: ""; width: 1.65rem; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); flex: none; } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: 3.25rem; padding-inline: 1.6rem; border-radius: 999px; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; transition: background-color .22s, border-color .22s, color .22s, transform .12s var(--ease); } .btn:active { transform: scale(.982); } .btn svg { width: 1.05em; height: 1.05em; flex: none; } .btn--primary { background: var(--ink); color: var(--bg); } .btn--primary:hover { background: var(--primary-hover); } .btn--accent { background: var(--accent); color: var(--accent-ink); } .btn--accent:hover { background: var(--accent-soft); } .btn--ghost { border: 1px solid var(--line-2); color: var(--ink); } .btn--ghost:hover { border-color: color-mix(in oklab, var(--ink) 38%, transparent); background: color-mix(in oklab, var(--ink) 5%, transparent); } .btn--sm { height: 2.6rem; padding-inline: 1.1rem; font-size: .85rem; } .btn .arr { transition: transform .22s var(--ease); } .btn:hover .arr { transform: translateX(3px); } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } .is-center .btn-row, .btn-row.is-center { justify-content: center; } /* stacked buttons of differing widths look accidental — match them */ @media (max-width: 520px) { .btn-row { flex-direction: column; align-items: stretch; } .btn-row .btn { width: 100%; } } /* --- nav ------------------------------------------------------------------ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; } .nav.is-scrolled { border-bottom-color: var(--line); background: color-mix(in oklab, var(--bg) 93%, transparent); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 4.6rem; } /* wordmark — "Appalore" only, per brand rule */ .wordmark { display: inline-flex; align-items: center; gap: .6rem; flex: none; } .wordmark__mark { width: 2.05rem; height: 2.05rem; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1; box-shadow: 0 4px 16px -6px var(--accent-a55); } :root[data-platform="eigenmap"] .wordmark__mark { background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 58%, #071b46)); } .wordmark__text { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.035em; color: var(--ink); } .wordmark__sub { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); padding-left: .55rem; margin-left: .1rem; border-left: 1px solid var(--line-2); } .nav__links { display: none; align-items: center; gap: 1.55rem; } .nav__links a { font-size: .9rem; font-weight: 500; color: var(--ink-2); position: relative; padding-block: .3rem; transition: color .2s; } .nav__links a:hover { color: var(--ink); } .nav__links a[aria-current="page"] { color: var(--ink); } .nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); } .nav__actions { display: flex; align-items: center; gap: .6rem; flex: none; } /* product pages: "Appalore" wordmark, then the platform it belongs to */ .nav__brand { display: flex; align-items: center; gap: .85rem; min-width: 0; } .nav__product { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); padding-left: .85rem; border-left: 1px solid var(--line-2); white-space: nowrap; } @media (max-width: 460px) { .nav__product { display: none; } } /* Drawer counterpart to .nav__product. The nav hides that label below 460px — .drawer__top is a fixed-height flex row with two buttons already in it, so there is no room inline. That is exactly the width where the drawer takes over, so the platform name lives here instead: same typographic treatment, block placement rather than inline. */ .drawer__product { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-top: 1.75rem; } /* .drawer__links carries margin-top: 2rem for the case where it follows .drawer__top directly; tighten it when the label sits between them. */ .drawer__product + .drawer__links { margin-top: .9rem; } .nav__burger { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); } .nav__burger svg { width: 1.15rem; height: 1.15rem; } /* --- theme toggle --------------------------------------------------------- Shows the icon for the theme it will switch you *to*, so the button always reads as "go here" rather than "you are here". */ .theme-toggle { width: 2.6rem; height: 2.6rem; display: none; place-items: center; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink-2); transition: color .2s, border-color .2s, background-color .2s; } .theme-toggle:hover { color: var(--ink); border-color: color-mix(in oklab, var(--ink) 38%, transparent); background: color-mix(in oklab, var(--ink) 5%, transparent); } .theme-toggle svg { width: 1.1rem; height: 1.1rem; } .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: none; } :root[data-theme="dark"] .theme-toggle__sun { display: block; } /* Three controls plus the wordmark will not fit a 360px bar, so below 560 the nav drops the toggle and the drawer carries it instead. */ @media (min-width: 560px) { .nav__actions .theme-toggle { display: grid; } } .drawer__actions { display: flex; align-items: center; gap: .6rem; } .drawer__actions .theme-toggle { display: grid; } /* five product links plus a button need real room — hold the drawer until 1080 */ @media (min-width: 1080px) { .nav__links { display: flex; } .nav__burger { display: none; } } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 200; background: color-mix(in oklab, var(--bg) 96%, transparent); backdrop-filter: blur(16px); display: flex; flex-direction: column; padding: 1.15rem var(--gutter) 2.5rem; animation: drawerIn .28s var(--ease); } @keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .drawer__top { display: flex; align-items: center; justify-content: space-between; height: 3.45rem; } .drawer__close { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); } .drawer__close svg { width: 1.1rem; height: 1.1rem; } .drawer__links { display: flex; flex-direction: column; margin-top: 2rem; } .drawer__links a { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); padding-block: .85rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .drawer__links a span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; color: var(--ink-3); text-transform: uppercase; } .drawer .btn { margin-top: 1.8rem; width: 100%; } /* --- hero ----------------------------------------------------------------- */ .hero { position: relative; min-height: 560px; display: grid; align-items: center; /* the top figure clears the 4.6rem fixed nav before it starts spacing */ padding-block: clamp(6rem, 4.8rem + 4.5vw, 7.75rem) clamp(2.6rem, 1.9rem + 2.5vw, 3.8rem); overflow: hidden; isolation: isolate; } .hero--tall { min-height: min(86dvh, 760px); } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Hero scrims are the one place the two themes need genuinely different gradients rather than a token swap. Every hero photograph is dark, so dark mode only has to blend it into the page, while light mode has to veil it hard enough for near-black type to sit on top. Light is the base rule; the dark overrides restore the original, lighter-touch treatment. */ .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in oklab, var(--bg) 94%, transparent) 0%, color-mix(in oklab, var(--bg) 86%, transparent) 48%, color-mix(in oklab, var(--bg) 58%, transparent) 100%), linear-gradient(180deg, color-mix(in oklab, var(--bg) 70%, transparent) 0%, color-mix(in oklab, var(--bg) 68%, transparent) 70%, var(--bg) 100%); } :root[data-theme="dark"] .hero__scrim { background: radial-gradient(115% 82% at 50% 8%, transparent 12%, color-mix(in oklab, var(--bg) 62%, transparent) 58%, var(--bg) 100%), linear-gradient(180deg, color-mix(in oklab, var(--bg) 78%, transparent) 0%, color-mix(in oklab, var(--bg) 58%, transparent) 42%, var(--bg) 96%); } .hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; } /* For hero art that already ships its own darkening. In dark mode, applying the full scrim on top double-darkens and buries the picture, so it only does the bottom fade into the page plus a light wash behind the copy. In light mode "pre-darkened" is no help at all, so it veils like any other. */ .hero__scrim--soft { background: linear-gradient(90deg, color-mix(in oklab, var(--bg) 94%, transparent) 0%, color-mix(in oklab, var(--bg) 82%, transparent) 48%, color-mix(in oklab, var(--bg) 45%, transparent) 100%), linear-gradient(180deg, color-mix(in oklab, var(--bg) 58%, transparent) 0%, color-mix(in oklab, var(--bg) 60%, transparent) 72%, var(--bg) 100%); } :root[data-theme="dark"] .hero__scrim--soft { background: linear-gradient(90deg, color-mix(in oklab, var(--bg) 62%, transparent) 0%, color-mix(in oklab, var(--bg) 40%, transparent) 42%, color-mix(in oklab, var(--bg) 12%, transparent) 78%, transparent 100%), linear-gradient(180deg, color-mix(in oklab, var(--bg) 55%, transparent) 0%, transparent 32%, color-mix(in oklab, var(--bg) 45%, transparent) 76%, var(--bg) 100%); } .hero__content { position: relative; max-width: 56rem; } .hero--center .hero__content { margin-inline: auto; text-align: center; } .hero h1 { font-size: var(--t-h1); margin-bottom: 1.1rem; } .hero--home h1 { font-size: var(--t-mega); letter-spacing: -.045em; } .hero__lead { font-size: var(--t-lead); color: var(--ink-2); max-width: 40rem; margin-bottom: 1.7rem; } .hero--center .hero__lead { margin-inline: auto; } /* status pill */ .pill { display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .95rem .42rem .72rem; border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in oklab, var(--ink) 4%, transparent); font-family: var(--font-mono); font-size: .67rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1.15rem; } .pill__dot { width: .44rem; height: .44rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-a15); } .pill__dot--live { animation: pulseDot 2.4s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-a15); } 50% { box-shadow: 0 0 0 6px transparent; } } /* homepage hero: statement beside the live basis figure */ .hero__split { position: relative; display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; } @media (min-width: 960px) { .hero__split { grid-template-columns: 1.08fr .92fr; } .hero--split .hero__content { max-width: none; } } .hero__scrim--deep { background: radial-gradient(72% 94% at 76% 44%, color-mix(in oklab, var(--bg) 45%, transparent), color-mix(in oklab, var(--bg) 82%, transparent) 70%), linear-gradient(90deg, color-mix(in oklab, var(--bg) 94%, transparent) 0%, color-mix(in oklab, var(--bg) 76%, transparent) 100%), linear-gradient(180deg, transparent 55%, var(--bg) 100%); } @media (max-width: 720px) { .hero__scrim, .hero__scrim--soft, .hero__scrim--deep { background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 91%, transparent) 0%, color-mix(in oklab, var(--bg) 84%, transparent) 58%, var(--bg) 100%); } :root[data-theme="dark"] .hero__scrim, :root[data-theme="dark"] .hero__scrim--soft, :root[data-theme="dark"] .hero__scrim--deep { background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 72%, transparent) 0%, color-mix(in oklab, var(--bg) 62%, transparent) 58%, var(--bg) 100%); } } :root[data-theme="dark"] .hero__scrim--deep { background: radial-gradient(100% 78% at 30% 20%, transparent 0%, color-mix(in oklab, var(--bg) 55%, transparent) 45%, var(--bg) 96%), linear-gradient(180deg, color-mix(in oklab, var(--bg) 88%, transparent) 0%, color-mix(in oklab, var(--bg) 80%, transparent) 40%, var(--bg) 97%); } @media (max-width: 720px) { :root[data-theme="dark"] .hero__scrim--deep { background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 72%, transparent) 0%, color-mix(in oklab, var(--bg) 62%, transparent) 58%, var(--bg) 100%); } } /* the four names under the headline */ .hero__vectors { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.2rem; } .hero__vectors a { color: var(--ink-2); transition: color .2s; } .hero__vectors a:hover { color: var(--ink); } .hero__vectors a:nth-of-type(1):hover { color: #1d5fd0; } .hero__vectors a:nth-of-type(2):hover { color: #0b7a6d; } .hero__vectors a:nth-of-type(3):hover { color: #15803d; } .hero__vectors a:nth-of-type(4):hover { color: #8b2fd6; } :root[data-theme="dark"] .hero__vectors a:nth-of-type(1):hover { color: #5b9dff; } :root[data-theme="dark"] .hero__vectors a:nth-of-type(2):hover { color: #2dd4bf; } :root[data-theme="dark"] .hero__vectors a:nth-of-type(3):hover { color: #4ade80; } :root[data-theme="dark"] .hero__vectors a:nth-of-type(4):hover { color: #c084fc; } .hero__vectors i { color: var(--ink-4); font-style: normal; } /* --- the basis / vector statement ---------------------------------------- */ .basis { position: relative; overflow: hidden; } .basis__grid { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: center; } @media (min-width: 940px) { .basis__grid { grid-template-columns: 1fr 1fr; } } .basis__statement { font-size: var(--t-h2); margin-bottom: 1.05rem; } .basis__statement em { font-style: normal; background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .basis__note { font-size: var(--t-lead); color: var(--ink-2); max-width: 34rem; } .basis__figure { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 30rem; margin-inline: auto; } .basis__figure canvas { width: 100%; height: 100%; } /* "An Appalore platform" line under the hero CTAs */ .hero__attrib { margin-top: 1.6rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); } /* --- two-column split ----------------------------------------------------- */ .split { display: grid; gap: clamp(1.9rem, 1rem + 3.4vw, 3.25rem); align-items: center; } @media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } } .split--wide-left { } @media (min-width: 940px) { .split--wide-left { grid-template-columns: 1.15fr .85fr; } } .split h2 { font-size: var(--t-h2); margin-bottom: 1rem; } .lead-p { font-size: var(--t-lead); color: var(--ink-2); margin-bottom: 1rem; } .lead-p:last-child { margin-bottom: 0; } /* --- code-drawn figures --------------------------------------------------- */ .figure-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(70% 70% at 50% 35%, var(--accent-a08), transparent 70%), var(--surface-1); padding: 1.25rem; overflow: hidden; box-shadow: var(--shadow-panel); } .figure-card canvas, .figure-card svg { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 12px; } .figure-card figcaption { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-3); line-height: 1.55; } .figure-card--wide canvas, .figure-card--wide svg { aspect-ratio: 16 / 10; } /* --- generative-media workflow graph ------------------------------------ */ .media-workflow { margin-bottom: 1rem; padding: clamp(1.2rem, .9rem + 1.3vw, 1.8rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(70% 100% at 50% 0, var(--accent-a15), transparent 72%), var(--surface-1); box-shadow: var(--shadow-panel); overflow: hidden; } .media-workflow__heading { margin-bottom: 1.25rem; } .media-workflow__heading h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); letter-spacing: -.035em; } .media-workflow__rail { display: grid; gap: .85rem; } .media-workflow__node { position: relative; min-height: 8rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in oklab, var(--surface-2) 90%, transparent); display: flex; flex-direction: column; justify-content: center; } .media-workflow__node > span { margin-bottom: .45rem; color: var(--accent); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; } .media-workflow__node strong { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.15; } .media-workflow__node small { margin-top: .45rem; color: var(--ink-3); font-size: .74rem; line-height: 1.45; } .media-workflow figcaption { margin-top: 1rem; color: var(--ink-3); font-size: .82rem; line-height: 1.55; } .media-capabilities { margin-top: clamp(2rem, 1.6rem + 1vw, 2.75rem); } @media (min-width: 900px) { .media-workflow__rail { grid-template-columns: repeat(5, minmax(0, 1fr)); } .media-workflow__node:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -.86rem; top: 50%; width: .86rem; height: 1px; background: var(--accent-a55); } } /* --- shared architecture map -------------------------------------------- */ .architecture-layout { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); align-items: start; } @media (min-width: 980px) { .architecture-layout { grid-template-columns: .92fr 1.08fr; } .architecture-map { position: sticky; top: 6.5rem; } } .architecture-map { padding: clamp(1.1rem, .8rem + 1.2vw, 1.6rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(80% 70% at 50% 50%, var(--accent-a15), transparent 72%), var(--surface-1); box-shadow: var(--shadow-panel); overflow: hidden; } .architecture-map__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: .15rem; } .architecture-map__grid::before, .architecture-map__grid::after { content: ""; position: absolute; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent-a30), transparent); } .architecture-map__grid::before { left: 12%; right: 12%; top: 50%; height: 1px; } .architecture-map__grid::after { top: 12%; bottom: 12%; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--accent-a30), transparent); } .architecture-map__node, .architecture-map__core { position: relative; min-height: 8.2rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in oklab, var(--surface-2) 88%, transparent); display: flex; flex-direction: column; justify-content: flex-end; z-index: 1; } .architecture-map__node { transition: transform .25s var(--ease), border-color .25s, background-color .25s; } .architecture-map__node:hover { transform: translateY(-3px); border-color: var(--accent-a55); background: color-mix(in oklab, var(--accent) 10%, var(--surface-1)); } .architecture-map__node span, .architecture-map__core span { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; } .architecture-map__node strong, .architecture-map__core strong { font-family: var(--font-display); font-size: clamp(1rem, .9rem + .45vw, 1.25rem); line-height: 1.08; } .architecture-map__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 0; width: min(12rem, 45%); padding: 1rem; align-items: center; justify-content: center; text-align: center; background: var(--bg); border-color: var(--accent-a30); box-shadow: 0 14px 35px -20px color-mix(in oklab, var(--accent) 70%, transparent); z-index: 2; } .architecture-map__core small { margin-top: .35rem; color: var(--ink-3); font-size: .66rem; } .architecture-map figcaption { margin-top: 1rem; color: var(--ink-3); font-size: .82rem; text-align: center; } @media (min-width: 621px) { /* Keep the upper product names outside the core's overlap zone. */ .architecture-map__node:nth-child(1), .architecture-map__node:nth-child(2) { justify-content: flex-start; } } @media (max-width: 620px) { .architecture-map__grid { grid-template-columns: 1fr 1fr; } .architecture-map__grid::before, .architecture-map__grid::after { display: none; } .architecture-map__core { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; grid-row: 1; width: 100%; } .architecture-map__node { min-height: 6.4rem; } } /* --- foreground product proof ------------------------------------------- */ .visual-proof { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-panel); } @media (min-width: 900px) { .visual-proof { grid-template-columns: .82fr 1.18fr; min-height: 31rem; } .visual-proof--reverse { grid-template-columns: 1.18fr .82fr; } .movement-proof { grid-template-columns: 1.3fr .7fr; } .visual-proof--reverse .visual-proof__copy { order: 2; } .visual-proof--reverse .visual-proof__media { order: 1; } } .visual-proof__copy { position: relative; z-index: 1; padding: clamp(1.6rem, 1rem + 2.4vw, 3.25rem); display: flex; flex-direction: column; justify-content: center; } .visual-proof__copy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(85% 65% at 0 0, var(--accent-a15), transparent 75%); } .visual-proof__copy h2 { font-size: var(--t-h2); margin-bottom: 1rem; } .visual-proof__copy p { font-size: var(--t-lead); color: var(--ink-2); } .visual-proof__points { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; } .visual-proof__points span { padding: .42rem .72rem; border: 1px solid var(--accent-a30); border-radius: 999px; background: var(--accent-a08); color: var(--accent); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; } .visual-proof__media { position: relative; min-height: 20rem; background: #08080b; overflow: hidden; } .visual-proof__media img { width: 100%; height: 100%; object-fit: cover; } .movement-proof .visual-proof__media img { object-fit: contain; object-position: center; } .visual-proof__media figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; width: fit-content; max-width: calc(100% - 2rem); padding: .5rem .72rem; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(8,8,11,.72); backdrop-filter: blur(10px); color: rgba(255,255,255,.78); font-size: .74rem; } /* Nexametry food comparison. */ .food-proof { margin-bottom: clamp(2.25rem, 1.8rem + 1.6vw, 3.2rem); } .food-compare { background: #08080b; } .food-compare img { object-position: center; } .lifestyle-cards { margin-top: 0; } /* Full-width editorial image shown without a scrim or overlay. */ .wide-figure { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #08080b; box-shadow: var(--shadow-panel); } .wide-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* --- next-platform footer cards ------------------------------------------- */ .footer__nextrow { display: grid; gap: 1rem; margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .nextcard { display: block; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); transition: border-color .3s, background-color .3s, transform .3s var(--ease); } .nextcard:hover { border-color: var(--accent-a30); background: var(--surface-2); transform: translateY(-3px); } .nextcard__k { display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-4); margin-bottom: .6rem; } .nextcard__t { display: block; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); letter-spacing: -.025em; margin-bottom: .3rem; } .nextcard:hover .nextcard__t { color: var(--accent); } .nextcard__d { display: block; font-size: .87rem; color: var(--ink-3); } /* --- platform cards ------------------------------------------------------- */ .platforms { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .pcard { --card-h: 27rem; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--card-h); padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); overflow: hidden; isolation: isolate; transition: transform var(--dur) var(--ease), border-color .3s, box-shadow var(--dur) var(--ease); } .pcard:hover, .pcard:focus-within { transform: translateY(-8px); border-color: var(--accent-a30); box-shadow: var(--shadow-lift), 0 0 0 1px var(--accent-a15); } .pcard__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .pcard:hover .pcard__img { transform: scale(1.06); } .pcard__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 14%, transparent) 0%, color-mix(in oklab, var(--bg) 48%, transparent) 52%, color-mix(in oklab, var(--bg) 93%, transparent) 84%, var(--bg) 100%); } :root[data-theme="dark"] .pcard__scrim { background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 12%, transparent) 0%, color-mix(in oklab, var(--bg) 55%, transparent) 52%, color-mix(in oklab, var(--bg) 94%, transparent) 84%, var(--bg) 100%); } /* Both chips float over the top of the card art, which is unveiled at that height — so each needs its own backdrop to stay legible whatever the photograph is doing underneath. */ .pcard__tag, .pcard__index { position: absolute; top: 1.4rem; font-family: var(--font-mono); letter-spacing: .19em; text-transform: uppercase; padding: .34rem .7rem; border-radius: 999px; background: color-mix(in oklab, var(--bg) 80%, transparent); border: 1px solid var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pcard__tag { left: 1.6rem; font-size: .62rem; color: var(--ink); } .pcard__index { right: 1.6rem; font-size: .62rem; color: var(--accent); letter-spacing: .1em; } .pcard h3 { font-size: var(--t-h3); margin-bottom: .5rem; } .pcard p { font-size: .93rem; color: var(--ink-2); margin-bottom: 1.1rem; } .pcard__go { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); } .pcard__go svg { width: .9rem; height: .9rem; transition: transform .25s var(--ease); } .pcard:hover .pcard__go svg { transform: translateX(4px); } .pcard__link { position: absolute; inset: 0; z-index: 3; } .pcard__link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* --- generic cards -------------------------------------------------------- */ .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .card { padding: 1.65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); transition: border-color .3s, background-color .3s, transform .3s var(--ease); } .card:hover { border-color: var(--accent-a30); background: var(--surface-2); transform: translateY(-3px); } .card h3, .card h4 { font-size: 1.12rem; margin-bottom: .5rem; letter-spacing: -.02em; } .card p { font-size: .92rem; color: var(--ink-2); } .card__icon { width: 2.5rem; height: 2.5rem; border-radius: 11px; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--accent-a08); border: 1px solid var(--accent-a15); color: var(--accent); } .card__icon svg { width: 1.2rem; height: 1.2rem; } /* numbered feature rows */ .steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: step; } .step { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); } .step__n { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; color: var(--accent); margin-bottom: .85rem; display: block; } .step h4 { font-size: 1.05rem; margin-bottom: .45rem; } .step p { font-size: .9rem; } /* --- stat strip ----------------------------------------------------------- */ .stats { display: grid; gap: .85rem; padding-block: 1.15rem; } .stats__top { display: flex; flex-wrap: wrap; gap: 1rem 2.75rem; align-items: baseline; justify-content: space-between; } .stats__row { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; align-items: baseline; } .stat { display: flex; align-items: baseline; gap: .55rem; } .stat__v { font-family: var(--font-mono); font-size: .95rem; color: var(--accent); } .stat__l { font-size: .87rem; color: var(--ink-2); } .stats__note { font-size: .84rem; color: var(--ink-3); } .stats__note--portfolio { max-width: 30rem; } .stats__note--support { padding-top: .8rem; border-top: 1px solid var(--line); max-width: 60rem; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); } /* --- spec list ------------------------------------------------------------ */ .specs { display: grid; gap: 0; } .spec { display: grid; gap: .35rem 2rem; align-items: baseline; padding-block: 1.1rem; border-top: 1px solid var(--line); } @media (min-width: 720px) { .spec { grid-template-columns: 13rem 1fr; } } .spec:last-child { border-bottom: 1px solid var(--line); } .spec__k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .spec__v { color: var(--ink-2); font-size: .97rem; } .spec__v strong { color: var(--ink); } /* --- quote / manifesto ---------------------------------------------------- */ .manifesto { background: var(--surface-1); border-block: 1px solid var(--line); } .manifesto__inner { max-width: 44rem; margin-inline: auto; text-align: center; } .manifesto h2 { font-size: var(--t-h2); margin-bottom: 1.2rem; } .manifesto p { font-size: var(--t-lead); color: var(--ink-2); margin-bottom: .95rem; } .manifesto__signoff { margin-top: 1.35rem; font-family: var(--font-mono); font-size: .76rem !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; } /* --- about --------------------------------------------------------------- */ .about-preview { border-bottom: 1px solid var(--line); } .about-preview__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 4.5rem); } @media (min-width: 860px) { .about-preview__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } } .about-preview__heading h2 { font-size: var(--t-h2); } .about-location { display: inline-flex; margin-top: 1.35rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); } .about-preview__copy { max-width: 42rem; } .about-preview__copy p { font-size: var(--t-lead); color: var(--ink-2); } .about-preview__copy p + p { margin-top: 1rem; } .about-preview__copy .btn { margin-top: 1.55rem; } .about-hero { position: relative; min-height: min(78svh, 52rem); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding-block: clamp(9rem, 7rem + 8vw, 14rem) clamp(3.5rem, 2.5rem + 4vw, 6rem); background: #070b10; } .about-hero__media, .about-hero__scrim { position: absolute; inset: 0; z-index: -2; } .about-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .about-hero__scrim { z-index: -1; background: linear-gradient(90deg, rgba(3, 6, 10, .94) 0%, rgba(3, 6, 10, .78) 45%, rgba(3, 6, 10, .2) 78%), linear-gradient(0deg, rgba(3, 6, 10, .72), transparent 52%); } .about-hero__content { max-width: 52rem; } .about-hero .eyebrow { color: #9ea5ff; } .about-hero h1 { max-width: 50rem; font-size: var(--t-h1); color: #f7f7fa; margin-bottom: 1.2rem; } .about-hero__lead { max-width: 43rem; font-size: var(--t-lead); color: #c0c3cd; } .about-hero__facts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.8rem; font-family: var(--font-mono); font-size: .67rem; letter-spacing: .13em; text-transform: uppercase; color: #9297a4; } .about-story { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 5rem); } @media (min-width: 860px) { .about-story { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); } } .about-story h2 { font-size: var(--t-h2); } .about-story__copy { max-width: 46rem; } .about-story__copy p { font-size: var(--t-lead); color: var(--ink-2); } .about-story__copy p + p { margin-top: 1rem; } .about-core { background: var(--surface-1); border-block: 1px solid var(--line); } .about-principles { display: grid; gap: 1rem; margin-top: 2rem; } @media (min-width: 720px) { .about-principles { grid-template-columns: repeat(3, 1fr); } } .about-principle { padding: 1.45rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); } .about-principle span { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .about-principle h3 { font-size: 1.15rem; line-height: 1.25; margin: .65rem 0 .55rem; } .about-principle p { color: var(--ink-2); font-size: .94rem; } /* --- CTA ------------------------------------------------------------------ */ .cta { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) var(--gutter); text-align: center; } .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 120% at 50% 0%, var(--accent-a15), transparent 62%); } .cta h2 { font-size: var(--t-h2); margin-bottom: .85rem; } .cta__path-label { margin-bottom: .55rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .cta p { font-size: var(--t-lead); color: var(--ink-2); max-width: 34rem; margin: 0 auto 1.7rem; } .cta__fine { margin-top: 1.25rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-4); } /* --- legal pages --------------------------------------------------------- */ .legal-hero { padding-block: clamp(8.5rem, 7rem + 5vw, 11.5rem) clamp(3rem, 2.2rem + 3vw, 5rem); border-bottom: 1px solid var(--line); background: radial-gradient(60% 120% at 15% 0%, var(--accent-a15), transparent 64%), var(--surface-1); } .legal-hero__inner { max-width: 58rem; } .legal-hero h1 { font-size: var(--t-h1); margin-bottom: 1rem; } .legal-hero p { max-width: 44rem; font-size: var(--t-lead); color: var(--ink-2); } .legal-meta { display: inline-block; margin-top: 1.4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .legal-main { padding-block: clamp(3rem, 2rem + 4vw, 6rem); } .legal-layout { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); } @media (min-width: 920px) { .legal-layout { grid-template-columns: minmax(12rem, 15rem) minmax(0, 48rem); justify-content: center; } } .legal-toc { align-self: start; display: grid; gap: .6rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); } @media (min-width: 920px) { .legal-toc { position: sticky; top: 6.4rem; } } .legal-toc > span { margin-bottom: .25rem; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .legal-toc a { font-size: .86rem; color: var(--ink-2); transition: color .2s; } .legal-toc a:hover { color: var(--accent); } .legal-copy { min-width: 0; } .legal-copy section { scroll-margin-top: 6.4rem; } .legal-copy section + section { margin-top: 2.6rem; } .legal-copy h2 { font-size: clamp(1.45rem, 1.25rem + .75vw, 1.9rem); margin-bottom: .85rem; } .legal-copy h3 { font-size: 1.05rem; line-height: 1.3; margin: 1.65rem 0 .55rem; } .legal-copy p { color: var(--ink-2); } .legal-copy p + p { margin-top: .8rem; } .legal-copy ul { list-style: disc; padding-left: 1.25rem; margin-top: .8rem; } .legal-copy li { padding-left: .25rem; margin-bottom: .55rem; color: var(--ink-2); } .legal-copy a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-a30); text-underline-offset: .18em; } .legal-copy a:hover { text-decoration-color: currentColor; } .legal-copy code { padding: .12em .38em; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-1); color: var(--ink); font-family: var(--font-mono); font-size: .84em; } .legal-notice { margin: 1.5rem 0; padding: 1.25rem 1.35rem; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-a08); } .legal-notice--prominent { margin: 0 0 2.8rem; padding: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); } .legal-notice strong { display: block; margin-bottom: .35rem; font-family: var(--font-display); font-size: 1.05rem; } .legal-notice--prominent strong { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); } .legal-notice p { color: var(--ink-2); } /* --- footer --------------------------------------------------------------- */ .footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 1.8rem + 2.2vw, 3.5rem) 1.75rem; } .footer__grid { display: grid; gap: 2.25rem; } @media (min-width: 780px) { .footer__grid { grid-template-columns: 1.4fr 2fr; } } .footer__blurb { font-size: .9rem; color: var(--ink-3); max-width: 22rem; margin-top: 1rem; } .footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); } .footer__cols h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .9rem; font-weight: 500; } .footer__cols li { margin-bottom: .5rem; } .footer__cols a { font-size: .9rem; color: var(--ink-2); transition: color .2s; } .footer__cols a:hover { color: var(--ink); } .footer__bar { margin-top: 2.25rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; justify-content: space-between; font-size: .8rem; color: var(--ink-4); } .footer__fine { flex-basis: 100%; font-size: .7rem; line-height: 1.5; } .footer__bar a { color: var(--ink-4); } .footer__bar a:hover { color: var(--ink-2); } /* --- modal ---------------------------------------------------------------- */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: var(--gutter); background: color-mix(in oklab, #000 78%, transparent); backdrop-filter: blur(6px); animation: fadeIn .2s var(--ease); } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .modal__panel { width: min(32rem, 100%); max-height: calc(100dvh - 2rem); overflow-y: auto; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); animation: modalPop .3s var(--ease); } @keyframes modalPop { from { opacity: 0; transform: translateY(22px) scale(.97) } to { opacity: 1; transform: none } } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .modal__head h2 { font-size: 1.5rem; margin-bottom: .3rem; } .modal__head p { font-size: .9rem; color: var(--ink-3); } .modal__close { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 8px; color: var(--ink-3); flex: none; } .modal__close:hover { background: var(--surface-3); color: var(--ink); } .modal__close svg { width: 1rem; height: 1rem; } .contact-route { display: grid; gap: 1.05rem; } .contact-route__address { display: flex; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--accent-a30); border-radius: 14px; background: radial-gradient(90% 140% at 0 0, var(--accent-a15), transparent 68%), var(--bg); } .contact-route__icon { width: 2.65rem; height: 2.65rem; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-a15); } .contact-route__icon svg { width: 1.2rem; height: 1.2rem; } .contact-route__label { display: block; margin-bottom: .18rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .contact-route__email { font-family: var(--font-display); font-size: clamp(1rem, .85rem + .7vw, 1.25rem); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .contact-route__email:hover { color: var(--accent); } .contact-route > p { color: var(--ink-2); font-size: .91rem; line-height: 1.65; } .contact-route__button { justify-content: center; gap: .55rem; } .form-fine { margin-top: 1rem; font-size: .74rem; color: var(--ink-4); text-align: center; } .modal .btn { width: 100%; margin-top: .5rem; } /* --- NumiDroid: three.js showcase + ambient layers ------------------------ */ .bg3d-host { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .bg3d-host canvas { width: 100% !important; height: 100% !important; } .section-3d { position: relative; overflow: hidden; isolation: isolate; } .section-3d > .section-3d-content { position: relative; z-index: 2; } .section-3d__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; } #numi3d-canvas { width: 100%; height: min(70vh, 620px); min-height: 340px; background: var(--bg); position: relative; touch-action: none; cursor: grab; border-radius: var(--radius); overflow: hidden; } #numi3d-canvas:active { cursor: grabbing; } #numi3d-canvas canvas { width: 100% !important; height: 100% !important; display: block; } .stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); padding: .6rem; overflow: hidden; } .stage__chrome { position: absolute; top: 1.35rem; left: 1.35rem; right: 1.35rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .7rem; pointer-events: none; } .stage__chrome > * { pointer-events: auto; } .stage__label { background: color-mix(in oklab, var(--bg) 68%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line-2); border-radius: 12px; padding: .6rem .9rem; max-width: 24rem; } .stage__label b { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: .15rem; } .stage__label span { font-size: .84rem; color: var(--ink); } .stage__hint { position: absolute; bottom: 1.35rem; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 1.1rem; white-space: nowrap; background: color-mix(in oklab, var(--bg) 68%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line-2); border-radius: 999px; padding: .45rem 1rem; font-size: .74rem; color: var(--ink-3); pointer-events: none; } @media (max-width: 640px) { .stage__hint span:not(:first-child) { display: none; } } .scene-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: .9rem; } .scene-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); font-size: .84rem; font-weight: 500; transition: border-color .2s, color .2s, background-color .2s; } .scene-tab:hover { border-color: var(--accent-a30); color: var(--ink); } .scene-tab svg { width: .95rem; height: .95rem; } .scene-tab-active { border-color: var(--accent-a55); background: var(--accent-a15); color: var(--accent); } .scene-tab--sm { padding: .38rem .75rem; font-size: .76rem; } /* CSS-only tilt on hover, driven by numidroid-3d.js */ .tilt-3d { transition: transform .3s var(--ease), border-color .3s, box-shadow .35s var(--ease); transform-style: preserve-3d; } .tilt-3d:hover { border-color: var(--accent-a30); box-shadow: var(--shadow-panel); } .stage-perspective { perspective: 1200px; } .axis-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.25rem; } .axis-badge { font-family: var(--font-mono); font-size: .63rem; letter-spacing: .14em; padding: .28rem .65rem; border-radius: 999px; border: 1px solid var(--accent-a30); color: var(--accent); background: var(--accent-a08); } /* --- reveal on scroll ----------------------------------------------------- Gated on html.js: without JavaScript nothing is ever hidden, so a failed script can never blank the page. */ .js .reveal { opacity: 0; transform: translateY(18px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* --- utilities ------------------------------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .accent { color: var(--accent); } .muted { color: var(--ink-3); } .mono { font-family: var(--font-mono); } .center { text-align: center; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .022; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }