/* Frère Magnus — Static launch page Stack: HTML/CSS/JS vanilla (no deps) Design: forest dark + cream + gold accents */ :root { /* Art direction: apothicaire moderne (masculin, sombre, “matière”) */ --bg: #0b120d; /* noir-vert profond */ --bg-2: #0f1a12; /* vert forêt */ --bg-3: #121f17; /* relief */ --paper: #f5f0e8; /* écru */ --text: rgba(245, 240, 232, 0.92); --muted: rgba(245, 240, 232, 0.72); --faint: rgba(245, 240, 232, 0.52); /* Accents (vert sauge + or discret) */ --aqua: #8fd0aa; --aqua-2: #2f8b63; --gold: rgba(216, 180, 90, 0.70); /* secondaire, discret */ --gold-2: rgba(185, 147, 63, 0.65); --mint: rgba(143, 208, 170, 0.55); --border: rgba(245, 240, 232, 0.12); --border-2: rgba(245, 240, 232, 0.06); --shadow: 0 20px 60px rgba(0, 0, 0, 0.55); --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.32); --radius: 18px; --radius-2: 26px; --max: 1120px; --pad: clamp(18px, 4vw, 38px); /* Typography (no external fonts) */ --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial; /* Scale */ --s-1: 10px; --s0: 12px; --s1: 14px; --s2: 16px; --s3: 18px; --s4: 22px; --s5: 28px; --s6: 44px; /* Spacing system (ajuste la “densité” ici) */ --section-pad: 52px; --section-head-gap: 18px; --grid-gap: 12px; --hero-top: 32px; --cta-gap: 10px; --badges-top: 14px; --footer-top: 24px; } /* Mode plus compact (si besoin): ajoute class="dense" sur */ body.dense { --section-pad: 44px; --section-head-gap: 14px; --grid-gap: 10px; --hero-top: 24px; --cta-gap: 8px; --badges-top: 10px; --footer-top: 18px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: radial-gradient(900px 620px at 78% -12%, rgba(143, 208, 170, 0.12), transparent 60%), radial-gradient(760px 520px at 18% 8%, rgba(143, 208, 170, 0.08), transparent 58%), radial-gradient(820px 540px at 92% 22%, rgba(143, 208, 170, 0.10), transparent 62%), radial-gradient(720px 520px at 40% 110%, rgba(216, 180, 90, 0.03), transparent 55%), linear-gradient(180deg, var(--bg) 0%, #070d09 100%); color: var(--text); font-family: var(--sans); line-height: 1.55; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0.10; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); } /* --- Aurora mouse glow (desktop avec souris uniquement) --------------------- */ .bg-aurora { display: none; /* caché par défaut, activé seulement desktop */ position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } @media (pointer: fine) and (hover: hover) { .bg-aurora { display: block; } } .bg-aurora__a, .bg-aurora__b { position: absolute; top: 0; left: 0; border-radius: 50%; will-change: transform; contain: strict; } .bg-aurora__a { width: 500px; height: 500px; margin: -250px 0 0 -250px; background: radial-gradient(circle, rgba(143, 208, 170, 0.11) 0%, transparent 70%); filter: blur(55px); } .bg-aurora__b { width: 360px; height: 360px; margin: -180px 0 0 -180px; background: radial-gradient(circle, rgba(216, 180, 90, 0.07) 0%, transparent 70%); filter: blur(50px); } /* --- Signature brand layer (monogram + grid) ------------------------------- */ .scene { position: relative; overflow-x: hidden; } .scene::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: soft-light; background: /* subtle grid */ linear-gradient(rgba(245,240,232,0.05) 1px, transparent 1px) 0 0 / 52px 52px, linear-gradient(90deg, rgba(245,240,232,0.04) 1px, transparent 1px) 0 0 / 52px 52px; mask-image: radial-gradient(520px 340px at 18% 18%, black 25%, transparent 70%); } .scene::after { content: ""; position: absolute; right: -6%; top: -10%; width: min(520px, 72vw); height: min(520px, 72vw); pointer-events: none; opacity: 0.08; background: url("img/logo-blue.png") center / contain no-repeat; filter: saturate(0.7) contrast(1.05); transform: rotate(-8deg); } .divider { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } .divider__line { height: 1px; background: linear-gradient(90deg, transparent, rgba(143,208,170,0.32), rgba(245,240,232,0.10), transparent); } .divider__sig { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; color: rgba(245,240,232,0.55); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; } .divider__dot { width: 4px; height: 4px; border-radius: 999px; background: rgba(143,208,170,0.70); box-shadow: 0 0 0 5px rgba(143,208,170,0.09); } .seal { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(245,240,232,0.12); background: rgba(0,0,0,0.20); } .seal__mark { width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(245,240,232,0.10); background: rgba(0,0,0,0.25); padding: 6px; object-fit: contain; } .seal__txt { display: grid; gap: 2px; } .seal__t { font-family: var(--serif); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; } .seal__s { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,240,232,0.55); } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } .skip { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip:focus { left: 16px; top: 16px; width: auto; height: auto; padding: 10px 12px; background: #0b1510; border: 1px solid var(--border); z-index: 9999; } /* Header / nav */ .header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: rgba(11, 18, 13, 0.62); border-bottom: 1px solid var(--border-2); } .nav { max-width: var(--max); margin: 0 auto; padding: 14px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .brand { display: grid; gap: 2px; } .brand__row { display: flex; align-items: center; gap: 10px; } .brand__logo { width: 34px; height: 34px; border-radius: 12px; border: 1px solid var(--border-2); background: rgba(0, 0, 0, 0.22); padding: 6px; object-fit: contain; } .brand__stack { display: grid; gap: 2px; } .brand__name { font-family: var(--serif); letter-spacing: 0.18em; text-transform: uppercase; font-size: 13px; opacity: 0.95; } .brand__tag { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); } .nav__toggle { display: none; -webkit-tap-highlight-color: transparent; appearance: none; border: 1px solid rgba(143, 208, 170, 0.18); background: rgba(0, 0, 0, 0.18); color: var(--text); border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.06) inset; cursor: pointer; } .nav__toggle:focus-visible { outline: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(143, 208, 170, 0.18), 0 0 0 1px rgba(255,255,255,0.06) inset; } .nav__toggleIcon { display: block; width: 18px; height: 12px; position: relative; } .nav__toggleIcon::before, .nav__toggleIcon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 999px; background: rgba(245, 240, 232, 0.86); transition: transform 200ms ease, top 200ms ease; } .nav__toggleIcon::before { top: 2px; } .nav__toggleIcon::after { top: 8px; } .nav__links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .nav__links a { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 10px 10px; border-radius: 12px; } .nav__links a:hover { color: var(--text); background: rgba(245, 240, 232, 0.04); } /* Nav mobile: hamburger */ @media (max-width: 740px) { .nav { display: grid; grid-template-columns: 1fr auto; align-items: center; justify-content: initial; gap: 12px; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; } .nav__links { display: none; grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; border-radius: 16px; border: 1px solid var(--border-2); background: rgba(0, 0, 0, 0.18); } .nav.is-open .nav__links { display: flex; } .nav__links a { width: 100%; padding: 12px 12px; letter-spacing: 0.14em; } .nav__links .btn { width: 100%; justify-content: center; } .nav.is-open .nav__toggleIcon::before { top: 5px; transform: rotate(45deg); } .nav.is-open .nav__toggleIcon::after { top: 5px; transform: rotate(-45deg); } } /* Sections */ .section { padding: var(--section-pad) var(--pad); } main { max-width: var(--max); margin: 0 auto; } .section__head { margin-bottom: var(--section-head-gap); max-width: 70ch; } /* Editorial layout */ .section--editorial .section__head { max-width: 78ch; } .section--editorial .section__grid { display: grid; gap: 18px; align-items: start; } .pullquote { border-radius: var(--radius-2); border: 1px solid rgba(245,240,232,0.10); background: linear-gradient(180deg, rgba(245,240,232,0.03), rgba(245,240,232,0.012)); box-shadow: var(--shadow-soft); padding: 18px; } .pullquote p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.5; color: rgba(245,240,232,0.88); } .pullquote small { display: block; margin-top: 10px; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(245,240,232,0.55); } .kicker { font-size: var(--s-1); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(245, 240, 232, 0.56); margin: 0 0 10px 0; } .h1, .h2, .h3 { margin: 0; } .h1 { font-family: var(--serif); font-weight: 520; line-height: 1.08; font-size: clamp(36px, 6vw, 60px); letter-spacing: -0.03em; } .h1__accent { display: block; color: var(--aqua); font-style: italic; font-weight: 520; text-shadow: 0 16px 54px rgba(143, 208, 170, 0.12); } .h2 { font-family: var(--serif); font-weight: 520; line-height: 1.15; font-size: clamp(24px, 3.6vw, 36px); letter-spacing: -0.01em; } .h3 { font-family: var(--serif); font-weight: 520; font-size: 18px; letter-spacing: -0.01em; } .lead { color: var(--muted); margin: 14px 0 0 0; max-width: 68ch; font-size: 15.5px; line-height: 1.8; } .muted { color: var(--muted); } .fine { font-size: 12px; } /* Buttons */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: rgba(143, 208, 170, 0.08); color: rgba(208, 252, 226, 0.92); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid rgba(143, 208, 170, 0.32); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .btn::before { display: none; } .btn::after { display: none; } .btn > * { position: relative; z-index: 1; } .btn:hover { transform: translateY(-1px); background: rgba(143, 208, 170, 0.14); border-color: rgba(143, 208, 170, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: none; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28), 0 0 0 3px rgba(143, 208, 170, 0.22); } .btn--ghost { background: transparent; color: rgba(245, 240, 232, 0.72); border: 1px solid rgba(245, 240, 232, 0.14); box-shadow: none; } .btn--ghost::before { display: none; } .btn--ghost:hover { background: rgba(245, 240, 232, 0.04); border-color: rgba(245, 240, 232, 0.24); color: rgba(245, 240, 232, 0.92); box-shadow: none; } .btn--wide { width: 100%; } /* Hero */ .hero { padding-top: var(--hero-top); overflow: hidden; /* contient les éléments en parallax */ } .hero__grid { display: grid; gap: 34px; align-items: start; } .hero__copy { position: relative; } .hero__copy::before { content: "FRÈRE"; position: absolute; top: -26px; left: -2px; font-family: var(--serif); letter-spacing: 0.42em; text-transform: uppercase; font-size: 12px; color: rgba(245,240,232,0.38); } .hero__copy::after { content: ""; position: absolute; left: 0; top: -10px; width: 56px; height: 2px; background: linear-gradient(90deg, rgba(143,208,170,0.65), transparent); } .hero__cta { display: flex; gap: var(--cta-gap); flex-wrap: wrap; margin-top: 14px; } .badges { display: flex; gap: 8px; flex-wrap: wrap; padding: var(--badges-top) 0 0 0; margin: 0; list-style: none; } .badge { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(245, 240, 232, 0.11); background: rgba(0, 0, 0, 0.18); color: rgba(245, 240, 232, 0.78); } .hero__visual { border-radius: var(--radius-2); border: 1px solid rgba(245, 240, 232, 0.10); background: radial-gradient(600px 340px at 40% 15%, rgba(143, 208, 170, 0.08), transparent 60%), linear-gradient(180deg, rgba(245, 240, 232, 0.03), rgba(245, 240, 232, 0.01)); box-shadow: var(--shadow); padding: 18px; } .sigil { border-radius: 22px; background: radial-gradient(520px 320px at 50% 10%, rgba(143, 208, 170, 0.08), transparent 58%), radial-gradient(420px 280px at 70% 70%, rgba(143, 208, 170, 0.06), transparent 62%), rgba(0, 0, 0, 0.18); border: 1px solid rgba(245, 240, 232, 0.10); display: grid; place-items: center; padding: 10px; } .hero__img { width: 100%; max-width: 420px; height: auto; display: block; border-radius: 18px; filter: saturate(0.92) contrast(1.05) brightness(0.95); opacity: 0.95; } .hero__note { margin: 14px 0 0 0; color: var(--faint); font-size: 12px; letter-spacing: 0.04em; } /* Hero shots: 2 visuels dans un seul encadré (hauteur identique) */ .hero__shots { border-radius: var(--radius-2); border: 1px solid rgba(245, 240, 232, 0.10); background: radial-gradient(600px 340px at 40% 15%, rgba(143, 208, 170, 0.08), transparent 60%), linear-gradient(180deg, rgba(245, 240, 232, 0.03), rgba(245, 240, 232, 0.01)); box-shadow: var(--shadow); padding: 18px; } .hero__shotsGrid { position: relative; display: grid; grid-template-columns: 1fr; border-radius: 22px; overflow: hidden; border: 1px solid rgba(245, 240, 232, 0.10); background: rgba(0, 0, 0, 0.18); height: clamp(260px, 36vw, 360px); } .hero__shotsGrid--single { grid-template-columns: 1fr; } .hero__shotsGrid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 260px at 20% 10%, rgba(143, 208, 170, 0.08), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.34)); } .hero__shot { position: relative; z-index: 0; overflow: hidden; } .hero__shotImg { width: 100%; height: 100%; display: block; } .hero__shot--products .hero__shotImg--products { object-fit: cover; object-position: 50% 60%; filter: saturate(0.92) contrast(1.05) brightness(0.95); } .hero__shot--magnus { display: grid; place-items: center; background: radial-gradient(520px 320px at 50% 10%, rgba(143, 208, 170, 0.08), transparent 58%), radial-gradient(420px 280px at 70% 70%, rgba(143, 208, 170, 0.06), transparent 62%), rgba(0, 0, 0, 0.18); } .hero__shot--magnus .hero__shotImg--magnus { object-fit: contain; padding: 10px; max-width: 520px; opacity: 0.95; filter: saturate(0.92) contrast(1.05) brightness(0.95); } @media (min-width: 860px) { .hero__shotsGrid { grid-template-columns: 1fr; } .hero__shotsGrid::before { content: none; } .hero__shotsGrid:not(.hero__shotsGrid--single)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(245,240,232,0.12), transparent); z-index: 2; } } /* Cards */ .cards { display: grid; gap: var(--grid-gap); } .card { padding: 18px; border-radius: var(--radius); border: 1px solid rgba(245, 240, 232, 0.10); background: linear-gradient(180deg, rgba(245, 240, 232, 0.035), rgba(245, 240, 232, 0.018)); box-shadow: var(--shadow-soft); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; } .card p { margin: 10px 0 0 0; color: var(--muted); } .card:hover { transform: translateY(-2px); border-color: rgba(143, 208, 170, 0.20); background: radial-gradient(600px 240px at 10% 0%, rgba(143, 208, 170, 0.07), transparent 60%), linear-gradient(180deg, rgba(245, 240, 232, 0.04), rgba(245, 240, 232, 0.018)); } @media (min-width: 920px) { .section--editorial .section__grid { grid-template-columns: 1.2fr 0.8fr; gap: 22px; } } /* Products */ .products { display: grid; gap: var(--grid-gap); } .product { padding: 20px; border-radius: var(--radius-2); border: 1px solid rgba(245, 240, 232, 0.10); background: radial-gradient(720px 380px at 20% -10%, rgba(143, 208, 170, 0.08), transparent 58%), linear-gradient(180deg, rgba(245, 240, 232, 0.03), rgba(245, 240, 232, 0.016)); box-shadow: var(--shadow); display: grid; gap: 14px; transition: transform 200ms ease, border-color 200ms ease; } .product:hover { transform: translateY(-2px); border-color: rgba(143, 208, 170, 0.20); } .product__media { border-radius: 18px; overflow: hidden; border: 1px solid rgba(245, 240, 232, 0.10); background: rgba(0, 0, 0, 0.20); aspect-ratio: 21 / 10; position: relative; } .label { position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(245,240,232,0.12); background: rgba(0,0,0,0.42); backdrop-filter: blur(10px); } .label__k { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(208, 252, 226, 0.92); } .label__t { font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; color: rgba(245,240,232,0.92); } .product__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95) contrast(1.06) brightness(0.92); transform: scale(1.02); } .product__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 20% 15%, rgba(143, 208, 170, 0.10), transparent 60%), linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)); pointer-events: none; } @media (min-width: 860px) { /* Sur desktop on garde les cards plus compactes */ .product__media { max-height: 220px; } } .product__top { display: grid; gap: 6px; } .product__sub { margin: 0; color: var(--faint); } .product__desc { margin: 0; color: var(--muted); } .tag { display: inline-flex; width: fit-content; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(245, 240, 232, 0.12); background: rgba(0, 0, 0, 0.18); color: rgba(245, 240, 232, 0.86); } .tag--prevente { border-color: rgba(143, 208, 170, 0.28); background: rgba(143, 208, 170, 0.10); color: rgba(208, 252, 226, 0.95); } .tag--soon { border-color: rgba(143, 208, 170, 0.28); background: rgba(143, 208, 170, 0.10); color: rgba(208, 252, 226, 0.95); } .list { margin: 0; padding-left: 18px; color: var(--muted); } .list li { margin: 6px 0; } .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .price__old { color: rgba(245, 240, 232, 0.45); text-decoration: line-through; } .price__now { font-family: var(--serif); font-size: 26px; color: var(--gold); letter-spacing: -0.02em; } .price__note { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); } /* Steps / meter */ .steps { display: grid; gap: var(--grid-gap); } .step { padding: 18px; border-radius: var(--radius); border: 1px solid rgba(245, 240, 232, 0.10); background: rgba(245, 240, 232, 0.03); } .step__num { margin: 0 0 10px 0; font-family: var(--serif); font-size: 22px; color: rgba(216, 180, 90, 0.9); } .step__title { margin: 0; letter-spacing: 0.02em; font-weight: 650; } .step__desc { margin: 6px 0 0 0; color: var(--muted); } .meter { margin-top: 14px; padding: 18px; border-radius: var(--radius); border: 1px solid rgba(245, 240, 232, 0.10); background: rgba(0, 0, 0, 0.18); } .meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .meter__title { margin: 0; font-weight: 700; letter-spacing: 0.02em; } .meter__meta { margin: 0; color: var(--muted); } .meter__bar { margin-top: 12px; height: 12px; border-radius: 999px; background: rgba(245, 240, 232, 0.08); overflow: hidden; border: 1px solid rgba(245, 240, 232, 0.10); } .meter__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(216, 180, 90, 0.92), rgba(143, 208, 170, 0.62)); } .meter__note { margin: 10px 0 0 0; } /* Form */ .form-wrap{ display:flex; justify-content:center; } .form { padding: 20px; border-radius: var(--radius-2); border: 1px solid rgba(245, 240, 232, 0.10); background: rgba(245, 240, 232, 0.03); box-shadow: var(--shadow); display: grid; gap: 12px; width: min(720px, 100%); margin: 0; } .form__row { display: grid; gap: 8px; } .form__label { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--faint); } .input, .textarea { width: 100%; border-radius: 14px; border: 1px solid rgba(245, 240, 232, 0.14); background: rgba(0, 0, 0, 0.22); color: var(--text); padding: 12px 12px; font-size: 14px; outline: none; } .input::placeholder, .textarea::placeholder { color: rgba(245, 240, 232, 0.35); } .input:focus, .textarea:focus { border-color: rgba(216, 180, 90, 0.45); box-shadow: 0 0 0 4px rgba(216, 180, 90, 0.12); } .textarea { resize: vertical; min-height: 110px; } /* Honeypot (anti-spam) */ .hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Lang picker — dropdown */ .lang-picker { position: relative; } .lang-trigger { appearance: none; display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--border-2); border-radius: 10px; color: var(--muted); font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 10px; cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background 150ms ease; } .lang-trigger:hover { color: var(--text); border-color: var(--border); background: rgba(245,240,232,0.04); } .lang-trigger__arrow { display: block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 200ms ease; opacity: 0.6; } .lang-picker.is-open .lang-trigger { color: var(--text); border-color: var(--border); } .lang-picker.is-open .lang-trigger__arrow { transform: rotate(-135deg) translateY(-1px); } .lang-drop { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 130px; list-style: none; margin: 0; padding: 6px; border-radius: 14px; border: 1px solid var(--border); background: rgba(11, 20, 13, 0.92); backdrop-filter: blur(16px); box-shadow: 0 16px 48px rgba(0,0,0,0.55); z-index: 200; } .lang-picker.is-open .lang-drop { display: block; } .lang-drop li { margin: 0; padding: 0; } .lang-btn { appearance: none; display: block; width: 100%; text-align: left; background: none; border: none; color: var(--muted); font-family: var(--sans); font-size: 11px; letter-spacing: 0.10em; padding: 9px 12px; border-radius: 9px; cursor: pointer; transition: color 120ms ease, background 120ms ease; } .lang-btn:hover { color: var(--text); background: rgba(245,240,232,0.06); } .lang-btn.is-active { color: var(--aqua); } @media (max-width: 740px) { .lang-drop { position: static; background: rgba(0,0,0,0.22); box-shadow: none; backdrop-filter: none; border-color: var(--border-2); margin-top: 6px; } } /* Footer */ .footer { margin-top: var(--footer-top); border-top: 1px solid rgba(245, 240, 232, 0.08); background: rgba(0, 0, 0, 0.12); padding: 34px var(--pad); } .footer__grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 14px; } .footer__brand { font-family: var(--serif); letter-spacing: 0.22em; text-transform: uppercase; margin: 0 0 8px 0; font-size: 12px; } .footer__links { display: flex; flex-wrap: wrap; gap: 10px 16px; } .footer__links a { color: var(--muted); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(245, 240, 232, 0.06); background: rgba(245, 240, 232, 0.02); } .footer__links a:hover { color: var(--text); border-color: rgba(216, 180, 90, 0.25); } .disclaimer { max-width: var(--max); margin: 16px auto 0 auto; color: rgba(245, 240, 232, 0.50); font-size: 12px; } /* Articles */ .article { --accent: var(--gold); --paper: rgba(245, 240, 232, 0.03); padding: 22px; border-radius: var(--radius-2); border: 1px solid rgba(245, 240, 232, 0.10); background: radial-gradient(700px 380px at 15% -15%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%), var(--paper); box-shadow: var(--shadow); } .article + .article { margin-top: 16px; } .article__head { display: grid; gap: 10px; } .article__title { font-family: var(--serif); font-size: clamp(22px, 3vw, 34px); line-height: 1.15; margin: 0; } .article__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .chip { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(245, 240, 232, 0.12); background: rgba(0, 0, 0, 0.18); color: rgba(245, 240, 232, 0.86); } .chip--accent { border-color: color-mix(in oklab, var(--accent) 38%, transparent); background: color-mix(in oklab, var(--accent) 16%, transparent); color: color-mix(in oklab, var(--text) 92%, var(--accent)); } .article__lead { margin: 0; color: var(--muted); max-width: 80ch; } .article__illus { margin: 14px 0 0 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(245, 240, 232, 0.10); background: rgba(0, 0, 0, 0.18); } .article__illus svg { display: block; width: 100%; height: auto; } .yt__thumb { display: block; width: 100%; height: auto; } /* YouTube page: thumbnails smaller (crop nicely) */ .page-youtube .article__illus { max-height: 240px; } .page-youtube .yt__thumb { height: 240px; object-fit: cover; object-position: center; } @media (min-width: 860px) { .page-youtube .article__illus { max-height: 200px; } .page-youtube .yt__thumb { height: 200px; } } .article__body { margin-top: 16px; } .article__body h2 { font-family: var(--serif); font-size: 20px; margin: 20px 0 10px; } .article__body h3 { font-family: var(--serif); font-size: 17px; margin: 16px 0 8px; } .article__body p { margin: 0 0 12px 0; color: rgba(245, 240, 232, 0.84); } .article__body em { color: rgba(245, 240, 232, 0.78); } details.seo { margin-top: 14px; border-radius: 16px; border: 1px solid rgba(245, 240, 232, 0.10); background: rgba(0, 0, 0, 0.18); padding: 12px 14px; } details.seo summary { cursor: pointer; list-style: none; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(245, 240, 232, 0.70); } details.seo summary::-webkit-details-marker { display: none; } .seo__grid { margin-top: 12px; display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; font-size: 13px; } .seo__k { color: rgba(245, 240, 232, 0.55); } .seo__v { color: rgba(245, 240, 232, 0.82); } .kws { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .kw { font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(245, 240, 232, 0.12); background: rgba(245, 240, 232, 0.03); color: rgba(245, 240, 232, 0.78); } /* Reveal animation hooks (JS will toggle .is-in) */ .reveal { opacity: 1; /* fallback sans JS */ transform: none; } /* Reveal animations (only when JS is enabled) */ .js .reveal { opacity: 0; transform: translateY(10px); transition: opacity 520ms ease, transform 520ms ease; } .js .reveal.is-in { opacity: 1; transform: translateY(0); } /* Responsive */ @media (min-width: 860px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; } .cards--3 { grid-template-columns: repeat(3, 1fr); } .products { grid-template-columns: repeat(3, 1fr); align-items: stretch; } .steps { grid-template-columns: repeat(4, 1fr); } .footer__grid { grid-template-columns: 1.2fr 0.8fr; align-items: start; } }