/* ============================================================ LOGICIEL — futuristic software house Shared stylesheet for the site + product pages ============================================================ */ :root { /* Brand — Logiciel */ --navy-900: #060b16; --navy-850: #080f1f; --navy-800: #0a1226; --navy-700: #0d192f; --ink: #0d192f; --blue: #3b82f6; --indigo: #6366f1; --purple: #8b5cf6; --violet: #a855f7; --cyan: #22d3ee; --text: #e8eefc; --muted: #9fb0d0; --faint: #63769a; --grad: linear-gradient(120deg, #22d3ee 0%, #3b82f6 38%, #8b5cf6 70%, #a855f7 100%); --grad-soft: linear-gradient(120deg, rgba(34,211,238,.16), rgba(139,92,246,.16)); --glass: rgba(255, 255, 255, 0.04); --glass-brd: rgba(255, 255, 255, 0.09); --ring: 0 0 0 1px rgba(255,255,255,.06); --shadow: 0 30px 80px -20px rgba(0,0,0,.7); /* Product accent (overridden per product) */ --accent: var(--blue); --maxw: 1200px; --nav-h: 74px; --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x on too: the rotating .orbit squares have a bounding box ~1.4x their width, which adds phantom scroll width even though the circles themselves never leave the container. body alone doesn't suppress it. */ html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font); background: var(--navy-900); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Ambient background layers ------------------------------------ */ .bg-fx { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(1200px 700px at 78% -8%, rgba(139,92,246,.20), transparent 60%), radial-gradient(1000px 620px at 8% 10%, rgba(34,211,238,.14), transparent 55%), radial-gradient(900px 900px at 50% 120%, rgba(59,130,246,.15), transparent 60%), var(--navy-900); } #net { position: fixed; inset: 0; z-index: -2; opacity: .55; } .grid-overlay { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .35; background-image: linear-gradient(rgba(120,150,220,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,150,220,.06) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 78%); } .cursor-glow { position: fixed; width: 460px; height: 460px; border-radius: 50%; z-index: -1; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(99,102,241,.16), transparent 60%); transition: opacity .4s; opacity: 0; } /* Layout ------------------------------------------------------- */ .wrap { width: min(var(--maxw), 92vw); margin-inline: auto; } section { padding: clamp(70px, 10vw, 140px) 0; position: relative; } .eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .32em; text-transform: uppercase; color: var(--cyan); display: inline-flex; gap: .6em; align-items: center; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--cyan); display: inline-block; } h1, h2, h3 { line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; } .h-xl { font-size: clamp(2.6rem, 7vw, 5.4rem); } .h-lg { font-size: clamp(2rem, 4.4vw, 3.4rem); } .h-md { font-size: clamp(1.3rem, 2.2vw, 1.8rem); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lead { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.2rem); max-width: 60ch; } /* Nav ---------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(8, 14, 28, .72); backdrop-filter: blur(16px); border-bottom: 1px solid var(--glass-brd); } .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); } .brand .mark { width: 34px; height: 34px; flex: none; } .brand .name { font-weight: 700; font-size: 1.28rem; letter-spacing: -.01em; } .brand .name b { font-weight: 700; } .nav-links { display: flex; gap: 6px; align-items: center; } .nav-links a { color: var(--muted); text-decoration: none; font-size: .93rem; font-weight: 500; padding: 9px 15px; border-radius: 10px; position: relative; transition: color .25s, background .25s; } .nav-links a:hover { color: var(--text); background: var(--glass); } .nav-links a.active { color: var(--text); } .nav-cta { background: var(--grad); color: #fff !important; font-weight: 600 !important; box-shadow: 0 8px 24px -8px rgba(99,102,241,.7); } .nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; } .nav-toggle svg { width: 26px; height: 26px; } /* Buttons ------------------------------------------------------ */ .btn { --bg: var(--grad); display: inline-flex; align-items: center; gap: .6em; cursor: pointer; padding: 14px 26px; border-radius: 14px; font-weight: 600; font-size: .98rem; text-decoration: none; border: 1px solid transparent; position: relative; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; } .btn-primary { background: var(--bg); color: #fff; box-shadow: 0 12px 34px -12px rgba(99,102,241,.8); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -14px rgba(99,102,241,.9); } .btn-ghost { background: var(--glass); border-color: var(--glass-brd); color: var(--text); backdrop-filter: blur(8px); } .btn-ghost:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.25); } .btn .arrow { transition: transform .25s; } .btn:hover .arrow { transform: translateX(4px); } /* Hero --------------------------------------------------------- */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); } .hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; } .hero-copy { max-width: 640px; } .hero h1 { margin: 18px 0 22px; } .hero .lead { margin-bottom: 20px; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } .decoder { font-family: var(--font-mono); font-size: 1rem; letter-spacing: .05em; display: flex; gap: 10px; flex-wrap: wrap; color: var(--faint); } .decoder .u { position: relative; transition: color .3s; } .decoder .u.lit { color: var(--cyan); text-shadow: 0 0 18px rgba(34,211,238,.7); } .chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } .chip { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 13px; border: 1px solid var(--glass-brd); border-radius: 999px; color: var(--muted); background: var(--glass); display: inline-flex; align-items: center; gap: 8px; } .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } /* Hero visual — orbiting L core */ .hero-visual { position: relative; aspect-ratio: 1; display: grid; place-items: center; } .core { width: min(360px, 70%); aspect-ratio: 1; border-radius: 32px; position: relative; background: linear-gradient(160deg, rgba(20,30,54,.9), rgba(10,16,34,.9)); border: 1px solid var(--glass-brd); box-shadow: var(--shadow); display: grid; place-items: center; overflow: hidden; } .core::before { content: ""; position: absolute; inset: -2px; border-radius: 32px; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; } .core .l-icon { width: 62%; } .orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(120,150,220,.18); animation: spin 26s linear infinite; } .orbit.two { inset: 14%; animation-duration: 18s; animation-direction: reverse; border-color: rgba(139,92,246,.22); } .orbit .dot { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); transform: translateX(-50%); } .orbit.two .dot { background: var(--violet); box-shadow: 0 0 16px var(--violet); } @keyframes spin { to { transform: rotate(360deg); } } /* Logiciel mark — circuit lines pulse outward from the L. Filled paths, not strokes, so this animates position/opacity rather than dashes. translateX is in the mark's own path units (~15 of them per rendered px). */ .l-icon .flow { animation: flowPulse 2.4s ease-in-out infinite; } .l-icon .f2 { animation-delay: .28s; } .l-icon .f3 { animation-delay: .56s; } @keyframes flowPulse { 0%, 100% { opacity: .4; transform: translateX(-70px); } 45% { opacity: 1; transform: none; } } /* Section headers ---------------------------------------------- */ .sec-head { max-width: 720px; margin-bottom: 56px; } .sec-head h2 { margin: 16px 0 14px; } /* Feature grid ------------------------------------------------- */ .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .feature { padding: 26px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-brd); position: relative; overflow: hidden; transition: transform .35s, border-color .35s; } .feature:hover { transform: translateY(-6px); border-color: rgba(139,92,246,.4); } .feature .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; background: var(--grad-soft); border: 1px solid var(--glass-brd); } .feature .ic svg { width: 24px; height: 24px; stroke: var(--cyan); } .feature h3 { font-size: 1.12rem; margin-bottom: 8px; } .feature p { color: var(--muted); font-size: .95rem; } .feature .num { position: absolute; top: 16px; right: 18px; font-family: var(--font-mono); font-size: .74rem; color: var(--faint); } /* Split about -------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; } .stat { padding: 22px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-brd); } .stat .v { font-size: 2.2rem; font-weight: 700; } .stat .k { color: var(--muted); font-size: .9rem; } .terminal { border-radius: 18px; background: rgba(6,11,22,.85); border: 1px solid var(--glass-brd); box-shadow: var(--shadow); overflow: hidden; font-family: var(--font-mono); } .terminal .bar { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--glass-brd); background: rgba(255,255,255,.02); } .terminal .bar i { width: 12px; height: 12px; border-radius: 50%; background: #33405f; } .terminal .bar i:nth-child(1){ background:#ff5f57 } .terminal .bar i:nth-child(2){ background:#febc2e } .terminal .bar i:nth-child(3){ background:#28c840 } .terminal .body { padding: 22px; font-size: .9rem; min-height: 260px; } .terminal .ln { display: block; white-space: pre-wrap; } .terminal .cm { color: var(--faint); } .terminal .kw { color: var(--violet); } .terminal .fn { color: var(--cyan); } .terminal .st { color: #7ee787; } .terminal .cursor::after { content:"▋"; color: var(--cyan); animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* Products ----------------------------------------------------- */ .products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .product-card { position: relative; border-radius: 24px; overflow: hidden; text-decoration: none; color: var(--text); border: 1px solid var(--glass-brd); background: linear-gradient(160deg, rgba(18,26,48,.7), rgba(8,14,28,.7)); padding: 34px; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .3s, border-color .3s; transform-style: preserve-3d; } .product-card::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,.18), transparent 45%); } .product-card:hover::after { opacity: 1; } .product-card:hover { border-color: rgba(255,255,255,.24); } .product-card .tag { align-self: flex-start; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-brd); color: var(--muted); } .product-card.garage { --accent: #ff7a18; } .product-card.garage .tag { color: #ffb27a; border-color: rgba(255,122,24,.35); background: rgba(255,122,24,.08); } .product-card .p-logo { width: 90px; height: 90px; margin-bottom: 20px; } .product-card h3 { font-size: 1.7rem; margin-bottom: 8px; } .product-card p { color: var(--muted); font-size: .96rem; max-width: 42ch; } .product-card .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; color: var(--accent); } .product-card .go .arrow { transition: transform .25s; } .product-card:hover .go .arrow { transform: translateX(5px); } .product-card.soon { border-style: dashed; opacity: .9; } .product-card.soon .grid-mini { position:absolute; inset:0; opacity:.15; background-image: linear-gradient(rgba(120,150,220,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(120,150,220,.3) 1px, transparent 1px); background-size: 26px 26px; } /* Team --------------------------------------------------------- */ .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .member { padding: 32px 26px; border-radius: 22px; text-align: center; background: var(--glass); border: 1px solid var(--glass-brd); transition: transform .35s, border-color .35s; } .member:hover { transform: translateY(-6px); border-color: rgba(139,92,246,.4); } /* The photo sits on top of a monogram — if the file isn't there yet, main.js drops the and the initials show through instead of a broken icon. */ .member .avatar { width: 104px; height: 104px; margin: 0 auto 20px; position: relative; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--glass-brd); } .member .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .member .avatar .initials { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: .06em; color: var(--cyan); } .member h3 { font-size: 1.2rem; margin-bottom: 5px; } .member .role { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; } .member p { color: var(--muted); font-size: .94rem; } .member .li { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 16px; border-radius: 999px; text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--muted); background: var(--glass); border: 1px solid var(--glass-brd); transition: color .25s, border-color .25s, background .25s; } .member .li svg { width: 16px; height: 16px; flex: none; } .member .li:hover { color: var(--text); border-color: rgba(34,211,238,.5); background: var(--grad-soft); } /* CTA band ----------------------------------------------------- */ .cta-band { border-radius: 28px; padding: clamp(40px, 6vw, 72px); text-align: center; position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(34,211,238,.16), rgba(139,92,246,.2)); border: 1px solid var(--glass-brd); } .cta-band h2 { margin-bottom: 16px; } .cta-band .lead { margin: 0 auto 30px; } /* Footer ------------------------------------------------------- */ .footer { padding: 70px 0 40px; border-top: 1px solid var(--glass-brd); } .footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--faint); margin-bottom: 16px; } .footer a { display: block; color: var(--muted); text-decoration: none; padding: 5px 0; transition: color .2s; } .footer a:hover { color: var(--text); } .footer .ascii { font-family: var(--font-mono); color: var(--faint); font-size: .82rem; margin-top: 16px; } .footer-base { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--glass-brd); display: flex; justify-content: space-between; color: var(--faint); font-size: .85rem; flex-wrap: wrap; gap: 10px; } /* Reveal animation --------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } /* Page transition overlay -------------------------------------- */ .page-fade { position: fixed; inset: 0; z-index: 200; background: var(--navy-900); transform: translateY(100%); pointer-events: none; } .page-fade.run { animation: pageWipe .9s cubic-bezier(.7,0,.3,1) forwards; } @keyframes pageWipe { 0% { transform: translateY(100%);} 45%{ transform: translateY(0);} 55%{transform:translateY(0);} 100%{ transform: translateY(-100%);} } /* Scroll progress bar */ .progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300; background: var(--grad); box-shadow: 0 0 12px rgba(99,102,241,.8); } /* Responsive --------------------------------------------------- */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero-visual { order: -1; max-width: 360px; margin-inline: auto; } .features { grid-template-columns: repeat(2, 1fr); } .split, .products, .footer .wrap { grid-template-columns: 1fr; } /* single centred column, capped so the cards don't stretch out at tablet width */ .team { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .nav-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; background: rgba(8,14,28,.96); backdrop-filter: blur(16px); padding: 14px; gap: 4px; border-bottom: 1px solid var(--glass-brd); transform: translateY(-140%); transition: transform .4s; } .nav-links.open { transform: none; } /* full-width rows in the drop-down, sized for thumbs rather than cursors */ .nav-links a { padding: 14px 16px; font-size: 1rem; border-radius: 12px; } .nav-cta { text-align: center; margin-top: 6px; } .nav-toggle { display: block; padding: 9px; margin-right: -9px; } } @media (max-width: 560px) { .features { grid-template-columns: 1fr; } /* stats stay 2-up — four full-width cards is a lot of scrolling for four numbers */ .stat-grid { gap: 12px; } .stat { padding: 18px; } .stat .v { font-size: 1.85rem; } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { justify-content: center; } .product-card { padding: 24px; min-height: 0; } .member { padding: 26px 20px; } .member .avatar { width: 88px; height: 88px; margin-bottom: 16px; } .product-card h3 { font-size: 1.45rem; } .cta-band { padding: 36px 20px; } .terminal .body { padding: 16px; font-size: .82rem; min-height: 0; } .decoder { gap: 7px; font-size: .9rem; } .sec-head { margin-bottom: 38px; } .footer-base { flex-direction: column; align-items: flex-start; gap: 6px; } .footer a { padding: 8px 0; } }