/*
Theme Name: Postulia
Theme URI: https://emploi.today
Description: Thème classique (non-bloc) pour sites d’emploi Postulia. Léger, SEO-friendly, prêt pour ACF.
Author: Emploi Today
Author URI: https://emploi.today
Version: 0.1.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: postulia
Domain Path: /languages
License: GPL-2.0-or-later
*/
/* ==========================================================================
Postulia CSS — quick guide
- This file now holds: TOKENS + base + components + utilities.
- Layers (declared first): @layer reset, tokens, base, components, utilities.
- Enqueue: only style.css (handle: postulia-style). Page CSS depends on it and loads conditionally.
- Breakpoints: xs 0–639 • sm ≥641 • md ≥1000.
- Rules: use tokens; keep all rules inside layers; avoid hardcoded values.
- A11y: prefer :focus-visible; use .screen-reader-text for skip links.
- Changelog: 2025-08-31 tokens inlined into style.css.
========================================================================== */
/* 1) LAYER ORDER — must be the first layer statement */
@layer reset, tokens, base, components, utilities;
/* 2) TOKENS (formerly assets/css/tokens.css) */
@layer tokens {
:root{
/* ---------- Palette (raw) ---------- */
--bg: #f7f8fc;
--surface: #ffffff;
--surface-2: #f3f6ff;
--text: #0f172a; /* slate-900 */
--muted: #475569; /* slate-600 */
--muted-2:#64748b; /* slate-500 */
--border: #e5e7eb; /* gray-200 */
/* Brand */
--brand-700:#1d4ed8;
--brand-600:#2563eb;
--brand-500:#3b82f6;
--brand-300:#93c5fd;
--brand-100:#dbeafe;
/* Accent & semantic */
--accent-600:#ea580c; --accent-500:#fb923c; --accent-100:#ffe7d2;
--ok-700:#15803d; --ok-600:#16a34a; --ok-100:#dcfce7;
--info-700:#0369a1; --info-600:#0ea5e9; --info-100:#e0f2fe;
--warn-700:#b45309; --warn-600:#d97706; --warn-100:#fef3c7;
--danger-700:#b91c1c; --danger-600:#ef4444; --danger-100:#fee2e2;
/* Focus ring */
--ring-color:#93c5fd; /* brand-300 */
--ring-width:3px;
--ring-offset:1px;
/* Typography */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
--fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px; --fs-36:36px; --fs-48:48px; --fs-60:60px;
--lh-tight:1.15; --lh-body:1.58; --lh-loose:1.8;
--fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
--letter-tight:-0.02em; --letter-wide:.01em;
/* Spacing scale */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
--sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:56px; --sp-11:64px;
/* Radius & Shadows */
--radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-xl:24px; --round:999px;
--shadow-sm:0 4px 10px rgba(2,6,23,.06);
--shadow-md:0 8px 18px rgba(2,6,23,.08);
--shadow-lg:0 14px 30px rgba(2,6,23,.12);
/* Motion */
--ease-out:cubic-bezier(.2,.8,.2,1);
--ease-in:cubic-bezier(.4,0,1,1);
--dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
/* Layout */
--container:1200px;
--container-narrow:920px;
--gutter-xs:16px;
--gutter-sm:24px;
--gutter-md:40px;
/* Z-index ladder */
--z-nav:40; --z-dropdown:50; --z-overlay:80; --z-modal:100; --z-toast:120;
/* ---------- Semantic aliases (use these in components) ---------- */
--background: var(--bg);
--surface-page: #ffffff; /* page base if needed */
--surface-card: var(--surface);
--text-default: var(--text);
--text-muted: var(--muted);
--border-default: var(--border);
--action-primary-bg: var(--brand-600);
--action-primary-bg-hover: var(--brand-700);
--action-primary-fg: #fff;
--focus-ring-color: var(--ring-color);
}
}
/* Breakpoints (documentation)
xs: 0–639px (base styles, no query)
sm: 640–999px → use @media (min-width: 641px)
md: ≥1000px → use @media (min-width: 1000px)
(No 1200px breakpoint; containers still capped at 1200px.) */
/* =========================
Base minimal reset
========================= */
@layer base {
/* Local Inter (WOFF2) */
@font-face {
font-family: "Inter";
src: url("assets/fonts/inter/Inter.woff2") format("woff2");
font-weight: 100 900; /* if the file is variable; safe even if static */
font-style: normal;
font-display: swap;
}
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; } /* avoids default whitespace around the page */
/* Remove WP/browser defaults everywhere */
a,
a:visited {
color: inherit; /* no purple visited links */
text-decoration: none; /* no underlines */
}
/* Keep focus visible & pretty */
a:focus-visible {
outline: none;
box-shadow:
0 0 0 var(--ring-offset, 1px) #fff,
0 0 0 calc(var(--ring-width, 3px) + var(--ring-offset, 1px)) var(--ring-color, #93c5fd);
border-radius: var(--radius);
}
/* Visually hidden (accessible) */
.screen-reader-text{
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0); /* legacy */
clip-path: inset(50%); /* modern */
white-space: nowrap;
border: 0;
}
/* Reveal when focused (for skip links) — uses tokens */
.screen-reader-text:focus{
position: static !important;
width: auto; height: auto;
margin: 8px 0; padding: 12px 16px;
clip: auto; clip-path: none; white-space: normal;
background: var(--surface);
color: var(--text-default);
border-radius: var(--radius);
box-shadow:
0 0 0 var(--ring-offset) #fff,
0 0 0 calc(var(--ring-width) + var(--ring-offset)) var(--ring-color);
z-index: var(--z-overlay);
}
/* Body (tokens-driven) */
body{
font: var(--fs-16)/var(--lh-body) var(--font-sans);
color: var(--text-default);
background: var(--background);
}
}
/* =========================
Utilities
========================= */
@layer utilities {
/* Classic reading-friendly links only inside .prose */
.prose a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--brand-600); }
.postulia-container,
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter-xs); /* Default mobile gutter */
}
@media (min-width: 641px) {
.postulia-container,
.container {
padding-inline: var(--gutter-sm); /* Tablet gutter */
}
}
@media (min-width: 1000px) {
.postulia-container,
.container {
padding-inline: var(--gutter-md); /* Desktop gutter */
}
}
}
/* =========================
Components — Buttons
========================= */
@layer components {
/* Buttons — Postulia */
.button{
/* Regular: two-color gradient (700→500) */
background-image: linear-gradient(135deg, var(--brand-700), var(--brand-500));
background-repeat: no-repeat;
color: #fff;
border: 1px solid transparent;
background-clip: padding-box;
outline: 1px solid transparent;
transform: translateZ(0);
border-radius: var(--radius); /* 12px in tokens.css */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding-block: var(--btn-py);
padding-inline: var(--btn-px);
min-block-size: var(--btn-min);
inline-size: auto;
max-inline-size: 100%;
box-shadow: var(--shadow-sm);
font: inherit;
font-size: var(--btn-fs);
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
/* Compositor hints + smoothness */
will-change: transform, box-shadow, background-image;
backface-visibility: hidden;
transition: transform var(--dur-1) var(--ease-out),
box-shadow var(--dur-1) var(--ease-out);
}
/* Hover: visually solid brand-700 (keeps gradient type to avoid flicker) */
.button:hover:not(:disabled,[aria-busy="true"]){
background-image: linear-gradient(135deg, var(--brand-700), var(--brand-700));
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.button:active:not(:disabled,[aria-busy="true"]){
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
/* Focus ring */
.button:focus-visible{
outline: none;
box-shadow:
0 0 0 var(--ring-offset) var(--surface),
0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color),
var(--shadow-md);
}
/* Disabled / busy */
.button:disabled,
.button[aria-busy="true"]{
opacity:.55;
cursor:not-allowed;
transform:none;
box-shadow:none;
}
/* Loading indicator */
.button.is-loading,
.button[aria-busy="true"]{ position: relative; pointer-events: none; }
.button.is-loading::before,
.button[aria-busy="true"]::before{
content:"";
inline-size:1em; block-size:1em;
border-radius:50%;
border:2px solid currentColor;
border-top-color:transparent;
display:inline-block;
margin-inline-end: var(--sp-2);
animation: spin var(--dur-2, 200ms) linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Secondary (Outline) */
.button.is-outline{
background: transparent;
color: var(--brand-600);
border-color: var(--brand-600);
box-shadow: none;
}
.button.is-outline:hover:not(:disabled,[aria-busy="true"]){
background: color-mix(in srgb, var(--brand-100) 45%, transparent);
color: var(--brand-700);
border-color: var(--brand-700);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* Block / full width (inherits primary behavior) */
.button.is-block{
display:flex;
inline-size:100%;
/* Set a consistent medium size for block buttons */
--btn-fs: var(--fs-14);
--btn-py: 12px;
--btn-px: 18px;
--btn-min: 44px;
}
/* --- Automatic Responsive Sizing --- */
/* Default Button Size (Mobile / xs: 0-639px) */
.button:not(.is-card):not(.is-block) {
--btn-fs: var(--fs-13);
--btn-py: 10px;
--btn-px: var(--sp-4);
--btn-min: 40px;
}
/* Card Button */
.button.is-card {
--btn-fs: var(--fs-14);
--btn-py: 10px;
--btn-px: 14px;
--btn-min: 40px;
}
/* Tablet Button Size (sm: 641px+) */
@media (min-width: 641px) {
.button:not(.is-card):not(.is-block) {
--btn-fs: var(--fs-14);
--btn-py: 12px;
--btn-px: 18px;
--btn-min: 44px;
}
}
/* Desktop Button Size (md: 1000px+) */
@media (min-width: 1000px) {
.button:not(.is-card):not(.is-block) {
--btn-fs: var(--fs-15);
--btn-py: 14px;
--btn-px: 20px;
--btn-min: 48px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.button{ transition:none; }
.button.is-loading::before,
.button[aria-busy="true"]::before{ animation:none; }
}
/* Badges & Chips — Postulia */
/* Badges (status) — one size across breakpoints */
.badge{
display:inline-flex;
align-items:center;
font-size: var(--fs-13);
font-weight: 400;
line-height: 1;
padding: 6px 10px;
border-radius: var(--round);
border: 1px solid transparent;
}
/* Status variants kept from the prototype */
.badge.is-ok{
color: var(--ok-700);
background: var(--ok-100);
border-color: color-mix(in srgb, var(--ok-700) 18%, transparent);
}
.badge.is-info{
color: var(--info-700);
background: var(--info-100);
border-color: color-mix(in srgb, var(--info-700) 18%, transparent);
}
.badge.is-warn{
color: var(--warn-700);
background: var(--warn-100);
border-color: color-mix(in srgb, var(--warn-700) 18%, transparent);
}
.badge.is-danger{
color: var(--danger-700);
background: var(--danger-100);
border-color: color-mix(in srgb, var(--danger-700) 18%, transparent);
}
/* Chip / Pill (single style, no hover) */
.chip{
--_bg: #fff;
--_fg: var(--muted-2);
--_bd: var(--border);
display:inline-flex;
align-items:center;
gap: var(--sp-2);
font-size: var(--fs-13);
font-weight: 400;
line-height: 1;
padding: 6px 10px;
border-radius: var(--round);
color: var(--_fg);
background: var(--_bg);
border: 1px solid var(--_bd);
text-decoration: none;
}
/* Focus ring (no hover effect by design) */
.chip:focus-visible{
outline: none;
box-shadow:
0 0 0 var(--ring-offset) #fff,
0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color);
}
} /* @layer components */
/* === Header (merged from assets/css/header.css) === */
@layer components {
/* --- Sticky header --- */
.header{
position: sticky;
top: 0;
z-index: 40;
background: rgba(255,255,255,.92); /* fallback */
background: color-mix(in oklab, var(--surface) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border-default);
transition: transform .18s var(--ease-out);
}
.header.is-hidden{ transform: translateY(-100%); }
/* Header inner sizing using the container wrapper */
.header .container{
min-height: 72px; /* desktop default */
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
@media (max-width: 999.98px){
.header .container{ min-height: 64px; }
}
/* Cap & center the header container (normalize with site pattern) */
.header > .container{
max-width: var(--container);
margin-inline: auto;
/* gutters below */
}
/* --- Brand --- */
.logo{ display:inline-flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:-.01em; }
.logo i{
width:34px; height:34px; border-radius:10px;
background: conic-gradient(from 210deg at 70% 0%, var(--brand-500), var(--brand-600) 50%, var(--accent-500) 50%, #ffcc80);
box-shadow: var(--shadow-md);
}
/* --- Site logo sizing (CSS-only, exact box) --- */
/* Applies to ![]()
and inline