/* ============================================================ STENEN STILTE — Luxe Stijlsheet Geïnspireerd op New Orleans, Rotterdam ============================================================ */ /* ------------------------------------------------------------ 1. FONTS ------------------------------------------------------------ */ @font-face { font-family: 'Bernhard Fashion'; src: url('BernhardFashionBT-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* Google Fonts — voeg dit toe aan je : ------------------------------------------------------------ */ /* ------------------------------------------------------------ 2. CSS CUSTOM PROPERTIES (DESIGN TOKENS) ------------------------------------------------------------ */ :root { /* — Kleuren — */ --color-sand-light: #F2EDE4; /* Zandlicht — paginaachtergrond */ --color-sand-warm: #E8DDD0; /* Warm Zand — sectie-afwisseling */ --color-limestone: #D4C9B8; /* Kalksteen — kaarten, vlakken */ --color-travertine: #C4B49F; /* Travertijn — borders, dividers */ --color-gold-mist: #B8A98A; /* Goudnevel — accenten, CTA's */ --color-sky-haze: #D6E4EF; /* Hemelwaas — hero, luchtige zones */ --color-sky-soft: #BDD4E5; /* Zachte Lucht — gradiënten */ --color-deep-stone: #8A7D6E; /* Diepgrijs — tekst, footer */ --color-text: #3D3530; /* Bijna-zwart — body tekst */ --color-white: #FDFAF7; /* Gebroken wit — knoppen, kaarten */ /* — Typografie — */ --font-display: 'Bernhard Fashion', 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ --text-4xl: 4rem; /* 64px */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-loose: 1.9; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.08em; --tracking-wider: 0.18em; --tracking-widest: 0.35em; /* — Ruimte — */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* — Radius — */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 999px; /* — Schaduwen — */ --shadow-xs: 0 1px 3px rgba(60, 50, 40, 0.06); --shadow-sm: 0 4px 12px rgba(60, 50, 40, 0.08); --shadow-md: 0 10px 30px rgba(60, 50, 40, 0.10); --shadow-lg: 0 20px 60px rgba(60, 50, 40, 0.12); --shadow-xl: 0 40px 100px rgba(60, 50, 40, 0.15); /* — Transities — */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 400ms cubic-bezier(0.22, 0.68, 0, 1.2); /* — Breedtes — */ --max-width-text: 660px; --max-width-wide: 960px; --max-width-full: 1280px; } /* ------------------------------------------------------------ 3. RESET & BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { background-color: var(--color-sand-light); color: var(--color-text); font-family: var(--font-body); font-weight: 300; font-size: var(--text-base); line-height: var(--leading-normal); } img, video { max-width: 100%; display: block; } /* ------------------------------------------------------------ 4. TYPOGRAFIE ------------------------------------------------------------ */ /* Display koppen — Cormorant Garamond */ h1, h2, h3, .heading { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); } h1, .h1 { font-size: clamp(var(--text-3xl), 6vw, var(--text-4xl)); letter-spacing: 0.12em; } h2, .h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); } h3, .h3 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); } h4, .h4 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; letter-spacing: var(--tracking-normal); } h5, h6, .h5, .h6 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-deep-stone); } /* Staande letters — italic accenten */ .italic, em { font-style: italic; color: var(--color-gold-mist); } /* Overline — label boven koppen */ .overline { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 200; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-travertine); display: block; margin-bottom: var(--space-3); } /* Lead tekst */ .lead { font-size: var(--text-md); font-weight: 200; line-height: var(--leading-loose); color: var(--color-deep-stone); } /* Body tekst */ p { margin-bottom: var(--space-5); font-weight: 300; line-height: var(--leading-normal); } p:last-child { margin-bottom: 0; } /* Links */ a { color: var(--color-gold-mist); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transition-base), color var(--transition-base); } a:hover { color: var(--color-deep-stone); border-bottom-color: var(--color-travertine); } /* Kleine labels */ .label { font-size: var(--text-xs); font-weight: 300; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-deep-stone); opacity: 0.7; } /* Bijschrift */ figcaption, .caption { font-size: var(--text-sm); font-weight: 200; color: var(--color-deep-stone); letter-spacing: var(--tracking-wide); margin-top: var(--space-2); opacity: 0.7; } /* Mono / code */ code, pre, .mono { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-sand-warm); color: var(--color-text); border-radius: var(--radius-sm); padding: 0.15em 0.45em; } pre { padding: var(--space-6); overflow-x: auto; border-left: 2px solid var(--color-gold-mist); border-radius: var(--radius-md); } pre code { background: none; padding: 0; } /* Blockquote */ blockquote { border-left: 2px solid var(--color-gold-mist); padding-left: var(--space-5); margin: var(--space-7) 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300; font-style: italic; color: var(--color-deep-stone); line-height: var(--leading-snug); } /* Horizontale lijn */ hr { border: none; border-top: 1px solid var(--color-limestone); margin: var(--space-8) 0; } /* ------------------------------------------------------------ 5. LAYOUT HELPERS ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--max-width-wide); margin-inline: auto; padding-inline: var(--space-5); } .container--text { max-width: var(--max-width-text); } .container--full { max-width: var(--max-width-full); } .section { padding-block: var(--space-9); } .section--sm { padding-block: var(--space-7); } .section--lg { padding-block: var(--space-10); } /* Grid */ .grid { display: grid; gap: var(--space-5); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* Flex */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } /* Text align */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* ------------------------------------------------------------ 6. ACHTERGRONDKLASSEN ------------------------------------------------------------ */ .bg-sand-light { background-color: var(--color-sand-light); } .bg-sand-warm { background-color: var(--color-sand-warm); } .bg-limestone { background-color: var(--color-limestone); } .bg-travertine { background-color: var(--color-travertine); } .bg-gold-mist { background-color: var(--color-gold-mist); } .bg-sky-haze { background-color: var(--color-sky-haze); } .bg-sky-soft { background-color: var(--color-sky-soft); } .bg-deep-stone { background-color: var(--color-deep-stone); color: var(--color-sand-light); } .bg-white { background-color: var(--color-white); } /* Gradiënten */ .bg-gradient-warm { background: linear-gradient(135deg, var(--color-sand-light) 0%, var(--color-sand-warm) 100%); } .bg-gradient-sky { background: linear-gradient(135deg, var(--color-sky-haze) 0%, var(--color-sky-soft) 100%); } .bg-gradient-stone { background: linear-gradient(135deg, var(--color-sand-warm) 0%, var(--color-limestone) 100%); } /* ------------------------------------------------------------ 7. KNOPPEN ------------------------------------------------------------ */ /* Base */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 300; letter-spacing: var(--tracking-wider); text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-6); transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-spring); } .btn:hover { transform: translateY(-1px); border-bottom: none; } .btn:active { transform: translateY(0); } /* Primaire knop */ .btn-primary { background-color: var(--color-deep-stone); color: var(--color-sand-light); } .btn-primary:hover { background-color: var(--color-text); color: var(--color-sand-light); box-shadow: var(--shadow-md); } /* Goud accent */ .btn-gold { background-color: var(--color-gold-mist); color: var(--color-white); } .btn-gold:hover { background-color: var(--color-travertine); box-shadow: var(--shadow-md); } /* Ghost */ .btn-ghost { background-color: transparent; color: var(--color-deep-stone); border: 1px solid var(--color-limestone); } .btn-ghost:hover { background-color: var(--color-sand-warm); border-color: var(--color-travertine); color: var(--color-text); } /* Outline goud */ .btn-outline { background-color: transparent; color: var(--color-gold-mist); border: 1px solid var(--color-gold-mist); } .btn-outline:hover { background-color: var(--color-gold-mist); color: var(--color-white); } /* Maten */ .btn-sm { padding: var(--space-2) var(--space-4); font-size: 10px; } .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-sm); } /* ------------------------------------------------------------ 8. KAARTEN ------------------------------------------------------------ */ .card { background-color: var(--color-white); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-spring); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .card--sand { background-color: var(--color-sand-warm); box-shadow: none; } .card--stone { background-color: var(--color-deep-stone); color: var(--color-sand-light); box-shadow: var(--shadow-lg); } .card--sky { background-color: var(--color-sky-haze); box-shadow: none; } /* Kaart met accent-streep links */ .card--accent { border-left: 2px solid var(--color-gold-mist); } /* Kaart afbeelding */ .card__image { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; } .card__image img { width: 100%; height: 200px; object-fit: cover; transition: transform var(--transition-slow); } .card:hover .card__image img { transform: scale(1.03); } /* ------------------------------------------------------------ 9. FORMULIEREN ------------------------------------------------------------ */ .form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); } label, .label-text { font-size: var(--text-xs); font-weight: 300; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-deep-stone); } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], textarea, select { width: 100%; background-color: var(--color-white); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); font-weight: 300; border: 1px solid var(--color-limestone); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); transition: border-color var(--transition-base), box-shadow var(--transition-base); outline: none; appearance: none; } input:focus, textarea:focus, select:focus { border-color: var(--color-gold-mist); box-shadow: 0 0 0 3px rgba(184, 169, 138, 0.15); } textarea { resize: vertical; min-height: 120px; } ::placeholder { color: var(--color-travertine); font-weight: 200; } /* ------------------------------------------------------------ 10. NAVIGATIE ------------------------------------------------------------ */ .nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); background-color: var(--color-sand-light); border-bottom: 1px solid var(--color-limestone); } .nav__logo { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 300; color: var(--color-text); letter-spacing: var(--tracking-tight); text-decoration: none; border: none; } .nav__logo:hover { color: var(--color-gold-mist); border: none; } .nav__links { display: flex; align-items: center; gap: var(--space-7); list-style: none; } .nav__links a { font-size: var(--text-xs); font-weight: 300; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-deep-stone); border: none; transition: color var(--transition-base); } .nav__links a:hover { color: var(--color-text); border: none; } .nav__links a.active { color: var(--color-gold-mist); } /* Sticky nav */ .nav--sticky { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background-color: rgba(242, 237, 228, 0.92); } /* ------------------------------------------------------------ 11. HERO ------------------------------------------------------------ */ .hero { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-10) var(--space-5); background: linear-gradient( 160deg, var(--color-sand-light) 0%, var(--color-sky-haze) 60%, var(--color-sky-soft) 100% ); } .hero__overline { font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-travertine); margin-bottom: var(--space-4); font-weight: 200; } .hero__title { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 8vw, 5.5rem); font-weight: 400; line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); margin-bottom: var(--space-5); max-width: 900px; } .hero__subtitle { font-size: var(--text-md); font-weight: 200; color: var(--color-deep-stone); max-width: 560px; margin-bottom: var(--space-7); line-height: var(--leading-loose); } .hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; } /* ------------------------------------------------------------ 12. DIVIDER & DECORATIEVE ELEMENTEN ------------------------------------------------------------ */ .divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-7) 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--color-limestone); } .divider__text { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-travertine); white-space: nowrap; } /* Decoratieve lijn */ .accent-line { width: 40px; height: 1px; background: var(--color-gold-mist); display: block; margin: var(--space-4) auto; } /* Badge */ .badge { display: inline-block; font-size: 10px; font-weight: 300; letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background-color: var(--color-limestone); color: var(--color-deep-stone); } .badge--gold { background-color: var(--color-gold-mist); color: var(--color-white); } .badge--sky { background-color: var(--color-sky-haze); color: var(--color-deep-stone); } /* ------------------------------------------------------------ 13. UTILITIES ------------------------------------------------------------ */ /* Marges */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mt-8 { margin-top: var(--space-8); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-7 { margin-bottom: var(--space-7); } .mb-8 { margin-bottom: var(--space-8); } /* Padding */ .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-7 { padding: var(--space-7); } /* Tekstkleur */ .text-gold { color: var(--color-gold-mist); } .text-stone { color: var(--color-deep-stone); } .text-muted { color: var(--color-travertine); } .text-light { color: var(--color-sand-light); } /* Zichtbaarheid */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ 14. ANIMATIES ------------------------------------------------------------ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideRight { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } .animate-fade-up { animation: fadeUp 0.7s ease both; } .animate-fade-in { animation: fadeIn 0.5s ease both; } .animate-slide-right { animation: slideRight 0.6s ease both; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } /* ------------------------------------------------------------ 15. RESPONSIVE MEDIA QUERIES ------------------------------------------------------------ */ @media (max-width: 1024px) { :root { --space-9: 72px; --space-10: 96px; } } @media (max-width: 768px) { :root { --space-8: 48px; --space-9: 56px; } .nav__links { display: none; /* Vervang met hamburger menu naar wens */ } .hero { min-height: 70vh; text-align: left; align-items: flex-start; } .hero__cta { justify-content: flex-start; } } @media (max-width: 480px) { .container { padding-inline: var(--space-4); } .card { padding: var(--space-5); } } /* ============================================================ EINDE STENEN STILTE STIJLSHEET — vve-new-orleans.nl ============================================================ */