/* * ---------------------------------------------------- * styles.css : Design Premium Minimal – Jolan Dmt (Voyages & Workshops) * ---------------------------------------------------- */ /* Reset & fondations */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } html:focus-within { scroll-behavior: smooth; } body { min-height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Variables (clair par défaut) */ :root{ --brand:#0E3F43; /* Bleu pétrole – identité */ --brand-ink:#093135; --accent:#B89B5E; /* Or doux – premium */ --bg:#ffffff; --bg-alt:#f7f9fa; --ink:#1F2427; --muted:#66707a; --border:#E6EBEF; --card:#ffffff; --shadow: 0 8px 24px rgba(0,0,0,.08); --font:"Raleway", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; --fs-hero: clamp(2rem, 2rem + 2vw, 3.25rem); --fs-h2: clamp(1.35rem, 1.1rem + 1vw, 2rem); --fs-h3: clamp(1.05rem, 0.95rem + .6vw, 1.25rem); --fs-body: 1rem; --fs-small:.92rem; --ease: cubic-bezier(.22,.61,.36,1); } /* Dark mode (.dark-mode sur ) */ .dark-mode{ --bg:#0c0f10; --bg-alt:#111518; --ink:#E7ECEF; --muted:#A5B0BA; --border:#1e262b; --card:#12161a; --shadow: 0 8px 28px rgba(0,0,0,.35); --brand:#5AC0C7; --brand-ink:#7DD3D9; --accent:#D9C28D; } /* Logo */ #site-logo{ filter: none; transition: filter .2s ease; } .dark-mode #site-logo{ filter: invert(1) brightness(1.1) contrast(1.05); } /* Typo */ body{ font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.7; letter-spacing:.01em; transition: background-color .4s var(--ease), color .4s var(--ease); } h1,h2,h3{ color: var(--brand); font-weight: 700; line-height: 1.15; margin: .2em 0 .35em 0; } h1{ font-size: var(--fs-hero); letter-spacing: -.01em; } h2{ font-size: var(--fs-h2); } h3{ font-size: var(--fs-h3); font-weight:600; } p,li{ font-size: var(--fs-body); color: var(--ink); } .small{ font-size: var(--fs-small); color: var(--muted); } strong{ color: var(--brand-ink); } /* Containers & layout */ .container{ width: min(1120px, 92%); margin: 0 auto; } .section{ padding: clamp(48px, 6vw, 96px) 0; } hr{ border:0; height:1px; background: var(--border); width: min(820px,90%); margin: 36px auto; } /* Header/Nav */ .navbar{ position: sticky; top:0; z-index:50; backdrop-filter: saturate(1.2) blur(6px); background: rgba(255,255,255,0.86); border-bottom: 1px solid var(--border); } .dark-mode .navbar{ background: rgba(12,15,16,0.86); } .navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 12px 0; } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; } .brand img{ width:40px; height:40px; border-radius:12px; display:block; } .brand span{ font-weight:800; letter-spacing:.02em; color: var(--ink); } .nav-actions{ display:flex; align-items:center; gap:8px; } .icon-btn{ border: 1px solid var(--border); background: var(--card); border-radius: 12px; height:40px; width:40px; display:grid; place-items:center; cursor:pointer; transition: transform .15s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.02); } .icon-btn:active{ transform: scale(.98); } .icon{ font-size: 18px; line-height:1; } .theme-sun{ display:none; } .dark-mode .theme-moon{ display:none; } .dark-mode .theme-sun{ display:inline; } /* HERO */ .hero{ position: relative; min-height: 68vh; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; z-index: 0; } .hero::before{ content:""; position:absolute; inset:0; background: url('assets/images/lofoten/hero.webp') center/cover no-repeat; z-index: -2; } .hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.45)); z-index: -1; } .hero-content{ position:relative; z-index:1; padding: 64px 0; } .hero p{ color:#f0f4f6; max-width: 60ch; margin: 8px auto 0; } /* Countdown */ .countdown{ display:flex; justify-content:center; gap: clamp(10px,3vw,22px); margin: 26px auto 0; padding: 10px 14px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; } .cd-item{ min-width: 90px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .cd-val{ font-size: clamp(1.6rem, .9rem + 1.6vw, 2.4rem); font-weight:800; letter-spacing:.02em; } .cd-lab{ font-size:.9rem; opacity:.9; } /* Buttons */ .btn{ display:inline-block; text-decoration:none; padding: 14px 22px; border-radius: 999px; border: 1px solid rgba(14,63,67,0.4); background: linear-gradient(180deg, var(--brand), var(--brand)); color: #fff; font-weight:800; letter-spacing:.02em; box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .3s var(--ease), opacity .2s var(--ease); } .btn:hover{ transform: translateY(-2px); } .btn.secondary{ border-color: rgba(184,155,94,0.5); background: linear-gradient(180deg, var(--accent), var(--accent)); } .btn.ghost{ background: var(--card); color: var(--ink); border-color: var(--border); box-shadow: none; } /* Key details */ .details{ display:grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); margin-top: 18px; } .detail{ background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); } .detail strong{ display:block; margin-bottom:6px; color: var(--brand); } /* Timeline */ .timeline{ position:relative; margin-left: 8px; border-left: 2px solid var(--border); padding-left: 20px; } .tl{ position:relative; padding: 12px 0 26px 10px; } .tl::before{ content:""; position:absolute; left:-28px; top: 10px; width: 14px; height: 14px; border-radius:50%; background: var(--brand); border: 4px solid var(--bg); } .dark-mode .tl::before{ border-color: var(--bg); } .tl img{ width:100%; height:auto; border-radius: 12px; margin-top: 12px; box-shadow: var(--shadow); } /* Image grid */ .grid{ display:grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 16px; } .grid img{ width:100%; height: 240px; object-fit:cover; border-radius: 12px; filter: saturate(1.02); transition: transform .4s var(--ease), filter .3s var(--ease), opacity .3s var(--ease); opacity:.98; } .grid img:hover{ transform: scale(1.02); opacity:1; } /* Pricing */ .price{ display:grid; place-items:center; gap:6px; text-align:center; margin: 10px 0 22px; } .price .value{ font-size: clamp(2.4rem, 2rem + 2vw, 4rem); font-weight: 900; color: var(--accent); line-height: .95; } .price .hint{ color: var(--muted); } /* CTA section */ .cta{ text-align:center; } .note a{ color: var(--brand); text-underline-offset: 3px; } .note a:hover{ text-decoration: underline; } /* Footer */ footer{ border-top:1px solid var(--border); background: var(--bg-alt); padding: 24px 0; margin-top: 40px; color: var(--muted); font-size: .95rem; } footer a{ color: inherit; text-decoration: none; } footer a:hover{ color: var(--brand); } /* Ligne “footline” (© + liens légaux sur une ligne) */ footer .footline{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:0; } footer .footline a{ color:inherit; white-space:nowrap; } footer .footline a:hover{ color: var(--brand); text-decoration: underline; } footer .footline .sep{ color: var(--muted); user-select: none; } /* Fade-in on scroll */ .fade{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .fade.is-visible{ opacity:1; transform: translateY(0); } /* Accessibilité & motion */ @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } } /* Roadbook */ #roadmap .tl img{ width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: var(--shadow); } @media (min-width: 1024px){ #roadmap .tl img{ max-width: clamp(520px, 60vw, 880px); margin-inline: auto; } #roadmap .tl img.portrait{ max-height: 78vh; width: auto; } } /* Galerie */ #galerie .grid img.contain{ object-fit: contain; background: var(--card); } @media (min-width: 1024px){ #galerie .grid img{ height: 200px; } } /* Responsive tweaks */ @media (max-width: 768px){ .cd-item{ min-width: 78px; } .navbar-inner{ padding: 10px 0; } .brand span{ display:none; } } /* Callout adaptatif */ .callout{ --bg: #e0f7fa; --bd: #0056b3; --ink: #0e1113; background: var(--bg); border: 2px solid var(--bd); border-radius: 12px; padding: 15px; margin-bottom: 20px; color: var(--ink); } .dark-mode .callout{ --bg: #10242a; --bd: #2b91b3; --ink: #eaf4f6; } .callout :is(p, li, ol, strong, a){ color: var(--ink); }