feat: rediseño premium completo del sitio MNQ
- Sistema visual nuevo: tokens CSS extendidos, tipografía Noto Serif + Inter, design system completo - Navbar con logo generado por IA (☥MNQ ★★★★★), favicon ojo de Ra, WhatsApp CTA - Páginas rediseñadas: Home, Bodas, Corporativo, Familiares, Nosotros, Contacto - Imágenes premium: fotografías reales + imágenes generadas con Gemini AI via nanobanana - Logos con fondo transparente generados y procesados - WhatsApp actualizado a +34 678 17 15 13
This commit is contained in:
Manuel
+29
-6
@@ -1,9 +1,8 @@
|
||||
* {
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -16,12 +15,16 @@ body {
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
::selection {
|
||||
background: var(--color-primary-container);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-serif);
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -30,4 +33,24 @@ p {
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
+671
-91
@@ -1,107 +1,687 @@
|
||||
/* ─────────────────────────────────────────────
|
||||
SITE HEADER / NAV
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.site-header {
|
||||
border-bottom: 1px solid rgb(31 26 23 / 10%);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 50;
|
||||
height: var(--nav-h);
|
||||
background: rgb(255 248 240 / 85%);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgb(127 118 99 / 10%);
|
||||
}
|
||||
|
||||
.site-header .page-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.site-brand {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-headline-md);
|
||||
color: var(--color-primary);
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-on-surface);
|
||||
transition: color 200ms;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--color-primary);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.site-nav {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
BUTTONS
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-3);
|
||||
min-height: 44px;
|
||||
padding: 0.75rem 1.75rem;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 200ms, transform 100ms, background 200ms;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-container);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.btn-pill {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.btn-pill:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--color-primary);
|
||||
border: 1px solid var(--color-primary-container);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--color-primary-container);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--color-on-primary);
|
||||
border: 2px solid var(--color-primary-container);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 1rem 2.5rem;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--color-primary-container);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.btn-underline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-primary);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
padding-bottom: 0.375rem;
|
||||
transition: opacity 200ms;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.btn-underline:hover {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background: var(--color-primary-container);
|
||||
color: var(--color-on-surface);
|
||||
border-radius: var(--radius-full);
|
||||
padding: 1.25rem 2.5rem;
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
background: var(--color-primary-fixed);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
TYPOGRAPHY CLASSES
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.text-display {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-display);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.text-headline-lg {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-headline-lg);
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.text-headline-md {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-headline-md);
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.03em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.label-caps {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.label-caps-wide {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-body-sm {
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
COLOR UTILITIES
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.text-primary { color: var(--color-primary); }
|
||||
.text-muted { color: var(--color-on-surface-variant); }
|
||||
.text-white { color: #fff; }
|
||||
.text-inverse { color: var(--color-inverse-on-surface); }
|
||||
|
||||
.bg-surface { background: var(--color-surface); }
|
||||
.bg-container { background: var(--color-surface-container); }
|
||||
.bg-container-low { background: var(--color-surface-container-low); }
|
||||
.bg-container-high { background: var(--color-surface-container-high); }
|
||||
.bg-inverse { background: var(--color-inverse-surface); }
|
||||
.bg-primary { background: var(--color-primary); }
|
||||
.bg-primary-container { background: var(--color-primary-container); }
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
HERO SECTIONS
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.hero-full {
|
||||
position: relative;
|
||||
height: 100svh;
|
||||
min-height: 540px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-tall {
|
||||
position: relative;
|
||||
height: 80svh;
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.hero-gradient-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, var(--color-inverse-surface) 0%, var(--color-primary) 50%, var(--color-primary-container) 100%);
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgb(31 27 19 / 35%);
|
||||
}
|
||||
|
||||
.hero-overlay-bottom {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, transparent 0%, rgb(31 27 19 / 50%) 100%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
CARDS
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.card-border {
|
||||
border: 1px solid rgb(208 197 175 / 30%);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
.card-image {
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid rgb(208 197 175 / 10%);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
border-top: 1px solid rgb(31 26 23 / 10%);
|
||||
padding-block: var(--space-6);
|
||||
}
|
||||
|
||||
.footer-title,
|
||||
.eyebrow {
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid rgb(31 26 23 / 8%);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
box-shadow: var(--shadow-soft);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.button-primary,
|
||||
.button-secondary {
|
||||
width: fit-content;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background: var(--color-primary);
|
||||
color: #201a14;
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
background: var(--color-secondary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-secondary {
|
||||
background: transparent;
|
||||
color: var(--color-on-surface);
|
||||
border-color: rgb(31 26 23 / 25%);
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
.card-image img {
|
||||
width: 100%;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid rgb(31 26 23 / 20%);
|
||||
padding: 0.75rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 700ms ease;
|
||||
}
|
||||
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
.card-image:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Portfolio/bento cards */
|
||||
.bento-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid rgb(208 197 175 / 10%);
|
||||
}
|
||||
|
||||
.bento-card img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 700ms ease;
|
||||
}
|
||||
|
||||
.bento-card:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.bento-card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgb(31 27 19 / 70%), transparent);
|
||||
}
|
||||
|
||||
.bento-card-body {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--space-8);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Testimonial card */
|
||||
.testimonial-card {
|
||||
padding: var(--space-10);
|
||||
border: 1px solid rgb(208 197 175 / 30%);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgb(255 255 255 / 50%);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.testimonial-quote {
|
||||
font-style: italic;
|
||||
line-height: 1.6;
|
||||
color: var(--color-on-surface);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding-top: var(--space-6);
|
||||
border-top: 1px solid rgb(208 197 175 / 30%);
|
||||
}
|
||||
|
||||
.testimonial-avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-surface-container-high);
|
||||
border: 1px solid rgb(212 175 55 / 20%);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Value card */
|
||||
.value-card {
|
||||
padding: var(--space-10);
|
||||
border: 1px solid rgb(208 197 175 / 30%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: var(--space-4);
|
||||
transition: background 300ms;
|
||||
}
|
||||
|
||||
.value-card:hover {
|
||||
background: var(--color-surface-container);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
DIVIDERS / ACCENTS
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.gold-line {
|
||||
width: 3rem;
|
||||
height: 2px;
|
||||
background: var(--color-primary-container);
|
||||
}
|
||||
|
||||
.border-left-gold {
|
||||
border-left: 2px solid rgb(212 175 55 / 20%);
|
||||
padding-left: var(--space-8);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
FORMS
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select,
|
||||
.form-textarea {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-outline-variant);
|
||||
padding: var(--space-4) 0;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
color: var(--color-on-surface);
|
||||
width: 100%;
|
||||
transition: border-color 200ms;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus,
|
||||
.form-textarea:focus {
|
||||
border-bottom-color: var(--color-primary-container);
|
||||
}
|
||||
|
||||
.form-input::placeholder,
|
||||
.form-textarea::placeholder {
|
||||
color: var(--color-on-surface-variant);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: var(--space-12);
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.form-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
FLOATING WHATSAPP CTA
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.whatsapp-float {
|
||||
position: fixed;
|
||||
right: var(--space-4);
|
||||
bottom: var(--space-4);
|
||||
z-index: 50;
|
||||
background: #25d366;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
min-height: 48px;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 999px;
|
||||
right: var(--space-8);
|
||||
bottom: var(--space-8);
|
||||
z-index: 60;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-soft);
|
||||
gap: var(--space-4);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
padding: var(--space-4) var(--space-6);
|
||||
padding-left: var(--space-8);
|
||||
border-radius: var(--radius-full);
|
||||
box-shadow: var(--shadow-lg);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: transform 200ms, box-shadow 200ms;
|
||||
}
|
||||
|
||||
.whatsapp-float:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 30px 60px -15px rgb(115 92 0 / 35%);
|
||||
}
|
||||
|
||||
.whatsapp-float:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.whatsapp-float-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
background: rgb(255 255 255 / 15%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
SITE FOOTER
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.site-footer {
|
||||
background: var(--color-surface-container);
|
||||
border-top: 1px solid rgb(208 197 175 / 20%);
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-8);
|
||||
padding-block: var(--space-section);
|
||||
}
|
||||
|
||||
.footer-brand h3 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--text-headline-lg);
|
||||
color: var(--color-on-surface);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.footer-brand p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-16);
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.footer-col-title {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-on-surface-variant);
|
||||
transition: color 200ms;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding-block: var(--space-6);
|
||||
border-top: 1px solid rgb(208 197 175 / 10%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.footer-inner {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
DARK CTA SECTION
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.cta-dark {
|
||||
background: var(--color-inverse-surface);
|
||||
color: var(--color-inverse-on-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-16) var(--space-8);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.cta-dark {
|
||||
padding: var(--space-24) var(--space-20);
|
||||
}
|
||||
}
|
||||
|
||||
.cta-dark-ring {
|
||||
position: absolute;
|
||||
border: 2px solid rgb(255 224 136 / 10%);
|
||||
border-radius: var(--radius-full);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cta-gold {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
padding: var(--space-16) var(--space-8);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
BORDER UTILITIES
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.border-outline-soft {
|
||||
border: 1px solid rgb(208 197 175 / 30%);
|
||||
}
|
||||
|
||||
.rounded-sm { border-radius: var(--radius-sm); }
|
||||
.rounded-md { border-radius: var(--radius-md); }
|
||||
.rounded-lg { border-radius: var(--radius-lg); }
|
||||
.rounded-full { border-radius: var(--radius-full); }
|
||||
|
||||
/* ─────────────────────────────────────────────
|
||||
IMAGE PLACEHOLDERS (no photo yet)
|
||||
───────────────────────────────────────────── */
|
||||
|
||||
.img-placeholder {
|
||||
background: linear-gradient(135deg, var(--color-surface-container-high) 0%, var(--color-surface-container) 100%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.img-placeholder-hero {
|
||||
background: linear-gradient(160deg, var(--color-inverse-surface) 0%, #3d3020 40%, var(--color-primary) 100%);
|
||||
}
|
||||
|
||||
+132
-34
@@ -1,47 +1,145 @@
|
||||
.container {
|
||||
width: min(100% - 2rem, 72rem);
|
||||
/* Container */
|
||||
.page-wrap {
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--space-page);
|
||||
}
|
||||
|
||||
.section-stack {
|
||||
padding-block: var(--space-8) var(--space-12);
|
||||
/* Section spacing */
|
||||
.section-pad {
|
||||
padding-block: var(--space-section);
|
||||
}
|
||||
|
||||
.section-stack-sm {
|
||||
.section-pad-sm {
|
||||
padding-block: var(--space-12);
|
||||
}
|
||||
|
||||
/* Grids */
|
||||
.grid-2 {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.nav-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
padding-block: var(--space-4);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
.grid-3 {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.grid-12 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.nav-wrap {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
|
||||
/* Column spans (for use inside .grid-12) */
|
||||
.col-5 { grid-column: span 12; }
|
||||
.col-6 { grid-column: span 12; }
|
||||
.col-7 { grid-column: span 12; }
|
||||
.col-8 { grid-column: span 12; }
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.col-5 { grid-column: span 5; }
|
||||
.col-6 { grid-column: span 6; }
|
||||
.col-7 { grid-column: span 7; }
|
||||
.col-8 { grid-column: span 8; }
|
||||
}
|
||||
|
||||
/* Flex utilities */
|
||||
.flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gap-4 { gap: var(--space-4); }
|
||||
.gap-6 { gap: var(--space-6); }
|
||||
.gap-8 { gap: var(--space-8); }
|
||||
.gap-12 { gap: var(--space-12); }
|
||||
|
||||
/* Stack (vertical flex with gap) */
|
||||
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
|
||||
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
|
||||
.stack-8 { display: flex; flex-direction: column; gap: var(--space-8); }
|
||||
.stack-12 { display: flex; flex-direction: column; gap: var(--space-12); }
|
||||
|
||||
/* Mosaic gallery (CSS columns) */
|
||||
.mosaic {
|
||||
columns: 1;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
.mosaic { columns: 2; }
|
||||
}
|
||||
|
||||
@media (min-width: 64rem) {
|
||||
.mosaic { columns: 3; }
|
||||
}
|
||||
|
||||
.mosaic > * {
|
||||
break-inside: avoid;
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
/* Aspect ratios */
|
||||
.aspect-portrait {
|
||||
aspect-ratio: 3/4;
|
||||
}
|
||||
|
||||
.aspect-square {
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
.aspect-video {
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.aspect-wide {
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
/* Overflow hidden for hover effects */
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Text alignment */
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
/* Max width utilities */
|
||||
.max-w-sm { max-width: 24rem; }
|
||||
.max-w-md { max-width: 32rem; }
|
||||
.max-w-lg { max-width: 40rem; }
|
||||
.max-w-xl { max-width: 48rem; }
|
||||
.max-w-2xl { max-width: 56rem; }
|
||||
.mx-auto { margin-inline: auto; }
|
||||
|
||||
+41
-8
@@ -1,28 +1,61 @@
|
||||
:root {
|
||||
--color-primary: #d4af37;
|
||||
--color-secondary: #a67c1b;
|
||||
--color-surface: #fffdf8;
|
||||
--color-on-surface: #1f1a17;
|
||||
/* Brand colors */
|
||||
--color-primary: #735c00;
|
||||
--color-primary-container: #d4af37;
|
||||
--color-primary-fixed: #ffe088;
|
||||
--color-on-primary: #ffffff;
|
||||
--color-secondary: #7b5900;
|
||||
--color-surface: #fff8f0;
|
||||
--color-surface-container: #f5eddf;
|
||||
--color-surface-container-low: #fbf3e5;
|
||||
--color-surface-container-high: #efe7da;
|
||||
--color-on-surface: #1f1b13;
|
||||
--color-on-surface-variant: #4d4635;
|
||||
--color-outline: #7f7663;
|
||||
--color-outline-variant: #d0c5af;
|
||||
--color-inverse-surface: #343027;
|
||||
--color-inverse-on-surface: #f8f0e2;
|
||||
--color-error: #b3261e;
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-serif: 'Playfair Display', Georgia, serif;
|
||||
--font-serif: 'Noto Serif', Georgia, serif;
|
||||
|
||||
--text-sm: 0.875rem;
|
||||
/* Type scale */
|
||||
--text-display: clamp(2.5rem, 6vw, 4rem);
|
||||
--text-headline-lg: clamp(1.75rem, 4vw, 2.5rem);
|
||||
--text-headline-md: 2rem;
|
||||
--text-label-caps: 0.75rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: clamp(1.5rem, 5vw, 2.25rem);
|
||||
--text-sm: 0.875rem;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
--space-24: 6rem;
|
||||
--space-section: clamp(4rem, 10vw, 7.5rem);
|
||||
--space-page: clamp(1.5rem, 5vw, 4rem);
|
||||
--max-w-content: 80rem;
|
||||
|
||||
/* Border radius */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-soft: 0 8px 24px rgb(31 26 23 / 8%);
|
||||
--shadow-editorial: 0 10px 30px -10px rgb(115 92 0 / 5%);
|
||||
--shadow-lg: 0 25px 50px -12px rgb(31 26 23 / 15%);
|
||||
|
||||
/* Nav height */
|
||||
--nav-h: 5rem;
|
||||
}
|
||||
|
||||
+118
-6
@@ -1,9 +1,121 @@
|
||||
.text-muted {
|
||||
color: rgb(31 26 23 / 72%);
|
||||
/* Margin utilities */
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
.mt-6 { margin-top: var(--space-6); }
|
||||
.mt-8 { margin-top: var(--space-8); }
|
||||
.mt-12 { margin-top: var(--space-12); }
|
||||
.mt-16 { margin-top: var(--space-16); }
|
||||
.mt-20 { margin-top: var(--space-20); }
|
||||
.mt-24 { margin-top: var(--space-24); }
|
||||
.mb-4 { margin-bottom: var(--space-4); }
|
||||
.mb-6 { margin-bottom: var(--space-6); }
|
||||
.mb-8 { margin-bottom: var(--space-8); }
|
||||
.mb-12 { margin-bottom: var(--space-12); }
|
||||
.mb-16 { margin-bottom: var(--space-16); }
|
||||
|
||||
/* Padding utilities */
|
||||
.pt-nav { padding-top: var(--nav-h); }
|
||||
.p-10 { padding: var(--space-10); }
|
||||
.p-12 { padding: var(--space-12); }
|
||||
|
||||
/* Display */
|
||||
.hidden { display: none; }
|
||||
.block { display: block; }
|
||||
.flex { display: flex; }
|
||||
.grid { display: grid; }
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.md-block { display: block; }
|
||||
.md-flex { display: flex; }
|
||||
.md-hidden { display: none; }
|
||||
}
|
||||
|
||||
.link-accent {
|
||||
color: var(--color-secondary);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
/* Width */
|
||||
.w-full { width: 100%; }
|
||||
|
||||
/* Overflow */
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
|
||||
/* Position */
|
||||
.relative { position: relative; }
|
||||
.absolute { position: absolute; }
|
||||
.sticky-top { position: sticky; top: 0; }
|
||||
|
||||
/* Z-index */
|
||||
.z-10 { z-index: 10; }
|
||||
|
||||
/* Opacity */
|
||||
.opacity-30 { opacity: 0.3; }
|
||||
.opacity-60 { opacity: 0.6; }
|
||||
.opacity-80 { opacity: 0.8; }
|
||||
|
||||
/* Grayscale */
|
||||
.grayscale { filter: grayscale(1); }
|
||||
.grayscale-hover:hover { filter: none; }
|
||||
|
||||
/* Transition */
|
||||
.transition { transition: all 300ms ease; }
|
||||
|
||||
/* Italic */
|
||||
.italic { font-style: italic; }
|
||||
|
||||
/* Weight */
|
||||
.font-bold { font-weight: 700; }
|
||||
.font-medium { font-weight: 500; }
|
||||
|
||||
/* Leading */
|
||||
.leading-relaxed { line-height: 1.7; }
|
||||
.leading-tight { line-height: 1.15; }
|
||||
|
||||
/* Stars rating */
|
||||
.stars {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.star {
|
||||
color: var(--color-primary-container);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Section label */
|
||||
.section-eyebrow {
|
||||
display: block;
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-label-caps);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* Editorial quote accent */
|
||||
.quote-mark {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 4rem;
|
||||
line-height: 0.8;
|
||||
color: var(--color-primary-container);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* Hover scale on cards */
|
||||
.hover-scale {
|
||||
transition: transform 500ms ease;
|
||||
}
|
||||
.hover-scale:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* Image hover zoom (applied to parent that clips) */
|
||||
.img-zoom img {
|
||||
transition: transform 700ms ease;
|
||||
}
|
||||
.img-zoom:hover img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* Icon size */
|
||||
.icon-lg {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user