/* ============================================================ SKEION — Physics-based space weather intelligence Design system. Vanilla CSS, no build step. Palette & type per SKEION charte graphique. ============================================================ */ /* ---------- Self-hosted fonts (Google Fonts "latin" subsets, SIL OFL 1.1) ---------- Same files and unicode-range Google served; French accents, ’ and narrow no-break spaces are all inside this range. Spline Sans + Barlow 400 are preloaded in . */ @font-face { font-family: "Spline Sans"; font-style: normal; font-weight: 400 700; /* variable (wght axis) */ font-display: swap; src: url("./assets/fonts/spline-sans-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 400 500; /* variable (wght axis) */ font-display: swap; src: url("./assets/fonts/spline-sans-mono-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { /* Symbols subset of the same family, loaded only where one is used: ∞ ≈ ⁴ ₂ (Google Fonts css2 &text=, 2 KB). The family has no → ⊕ ∝ ρ Ω (nor U+202F): the scenes draw → ⊕ ∝ themselves (assets/js/skeion-scenes.js). */ font-family: "Spline Sans Mono"; font-style: normal; font-weight: 400 500; /* variable (wght axis) */ font-display: swap; src: url("./assets/fonts/spline-sans-mono-var-symbols.woff2") format("woff2"); unicode-range: U+2074, U+2082, U+221E, U+2248; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("./assets/fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("./assets/fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("./assets/fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Aurora palette */ --color-accent-primary: #2DDDB8; --color-accent-cyan: #29DDDA; --color-accent-blue: #37A7E7; --color-accent-deep: #15B89A; /* Backgrounds */ --color-bg-primary: #0A081B; --color-bg-secondary: #091231; --color-bg-tertiary: rgba(9, 18, 49, 0.55); --color-surface: rgba(255, 255, 255, 0.02); --color-surface-2: rgba(9, 18, 49, 0.5); /* Text */ --color-text-primary: #F0FCFF; --color-text-secondary: #BFC9D4; --color-text-muted: #7E8A9A; --color-white: #FFFFFF; /* Restrained solar-risk accent (used ONLY for risk/energy emphasis) */ --color-risk: #5BB4EC; --color-risk-soft: rgba(91, 180, 236, 0.12); --color-risk-border: rgba(91, 180, 236, 0.32); /* Hairlines */ --line: rgba(255, 255, 255, 0.08); --line-accent: rgba(45, 221, 184, 0.18); --radius-card: 20px; --radius-sm: 12px; --radius-button: 999px; --shadow-soft: 0 0 24px rgba(45, 221, 184, 0.10); --shadow-glow: 0 0 44px rgba(45, 221, 184, 0.22); --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45); --gradient-aurora: linear-gradient(135deg, #15B89A 0%, #2DDDB8 30%, #29DDDA 60%, #37A7E7 100%); --gradient-aurora-text: linear-gradient(90deg, #2DDDB8 0%, #29DDDA 50%, #37A7E7 100%); --font-heading: "Spline Sans", "Helvetica Neue", Arial, sans-serif; --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --section-spacing: 132px; --container-width: 1180px; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* scroll-padding keeps anchor targets (#contact, index.html#science…) clear of the fixed header, for same-page and cross-page links alike, without any JS offset maths. */ html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg-primary); color: var(--color-text-secondary); font-family: var(--font-body); line-height: 1.62; font-size: 18px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { color: var(--color-text-primary); font-family: var(--font-heading); line-height: 1.12; margin-top: 0; font-weight: 600; text-wrap: balance; } a { color: inherit; text-decoration: none; transition: color .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease; } p { margin: 0 0 1rem; text-wrap: pretty; } p:last-child { margin-bottom: 0; } img { max-width: 100%; height: auto; display: block; } /* only negotiates the format (AVIF / fallback): it must not add a layout box, so every existing rule written for the keeps applying unchanged. */ picture { display: contents; } picture > source { display: none; } /* otherwise an empty flex item (extra gap) in flex parents like .nav-logo */ ::selection { background: rgba(45, 221, 184, 0.25); color: #fff; } :focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; border-radius: 4px; } main:focus { outline: none; } /* focus target of the skip link, not an interactive element */ /* Skip link: first focusable element, visible only when focused */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 300; padding: 12px 18px; border-radius: var(--radius-sm); background: var(--color-accent-primary); color: #04130E; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; transform: translateY(-160%); transition: transform .2s ease; } .skip-link:focus, .skip-link:focus-visible { transform: none; outline-color: var(--color-text-primary); } /* Text for assistive technology only */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Layout ---------- */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 28px; } .section { padding: var(--section-spacing) 0; position: relative; overflow: hidden; } .section-alt { background: linear-gradient(180deg, var(--color-bg-secondary), #060a1d); } .section > .container { position: relative; z-index: 2; } .max-w-content { max-width: 820px; } .mx-auto { margin-inline: auto; } .text-center { text-align: center; } .divider-top { border-top: 1px solid var(--line); } /* ---------- Section heading kit ---------- */ .eyebrow { font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px; font-size: 0.86rem; color: var(--color-accent-primary); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, var(--color-accent-primary), transparent); } .eyebrow.eyebrow--center::before { display: none; } .text-gradient { background: var(--gradient-aurora-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .heading-xl { font-size: clamp(2.6rem, 5.4vw, 4.4rem); letter-spacing: -0.025em; margin-bottom: 24px; } .heading-lg { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.02em; margin-bottom: 22px; } .heading-md { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.01em; margin-bottom: 16px; } .heading-sm { font-size: 1.32rem; letter-spacing: -0.01em; margin-bottom: 12px; } .lead { font-size: clamp(1.12rem, 1.5vw, 1.3rem); color: var(--color-text-secondary); line-height: 1.55; } .section-head { max-width: 760px; margin-bottom: 64px; } .section-head.text-center { margin-inline: auto; } .muted { color: var(--color-text-muted); } .emphasis { color: var(--color-text-primary); font-weight: 500; } /* ---------- Lists ---------- */ ul.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } ul.feature-list li { position: relative; padding-left: 26px; color: var(--color-text-secondary); } ul.feature-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--color-accent-cyan); border-radius: 50%; box-shadow: 0 0 10px var(--color-accent-cyan); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border-radius: var(--radius-button); font-family: var(--font-heading); font-weight: 600; font-size: 0.98rem; cursor: pointer; border: 1px solid transparent; transition: all .25s ease; white-space: nowrap; } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--color-accent-primary); color: #04130E; box-shadow: var(--shadow-soft); } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: var(--shadow-glow); } .btn-outline { background: transparent; color: var(--color-text-primary); border-color: rgba(45, 221, 184, 0.45); } .btn-outline:hover { background: rgba(45, 221, 184, 0.08); border-color: var(--color-accent-primary); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--color-text-secondary); padding: 14px 0; } .btn-ghost:hover { color: var(--color-accent-primary); } .btn-sm { padding: 11px 20px; font-size: 0.9rem; } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-accent-primary); } .link-arrow svg { width: 16px; height: 16px; transition: transform .25s ease; } .link-arrow:hover svg { transform: translateX(4px); } /* ============================================================ NAVIGATION ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 18px 0; /* The logo size lives in these two variables, redefined per state (scrolled) AND per breakpoint (see RESPONSIVE): a scrolled header can never re-enlarge the mobile logo. */ --logo-mark-h: 46px; --logo-word-h: 23px; transition: background .3s ease, padding .3s ease, border-color .3s ease; border-bottom: 1px solid transparent; } .site-nav.scrolled, .site-nav.menu-open { background: rgba(8, 7, 20, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 12px 0; border-bottom: 1px solid var(--line); } .site-nav.scrolled { --logo-mark-h: 40px; --logo-word-h: 20px; } /* Gaps sized so the full bar (6 links + language + CTA) fits the 1124 px container in FR too */ .nav-container { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .nav-logo { display: flex; align-items: center; gap: 13px; flex-shrink: 0; } .logo-mark { height: var(--logo-mark-h); width: auto; flex-shrink: 0; transition: height .3s ease; } .logo-word { height: var(--logo-word-h); width: auto; flex-shrink: 0; transition: height .3s ease; } .nav-links { display: flex; align-items: center; gap: 22px; } .nav-item { font-family: var(--font-heading); font-weight: 500; font-size: 0.94rem; color: var(--color-text-secondary); position: relative; padding: 4px 0; white-space: nowrap; } .nav-item::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--color-accent-primary); transition: width .25s ease; } .nav-item:hover, .nav-item.active { color: var(--color-text-primary); } .nav-item:hover::after, .nav-item.active::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Language toggle. No overflow:hidden (it clipped the focus ring and the enlarged hit areas): the outer buttons carry the pill's rounded ends themselves. */ .lang-toggle { display: inline-flex; align-items: center; flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-button); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 1px; } .lang-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 32px; padding: 0 10px; background: transparent; border: none; cursor: pointer; font: inherit; color: var(--color-text-muted); transition: color .2s ease, background .2s ease; } .lang-btn:first-child { border-radius: var(--radius-button) 0 0 var(--radius-button); } .lang-btn:last-child { border-radius: 0 var(--radius-button) var(--radius-button) 0; } .lang-btn::before { content: ""; position: absolute; inset: -6px -3px; } /* 44×44 touch target, pill unchanged */ .lang-btn:hover { color: var(--color-text-primary); } .lang-btn.active { color: #04130E; background: var(--color-accent-primary); font-weight: 600; } .lang-btn:focus-visible { outline-offset: 2px; } /* Hamburger: 44×44 hit area; negative margins keep the icon aligned on the container edge and the header height unchanged. */ .nav-toggle { display: none; position: relative; flex-shrink: 0; width: 44px; height: 44px; margin: -5px -8px -5px 0; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--color-text-primary); } .nav-toggle span { position: absolute; left: 8px; width: 28px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .3s ease, opacity .3s ease, top .3s ease; } .nav-toggle span:nth-child(1) { top: 12px; } .nav-toggle span:nth-child(2) { top: 21px; } .nav-toggle span:nth-child(3) { top: 30px; } .nav-toggle.open span:nth-child(1) { transform: rotate(45deg); top: 21px; } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg); top: 21px; } /* ============================================================ HERO (3 variants switch via body[data-hero]) ============================================================ */ .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 120px; padding-bottom: 80px; /* Fallback first (WebP), then AVIF via image-set() for browsers that support type() */ background: radial-gradient(135% 100% at 78% 6%, rgba(10,8,27,0.12), rgba(10,8,27,0.74) 52%, rgba(10,8,27,0.92)), linear-gradient(180deg, rgba(10,8,27,0.86), rgba(10,8,27,0.82) 55%, var(--color-bg-primary)), url("./assets/img/aurora-bg-1800.webp"); background: radial-gradient(135% 100% at 78% 6%, rgba(10,8,27,0.12), rgba(10,8,27,0.74) 52%, rgba(10,8,27,0.92)), linear-gradient(180deg, rgba(10,8,27,0.86), rgba(10,8,27,0.82) 55%, var(--color-bg-primary)), image-set(url("./assets/img/aurora-bg-1200.avif") type("image/avif"), url("./assets/img/aurora-bg-1800.webp") type("image/webp")); background-size: cover; background-position: center; } .hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 160px; z-index: 1; background: linear-gradient(180deg, rgba(6,5,16,0.72), transparent); pointer-events: none; } .hero .container { position: relative; z-index: 2; width: 100%; pointer-events: none; } .hero-content { max-width: 660px; pointer-events: auto; } .hero-eyebrow { margin-bottom: 24px; } /* The eyebrow sits inside the H1 (keyword "space weather" in the title) but renders exactly as before: its own line, its own line-height. */ .hero h1 .hero-eyebrow { display: flex; width: fit-content; max-width: 100%; line-height: 1.62; } .hero h1 { margin-bottom: 26px; } .hero .lead { font-size: clamp(1.18rem, 1.6vw, 1.4rem); margin-bottom: 24px; color: var(--color-text-secondary); } .hero-support { font-size: 1.02rem; color: var(--color-text-muted); padding-left: 18px; border-left: 2px solid var(--line-accent); margin-bottom: 38px; max-width: 560px; } .hero-support strong { color: var(--color-text-primary); font-weight: 600; } .hero .btn-row { margin-bottom: 52px; } /* Trust cues */ .hero-trust { display: flex; flex-wrap: wrap; gap: 28px 40px; pointer-events: auto; } .trust-item { max-width: 200px; } .trust-item .trust-k { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent-cyan); margin-bottom: 6px; } .trust-item .trust-v { font-size: 0.96rem; color: var(--color-text-secondary); line-height: 1.4; } /* Variant: centered statement */ body[data-hero="centered"] .hero { text-align: center; } body[data-hero="centered"] .hero-content { max-width: 880px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } body[data-hero="centered"] .hero-eyebrow::before { display: none; } body[data-hero="centered"] .hero-support { border-left: none; padding-left: 0; text-align: center; } body[data-hero="centered"] .hero-trust { justify-content: center; } body[data-hero="centered"] .sun-stage { opacity: 0.55; } /* Variant: split with readout panel */ body[data-hero="split"] .hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } body[data-hero="split"] .hero-content { max-width: 600px; } body[data-hero="split"] .hero-readout { display: block; } .hero-readout { display: none; pointer-events: auto; } .readout-card { background: linear-gradient(160deg, rgba(9,18,49,0.78), rgba(8,7,20,0.7)); border: 1px solid var(--line-accent); border-radius: var(--radius-card); padding: 26px; box-shadow: var(--shadow-card); backdrop-filter: blur(10px); } .readout-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .readout-title { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); } .readout-badge { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 1px; padding: 5px 11px; border-radius: var(--radius-button); background: var(--color-risk-soft); color: var(--color-risk); border: 1px solid var(--color-risk-border); } .readout-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--line); font-size: 0.92rem; } .readout-row:first-of-type { border-top: none; } .readout-row .rk { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.5px; } .readout-row .rv { color: var(--color-text-primary); font-weight: 500; } .readout-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 16px; } .readout-bar > span { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-blue)); } /* ============================================================ PROBLEM ============================================================ */ #problem { /* 960w, low quality: the 90-97% veil hides the detail. Fallback JPEG, then AVIF */ background: linear-gradient(180deg, rgba(10,8,27,0.9), rgba(10,8,27,0.97)), url("./assets/img/sun-earth-environment-bg-960.jpg"); background: linear-gradient(180deg, rgba(10,8,27,0.9), rgba(10,8,27,0.97)), image-set(url("./assets/img/sun-earth-environment-bg-960.avif") type("image/avif"), url("./assets/img/sun-earth-environment-bg-960.jpg") type("image/jpeg")); background-size: cover; background-position: center; } .problem-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; } .fragment-list { display: grid; gap: 0; margin-top: 8px; padding: 0; border-top: 1px solid var(--line); } .fragment-list li { list-style: none; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--color-text-secondary); display: flex; gap: 14px; align-items: baseline; } .fragment-list li .idx { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); } .emphasis-block { margin-top: 40px; padding: 26px 28px; border-radius: var(--radius-sm); background: var(--color-risk-soft); border: 1px solid var(--color-risk-border); border-left: 3px solid var(--color-risk); } .emphasis-block p { color: var(--color-text-primary); font-family: var(--font-heading); font-size: 1.18rem; font-weight: 500; } .emphasis-block .tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--color-risk); display: block; margin-bottom: 10px; } /* ============================================================ PIPELINE ============================================================ */ .pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 12px; position: relative; } .pipe-step { position: relative; padding: 0 18px; } .pipe-step:not(:last-child)::after { content: ""; position: absolute; top: 27px; right: -1px; width: 2px; /* placeholder */ } .pipe-node { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(45,221,184,0.06); border: 1px solid var(--line-accent); color: var(--color-accent-primary); margin-bottom: 20px; } .pipe-node svg { width: 24px; height: 24px; } .pipe-step .pipe-n { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 1.5px; color: var(--color-text-muted); margin-bottom: 8px; } .pipe-step h3 { font-size: 1.05rem; margin-bottom: 8px; } .pipe-step p { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; } .pipe-connect { display: grid; grid-template-columns: repeat(5, 1fr); margin: 30px 0 6px; align-items: center; } .pipe-line { height: 1px; background: linear-gradient(90deg, var(--line-accent), var(--color-accent-cyan), var(--line-accent)); position: relative; } /* ============================================================ STAT / CREDIBILITY BAND ============================================================ */ .stat-section { padding-top: 92px; padding-bottom: 92px; border-top: 1px solid var(--line); position: relative; } .stat-section .container { position: relative; z-index: 2; } .stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; } .stat-item { padding: 40px 36px; text-align: center; border-left: 1px solid var(--line); } .stat-item:first-child { border-left: none; } .stat-n { font-family: var(--font-heading); font-weight: 600; line-height: 1; font-size: clamp(2.8rem, 5vw, 4rem); letter-spacing: -0.03em; background: var(--gradient-aurora-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 16px; } .stat-n .stat-plus { font-size: 0.6em; vertical-align: 0.12em; margin-left: 2px; } /* Thousands separator (U+202F, reveal.js): the display tracking (-0.03em) almost closes it up ("16000"), so it gets its own width, about a thin space */ .stat-n .thsep { margin-inline: 0.06em; } .stat-l { color: var(--color-text-secondary); font-size: 0.98rem; line-height: 1.45; max-width: 230px; margin: 0 auto; } .stat-l em { color: var(--color-text-primary); font-style: italic; } .stat-foot { text-align: center; color: var(--color-text-muted); max-width: 720px; margin: 34px auto 0; font-size: 1rem; line-height: 1.55; } /* Source of the key figures (dated, linked) */ .stat-source { text-align: center; color: var(--color-text-muted); max-width: 720px; margin: 14px auto 0; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.3px; line-height: 1.6; } .stat-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .stat-source a:hover { color: var(--color-text-secondary); } /* ============================================================ PRODUCTS ============================================================ */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .product-card { position: relative; background: linear-gradient(180deg, rgba(9,18,49,0.5), rgba(9,18,49,0.22)); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 34px 30px 30px; display: flex; flex-direction: column; transition: transform .3s ease, border-color .3s ease, background .3s ease; overflow: hidden; } .product-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent, var(--color-accent-primary)); opacity: 0.7; } .product-card:hover { transform: translateY(-6px); border-color: var(--line-accent); background: linear-gradient(180deg, rgba(9,18,49,0.66), rgba(9,18,49,0.3)); } .product-index { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 2px; color: var(--color-text-muted); margin-bottom: 18px; display: block; } .product-card h3 { font-size: 1.42rem; margin-bottom: 6px; } .product-card .product-sub { color: var(--accent, var(--color-accent-primary)); font-size: 0.96rem; font-weight: 500; margin-bottom: 18px; } .product-card > p { color: var(--color-text-secondary); font-size: 1.06rem; line-height: 1.6; margin-bottom: 24px; } .product-card .feature-list { margin-bottom: 28px; } .product-card .feature-list li { font-size: 0.96rem; } .product-card .feature-list li::before { background: var(--accent, var(--color-accent-cyan)); box-shadow: 0 0 10px var(--accent, var(--color-accent-cyan)); } .product-card .card-foot { margin-top: auto; } /* Honest status badges (product cards, EU Space Act modules). No warm colours: tone only. */ .status-badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.2; padding: 6px 12px 6px 10px; border-radius: var(--radius-button); color: var(--color-text-secondary); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); margin-bottom: 18px; } .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; flex-shrink: 0; } .status-badge--early { color: var(--color-accent-primary); background: rgba(45, 221, 184, 0.07); border-color: rgba(45, 221, 184, 0.32); } .status-badge--dev { color: var(--color-text-secondary); } .status-badge--dev::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; } .module-card .status-badge { margin-bottom: 12px; } /* ============================================================ USE CASES ============================================================ */ .usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .usecase-card { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface-2); display: flex; flex-direction: column; transition: transform .3s ease, border-color .3s ease; } .usecase-card:hover { transform: translateY(-4px); border-color: var(--line-accent); } .usecase-media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; background: #060a1d; } .usecase-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform .5s ease; } .usecase-card:hover .usecase-media img { transform: scale(1.05); } .usecase-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,27,0.1), rgba(9,18,49,0.7)); } .usecase-tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 11px; border-radius: var(--radius-button); background: rgba(8,7,20,0.7); color: var(--color-accent-cyan); border: 1px solid var(--line-accent); backdrop-filter: blur(6px); } .usecase-credit { position: absolute; bottom: 12px; right: 14px; z-index: 2; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 1px; color: var(--color-text-secondary); opacity: 0.75; background: rgba(8,7,20,0.55); padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(4px); } .usecase-body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; } .usecase-body h3 { font-size: 1.22rem; margin-bottom: 12px; } .usecase-body p { font-size: 0.96rem; color: var(--color-text-secondary); margin-bottom: 20px; } .usecase-body .card-foot { margin-top: auto; } /* Image placeholder (striped) */ .img-placeholder { position: relative; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, rgba(55,167,231,0.07) 0 12px, rgba(55,167,231,0.02) 12px 24px), #070c1f; display: flex; align-items: center; justify-content: center; } .img-placeholder span { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); border: 1px dashed rgba(127,138,154,0.35); padding: 7px 13px; border-radius: 6px; } /* ============================================================ SCIENCE ============================================================ */ .science-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; } /* Two covers swapping places every 9 s. Compositor-only: the front/back swap is a translateZ inside a preserve-3d context (no z-index animation) and the glow is a pre-rendered shadow on a pseudo-element whose opacity is animated (no box-shadow animation). Paused off-screen (.is-paused, set by script.js) and on hover; disabled with prefers-reduced-motion. */ .nature-covers { position: relative; width: 100%; max-width: 380px; aspect-ratio: 3/4; margin: 0 auto; transform-style: preserve-3d; } .nature-cover { /* the wrapper (display:block overrides display:contents) */ position: absolute; display: block; width: 74%; border-radius: 10px; box-shadow: var(--shadow-card); border: 1px solid var(--line-accent); } .nature-cover img { width: 100%; border-radius: 9px; } .nature-cover::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow-glow); opacity: 0; } .cover-back { top: 0; left: 0; transform: translateZ(-2px) rotate(-6deg) scale(0.93); animation: coverCycleBack 9s ease-in-out infinite; } .cover-front { bottom: 0; right: 0; transform: translateZ(2px) rotate(6deg); animation: coverCycleFront 9s ease-in-out infinite; } .cover-back::after { animation: coverGlowBack 9s ease-in-out infinite; } .cover-front::after { opacity: 1; animation: coverGlowFront 9s ease-in-out infinite; } .nature-covers:hover .nature-cover, .nature-covers:hover .nature-cover::after, .nature-covers.is-paused .nature-cover, .nature-covers.is-paused .nature-cover::after { animation-play-state: paused; } @keyframes coverCycleFront { 0%, 38% { transform: translateZ(2px) rotate(6deg) translate(0, 0) scale(1); } 50%, 88% { transform: translateZ(-2px) rotate(3deg) translate(-11%, 7%) scale(0.93); } 100% { transform: translateZ(2px) rotate(6deg) translate(0, 0) scale(1); } } @keyframes coverCycleBack { 0%, 38% { transform: translateZ(-2px) rotate(-6deg) translate(0, 0) scale(0.93); } 50%, 88% { transform: translateZ(2px) rotate(-3deg) translate(11%, -7%) scale(1); } 100% { transform: translateZ(-2px) rotate(-6deg) translate(0, 0) scale(0.93); } } @keyframes coverGlowFront { 0%, 38% { opacity: 1; } 50%, 88% { opacity: 0; } 100% { opacity: 1; } } @keyframes coverGlowBack { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } } .cover-caption { position: absolute; bottom: -34px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-text-muted); letter-spacing: 1px; } .trust-line { margin-top: 30px; padding: 22px 26px; border-radius: var(--radius-sm); background: rgba(45,221,184,0.05); border: 1px solid var(--line-accent); } .trust-line p { color: var(--color-text-primary); font-family: var(--font-heading); font-size: 1.08rem; font-weight: 500; } /* ============================================================ WHY SKEION (pillars) ============================================================ */ .pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .pillar { padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--color-surface); transition: border-color .3s ease, transform .3s ease; } .pillar:hover { border-color: var(--line-accent); transform: translateY(-4px); } .pillar .pillar-num { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 1.5px; color: var(--color-accent-cyan); margin-bottom: 18px; display: block; } .pillar h3 { font-size: 1.18rem; margin-bottom: 10px; } .pillar p { font-size: 0.92rem; color: var(--color-text-muted); } /* ============================================================ FINAL CTA ============================================================ */ .cta-band { position: relative; text-align: center; /* Fallback JPEG, then AVIF via image-set() */ background: linear-gradient(180deg, rgba(10,8,27,0.55), rgba(10,8,27,0.88)), url("./assets/img/critical-infrastructure-bg-1536.jpg"); background: linear-gradient(180deg, rgba(10,8,27,0.55), rgba(10,8,27,0.88)), image-set(url("./assets/img/critical-infrastructure-bg-1536.avif") type("image/avif"), url("./assets/img/critical-infrastructure-bg-1536.jpg") type("image/jpeg")); background-size: cover; background-position: center; } .cta-band .btn-row { justify-content: center; } /* ============================================================ CONTACT ============================================================ */ #contact { background: linear-gradient(180deg, #060a1d, var(--color-bg-primary)); } .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; } .contact-note { font-size: 0.96rem; color: var(--color-text-muted); margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .contact-form { background: var(--color-surface-2); padding: 36px; border-radius: var(--radius-card); border: 1px solid var(--line); } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 9px; } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; background: rgba(10,8,27,0.6); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 15px; color: var(--color-white); font-family: var(--font-body); font-size: 1rem; transition: all .25s ease; } .contact-form select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237E8A9A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px rgba(45,221,184,0.3); background: rgba(10,8,27,0.92); } /* ≈ 5:1 on the field background (was 1.9:1) while staying clearly lighter than typed text */ .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.5); opacity: 1; } .contact-form textarea { resize: vertical; min-height: 120px; } .contact-form option { background: var(--color-bg-secondary); color: var(--color-text-primary); } .form-group label .req { color: var(--color-accent-primary); margin-left: 2px; } .form-required-note { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.5px; color: var(--color-text-muted); margin: -4px 0 22px; } .form-required-note .req { color: var(--color-accent-primary); } /* Inline validation (set by script.js) */ .contact-form [aria-invalid="true"] { border-color: var(--color-risk); } .field-error { display: block; margin-top: 8px; font-size: 0.86rem; line-height: 1.4; color: var(--color-risk); } .field-error[hidden] { display: none; } .form-msgs { display: none; } /* Sending / success / error feedback, announced through aria-live */ .form-status { margin-top: 16px; font-size: 0.95rem; line-height: 1.5; color: var(--color-text-secondary); } .form-status:empty { display: none; } .form-status.is-success, .form-status.is-error { padding: 14px 16px; border-radius: var(--radius-sm); color: var(--color-text-primary); } .form-status.is-success { background: rgba(45,221,184,0.08); border: 1px solid rgba(45,221,184,0.35); } .form-status.is-error { background: var(--color-risk-soft); border: 1px solid var(--color-risk-border); } .contact-form.is-sending button[type="submit"] { opacity: 0.7; cursor: progress; } .form-reassure { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--color-text-muted); } .form-reassure svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-accent-primary); } .form-reassure a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 2px; } .form-reassure a:hover { color: var(--color-accent-primary); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: #05040e; padding: 84px 0 36px; border-top: 1px solid var(--line); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; } .footer-brand img { height: 70px; width: auto; margin-bottom: 22px; } .footer-brand p { max-width: 300px; font-size: 0.95rem; color: var(--color-text-muted); } .footer-cred { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.5px; color: var(--color-text-secondary); margin-top: 16px !important; } .footer-col .footer-title { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 18px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; } .footer-col a { color: var(--color-text-muted); font-size: 0.94rem; } .footer-col a:hover { color: var(--color-accent-primary); } /* "Supported by" — CNRS Innovation / RISE (mandatory mention, every page) */ .footer-support { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 40px; padding: 30px 0 32px; border-top: 1px solid var(--line); } .footer-support__label { margin: 0; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-secondary); white-space: nowrap; } .footer-support__logos { display: inline-flex; align-items: center; gap: 22px; flex-shrink: 0; padding: 6px 0; border-radius: 6px; opacity: 0.92; } .footer-support__logos:hover { opacity: 1; } .footer-support__logos img { width: auto; } .footer-support__cnrs { height: 44px; } .footer-support__rise { height: 26px; } .footer-support__sep { width: 1px; height: 34px; background: rgba(255, 255, 255, 0.18); } .footer-support__text { margin: 0; max-width: 460px; font-size: 0.92rem; line-height: 1.5; color: var(--color-text-muted); } .footer-bottom { border-top: 1px solid var(--line); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.88rem; color: var(--color-text-muted); } .footer-bottom a { color: var(--color-text-muted); } .footer-bottom a:hover { color: var(--color-accent-primary); } /* ============================================================ CONTACT FAB (floating shortcut to the contact form) ============================================================ */ /* Hidden (.is-hidden, script.js) while the hero, the contact section or the footer is on screen. No infinite pulse: it repainted a box-shadow every frame on every page. */ .contact-fab { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: inline-flex; align-items: center; height: 56px; border-radius: 999px; background: var(--color-accent-primary); color: #04130E; box-shadow: 0 10px 30px rgba(45,221,184,0.32), var(--shadow-card); overflow: hidden; transition: box-shadow .3s ease, transform .3s ease, opacity .3s ease, visibility .3s; } .contact-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; } .contact-fab__icon { width: 56px; height: 56px; display: grid; place-items: center; flex-shrink: 0; } .contact-fab__icon svg { width: 23px; height: 23px; } .contact-fab__label { font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; white-space: nowrap; max-width: 0; opacity: 0; transition: max-width .38s cubic-bezier(.22,.61,.36,1), opacity .25s ease, padding .38s ease; } .contact-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(45,221,184,0.46), var(--shadow-card); } .contact-fab:hover .contact-fab__label, .contact-fab:focus-visible .contact-fab__label { max-width: 200px; opacity: 1; padding-right: 24px; } @media (max-width: 560px) { .contact-fab { right: 16px; bottom: 16px; } } /* ============================================================ ANIMATIONS — scroll reveal + entrances (motion-safe only) ============================================================ */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1); } .reveal.in-view { opacity: 1; transform: none; } .reveal-line { transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.22,.61,.36,1); } .reveal-line.in-view { transform: scaleX(1); } .hero-content > * { animation: heroIn .85s cubic-bezier(.22,.61,.36,1) both; } .hero-content > *:nth-child(1) { animation-delay: .06s; } .hero-content > *:nth-child(2) { animation-delay: .15s; } .hero-content > *:nth-child(3) { animation-delay: .24s; } .hero-content > *:nth-child(4) { animation-delay: .33s; } .hero-content > *:nth-child(5) { animation-delay: .42s; } .hero-content > *:nth-child(6) { animation-delay: .51s; } @keyframes heroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } } /* Founders (Company) layout */ .founders-layout { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; max-width: 980px; margin-inline: auto; } .founders-layout figure { margin: 0; } .founders-bios { display: flex; flex-direction: column; gap: 24px; } /* One discreet line under the Company lead (RISE laureate) */ .company-award { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.6px; color: var(--color-text-secondary); } .company-award::before { content: ""; width: 18px; height: 1px; background: var(--line-accent); flex-shrink: 0; } .company-award::after { content: ""; width: 18px; height: 1px; background: var(--line-accent); flex-shrink: 0; } /* ============================================================ RESPONSIVE ============================================================ */ /* Full bar from 1200 px: measured need 1090 px in FR / 1061 px in EN (unscrolled) for a 1124 px container (1200 and not 1180 so a 17 px classic scrollbar never pushes it over). The "Contact" link is hidden there because the "Get in touch" button next to it goes to the same place; it stays in the mobile menu. Below 1200 px: hamburger. */ @media (min-width: 1200px) { .nav-links .nav-item--contact { display: none; } } @media (max-width: 1199px) { .nav-container { gap: 16px; } .nav-logo { margin-right: auto; } .nav-actions { order: 1; } .nav-toggle { order: 2; display: block; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: rgb(8, 7, 20); /* opaque: no text bleeding through, no backdrop blur needed */ flex-direction: column; align-items: flex-start; gap: 0; padding: 12px 28px 20px; border-bottom: 1px solid var(--line); /* never taller than the room under the header (100% = header height, its containing block): on a phone in landscape the panel scrolls on its own, since the page behind it is locked while it is open */ max-height: calc(100vh - 100%); max-height: calc(100svh - 100%); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-10px); /* visibility flips instantly on open (links focusable at once), after the fade on close */ transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; } .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .3s ease, transform .3s ease, visibility 0s; } .nav-links .nav-item { padding: 11px 0; } /* ≥ 44 px touch targets */ .nav-links .nav-item::after { bottom: 8px; } } @media (max-width: 1024px) { :root { --section-spacing: 100px; } .product-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .pillar-grid { grid-template-columns: repeat(2, 1fr); } body[data-hero="split"] .hero .container { grid-template-columns: 1fr; } body[data-hero="split"] .hero-readout { max-width: 480px; margin-top: 36px; } } @media (max-width: 900px) { .problem-grid, .science-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; } .usecase-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .founders-layout { grid-template-columns: 1fr; gap: 32px; max-width: 520px; } .founders-layout figure { max-width: 300px; margin-inline: auto; } .pipeline { grid-template-columns: 1fr 1fr; gap: 28px 18px; } .pipe-connect { display: none; } .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-brand { grid-column: 1 / -1; } .stat-band { grid-template-columns: 1fr; } .stat-item { border-left: none; border-top: 1px solid var(--line); padding: 30px 24px; } .stat-item:first-child { border-top: none; } } @media (max-width: 768px) { .nav-actions .btn { display: none; } /* Mobile: opaque header instead of a backdrop blur recomputed on every scrolled frame (fully opaque, like the menu panel: no page text ghosting behind the logo) */ .site-nav.scrolled, .site-nav.menu-open { background: rgb(8, 7, 20); -webkit-backdrop-filter: none; backdrop-filter: none; } .footer-support { gap: 16px 28px; } } @media (max-width: 560px) { body { font-size: 17px; } :root { --section-spacing: 76px; } .container { padding: 0 20px; } .hero { padding-top: 104px; } .hero-trust { gap: 22px 28px; } .pipeline { grid-template-columns: 1fr; } .pillar-grid { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } .contact-form { padding: 26px 22px; } .btn { width: 100%; max-width: 100%; white-space: normal; text-align: center; } .hero .btn-row .btn, .cta-band .btn { width: auto; } /* Header budget (measured): logo 179 + language 78 + menu 36 + 2 gaps of 8 = 309 px, which fits from 351 px wide with the 20 px gutters (used from 360 px for margin). Same size whether scrolled or not. */ .site-nav, .site-nav.scrolled { --logo-mark-h: 30px; --logo-word-h: 14px; } .nav-container { gap: 8px; flex-wrap: nowrap; } .nav-logo { gap: 6px; } .nav-links { padding: 8px 20px 16px; } .footer-support { flex-direction: column; align-items: flex-start; } .footer-support__cnrs { height: 40px; } .footer-support__rise { height: 24px; } } /* Very small phones (320-359 px): logo 154 + language 70 + menu 36 + 2 gaps of 6 = 272 px */ @media (max-width: 359px) { .site-nav, .site-nav.scrolled { --logo-mark-h: 26px; --logo-word-h: 12px; } .nav-container { gap: 6px; } .nav-logo { gap: 5px; } .lang-btn { min-width: 34px; padding: 0 8px; } .lang-btn::before { inset: -6px -5px; } } /* ============================================================ SUBPAGES (aiXplore / Use Cases / EU Space Act) ============================================================ */ .page-hero { position: relative; overflow: hidden; padding: 184px 0 96px; /* Fallback first (WebP), then AVIF via image-set() for browsers that support type() */ background: radial-gradient(120% 120% at 80% 0%, rgba(45,221,184,0.10), transparent 55%), linear-gradient(180deg, rgba(10,8,27,0.78), rgba(10,8,27,0.92) 62%, var(--color-bg-primary)), url("./assets/img/aurora-bg-1800.webp"); background: radial-gradient(120% 120% at 80% 0%, rgba(45,221,184,0.10), transparent 55%), linear-gradient(180deg, rgba(10,8,27,0.78), rgba(10,8,27,0.92) 62%, var(--color-bg-primary)), image-set(url("./assets/img/aurora-bg-1200.avif") type("image/avif"), url("./assets/img/aurora-bg-1800.webp") type("image/webp")); background-size: cover; background-position: center; } .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-accent), transparent); } .page-hero .container { position: relative; z-index: 2; } .page-hero-inner { max-width: 820px; } .page-hero h1 { margin-bottom: 22px; } .page-hero .lead { margin-bottom: 34px; max-width: 720px; } .page-hero .btn-row { margin-top: 4px; } .breadcrumb { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 1px; color: var(--color-text-muted); margin-bottom: 26px; } .breadcrumb a { color: var(--color-text-muted); } .breadcrumb a:hover { color: var(--color-accent-primary); } .breadcrumb svg { width: 13px; height: 13px; opacity: 0.6; } /* Note / disclaimer block */ .note-block { display: flex; gap: 16px; align-items: flex-start; padding: 22px 26px; border-radius: var(--radius-sm); background: rgba(55,167,231,0.06); border: 1px solid rgba(55,167,231,0.22); max-width: 760px; } .note-block svg { width: 22px; height: 22px; color: var(--color-accent-blue); flex-shrink: 0; margin-top: 2px; } .note-block p { font-size: 0.96rem; color: var(--color-text-secondary); } .note-block strong { color: var(--color-text-primary); } .page-hero .note-block { margin-top: 34px; } /* Capability cards (richer than pillars) */ .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cap-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .cap-card { padding: 32px 28px; border: 1px solid var(--line); border-radius: var(--radius-card); background: linear-gradient(180deg, rgba(9,18,49,0.42), rgba(9,18,49,0.18)); transition: border-color .3s ease, transform .3s ease; } .cap-card:hover { border-color: var(--line-accent); transform: translateY(-5px); } .cap-ico { width: 50px; height: 50px; border-radius: 13px; margin-bottom: 22px; display: grid; place-items: center; background: rgba(45,221,184,0.07); border: 1px solid var(--line-accent); color: var(--color-accent-primary); } .cap-ico svg { width: 23px; height: 23px; } .cap-card h3 { font-size: 1.18rem; margin-bottom: 10px; } .cap-card p { font-size: 0.96rem; color: var(--color-text-secondary); } /* Alternating feature rows (use cases) */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .feature-row > * { min-width: 0; } /* grid items may shrink below their longest unbreakable line */ .feature-row + .feature-row { margin-top: 110px; } .feature-row:nth-child(even) .feature-row__media { order: 2; } .feature-row__media { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: #060a1d; } .feature-row__media img { width: 100%; height: 100%; object-fit: cover; } .feature-row__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,27,0.05), rgba(9,18,49,0.45)); } .feature-row__tag { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-button); background: rgba(8,7,20,0.72); color: var(--color-accent-cyan); border: 1px solid var(--line-accent); backdrop-filter: blur(6px); } /* Variant: pin the tag to the bottom-right corner (keeps top-left of the shot visible) */ .feature-row__tag--br { top: auto; left: auto; bottom: 16px; right: 16px; } /* aiXplore hero brand lockup */ .aix-hero-logo { height: 104px; width: auto; margin: 0 0 26px; display: block; filter: drop-shadow(0 6px 24px rgba(55,167,231,0.28)); } @media (max-width: 560px) { .aix-hero-logo { height: 80px; margin-bottom: 20px; } } .feature-row__body .uc-headline { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: 18px; } .uc-meta { margin: 22px 0; display: grid; gap: 16px; } .uc-meta .uc-pain, .uc-meta .uc-value { padding-left: 16px; border-left: 2px solid var(--line); } .uc-meta .uc-value { border-left-color: var(--color-accent-primary); } .uc-meta .uc-k { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); display: block; margin-bottom: 7px; } .uc-meta .uc-value .uc-k { color: var(--color-accent-primary); } .uc-meta p { font-size: 0.98rem; color: var(--color-text-secondary); } .uc-outputs { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0 26px; } .uc-chip { font-size: 0.84rem; font-family: var(--font-mono); letter-spacing: 0.3px; white-space: nowrap; padding: 7px 13px; border-radius: var(--radius-button); background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--color-text-secondary); } .uc-prime { margin: 24px 0 26px; padding: 20px 24px; border-radius: var(--radius-sm); background: rgba(45,221,184,0.05); border: 1px solid var(--line-accent); } .uc-prime .uc-k { color: var(--color-accent-cyan); } .uc-prime p { font-size: 0.96rem; color: var(--color-text-primary); } /* Numbered flow steps */ .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: flow; } .flow.cols-4 { grid-template-columns: repeat(4, 1fr); } .flow-step { padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--color-surface); position: relative; } .flow-step::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-accent-primary); display: block; margin-bottom: 14px; letter-spacing: 1px; } .flow-step h4 { font-size: 1.08rem; margin-bottom: 8px; } .flow-step p { font-size: 0.9rem; color: var(--color-text-muted); } /* Module cards (resilience / EU Space Act) */ .module-card { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--radius-card); background: linear-gradient(180deg, rgba(9,18,49,0.4), rgba(9,18,49,0.16)); transition: border-color .3s ease; } .module-card + .module-card { margin-top: 16px; } .module-card:hover { border-color: var(--line-accent); } .module-card .cap-ico { margin-bottom: 0; } .module-card h3 { font-size: 1.2rem; margin-bottom: 9px; } .module-card p { font-size: 0.98rem; color: var(--color-text-secondary); } .module-card .module-note { margin-top: 12px; font-size: 0.88rem; color: var(--color-text-muted); font-style: italic; } .module-card p { max-width: 68ch; } /* Boundaries (what SKEION does not do) */ .boundary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; } .boundary-grid li { list-style: none; display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--color-text-secondary); font-size: 0.98rem; } .boundary-grid li svg { width: 19px; height: 19px; color: var(--color-text-muted); flex-shrink: 0; margin-top: 2px; } /* Audience / persona cards */ .persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .persona { padding: 28px 28px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--color-surface); display: flex; gap: 18px; align-items: flex-start; transition: border-color .3s ease, transform .3s ease; } .persona:hover { border-color: var(--line-accent); transform: translateY(-4px); } .persona .cap-ico { margin-bottom: 0; } .persona h3 { font-size: 1.12rem; margin-bottom: 8px; } .persona p { font-size: 0.94rem; color: var(--color-text-muted); } @media (max-width: 1024px) { .cap-grid, .cap-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .flow, .flow.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; gap: 32px; } .feature-row:nth-child(even) .feature-row__media { order: 0; } .feature-row + .feature-row { margin-top: 72px; } .persona-grid { grid-template-columns: 1fr; } .boundary-grid { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 620px) { .cap-grid, .cap-grid.cols-2, .flow, .flow.cols-4 { grid-template-columns: 1fr; } /* long (FR) chips wrap instead of widening the whole row past the screen */ .uc-chip { white-space: normal; border-radius: 14px; } .page-hero { padding-top: 150px; } .module-card { grid-template-columns: 1fr; gap: 16px; } } /* ============================================================ LEGAL PAGES (legal-notice.html, privacy.html) + 404 ============================================================ */ .page-hero--compact { padding-bottom: 64px; } .legal { max-width: 780px; } .legal-section + .legal-section { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--line); } .legal h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.01em; margin-bottom: 16px; } .legal h3 { font-size: 1.08rem; margin: 26px 0 10px; } .legal p, .legal li, .legal dd { font-size: 1rem; color: var(--color-text-secondary); } .legal ul { padding-left: 20px; margin: 0 0 1rem; } .legal li + li { margin-top: 6px; } .legal a { color: var(--color-accent-primary); text-decoration: underline; text-underline-offset: 2px; } .legal strong { color: var(--color-text-primary); font-weight: 600; } .legal code { font-family: var(--font-mono); font-size: 0.88em; color: var(--color-text-primary); background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 4px; } .legal-facts { display: grid; grid-template-columns: minmax(150px, 0.4fr) 1fr; gap: 10px 24px; margin: 0 0 1rem; } .legal-facts dt { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); padding-top: 3px; } .legal-facts dd { margin: 0; } .legal-updated { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.5px; color: var(--color-text-muted); } /* Missing information that SKEION must supply before the page is indexed */ .todo { display: inline; padding: 1px 7px; border-radius: 5px; font-family: var(--font-mono); font-size: 0.82em; letter-spacing: 0.3px; color: var(--color-text-primary); background: rgba(91, 180, 236, 0.14); border: 1px dashed rgba(91, 180, 236, 0.6); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .legal-draft { margin-top: 30px; } @media (max-width: 620px) { .legal-facts { grid-template-columns: 1fr; gap: 2px; } .legal-facts dd { margin-bottom: 12px; } } .error-code { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 2.5px; color: var(--color-accent-primary); margin-bottom: 22px; display: block; } .error-links { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; } /* Reduce motion: disable transforms/animation niceties */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } /* ============================================================ HERO SUN (assets/js/skeion-sun.js), block from docs/build/04-sun-judgement.md §6.2 (art-direction pass). Kept at the very end on purpose: it must come after the "max-width: 560px" .hero padding above, so the mobile limb band starts right under the fixed nav (73 px). ============================================================ */ .sun-stage { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 1; } /* the picture melts into the next section: the bottom of the stage fades out (masks on the picture only, not on the controls) */ .sun-stage canvas, .sun-stage::before { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); } /* Poster: plain CSS, visible from the first paint and on fallback (no WebGL, Save-Data, errors, context loss). It fades out only once the canvas has faded in (delay), and comes back at once on a fallback. */ .sun-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .3s; background: url("./assets/img/sun/sun-poster-desktop-v4.jpg") right center / auto 100% no-repeat; background-image: image-set(url("./assets/img/sun/sun-poster-desktop-v4.avif") type("image/avif"), url("./assets/img/sun/sun-poster-desktop-v4.jpg") type("image/jpeg")); } .sun-stage.is-live::before { opacity: 0; transition: opacity .6s .8s; } .sun-stage canvas { opacity: 0; transition: opacity .8s; outline: none; } .sun-stage.is-live canvas { opacity: 1; } .sun-caption { position: absolute; top: 96px; right: 32px; z-index: 2; margin: 0; max-width: 560px; text-align: right; text-wrap: balance; font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.6; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-text-muted); pointer-events: none; } .sun-caption span { display: block; color: rgba(45, 221, 184, 0.72); } /* Short caption for the screens where the long one does not fit (< 1280 px): the picture is always marked as an illustration (docs/build/08-prod-fixes.md) */ .sun-note { display: none; position: absolute; top: 96px; right: 32px; z-index: 2; margin: 0; max-width: 260px; text-align: right; font-family: var(--font-mono); font-size: 0.62rem; line-height: 1.5; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); pointer-events: none; text-wrap: balance; /* >= 4.5:1 even over the corona */ } .sun-pause { position: absolute; right: 32px; bottom: 28px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-secondary); background: rgba(10, 8, 27, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 7px 13px 7px 11px; transition: color .2s ease, border-color .2s ease, background .2s ease; } .sun-pause::after { content: ""; position: absolute; inset: -6px -4px; } /* 44 px touch target, 32 px visual */ .sun-pause::before { content: ""; width: 8px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; box-sizing: border-box; } .is-paused .sun-pause::before { border: none; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .sun-pause .when-paused, .is-paused .sun-pause .when-playing { display: none; } .is-paused .sun-pause .when-paused { display: inline; } .sun-stage:not(.is-live) .sun-pause { visibility: hidden; } .sun-pause[hidden] { display: none; } .sun-pause:hover { color: var(--color-text-primary); border-color: var(--line-accent); background: rgba(10, 8, 27, 0.8); } .sun-pause:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; } /* >= 1024 px: height-based composition (R = 0.31 x stage height, left limb at 0.655 x height from the right edge), so the stage is capped to the first viewport and to the room right of the text column (right edge of the text = max(688px, 50vw + 98px)); below 1180 px it is also pushed right, the disk being cropped rather than shrunk further. The poster stays aligned: right-anchored, height-based. */ @media (min-width: 1024px) { .sun-stage { bottom: auto; height: min(100%, 100vh, calc(76vw - 190px)); right: min(0px, calc(0.62 * (100vw - 1180px))); } .sun-caption, .sun-pause, .sun-note { right: calc(32px + max(0px, 0.62 * (1180px - 100vw))); } } /* below 1280 px the long caption would touch the limb or the eyebrow: the short one takes over (top right, above the disk, one line) */ @media (max-width: 1279px) { .sun-caption { display: none; } .sun-note { display: block; } } /* 768-1023 px (changed at integration, docs/build/07-prod-integration.md §2): the text column always ends at x = 688 px, so the disk is sized and pushed right to keep its limb clear of the H1 and its eyebrow (same height-based model as desktop: rope at ~ right - 0.58 h, left limb at right - 0.655 h). The stage starts 40 px down so the rope stays >= 140 px from the top; the pause button sits top-right, under the nav, where the text never goes. The scrim still softens the corona behind the paragraph. */ @media (min-width: 768px) and (max-width: 1023px) { .sun-stage { opacity: 0.85; top: 40px; bottom: auto; width: 70%; height: min(calc(100% - 40px), calc(100vh - 40px), calc(76vw - 190px)); right: calc(27.45vw - 378px); } .sun-pause { top: 44px; bottom: auto; right: calc(398px - 27.45vw); } .sun-note { top: 84px; right: calc(398px - 27.45vw); } .hero .container::before { content: ""; position: absolute; inset: -40px -10% -40px -40px; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 30% 50%, rgba(10, 8, 27, 0.78), transparent 72%); } } /* Portrait screens up to 899 px (phones and portrait tablets): "limb-band", the limb is a horizon in the flow, above the H1, never under it. The engine's own "auto" switches at 768 px only, so script.js sets the composition with this same media query (and remounts the engine on rotation). The band follows the width (60vw + 30px keeps the rope and its cage inside the band at any width; the phone height, 34svh, wins on phones), so a portrait tablet gets the phone picture instead of a sliver of disk in a corner. */ @media (max-width: 899px) and (orientation: portrait) { .hero { flex-direction: column; align-items: stretch; padding-top: 73px; } .sun-stage::before { background-position: center bottom; background-size: 100% auto; background-image: url("./assets/img/sun/sun-poster-mobile-v2.jpg"); background-image: image-set(url("./assets/img/sun/sun-poster-mobile-v3.avif") type("image/avif"), url("./assets/img/sun/sun-poster-mobile-v2.jpg") type("image/jpeg")); } .sun-stage { position: relative; top: auto; right: auto; bottom: auto; opacity: 1; width: 100%; flex: none; height: max(clamp(220px, 34vh, 320px), calc(60vw + 30px)); height: max(clamp(220px, 34svh, 320px), calc(60vw + 30px)); } .sun-stage canvas, .sun-stage::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 70%, transparent 100%); } .hero .container { margin-top: 26px; } .hero .container::before { content: none; } /* pause bottom right, short caption bottom left, both aligned on the text column */ .sun-pause { top: auto; bottom: 10px; right: 28px; padding: 6px 11px 6px 9px; font-size: 0.62rem; } .sun-note { top: auto; right: auto; bottom: 14px; left: 28px; max-width: calc(100% - 230px); text-align: left; } } @media (max-width: 560px) and (orientation: portrait) { .sun-pause { right: 20px; } .sun-note { left: 20px; max-width: calc(100% - 200px); } } /* Landscape phones (and any landscape window under 768 px, or under 1024 px and 500 px high): the band would be a close-up of the surface with the rope above the frame, and the H1 below the fold. The desktop side composition is used instead (engine "disk-right", desktop poster): whole disk on the right, height-based (R = 0.31 h, left limb at 0.655 h from the right edge), the text column narrowed to stop before it. */ @media (max-width: 767px) and (orientation: landscape), (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) { .hero { padding-top: 96px; } .sun-stage { top: 0; right: 0; bottom: auto; opacity: 1; width: 50%; height: min(100%, 100vh, calc(50vw + 40px)); height: min(100%, 100svh, calc(50vw + 40px)); } .hero .container::before { content: none; } .hero-content { max-width: min(660px, calc(100vw - 0.72 * min(100vh, 50vw + 40px) - 56px)); max-width: min(660px, calc(100vw - 0.72 * min(100svh, 50vw + 40px) - 56px)); } .sun-pause { top: auto; bottom: 34px; right: 12px; padding: 6px 11px 6px 9px; font-size: 0.62rem; } .sun-note { top: auto; bottom: 12px; right: 12px; } }