/* Azure Knight Apps — feuille de style de tout le site : l'accueil de la societe, les pages de chaque appli, la page 404. Deux habillages, choisis par la classe de : (aucune) la societe : le bleu azur (teinte « ciel » des visuels) .theme-sqf SmartQLS-Flow : l'orange de son icone Une nouvelle appli = une nouvelle classe .theme-xxx qui redefinit les jetons --brand, --accent, --link, --accent-shadow et --halo. Aucune dependance : la police est celle des applis (Work Sans, licence OFL, servie par le site). Theme CLAIR uniquement (color-scheme: light). La politique de securite (_headers) interdit tout style EN LIGNE : un attribut style="..." serait ignore sans un mot. Tout passe par ce fichier. */ /* ------------------------------------------------------------------ police */ @font-face { font-family: "Work Sans"; src: url("fonts/WorkSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Work Sans"; src: url("fonts/WorkSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ jetons */ :root { color-scheme: light; --paper: #fbf8f3; --paper-2: #ffffff; --ink: #221f1b; --ink-soft: #5c554d; --ink-faint: #8a8278; --line: #ebe3d7; --frame: #1d1b19; /* les six teintes douces des visuels de la fiche Play : haut, bas, accent */ --peach-1: #fce7d6; --peach-2: #f4ceb2; --peach-a: #c2561c; --sage-1: #e7f0e1; --sage-2: #d3e3c8; --sage-a: #4f7b45; --sand-1: #f8efd9; --sand-2: #eeddb6; --sand-a: #9c7419; --sky-1: #e3edf7; --sky-2: #cadcef; --sky-a: #2e6ca6; --lavender-1: #ede6f5; --lavender-2: #dbcfeb; --lavender-a: #6b4e9e; --rose-1: #f9e6e3; --rose-2: #f0ccc8; --rose-a: #a9423c; /* la societe : l'azur. Bouton en blanc sur --accent : 5,5:1 ; liens : 6,8:1 */ --brand: #2e6ca6; --accent: #2e6ca6; --link: #255a8c; --accent-shadow: rgba(46, 108, 166, .26); --halo: var(--sky-2); --radius: 14px; --radius-lg: 26px; --shadow-sm: 0 1px 2px rgba(34, 31, 27, .06), 0 4px 14px rgba(34, 31, 27, .05); --shadow-md: 0 12px 32px rgba(34, 31, 27, .10), 0 2px 8px rgba(34, 31, 27, .06); --shadow-phone: 0 28px 56px rgba(60, 38, 18, .22), 0 6px 16px rgba(60, 38, 18, .14); --font: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wrap: 1080px; } /* SmartQLS-Flow : l'orange de l'icone, reassombri pour le texte sur du clair (bouton 4,5:1 en blanc, liens 5,5:1) */ .theme-sqf { --brand: #d96a2b; --accent: #c2561c; --link: #a64916; --accent-shadow: rgba(194, 86, 28, .28); --halo: var(--peach-2); } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent); } a:focus-visible, .btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; } h1, h2, h3 { margin: 0 0 .45em; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); } h3 { font-size: 1.15rem; letter-spacing: -.01em; } p { margin: 0 0 1.1em; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; } .skip:focus { top: 12px; color: #fff; } /* ------------------------------------------------------------------ boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; background: var(--accent); color: #fff; font: 600 1rem/1.2 var(--font); letter-spacing: -.005em; text-decoration: none; border-radius: 999px; box-shadow: 0 6px 18px var(--accent-shadow); transition: background .15s ease, transform .15s ease; } .btn:hover { background: var(--link); color: #fff; transform: translateY(-1px); } .btn-sm { min-height: 40px; padding: 8px 18px; font-size: .92rem; box-shadow: none; } /* Tant que l'appli n'est pas publiee, le lien Google Play n'existe pas (il repondrait 404) : une etiquette le remplace. */ .soon { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border: 1px dashed var(--accent); border-radius: 999px; color: var(--link); font-weight: 600; font-size: .95rem; } /* ------------------------------------------------------------------ en-tete */ .site-head { position: sticky; top: 0; z-index: 10; background: rgba(251, 248, 243, .92); -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); } .head-in { display: flex; align-items: center; gap: 16px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; margin-right: auto; } .brand:hover { color: var(--ink); } .brand img { width: 34px; height: 34px; border-radius: 9px; } /* nowrap : sans lui, un nom se coupe au trait d'union (« SmartQLS- / Flow ») des que la rangee manque de quelques pixels */ .brand-name { font-weight: 600; font-size: 1.08rem; letter-spacing: -.015em; white-space: nowrap; } .nav { display: flex; align-items: center; gap: 22px; } .nav a { white-space: nowrap; } .nav a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-size: .96rem; } .nav a:not(.btn):hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; } @media (max-width: 640px) { .nav .btn { display: none; } .nav { gap: 16px; } .head-in { gap: 12px; } } @media (max-width: 400px) { .wrap { padding: 0 16px; } .brand-name { font-size: 1rem; } .nav { gap: 14px; } .nav a:not(.btn) { font-size: .92rem; } } /* mesure : sous ~350 px, icone + nom + deux liens ne tiennent plus sur une rangee (le nom chevauchait « Features » a 320). L'icone reste, et le lien garde son nom accessible (aria-label). Sans icone (en-tete de la societe), le nom reste : il est seul avec ses deux liens courts. */ @media (max-width: 350px) { .brand img + .brand-name { display: none; } } /* ------------------------------------------------------------------ accueil de la societe */ .co-hero { padding: 72px 0 36px; text-align: center; } .co-hero h1 { margin-bottom: .25em; } .co-hero .lede { margin: 0 auto; } .apps { padding: 24px 0 88px; scroll-margin-top: 64px; } .apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } /* Une carte = une appli. Toute la carte est cliquable : le lien du titre s'etend sur elle (::after), ce qui garde UN seul lien par carte pour le clavier et les lecteurs d'ecran. */ .app-card { position: relative; display: flex; flex-direction: column; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .app-card:focus-within { outline: 3px solid var(--ta); outline-offset: 3px; } /* le haut de la carte : le telephone depasse d'un panneau teinte */ .app-card-shot { height: 300px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; padding-top: 34px; background: linear-gradient(180deg, var(--t1), var(--t2)); } .app-card-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 6px; flex: 1; } /* align-self : dans une colonne flexible, une image a largeur « auto » s'etire sur toute la largeur (le logo de MT Sound Quest en sortait aplati) */ .app-card-logo { height: 52px; width: auto; margin-bottom: 8px; align-self: flex-start; } .app-card-logo.rounded { width: 52px; border-radius: 13px; } .app-card h2 { font-size: 1.45rem; margin: 0; } .app-card h2 a { color: var(--ink); text-decoration: none; } .app-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); } .app-card h2 a:focus-visible { outline: none; } .app-card p { color: var(--ink-soft); margin: 0 0 12px; } .app-card-go { margin-top: auto; color: var(--ta); font-weight: 600; font-size: .96rem; } @media (max-width: 760px) { .co-hero { padding: 48px 0 24px; } .apps-grid { grid-template-columns: 1fr; } .app-card-shot { height: 260px; } } /* ------------------------------------------------------------------ accroche d'une appli */ .hero { padding: 64px 0 84px; overflow: hidden; } .hero-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; } .eyebrow { color: var(--link); font-weight: 600; font-size: .95rem; margin-bottom: 14px; } .lede { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--ink-soft); max-width: 34ch; margin-bottom: 30px; } .hero-shot { position: relative; display: flex; justify-content: center; } /* halo derriere le telephone : de la chaleur, pas un aplat */ .hero-shot::before { content: ""; position: absolute; inset: 6% -8% 2%; background: radial-gradient(closest-side, var(--halo), rgba(255, 255, 255, 0) 100%); z-index: 0; } @media (max-width: 860px) { .hero { padding: 40px 0 64px; } .hero-in { grid-template-columns: 1fr; gap: 44px; text-align: center; } .lede { margin-left: auto; margin-right: auto; } } /* ------------------------------------------------------------------ telephone */ .phone { position: relative; z-index: 1; width: min(300px, 74vw); aspect-ratio: var(--ratio, 600 / 1106); border: 10px solid var(--frame); border-radius: 40px; overflow: hidden; background: #fff; box-shadow: var(--shadow-phone); } .phone img { width: 100%; height: 100%; object-fit: cover; } .phone-sm { width: min(252px, 64vw); border-width: 8px; border-radius: 34px; } .phone-card { width: 220px; border-width: 8px; border-radius: 32px; box-shadow: var(--shadow-md); } /* les captures de MT Sound Quest sont en 620 x 1057 */ .ratio-mtsq { --ratio: 620 / 1057; } /* Le telephone de l'accroche fait se relayer quatre captures, en CSS seul : pas de script, donc rien a autoriser dans la politique de securite. Cycle de 20 s, 5 s par vue, fondu de 0,6 s. Les delais NEGATIFS mettent chaque vue a sa place du cycle des le premier instant : la premiere est visible tout de suite, les autres attendent leur tour sans s'empiler. */ .slides { position: absolute; inset: 0; } .slides img { position: absolute; inset: 0; opacity: 0; animation: relais 20s linear infinite; } .slides img:nth-child(1) { animation-delay: 0s; } .slides img:nth-child(2) { animation-delay: -15s; } .slides img:nth-child(3) { animation-delay: -10s; } .slides img:nth-child(4) { animation-delay: -5s; } @keyframes relais { 0% { opacity: 1; } 22% { opacity: 1; } 25% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .slides img { animation: none; opacity: 0; } .slides img:first-child { opacity: 1; } .app-card, .btn { transition: none; } } /* ------------------------------------------------------------------ sections d'une appli */ /* scroll-margin : le lien « Features » ne doit pas cacher le haut de la section sous l'en-tete collant */ .features { padding: 24px 0 40px; scroll-margin-top: 64px; } .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 36px 0; } .feature + .feature { border-top: 1px solid var(--line); } /* un panneau de couleur douce derriere chaque capture, une teinte par section, comme sur les visuels de la fiche */ .feature-shot { display: flex; justify-content: center; padding: 44px 24px; border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--t1), var(--t2)); } .feature-text { max-width: 30ch; } .feature-text h2 { margin-bottom: .35em; } .feature-text h2::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--ta); margin-bottom: 18px; } .feature-text p { font-size: 1.18rem; color: var(--ink-soft); margin: 0; } /* en alternance : la capture a gauche, puis a droite */ .feature:nth-child(even) .feature-shot { order: 2; } .t-peach { --t1: var(--peach-1); --t2: var(--peach-2); --ta: var(--peach-a); } .t-sage { --t1: var(--sage-1); --t2: var(--sage-2); --ta: var(--sage-a); } .t-sand { --t1: var(--sand-1); --t2: var(--sand-2); --ta: var(--sand-a); } .t-sky { --t1: var(--sky-1); --t2: var(--sky-2); --ta: var(--sky-a); } .t-lavender { --t1: var(--lavender-1); --t2: var(--lavender-2); --ta: var(--lavender-a); } .t-rose { --t1: var(--rose-1); --t2: var(--rose-2); --ta: var(--rose-a); } @media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 28px; padding: 28px 0; } .feature:nth-child(even) .feature-shot { order: 0; } .feature-text { max-width: none; text-align: center; } .feature-text h2::before { margin-left: auto; margin-right: auto; } .feature-shot { padding: 32px 16px; } } /* ------------------------------------------------------------------ appel final d'une appli */ .closing { padding: 64px 0 72px; text-align: center; } .closing img { width: 88px; height: 88px; border-radius: 22px; margin: 0 auto 22px; box-shadow: var(--shadow-sm); } .closing h2 { margin-bottom: 26px; } /* ------------------------------------------------------------------ pied */ .site-foot { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--ink-faint); font-size: .92rem; } .foot-in { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; } .foot-in > :first-child { margin-right: auto; } .site-foot a { color: var(--ink-soft); } .site-foot a:hover { color: var(--ink); } /* ------------------------------------------------------------------ texte long (confidentialite) */ .doc { padding: 56px 0 72px; } .doc .wrap { max-width: 760px; } .doc h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); margin-bottom: .3em; } .doc-meta { color: var(--ink-faint); font-size: .95rem; margin-bottom: 34px; } .doc h2 { font-size: 1.35rem; letter-spacing: -.012em; margin: 40px 0 12px; scroll-margin-top: 84px; } .doc p, .doc li { color: #3b3630; } /* l'essentiel, en tete, dans la teinte peche */ .doc-key { background: linear-gradient(180deg, var(--peach-1), #fbeee4); border: 1px solid #efd4bf; border-radius: var(--radius); padding: 20px 24px; font-size: 1.08rem; } .doc-key p { margin: 0; color: var(--ink); } .toc { margin: 30px 0 8px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; } .toc a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); text-decoration: none; font-size: .92rem; } .toc a:hover { color: var(--ink); border-color: #d9cfbf; } /* ------------------------------------------------------------------ 404 */ .lost { padding: 96px 0 120px; text-align: center; } .lost p { color: var(--ink-soft); font-size: 1.12rem; margin-bottom: 28px; }