/* Theme Name: SWELL Child Theme URI: https://swell-theme.com/ Description: Lien Chitose — 料理を中心にした総合会食サイト用子テーマ Version: 1.9.7 Template: swell Author: Lien Renewal Text Domain: swell-child License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl.html */ /* ------------------------------------------------------------------------- Design tokens — used by custom FV / footer / FAB only Content area (posts/pages) follows SWELL settings & defaults. --------------------------------------------------------------------------- */ :root { --lien-ink: #1c1b19; --lien-ink-soft: #4a4640; --lien-paper: #f6f4f1; --lien-paper-deep: #ebe7e1; --lien-gold: #9a8160; --lien-gold-deep: #7a6548; --lien-line: rgba(28, 27, 25, 0.12); --lien-overlay: rgba(18, 16, 14, 0.42); --lien-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; --lien-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif; --lien-section-pad: clamp(4.5rem, 10vw, 8rem); --lien-content: min(1120px, calc(100% - 2.5rem)); } /* Custom components only — do not override SWELL post/page typography */ .lien-hero__title, .lien-fv__title, .lien-section__title, .lien-brand, .lien-pillar__title, .lien-cta-band__title, .lien-page-hero__title, .lien-footer { font-family: var(--lien-serif); font-weight: 500; letter-spacing: 0.08em; } /* * SWELL puts body_class() on #body_wrap, not . * Always target #body_wrap.home for front-page chrome. */ /* Header: quieter chrome (inner pages only) — keep custom header look */ #body_wrap:not(.home) .l-header { backdrop-filter: saturate(120%) blur(8px); background: rgba(246, 244, 241, 0.88) !important; border-bottom: 1px solid var(--lien-line); } /* Safety: never show SP under-logo nav (hamburger only) */ .l-header__spNav, .p-spHeadMenu { display: none !important; } .c-headLogo img { max-height: 44px; width: auto; } /* ---- Home: no header over FV; SWELL fix-header appears on scroll ---- */ #body_wrap.home { padding-top: 0 !important; } /* Hide the normal header entirely on the front page (FV stays clean). */ #body_wrap.home #header.l-header { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* * front-page.php closes SWELL's #content before FV, leaving an empty shell. * .l-content has padding-top/margin-bottom that showed as a cream gap above FV. */ #body_wrap.home > #content.l-content:not(.lien-main-content), #body_wrap.home > #content:has(+ .lien-fv) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; border: 0 !important; } #body_wrap.home > .lien-fv { margin-top: 0 !important; } .lien-fv { position: relative; width: 100%; min-height: 100vh !important; min-height: 100svh !important; display: block; color: #fff; overflow: hidden; background: #1a1816; margin: 0; padding: 0; } /* * Intro frame: white matte that exits by thinning to 0 * (image area expands outward — not an opacity fade). */ .lien-fv::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-sizing: border-box; border-style: solid; border-color: #fff; border-width: 0; opacity: 1; transition: border-width 1.35s cubic-bezier(0.22, 1, 0.36, 1); } .lien-fv.is-intro::before { border-width: 50px; } .lien-fv.is-revealed::before { border-width: 0; } .lien-fv__slides { position: absolute; inset: 0; z-index: 0; } .lien-fv__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 1.6s ease; } .lien-fv.is-intro .lien-fv__slide { transition: opacity 1.25s ease; } .lien-fv__slide.is-active { opacity: 1; z-index: 1; } .lien-fv__slide img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; margin: 0 !important; } .lien-fv__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0 !important; visibility: hidden !important; background: linear-gradient(180deg, rgba(12, 10, 8, 0.4) 0%, rgba(12, 10, 8, 0.25) 45%, rgba(12, 10, 8, 0.7) 100%); transition: opacity 2s ease, visibility 0s linear 2s; } .lien-fv.is-intro .lien-fv__shade { opacity: 0 !important; visibility: hidden !important; } .lien-fv.is-revealed .lien-fv__shade { opacity: 1 !important; visibility: visible !important; transition: opacity 2s ease, visibility 0s linear 0s; } .lien-fv__logo { position: absolute; top: max(1.25rem, env(safe-area-inset-top)); left: max(1.25rem, env(safe-area-inset-left)); z-index: 5; display: block; line-height: 0; text-decoration: none; } /* UI blocks hidden until silent intro ends; JS fades each .lien-fv__ui block */ .lien-fv__ui { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1.85s ease, visibility 0s linear 1.85s; will-change: opacity; } .lien-fv.is-intro .lien-fv__ui { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .lien-fv.is-revealed .lien-fv__ui.is-show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 1.85s ease, visibility 0s linear 0s; } .lien-fv.is-revealed .lien-fv__nav.lien-fv__ui.is-show a { opacity: 0.92; } .lien-fv.is-revealed .lien-fv__nav.lien-fv__ui.is-show a:hover { opacity: 1; } .lien-fv.is-revealed .lien-fv__scroll.lien-fv__ui.is-show { opacity: 0.85; } .lien-fv__logo-img { display: block !important; height: clamp(2.5rem, 5.5vw, 3.5rem) !important; width: auto !important; max-width: min(220px, 42vw) !important; object-fit: contain !important; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4)); } .lien-fv__nav { position: absolute; top: max(1.4rem, env(safe-area-inset-top)); right: max(1.5rem, env(safe-area-inset-right)); z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.15rem 1.35rem; max-width: min(70vw, 36rem); } .lien-fv__nav a { color: #fff !important; text-decoration: none !important; font-size: 12px; letter-spacing: 0.08em; line-height: 1.4; } .lien-fv__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; width: 100%; max-width: none; margin: 0; padding: 0 max(1.5rem, env(safe-area-inset-right)) 1.5rem max(1.5rem, env(safe-area-inset-left)); text-align: left; box-sizing: border-box; } .lien-fv .lien-brand { display: block; font-size: 10px !important; letter-spacing: 0.28em; text-transform: uppercase; margin-bottom: 0.65rem; line-height: 1.5; } .lien-fv .lien-fv__title { font-size: 16px !important; line-height: 1.7; margin: 0 0 0.65rem; max-width: none; color: #fff; font-weight: 500; } .lien-fv .lien-fv__lead { font-size: 12px !important; line-height: 1.9; margin: 0; color: rgba(255, 255, 255, 0.92); } /* Keep hero (inner-page) sizes separate from FV */ .lien-hero__title { font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.4; margin: 0 0 1rem; max-width: 12em; color: #fff; } .lien-hero__lead { font-size: clamp(0.88rem, 1.3vw, 1rem); line-height: 2; max-width: 28em; margin: 0; color: rgba(255, 255, 255, 0.92); } .lien-fv__scroll { position: absolute; left: 50%; bottom: 1.1rem; z-index: 4; transform: translateX(-50%); color: rgba(255, 255, 255, 0.72) !important; text-decoration: none !important; font-size: 10px; letter-spacing: 0.32em; line-height: 1; } .lien-fv__scroll.is-show:hover { opacity: 1 !important; } /* Inner-page hero */ .lien-hero { position: relative; min-height: min(52vh, 520px); display: grid; align-items: end; color: #fff; overflow: hidden; isolation: isolate; } .lien-hero__media { position: absolute; inset: 0; z-index: -2; } .lien-hero__media img { width: 100%; height: 100%; object-fit: cover; } .lien-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 8, 0.25) 0%, rgba(12, 10, 8, 0.55) 55%, rgba(12, 10, 8, 0.78) 100%); } .lien-hero__inner { width: var(--lien-content); margin: 0 auto; padding: 0 0 clamp(2.5rem, 6vw, 3.5rem); } .lien-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; } @keyframes lien-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .lien-fv__slide, .lien-fv__slide img, .lien-fv__ui, .lien-fv__shade { transition-duration: 0.25s !important; } } .lien-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.85rem 1.5rem; border: 1px solid rgba(255, 255, 255, 0.7); color: #fff !important; text-decoration: none !important; font-size: 0.88rem; letter-spacing: 0.12em; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .lien-btn:hover { background: #fff; color: var(--lien-ink) !important; border-color: #fff; } .lien-btn--solid { background: var(--lien-gold); border-color: var(--lien-gold); color: #fff !important; } .lien-btn--solid:hover { background: var(--lien-gold-deep); border-color: var(--lien-gold-deep); color: #fff !important; } .lien-btn--ink { border-color: var(--lien-ink); color: var(--lien-ink) !important; } .lien-btn--ink:hover { background: var(--lien-ink); color: #fff !important; } .lien-btn--gold { background: var(--lien-gold); border-color: var(--lien-gold); color: #fff !important; } .lien-btn--gold:hover { background: var(--lien-gold-deep); border-color: var(--lien-gold-deep); color: #fff !important; } /* ---- Sections ---- */ .lien-section { padding: var(--lien-section-pad) 0; } .lien-section__inner { width: var(--lien-content); margin: 0 auto; } .lien-section__eyebrow { display: block; font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--lien-gold-deep); margin-bottom: 0.85rem; } .lien-section__title { font-size: clamp(1.55rem, 3.2vw, 2.35rem); line-height: 1.4; margin: 0 0 1rem; } .lien-section__lead { font-size: 1rem; line-height: 1.95; color: var(--lien-ink-soft); max-width: 38em; margin: 0 0 2.5rem; } .lien-section--dark { background: linear-gradient(160deg, #221f1c 0%, #2f2a25 55%, #1c1a17 100%); color: #f4f1ec; } .lien-section--dark .lien-section__lead { color: rgba(244, 241, 236, 0.78); } .lien-section--muted { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)), var(--lien-paper-deep); } /* Photo mosaic */ .lien-mosaic { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.75rem; min-height: 420px; } .lien-mosaic__item { position: relative; overflow: hidden; min-height: 180px; } .lien-mosaic__item:first-child { grid-row: 1 / span 2; min-height: 420px; } .lien-mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .lien-mosaic__item:hover img { transform: scale(1.04); } .lien-mosaic__caption { position: absolute; left: 1rem; bottom: 1rem; font-size: 0.8rem; letter-spacing: 0.14em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); } /* Dual pillars */ .lien-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .lien-pillar { position: relative; min-height: 420px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; text-decoration: none !important; } .lien-pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.9s ease; } .lien-pillar:hover img { transform: scale(1.05); } .lien-pillar__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 30%, rgba(10, 9, 8, 0.78) 100%); } .lien-pillar__body { position: relative; z-index: 2; padding: 2rem; } .lien-pillar__title { font-family: var(--lien-serif); font-size: 1.65rem; margin: 0 0 0.5rem; letter-spacing: 0.12em; } .lien-pillar__text { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.7; opacity: 0.9; } /* Pathway list */ .lien-path { display: grid; gap: 0; border-top: 1px solid var(--lien-line); } .lien-path a { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1.25rem; align-items: center; padding: 1.35rem 0; border-bottom: 1px solid var(--lien-line); color: inherit !important; text-decoration: none !important; transition: padding-left 0.25s ease; } .lien-path a:hover { padding-left: 0.5rem; } .lien-path__num { font-family: var(--lien-serif); font-size: 0.85rem; letter-spacing: 0.2em; color: var(--lien-gold-deep); } .lien-path__label { font-family: var(--lien-serif); font-size: 1.2rem; letter-spacing: 0.1em; } .lien-path__hint { font-size: 0.85rem; color: var(--lien-ink-soft); } .lien-path__arrow { opacity: 0.45; } /* CTA band */ .lien-cta-band { padding: clamp(3.5rem, 8vw, 5.5rem) 0; text-align: center; background: radial-gradient(ellipse at center, rgba(154, 129, 96, 0.18), transparent 60%), linear-gradient(180deg, #2a2622, #171513); color: #f4f1ec; } .lien-cta-band__title { font-family: var(--lien-serif); font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 0.75rem; letter-spacing: 0.12em; } .lien-cta-band__lead { margin: 0 auto 1.75rem; max-width: 28em; line-height: 1.8; opacity: 0.82; } .lien-cta-band .lien-cta-row { justify-content: center; } /* Interior pages */ .lien-page-hero { position: relative; min-height: 42vh; display: grid; align-items: end; color: #fff; margin-bottom: 0; } .lien-page-hero__media, .lien-page-hero__shade { position: absolute; inset: 0; } .lien-page-hero__media { z-index: -2; } .lien-page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .lien-page-hero__shade { z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 8, 0.2), rgba(12, 10, 8, 0.72)); } .lien-page-hero__inner { width: var(--lien-content); margin: 0 auto; padding: 0 0 2.75rem; } .lien-page-hero__title { font-family: var(--lien-serif); font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 0.75rem; letter-spacing: 0.1em; } .lien-prose { width: min(720px, calc(100% - 2.5rem)); margin: 0 auto; padding: 3rem 0 1rem; line-height: 1.95; color: var(--lien-ink-soft); } .lien-prose h2 { font-family: var(--lien-serif); color: var(--lien-ink); font-size: 1.45rem; margin: 2.5rem 0 1rem; letter-spacing: 0.1em; } .lien-plan-grid { width: var(--lien-content); margin: 0 auto 3rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .lien-plan { padding: 1.75rem 1.5rem; border-top: 1px solid var(--lien-gold); background: rgba(255, 255, 255, 0.45); } .lien-plan h3 { font-family: var(--lien-serif); font-size: 1.15rem; margin: 0 0 0.5rem; letter-spacing: 0.08em; } .lien-plan p { margin: 0; font-size: 0.92rem; line-height: 1.75; color: var(--lien-ink-soft); } .lien-plan__price { display: block; margin-top: 1rem; font-family: var(--lien-serif); font-size: 1.05rem; letter-spacing: 0.06em; color: var(--lien-ink); } /* Sticky contact chips (PC: corner stack / SP: full-width dock) */ .lien-fab-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; } /* SWELL page-top arrow overlaps LINE/phone FABs */ #pagetop, .c-fixBtn[data-onclick="pageTop"] { display: none !important; } /* * FAB is printed in wp_footer (outside #body_wrap), so don't nest under #body_wrap. * Front page adds .lien-fab-stack--fv; JS adds .is-show after intro. */ .lien-fab-stack--fv, html.lien-fv-intro-lock .lien-fab-stack { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 1.85s ease, visibility 0s linear 1.85s; } .lien-fab-stack--fv.is-show { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition: opacity 1.85s ease, visibility 0s linear 0s; } .lien-line-fab, .lien-phone-fab { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.15rem; color: #fff !important; text-decoration: none !important; font-size: 0.82rem; letter-spacing: 0.08em; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease; } .lien-line-fab { background: #06c755; } .lien-phone-fab { background: var(--lien-ink); } .lien-line-fab:hover, .lien-phone-fab:hover { transform: translateY(-2px); } /* Mobile: full-width bottom dock, slide in/out on scroll */ @media (max-width: 767px) { .lien-fab-stack, .lien-fab-stack--fv, .lien-fab-stack--fv.is-show, html.lien-fv-intro-lock .lien-fab-stack { left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; flex-direction: row !important; align-items: stretch !important; gap: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; transform: translate3d(0, 110%, 0); transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) !important; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.16); padding-bottom: env(safe-area-inset-bottom); background: #111; } html.lien-fv-intro-lock .lien-fab-stack { transform: translate3d(0, 110%, 0) !important; pointer-events: none !important; } .lien-fab-stack.is-docked { transform: translate3d(0, 0, 0) !important; pointer-events: auto !important; } .lien-line-fab, .lien-phone-fab { flex: 1 1 50%; min-height: 3.15rem; margin: 0; padding: 0.85rem 0.5rem; border-radius: 0 !important; box-shadow: none !important; font-size: 0.78rem; letter-spacing: 0.08em; transform: none !important; } .lien-line-fab:hover, .lien-phone-fab:hover { transform: none !important; } .lien-phone-fab { border-left: 1px solid rgba(255, 255, 255, 0.12); } /* Keep page end reachable while the dock is open */ html.lien-fab-docked { scroll-padding-bottom: calc(3.15rem + env(safe-area-inset-bottom)); } html.lien-fab-docked #footer.l-footer { padding-bottom: calc(3.15rem + env(safe-area-inset-bottom)); } @media (prefers-reduced-motion: reduce) { .lien-fab-stack, .lien-fab-stack--fv, .lien-fab-stack--fv.is-show, html.lien-fv-intro-lock .lien-fab-stack { transition-duration: 0.15s !important; } } } @media (max-width: 900px) { .lien-mosaic, .lien-pillars, .lien-plan-grid { grid-template-columns: 1fr; } .lien-mosaic__item:first-child { grid-row: auto; min-height: 260px; } .lien-path a { grid-template-columns: 4rem 1fr; } .lien-path__hint, .lien-path__arrow { display: none; } } @media (prefers-reduced-motion: reduce) { .lien-hero__media img, .lien-brand, .lien-hero__title, .lien-hero__lead, .lien-cta-row, .lien-mosaic__item img, .lien-pillar img { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } /* ------------------------------------------------------------------------- Footer — Kuraudia-inspired minimal --------------------------------------------------------------------------- */ #footer.l-footer { background: var(--lien-ink) !important; color: rgba(244, 241, 236, 0.88); border-top: 0; margin-top: 0; } #footer .l-footer__widgetArea, #footer .w-footer, #footer .l-footer__foot, #before_footer_widget, .w-beforeFooter { display: none !important; } .lien-footer { width: 100%; padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.25rem); } .lien-footer__inner { width: var(--lien-content); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(1.75rem, 4vw, 2.75rem); text-align: center; } .lien-footer__logo { display: inline-block; line-height: 0; opacity: 0.92; transition: opacity 0.2s ease; } .lien-footer__logo:hover { opacity: 1; } .lien-footer__logo img { display: block; width: auto; height: 52px; max-width: 160px; /* Menu logo is dark ink — invert for dark footer */ filter: brightness(0) invert(1); } .lien-footer__nav { width: 100%; } .lien-footer__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.85rem 1.75rem; margin: 0; padding: 0; list-style: none; } .lien-footer__list a { color: rgba(244, 241, 236, 0.82) !important; text-decoration: none !important; font-size: 0.78rem; letter-spacing: 0.14em; transition: opacity 0.2s ease; } .lien-footer__list a:hover { opacity: 0.55; } .lien-footer__copy { margin: 0; font-size: 0.68rem; letter-spacing: 0.12em; color: rgba(244, 241, 236, 0.45); font-family: var(--lien-sans); } .lien-footer__copy span { margin-right: 0.2em; } @media (max-width: 600px) { .lien-footer__logo img { height: 44px; } .lien-footer__list { gap: 0.7rem 1.15rem; } .lien-footer__list a { font-size: 0.72rem; letter-spacing: 0.1em; } } /* ------------------------------------------------------------------------- Home — mobile polish --------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --lien-section-pad: clamp(3rem, 12vw, 4.5rem); --lien-content: min(1120px, calc(100% - 2rem)); } /* Intro matte: 50px is too heavy on phones */ .lien-fv.is-intro::before { border-width: 22px; } .lien-fv__logo { top: max(1rem, env(safe-area-inset-top)); left: max(1rem, env(safe-area-inset-left)); } .lien-fv__logo-img { height: 2.35rem !important; max-width: min(168px, 46vw) !important; } /* * Top-right text links collide with the logo on narrow screens. * Keep CTAs in sticky header / FAB / footer instead. */ .lien-fv__nav { display: none !important; } .lien-fv__content { padding: 0 max(1.15rem, env(safe-area-inset-right)) max(3.25rem, calc(env(safe-area-inset-bottom) + 2.75rem)) max(1.15rem, env(safe-area-inset-left)); } .lien-fv .lien-brand { font-size: 9px !important; letter-spacing: 0.2em; margin-bottom: 0.5rem; max-width: 92%; } .lien-fv .lien-fv__title { font-size: 15px !important; line-height: 1.65; margin-bottom: 0.5rem; } .lien-fv .lien-fv__lead { font-size: 11px !important; line-height: 1.75; max-width: 22em; } .lien-fv__scroll { bottom: max(0.85rem, env(safe-area-inset-bottom)); font-size: 9px; letter-spacing: 0.28em; } .lien-footer { padding: 3rem 0 2.25rem; } .lien-footer__inner { gap: 1.5rem; } } @media (max-width: 399px) { .lien-fv .lien-fv__title { font-size: 14px !important; } .lien-fv .lien-fv__lead { font-size: 10.5px !important; } .lien-line-fab, .lien-phone-fab { font-size: 0.7rem; padding: 0.8rem 0.35rem; } } /* ------------------------------------------------------------------------- Post list → horizontal scroll Rich columns "横スクロール" scrolls COLUMNS only. A single 投稿リスト with -pc-col3 still wraps (3 per row) inside one column. This makes the post list itself scroll sideways (Elementor-like strip). --------------------------------------------------------------------------- */ .lien-post-scroll .p-postList, .p-postList.lien-post-scroll, .swell-block-columns[data-scrollable] .p-postList.-type-card, .swell-block-columns[data-scrollable] .p-postList.-type-thumb { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 0 0 0.85rem !important; margin: 0 !important; list-style: none !important; } .lien-post-scroll .p-postList__item, .p-postList.lien-post-scroll .p-postList__item, .swell-block-columns[data-scrollable] .p-postList.-type-card > .p-postList__item, .swell-block-columns[data-scrollable] .p-postList.-type-thumb > .p-postList__item { flex: 0 0 clamp(220px, 70vw, 300px) !important; width: clamp(220px, 70vw, 300px) !important; max-width: none !important; margin: 0 !important; float: none !important; scroll-snap-align: start; } /* Avoid double scrollbars: outer rich-column scroll is unused when 1 wide column */ .swell-block-columns[data-scrollable]:has(.p-postList) { overflow: visible; } .swell-block-columns[data-scrollable]:has(.p-postList) > .swell-block-columns__inner { overflow: visible; flex-wrap: wrap; padding-bottom: 0; } .swell-block-columns[data-scrollable]:has(.p-postList) > .swell-block-columns__inner > .swell-block-column { width: 100% !important; flex-shrink: 1; } /* Title color: post-list block has no color control — white for dark sections */ .lien-post-scroll .p-postList__title, .p-postList.lien-post-scroll .p-postList__title, .swell-block-columns[data-scrollable] .p-postList__title, .lien-post-scroll .p-postList__link, .p-postList.lien-post-scroll .p-postList__link, .swell-block-columns[data-scrollable] .p-postList__link { color: #fff !important; } .lien-post-scroll .p-postList__meta, .p-postList.lien-post-scroll .p-postList__meta, .swell-block-columns[data-scrollable] .p-postList__meta { color: rgba(255, 255, 255, 0.72) !important; } /* ------------------------------------------------------------------------- Thumbnail gallery (main + thumbs) — replaces UE owl sliding thumbs --------------------------------------------------------------------------- */ .lien-thumb-gallery { width: 100%; margin: 1.5rem 0 2rem; } .lien-thumb-gallery__main { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1816; } .lien-thumb-gallery__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.55s ease, visibility 0s linear 0.55s; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; } .lien-thumb-gallery__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.55s ease, visibility 0s linear 0s; z-index: 1; } .lien-thumb-gallery__overlay { position: absolute; inset: 0; background: rgba(12, 10, 8, 0.42); pointer-events: none; } .lien-thumb-gallery__caption { position: relative; z-index: 2; padding: 1.25rem 1.5rem; max-width: 36rem; } .lien-thumb-gallery__title { font-family: var(--lien-serif); font-size: clamp(1.15rem, 2.4vw, 1.55rem); letter-spacing: 0.1em; margin: 0 0 0.65rem; font-weight: 500; } .lien-thumb-gallery__desc { margin: 0; font-size: 0.88rem; line-height: 1.75; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); } .lien-thumb-gallery__desc br { display: block; content: ""; margin-top: 0.15em; } .lien-thumb-gallery__thumbs { display: flex; gap: 0.5rem; margin-top: 0.65rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; } .lien-thumb-gallery__thumb { flex: 0 0 clamp(64px, 14vw, 96px); width: clamp(64px, 14vw, 96px); aspect-ratio: 1; border: 2px solid transparent; padding: 0; margin: 0; cursor: pointer; background-size: cover; background-position: center; background-color: #2a2622; opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease; } .lien-thumb-gallery__thumb.is-active, .lien-thumb-gallery__thumb:hover { opacity: 1; border-color: #fff; } .lien-thumb-gallery--photos .lien-thumb-gallery__overlay, .lien-thumb-gallery--photos .lien-thumb-gallery__caption { display: none; } @media (max-width: 600px) { .lien-thumb-gallery__main { aspect-ratio: 4 / 3; } .lien-thumb-gallery__thumb { flex-basis: 56px; width: 56px; } } /* ------------------------------------------------------------------------- lien-gallery — WP Gallery block + class "lien-gallery" Mixed portrait/landscape: contain + blurred fill --------------------------------------------------------------------------- */ .wp-block-gallery.lien-gallery, figure.lien-gallery { display: block; width: 100%; max-width: 100%; margin: 1.75rem 0 2.25rem; padding: 0; gap: 0; } /* Before JS runs, keep a tidy fallback grid */ .wp-block-gallery.lien-gallery:not(.lien-gallery--ready) { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; } .wp-block-gallery.lien-gallery:not(.lien-gallery--ready) .wp-block-image, .wp-block-gallery.lien-gallery:not(.lien-gallery--ready) figure { margin: 0; width: 100%; aspect-ratio: 1; overflow: hidden; background: #1a1816; } .wp-block-gallery.lien-gallery:not(.lien-gallery--ready) img { width: 100%; height: 100%; object-fit: cover; } .lien-gallery.lien-gallery--ready, .wp-block-gallery.lien-gallery.lien-gallery--ready { display: block; } .lien-gallery__shell { width: 100%; } .lien-gallery__stage { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #1a1816; outline: none; } .lien-gallery__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; display: flex; align-items: center; justify-content: center; } .lien-gallery__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s linear 0s; z-index: 1; } .lien-gallery__blur { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(28px) saturate(1.05); transform: scale(1.08); opacity: 0.45; pointer-events: none; } .lien-gallery__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; } .lien-gallery__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border: 0; padding: 0; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.88); color: #1c1b19; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; } .lien-gallery__stage:hover .lien-gallery__nav, .lien-gallery__stage:focus-within .lien-gallery__nav { opacity: 1; } .lien-gallery__nav:hover { background: #fff; } .lien-gallery__nav--prev { left: 0.75rem; } .lien-gallery__nav--next { right: 0.75rem; } .lien-gallery__thumbs { display: flex; gap: 0.5rem; margin-top: 0.65rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; scrollbar-width: thin; } .lien-gallery__thumb { flex: 0 0 clamp(64px, 12vw, 88px); width: clamp(64px, 12vw, 88px); aspect-ratio: 1; border: 2px solid transparent; padding: 0; margin: 0; cursor: pointer; background-size: cover; background-position: center; background-color: #2a2622; opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease; border-radius: 2px; } .lien-gallery__thumb.is-active, .lien-gallery__thumb:hover { opacity: 1; border-color: #ae8632; } @media (max-width: 600px) { .lien-gallery__stage { aspect-ratio: 4 / 3; } .lien-gallery__nav { opacity: 0.85; width: 2.15rem; height: 2.15rem; } .lien-gallery__thumb { flex-basis: 56px; width: 56px; } } /* ------------------------------------------------------------------------- lien-video-gallery — Group + YouTube links/embeds --------------------------------------------------------------------------- */ .lien-video-gallery { width: 100%; margin: 1.75rem 0 2.25rem; } .lien-video-gallery:not(.lien-video-gallery--ready) a { display: block; margin: 0.35rem 0; } .lien-video-gallery__shell { width: 100%; } .lien-video-gallery__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #1a1816; outline: none; } .lien-video-gallery__player { position: absolute; inset: 0; } .lien-video-gallery__poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background-size: cover; background-position: center; background-color: #1a1816; } .lien-video-gallery__poster::before { content: ""; position: absolute; inset: 0; background: rgba(12, 10, 8, 0.28); pointer-events: none; } .lien-video-gallery__play { position: absolute; top: 50%; left: 50%; z-index: 1; width: 4rem; height: 4rem; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); pointer-events: none; } .lien-video-gallery__play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 0.55rem 0 0.55rem 0.95rem; border-color: transparent transparent transparent #1c1b19; } .lien-video-gallery__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .lien-video-gallery__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border: 0; padding: 0; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.88); color: #1c1b19; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; } .lien-video-gallery__stage:hover .lien-video-gallery__nav, .lien-video-gallery__stage:focus-within .lien-video-gallery__nav { opacity: 1; } .lien-video-gallery__nav:hover { background: #fff; } .lien-video-gallery__nav--prev { left: 0.75rem; } .lien-video-gallery__nav--next { right: 0.75rem; } .lien-video-gallery__title { margin: 0.65rem 0 0; font-size: 0.92rem; letter-spacing: 0.04em; color: var(--lien-ink-soft, #4a4640); min-height: 1.4em; } .lien-video-gallery__thumbs { display: flex; gap: 0.5rem; margin-top: 0.65rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; scrollbar-width: thin; } .lien-video-gallery__thumb { flex: 0 0 clamp(88px, 18vw, 120px); width: clamp(88px, 18vw, 120px); aspect-ratio: 16 / 9; border: 2px solid transparent; padding: 0; margin: 0; cursor: pointer; background-size: cover; background-position: center; background-color: #2a2622; opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease; border-radius: 2px; } .lien-video-gallery__thumb.is-active, .lien-video-gallery__thumb:hover { opacity: 1; border-color: #ae8632; } @media (max-width: 600px) { .lien-video-gallery__nav { opacity: 0.85; width: 2.15rem; height: 2.15rem; } .lien-video-gallery__play { width: 3.25rem; height: 3.25rem; } .lien-video-gallery__thumb { flex-basis: 72px; width: 72px; } } /* ------------------------------------------------------------------------- Takeout simple order --------------------------------------------------------------------------- */ .lien-order { margin: 2rem 0 3rem; } .lien-order__lead { margin: 0 0 1.5rem; line-height: 1.8; color: var(--lien-ink-soft, #4a4640); } .lien-order__note { display: inline-block; margin-top: 0.35rem; font-size: 0.88rem; color: #8a3d3d; } .lien-order__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 1.75rem 2rem; align-items: start; } .lien-order__cat { margin: 0 0 1.75rem; } .lien-order__cat-title { margin: 0 0 0.85rem; font-family: var(--lien-serif); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.08em; border-bottom: 1px solid var(--lien-line, rgba(28, 27, 25, 0.12)); padding-bottom: 0.4rem; } .lien-order__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .lien-order__item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 0.85rem; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid rgba(28, 27, 25, 0.08); } .lien-order__thumb { width: 88px; height: 66px; background: #ebe7e1 center / cover no-repeat; border-radius: 2px; } .lien-order__thumb--empty { background: linear-gradient(135deg, #ebe7e1, #ddd6cc); } .lien-order__name { margin: 0 0 0.2rem; font-size: 0.95rem; line-height: 1.45; color: var(--lien-ink, #1c1b19); } .lien-order__price { margin: 0; font-size: 0.92rem; letter-spacing: 0.02em; } .lien-order__price small, .lien-order__total small { margin-left: 0.25rem; font-size: 0.75rem; color: var(--lien-ink-soft, #4a4640); } .lien-order__item-note { margin: 0.25rem 0 0; font-size: 0.75rem; color: #8a3d3d; line-height: 1.4; } .lien-order__qty { display: inline-flex; align-items: center; gap: 0.25rem; } .lien-order__qty-btn { width: 2rem; height: 2rem; border: 1px solid rgba(28, 27, 25, 0.2); background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; border-radius: 2px; } .lien-order__qty-btn:hover { border-color: #ae8632; color: #ae8632; } .lien-order__qty-input { width: 2.5rem; height: 2rem; text-align: center; border: 1px solid rgba(28, 27, 25, 0.2); border-radius: 2px; font-size: 0.9rem; } .lien-order__aside { position: sticky; top: 1rem; } .lien-order__cart { padding: 1.15rem 1.15rem 1.35rem; background: #f7f5f2; border: 1px solid rgba(28, 27, 25, 0.08); } .lien-order__cart-title { margin: 0 0 0.75rem; font-family: var(--lien-serif); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.06em; } .lien-order__cart-list { list-style: none; margin: 0 0 0.85rem; padding: 0; max-height: 220px; overflow: auto; font-size: 0.88rem; } .lien-order__cart-list li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px dashed rgba(28, 27, 25, 0.1); } .lien-order__cart-empty { color: var(--lien-ink-soft, #4a4640); border: 0 !important; } .lien-order__total { margin: 0 0 1rem; font-size: 1.05rem; text-align: right; } .lien-order__total strong { font-size: 1.35rem; letter-spacing: 0.02em; } .lien-order__field { display: block; margin: 0 0 0.75rem; font-size: 0.85rem; } .lien-order__field span { display: block; margin-bottom: 0.3rem; letter-spacing: 0.04em; } .lien-order__field abbr { text-decoration: none; color: #c53d3d; } .lien-order__field input, .lien-order__field select, .lien-order__field textarea { width: 100%; box-sizing: border-box; padding: 0.55rem 0.65rem; border: 1px solid rgba(28, 27, 25, 0.18); border-radius: 2px; background: #fff; font: inherit; } .lien-order__form-note { margin: 0 0 0.75rem; font-size: 0.78rem; line-height: 1.55; color: var(--lien-ink-soft, #4a4640); } .lien-order__submit { width: 100%; padding: 0.85rem 1rem; border: 0; background: #1c1b19; color: #fff; font: inherit; letter-spacing: 0.08em; cursor: pointer; border-radius: 2px; } .lien-order__submit:hover { background: #3a342c; } .lien-order__submit:disabled { opacity: 0.55; cursor: wait; } .lien-order__status { margin: 0.75rem 0 0; font-size: 0.88rem; line-height: 1.5; } .lien-order__status.is-ok { color: #2f6b3a; } .lien-order__status.is-error { color: #c53d3d; } @media (max-width: 900px) { .lien-order__layout { grid-template-columns: 1fr; } .lien-order__aside { position: static; } } @media (max-width: 600px) { .lien-order__item { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb meta" "qty qty"; } .lien-order__thumb { grid-area: thumb; width: 72px; height: 54px; } .lien-order__meta { grid-area: meta; } .lien-order__qty { grid-area: qty; justify-content: flex-end; } } /* ------------------------------------------------------------------------- Flower shop (Belco-style print catalog) --------------------------------------------------------------------------- */ .flower-shop-cta { --flower-cta-ink: #1c1b19; --flower-cta-gold: #9a8160; --flower-cta-line: rgba(28, 27, 25, 0.12); margin: 0 auto 1.75rem; padding: 0; } .flower-shop-cta--bottom { margin: 2.5rem auto 1rem; } .flower-shop-cta__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0.65rem; max-width: 820px; margin: 0 auto; padding: 1rem; border: 1px solid var(--flower-cta-line); background: linear-gradient(180deg, #f7f5f2 0%, #fff 100%); } .flower-shop-cta__phone, .flower-shop-cta__line, .flower-shop-cta__pdf { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1 1 200px; min-height: 4.5rem; padding: 0.85rem 1rem; border-radius: 2px; text-decoration: none; text-align: center; box-sizing: border-box; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; font: inherit; } .flower-shop-cta__phone { background: var(--flower-cta-ink); color: #fff; border: 1px solid var(--flower-cta-ink); } .flower-shop-cta__phone:hover, .flower-shop-cta__phone:focus-visible { background: #3a342c; border-color: #3a342c; color: #fff; outline: none; } .flower-shop-cta__phone-label, .flower-shop-cta__line-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; opacity: 0.9; } .flower-shop-cta__phone-number { display: block; margin-top: 0.2rem; font-size: 1.45rem; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .flower-shop-cta__line { background: #06c755; color: #fff; border: 1px solid #06c755; } .flower-shop-cta__line:hover, .flower-shop-cta__line:focus-visible { background: #05b34c; border-color: #05b34c; color: #fff; outline: none; } .flower-shop-cta__line-label { font-size: 0.95rem; letter-spacing: 0.06em; } .flower-shop-cta__pdf { appearance: none; cursor: pointer; background: #fff; color: var(--flower-cta-ink); border: 1px solid var(--flower-cta-ink); } .flower-shop-cta__pdf:hover, .flower-shop-cta__pdf:focus-visible { background: #f0ebe4; outline: none; } .flower-shop-cta__pdf-label { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; } .lien-flower-shop__intro { margin: 0 0 1rem; line-height: 1.8; color: var(--lien-ink-soft, #4a4640); } .lien-flower-shop__nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; list-style: none; margin: 0 0 1.25rem; padding: 0; } .lien-flower-shop__nav a { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid rgba(28, 27, 25, 0.18); border-radius: 2px; text-decoration: none; color: var(--lien-ink, #1c1b19); font-size: 0.88rem; letter-spacing: 0.04em; background: #fff; } .lien-flower-shop__nav a:hover { border-color: var(--lien-gold, #9a8160); color: var(--lien-gold-deep, #7a6548); } .lien-flower-shop__notice { margin: 0 0 2rem; padding: 1rem 1.15rem; background: #f7f5f2; border: 1px solid rgba(28, 27, 25, 0.08); font-size: 0.9rem; line-height: 1.7; } .lien-flower-shop__notice p { margin: 0; } .lien-flower-shop__notice-sub { margin-top: 0.5rem !important; font-size: 0.82rem; color: var(--lien-ink-soft, #4a4640); } .lien-flower-shop__section { margin: 0 0 2.5rem; } .lien-flower-shop__heading { margin: 0 0 0.85rem; font-family: var(--lien-serif); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.08em; border-bottom: 1px solid rgba(28, 27, 25, 0.12); padding-bottom: 0.4rem; } .lien-flower-shop__section-note { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.7; color: var(--lien-ink-soft, #4a4640); } .lien-flower-shop__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.15rem; } .lien-flower-shop__card { display: flex; flex-direction: column; } .lien-flower-shop__thumb { width: 100%; aspect-ratio: 3 / 4; background: #ebe7e1 center / cover no-repeat; border-radius: 2px; } .lien-flower-shop__thumb--empty { background: linear-gradient(135deg, #ebe7e1, #ddd6cc); } .lien-flower-shop__meta { padding: 0.65rem 0.1rem 0; } .lien-flower-shop__name { margin: 0 0 0.25rem; font-size: 0.92rem; line-height: 1.45; } .lien-flower-shop__price { margin: 0; font-size: 1rem; letter-spacing: 0.02em; } .lien-flower-shop__price small { font-size: 0.75rem; color: var(--lien-ink-soft, #4a4640); } .lien-flower-shop__size, .lien-flower-shop__item-note, .lien-flower-shop__disclaimer { margin: 0.3rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--lien-ink-soft, #4a4640); } .lien-flower-shop__footer-note { margin: 1.5rem 0 0; text-align: center; font-size: 0.92rem; } @media (max-width: 599px) { .flower-shop-cta__phone, .flower-shop-cta__line, .flower-shop-cta__pdf { flex-basis: 100%; } .lien-flower-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } } @media print { @page { size: A4 portrait; margin: 10mm; } .flower-shop-page section, #body_wrap.flower-shop-page section { page-break-before: auto !important; break-before: auto !important; } .flower-shop-page, #body_wrap.flower-shop-page { background: #fff !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .flower-shop-page .flower-shop-cta, .flower-shop-page .no-print, .flower-shop-page #header, .flower-shop-page #footer, .flower-shop-page #sidebar, .flower-shop-page #breadcrumb, .flower-shop-page #fix_header, .flower-shop-page #fix_bottom_menu, .flower-shop-page #before_footer_widget, .flower-shop-page #after_article, .flower-shop-page #comments, .flower-shop-page .p-fixBtnWrap, .flower-shop-page .c-shareBtns, .flower-shop-page .p-articleFoot, .flower-shop-page .lien-fab-stack, #header, #footer, #sidebar, #breadcrumb, .p-fixBtnWrap, .lien-fab-stack { display: none !important; } .flower-shop-page a[href]::after { content: none !important; } .flower-shop-page a { text-decoration: none !important; } .lien-flower-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.75rem !important; } .lien-flower-shop__section { page-break-inside: avoid; break-inside: avoid; margin-bottom: 1.25rem !important; } .lien-flower-shop__thumb { aspect-ratio: 1 / 1 !important; } } html.flower-shop-printing .flower-shop-page #main_content, html.flower-shop-printing .flower-shop-page .l-mainContent, html.flower-shop-printing .flower-shop-page .post_content, html.flower-shop-printing .flower-shop-page .l-content { width: 100% !important; max-width: 100% !important; float: none !important; } html.flower-shop-printing .lien-flower-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* ------------------------------------------------------------------------- Contact Form 7 — Lien contact page --------------------------------------------------------------------------- */ .lien-cf7, .page-id-7195 .wpcf7 { width: 100%; max-width: 40rem; margin: 1.75rem auto 0; } .lien-cf7 .wpcf7 { margin: 0; } .lien-cf7 .wpcf7-form, .page-id-7195 .wpcf7-form { padding: clamp(1.5rem, 4vw, 2.25rem); background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.4)), var(--lien-paper-deep); border: 1px solid var(--lien-line); box-shadow: 0 18px 40px rgba(28, 27, 25, 0.06); } .lien-cf7 .wpcf7-form > p, .page-id-7195 .wpcf7-form > p { margin: 0 0 1.35rem; font-family: var(--lien-sans); font-size: 0.92rem; line-height: 1.7; color: var(--lien-ink-soft); } .lien-cf7 .wpcf7-form > p:last-of-type, .page-id-7195 .wpcf7-form > p:last-of-type { margin-bottom: 0; } .lien-cf7 .wpcf7-form label, .page-id-7195 .wpcf7-form label { display: block; font-family: var(--lien-serif); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--lien-ink); line-height: 1.6; } .lien-cf7 .wpcf7-form-control-wrap, .page-id-7195 .wpcf7-form-control-wrap { display: block; margin-top: 0.45rem; } .lien-cf7 input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .lien-cf7 textarea.wpcf7-form-control, .page-id-7195 input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .page-id-7195 textarea.wpcf7-form-control { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 0.85rem 0.95rem; border: 1px solid rgba(28, 27, 25, 0.18); border-radius: 0; background: rgba(255, 255, 255, 0.88); color: var(--lien-ink); font-family: var(--lien-sans); font-size: 1rem; line-height: 1.5; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; appearance: none; } .lien-cf7 textarea.wpcf7-form-control, .page-id-7195 textarea.wpcf7-form-control { min-height: 10rem; resize: vertical; } .lien-cf7 input.wpcf7-form-control:hover:not([type="submit"]):not([type="checkbox"]), .lien-cf7 textarea.wpcf7-form-control:hover, .page-id-7195 input.wpcf7-form-control:hover:not([type="submit"]):not([type="checkbox"]), .page-id-7195 textarea.wpcf7-form-control:hover { border-color: rgba(154, 129, 96, 0.55); } .lien-cf7 input.wpcf7-form-control:focus:not([type="submit"]):not([type="checkbox"]), .lien-cf7 textarea.wpcf7-form-control:focus, .page-id-7195 input.wpcf7-form-control:focus:not([type="submit"]):not([type="checkbox"]), .page-id-7195 textarea.wpcf7-form-control:focus { outline: none; border-color: var(--lien-gold); background: #fff; box-shadow: 0 0 0 3px rgba(154, 129, 96, 0.18); } .lien-cf7 .wpcf7-not-valid, .page-id-7195 .wpcf7-not-valid { border-color: #b54848 !important; box-shadow: 0 0 0 3px rgba(181, 72, 72, 0.12) !important; } .lien-cf7 .wpcf7-not-valid-tip, .page-id-7195 .wpcf7-not-valid-tip { margin-top: 0.4rem; font-size: 0.8rem; color: #b54848; } /* Topic checkboxes → chip row */ .lien-cf7 .wpcf7-checkbox, .page-id-7195 .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 0.55rem; } .lien-cf7 .wpcf7-list-item, .page-id-7195 .wpcf7-list-item { margin: 0; } .lien-cf7 .wpcf7-checkbox .wpcf7-list-item label, .page-id-7195 .wpcf7-checkbox .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.55rem 0.9rem; border: 1px solid rgba(28, 27, 25, 0.16); background: rgba(255, 255, 255, 0.75); font-family: var(--lien-sans); font-size: 0.88rem; letter-spacing: 0.02em; color: var(--lien-ink-soft); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .lien-cf7 .wpcf7-checkbox .wpcf7-list-item label:hover, .page-id-7195 .wpcf7-checkbox .wpcf7-list-item label:hover { border-color: var(--lien-gold); color: var(--lien-ink); } .lien-cf7 .wpcf7-checkbox input[type="checkbox"], .page-id-7195 .wpcf7-checkbox input[type="checkbox"] { width: 0.95rem; height: 0.95rem; margin: 0; accent-color: var(--lien-gold-deep); } .lien-cf7 .wpcf7-checkbox .wpcf7-list-item label:has(input:checked), .page-id-7195 .wpcf7-checkbox .wpcf7-list-item label:has(input:checked) { border-color: var(--lien-gold-deep); background: rgba(154, 129, 96, 0.14); color: var(--lien-ink); } .lien-cf7 input.wpcf7-submit, .page-id-7195 input.wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; min-width: 12rem; min-height: 3.1rem; margin-top: 0.35rem; padding: 0.9rem 1.75rem; border: 1px solid var(--lien-gold); border-radius: 0; background: var(--lien-gold); color: #fff; font-family: var(--lien-sans); font-size: 0.92rem; letter-spacing: 0.16em; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } .lien-cf7 input.wpcf7-submit:hover, .page-id-7195 input.wpcf7-submit:hover { background: var(--lien-gold-deep); border-color: var(--lien-gold-deep); } .lien-cf7 input.wpcf7-submit:focus-visible, .page-id-7195 input.wpcf7-submit:focus-visible { outline: 2px solid var(--lien-gold-deep); outline-offset: 3px; } .lien-cf7 .wpcf7-spinner, .page-id-7195 .wpcf7-spinner { margin-left: 0.75rem; } .lien-cf7 .wpcf7-response-output, .page-id-7195 .wpcf7-response-output { margin: 1.25rem 0 0; padding: 0.9rem 1rem; border-radius: 0; border-width: 1px; font-family: var(--lien-sans); font-size: 0.9rem; line-height: 1.7; } .lien-cf7 form.sent .wpcf7-response-output, .page-id-7195 form.sent .wpcf7-response-output { border-color: rgba(122, 101, 72, 0.35); background: rgba(154, 129, 96, 0.12); color: var(--lien-ink); } .lien-cf7 form.invalid .wpcf7-response-output, .lien-cf7 form.failed .wpcf7-response-output, .page-id-7195 form.invalid .wpcf7-response-output, .page-id-7195 form.failed .wpcf7-response-output { border-color: rgba(181, 72, 72, 0.35); background: rgba(181, 72, 72, 0.08); color: #8a3030; } @media (max-width: 600px) { .lien-cf7 .wpcf7-form, .page-id-7195 .wpcf7-form { padding: 1.25rem 1rem; } .lien-cf7 input.wpcf7-submit, .page-id-7195 input.wpcf7-submit { width: 100%; } }