/* ================================================================ All Indonesia — all-indonesia.fr Design system: "Tampon d'entrée" (entry stamp) Palette: papier ivoire / encre / rouge tampon / indigo / moutarde ================================================================ */ /* Polices Fraunces/Work Sans/IBM Plex Mono auto-hebergees via assets/css/fonts.css (voir ce fichier) plutot que via @import ici : @import bloque le rendu et retarde la decouverte de la police, alors qu'un dans le (layout/seo-head.php) est decouvert et recupere en parallele du reste - meilleur score PageSpeed. */ :root { --paper: #F7F2E7; --paper-deep: #EFE8D8; --ink: #1B1F2A; --ink-soft: #4A4E58; --muted: #676155; --stamp: #B3122E; --stamp-dark: #8C0E24; --stamp-tint: #F6E2E3; --indigo: #1F4B4C; --indigo-tint: #E4EDEC; --gold: #B98A3D; --line: #DDD3BC; --white: #FFFDF8; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Work Sans', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 600; color: var(--ink); line-height: 1.15; margin: 0; } a { color: inherit; } .eyebrow, .mono, .price-amount, .step-num, .lang-current { font-family: 'IBM Plex Mono', monospace; } :focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------- Bandeau d'avertissement ---------- */ /* Placé avant le header sticky (non sticky lui-même) : defile normalement avec la page et disparait donc des le premier scroll, sans JS, pendant que le header reste colle en haut. */ .announcement-bar { background: var(--paper-deep); color: var(--ink); text-align: center; font-size: 12.5px; line-height: 1.4; padding: 8px 16px; } /* ---------- Bande drapeau ---------- */ .flag-bar { height: 6px; background: linear-gradient(90deg, var(--stamp) 0 50%, var(--white) 50% 100%); } /* ---------- Header ---------- */ header.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 21px; text-decoration: none; color: var(--ink); } .logo .logo-stamp { width: 26px; height: 26px; flex-shrink: 0; } .logo .word-indonesia { color: var(--stamp); } nav.main-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; } nav.main-nav a { text-decoration: none; color: var(--ink-soft); } nav.main-nav a:hover { color: var(--stamp); } /* ---------- Burger menu (mobile) ---------- */ .nav-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .nav-toggle-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; cursor: pointer; flex-shrink: 0; } .nav-toggle-btn span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle-input:focus-visible ~ .nav-toggle-btn { outline: 2px solid var(--indigo); outline-offset: 3px; } .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; } .nav-toggle-input:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-cta { background: var(--stamp); color: var(--white) !important; padding: 10px 20px; border-radius: 3px; font-weight: 600; font-size: 14.5px; } .nav-cta:hover { background: var(--stamp-dark); } /* ---------- Hero ---------- */ .hero { max-width: 1120px; margin: 0 auto; padding: 64px 24px 40px; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; } .eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo); background: var(--indigo-tint); padding: 6px 12px; border-radius: 2px; margin-bottom: 20px; } .hero h1 { font-size: 44px; letter-spacing: -0.01em; } .hero h1 em { font-style: italic; color: var(--stamp); } .hero .lead { font-size: 17.5px; color: var(--ink-soft); max-width: 46ch; margin: 20px 0 28px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } .btn-primary, .btn-cta { background: var(--stamp); color: var(--white); border: none; padding: 14px 26px; border-radius: 3px; font-weight: 600; font-size: 15px; text-decoration: none; display: inline-block; cursor: pointer; font-family: inherit; } .btn-primary:hover, .btn-cta:hover { background: var(--stamp-dark); } .btn-primary:disabled, .btn-cta:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; } .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 13px 26px; border-radius: 3px; font-weight: 600; font-size: 15px; text-decoration: none; display: inline-block; } .btn-outline:hover { border-color: var(--stamp); color: var(--stamp); } .trust-line { margin-top: 24px; font-size: 13px; font-family: 'IBM Plex Mono', monospace; color: var(--muted); } /* ---------- Hero visual: phone mockup with QR confirmation ---------- */ .stamp-wrap { position: relative; padding-top: 20px; } .phone-mockup { width: 258px; margin: 0 auto; background: var(--ink); border-radius: 36px; padding: 12px; position: relative; box-shadow: 0 28px 54px -22px rgba(27,31,42,0.45); } .phone-notch { width: 64px; height: 5px; background: rgba(247,242,231,0.22); border-radius: 3px; margin: 0 auto 10px; } .phone-screen { background: var(--white); border-radius: 26px; padding: 30px 24px 26px; text-align: left; } .phone-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .phone-header-text { flex: 1; min-width: 0; } .phone-mini-qr { width: 58px; height: 58px; flex-shrink: 0; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 7px; padding: 5px; } .phone-mini-qr svg { width: 100%; height: 100%; color: var(--ink); display: block; } .phone-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--indigo); display: block; } .phone-title { font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; color: var(--ink); margin: 8px 0 0; } .phone-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 20px; } .phone-pill { background: var(--paper-deep); border: 1px solid var(--line); border-radius: 16px; padding: 6px 13px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); } .phone-divider { height: 1px; background: var(--line); margin: 0 0 18px; } .phone-facts { display: flex; flex-direction: column; gap: 13px; } .phone-fact { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); } .phone-fact svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--stamp); } /* ---------- Fil d'Ariane (absent du template, ajoute pour la regle SEO "breadcrumb visible + BreadcrumbList" ; style discret coherent avec la charte : mono/muted comme .eyebrow) ---------- */ .breadcrumb-nav { max-width: 1120px; margin: 0 auto; padding: 14px 24px 0; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted); } .breadcrumb-nav a { color: var(--muted); text-decoration: none; } .breadcrumb-nav a:hover { color: var(--stamp); } .breadcrumb-nav [aria-current="page"] { color: var(--ink-soft); } /* ---------- Sections ---------- */ .section { max-width: 1120px; margin: 0 auto; padding: 64px 24px; } .section--tint { background: var(--paper-deep); } .section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; } .section-head h2 { font-size: 32px; } .section-head p { color: var(--ink-soft); font-size: 16.5px; margin-top: 14px; } /* ---------- Checker ---------- */ .checker-box { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 32px; max-width: 640px; margin: 0 auto; } .checker-box h3 { font-size: 15px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--indigo); } .checker-row { display: flex; gap: 12px; flex-wrap: wrap; } .checker-row select { flex: 1; min-width: 220px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; font-family: inherit; font-size: 15px; background: var(--white); } .checker-row button { background: var(--ink); color: var(--white); border: none; padding: 12px 22px; border-radius: 3px; font-weight: 600; cursor: pointer; font-family: inherit; } .checker-row button:hover { background: var(--stamp); } .checker-result { display: none; margin-top: 20px; padding: 16px 18px; background: var(--indigo-tint); border-radius: 4px; font-size: 14.5px; border-left: 3px solid var(--indigo); } .checker-result.visible { display: block; } .checker-note { font-size: 12.5px; color: var(--muted); margin-top: 18px; } /* ---------- Icon cards ---------- */ .icon-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .icon-card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 28px 24px; } .icon-badge { width: 42px; height: 42px; border-radius: 50%; background: var(--stamp-tint); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .icon-badge svg { width: 21px; height: 21px; color: var(--stamp); } .icon-card h3 { font-size: 17px; margin-bottom: 8px; } .icon-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; } /* ---------- Steps (genuine sequence) ---------- */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; } .step-card { position: relative; padding-top: 8px; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 14px; font-weight: 600; margin-bottom: 16px; background: var(--paper); } .step-card h3 { font-size: 16.5px; margin-bottom: 8px; } .step-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; } /* ---------- Content copy ---------- */ .content { max-width: 760px; margin: 0 auto; padding: 8px 24px 64px; } .content h2 { font-size: 26px; margin: 40px 0 14px; } .content h2:first-child { margin-top: 0; } .content p { font-size: 16px; color: var(--ink-soft); margin: 0 0 16px; } .content b { color: var(--ink); } .section-rule { border: none; border-top: 1px solid var(--line); margin: 8px 0 32px; } .cta-wrap { text-align: center; margin: 32px 0; } /* ---------- Info callout ---------- */ .info-callout { background: var(--indigo-tint); border-left: 3px solid var(--indigo); padding: 16px 20px; border-radius: 4px; font-size: 15px; margin: 0 0 20px; } /* ---------- Topic card (eVOA / Bali pages) ---------- */ .topic-hero { max-width: 1120px; margin: 0 auto; padding: 56px 24px 8px; } .topic-hero .eyebrow { margin-bottom: 18px; } .topic-hero h1 { font-size: 38px; max-width: 20ch; } .topic-hero .lead { font-size: 17px; color: var(--ink-soft); max-width: 60ch; margin-top: 18px; } .fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 32px 0; } .fact-strip div { background: var(--white); padding: 20px 18px; } .fact-strip b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; } .fact-strip span { font-size: 15px; } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .price-card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 30px 26px; position: relative; } .price-card--featured { border-color: var(--stamp); border-width: 2px; } .badge-stamp { position: absolute; top: -14px; right: 20px; background: var(--stamp); color: var(--white); font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; } .price-name { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 600; margin-bottom: 6px; } .price-amount { font-size: 30px; font-weight: 600; color: var(--stamp); } .price-amount span { font-size: 13px; font-family: 'Work Sans', sans-serif; color: var(--muted); font-weight: 400; } .price-desc { font-size: 14px; color: var(--ink-soft); margin: 10px 0 18px; } .price-card ul { list-style: none; padding: 0; margin: 0 0 22px; } .price-card li { font-size: 14px; padding: 7px 0 7px 22px; position: relative; border-bottom: 1px solid var(--paper-deep); } .price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--indigo); font-weight: 700; } .btn-choose { display: block; text-align: center; background: var(--paper-deep); color: var(--ink) !important; border: 1px solid var(--line); padding: 12px 20px; border-radius: 3px; font-weight: 600; font-size: 14.5px; text-decoration: none; } .price-card--featured .btn-choose { background: var(--stamp); color: var(--white) !important; border-color: var(--stamp); } .btn-choose:hover { opacity: 0.9; } .pricing-note { max-width: 700px; margin: 30px auto 0; font-size: 13px; color: var(--muted); text-align: center; line-height: 1.7; } /* ---------- FAQ ---------- */ .faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; } .faq-item summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 15.5px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: 'IBM Plex Mono', monospace; font-size: 20px; color: var(--stamp); flex-shrink: 0; margin-left: 12px; } .faq-item[open] summary::after { content: "–"; } .faq-answer { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); } /* ---------- Cross-link cards (eVOA / Bali) ---------- */ .cross-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cross-card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 28px; text-decoration: none; color: inherit; display: block; transition: border-color 0.15s; } .cross-card:hover { border-color: var(--stamp); } .cross-card .eyebrow { margin-bottom: 12px; } .cross-card h3 { font-size: 19px; margin-bottom: 8px; } .cross-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; } .cross-card .link-arrow { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: var(--stamp); font-weight: 600; } .closing-banner { text-align: center; font-family: 'Fraunces', serif; font-size: 21px; font-style: italic; color: var(--indigo); padding: 12px 0 0; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: #C9CBD1; padding: 52px 24px 24px; } .footer-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 32px; border-bottom: 1px solid #33363F; } .footer-col h3 { color: var(--white); font-size: 14px; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; font-weight: 600; } .footer-col.brand-mark { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 600; color: var(--white); margin-bottom: 14px; } .footer-col.brand-mark svg { width: 22px; height: 22px; } .footer-col p { font-size: 14px; color: #A6A9B2; margin: 0; } .footer-col a { display: block; font-size: 14px; color: #A6A9B2; text-decoration: none; margin-bottom: 10px; } .footer-col a:hover { color: var(--white); } .footer-disclaimer { max-width: 1120px; margin: 24px auto 0; font-size: 12.5px; color: #8A8C95; } .footer-bottom { max-width: 1120px; margin: 16px auto 0; font-size: 12.5px; color: #8A8C95; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } /* ---------- Legal / static content pages ---------- */ .page-body { max-width: 760px; margin: 0 auto; padding: 56px 24px 64px; } .page-body h1 { font-size: 34px; margin-bottom: 8px; } .page-body .lead { font-size: 15.5px; color: var(--muted); margin-bottom: 32px; } .page-body h2 { font-size: 21px; margin: 34px 0 12px; } .page-body p, .page-body li { font-size: 15.5px; color: var(--ink-soft); } .page-body ul { padding-left: 20px; } .page-body li { margin-bottom: 6px; } /* ---------- Comparison table (informations-utiles, pas de maquette dediee) ---------- */ .compare-table-wrap { overflow-x: auto; margin: 24px 0 40px; border: 1px solid var(--line); border-radius: 6px; } .compare-table { width: 100%; border-collapse: collapse; background: var(--white); } .compare-table th, .compare-table td { padding: 14px 16px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--line); } .compare-table th { font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--paper-deep); font-weight: 600; } .compare-table td:first-child, .compare-table th:first-child { font-weight: 600; color: var(--ink); } .compare-table tr:last-child td { border-bottom: none; } /* ---------- Contact ---------- */ .contact-box { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 26px 28px; margin: 24px 0; } /* ---------- Form (application pages) ---------- */ .payment-success-banner { width: calc(100% - 48px); max-width: 712px; margin: 24px auto 0; padding: 14px 24px; background: #E4F3E7; border: 1px solid #B7DFC0; border-radius: 6px; color: #1E6B34; font-weight: 600; font-size: 12.5px; } .form-shell { max-width: 760px; margin: 0 auto; padding: 8px 24px 64px; } .form-card { background: var(--white); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .form-progress { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 24px; background: var(--stamp-tint); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--stamp-dark); flex-wrap: wrap; } .form-progress .step { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--stamp); color: var(--white); font-size: 12px; font-family: 'IBM Plex Mono', monospace; } .form-progress .step.pending { background: var(--white); color: var(--muted); border: 1px solid var(--line); } .form-progress .sep { color: #D9A6AE; } .form-progress .muted-label { color: var(--muted); font-weight: 400; } .section-title { padding: 26px 28px 4px; font-size: 18px; font-weight: 600; font-family: 'Fraunces', serif; color: var(--ink); } .fields { padding: 10px 28px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .field { display: flex; flex-direction: column; gap: 6px; } .field.full { grid-column: 1 / -1; } .field label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); } .field input, .field select { padding: 11px 13px; border: 1px solid var(--line); border-radius: 3px; font-family: inherit; font-size: 15px; background: var(--white); color: var(--ink); } .field input:focus, .field select:focus { border-color: var(--indigo); } .field-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 4px; } .field-hint { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: -2px; line-height: 1.4; } .radio-row { display: flex; gap: 28px; margin-top: 4px; } .radio-row label { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer; } .radio-row input[type="radio"] { width: 16px; height: 16px; accent-color: var(--stamp); cursor: pointer; } /* Case a cocher CGV (absente de la maquette form, ajoutee pour rester fonctionnellement identique : acceptation obligatoire avant paiement) — meme langage visuel que .radio-row. */ .terms-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; } .terms-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--stamp); cursor: pointer; } .terms-check a { color: var(--indigo); text-decoration: underline; } .divider { height: 1px; background: var(--line); margin: 0 28px; } .pay-bar { padding: 22px 28px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--paper-deep); } .pay-note { font-size: 13px; color: var(--muted); margin: 0; max-width: 46ch; } .after-note { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 22px; } /* ---------- Responsive ---------- */ @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-grid > div:last-child { max-width: 260px; margin: 32px auto 0; } .icon-cards, .steps-grid, .pricing-grid { grid-template-columns: 1fr; } .fact-strip { grid-template-columns: repeat(2, 1fr); } .cross-links { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .fields { grid-template-columns: 1fr; } } @media (max-width: 640px) { .nav-toggle-btn { display: flex; } nav.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 4px 24px 20px; box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .15); } .nav-toggle-input:checked ~ nav.main-nav { display: flex; } nav.main-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); } nav.main-nav a:last-child { border-bottom: none; } nav.main-nav a.nav-cta { text-align: center; margin: 10px 0 4px; border-bottom: none; } .hero h1 { font-size: 32px; } .section-head h2 { font-size: 26px; } }