/* ============================================================ Optimum°, Revue scientifique éditoriale Design system v2, refonte complète ============================================================ */ :root { /* Palette papier + encre */ --paper: #FAFAF7; --paper-warm: #F5F2EA; --ink: #1A1815; --ink-soft: #3A352E; --ink-mute: #6B6357; --rule: #D4CFC2; --rust: #7C2D12; --rust-deep: #5C1E0A; --sky: #0EA5E9; --sky-deep: #0369A1; /* Typographie */ --serif-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif; --serif-body: 'Newsreader', 'Source Serif Pro', Georgia, serif; --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* Rythme */ --measure: 65ch; --gutter: clamp(1.25rem, 4vw, 2.5rem); } /* === RESET / FOUNDATION === */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } @media (min-width: 768px) { html { font-size: 17px; } } html, body, .gh-viewport { font-family: var(--serif-body) !important; font-feature-settings: "ss01", "ss02", "kern", "liga"; background: var(--paper) !important; color: var(--ink) !important; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--rust); color: var(--paper); } /* === Typographie : titres serif italique éditoriaux === */ h1, h2, h3, h4, h5, h6, .gh-canvas h1, .gh-canvas h2, .gh-canvas h3, .gh-article-title { font-family: var(--serif-display) !important; font-weight: 400; font-style: italic; letter-spacing: -0.015em; color: var(--ink) !important; font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0; line-height: 1.05; } /* Article body */ .gh-content, .gh-content p, .gh-canvas p, article p { font-family: var(--serif-body) !important; font-feature-settings: "ss01", "kern", "liga", "onum"; font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); } .gh-content h2, .gh-canvas h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 2.5rem; margin-bottom: 1rem; } .gh-content h3, .gh-canvas h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 2rem; margin-bottom: 0.75rem; font-style: italic; } /* Drop cap on first paragraph of articles (subtle) */ .gh-content > p:first-of-type::first-letter, .gh-canvas > p:first-of-type::first-letter { font-family: var(--serif-display); font-style: normal; font-weight: 500; font-size: 4.2em; line-height: 0.85; float: left; margin: 0.05em 0.08em -0.1em 0; color: var(--rust); font-variation-settings: "opsz" 144, "SOFT" 30; } /* Links, souligne offset à la presse écrite */ a, a:link { color: var(--rust); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(124, 45, 18, 0.35); transition: text-decoration-color 0.18s ease, color 0.18s ease; } a:hover { color: var(--rust-deep); text-decoration-color: var(--rust); } /* Blockquotes, pull quotes éditoriaux */ .gh-content blockquote, .gh-canvas blockquote { border: none; background: none; padding: 1.5rem 0; margin: 2.5rem 0; font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.3; color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; } .gh-content blockquote p, .gh-canvas blockquote p { font-size: inherit; color: inherit; font-family: inherit; margin: 0; } /* === Header, minimal, magazine === */ .gh-head { background: var(--paper); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid var(--rule); padding: 1.1rem var(--gutter); } .gh-head-logo, .gh-site-title, .site-title { font-family: var(--serif-display) !important; font-style: italic; font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--ink) !important; font-variation-settings: "opsz" 60, "SOFT" 30; } .gh-head-logo::after, .gh-site-title::after { content: "°"; font-style: normal; color: var(--rust); font-feature-settings: normal; } .gh-head-logo img { display: none; } .gh-head-actions a { color: var(--ink) !important; text-decoration: none; } .gh-nav, .gh-head-menu { font-family: var(--mono) !important; font-size: 0.72rem !important; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } /* === Buttons, sober, editorial === */ .gh-button, button.gh-button, .gh-portal-btn, .gh-portal-btn-primary, button[data-portal] { background: var(--ink) !important; color: var(--paper) !important; border: none !important; border-radius: 0 !important; padding: 0.95rem 1.75rem !important; font-family: var(--mono) !important; font-weight: 500 !important; font-size: 0.78rem !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; transition: background 0.15s ease, transform 0.1s ease !important; cursor: pointer; } .gh-button:hover, button.gh-button:hover, .gh-portal-btn:hover, button[data-portal]:hover { background: var(--rust) !important; transform: none; } .gh-button:active { transform: scale(0.99); } /* Variant: ghost button (rust border) */ .btn-ghost { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; } .btn-ghost:hover { background: var(--ink) !important; color: var(--paper) !important; } /* === Inputs editorial === */ input[type="email"], .gh-subscribe-form input[type="email"] { background: transparent; border: none; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 0.85rem 0; font-family: var(--serif-body); font-size: 1.05rem; color: var(--ink); width: 100%; } input[type="email"]:focus, .gh-subscribe-form input[type="email"]:focus { outline: none; border-bottom-color: var(--rust); } input[type="email"]::placeholder { color: var(--ink-mute); font-style: italic; } /* === FOOTER, Ours éditorial === */ .gh-footer { background: var(--paper-warm); color: var(--ink); border-top: 1px solid var(--rule); padding: 4rem var(--gutter) 2.5rem !important; position: relative; z-index: 2; } .gh-footer-inner { max-width: 1100px; margin: 0 auto; } .gh-footer a { color: var(--rust); } /* Hide Source theme footer signup (we render our own in home) */ .gh-footer-signup { display: none !important; } /* Keep footer-bar minimal: nav + logo */ .gh-footer-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; } .gh-footer-logo { font-family: var(--serif-display) !important; font-style: italic; font-size: 1.1rem; font-weight: 500; color: var(--ink) !important; text-align: center; } .gh-footer-logo::after { content: "°"; font-style: normal; color: var(--rust); } .gh-footer-logo img { display: none; } .gh-footer-menu { font-family: var(--mono) !important; font-size: 0.7rem !important; letter-spacing: 0.14em; text-transform: uppercase; } .gh-footer-copyright { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); text-align: right; } .gh-footer-copyright a { color: var(--ink); text-decoration: none; margin-right: 1rem; } .gh-footer-copyright a:hover { color: var(--rust); } /* === HOME, Magazine asymetric layout === */ .opt-cartouche { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); padding: 4rem var(--gutter) 0.5rem; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 1.5rem; } .opt-cartouche .ed-title { color: var(--ink); } .opt-cartouche .ed-title em { font-family: var(--serif-display); font-style: italic; text-transform: none; letter-spacing: -0.01em; font-size: 1rem; color: var(--ink); } .opt-cartouche .ed-meta { color: var(--ink-mute); } .opt-hero { max-width: 1200px; margin: 0 auto; padding: 4rem var(--gutter) 5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; position: relative; } @media (min-width: 900px) { .opt-hero { grid-template-columns: 7fr 5fr; gap: 4rem; } } .opt-hero h1 { font-family: var(--serif-display) !important; font-style: italic; font-weight: 300; font-size: clamp(3.2rem, 9vw, 6.5rem); line-height: 0.96; letter-spacing: -0.025em; margin: 0; font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1; color: var(--ink); } .opt-hero h1 .deg { font-style: normal; color: var(--rust); font-feature-settings: normal; font-weight: 400; } .opt-hero h1 .accent { font-style: normal; font-weight: 500; color: var(--rust); font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; } .opt-hero-aside { display: flex; flex-direction: column; justify-content: flex-end; } .opt-hero-tagline { font-family: var(--serif-body); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-soft); max-width: 38ch; margin: 0 0 2rem; } .opt-hero-tagline em { font-family: var(--serif-display); font-style: italic; color: var(--ink); } .opt-hero-byline { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 2rem; display: flex; align-items: center; gap: 0.75rem; } .opt-hero-byline::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--ink-mute); } .opt-hero-actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .opt-subscribe-inline { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink); width: 100%; max-width: 420px; } .opt-subscribe-inline input { flex: 1; border: none !important; background: transparent; padding: 0.85rem 0; font-family: var(--serif-body); font-size: 1.05rem; } .opt-subscribe-inline button { background: transparent !important; color: var(--ink) !important; padding: 0.85rem 0 0.85rem 1rem !important; font-family: var(--mono) !important; font-size: 0.72rem !important; letter-spacing: 0.16em !important; text-transform: uppercase; border: none !important; cursor: pointer; white-space: nowrap; transition: color 0.15s ease; } .opt-subscribe-inline button:hover { color: var(--rust) !important; } .opt-hero-secondary { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 1rem; } .opt-hero-secondary a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; } .opt-hero-secondary a:hover { border-bottom-color: var(--rust); color: var(--rust); } /* === Latest issue (magazine block) === */ .opt-latest-block { max-width: 1200px; margin: 0 auto; padding: 4rem var(--gutter); border-top: 1px solid var(--rule); } .opt-latest-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 1.5rem; } .opt-latest-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; } @media (min-width: 800px) { .opt-latest-grid { grid-template-columns: 1fr 2fr; gap: 3rem; } } .opt-latest-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .opt-latest h2 { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0.75rem 0 1.25rem; } .opt-latest h2 a { color: var(--ink); text-decoration: none; } .opt-latest h2 a:hover { color: var(--rust); } .opt-latest-excerpt { font-family: var(--serif-body); font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.5rem; } .opt-empty { font-family: var(--serif-body); font-size: 1.15rem; font-style: italic; color: var(--ink-mute); text-align: center; padding: 3rem 0; } .opt-empty strong { font-family: var(--serif-display); font-style: italic; color: var(--rust); font-weight: 500; } /* === Comment ça marche, colonnes typographiques === */ .opt-howto { max-width: 1200px; margin: 0 auto; padding: 5rem var(--gutter); border-top: 1px solid var(--rule); } .opt-howto-eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); text-align: center; margin: 0 0 1rem; } .opt-howto-title { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 3.5vw, 2.6rem); text-align: center; margin: 0 0 4rem; letter-spacing: -0.02em; } .opt-howto-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; } @media (min-width: 800px) { .opt-howto-grid { grid-template-columns: repeat(3, 1fr); gap: 0; } .opt-howto-step + .opt-howto-step { border-left: 1px solid var(--rule); padding-left: 2.5rem; } .opt-howto-step:not(:last-child) { padding-right: 2.5rem; } } .opt-howto-step .roman { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--rust); margin-bottom: 1rem; display: block; } .opt-howto-step h3 { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 1.5rem; letter-spacing: -0.01em; margin: 0 0 1rem; color: var(--ink); } .opt-howto-step p { font-family: var(--serif-body); font-size: 1rem; line-height: 1.65; color: var(--ink-soft); margin: 0; } /* === Devise === */ .opt-devise { text-align: center; padding: 5rem var(--gutter) 6rem; font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; border-top: 1px solid var(--rule); } .opt-devise small { display: block; margin-top: 1.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-style: normal; color: var(--ink-mute); } /* === Body must be above any overlay === */ .gh-viewport, .gh-main, main { position: relative; z-index: 1; } /* === Page-load reveal (refined) === */ @media (prefers-reduced-motion: no-preference) { .opt-hero h1, .opt-cartouche, .opt-hero-aside { animation: opt-fade-up 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } .opt-hero h1 { animation-delay: 200ms; } .opt-cartouche { animation-delay: 50ms; } .opt-hero-aside { animation-delay: 500ms; } @keyframes opt-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } } /* === Cartouche : 3 columns layout with mother-brand back-link === */ .opt-cartouche { display: grid !important; grid-template-columns: 1fr 1fr 1fr; align-items: baseline; gap: 1rem; } .opt-cartouche .ed-title { justify-self: start; } .opt-cartouche .ed-meta { justify-self: center; text-align: center; } .opt-cartouche .ed-mother { justify-self: end; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; border-bottom: 1px dotted var(--rule); padding-bottom: 1px; transition: color 0.18s ease, border-color 0.18s ease; } .opt-cartouche .ed-mother:hover { color: var(--rust); border-bottom-color: var(--rust); } .opt-cartouche .ed-mother span { margin-left: 0.25rem; display: inline-block; transition: transform 0.18s ease; } .opt-cartouche .ed-mother:hover span { transform: translate(2px, -2px); } @media (max-width: 700px) { .opt-cartouche { grid-template-columns: 1fr; gap: 0.4rem; text-align: center; } .opt-cartouche .ed-title, .opt-cartouche .ed-meta, .opt-cartouche .ed-mother { justify-self: center; } } /* ============================================================ Premium section, magazine offer block ============================================================ */ .opt-premium { background: var(--paper-warm); border-top: 1px solid var(--rule); padding: 6rem var(--gutter); position: relative; overflow: hidden; } .opt-premium-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; align-items: center; } @media (min-width: 900px) { .opt-premium-grid { grid-template-columns: 5fr 7fr; gap: 5rem; } } /* === PDF cover mock-up (pure CSS) === */ .opt-premium-cover-wrap { display: flex; justify-content: center; perspective: 1200px; } .opt-premium-cover { width: 100%; max-width: 340px; aspect-ratio: 210 / 297; background: var(--paper); border: 1px solid var(--rule); padding: 2rem 1.75rem 1.5rem; display: flex; flex-direction: column; position: relative; box-shadow: 0 1px 0 rgba(26, 24, 21, 0.08), 0 12px 24px -8px rgba(26, 24, 21, 0.12), 0 24px 48px -12px rgba(26, 24, 21, 0.08); transform: rotate(-1.8deg); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); } .opt-premium-cover::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 30%, rgba(26,24,21,0.025) 0%, transparent 60%), radial-gradient(circle at 80% 70%, rgba(26,24,21,0.02) 0%, transparent 50%); pointer-events: none; } .opt-premium-cover:hover { transform: rotate(-0.5deg) translateY(-4px); } .opt-premium-cover .cover-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 2rem; } .opt-premium-cover .cover-title { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: 2.4rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.5rem; font-variation-settings: "opsz" 144, "SOFT" 50; } .opt-premium-cover .cover-title .deg { font-style: normal; color: var(--rust); } .opt-premium-cover .cover-rule { width: 40px; height: 1px; background: var(--rust); margin-bottom: 1.5rem; } .opt-premium-cover .cover-eyebrow { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); margin-bottom: 0.75rem; } .opt-premium-cover .cover-feature { font-family: var(--serif-display); font-style: italic; font-weight: 300; font-size: 1.65rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); margin-bottom: auto; font-variation-settings: "opsz" 144, "SOFT" 50; } .opt-premium-cover .cover-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; padding-top: 1.5rem; border-top: 1px solid var(--rule); } /* === Pitch column === */ .opt-premium-eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rust); margin: 0 0 1rem; } .opt-premium h2 { font-family: var(--serif-display); font-style: italic; font-weight: 300; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; margin: 0 0 1.5rem; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1; } .opt-premium h2 em { font-weight: 500; color: var(--rust); } .opt-premium-lede { font-family: var(--serif-body); font-size: 1.15rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 2rem; max-width: 50ch; } .opt-premium-benefits { list-style: none; padding: 0; margin: 0 0 2.5rem; border-top: 1px solid var(--rule); } .opt-premium-benefits li { font-family: var(--serif-body); font-size: 1.02rem; line-height: 1.55; color: var(--ink); padding: 0.95rem 0; border-bottom: 1px solid var(--rule); display: flex; gap: 1rem; } .opt-premium-benefits li .bul { font-family: var(--mono); color: var(--rust); font-weight: 500; flex: 0 0 1rem; } .opt-premium-benefits li em { font-family: var(--serif-display); font-style: italic; } .opt-premium-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; } @media (max-width: 600px) { .opt-premium-prices { grid-template-columns: 1fr; gap: 1rem; } } .opt-premium-prices .price { padding: 1.5rem 1.25rem; border: 1px solid var(--rule); background: var(--paper); display: flex; flex-direction: column; align-items: flex-start; position: relative; } .opt-premium-prices .price-featured { border-color: var(--ink); background: var(--paper); } .opt-premium-prices .price-featured::before { content: "★"; position: absolute; top: -10px; left: 1.25rem; background: var(--rust); color: var(--paper); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; } .opt-premium-prices .price-label { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.5rem; } .opt-premium-prices .price-featured .price-label { color: var(--rust); } .opt-premium-prices .price-amount { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: 2.5rem; line-height: 1; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 50; } .opt-premium-prices .price-amount .cents { font-size: 1rem; color: var(--ink-mute); font-style: normal; font-feature-settings: "onum"; } .opt-premium-prices .price-period { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.4rem; } .opt-premium-actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .opt-premium-actions .gh-button { background: var(--rust) !important; font-size: 0.84rem !important; padding: 1.05rem 2rem !important; } .opt-premium-actions .gh-button:hover { background: var(--rust-deep) !important; } .opt-premium-deal { font-family: var(--serif-body); font-size: 0.93rem; line-height: 1.5; color: var(--ink-soft); margin: 0; padding: 0.75rem 1rem; background: rgba(124, 45, 18, 0.06); border-left: 2px solid var(--rust); } .opt-premium-deal strong { font-family: var(--serif-display); font-style: italic; font-weight: 500; color: var(--rust); } .opt-premium-founding { font-family: var(--serif-body); font-size: 0.93rem; font-style: italic; line-height: 1.55; color: var(--ink-mute); margin: 1.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); } /* ============================================================ HYBRID ACCESSIBILITY OVERRIDES (audience 50+, brain fog, presbyopia) These overrides come last and intentionally override earlier rules. ============================================================ */ /* === 1. Hero H1 : roman by default, italic only on emphasis === */ .opt-hero h1 { font-style: normal !important; font-weight: 400 !important; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0 !important; } .opt-hero h1 em { font-style: italic; font-weight: 400; color: var(--rust); font-variation-settings: "opsz" 144, "SOFT" 30; } .opt-hero h1 .accent { font-weight: 500; font-style: normal; } /* === 2. Body article : +0.05rem for senior comfort === */ .gh-content, .gh-content p, .gh-canvas p, article p { font-size: 1.15rem !important; line-height: 1.75 !important; } .gh-content h2, .gh-canvas h2 { font-size: clamp(1.85rem, 3.2vw, 2.4rem); } .gh-content h3, .gh-canvas h3 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); } /* === 3. Mono labels : larger for legibility === */ .opt-cartouche { font-size: 0.82rem !important; letter-spacing: 0.14em !important; } .opt-cartouche .ed-meta { font-size: 0.78rem !important; } .opt-cartouche .ed-mother { font-size: 0.78rem !important; letter-spacing: 0.12em !important; } .opt-hero-byline { font-size: 0.82rem !important; letter-spacing: 0.14em !important; } .opt-hero-secondary { font-size: 0.85rem !important; letter-spacing: 0.10em !important; } .opt-latest-label, .opt-howto-eyebrow, .opt-premium-eyebrow { font-size: 0.84rem !important; letter-spacing: 0.16em !important; } .opt-latest-meta { font-size: 0.82rem !important; letter-spacing: 0.12em !important; } .opt-howto-step .roman { font-size: 0.92rem !important; letter-spacing: 0.16em !important; } .gh-footer-menu, .gh-footer-copyright { font-size: 0.82rem !important; letter-spacing: 0.12em !important; } /* === 4. Tagline more readable === */ .opt-hero-tagline { font-size: clamp(1.18rem, 1.6vw, 1.32rem) !important; line-height: 1.6 !important; color: var(--ink-soft) !important; } /* === 5. Form inscription, visible, intuitive, clear === */ .opt-form { width: 100%; max-width: 480px; } .opt-form-label { display: block; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.6rem; } .opt-form-row { display: flex; flex-direction: column; gap: 0.6rem; background: var(--paper-warm); border: 1.5px solid var(--ink); border-radius: 0; padding: 0; transition: border-color 0.18s ease; } @media (min-width: 540px) { .opt-form-row { flex-direction: row; align-items: stretch; } } .opt-form-row:focus-within { border-color: var(--rust); } .opt-form-row input[type="email"] { flex: 1; border: none !important; background: transparent !important; padding: 1rem 1.2rem !important; font-family: var(--serif-body); font-size: 1.05rem; color: var(--ink); min-height: 52px; } .opt-form-row input[type="email"]:focus { outline: none !important; border: none !important; } .opt-form-row input[type="email"]::placeholder { color: var(--ink-mute); font-style: italic; opacity: 0.7; } .opt-form-btn { background: var(--rust) !important; color: var(--paper) !important; border: none !important; border-radius: 0 !important; padding: 0.9rem 1.6rem !important; font-family: var(--mono) !important; font-weight: 600 !important; font-size: 0.88rem !important; letter-spacing: 0.10em !important; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 0.15s ease; min-height: 52px; } .opt-form-btn:hover { background: var(--rust-deep) !important; } .opt-form-help { font-family: var(--serif-body); font-size: 0.92rem; font-style: italic; color: var(--ink-mute); margin: 0.85rem 0 0; line-height: 1.5; } /* === 6. Site-wide buttons : bigger, clearer text, no ALL CAPS for primary actions === */ .gh-button, button.gh-button, .gh-portal-btn, .gh-portal-btn-primary { font-size: 0.92rem !important; letter-spacing: 0.10em !important; padding: 1rem 1.85rem !important; font-weight: 600 !important; } /* === 7. Inputs ailleurs (founding page, footer signup) === */ .gh-content input[type="email"], .gh-canvas input[type="email"] { border: 1.5px solid var(--ink) !important; border-radius: 0; padding: 1rem 1.2rem !important; background: var(--paper-warm) !important; font-size: 1.05rem !important; font-family: var(--serif-body) !important; } .gh-content input[type="email"]:focus, .gh-canvas input[type="email"]:focus { border-color: var(--rust) !important; outline: none !important; } /* === 8. Hero CTA : keep it visually grouped with the form === */ .opt-hero-actions { width: 100%; gap: 1.25rem; } /* === 9. Smooth focus rings (accessibility) === */ *:focus-visible { outline: 2px solid var(--rust) !important; outline-offset: 2px; } /* ============================================================ OPTION 4 — Senior-friendly section separation Alternating backgrounds + numbered sections + larger padding ============================================================ */ /* === Section backgrounds : alternating cream / warm === */ .opt-hero { background: var(--paper); } .opt-latest-block { background: var(--paper-warm); border-top: none !important; padding: 6.5rem var(--gutter) !important; } .opt-howto { background: var(--paper); border-top: none !important; padding: 6.5rem var(--gutter) !important; } .opt-premium { background: var(--paper-warm); padding: 6.5rem var(--gutter) !important; } .opt-devise { background: var(--paper); border-top: none !important; padding: 6rem var(--gutter) 7rem !important; } /* === Numbered section header (01 / 02 / 03) === */ .opt-section-num { display: flex; align-items: center; gap: 1.25rem; margin: 0 0 3rem; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0; } .opt-section-num .num { font-family: var(--mono); font-size: 2rem; font-weight: 600; color: var(--rust); letter-spacing: -0.01em; line-height: 1; flex-shrink: 0; } .opt-section-num .num-rule { flex: 0 0 60px; height: 1.5px; background: var(--rust); display: inline-block; } .opt-section-num .num-label { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); } /* Center the numbered header for the howto + premium sections title context */ .opt-howto .opt-section-num, .opt-premium .opt-section-num { justify-content: center; } @media (max-width: 600px) { .opt-section-num { flex-direction: column; gap: 0.5rem; text-align: center; } .opt-section-num .num-rule { display: none; } } /* === Devise section : ornament instead of just text === */ .opt-devise { text-align: center; position: relative; } .opt-devise::before { content: "✦"; display: block; font-family: var(--serif-display); font-size: 1.4rem; color: var(--rust); margin-bottom: 2rem; letter-spacing: 0.5em; } /* === Latest block: keep existing label hidden if duplicated === */ .opt-latest-label { display: none !important; } /* === Howto title : tighter to numbered header === */ .opt-howto-title { margin-top: 0 !important; } .opt-premium h2 { margin-top: 0 !important; } /* === Form simplified : input + button as direct children === */ .opt-form { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 480px; } .opt-form-label { display: block; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.25rem; } .opt-form input[type="email"] { border: 1.5px solid var(--ink) !important; background: var(--paper-warm) !important; border-radius: 0 !important; padding: 1rem 1.2rem !important; font-family: var(--serif-body) !important; font-size: 1.05rem !important; color: var(--ink) !important; width: 100% !important; min-height: 52px; margin: 0; } .opt-form input[type="email"]:focus { outline: none !important; border-color: var(--rust) !important; box-shadow: 0 0 0 2px rgba(124, 45, 18, 0.15); } .opt-form input[type="email"]::placeholder { color: var(--ink-mute); font-style: italic; opacity: 0.7; } .opt-form-btn { background: var(--rust) !important; color: var(--paper) !important; border: none !important; border-radius: 0 !important; padding: 1rem 1.6rem !important; font-family: var(--mono) !important; font-weight: 600 !important; font-size: 0.88rem !important; letter-spacing: 0.10em !important; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease; min-height: 52px; width: 100%; margin-top: 0.25rem; } .opt-form-btn:hover { background: var(--rust-deep) !important; } .opt-form-help { font-family: var(--serif-body); font-size: 0.92rem; font-style: italic; color: var(--ink-mute); margin: 0.5rem 0 0; line-height: 1.5; } .opt-form-success { font-family: var(--serif-body); font-size: 1rem; color: #166534; background: rgba(34, 197, 94, 0.08); border-left: 2px solid #166534; padding: 0.85rem 1.1rem; margin: 0.5rem 0 0; } .opt-form-error { font-family: var(--serif-body); font-size: 1rem; color: var(--rust-deep); background: rgba(124, 45, 18, 0.08); border-left: 2px solid var(--rust-deep); padding: 0.85rem 1.1rem; margin: 0.5rem 0 0; } /* === Success message — rich and reassuring === */ .opt-form-success { background: rgba(22, 101, 52, 0.06); border-left: 3px solid #166534; padding: 1.5rem 1.5rem 1.25rem !important; margin: 0.5rem 0 0 !important; font-family: var(--serif-body); display: none; } .opt-form-success .success-title { font-family: var(--serif-display); font-style: italic; font-weight: 500; font-size: 1.4rem; color: #166534; margin: 0 0 0.6rem !important; line-height: 1.2; } .opt-form-success .success-title::before { content: "✓"; font-style: normal; margin-right: 0.4rem; font-weight: 700; } .opt-form-success .success-body { font-size: 1.02rem; line-height: 1.6; color: var(--ink) !important; margin: 0 0 0.85rem !important; } .opt-form-success .success-spam { font-size: 0.96rem; line-height: 1.55; color: var(--ink-soft) !important; background: rgba(124, 45, 18, 0.05); border-left: 2px solid var(--rust); padding: 0.65rem 0.85rem; margin: 0 0 0.85rem !important; } .opt-form-success .success-spam strong { color: var(--rust); } .opt-form-success .success-tip { font-size: 0.92rem; font-style: italic; color: var(--ink-mute) !important; margin: 0 !important; line-height: 1.5; } .opt-form-success .success-tip code { font-family: var(--mono); font-size: 0.88rem; background: rgba(26, 24, 21, 0.05); padding: 0.15rem 0.4rem; border-radius: 3px; font-style: normal; color: var(--ink); } /* === Member greeting states (Free / Paid) === */ .opt-member-greeting { background: rgba(14, 165, 233, 0.05); border-left: 3px solid var(--sky); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; } .opt-member-greeting .greeting-line { font-family: var(--serif-display); font-style: italic; font-size: 1.4rem; font-weight: 400; color: var(--ink); margin: 0 0 0.4rem; line-height: 1.2; } .opt-member-greeting .greeting-line strong { font-style: normal; font-weight: 500; color: var(--sky-deep); } .opt-member-greeting .greeting-detail { font-family: var(--serif-body); font-size: 1rem; color: var(--ink-soft); margin: 0; line-height: 1.55; } /* Paid variant: rust tone */ .opt-member-greeting-paid { background: rgba(124, 45, 18, 0.06); border-left-color: var(--rust); } .opt-member-greeting-paid .greeting-line strong { color: var(--rust); } /* Free upgrade box */ .opt-member-upgrade { border: 1.5px solid var(--ink); background: var(--paper-warm); padding: 1.5rem 1.5rem 1.75rem; margin-top: 0.5rem; } .opt-member-upgrade .upgrade-eyebrow { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); margin: 0 0 0.6rem; } .opt-member-upgrade .upgrade-pitch { font-family: var(--serif-body); font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 1.25rem; } .opt-member-upgrade .upgrade-pitch strong { color: var(--ink); } .opt-member-upgrade .opt-form-btn { background: var(--rust) !important; } /* Paid actions: archive button + manage account */ .opt-member-actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .opt-member-actions .opt-form-btn { background: var(--ink) !important; } .opt-member-actions .opt-form-btn:hover { background: var(--rust) !important; } .opt-member-actions a { color: var(--ink); } /* ============================================================ AUDIT-DRIVEN CLEANUP (FINDING-002 + FINDING-003) ============================================================ */ /* === FINDING-002 : drop cap should only apply if there's a meaningful first paragraph === */ /* Override: only apply drop cap if the first

is NOT preceded by a blockquote pull-quote */ .gh-content > blockquote:first-child + p::first-letter, .gh-canvas > blockquote:first-child + p::first-letter { /* If a blockquote is the first element, no drop cap on the next p — too visually busy */ font-size: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; float: none; margin: 0; color: inherit; font-variation-settings: normal; } /* === FINDING-003 : consolidate border-left patterns === Before: 7 distinct colored-left-border encarts (sky / vert / rust / nested rust / etc.) After: only 2 semantic colors used — sky for "info/welcome" + rust for "warning/action". The success message keeps green for accessibility (universal success signal). */ /* Remove redundant rust border-left on .opt-form-success .success-spam (nested already inside green block) */ .opt-form-success .success-spam { border-left: none !important; background: rgba(124, 45, 18, 0.04) !important; padding: 0.75rem 0.95rem !important; border-radius: 2px; } /* === FINDING-004 : the residual in devise === */ .opt-devise small { display: inline-block; margin-left: 0; } .opt-devise small::before { content: ""; display: block; margin-bottom: 0.5rem; } /* === Clickable pricing boxes (FINDING — user wanted choice between monthly/yearly) === */ .price-link { text-decoration: none; display: block; color: inherit; border-bottom: none !important; } .price-link:hover { color: inherit; } .opt-premium-prices .price { position: relative; cursor: pointer; transition: border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease; } .opt-premium-prices .price-link:hover .price { border-color: var(--rust); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(26, 24, 21, 0.06); } .opt-premium-prices .price-cta { display: block; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); transition: color 0.18s ease; } .opt-premium-prices .price-link:hover .price-cta { color: var(--rust); } /* === Deal CTA link inside Founder's Deal box === */ .opt-premium-deal .deal-cta { display: inline-block; margin-top: 0.6rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust-deep) !important; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--rust); } .opt-premium-deal .deal-cta:hover { color: var(--rust) !important; text-decoration-color: var(--rust-deep); } /* === Archive page === */ .opt-archive { max-width: 900px; margin: 0 auto; padding: 4rem var(--gutter) 6rem; } .opt-archive-header { margin-bottom: 4rem; padding-bottom: 3rem; border-bottom: 1px solid var(--rule); } .opt-archive-eyebrow { font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rust); margin: 0 0 1rem; } .opt-archive h1 { font-family: var(--serif-display); font-style: italic; font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 1.25rem; color: var(--ink); font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1; } .opt-archive h1 .deg { font-style: normal; color: var(--rust); } .opt-archive-tagline { font-family: var(--serif-body); font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; margin: 0; } .opt-archive-list { display: flex; flex-direction: column; gap: 0; } .opt-archive-item { padding: 2rem 0; border-bottom: 1px solid var(--rule); } .opt-archive-item:last-child { border-bottom: none; } .archive-meta { display: flex; gap: 1.25rem; align-items: center; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.75rem; } .archive-meta .archive-lock { background: rgba(124, 45, 18, 0.08); color: var(--rust); padding: 0.15rem 0.5rem; border: 1px solid rgba(124, 45, 18, 0.2); letter-spacing: 0.14em; } .archive-title { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.75rem; } .archive-title a { color: var(--ink); text-decoration: none; } .archive-title a:hover { color: var(--rust); } .archive-excerpt { font-family: var(--serif-body); font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 70ch; } /* === Archive filter chips === */ .opt-archive-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .opt-archive-filter { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; background: transparent; color: var(--ink-mute); border: 1px solid var(--rule); padding: 0.55rem 1rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .opt-archive-filter:hover { border-color: var(--ink); color: var(--ink); } .opt-archive-filter[data-active="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .opt-archive-filter-fav[data-active="true"] { background: var(--rust); border-color: var(--rust); } /* === Star button (favorite) === */ .archive-fav-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; background: transparent; border: 1px solid var(--rule); padding: 0.5rem 0.85rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .archive-fav-btn:hover:not(:disabled) { border-color: var(--rust); color: var(--rust); } .archive-fav-btn .fav-icon { font-size: 0.95rem; line-height: 1; color: var(--ink-mute); transition: color 0.15s ease, transform 0.15s ease; } .archive-fav-btn:hover .fav-icon { color: var(--rust); } .archive-fav-btn.is-fav { border-color: var(--rust); color: var(--rust); background: rgba(124, 45, 18, 0.04); } .archive-fav-btn.is-fav .fav-icon { color: var(--rust); transform: scale(1.1); } .archive-fav-btn.is-loading { opacity: 0.5; cursor: progress; } .archive-fav-btn:disabled { cursor: progress; } /* Empty state when filter has no matches */ #opt-archive-empty[hidden] { display: none; } /* ============================================================ ARCHIVE V2 : "Sommaire de revue scientifique" 3-column layout per item: number+date / body / bookmark action ============================================================ */ /* Reset old styles before applying new */ .opt-archive { padding: 4rem var(--gutter) 6rem; } .opt-archive-list { display: flex; flex-direction: column-reverse; gap: 0; } /* === Filters (taller, with counts) === */ .opt-archive-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 4rem; padding-bottom: 2rem; border-bottom: 2px solid var(--ink); align-items: center; } .opt-archive-filter { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; background: transparent; color: var(--ink-mute); border: 1px solid var(--rule); padding: 0.7rem 1.1rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s; border-radius: 0; } .opt-archive-filter:hover { border-color: var(--ink); color: var(--ink); } .opt-archive-filter:active { transform: scale(0.98); } .opt-archive-filter[data-active="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .opt-archive-filter .filter-count { font-size: 0.7rem; font-weight: 400; opacity: 0.55; padding-left: 0.35rem; border-left: 1px solid currentColor; margin-left: 0.1rem; } .opt-archive-filter[data-active="true"] .filter-count { opacity: 0.75; } .opt-archive-filter-fav { margin-left: auto; border-color: var(--rust); color: var(--rust); } .opt-archive-filter-fav .fav-star { font-size: 0.95rem; line-height: 1; } .opt-archive-filter-fav:hover { background: rgba(124, 45, 18, 0.06); color: var(--rust); border-color: var(--rust); } .opt-archive-filter-fav[data-active="true"] { background: var(--rust); border-color: var(--rust); color: var(--paper); } /* === Item layout: 3 columns sommaire === */ .opt-archive-item { display: grid; grid-template-columns: 9rem 1fr auto; gap: 2.5rem; padding: 2.25rem 0; border-bottom: 1px solid var(--rule); position: relative; transition: background 0.15s ease; } .opt-archive-item:last-child { border-bottom: none; } .opt-archive-item:hover { background: rgba(26, 24, 21, 0.015); } @media (max-width: 720px) { .opt-archive-item { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; } } /* Left column: number + date + meta */ .archive-num-col { border-right: 1px solid var(--rule); padding-right: 2rem; display: flex; flex-direction: column; gap: 0.25rem; } @media (max-width: 720px) { .archive-num-col { border-right: none; padding-right: 0; flex-direction: row; align-items: baseline; gap: 1rem; flex-wrap: wrap; } } .archive-num { font-family: var(--mono); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--rust); line-height: 1.2; } .archive-date { font-family: var(--mono); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.06em; color: var(--ink); } .archive-meta-line { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.4rem; } .archive-time { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .archive-lock { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rust); background: rgba(124, 45, 18, 0.07); border: 1px solid rgba(124, 45, 18, 0.2); padding: 0.1rem 0.45rem; } /* Body column: title + excerpt + read link */ .archive-body-col { min-width: 0; } .archive-title { font-family: var(--serif-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.85rem; font-variation-settings: "opsz" 144, "SOFT" 50; } .archive-title a { color: var(--ink); text-decoration: none; background-image: linear-gradient(to right, var(--rust), var(--rust)); background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.3s ease, color 0.15s ease; padding-bottom: 0.1em; } .archive-title a:hover { color: var(--rust); background-size: 100% 1.5px; } .archive-excerpt { font-family: var(--serif-body); font-size: 1.02rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 1rem; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .archive-read-link { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.15s ease, color 0.15s ease; } .archive-read-link:hover { color: var(--rust-deep); border-bottom-color: var(--rust); } /* Action column: bookmark button */ .archive-action-col { display: flex; align-items: flex-start; justify-content: flex-end; } @media (max-width: 720px) { .archive-action-col { justify-content: flex-start; margin-top: -0.5rem; } } .archive-fav-btn { display: inline-flex; align-items: center; gap: 0.55rem; background: transparent; border: 1.5px solid var(--rule); padding: 0.7rem 1rem 0.7rem 0.85rem; font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-mute); cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.12s ease; white-space: nowrap; } .archive-fav-btn .fav-bookmark { flex-shrink: 0; transition: fill 0.18s ease, transform 0.18s ease; } .archive-fav-btn:hover:not(:disabled) { border-color: var(--rust); color: var(--rust); } .archive-fav-btn:hover:not(:disabled) .fav-bookmark { transform: translateY(-1px); } .archive-fav-btn:active:not(:disabled) { transform: scale(0.97); } .archive-fav-btn.is-fav { border-color: var(--rust); color: var(--rust); background: rgba(124, 45, 18, 0.06); } .archive-fav-btn.is-fav .fav-bookmark { fill: var(--rust); stroke: var(--rust); animation: fav-saved 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); } @keyframes fav-saved { 0% { transform: scale(1) translateY(0); } 40% { transform: scale(1.25) translateY(-3px); } 100% { transform: scale(1) translateY(0); } } .archive-fav-btn.is-loading { opacity: 0.5; cursor: progress; pointer-events: none; } /* Empty state */ #opt-archive-empty { text-align: center; padding: 4rem 1rem; font-family: var(--serif-body); font-size: 1.1rem; font-style: italic; color: var(--ink-mute); } #opt-archive-empty strong { font-family: var(--serif-display); font-style: italic; color: var(--rust); font-weight: 500; font-size: 1.3rem; display: block; margin-bottom: 0.5rem; } #opt-archive-empty[hidden] { display: none; } /* Hide old archive-meta + lock styles from V1 (we replaced the structure) */ .opt-archive-item .archive-meta { display: none; } /* ============================================================ MOBILE OPTIMIZATION (audience 50+, brain fog, presbyopia) Triggered <= 720px, with iOS-specific tweaks ============================================================ */ /* === iOS zoom prevention: input font must be >=16px on iOS === */ input[type="email"], input[type="text"], input[type="search"], textarea, select { font-size: 16px !important; } /* === Touch tap feedback (rust instead of default blue) === */ * { -webkit-tap-highlight-color: rgba(124, 45, 18, 0.15); } /* === Smooth scroll on anchor jumps === */ html { scroll-behavior: smooth; } /* === MOBILE BREAKPOINT (≤720px) === */ @media (max-width: 720px) { /* CARTOUCHE: hide mother-brand link on mobile (recover header space) */ .opt-cartouche { grid-template-columns: 1fr !important; gap: 0.35rem !important; text-align: center; padding: 2.5rem var(--gutter) 1rem !important; } .opt-cartouche .ed-title, .opt-cartouche .ed-meta { justify-self: center !important; } .opt-cartouche .ed-mother { display: none !important; } /* HERO: tighter padding, give title room */ .opt-hero { padding: 2.5rem var(--gutter) 3.5rem !important; gap: 2rem !important; } .opt-hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem) !important; line-height: 0.98 !important; } .opt-hero-byline { margin-bottom: 1.25rem !important; font-size: 0.74rem !important; letter-spacing: 0.16em !important; } .opt-hero-tagline { font-size: 1.08rem !important; line-height: 1.55 !important; max-width: 100%; } .opt-hero-byline::before { width: 18px !important; } /* MEMBER greeting/upgrade boxes (Free state) - more compact */ .opt-member-greeting, .opt-member-upgrade { padding: 1rem 1.15rem !important; } .opt-member-greeting .greeting-line { font-size: 1.2rem !important; } /* DROP CAP article - reduce drastically on mobile */ .gh-content > p:first-of-type::first-letter, .gh-canvas > p:first-of-type::first-letter { font-size: 3em !important; line-height: 0.85 !important; margin: 0.05em 0.08em -0.05em 0 !important; } /* SECTIONS - reduce padding to save vertical space */ .opt-latest-block, .opt-howto, .opt-premium { padding: 4rem var(--gutter) !important; } .opt-devise { padding: 4rem var(--gutter) 5rem !important; font-size: 1.4rem !important; } /* SECTION NUMBERS - mobile centered + bigger contrast */ .opt-section-num { flex-direction: row !important; gap: 0.85rem !important; align-items: center; justify-content: center; margin-bottom: 2rem !important; } .opt-section-num .num { font-size: 1.6rem !important; } .opt-section-num .num-rule { display: inline-block !important; flex: 0 0 30px !important; } /* PREMIUM cover PDF - shrink slightly so it doesn't dominate */ .opt-premium-cover { max-width: 280px !important; } .opt-premium-grid { gap: 3rem !important; } /* PRICING boxes - bigger touch target on mobile */ .opt-premium-prices .price { padding: 1.75rem 1.5rem !important; } .opt-premium-prices .price-cta { font-size: 0.78rem !important; } /* ARCHIVE filters - center, equal-width chips, "Mes favoris" full width */ .opt-archive-filters { justify-content: center !important; gap: 0.5rem !important; } .opt-archive-filter { flex: 1 1 calc(50% - 0.5rem) !important; justify-content: center !important; padding: 0.85rem 0.6rem !important; font-size: 0.74rem !important; } .opt-archive-filter-fav { flex: 1 1 100% !important; margin-left: 0 !important; margin-top: 0.25rem; } /* ARCHIVE items - reorder action col below body, full width button */ .opt-archive-item { grid-template-columns: 1fr !important; gap: 1rem !important; padding: 1.75rem 0 !important; } .archive-num-col { flex-direction: row !important; align-items: center !important; gap: 0.85rem !important; border-right: none !important; padding-right: 0 !important; flex-wrap: wrap; } .archive-num { font-size: 0.92rem !important; } .archive-meta-line { margin-top: 0 !important; } .archive-title { font-size: 1.45rem !important; } .archive-action-col { margin-top: 0 !important; justify-content: stretch !important; } .archive-fav-btn { width: 100% !important; justify-content: center !important; padding: 0.85rem 1rem !important; font-size: 0.78rem !important; } /* FOOTER nav - stack on mobile, no separators with "·" inline */ .gh-footer-bar { grid-template-columns: 1fr !important; gap: 1.5rem !important; text-align: center; padding-bottom: 1.5rem !important; } .gh-footer-menu { display: flex !important; flex-direction: column !important; gap: 0.85rem !important; align-items: center; line-height: 1.5; } .gh-footer-menu a { display: block; padding: 0.4rem 0; font-size: 0.85rem !important; } /* hide the inline · separators by clearing surrounding text nodes */ .gh-footer-menu { font-size: 0; /* collapse text node spaces, will reset on links */ } .gh-footer-menu a { font-size: 0.85rem; } .gh-footer-copyright { text-align: center !important; font-size: 0.72rem !important; } /* Article body — scroll smoothness for long reads */ .gh-content, .gh-content p, .gh-canvas p { font-size: 1.08rem !important; line-height: 1.72 !important; } .gh-content h2, .gh-canvas h2 { font-size: clamp(1.5rem, 5vw, 1.85rem) !important; margin-top: 2rem !important; } .gh-content h3, .gh-canvas h3 { font-size: clamp(1.2rem, 4vw, 1.45rem) !important; } .gh-content blockquote, .gh-canvas blockquote { font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important; padding: 1rem 0.5rem !important; } /* HOWTO 3-column on mobile becomes vertical stack with no vertical separators */ .opt-howto-grid { gap: 2.5rem !important; } .opt-howto-step + .opt-howto-step { border-left: none !important; border-top: 1px solid var(--rule); padding-left: 0 !important; padding-top: 2.5rem; } .opt-howto-step:not(:last-child) { padding-right: 0 !important; } } /* === Very small screens (≤380px iPhone SE/mini) === */ @media (max-width: 380px) { :root { --gutter: 1rem; } .opt-hero h1 { font-size: 2.2rem !important; } .opt-section-num .num { font-size: 1.35rem !important; } .archive-title { font-size: 1.3rem !important; } } /* === Larger touch target for inline links inside articles (PMID etc) === */ .gh-content a, .gh-canvas a { padding: 0.05em 0; /* tap target padding via line-height instead of element */ } /* ======================================================================== PHASE A — Navigation header + Post bookmark + Post-footer + CTA cards ======================================================================== */ /* --- Custom navigation list (replace Ghost {{navigation}}) --------------- */ .optimum-nav-list { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2rem); list-style: none; margin: 0; padding: 0; } .optimum-nav-list li { margin: 0; padding: 0; } .optimum-nav-list a { font-family: var(--serif-body); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.005em; color: var(--ink-soft); text-decoration: none; padding: 0.4em 0; border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease; } .optimum-nav-list a:hover, .optimum-nav-list a:focus-visible { color: var(--rust); border-bottom-color: var(--rust); } .optimum-nav-list .optimum-nav-fav { color: var(--rust); font-weight: 600; } .optimum-nav-list .optimum-nav-fav:hover { color: var(--rust-deep); border-bottom-color: var(--rust-deep); } @media (max-width: 720px) { .optimum-nav-list { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; } .optimum-nav-list a { font-size: 1.05rem; padding: 0.6em 0; min-height: 44px; display: flex; align-items: center; } } /* --- Post header bookmark button ---------------------------------------- */ .optimum-post-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .optimum-post-bookmark { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; font-family: var(--serif-body); font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); background: var(--paper-warm); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; transition: all .18s ease; -webkit-tap-highlight-color: transparent; min-height: 44px; } .optimum-post-bookmark:hover, .optimum-post-bookmark:focus-visible { border-color: var(--rust); color: var(--rust); } .optimum-post-bookmark .fav-icon { flex-shrink: 0; transition: fill .18s ease; } .optimum-post-bookmark.is-fav { background: var(--rust); border-color: var(--rust); color: var(--paper); } .optimum-post-bookmark.is-fav .fav-icon { fill: var(--paper); stroke: var(--paper); } .optimum-post-bookmark.is-loading { opacity: 0.55; pointer-events: none; } /* --- Post footer wrapper ------------------------------------------------ */ .optimum-post-footer { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); } /* --- Conversion CTA cards ----------------------------------------------- */ .optimum-cta-card { margin: 0 0 clamp(2.5rem, 5vw, 4rem) 0; padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: 6px; background: var(--paper-warm); border: 1px solid var(--rule); border-left: 4px solid var(--rust); } .optimum-cta-card.optimum-cta-paid { border-left-color: var(--sky-deep); } .optimum-cta-eyebrow { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rust); margin-bottom: 0.6rem; } .optimum-cta-card.optimum-cta-paid .optimum-cta-eyebrow { color: var(--sky-deep); } .optimum-cta-title { font-family: var(--serif-display); font-size: clamp(1.35rem, 2.4vw, 1.65rem); font-weight: 500; line-height: 1.2; color: var(--ink); margin: 0 0 0.75rem 0; } .optimum-cta-body { font-family: var(--serif-body); font-size: 1rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 1.5rem 0; } .optimum-cta-btn { display: inline-flex; align-items: center; padding: 0.85rem 1.5rem; background: var(--rust); color: var(--paper) !important; font-family: var(--serif-body); font-size: 1rem; font-weight: 500; text-decoration: none; border-radius: 4px; transition: background .18s ease, transform .18s ease; min-height: 48px; } .optimum-cta-btn:hover, .optimum-cta-btn:focus-visible { background: var(--rust-deep); transform: translateY(-1px); } .optimum-cta-card.optimum-cta-paid .optimum-cta-btn { background: var(--sky-deep); } .optimum-cta-card.optimum-cta-paid .optimum-cta-btn:hover { background: #024C7A; } .optimum-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .optimum-cta-btn-ghost { display: inline-flex; align-items: center; padding: 0.85rem 1.5rem; background: transparent; color: var(--ink-soft) !important; font-family: var(--serif-body); font-size: 1rem; font-weight: 500; text-decoration: none; border: 1px solid var(--rule); border-radius: 4px; transition: all .18s ease; min-height: 48px; } .optimum-cta-btn-ghost:hover, .optimum-cta-btn-ghost:focus-visible { border-color: var(--rust); color: var(--rust) !important; } /* --- Post navigation grid (prev / archive / next) ----------------------- */ .optimum-post-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: stretch; padding: 1.5rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .optimum-post-nav-cell { display: flex; align-items: center; min-height: 64px; } .optimum-post-nav-prev { justify-content: flex-start; } .optimum-post-nav-archive { justify-content: center; } .optimum-post-nav-next { justify-content: flex-end; } .optimum-post-nav-link { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: var(--ink-soft); transition: color .18s ease; max-width: 100%; } .optimum-post-nav-link:hover, .optimum-post-nav-link:focus-visible { color: var(--rust); } .optimum-post-nav-link.is-next { text-align: right; align-items: flex-end; } .optimum-post-nav-eyebrow { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); } .optimum-post-nav-title { font-family: var(--serif-body); font-size: 0.98rem; font-weight: 500; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .optimum-post-nav-archive-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; transition: all .18s ease; min-height: 40px; white-space: nowrap; } .optimum-post-nav-archive-link:hover, .optimum-post-nav-archive-link:focus-visible { border-color: var(--rust); color: var(--rust); background: var(--paper); } @media (max-width: 720px) { .optimum-post-nav { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem 0; } .optimum-post-nav-prev, .optimum-post-nav-archive, .optimum-post-nav-next { justify-content: center; } .optimum-post-nav-link.is-next { text-align: center; align-items: center; } .optimum-post-nav-link { text-align: center; align-items: center; } } /* ======================================================================== PHASE A — fixes (post-nav empty cells + button height parity) ======================================================================== */ /* Box-sizing safety on CTA buttons (border doesn't add to height) */ .optimum-cta-btn, .optimum-cta-btn-ghost { box-sizing: border-box; line-height: 1.2; } /* Hide empty prev/next cells — when only one post exists, or boundary post */ .optimum-post-nav-cell:empty { display: none; } /* When neither neighbor exists: collapse to single centered column (no ghost gaps) */ .optimum-post-nav:not(:has(.optimum-post-nav-link)) { grid-template-columns: 1fr; padding: 1rem 0; } /* When only prev exists (no next) */ .optimum-post-nav:has(.optimum-post-nav-prev > a):not(:has(.optimum-post-nav-next > a)) { grid-template-columns: 1fr auto; } /* When only next exists (no prev) */ .optimum-post-nav:not(:has(.optimum-post-nav-prev > a)):has(.optimum-post-nav-next > a) { grid-template-columns: auto 1fr; } /* Mobile: always single column override */ @media (max-width: 720px) { .optimum-post-nav { grid-template-columns: 1fr !important; gap: 1rem; } } /* ======================================================================== PHASE B — Search button + Favorites count badge ======================================================================== */ /* Search button (sodo-search trigger via data-ghost-search) */ .optimum-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 0.25rem; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--ink-soft); cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease; -webkit-tap-highlight-color: transparent; } .optimum-search-toggle:hover, .optimum-search-toggle:focus-visible { color: var(--rust); border-color: var(--rule); background: var(--paper-warm); } .optimum-search-toggle svg { width: 18px; height: 18px; display: block; } /* Favorites count badge (next to "Mes favoris" link) */ .optimum-nav-fav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; margin-left: 0.4em; padding: 0 0.45em; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; line-height: 1; color: var(--paper); background: var(--rust); border-radius: 999px; vertical-align: middle; box-sizing: border-box; } /* Hide badge when JS sets it empty (zero favorites) */ .optimum-nav-fav-count.is-badge:empty { display: none; } @media (max-width: 720px) { .optimum-search-toggle { width: 44px; height: 44px; } } /* ======================================================================== PHASE C — Reading progress bar + Back-to-top + Share buttons ======================================================================== */ /* Reading progress bar (fixed top, fill on scroll) */ .optimum-reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--rust); z-index: 9999; transition: width .12s linear; pointer-events: none; } /* Back-to-top button (fixed bottom-right, hidden until scroll) */ .optimum-back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--rust); color: var(--paper); border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(124, 45, 18, 0.28); transition: background .18s ease, transform .18s ease, opacity .18s ease; z-index: 9000; -webkit-tap-highlight-color: transparent; } .optimum-back-to-top:hover, .optimum-back-to-top:focus-visible { background: var(--rust-deep); transform: translateY(-2px); } .optimum-back-to-top[hidden] { display: none; } /* Top mini-share icons (next to bookmark in post header) */ .optimum-post-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .optimum-share-mini { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem; background: var(--paper-warm); border: 1px solid var(--rule); border-radius: 999px; } .optimum-share-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: transparent; border: none; border-radius: 999px; color: var(--ink-soft); cursor: pointer; transition: color .18s ease, background .18s ease; text-decoration: none; -webkit-tap-highlight-color: transparent; } .optimum-share-icon:hover, .optimum-share-icon:focus-visible { color: var(--rust); background: var(--paper); } .optimum-share-icon svg { display: block; } .optimum-share-icon.is-copied { color: var(--sky-deep); } /* Bottom share block (between content and CTA card) */ .optimum-share-block { margin: 0 0 clamp(2.5rem, 5vw, 4rem) 0; padding: clamp(1.25rem, 3vw, 1.75rem); text-align: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .optimum-share-block-label { font-family: var(--serif-body); font-size: 0.95rem; font-style: italic; color: var(--ink-mute); margin-bottom: 1rem; } .optimum-share-block-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.6rem; } .optimum-share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; font-family: var(--serif-body); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); background: var(--paper-warm); border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; transition: all .18s ease; text-decoration: none; min-height: 44px; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .optimum-share-btn:hover, .optimum-share-btn:focus-visible { border-color: var(--rust); color: var(--rust); background: var(--paper); } .optimum-share-btn-whatsapp { background: #25D366; color: #fff; border-color: #25D366; } .optimum-share-btn-whatsapp:hover, .optimum-share-btn-whatsapp:focus-visible { background: #128C7E; color: #fff; border-color: #128C7E; } .optimum-share-btn.is-copied { border-color: var(--sky-deep); color: var(--sky-deep); background: var(--paper); } @media (max-width: 720px) { .optimum-back-to-top { bottom: 1rem; right: 1rem; width: 44px; height: 44px; } .optimum-share-mini { gap: 0; } .optimum-share-icon { width: 40px; height: 40px; } .optimum-share-btn { flex: 1 1 auto; justify-content: center; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .optimum-reading-progress, .optimum-back-to-top { transition: none; } } /* ======================================================================== PHASE C — fixes (Email underline + CTA/share proportions desktop) ======================================================================== */ /* Override Ghost gh-canvas a underline with high specificity */ .gh-canvas .optimum-share-btn, .gh-canvas .optimum-share-icon, .optimum-share-btn, .optimum-share-icon { text-decoration: none !important; } /* Lock identical heights for all 3 share buttons (no vs