/*! * Kandem Theme — Main Stylesheet * Author: Kandem Studio * Version: 1.0.3 */ /* ══════════════════════════════════════ -1. CRITICAL OVERRIDES (beat WP global-styles) WordPress injects its own theme.json-based CSS AFTER this file in the , so we use higher specificity selectors here to win. ═══════════════════════════════════════ */ html body, html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .k-hero-title, html body .k-section-title, html body .k-about-title, html body .k-service-title, html body .k-entry-title, html body .k-archive-title, html body .k-post-title, html body .k-project-title, html body .site-title, html body .site-title a { color: #f0ede8; } html body .k-hero-title em, html body .k-hero-eyebrow, html body .k-section-num, html body .k-service-num, html body .k-about-kicker, html body .site-description, html body .k-hero-cta, html body a:not(.wp-element-button) { color: #c9a96e; } html body .k-hero-tag, html body .k-about-text, html body .k-service-text, html body .k-section-kicker { color: #888; } /* ══════════════════════════════════════ 0. DESIGN TOKENS ═══════════════════════════════════════ */ :root { --k-black: #0e0e0e; --k-charcoal: #151515; --k-border: #1c1c1c; --k-border-2: #2a2a2a; --k-text: #f0ede8; --k-text-dim: #888; --k-text-fade: #444; --k-gold: #c9a96e; --k-gold-dark: #8b6914; --k-paper: #f4f1ec; --k-font-serif: 'Cormorant Garamond', 'Times New Roman', serif; --k-font-sans: 'Josefin Sans', -apple-system, BlinkMacSystemFont, sans-serif; --k-max: 1120px; --k-ease: cubic-bezier(0.2, 0.8, 0.2, 1); } /* ══════════════════════════════════════ 1. RESET & BASE ═══════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--k-black); color: var(--k-text); font-family: var(--k-font-sans); font-weight: 300; font-size: 15px; line-height: 1.7; letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Grain overlay */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); pointer-events: none; z-index: 100; opacity: 0.45; } a { color: var(--k-gold); text-decoration: none; transition: color 0.3s var(--k-ease), opacity 0.3s var(--k-ease); } a:hover, a:focus-visible { color: var(--k-text); } img, svg { max-width: 100%; height: auto; display: block; } p { margin: 0 0 1.2em; } ::selection { background: var(--k-gold); color: var(--k-black); } :focus-visible { outline: 1px solid var(--k-gold); outline-offset: 3px; } /* ══════════════════════════════════════ 2. TYPOGRAPHY ═══════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--k-font-serif); font-weight: 300; line-height: 1.15; margin: 0 0 0.6em; letter-spacing: 4px; text-transform: uppercase; color: var(--k-text); } h1 { font-size: clamp(34px, 5.5vw, 64px); letter-spacing: 10px; } h2 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: 8px; } h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: 6px; } h4 { font-size: 18px; letter-spacing: 4px; } h5 { font-size: 15px; letter-spacing: 3px; } h6 { font-size: 13px; letter-spacing: 3px; } em, i { font-style: italic; color: var(--k-gold); } blockquote { font-family: var(--k-font-serif); font-style: italic; font-weight: 300; font-size: 22px; line-height: 1.5; color: var(--k-text); border-left: 1px solid var(--k-gold); padding: 16px 0 16px 32px; margin: 32px 0; letter-spacing: 1px; } code, pre, kbd { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: 13px; background: var(--k-charcoal); padding: 2px 8px; border-radius: 3px; border: 1px solid var(--k-border); color: var(--k-gold); } pre { padding: 20px; overflow-x: auto; line-height: 1.6; } /* ══════════════════════════════════════ 3. LAYOUT & UTILITIES ═══════════════════════════════════════ */ .k-container { max-width: var(--k-max); margin: 0 auto; padding: 0 24px; } .k-container--narrow { max-width: 780px; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); position: absolute !important; width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important; } .skip-link { position: absolute; top: -100px; left: 10px; padding: 12px 20px; background: var(--k-gold); color: var(--k-black); font-family: var(--k-font-sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; z-index: 9999; } .skip-link:focus { top: 10px; color: var(--k-black); } /* ══════════════════════════════════════ 4. SITE HEADER / NAVIGATION ═══════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 90; background: rgba(14, 14, 14, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--k-border); } .site-header-inner { max-width: var(--k-max); margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-branding { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .site-branding .custom-logo-link img { max-height: 40px; width: auto; } .site-title { font-family: var(--k-font-serif); font-weight: 300; font-size: 18px; letter-spacing: 5px; text-transform: uppercase; margin: 0; line-height: 1; } .site-title a { color: var(--k-text); } .site-title a:hover { color: var(--k-gold); } .site-description { font-family: var(--k-font-sans); font-weight: 100; font-size: 8px; letter-spacing: 5px; color: var(--k-gold); text-transform: uppercase; margin: 4px 0 0; } .primary-navigation .primary-menu { display: flex; list-style: none; gap: 36px; margin: 0; padding: 0; } .primary-navigation .primary-menu li a { font-family: var(--k-font-sans); font-weight: 200; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--k-text-dim); position: relative; padding: 4px 0; } .primary-navigation .primary-menu li a:hover, .primary-navigation .primary-menu li.current-menu-item > a, .primary-navigation .primary-menu li.current_page_item > a { color: var(--k-gold); } .primary-navigation .primary-menu li a::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 1px; background: var(--k-gold); transition: width 0.4s var(--k-ease); } .primary-navigation .primary-menu li a:hover::after, .primary-navigation .primary-menu li.current-menu-item > a::after { width: 100%; } /* Mobile menu */ .menu-toggle { display: none; background: none; border: 1px solid var(--k-border); padding: 10px 14px; cursor: pointer; color: var(--k-text); font-family: var(--k-font-sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; } @media (max-width: 768px) { .menu-toggle { display: block; } .primary-navigation { position: absolute; top: 100%; left: 0; right: 0; background: var(--k-black); border-bottom: 1px solid var(--k-border); padding: 24px; display: none; } .primary-navigation.is-open { display: block; } .primary-navigation .primary-menu { flex-direction: column; gap: 20px; text-align: center; } .site-description { display: none; } } /* ══════════════════════════════════════ 5. HERO SECTION ═══════════════════════════════════════ */ .k-hero { padding: 120px 24px 100px; text-align: center; position: relative; overflow: hidden; } .k-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(201, 169, 110, 0.06) 0%, transparent 60%); pointer-events: none; } .k-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; } .k-hero-eyebrow { font-family: var(--k-font-sans); font-weight: 200; font-size: 10px; letter-spacing: 5px; color: var(--k-gold); text-transform: uppercase; margin-bottom: 40px; display: inline-block; } .k-hero-title { font-family: var(--k-font-serif); font-weight: 300; font-size: clamp(36px, 6.5vw, 72px); letter-spacing: 8px; line-height: 1.15; text-transform: uppercase; margin: 0 0 28px; color: var(--k-text); } .k-hero-title em { font-style: italic; color: var(--k-gold); font-weight: 300; } .k-hero-rule { width: 60px; height: 1px; background: var(--k-gold); margin: 36px auto; opacity: 0.7; } .k-hero-tag { font-family: var(--k-font-serif); font-style: italic; font-weight: 300; font-size: 17px; letter-spacing: 2px; color: var(--k-text-dim); max-width: 540px; margin: 0 auto; line-height: 1.6; } .k-hero--compact .k-hero-rule { margin-top: 20px; margin-bottom: 0; } .k-hero-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 48px; padding: 16px 36px; background: transparent; border: 1px solid var(--k-gold); color: var(--k-gold); font-family: var(--k-font-sans); font-weight: 300; font-size: 10px; letter-spacing: 5px; text-transform: uppercase; transition: all 0.4s var(--k-ease); position: relative; overflow: hidden; } .k-hero-cta::before { content: ''; position: absolute; inset: 0; background: var(--k-gold); transform: translateY(100%); transition: transform 0.4s var(--k-ease); z-index: -1; } .k-hero-cta:hover { color: var(--k-black); } .k-hero-cta:hover::before { transform: translateY(0); } .k-hero-cta::after { content: '→'; font-family: serif; } /* ══════════════════════════════════════ 6. SECTIONS (GENERIC) ═══════════════════════════════════════ */ .k-section { padding: 100px 24px; position: relative; } .k-section--dark { background: var(--k-black); } .k-section--charcoal { background: var(--k-charcoal); border-top: 1px solid var(--k-border); border-bottom: 1px solid var(--k-border); } .k-section-head { max-width: var(--k-max); margin: 0 auto 64px; display: flex; align-items: baseline; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--k-border); flex-wrap: wrap; } .k-section-head--page { margin-bottom: 40px; } .k-section-num { font-family: var(--k-font-sans); font-weight: 200; font-size: 11px; letter-spacing: 4px; color: var(--k-gold); } .k-section-title { font-family: var(--k-font-serif); font-weight: 300; font-size: 28px; letter-spacing: 8px; text-transform: uppercase; margin: 0; flex: 1; color: var(--k-text); } .k-section-kicker { font-family: var(--k-font-sans); font-size: 9px; letter-spacing: 3px; color: var(--k-text-fade); text-transform: uppercase; } @media (max-width: 640px) { .k-section { padding: 72px 20px; } .k-section-head { flex-direction: column; gap: 8px; align-items: flex-start; } } .k-section--store { overflow: hidden; } .k-store-widget-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; } .k-store-section { position: relative; overflow: hidden; display: flex; align-items: center; gap: 70px; width: min(100%, 1000px); padding: 60px; border: 1px solid var(--k-border); background: radial-gradient(circle at top right, rgba(201, 169, 110, 0.08), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0)), #111111; } .k-store-section::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.3; pointer-events: none; } .k-store-logo-column, .k-store-content-column { position: relative; z-index: 1; } .k-store-logo-column { flex: 0 0 300px; display: flex; flex-direction: column; align-items: center; text-align: center; } .k-store-logo { width: 80px; height: 80px; margin-bottom: 20px; } .k-store-brand-rule { width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--k-gold) 30%, var(--k-gold) 70%, transparent); margin-bottom: 12px; } .k-store-brand-name { font-family: var(--k-font-serif); font-weight: 300; font-size: 42px; letter-spacing: 12px; line-height: 1; text-transform: uppercase; color: var(--k-text); } .k-store-brand-subtitle { margin-top: 8px; font-family: var(--k-font-sans); font-weight: 100; font-size: 11px; letter-spacing: 8px; text-transform: uppercase; color: var(--k-gold); } .k-store-content-column { flex: 1; text-align: left; } .k-store-title { margin-bottom: 20px; font-size: clamp(28px, 3vw, 32px); letter-spacing: 4px; line-height: 1.2; } .k-store-text { margin-bottom: 40px; font-family: var(--k-font-sans); font-size: 16px; line-height: 1.8; color: #aaaaaa; font-weight: 300; } .k-store-button { display: inline-block; padding: 15px 40px; border: 1px solid var(--k-gold); color: var(--k-gold); background: transparent; font-family: var(--k-font-sans); font-size: 11px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; transition: all 0.4s var(--k-ease); } .k-store-button:hover, .k-store-button:focus-visible { color: var(--k-black); background: var(--k-gold); box-shadow: 0 0 20px rgba(201, 169, 110, 0.2); } .k-entry--store { padding-top: 72px; } @media (max-width: 850px) { .k-store-section { flex-direction: column; gap: 40px; padding: 40px 20px; text-align: center; } .k-store-logo-column { flex: none; } .k-store-content-column { text-align: center; } } .k-contact-layout { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 60px; align-items: center; } .k-contact-form-wrap, .k-contact-sidebar { position: relative; overflow: hidden; border: 1px solid var(--k-border); background: linear-gradient(180deg, rgba(201, 169, 110, 0.08) 0%, rgba(201, 169, 110, 0) 42%), var(--k-charcoal); } .k-contact-form-wrap { padding: 40px; } .k-contact-form-wrap::before, .k-contact-sidebar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(201, 169, 110, 0.12), transparent 42%); pointer-events: none; } .k-contact-form-head, .k-contact-form, .k-contact-sidebar-kicker, .k-contact-sidebar-stack { position: relative; z-index: 1; } .k-contact-form-kicker, .k-contact-sidebar-kicker { font-family: var(--k-font-sans); font-weight: 200; font-size: 10px; letter-spacing: 4px; color: var(--k-gold); text-transform: uppercase; } .k-contact-form-kicker { margin-bottom: 18px; } .k-contact-form-title { font-size: clamp(24px, 3vw, 34px); letter-spacing: 6px; margin-bottom: 14px; } .k-contact-form-text { font-family: var(--k-font-serif); font-style: italic; font-size: 17px; line-height: 1.7; color: var(--k-text-dim); max-width: 520px; } .k-contact-notice { margin: 28px 0 0; padding: 16px 18px; border: 1px solid; font-family: var(--k-font-sans); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; } .k-contact-notice.is-success { border-color: rgba(201, 169, 110, 0.4); background: rgba(201, 169, 110, 0.08); color: var(--k-text); } .k-contact-notice.is-error { border-color: rgba(240, 237, 232, 0.18); background: rgba(240, 237, 232, 0.04); color: var(--k-text); } .k-contact-form { margin-top: 32px; } .k-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .k-contact-field { margin-bottom: 18px; } .k-contact-field label { display: block; margin-bottom: 8px; font-family: var(--k-font-sans); font-size: 9px; letter-spacing: 3px; color: var(--k-text-dim); text-transform: uppercase; } .k-contact-field input, .k-contact-field textarea { width: 100%; padding: 16px 18px; border: 1px solid var(--k-border-2); background: rgba(14, 14, 14, 0.72); color: var(--k-text); font-family: var(--k-font-sans); font-size: 14px; letter-spacing: 0.4px; transition: border-color 0.35s var(--k-ease), background 0.35s var(--k-ease), box-shadow 0.35s var(--k-ease); } .k-contact-field textarea { min-height: 190px; resize: vertical; } .k-contact-field input::placeholder, .k-contact-field textarea::placeholder { color: rgba(240, 237, 232, 0.34); } .k-contact-field input:focus, .k-contact-field textarea:focus { outline: none; border-color: rgba(201, 169, 110, 0.75); background: rgba(14, 14, 14, 0.92); box-shadow: 0 0 0 4px rgba(201, 169, 110, 0.08); } .k-contact-submit { min-width: 220px; } .k-contact-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .k-contact-sidebar { padding: 48px 40px; } .k-contact-sidebar-kicker { margin-bottom: 24px; } .k-contact-sidebar-stack { display: flex; flex-direction: column; gap: 28px; } .k-contact-meta { display: flex; align-items: flex-start; gap: 14px; } .k-contact-meta-copy { min-width: 0; } .k-contact-meta-icon { width: 20px; flex: 0 0 20px; color: var(--k-gold); opacity: 0.95; } .k-contact-meta-icon svg { width: 100%; height: auto; } .k-contact-sidebar-label { margin-bottom: 8px; font-family: var(--k-font-sans); font-size: 9px; letter-spacing: 3px; color: var(--k-text-dim); text-transform: uppercase; } .k-contact-sidebar-link, .k-contact-sidebar-text { font-family: var(--k-font-serif); font-size: 18px; letter-spacing: 1px; color: var(--k-text); line-height: 1.5; } .k-contact-sidebar-link:hover { color: var(--k-gold); } @media (max-width: 960px) { .k-contact-layout { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 640px) { .k-contact-form-wrap, .k-contact-sidebar { padding: 28px 24px; } .k-contact-grid { grid-template-columns: 1fr; } .k-contact-submit { width: 100%; } } /* ══════════════════════════════════════ 7. ABOUT SECTION (HOME) ═══════════════════════════════════════ */ .k-about { max-width: var(--k-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .k-about--page { margin-bottom: 72px; } .k-about-image { aspect-ratio: 4 / 5; background: var(--k-charcoal); border: 1px solid var(--k-border); overflow: hidden; position: relative; } .k-about-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2) contrast(1.05); } .k-about-image::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4); pointer-events: none; } .k-about-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .k-about-kicker { font-family: var(--k-font-sans); font-weight: 200; font-size: 10px; letter-spacing: 5px; color: var(--k-gold); text-transform: uppercase; margin-bottom: 20px; } .k-about-title { font-family: var(--k-font-serif); font-weight: 300; font-size: 46px; letter-spacing: 8px; text-transform: uppercase; line-height: 1.1; margin: 0 0 28px; } .k-about-text { font-family: var(--k-font-serif); font-style: italic; font-weight: 300; font-size: 18px; line-height: 1.7; color: var(--k-text-dim); letter-spacing: 0.5px; } @media (max-width: 900px) { .k-about { grid-template-columns: 1fr; gap: 48px; } .k-about-image { max-width: 400px; margin: 0 auto; } } .k-contact-prompt { max-width: var(--k-max); margin: 0 auto; padding: 42px; border: 1px solid var(--k-border); background: radial-gradient(circle at top right, rgba(201, 169, 110, 0.12), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), var(--k-charcoal); display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 32px; align-items: center; } .k-contact-prompt-text { margin: 0; font-family: var(--k-font-serif); font-style: italic; font-size: 22px; line-height: 1.7; color: var(--k-text-dim); letter-spacing: 0.6px; } .k-contact-prompt-action { display: flex; justify-content: flex-end; } .k-about-story, .k-about-process, .k-about-living, .k-services-intro, .k-services-process, .k-services-pricing { max-width: var(--k-max); margin: 0 auto; } .k-about-story { padding-top: 8px; } .k-about-story-grid, .k-about-living-grid, .k-services-intro-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); gap: 32px; } .k-about-story-copy, .k-about-living-copy, .k-services-intro-copy { font-family: var(--k-font-sans); font-size: 16px; line-height: 1.95; color: var(--k-text); } .k-about-story-copy p:last-child, .k-about-living-copy p:last-child, .k-services-intro-copy p:last-child { margin-bottom: 0; } .k-about-note, .k-services-intro-note { padding: 28px; border: 1px solid var(--k-border); background: rgba(255, 255, 255, 0.015); } .k-about-note-label, .k-services-intro-label { display: inline-block; margin-bottom: 18px; font-family: var(--k-font-sans); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--k-gold); } .k-about-note p, .k-services-intro-note p { margin: 0; font-family: var(--k-font-serif); font-style: italic; font-size: 17px; line-height: 1.8; color: var(--k-text-dim); } .k-about-process { padding-top: 72px; } .k-about-process-grid, .k-service-process-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--k-border); border: 1px solid var(--k-border); } .k-about-process-card, .k-service-process-card { background: var(--k-black); padding: 34px 30px; } .k-about-process-num, .k-service-process-num { display: inline-block; margin-bottom: 16px; font-family: var(--k-font-sans); font-size: 10px; letter-spacing: 4px; color: var(--k-gold); text-transform: uppercase; } .k-about-process-title, .k-service-process-title { margin: 0 0 14px; font-family: var(--k-font-serif); font-size: 22px; letter-spacing: 4px; text-transform: uppercase; } .k-about-process-text, .k-service-process-text { margin: 0; font-family: var(--k-font-sans); font-size: 14px; line-height: 1.8; color: var(--k-text-dim); } .k-about-living { padding-top: 72px; } .k-about-living-list { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; } .k-about-living-list span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border: 1px solid var(--k-border); background: rgba(255, 255, 255, 0.02); font-family: var(--k-font-sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--k-text-dim); } /* ══════════════════════════════════════ 8. SERVICES ═══════════════════════════════════════ */ .k-services { max-width: var(--k-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--k-border); border: 1px solid var(--k-border); } .k-service { background: var(--k-charcoal); padding: 56px 40px; transition: background 0.5s var(--k-ease); } .k-service:hover { background: #181818; } .k-service-num { font-family: var(--k-font-sans); font-weight: 200; font-size: 11px; letter-spacing: 4px; color: var(--k-gold); margin-bottom: 28px; display: block; } .k-service-title { font-family: var(--k-font-serif); font-weight: 300; font-size: 24px; letter-spacing: 5px; text-transform: uppercase; margin: 0 0 20px; color: var(--k-text); } .k-service-text { font-family: var(--k-font-sans); font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--k-text-dim); margin: 0; } @media (max-width: 768px) { .k-services { grid-template-columns: 1fr; } } .k-services-detail-grid { max-width: var(--k-max); margin: 56px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--k-border); border: 1px solid var(--k-border); } .k-service--detailed { display: flex; flex-direction: column; min-height: 100%; } .k-service-icon { width: 58px; height: 58px; margin-bottom: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(201, 169, 110, 0.28); color: var(--k-gold); } .k-service-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .k-service-meta { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--k-border); display: grid; gap: 16px; } .k-service-meta p { margin: 0; font-family: var(--k-font-sans); font-size: 13px; line-height: 1.8; color: var(--k-text-dim); } .k-service-meta strong { color: var(--k-text); font-weight: 400; } .k-services-process { padding-top: 72px; } .k-services-pricing { padding-top: 72px; } .k-services-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--k-border); border: 1px solid var(--k-border); } .k-price-card { padding: 36px 30px; background: var(--k-charcoal); } .k-price-card-label { display: inline-block; margin-bottom: 18px; font-family: var(--k-font-sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--k-gold); } .k-price-card-price { margin: 0 0 14px; font-family: var(--k-font-serif); font-size: 34px; letter-spacing: 4px; text-transform: uppercase; } .k-price-card-text { margin: 0; font-family: var(--k-font-sans); font-size: 14px; line-height: 1.8; color: var(--k-text-dim); } .k-services-pricing-note { margin: 28px auto 0; max-width: 760px; text-align: center; font-family: var(--k-font-serif); font-size: 18px; line-height: 1.8; color: var(--k-text-dim); } @media (max-width: 900px) { .k-contact-prompt, .k-about-story-grid, .k-about-living-grid, .k-services-intro-grid { grid-template-columns: 1fr; } .k-contact-prompt-action { justify-content: flex-start; } .k-services-detail-grid, .k-services-pricing-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .k-contact-prompt { padding: 30px 24px; } .k-contact-prompt-text { font-size: 18px; } .k-about-process-grid, .k-service-process-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════ 9. PORTFOLIO GRID ═══════════════════════════════════════ */ .k-portfolio-grid { max-width: var(--k-max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .k-project-card { position: relative; overflow: hidden; background: var(--k-charcoal); border: 1px solid var(--k-border); transition: transform 0.5s var(--k-ease), border-color 0.5s var(--k-ease); } .k-project-card:hover { transform: translateY(-4px); border-color: var(--k-gold); } .k-project-thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--k-black); position: relative; } .k-project-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15); transition: transform 0.8s var(--k-ease), filter 0.5s var(--k-ease); } .k-project-card:hover .k-project-thumb img { transform: scale(1.05); filter: grayscale(0); } .k-project-thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--k-border-2); } .k-project-info { padding: 28px 32px 32px; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .k-project-title { font-family: var(--k-font-serif); font-weight: 300; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; margin: 0; line-height: 1.2; } .k-project-title a { color: var(--k-text); } .k-project-title a:hover { color: var(--k-gold); } .k-project-cat { font-family: var(--k-font-sans); font-weight: 200; font-size: 9px; letter-spacing: 3px; color: var(--k-gold); text-transform: uppercase; white-space: nowrap; } @media (max-width: 768px) { .k-portfolio-grid { grid-template-columns: 1fr; gap: 24px; } } /* ══════════════════════════════════════ 10. PAGE CONTENT (single post/page) ═══════════════════════════════════════ */ .k-entry { max-width: 780px; margin: 0 auto; padding: 100px 24px; } .k-entry-header { text-align: center; margin-bottom: 64px; padding-bottom: 40px; border-bottom: 1px solid var(--k-border); } .k-entry-meta { font-family: var(--k-font-sans); font-weight: 200; font-size: 9px; letter-spacing: 4px; color: var(--k-gold); text-transform: uppercase; margin-bottom: 20px; } .k-entry-title { font-family: var(--k-font-serif); font-weight: 300; font-size: clamp(30px, 4vw, 52px); letter-spacing: 6px; line-height: 1.15; text-transform: uppercase; margin: 0 0 20px; } .k-entry-subtitle { font-family: var(--k-font-serif); font-style: italic; font-size: 17px; color: var(--k-text-dim); letter-spacing: 1px; line-height: 1.6; margin: 0; } .k-entry-content { font-family: var(--k-font-sans); font-weight: 300; font-size: 16px; line-height: 1.85; color: var(--k-text); } .k-entry-content > * + * { margin-top: 1.2em; } .k-entry-content h2, .k-entry-content h3, .k-entry-content h4 { margin-top: 2.5em; margin-bottom: 0.8em; } .k-entry-content h2 { font-size: 30px; letter-spacing: 5px; } .k-entry-content h3 { font-size: 22px; letter-spacing: 4px; } .k-entry-content a { color: var(--k-gold); border-bottom: 1px solid rgba(201, 169, 110, 0.3); padding-bottom: 1px; } .k-entry-content a:hover { color: var(--k-text); border-bottom-color: var(--k-text); } .k-entry-content ul, .k-entry-content ol { padding-left: 28px; } .k-entry-content li { margin-bottom: 0.4em; } .k-entry-content img { margin: 32px auto; border: 1px solid var(--k-border); } .k-featured-image { aspect-ratio: 16 / 9; margin: 0 auto 64px; max-width: 1120px; overflow: hidden; border: 1px solid var(--k-border); } .k-featured-image img { width: 100%; height: 100%; object-fit: cover; } /* ══════════════════════════════════════ 11. BLOG / ARCHIVE ═══════════════════════════════════════ */ .k-archive-header { max-width: var(--k-max); margin: 0 auto 80px; padding: 80px 24px 40px; text-align: center; border-bottom: 1px solid var(--k-border); } .k-archive-title { font-family: var(--k-font-serif); font-weight: 300; font-size: 52px; letter-spacing: 8px; text-transform: uppercase; margin: 0 0 16px; } .k-archive-desc { font-family: var(--k-font-serif); font-style: italic; font-size: 16px; color: var(--k-text-dim); letter-spacing: 1px; max-width: 540px; margin: 0 auto; } .k-posts { max-width: 780px; margin: 0 auto; padding: 0 24px 80px; } .k-post-card { padding: 48px 0; border-bottom: 1px solid var(--k-border); } .k-post-card:last-child { border-bottom: none; } .k-post-meta { font-family: var(--k-font-sans); font-weight: 200; font-size: 9px; letter-spacing: 4px; color: var(--k-gold); text-transform: uppercase; margin-bottom: 16px; } .k-post-title { font-family: var(--k-font-serif); font-weight: 300; font-size: 34px; letter-spacing: 4px; line-height: 1.2; text-transform: uppercase; margin: 0 0 16px; } .k-post-title a { color: var(--k-text); } .k-post-title a:hover { color: var(--k-gold); } .k-post-excerpt { font-family: var(--k-font-sans); font-weight: 300; font-size: 15px; line-height: 1.8; color: var(--k-text-dim); margin: 0 0 20px; } .k-post-more { font-family: var(--k-font-sans); font-weight: 300; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--k-gold); display: inline-flex; align-items: center; gap: 8px; } .k-post-more::after { content: '→'; transition: transform 0.3s var(--k-ease); } .k-post-more:hover::after { transform: translateX(4px); } /* ══════════════════════════════════════ 12. PAGINATION ═══════════════════════════════════════ */ .navigation.pagination { max-width: 780px; margin: 48px auto 0; padding: 0 24px; text-align: center; } .page-numbers { display: inline-flex; gap: 12px; list-style: none; padding: 0; margin: 0; justify-content: center; flex-wrap: wrap; } .page-numbers li .page-numbers, .page-numbers > .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid var(--k-border); font-family: var(--k-font-sans); font-weight: 200; font-size: 11px; letter-spacing: 2px; color: var(--k-text-dim); text-transform: uppercase; background: var(--k-charcoal); } .page-numbers.current { color: var(--k-gold); border-color: var(--k-gold); } a.page-numbers:hover { border-color: var(--k-gold); color: var(--k-gold); } /* ══════════════════════════════════════ 13. COMMENTS ═══════════════════════════════════════ */ .comments-area { max-width: 780px; margin: 80px auto 0; padding: 60px 24px 0; border-top: 1px solid var(--k-border); } .comments-title { font-family: var(--k-font-serif); font-size: 26px; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 40px; } .comment-list { list-style: none; padding: 0; margin: 0 0 48px; } .comment-body { padding: 28px 0; border-bottom: 1px solid var(--k-border); } .comment-author { font-family: var(--k-font-serif); font-size: 16px; letter-spacing: 2px; color: var(--k-text); margin-bottom: 8px; } .comment-metadata { font-family: var(--k-font-sans); font-size: 9px; letter-spacing: 2px; color: var(--k-text-fade); text-transform: uppercase; margin-bottom: 14px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea, .search-form input[type="search"] { width: 100%; padding: 14px 18px; background: var(--k-charcoal); border: 1px solid var(--k-border); color: var(--k-text); font-family: var(--k-font-sans); font-size: 14px; letter-spacing: 0.5px; margin-bottom: 16px; } .comment-form input:focus, .comment-form textarea:focus, .search-form input:focus { outline: none; border-color: var(--k-gold); } .comment-form label { font-family: var(--k-font-sans); font-size: 10px; letter-spacing: 3px; color: var(--k-text-dim); text-transform: uppercase; display: block; margin-bottom: 6px; } button, input[type="submit"], .wp-block-button__link { display: inline-block; padding: 14px 32px; background: transparent; border: 1px solid var(--k-gold); color: var(--k-gold) !important; font-family: var(--k-font-sans); font-weight: 300; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; transition: all 0.4s var(--k-ease); } button:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background: var(--k-gold); color: var(--k-black) !important; } /* ══════════════════════════════════════ 14. FOOTER ═══════════════════════════════════════ */ .site-footer { background: var(--k-charcoal); border-top: 1px solid var(--k-border); padding: 80px 24px 32px; margin-top: 80px; position: relative; } .site-footer-inner { max-width: var(--k-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid var(--k-border); } .footer-col h4 { font-family: var(--k-font-serif); font-size: 14px; letter-spacing: 4px; margin: 0 0 20px; color: var(--k-text); } .footer-col p, .footer-col a { font-family: var(--k-font-sans); font-weight: 300; font-size: 12px; letter-spacing: 1px; color: var(--k-text-dim); line-height: 2; } .footer-col a:hover { color: var(--k-gold); } .footer-col.brand { display: flex; flex-direction: column; gap: 20px; } .footer-contact-list { display: flex; flex-direction: column; gap: 18px; } .footer-col .k-contact-meta { gap: 12px; } .footer-col .k-contact-meta-icon { width: 18px; flex-basis: 18px; margin-top: 2px; } .footer-col .k-contact-sidebar-label { margin-bottom: 4px; } .footer-col .k-contact-sidebar-link, .footer-col .k-contact-sidebar-text { font-family: var(--k-font-sans); font-size: 12px; letter-spacing: 1px; color: var(--k-text-dim); } .footer-meta { max-width: var(--k-max); margin: 0 auto; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .footer-copy { font-family: var(--k-font-serif); font-style: italic; font-size: 13px; letter-spacing: 2px; color: var(--k-text-dim); } .footer-version { font-family: var(--k-font-sans); font-weight: 200; font-size: 9px; letter-spacing: 4px; color: var(--k-text-fade); text-transform: uppercase; } .social-icons { display: flex; gap: 12px; flex-wrap: wrap; } .social-icons .social-link { width: 38px; height: 38px; border: 1px solid var(--k-border-2); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(244, 241, 236, 0.02); color: var(--k-text-dim); transition: transform 0.3s var(--k-ease), border-color 0.3s var(--k-ease), background 0.3s var(--k-ease), color 0.3s var(--k-ease); } .social-icons .social-link:hover { color: var(--k-text); border-color: rgba(201, 169, 110, 0.35); background: rgba(201, 169, 110, 0.08); transform: translateY(-2px); } .social-link-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .social-link-icon svg { width: 100%; height: 100%; } @media (max-width: 768px) { .site-footer-inner { grid-template-columns: 1fr; gap: 32px; } .footer-meta { justify-content: center; text-align: center; } } /* ══════════════════════════════════════ 15. 404 PAGE ═══════════════════════════════════════ */ .k-error-404 { text-align: center; padding: 140px 24px; max-width: 700px; margin: 0 auto; } .k-error-404 .num { font-family: var(--k-font-serif); font-weight: 300; font-size: 120px; color: var(--k-gold); letter-spacing: 12px; line-height: 1; margin-bottom: 16px; } .k-error-404 h1 { font-size: 28px; letter-spacing: 6px; margin-bottom: 20px; } .k-error-404 p { font-family: var(--k-font-serif); font-style: italic; color: var(--k-text-dim); font-size: 17px; letter-spacing: 1px; } /* ══════════════════════════════════════ 16. WP CORE COMPATIBILITY ═══════════════════════════════════════ */ .alignleft { float: left; margin: 0 28px 20px 0; } .alignright { float: right; margin: 0 0 20px 28px; } .aligncenter { display: block; margin: 20px auto; } .alignwide { max-width: 1120px; margin-left: calc(50% - 560px); margin-right: calc(50% - 560px); } .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; } .wp-caption { max-width: 100%; } .wp-caption-text { font-family: var(--k-font-serif); font-style: italic; font-size: 13px; color: var(--k-text-dim); letter-spacing: 0.5px; text-align: center; padding: 8px 0; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .gallery-caption { font-size: 11px; } /* ══════════════════════════════════════ 17. ANIMATIONS ═══════════════════════════════════════ */ @keyframes kandemFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .k-fade-up { animation: kandemFadeUp 0.8s var(--k-ease) forwards; opacity: 0; } .k-delay-1 { animation-delay: 0.1s; } .k-delay-2 { animation-delay: 0.25s; } .k-delay-3 { animation-delay: 0.4s; } .k-delay-4 { animation-delay: 0.55s; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } /* Animasyon iptal edildiğinde içeriğin görünür olmasını garantiler */ .k-fade-up { opacity: 1 !important; } } .k-hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 48px; } .k-hero-actions .k-hero-cta { margin-top: 0; } .k-hero-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border: 1px solid var(--k-border-2); color: var(--k-text); font-family: var(--k-font-sans); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; transition: all 0.4s var(--k-ease); } .k-hero-secondary:hover, .k-hero-secondary:focus-visible { border-color: var(--k-gold); color: var(--k-gold); } .k-project-summary { margin: 10px 0 0; font-family: var(--k-font-sans); font-size: 13px; line-height: 1.7; color: var(--k-text-dim); } .k-testimonial-grid { max-width: var(--k-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .k-testimonial-card { padding: 34px 30px; border: 1px solid var(--k-border); background: var(--k-charcoal); } .k-testimonial-quote { margin: 0 0 18px; font-family: var(--k-font-serif); font-size: 24px; line-height: 1.55; color: var(--k-text); } .k-testimonial-meta { font-family: var(--k-font-sans); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--k-gold); } .k-contact-form select { width: 100%; padding: 14px 18px; background: var(--k-charcoal); border: 1px solid var(--k-border); color: var(--k-text); font-family: var(--k-font-sans); font-size: 14px; letter-spacing: 0.5px; margin-bottom: 16px; } .k-contact-form select:focus { outline: none; border-color: var(--k-gold); } .k-contact-checkbox label { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; text-transform: none; letter-spacing: 0.4px; font-size: 13px; } .k-contact-checkbox input { margin-top: 2px; } .k-contact-sidebar-note { padding-top: 18px; border-top: 1px solid var(--k-border); color: var(--k-text-dim); font-size: 13px; line-height: 1.8; } @media (max-width: 900px) { .k-testimonial-grid { grid-template-columns: 1fr; } }