/* ========================================================================== Chegini Minimal — main stylesheet A modern, minimal, editorial portfolio aesthetic. All major values use CSS custom properties so they can be overridden from Elementor's Site Settings → Theme Style. ========================================================================== */ :root { /* ----- Palette: light mode ----- */ --ch-bg: #FAFAF7; /* warm off-white */ --ch-surface: #FFFFFF; --ch-text: #111111; --ch-text-muted: #5A5A5A; --ch-border: #E6E4DE; --ch-accent: #111111; /* monochrome accent — calm/cinematic */ --ch-accent-soft: #F3F1EA; --ch-link: #111111; --ch-link-hover: #888888; /* ----- Type ----- */ --ch-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ch-font-serif: 'Fraunces', 'Times New Roman', serif; /* ----- Scale (perfect fourth, mobile-first) ----- */ --ch-fs-xs: 0.75rem; /* 12 */ --ch-fs-sm: 0.875rem; /* 14 */ --ch-fs-base: 1rem; /* 16 */ --ch-fs-md: 1.125rem; /* 18 */ --ch-fs-lg: 1.5rem; /* 24 */ --ch-fs-xl: 2rem; /* 32 */ --ch-fs-2xl: 2.75rem; /* 44 */ --ch-fs-3xl: 4rem; /* 64 */ --ch-fs-4xl: 5.5rem; /* 88 */ /* ----- Spacing ----- */ --ch-sp-1: 0.25rem; --ch-sp-2: 0.5rem; --ch-sp-3: 0.75rem; --ch-sp-4: 1rem; --ch-sp-6: 1.5rem; --ch-sp-8: 2rem; --ch-sp-12: 3rem; --ch-sp-16: 4rem; --ch-sp-24: 6rem; --ch-sp-32: 8rem; /* ----- Layout ----- */ --ch-container: 1280px; --ch-container-narrow: 760px; --ch-radius: 4px; --ch-radius-lg: 12px; --ch-transition: 250ms cubic-bezier(0.22, 0.61, 0.36, 1); --ch-header-h: 80px; } /* Optional dark mode — toggle by adding the class to . */ html.dark, html[data-theme="dark"] { --ch-bg: #0E0E0E; --ch-surface: #161616; --ch-text: #F5F4EF; --ch-text-muted: #A3A29D; --ch-border: #262521; --ch-accent: #F5F4EF; --ch-accent-soft: #1B1B19; --ch-link: #F5F4EF; --ch-link-hover: #B5B4AF; } /* ===== Reset / base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ch-font-sans); font-size: var(--ch-fs-base); line-height: 1.6; color: var(--ch-text); background: var(--ch-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, iframe { max-width: 100%; height: auto; display: block; } a { color: var(--ch-link); text-decoration: none; transition: color var(--ch-transition); } a:hover { color: var(--ch-link-hover); } h1, h2, h3, h4, h5, h6 { font-family: var(--ch-font-serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--ch-sp-6); color: var(--ch-text); } h1 { font-size: clamp(2.5rem, 6vw, var(--ch-fs-4xl)); font-weight: 400; } h2 { font-size: clamp(2rem, 4vw, var(--ch-fs-3xl)); font-weight: 400; } h3 { font-size: var(--ch-fs-2xl); } h4 { font-size: var(--ch-fs-xl); } h5 { font-size: var(--ch-fs-lg); } h6 { font-size: var(--ch-fs-md); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--ch-font-sans); font-weight: 600; } p { margin: 0 0 var(--ch-sp-4); } p:last-child { margin-bottom: 0; } blockquote { margin: var(--ch-sp-8) 0; padding: var(--ch-sp-4) var(--ch-sp-8); border-left: 2px solid var(--ch-accent); font-family: var(--ch-font-serif); font-size: var(--ch-fs-lg); font-style: italic; color: var(--ch-text-muted); } code, pre { font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; font-size: 0.92em; background: var(--ch-accent-soft); border-radius: var(--ch-radius); } code { padding: 0.15em 0.4em; } pre { padding: var(--ch-sp-4); overflow-x: auto; } ::selection { background: var(--ch-text); color: var(--ch-bg); } /* ===== Accessibility ========================================================== */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; } .skip-link { position: absolute; left: -9999px; top: var(--ch-sp-2); background: var(--ch-text); color: var(--ch-bg); padding: var(--ch-sp-2) var(--ch-sp-4); z-index: 9999; } .skip-link:focus { left: var(--ch-sp-2); } /* ===== Layout ================================================================= */ .container { width: 100%; max-width: var(--ch-container); margin: 0 auto; padding: 0 var(--ch-sp-6); } .container--narrow { max-width: var(--ch-container-narrow); } .site { min-height: 100vh; display: flex; flex-direction: column; } .site-main { flex: 1; padding: var(--ch-sp-12) 0 var(--ch-sp-24); } /* ===== Header ================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--ch-bg) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--ch-border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--ch-header-h); gap: var(--ch-sp-6); } .site-branding .site-title, .site-branding a { font-family: var(--ch-font-serif); font-size: var(--ch-fs-lg); font-weight: 500; letter-spacing: -0.02em; color: var(--ch-text); } .site-description { font-size: var(--ch-fs-xs); color: var(--ch-text-muted); margin: 0; } /* Primary nav */ .main-navigation ul { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--ch-sp-8); align-items: center; } .main-navigation a { font-size: var(--ch-fs-sm); font-weight: 500; letter-spacing: 0.02em; color: var(--ch-text); position: relative; padding: var(--ch-sp-2) 0; } .main-navigation a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: currentColor; transition: width var(--ch-transition); } .main-navigation a:hover::after, .main-navigation .current-menu-item > a::after { width: 100%; } /* Mobile menu toggle */ .menu-toggle { display: none; background: none; border: 0; padding: var(--ch-sp-2); cursor: pointer; } .menu-toggle .bar { display: block; width: 24px; height: 2px; background: var(--ch-text); margin: 5px 0; transition: transform var(--ch-transition), opacity var(--ch-transition); } @media (max-width: 860px) { .menu-toggle { display: block; } .main-navigation { position: absolute; top: 100%; left: 0; right: 0; background: var(--ch-bg); border-bottom: 1px solid var(--ch-border); transform: scaleY(0); transform-origin: top; transition: transform var(--ch-transition); } .main-navigation.is-open { transform: scaleY(1); } .main-navigation ul { flex-direction: column; gap: 0; padding: var(--ch-sp-4); } .main-navigation li { width: 100%; } .main-navigation a { display: block; padding: var(--ch-sp-3) 0; } } /* ===== Hero / page header ===================================================== */ .page-header { margin: 0 0 var(--ch-sp-16); padding-top: var(--ch-sp-8); text-align: left; } .page-title { font-size: clamp(2.5rem, 6vw, var(--ch-fs-3xl)); margin: 0; } .entry-eyebrow { font-family: var(--ch-font-sans); text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--ch-fs-xs); color: var(--ch-text-muted); margin: 0 0 var(--ch-sp-3); } /* ===== Buttons ================================================================ */ .btn, .wp-block-button__link, input[type="submit"], button[type="submit"] { display: inline-flex; align-items: center; gap: var(--ch-sp-2); padding: var(--ch-sp-3) var(--ch-sp-6); background: var(--ch-text); color: var(--ch-bg); border: 1px solid var(--ch-text); border-radius: 999px; font-size: var(--ch-fs-sm); font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: transform var(--ch-transition), background var(--ch-transition), color var(--ch-transition); } .btn:hover, .wp-block-button__link:hover, input[type="submit"]:hover, button[type="submit"]:hover { transform: translateY(-1px); background: transparent; color: var(--ch-text); } .btn--ghost { background: transparent; color: var(--ch-text); } .btn--ghost:hover { background: var(--ch-text); color: var(--ch-bg); } /* ===== Post / project grid ==================================================== */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--ch-sp-12) var(--ch-sp-8); } .post-grid--projects { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); } .post-card { display: flex; flex-direction: column; gap: var(--ch-sp-4); } .post-card__thumb { display: block; overflow: hidden; border-radius: var(--ch-radius); aspect-ratio: 4 / 3; background: var(--ch-accent-soft); } .post-grid--projects .post-card__thumb { aspect-ratio: 16 / 9; } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1); } .post-card:hover .post-card__thumb img { transform: scale(1.04); } .post-card__title { font-size: var(--ch-fs-lg); margin: 0; font-weight: 500; } .post-card__title a { color: var(--ch-text); } .post-card__meta { font-size: var(--ch-fs-xs); color: var(--ch-text-muted); text-transform: uppercase; letter-spacing: 0.12em; } .post-card__excerpt { color: var(--ch-text-muted); font-size: var(--ch-fs-sm); } /* ===== Single / page content ================================================== */ .single-content, .page-content { max-width: 760px; margin: 0 auto; } .entry-title { margin-bottom: var(--ch-sp-4); } .entry-meta { color: var(--ch-text-muted); font-size: var(--ch-fs-sm); margin-bottom: var(--ch-sp-8); } .entry-thumbnail { margin: var(--ch-sp-8) 0 var(--ch-sp-12); border-radius: var(--ch-radius); overflow: hidden; } .entry-content > * + * { margin-top: var(--ch-sp-4); } .entry-content img { border-radius: var(--ch-radius); } /* ===== Pagination ============================================================= */ .pagination, .posts-navigation { margin-top: var(--ch-sp-16); display: flex; justify-content: center; gap: var(--ch-sp-2); } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--ch-sp-3); border: 1px solid var(--ch-border); border-radius: 999px; font-size: var(--ch-fs-sm); color: var(--ch-text); } .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--ch-text); color: var(--ch-bg); border-color: var(--ch-text); } /* ===== Forms ================================================================== */ input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="number"], textarea, select { width: 100%; padding: var(--ch-sp-3) var(--ch-sp-4); font: inherit; color: var(--ch-text); background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius); transition: border-color var(--ch-transition); } input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--ch-text); } .search-form { display: flex; gap: var(--ch-sp-2); max-width: 480px; margin: var(--ch-sp-6) 0; } .search-form .search-field { flex: 1; } /* ===== Footer ================================================================= */ .site-footer { background: var(--ch-accent-soft); border-top: 1px solid var(--ch-border); padding: var(--ch-sp-16) 0 var(--ch-sp-8); margin-top: var(--ch-sp-24); } .site-footer__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ch-sp-8); align-items: end; } .site-footer__title { font-family: var(--ch-font-serif); font-size: var(--ch-fs-xl); margin: 0 0 var(--ch-sp-2); font-weight: 500; } .site-footer__tagline { color: var(--ch-text-muted); font-size: var(--ch-fs-sm); margin: 0; } .site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--ch-sp-6); justify-content: flex-end; } .site-footer__nav a { font-size: var(--ch-fs-sm); color: var(--ch-text-muted); } .site-footer__nav a:hover { color: var(--ch-text); } .site-footer__copy { grid-column: 1 / -1; margin-top: var(--ch-sp-12); padding-top: var(--ch-sp-6); border-top: 1px solid var(--ch-border); font-size: var(--ch-fs-xs); color: var(--ch-text-muted); letter-spacing: 0.06em; text-transform: uppercase; } @media (max-width: 640px) { .site-footer__inner { grid-template-columns: 1fr; } .site-footer__nav ul { justify-content: flex-start; } } /* ===== 404 ==================================================================== */ .error-404 { text-align: left; padding: var(--ch-sp-16) 0; } .error-404 .page-title { font-size: clamp(3rem, 10vw, 6rem); } /* ===== Elementor canvas — strip default page padding ========================= */ body.elementor-template-canvas .site-main, body.has-elementor-content .site-main { padding: 0; } /* When using the Elementor "Theme" / "Default" page template, Elementor already controls .entry-content padding. We zero out our container in that case so layouts look pixel-perfect. */ .elementor-page .container { max-width: 100%; padding: 0; } .elementor-page .site-main { padding: 0; } /* ===== Print ================================================================== */ @media print { .site-header, .site-footer, .menu-toggle { display: none; } body { color: #000; background: #fff; } }