/* =========================== COLOR PALETTES (CSS VARS) =========================== */ /* PALETTE A – Soft Cottage Floral (ACTIVE) */ /* =========================== COLOR PALETTES (CSS VARS) Multi-theme via =========================== */ /* DEFAULT: C2-A Earthy Matte Botanical (Used when body has class "theme-botanical-matte") */ /**/ :root { --color-bg: #f4f1eb; --color-bg: #ffffff; --color-bg: #fefefe; --color-surface: #ffffff; --color-surface-soft: #e8e0d2; --color-border-subtle: #d6c7b4; --color-text-main: #f2874e; --color-text-soft: #e29870; --color-text-muted: #f1bc9f; --color-text-main: #265fb5; --color-text-soft: #3b66c2; --color-text-muted: #8da1cf; --color-text-main: #329afe; --color-text-soft: #6fb6f9; --color-text-muted: #a2ccf2; --color-text-main: #3f6f9e; /* calm denim blue */ --color-text-soft: #6f8fa8; /* blue-gray */ --color-text-muted: #8f9aa3; /* warm gray */ --color-text-main: #3f7f8c; /* blue-sage */ --color-text-soft: #7fa6a0; /* soft sage */ --color-text-muted: #b9d1cc; /* misty neutral */ --color-text-main: #2f5f8f; /* restrained editorial blue */ --color-text-soft: #5f7f99; /* steel blue */ --color-text-muted: #6f7780; /* charcoal-muted */ /* Deep Navy Spread */ --color-text-main: #1C4E80; --color-text-soft: #5A7D9A; --color-text-muted: #A4B8C8; /* Warm Slate Spread */ --color-text-main: #364156; --color-text-soft: #7C8793; --color-text-muted: #BCC5CE; /* Desaturated Teal Spread */ --color-text-main: #2C6E8F; --color-text-soft: #639AB6; --color-text-muted: #B0CFDE; --color-text-main: #4a86c5; /* softer sky blue */ --color-text-soft: #7fa9d6; /* gentle secondary */ --color-text-muted: #b7cde3; /* airy, background-friendly */ --color-accent-rose: #c98c82; --color-accent-lavender: #b3a1c8; --color-accent-sage: #96aa7c; --color-accent-pink: #f99390; --color-accent-cloud: #d6e4ff; --color-accent-violet: #b787da; --color-accent-orange: #f2874e; --color-accent-yellow: #d0c362; --color-accent-green: #7a9f51; --color-button: #c98c82; --color-button-text: #2f2721; --color-button-soft: #e8c5bc; --shadow-soft: 0 18px 40px rgba(39, 26, 20, 0.18); } /* PALETTE B – Minimal Peony (commented out) :root { --color-bg: #FDFCFB; --color-surface: #FFFFFF; --color-surface-soft: #F5E8ED; --color-border-subtle: #E6D3DC; --color-text-main: #2F2A25; --color-text-soft: #655853; --color-text-muted: #9A8B86; --color-accent-rose: #E8C4C8; --color-accent-lavender: #F0DDE2; --color-accent-sage: #D1E2C4; --color-button: #E8C4C8; --color-button-text: #2F2A25; --color-button-soft: #F8E6EA; --shadow-soft: 0 18px 40px rgba(50, 25, 40, 0.14); } */ /* PALETTE C – Modern Botanical (commented out) :root { --color-bg: #F6F5F2; --color-surface: #FFFFFF; --color-surface-soft: #E5DFD5; --color-border-subtle: #D6CEC2; --color-text-main: #2E2A27; --color-text-soft: #5F564E; --color-text-muted: #95897D; --color-accent-rose: #D2A18C; --color-accent-lavender: #B5A6C8; --color-accent-sage: #A8B88F; --color-button: #D2A18C; --color-button-text: #2E2A27; --color-button-soft: #F0D7C8; --shadow-soft: 0 20px 45px rgba(40, 30, 20, 0.16); } */ /* PALETTE D – Bold Garden Floral (commented out) :root { --color-bg: #F7EFEA; --color-surface: #FFFFFF; --color-surface-soft: #F3D9C8; --color-border-subtle: #E7C4B2; --color-text-main: #2E2F33; --color-text-soft: #585967; --color-text-muted: #8C8EA0; --color-accent-rose: #C85C70; --color-accent-lavender: #D7A4E0; --color-accent-sage: #8CBF78; --color-button: #C85C70; --color-button-text: #FFFFFF; --color-button-soft: #F2B8C4; --shadow-soft: 0 22px 50px rgba(50, 24, 35, 0.2); } */ /* THEME: Soft Editorial Edge (A) Attach to */ .theme-editorial { --color-bg: #f7f4f0; --color-surface: #ffffff; --color-surface-soft: #ece1d6; --color-border-subtle: #d9c7b4; --color-text-main: #262226; --color-text-soft: #5a4f57; --color-text-muted: #97868e; --color-accent-rose: #c18c8a; --color-accent-lavender: #b6a7ce; --color-accent-sage: #a4b492; --color-button: #262226; --color-button-text: #f7f4f0; --color-button-soft: #3b343c; --shadow-soft: 0 22px 46px rgba(22, 14, 20, 0.22); } /* THEME: Whimsical Cottage Edge (B) Attach to */ .theme-cottage { --color-bg: #faf7f2; --color-surface: #ffffff; --color-surface-soft: #f2e4d5; --color-border-subtle: #e3d5c6; --color-text-main: #3f362f; --color-text-soft: #6f6256; --color-text-muted: #9a8b7d; --color-accent-rose: #d9a5a0; --color-accent-lavender: #c3b2d9; --color-accent-sage: #b7c4a1; --color-button: #d9a5a0; --color-button-text: #3f362f; --color-button-soft: #f3d4cf; --shadow-soft: 0 18px 40px rgba(40, 25, 15, 0.12); } /* =========================== BASE TYPOGRAPHY & LAYOUT =========================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--color-bg); color: var(--color-text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; animation: fadeInPage 700ms ease-out both; } /* Adds very subtle vignette / paper feel so it is not flat */ body { position: relative; isolation: isolate; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient( circle at top left, rgba(255, 255, 255, 0.45), transparent 60% ), radial-gradient( circle at bottom right, rgba(0, 0, 0, 0.08), transparent 65% ), linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent 55%); mix-blend-mode: multiply; opacity: 0.4; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .form-honey { display: none; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent-lavender); outline-offset: 3px; } .container { width: min(1120px, 100% - 3rem); margin-inline: auto; } /* =========================== HEADER & NAV =========================== */ .site-header { position: sticky; top: 0; z-index: 20; background: linear-gradient( to bottom, rgba(255, 254, 252, 0.97), rgba(255, 255, 255, 0.94) ); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(227, 213, 198, 0.251); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.9rem; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; } .brand-mark { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .brand-text { display: inline-flex; flex-direction: column; font-family: "Fraunces", "Times New Roman", serif; } .brand-kicker { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); } .brand-main { font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; } /* NAV */ .site-nav { flex: 1; } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--color-border-subtle); border-radius: 10px; background: rgba(255, 255, 255, 0.9); align-items: center; justify-content: center; gap: 0.24rem; cursor: pointer; transition: border-color 140ms ease-out, box-shadow 140ms ease-out; } .nav-toggle:hover { border-color: rgba(0, 0, 0, 0.18); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .nav-toggle-line { width: 18px; height: 2px; border-radius: 999px; background: var(--color-text-main); display: block; } .site-header.is-mobile-nav-open .nav-toggle-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .site-header.is-mobile-nav-open .nav-toggle-line:nth-child(2) { opacity: 0; } .site-header.is-mobile-nav-open .nav-toggle-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-toggle-line { transition: transform 160ms ease-out, opacity 120ms ease-out; } .nav-list { display: flex; justify-content: flex-end; align-items: center; gap: 1.6rem; list-style: none; padding: 0; margin: 0; } .nav-link { position: relative; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-soft); padding-block: 0.3rem; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -0.35rem; width: 0; height: 2px; border-radius: 999px; background: linear-gradient( 90deg, var(--color-accent-rose), var(--color-accent-lavender) ); background: linear-gradient(90deg, #b8c1e0, #e6ebff); transition: width 160ms ease-out; } .nav-link:hover { color: var(--color-text-main); } .nav-link:hover::after { width: 100%; } /* HEADER PANEL (shows on nav hover via JS) */ .header-panel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 220ms ease-out, opacity 200ms ease-out, transform 220ms ease-out; transform: translateY(-8px); pointer-events: none; } .site-header.is-panel-visible .header-panel { max-height: 220px; opacity: 1; transform: translateY(0); pointer-events: auto; } .header-panel-inner { padding-block: 1.15rem 1.4rem; display: grid; grid-template-columns: minmax(0, 1.2fr); border-top: 1px solid rgba(227, 213, 198, 0.6); } .panel-kicker { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 0.35rem; } .panel-title { font-family: "Fraunces", "Times New Roman", serif; font-size: 1.3rem; margin: 0 0 0.35rem; } .panel-body { margin: 0; font-size: 0.9rem; color: var(--color-text-soft); } /* =========================== HERO =========================== */ .page-main { padding-block: 2.6rem 3.2rem; } .hero { padding-bottom: 1.8rem; } .hero-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } .hero-kicker { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 0.5rem; } .hero h1 { font-family: "Fraunces", "Times New Roman", serif; font-size: clamp(1.7rem, 1.9vw + 1.3rem, 2.3rem); line-height: 1.15; margin: 0 0 0.9rem; } .hero-body { margin: 0 0 1.5rem; color: var(--color-text-soft); max-width: 32rem; } .hero-highlight { /* background: radial-gradient( circle at top left, rgba(160, 197, 215, 0.113), transparent 55% ), var(--color-surface); background: radial-gradient( circle at top left, rgba(160, 199, 215, 0.097), transparent 55% ), var(--color-surface); */ background: white; border-radius: 20px; padding: 1.4rem 1.5rem; box-shadow: 1px 1px 20px rgba(116, 116, 116, 0.1); border: 1px solid rgba(38, 67, 174, 0.036); } .highlight-kicker { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 0.4rem; } .highlight-title { font-family: "Fraunces", "Times New Roman", serif; font-size: 1.15rem; margin: 0 0 0.4rem; } .highlight-body { margin: 0; font-size: 0.9rem; color: var(--color-text-soft); } .hero-cta-form { display: grid; gap: 0.6rem; margin-top: 0.9rem; } .hero-cta-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } .hero-cta-row { display: grid; grid-template-columns: 1fr auto; gap: 0.7rem; align-items: center; } .hero-cta-input { width: 100%; border-radius: 14px; padding: 0.7rem 0.85rem; font-size: 0.95rem; color: rgb(48, 48, 48); background: rgba(250, 252, 255, 0.92); border: 1px solid rgba(34, 69, 183, 0.1); box-shadow: -6px 4px 10px rgba(135, 175, 218, 0.22); transition: transform 120ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out, background 140ms ease-out; } .hero-cta-input:focus { outline: none; border-color: rgba(34, 69, 183, 0.22); background: #ffffff; box-shadow: -6px 6px 14px rgba(135, 175, 218, 0.28); } .hero-cta-input::placeholder { color: rgba(90, 100, 120, 0.55); } .hero-cta-form .primary-button { height: 44px; padding-inline: 1.2rem; } .hero-cta-fine { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; } .joy-section { padding-block: 1.6rem 1.1rem; } .joy-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.4rem; align-items: start; background: rgb(255, 255, 255); border-radius: 26px; padding: 1.4rem 1.5rem; box-shadow: 1px 1px 22px rgba(39, 26, 20, 0.06); border: 1px solid rgba(0, 0, 0, 0.04); } .joy-cta-kicker { margin: 0 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); } .joy-cta-title { margin: 0 0 0.45rem; font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--color-text-main); } .joy-cta-body { margin: 0; color: var(--color-text-soft); font-size: 0.95rem; max-width: 32rem; } .joy-cta-form { display: grid; gap: 0.6rem; } .joy-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } .joy-input { width: 100%; border-radius: 14px; padding: 0.7rem 0.85rem; font-size: 0.95rem; color: rgb(48, 48, 48); background: rgba(250, 252, 255, 0.92); border: 1px solid rgba(34, 69, 183, 0.10); box-shadow: -6px 4px 10px rgba(135, 175, 218, 0.22); transition: transform 120ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out, background 140ms ease-out; } .joy-input:focus { outline: none; border-color: rgba(34, 69, 183, 0.22); background: #ffffff; box-shadow: -6px 6px 14px rgba(135, 175, 218, 0.28); } .joy-input::placeholder { color: rgba(90, 100, 120, 0.55); } .joy-cta-row { display: grid; grid-template-columns: 1fr auto; gap: 0.7rem; align-items: center; } .joy-cta-form .primary-button { height: 44px; padding-inline: 1.2rem; } .joy-cta-fine { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; } /* Index-only hero balance tweaks */ .index-page .hero-layout { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.95fr); gap: 2rem; align-items: start; } .index-page .hero-copy h1 { max-width: 20ch; } .index-page .hero-highlight { justify-self: stretch; } /* BUTTONS */ .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: none; cursor: pointer; font-size: 0.9rem; padding: 0.55rem 1.4rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: transform 120ms ease-out, box-shadow 120ms ease-out, background 120ms ease-out; } /* .primary-button { background: #fdfeff; color: rgb(48, 48, 48); box-shadow: 0 14px 10px #d6e4ff64; } .primary-button:hover { background: #5fa7ffa0; transform: translateY(-1px); box-shadow: 0 18px 38px #cbd4e79d; } */ .primary-button { background: white; background: #fcfdffa0; color: rgb(48, 48, 48); border: 1px solid rgba(34, 69, 183, 0.099); box-shadow: -6px 4px 10px #87afda54; } .primary-button:hover { background: #86bfffa0; transform: translateY(-1px); box-shadow: -6 8px 10px #87a8da53; } .hasdflk { --color-accent-pink: #f99390; --color-accent-cloud: #d6e4ff; --color-accent-violet: #b787da; --color-accent-orange: #f2874e; --color-accent-yellow: #d0c362; --color-accent-green: #7a9f51; } .secondary-button { background: #d6e4ff; color: rgb(48, 48, 48); /* border: 1px solid rgba(0, 0, 0, 0.06); */ box-shadow: 0 14px 30px #d6e4ff64; } .secondary-button:hover { background: #e2e9f7b1; box-shadow: 0 18px 38px #cbd4e79d; } /* =========================== FEATURE CARDS =========================== */ .feature-section { padding-block: 1.8rem 2.4rem; } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; } .feature-card { background: var(--color-surface); border-radius: 24px; padding: 1.1rem 1.15rem 1.3rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--shadow-soft); box-shadow: 1px 1px 10px rgba(39, 26, 20, 0.055); position: relative; overflow: hidden; } .feature-label { font-size: 1.4rem; letter-spacing: 0.1em; font-weight: 900; text-transform: uppercase; color: var(--color-text-main); text-shadow: 0 0 0.7px var(--color-text-main); } .feature-media { border-radius: 18px; overflow: hidden; position: relative; } .feature-image { width: 100%; height: 280px; object-fit: cover; transform: scale(1.03); transition: transform 260ms ease-out, filter 260ms ease-out; } .feature-card:hover .feature-image { transform: scale(1.06); filter: saturate(1.05); } .feature-body h2 { font-family: "Fraunces", "Times New Roman", serif; font-size: 1.05rem; margin: 0 0 0.25rem; } .feature-body p { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--color-text-soft); } .text-link { font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-main); position: relative; padding-bottom: 0.15rem; } .text-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; transform-origin: left; transform: scaleX(0.35); background: linear-gradient( 90deg, var(--color-accent-rose), var(--color-accent-sage) ); background: linear-gradient(90deg, #b8c1e0, #e6ebff); transition: transform 160ms ease-out; } .text-link:hover::after { transform: scaleX(1); } /* HOME CARD ILLUSTRATION */ .home-illustration { position: relative; height: 180px; border-radius: 18px; background: radial-gradient( circle at top left, rgba(215, 165, 160, 0.36), transparent 60% ), radial-gradient( circle at bottom right, rgba(183, 196, 161, 0.36), transparent 55% ), linear-gradient(160deg, #f9f2e9, #f3e3d0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); overflow: hidden; transform-origin: center; transition: transform 220ms ease-out, box-shadow 220ms ease-out; } .feature-card--home:hover .home-illustration { transform: translateY(-2px) scale(1.01); box-shadow: 0 16px 40px rgba(120, 90, 70, 0.26); } /* Roof */ .home-illustration::before { content: ""; position: absolute; left: 50%; top: 18%; transform: translateX(-50%); border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 46px solid rgba(117, 94, 77, 0.45); filter: drop-shadow(0 10px 18px rgba(89, 63, 42, 0.28)); } /* House legs / stand */ .home-illustration::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 120px; height: 75px; background: linear-gradient( to top, rgba(129, 102, 80, 0.45), transparent 90% ); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: 0.8; } /* Window grid */ .home-window-grid { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); width: 150px; height: 90px; border-radius: 10px; background: repeating-linear-gradient( to right, rgba(100, 84, 70, 0.6), rgba(100, 84, 70, 0.6) 1px, transparent 1px, transparent 18px ), repeating-linear-gradient( to bottom, rgba(100, 84, 70, 0.6), rgba(100, 84, 70, 0.6) 1px, transparent 1px, transparent 18px ); background-color: rgba(252, 246, 238, 0.9); box-shadow: 0 8px 18px rgba(80, 60, 40, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.8); animation: subtleFloat 4800ms ease-in-out infinite; } /* =========================== LATEST SECTION =========================== */ .latest-section { padding-block: 1.2rem 0; } .latest-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.2rem; align-items: start; } .section-title { font-family: "Fraunces", "Times New Roman", serif; font-size: 1.3rem; margin: 0 0 0.9rem; } .latest-items { list-style: none; padding: 0; margin: 0 0 0.7rem; display: flex; flex-direction: column; gap: 0.75rem; } .latest-items li { min-height: 0; display: block; } .latest-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } /* Homepage now uses only one content block in Recent Articles. */ .index-page .latest-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .latest-column-title { margin: 0 0 0.55rem; font-family: "Fraunces", "Times New Roman", serif; font-size: 1rem; color: var(--color-text-main); } .latest-kicker { margin: 0; font-size: 0.78rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--color-text-muted); } .latest-link { font-size: 0.98rem; font-weight: 600; } .latest-link:hover { text-decoration: underline; } .latest-side .gentle-block { background: #f9f7f2; background: rgb(245, 249, 254); border-radius: 22px; padding: 1.3rem 1.4rem 1.5rem; box-shadow: 1px 1px 20px rgba(39, 26, 20, 0.013); } .gentle-kicker { margin: 0 0 0.25rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } .gentle-title { margin: 0 0 0.4rem; font-family: "Fraunces", "Times New Roman", serif; font-size: 1.1rem; } .gentle-body { margin: 0 0 0.85rem; font-size: 0.9rem; color: var(--color-text-soft); } /* =========================== FOOTER =========================== */ .site-footer { border-top: 1px solid var(--color-border-subtle); padding-block: 1.3rem 1.7rem; background: linear-gradient(to top, rgba(242, 228, 212, 0.7), transparent); } .footer-layout { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.6rem; font-size: 0.88rem; } .footer-sub { margin: 0.25rem 0 0; color: var(--color-text-muted); max-width: 20rem; } .footer-right { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; } .footer-link { font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-soft); } .footer-link:hover { color: var(--color-text-main); } /* ===================================================== MODERN FOOTER ===================================================== */ .site-footer { background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent 40%), var(--color-surface); border-top: 1px solid var(--color-border-subtle); padding-block: 2.4rem 1.9rem; margin-top: 3rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.6rem; align-items: start; } /* Brand + Logo */ .footer-brand { max-width: 260px; } .footer-logo { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.6rem; } .footer-logo img { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; box-shadow: 1px 1px 30px 2px rgba(40, 72, 128, 0.165); } .footer-logo-text { font-family: "Fraunces", serif; font-size: 1.25rem; letter-spacing: 0.03em; } .footer-desc { margin: 0.25rem 0 0; color: var(--color-text-soft); font-size: 0.95rem; line-height: 1.5; } /* Columns */ .footer-col .footer-title { font-family: "Fraunces", serif; font-size: 1rem; margin-bottom: 0.6rem; } .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; } .footer-links a { color: var(--color-text-soft); font-size: 0.9rem; transition: color 120ms ease-out, transform 120ms ease-out; } .footer-links a:hover { color: var(--color-text-main); transform: translateX(2px); } /* Bottom bar */ .footer-bottom { border-top: 1px solid rgba(0, 0, 0, 0.08); margin-top: 2.4rem; padding-top: 1.2rem; padding: 1.2rem 2.8rem 0 2.8rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-bottom p { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; } .footer-bottom-links { display: flex; align-items: center; gap: 0.7rem; } .footer-bottom-links a { font-size: 0.85rem; color: var(--color-text-soft); transition: color 120ms ease-out; } .footer-bottom-links a:hover { color: var(--color-text-main); } /* Responsive adjustments */ @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } } /* ================================================ MARIE-FORLEO STYLE MEGA MENU (OPTION A) ================================================ */ .mega-menu { position: absolute; top: 100%; left: 0; width: 100%; background: var(--color-surface); /* border-bottom: 1px solid var(--color-border-subtle); */ /* box-shadow: 0 0px 10px rgba(82, 82, 82, 0.071); */ z-index: 100; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 160ms ease-out, transform 180ms ease-out; } .mega-menu.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .mega-inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3rem; padding: 2.4rem 2rem; width: min(1100px, 100% - 3rem); margin-inline: auto; } /* LEFT COLUMN */ .mega-left { display: flex; flex-direction: column; gap: 1.4rem; } .mega-section-title { font-family: "Fraunces", serif; font-size: 1.15rem; margin: 0 0 0.8rem; } .mega-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .mega-links a { color: var(--color-text-main); font-size: 0.95rem; letter-spacing: 0.02em; } .mega-links a:hover { text-decoration: underline; } /* =========================== UPDATED: Mega Menu Button (Cleaner, edgier, botanical-matte aesthetic) =========================== */ .mega-login-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: auto; gap: 0.35rem; padding: 0.52rem 1rem; font-size: 0.86rem; letter-spacing: 0.12em; font-weight: 500; text-transform: uppercase; background: transparent; border: 1px solid rgba(57, 43, 31, 0.16); border-radius: 999px; color: var(--color-text-main); cursor: pointer; transition: background-color 140ms ease-out, border-color 150ms ease-out, color 150ms ease-out; } .mega-login-btn:hover { background: rgba(87, 134, 203, 0.08); border-color: rgba(87, 134, 203, 0.36); color: var(--color-text-main); } /* Tiny pulse dot for personality (tasteful, modern-edge) */ /* .mega-login-btn::after { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--color-accent-sage); opacity: 0.7; } */ /* RIGHT COLUMN */ .mega-right { display: flex; flex-direction: column; gap: 1.4rem; } .mega-latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; } .mega-latest-kicker { margin: 0; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); } .mega-latest-link { font-size: 1rem; font-weight: 600; } .mega-latest-link:hover { text-decoration: underline; } .mega-all-posts { position: relative; display: inline-block; align-self: flex-start; width: fit-content; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.4rem; padding-bottom: 0.15rem; } .mega-all-posts::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient( 90deg, var(--color-accent-rose), var(--color-accent-sage) ); background: linear-gradient(90deg, #b8c1e0, #e6ebff); transform: scaleX(0.35); transform-origin: left; transition: transform 160ms ease-out; } .mega-all-posts:hover::after, .mega-all-posts:focus-visible::after { transform: scaleX(1); } /* THEME-SPECIFIC EDGE TWEAKS */ /* Modern Botanical Matte (C2-A) */ .theme-botanical-matte .mega-inner { border-radius: 24px; border: 1px solid rgba(113, 102, 87, 0.367); border: 1px solid rgba(87, 90, 113, 0.367); /* box-shadow: 0 0px 0px rgba(145, 138, 134, 0.117); */ background: radial-gradient( circle at top left, rgba(201, 140, 130, 0.13), transparent 60% ), radial-gradient( circle at bottom right, rgba(150, 170, 124, 0.11), transparent 60% ), var(--color-surface); background: radial-gradient( circle at top left, rgba(134, 130, 201, 0.13), transparent 60% ), radial-gradient( circle at bottom right, rgba(165, 124, 170, 0.11), transparent 60% ), var(--color-surface); } .theme-botanical-matte .mega-menu { background: radial-gradient( circle at top left, rgba(201, 140, 130, 0.13), transparent 60% ), radial-gradient( circle at bottom right, rgba(150, 170, 124, 0.11), transparent 60% ), var(--color-surface); background: transparent; } .theme-botanical-matte .mega-login-btn { border-color: rgba(57, 43, 31, 0.16); } /* Soft Editorial Edge (A) */ .theme-editorial .mega-inner { border-radius: 0; border-left: 4px solid var(--color-accent-rose); border-right: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 26px 60px rgba(16, 8, 18, 0.32); } .theme-editorial .mega-menu { background: linear-gradient(to bottom, #f7f3f0, #f0e4dc); } .theme-editorial .mega-login-btn { background: transparent; color: var(--color-text-main); border-color: rgba(0, 0, 0, 0.25); } /* Whimsical Cottage Edge (B) */ .theme-cottage .mega-inner { border-radius: 30px; border: 1px solid rgba(227, 213, 198, 0.9); box-shadow: 0 20px 46px rgba(100, 72, 45, 0.2); background-image: radial-gradient( circle at top left, rgba(255, 255, 255, 0.9), transparent 55% ), radial-gradient( circle at bottom right, rgba(215, 165, 160, 0.18), transparent 60% ); } .theme-cottage .mega-menu { background: var(--color-surface); } .theme-cottage .mega-login-btn { border-style: dashed; border-color: rgba(180, 133, 120, 0.8); } /* Slightly sharper editorial & botanical edge on hero */ .theme-botanical-matte .hero h1, .theme-editorial .hero h1 { letter-spacing: 0.03em; } .theme-editorial .hero h1 { text-transform: uppercase; font-size: clamp(2rem, 2.6vw + 1.5rem, 2.9rem); } /* Extra crispness on home grid frame */ .theme-botanical-matte .home-window-grid { box-shadow: 0 10px 20px rgba(40, 26, 18, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(75, 56, 41, 0.32); } .theme-editorial .home-window-grid { border-radius: 4px; } /* =========================== ANIMATIONS =========================== */ @keyframes fadeInPage { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { opacity: 0; transform: translateY(14px); animation: fadeUp 700ms ease-out forwards; } .fade-in-up.delay-1 { animation-delay: 120ms; } .fade-in-up.delay-2 { animation-delay: 220ms; } .fade-in-up.delay-3 { animation-delay: 320ms; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes subtleFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } } /* =========================== RESPONSIVE =========================== */ @media (max-width: 900px) { .hero-layout { grid-template-columns: minmax(0, 1fr); } .feature-grid { grid-template-columns: minmax(0, 1fr); } .latest-layout { grid-template-columns: minmax(0, 1fr); } .latest-columns { grid-template-columns: 1fr; } .index-page .hero-layout { grid-template-columns: 1fr; gap: 1.15rem; } .hero-cta-row { grid-template-columns: minmax(0, 1fr); } .joy-cta { grid-template-columns: 1fr; } .joy-cta-row { grid-template-columns: minmax(0, 1fr); } .header-inner { flex-wrap: nowrap; position: relative; } .nav-toggle { display: inline-flex; flex-direction: column; } .site-nav { position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; background: rgba(255, 254, 252, 0.98); border: 1px solid var(--color-border-subtle); border-radius: 14px; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.1); padding: 0.9rem 1rem; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 170ms ease-out, transform 170ms ease-out; z-index: 40; } .site-header.is-mobile-nav-open .site-nav { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-list { justify-content: flex-start; flex-wrap: nowrap; flex-direction: column; align-items: flex-start; gap: 0.8rem; } .nav-list > li { width: 100%; } .nav-link { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; } .nav-link::after { display: none; } .header-panel { display: none; } .mega-menu { display: none !important; } .mobile-more-item { width: 100%; list-style: none; } .mobile-more-panel { margin-top: 0.3rem; padding: 0.75rem 0.85rem; border: 1px solid var(--color-border-subtle); border-radius: 12px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(4px); display: grid; gap: 0.8rem; } .mobile-more-section { display: grid; gap: 0.45rem; } .mobile-more-title { margin: 0; font-family: "Fraunces", "Times New Roman", serif; font-size: 1rem; color: var(--color-text-main); letter-spacing: 0.01em; } .mobile-more-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.42rem; } .mobile-more-link { display: inline-block; font-size: 0.92rem; letter-spacing: 0.03em; color: var(--color-text-main); } .mobile-more-link-muted { color: var(--color-text-soft); } .mobile-more-utility { font-size: 0.86rem; letter-spacing: 0.07em; text-transform: uppercase; } } @media (max-width: 600px) { .container { width: min(100% - 2rem, 600px); } .feature-card { padding: 1rem; } .latest-columns { grid-template-columns: 1fr; } .home-illustration, .feature-image { height: 160px; } } /* =========================== CONTACT PAGE GUARD (prevents shared blocks from creating weird layouts) =========================== */ .contact-main .gentle-block, .contact-main .latest-side .gentle-block { background: var(--color-surface); border: 1px solid var(--color-border-subtle); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06); background-image: none !important; }