:root { --bg: #FCFCFD; --bg-alt: #F4F4F5; --primary: #8A1515; --secondary: #158A8A; --text: #3B3B3B; --text-muted: #6B6B6B; --serif: 'Zen Antique', Georgia, serif; --sans: 'Source Sans 3', -apple-system, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.25rem 2.5rem; display: flex; justify-content: space-between; align-items: center; background: rgba(252, 252, 253, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(59, 59, 59, 0.06); } .nav-logo { display: inline-flex; align-items: center; text-decoration: none; } .nav-logo img { height: 45px; width: auto; } .nav-right { display: flex; align-items: center; gap: 2rem; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: color 0.2s; letter-spacing: 0.02em; } .nav-links a:hover { color: var(--primary); } /* ── LANGUAGE TOGGLE ── * Sits to the left of the nav links (so it appears immediately * before "About"). Styled identically to the rest of the nav so it * looks like a natural toolbar item. Only the *other* language is * rendered: on EN pages it shows "Français", on FR pages "English". * The active language and separator are hidden via display:none. */ .nav-lang { order: -1; display: inline-flex; align-items: center; } .nav-lang a { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: color 0.2s; letter-spacing: 0.02em; cursor: pointer; } .nav-lang a:hover { color: var(--primary); } .nav-lang a.active { display: none; } .nav-lang-sep { display: none; } /* ── NAV DROPDOWN ── */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex; align-items: center; } .dropdown-menu { position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translateX(-50%); background: var(--bg); border: 1px solid rgba(59, 59, 59, 0.08); border-radius: 8px; padding: 0.5rem 0; min-width: 160px; box-shadow: 0 8px 30px rgba(59, 59, 59, 0.08); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; list-style: none; } .nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown-menu li a { display: block; padding: 0.6rem 1.25rem; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; } .dropdown-menu li a:hover { color: var(--primary); background: var(--bg-alt); } /* ── MOBILE NAV (hamburger + slide-in drawer) ── * Hamburger button is hidden on desktop; the @media block at the bottom * of this file flips the visibility around at the mobile breakpoint. * Drawer markup is injected into by i18n.js so every page * automatically gets a working mobile nav without per-page boilerplate. */ .nav-mobile-toggle { display: none; background: none; border: none; padding: 0.4rem; margin: 0; cursor: pointer; color: var(--text-muted); align-items: center; justify-content: center; transition: color 0.2s; } .nav-mobile-toggle:hover { color: var(--primary); } .nav-mobile-toggle svg { display: block; } .nav-mobile-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; } .nav-mobile-drawer.open { pointer-events: auto; visibility: visible; } .nav-mobile-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 22, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.25s ease; } .nav-mobile-drawer.open .nav-mobile-backdrop { opacity: 1; } .nav-mobile-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 82%; max-width: 320px; background: var(--bg); box-shadow: -8px 0 36px rgba(20, 20, 22, 0.18); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; padding: 5rem 1.75rem 2rem; overflow-y: auto; } .nav-mobile-drawer.open .nav-mobile-panel { transform: translateX(0); } .nav-mobile-close { position: absolute; top: 1.1rem; right: 1.1rem; background: none; border: none; padding: 0.4rem; cursor: pointer; color: var(--text-muted); transition: color 0.2s; } .nav-mobile-close:hover { color: var(--primary); } .nav-mobile-close svg { display: block; } .nav-mobile-links { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; } .nav-mobile-links li a { display: block; padding: 0.7rem 0; font-size: 1.05rem; font-weight: 500; color: var(--text); text-decoration: none; letter-spacing: 0.01em; transition: color 0.2s; border-bottom: 1px solid rgba(59, 59, 59, 0.06); } .nav-mobile-links li a:hover { color: var(--primary); } .nav-mobile-links .nav-mobile-sub a { padding: 0.55rem 0 0.55rem 1.25rem; font-size: 0.92rem; font-weight: 400; color: var(--text-muted); border-bottom: none; } .nav-mobile-links .nav-mobile-sub:last-of-type a, .nav-mobile-links .nav-mobile-sub + li:not(.nav-mobile-sub) a { /* Border separating dropdown children from the next top-level link. */ } .nav-mobile-links .nav-mobile-sub-last a { border-bottom: 1px solid rgba(59, 59, 59, 0.06); padding-bottom: 0.85rem; margin-bottom: 0.15rem; } /* ── LIGHTBOX (used by screenshots page) ── */ .lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0.25s ease; padding: 1rem; } .lightbox.open { pointer-events: auto; visibility: visible; opacity: 1; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(15, 15, 18, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .lightbox-content { position: relative; max-width: 95vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; } .lightbox-image { max-width: 95vw; max-height: 90vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); display: block; } .lightbox-close { position: absolute; top: -3rem; right: 0; background: none; border: none; color: rgba(255, 255, 255, 0.85); cursor: pointer; padding: 0.4rem; transition: color 0.2s, transform 0.15s; } .lightbox-close:hover { color: white; transform: scale(1.05); } .lightbox-close svg { display: block; } @media (max-width: 600px) { .lightbox-close { top: -2.5rem; } } /* ── PLACEHOLDER ── */ .placeholder { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8rem 2.5rem 4rem; } .placeholder-badge { display: inline-block; padding: 0.4rem 1rem; border-radius: 50px; background: rgba(138, 21, 21, 0.1); color: var(--primary); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2rem; } .placeholder h1 { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.025em; margin-bottom: 1.25rem; } .placeholder h1 em { font-style: normal; color: var(--primary); } .placeholder p { font-size: 1.15rem; color: var(--text-muted); max-width: 480px; line-height: 1.7; font-weight: 300; margin-bottom: 1.25rem; } /* ── FOOTER ── */ footer { padding: 3rem 2.5rem; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(59, 59, 59, 0.06); } .footer-left { font-size: 0.85rem; color: var(--text-muted); } .footer-right a { font-size: 0.85rem; color: var(--text-muted); text-decoration: none; margin-left: 1.5rem; transition: color 0.2s; } .footer-right a:hover { color: var(--primary); } /* ── RESPONSIVE ── */ @media (max-width: 760px) { /* Hide the desktop nav links + lang toggle and reveal the hamburger; * everything moves into the slide-in drawer. The lang toggle still * appears at the bottom of the drawer (injected by i18n.js). */ .nav-links { display: none; } .nav-right .nav-lang { display: none; } .nav-right { gap: 0; } .nav-mobile-toggle { display: inline-flex; } nav { padding: 0.9rem 1.25rem; } .nav-logo img { height: 38px; } /* Tighten the standard page-container padding for every page that * uses one of these well-known wrapper classes. Each page also has * its own mobile rules for page-specific elements; this rule just * makes sure no page is left with desktop-only padding. */ .contact-page, .pricing-page, .faq-page, .legal-page, .product-page, .about-page, .about-jurat, .updates-page { padding: 6.5rem 1.25rem 3rem; } .about-me { padding: 2rem 1.25rem 3rem; } .placeholder { padding: 6.5rem 1.25rem 3rem; } .placeholder p { font-size: 1.05rem; } /* Footer stacks vertically on mobile. */ footer { flex-direction: column; gap: 0.85rem; text-align: center; padding: 2.5rem 1.25rem; } .footer-right { display: flex; justify-content: center; gap: 1.5rem; } .footer-right a { margin-left: 0; } }