/** * Luxe Assets Partners — SEBS™ · Presentation layer · v1.0 * Engineering by Sproutbean Engineering Studio using SEBS™ * * Values transcribed from the approved design reference. Strict three-colour * brand system — gold / black / white only. Keyed to stable .luxe-* classes on * native core blocks. Global typography, colour, header and footer are owned by * Blocksy; this stylesheet carries only the pattern-specific design. */ /* -------------------------------------------------------------------------- TYPEFACES Newsreader (display) and Plus Jakarta Sans (text) are loaded and sized by Blocksy (Customizer -> Typography). This stylesheet only names the families so component roles stay correct if a Blocksy selector does not reach them. -------------------------------------------------------------------------- */ /* ========================================================================== SECTION RHYTHM -------------------------------------------------------------------------- Every spacing preset in theme.json is multiplied by this value, so it is the single control for how much air sits between sections across the whole site. .85 the shipped default — a tighter, more editorial rhythm 1 the raw preset values 1.1 more open To change it without editing this file, declare it again in Customize -> Additional CSS; that rule loads later and wins: :root { --luxe-section-scale: .9; } Individual sections stay editable in the block editor under Dimensions -> Padding. ========================================================================== */ :root{ --luxe-section-scale:.7; /* Icon-block type — the pillar bands, and any luxe-focus-item. Both are relative to Blocksy's Base, so they follow it. Override either from Customize -> Additional CSS without touching this file: :root { --luxe-focus-title-size: 1.35em; } :root { --luxe-focus-desc-size: 1.12em; } */ --luxe-focus-title-size:1.25em; /* 20px at Base 16 */ --luxe-focus-desc-size:1em; /* identical to paragraph — site-wide consistency */ } /* ========================================================================== Design tokens (reference values) ========================================================================== */ .luxe-section,.editor-styles-wrapper .luxe-section{ --luxe-gold:var(--wp--preset--color--gold,#CA9C52); --luxe-black:var(--wp--preset--color--black,#1D1B17); --luxe-white:var(--wp--preset--color--white,#FFFCF8); --luxe-ink-soft:#5A5449; --luxe-ink-mute:rgba(29,27,23,.5); --luxe-on-black-soft:rgba(255,252,248,.72); --luxe-on-black-mute:rgba(255,252,248,.5); --luxe-line:rgba(202,156,82,.32); --luxe-line-soft:rgba(29,27,23,.09); --luxe-line-on-black:rgba(202,156,82,.25); --luxe-paper:#FAF6EF; --luxe-serif:'Newsreader',Georgia,serif; --luxe-sans:'Plus Jakarta Sans',-apple-system,'Segoe UI',Arial,sans-serif; } /* ========================================================================== Section base ========================================================================== */ /* Section padding comes from the theme.json presets, scaled by --luxe-section-scale (declared at the top of this file). */ /* TYPE OWNERSHIP Blocksy owns every size: headings from H1-H6, all body text and paragraph roles from Base, and buttons from the Buttons panel. The theme sets only what Blocksy cannot target — the serif/sans family on specific roles, colour, and the small uppercase labels (eyebrow, role, pair title, stat label) whose size is part of their identity rather than body copy. */ .luxe-section{position:relative;font-family:var(--luxe-sans);color:var(--luxe-black);isolation:isolate} /* Figures carry a margin from two directions: the browser's own default (`1em 40px`) and WordPress core's `.wp-block-image` bottom margin. Left alone they stack on top of the theme's spacing and inflate a section by 16-20px — most visibly as a gap under the pillar icons. The theme sets image spacing explicitly on each wrapper, so both are zeroed here. */ .luxe-section figure, .luxe-section figure.wp-block-image, .luxe-section .luxe-icon, .luxe-section .luxe-image-frame, .luxe-section .luxe-photo-frame, .luxe-section .luxe-hero-visual figure{margin:0} /* Blocksy owns heading family, size, weight, line-height and letter-spacing. The theme sets only the colour, because Blocksy has no way to make headings white inside a dark band and black everywhere else. */ .luxe-section .wp-block-heading{color:var(--luxe-black)} .luxe-section a{color:inherit} .luxe-section p{color:var(--luxe-ink-soft)} /* Dark sections — the approved black band aesthetic */ /* Dark bands. Light text on black renders visibly heavier than the same weight on white — subpixel antialiasing thickens the strokes, so a 400 title on the black band reads bolder than the identical title on a light section. Greyscale smoothing brings the two back in line without changing the font-weight. */ .luxe-section.luxe-dark{ background-color:var(--luxe-black); color:var(--luxe-white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .luxe-section.luxe-dark .wp-block-heading{color:var(--luxe-white)} .luxe-section.luxe-dark p{color:var(--luxe-on-black-soft)} .luxe-section.luxe-dark .luxe-eyebrow{color:var(--luxe-gold)} /* ========================================================================== Typographic roles (reference values) ========================================================================== */ .luxe-section .luxe-eyebrow{font-family:var(--luxe-sans);font-size:1.3em;letter-spacing:.2em;text-transform:uppercase;color:#8D6D39;font-weight:300;display:block;margin-bottom:20px;opacity:1} .luxe-rule{width:44px;max-width:44px;height:1px;background:var(--luxe-gold);border:0;opacity:.8;margin:30px 0} .luxe-section .luxe-lead{color:var(--luxe-ink-soft);max-width:58ch;line-height:1.88;font-size:1em;font-weight:300} .luxe-section .luxe-copy{color:var(--luxe-ink-soft);line-height:1.92;} .luxe-copy p+p{margin-top:20px} .luxe-section.luxe-dark .luxe-lead,.luxe-section.luxe-dark .luxe-copy{color:var(--luxe-on-black-soft)} /* ========================================================================== Buttons (reference: 11px / .24em / 17px 40px / 1px gold) ========================================================================== */ .luxe-btn .wp-block-button__link{display:inline-flex;align-items:center;gap:12px;font-family:var(--luxe-sans);font-weight:400;letter-spacing:.18em;text-transform:uppercase;padding:14px 32px;border:1px solid var(--luxe-gold);border-radius:0;color:var(--luxe-black);background:transparent;transition:all .6s cubic-bezier(.16,1,.3,1)} .luxe-btn .wp-block-button__link:hover{background:var(--luxe-gold);color:var(--luxe-white)} .luxe-btn-solid .wp-block-button__link{background:var(--luxe-gold);color:var(--luxe-white)} .luxe-btn-solid .wp-block-button__link:hover{background:var(--luxe-black);border-color:var(--luxe-black)} .luxe-dark .luxe-btn .wp-block-button__link{color:var(--luxe-white)} .luxe-dark .luxe-btn .wp-block-button__link:hover{background:var(--luxe-gold);color:var(--luxe-black)} /* ========================================================================== Home hero — split, 1fr 1.05fr ========================================================================== */ .luxe-hero{overflow:clip} .luxe-hero-grid.wp-block-columns{gap:clamp(44px,6vw,88px);align-items:center} .luxe-hero-grid>.wp-block-column{flex-basis:0;min-width:0} .luxe-hero-grid>.wp-block-column:first-child{flex-grow:1} .luxe-hero-grid>.wp-block-column:last-child{flex-grow:1.05} .luxe-hero-copy,.luxe-hero-visual{position:relative;z-index:1} .luxe-hero h1 .ln{display:block} .luxe-hero h1 em{font-style:italic;color:var(--luxe-gold);font-weight:400} .luxe-hero-visual{overflow:hidden} .luxe-hero-visual img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 1.6s cubic-bezier(.16,1,.3,1);will-change:transform} .luxe-hero-visual:hover img{transform:scale(1.03)} .luxe-hero-visual::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(1,1,1,.06);pointer-events:none} /* ========================================================================== Page title band (sub-pages) ========================================================================== */ .luxe-page-title{border-bottom:1px solid var(--luxe-line-soft)} /* ========================================================================== Focus bands — 4-up (dark) and 2-up (light) ========================================================================== */ /* Focus band — each pillar is a closed box, bordered on all four sides. The columns sit tight against one another so adjacent borders read as a single hairline rather than a double rule. */ .luxe-focus-row.wp-block-columns{gap:0} .luxe-focus-row>.wp-block-column{ min-width:0; padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px); border:1px solid var(--luxe-line-on-black); margin-left:-1px; } .luxe-focus-row>.wp-block-column:first-child{margin-left:0} .luxe-section:not(.luxe-dark) .luxe-focus-row>.wp-block-column{border-color:var(--luxe-line)} .luxe-focus-item .luxe-icon img,.luxe-focus-item .luxe-icon svg{width:34px;height:34px;display:block;margin:0} .luxe-section .luxe-focus-title{font-family:var(--luxe-serif);font-size:var(--luxe-focus-title-size);letter-spacing:.01em;font-weight:300;line-height:1.3;margin:18px 0 8px;color:var(--luxe-black)} .luxe-section.luxe-dark .luxe-focus-title{color:var(--luxe-white)} .luxe-section .luxe-focus-desc{font-size:var(--luxe-focus-desc-size);line-height:1.8;font-weight:300} @media(max-width:800px){ .luxe-focus-row>.wp-block-column{margin-left:0;margin-top:-1px} .luxe-focus-row>.wp-block-column:first-child{margin-top:0} } /* Focus pair — About page, hairline rule, no boxes */ .luxe-focus-pair.wp-block-columns{gap:clamp(24px,3vw,44px);margin-top:clamp(34px,4vw,52px);padding-top:clamp(26px,3vw,36px);border-top:1px solid rgba(1,1,1,.10)} .luxe-focus-pair>.wp-block-column{min-width:0} .luxe-section .luxe-pair-title{font-size:.69em;letter-spacing:.24em;text-transform:uppercase;color:var(--luxe-gold);font-weight:400;margin-bottom:12px;font-family:var(--luxe-sans)} .luxe-section .luxe-pair-desc{line-height:1.82;color:var(--luxe-ink-soft);} /* ========================================================================== Intro grid — .9fr 1.1fr ========================================================================== */ .luxe-intro-grid.wp-block-columns{gap:clamp(36px,5vw,84px)} .luxe-intro-grid>.wp-block-column{flex-basis:0;min-width:0} .luxe-intro-grid>.wp-block-column:first-child{flex-grow:.9} .luxe-intro-grid>.wp-block-column:last-child{flex-grow:1.1} /* Split grid — 1fr 1fr */ .luxe-split-grid.wp-block-columns{gap:clamp(40px,6vw,80px);align-items:center} .luxe-split-grid>.wp-block-column{flex-basis:0;min-width:0;flex-grow:1} .luxe-image-frame{position:relative;overflow:hidden} .luxe-image-frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block} .luxe-image-frame.is-tall img{aspect-ratio:4/5} /* ========================================================================== Phrase block — centred, hairline above ========================================================================== */ .luxe-phrase-block{text-align:center;margin-bottom:clamp(44px,5vw,72px)} .luxe-phrase-block::before{content:"";display:block;width:40px;height:1px;margin:0 auto 30px;background:var(--luxe-gold);opacity:.55} .luxe-section .luxe-phrase-heading{font-family:var(--luxe-serif);font-size:1.9em;line-height:1.34;margin:0;font-weight:300;letter-spacing:-.012em;color:var(--luxe-black)!important} .luxe-section .luxe-phrase-heading.is-alt{margin-top:4px} .luxe-phrase-heading em{font-style:italic;color:var(--luxe-gold)} /* ========================================================================== Feature cards ========================================================================== */ .luxe-feature-grid.wp-block-columns{gap:20px;margin-top:52px} .luxe-feature-grid>.wp-block-column{min-width:0} .luxe-feature-card{height:100%;background:var(--luxe-white);border:1px solid var(--luxe-line);overflow:hidden;position:relative;transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .8s} .luxe-feature-card:hover{transform:translateY(-4px);box-shadow:0 22px 60px rgba(1,1,1,.07)} .luxe-feature-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform 1.6s cubic-bezier(.16,1,.3,1);will-change:transform} .luxe-feature-card:hover img{transform:scale(1.03)} .luxe-feature-body{padding:clamp(24px,2.6vw,34px)} .luxe-feature-body .wp-block-heading{margin-bottom:10px} .luxe-feature-body p{color:var(--luxe-ink-soft);font-size:var(--luxe-focus-desc-size)} /* ========================================================================== Partners — mini (home, dark) and full (partners page) ========================================================================== */ .luxe-partner-mini-grid.wp-block-columns{gap:44px;margin-top:34px} .luxe-partner-mini-grid>.wp-block-column{min-width:0} .luxe-partner-mini.wp-block-columns{gap:26px;align-items:flex-start} .luxe-partner-mini>.wp-block-column{min-width:0} .luxe-partner-mini>.wp-block-column:first-child{flex:0 0 130px;max-width:130px} .luxe-photo-frame{position:relative;overflow:hidden;margin:0} .luxe-photo-frame img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block} .luxe-dark .luxe-photo-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none} .luxe-section .luxe-partner-name{font-family:var(--luxe-serif);font-size:1.44em;font-weight:300;color:var(--luxe-black);letter-spacing:-.014em;margin:0} .luxe-section.luxe-dark .luxe-partner-name{color:var(--luxe-white)} /* role sits above the dark paragraph rule */ .luxe-section .luxe-role,.luxe-section.luxe-dark .luxe-role{font-family:var(--luxe-sans);font-size:.72em;letter-spacing:.18em;text-transform:uppercase;color:var(--luxe-gold);margin:10px 0 16px;font-weight:400} .luxe-partner-mini p{line-height:1.85} @media(max-width:880px){.luxe-partner-mini-grid.wp-block-columns{gap:34px}} @media(max-width:420px){.luxe-partner-mini>.wp-block-column:first-child{flex:0 0 104px;max-width:104px}} /* Partners page — 148px portrait beside name, bio beneath */ .luxe-partners-full.wp-block-columns{gap:clamp(36px,4.5vw,72px);align-items:flex-start;margin-top:8px} .luxe-partners-full>.wp-block-column{min-width:0} .luxe-partner-head.wp-block-columns{gap:26px;align-items:center;margin-bottom:30px} .luxe-partner-head>.wp-block-column{min-width:0} .luxe-partner-head>.wp-block-column:first-child{flex:0 0 148px;max-width:148px} .luxe-partner-head .luxe-photo-frame img{transition:transform 1.6s cubic-bezier(.16,1,.3,1)} .luxe-partner-card:hover .luxe-photo-frame img{transform:scale(1.03)} .luxe-partner-head .luxe-photo-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(1,1,1,.08);pointer-events:none} .luxe-section .luxe-partner-head h2.wp-block-heading{margin:0 0 8px} .luxe-partner-copy p{line-height:1.92;margin-top:14px;color:var(--luxe-ink-soft)} .luxe-partner-copy p:first-child{margin-top:0} @media(max-width:420px){.luxe-partner-head>.wp-block-column:first-child{flex:0 0 110px;max-width:110px}} /* ========================================================================== Contact ========================================================================== */ /* No vertical padding here — the section supplies the rhythm. Adding it to the card doubled the space above the heading by ~88px. */ .luxe-contact-card{text-align:center} .luxe-contact-card h2.wp-block-heading{margin-bottom:20px} .luxe-contact-card p{color:var(--luxe-ink-soft);max-width:46ch;margin:0 auto 40px} .luxe-email a{font-family:var(--luxe-serif);font-weight:300;font-size:1.45em;color:var(--luxe-black);border-bottom:1px solid var(--luxe-gold);padding-bottom:5px;display:inline-block;text-decoration:none;transition:opacity .5s} .luxe-email a:hover{opacity:.62} .luxe-section.luxe-dark .luxe-email a{color:var(--luxe-white)} /* ========================================================================== Statistics ========================================================================== */ .luxe-stat .wp-block-heading{font-family:var(--luxe-serif);font-size:3.2em;line-height:1;color:var(--luxe-gold);font-weight:300} .luxe-stat-label{font-size:.75em;letter-spacing:.2em;text-transform:uppercase;color:var(--luxe-ink-mute);margin-top:8px} .luxe-section.luxe-dark .luxe-stat-label{color:var(--luxe-on-black-mute)} /* ========================================================================== Galleries, logo walls ========================================================================== */ .luxe-gallery.wp-block-columns{gap:20px} .luxe-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .luxe-logo-wall.wp-block-columns{gap:1px;background:var(--luxe-line);border:1px solid var(--luxe-line)} .luxe-logo-wall>.wp-block-column{background:var(--luxe-white);display:flex;align-items:center;justify-content:center;padding:28px;min-height:120px;min-width:0} .luxe-logo-wall img{max-height:40px;width:auto;opacity:.65;filter:grayscale(1);transition:opacity .4s,filter .4s} .luxe-logo-wall>.wp-block-column:hover img{opacity:1;filter:grayscale(0)} /* ========================================================================== Legal blocks ========================================================================== */ .luxe-legal-block{max-width:760px} .luxe-legal-jump{display:flex;gap:26px;flex-wrap:wrap;margin-top:28px} .luxe-legal-jump a{font-size:.75em;letter-spacing:.18em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid currentColor;text-decoration:none} .luxe-legal-jump a:hover{color:var(--luxe-gold)} /* ========================================================================== DECORATIVE MOTIFS — opt-in only -------------------------------------------------------------------------- These classes are NEVER applied by a pattern. An editor adds one by hand to a section (Advanced -> Additional CSS class(es)) when that section wants a little atmosphere. Everything ships undecorated by default. The artwork itself is drawn at whisper weight, so a motif reads as a change in the paper rather than as a graphic. If one is noticeable, it is wrong. luxe-deco-meridian longitude arcs international reach, capital luxe-deco-strata layered bands development, real estate luxe-deco-ascend rising traces asset growth, value creation luxe-deco-lattice facade grid the built asset luxe-deco-filament radiating network partnerships, connected capital luxe-deco-horizon horizon curves vision, elevate luxe-deco-aperture rotating squares precision, focus luxe-deco-cadence vertical rhythm a quiet full-width band One motif per section. The layer sits on the section's ::after, behind the content, and is never interactive. ========================================================================== */ .luxe-section[class*="luxe-deco-"]{position:relative;overflow:clip;isolation:isolate} .luxe-section[class*="luxe-deco-"] > *{position:relative;z-index:1} .luxe-section[class*="luxe-deco-"]::after{ content:"";position:absolute;z-index:0;pointer-events:none; background-repeat:no-repeat;background-size:contain;inset:auto; } /* Corner and side motifs */ .luxe-section.luxe-deco-meridian::after{background-image:url('../images/decorative/meridian.svg');right:-8%;top:50%;transform:translateY(-50%);width:min(460px,44vw);aspect-ratio:1;opacity:.55} .luxe-section.luxe-deco-lattice::after{background-image:url('../images/decorative/lattice.svg');right:-6%;top:-6%;width:min(400px,38vw);aspect-ratio:400/380;opacity:.55} .luxe-section.luxe-deco-filament::after{background-image:url('../images/decorative/filament.svg');left:-10%;top:50%;transform:translateY(-50%);width:min(480px,46vw);aspect-ratio:1;opacity:.6} .luxe-section.luxe-deco-aperture::after{background-image:url('../images/decorative/aperture.svg');right:-5%;top:6%;width:min(360px,34vw);aspect-ratio:1;opacity:.55} .luxe-section.luxe-deco-ascend::after{background-image:url('../images/decorative/ascend.svg');right:-4%;bottom:-4%;width:min(520px,48vw);aspect-ratio:400/330;opacity:.6} /* Full-width base motifs */ .luxe-section.luxe-deco-strata::after{background-image:url('../images/decorative/strata.svg');left:0;bottom:0;width:100%;height:clamp(160px,20vw,300px);background-size:cover;opacity:.5} .luxe-section.luxe-deco-horizon::after{background-image:url('../images/decorative/horizon.svg');left:0;bottom:0;width:100%;height:clamp(150px,18vw,280px);background-size:cover;opacity:.55} .luxe-section.luxe-deco-cadence::after{background-image:url('../images/decorative/cadence.svg');left:0;bottom:0;width:100%;height:clamp(120px,14vw,220px);background-size:cover;opacity:.5} /* On black the gold needs a touch more presence to register at all. */ .luxe-section.luxe-dark[class*="luxe-deco-"]::after{opacity:.85} /* Narrow screens: quieter still, so a motif never competes with the copy. */ @media(max-width:781px){ .luxe-section[class*="luxe-deco-"]::after{opacity:.4} .luxe-section.luxe-dark[class*="luxe-deco-"]::after{opacity:.6} } /* ========================================================================== BRAND TEXTURES AND WASHES -------------------------------------------------------------------------- `luxe-pattern-*` are tileable brand textures. `luxe-wash` places a very faint, vertically masked photograph behind a section — used on the About page. ========================================================================== */ .luxe-wash{position:relative;isolation:isolate} .luxe-wash::before{content:"";position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.10; -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)} .luxe-wash-hospitality::before{background-image:url('../images/defaults/wash-hospitality.jpg')} .luxe-wash-residence::before{background-image:url('../images/defaults/wash-residence.jpg')} .luxe-pattern-subtle{background-image:url('../images/decorative/luxe-signature-dark.svg');background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:clip} .luxe-pattern-subtle > *{position:relative;z-index:1} .luxe-pattern-subtle::before{ content:""; position:absolute; left:-6%; bottom:-10%; width:min(420px,40vw); aspect-ratio:1; background-image:url('../images/decorative/meridian.svg'); background-size:contain; background-repeat:no-repeat; opacity:.09; pointer-events:none; z-index:0; } @media(max-width:640px){.luxe-pattern-subtle::before{opacity:.06}} @media(max-width:640px){.luxe-hero-visual img{aspect-ratio:983/1024}} .luxe-pattern-lines{background-image:url('../images/decorative/luxe-lines.svg');background-size:28px 28px;background-repeat:repeat} /* ========================================================================== Utilities ========================================================================== */ .luxe-divider{width:100%;height:1px;background:var(--luxe-line);border:0;margin:0} .luxe-sample-note{display:none} @media(max-width:781px){ .luxe-hero-grid>.wp-block-column,.luxe-intro-grid>.wp-block-column, .luxe-split-grid>.wp-block-column{flex-grow:1;flex-basis:auto} }