/* Font Card */ @font-face{ font-family:'Eysome'; src:url('../dusty_pink/eyesome-duo-script.otf') format('opentype'); font-weight:400; font-style:normal; } @font-face{ font-family:'Jost'; src:url('../dusty_pink/jost-regular.ttf') format('truetype'); font-weight:400; font-style:normal; } @font-face{ font-family:'Jost Light'; src:url('../dusty_pink/jost-light.ttf') format('truetype'); font-weight:300; font-style:normal; } @font-face{ font-family:'Cormorant Garamond Italic'; src:url('../dusty_pink/cormorant-garamond-italic.ttf') format('truetype'); font-weight:400; font-style:normal; } @font-face{ font-family:'Cormorant Garamond'; src:url('../dusty_pink/cormorant-garamond-regular.ttf') format('truetype'); font-weight:400; font-style:normal; } /* ---------- Lange-woorden & URL safety ---------- */ /* 1) Basis: laat tekst overal desnoods breken */ html { overflow-wrap: anywhere; /* moderne manier */ word-break: normal; /* voorkom te agressief breken */ } /* 2) Toepassen op gangbare tekstblokken en headings */ :where(h1,h2,h3,h4,p,li,blockquote,figcaption, .text-content,.form-intro,.form-label, .timeline-title,.timeline-description, .title-blok-h1,.title-blok-h2,.title-blok-h3, .header-namen,.hero-card .couple-names) { overflow-wrap: anywhere; word-break: normal; hyphens: auto; /* nette afbrekingen (zet je ) */ } /* 3) URLs/e-mails/code: iets agressiever, anders lopen ze uit beeld */ a, .is-url, .is-email, code, pre { overflow-wrap: anywhere; word-break: break-word; } /* 4) Cijfers/units die niet mogen breken (countdown e.d.) */ .countdown-value, .countdown-number { word-break: keep-all; hyphens: none; } /* 5) Optioneel: grote namen in hero/header op mobiel responsief schalen */ @media (max-width: 640px){ .header-namen, .hero-card .couple-names{ font-size: clamp(32px, 9vw, 56px); text-transform: none; /* hoofdletters hinderen hyphenation */ letter-spacing: .02em; } } :root { --color-primary: #884A54; --color-text: #663038; --color-background: #FAF2EE; --font-eyesome: 'Eysome', sans-serif; --font-jost: 'Jost', sans-serif; --font-jost-light: 'Jost Light', sans-serif; --font-cormorant: 'Cormorant Garamond', sans-serif; --font-cormorant-italic: 'Cormorant Garamond Italic', sans-serif; --pw-accent: var(--color-primary); --pw-ink: var(--color-text); --pw-bg: var(--color-background); /* Fonts (mapping) */ --pw-script: var(--font-eyesome); /* romantische script */ --pw-serif: var(--font-cormorant); /* sierlijk serief */ --pw-serif-italic: var(--font-cormorant-italic); --pw-sans: var(--font-jost); /* kleine labels/teksten */ } /* Body Card */ body { margin: 0; padding: 0; background: white; scroll-behavior: smooth; } /* Header & Navigatie Card */ header { background: var(--color-background); padding: 20px; position: relative; z-index: 50; } .header-container { display: flex; justify-content: center; align-items: center; padding: 10px 0; } .header-namen { position: relative; display: inline-block; font-size: 50px; color: var(--color-primary); margin-bottom: 10px; font-weight: 400; font-family: var(--font-eyesome); text-align: center; text-transform: uppercase; } .header-namen::after { content: ''; position: absolute; top: 50%; left: 100%; margin-left: 15px; transform: translateY(-50%) rotate(108deg); width: 66px; height: 84px; background-image: url('../dusty_pink/3e297fd92eda6ed69574fc19d1738b76c1e5525b.png'); background-size: contain; background-repeat: no-repeat; } .nav-toggle { font-size: 1.5rem; background: none; border: none; cursor: pointer; display: none; color: var(--color-primary); } /* --- PURE CSS 2-lijnige hamburger met animatie naar X --- */ .nav-toggle { --size: 40px; /* totale klikdoelgrootte */ --line-w: 40px; /* breedte van de lijnen */ --line-h: 2px; /* dikte van de lijnen (dun) */ --gap: 6px; /* tussenruimte tussen de 2 lijnen */ --color: var(--color-primary); position: relative; display: inline-block; width: var(--size); height: var(--size); padding: 0; border: 0; background: transparent; cursor: pointer; outline-offset: 4px; } /* Lijnen worden getekend met ::before en ::after */ .nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; left: 50%; width: var(--line-w); height: var(--line-h); background: var(--color); border-radius: 999px; transform-origin: center; transform: translateX(-50%); transition: transform 220ms ease, opacity 180ms ease, top 220ms ease, background-color 220ms ease; display: none; } /* Bovenste lijntje */ .nav-toggle::before { top: calc(50% - (var(--gap) / 2) - var(--line-h)); } /* Onderste lijntje */ .nav-toggle::after { top: calc(50% + (var(--gap) / 2)); } /* Hover/focus: subtiel meer ruimte (niet verplicht) */ .nav-toggle:hover::before { top: calc(50% - (var(--gap) * 0.7) - var(--line-h)); } .nav-toggle:hover::after { top: calc(50% + (var(--gap) * 0.7)); } /* GEOPEND = X (2 lijnen kruisen) */ .nav-toggle.is-open::before { top: 50%; transform: translateX(-50%) rotate(45deg); } .nav-toggle.is-open::after { top: 50%; transform: translateX(-50%) rotate(-45deg); } /* Optioneel: verander kleur in open staat */ .nav-toggle.is-open::before, .nav-toggle.is-open::after { background-color: var(--color-primary); } /* Respecteer reduced motion */ @media (prefers-reduced-motion: reduce) { .nav-toggle::before, .nav-toggle::after { transition: none; } } .nav-menu { display: flex; justify-content: center; list-style: none; } .nav-menu li { margin: 0 10px; } nav ul li a { color: var(--color-text); font-size: 15px; text-decoration: none; padding: 8px 12px; border-radius: 4px; font-family: var(--font-jost); letter-spacing: 15%; line-height: 28px; } /* Hero Card */ .hero-card { position: relative; width: 100%; text-align: center; } .hero-card .hero-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .hero-card .couple-names { font-family: var(--font-eyesome); font-size: 100px; color: var(--color-primary); margin: 0; } .hero-card .hero-overlay h2 { margin-top: 0.5rem; font-size: 2rem; } .hero-title { color: white; font-family: var(--font-cormorant-italic); font-size: 28px; } /* Title Card */ .title-blok-h1{ color: var(--color-primary); font-family: var(--font-cormorant); font-size: 50px; line-height: 60px; letter-spacing: 10%; font-style: normal; font-weight: 400; text-align: center; } .title-blok-h2{ color: var(--color-primary); font-family: var(--font-cormorant); font-size: 35px; line-height: 45px; letter-spacing: 10%; font-style: normal; font-weight: 400; text-align: center; } .title-blok-h3{ color: var(--color-primary); font-family: var(--font-cormorant); font-size: 24px; line-height: 30px; letter-spacing: 10%; font-style: normal; font-weight: 400; text-align: center; } /* Tekst Card */ .text-card { display: flex; justify-content: center; } .text-card .text-content { max-width: 860px; font-family: var(--font-jost-light); color: var(--color-text); font-size: 17px; line-height: 28px; letter-spacing: 0%; font-weight: 300; text-align: center; padding: 0; } .text-card .text-content h1 { color: var(--color-primary); } /* Titel + tekst blok Card */ .title-text-section { padding-top: 3rem; padding-bottom: 3rem; } .title-text-grid { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; text-align: center; } .title-text-grid h2 { color: var(--color-primary); font-family: var(--font-cormorant); font-size: 35px; line-height: 45px; letter-spacing: 0.05em; font-weight: 400; text-align: left; margin: 0; } .title-text-grid .text-content { font-family: var(--font-jost-light); color: var(--color-text); font-size: 17px; line-height: 28px; font-weight: 300; text-align: left; max-width: 100%; } /* Quote Card */ .quote-card { display: flex; justify-content: center; } .quote-card .quote-text blockquote{ font-family: var(--font-cormorant-italic); color: var(--color-primary); font-size: 22px; font-weight: 400; text-align: center; letter-spacing: 0%; line-height: 32px; } .quote-text h2 { font-family: var(--font-jost); font-size: 12px; color: var(--color-primary); margin-top: 20px; text-align: center; text-transform: uppercase; position: relative; padding-bottom: 20px; } .quote-text h2::after { content: ""; display: block; width: 240px; height: 57px; margin: 12px auto 0; background: url('/templates-assets/dusty_pink/quote.png') no-repeat center; background-size: contain; } /* Grote foto Card */ .grote-foto { width: 100%; height: auto; } .grote-foto h2 { color: var(--color-primary); font-family: var(--font-cormorant); font-size: 35px; font-style: normal; font-weight: 400; letter-spacing: 10%; text-align: center; text-transform: uppercase; } .grote-foto img { margin-top: 35px; max-width: 1440px; margin: 35px auto 0 auto; border-top-right-radius: 100px; } /* Foto tekst Card */ .foto-tekst{ display: flex; align-items: center; justify-content: center; gap: 2rem; text-align: center; background-color: var(--color-background); } .foto-tekst .image-side{ background-image: url('../dusty_pink/foto-side-bg.png'); display: flex; justify-content: center; padding: 50px 70px; background-color: var(--color-primary); background-size: cover; } .foto-tekst .image-side img{ width: 60%; border-top-left-radius: 100px; min-height: 550px; } .foto-tekst .text-side{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 50px 30px; } .foto-tekst .text-side h2{ color: var(--color-primary); font-family: var(--font-cormorant); font-weight: 400; font-size: 35px; line-height: 38px; letter-spacing: 10%; text-transform: uppercase; text-align: left; max-width: 500px; } .foto-tekst .text-side .description { color: var(--color-text); font-family: var(--font-jost-light); font-size: 17px; line-height: 28px; letter-spacing: 0%; font-weight: 300; text-align: left; max-width: 500px; } /* Collage Card */ .collage-grid{ display: grid; gap: 16px; overflow: hidden; max-width: 1440px; margin: 0 auto 32px; padding: 0 16px; } .collage-layout h2{ font-family: var(--font-cormorant); color: var(--color-primary); font-size: 35px; font-weight: 400; letter-spacing: .1em; text-align: center; text-transform: uppercase; } .collage-grid .tile{ position: relative; overflow: hidden; } .collage-grid .tile img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* ===== Desktop layouts (≥641px) ===== */ .collage-grid.l1{ grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "a a a"; } .collage-grid.l1 .tile-1{ grid-area:a; max-height: 550px; border-radius: 100px; } .collage-grid.l2{ grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "a a b"; } .collage-grid.l2 .tile-1{ grid-area:a; max-height: 550px; border-top-left-radius: 100px; } .collage-grid.l2 .tile-2{ grid-area:b; max-height: 550px; border-top-right-radius: 100px; } .collage-grid.l3{ grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "a a a" "b c c"; } .collage-grid.l3 .tile-1{ grid-area:a; max-height: 550px; } .collage-grid.l3 .tile-2{ grid-area:b; max-height: 355px; border-bottom-left-radius: 100px; } .collage-grid.l3 .tile-3{ grid-area:c; max-height: 355px; border-bottom-right-radius: 100px; } .collage-grid.l4{ grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "a a a" "b c d"; } .collage-grid.l4 .tile-1{ grid-area:a; max-height: 550px; border-top-left-radius: 100px; border-top-right-radius: 100px; } .collage-grid.l4 .tile-2{ grid-area:b; max-height: 355px; } .collage-grid.l4 .tile-3{ grid-area:c; max-height: 355px; } .collage-grid.l4 .tile-4{ grid-area:d; max-height: 355px; } .collage-grid.l5{ grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "a a a" "b c d" "e e d"; } .collage-grid.l5 .tile-1{ grid-area:a; max-height: 550px; border-top-right-radius: 100px; } .collage-grid.l5 .tile-2{ grid-area:b; max-height: 355px; } .collage-grid.l5 .tile-3{ grid-area:c; max-height: 355px; } .collage-grid.l5 .tile-4{ grid-area:d; max-height: 730px; } .collage-grid.l5 .tile-5{ grid-area:e; max-height: 355px; border-bottom-left-radius: 100px; } /* ===== Mobiel (≤640px) ===== */ /* Standaard: 1 kolom, nette hoogteverhoudingen */ @media (max-width: 640px){ .collage-grid{ gap: 12px; } .collage-grid.l1, .collage-grid.l2, .collage-grid.l3, .collage-grid.l4{ grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: none; } .collage-grid.l1 .tile, .collage-grid.l2 .tile, .collage-grid.l3 .tile, .collage-grid.l4 .tile{ grid-area: auto !important; border-radius: 16px; max-height: none; aspect-ratio: 4 / 3; /* mooie crop op mobiel */ } /* Perfecte mobile layout voor 5 foto's (zoals je screenshot) */ .collage-grid.l5{ grid-template-columns: 1fr 1fr; grid-template-areas: "a a" /* brede landscape boven */ "b c" /* twee kleine naast elkaar */ "d d" /* hoge foto full width */ "e e"; /* brede landscape onder */ gap: 12px; } .collage-grid.l5 .tile{ border-radius:16px; max-height:none; } .collage-grid.l5 .tile-1{ grid-area:a; aspect-ratio:16/9; border-top-left-radius:24px; border-top-right-radius:24px; } .collage-grid.l5 .tile-2{ grid-area:b; aspect-ratio:1/1; } .collage-grid.l5 .tile-3{ grid-area:c; aspect-ratio:1/1; } .collage-grid.l5 .tile-4{ grid-area:d; aspect-ratio:3/4; } /* hoge foto */ .collage-grid.l5 .tile-5{ grid-area:e; aspect-ratio:16/9; border-bottom-left-radius:24px; border-bottom-right-radius:24px; } /* Afbeeldingen vullen de aspect-ratio netjes */ .collage-grid .tile img{ width:100%; height:100%; object-fit:cover; } } /* Schedule Card */ .schedule-wrapper { position: relative; overflow: hidden; } .schedule-wrapper::before { content: ''; position: absolute; top: 0; left: -83px; width: 300px; height: 300px; background: url('../dusty_pink/side1.png') no-repeat top left; background-size: contain; z-index: 0; pointer-events: none; transform: rotate(103deg); } .schedule-wrapper::after { content: ''; position: absolute; right: -50px; bottom: 0; width: 400px; height: 500px; background: url('../dusty_pink/side2.png') no-repeat bottom right; background-size: contain; z-index: 0; pointer-events: none; transform: rotate(-12deg); } .schedule-container { position: relative; z-index: 1; } .schedule-container { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 1440px; margin: 0 auto; gap: 60px; } .schedule-heading { font-family: var(--font-cormorant); font-weight: 400; font-size: 35px; color: var(--color-primary); letter-spacing: 0.1em; margin: 0 auto; text-transform: uppercase; } .timeline { position: relative; width: 100%; max-width: 900px; margin: 0 auto; padding: 0; list-style: none; } .timeline-item { position: relative; width: 100%; display: flex; justify-content: flex-start; margin: 40px 0; } .timeline-item:first-child { margin-top: 0; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item::before { content: ''; position: absolute; top: 0; bottom: -40px; left: 50%; width: 1px; background-color: var(--color-primary); opacity: 0.5; transform: translateX(-50%); z-index: 0; } .timeline-item:last-child::before { content: none; } .timeline-item:nth-child(odd) { justify-content: flex-end; } .timeline-dot { width: 14px; height: 14px; background-color: var(--color-primary); border-radius: 50%; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); z-index: 2; } .timeline-content { width: 45%; padding: 0 20px; text-align: left; top: -10px; position: relative; } .timeline-item:nth-child(even) .timeline-content { text-align: right; } .timeline-title { font-family: var(--font-cormorant); font-weight: 400; font-size: 24px; letter-spacing: 0.15em; color: var(--color-text); text-transform: uppercase; } .timeline-description { font-family: var(--font-jost-light); font-size: 17px; color: var(--color-text); line-height: 28px; font-weight: 300; letter-spacing: 0%; } .timeline-time { font-family: var(--font-cormorant-italic); font-size: 21px; font-weight: 400; color: var(--color-text); opacity: 0.8; margin-bottom: 10px; } /* Person Card */ .person-card img{ width: 287px; height: 317px; object-fit: cover; object-position: top; } .person-card h3{ font-family: var(--font-cormorant); font-weight: 400; font-size: 24px; letter-spacing: 0.15em; text-align: center; text-transform: uppercase; color: var(--color-text); } .person-card p{ font-family: var(--font-cormorant-italic); font-size: 21px; color: var(--color-text); font-weight: 400; letter-spacing: 0%; text-align: center; opacity: 0.8; } .person-card-wrapper:nth-child(2) img { border-bottom-left-radius: 100px; } .person-card-wrapper:nth-child(4) img { border-top-right-radius: 100px; } .person-card-wrapper:nth-child(5) img { border-bottom-left-radius: 100px; } .person-card-wrapper:nth-child(7) img { border-top-right-radius: 100px; } /* Countdown Card */ .card-countdown { text-align: center; display: flex; flex-direction: column; align-items: center; } .card-countdown h2{ font-family: var(--font-cormorant); font-weight: 400; font-size: 35px; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; color: var(--color-primary); } .countdown-timers { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; } .countdown-value{ font-family: var(--font-cormorant); font-weight: 400; font-size: 120px; letter-spacing: 0.1em; line-height: 1; color: var(--color-text); margin-bottom: 12px; opacity: 0.2; } .countdown-label{ font-family: var(--font-jost); font-size: 12px; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.15em; } .countdown-unit { position: relative; padding: 0 2rem; } .countdown-unit:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 10%; bottom: 10%; width: 1px; background: var(--color-primary); transform: rotate(25deg); height: 160px; } /* Countdown Map Card */ .countdown-map { height: 24rem; } .countdown-map .countdown{ background-color: var(--color-background); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50%; } .countdown-map .map{ width: 50%; } .map-link-wrapper { margin-top: 12px; text-align: center; } .map-link { font-family: var(--font-jost); font-size: 14px; text-decoration: underline; color: var(--color-primary); } .countdown-map .countdown h2{ font-family: var(--font-cormorant); width: 70%; font-weight: 400; font-size: 35px; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; color: var(--color-primary); } .countdown-days{ font-family: var(--font-cormorant-italic); font-weight: 400; font-size: 21px; line-height: 25px; color: var(--color-text); letter-spacing: 0em; width: 70%; } .countdown-map .live-countdown .countdown-wrapper{ display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .countdown-map .live-countdown .countdown-item{ background-color: white; width: 125px; height: 125px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .countdown-map .live-countdown .countdown-item .countdown-number{ font-family: var(--font-cormorant); font-weight: 400; font-size: 60px; letter-spacing: 0.1em; line-height: 1; color: var(--color-text); opacity: 0.6; } .countdown-map .live-countdown .countdown-item .countdown-text{ font-family: var(--font-jost); font-size: 12px; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.15em; } /* Form Card */ .card-form{ width: 70%; margin: 0 auto; text-align: center; border: 1px solid var(--color-primary); border-top-right-radius: 100px; border-bottom-left-radius: 100px; padding: 50px 0; display: flex; flex-direction: column; align-items: center; } .form-title{ font-family: var(--font-cormorant); font-weight: 400; font-size: 35px; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; color: var(--color-primary); } .form-intro{ font-family: var(--font-cormorant-italic); font-size: 21px; line-height: 25px; color: var(--color-text); letter-spacing: 0em; margin-bottom: 50px; } .form-fields{ display: flex; flex-wrap: wrap; width: 70%; justify-content: space-between; } .form-label { display: block; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-primary); } .form-input, .form-textarea, .form-select { width: 100%; border: none; border-bottom: 1px solid var(--color-primary); background: transparent; font-size: 15px; font-family: var(--font-cormorant); color: var(--color-text); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; } .form-required { color: var(--color-text); margin-left: 2px; } .form-group{ width: 45%; margin-bottom: 25px; } .form-group.full-width{ width: 100%; flex: 0 0 100%; } .form-submit{ background-color: var(--color-primary); color: white; font-family: var(--font-jost); padding: 12px 50px; border-radius: 0px; font-size: 17px; font-weight: 500; cursor: pointer; margin-top: 20px; } .card-form{ position: relative; overflow: visible; /* laat de illustratie naar buiten steken */ z-index: 0; } /* inhoud blijft boven alles */ .card-form > *{ position: relative; z-index: 1; } /* illustratie tegen de rechterrand, naar buiten */ .card-form::after{ content: ""; position: absolute; top: 50%; width: 340px; right: -200px; aspect-ratio: 1 / 1; background-image: url('/templates-assets/dusty_pink/formside.png'); background-repeat: no-repeat; background-position: center; background-size: contain; transform: translateY(-50%) rotate(170deg); pointer-events: none; z-index: 0; /* achter de form-inhoud */ } .card-form > *{ position: relative; z-index: 2; /* was 1 */ } .card-form::before{ content: ""; position: absolute; /* 1px naar binnen zodat de 1px border zichtbaar blijft */ inset: 1px; /* zelfde hoeken als de kaart */ border-top-right-radius: 100px; border-bottom-left-radius: 100px; /* kleur van de binnenkant: zet gelijk aan jouw paginabackground */ background: var(--card-bg, #fff); z-index: 1; /* boven ::after, onder de inhoud */ pointer-events: none; } .form-success{ color: var(--color-text); font-family: var(--font-jost-light); width: 70%; background-color: var(--color-background); padding: 7px 0; } /* Foutmelding Card */ .error-text { color: #ef4444; } /* Footer Card */ footer { background-color: var(--color-primary); font-family: var(--font-cormorant-italic); text-align: center; padding: 15px; font-size: 0.9rem; color: #ffff; } /* Password Card */ .password-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; /* Zachte gradient in Dusty Pink sfeer */ background: linear-gradient(135deg, rgba(136,74,84,0.05), rgba(250,242,238,0.8)), var(--pw-bg); position: relative; overflow: hidden; animation: fadeIn 0.8s ease; } /* Optioneel: subtiele decoratieve corners met bestaande assets uit de template */ .password-wrapper::before, .password-wrapper::after { content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; opacity: 0.12; } .password-wrapper::before { top: -40px; left: -60px; width: 320px; height: 320px; background-image: url('../dusty_pink/side1.png'); transform: rotate(100deg); } .password-wrapper::after { right: -40px; bottom: -60px; width: 380px; height: 440px; background-image: url('../dusty_pink/side2.png'); transform: rotate(-12deg); } /* 3) Kaart */ .password-card { background: #fff; width: 100%; max-width: 520px; padding: 2.5rem 2.25rem; border-radius: 20px; /* bewust subtieler dan 100px */ box-shadow: 0 16px 48px rgba(0,0,0,0.08); text-align: center; position: relative; } /* 4) Typografie */ .couple-names { font-family: var(--pw-script); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--pw-accent); margin: 0 0 .5rem; line-height: 1.1; } .subtitle { font-family: var(--pw-serif); font-size: 1.1rem; color: var(--pw-accent); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 .75rem; } .info-text { font-family: var(--pw-sans); font-size: .95rem; color: var(--pw-ink); opacity: .8; margin: 0 0 1.5rem; font-style: normal; /* geen italic hier voor rust */ } /* 5) Form */ .password-card form { display: flex; flex-direction: column; align-items: center; gap: .75rem; width: 100%; } .password-card input[type="password"] { width: 100%; padding: 0.9rem 1rem; border: 1px solid color-mix(in srgb, var(--pw-accent) 55%, #ffffff); border-radius: 12px; background: #fff; font-family: var(--pw-serif); font-size: 1rem; color: var(--pw-ink); outline: none; transition: box-shadow .25s ease, border-color .25s ease; box-sizing: border-box; } .password-card input[type="password"]::placeholder { color: color-mix(in srgb, var(--pw-ink) 55%, #ffffff); } .password-card input[type="password"]:focus { border-color: var(--pw-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pw-accent) 20%, transparent); } .password-card button[type="submit"] { width: 100%; padding: 0.9rem 1rem; border: none; border-radius: 12px; background: var(--pw-accent); color: #fff; font-family: var(--pw-sans); font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform .06s ease, filter .2s ease, box-shadow .2s ease; box-shadow: 0 8px 20px rgba(136,74,84,0.25); } .password-card button[type="submit"]:hover { filter: brightness(1.02); } .password-card button[type="submit"]:active { transform: translateY(1px); } /* 6) Foutmelding */ .error-text { color: #e63946; /* nette, duidelijke roodtint */ font-family: var(--pw-sans); font-size: .95rem; margin: 0 0 .75rem; } /* 7) Subtiele “brand” underline bij hover van input (alleen esthetisch, geen JS nodig) */ .password-card input[type="password"]:hover { border-color: color-mix(in srgb, var(--pw-accent) 70%, #ffffff); } /* 8) Kleine animatie util (je HTML gebruikt al animate-fade-in class) */ .animate-fade-in { animation: fadeIn 0.8s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 9) Mobile tweaks */ @media (max-width: 640px) { .password-wrapper { padding: 1.25rem; } .password-card { padding: 1.75rem 1.25rem; border-radius: 16px; } } @media (max-width: 768px) { body{ overflow-x: hidden; } .nav-toggle::before, .nav-toggle::after { display: block; } .header-namen { font-size: 30px; } .header-namen::after { width: 45px; height: 57px; } .header-container { justify-content: space-between; } nav ul li a { font-size: 1rem; } .nav-toggle { display: block; } .nav-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: var(--color-background); display: none; flex-direction: column; text-align: left; padding: 10px 0; } .nav-menu.active { display: flex; } .nav-menu li { margin: 10px 0; } main { min-height: 100vh; } .container { background-position: center top; background-size: cover; } .hero-card .couple-names { font-size: 50px; } .hero-card .hero-title{ font-size: 30px; } .foto-tekst{ flex-direction: column; } .foto-tekst .image-side img{ width: 100%; } .foto-tekst .image-side { padding: 25px 35px; } .schedule-wrapper::before{ display: none; } .schedule-wrapper::after{ width: 200px; height: 250px; } .timeline-dot{ display: none; } .timeline-item::before { display: none; } .timeline-item:nth-child(odd), .timeline-item { justify-content: center; } .timeline-content { width: 100%; text-align: center !important; } .countdown-map { flex-direction: column; } .countdown-map .countdown{ width: 100%; } .countdown-map .map{ width: 100%; } .countdown-value{ font-size: 80px; } .countdown-unit:not(:last-child)::after { display: none; } .card-countdown h2{ font-size: 28px; } /* Columns: Countdown + Map (mobile) */ .countdown-map { display: flex; flex-direction: column; align-items: stretch; height: unset !important; } .countdown-map .countdown, .countdown-map .map { width: 100%; } .countdown-map .map{ height: 400px; } .countdown-map .countdown { padding: 24px 16px; } .countdown-map .countdown h2 { width: 100%; font-size: 28px; line-height: 1.25; margin: 0 auto 8px; text-align: center; } .countdown-days { width: 100%; font-size: 16px; line-height: 22px; text-align: center; margin: 4px auto 0; } .countdown-map .live-countdown .countdown-wrapper { gap: 12px; margin-top: 16px; } .countdown-map .live-countdown .countdown-item { width: 125px; height: 125px; } .countdown-map .live-countdown .countdown-item .countdown-number { font-size: 44px; } .countdown-map .live-countdown .countdown-item .countdown-text { font-size: 11px; letter-spacing: 0.12em; } /* Map iframe hoogte op mobiel */ .countdown-map .map iframe { width: 100%; height: 280px; /* pas aan naar 240-320 als nodig */ border: 0; display: block; } .form-fields{ display: flex; flex-direction: column; } .card-form::after { display: none; } .card-form { width: 90%; } .form-group { width: 100%; } }