/* ========================================================================== Narcose Tandarts Almere — design system Tokens, reset, typography, buttons, motion and Elementor full-width rules. ========================================================================== */ :root { /* Type */ --nta-font-head: "SUSE", "DM Sans", system-ui, -apple-system, sans-serif; --nta-font-body: "DM Sans", system-ui, -apple-system, sans-serif; /* Turquoise scale (primary) */ --nta-teal-50: #f2fafb; --nta-teal-100: #e2f4f6; --nta-teal-200: #c2e8ec; --nta-teal-300: #93d7de; --nta-teal-400: #52bec8; --nta-teal-500: #17a2af; --nta-teal-600: #0c7b88; --nta-teal-700: #095f6a; --nta-teal-800: #084c56; --nta-teal-900: #06323b; /* Semantic */ --nta-primary: var(--nta-teal-600); --nta-primary-hover: var(--nta-teal-700); --nta-accent: var(--nta-teal-500); --nta-deep: var(--nta-teal-900); /* Neutrals */ --nta-white: #ffffff; --nta-mist: #f4fafb; --nta-sand: #f7f7f5; --nta-line: #e2ecee; --nta-line-soft: #eef4f5; --nta-ink: #0d2229; --nta-ink-soft: #2c464e; --nta-body: #445b63; --nta-muted: #718b93; /* Elevation */ --nta-shadow-sm: 0 1px 2px rgba(6, 50, 59, .05), 0 4px 12px rgba(6, 50, 59, .04); --nta-shadow-md: 0 2px 6px rgba(6, 50, 59, .05), 0 14px 34px rgba(6, 50, 59, .07); --nta-shadow-lg: 0 4px 12px rgba(6, 50, 59, .06), 0 30px 70px rgba(6, 50, 59, .12); /* Geometry */ --nta-radius-sm: 8px; --nta-radius: 14px; --nta-radius-lg: 24px; --nta-radius-xl: 34px; /* Rhythm */ --nta-shell: 1240px; --nta-gutter: clamp(20px, 5vw, 64px); --nta-section-y: clamp(64px, 8vw, 128px); /* Motion */ --nta-ease: cubic-bezier(.22, .61, .36, 1); --nta-ease-out: cubic-bezier(.16, 1, .3, 1); --nta-dur: .45s; /* Header height, kept in sync by JS for anchor offsets */ --nta-header-h: 88px; } /* --------------------------------------------------------------- Reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The header scrolls away, so anchors only need breathing room; the bottom padding keeps targets clear of the docked action bar. */ scroll-padding-top: 24px; scroll-padding-bottom: 110px; } body { margin: 0; padding: 0; background: var(--nta-white); color: var(--nta-body); font-family: var(--nta-font-body); font-size: 1rem; font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* No overflow rule on /: `hidden` would turn body into a scroll container and `clip` would propagate to the viewport and stop it scrolling altogether. Horizontal bleed is contained by the sections themselves (`.nta-section { overflow: clip }`) and by the hero stage. */ body.nta-nav-open { overflow: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--nta-font-head); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--nta-ink); text-wrap: balance; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--nta-primary); text-decoration: none; transition: color .25s var(--nta-ease); } a:hover { color: var(--nta-primary-hover); } img, svg, video { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; } figure { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--nta-teal-200); color: var(--nta-teal-900); } /* --------------------------------------------------------- Focus states -- */ :focus-visible { outline: 3px solid var(--nta-teal-500); outline-offset: 3px; border-radius: 4px; } .nta-skip { position: absolute; left: 16px; top: -100px; z-index: 9999; padding: 12px 20px; background: var(--nta-white); color: var(--nta-teal-900); border-radius: var(--nta-radius-sm); box-shadow: var(--nta-shadow-md); font-weight: 600; transition: top .2s var(--nta-ease); } .nta-skip:focus { top: 16px; } .nta-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------- Layout ---- */ .nta-shell { width: 100%; max-width: calc(var(--nta-shell) + (var(--nta-gutter) * 2)); margin-inline: auto; padding-inline: var(--nta-gutter); } .nta-shell--wide { max-width: calc(1480px + (var(--nta-gutter) * 2)); } .nta-section { position: relative; width: 100%; max-width: 100%; margin: 0; padding: var(--nta-section-y) 0; overflow: clip; } .nta-section--tight { padding-block: clamp(48px, 5vw, 80px); } .nta-section--mist { background: var(--nta-mist); } .nta-section--sand { background: var(--nta-sand); } .nta-section--deep { background: var(--nta-deep); color: rgba(255, 255, 255, .78); } .nta-section--deep h1, .nta-section--deep h2, .nta-section--deep h3, .nta-section--deep h4 { color: var(--nta-white); } /* ---------------------------------------------------------- Typography --- */ /* Section label. Flat by design: no pill, no background, no border. The animated brand mark in front of it is the only ornament, and it is the same mark in every section including the hero. */ .nta-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0; background: none; border: 0; border-radius: 0; font-family: var(--nta-font-body); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--nta-primary); } .nta-section--deep .nta-eyebrow { color: var(--nta-teal-300); } .nta-title { font-size: clamp(1.9rem, 1.15rem + 2.4vw, 3.15rem); margin-bottom: .45em; } .nta-title--lg { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem); } .nta-title--sm { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem); } .nta-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); line-height: 1.72; color: var(--nta-body); max-width: 62ch; } .nta-section--deep .nta-lead { color: rgba(255, 255, 255, .78); } .nta-text > p + p { margin-top: 0; } /* ------------------------------------------------------------- Buttons --- */ .nta-btn { --btn-bg: var(--nta-primary); --btn-fg: var(--nta-white); --btn-bd: transparent; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; border: 1.5px solid var(--btn-bd); border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--nta-font-body); font-size: .9375rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-align: center; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .3s var(--nta-ease), box-shadow .3s var(--nta-ease), background-color .3s var(--nta-ease), color .3s var(--nta-ease), border-color .3s var(--nta-ease); } .nta-btn svg { flex: none; transition: transform .35s var(--nta-ease-out); } .nta-btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6, 50, 59, .18); } .nta-btn:hover svg { transform: translateX(3px); } .nta-btn:active { transform: translateY(0); } .nta-btn--primary { --btn-bg: var(--nta-primary); } .nta-btn--primary:hover { --btn-bg: var(--nta-primary-hover); } .nta-btn--ghost { --btn-bg: transparent; --btn-fg: var(--nta-teal-800); --btn-bd: var(--nta-teal-200); } .nta-btn--ghost:hover { --btn-bg: var(--nta-teal-50); --btn-fg: var(--nta-teal-800); --btn-bd: var(--nta-teal-400); box-shadow: 0 10px 26px rgba(6, 50, 59, .08); } .nta-btn--white { --btn-bg: var(--nta-white); --btn-fg: var(--nta-teal-800); } .nta-btn--white:hover { --btn-bg: var(--nta-teal-50); --btn-fg: var(--nta-teal-900); } .nta-btn--outline-light { --btn-bg: transparent; --btn-fg: var(--nta-white); --btn-bd: rgba(255, 255, 255, .35); } .nta-btn--outline-light:hover { --btn-bg: rgba(255, 255, 255, .1); --btn-fg: var(--nta-white); --btn-bd: rgba(255, 255, 255, .7); } .nta-btn--sm { padding: 11px 22px; font-size: .875rem; } .nta-btn--block { width: 100%; } /* Text link with arrow */ .nta-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9375rem; color: var(--nta-primary); line-height: 1.3; } .nta-link svg { flex: none; transition: transform .35s var(--nta-ease-out); } .nta-link:hover svg { transform: translateX(4px); } .nta-link::after { content: none; } .nta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 34px; } /* --------------------------------------------------------------- Bits ---- */ .nta-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--nta-teal-50); border: 1px solid var(--nta-teal-100); color: var(--nta-teal-800); font-size: .8125rem; font-weight: 600; line-height: 1.3; } .nta-badge svg { color: var(--nta-teal-500); flex: none; } .nta-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--nta-teal-50); color: var(--nta-teal-600); transition: background-color .35s var(--nta-ease), color .35s var(--nta-ease), transform .35s var(--nta-ease); } .nta-media { position: relative; overflow: hidden; border-radius: var(--nta-radius-lg); background: var(--nta-teal-50); } /* Images inside aspect-ratio frames are absolutely positioned: a percentage height does not resolve against a box sized by aspect-ratio alone. */ .nta-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .nta-media--tall { aspect-ratio: 4 / 5; } .nta-media--wide { aspect-ratio: 16 / 10; } .nta-media--square { aspect-ratio: 1 / 1; } /* Soft decorative glows */ .nta-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); opacity: .55; background: radial-gradient(circle, var(--nta-teal-200), transparent 70%); z-index: 0; } /* --------------------------------------------------------------- Motion -- */ [data-nta-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--nta-ease-out), transform .8s var(--nta-ease-out); transition-delay: var(--nta-delay, 0ms); will-change: opacity, transform; } [data-nta-reveal="fade"] { transform: none; } [data-nta-reveal="left"] { transform: translateX(-28px); } [data-nta-reveal="right"] { transform: translateX(28px); } [data-nta-reveal="zoom"] { transform: scale(.965); } .nta-in[data-nta-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } [data-nta-reveal] { opacity: 1 !important; transform: none !important; } } /* ------------------------------------------- Elementor full-width rules -- */ /* Kill the theme/Elementor boxed constraints so every container runs edge to edge. */ .page-wrapper, .page-content-wrapper { width: 100%; max-width: 100%; margin: 0; padding: 0; } body.elementor-page .site-content, .elementor, .elementor-section-wrap { width: 100%; max-width: 100%; } /* Elementor containers used on this site are always full bleed; all inner spacing lives inside the custom widgets themselves. */ .elementor-element.e-con, .elementor-element.e-con-inner, .elementor-section.elementor-section-boxed > .elementor-container { width: 100%; max-width: 100%; margin-inline: 0; padding-inline: 0; } .elementor-widget-container { width: 100%; max-width: 100%; margin: 0; padding: 0; } .elementor-widget:not(:last-child) { margin-block-end: 0; } /* Every custom widget wrapper stays edge to edge and manages its own padding. */ .nta-w { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Editor helper: give empty containers a usable drop area. */ .elementor-editor-active .e-con.e-con--empty { min-height: 80px; }