/* Theme Name: Blocksy Child Template: blocksy Version: 1.0.0 */ /* ─── Tokens de design ─────────────────────────────── */ :root { /* Accent */ --of-accent: #1d9e75; --of-accent-light: #e1f5ee; --of-accent-dark: #085041; /* Texte */ --of-text-primary: #111111; --of-text-secondary: #555555; --of-text-muted: #888888; /* Surfaces */ --of-bg-page: #f9f8f5; --of-bg-surface: #ffffff; --of-bg-badge: #f0efea; /* Bordures */ --of-border: #e2e2dc; /* Typo */ --of-font: "Inter", system-ui, sans-serif; --of-radius: 8px; --of-radius-lg: 12px; } /* ─── Dark mode ─────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --of-accent: #5dcaa5; --of-accent-light: #04342c; --of-accent-dark: #9fe1cb; --of-text-primary: #e2e8f0; --of-text-secondary: #8b95a8; --of-text-muted: #555e6e; --of-bg-page: #14181f; --of-bg-surface: #1a1f29; --of-bg-badge: #1e2330; --of-border: #2a2f3a; } } /* ─── Toggle manuel (classe sur ) ─────────────── */ html.dark { --of-accent: #5dcaa5; --of-accent-light: #04342c; --of-accent-dark: #9fe1cb; --of-text-primary: #e2e8f0; --of-text-secondary: #8b95a8; --of-text-muted: #555e6e; --of-bg-page: #14181f; --of-bg-surface: #1a1f29; --of-bg-badge: #1e2330; --of-border: #2a2f3a; /* Surcharge palette Blocksy */ --theme-palette-color-3: #e2e8f0; --theme-palette-color-4: #e2e8f0; --theme-palette-color-5: #2a2f3a; --theme-palette-color-6: #1a1f29; --theme-palette-color-7: #14181f; --theme-palette-color-8: #1a1f29; } /* ─── Fonts ───────────────────────────────────────────── */ /* inter-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Inter"; font-style: normal; font-weight: 400; src: url("fonts/inter-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Inter"; font-style: normal; font-weight: 500; src: url("fonts/inter-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Inter"; font-style: normal; font-weight: 600; src: url("fonts/inter-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* inter-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Inter"; font-style: normal; font-weight: 700; src: url("fonts/inter-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ─── Header / Nav ──────────────────────────────────── */ #header { position: sticky; top: 0; z-index: 999; } .ct-header { border-bottom: 1px solid var(--of-border); background: var(--of-bg-page); } [data-header*="type-1"] .ct-header [data-row*="middle"] { --height: 60px; } .site-title a { font-size: 24px; font-weight: 700; color: var(--of-text-primary); text-decoration: none; } .menu .ct-menu-link { font-size: 13.5px !important; color: var(--of-text-secondary) !important; text-decoration: none; } .menu .ct-menu-link:hover { color: var(--of-text-primary) !important; } /* Toggle dark mode */ .of-dark-toggle { width: 36px; height: 36px; border-radius: 50%; background: var(--of-bg-badge); border: 1px solid var(--of-border); cursor: pointer; padding: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--of-text-secondary); transition: background 0.2s, color 0.2s, border-color 0.2s; } .of-dark-toggle:hover { background: var(--of-accent-light); color: var(--of-accent); border-color: var(--of-accent); } .of-dark-toggle svg { width: 16px; height: 16px; } /* Light mode : soleil visible, lune cachée */ .of-dark-toggle__sun { display: block; } .of-dark-toggle__moon { display: none; } /* Dark mode : lune visible, soleil caché */ html.dark .of-dark-toggle__sun { display: none; } html.dark .of-dark-toggle__moon { display: block; } /* ─── Fil d'ariane ──────────────────────────────────── */ .of-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 0.75rem; color: var(--of-text-muted); padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--of-accent); opacity: 0.7; } .of-breadcrumb__home { display: inline-flex; align-items: center; } .of-breadcrumb__home svg { width: 13px; height: 13px; } .of-breadcrumb__link, .of-breadcrumb__link:visited { color: var(--of-text-muted); font-weight: 500; text-decoration: none; transition: color 0.15s; } .of-breadcrumb__link:hover { color: var(--of-accent); text-decoration: none; } .of-breadcrumb__sep { color: var(--of-border); user-select: none; } .of-breadcrumb__current { color: var(--of-text-secondary); font-weight: 500; } /* ─── Titres de page ─────────────────────────────────── */ .page-title { font-family: var(--of-font); font-size: 2rem; font-weight: 700; letter-spacing: 0.065em; color: var(--of-text-primary); display: inline-block; padding-bottom: 10px; position: relative; } .page-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; border-radius: 2px; background: var(--of-accent); } /* ─── Liens externes (target="_blank") ──────────────── */ a[target="_blank"]::after { content: "⧉"; font-size: 0.65em; vertical-align: super; margin-left: 2px; opacity: 0.6; } /* ─── Base ───────────────────────────────────────────── */ body { font-family: var(--of-font); color: var(--of-text-primary); background: var(--of-bg-page); } h1, h2, h3, h4, h5, h6 { font-family: var(--of-font); } a, a:hover, a:visited { color: var(--of-accent); font-weight: 700; text-decoration: none; } a:hover { text-decoration: underline; } /* Boutons pleins : texte blanc sur tous les états de lien */ .of-project-card__more:visited, .of-about-cta:visited, .of-single__edit:visited { color: #fff; font-weight: 500; text-decoration: none; } /* ─── Code inline (Gutenberg) ───────────────────────── */ code, .entry-content code { font-size: 0.875em; padding: 2px 6px; border-radius: 4px; background: var(--of-bg-badge); color: var(--of-accent-dark); border: 1px solid var(--of-border); } /* ─── Home : supprimer l'espace Blocksy entre header et hero ── */ body.home [data-vertical-spacing*="top"] { padding-top: 0; } /* ─── Hero ───────────────────────────────────────────── */ .of-hero { /* Sortir du conteneur Gutenberg pour occuper toute la largeur */ width: 100vw !important; max-width: none !important; margin-left: calc(-50vw + 50%) !important; margin-right: 0 !important; padding: 80px max(40px, calc((100vw - 1100px) / 2)) 64px; background: var(--of-bg-surface); text-align: left; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: center; } /* Surcharge layout Gutenberg dans le hero */ .of-hero.is-layout-constrained > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; } /* Badge disponibilité */ .of-avail-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; background: var(--of-accent-light); color: var(--of-accent-dark); margin-bottom: 24px; } .of-avail-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--of-accent); flex-shrink: 0; } .of-hero-title { font-size: 2.25rem; font-weight: 700; line-height: 1.25; color: var(--of-text-primary); margin-bottom: 18px; } .of-hero-title em { font-style: normal; color: var(--of-accent); } .of-hero-sub { font-size: 15px; color: var(--of-text-secondary); margin-bottom: 28px; line-height: 1.7; } /* Badges stack technique */ .of-stack-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; } .of-stack-badge { font-size: 12px; padding: 4px 10px; border-radius: 4px; background: var(--of-bg-page); border: 1px solid var(--of-border); color: var(--of-text-secondary); text-decoration: none; transition: border-color 0.2s, color 0.2s; } a.of-stack-badge:hover { border-color: var(--of-accent); color: var(--of-accent); } /* ─── CTA ────────────────────────────────────────────── */ .of-hero-cta { gap: 10px; } .of-hero .wp-block-button__link, .of-hero-cta .wp-block-button__link { border-radius: 6px; font-weight: 500; font-size: 13px; padding: 9px 20px; transition: opacity 0.2s; } .of-hero .wp-block-button__link:hover, .of-hero-cta .wp-block-button__link:hover { opacity: 0.85; } .of-hero .is-style-fill .wp-block-button__link, .of-hero-cta .is-style-fill .wp-block-button__link { background: var(--of-accent); color: #fff; border: none; } .of-hero .wp-block-button.is-style-outline .wp-block-button__link, .of-hero-cta .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent !important; color: var(--of-accent) !important; border: 1.5px solid var(--of-accent) !important; } /* Bouton fill par défaut (sans is-style-fill explicite) */ .of-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--of-accent); color: #fff; border: none; } /* ─── Hero — wrapper texte (colonne gauche) ──────────── */ .of-hero__text { display: flex; flex-direction: column; } /* ─── Hero visuel (colonne droite) ───────────────────── */ .of-hero__visual { display: flex; align-items: center; justify-content: center; } .of-hero__card { width: 100%; max-width: 440px; border: 1px solid var(--of-border); border-radius: var(--of-radius-lg); overflow: hidden; background: var(--of-bg-page); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } html.dark .of-hero__card { background: #f6f8fa; border-color: #d0d7de; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } html.dark .of-code-header { background: #eaeef2; } html.dark .of-code-filename { color: #57606a; } html.dark .of-code-body { background: #f6f8fa; color: #24292e; } html.dark .of-hl-kw { color: #cf222e; } html.dark .of-hl-fn { color: #8250df; } html.dark .of-hl-str { color: #0a3069; } html.dark .of-hl-type { color: #953800; } html.dark .of-hl-comment { color: #6e7781; } html.dark .of-hl-param { color: #953800; } html.dark .of-hl-punct { color: #24292e; } html.dark .of-hl-num { color: #0550ae; } html.dark .of-code-stats { background: #f6f8fa; border-top-color: #d0d7de; } html.dark .of-code-stat__value { color: #1d9e75; } html.dark .of-code-stat__label { color: #57606a; } .of-code-header { background: #1e1e2e; padding: 10px 16px; display: flex; align-items: center; gap: 6px; } .of-code-dot { width: 10px; height: 10px; border-radius: 50%; } .of-code-dot--red { background: #ff5f57; } .of-code-dot--yellow { background: #febc2e; } .of-code-dot--green { background: #28c840; } .of-code-filename { font-size: 11px; color: #888; margin-left: 10px; font-family: "SF Mono", "Fira Code", ui-monospace, monospace; } .of-code-body { background: #1e1e2e; padding: 20px; font-family: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace; font-size: 13px; line-height: 1.7; color: #cdd6f4; margin: 0; overflow-x: auto; white-space: pre; border: none; border-radius: 0; } .of-hl-kw { color: #cba6f7; } .of-hl-fn { color: #89b4fa; } .of-hl-str { color: #a6e3a1; } .of-hl-type { color: #f9e2af; } .of-hl-comment { color: #585b70; font-style: italic; } .of-hl-param { color: #fab387; } .of-hl-punct { color: #6c7086; } .of-hl-num { color: #fab387; } .of-code-stats { background: var(--of-bg-surface); padding: 16px 20px; display: flex; justify-content: space-between; border-top: 1px solid var(--of-border); } .of-code-stat { text-align: center; } .of-code-stat__value { font-size: 1.25rem; font-weight: 700; color: var(--of-accent); } .of-code-stat__label { font-size: 11px; color: var(--of-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* ─── Crédibilité ────────────────────────────────────── */ .of-credibility { padding: 36px 32px; background: var(--of-bg-page); } .of-credibility__label { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--of-accent); margin-bottom: 16px; } .of-credibility__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .of-cred-card { padding: 14px 16px; border-radius: var(--of-radius); border: 1px solid var(--of-border); background: var(--of-bg-surface); } .of-cred-card__title { font-size: 13px; font-weight: 500; color: var(--of-text-primary); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .of-cred-card__accent { width: 3px; height: 13px; background: var(--of-accent); border-radius: 2px; flex-shrink: 0; } .of-cred-card__sub { font-size: 12px; color: var(--of-text-secondary); line-height: 1.5; } /* ─── Lien À propos (home) ──────────────────────────── */ .of-about-link { padding: 28px 32px; background: var(--of-accent-light); border-top: 1px solid var(--of-border); border-left: 4px solid var(--of-accent); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .of-about-link__text { font-size: 14px; font-weight: 500; color: var(--of-accent-dark); } /* ─── Description de catégorie ──────────────────────── */ .of-cat-desc { margin-top: 10px; font-size: 0.95rem; color: var(--of-text-secondary); line-height: 1.7; text-align: justify; } /* ─── Article mis en avant ───────────────────────────── */ .of-featured-article { position: relative; margin-bottom: 2rem; } .of-featured-article__badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: var(--of-accent); color: #fff; } .of-featured-article__inner { display: grid; grid-template-columns: 2fr 3fr; border-radius: var(--of-radius-lg); border: 1px solid var(--of-border); background: var(--of-bg-surface); overflow: hidden; text-decoration: none; transition: border-color 0.2s; } .of-featured-article__inner:hover { border-color: var(--of-accent); } .of-featured-article__thumbnail { min-height: 220px; background-size: cover; background-position: center; } .of-featured-article__body { padding: 28px 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; } .of-featured-article__title { font-size: 1.15rem; font-weight: 600; color: var(--of-text-primary); line-height: 1.4; margin: 0; } .of-featured-article__excerpt { font-size: 13px; color: var(--of-text-secondary); line-height: 1.7; margin: 0; } .of-featured-article__more { font-size: 12px; font-weight: 500; color: var(--of-accent); margin-top: auto; } @media (max-width: 689px) { .of-featured-article__inner { grid-template-columns: 1fr; } .of-featured-article__thumbnail { min-height: 160px; } } /* ─── Hero article à la une (pages catégorie) ───────── */ .of-cat-hero { width: 100vw; max-width: none; margin-left: calc(-50vw + 50%); margin-right: 0; padding: 48px max(40px, calc((100vw - 1100px) / 2)) 56px; background: var(--of-bg-surface); display: grid; grid-template-columns: 3fr 2fr; gap: 48px; align-items: center; } .of-cat-hero__visual { position: relative; overflow: hidden; } .of-cat-hero__link { display: block; aspect-ratio: 16 / 9; overflow: hidden; text-decoration: none; } .of-cat-hero__thumbnail { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.35s ease; } .of-cat-hero__link:hover .of-cat-hero__thumbnail { transform: scale(1.03); } .of-cat-hero__body { display: flex; flex-direction: column; gap: 12px; } .of-cat-hero__title { font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin: 0; } .of-cat-hero__title a { color: var(--of-text-primary); text-decoration: none; } .of-cat-hero__title a:hover { color: var(--of-accent); } .of-cat-hero__excerpt { font-size: 14px; color: var(--of-text-secondary); line-height: 1.7; margin: 0; } .of-cat-hero__more { font-size: 13px; font-weight: 500; color: var(--of-accent); text-decoration: none; } .of-cat-hero__more:hover { text-decoration: underline; } @media (max-width: 689px) { .of-cat-hero { grid-template-columns: 1fr; padding: 32px 20px 40px; gap: 20px; } } /* ─── Cartes sous-catégories ─────────────────────────── */ .of-cat-hero + .entry-content { margin-top: 2.5rem; } .of-cat-children { margin-bottom: 2.5rem; } .of-cat-children__label { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--of-accent); margin-bottom: 16px; } .of-cat-children__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .of-cat-card, .of-cat-card:hover, .of-cat-card:visited { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--of-radius); border: 1px solid var(--of-border); border-left: 3px solid var(--of-accent); background: var(--of-bg-surface); text-decoration: none; transition: box-shadow 0.2s; } .of-cat-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); } .of-cat-card__name { font-size: 14px; font-weight: 600; color: var(--of-text-primary); } .of-cat-card__desc { font-size: 12px; color: var(--of-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .of-cat-card__name { display: flex; align-items: baseline; gap: 8px; } .of-cat-card__count { font-size: 11px; font-weight: 400; color: var(--of-text-muted); } .of-cat-card__footer { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--of-border); } .of-cat-card__btn { font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 4px; background: var(--of-accent); color: #fff; transition: opacity 0.2s; } .of-cat-card:hover .of-cat-card__btn { opacity: 0.85; } /* ─── Portfolio ──────────────────────────────────────── */ /* ─── Filtres portfolio ──────────────────────────────── */ .of-filters-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--of-border); border-radius: 999px; padding: 0.35rem 1rem; font: 500 13.5px/1 var(--of-font); color: var(--of-text-secondary); cursor: pointer; margin-bottom: 12px; transition: border-color 0.15s, color 0.15s; } .of-filters-toggle:hover { border-color: var(--of-accent); color: var(--of-accent); } .of-filters-toggle__icon { display: inline-block; transition: transform 0.2s; } .of-filters-toggle[aria-expanded="true"] .of-filters-toggle__icon { transform: rotate(180deg); } .of-portfolio-filters { padding: 0 32px 24px; display: none; flex-direction: column; gap: 12px; } .of-portfolio-filters.is-open { display: flex; } .of-portfolio-filters__cats, .of-portfolio-filters__tags { display: flex; flex-wrap: wrap; gap: 8px; } .of-portfolio-filters__tags { padding-top: 12px; border-top: 1px solid var(--of-border); } .of-filter-btn { padding: 0.35rem 1rem; border: 1px solid var(--of-border); border-radius: 999px; background: transparent; color: var(--of-text-secondary); font: 500 13.5px/1 var(--of-font); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .of-filter-btn:hover { border-color: var(--of-accent); color: var(--of-accent); } .of-filter-btn.is-active { border-color: var(--of-accent); background: var(--of-accent-light); color: var(--of-accent); font-weight: 600; } .of-filter-chip { padding: 0.25rem 0.75rem; border: 1px solid var(--of-border); border-radius: 999px; background: var(--of-bg-badge); color: var(--of-text-muted); font: 500 12px/1 var(--of-font); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .of-filter-chip:hover { border-color: var(--of-accent); color: var(--of-accent); } .of-filter-chip.is-active { border-color: var(--of-accent); background: var(--of-accent-light); color: var(--of-accent); font-weight: 600; } .of-portfolio__empty--filters { display: none; padding: 2rem; text-align: center; color: var(--of-text-muted); font-size: 14px; } .of-portfolio { padding: 48px 32px; background: var(--of-bg-page); } .of-portfolio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .of-project-card { border-radius: var(--of-radius-lg); border: 1px solid var(--of-border); background: var(--of-bg-surface); display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.2s; } .of-project-card:hover { border-color: var(--of-accent); } .of-project-card__header { position: relative; height: 170px; background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 12px 16px; } .of-project-card__header::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%); } .of-project-card__title { position: relative; z-index: 1; font-size: 14px; font-weight: 500; color: #fff; margin: 0; } .of-project-card__title a, .of-project-card__title a:hover, .of-project-card__title a:visited { color: #fff; font-weight: 500; text-decoration: none; } .of-project-card__body { padding: 14px 16px; display: grid; grid-template-rows: 1fr auto auto; gap: 10px; flex: 1; } .of-project-card__desc { font-size: 13px; color: var(--of-text-secondary); line-height: 1.6; text-align: justify; } .of-project-card__stack { display: flex; flex-wrap: wrap; gap: 4px; } .of-project-card__stack .of-stack-badge { font-size: 10px; padding: 2px 7px; } .of-project-card__more { display: inline-block; justify-self: start; font-size: 11px; font-weight: 500; padding: 5px 12px; border-radius: 4px; background: var(--of-accent); color: #fff; border: none; text-decoration: none; transition: opacity 0.2s; } .of-project-card__more:hover { opacity: 0.85; color: #fff; } .of-portfolio__empty { color: var(--of-text-muted); font-size: 14px; } /* ─── À propos ───────────────────────────────────────── */ .of-about-section { padding: 48px 32px; background: var(--of-bg-page); } .of-about-section + .of-about-section { padding-top: 0; } .of-about-section__label { font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--of-accent); margin-bottom: 24px; } /* Pitch */ .of-pitch { font-size: 16px; line-height: 1.75; color: var(--of-text-secondary); } .of-pitch strong { color: var(--of-text-primary); font-weight: 500; } /* Pitch + CTA */ .of-pitch-row { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; margin-bottom: 32px; padding-top: 20px; border-top: 1px solid var(--of-border); } .of-pitch-aside { display: flex; flex-direction: column; align-items: flex-start; min-width: 140px; } /* KPIs */ .of-kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; } .of-kpi { padding: 18px 20px; border-radius: var(--of-radius); border: 1px solid var(--of-border); background: var(--of-bg-surface); } .of-kpi__value { font-size: 22px; font-weight: 500; color: var(--of-accent); line-height: 1.2; margin-bottom: 4px; } .of-kpi__label { font-size: 12px; color: var(--of-text-secondary); line-height: 1.4; } /* Timeline expérience */ .of-timeline { display: flex; flex-direction: column; gap: 0; } .of-timeline-item { display: grid; grid-template-columns: 100px 1fr; gap: 0 24px; position: relative; padding-bottom: 28px; } .of-timeline-item:last-child { padding-bottom: 0; } .of-timeline-item::before { content: ""; position: absolute; left: 107px; top: 6px; bottom: 0; width: 1px; background: var(--of-border); } .of-timeline-item:last-child::before { display: none; } .of-timeline-item__date { font-size: 11px; font-weight: 500; color: var(--of-text-muted); padding-top: 3px; text-align: right; } .of-timeline-item__dot { position: absolute; left: 103px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--of-accent); border: 2px solid var(--of-bg-page); } .of-timeline-item__body { padding-left: 20px; } .of-timeline-item__title { font-size: 14px; font-weight: 500; color: var(--of-text-primary); margin-bottom: 2px; } .of-timeline-item__company { font-size: 12px; color: var(--of-accent); margin-bottom: 8px; } .of-timeline-item__summary { font-size: 13px; color: var(--of-text-secondary); line-height: 1.6; margin-bottom: 8px; font-style: italic; } .of-timeline-item__desc { font-size: 13px; color: var(--of-text-secondary); line-height: 1.6; margin: 0; padding: 0; list-style: none; } .of-timeline-item__desc li::before { content: "–"; margin-right: 6px; color: var(--of-text-muted); } .of-timeline-item__desc ul { margin-top: 4px; margin-left: 8px; list-style: none; padding-left: 0; } .of-timeline-item__desc ul li::before { content: "→"; color: var(--of-accent); } /* Compétences */ .of-skills-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .of-skill-group { padding: 16px 18px; border-radius: var(--of-radius); border: 1px solid var(--of-border); background: var(--of-bg-surface); } .of-skill-group__title { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--of-accent); margin-bottom: 10px; } .of-skill-group__list { display: flex; flex-direction: column; gap: 4px; } .of-skill-group__item { font-size: 13px; color: var(--of-text-secondary); } /* Liens sociaux + CTA */ /* Formation */ .of-formation-list { display: flex; flex-direction: column; gap: 12px; } .of-formation-item { display: grid; grid-template-columns: 50px 1fr; gap: 0 24px; align-items: baseline; } .of-formation-item__year { font-size: 11px; font-weight: 500; color: var(--of-text-muted); } .of-formation-item__body { font-size: 13px; color: var(--of-text-secondary); } .of-formation-item__title { color: var(--of-text-primary); font-weight: 500; } /* Liens sociaux + CTA */ .of-about-footer { display: flex; flex-direction: column; gap: 16px; padding: 32px 32px; border-top: 1px solid var(--of-border); background: var(--of-bg-page); } .of-about-footer__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .of-social-links { display: flex; gap: 12px; } .of-social-link { font-size: 13px; font-weight: 500; color: var(--of-text-secondary); text-decoration: none; padding: 6px 14px; border-radius: var(--of-radius); border: 1px solid var(--of-border); background: var(--of-bg-surface); transition: border-color 0.2s, color 0.2s; } .of-social-link:hover { border-color: var(--of-accent); color: var(--of-accent); } .of-social-link svg { width: 14px; height: 14px; fill: currentColor; vertical-align: middle; margin-right: 6px; position: relative; top: -1px; } .of-about-cta { display: inline-block; font-size: 13px; font-weight: 500; padding: 9px 20px; border-radius: 6px; background: var(--of-accent); color: #fff; text-decoration: none; transition: opacity 0.2s; } .of-about-cta:hover { opacity: 0.85; color: #fff; } /* ─── Contact ────────────────────────────────────────── */ .of-contact-header { padding: 0 32px; } .of-contact-page { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; padding: 64px 32px; } .of-contact__title { font-size: 1.5rem; font-weight: 500; line-height: 1.3; color: var(--of-text-primary); margin-bottom: 16px; } .of-contact__text { font-size: 14px; color: var(--of-text-secondary); line-height: 1.7; } /* Champs CF7 */ .wpcf7-form p { margin-bottom: 16px; } .wpcf7-form label { font-size: 13px; font-weight: 500; color: var(--of-text-secondary); display: block; margin-bottom: 6px; } .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-email, .wpcf7-form-control.wpcf7-textarea { width: 100%; font-family: var(--of-font); font-size: 13px; color: var(--of-text-primary); background: var(--of-bg-surface); border: 1px solid var(--of-border); border-radius: var(--of-radius); padding: 9px 14px; transition: border-color 0.2s; box-sizing: border-box; } .wpcf7-form-control.wpcf7-text:focus, .wpcf7-form-control.wpcf7-email:focus, .wpcf7-form-control.wpcf7-textarea:focus { outline: none; border-color: var(--of-accent); } .wpcf7-form-control.wpcf7-textarea { min-height: 140px; resize: vertical; } .wpcf7-form-control.wpcf7-submit { font-family: var(--of-font); font-size: 13px; font-weight: 500; padding: 9px 24px; border-radius: 6px; background: var(--of-accent); color: #fff; border: none; cursor: pointer; transition: opacity 0.2s; } .wpcf7-form-control.wpcf7-submit:hover { opacity: 0.85; } .wpcf7-response-output { font-size: 13px; margin-top: 12px; padding: 10px 14px; border-radius: var(--of-radius); border: 1px solid var(--of-border); } /* ─── Footer ─────────────────────────────────────────── */ .ct-footer { --theme-text-color: rgba(255, 255, 255, 0.85); --theme-link-initial-color: rgba(255, 255, 255, 0.85); --theme-link-hover-color: #ffffff; --theme-headings-color: #ffffff; } /* Liens du menu footer */ [data-footer*="type-1"] .ct-footer [data-id="menu"] > ul > li > a { --theme-link-initial-color: rgba(255, 255, 255, 0.85) !important; --theme-link-hover-color: #ffffff !important; } /* Icônes sociales */ [data-footer*="type-1"] [data-id="socials"].ct-footer-socials [data-color="custom"] { --background-color: rgba(255, 255, 255, 0.15) !important; --background-hover-color: rgba(255, 255, 255, 0.3) !important; } /* Liens dans les blocs HTML du footer */ .ct-footer a { color: rgba(255, 255, 255, 0.85) !important; } .ct-footer a:hover { color: #ffffff !important; } /* Copyright */ [data-footer*="type-1"] [data-id="copyright"] { color: rgba(255, 255, 255, 0.7); } /* ─── H2 des pages de contenu ────────────────────────── */ .entry-content h2, .of-credits-h2 { color: var(--of-accent); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2rem; margin-bottom: 0.5rem; } /* ─── Chapo (introduction d'article) ────────────────── */ .of-post-chapo { font-size: 1.05rem; font-weight: 600; line-height: 1.7; color: var(--of-text-secondary); } /* ─── Article (single.php) ───────────────────────────── */ .of-single__meta { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px 16px; margin-top: 10px; font-size: 0.85rem; color: var(--of-text-muted); } .of-single__meta-taxonomy { display: flex; flex-direction: column; gap: 5px; } .of-single__meta-row { display: flex; flex-wrap: wrap; gap: 4px; } .of-single__related { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--of-border); text-align: right; } .of-single__related-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--of-accent); margin-bottom: 0.5rem; } .of-single__related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .of-single__related ul li a { font-size: 0.8rem; color: var(--of-text-primary); text-decoration: none; line-height: 1.3; } .of-single__related ul li a:hover { color: var(--of-accent); } .of-single__cat { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: transparent; border: 1px solid var(--of-accent); color: var(--of-accent); text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.2s, color 0.2s; } .of-single__cat:hover { background: var(--of-accent); color: #fff; } .of-single__tag { font-size: 0.7rem; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: var(--of-accent-light); color: var(--of-accent); text-decoration: none; transition: opacity 0.2s; } .of-single__tag:hover { opacity: 0.8; color: var(--of-accent); } .of-single__body { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: start; } .of-single__left { display: flex; flex-direction: column; gap: 1.5rem; } .of-single__caption { text-align: right; font-size: 0.75rem; color: var(--of-text-muted); margin-top: 6px; line-height: 1.4; } .of-single__sep { width: 66%; margin: 10px 0 10px auto; border: none; border-top: 1px solid var(--of-border); } .of-single__edit { display: inline-block; margin-top: 10px; float: right; font-size: 11px; font-weight: 500; padding: 5px 12px; border-radius: 4px; background: var(--of-accent); color: #fff; text-decoration: none; transition: opacity 0.2s; } .of-single__edit:hover { opacity: 0.85; color: #fff; } .of-single__thumbnail img { width: 100%; height: auto; border-radius: var(--of-radius-lg); display: block; } /* Bouton téléchargement CV (page À propos) */ .entry-header--with-cv { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .of-cv-download__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.4rem; background: var(--of-accent); color: #fff !important; border-radius: var(--of-radius); text-decoration: none; font-weight: 600; font-size: 14px; transition: opacity 0.15s; } .of-cv-download__btn:hover { opacity: 0.85; } .of-cv-download__btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; } .of-single__cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 3rem auto 0; padding: 1.5rem 2rem; border: 1px solid var(--of-border); border-radius: var(--of-radius-lg); background: var(--of-bg-surface); } .of-single__cta-heading { margin: 0 0 0.2rem; font-weight: 600; color: var(--of-text-primary); } .of-single__cta-sub { margin: 0; font-size: 13.5px; color: var(--of-text-secondary); } .of-single__cta-btn { flex-shrink: 0; display: inline-block; padding: 0.55rem 1.4rem; background: var(--of-accent); color: #fff !important; border-radius: var(--of-radius); text-decoration: none; font-weight: 600; font-size: 14px; transition: opacity 0.15s; } .of-single__cta-btn:hover { opacity: 0.85; color: #fff; } @media (max-width: 600px) { .of-single__cta { flex-direction: column; align-items: flex-start; } } .of-single__nav { margin: 3rem auto 1rem; } .of-single__back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 500; color: var(--of-accent); text-decoration: none; } .of-single__back:hover { text-decoration: underline; } /* ─── Page 404 ───────────────────────────────────────── */ .of-404 { padding: 6rem 0 4rem; text-align: center; } .of-404__code { margin: 0 0 0.25rem; font-size: 7rem; font-weight: 700; line-height: 1; color: var(--of-accent); letter-spacing: -0.03em; } .of-404__title { margin: 0 0 1rem; font-size: 1.75rem; color: var(--of-text-primary); } .of-404__desc { margin: 0 0 2.5rem; color: var(--of-text-secondary); line-height: 1.7; } .of-404__actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .of-404__btn { display: inline-block; padding: 0.6rem 1.4rem; border: 1px solid var(--of-border); border-radius: var(--of-radius); color: var(--of-text-primary) !important; text-decoration: none; font-size: 14px; font-weight: 500; transition: border-color 0.15s, background 0.15s; } .of-404__btn:hover { border-color: var(--of-accent); color: var(--of-accent) !important; } .of-404__btn--primary { background: var(--of-accent); border-color: var(--of-accent); color: #fff !important; font-weight: 600; } .of-404__btn--primary:hover { opacity: 0.85; color: #fff !important; } .wp-block-footnotes { padding-top: 1rem; border-top: solid 1px var(--of-border); font-size: 0.75em; } /* ─── Responsive mobile ──────────────────────────────── */ @media (max-width: 689px) { .of-hero { grid-template-columns: 1fr; padding: 40px 20px 32px; } .of-hero__visual { display: none; } .of-hero-title { font-size: 1.75rem; } .of-about-section, .of-portfolio, .of-credibility, .of-about-footer { padding-left: 20px; padding-right: 20px; } /* Article single → empilé : image → texte → listes */ .of-single__body { display: flex; flex-direction: column; } .of-single__left { display: contents; } .of-single__thumbnail { order: 1; } .of-single__text { order: 2; } .of-single__sidebar { order: 3; } /* Grilles → 1 colonne */ .of-credibility__grid, .of-portfolio__grid, .of-cat-children__grid, .of-skills-grid, .of-kpi-row { grid-template-columns: 1fr; } /* Pitch row → empilé */ .of-pitch-row { grid-template-columns: 1fr; gap: 24px; } /* Timeline → colonne unique */ .of-timeline-item { grid-template-columns: 1fr; padding-left: 20px; } .of-timeline-item__date { text-align: left; margin-bottom: 2px; } .of-timeline-item::before { left: 6px; } .of-timeline-item__dot { left: 2px; } .of-timeline-item__body { padding-left: 0; } /* Formation */ .of-formation-item { grid-template-columns: 40px 1fr; gap: 0 12px; } /* About footer */ .of-about-footer__row { flex-direction: column; align-items: flex-start; } } /* ─── Pages catégorie : alignement filtres + articles ── */ body.category .of-portfolio-filters { padding-left: 0; padding-right: 0; } body.category .of-portfolio { padding-left: 0; padding-right: 0; }