/* mariage — l'île de Saint-Martin. Feuille de style propre au projet. Plan : moments · base · primitives · carte · tables · habillage · barre · feuille · visionneuse · accueil · Leaflet. */ /* ---------- Moments : la seule définition de leurs couleurs ---------- .m- sur règle la lumière de la carte ; sur une pastille ou une image factice, il colore l'élément. Les couleurs de la mer et de la terre sont enregistrées pour pouvoir s'animer d'un moment à l'autre. */ @property --mer-haut { syntax: ""; inherits: true; initial-value: #57bfcc; } @property --mer-bas { syntax: ""; inherits: true; initial-value: #2f9fb4; } @property --terre { syntax: ""; inherits: true; initial-value: #f3e2b6; } @property --terre-bord { syntax: ""; inherits: true; initial-value: #b99456; } /* la lumière suit l'heure : crépuscule de la veille, matin pâle, plein soleil de la mairie, or de l'église, coucher de soleil du vin d'honneur, heure bleue du repas, nuit de la soirée, lendemain lavé de soleil */ .m-tout { --mer-haut: #57bfcc; --mer-bas: #2f9fb4; --terre: #f3e2b6; --terre-bord: #b99456; --accent: #2f9fb4; } .m-veille { --mer-haut: #8f86b8; --mer-bas: #4f5d93; --terre: #e9cfb4; --terre-bord: #8a6a74; --accent: #6a6aa0; } .m-preparation { --mer-haut: #b7e3e4; --mer-bas: #7fc9d3; --terre: #fbeedb; --terre-bord: #d3a58f; --accent: #d99a86; } .m-mairie { --mer-haut: #41c7d3; --mer-bas: #129bb5; --terre: #fff4d1; --terre-bord: #c9a24d; --accent: #1aa2b8; } .m-eglise { --mer-haut: #4fb9c2; --mer-bas: #22879f; --terre: #f6dfa6; --terre-bord: #b8923f; --accent: #c9a13f; } .m-vin { --mer-haut: #f0a57a; --mer-bas: #8a5a8f; --terre: #f3c48e; --terre-bord: #9a5a3c; --accent: #c0605a; } .m-repas { --mer-haut: #5d5f9e; --mer-bas: #262a5a; --terre: #585878; --terre-bord: #a39ac6; --accent: #5d5f9e; } .m-soiree { --mer-haut: #1d3557; --mer-bas: #0b1a30; --terre: #33415a; --terre-bord: #6d7f9e; --accent: #1d3557; } .m-lendemain { --mer-haut: #9ddde0; --mer-bas: #5dbccb; --terre: #fcf3dc; --terre-bord: #c7a86a; --accent: #4f9fae; } /* repas et soirée : les tables s'allument et l'habillage passe en sombre */ body.m-repas, body.m-soiree { --halo: rgba(255, 214, 120, 0.85); --etiquette: #fdf3d8; --etiquette-fond: rgba(15, 25, 45, 0.7); --verre: rgba(20, 30, 50, 0.88); } /* ---------- Base ---------- */ :root { --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --papier: #fffdf7; --encre: #3b2f22; --encre-douce: #6f5c45; --rouge: #b3261e; --verre: rgba(255, 252, 244, 0.9); --halo: rgba(255, 255, 255, 0); --etiquette: #3b2f22; --etiquette-fond: rgba(255, 250, 238, 0.85); --ombre: 0 4px 16px rgba(20, 20, 40, 0.18); --haut: max(10px, env(safe-area-inset-top)); --bas: env(safe-area-inset-bottom); color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; overflow: hidden; } body { color: var(--encre); font: 16px/1.5 var(--serif); background: var(--mer-bas); -webkit-tap-highlight-color: transparent; } a { color: var(--rouge); } /* ---------- Primitives réutilisées ---------- */ .verre { background: var(--verre); color: var(--etiquette); box-shadow: var(--ombre); transition: background 0.6s ease, color 0.6s ease; } .bouton { display: inline-block; padding: 0.6rem 1rem; border: 0; border-radius: 999px; background: var(--rouge); color: #fff; font: 600 0.85rem/1.2 var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 4px 14px rgba(120, 20, 10, 0.3); } .rond { width: 38px; height: 38px; border: 0; border-radius: 50%; font: 600 1rem/1 var(--sans); cursor: pointer; } .fermer { flex: 0 0 auto; width: 40px; height: 40px; border: 0; background: none; color: inherit; font-size: 1.8rem; line-height: 1; cursor: pointer; } .amp { font-style: italic; color: var(--rouge); } /* photo factice : le fond vient du moment de la photo */ .factice { background: linear-gradient(135deg, var(--mer-haut), var(--accent)); } /* pastille d'un moment, dans ses couleurs */ .pastille { padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.7rem; } /* ---------- Carte ---------- */ .carte { position: fixed; inset: 0; transition: --mer-haut 0.9s ease, --mer-bas 0.9s ease, --terre 0.9s ease, --terre-bord 0.9s ease; } .carte.leaflet-container { font: inherit; background: var(--mer-bas); } .ciel { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 90% 70% at 50% 35%, var(--mer-haut), transparent 75%), linear-gradient(180deg, var(--mer-haut), var(--mer-bas)); } .terre { fill: var(--terre); fill-opacity: 1; stroke: var(--terre-bord); stroke-width: 1.5; stroke-linejoin: round; } /* halo clair autour de la côte, dessiné sous la terre (pas de filtre CSS : il serait recalculé sur toute la surface du SVG à chaque image) */ .ressac { fill: none; stroke: rgba(255, 255, 255, 0.3); stroke-width: 9; stroke-linejoin: round; } /* la frontière : un trait de la couleur de la terre efface la jonction des deux polygones, puis un pointillé la dessine */ .frontiere-fond { fill: none; stroke: var(--terre); stroke-width: 3; } .frontiere { fill: none; stroke: var(--terre-bord); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; opacity: 0.8; } .nom-mer { font-size: 13px; font-style: italic; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; color: rgba(255, 255, 255, 0.55); pointer-events: none; transform: translate(-50%, -50%); } /* ---------- Tables ---------- Le repère Leaflet fait 0 × 0 px et se trouve pile sur le lieu ; tout est placé autour de ce point. --r (rayon) vient de app/tables.js. */ .pin { position: absolute; left: 0; top: 0; } .pin-pile { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); padding: 0; border: 2px solid var(--papier); border-radius: 50%; background: var(--rouge); box-shadow: 0 1px 4px rgba(30, 20, 10, 0.4), 0 0 14px var(--halo); transform: translate(-50%, -50%); transition: transform 0.2s ease, box-shadow 0.6s ease; } /* de loin : un point, le nombre de photos est dans l'étiquette */ .pin-pile img, .pin-nb { display: none; } /* de près : un polaroïd en pile */ .pres .pin:not(.vide) .pin-pile { padding: 3px; border: 0; border-radius: 6px; background: var(--papier); box-shadow: 0 3px 10px rgba(30, 20, 10, 0.35), 0 0 16px var(--halo); transform: translate(-50%, -50%) rotate(-4deg); } .pres .pin:not(.vide) .pin-pile::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px; background: var(--papier); box-shadow: 0 2px 6px rgba(30, 20, 10, 0.25); transform: rotate(9deg); } /* leaflet.css impose width:auto aux images des repères : on reprend la main */ .pres .leaflet-marker-pane .pin-pile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; } .pres .pin-nb { display: block; position: absolute; top: -9px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--rouge); color: #fff; font: 600 10.5px/19px var(--sans); text-align: center; } .pin-nom { position: absolute; left: 0; top: 0; padding: 1px 7px; border-radius: 999px; background: var(--etiquette-fond); color: var(--etiquette); font-size: 12.5px; font-style: italic; line-height: 18px; white-space: nowrap; transition: background 0.6s ease, color 0.6s ease; } .pin-compte { margin-left: 5px; font: 600 10.5px/1 var(--sans); color: var(--rouge); } .pin-compte:empty, .pres .pin-compte { display: none; } /* position du nom, choisie par app/tables.js pour éviter les chevauchements */ .etiq-bas .pin-nom { transform: translate(-50%, calc(var(--r) + 3px)); } .etiq-haut .pin-nom { transform: translate(-50%, calc(-100% - var(--r) - 3px)); } .etiq-droite .pin-nom { transform: translate(calc(var(--r) + 5px), -50%); } .etiq-gauche .pin-nom { transform: translate(calc(-100% - var(--r) - 5px), -50%); } .etiq-cachee .pin-nom { visibility: hidden; } .pin:hover .pin-pile, .pin.actif .pin-pile { transform: translate(-50%, -50%) scale(1.15); } .pin.actif .pin-nom, .pin-maries .pin-nom { background: var(--rouge); color: #fff; } .pin.actif .pin-compte, .pin-maries .pin-compte { color: #fff; } /* table sans photo à ce moment-là : un point pâle */ .pin.vide .pin-pile { border: 0; background: var(--terre-bord); box-shadow: none; } .pin.vide .pin-nom { opacity: 0.6; } .pres .pin-maries .pin-pile, .pres .pin-maries .pin-pile img { border-radius: 50%; } .pres .pin-maries .pin-pile { transform: translate(-50%, -50%); } .pres .pin-maries .pin-pile::before { display: none; } /* ---------- Habillage fixe ---------- */ .entete { position: fixed; top: var(--haut); left: 12px; z-index: 500; max-width: calc(100% - 160px); /* place des boutons « ? » et « Album » */ padding: 0.4rem 0.8rem 0.45rem; border-radius: 14px; } .titre { margin: 0; font-size: 1.05rem; line-height: 1.2; } .quand { margin: 0.1rem 0 0; font: 0.74rem/1.3 var(--sans); opacity: 0.8; } .actions { position: fixed; top: var(--haut); right: 12px; z-index: 500; display: flex; gap: 8px; align-items: center; } .rose { position: fixed; left: 14px; bottom: calc(96px + var(--bas)); z-index: 450; width: 52px; height: 52px; overflow: visible; pointer-events: none; opacity: 0.85; } .rose circle { fill: none; stroke: var(--terre-bord); stroke-width: 1.5; } .rose-branche { fill: var(--papier); stroke: var(--encre); stroke-width: 1; } .rose-plein { fill: var(--encre); } .rose text { font: 10px var(--serif); fill: var(--rouge); } /* ---------- Barre des moments, groupés par jour ---------- */ .moments { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; gap: 6px; padding: 8px 8px calc(12px + var(--bas)); overflow-x: auto; scrollbar-width: none; background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent); } .moments::-webkit-scrollbar { display: none; } .groupe { display: flex; flex-direction: column; gap: 3px; } .groupe-large { flex: 1; } /* le jour à plusieurs moments prend la place libre */ .groupe-jour { font: 600 0.62rem/1 var(--sans); letter-spacing: 0.04em; text-align: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .groupe-boutons { display: flex; gap: 4px; } .moment { flex: 1 0 36px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 5px; border: 0; border-radius: 11px; background: var(--verre); color: var(--etiquette); font: 600 0.6rem/1.1 var(--sans); white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px rgba(20, 20, 40, 0.15); transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease; } .moment svg { width: 24px; height: 17px; } .moment.actif { background: var(--rouge); color: #fff; transform: translateY(-2px); } /* ---------- Feuille : les photos d'une table ---------- */ .feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; padding: 14px 0 calc(16px + var(--bas)); border-radius: 20px 20px 0 0; background: var(--papier); box-shadow: 0 -8px 30px rgba(20, 20, 40, 0.3); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .feuille[hidden] { display: block; transform: translateY(110%); } .feuille-tete { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 10px 10px 16px; } .feuille h2 { margin: 0; font-size: 1.45rem; font-weight: 400; line-height: 1.2; } .feuille p { margin: 0.15rem 0 0; font: 0.85rem/1.3 var(--sans); color: var(--encre-douce); } .feuille .fermer { margin-top: -6px; } .bande { display: flex; gap: 12px; padding: 4px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .bande::-webkit-scrollbar { display: none; } .bande-vide { padding: 0.5rem 0; } .vignette { flex: 0 0 auto; width: 150px; padding: 6px 6px 0; border: 0; background: #fff; box-shadow: 0 2px 8px rgba(30, 20, 10, 0.18); font: inherit; text-align: left; cursor: zoom-in; scroll-snap-align: start; } .vignette img { display: block; width: 100%; height: 170px; object-fit: cover; } .vignette-bas { display: flex; align-items: center; gap: 6px; padding: 5px 2px 7px; font: 0.78rem/1.2 var(--sans); } .vignette time { font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- Visionneuse ---------- */ .visionneuse { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 16px; border: 0; background: rgba(12, 10, 8, 0.95); color: #f4ead5; text-align: center; } .visionneuse[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; } .visionneuse img { max-width: 100%; max-height: 78vh; object-fit: contain; touch-action: pan-y; user-select: none; } .v-legende { margin: 0.8rem 0 0; font-style: italic; } .visionneuse .fermer { position: absolute; top: var(--haut); right: 10px; } .v-nav { position: absolute; top: 50%; width: 44px; height: 64px; margin-top: -32px; border: 0; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 2rem; cursor: pointer; } .v-prec { left: 4px; border-radius: 0 10px 10px 0; } .v-suiv { right: 4px; border-radius: 10px 0 0 10px; } .v-nav:disabled { opacity: 0.2; cursor: default; } /* ---------- Accueil ---------- */ .accueil { position: fixed; inset: 0; z-index: 700; display: grid; place-items: center; padding: 20px; background: rgba(10, 40, 55, 0.45); backdrop-filter: blur(3px); transition: opacity 0.4s ease, visibility 0.4s; } .accueil.parti { opacity: 0; visibility: hidden; } .accueil-carte { max-width: 400px; max-height: 100%; overflow-y: auto; padding: 1.5rem 1.4rem 1.4rem; border-radius: 18px; background: var(--papier); text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } .kicker { margin: 0; font: 600 0.75rem/1 var(--sans); letter-spacing: 0.25em; text-transform: uppercase; color: var(--rouge); } .accueil h1 { margin: 0.4rem 0 0.7rem; font-size: 2rem; font-weight: 400; line-height: 1.15; } .accueil p { margin: 0 0 0.8rem; } .accueil-etapes { margin: 0 0 1rem; padding-left: 1.2rem; font: 0.88rem/1.45 var(--sans); color: var(--encre-douce); text-align: left; } .accueil-etapes li + li { margin-top: 0.4rem; } .accueil-etapes strong { color: var(--encre); } /* ---------- Leaflet ---------- */ .leaflet-control-attribution { margin-bottom: calc(84px + var(--bas)) !important; background: rgba(255, 255, 255, 0.6) !important; font: 10px/1.4 var(--sans); } @media (prefers-reduced-motion: reduce) { .carte, .verre, .feuille, .accueil, .pin-pile, .moment { transition: none; } }