/* ========================================================================== Eefje — Base: reset, typography, layout primitives, theme worlds, motion ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-weight: 400; color: var(--text, var(--grond)); background: var(--bg, var(--room)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--kleigrond); color: var(--room); } :focus-visible { outline: 2px solid var(--oker); outline-offset: 3px; } /* -------------------------------------------------------------------------- Theme worlds — each sets scoped custom properties consumed everywhere. Applied on (or via a page wrapper). -------------------------------------------------------------------------- */ .theme { background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } .theme--home, .theme--somi { --bg: var(--room); --text: var(--grond); --accent: var(--kleigrond); --header-border: rgba(52, 33, 26, 0.1); --header-blur: rgba(241, 230, 212, 0.8); --header-icon: hart; } .theme--somi { --header-icon: spiraal; } .theme--cirkels { --bg: var(--kleigrond); --text: var(--room); --accent: var(--room); --header-border: rgba(241, 230, 212, 0.22); --header-blur: rgba(178, 90, 56, 0.82); --header-icon: kring; } .theme--indo { --bg: var(--grond); --text: var(--room); --accent: var(--oker); --header-border: rgba(241, 230, 212, 0.18); --header-blur: rgba(52, 33, 26, 0.82); --header-icon: melati; } .theme--1op1 { --bg: var(--grond); --text: var(--room); --accent: var(--zand); --header-border: rgba(241, 230, 212, 0.18); --header-blur: rgba(52, 33, 26, 0.82); --header-icon: hart; } .theme--kom-erbij { --bg: var(--grond); --text: var(--room); --accent: var(--oker); --header-border: rgba(241, 230, 212, 0.18); --header-blur: rgba(52, 33, 26, 0.82); --header-icon: hart; } .page { flex: 1 0 auto; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 1080px; } .section { padding-block: var(--sp-80); } .section--tight { padding-block: var(--sp-40); } @media (max-width: 760px) { .container { padding-inline: var(--gutter-sm); } } /* -------------------------------------------------------------------------- Typographic primitives -------------------------------------------------------------------------- */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin: 0; } .display { font-family: var(--font-display); font-weight: 300; line-height: 1.03; margin: 0; } .display em, .accent-word { font-style: italic; color: var(--accent); } .pull-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--fs-quote); line-height: 1.35; color: var(--accent); text-align: center; margin: 0; } .body-lg { font-size: var(--fs-body-lg); line-height: 1.65; } .rich > p { margin: 0 0 1em; } .rich > p:last-child { margin-bottom: 0; } .rich h2 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-md); line-height: 1.15; color: var(--accent); margin: 1.1em 0 0.45em; } .rich h2:first-child { margin-top: 0; } /* -------------------------------------------------------------------------- Buttons & links -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1; padding: 15px 32px; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; transition: background var(--dur-hover) ease, color var(--dur-hover) ease, border-color var(--dur-hover) ease; } .btn--primary { background: var(--kleigrond); color: var(--room); } .btn--primary:hover { background: var(--oxbloed); } .btn--dark { background: var(--grond); color: var(--room); } .btn--dark:hover { background: var(--kleigrond); } .btn--outline { background: transparent; border-color: rgba(241, 230, 212, 0.5); color: var(--room); } .btn--outline:hover { background: var(--room); color: var(--grond); border-color: var(--room); } .link-underline { font-size: var(--fs-body); font-weight: 600; color: var(--accent); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; white-space: nowrap; transition: opacity var(--dur-hover) ease; } .link-arrow { font-size: var(--fs-body-sm); font-weight: 600; color: var(--accent); } /* -------------------------------------------------------------------------- Motion — page enter, breathing; honour reduced-motion -------------------------------------------------------------------------- */ @keyframes ef-pagein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes ef-adem { 0%, 100% { transform: scale(1); } 42% { transform: scale(1.22); } 58% { transform: scale(1.22); } } .page-enter { animation: ef-pagein 0.6s ease-out both; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .page-enter { animation: none; } }