/* ============================================================ Wedding Inspiration — new design system Extracted from new_wrapper.tpl. Deployed to /css/wi-new.css Referenced from new_wrapper.tpl . ============================================================ */ :root { --ink: #23313d; --muted: #66727d; --line: #e8ddd4; --line-strong: #d6c5b8; --blush: #f5ebe4; --peach: #ebb9a1; --rose: #b67363; --deep: #243443; --container: 1180px; --shadow-lg: 0 28px 70px rgba(35, 49, 61, 0.12); --shadow-md: 0 18px 44px rgba(35, 49, 61, 0.09); --radius-xl: 32px; --radius-lg: 24px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: radial-gradient(circle at top right, rgba(245, 215, 198, 0.55), transparent 28%), radial-gradient(circle at left 10%, rgba(255, 248, 242, 0.92), transparent 34%), linear-gradient(180deg, #fffdfa 0%, #f7f0ea 100%); color: var(--ink); font-family: "Manrope", sans-serif; margin: 0; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .container { margin: 0 auto; max-width: var(--container); padding: 0 20px; } .site-shell { overflow: hidden; } /* ── Header / utility bar ───────────────────────────────── */ .utility-bar { backdrop-filter: blur(12px); background: rgba(255, 251, 247, 0.88); border-bottom: 1px solid rgba(214, 197, 184, 0.75); position: sticky; top: 0; z-index: 50; } .utility-bar__inner, .main-nav, .utility-actions { align-items: center; display: flex; gap: 18px; justify-content: space-between; } .utility-bar__inner { min-height: 76px; } .brand-lockup { align-items: center; display: flex; flex-shrink: 0; gap: 16px; } .brand-lockup img { max-height: 52px; width: auto; } .brand-tag { display: none; } .nav-toggle { display: none; } .nav-panel { align-items: center; display: flex; gap: 18px; margin-left: auto; min-width: 0; } .main-nav a { color: var(--ink); font-size: 0.93rem; font-weight: 700; padding: 10px 12px; } .main-nav a:hover, .main-nav a:focus { color: var(--rose); } .utility-actions { align-items: center; gap: 10px; justify-content: flex-end; } /* ── Buttons & pills ────────────────────────────────────── */ .pill-link, .button, .button-alt, .button-light { align-items: center; border-radius: 8px; display: inline-flex; font-size: 0.88rem; font-weight: 700; justify-content: center; line-height: 1; padding: 11px 16px; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; white-space: nowrap; } .pill-link { border: 1px solid var(--line-strong); color: var(--deep); } .button { background: var(--deep); color: #fff8f4; } .button-alt { background: var(--peach); color: var(--deep); } .button-light { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff8f4; } .pill-link:hover, .button:hover, .button-alt:hover, .button-light:hover { box-shadow: 0 14px 30px rgba(35, 49, 61, 0.15); transform: translateY(-2px); } /* ── Typography ─────────────────────────────────────────── */ h1, h2, h3 { color: var(--ink); font-family: "Cormorant Garamond", serif; letter-spacing: -0.025em; margin: 0 0 14px; } h1 { font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: 1.05; } h2 { font-family: "Manrope", sans-serif; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } h3 { font-size: 2rem; line-height: 1.05; } p { color: var(--muted); line-height: 1.8; margin: 0 0 16px; } .eyebrow { color: var(--rose); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } /* ── Shared components (promoted from homeadvertisers_new) ─ */ /* Generic card surface */ .card { background: rgba(255, 251, 247, 0.94); border: 1px solid rgba(232, 221, 212, 0.88); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 38px 44px; margin-bottom: 22px; } .card:last-child { margin-bottom: 0; } /* Form controls */ .form-section { margin-bottom: 28px; } .form-section-title { color: var(--ink); font-family: "Cormorant Garamond", serif; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .form-field { margin-bottom: 18px; } .form-label { color: var(--ink); display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 8px; } .form-label .req { color: var(--rose); margin-left: 2px; } .form-input { appearance: none; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); display: block; font-family: "Manrope", sans-serif; font-size: 0.93rem; min-height: 50px; padding: 0 16px; transition: border-color 0.2s ease; width: 100%; } textarea.form-input { min-height: 130px; padding: 14px 16px; line-height: 1.6; } /* Restore a dropdown chevron for selects (appearance:none removes the native one) */ select.form-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2366727d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; padding-right: 42px; } .form-input:focus { border-color: var(--rose); outline: none; } .form-help { color: var(--muted); font-size: 0.8rem; margin-top: 6px; line-height: 1.5; } .form-checkbox-row { align-items: flex-start; display: flex; gap: 10px; margin-bottom: 10px; } .form-checkbox-row input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; } .form-checkbox-label { color: var(--ink); font-size: 0.88rem; font-weight: 600; } /* Input group (Foundation .input-group replacement) */ .input-group { display: flex; align-items: stretch; width: 100%; } .input-group-label { align-items: center; background: var(--blush); border: 1px solid var(--line-strong); border-right: 0; border-radius: 12px 0 0 12px; color: var(--ink); display: flex; font-size: 0.88rem; font-weight: 700; padding: 0 14px; white-space: nowrap; } .input-group .input-group-field, .input-group .form-input { border-radius: 0; } .input-group > :first-child { border-radius: 12px 0 0 12px; } .input-group > :last-child { border-radius: 0 12px 12px 0; } /* Empty-state block */ .empty-state { background: var(--blush); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; text-align: center; } .empty-state p { margin-bottom: 16px; } /* Category banner (shared "categoryheading" partial — background image + title over a scrim) */ .areaHeading { align-items: center; background-size: cover !important; background-position: 50% 50% !important; border-radius: var(--radius-lg); display: flex; justify-content: center; margin: 8px 0 24px; min-height: 260px !important; overflow: hidden; position: relative; } .areaHeading::before { background: linear-gradient(180deg, rgba(20, 28, 36, 0.2) 0%, rgba(20, 28, 36, 0.62) 100%); content: ""; inset: 0; position: absolute; } .areaHeading .row, .areaHeading .columns { float: none; margin: 0; padding: 0; position: relative; width: auto; z-index: 1; } .areaHeading h1 { color: #fff8f4; font-family: "Cormorant Garamond", serif; font-size: clamp(1.8rem, 4vw, 3rem) !important; margin: 0; padding: 0 20px; position: relative; text-align: center; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); z-index: 1; } /* Pagination (WSN {PAGINATION} — Foundation-style