@layer tulja-legacy {
/* =============================================
TULJA BLOCKS — shared styles (front + editor)
Inspiration Hero · Ornament Band · Pieces Grid · Quote & CTA
============================================= */
/* Design tokens (same values as style.css) so blocks also render correctly
in editors that don't load the theme stylesheet, e.g. Appearance → Widgets. */
:where(:root) {
--tulja-cream: #fcf6ec;
--tulja-cream-dark: #ded6c9;
--tulja-gold: #d19936;
--tulja-gold-light: #e8cd9d;
--tulja-dark-red: #900d2a;
--tulja-maroon-deep: #62081e;
--tulja-charcoal: #231814;
--tulja-warm-gray: #685a55;
--tulja-warm-gray-light: #b8a98c;
--tulja-white: #ffffff;
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans: 'Jost', 'Segoe UI', sans-serif;
}
.tulja-insp-hero,
.tulja-ornament,
.tulja-pieces,
.tulja-insp-quote {
margin-top: 0;
margin-bottom: 0;
box-sizing: border-box;
}
/* =============================================
INSPIRATION HERO
============================================= */
.tulja-insp-hero {
position: relative;
background: var(--tulja-cream);
padding: 90px 0px 0px;
text-align: center;
overflow: hidden;
}
a.tulja-insp-btn.tulja-insp-btn--secondary:hover {
background-color: #f2eadd;
}
.tulja-insp-hero__inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: anchor-center;
}
.tulja-insp-hero__eyebrow {
font-family: var(--font-sans);
font-size: 11.2px;
font-weight: 300;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #d19936;
margin: 0 0 22px;
}
.tulja-insp-hero__title {
font-family: var(--font-serif);
font-size: clamp(2.6rem, 4.6vw, 4.2rem);
font-weight: 400;
line-height: 1.12;
color: var(--tulja-charcoal);
margin: 0;
}
.tulja-insp-hero__title-main,
.tulja-insp-hero__title-sub {
display: block;
}
.tulja-insp-hero__title-sub {
font-style: italic;
color: var(--tulja-dark-red);
}
.tulja-insp-hero__desc {
font-family: var(--font-sans);
font-size: 0.92rem;
line-height: 1.85;
color: var(--tulja-warm-gray);
max-width: 640px;
margin: 26px auto 56px;
}
.tulja-insp-hero__figure {
max-width: 1080px;
margin: 0 auto;
}
/* Gold gilt frame */
.tulja-insp-hero__frame {
padding: 12px;
background: linear-gradient(135deg, #f2d38c 0%, #d19936 22%, #f6dc9a 48%, #b8862e 74%, #e8cd9d 100%);
box-shadow:
0 0 0 1px #b8862e,
0 34px 70px -28px rgba(139, 26, 26, 0.38),
0 12px 30px -12px rgba(122, 106, 85, 0.25);
}
.tulja-insp-hero__frame-inner {
position: relative;
border: 2px solid rgba(255, 244, 214, 0.75);
box-shadow: inset 0 0 0 1px rgba(150, 105, 35, 0.6);
overflow: hidden;
line-height: 0;
}
.tulja-insp-hero__img,
.tulja-insp-hero__placeholder {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.tulja-insp-hero__placeholder {
background:
radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.7), transparent 60%),
linear-gradient(135deg, #efe2cc 0%, #e6d2b0 50%, #d9bd8e 100%);
}
.tulja-insp-hero__caption {
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
color: var(--tulja-warm-gray);
margin: 30px 0 0;
}
/* Scattered decorative dots (right edge) */
.tulja-insp-hero__dots {
position: absolute;
right: 3.5%;
top: 170px;
width: 50px;
height: 200px;
pointer-events: none;
}
.tulja-insp-hero__dots span {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--tulja-warm-gray-light);
opacity: 0.7;
}
.tulja-insp-hero__dots span:nth-child(1) { left: 0; top: 0; }
.tulja-insp-hero__dots span:nth-child(2) { left: 18px; top: 34px; }
.tulja-insp-hero__dots span:nth-child(3) { left: 34px; top: 66px; }
.tulja-insp-hero__dots span:nth-child(5) { left: 8px; top: 132px; }
.tulja-insp-hero__dots span:nth-child(6) { left: 46px; top: 164px; }
.tulja-insp-hero__dots span:nth-child(7) { left: 28px; top: 196px; }
.tulja-insp-hero__dots span.active {
left: 30px;
top: 98px;
width: 22px;
height: 3px;
border-radius: 2px;
background: var(--tulja-dark-red);
opacity: 1;
}
/* =============================================
ORNAMENT BAND
============================================= */
.tulja-ornament {
--tulja-ornament-h: 32px;
--tulja-ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='32' viewBox='0 0 40 32'%3E%3Cg fill='none' stroke='%23d19936' stroke-width='0.8' opacity='0.5'%3E%3Cpath d='M20 4c3 4 3 8 0 12c-3-4-3-8 0-12z'/%3E%3Cpath d='M20 28c3-4 3-8 0-12c-3 4-3 8 0 12z'/%3E%3Cpath d='M8 16c4-3 8-3 12 0c-4 3-8 3-12 0z'/%3E%3Cpath d='M32 16c-4-3-8-3-12 0c4 3 8 3 12 0z'/%3E%3Ccircle cx='20' cy='16' r='1.6'/%3E%3Cpath d='M0 4q4 6 0 12M40 4q-4 6 0 12M0 28q4-6 0-12M40 28q-4-6 0-12'/%3E%3C/g%3E%3Cg fill='%23d19936' opacity='0.45'%3E%3Ccircle cx='4' cy='16' r='0.9'/%3E%3Ccircle cx='36' cy='16' r='0.9'/%3E%3Ccircle cx='20' cy='1.5' r='0.8'/%3E%3Ccircle cx='20' cy='30.5' r='0.8'/%3E%3C/g%3E%3C/svg%3E");
display: block;
}
.tulja-ornament__pattern {
display: block;
height: var(--tulja-ornament-h);
background-image: var(--tulja-ornament-tile);
background-repeat: repeat-x;
background-position: center;
background-size: calc(var(--tulja-ornament-h) * 1.25) var(--tulja-ornament-h);
}
/* Full-width strip */
.tulja-ornament--band {
background: #f4ecdf;
border-top: 1px solid #ebdfca;
border-bottom: 1px solid #ebdfca;
}
/* Narrow strip between gold rules */
.tulja-ornament--framed {
max-width: 1024px;
margin-left: auto !important;
margin-right: auto !important;
padding: 4px 0;
border-top: 1px solid rgba(201, 146, 58, 0.45);
border-bottom: 1px solid rgba(201, 146, 58, 0.45);
}
.tulja-ornament--framed .tulja-ornament__pattern {
border-top: 1px solid rgba(201, 146, 58, 0.18);
border-bottom: 1px solid rgba(201, 146, 58, 0.18);
background-color: rgba(238, 223, 200, 0.25);
}
/* =============================================
PIECES GRID
============================================= */
.tulja-pieces {
--tulja-pieces-cols: 3;
background: var(--tulja-cream);
padding: 72px 0px 100px;
}
.tulja-pieces__inner {
max-width: 1200px;
margin: 0 auto;
}
.tulja-pieces__head {
display: grid;
grid-template-columns: 1fr minmax(0, 440px);
gap: 24px 60px;
align-items: start;
margin-bottom: 44px;
}
.tulja-pieces__eyebrow {
font-family: var(--font-sans);
font-size: 11.2px;
font-weight: 300;
letter-spacing: 0.4em;
text-transform: uppercase;
color: #d19936;
margin: 0 0 12px;
}
.tulja-pieces__heading {
font-family: var(--font-serif);
font-size: clamp(2rem, 3.2vw, 2.7rem);
font-weight: 400;
line-height: 1.15;
color: var(--tulja-charcoal);
margin: 0;
}
.tulja-pieces__intro {
font-family: var(--font-sans);
font-size: 16px;
letter-spacing: .01em;
line-height: 1.8;
color: #685a55;
margin: 0;
}
.tulja-pieces__grid {
display: grid;
grid-template-columns: repeat(var(--tulja-pieces-cols), minmax(0, 1fr));
gap: 32px;
counter-reset: tulja-piece;
}
/* Piece card */
.tulja-piece {
counter-increment: tulja-piece;
background: var(--tulja-white);
border: 1px solid #efe6d6;
display: flex;
flex-direction: column;
margin: 0 !important;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tulja-piece:hover {
transform: translateY(-4px);
box-shadow: 0 22px 40px -24px rgba(122, 106, 85, 0.45);
}
.tulja-piece__media {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
line-height: 0;
}
.tulja-piece__media-link {
display: block;
height: 100%;
}
.tulja-piece__img,
.tulja-piece__placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.tulja-piece:hover .tulja-piece__img {
transform: scale(1.04);
}
.tulja-piece__placeholder {
background:
radial-gradient(ellipse at 40% 35%, rgba(255, 255, 255, 0.85), transparent 60%),
linear-gradient(145deg, #f6ead5 0%, #ecd6b0 55%, #e2c08a 100%);
}
.tulja-piece__body {
padding: 28px 30px 34px;
flex: 1;
}
.tulja-piece__num {
font-family: var(--font-sans);
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--tulja-gold);
margin: 0 0 14px;
}
.tulja-piece__counter::before {
content: counter(tulja-piece, decimal-leading-zero);
}
.tulja-piece__title {
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 400;
line-height: 1.25;
color: var(--tulja-charcoal);
margin: 0 0 10px;
}
.tulja-piece__title a {
color: inherit;
}
.tulja-piece__title a:hover {
color: var(--tulja-dark-red);
}
.tulja-piece__desc {
font-family: var(--font-sans);
font-size: 0.8rem;
line-height: 1.75;
color: var(--tulja-warm-gray);
margin: 0;
}
/* =============================================
QUOTE & CTA
============================================= */
.tulja-insp-quote {
background: var(--tulja-cream);
padding: 20px 40px 120px;
text-align: center;
}
.tulja-insp-quote__inner {
max-width: 1024px;
margin: 0 auto;
}
.tulja-insp-quote .tulja-ornament--framed {
margin-bottom: 56px !important;
}
.tulja-insp-quote__text {
font-family: var(--font-serif);
font-style: italic;
font-size: 36px;
font-weight: 300;
line-height: 1.45;
color: #231814;
border: 0;
padding: 0;
margin: 0 0 42px;
quotes: none;
}
.tulja-insp-quote__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.tulja-insp-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 11.52px;
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;
line-height: 1.4;
text-decoration: none;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.tulja-insp-btn--primary {
background: #900d2a;
border: 1px solid var(--tulja-dark-red);
color: #fcf6ec !important;
letter-spacing: .3em;
}
.tulja-insp-btn--primary:hover {
background: #62081e;
border-color: #62081e;
color: var(--tulja-white);
}
.mt-12.btn-maroon-primary-home a {
background: #900d2a;
border: 1px solid var(--tulja-dark-red);
color: #fcf6ec !important;
letter-spacing: .3em;
}
.mt-12.btn-maroon-primary-home a:hover {
background: #62081e;
border-color: #62081e;
color: var(--tulja-white);
}
.tulja-insp-btn--secondary {
background: transparent;
border: 1px solid #e2d6c1;
color: var(--tulja-charcoal);
letter-spacing: .3em;
}
.tulja-insp-btn--secondary:hover {
background-color:#fcf6ec;
color: var(--tulja-dark-red);
}
.tulja-insp-btn__arrow {
transition: transform 0.3s ease;
}
.tulja-insp-btn:hover .tulja-insp-btn__arrow {
transform: translateX(3px);
}
/* =============================================
EDITOR HELPERS
============================================= */
.tulja-editor-pick {
display: flex !important;
align-items: center;
justify-content: center;
line-height: 1.4;
}
.editor-styles-wrapper .tulja-pieces__grid > .block-list-appender {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
border: 1px dashed #d8c9ad;
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 1024px) {
.tulja-insp-hero__dots { display: none; }
}
@media (max-width: 900px) {
.tulja-insp-hero { padding: 70px 24px 56px; }
.tulja-pieces { padding: 56px 24px 80px; }
.tulja-pieces__head { grid-template-columns: 1fr; }
.tulja-pieces__grid { grid-template-columns: repeat(min(var(--tulja-pieces-cols), 2), minmax(0, 1fr)); gap: 22px; }
.tulja-insp-quote { padding: 10px 24px 90px; }
}
@media (max-width: 600px) {
.tulja-insp-hero__frame { padding: 7px; }
.tulja-insp-hero__desc { margin-bottom: 40px; }
.tulja-pieces__grid { grid-template-columns: minmax(0, 1fr); }
.tulja-piece__body { padding: 22px 22px 26px; }
.tulja-insp-btn { width: 100%; justify-content: center; }
}
/* =============================================
PAGE BLOCKS — additions to the existing section styles in style.css
(Home, About, Contact, How to Find Us)
============================================= */
/* Home hero buttons row (was an inline style) */
.tulja-hero__actions {
/* margin-top: 2.5rem; */
display: flex;
flex-wrap: wrap;
gap: 1rem;
/* opacity: 0; */
transform: translateY(24px);
transition: opacity 1s, transform 1s cubic-bezier(.2, .7, .2, 1);
}
/* Real images inside the About frames (placeholders keep their gradient) */
.tulja-about-intro__img,
.tulja-milestone__img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.tulja-about-intro__img { aspect-ratio: 4 / 5; }
.tulja-milestone__img { aspect-ratio: 16 / 9; }
/* Collection cards: whole card clickable when a link is set */
.tulja-collection-card--linked {
position: relative;
}
.tulja-collection-card__link {
color: inherit;
}
.tulja-collection-card__link::after {
content: "";
position: absolute;
inset: 0;
}
.tulja-collection-card__img--placeholder {
background: linear-gradient(135deg, var(--tulja-cream-dark) 0%, #e8d8c0 100%);
}
.tulja-product-card__name a {
color: inherit;
}
/* Contact */
.tulja-contact-info__group--last {
border-bottom: none;
}
.tulja-contact-info__value a.tulja-contact-info__tel {
color: inherit;
}
.tulja-contact-form__hp {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.tulja-contact-form__notice {
font-size: 0.82rem;
line-height: 1.6;
padding: 12px 16px;
margin: 0 0 24px;
border-left: 2px solid currentColor;
}
.tulja-contact-form__notice--success {
color: #3d6b35;
background: rgba(61, 107, 53, 0.07);
}
.tulja-contact-form__notice--error {
color: var(--tulja-dark-red);
background: rgba(139, 26, 26, 0.06);
}
/* Editor-only helpers */
.tulja-editor-placeholder {
min-height: 160px;
background: linear-gradient(135deg, var(--tulja-cream-dark) 0%, #e8d8c0 100%);
}
.tulja-hero .tulja-hero__media.tulja-editor-placeholder {
position: absolute;
inset: 0;
z-index: 3;
background: transparent;
align-items: flex-end !important;
justify-content: flex-end !important;
padding: 20px;
}
.editor-styles-wrapper .tulja-stats__grid > .block-list-appender,
.editor-styles-wrapper .tulja-seasonal__grid > .block-list-appender,
.editor-styles-wrapper .tulja-about-why__grid > .block-list-appender {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
border: 1px dashed #d8c9ad;
}
/* Page hero: beat the constrained-layout max-width so each variant keeps
its original measure (these were core Groups / raw HTML before). */
.wp-block-tulja-page-hero {
box-sizing: border-box;
}
.wp-block-tulja-page-hero.tulja-about-hero {
max-width: 900px;
}
.wp-block-tulja-page-hero.tulja-find-hero {
max-width: 860px;
}
.wp-block-tulja-page-hero.tulja-contact-hero {
max-width: none;
}
.wp-block-tulja-page-hero .tulja-contact-hero__title-italic,
.wp-block-tulja-page-hero .tulja-about-hero__title-italic {
margin-top: 0;
}
/* =============================================
SITE HEADER & FULL-SCREEN MENU (tulja/site-header)
============================================= */
.tulja-header {
--tulja-header-h: 92px;
--tulja-header-pad: clamp(24px, 6vw, 120px);
position: fixed;
top: var(--wp-admin--admin-bar--height, 0px);
left: 0;
right: 0;
z-index: 1000;
font-family: var(--font-sans);
}
.tulja-header-spacer {
height: 92px;
}
.tulja-header__bar {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
height: var(--tulja-header-h);
max-width: 1280px;
margin: 0 auto;
padding: 20px 40px;
box-sizing: border-box;
}
/* Bar background lives on a pseudo-element so it can fade in on scroll */
.tulja-header::before {
content: "";
position: absolute;
inset: 0;
height:114px;
background: #fcf6ec;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 var(--tulja-cream-dark);
transition: opacity 0.4s ease;
}
.tulja-header--transparent::before {
opacity: 0;
}
.tulja-header--transparent.is-scrolled::before {
opacity: 1;
}
/* Logo */
.tulja-header__logo {
justify-self: start;
display: inline-flex;
align-items: center;
color: #a3202a;
text-decoration: none;
line-height: 1;
}
.tulja-header__logo-img {
display: block;
width: 110px;
height: 72px;
/* max-height: calc(var(--tulja-header-h) - 24px); */
object-fit: contain;
}
.tulja-header__wordmark {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.tulja-header__wordmark-crown svg {
display: block;
width: 26px;
height: auto;
}
.tulja-header__wordmark-name {
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-right: -0.16em;
}
.tulja-header__wordmark-sub {
font-size: 0.42rem;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--tulja-warm-gray);
margin-right: -0.42em;
}
/* Inline links */
.tulja-header__nav {
display: flex;
gap: clamp(20px, 2.6vw, 40px);
}
.tulja-header__nav a {
font-size: 12.52px;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--tulja-warm-gray);
text-decoration: none;
padding: 6px 0;
transition: color 0.3s ease;
}
.tulja-header__nav a:hover,
.tulja-header__nav a.is-current {
color: var(--tulja-gold);
}
/* MENU pill */
.tulja-header__menu-btn {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 5px 5px 5px 20px;
border: 1px solid rgba(42, 34, 24, 0.22);
border-radius: 999px;
background: transparent;
color: var(--tulja-charcoal);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.tulja-header__menu-btn:hover {
border-color: var(--tulja-gold);
}
.tulja-header__menu-btn:focus-visible,
.tulja-menu__link:focus-visible,
.tulja-header__nav a:focus-visible {
outline: 1px solid var(--tulja-gold);
outline-offset: 4px;
}
.tulja-header__menu-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f3c25e 0%, #e2a134 55%, #c9862a 100%);
color: var(--tulja-dark-red);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
transition: transform 0.4s ease;
}
.tulja-header__menu-icon svg {
width: 15px;
height: auto;
}
.tulja-header__menu-btn:hover .tulja-header__menu-icon {
transform: rotate(-12deg) scale(1.06);
}
/* Transparent (front page, top of hero) */
.tulja-header--transparent:not(.is-scrolled) .tulja-header__nav a {
color: rgba(255, 255, 255, 0.82);
}
.tulja-header--transparent:not(.is-scrolled) .tulja-header__nav a:hover,
.tulja-header--transparent:not(.is-scrolled) .tulja-header__nav a.is-current {
color: var(--tulja-gold-light);
}
.tulja-header--transparent:not(.is-scrolled) .tulja-header__menu-btn {
color: var(--tulja-white);
border-color: rgba(255, 255, 255, 0.35);
}
.tulja-header--transparent:not(.is-scrolled) .tulja-header__wordmark-sub {
color: rgba(255, 255, 255, 0.6);
}
/* ---------- Full-screen menu ---------- */
html.tulja-menu-open {
overflow: hidden;
}
.tulja-menu {
position: fixed;
inset: 0;
z-index: 2;
overflow-y: auto;
overscroll-behavior: contain;
background:
radial-gradient(ellipse at 18% 40%, rgba(122, 32, 30, 0.55) 0%, transparent 60%),
linear-gradient(135deg, #4a1014 0%, #3a0c10 45%, #2a080b 100%);
color: #f3e9d8;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.tulja-header.is-menu-open .tulja-menu {
opacity: 1;
visibility: visible;
transition: opacity 0.5s ease;
}
/* Lattice pattern, fading out towards the links */
.tulja-menu__pattern {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.16;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23e8cd9d' stroke-width='0.9'%3E%3Cpath d='M60 6 L114 60 L60 114 L6 60 Z'/%3E%3Ccircle cx='60' cy='60' r='16'/%3E%3Cpath d='M60 34c8 8 8 18 0 26c-8-8-8-18 0-26zM60 86c8-8 8-18 0-26c-8 8-8 18 0 26zM34 60c8-8 18-8 26 0c-8 8-18 8-26 0zM86 60c-8-8-18-8-26 0c8 8 18 8 26 0z'/%3E%3Cpath d='M0 0h20M0 0v20M120 0h-20M120 0v20M0 120h20M0 120v-20M120 120h-20M120 120v-20'/%3E%3C/g%3E%3C/svg%3E");
background-size: 120px 120px;
-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 62%);
mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.7) 35%, transparent 62%);
}
.tulja-menu__top {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--tulja-header-h);
max-width: 1440px;
margin: 0 auto;
padding: 0 var(--tulja-header-pad);
box-sizing: border-box;
}
.tulja-menu__logo .tulja-header__wordmark-sub {
color: rgba(243, 233, 216, 0.5);
}
.tulja-menu__logo {
color: #e05a4f;
}
.tulja-menu__close {
color: #f3e9d8;
border-color: rgba(243, 233, 216, 0.28);
}
.tulja-menu__close .tulja-header__menu-icon svg {
width: 11px;
}
.tulja-menu__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
max-width: 1440px;
margin: 0 auto;
padding: 20px var(--tulja-header-pad) 80px;
box-sizing: border-box;
}
.tulja-menu__inner > * {
grid-column: 2;
}
/* Quote overlaid on the lattice pattern, left of the numbered links */
.tulja-menu__quote-col {
grid-column: 1;
align-self: center;
max-width: 380px;
padding-right: 40px;
margin-bottom: 40px;
}
.tulja-menu__quote {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.5rem;
line-height: 1.4;
color: rgba(243, 233, 216, 0.8);
margin: 0 0 16px;
}
.tulja-menu__quote-attr {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(232, 192, 128, 0.8);
margin: 0;
}
.tulja-menu__eyebrow {
font-size: 0.58rem;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(232, 192, 128, 0.6);
margin: 0 0 26px;
}
.tulja-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.tulja-menu__item {
border-bottom: 1px solid rgba(243, 233, 216, 0.09);
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tulja-header.is-menu-open .tulja-menu__item {
opacity: 1;
transform: none;
transition-delay: calc(0.15s + var(--i, 0) * 0.07s);
}
.tulja-menu__link {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
padding: 18px 0 16px;
color: #f3e9d8;
text-decoration: none;
}
.tulja-menu__num {
align-self: center;
font-size: 0.55rem;
letter-spacing: 0.2em;
color: rgba(243, 233, 216, 0.3);
}
.tulja-menu__text {
display: flex;
flex-direction: column;
gap: 6px;
}
.tulja-menu__label {
font-family: var(--font-serif);
font-size: clamp(2rem, 3.4vw, 3.1rem);
font-weight: 400;
line-height: 1.05;
transition: color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tulja-menu__tagline {
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(243, 233, 216, 0.42);
transition: color 0.35s ease;
}
.tulja-menu__dash {
width: 14px;
height: 1px;
background: rgba(243, 233, 216, 0.25);
transition: width 0.4s ease, background 0.4s ease;
}
.tulja-menu__link:hover .tulja-menu__label,
.tulja-menu__link:focus-visible .tulja-menu__label {
color: var(--tulja-gold-light);
transform: translateX(8px);
}
.tulja-menu__link:hover .tulja-menu__tagline {
color: rgba(232, 192, 128, 0.7);
}
.tulja-menu__link:hover .tulja-menu__dash {
width: 36px;
background: var(--tulja-gold-light);
}
.tulja-menu__link.is-current .tulja-menu__label {
color: #d9a54a;
}
.tulja-menu__note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 32px;
margin: 40px 0 0;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(243, 233, 216, 0.6);
}
.tulja-menu__note-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--tulja-gold);
flex-shrink: 0;
}
@media (max-width: 900px) {
.tulja-header { --tulja-header-h: 74px; }
.tulja-header-spacer { height: 74px; }
.tulja-header__bar { grid-template-columns: 1fr auto; }
.tulja-header__nav { display: none; }
.tulja-header__wordmark-name { font-size: 1.2rem; }
.tulja-menu__inner { grid-template-columns: minmax(0, 1fr); padding-top: 10px; }
.tulja-menu__inner > * { grid-column: 1; }
.tulja-menu__pattern { -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); opacity: 0.1; }
.tulja-menu__link { grid-template-columns: 36px 1fr auto; padding: 14px 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
.tulja-menu,
.tulja-menu__item,
.tulja-menu__label,
.tulja-header::before {
transition: none !important;
}
}
/* Editor preview (tulja/site-header's ServerSideRender wrapper): keep the
fixed header, side-dots and menu overlay in normal flow so they show up
inside the block instead of escaping to the real viewport edges, and let
the "Preview the menu" toggle force the overlay open without needing the
front-end script to run inside the editor canvas. */
.tulja-header--editor-wrap [data-tulja-header],
.tulja-header--editor-wrap [data-tulja-menu] {
position: relative;
inset: auto;
top: 0;
right: 0;
}
.tulja-header--editor-wrap .fixed.right-6 {
position: relative;
right: 0;
top: 0;
transform: none;
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
padding: 12px;
}
.tulja-header--editor-wrap [data-tulja-menu] {
min-height: 640px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.tulja-header--editor-ssr:not(.is-previewing-menu) [data-tulja-menu] {
display: none;
}
.tulja-header--editor-ssr.is-previewing-menu [data-tulja-menu-item] {
opacity: 1 !important;
transform: none !important;
}
/* Full-bleed home hero under the transparent header */
.tulja-hero.alignfull {
width: auto;
min-height: 100vh;
min-height: 100svh;
}
.tulja-hero.alignfull .tulja-hero__content {
/* Line the headline up with the logo in the header bar */
/* padding-top: 92px; */
/* padding-left: clamp(24px, 6vw, 120px); */
margin-left: max(0px, calc((100vw - 1440px) / 2));
}
/* =============================================
SITE FOOTER (tulja/site-footer) — builds on .tulja-footer in style.css
============================================= */
.wp-block-tulja-site-footer.tulja-footer {
position: relative;
padding: 70px clamp(24px, 5vw, 60px) 40px;
margin: 0;
}
.tulja-footer__ornament.tulja-ornament {
margin: -70px calc(-1 * clamp(24px, 5vw, 60px)) 60px;
background: rgba(0, 0, 0, 0.12);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tulja-footer__ornament .tulja-ornament__pattern {
opacity: 0.55;
}
.wp-block-tulja-site-footer .tulja-footer__top {
grid-template-columns: 1.4fr repeat(var(--tulja-footer-cols, 2), minmax(0, 1fr));
}
.tulja-footer__logo-link {
margin-bottom: 18px;
color: var(--tulja-white);
}
.tulja-footer__logo-link .tulja-header__wordmark {
align-items: flex-start;
}
.tulja-footer__logo-link .tulja-header__wordmark-sub {
color: rgba(255, 255, 255, 0.5);
}
.tulja-footer--logo-white .tulja-footer__logo-link img {
filter: brightness(0) invert(1);
}
.tulja-footer__visit-name,
.tulja-footer__visit-lines {
font-size: 0.82rem;
line-height: 1.85;
margin: 0;
color: rgba(255, 255, 255, 0.55);
}
.tulja-footer__visit-name,
.tulja-footer__visit-name a {
color: var(--tulja-gold);
}
.tulja-footer__copyright,
.tulja-footer__credit {
margin: 0;
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.35);
}
.tulja-footer__credit-link {
color: inherit;
}
.tulja-footer__credit-link:hover {
color: var(--tulja-gold-light);
}
@media (max-width: 900px) {
.wp-block-tulja-site-footer .tulja-footer__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
.wp-block-tulja-site-footer .tulja-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.wp-block-tulja-site-footer .tulja-footer__top {
grid-template-columns: minmax(0, 1fr);
}
.wp-block-tulja-site-footer .tulja-footer__bottom {
flex-direction: column;
gap: 10px;
text-align: center;
}
}
/* Footer base styles, scoped to the block so it is self-contained
(mirrors .tulja-footer rules in style.css; needed in the Widgets editor). */
.wp-block-tulja-site-footer.tulja-footer {
background-color: #62081e;
color: rgba(255, 255, 255, 0.65);
font-family: var(--font-sans);
}
.wp-block-tulja-site-footer .tulja-footer__inner {
max-width: 1100px;
margin: 0 auto;
}
.wp-block-tulja-site-footer .tulja-footer__top {
display: grid;
gap: 60px;
margin-bottom: 50px;
}
.wp-block-tulja-site-footer .tulja-footer__tagline {
font-size: 0.82rem;
font-weight: 300;
line-height: 1.7;
color: rgba(255, 255, 255, 0.5);
margin: 0;
}
.wp-block-tulja-site-footer .tulja-footer__col-title {
display: block;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--tulja-gold-light);
margin-bottom: 20px;
}
.wp-block-tulja-site-footer .tulja-footer__links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.wp-block-tulja-site-footer .tulja-footer__links a {
font-size: 0.82rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition: color 0.2s;
}
.wp-block-tulja-site-footer .tulja-footer__links a:hover {
color: var(--tulja-gold-light);
}
.wp-block-tulja-site-footer .tulja-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
/* Widget-area placeholder in the Site Editor */
.tulja-widget-area-placeholder {
padding: 18px 24px;
border: 1px dashed #d19936;
background: #fbf6ee;
font-family: var(--font-sans);
font-size: 13px;
color: #231814;
}
/* Header links never wrap; compact bar in narrow editors (e.g. Widgets). */
.tulja-header__nav a {
white-space: nowrap;
}
/* =============================================
ABOUT PAGE — design refresh (scoped to the Tulja blocks)
Hero · Intro split · Milestones timeline · Why 22ct
============================================= */
:root {
--tulja-paper: #fdf8f0; /* light cream page sections */
--tulja-paper-deep: #f0eae0; /* timeline band */
--tulja-gold-frame: linear-gradient(135deg, #f0cf86 0%, #d19936 24%, #f3d995 50%, #b8862e 76%, #e2b867 100%);
}
/* Shared gilt frame for About images */
.wp-block-tulja-intro-split .tulja-about-intro__img-frame,
.wp-block-tulja-milestones .tulja-milestone__img-frame {
position: relative;
display: block;
padding: 14px;
border: 0;
background: var(--tulja-gold-frame);
box-shadow:
0 0 0 1px #b8862e,
0 30px 60px -30px rgba(139, 26, 26, 0.35),
0 14px 30px -18px rgba(122, 106, 85, 0.3);
}
.wp-block-tulja-intro-split .tulja-about-intro__img-frame::before,
.wp-block-tulja-milestones .tulja-milestone__img-frame::before {
content: "";
position: absolute;
inset: 5px;
border: 1px solid rgba(255, 244, 214, 0.7);
box-shadow: inset 0 0 0 1px rgba(150, 105, 35, 0.35);
pointer-events: none;
}
.wp-block-tulja-intro-split .tulja-about-intro__img-frame > img,
.wp-block-tulja-intro-split .tulja-about-intro__img-frame > div,
.wp-block-tulja-milestones .tulja-milestone__img-frame > img,
.wp-block-tulja-milestones .tulja-milestone__img-frame > div {
position: relative;
display: block;
width: 100%;
box-shadow: 0 0 0 2px rgba(120, 80, 20, 0.55);
}
/* ---------- Hero (About variant) ---------- */
.wp-block-tulja-page-hero.tulja-about-hero {
max-width: none;
margin: 0;
/* padding: 86px 100px 86px; */
/* background: var(--tulja-paper); */
}
.wp-block-tulja-page-hero.tulja-about-hero .tulja-about-hero__inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 0 0 clamp(0px, 4vw, 0px);
}
.wp-block-tulja-page-hero .tulja-about-hero__eyebrow {
font-size: 0.6rem;
letter-spacing: 0.42em;
margin-bottom: 26px;
}
.wp-block-tulja-page-hero .tulja-about-hero__title {
font-size: 72px;
line-height: 1.08 !important;
margin: 0 !important;
}
.wp-block-tulja-page-hero .tulja-about-hero__title-italic {
font-size: 72px !important;
line-height: 1.12 !important;
color: var(--tulja-dark-red) !important;
margin: 0 !important;
}
.wp-block-tulja-page-hero .tulja-about-hero__desc {
max-width: 620px;
margin: 28px 0 0;
font-size: 0.92rem;
line-height: 1.85;
color: var(--tulja-warm-gray);
}
/* Scattered dots + dash on the right, as in the design */
.wp-block-tulja-page-hero .tulja-about-hero__dots {
display: block;
right: 3%;
top: auto;
bottom: 40px;
transform: none;
width: 90px;
height: 200px;
pointer-events: none;
}
.wp-block-tulja-page-hero .tulja-about-hero__dots span {
position: absolute;
width: 5px;
height: 5px;
background: #d8a6a0;
opacity: 0.9;
}
.wp-block-tulja-page-hero .tulja-about-hero__dots span:nth-child(1) { left: 0; top: 0; }
.wp-block-tulja-page-hero .tulja-about-hero__dots span:nth-child(2) { left: 55px; top: 66px; }
.wp-block-tulja-page-hero .tulja-about-hero__dots span:nth-child(3) { left: 48px; top: 98px; }
.wp-block-tulja-page-hero .tulja-about-hero__dots span:nth-child(4) { left: 14px; top: 128px; }
.wp-block-tulja-page-hero .tulja-about-hero__dots span.active {
left: 25px;
top: 34px;
width: 24px;
height: 4px;
border-radius: 2px;
background: var(--tulja-dark-red);
}
/* ---------- Intro split ---------- */
.wp-block-tulja-intro-split.tulja-about-intro {
max-width: none;
background: var(--tulja-paper);
padding: 32px 40px 90px;
border-bottom: 1px solid #efe5d5;
}
.wp-block-tulja-intro-split .tulja-about-intro__inner {
grid-template-columns: minmax(0, 456px) minmax(0, 1fr);
gap: 64px;
max-width: 1080px;
align-items: start;
}
.wp-block-tulja-intro-split .tulja-about-intro__img,
.wp-block-tulja-intro-split .tulja-about-intro__img-placeholder {
aspect-ratio: 3 / 4;
object-fit: cover;
}
.wp-block-tulja-intro-split .tulja-about-intro__eyebrow {
color: var(--tulja-gold);
letter-spacing: 0.32em;
}
.wp-block-tulja-intro-split .tulja-about-intro__body {
font-size: 0.98rem;
line-height: 1.9;
color: #8a7a66;
margin: 0 0 26px;
}
/* Bold (Ctrl+B) = deep red highlight, e.g. "1995" */
.wp-block-tulja-intro-split .tulja-about-intro__body strong,
.wp-block-tulja-intro-split .tulja-about-intro__body b {
color: var(--tulja-dark-red);
font-weight: 600;
}
/* Italic (Ctrl+I) = dark emphasis, e.g. "22ct Indian gold" */
.wp-block-tulja-intro-split .tulja-about-intro__body em {
font-style: normal;
/* font-weight: 400; */
color: var(--tulja-charcoal);
}
.tulja-about-intro__divider {
display: flex;
align-items: center;
gap: 14px;
max-width: 320px;
margin: 34px 0 38px;
color: #ecc9a3;
}
.tulja-about-intro__divider > span:not(.tulja-about-intro__divider-flower) {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201, 146, 58, 0.5), transparent);
}
.tulja-about-intro__divider .tulja-flower {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
.wp-block-tulja-intro-split .tulja-about-intro__pull {
font-size: 24px;
line-height: 1.5;
color: #3a2e22;
border-left: 2px solid var(--tulja-gold);
padding-left: 24px;
margin: 0;
max-width: 520px;
}
/* ---------- Milestones timeline ---------- */
.wp-block-tulja-milestones.tulja-milestones {
max-width: none;
background: var(--tulja-paper-deep);
padding: 110px 40px 120px;
}
.wp-block-tulja-milestones .tulja-milestones__header {
text-align: center;
margin: 0 auto 70px;
}
.wp-block-tulja-milestones .tulja-milestones__eyebrow {
font-size: 11.2;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--tulja-gold);
margin: 0 0 14px;
}
.wp-block-tulja-milestones .tulja-milestones__title {
font-size: 48px;
font-weight: 400;
margin: 0;
}
.wp-block-tulja-milestones .tulja-milestones__timeline {
position: relative;
max-width: 944px;
margin: 0 auto;
gap: 80px;
}
/* Centre line */
.wp-block-tulja-milestones .tulja-milestones__timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: rgba(201, 146, 58, 0.4);
transform: translateX(-0.5px);
}
.wp-block-tulja-milestones .tulja-milestone {
position: relative;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: 64px;
align-items: center;
margin: 0;
}
/* Diamond marker on the line, level with the top of each image */
.wp-block-tulja-milestones .tulja-milestone::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
width: 11px;
height: 11px;
background: var(--tulja-gold);
transform: translate(-50%, 0) rotate(45deg);
z-index: 1;
}
.wp-block-tulja-milestones .tulja-milestone__dot-line {
display: none;
}
/* .wp-block-tulja-milestones .tulja-milestone__content-col,
.wp-block-tulja-milestones .tulja-milestone__image-col {
padding: 0;
} */
.wp-block-tulja-milestones .tulja-milestone__img,
.wp-block-tulja-milestones .tulja-milestone__img-placeholder {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.wp-block-tulja-milestones .tulja-milestone__text {
max-width: 430px;
text-align: left;
}
.wp-block-tulja-milestones .tulja-milestone__text--right {
margin-left: auto;
text-align: right;
}
.wp-block-tulja-milestones .tulja-milestone__year {
display: block;
font-family: var(--font-serif);
font-size: 48px;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0.01em;
font-variant-numeric: oldstyle-nums;
color: var(--tulja-gold);
margin: 0 0 6px;
}
.wp-block-tulja-milestones .tulja-milestone__name {
font-family: var(--font-serif);
font-size: 24px !important;
font-weight: 400;
color: var(--tulja-charcoal);
margin: 0 0 14px;
}
.wp-block-tulja-milestones .tulja-milestone__desc {
font-size:16px;
line-height: 1.75;
color: #8a7a66;
margin: 0;
}
/* ---------- Why 22ct ---------- */
.wp-block-tulja-why-us.tulja-about-why {
max-width: none;
background: var(--tulja-paper);
padding: 110px 40px 70px;
text-align: center;
}
.wp-block-tulja-why-us .tulja-about-why__header {
margin-bottom: 44px;
}
.tulja-about-why__eyebrow {
font-size: 11.2px;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--tulja-gold);
margin: 0 0 14px;
}
.wp-block-tulja-why-us .tulja-about-why__title {
font-size: clamp(2.2rem, 3.4vw, 3rem);
}
.wp-block-tulja-why-us .tulja-about-why__grid {
max-width: 944px;
margin: 0 auto;
gap: 32px;
text-align: center;
}
.wp-block-tulja-why-us .tulja-about-why__card {
position: relative;
overflow: hidden;
padding: 40px 38px 38px;
border: 1px solid #efe6d6;
background-color: var(--tulja-white);
/* faint lattice */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23d19936' stroke-width='0.6' opacity='0.12'%3E%3Cpath d='M45 4 L86 45 L45 86 L4 45 Z'/%3E%3Ccircle cx='45' cy='45' r='14'/%3E%3Cpath d='M45 20 L70 45 L45 70 L20 45 Z'/%3E%3C/g%3E%3C/svg%3E");
background-size: 90px 90px;
background-position: center;
}
.wp-block-tulja-why-us .tulja-about-why__icon {
display: block;
font-size: 1.3rem;
line-height: 1;
color: #ecc9a3;
margin: 0 0 20px;
}
.wp-block-tulja-why-us .tulja-about-why__card-title {
font-size: 24px !important;
margin: 0 0 14px;
}
.tulja-about-why__card-desc {
font-size: 0.86rem;
line-height: 1.75;
color: #685a55;
margin: 0;
}
.wp-block-tulja-why-us .tulja-about-why__list {
margin-top: 14px;
align-items: center;
}
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.wp-block-tulja-page-hero.tulja-about-hero { padding: 64px 24px 70px; }
.wp-block-tulja-page-hero .tulja-about-hero__dots { display: none; }
.wp-block-tulja-intro-split .tulja-about-intro__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.wp-block-tulja-intro-split .tulja-about-intro__img-wrap { max-width: 460px; }
.wp-block-tulja-milestones.tulja-milestones { padding: 80px 24px 90px; }
.wp-block-tulja-milestones .tulja-milestones__timeline::before { left: 8px; }
.wp-block-tulja-milestones .tulja-milestone { grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-left: 36px; }
.wp-block-tulja-milestones .tulja-milestone::before { left: 8px; }
.wp-block-tulja-milestones .tulja-milestone__image-col { order: 0; }
.wp-block-tulja-milestones .tulja-milestone__content-col { order: 1; }
.wp-block-tulja-milestones .tulja-milestone__text,
.wp-block-tulja-milestones .tulja-milestone__text--right { margin-left: 0; text-align: left; }
.wp-block-tulja-why-us .tulja-about-why__grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
}
/* About sections run edge to edge and sit flush against each other
(cancel the page's global padding and the default block gap). */
.has-global-padding > .wp-block-tulja-page-hero.tulja-about-hero,
.has-global-padding > .wp-block-tulja-page-hero.tulja-contact-hero,
.has-global-padding > .wp-block-tulja-contact,
.has-global-padding > .wp-block-tulja-intro-split,
.has-global-padding > .wp-block-tulja-milestones,
.has-global-padding > .wp-block-tulja-why-us {
max-width: none !important;
margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}
.wp-block-tulja-page-hero,
.wp-block-tulja-contact,
.wp-block-tulja-intro-split,
.wp-block-tulja-milestones,
.wp-block-tulja-why-us,
.wp-block-tulja-ornament-band,
.wp-block-tulja-quote-cta {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
.wp-block-tulja-intro-split .tulja-about-intro__body {
font-size: 18px;
line-height: 1.85;
}
.date-about-2nd-content{
font-size: 18px;
color:#900d2a;
font-weight: 500;
}
.secondnd-content-3rd-para-date{
color:black;
}
.wp-block-tulja-milestones .tulja-milestone__desc,
.tulja-about-why__card-desc {
font-size: 16px;
}
/* =============================================
CONTACT PAGE — design refresh (scoped to the Tulja blocks)
============================================= */
/* ---------- Hero (Contact variant) ---------- */
.wp-block-tulja-page-hero.tulja-contact-hero {
position: relative;
max-width: none;
background: var(--tulja-paper);
padding: 160px 40px 96px;
box-sizing: border-box;
}
.wp-block-tulja-page-hero .tulja-contact-hero__eyebrow {
font-size: 11.2px;
letter-spacing: 0.42em;
font-weight: 300;
margin: 0 0 16px;
color: #d19936;
}
.wp-block-tulja-page-hero .tulja-contact-hero__title,
.wp-block-tulja-page-hero .tulja-contact-hero__title-italic {
font-size: clamp(2.8rem, 5vw, 4.4rem) !important;
line-height: 1.1;
margin: 0;
}
.wp-block-tulja-page-hero .tulja-contact-hero__title-italic {
color: var(--tulja-dark-red) !important;
margin-bottom: 34px;
}
.wp-block-tulja-page-hero .tulja-contact-hero__body {
max-width: 580px;
margin: 0 auto 18px;
font-size: 1.12rem;
line-height: 1.65;
color: #685a55;
}
.wp-block-tulja-page-hero .tulja-contact-hero__note {
max-width: 540px;
font-size: 0.88rem;
line-height: 1.6;
color: #8a7a66;
}
/* Dots falling diagonally to a red dash, as in the design */
.wp-block-tulja-page-hero .tulja-contact-hero__dots {
display: block;
right: 3%;
top: 50%;
transform: translateY(-40%);
width: 70px;
height: 200px;
pointer-events: none;
}
.wp-block-tulja-page-hero .tulja-contact-hero__dots span {
position: absolute;
width: 5px;
height: 5px;
background: #d8a6a0;
opacity: 0.9;
}
.wp-block-tulja-page-hero .tulja-contact-hero__dots span:nth-child(1) { left: 0; top: 0; }
.wp-block-tulja-page-hero .tulja-contact-hero__dots span:nth-child(2) { left: 27px; top: 30px; }
.wp-block-tulja-page-hero .tulja-contact-hero__dots span:nth-child(3) { left: 53px; top: 61px; }
.wp-block-tulja-page-hero .tulja-contact-hero__dots span:nth-child(4) { left: 14px; top: 121px; }
.wp-block-tulja-page-hero .tulja-contact-hero__dots span.active {
left: 44px;
top: 182px;
width: 24px;
height: 4px;
border-radius: 2px;
background: var(--tulja-dark-red);
}
/* ---------- Details + form ---------- */
.wp-block-tulja-contact.tulja-contact-body {
max-width: none;
background: var(--tulja-paper);
padding: 32px 40px 180px;
}
.wp-block-tulja-contact .tulja-contact-body__inner {
grid-template-columns: minmax(0, 412px) minmax(0, 575px);
justify-content: center;
gap: 62px;
max-width: 1050px;
}
.wp-block-tulja-contact .tulja-contact-info__group {
border: 0;
padding: 0;
margin: 0 0 40px;
}
.wp-block-tulja-contact .tulja-contact-info__label {
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.34em;
color: var(--tulja-gold);
margin: 0 0 14px;
}
.wp-block-tulja-contact .tulja-contact-info__group--phone .tulja-contact-info__value,
.wp-block-tulja-contact .tulja-contact-info__group--email .tulja-contact-info__value {
font-family: var(--font-serif);
font-size: 1.65rem;
font-weight: 400;
line-height: 1.25;
color: var(--tulja-charcoal);
margin: 0;
}
.wp-block-tulja-contact .tulja-contact-info__group--phone a,
.wp-block-tulja-contact .tulja-contact-info__group--email a {
color: inherit;
}
.wp-block-tulja-contact .tulja-contact-info__group--email a:hover,
.wp-block-tulja-contact .tulja-contact-info__group--phone a:hover {
color: var(--tulja-dark-red);
}
.wp-block-tulja-contact .tulja-contact-info__group--address .tulja-contact-info__value {
font-size: 1.02rem;
line-height: 1.6;
color: #685a55;
margin: 0;
}
.wp-block-tulja-contact .tulja-contact-info__group--address a {
color: inherit;
}
.wp-block-tulja-contact .tulja-hours-table tr {
border-bottom: 1px solid #ebe1cf;
}
.wp-block-tulja-contact .tulja-hours-table tr:last-child {
border-bottom: 0;
}
.wp-block-tulja-contact .tulja-hours-table td {
padding: 11px 0;
font-family: var(--font-serif);
font-size: 1.06rem;
color: var(--tulja-charcoal);
}
.wp-block-tulja-contact .tulja-hours-table td:last-child {
text-align: right;
font-size: 0.98rem;
color: #685a55;
font-variant-numeric: oldstyle-nums;
}
/* Form card */
/* .wp-block-tulja-contact .tulja-contact-form-wrap {
background: var(--tulja-white);
border: 1px solid #ece3d3;
box-shadow: 0 26px 60px -38px rgba(122, 106, 85, 0.4);
padding: 54px 46px 46px;
} */
.wp-block-tulja-contact .tulja-contact-form__title {
display: block;
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--tulja-gold);
margin: 0 0 30px;
}
.wp-block-tulja-contact .tulja-contact-form__row {
gap: 24px;
}
.wp-block-tulja-contact .tulja-contact-form__field {
border-bottom: 1px solid #e2d6c1;
padding-bottom: 8px;
margin-bottom: 30px;
}
.wp-block-tulja-contact .tulja-contact-form__field label {
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.3em;
color: #6f6252;
margin-bottom: 18px;
}
.wp-block-tulja-contact .tulja-contact-form__field input,
.wp-block-tulja-contact .tulja-contact-form__field select {
min-height: 34px;
font-family: var(--font-serif);
font-size: 1.1rem;
color: var(--tulja-charcoal);
}
.wp-block-tulja-contact .tulja-contact-form__field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23231814' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
padding-left: 4px;
}
.wp-block-tulja-contact .tulja-contact-form__field textarea {
min-height: 130px;
font-family: var(--font-sans);
font-size: 0.95rem;
}
.wp-block-tulja-contact .tulja-contact-form__submit {
margin-top: 46px;
}
.wp-block-tulja-contact .tulja-contact-form__submit .tulja-btn {
padding: 16px 32px;
border-radius: 999px;
font-size: 0.72rem;
letter-spacing: 0.3em;
background: #900d2a;
}
.wp-block-tulja-contact .tulja-contact-form__submit .tulja-btn:hover {
background: var(--tulja-dark-red);
}
@media (max-width: 900px) {
.wp-block-tulja-page-hero.tulja-contact-hero { padding: 72px 24px 64px; }
.wp-block-tulja-page-hero .tulja-contact-hero__dots { display: none; }
.wp-block-tulja-contact.tulja-contact-body { padding: 24px 24px 100px; }
.wp-block-tulja-contact .tulja-contact-body__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 560px) {
/* .wp-block-tulja-contact .tulja-contact-form-wrap { padding: 36px 24px 30px; } */
.wp-block-tulja-contact .tulja-contact-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* =============================================
FOOTER — design refresh (deep maroon, centred bottom line)
============================================= */
.wp-block-tulja-site-footer.tulja-footer.tulja-footer {
background-color: #62081e !important;
}
.wp-block-tulja-site-footer .tulja-footer__ornament.tulja-ornament {
background: rgba(0, 0, 0, 0.14);
border-bottom: 1px solid rgba(201, 146, 58, 0.25);
}
.wp-block-tulja-site-footer .tulja-footer__ornament .tulja-ornament__pattern {
opacity: 0.32;
}
.wp-block-tulja-site-footer .tulja-footer__visit-name,
.wp-block-tulja-site-footer .tulja-footer__visit-name a {
color: rgba(255, 255, 255, 0.72);
}
.wp-block-tulja-site-footer .tulja-footer__visit-lines,
.wp-block-tulja-site-footer .tulja-footer__links a {
color: rgba(255, 255, 255, 0.72);
}
.wp-block-tulja-site-footer .tulja-footer__col-title {
color: #d19936;
letter-spacing: 0.3em;
}
.tulja-footer__bottom--center {
flex-direction: column;
justify-content: center;
text-align: center;
gap: 12px;
}
.tulja-footer__bottom--center .tulja-footer__copyright {
display: inline-flex;
align-items: center;
gap: 18px;
font-size: 0.62rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
}
.tulja-footer__bottom--center .tulja-footer__copyright::before,
.tulja-footer__bottom--center .tulja-footer__copyright::after {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.tulja-footer__bottom--center .tulja-footer__credit {
font-size: 0.68rem;
color: rgba(255, 255, 255, 0.38);
}
.wp-block-tulja-contact .tulja-hours-table td {
padding: 8px 0;
line-height: 1.4;
}
/* Footer: three equal columns on a wider measure, as in the designs */
.wp-block-tulja-site-footer .tulja-footer__inner {
max-width: 1216px;
}
.wp-block-tulja-site-footer .tulja-footer__top {
grid-template-columns: repeat(calc(var(--tulja-footer-cols, 2) + 1), minmax(0, 1fr));
}
.wp-block-tulja-site-footer .tulja-footer__tagline {
max-width: 300px;
}
@media (max-width: 900px) {
.wp-block-tulja-site-footer .tulja-footer__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.wp-block-tulja-site-footer .tulja-footer__top {
grid-template-columns: minmax(0, 1fr);
}
}
/* No gap between the page content and the footer */
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > .wp-block-template-part:has(> .wp-block-tulja-site-footer) {
margin-block-start: 0;
margin-top: 96px;
}
/* =============================================
COLLECTIONS PAGE — Collections Grid (tulja/collections-grid)
============================================= */
.tulja-coll-grid2 {
--tulja-coll-cols: 2;
background: var(--tulja-paper);
padding: 50px 40px 90px;
margin-block: 0 !important;
}
.tulja-coll-grid2__grid {
display: grid;
grid-template-columns: repeat(var(--tulja-coll-cols), minmax(0, 1fr));
gap: 33px;
max-width: 1068px;
margin: 0 auto;
}
.tulja-coll-card2 {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--tulja-white);
border: 1px solid #efe6d6;
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Thin gold gradient line that grows in from the left on hover */
.tulja-coll-card2::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 0;
height: 2px;
background: linear-gradient(135deg, #e4ad3c, #d4822b);
transition: width 0.7s ease;
}
.tulja-coll-card2:hover {
transform: translateY(-4px);
border-color: rgba(209, 153, 54, 0.6);
/* box-shadow: 0 30px 80px -30px var(--tulja-dark-red); */
}
ul.space-y-2.footer-links li a:hover {
color: #d19936 !important;
}
.tulja-coll-card2:hover::before {
width: 100%;
}
.tulja-coll-card2__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
line-height: 0;
}
section.mx-auto.max-w-5xl.px-6.md\:px-10.py-28.text-center.wp-block-tulja-quote-strip p {
font-family: 'Cormorant Garamond';
font-weight: 300;
line-height: 1.7;
color: #231814;
max-width: 700px;
margin: 0 auto;
}
.tulja-coll-card2__img,
.tulja-coll-card2__placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.tulja-coll-card2:hover .tulja-coll-card2__img {
transform: scale(1.04);
}
.tulja-coll-card2__placeholder {
background: linear-gradient(145deg, #f6ead5 0%, #ecd6b0 55%, #e2c08a 100%);
}
.tulja-coll-card2__body {
flex: 1;
padding: 40px 40px 42px;
}
.tulja-coll-card2__num {
font-size: 10.88px;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--tulja-gold);
margin: 0 0 16px;
}
.tulja-coll-card2__title {
font-family: #2a2218;
font-size: 32px !important;
font-weight: 500;
line-height: 1.15;
margin: 0 0 14px;
}
.tulja-coll-card2__title a {
color: var(--tulja-charcoal);
}
.tulja-coll-card2__title a:hover {
color: var(--tulja-dark-red);
}
.tulja-coll-card2__tagline {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
color: #900d2a;
margin: 0 0 20px;
}
.tulja-coll-card2__desc {
font-size: 16px;
line-height: 1.75;
color: #685a55;
margin: 0 0 24px;
}
.tulja-coll-card2__link {
display: inline-flex;
gap: 8px;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--tulja-gold) !important;
}
.tulja-coll-card2__link:hover {
color: var(--tulja-dark-red);
}
.tulja-coll-grid2__empty {
text-align: center;
color: var(--tulja-warm-gray);
}
/* Collections hero: smaller intro text, as in the design */
.tulja-hero--compact-text .tulja-contact-hero__body {
max-width: 640px;
font-size: 18px;
line-height: 1.75;
color: #685a55;
}
.tulja-collections-page .wp-block-tulja-quote-cta {
padding-top: 30px;
}
@media (max-width: 760px) {
.tulja-coll-grid2 { padding: 32px 20px 70px; }
.tulja-coll-grid2__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.tulja-coll-card2__body { padding: 30px 26px 32px; }
}
/* Closing quote sits on the same light cream as the sections above it */
.tulja-insp-quote {
background: var(--tulja-paper);
}
/* =============================================
HOME — full-bleed section bands
============================================= */
/* Home bands run edge to edge; their content stays constrained internally
(each section's own markup carries "mx-auto max-w-7xl …"). */
.has-global-padding > .wp-block-tulja-stats,
.has-global-padding > .wp-block-tulja-featured-collections,
.has-global-padding > .wp-block-tulja-feature,
.has-global-padding > .wp-block-tulja-product-grid {
max-width: none !important;
margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}
/* =============================================
ORNAMENT BAND — geometric half-medallion lattice (as in the designs)
============================================= */
.tulja-ornament {
--tulja-ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='21' viewBox='0 0 38 21'%3E%3Cg fill='none' stroke='%23d6ad6e' stroke-width='0.7' stroke-linejoin='round' opacity='0.38'%3E%3Cpath d='M2.0 20.5 L4.3 12.0 L10.5 5.8 L19.0 3.5 L27.5 5.8 L33.7 12.0 L36.0 20.5 M9.5 20.5 L10.8 15.8 L14.3 12.3 L19.0 11.0 L23.8 12.3 L27.2 15.8 L28.5 20.5 M19.0 20.5 L2.0 20.5 M19.0 20.5 L4.3 12.0 M19.0 20.5 L10.5 5.8 M19.0 20.5 L19.0 3.5 M19.0 20.5 L27.5 5.8 M19.0 20.5 L33.7 12.0 M19.0 20.5 L36.0 20.5 M2.0 20.5 L10.5 5.8 M4.3 12.0 L19.0 3.5 M10.5 5.8 L27.5 5.8 M19.0 3.5 L33.7 12.0 M27.5 5.8 L36.0 20.5 M0.5 20.5 L37.5 20.5'/%3E%3C/g%3E%3Ccircle cx='19' cy='19.9' r='1.1' fill='%23e2bf86' opacity='0.6'/%3E%3C/svg%3E");
}
.tulja-ornament__pattern {
background-size: calc(var(--tulja-ornament-h) * 1.81) var(--tulja-ornament-h);
background-position: left bottom;
}
.tulja-ornament--band {
--tulja-ornament-h: 28px;
background: #fbf6ee;
border-top: 1.5px solid #ebc995;
border-bottom: 1.5px solid #ebc995;
}
.tulja-ornament--framed {
border-top: 1px solid #e3c08a;
border-bottom: 1px solid #e3c08a;
}
.tulja-ornament--framed .tulja-ornament__pattern {
border: 0;
background-color: transparent;
}
/* Intro split: text below the pull quote */
.tulja-about-intro__after {
margin-top: 34px;
}
.wp-block-tulja-intro-split .tulja-about-intro__after .tulja-about-intro__body:last-child {
margin-bottom: 0;
}
/* Framed band = octagon medallions between gold rules, fading at the ends,
with a soft gold dot at the centre (as in the designs). */
.tulja-ornament--framed {
--tulja-ornament-h: 40px;
--tulja-ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d6ad6e' stroke-width='0.65' stroke-linejoin='round' opacity='0.42'%3E%3Cpath d='M40.0 29.5 L29.5 40.0 L14.5 40.0 L4.0 29.5 L4.0 14.5 L14.5 4.0 L29.5 4.0 L40.0 14.5 Z M31.7 26.0 L26.0 31.7 L18.0 31.7 L12.3 26.0 L12.3 18.0 L18.0 12.3 L26.0 12.3 L31.7 18.0 Z M40.0 29.5 L4.0 29.5 M29.5 40.0 L4.0 14.5 M14.5 40.0 L14.5 4.0 M4.0 29.5 L29.5 4.0 M4.0 14.5 L40.0 14.5 M14.5 4.0 L40.0 29.5 M29.5 4.0 L29.5 40.0 M40.0 14.5 L14.5 40.0 M22.0 22.0 L40.0 29.5 M22.0 22.0 L29.5 40.0 M22.0 22.0 L14.5 40.0 M22.0 22.0 L4.0 29.5 M22.0 22.0 L4.0 14.5 M22.0 22.0 L14.5 4.0 M22.0 22.0 L29.5 4.0 M22.0 22.0 L40.0 14.5'/%3E%3Ccircle cx='22' cy='22' r='3'/%3E%3C/g%3E%3C/svg%3E");
position: relative;
padding: 0;
border-top: 1px solid #ddc8a4;
border-bottom: 1px solid #ecc58a;
}
.tulja-ornament--framed .tulja-ornament__pattern {
position: relative;
background-size: var(--tulja-ornament-h) var(--tulja-ornament-h);
background-position: center;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.tulja-ornament--framed .tulja-ornament__pattern::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(232, 192, 128, 0.55);
transform: translate(-50%, -50%);
}
/* =============================================
SINGLE COLLECTION — ornament bands + framed "Featured pieces"
============================================= */
.tulja-sc-ornament.tulja-ornament--framed {
max-width: 1040px;
margin: 46px auto !important;
}
.tulja-sc-pieces--framed {
background: var(--tulja-paper);
padding: 40px 40px 90px;
}
.tulja-sc-pieces--framed .tulja-sc-pieces__inner {
max-width: 1072px;
margin: 0 auto;
}
.tulja-sc-pieces--framed .tulja-sc-pieces__eyebrow {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--tulja-gold);
margin: 0 0 30px;
}
.tulja-sc-pieces--framed .tulja-sc-pieces__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.tulja-sc-pieces--framed .tulja-sc-piece-card {
background: transparent;
overflow: visible;
box-shadow: none;
transform: none;
}
.tulja-sc-piece-card__frame {
position: relative;
display: block;
padding: 16px;
background: var(--tulja-gold-frame);
box-shadow:
0 0 0 1px #b8862e,
0 30px 54px -30px rgba(139, 26, 26, 0.38),
0 12px 26px -16px rgba(122, 106, 85, 0.3);
transition: transform 0.4s ease;
}
.tulja-sc-piece-card__frame::before,
.tulja-sc-piece-card__frame::after {
content: "";
position: absolute;
pointer-events: none;
}
.tulja-sc-piece-card__frame::before {
inset: 5px;
border: 1px solid rgba(150, 105, 35, 0.55);
}
.tulja-sc-piece-card__frame::after {
inset: 10px;
border: 1px solid rgba(255, 244, 214, 0.7);
}
.tulja-sc-pieces--framed .tulja-sc-piece-card:hover .tulja-sc-piece-card__frame {
transform: translateY(-4px);
}
.tulja-sc-pieces--framed .tulja-sc-piece-card__img,
.tulja-sc-pieces--framed .tulja-sc-piece-card__img-placeholder {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
box-shadow: 0 0 0 2px rgba(120, 80, 20, 0.5);
transform: none;
}
.tulja-sc-pieces--framed .tulja-sc-piece-card__img-placeholder {
background: linear-gradient(145deg, #f6ead5 0%, #ecd6b0 55%, #e2c08a 100%);
}
.tulja-sc-pieces--framed .tulja-sc-piece-card__body {
padding: 26px 0 0;
}
.tulja-sc-pieces--framed .tulja-sc-piece-card__name {
font-family: var(--font-serif);
font-size: clamp(1.3rem, 1.8vw, 1.55rem);
font-weight: 400;
line-height: 1.2;
color: var(--tulja-charcoal);
margin: 0 0 12px;
}
.tulja-sc-pieces--framed .tulja-sc-piece-card__desc {
font-size: 0.88rem;
line-height: 1.7;
color: #8a7a66;
margin: 0;
}
.tulja-sc-pieces--framed .tulja-sc-piece-card__price {
display: block;
margin-top: 8px;
color: var(--tulja-gold);
}
@media (max-width: 1000px) {
.tulja-sc-pieces--framed .tulja-sc-pieces__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.tulja-sc-pieces--framed { padding: 30px 20px 70px; }
.tulja-sc-pieces--framed .tulja-sc-pieces__grid { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin: 0 auto; }
.tulja-sc-ornament.tulja-ornament--framed { margin: 30px 20px !important; }
}
/* =============================================
SINGLE COLLECTION — closing quote + buttons (as in the design)
Scoped so the shared .tulja-btn styles in style.css are not affected.
============================================= */
.tulja-sc-quote {
background: var(--tulja-paper);
padding: 60px 40px 110px;
}
.tulja-sc-quote .tulja-sc-quote__text {
max-width: 640px;
margin: 0 auto 44px;
font-size: clamp(1.6rem, 2.6vw, 2.15rem);
line-height: 1.5;
quotes: none;
}
.tulja-sc-quote .tulja-sc-quote__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 16px;
}
.tulja-sc-quote .tulja-sc-quote__actions .tulja-btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 17px 32px;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.3em;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.tulja-sc-quote .tulja-sc-quote__actions .tulja-btn--primary {
background: #900d2a;
border: 1px solid #900d2a;
color: #f6e3dc;
}
.tulja-sc-quote .tulja-sc-quote__actions .tulja-btn--primary:hover {
background: var(--tulja-dark-red);
border-color: var(--tulja-dark-red);
color: #fff;
}
.tulja-sc-quote .tulja-sc-quote__actions .tulja-btn--outline {
background: transparent;
border: 1px solid #e2d6c1;
color: #3a2e22;
}
.tulja-sc-quote .tulja-sc-quote__actions .tulja-btn--outline:hover {
background: #e2d6c1;
/* border-color: var(--tulja-dark-red); */
color: var(--tulja-dark-red);
}
@media (max-width: 560px) {
.tulja-sc-quote { padding: 40px 20px 80px; }
.tulja-sc-quote .tulja-sc-quote__actions .tulja-btn { width: 100%; justify-content: center; letter-spacing: 0.22em; }
}
/* Footer band: faint octagon medallions on the maroon (as in the designs) */
.wp-block-tulja-site-footer .tulja-footer__ornament.tulja-ornament {
--tulja-ornament-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23d6ad6e' stroke-width='0.65' stroke-linejoin='round' opacity='0.42'%3E%3Cpath d='M40.0 29.5 L29.5 40.0 L14.5 40.0 L4.0 29.5 L4.0 14.5 L14.5 4.0 L29.5 4.0 L40.0 14.5 Z M31.7 26.0 L26.0 31.7 L18.0 31.7 L12.3 26.0 L12.3 18.0 L18.0 12.3 L26.0 12.3 L31.7 18.0 Z M40.0 29.5 L4.0 29.5 M29.5 40.0 L4.0 14.5 M14.5 40.0 L14.5 4.0 M4.0 29.5 L29.5 4.0 M4.0 14.5 L40.0 14.5 M14.5 4.0 L40.0 29.5 M29.5 4.0 L29.5 40.0 M40.0 14.5 L14.5 40.0 M22.0 22.0 L40.0 29.5 M22.0 22.0 L29.5 40.0 M22.0 22.0 L14.5 40.0 M22.0 22.0 L4.0 29.5 M22.0 22.0 L4.0 14.5 M22.0 22.0 L14.5 4.0 M22.0 22.0 L29.5 4.0 M22.0 22.0 L40.0 14.5'/%3E%3Ccircle cx='22' cy='22' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.wp-block-tulja-site-footer .tulja-footer__ornament .tulja-ornament__pattern {
background-size: var(--tulja-ornament-h) var(--tulja-ornament-h);
background-position: center;
opacity: 0.45;
}
.tulja-editor-ssr > .tulja-pieces {
padding: 0;
background: none;
}
/* =============================================
INSPIRATION HERO — frame & measure as in the design
============================================= */
.tulja-insp-hero .tulja-insp-hero__desc {
/* max-width: 470px; */
font-size: 18px;
}
.tulja-insp-hero .tulja-insp-hero__figure {
max-width: min(1072px, 52.5vw);
}
.tulja-insp-hero .tulja-insp-hero__frame {
position: relative;
padding: 12px;
background: linear-gradient(135deg, #ebcb8f 0%, #dcae62 45%, #e9c584 70%, #d7a65a 100%);
box-shadow:
0 0 0 1px #b78a4a,
0 32px 64px -30px rgba(139, 26, 26, 0.4),
0 12px 28px -16px rgba(122, 106, 85, 0.28);
}
/* two thin brown rules inside the gold, like the design */
.tulja-insp-hero .tulja-insp-hero__frame::before,
.tulja-insp-hero .tulja-insp-hero__frame::after {
content: "";
position: absolute;
border: 1px solid #b27a52;
pointer-events: none;
}
.tulja-insp-hero .tulja-insp-hero__frame::before { inset: 4px; }
.tulja-insp-hero .tulja-insp-hero__frame::after { inset: 8px; }
.tulja-insp-hero .tulja-insp-hero__frame-inner {
position: relative;
z-index: 1;
border: 0;
box-shadow: 0 0 0 1px rgba(90, 50, 20, 0.6);
}
@media (max-width: 900px) {
.tulja-insp-hero .tulja-insp-hero__figure { max-width: 100%; }
}
/* =============================================
FOOTER — exact design colours & sizes
bg #62081e with a faint lattice, cream text, gold headings & heart
============================================= */
.wp-block-tulja-site-footer.tulja-footer.tulja-footer {
background-color: #62081e !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.7' opacity='0.035'%3E%3Ccircle cx='44' cy='44' r='32'/%3E%3Ccircle cx='44' cy='44' r='18'/%3E%3Cpath d='M44 6 L82 44 L44 82 L6 44 Z'/%3E%3Cpath d='M17 17 L71 71 M71 17 L17 71'/%3E%3C/g%3E%3C/svg%3E");
background-size: 88px 88px;
color: #ddc4be;
padding-top: 0;
}
.wp-block-tulja-site-footer .tulja-footer__ornament.tulja-ornament {
margin-top: 0;
background: transparent;
border-top: 1px solid #8f4228;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 66px;
}
.wp-block-tulja-site-footer .tulja-footer__ornament .tulja-ornament__pattern {
opacity: 0.4;
}
.wp-block-tulja-site-footer .tulja-footer__inner {
max-width: 1200px;
}
.wp-block-tulja-site-footer .tulja-footer__top {
gap: 48px;
margin-bottom: 64px;
}
.wp-block-tulja-site-footer .tulja-footer__col-title {
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.28em;
color: #ca8931;
margin-bottom: 22px;
}
.wp-block-tulja-site-footer .tulja-footer__tagline {
max-width: 300px;
margin-top: 6px;
font-size: 0.9rem;
line-height: 1.75;
color: #cbb0ae;
}
.wp-block-tulja-site-footer .tulja-footer__visit-name,
.wp-block-tulja-site-footer .tulja-footer__visit-name a,
.wp-block-tulja-site-footer .tulja-footer__visit-lines {
font-size: 0.9rem;
line-height: 1.6;
color: #ddc4be;
}
.wp-block-tulja-site-footer .tulja-footer__links {
gap: 9px;
}
.wp-block-tulja-site-footer .tulja-footer__links a {
font-size: 0.9rem;
line-height: 1.4;
color: #ddc4be;
}
.wp-block-tulja-site-footer .tulja-footer__links a:hover,
.wp-block-tulja-site-footer .tulja-footer__visit-name a:hover {
color: #e8cd9d;
}
.wp-block-tulja-site-footer .tulja-footer__bottom {
border-top-color: rgba(255, 255, 255, 0.08);
padding-top: 26px;
padding-bottom: 8px;
}
.wp-block-tulja-site-footer .tulja-footer__bottom--center .tulja-footer__copyright {
font-size: 0.7rem;
letter-spacing: 0.3em;
color: #ab797f;
}
.wp-block-tulja-site-footer .tulja-footer__bottom--center .tulja-footer__copyright::before,
.wp-block-tulja-site-footer .tulja-footer__bottom--center .tulja-footer__copyright::after {
width: 11px;
height: 11px;
background: rgba(255, 255, 255, 0.07);
box-shadow: none;
}
.wp-block-tulja-site-footer .tulja-footer__credit {
font-size: 0.68rem;
color: #ab797f;
}
.tulja-footer__heart {
color: #d19936;
}
.wp-block-tulja-site-footer .tulja-footer__links {
gap: 8px;
}
.wp-block-tulja-site-footer .tulja-footer__links li {
margin: 0;
padding: 0;
line-height: 1.35;
}
/* Inspiration pieces: same measure as the design */
/* .tulja-pieces .tulja-pieces__inner {
max-width: 1040px;
} */
/* =============================================
SIDE DOTS NAVIGATION (site header) — every page, right edge
One dot per page; the current page is the red dash; hover shows its name.
============================================= */
.tulja-sidedots {
position: fixed;
top: 50%;
right: clamp(14px, 2.2vw, 34px);
transform: translateY(-50%);
z-index: 900;
transition: opacity 0.3s ease;
}
.tulja-header.is-menu-open .tulja-sidedots {
opacity: 0;
pointer-events: none;
}
.tulja-sidedots__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
/* gentle zig-zag, as in the design */
.tulja-sidedots__item:nth-child(7n + 1) { margin-right: 34px; }
.tulja-sidedots__item:nth-child(7n + 2) { margin-right: 25px; }
.tulja-sidedots__item:nth-child(7n + 3) { margin-right: 12px; }
.tulja-sidedots__item:nth-child(7n + 4) { margin-right: 16px; }
.tulja-sidedots__item:nth-child(7n + 5) { margin-right: 32px; }
.tulja-sidedots__item:nth-child(7n + 6) { margin-right: 0; }
.tulja-sidedots__item:nth-child(7n + 7) { margin-right: 16px; }
.tulja-sidedots__link {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
min-height: 16px;
padding: 3px 0 3px 8px;
text-decoration: none;
}
.tulja-sidedots__dot {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #d8a6a0;
transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}
.tulja-sidedots__link.is-current .tulja-sidedots__dot {
width: 22px;
height: 4px;
border-radius: 2px;
background: var(--tulja-dark-red);
}
.tulja-sidedots__label {
position: absolute;
right: calc(100% - 4px);
top: 50%;
white-space: nowrap;
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.38em;
text-transform: uppercase;
color: var(--tulja-gold);
opacity: 0;
transform: translate(6px, -50%);
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.tulja-sidedots__link:hover .tulja-sidedots__label,
.tulja-sidedots__link:focus-visible .tulja-sidedots__label {
opacity: 1;
transform: translate(0, -50%);
}
.tulja-sidedots__link:hover .tulja-sidedots__dot,
.tulja-sidedots__link:focus-visible .tulja-sidedots__dot {
background: var(--tulja-dark-red);
transform: scale(1.25);
}
.tulja-sidedots__link:focus-visible {
outline: none;
}
/* The nav replaces the decorative hero dots */
body:has(.tulja-sidedots) .tulja-about-hero__dots,
body:has(.tulja-sidedots) .tulja-contact-hero__dots,
body:has(.tulja-sidedots) .tulja-find-hero__dots,
body:has(.tulja-sidedots) .tulja-coll-hero__dots,
body:has(.tulja-sidedots) .tulja-insp-hero__dots {
display: none !important;
}
@media (max-width: 900px) {
.tulja-sidedots { display: none; }
}
/* =============================================
MARQUEE BLOCK shown as the ornament band — full width like the design
============================================= */
.wp-block-tulja-marquee.tulja-ornament {
margin-block: 0 !important;
}
.has-global-padding > .wp-block-tulja-marquee.tulja-ornament {
max-width: none !important;
margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}
/* =============================================
HOW TO FIND US — design (info column + framed illustrated map)
============================================= */
.wp-block-tulja-find-us.tulja-find-body {
max-width: none !important;
background: var(--tulja-paper);
padding: 40px 40px 140px;
margin-block: 0 !important;
}
.has-global-padding > .wp-block-tulja-find-us {
margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
}
.wp-block-tulja-find-us .tulja-find-body__inner {
display: grid;
/* grid-template-columns: minmax(0, 336px) minmax(0, 434px); */
justify-content: center;
gap: 36px;
/* max-width: 806px; */
align-items: start;
}
.wp-block-tulja-find-us .tulja-find-info__group {
border: 0;
padding: 0;
margin: 0 0 34px;
}
.wp-block-tulja-find-us .tulja-find-info__label {
font-size: 0.68rem;
font-weight: 300;
letter-spacing: 0.3em;
color: var(--tulja-gold);
margin: 0 0 14px;
}
.wp-block-tulja-find-us .tulja-find-info__address,
.wp-block-tulja-find-us .tulja-find-info__address strong {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 300;
font-style: normal;
line-height: 1.45;
color: #231814;
}
.wp-block-tulja-find-us .tulja-hours-table td {
padding: 4px 0 12px;
font-family: var(--font-serif);
font-size: 18px;
color: #231814;
border-bottom: 1px solid #e9dfcd;
}
.wp-block-tulja-find-us .tulja-hours-table td:last-child {
text-align: right;
font-variant-numeric: oldstyle-nums;
color: #685a55;
}
.wp-block-tulja-find-us .tulja-find-info__note {
font-size: 0.78rem;
color: #a2927d;
margin: 12px 0 0;
}
.wp-block-tulja-find-us .tulja-find-info__value {
font-size: 16px;
line-height: 1.7;
color: #685a55;
margin: 0 0 24px;
}
.wp-block-tulja-find-us .tulja-find-transport {
margin: 0 0 28px;
}
.wp-block-tulja-find-us .tulja-find-map-btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 16px 32px;
border: 0;
border-radius: 999px;
background: #900d2a;
color: #fcf6ec !important;
font-size: 0.72rem;
font-weight: 300;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.wp-block-tulja-find-us .tulja-find-map-btn:hover {
background: #62081e;
color: #fff;
}
/* Framed map (both styles) — same gold frame as the other cards */
.wp-block-tulja-find-us .tulja-find-map {
position: static;
}
.wp-block-tulja-find-us .tulja-find-map__frame {
position: relative;
display: block;
padding: 14px;
border: 0;
background: linear-gradient(135deg, #ebcb8f 0%, #dcae62 45%, #e9c584 70%, #d7a65a 100%);
box-shadow:
0 0 0 1px #b78a4a,
0 34px 64px -30px rgba(139, 26, 26, 0.4),
0 12px 28px -16px rgba(122, 106, 85, 0.28);
}
.wp-block-tulja-find-us .tulja-find-map__frame::before,
.wp-block-tulja-find-us .tulja-find-map__frame::after {
content: "";
position: absolute;
border: 1px solid #b27a52;
pointer-events: none;
}
.wp-block-tulja-find-us .tulja-find-map__frame::before { inset: 4px; }
.wp-block-tulja-find-us .tulja-find-map__frame::after { inset: 9px; }
.wp-block-tulja-find-us .tulja-find-map__iframe {
position: relative;
z-index: 1;
height: auto;
aspect-ratio: 4 / 5;
}
/* Illustrated map */
.tulja-find-map__art {
position: relative;
z-index: 1;
display: block;
aspect-ratio: 400 / 506;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(90, 50, 20, 0.45);
}
.tulja-find-map__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.tulja-find-map__pin {
position: absolute;
left: 50.5%;
top: 45.5%;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(160, 52, 78, 0.85);
box-shadow: 0 0 0 6px rgba(160, 52, 78, 0.15);
transform: translate(-50%, -50%);
transition: transform 0.3s ease;
}
.tulja-find-map__frame--art:hover .tulja-find-map__pin {
transform: translate(-50%, -58%);
}
.tulja-find-map__label {
position: absolute;
left: 50%;
top: calc(45.5% + 36px);
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
white-space: nowrap;
text-align: center;
}
.tulja-find-map__label-name {
font-family: var(--font-serif);
font-size: 0.98rem;
color: #3a2e22;
}
.tulja-find-map__label-sub {
font-size: 0.52rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #8a7a66;
}
@media (max-width: 860px) {
/* .wp-block-tulja-find-us .tulja-find-body__inner { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 40px; } */
.wp-block-tulja-find-us.tulja-find-body { padding: 30px 24px 90px; }
}
.wp-block-tulja-find-us .tulja-find-info__address strong {
display: inline;
margin: 0;
}
.tulja-sidedots__list { gap: 5px; }
/* =============================================
FOOTER — fix: faint lattice like Lovable
============================================= */
/* 1. Remove the full-strength PNG lattice from the whole footer */
.wp-block-tulja-site-footer.tulja-footer.tulja-footer {
background-color: #62081e !important;
background-image: none !important;
position: relative;
overflow: hidden;
}
/* 2. Faint lattice over the footer body (starts below the 54px strip), opacity .06 */
.wp-block-tulja-site-footer.tulja-footer.tulja-footer::before {
content: "";
position: absolute;
top: 54px;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
pointer-events: none;
opacity: 0.06;
background-repeat: repeat;
background-size: 72px 72px;
background-image: url("data:image/svg+xml;utf8,");
}
/* 3. Keep all footer content above the overlay */
.wp-block-tulja-site-footer .tulja-footer__inner {
position: relative;
z-index: 1;
}
/* 4. Top pattern strip: 54px, gold lines above and below, pattern at .3 */
.wp-block-tulja-site-footer .tulja-footer__ornament.tulja-ornament {
position: relative;
z-index: 1;
height: 54px;
overflow: hidden;
background: #62081e;
border-top: 1px solid rgba(209, 153, 54, 0.4);
border-bottom: 1px solid rgba(209, 153, 54, 0.4);
margin-top: 0;
margin-bottom: 66px;
}
.wp-block-tulja-site-footer .tulja-footer__ornament .tulja-ornament__pattern {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
opacity: 0.3;
background-repeat: repeat;
background-size: 48px 48px;
background-position: center;
background-image: url("data:image/svg+xml;utf8,");
}
} /* end @layer tulja-legacy */
/*Writing the custom css for the blocks */
.craft-block .the-craft-title{
font-size: 20px;
}