/* * Design system CODE41 — vanilla CSS extrait de styles/*.scss * Font : Neuzeit Grotesk (Adobe Typekit — chargée dans ) * Sizing : px (convention CODE41) */ :root { /* Couleurs */ --primary-blue: #1956fe; --secondary-blue: #3978fe; --secondary-rose: #ff2090; --red: #ed2222; --grey-100: #f7f7fa; --grey-200: #e3e8f3; --grey-600: #5f637c; --grey-800: #494c5c; --grey-900: #323440; --dark-black: #000000; --white: #ffffff; --text-color: var(--grey-900); --titles-color: var(--grey-900); --border-color: var(--grey-200); --muted-color: var(--grey-600); --danger-color: var(--red); --layer-modal: rgba(50, 52, 64, 0.4); /* Espacements */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; /* Container */ --container-max: 1200px; --container-padding: 24px; /* Cards */ --shadow-card: 0 6px 27.08px rgba(122, 119, 119, 0.12); --card-width: 256px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: neuzeit-grotesk, sans-serif; font-weight: 300; font-size: 17px; line-height: 26px; letter-spacing: 0.01em; color: var(--text-color); background: var(--white); } /* Typographie */ h1, h2, h3, h4 { font-family: neuzeit-grotesk, sans-serif; font-weight: 400; color: var(--titles-color); letter-spacing: -0.01em; line-height: 1.2; margin: 1em 0 0.5em 0; } h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 20px; } h4 { font-size: 17px; text-transform: uppercase; } .title-large { font-family: neuzeit-grotesk, sans-serif; font-weight: 400; font-size: 60px; line-height: 62px; color: var(--titles-color); letter-spacing: -0.01em; } p { margin: 0 0 var(--space-sm) 0; } small, .small { font-size: 14px; line-height: 1.5; } /* Liens */ a { color: var(--primary-blue); text-decoration: none; } a:visited { color: var(--primary-blue); } /* Lien texte animé — signature CODE41 (mixin c-link) */ .c-link { position: relative; display: inline-block; color: var(--primary-blue); padding-bottom: 4px; cursor: pointer; } .c-link::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: top left; transition: transform 0.3s ease; } .c-link:hover::before, .c-link.is-active::before { transform: scaleX(1); } .c-link.white { color: var(--white); } .c-link.black { color: var(--grey-900); } /* Petit label uppercase bleu — sur-titre de section */ .eyebrow { font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-blue); margin: 0 0 var(--space-sm) 0; } /* Container principal */ .container { max-width: var(--container-max); margin: 0 auto; padding: var(--space-xl) var(--container-padding); } /* Bouton CTA principal — à valider avec Dylan (aucun mixin bouton dans les SCSS) */ .cta, #cta { display: inline-block; font-family: neuzeit-grotesk, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--white); background: var(--primary-blue); border: none; padding: 16px 32px; cursor: pointer; text-decoration: none; transition: background 0.2s ease; } .cta:hover, .cta:focus, #cta:hover, #cta:focus { background: var(--secondary-blue); outline: none; } /* Card avec ombre CODE41 */ .card { background: var(--white); box-shadow: var(--shadow-card); padding: var(--space-md); width: 100%; max-width: var(--card-width); } /* Champ de formulaire — mixin form-field */ .form-field { width: 100%; border: 1px solid var(--border-color); background: var(--white); color: var(--text-color); font-family: neuzeit-grotesk, sans-serif; font-weight: 400; font-size: 17px; line-height: 1.5; padding: 8px; margin-bottom: 8px; } .form-field:focus { outline: none; border-color: var(--grey-900); } .form-field.has-error, .form-field.has-error:focus { border-color: var(--danger-color); color: var(--danger-color); } /* Layout de la landing monster */ main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-xl) var(--container-padding); } .hero { max-width: 720px; padding: var(--space-lg) 0 64px; } .hero h1 { font-size: 32px; margin-top: 0; } .hero .tagline { font-size: 17px; color: var(--muted-color); margin: 0 0 var(--space-lg) 0; } .cta-note { font-size: 14px; line-height: 1.5; color: var(--muted-color); margin: var(--space-md) 0 0 0; max-width: 480px; } /* Fiche technique */ .specs { padding: var(--space-xl) 0; border-top: 1px solid var(--border-color); } .specs-list { list-style: none; margin: var(--space-lg) 0 0 0; padding: 0; } .specs-list li { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-color); } .specs-label { color: var(--grey-900); min-width: 140px; } /* TTO — sous le capot */ .tto { padding: var(--space-xl) 0; border-top: 1px solid var(--border-color); } .tto-lead { max-width: 720px; margin: 0 0 var(--space-lg) 0; } .tto-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: 0; } .tto-item { padding: var(--space-lg); background: var(--grey-100); } .tto-item h3 { font-size: 17px; text-transform: uppercase; margin: 0 0 var(--space-xs) 0; } .tto-origin { font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary-blue); margin: 0 0 var(--space-sm) 0; } .tto-item p:last-child { margin: 0; font-size: 15px; line-height: 22px; } .tto-note { margin: var(--space-lg) 0 0 0; font-size: 14px; color: var(--muted-color); } /* Signup */ .signup { padding: var(--space-xl) 0; border-top: 1px solid var(--border-color); } .signup-lead { max-width: 720px; margin: 0 0 var(--space-lg) 0; } .c-signup { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 480px; width: 100%; } .c-signup__label { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .c-signup__input { margin: 0; } .c-signup__submit { width: 100%; } .c-signup__consent { color: var(--muted-color); margin: 0; } .c-signup__status { margin: 0; min-height: 20px; } .c-signup__status.is-success { color: var(--primary-blue); } .c-signup__status.is-error { color: var(--danger-color); } .c-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .c-signup[data-loading="true"] .c-signup__submit { opacity: 0.6; cursor: wait; pointer-events: none; } /* Footer */ .footer { margin-top: var(--space-xl); padding: var(--space-lg) 0; border-top: 1px solid var(--border-color); font-size: 14px; color: var(--muted-color); } /* Breakpoints mobile-first : 460 / 840 / 1200 */ @media (min-width: 460px) { h1 { font-size: 36px; } h2 { font-size: 32px; } h3 { font-size: 24px; } .hero h1 { font-size: 40px; } .tto-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 840px) { main { padding: 64px 40px; } .hero { padding: var(--space-xl) 0 96px; } .hero h1 { font-size: 48px; } .tto-grid { grid-template-columns: repeat(4, 1fr); } }