/* Theme Name: Luna Interiors Theme URI: https://lunainteriors.ro Author: Luna Interiors Description: Custom block theme for Luna Interiors — boutique interior design studio & curated shop. Built for WooCommerce, bilingual (RO/EN), with on-brand block patterns the studio can compose freely. Version: 0.1.3 Requires at least: 6.4 Tested up to: 6.7 Requires PHP: 8.1 Text Domain: luna Tags: full-site-editing, block-patterns, woocommerce, e-commerce, portfolio */ /* Block themes define their styles in theme.json. This file is for incidental CSS only; keep design tokens in theme.json. */ /* --- Logo --------------------------------------------------------------- Inline SVGs use fill: currentColor, so the logo colour follows the text colour of its context (ink on light backgrounds; set to white on the hero). */ .luna-logo { display: inline-flex; align-items: center; color: var(--wp--preset--color--ink); line-height: 0; } .luna-logo:hover, .luna-logo:focus { color: var(--wp--preset--color--ink); } .luna-logo .luna-logo__mark { display: block; height: 75px; /* stacked mark in the header */ width: auto; } .luna-logo--footer .luna-logo__mark { height: 26px; /* inline wordmark in the footer */ } /* --- Layout: pin the footer to the bottom on short pages ---------------- */ .wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .wp-site-blocks > footer { margin-top: auto; } /* --- Single project ------------------------------------------------------ */ .luna-project__intro { align-items: flex-start; gap: var(--wp--preset--spacing--40); } .luna-project__title { font-family: var(--wp--preset--font-family--serif); font-size: 1.75rem; font-weight: 400; line-height: 1.2; color: var(--wp--preset--color--ink); margin: 0 0 1.8rem; } .luna-project__field { margin-bottom: 1.4rem; } .luna-project__label { display: block; font-family: var(--wp--preset--font-family--sans); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--wp--preset--color--ink); margin-bottom: 0.3rem; } .luna-project__value { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: 0.95rem; color: var(--wp--preset--color--warm-grey); } .luna-project__desc { font-family: var(--wp--preset--font-family--serif); font-size: 0.9rem; line-height: 1.75; color: var(--wp--preset--color--ink); margin-top: 2rem; } .luna-project__next, .luna-project__nav a { font-family: var(--wp--preset--font-family--sans); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--wp--preset--color--ink); text-decoration: none; } .luna-project__next { margin-top: 2.5rem; } .luna-project__hero img { display: block; width: 100%; height: auto; } /* Per-project hero framing (ratio + focal point + zoom), applied by the luna-core render_block filter when a project sets a hero ratio. */ .luna-project__hero.is-luna-hero-framed { aspect-ratio: var(--luna-hero-ratio); overflow: hidden; } .luna-project__hero.is-luna-hero-framed img { width: 100%; height: 100%; object-fit: cover; object-position: var(--luna-focus, 50% 50%); transform: scale(var(--luna-hero-zoom, 1)); transform-origin: var(--luna-focus, 50% 50%); } .luna-project__body { margin-top: var(--wp--preset--spacing--50); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); } .luna-project__nav { margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--wp--preset--color--sand); } /* Images fill their container width by default — a small image scales UP to the box instead of sitting at its native size. The figure fills as a normal block (not a forced width:100%), so the client can inset an image responsively with the Margin control (Dimensions panel) and it narrows instead of overflowing. Resizing an image (.is-resized) still opts out with a fixed size. Editor too. */ .wp-block-image:not(.is-resized) { display: block; } .wp-block-image:not(.is-resized) img { display: block; width: 100%; height: auto; } /* Self-hosted video gets the same fill-by-default treatment as images. */ .wp-block-video { display: block; } .wp-block-video video { display: block; width: 100%; height: auto; } /* Video aspect-ratio crops (set via the video block's Proporții control). Class lands on the figure (front end) or the block wrapper (editor); the descendant `video` selector covers both. object-fit:cover fills the frame. */ [class*="has-luna-ratio-"] video { object-fit: cover; object-position: var(--luna-focus, center); } .has-luna-ratio-16-9 video { aspect-ratio: 16 / 9; } .has-luna-ratio-3-2 video { aspect-ratio: 3 / 2; } .has-luna-ratio-4-3 video { aspect-ratio: 4 / 3; } .has-luna-ratio-10-9 video { aspect-ratio: 10 / 9; } .has-luna-ratio-1-1 video { aspect-ratio: 1 / 1; } .has-luna-ratio-3-4 video { aspect-ratio: 3 / 4; } .has-luna-ratio-2-3 video { aspect-ratio: 2 / 3; } .has-luna-ratio-9-16 video { aspect-ratio: 9 / 16; } /* Responsive width presets (image/video Styles panel). max-width + core's auto-centering gives a centered item that scales — no fixed pixels. Steps 95%→50%; "Default" = full width. Add/remove steps here + in functions.php. */ .wp-block-image.is-style-luna-w-95, .wp-block-video.is-style-luna-w-95 { max-width: 95%; } .wp-block-image.is-style-luna-w-90, .wp-block-video.is-style-luna-w-90 { max-width: 90%; } .wp-block-image.is-style-luna-w-85, .wp-block-video.is-style-luna-w-85 { max-width: 85%; } .wp-block-image.is-style-luna-w-80, .wp-block-video.is-style-luna-w-80 { max-width: 80%; } .wp-block-image.is-style-luna-w-75, .wp-block-video.is-style-luna-w-75 { max-width: 75%; } .wp-block-image.is-style-luna-w-70, .wp-block-video.is-style-luna-w-70 { max-width: 70%; } .wp-block-image.is-style-luna-w-65, .wp-block-video.is-style-luna-w-65 { max-width: 65%; } .wp-block-image.is-style-luna-w-60, .wp-block-video.is-style-luna-w-60 { max-width: 60%; } .wp-block-image.is-style-luna-w-55, .wp-block-video.is-style-luna-w-55 { max-width: 55%; } .wp-block-image.is-style-luna-w-50, .wp-block-video.is-style-luna-w-50 { max-width: 50%; } /* "Mare + mică" arrangements: the smaller image fills 80% of its column, centered. */ .luna-proj-row--80r > .wp-block-column:last-child .wp-block-image, .luna-proj-row--80l > .wp-block-column:first-child .wp-block-image { width: 80%; margin-inline: auto; } /* Gap between columns inside a row matches the 40px gap between stacked rows, so horizontal and vertical spacing are consistent (default columns gap is 24px). */ .wp-block-columns.luna-proj-row { gap: var(--wp--preset--spacing--40); } @media (max-width: 781px) { .luna-project__intro.wp-block-columns { gap: var(--wp--preset--spacing--40); } /* collapse the empty "whitespace" columns so images stack full-width on mobile */ .luna-proj-row .wp-block-column:empty { display: none; } } /* --- Galerie / portfolio grid -------------------------------------------- */ .luna-gallery .wp-block-post-template { gap: var(--wp--preset--spacing--40); } .luna-gallery .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, 1fr); } .luna-gallery__img { margin: 0; } .luna-gallery__img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .luna-gallery__meta { margin-top: 0.75rem; align-items: baseline; } .luna-gallery__title { margin: 0; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400; font-size: 1.14rem; letter-spacing: 0.01em; } .luna-gallery__title a { color: var(--wp--preset--color--ink); text-decoration: none; } .luna-gallery__plus { font-size: 1.1rem; line-height: 1; color: var(--wp--preset--color--ink); } @media (max-width: 960px) { .luna-gallery .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .luna-gallery .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } } /* --- Homepage hero ------------------------------------------------------- */ .luna-hero { /* cancel WP's `:where(.wp-site-blocks) > * { margin-block-start: 24px }` so the hero meets the very top (header overlays it) */ margin-block-start: 0; margin-top: 0; /* dvh tracks the iOS toolbar so the hero always fills the visible viewport (vh fallback for older browsers) */ min-height: 100vh; min-height: 100dvh; } .luna-hero__logo { margin: 0; line-height: 0; color: #ffffff; display: flex; justify-content: center; opacity: 0.7; /* 70% opacity */ } .luna-hero__mark { display: block; width: clamp(150px, 16vw, 230px); height: auto; } /* Homepage: transparent header overlaying the hero, white, MENU only */ body.home .wp-site-blocks > header { position: absolute; inset: 0 0 auto 0; z-index: 10; } body.home .site-header__bar, body.home .menu-toggle { color: #ffffff; /* white MENU over the hero — scoped to the bar, not the drawer */ } body.home .site-header__left, body.home .site-header__logo { display: none; /* hero wordmark is the brand here; no cart/small logo */ } /* Only MENU remains on the homepage — keep it at the right edge. */ body.home .site-header__bar { display: flex; justify-content: flex-end; } /* --- Header bar ---------------------------------------------------------- */ .site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 1.5rem 2.5rem; } /* The bar is a flow-layout group; WP's `:where(.is-layout-flow) > *` adds margin-block-start:24px to its non-first children (the logo and the right/menu zone). Zero it on each — same fix as the drawer aside — so logo, cart and menu all align to the top. */ .site-header__left, .site-header__logo, .site-header__right { margin-block-start: 0; } .site-header__left { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); justify-self: start; } .site-header__icon { display: block; width: 22px; height: auto; } .site-header__cart { display: inline-flex; align-items: center; } /* Language switcher (header, beside the cart): EN | RO — active vs inactive. */ .luna-lang { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; } .luna-lang__item { text-decoration: none; } .luna-lang__item.is-active { color: #282522; } a.luna-lang__item { color: #583624; opacity: 0.5; } .luna-lang__sep { color: #583624; opacity: 0.5; } /* Hide WPML's default footer language switcher — we have our own in the header. */ .wpml-ls-statics-footer { display: none; } /* Gallery "Includes video tour" badge (only on projects whose content has video). */ .luna-proj-video { display: flex; align-items: center; gap: 0.45em; margin: 0.35rem 0 0; font-family: var(--wp--preset--font-family--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--warm-grey); } .luna-proj-video__icon { display: inline-flex; } .luna-proj-video__icon svg { display: block; width: auto; height: 0.85em; } .luna-drawer__close-icon { display: block; width: auto; height: 12px; } .site-header__right { justify-self: end; } .site-header__logo { justify-self: center; } .site-header__link, .menu-toggle { font-family: var(--wp--preset--font-family--sans); font-size: 0.8125rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--wp--preset--color--ink); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; line-height: 1; } /* --- Menu drawer (right slide-in, no backdrop) --------------------------- */ .luna-drawer { position: fixed; inset: 0 0 0 auto; /* pin to the right edge, full height */ width: min(440px, 90vw); z-index: 1000; background: var(--wp--preset--color--cream); padding: var(--wp--preset--spacing--40); overflow: hidden auto; /* vertical scroll only; never overflow/scroll horizontally */ transform: translateX(100%); transition: transform 0.35s ease; gap: var(--wp--preset--spacing--30); margin: 0; /* kill the flow-layout margin-block-start the aside inherits as a .site-header child */ } .luna-drawer.is-open { transform: translateX(0); } /* WP's flex layout defaults to flex-wrap:wrap, which makes tall content wrap into a second column; force a single scrolling column instead. */ .luna-drawer.luna-drawer { flex-wrap: nowrap; } .luna-drawer__close { align-self: flex-end; background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--wp--preset--color--brand); padding: 0; } .luna-drawer__logo .luna-logo__mark { height: 40px; } .luna-drawer__intro { font-family: var(--wp--preset--font-family--serif); font-size: 0.8125rem; color: #282522; max-width: none; width: 100%; } .luna-drawer .luna-drawer__social { margin-top: auto; /* pin to the bottom (beats WP's `.is-layout-flex > :is(*,div){margin:0}`) */ font-size: 0.7875rem; /* 10% smaller */ letter-spacing: 0.05em; color: var(--wp--preset--color--brand); text-decoration: none; } /* Drawer navigation: vertical, uppercase, click-to-expand submenu */ .luna-drawer__nav { font-family: var(--wp--preset--font-family--sans); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.715rem; /* ~12% smaller */ gap: var(--wp--preset--spacing--20); } /* ~65px between the subheader and the nav. The drawer's flex `gap` already adds 24px, so the remainder goes here. The `>` matches only the