/* Pitch & Roll — shared stylesheet for every page of the site. The site uses one design language (the tokens, gradient background, rounded "pill"/"card" surfaces and buttons below are shared) with a few per-page metrics. Page-specific values are scoped under a body class: .page-home — top-level landing (index.html) .page-cli — BoatTools landing .page-app — Thoosa landing .page-legal — privacy / legal pages .page-help — online help pages */ /* ---------- Design tokens ---------- */ :root { --blue-900:#08182f; --blue-800:#0b2746; --blue-700:#103a6b; --cyan:#2ec4d6; --cyan-soft:#93d5e6; --orange:#f5821f; --orange-700:#d96d12; --ink:#eaf4fb; --ink-dim:#a9c4d8; } /* ---------- Reset & base ---------- */ * { box-sizing:border-box; } /* Fond foncé sur : remplit les "safe areas" (encoche iPhone en paysage), sinon ces bandes restent blanches. */ html { background-color:var(--blue-900); } html, body { margin:0; padding:0; } body { font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background: radial-gradient(1200px 600px at 85% -10%, rgba(46,196,214,0.18), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(245,130,31,0.14), transparent 55%), linear-gradient(160deg, var(--blue-800), var(--blue-900)); min-height:100vh; } a { color:var(--cyan); } body.page-home, body.page-cli { line-height:1.55; } body.page-help { font-size:17px; } /* ---------- Shared components ---------- */ /* Rounded "pill" cards */ .pill { background:linear-gradient(180deg, rgba(16,58,107,0.55), rgba(11,39,70,0.65)); border:1px solid rgba(46,196,214,0.25); border-radius:26px; box-shadow:0 18px 50px rgba(0,0,0,0.35); } .pill h2 .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--orange); } /* Buttons */ .btns { display:flex; flex-wrap:wrap; gap:12px; } .btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:.98rem; padding:11px 18px; border-radius:999px; border:1.5px solid transparent; transition:transform .08s ease, filter .15s ease; } .btn:active { transform:translateY(1px); } .btn-orange { background:var(--orange); color:#1a0f02; } .btn-orange:hover { filter:brightness(1.07); } .btn-cyan { background:transparent; color:var(--cyan); border-color:var(--cyan); } .btn-cyan:hover { background:rgba(46,196,214,0.12); } /* Inline code */ code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:rgba(0,0,0,0.28); padding:1px 6px; border-radius:6px; color:var(--cyan-soft); } /* Footer */ footer { text-align:center; color:var(--ink-dim); font-size:.86rem; } footer a { text-decoration:none; } /* Top bar (Thoosa landing + legal) */ .topbar { font-size:.92rem; } .topbar a { text-decoration:none; color:var(--ink-dim); } .topbar a:hover { color:var(--cyan-soft); } /* Language selector (every page) */ nav.langs { font-size:.92rem; color:var(--ink-dim); } nav.langs a { text-decoration:none; } nav.langs a:hover { color:var(--cyan-soft); } nav.langs strong { color:var(--cyan-soft); } /* Outside the help header bar, it floats at the top right of the page. */ .wrap > nav.langs { position:absolute; top:18px; right:22px; } /* ==================================================================== Landing pages — home (index.html) and BoatTools (.page-cli) ==================================================================== */ .page-home h1 .accent, .page-cli h1 .accent { color:var(--orange); } /* --- Home --- */ .page-home .wrap { max-width:920px; margin:0 auto; padding:56px 20px 64px; } .page-home header { text-align:center; margin-bottom:46px; } .page-home .logo { width:104px; height:104px; margin:0 auto 16px; display:block; } .page-home h1 { font-size:clamp(1.5rem, 7.5vw, 2.8rem); margin:0 0 8px; letter-spacing:-0.5px; } .page-home .tagline { color:var(--cyan-soft); font-size:1.14rem; margin:0 auto; max-width:620px; } .page-home .pill { padding:30px 30px 34px; margin:26px 0; } .page-home .pill .head { display:flex; align-items:center; gap:16px; } .page-home .pill .head img { width:56px; height:56px; flex:none; } .page-home .pill h2 { margin:0; font-size:1.6rem; } .page-home .pill .sub { color:var(--ink-dim); margin:2px 0 0; font-size:.92rem; } .page-home .pill p.lead { color:var(--ink); margin:18px 0 22px; } .page-home footer { margin-top:44px; } /* --- BoatTools --- */ .page-cli .wrap { max-width:920px; margin:0 auto; padding:48px 20px 64px; } .page-cli header { text-align:center; margin-bottom:44px; } .page-cli .logo { width:96px; height:96px; margin:0 auto 14px; display:block; } .page-cli h1 { font-size:2.6rem; margin:0 0 6px; letter-spacing:-0.5px; } .page-cli .tagline { color:var(--cyan-soft); font-size:1.12rem; margin:0 auto 16px; max-width:640px; } .page-cli .badges img { height:22px; vertical-align:middle; margin:4px; } .page-cli .pill { padding:30px 30px 34px; margin:26px 0; } .page-cli .pill h2 { margin:0 0 4px; font-size:1.5rem; } .page-cli .pill .sub { color:var(--ink-dim); margin:0 0 18px; } .page-cli .pill p.lead { color:var(--ink); margin:0 0 22px; } .page-cli .pill ul { margin:0 0 22px; padding-left:1.1em; color:var(--ink-dim); } .page-cli .pill ul li { margin:3px 0; } .page-cli .btn small { font-weight:500; opacity:0.8; } .page-cli .note { color:var(--ink-dim); font-size:0.86rem; margin-top:16px; } .page-cli .note strong { color:var(--cyan-soft); } .page-cli .dev { color:var(--ink-dim); font-size:0.8rem; margin-top:10px; } .page-cli .dev a { color:var(--cyan); text-decoration:none; } .page-cli .dev a:hover { text-decoration:underline; } .page-cli footer { margin-top:40px; } .page-cli footer a { color:var(--cyan); } .page-cli footer a:hover { text-decoration:underline; } /* ==================================================================== Thoosa landing (.page-app) ==================================================================== */ .page-app .wrap { max-width:900px; margin:0 auto; padding:24px 20px 64px; } .page-app header { text-align:center; margin:26px 0 36px; } .page-app .logo { width:128px; height:128px; display:block; margin:0 auto 14px; } .page-app h1 { font-size:2.8rem; margin:0 0 6px; letter-spacing:-0.5px; } .page-app h1 .accent { color:var(--orange); } .page-app .tagline { color:var(--cyan-soft); font-size:1.14rem; max-width:600px; margin:0 auto 22px; } .page-app .btns { justify-content:center; } .page-app .btn { font-size:1rem; padding:12px 20px; } .page-app .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:14px; } .page-app .card { background:linear-gradient(180deg, rgba(16,58,107,0.55), rgba(11,39,70,0.65)); border:1px solid rgba(46,196,214,0.25); border-radius:22px; padding:22px 22px 24px; box-shadow:0 14px 40px rgba(0,0,0,0.32); } .page-app .card .glyph { font-size:1.7rem; } .page-app .card h3 { margin:8px 0 6px; font-size:1.15rem; } .page-app .card p { margin:0; color:var(--ink-dim); font-size:.95rem; } .page-app .help { text-align:center; margin-top:40px; padding:30px; background:linear-gradient(180deg, rgba(16,58,107,0.45), rgba(11,39,70,0.55)); border:1px solid rgba(46,196,214,0.22); border-radius:26px; } .page-app .help h2 { margin:0 0 6px; font-size:1.5rem; } .page-app .help p { color:var(--ink-dim); margin:0 0 18px; } .page-app .beta { text-align:center; margin:0 0 36px; padding:24px 26px; background:linear-gradient(180deg, rgba(245,130,31,0.16), rgba(245,130,31,0.06)); border:1px solid rgba(245,130,31,0.45); border-radius:22px; } .page-app .beta .badge { display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); border:1px solid rgba(245,130,31,0.55); border-radius:999px; padding:4px 12px; margin-bottom:12px; } .page-app .beta h2 { margin:0 0 8px; font-size:1.4rem; } .page-app .beta p { color:var(--ink-dim); margin:0 auto 18px; max-width:560px; } .page-app footer { margin-top:42px; } /* ==================================================================== Legal / privacy (.page-legal) ==================================================================== */ .page-legal .wrap { max-width:820px; margin:0 auto; padding:24px 20px 64px; } .page-legal header { text-align:center; margin:26px 0 30px; } .page-legal .logo { width:96px; height:96px; display:block; margin:0 auto 14px; } .page-legal h1 { font-size:2.2rem; margin:0 0 6px; letter-spacing:-0.5px; } .page-legal h1 .accent { color:var(--orange); } .page-legal .updated { color:var(--ink-dim); font-size:.92rem; } .page-legal .summary { background:linear-gradient(180deg, rgba(16,58,107,0.55), rgba(11,39,70,0.65)); border:1px solid rgba(46,196,214,0.25); border-radius:22px; padding:20px 24px; box-shadow:0 14px 40px rgba(0,0,0,0.32); margin:26px 0 8px; } .page-legal .summary h2 { margin:0 0 8px; font-size:1.15rem; } .page-legal .summary ul { margin:0; padding-left:20px; } .page-legal .summary li { margin:6px 0; color:var(--ink-dim); } .page-legal .summary strong { color:var(--ink); } .page-legal main h2 { font-size:1.35rem; margin:34px 0 8px; } .page-legal main h3 { font-size:1.08rem; margin:20px 0 4px; color:var(--cyan-soft); } .page-legal main p, .page-legal main li { color:var(--ink-dim); } .page-legal main ul { padding-left:22px; } .page-legal main li { margin:5px 0; } .page-legal footer { margin-top:46px; } /* ==================================================================== Online help (.page-help) ==================================================================== */ .page-help .wrap { max-width:880px; margin:0 auto; padding:40px 20px 64px; } /* Branded header, matching the hand-written site pages (centred logo + title). */ .page-help header { text-align:center; margin:8px 0 32px; } .page-help header .logo { width:104px; height:104px; display:block; margin:0 auto 12px; } .page-help header h1 { font-size:2.5rem; margin:0 0 6px; letter-spacing:-0.5px; } .page-help header h1 .accent { color:var(--orange); } .page-help header .tagline { color:var(--cyan-soft); max-width:620px; margin:0 auto; } .page-help .cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; } .page-help a.card { display:block; text-decoration:none; color:var(--ink); background:linear-gradient(180deg, rgba(16,58,107,0.55), rgba(11,39,70,0.65)); border:1px solid rgba(46,196,214,0.25); border-radius:22px; padding:22px 22px 24px; box-shadow:0 14px 40px rgba(0,0,0,0.32); transition:transform .1s ease, border-color .15s ease; } .page-help a.card:hover { transform:translateY(-3px); border-color:var(--cyan); } .page-help a.card .glyph { font-size:1.7rem; } .page-help a.card h2 { margin:8px 0 6px; font-size:1.2rem; } .page-help a.card p { margin:0; color:var(--ink-dim); font-size:.95rem; } .page-help article.pill { padding:8px 34px 30px; } .page-help article.pill h1 { font-size:2rem; } .page-help article.pill h2 { font-size:1.3rem; margin-top:1.7em; color:var(--cyan-soft); } .page-help article.pill p, .page-help article.pill li { color:var(--ink); } .page-help article.pill ul { padding-left:1.2em; } .page-help article.pill li { margin:.3em 0; } .page-help .btn { display:inline-block; margin-top:26px; text-decoration:none; font-weight:600; padding:10px 18px; border-radius:999px; border:1.5px solid var(--cyan); color:var(--cyan); } .page-help .btn:hover { background:rgba(46,196,214,0.12); } .page-help footer { margin-top:40px; } /* ============================================================ Vagabondages — composants supplémentaires ============================================================ */ /* Vidéo (héro Rick Allison, page médias) */ .media-video { width:100%; border-radius:18px; display:block; background:#000; box-shadow:0 18px 44px rgba(0,0,0,0.45); } .video-embed { width:100%; aspect-ratio:16/9; border:0; border-radius:18px; display:block; background:#000; box-shadow:0 18px 44px rgba(0,0,0,0.45); } /* Vignette vidéo cliquable (ouvre YouTube) — robuste, sans iframe */ .video-facade { position:relative; display:block; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#08182f center/cover no-repeat; box-shadow:0 18px 44px rgba(0,0,0,0.45); } .video-facade::before { content:""; position:absolute; inset:0; background:rgba(8,24,47,0.30); transition:background .15s ease; } .video-facade:hover::before { background:rgba(8,24,47,0.10); } .video-facade .play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; background:var(--orange); box-shadow:0 8px 24px rgba(0,0,0,0.45); display:grid; place-items:center; transition:transform .12s ease; } .video-facade:hover .play { transform:translate(-50%,-50%) scale(1.06); } .video-facade .play::before { content:""; margin-left:6px; border-style:solid; border-width:15px 0 15px 25px; border-color:transparent transparent transparent #1a0f02; } .video-note { color:var(--ink-dim); font-size:.95rem; margin:14px auto 0; max-width:620px; } .video-note a { color:var(--cyan); } /* Cartes vers les pages annexes (index) */ .annex { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:26px 0; } @media (max-width:680px){ .annex { grid-template-columns:1fr; } } .annex a { display:block; text-decoration:none; color:var(--ink); background:linear-gradient(180deg, rgba(16,58,107,0.55), rgba(11,39,70,0.65)); border:1px solid rgba(46,196,214,0.25); border-radius:20px; padding:22px; box-shadow:0 14px 40px rgba(0,0,0,0.3); transition:transform .1s ease, border-color .15s ease; } .annex a:hover { transform:translateY(-3px); border-color:var(--cyan); } .annex .glyph { font-size:1.6rem; } .annex h3 { margin:8px 0 4px; font-size:1.15rem; } .annex p { margin:0; color:var(--ink-dim); font-size:.92rem; } /* Photo héro (page voilier) + galerie (page médias) */ /* Photo hero — cadre qui rogne pour le zoom au survol */ .hero-frame { display:block; overflow:hidden; border-radius:18px; margin:6px 0; box-shadow:0 18px 44px rgba(0,0,0,0.45); } .hero-photo { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:0; display:block; transition:transform .5s ease; } .hero-frame:hover .hero-photo { transform:scale(1.05); } .gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0; } @media (max-width:560px){ .gallery { grid-template-columns:1fr; } } .gallery .ph { display:block; overflow:hidden; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.32); } .gallery img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:0; display:block; transition:transform .45s ease; } .gallery .ph:hover img { transform:scale(1.06); } .gallery figure { margin:0; } .gallery figcaption { color:var(--ink-dim); font-size:.85rem; margin-top:6px; } /* Tableau d'équipement (généré depuis equipements.xml) */ .equip h3 { color:var(--cyan-soft); font-size:1.1rem; margin:1.7em 0 .4em; } .equip table { width:100%; border-collapse:collapse; } .equip td { padding:7px 0; border-bottom:1px solid rgba(46,196,214,0.15); color:var(--ink); vertical-align:top; } .equip td.year { text-align:right; color:var(--ink-dim); white-space:nowrap; padding-left:16px; } /* Avis / témoignages */ .avis blockquote { margin:0 0 18px; padding:16px 20px; border-left:3px solid var(--orange); background:rgba(16,58,107,0.4); border-radius:0 14px 14px 0; } .avis blockquote p { margin:0 0 8px; color:var(--ink); } .avis blockquote cite { color:var(--cyan-soft); font-style:normal; font-size:.9rem; } /* Liens de téléchargement (brochures) */ .downloads { display:flex; flex-wrap:wrap; gap:12px; margin:18px 0; } .page-legal footer a, .page-home footer a { color:var(--cyan); text-decoration:none; } /* Section musique (playlist Spotify de Rick Allison) */ .music { margin:26px 0; } .music iframe { display:block; margin:16px 0 4px; } /* Ligne réseaux sociaux (page contact) */ .social { margin:18px 0 4px; color:var(--ink-dim); font-size:.95rem; } .social a { color:var(--cyan); text-decoration:none; font-weight:600; } .social a:hover { color:var(--cyan-soft); } /* Carte « Le voilier » cliquable (même effet que les cartes À découvrir) */ .page-home .pill-link { position:relative; display:block; color:inherit; text-decoration:none; transition:transform .1s ease, border-color .15s ease; } .page-home .pill-link:hover { transform:translateY(-3px); border-color:var(--cyan); } .page-home .pill-link .glyph { font-size:1.6rem; line-height:1; margin-bottom:6px; } .page-home .pill-link .more { color:var(--cyan); font-weight:600; margin:14px 0 0; } /* Lien principal « étendu » : rend toute la carte cliquable vers le voilier */ .page-home .pill-link .more a.stretched { color:var(--cyan); text-decoration:none; } .page-home .pill-link .more a.stretched::after { content:""; position:absolute; inset:0; z-index:1; } /* Tagline d'accueil sur deux lignes, comme l'og (ligne 2 en italique léger) */ .page-home .tagline .tagline-sub { display:inline-block; font-style:italic; font-size:.9em; opacity:.82; margin-top:4px; } /* Paragraphe d'intro (entre la photo et la carte « Le voilier »), sans carte */ .page-home .intro { color:var(--ink); font-size:1.06rem; line-height:1.65; max-width:780px; margin:14px auto 24px; text-align:center; } /* Symbole en tête d'un pavé simple (ex. « Avec Stéphane »), comme la carte voilier */ .page-home .pill > .glyph { font-size:1.6rem; line-height:1; margin-bottom:6px; } /* Icône image « capitaine » en tête du pavé skipper (même taille que les emojis des autres cartes) */ .page-home .pill .skipper-icon { height:1.7rem; width:auto; display:block; margin-bottom:6px; } /* Galerie drone : 1 photo portrait verticale + 3 paysages empilés à côté */ .drone-grid { display:flex; gap:12px; align-items:stretch; margin:20px 0; } .drone-grid > div { flex:1; min-width:0; } .drone-grid .dg-stack { display:flex; flex-direction:column; gap:12px; } .drone-grid .dg-cell { overflow:hidden; border-radius:14px; aspect-ratio:16/10; box-shadow:0 10px 30px rgba(0,0,0,0.32); } .drone-grid .dg-cell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; } .drone-grid .dg-cell:hover img { transform:scale(1.06); } .drone-grid .dg-portrait { display:block; overflow:hidden; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,0.32); } .drone-grid .dg-portrait img { width:100%; height:100%; object-fit:cover; border-radius:0; display:block; transition:transform .5s ease; } .drone-grid .dg-portrait:hover img { transform:scale(1.05); } @media (max-width:560px){ .drone-grid { flex-direction:column; } .drone-grid .dg-portrait img { height:auto; aspect-ratio:3/4; } } /* Caractéristiques (page voilier) — liste simple, groupes séparés par un espace */ .specs ul { margin:0 0 14px; padding-left:1.25em; } .specs ul:last-child { margin-bottom:0; } .specs li { margin:6px 0; color:var(--ink); } .specs li::marker { color:var(--cyan); } /* Schéma / diagramme SVG pleine largeur (ne pas rogner) */ .diagram { width:100%; height:auto; aspect-ratio:760/510; display:block; margin:18px 0; } /* Plan d'aménagement (page voilier) — cadre blanc type document */ .plan-photo { width:100%; height:auto; display:block; border-radius:14px; background:#fff; padding:10px; margin:8px 0 4px; box-shadow:0 14px 40px rgba(0,0,0,0.32); } /* Révision d'un équipement (page voilier) — petit, avant l'année */ .equip .rev { font-size:.78em; color:var(--ink-dim); white-space:nowrap; } /* Croisières / destinations (index) */ .page-home .cruises-sub { text-align:center; color:var(--cyan-soft); margin:2px auto 0; max-width:640px; } .page-home .dest-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0 0; } @media (max-width:720px){ .page-home .dest-grid { grid-template-columns:1fr; } } .page-home .dest { position:relative; overflow:hidden; border-radius:20px; min-height:240px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 14px 40px rgba(0,0,0,0.35); } .page-home .dest > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .45s ease; } .page-home .dest:hover > img { transform:scale(1.07); } @media (hover:none){ .page-home .dest:hover > img { transform:none; } } .page-home .dest::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,24,47,0) 28%, rgba(8,24,47,0.55) 58%, rgba(8,24,47,0.92) 100%); } .page-home .dest .dest-body { position:relative; z-index:2; padding:16px 18px; } .page-home .dest h3 { margin:0 0 5px; font-size:1.2rem; color:#fff; } .page-home .dest p { margin:0; color:rgba(255,255,255,0.9); font-size:.9rem; line-height:1.45; } /* Ruban d'angle « La plus demandée » — comme le « Unique » de Croisière privative */ .page-home .dest--top { outline:2px solid var(--orange); outline-offset:-2px; } .page-home .dest .ribbon { position:absolute; top:16px; right:-46px; transform:rotate(45deg); z-index:3; background:var(--orange); color:#1a0f02; text-transform:uppercase; font-size:.66rem; font-weight:800; letter-spacing:.08em; padding:5px 50px; box-shadow:0 4px 12px rgba(0,0,0,.28); } .page-home .cruises-more { text-align:center; color:var(--ink-dim); margin:22px auto 0; max-width:660px; } /* Lien secondaire sous la carte « Le voilier » (vers la page Médias) */ .page-home .pill-extra { position:relative; z-index:2; margin:6px 0 0; } .page-home .pill-extra a { color:var(--cyan); font-weight:600; text-decoration:none; } .page-home .pill-extra a:hover { color:var(--cyan-soft); }