si tu passes par l'édition de code de la page) ============================================================ */ /* ---------- 1. Polices ---------- */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,600;0,900;1,400;1,600&family=Sora:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ---------- 2. Variables de marque ---------- */ :root{ --lagoon-deep:#0E4A47; --lagoon-deep-2:#0B3936; --sand:#F5EEDC; --sand-2:#EFE5CC; --hibiscus:#E63950; --hibiscus-2:#C22A3E; --pearl-dark:#171A1F; --lagoon-light:#CFE7E1; --gold:#D9A441; --ink:#1F2421; --ink-soft:#516A63; --white:#FFFDF8; --radius-s:6px; --radius-m:14px; --radius-l:28px; --radius-pill:999px; --font-display:'Fraunces', serif; --font-body:'Sora', sans-serif; --font-mono:'IBM Plex Mono', monospace; --shadow-card: 0 1px 2px rgba(23,26,31,.06), 0 8px 24px -12px rgba(23,26,31,.18); } /* ---------- 3. Base du site ---------- */ body{ background:var(--sand) !important; color:var(--ink); font-family:var(--font-body); } h1,h2,h3,h4,h5{ font-family:var(--font-display); color:var(--pearl-dark); } p, li, span, label{ font-family:var(--font-body); } ::selection{ background:var(--hibiscus); color:var(--white); } a{ color:var(--lagoon-deep); text-decoration:none; } a:hover{ color:var(--hibiscus); } /* Petits labels / éléments type "eyebrow" ou prix : Plex Mono */ .o_wsale_products_item .oe_currency_value, .product_price .oe_currency_value, .o_thm_price{ font-family:var(--font-mono); font-weight:500; color:var(--lagoon-deep); } /* ---------- 4. Entête / navbar ---------- */ header#top, header#top .navbar{ background-color:var(--lagoon-deep) !important; } header#top .nav-link, header#top .navbar-brand, header#top a{ color:var(--lagoon-light) !important; font-family:var(--font-body); font-weight:500; } header#top .nav-link:hover, header#top a:hover{ color:var(--white) !important; } /* Placeholder logo — à retirer dès que le vrai logo (image) est en place. Pose un Tahiti Hand Made à la place du logo dans l'en-tête, le temps d'avoir le fichier final. */ .o_thm_logo_placeholder{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:20px; color:var(--white) !important; letter-spacing:.01em; white-space:nowrap; } .o_thm_logo_placeholder::before{ content:""; display:inline-block; width:14px;height:14px; margin-right:8px; border-radius:50%; vertical-align:middle; background:radial-gradient(circle at 32% 28%, #fff 0%, var(--lagoon-light) 22%, var(--lagoon-deep) 75%); box-shadow:inset 0 0 3px rgba(0,0,0,.25); } /* Une fois le vrai logo en image, cette règle le calibre dans la navbar */ header#top .navbar-brand img{ max-height:42px; width:auto; } /* ---------- 5. Héros (o_thm_hero) ---------- */ /* Classe à poser sur les 3 grands blocs d'en-tête. !important sur le fond pour dominer les styles inline/snippet du thème Odoo. */ .o_thm_hero{ background:radial-gradient(120% 140% at 15% 0%, var(--lagoon-deep-2) 0%, var(--pearl-dark) 62%) !important; background-image:radial-gradient(120% 140% at 15% 0%, var(--lagoon-deep-2) 0%, var(--pearl-dark) 62%) !important; color:var(--white) !important; padding:120px 64px 100px !important; position:relative; overflow:hidden; } .o_thm_hero::after{ content:""; position:absolute; right:-120px; bottom:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle at 32% 28%, rgba(217,164,65,.55), rgba(230,57,80,.25) 45%, transparent 70%); filter:blur(2px); pointer-events:none; } .o_thm_hero h1, .o_thm_hero h2{ font-family:var(--font-display); font-weight:340; color:var(--white) !important; line-height:.95; } .o_thm_hero h1 em, .o_thm_hero h2 em{ color:var(--hibiscus) !important; font-style:italic; font-weight:600; } .o_thm_hero p, .o_thm_hero .lead{ font-family:var(--font-display); font-style:italic; color:var(--lagoon-light) !important; font-size:20px; } .o_thm_hero .btn{ margin-top:8px; } @media (max-width:900px){ .o_thm_hero{ padding:64px 24px !important; } } /* ---------- 6. Boutons ---------- */ /* Pilule partout pour les actions commerciales — signature visuelle qui casse les boutons carrés Odoo par défaut. */ .btn, .o_wsale_products_item .btn{ border-radius:var(--radius-pill); font-family:var(--font-body); font-weight:600; padding:12px 26px; border:none; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .btn:hover{ transform:translateY(-1px); } .btn-primary{ background-color:var(--hibiscus) !important; border-color:var(--hibiscus) !important; color:var(--white) !important; box-shadow:0 6px 16px -6px rgba(230,57,80,.55); } .btn-primary:hover, .btn-primary:focus{ background-color:var(--hibiscus-2) !important; border-color:var(--hibiscus-2) !important; } .btn-secondary{ background-color:var(--pearl-dark) !important; border-color:var(--pearl-dark) !important; color:var(--white) !important; } .btn-outline-primary{ background-color:transparent !important; color:var(--lagoon-deep) !important; border:1.5px solid var(--lagoon-deep) !important; } .btn-outline-primary:hover{ background-color:var(--lagoon-deep) !important; color:var(--white) !important; } /* Boutons "texte" type lien CTA */ .btn-link{ color:var(--hibiscus) !important; font-weight:600; padding:6px 4px; } /* ---------- 7. Champs & formulaires ---------- */ .form-control, input.form-control, textarea.form-control{ font-family:var(--font-body); border-radius:var(--radius-s); border:1.5px solid rgba(23,26,31,.16); background:var(--white); padding:12px 16px; } .form-control:focus{ outline:2px solid var(--gold); outline-offset:2px; border-color:var(--lagoon-deep); box-shadow:none; } /* ---------- 8. Cartes produit (boutique) ---------- */ .o_wsale_products_item, .oe_product{ border-radius:var(--radius-l); overflow:hidden; background:var(--white); box-shadow:var(--shadow-card); transition:transform .18s ease, box-shadow .18s ease; } .o_wsale_products_item:hover, .oe_product:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -18px rgba(23,26,31,.28); } .o_wsale_products_item .card-title, .oe_product .card-title{ font-family:var(--font-display); font-weight:600; color:var(--pearl-dark); } /* Badges / ribbons Odoo (ex : "Nouveau", "Promo") */ .o_ribbon, .badge{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; border-radius:var(--radius-pill); background:var(--lagoon-light) !important; color:var(--lagoon-deep-2) !important; } .badge.badge--gold{ background:rgba(217,164,65,.18) !important; color:#8a6112 !important; } /* ---------- 9. La Perle — élément signature ---------- */ /* À utiliser à la place des étoiles génériques pour la notation vendeur et les badges "Vendeur d'exception". Markup :
...
*/ .pearl-rating{ display:flex; gap:7px; } .pearl{ width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 32% 28%, #fff 0%, var(--lagoon-light) 22%, var(--lagoon-deep) 75%); box-shadow:inset 0 0 3px rgba(0,0,0,.25); display:inline-block; } .pearl--off{ background:none; border:1.5px solid rgba(23,26,31,.2); } .pearl--gold{ background:radial-gradient(circle at 32% 28%, #fff 0%, #f0d18a 22%, var(--gold) 78%); } .pearl-divider{ display:flex; align-items:center; gap:9px; margin:36px 0; } .pearl-divider .pearl{ width:8px; height:8px; } .pearl-divider::before, .pearl-divider::after{ content:""; flex:1; height:1px; background:rgba(23,26,31,.14); } /* ---------- 10. Étiquettes (tags) ---------- */ .mkt-tag{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; padding:5px 11px; border-radius:var(--radius-pill); background:var(--lagoon-light); color:var(--lagoon-deep-2); display:inline-block; } .mkt-tag--gold{ background:rgba(217,164,65,.18); color:#8a6112; } /* ---------- 11. Pied de page ---------- */ footer{ background:var(--pearl-dark) !important; color:rgba(255,253,248,.7) !important; } footer a{ color:rgba(255,253,248,.85) !important; } footer a:hover{ color:var(--white) !important; }
Skip to Content

Contact us

Contact us about anything related to our company or services.
We'll do our best to get back to you as soon as possible.

Submit
My Company
  • 3575 Fake Buena Vista Avenue
  • +1 555-555-5556
  • info@yourcompany.example.com