/* ========================================================================== Atelier Splash — painter gallery ========================================================================== */ :root { /* Warm paper palette */ --paper: #FBF8F3; --paper-2: #F4EFE6; --mat: #FFFDFA; --line: #E3DACB; --line-soft: #EFE8DC; --ink: #241E18; --ink-soft: #5C5045; --ink-mute: #8C7F70; --accent: #C4A882; --sold: #A3382C; --text: var(--ink); --muted: var(--ink-soft); --bg: var(--paper); --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Outfit', system-ui, sans-serif; --max: 1140px; --content: 660px; --header-h: 76px; --radius: 2px; --halo: clamp(0.6rem, 2.2vw, 1.1rem); --splash-opacity: 0.85; --card-img-ratio: 4 / 5; --mat-pad: clamp(0.5rem, 1.6vw, 0.85rem); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Pale washed buttons. Static fallbacks; tinted from --accent just below. */ --btn-bg: rgba(196, 168, 130, 0.14); --btn-bg-hover: rgba(196, 168, 130, 0.27); --btn-line: rgba(196, 168, 130, 0.5); --btn-line-hover: rgba(196, 168, 130, 0.85); --btn-shadow: 0 8px 20px rgba(150, 126, 92, 0.18); } /* --accent is set inline on , so derive the tints there, not on :root. */ @supports (background: color-mix(in srgb, red 10%, transparent)) { body { --btn-bg: color-mix(in srgb, var(--accent) 14%, transparent); --btn-bg-hover: color-mix(in srgb, var(--accent) 27%, transparent); --btn-line: color-mix(in srgb, var(--accent) 50%, transparent); --btn-line-hover: color-mix(in srgb, var(--accent) 85%, transparent); } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 300; line-height: 1.75; color: var(--text); background: var(--bg); min-height: 100vh; } /* Warm light from the top + paper grain */ body::after { content: ''; position: fixed; inset: 0 0 auto; height: 340px; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(196, 168, 130, 0.09), transparent); } body::before { content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 190px; } .site-header, #main-content, .site-footer { position: relative; z-index: 2; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--ink); } h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.008em; color: var(--text); } ::selection { background: rgba(196, 168, 130, 0.28); color: var(--ink); } :focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; } /* Small-caps label used across the theme */ .eyebrow { display: block; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); } /* --- Header --------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(251, 248, 243, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); } .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: var(--max); margin: 0 auto; padding: 0 1.75rem; height: var(--header-h); } .site-logo { justify-self: start; color: var(--text); font-family: var(--font-serif); font-size: 1.45rem; letter-spacing: 0.01em; transition: opacity 0.3s var(--ease); } .site-logo:hover { opacity: 0.6; } .logo-image { height: 34px; width: auto; } .site-nav { justify-self: center; grid-column: 2; } .site-nav ul, .mobile-nav ul, .footer-nav ul { list-style: none; margin: 0; padding: 0; } .site-nav ul { display: flex; align-items: center; gap: 2.25rem; } .site-nav a { position: relative; color: var(--ink-mute); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 4px; transition: color 0.3s var(--ease); } .site-nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .site-nav a:hover::after, .site-nav .nav-current a::after, .site-nav li.nav-current a::after { transform: scaleX(1); transform-origin: left; } .site-nav a:hover, .site-nav .nav-current a, .site-nav li.nav-current a { color: var(--ink); } .header-end { justify-self: end; grid-column: 3; display: flex; align-items: center; gap: 0.25rem; } /* Ghost members UI: the floating Portal button and any sign-up nav links. The JS in main.js removes the nav items outright; these rules cover the moment before it runs and the no-JS case. */ #ghost-portal-root iframe.gh-portal-triggerbtn-iframe, #ghost-portal-root .gh-portal-triggerbtn-wrapper, iframe[title="portal-trigger"], iframe[data-testid="portal-trigger-frame"] { display: none !important; } .site-nav a[href*="#/portal"], .mobile-nav a[href*="#/portal"], .footer-nav a[href*="#/portal"] { display: none !important; } .site-nav li:has(> a[href*="#/portal"]), .mobile-nav li:has(> a[href*="#/portal"]), .footer-nav li:has(> a[href*="#/portal"]) { display: none !important; } /* Social icon — header and footer */ .social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--ink-mute); border-radius: 50%; transition: color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease); } .social-link svg { width: 19px; height: 19px; display: block; } .social-link:hover { color: var(--ink); background: var(--btn-bg); transform: translateY(-1px); } .footer-social { margin-top: 1rem; } .footer-social-link { margin-left: -9px; } .nav-toggle { display: none; width: 40px; height: 40px; border: none; background: transparent; flex-direction: column; justify-content: center; gap: 6px; cursor: pointer; } .nav-toggle span { display: block; height: 1px; width: 22px; background: var(--ink); margin: 0 auto; } .mobile-nav { padding: 1rem 1.75rem 1.5rem; border-top: 1px solid var(--line-soft); text-align: center; } .mobile-nav[hidden] { display: none; } .mobile-nav ul { display: flex; flex-direction: column; gap: 0.9rem; } .mobile-nav a { color: var(--ink); font-family: var(--font-serif); font-size: 1.3rem; } #main-content { min-height: calc(100vh - var(--header-h) - 200px); } /* --- Intro ---------------------------------------------------------------- */ .intro { max-width: 660px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) 1.75rem clamp(2.5rem, 5vw, 3.5rem); text-align: center; } .intro .eyebrow { margin-bottom: 1.15rem; } .intro-title { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.08; } .intro-title em { font-style: italic; color: var(--ink-soft); } .intro-rule { display: block; width: 1px; height: 46px; margin: 1.6rem auto 0; background: linear-gradient(to bottom, var(--accent), transparent); } .intro-text { color: var(--muted); font-family: var(--font-serif); font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-style: italic; line-height: 1.55; max-width: 34rem; margin: 1.4rem auto 0; } .author-intro .author-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.35rem; box-shadow: 0 6px 22px rgba(36, 30, 24, 0.12); } /* --- Feed ----------------------------------------------------------------- */ .post-feed { max-width: var(--max); margin: 0 auto; padding: 0 1.75rem clamp(4rem, 8vw, 6rem); overflow: visible; } .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(2.5rem, 4vw, 3.75rem) clamp(1.25rem, 2.5vw, 2rem); overflow: visible; } .post-card { display: flex; flex-direction: column; overflow: visible; max-width: 270px; width: 100%; margin: 0 auto; } .post-card-media { display: block; overflow: visible; } /* Gallery mat around every image */ .image-front { position: relative; display: block; width: 100%; background: var(--mat); padding: var(--mat-pad); border: 1px solid var(--line-soft); box-shadow: 0 2px 10px rgba(36, 30, 24, 0.06); transition: box-shadow 0.55s var(--ease), transform 0.55s var(--ease); } .image-front img { width: 100%; height: auto; display: block; } .post-card .image-front { aspect-ratio: var(--card-img-ratio); } .post-card .image-front img, .post-card-img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.1s var(--ease); } .post-card:hover .image-front { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(36, 30, 24, 0.15); } .post-card:hover .image-front img { transform: scale(1.05); } .post-card .watercolor-splash { transition: opacity 0.7s ease, transform 1s var(--ease); } .post-card:hover .watercolor-splash { transform: scale(1.07); } .post-card-body { margin-top: 1.15rem; text-align: center; } .post-card-tag { display: inline-block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.55rem; transition: color 0.3s var(--ease); } .post-card-tag:hover { color: var(--accent); } .post-card-title { font-size: 1.42rem; line-height: 1.25; margin-bottom: 0.5rem; } .post-card-title a { color: var(--text); background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 50% 100%; background-size: 0% 1px; transition: background-size 0.45s var(--ease); } .post-card:hover .post-card-title a { background-size: 70% 1px; } .post-card-excerpt { color: var(--muted); font-size: 0.9rem; line-height: 1.6; max-width: 24rem; margin: 0 auto; } .post-card-date { display: block; margin-top: 0.7rem; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } /* --- Watercolor halo ------------------------------------------------------ */ .image-splash-wrap { position: relative; display: block; width: calc(100% + (var(--halo) * 2)); margin: calc(var(--halo) * 0.5) calc(var(--halo) * -1); overflow: visible; } .image-back-splash { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .watercolor-splash { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; } .image-back-splash.is-active .watercolor-splash { opacity: var(--splash-opacity); } .image-splash-stage { position: relative; z-index: 1; margin: var(--halo); } /* --- Single post ---------------------------------------------------------- */ .post-full, .page-full { max-width: 760px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) 1.75rem clamp(4rem, 7vw, 5.5rem); overflow: visible; } .post-image { max-width: 440px; margin: 0 auto clamp(2rem, 4vw, 3rem); overflow: visible; } .post-image .image-front { aspect-ratio: var(--card-img-ratio); box-shadow: 0 10px 34px rgba(36, 30, 24, 0.13); } .post-image .image-front img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .post-image figcaption { text-align: center; color: var(--ink-mute); font-family: var(--font-serif); font-size: 0.95rem; font-style: italic; margin-top: 1rem; } .post-header { text-align: center; max-width: var(--content); margin: 0 auto clamp(2rem, 4vw, 3rem); } .post-tag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem; } .post-title { font-size: clamp(2.1rem, 4.5vw, 3.1rem); line-height: 1.1; margin-bottom: 1rem; } .post-meta { display: flex; align-items: center; justify-content: center; gap: 0.85rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); } .post-content { max-width: var(--content); margin: 0 auto; font-size: 1.115rem; line-height: 1.85; color: var(--ink-soft); } .post-content p { color: var(--ink-soft); } .post-content > p:first-of-type::first-letter { float: left; font-family: var(--font-serif); font-size: 3.6em; line-height: 0.8; font-weight: 400; color: var(--ink); padding: 0.06em 0.12em 0 0; } .gh-content > * + * { margin-top: 1.35em; } .gh-content h2, .gh-content h3 { color: var(--ink); margin-top: 1.9em; } .gh-content h2 { font-size: 1.75rem; } .gh-content h3 { font-size: 1.4rem; } .gh-content a { color: var(--ink); background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size 0.35s var(--ease); } .gh-content a:hover { background-size: 100% 2px; } .gh-content img { margin: 2.25em auto; border-radius: var(--radius); } .gh-content .image-splash-wrap img { margin: 0; border-radius: 0; } .gh-content blockquote { position: relative; margin-top: 2em; padding: 0.35rem 0 0.35rem 1.6rem; border-left: 2px solid var(--accent); color: var(--ink); font-family: var(--font-serif); font-style: italic; font-size: 1.42rem; line-height: 1.45; } .gh-content hr { border: none; height: 1px; width: 56%; margin: 3em auto; background: linear-gradient(to right, transparent, var(--line), transparent); } .gh-content figcaption { text-align: center; font-family: var(--font-serif); font-size: 0.95rem; font-style: italic; color: var(--ink-mute); margin-top: 0.7rem; } .gh-content ul, .gh-content ol { padding-left: 1.35em; } .gh-content li + li { margin-top: 0.4em; } /* Koenig widths */ .kg-width-wide { position: relative; width: 88vw; max-width: 1040px; margin-left: calc(50% - 44vw); margin-right: calc(50% - 44vw); } .kg-width-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .kg-width-full img, .kg-width-wide img { width: 100%; } /* --- Tags, nav, pagination ------------------------------------------------ */ .post-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; max-width: var(--content); margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; } .post-tag-link { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 1rem; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } .post-tag-link:hover { color: var(--ink); border-color: var(--btn-line-hover); background: var(--btn-bg); } .post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: var(--content); margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding-top: 2rem; border-top: 1px solid var(--line-soft); } .post-nav-link { display: flex; flex-direction: column; gap: 0.4rem; color: var(--text); padding: 1rem 1.15rem; transition: background 0.4s var(--ease), transform 0.4s var(--ease); } .post-nav-link:hover { background: var(--paper-2); transform: translateY(-2px); } .post-nav-next { text-align: right; } .post-nav-label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); } .post-nav-title { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.25; } .pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); } .pagination a { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1.4rem; transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); } .pagination a:hover { color: var(--ink); border-color: var(--btn-line-hover); background: var(--btn-bg); } .page-number { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } /* --- Footer --------------------------------------------------------------- */ .site-footer { position: relative; border-top: 1px solid var(--line-soft); background: var(--paper-2); padding: clamp(3rem, 6vw, 4.5rem) 1.75rem clamp(2rem, 4vw, 3rem); } .footer-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; } .footer-logo { font-family: var(--font-serif); font-size: 1.5rem; color: var(--ink); transition: opacity 0.3s var(--ease); } .footer-logo:hover { opacity: 0.6; } .footer-description { color: var(--muted); font-family: var(--font-serif); font-size: 1.08rem; font-style: italic; max-width: 26rem; margin-top: 0.6rem; } .footer-location { margin-top: 0.9rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); } .footer-nav ul { display: flex; flex-direction: column; gap: 0.6rem; } .footer-nav a { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.3s var(--ease); } .footer-nav a:hover { color: var(--ink); } .copyright { grid-column: 1 / -1; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-mute); } /* --- Misc ----------------------------------------------------------------- */ .page-extra { max-width: var(--content); margin: 0 auto 4rem; padding: 0 1.75rem; } .error-page { text-align: center; padding: clamp(5rem, 12vw, 8rem) 1.75rem; } .error-code { font-family: var(--font-serif); font-size: clamp(4rem, 12vw, 7rem); color: var(--line); line-height: 1; margin-bottom: 0.75rem; } .btn { display: inline-block; margin-top: 1.5rem; padding: 0.85rem 1.75rem; border: 1px solid var(--btn-line); background: var(--btn-bg); color: var(--ink); border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease); } .btn:hover { color: var(--ink); background: var(--btn-bg-hover); border-color: var(--btn-line-hover); transform: translateY(-2px); box-shadow: var(--btn-shadow); } /* Scroll reveal */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } .post-grid [data-reveal]:nth-child(2) { transition-delay: 0.08s; } .post-grid [data-reveal]:nth-child(3) { transition-delay: 0.16s; } .post-grid [data-reveal]:nth-child(4) { transition-delay: 0.24s; } .post-grid [data-reveal]:nth-child(5) { transition-delay: 0.32s; } /* --- Sold / availability stamp -------------------------------------------- */ .sold-badge { position: absolute; top: calc(var(--mat-pad) + 0.6rem); right: calc(var(--mat-pad) + 0.6rem); z-index: 2; padding: 0.32rem 0.7rem; border: 1.5px solid var(--sold); border-radius: 2px; background: rgba(255, 253, 250, 0.86); color: var(--sold); font-family: var(--font-sans); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; transform: rotate(-7deg); box-shadow: 0 2px 8px rgba(36, 30, 24, 0.1); pointer-events: none; } .post-image .sold-badge { top: calc(var(--mat-pad) + 1rem); right: calc(var(--mat-pad) + 1rem); font-size: 0.72rem; padding: 0.45rem 0.95rem; letter-spacing: 0.22em; } /* Sold pieces read slightly quieter in the grid */ .post-card.is-sold .image-front img { opacity: 0.9; } .post-card.is-sold:hover .image-front img { opacity: 1; } /* --- Koenig editor cards --------------------------------------------------- */ .kg-card { margin-top: 2.25em; } .gh-content > .kg-card:first-child { margin-top: 0; } /* Button card */ .kg-button-card { display: flex; justify-content: center; } .kg-button-card.kg-align-left { justify-content: flex-start; } .kg-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.9rem; border: 1px solid var(--btn-line); border-radius: 999px; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease); } .kg-btn:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow); background: var(--btn-bg); border-color: var(--btn-line-hover); color: var(--ink); } .kg-btn-accent { background: var(--btn-bg); border-color: var(--btn-line); color: var(--ink); } .kg-btn-accent:hover { background: var(--btn-bg-hover); border-color: var(--btn-line-hover); color: var(--ink); } /* Product card — used for individual paintings for sale */ .kg-product-card { display: flex; justify-content: center; } .kg-product-card-container { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 480px; padding: clamp(1.25rem, 3vw, 1.9rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--mat); box-shadow: 0 4px 18px rgba(36, 30, 24, 0.06); } .kg-product-card-image { width: 100%; height: auto; margin: 0 0 1.15rem; border: 1px solid var(--line-soft); border-radius: 0; object-fit: cover; } .kg-product-card-title-container { margin-bottom: 0.55rem; } .kg-product-card-title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; line-height: 1.2; color: var(--ink); margin: 0; text-align: center; } /* Star rating */ .kg-product-card-rating { display: flex; justify-content: center; gap: 1px; margin-bottom: 0.85rem; color: var(--accent); } .kg-product-card-rating-star { display: block; width: 22px; height: 28px; padding: 4px 2px; } .kg-product-card-rating-star svg { display: block; width: 100%; height: 100%; fill: currentColor; opacity: 0.18; transition: opacity 0.3s var(--ease); } .kg-product-card-rating-active.kg-product-card-rating-star svg { opacity: 1; } .kg-product-card-description { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.65; text-align: center; } .kg-product-card-description > * + * { margin-top: 0.8em; } .kg-product-card-description p:last-child { margin-bottom: 0; } .kg-product-card-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; margin-top: 1.4rem; padding: 0.9rem 1.5rem; border: 1px solid var(--btn-line); border-radius: 999px; background: var(--btn-bg); color: var(--ink); font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease); } .kg-product-card-button:hover { color: var(--ink); background: var(--btn-bg-hover); border-color: var(--btn-line-hover); transform: translateY(-2px); box-shadow: var(--btn-shadow); } .kg-product-card-btn-accent { background: var(--btn-bg); border-color: var(--btn-line); color: var(--ink); } .kg-product-card-btn-accent:hover { background: var(--btn-bg-hover); border-color: var(--btn-line-hover); color: var(--ink); } /* Callout card */ .kg-callout-card { display: flex; gap: 0.85rem; padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--paper-2); border-left: 2px solid var(--accent); } .kg-callout-emoji { font-size: 1.15rem; line-height: 1.5; } .kg-callout-text { color: var(--ink-soft); } /* Gallery card */ .kg-gallery-container { display: flex; flex-direction: column; gap: 0.75rem; } .kg-gallery-row { display: flex; gap: 0.75rem; } .kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Bookmark card */ .kg-bookmark-card a.kg-bookmark-container { display: flex; color: var(--ink); background: var(--mat); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; overflow: hidden; } .kg-bookmark-content { flex: 1 1 auto; padding: 1.15rem 1.35rem; } .kg-bookmark-title { font-family: var(--font-serif); font-size: 1.2rem; } .kg-bookmark-description { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kg-bookmark-metadata { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.78rem; color: var(--ink-mute); } .kg-bookmark-icon { width: 18px; height: 18px; } .kg-bookmark-thumbnail { flex: 0 0 34%; } .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; } /* --- Responsive ----------------------------------------------------------- */ @media (min-width: 769px) { .mobile-nav { display: none; } } @media (max-width: 768px) { .site-nav { display: none; } .nav-toggle { display: flex; } .header-inner { grid-template-columns: 1fr auto; padding: 0 1.25rem; } .header-end { grid-column: 2; } :root { --header-h: 64px; --halo: clamp(0.5rem, 2.8vw, 0.8rem); --mat-pad: 0.45rem; } .intro { padding: 2.75rem 1.25rem 2rem; } .post-feed { padding: 0 1.25rem 3.5rem; } .post-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } .post-card { max-width: none; } .post-card-title { font-size: 1.15rem; } .post-card-excerpt { font-size: 0.85rem; } .post-image { max-width: 300px; } .post-full, .page-full { padding: 2rem 1.25rem 3.5rem; } .post-navigation { grid-template-columns: 1fr; } .post-nav-next { text-align: left; } .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; } .footer-nav ul { flex-direction: row; flex-wrap: wrap; gap: 1rem; } .sold-badge { font-size: 0.52rem; padding: 0.26rem 0.5rem; letter-spacing: 0.16em; top: calc(var(--mat-pad) + 0.4rem); right: calc(var(--mat-pad) + 0.4rem); } .kg-bookmark-card a.kg-bookmark-container { flex-direction: column-reverse; } .kg-bookmark-thumbnail { flex: 0 0 auto; max-height: 180px; } } @media (max-width: 420px) { .post-grid { grid-template-columns: 1fr; max-width: 260px; margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .watercolor-splash { opacity: var(--splash-opacity); } [data-reveal] { opacity: 1; transform: none; } }