/* Theme Name: Doki-Doki */ @import url("https://use.typekit.net/xot3cib.css"); @import './assets/css/landing.css'; @font-face { font-family: "Monigue Regular"; src: url("assets/fonts/monigue-font-1767595972-0/monigue.otf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } :root { /* Colors */ --color-white: #fff8ef; --color-cream: #f8dcc5; --color-dark: #451a0a; --color-green: #45998d; --color-primary: var(--color-white); --color-secondary: var(--color-cream); --color-tertiary: var(--color-dark); --color-quaternary: var(--color-green); /* Spacing */ --spacing-2xs: 8px; --spacing-xs: 12px; --spacing-s: 16px; --spacing-m: 20px; --spacing-l: 24px; --spacing-xl: 32px; --spacing-2xl: 64px; --spacing-3xl: 80px; --round-sm: 8px; --round-md: 12px; --round-lg: 16px; /* Heading */ --heading-size-1: 40px; --heading-line-1: 42px; --heading-size-2: 36px; --heading-line-2: 38px; --heading-size-3: 28px; --heading-line-3: 32px; --heading-size-4: 20px; --heading-line-4: 24px; --paragraph-size: 16px; --paragraph-line: 22px; --font-family-title: "Monigue Regular", "Inter", "Rubik", "Barlow", "IBM Plex Sans", "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family: "input-mono-compressed", monospace; } /* Reset */ *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html:where([lang]) { /* Hyphens n’a d’effet qu’avec lang correct (ex: ) */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: hidden; /* Force hide horizontal overflow on global container */ } body { font-family: var(--font-family); font-size: var(--paragraph-size); line-height: var(--paragraph-line); color: var(--color-tertiary); background: var(--color-primary); font-optical-sizing: auto; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; text-rendering: optimizeLegibility; overflow-x: hidden; /* Ensure this is strictly applied */ overflow-y: auto; /* Ensure vertical scrolling is allowed */ width: 100%; /* Ensure body doesn't exceed viewport */ position: relative; /* Establish context */ } section.container { padding: 10px clamp(50px, 10vw, 300px); } body { font-synthesis-weight: none; font-synthesis-style: none; font-synthesis-small-caps: none; } main { padding-top: var(--spacing-m); } @media (max-width: 1200px) { section.container { padding: 10px clamp(20px, 3vw, 300px); } } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-title); font-weight: 400; letter-spacing: 0.35rem; } h1 { font-size: var(--heading-size-1); line-height: var(--heading-line-1); } h2 { font-size: var(--heading-size-2); line-height: var(--heading-line-2); } h3 { font-size: var(--heading-size-3); line-height: var(--heading-line-3); } h4 { font-size: var(--heading-size-4); line-height: var(--heading-line-4); } p { white-space: pre-line; text-wrap: pretty; overflow-wrap: break-word; word-break: normal; margin: 0 0 0.8em; font-size: var(--paragraph-size); line-height: var(--paragraph-line); } a { color: inherit; text-decoration: none; text-decoration-thickness: from-font; text-decoration-skip-ink: auto; } :where(h1, h2, h3, h4, h5, h6) { line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1; } img { width: 100%; height: auto; object-fit: cover; } ul { list-style: none; } .icon { display: flex; align-items: center; justify-content: center; height: 25px; width: 25px; } .btn-primary { padding: 8px 12px; background-color: var(--color-quaternary); } @supports (hanging-punctuation: first) { p, li, blockquote { hanging-punctuation: first last; } } @supports (leading-trim: both) { :where(h1, h2, h3) { leading-trim: both; text-edge: cap alphabetic; } } svg, svg * { text-rendering: geometricPrecision; font-feature-settings: normal; } body.single main, body.blog main, body.page-template-page-blog main { padding-top: var(--spacing-3xl); } /* Post Navigation */ .post-navigation { display: flex; justify-content: space-between; align-items: stretch; margin-top: var(--spacing-3xl); padding-top: var(--spacing-xl); border-top: 1px solid var(--color-tertiary); gap: var(--spacing-m); } .post-navigation .nav-card, .post-navigation .placeholder { flex: 1; min-width: 0; } .post-navigation .placeholder { visibility: hidden; } /* Post Navigation */ .post-navigation .nav-card { display: flex; flex-direction: column; text-decoration: none; padding: var(--spacing-s); border: none; border-radius: 0; transition: background-color 0.3s ease, transform 0.3s ease; background-color: rgba(69, 153, 141, 0.1); /* --color-green with opacity */ clip-path: polygon( 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px ); } .post-navigation .nav-card:hover { background-color: var(--color-quaternary); /* Full green on hover */ /* transform: translateY(-3px); */ } .post-navigation .nav-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-tertiary); /* Dark text */ opacity: 0.6; } .post-navigation .nav-card:hover .nav-label { color: var(--color-primary); /* Light text on green bg */ opacity: 0.9; } .post-navigation .nav-next .nav-label { text-align: right; } .post-navigation .nav-card-content { display: flex; gap: var(--spacing-m); flex: 1; align-items: center; } .post-navigation .nav-next .nav-card-content { flex-direction: row-reverse; } .post-navigation .nav-card-thumb { width: 100px; height: 100px; flex-shrink: 0; /* border-radius: var(--round-sm); Remove radius for clip-path consistency? Or keep it? keeping it inside looks fine */ clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); overflow: hidden; background-color: var(--color-secondary); } .post-navigation .nav-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .post-navigation .nav-card:hover .nav-card-thumb img { transform: scale(1.05); } .post-navigation .nav-card-info { flex: 1; display: flex; flex-direction: column; justify-content: center; } .post-navigation .nav-next .nav-card-info { text-align: right; } .post-navigation .nav-card-info time { font-size: 0.75rem; color: var(--color-tertiary); opacity: 0.5; margin-bottom: 8px; display: block; font-family: var(--font-family); } .post-navigation .nav-card:hover .nav-card-info time { color: var(--color-primary); } .post-navigation .nav-card-info h4 { font-size: var(--heading-size-4); line-height: 1.3; margin: 0; color: var(--color-tertiary); font-weight: 500; text-decoration: none; } .post-navigation .nav-card:hover .nav-card-info h4 { color: var(--color-primary); text-decoration: none; } @media (max-width: 768px) { .post-navigation { flex-direction: column; gap: var(--spacing-l); } .post-navigation .nav-card-content { align-items: center; } .post-navigation .nav-next .nav-label { text-align: left; } .post-navigation .nav-next .nav-card-content { flex-direction: row; } .post-navigation .nav-next .nav-card-info { text-align: left; } }