/* Fonts loades via i (parallelt, hurtigere første maling) */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --cream: #f9ece4; --green: #22523b; --green-light: #2d6b4d; --green-dark: #1a3f2d; --coral: #a94745; --coral-light: #f7b6b3; --coral-dark: #c94e4b; --white: #ffffff; --text: #2a2a2a; --text-light: #5a5a5a; --font-display: 'Lora', Georgia, serif; --font-handwritten: 'Shadows Into Light Two', cursive; --font-body: 'Jost', sans-serif; /* The primary coral is readable as text and as a white-text fill across the site's white, cream, blush, and warm-grey surfaces. The separate text tone remains available where a little more contrast is useful. */ --coral-text: #a6403e; /* Rollout-tokens (Sub-projekt 1): radius / dome-kurve / skygge / easing */ /* --- Afstands-skala (8px-takt med et par fine trin) ------------------- */ --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 36px; --space-xl: 56px; --space-2xl: 80px; --space-3xl: 110px; /* --- Radius-skala (bløde hjørner; --radius-card 28px bevares) --------- */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 18px; /* = --radius-soft */ --radius-lg: 24px; --radius-card: 28px; /* Mettes kanon for kort */ --radius-soft: 18px; --radius-pill: 999px; /* --- Dome-kurven (grønne bånd der rejser sig som bløde bakker) -------- */ --dome: 100% 100% 0 0 / 58px 58px 0 0; /* --- Skygger (grøn-tonede, aldrig grå/hårde) ------------------------- */ --shadow-soft: 0 6px 18px rgba(26, 63, 45, .05); --shadow-card: 0 10px 32px rgba(26, 63, 45, .07); --shadow-lift: 0 20px 50px rgba(34, 82, 59, .12); --shadow-float: 0 18px 44px rgba(26, 63, 45, .10); /* --- Easings (rolige, fjedrende — aldrig hoppende) ------------------- */ --ease-spring: cubic-bezier(0.22, 0.8, 0.3, 1); --ease-card: cubic-bezier(0.25, 0.8, 0.25, 1); --ease-soft: cubic-bezier(0.37, 0, 0.63, 1); --ease-breath: cubic-bezier(0.2, 0.72, 0.18, 1); --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); /* --- Layout-mål ------------------------------------------------------ */ --measure-prose: 62ch; /* Mettes centrerede prosa-bredde */ --maxw-page: 1200px; --maxw-content: 1100px; } html { scroll-behavior: smooth; font-size: 20px; } html, body { overflow-x: clip; } body { font-family: var(--font-body); color: var(--text); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ============================================ ANIMATIONS ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes pulse-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } } @keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); } } @keyframes draw-line { from { width: 0; } to { width: 80px; } } .animate-on-scroll { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; } html.amn-reveal-ready .animate-on-scroll:not(.visible) { opacity: 0; transform: translateY(30px); } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } /* ============================================ NAVBAR ============================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--cream); border-bottom: 1px solid rgba(34, 82, 59, 0.08); transition: all 0.4s ease; } .navbar.scrolled { background: rgba(249, 236, 228, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(34, 82, 59, 0.08); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 30px; display: flex; align-items: center; justify-content: center; gap: 40px; height: 80px; } /* Text-based logo */ .nav-logo { text-decoration: none; color: var(--green); font-family: var(--font-handwritten); font-size: 1rem; line-height: 1.08; letter-spacing: 0.5px; transition: color 0.3s ease; white-space: nowrap; text-align: center; } .nav-logo:hover { color: var(--coral-text); } .nav-logo span { display: block; } .nav-links { display: flex; align-items: center; gap: 8px; } .nav-item a { text-decoration: none; color: var(--green); font-family: var(--font-handwritten); font-size: 1.05rem; font-weight: 400; letter-spacing: 0.5px; text-transform: none; padding: 8px 12px; border-radius: 6px; transition: all 0.25s ease; position: relative; } .nav-item a::after { content: ''; position: absolute; bottom: 4px; left: 50%; width: 0; height: 2px; background: var(--coral); transition: all 0.3s ease; transform: translateX(-50%); border-radius: 2px; } .nav-item a:hover::after { width: 60%; } .nav-item a:hover { color: var(--coral-text); } .nav-item.has-dropdown { position: relative; } .dropdown-top { display: flex; align-items: center; gap: 2px; } .dropdown-toggle { appearance: none; border: 0; background: transparent; color: var(--green); width: 28px; height: 34px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.24s ease, color 0.24s ease; } .dropdown-toggle:hover, .dropdown-toggle:focus-visible { background: rgba(34, 82, 59, 0.08); color: var(--coral-text); outline: none; } .dropdown-toggle .dropdown-arrow { font-size: 0.55em; transition: transform 0.2s; display: inline-block; } .nav-item.has-dropdown:hover .dropdown-toggle .dropdown-arrow, .nav-item.has-dropdown.open .dropdown-toggle .dropdown-arrow, .dropdown-toggle[aria-expanded="true"] .dropdown-arrow { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: 100%; left: 0; background: var(--white); border-radius: 12px; box-shadow: 0 10px 40px rgba(34, 82, 59, 0.12); padding: 12px 0; min-width: 260px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.25s ease; border: 1px solid rgba(34, 82, 59, 0.06); } .nav-item.has-dropdown:hover .dropdown-menu, .nav-item.has-dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-menu a { display: block; padding: 10px 22px; color: var(--text); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none; transition: all 0.2s ease; } .dropdown-menu a::after { display: none; } .dropdown-menu a:hover { background: var(--cream); color: var(--coral-text); padding-left: 28px; } .has-submenu { position: relative; } .submenu { display: none; padding-left: 16px; } .has-submenu:hover .submenu { display: block; } .submenu a { font-size: 0.85rem; color: var(--text-light); } /* Dropdown group titles */ .dropdown-group-title { display: block; padding: 10px 22px 4px; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--green); letter-spacing: 1px; text-transform: uppercase; pointer-events: none; } .dropdown-group-title--link { pointer-events: auto; cursor: pointer; text-decoration: none; transition: color 0.2s ease; font-family: var(--font-display) !important; font-size: 1.1rem !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; } .dropdown-group-title--link:hover { color: var(--coral-text) !important; padding-left: 22px !important; background: transparent !important; } .dropdown-group-title:first-child { padding-top: 6px; } .dropdown-divider { height: 1px; background: rgba(34, 82, 59, 0.08); margin: 8px 22px; } .contact-btn { background: var(--green) !important; color: var(--white) !important; padding: 10px 24px !important; border-radius: 50px !important; font-weight: 500 !important; font-size: 0.8rem !important; letter-spacing: 1.5px !important; transition: all 0.3s ease !important; } .contact-btn::after { display: none !important; } .contact-btn:hover { background: var(--coral) !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(228, 101, 98, 0.3); } /* Mobile menu */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--green); margin: 5px 0; transition: all 0.3s ease; border-radius: 2px; } .menu-close-btn { display: none; } /* ============================================ HERO ============================================ */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 30px 120px; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(228, 101, 98, 0.08) 0%, transparent 70%); border-radius: 50%; animation: float 8s ease-in-out infinite; } .hero::after { content: ''; position: absolute; bottom: -10%; left: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(34, 82, 59, 0.06) 0%, transparent 70%); border-radius: 50%; animation: float 10s ease-in-out infinite reverse; } .hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; width: 100%; position: relative; z-index: 1; } .hero-content { text-align: left; position: relative; z-index: 1; } /* Hero video carousel - overlapping rotating cards */ .hero-video-carousel { position: relative; width: 100%; height: 520px; display: flex; align-items: center; justify-content: center; } .video-slot { position: absolute; width: 260px; height: 420px; border-radius: 24px; overflow: hidden; background: rgba(34, 82, 59, 0.04); border: 2px solid rgba(34, 82, 59, 0.06); display: flex; align-items: center; justify-content: center; transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 15px 40px rgba(34, 82, 59, 0.1); } .video-slot video { width: 100%; height: 100%; object-fit: cover; } .video-slot--1 { z-index: 3; transform: rotate(-2deg) translateX(0); } .video-slot--2 { z-index: 2; transform: rotate(4deg) translateX(40px) translateY(20px); opacity: 0.7; } .video-slot--3 { z-index: 1; transform: rotate(-5deg) translateX(-30px) translateY(35px); opacity: 0.45; } /* Active states for rotation */ .video-slot.active { z-index: 3; opacity: 1; transform: rotate(-2deg) translateX(0) translateY(0); } .video-slot.behind-right { z-index: 2; opacity: 0.7; transform: rotate(4deg) translateX(40px) translateY(20px); } .video-slot.behind-left { z-index: 1; opacity: 0.45; transform: rotate(-5deg) translateX(-30px) translateY(35px); } .hero-video-placeholder { color: var(--text-light); font-family: var(--font-handwritten); font-size: 1.2rem; text-align: center; padding: 30px; } .hero-tagline { font-family: var(--font-handwritten); font-size: 1.3rem; color: var(--coral-text); margin-bottom: 20px; letter-spacing: 1px; animation: fadeInUp 0.8s ease both; } .hero-keywords { font-family: var(--font-body); font-size: 0.75rem; font-weight: 400; color: var(--green); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 45px; opacity: 0.55; animation: fadeInUp 0.8s ease 0.2s both; white-space: nowrap; } .hero-logo-text { font-family: var(--font-handwritten); font-size: clamp(3rem, 7vw, 5rem); color: var(--green); line-height: 1.05; margin-bottom: 30px; animation: fadeInUp 0.8s ease 0.15s both; } .hero-logo-text span { display: block; } .hero h1 { font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 600; color: var(--green); line-height: 1.12; margin-bottom: 30px; letter-spacing: 0; overflow-wrap: break-word; hyphens: auto; } .hero-description { font-size: 1.05rem; color: var(--text-light); max-width: 550px; margin: 0 0 40px; line-height: 1.8; font-weight: 300; animation: fadeInUp 0.8s ease 0.3s both; } .hero-cta { display: inline-block; background: var(--green); color: var(--white); padding: 16px 42px; border-radius: 50px; text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.3px; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(34, 82, 59, 0.2); animation: fadeInUp 0.8s ease 0.45s both; position: relative; overflow: hidden; } .hero-cta::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition: left 0.5s ease; } .hero-cta:hover::before { left: 100%; } .hero-cta:hover { background: var(--coral); transform: translateY(-3px); box-shadow: 0 8px 30px rgba(228, 101, 98, 0.3); } /* Scroll indicator */ .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; animation: fadeInUp 1s ease 1s both; } .scroll-indicator span { font-family: var(--font-handwritten); font-size: 0.85rem; color: var(--text-light); opacity: 0.6; } .scroll-arrow { width: 24px; height: 24px; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); transform: rotate(45deg); animation: float 2s ease-in-out infinite; opacity: 0.5; } /* ============================================ SECTIONS - GENERAL ============================================ */ section { padding: 100px 30px; } .section-label { font-family: var(--font-handwritten); font-size: 1.1rem; color: var(--coral-text); text-align: center; margin-bottom: 10px; } .section-title { font-family: var(--font-display); font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 600; color: var(--green); text-align: center; margin-bottom: 20px; letter-spacing: 0; overflow-wrap: break-word; hyphens: auto; } .section-subtitle { text-align: center; color: var(--text-light); font-size: 1.1rem; max-width: 600px; margin: 0 auto 60px; font-weight: 300; } /* Animated underline for section titles */ .section-title::after { content: ''; display: block; width: 60px; height: 3px; background: linear-gradient(90deg, var(--coral), var(--coral-light)); margin: 15px auto 0; border-radius: 2px; } /* ============================================ OFFERINGS / SERVICES ============================================ */ .offerings { background: var(--white); } .offerings-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .offering-card { background: var(--cream); border-radius: 20px; padding: 40px 35px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; } .offering-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--coral)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .offering-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(34, 82, 59, 0.12); } .offering-card:hover::before { transform: scaleX(1); } .offering-icon { width: 50px; height: 50px; background: var(--green); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--white); font-size: 1.4rem; transition: all 0.3s ease; } .offering-card:hover .offering-icon { background: var(--coral); transform: rotate(-5deg) scale(1.05); } .offering-card h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 600; overflow-wrap: break-word; hyphens: auto; color: var(--green); margin-bottom: 12px; } .offering-card p { color: var(--text-light); font-size: 0.95rem; line-height: 1.7; margin-bottom: 20px; flex-grow: 1; } .offering-link { color: var(--coral-text); text-decoration: none; font-weight: 500; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.3s ease, color 0.2s ease; } .offering-link:hover { gap: 14px; color: var(--coral-dark); } /* ============================================ ABOUT ============================================ */ .about { background: var(--cream); } .about-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-image { position: relative; } .about-image img { width: 100%; height: auto; max-width: 450px; border-radius: 24px; box-shadow: 0 20px 50px rgba(34, 82, 59, 0.15); transition: transform 0.5s ease, box-shadow 0.5s ease; } .about-image:hover img { transform: rotate(1deg) scale(1.02); box-shadow: 0 25px 60px rgba(34, 82, 59, 0.2); } .about-image::after { content: ''; position: absolute; bottom: -15px; right: -15px; width: 100%; height: 100%; max-width: 450px; border-radius: 24px; border: 3px solid var(--coral); z-index: -1; transition: all 0.5s ease; } .about-image:hover::after { bottom: -10px; right: -10px; } .about-text h2 { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--green); margin-bottom: 24px; } .about-text p { color: var(--text-light); font-size: 1rem; line-height: 1.8; margin-bottom: 16px; } /* ============================================ FOOTER ============================================ */ .footer { background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%); color: var(--cream); padding: 60px 30px 30px; border-top: 0; } .footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer h3 { font-family: var(--font-display); font-size: clamp(1.1rem, 4.5vw, 1.4rem); font-weight: 600; overflow-wrap: anywhere; margin-bottom: 20px; letter-spacing: 1px; } .footer a { color: rgba(249, 236, 228, 0.8); text-decoration: none; transition: all 0.2s ease; display: block; margin-bottom: 10px; font-size: 0.95rem; } .footer a:hover { color: var(--coral-light); padding-left: 4px; } .footer-contact a, .footer-contact span { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .footer-social { display: flex; gap: 16px; margin-top: 10px; } .footer-social a { width: 40px; height: 40px; background: rgba(249, 236, 228, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .footer-social a:hover { background: var(--coral); transform: translateY(-3px); } .footer-social svg { width: 18px; height: 18px; fill: var(--cream); } .footer-bottom { text-align: center; padding-top: 30px; border-top: 0; font-size: 0.85rem; color: rgba(249, 236, 228, 0.5); } /* ============================================ FEATURE CARDS (playful approach/tilgang sections) ============================================ */ .feature-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; padding: 0 30px; } .feature-item { background: var(--white); border-radius: 20px; padding: 35px 30px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .feature-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--coral), var(--green)); transform: scaleY(0); transform-origin: top; transition: transform 0.4s ease; } .feature-item:hover { transform: translateY(-6px); box-shadow: 0 15px 40px rgba(34, 82, 59, 0.1); } .feature-item:hover::before { transform: scaleY(1); } .feature-item .feature-number { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--coral); opacity: 0.3; line-height: 1; margin-bottom: 10px; transition: all 0.3s ease; } .feature-item:hover .feature-number { opacity: 0.6; transform: scale(1.1); } .feature-item .feature-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--green), var(--green-light)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--white); transition: all 0.3s ease; } .feature-item:hover .feature-icon { background: linear-gradient(135deg, var(--coral), var(--coral-light)); transform: rotate(-5deg) scale(1.05); } .feature-item h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--green); margin-bottom: 10px; } .feature-item p { color: var(--text-light); font-size: 0.95rem; line-height: 1.7; } .feature-item a { color: var(--green); font-weight: 600; text-decoration-color: rgba(34, 82, 59, 0.3); text-underline-offset: 4px; } .feature-item a:hover { color: var(--green-light); } /* Variation: on cream background */ .feature-grid.on-cream .feature-item { background: var(--white); } .feature-grid.on-white .feature-item { background: var(--cream); } /* ============================================ PAGE STYLES (for subpages) ============================================ */ .page-hero { background: var(--cream); padding: 150px 20px 80px; text-align: center; } .page-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 600; color: var(--green); margin-bottom: 1rem; animation: fadeInUp 0.6s ease both; overflow-wrap: break-word; hyphens: auto; } .page-hero h1::after { content: ''; display: block; width: 80px; height: 3px; background: linear-gradient(90deg, var(--coral), var(--coral-light)); margin: 1rem auto 0; border-radius: 2px; } .page-hero p { font-size: 1.15rem; color: var(--text-light); max-width: 600px; margin: 0 auto; animation: fadeInUp 0.6s ease 0.15s both; } /* Content sections */ .content-section { max-width: 900px; margin: 0 auto; padding: 60px 30px; } .content-section h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--green); margin-bottom: 20px; } .content-section p { color: var(--text-light); line-height: 1.8; margin-bottom: 16px; } .content-section p a, .content-section li a { color: var(--green); font-weight: 600; text-decoration-color: rgba(34, 82, 59, 0.3); text-decoration-thickness: 1px; text-underline-offset: 4px; } .content-section p a:hover, .content-section li a:hover { color: var(--coral-text); text-decoration-color: rgba(235, 111, 107, 0.55); } .overview-link-section { padding: 8px 30px 64px; } .overview-link-inner { max-width: 1000px; margin: 0 auto; } .overview-link-section .section-label { text-align: left; margin-bottom: 14px; } .overview-link-pills { display: flex; flex-wrap: wrap; gap: 10px; } .overview-link-pill { display: inline-block; padding: 10px 20px; border-radius: 999px; background: var(--white); border: 1px solid rgba(34, 82, 59, 0.18); color: var(--green); text-decoration: none; font-weight: 500; font-size: 0.88rem; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .overview-link-pill:hover, .overview-link-pill:focus-visible { background: var(--cream); border-color: rgba(34, 82, 59, 0.28); color: var(--green-dark); } /* Price cards */ .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 1100px; margin: 0 auto; padding: 0 30px; } .price-card { background: var(--white); border-radius: 20px; padding: 35px 30px; text-align: center; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; border: 2px solid transparent; display: flex; flex-direction: column; } .price-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(34, 82, 59, 0.12); } .price-card.featured { border-color: var(--coral); box-shadow: 0 8px 30px rgba(228, 101, 98, 0.15); } .price-card.featured:hover { transform: translateY(-6px); } .price-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--coral); color: var(--white); padding: 4px 18px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px; } .price-card h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--green); margin-bottom: 10px; } .price-amount { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 2.9rem); font-weight: 600; color: var(--coral); margin-bottom: 5px; line-height: 1.05; } .price-amount small { display: block; margin-top: 6px; line-height: 1.4; font-size: 0.9rem; font-weight: 400; color: var(--text-light); } .price-features { list-style: none; text-align: left; margin: 20px 0; flex-grow: 1; } .price-features li { padding: 8px 0; color: var(--text-light); font-size: 0.9rem; border-bottom: 1px solid rgba(34, 82, 59, 0.06); display: flex; align-items: flex-start; gap: 8px; } .price-features li::before { content: ''; width: 6px; height: 6px; background: var(--coral); border-radius: 50%; margin-top: 8px; flex-shrink: 0; } .price-btn { display: inline-block; width: 100%; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: all 0.3s ease; margin-top: 10px; background: var(--green); color: var(--white); } .price-btn:hover { background: var(--coral); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(228, 101, 98, 0.3); } /* Contact form styles */ .form-card { background: var(--white); padding: 50px; border-radius: 20px; box-shadow: 0 10px 40px rgba(34, 82, 59, 0.08); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; color: var(--green); font-weight: 500; margin-bottom: 8px; font-size: 0.95rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 16px; border: 2px solid rgba(34, 82, 59, 0.1); border-radius: 12px; font-size: 1rem; transition: all 0.3s ease; background: var(--cream); font-family: var(--font-body); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--green); background: var(--white); box-shadow: 0 0 0 4px rgba(34, 82, 59, 0.12); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .samtykke-group { margin: 4px 0 20px; } .samtykke-group .samtykke-label { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--cream); border-radius: 12px; cursor: pointer; line-height: 1.55; text-align: left; margin-bottom: 0; } .samtykke-group .samtykke-label input[type="checkbox"] { width: 22px; height: 22px; min-width: 22px; margin-top: 1px; cursor: pointer; accent-color: var(--green); flex-shrink: 0; } .samtykke-group .samtykke-label span { color: var(--text-light); font-size: 0.92rem; font-weight: 400; } .samtykke-group .samtykke-label a { color: var(--green); font-weight: 500; } .btn-primary { display: inline-block; background: var(--green); color: var(--white); padding: 16px 40px; border: none; border-radius: 50px; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.3px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .btn-primary:hover { background: var(--green-light); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(34, 82, 59, 0.3); } /* CTA banner */ .cta-banner { background: var(--green); padding: 80px 30px; text-align: center; } .cta-banner h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--cream); margin-bottom: 15px; } .cta-banner p { color: rgba(249, 236, 228, 0.8); font-size: 1.1rem; margin-bottom: 30px; max-width: 500px; margin-left: auto; margin-right: auto; } .cta-banner .btn-primary { background: var(--cream); color: var(--green); } .cta-banner .btn-primary:hover { background: var(--white); color: var(--green-dark); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 968px) { .mobile-menu-toggle { display: block; } .nav-links { position: fixed; top: 0; right: -100%; width: 300px; height: 100vh; background: var(--white); flex-direction: column; align-items: flex-start; padding: 80px 30px 30px; gap: 5px; transition: right 0.3s ease; box-shadow: -5px 0 30px rgba(0,0,0,0.1); overflow-y: auto; } .nav-links.active { right: 0; } .menu-close-btn { display: block; position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 2rem; color: var(--green); cursor: pointer; } .nav-item { width: 100%; } .nav-item a { display: block; padding: 12px 0; } .nav-item a::after { display: none; } .dropdown-menu { position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; display: none; background: transparent; padding: 0 0 0 16px; } .nav-item.has-dropdown.open .dropdown-menu { display: block; } .offerings-grid { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .about-image::after { display: none; } .about-image img { margin: 0 auto; display: block; } .footer-grid { grid-template-columns: 1fr; gap: 30px; } .hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; } .hero-content { text-align: center; } .hero-description { margin: 0 auto 40px; } .hero-video-carousel { height: 380px; } .video-slot { width: 200px; height: 320px; } .hero h1, .hero-logo-text { font-size: clamp(2.5rem, 7vw, 4rem); } .price-grid { grid-template-columns: 1fr; max-width: 450px; } .price-card.featured { transform: none; } .form-row { grid-template-columns: 1fr; } .scroll-indicator { display: none; } .feature-grid { grid-template-columns: 1fr; padding: 0 20px; } } @media (max-width: 600px) { .nav-container { padding: 0 20px; height: 70px; } section { padding: 70px 20px; } .offering-card { padding: 30px 25px; } .form-card { padding: 30px 20px; } .page-hero { padding: 130px 20px 60px; } } /* ============================================ OVERLAY ============================================ */ .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease; } .overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } /* ============================================ UNIVERSE TIES — eyebrows, explore, footer map ============================================ */ .ph-eyebrow { font-family: var(--font-handwritten); color: var(--coral-text); font-size: 1.1rem; margin-bottom: 10px; animation: fadeInUp 0.5s ease both; } .explore { background: var(--white); padding: 80px 30px 90px; } .explore .section-label { margin-bottom: 6px; } .explore-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 600; color: var(--green); text-align: center; margin: 0 0 36px; } .explore-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .explore-card { display: flex; flex-direction: column; gap: 6px; background: radial-gradient(70% 60% at 85% 8%, rgba(240, 144, 142, 0.10), transparent 70%), var(--cream); border-radius: 20px; padding: 26px 24px 22px; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; } .explore-card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(26, 63, 45, 0.10); } .explore-kicker { font-family: var(--font-handwritten); color: var(--coral-text); font-size: 0.95rem; } .explore-card h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--green); margin: 0; line-height: 1.25; overflow-wrap: break-word; } .explore-card .explore-arrow { margin-top: 10px; color: var(--green); font-weight: 500; font-size: 0.9rem; transition: transform 0.3s ease; display: inline-block; } .explore-card:hover .explore-arrow { transform: translateX(5px); } @media (max-width: 700px) { .explore { padding: 60px 24px 70px; } .explore-grid { grid-template-columns: 1fr; gap: 14px; } .explore-card { padding: 24px 22px 20px; } } @media (max-width: 600px) { .page-hero { padding: 125px 22px 55px; } } /* ============================================ MOTION — page transitions & micro-interactions ============================================ */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-leave 0.20s ease both; } ::view-transition-new(root) { animation: vt-enter 0.30s cubic-bezier(0.22, 0.8, 0.3, 1) 0.04s both; } @keyframes vt-leave { to { opacity: 0; transform: translateY(6px); } } @keyframes vt-enter { from { opacity: 0; transform: translateY(10px); } } /* The header stays frozen in place across page navigations */ .navbar { view-transition-name: site-header; } /* Softer, springier scroll reveals */ .animate-on-scroll { transition: opacity 0.7s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1); } /* Press feedback on every pill */ .btn-primary:active, .hero-cta:active, .contact-btn:active, .newsletter-form button:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; } /* Visible keyboard focus, on brand */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2.5px solid var(--green-light); outline-offset: 2px; border-radius: 6px; } /* Respect users who prefer calm */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .animate-on-scroll { opacity: 1; transform: none; } } /* ============================================ MEDITATIVE FLOW — soft edges, melting sections ============================================ */ /* No hard line under the header — a breath of shadow instead */ .navbar { border-bottom: none; box-shadow: 0 1px 26px rgba(34, 82, 59, 0.07); } /* Accent rules fade out at both ends instead of stopping hard */ .section-title::after { width: 96px; height: 2.5px; background: linear-gradient(90deg, transparent, var(--coral) 30%, var(--coral-light) 70%, transparent); } .page-hero h1::after { width: 110px; height: 2.5px; background: linear-gradient(90deg, transparent, var(--coral) 30%, var(--coral-light) 70%, transparent); } /* Dividers become whispers */ .price-features li { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(34, 82, 59, 0.10), transparent) 1; } .footer-bottom { border-top: 0; border-image: none; } /* Sections melt into each other instead of switching */ .offerings { background: linear-gradient(180deg, var(--white), var(--cream)); } .about { margin-top: -1px; isolation: isolate; border-radius: 100% 100% 0 0 / 44px 44px 0 0; background: linear-gradient(180deg, var(--white), var(--cream) 16%, var(--cream) 84%, var(--white)); } .about::before { content: ''; position: absolute; inset: 0 0 auto; height: 132px; background: linear-gradient(180deg, rgba(255, 253, 251, 0.92), rgba(249, 236, 228, 0.42) 56%, rgba(249, 236, 228, 0)); pointer-events: none; z-index: 0; } .universe { background: var(--white); } .newsletter { background: linear-gradient(180deg, var(--white), rgba(249, 236, 228, 0) 110px), radial-gradient(55% 50% at 12% 10%, rgba(240, 144, 142, 0.12), transparent 70%), var(--cream); } /* Green bands rise like gentle hills */ .cta-banner { border-radius: 100% 100% 0 0 / 58px 58px 0 0; padding-top: 96px; } .explore { background: linear-gradient(180deg, var(--white), var(--cream)); } /* ============================================ POLISH V3 — delight layer ============================================ */ /* On-brand text selection */ ::selection { background: rgba(228, 101, 98, 0.25); color: var(--green-dark); } /* Slim, calm scrollbar (desktop) */ @media (pointer: fine) { ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: rgba(34, 82, 59, 0.35); border-radius: 999px; border: 3px solid var(--cream); } ::-webkit-scrollbar-thumb:hover { background: rgba(34, 82, 59, 0.55); } } /* Anchored sections stop below the fixed header */ [id] { scroll-margin-top: 96px; } /* The hero portrait should feel alive without calling attention to itself. */ .hero-arch img { animation: amn-hero-portrait-breathe 15s var(--ease-soft) infinite; transform-origin: center; } @keyframes amn-hero-portrait-breathe { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -2px, 0) scale(1.006); } } /* Cards respond to touch */ .explore-card:active, .path-card:active, .offering-card:active, .universe-card:active { transform: scale(0.985); transition-duration: 0.1s; } /* A faint leaf lives behind the newsletter */ .newsletter { position: relative; overflow: hidden; } .newsletter::after { content: '\1F33F'; position: absolute; font-size: 150px; opacity: 0.06; right: -24px; top: -34px; transform: rotate(-16deg); pointer-events: none; } /* Mobile menu: soft branded panel */ @media (max-width: 968px) { .nav-links { background: radial-gradient(60% 40% at 90% 6%, rgba(240, 144, 142, 0.12), transparent 70%), radial-gradient(50% 35% at 8% 96%, rgba(34, 82, 59, 0.06), transparent 70%), #fffdfb; box-shadow: -18px 0 60px rgba(26, 63, 45, 0.18); border-radius: 26px 0 0 26px; padding-top: 88px; overflow-y: auto; } .nav-links::before { content: 'a mindful now'; font-family: var(--font-handwritten); color: var(--green); font-size: 1.05rem; position: absolute; top: 30px; left: 30px; } .menu-close-btn { color: var(--green); } .nav-item a { padding: 6px 0; } } @media (prefers-reduced-motion: reduce) { .hero-arch img { animation: none; } } /* ============================================ METTE'S TYPE NOTES — calmer Fraunces ============================================ */ /* The decorative Fraunces ampersand bothered Mette — use the clean Jost one */ .amp { font-family: var(--font-body); font-weight: 500; font-size: 0.92em; } /* Display-fonten er nu Lora (rolige nedstrøg) — ingen opsz-akse, så ingen optical-sizing-regel nødvendig */ /* Nav reads cleaner in the body face; handwriting stays for the logo */ .nav-item a { font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.3px; } .dropdown-menu a { font-family: var(--font-body); font-size: 0.88rem; font-weight: 400; } .contact-btn { font-family: var(--font-body) !important; font-weight: 500; } /* Long Danish compounds in any section heading wrap instead of clipping */ .content-section h2 { overflow-wrap: break-word; hyphens: auto; } .price-card h3 { font-size: clamp(1.3rem, 6vw, 1.6rem); overflow-wrap: break-word; } /* Mette: storytelling prose stays CENTERED with a calm measure */ .about-text p, .mantra-text, .mission-content p { text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; } /* ============================================ MOTION POLISH II — cascade & glide ============================================ */ /* Desktop dropdowns glide open */ .dropdown-menu { transform: translateY(8px); transition: opacity 0.28s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0.28s; } .nav-item.has-dropdown:hover .dropdown-menu { transform: translateY(0); } .dropdown-menu a { transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .dropdown-menu a:hover { padding-left: 26px; } /* Mobile menu items cascade in */ @media (max-width: 968px) { .nav-links { transition: right 0.38s cubic-bezier(0.22, 0.8, 0.3, 1); } .nav-links .nav-item { opacity: 0; transform: translateX(14px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1); } .nav-links.active .nav-item { opacity: 1; transform: none; } .nav-links.active .nav-item:nth-child(2) { transition-delay: 0.05s; } .nav-links.active .nav-item:nth-child(3) { transition-delay: 0.09s; } .nav-links.active .nav-item:nth-child(4) { transition-delay: 0.13s; } .nav-links.active .nav-item:nth-child(5) { transition-delay: 0.17s; } .nav-links.active .nav-item:nth-child(6) { transition-delay: 0.21s; } .nav-links.active .nav-item:nth-child(7) { transition-delay: 0.25s; } } /* Page-hero content cascades gently */ .page-hero .ph-eyebrow { animation: fadeInUp 0.5s ease both; } .page-hero h1 { animation: fadeInUp 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) 0.06s both; } .page-hero p { animation: fadeInUp 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) 0.14s both; } /* details (price table) opens with a soft fade */ details[open] > *:not(summary) { animation: fadeInUp 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both; } /* Gallery / photo hover: the quietest zoom */ @media (hover: hover) { .explore-card, .universe-card, .path-card, .offering-card, .tilvalg-card { will-change: transform; } a img, .gallery-grid img { transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1); } a:hover > img, .gallery-grid a:hover img { transform: scale(1.025); } } @media (prefers-reduced-motion: reduce) { .nav-links .nav-item { opacity: 1; transform: none; transition: none; } .page-hero .ph-eyebrow, .page-hero h1, .page-hero p { animation: none; } } /* ============================================ DE-TEMPLATING — break the section-section rhythm ============================================ */ /* The coral rule no longer stamps every single title (hero keeps its accent) */ .section-title::after { display: none; } /* Explore reads as a quiet outro, not yet another centered section */ .explore { padding: 56px 30px 78px; } .explore .section-label, .explore-title { text-align: left; max-width: 1000px; margin-left: auto; margin-right: auto; } .explore-title { font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin-bottom: 26px; } /* gratis-samtale & kontakt: the trust strip floats across the hero seam */ .benefits-strip { max-width: 880px; margin: -34px auto 0; border-radius: 24px; box-shadow: 0 18px 44px rgba(26, 63, 45, 0.10); position: relative; z-index: 2; } @media (max-width: 700px) { .benefits-strip { margin: -26px 18px 0; border-radius: 20px; } } /* ============================================ ONE SITE — cross-page coherence layer ============================================ */ /* Every page opens in the same atmosphere as the forside */ .page-hero { background: radial-gradient(60% 55% at 88% 8%, rgba(240, 144, 142, 0.12), transparent 62%), radial-gradient(52% 48% at 4% 92%, rgba(240, 144, 142, 0.05), transparent 58%), var(--cream); } /* The page title MORPHS between pages; the footer stays put like the header */ .page-hero h1, .hero-home h1 { view-transition-name: page-title; } .footer { view-transition-name: site-footer; } ::view-transition-group(page-title) { animation-duration: 0.34s; animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1); } /* Category eyebrows link back to their family */ a.ph-eyebrow { display: inline-block; text-decoration: none; transition: opacity 0.2s ease; } a.ph-eyebrow:hover { opacity: 0.75; } /* You can always see where you are */ .nav-item.is-current > a { color: var(--green-dark); position: relative; } .nav-item.is-current > a::after { content: ''; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--coral); } @media (max-width: 968px) { .nav-item.is-current > a { color: var(--coral-text); } .nav-item.is-current > a::after { display: none; } } /* ============================================ KEYBOARD ACCESS — menus & skip-link ============================================ */ .nav-item.has-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .skip-link { position: fixed; top: -60px; left: 16px; z-index: 100000; background: var(--green); color: var(--white); padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: top 0.2s ease; } .skip-link:focus { top: 14px; } main#hovedindhold:focus { outline: none; } /* Pricing badges never wrap or collide */ .price-badge { white-space: nowrap; font-size: 0.78rem; padding: 6px 16px; } /* Stats bands stack on narrow phones (352px-class) */ @media (max-width: 540px) { .pull-quote-stats { grid-template-columns: 1fr !important; gap: 26px !important; max-width: 300px; margin-left: auto !important; margin-right: auto !important; } } /* ============================================ SIGNATUR I v2 — Et øjeblik af ro (vejrtrækning) ============================================ */ .ro { padding: 90px 30px 100px; background: radial-gradient(60% 55% at 50% 0%, rgba(240, 144, 142, 0.08), transparent 65%), var(--cream); text-align: center; } .ro-sub { color: var(--text-light); font-weight: 300; margin: -6px 0 46px; } .ro-scene { position: relative; width: 240px; height: 240px; margin: 0 auto; --ro-rest-scale: 1.024; --ro-klar-scale: 0.965; --ro-in-scale: 1.28; --ro-ring-in-scale: 1.32; --ro-ring-2-in-scale: 1.40; --ro-ring-3-in-scale: 1.48; } /* ripple-ringe der ånder med — forskudt, blødt */ .ro-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(34, 82, 59, 0.16); transition: transform 4s var(--ease-soft), opacity 4s ease; pointer-events: none; } .ro-ring--2 { inset: -14px; border-color: rgba(34, 82, 59, 0.10); } .ro-ring--3 { inset: -30px; border-color: rgba(228, 101, 98, 0.10); } .ro-cirkel { position: absolute; inset: 15px; border-radius: 50%; background: radial-gradient(circle at 38% 30%, var(--green-light), var(--green) 72%); box-shadow: 0 24px 60px rgba(34, 82, 59, 0.28), inset 0 -10px 30px rgba(26, 63, 45, 0.35); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 4s var(--ease-soft), box-shadow 4s ease, background 4s ease, filter 0.45s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; } .ro-cirkel:active { filter: brightness(1.06); } .ro-scene.ro-koerer .ro-cirkel { filter: saturate(1.02); } .ro-scene.ro-koerer .ro-ring { border-color: rgba(34, 82, 59, 0.18); } /* hvilende orb ånder ganske let — en invitation */ @keyframes ro-hvile { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--ro-rest-scale)); } } .ro-scene.ro-i-hvile .ro-ring { animation: ro-hvile 5.5s ease-in-out infinite; animation-delay: 0.25s; } .ro-scene.ro-i-hvile .ro-ring--2 { animation-delay: 0.5s; } .ro-scene.ro-i-hvile .ro-ring--3 { animation-delay: 0.75s; } /* faserne */ .ro-scene.ro-ind .ro-cirkel { transform: scale(var(--ro-in-scale)); box-shadow: 0 30px 80px rgba(34, 82, 59, 0.34), inset 0 -10px 30px rgba(26, 63, 45, 0.26); } .ro-scene.ro-ind .ro-ring { transform: scale(var(--ro-ring-in-scale)); opacity: 0.82; } .ro-scene.ro-ind .ro-ring--2 { transform: scale(var(--ro-ring-2-in-scale)); transition-delay: 0.12s; } .ro-scene.ro-ind .ro-ring--3 { transform: scale(var(--ro-ring-3-in-scale)); transition-delay: 0.24s; } .ro-scene.ro-klar .ro-cirkel { transform: scale(var(--ro-klar-scale)); } .ro-scene.ro-klar .ro-ring { transform: scale(0.97); opacity: 0.6; } .ro-scene.ro-ud .ro-cirkel { transform: scale(1); } .ro-scene.ro-ud .ro-ring { transform: scale(1); opacity: 1; } .ro-tekst { font-family: var(--font-handwritten); color: var(--cream); font-size: 1.12rem; padding: 0 30px; line-height: 1.45; pointer-events: none; transition: opacity 0.45s ease; } .ro-tekst.ro-skift { opacity: 0; } /* runde-prikker i stedet for tekst-tæller */ .ro-prikker { display: flex; gap: 9px; justify-content: center; margin-top: 38px; min-height: 10px; } .ro-prik { width: 9px; height: 9px; border-radius: 50%; background: rgba(34, 82, 59, 0.18); transition: background 0.6s ease, transform 0.6s ease; } .ro-prik.ro-fyldt { background: var(--green); transform: scale(1.15); } .ro-taeller { margin-top: 14px; font-weight: 300; color: var(--text-light); font-size: 0.88rem; min-height: 1.4em; transition: opacity 0.45s ease; } @media (max-width: 768px) { .ro { padding: 76px 22px 86px; background: radial-gradient(70% 52% at 50% 0%, rgba(240, 144, 142, 0.06), transparent 68%), var(--cream); } .ro-sub { margin-bottom: 38px; } .ro-scene { width: min(58vw, 222px); height: min(58vw, 222px); --ro-rest-scale: 1.010; --ro-klar-scale: 0.990; --ro-in-scale: 1.17; --ro-ring-in-scale: 1.21; --ro-ring-2-in-scale: 1.27; --ro-ring-3-in-scale: 1.33; } .ro-ring { border-color: rgba(34, 82, 59, 0.12); } .ro-ring--2 { inset: -10px; border-color: rgba(34, 82, 59, 0.08); } .ro-ring--3 { inset: -22px; border-color: rgba(228, 101, 98, 0.08); } .ro-cirkel { inset: 14px; box-shadow: 0 18px 46px rgba(34, 82, 59, 0.22), inset 0 -8px 24px rgba(26, 63, 45, 0.28); transition: transform 4.7s var(--ease-soft), box-shadow 4.7s ease, background 4.7s ease, filter 0.62s ease; } .ro-ring { transition: transform 4.7s var(--ease-soft), opacity 4.7s ease, border-color 1.3s ease; } .ro-scene.ro-ind .ro-cirkel { box-shadow: 0 22px 58px rgba(34, 82, 59, 0.26), inset 0 -8px 24px rgba(26, 63, 45, 0.22); } .ro-cirkel:active { filter: saturate(0.985) brightness(0.998); } .ro-tekst { font-size: 1.02rem; padding: 0 24px; transition-duration: 0.64s; } .ro-prikker { margin-top: 32px; } .ro-prik { transition: background 0.74s ease, transform 0.74s var(--ease-breath); } } @media (max-width: 380px) { .ro-scene { width: 206px; height: 206px; } } @media (prefers-reduced-motion: reduce) { .ro-scene.ro-i-hvile .ro-cirkel, .ro-scene.ro-i-hvile .ro-ring { animation: none; } .ro-cirkel, .ro-ring, .ro-tekst, .ro-prik, .ro-taeller { transition: none !important; } .ro-scene.ro-ind .ro-cirkel, .ro-scene.ro-ind .ro-ring, .ro-scene.ro-ind .ro-ring--2, .ro-scene.ro-ind .ro-ring--3, .ro-scene.ro-klar .ro-cirkel, .ro-scene.ro-klar .ro-ring, .ro-scene.ro-ud .ro-cirkel, .ro-scene.ro-ud .ro-ring, .ro-prik.ro-fyldt { transform: none !important; } .ro-cirkel:active, .ro-scene.ro-koerer .ro-cirkel { filter: none !important; } } /* ============================================ SIGNATUR II v2 — Find din vej (guidet valg) ============================================ */ .vej { padding: 26px 30px 90px; background: var(--white); } .vej-kort { max-width: 620px; margin: 0 auto; background: radial-gradient(60% 55% at 88% 8%, rgba(240, 144, 142, 0.10), transparent 70%), var(--cream); border-radius: 26px; padding: 38px 32px; text-align: center; box-shadow: 0 16px 44px rgba(26, 63, 45, 0.08); overflow: hidden; transition: height 0.68s var(--ease-breath), box-shadow 0.58s ease; } .vej-kort.vej-skifter { box-shadow: 0 18px 50px rgba(26, 63, 45, 0.10); } .vej-trin-wrap { transform-origin: center top; will-change: opacity, transform, filter; transition: opacity 0.52s ease, transform 0.58s var(--ease-breath), filter 0.58s ease; } .vej-trin-wrap.vej-ud { opacity: 0; transform: translate3d(0, -8px, 0) scale(0.996); filter: blur(2px); } .vej-trin-wrap.vej-ind { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.996); filter: blur(3px); } .vej-eyebrow { font-family: var(--font-handwritten); color: var(--coral-text); font-size: 1.1rem; margin: 0 0 8px; } .vej-spm { font-family: var(--font-display); font-weight: 600; color: var(--green); font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 0 0 24px; line-height: 1.3; outline: none; } .vej-valg { display: flex; flex-direction: column; gap: 12px; } .vej-valg button { position: relative; font: 400 0.98rem/1.5 Jost, sans-serif; color: var(--green-dark); background: var(--white); border: 1.5px solid rgba(34, 82, 59, 0.16); border-radius: 16px; padding: 16px 38px 16px 20px; cursor: pointer; touch-action: manipulation; transition: background 0.34s var(--ease-breath), border-color 0.34s var(--ease-breath), color 0.34s var(--ease-breath), transform 0.34s var(--ease-breath), box-shadow 0.34s var(--ease-breath); } .vej-valg button::after { content: '\2192'; position: absolute; right: 16px; top: 50%; transform: translate(-6px, -50%); opacity: 0; color: var(--green); transition: opacity 0.34s ease, transform 0.34s var(--ease-breath); } .vej-valg button:hover { border-color: var(--green); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(26, 63, 45, 0.08); } .vej-valg button:hover::after { opacity: 1; transform: translate(0, -50%); } .vej-valg button:active { transform: scale(0.99); } .vej-valg button.vej-valgt { background: var(--green); border-color: var(--green); color: var(--white); box-shadow: 0 12px 28px rgba(34, 82, 59, 0.12); } .vej-valg button.vej-valgt::after { opacity: 1; transform: translate(0, -50%); color: var(--cream); } .vej-valg button[disabled] { cursor: default; } .vej-valg button[disabled]:not(.vej-valgt) { opacity: 0.58; } .vej-resultat h3 { font-family: var(--font-display); font-weight: 600; color: var(--green); font-size: clamp(1.35rem, 3.4vw, 1.8rem); margin: 6px 0 10px; } .vej-resultat p { color: var(--text-light); font-weight: 300; line-height: 1.7; margin: 0 0 26px; } .vej-knapper { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .vej-knapper .vej-primaer { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: var(--white); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 14px 28px; border-radius: 999px; box-shadow: 0 10px 26px rgba(34, 82, 59, 0.2); transition: all 0.3s ease; } .vej-knapper .vej-primaer:hover { background: var(--green-light); transform: translateY(-2px); } .vej-knapper .vej-sekundaer { display: inline-flex; align-items: center; justify-content: center; color: var(--green); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 14px 28px; border-radius: 999px; border: 1.5px solid rgba(34, 82, 59, 0.3); transition: all 0.3s ease; } .vej-knapper .vej-sekundaer:hover { background: rgba(34, 82, 59, 0.06); } .vej-meta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; } .vej-prikker { display: flex; gap: 7px; } .vej-prik { width: 7px; height: 7px; border-radius: 50%; background: rgba(34, 82, 59, 0.18); transition: background 0.5s ease, transform 0.5s var(--ease-breath); } .vej-prik.vej-aktiv { background: var(--green); transform: scale(1.16); } .vej-tilbage, .vej-omigen { background: none; border: none; cursor: pointer; color: var(--text-light); font: 300 0.85rem Jost, sans-serif; text-decoration: underline; text-underline-offset: 3px; padding: 4px 6px; } .vej-tilbage:hover, .vej-omigen:hover { color: var(--green); } @media (prefers-reduced-motion: reduce) { .vej-kort, .vej-trin-wrap, .vej-valg button, .vej-valg button::after, .vej-knapper .vej-primaer, .vej-knapper .vej-sekundaer, .vej-prik { transition: none !important; animation: none !important; } .vej-trin-wrap, .vej-trin-wrap.vej-ud, .vej-trin-wrap.vej-ind { opacity: 1 !important; transform: none !important; filter: none !important; } } @media (max-width: 700px) { .vej { padding-bottom: 56px; } .vej-kort { border-radius: 22px; padding: 30px 20px; } .vej-kort.animate-on-scroll { transition-property: height, box-shadow, opacity, transform !important; transition-duration: 0.92s, 0.72s, 0.88s, 0.88s !important; transition-timing-function: var(--ease-breath), ease, var(--ease-breath), var(--ease-breath) !important; } .vej-kort.animate-on-scroll.vej-skifter { will-change: height, box-shadow; } .vej-trin-wrap { transition: opacity 0.66s ease, transform 0.76s var(--ease-breath), filter 0.76s ease; } .vej-trin-wrap.vej-ud { transform: translate3d(0, -5px, 0) scale(0.998); filter: blur(1.2px); } .vej-trin-wrap.vej-ind { transform: translate3d(0, 8px, 0) scale(0.998); filter: blur(1.6px); } .vej-valg { gap: 10px; } .vej-valg button { width: 100%; padding: 15px 38px 15px 16px; transition: background 0.58s var(--ease-breath), border-color 0.58s var(--ease-breath), color 0.46s ease, transform 0.58s var(--ease-breath), box-shadow 0.58s ease, filter 0.42s ease !important; } .vej-valg button.vej-valgt { box-shadow: 0 10px 24px rgba(34, 82, 59, 0.10); } .vej-valg button:active, .vej-valg button.amn-touch-pressed { transform: translate3d(0, 1px, 0) scale(0.997) !important; filter: saturate(0.985) brightness(0.998); } .vej-valg button.amn-touch-settling { animation: amn-touch-settle 0.7s var(--ease-breath) both; } .vej-prik { transition: background 0.72s ease, transform 0.72s var(--ease-breath); } .vej-knapper { width: 100%; } .vej-knapper .vej-primaer, .vej-knapper .vej-sekundaer { width: 100%; min-height: 50px; text-align: center; } } @media (max-width: 700px) and (prefers-reduced-motion: reduce) { .vej-kort.animate-on-scroll, .vej-kort.animate-on-scroll.vej-skifter, .vej-valg button, .vej-valg button.amn-touch-pressed, .vej-valg button.amn-touch-settling, .vej-prik, .vej-prik.vej-aktiv { animation: none !important; transition: none !important; transform: none !important; filter: none !important; will-change: auto !important; } } /* No blue Android tap-flash on custom controls */ a, button, label, [role="button"] { -webkit-tap-highlight-color: transparent; } /* ============================================ NATTE-RUNDE — fokus, hover og rytme ============================================ */ /* role=button (åndedræts-orben) får brand-fokusring, ikke browser-blå */ [role="button"]:focus-visible { outline: 2.5px solid var(--green-light); outline-offset: 2px; border-radius: 50%; } /* synlig fokus på valg-kort hvor selve inputtet er usynligt */ .radio-card input:focus-visible + label { outline: 2.5px solid var(--green-light); outline-offset: 2px; } /* hover-løftet på valg-kort (inputtet fanger pointeren, så hover lægges på wrapperen) */ .radio-card:hover label { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(34, 82, 59, 0.1); } /* fokusringe på mørke flader skal være lyse */ .footer a:focus-visible, .footer-social a:focus-visible, .cta-banner a:focus-visible, .contact-box a:focus-visible { outline-color: var(--cream); } /* FAQ-fokusring må ikke klippes af overflow:hidden */ .faq-question:focus-visible { outline-offset: -3px; border-radius: 12px; } /* hyphens laver grimme orddelinger på store overskrifter på smalle telefoner */ @media (max-width: 480px) { h1, h2, .cta-banner h2 { hyphens: manual !important; } } /* sektionsrytme: de seks målte dødvande-huller trimmes til ~140px-takten */ @media (max-width: 700px) { .ro { padding-bottom: 78px; } .newsletter { padding-top: 45px; } .about { padding-bottom: 50px; border-radius: 100% 100% 0 0 / 30px 30px 0 0; } .about::before { height: 106px; } .instagram-section { padding-top: 50px !important; } .vej { padding-bottom: 36px; } .offerings { padding-top: 46px; } .hero-home { padding-bottom: 34px; } } /* Landskab-telefoner: trim heroens lodrette luft, så næste sektion titter frem over folden. 96px top = 80px fast navbar + 16px luft. */ @media (orientation: landscape) and (max-height: 500px) { .page-hero { min-height: auto; padding-top: 96px; padding-bottom: 40px; } } /* ============================================ ROLLOUT-KOMPONENTER (Sub-projekt 1) — genbruges på tværs af bølgerne. Bløde, centrerede, token-baserede; ingen gradient-topkant/kliniske grids. ============================================ */ /* Rolig tidslinje (fx uddannelser) */ .timeline { max-width: 640px; margin: 0 auto; position: relative; padding-left: 30px; text-align: left; } .timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--coral), rgba(34, 82, 59, .22)); } .timeline-item { position: relative; margin: 0 0 24px; } .timeline-item:last-child { margin-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: -30px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px var(--cream); } .timeline-item h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--green); margin: 0 0 2px; } .timeline-item .when { display: block; color: var(--coral-text); font-size: .9rem; font-weight: 500; margin-bottom: 6px; } .timeline-item p { color: var(--text-light); font-size: .95rem; line-height: 1.65; margin: 0; } .timeline-item p + p { margin-top: 6px; } .timeline-sub { color: var(--text-light); font-size: .88rem; line-height: 1.55; margin: 10px 0 0; padding-left: 12px; border-left: 2px solid rgba(228, 101, 98, .35); } /* Pille-række (fx organisationer) */ .pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 760px; margin: 0 auto; } .org-pill { background: var(--white); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); padding: 12px 24px; text-align: center; transition: transform .35s var(--ease-card), box-shadow .35s var(--ease-card); } .org-pill:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); } .org-pill strong { display: block; font-family: var(--font-display); color: var(--green); font-size: 1rem; font-weight: 600; line-height: 1.25; } .org-pill span { color: var(--text-light); font-size: .82rem; } /* Rolig kort-variant uden gradient-topkant */ .soft-card { background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 34px 30px; text-align: center; transition: transform .4s var(--ease-card), box-shadow .4s var(--ease-card); } .soft-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } @media (max-width: 600px) { .timeline { padding-left: 26px; } .timeline-item::before { left: -26px; } } .service-faq { background: var(--cream); padding: 78px 30px 86px; } .service-faq-inner { max-width: 980px; margin: 0 auto; } .service-faq .section-label, .service-faq h2, .service-faq > .service-faq-inner > p { text-align: center; } .service-faq h2 { font-family: var(--font-display); color: var(--green); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.14; margin: 0 0 16px; overflow-wrap: anywhere; hyphens: auto; } .service-faq > .service-faq-inner > p { color: var(--text-light); line-height: 1.75; max-width: 68ch; margin: 0 auto 32px; } .service-faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .free-call-faq .service-faq-inner { max-width: 860px; } .free-call-faq .service-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .service-faq-item { background: var(--white); border: 1px solid rgba(34, 82, 59, 0.12); border-radius: var(--radius-soft); box-shadow: 0 10px 28px rgba(26, 63, 45, 0.06); padding: 26px 24px; } .service-faq-item h3 { font-family: var(--font-display); color: var(--green); font-size: 1.12rem; line-height: 1.25; margin: 0 0 10px; } .service-faq-item p { color: var(--text-light); line-height: 1.72; margin: 0; } @media (max-width: 820px) { .service-faq-grid { grid-template-columns: 1fr; } .free-call-faq .service-faq-grid { grid-template-columns: 1fr; } .service-faq { padding: 64px 22px 72px; } } /* ============================================ STICKY MOBIL-CTA — "Book gratis samtale" En rolig, lukbar invitation der kun lever på telefonen (≤768px). Grøn pille, blød grøn-tonet skygge, safe-area-bevidst. Dækker aldrig indhold permanent (bygges/animeres kun ind efter scroll, kan lukkes). ============================================ */ .sticky-cta { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); z-index: 900; /* under navbar (1000) og Mettes feedback-bar (99990) */ display: flex; align-items: stretch; gap: 4px; width: max-content; max-width: calc(100vw - 28px); background: var(--green); border-radius: var(--radius-pill); box-shadow: 0 14px 38px rgba(26, 63, 45, 0.28); opacity: 0; visibility: hidden; transition: transform 0.42s var(--ease-spring), opacity 0.42s ease, visibility 0.42s; -webkit-tap-highlight-color: transparent; } .sticky-cta--inde { transform: translate(-50%, 0); opacity: 1; visibility: visible; } .sticky-cta--lukker { transform: translate(-50%, calc(100% + 18px)) scale(0.985); opacity: 0; visibility: hidden; pointer-events: none; filter: saturate(0.96); transition: transform 0.58s var(--ease-breath), opacity 0.34s ease, filter 0.34s ease, visibility 0s linear 0.58s !important; } .sticky-cta-link { display: flex; align-items: center; gap: 9px; padding: 14px 8px 14px 24px; color: var(--cream); text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; border-radius: var(--radius-pill) 0 0 var(--radius-pill); min-width: 0; } .sticky-cta-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sticky-cta-pil { transition: transform 0.3s var(--ease-spring); flex: none; } .sticky-cta-link:hover .sticky-cta-pil, .sticky-cta-link:active .sticky-cta-pil { transform: translateX(4px); } .sticky-cta-luk { flex: none; width: 42px; border: 0; background: transparent; color: rgba(249, 236, 228, 0.7); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; transition: color 0.2s ease; } .sticky-cta-luk:hover { color: var(--cream); } .sticky-cta-link:active { transform: scale(0.98); } .sticky-cta a:focus-visible, .sticky-cta button:focus-visible { outline: 2.5px solid var(--cream); outline-offset: -3px; } /* Aldrig på desktop */ @media (min-width: 769px) { .sticky-cta { display: none !important; } } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition: opacity 0.2s ease, visibility 0.2s; } .sticky-cta--inde { transform: translate(-50%, 0); } .sticky-cta--lukker { transform: translate(-50%, 0); filter: none; transition: opacity 0.16s ease, visibility 0s linear 0.16s !important; } } /* ============================================ MOBILE BREATH MOTION — calmer global feel ============================================ */ @keyframes amn-soft-rise { from { opacity: 0.96; transform: translate3d(0, 8px, 0) scale(0.998); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes amn-page-enter { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.998); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes amn-page-leave { to { opacity: 0; transform: translate3d(0, 4px, 0) scale(0.999); } } @keyframes amn-mobile-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } } @keyframes amn-mobile-arrow-breath { 0%, 100% { transform: rotate(45deg) translate3d(0, 0, 0); opacity: 0.42; } 50% { transform: rotate(45deg) translate3d(3px, 3px, 0); opacity: 0.62; } } @keyframes amn-touch-settle { 0% { transform: translate3d(0, 1px, 0) scale(0.992); filter: saturate(0.97) brightness(0.995); } 58% { transform: translate3d(0, -1px, 0) scale(1.002); filter: saturate(0.995) brightness(1); } 100% { transform: translate3d(0, 0, 0) scale(1); filter: none; } } @media (max-width: 768px) { @keyframes fadeInUp { 0% { opacity: 0.96; transform: translate3d(0, 8px, 0) scale(0.998); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes fadeInLeft { 0% { opacity: 0.96; transform: translate3d(-8px, 2px, 0) scale(0.998); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes fadeInRight { 0% { opacity: 0.96; transform: translate3d(8px, 2px, 0) scale(0.998); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } :where( .hero-home-text, .hero-home-visual, .hero-logo-text, .hero-tagline, .hero-keywords, .hero-description, .hero-cta, .page-hero .ph-eyebrow, .page-hero h1, .page-hero p, .pt-page-hero h1, .pt-page-hero p, .ref-hero-inner, .lp-hero-inner, .hero-portrait, details[open] > *:not(summary) ) { animation-timing-function: var(--ease-breath) !important; } :where(.hero-home-text, .hero-home-visual, .ref-hero-inner, .lp-hero-inner) { animation-duration: 0.72s !important; } html.amn-media-calm main img.amn-img-calm:not(.cover):not(#lightbox-image), html.amn-media-calm .hero-arch img.amn-img-calm, html.amn-media-calm .about-image img.amn-img-calm, html.amn-media-calm .local-photo img.amn-img-calm, html.amn-media-calm .pt-split-hero img.amn-img-calm { opacity: 0.94; filter: none; transition: opacity 0.68s var(--ease-breath), transform 0.68s var(--ease-breath); } html.amn-media-calm main img.amn-img-calm.amn-img-loaded:not(.cover):not(#lightbox-image), html.amn-media-calm .hero-arch img.amn-img-calm.amn-img-loaded, html.amn-media-calm .about-image img.amn-img-calm.amn-img-loaded, html.amn-media-calm .local-photo img.amn-img-calm.amn-img-loaded, html.amn-media-calm .pt-split-hero img.amn-img-calm.amn-img-loaded { opacity: 1; filter: none; } html.amn-media-calm body.amn-user-scrolling main img.amn-img-calm:not(.amn-img-loaded):not(.cover):not(#lightbox-image), html.amn-media-calm body.amn-user-scrolling .hero-arch img.amn-img-calm:not(.amn-img-loaded), html.amn-media-calm body.amn-user-scrolling .about-image img.amn-img-calm:not(.amn-img-loaded), html.amn-media-calm body.amn-user-scrolling .local-photo img.amn-img-calm:not(.amn-img-loaded), html.amn-media-calm body.amn-user-scrolling .pt-split-hero img.amn-img-calm:not(.amn-img-loaded) { filter: none; transition-duration: 0.56s; } ::view-transition-old(root) { animation: amn-page-leave 0.24s ease both; } ::view-transition-new(root) { animation: amn-page-enter 0.62s var(--ease-breath) 0.03s both; } ::view-transition-group(page-title) { animation-duration: 0.56s; animation-timing-function: var(--ease-breath); } html.amn-reveal-ready .animate-on-scroll:not(.visible), html.amn-reveal-ready .pt-step:not(.visible), html.amn-reveal-ready [data-animate]:not(.visible) { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.995); transition-property: opacity, transform !important; transition-duration: 0.95s !important; transition-timing-function: var(--ease-breath) !important; transition-delay: var(--reveal-delay, 0ms) !important; will-change: opacity, transform; } html.amn-reveal-ready section.animate-on-scroll:not(.visible), html.amn-reveal-ready .content-section.animate-on-scroll:not(.visible), html.amn-reveal-ready .cta-banner.animate-on-scroll:not(.visible) { transform: translate3d(0, 12px, 0) scale(0.998); } .animate-on-scroll.visible, .pt-step.visible, [data-animate].visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); will-change: auto; } html.amn-ambient-governed body.amn-user-scrolling .animate-on-scroll:not(.visible), html.amn-ambient-governed body.amn-user-scrolling .pt-step:not(.visible), html.amn-ambient-governed body.amn-user-scrolling [data-animate]:not(.visible) { transform: translate3d(0, 8px, 0) scale(0.998); transition-duration: 0.68s !important; } html.amn-ambient-governed body.amn-user-scrolling .animate-on-scroll.visible, html.amn-ambient-governed body.amn-user-scrolling .pt-step.visible, html.amn-ambient-governed body.amn-user-scrolling [data-animate].visible { transition-duration: 0.72s !important; } html.amn-section-motion-ready .amn-section-calm { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.996); transition: opacity 0.92s var(--ease-breath), transform 0.92s var(--ease-breath) !important; transition-delay: var(--amn-section-delay, 0ms) !important; will-change: opacity, transform; } html.amn-section-motion-ready .amn-section-calm.amn-section-visible { opacity: 1; filter: none; transform: translate3d(0, 0, 0) scale(1); will-change: auto; } html.amn-section-motion-ready body.amn-user-scrolling .amn-section-calm:not(.amn-section-visible) { transform: translate3d(0, 8px, 0) scale(0.998); transition-duration: 0.68s !important; } :where( .benefits-strip, .call-clarity, .form-card, .about-image, .about-text, .contact-info-card, .contact-form-card, .location-card, .contact-next-card, .decision-card, .price-card, .pricing-card, .tif-price-card, .booking-path-card, .footer-grid > *, .footer-bottom, .ref-footer, .local-fact, .local-area-card, .local-faq-item, .service-faq-item, .pull-quote-inner, .pull-quote-stat, .newsletter-card, .contact-next-links, .cta-banner ).amn-section-calm { backface-visibility: hidden; transform-origin: center top; } :where(.footer-grid > *, .footer-bottom, .ref-footer).amn-section-calm { transform-origin: center bottom; } .page-hero .ph-eyebrow, .page-hero h1, .page-hero p, .hero h1, .hero-home h1, .hero-tagline, .hero-keywords, .hero-logo-text, .hero-description, .hero-cta { animation-name: amn-soft-rise !important; animation-fill-mode: both !important; animation-timing-function: var(--ease-breath) !important; } .page-hero .ph-eyebrow, .hero-tagline { animation-duration: 0.68s !important; } .page-hero h1, .hero h1, .hero-home h1, .hero-logo-text { animation-duration: 0.76s !important; animation-delay: 0.06s !important; } .page-hero p, .hero-description, .hero-keywords { animation-duration: 0.82s !important; animation-delay: 0.14s !important; } .hero-cta { animation-duration: 1.08s !important; animation-delay: 0.24s !important; } html.amn-media-calm .hero-arch img.amn-img-calm { animation: none !important; transform: translate3d(0, 0, 0) scale(1.004); transform-origin: center; } html.amn-media-calm .hero-arch img.amn-img-calm.amn-img-loaded { animation: none !important; transform: translate3d(0, 0, 0) scale(1); } .hero::before, .hero::after { animation-name: amn-mobile-drift !important; animation-duration: 18s !important; animation-timing-function: var(--ease-soft) !important; opacity: 0.62; } .hero::after { animation-duration: 22s !important; } .hero-blob, .about-deco, .pull-quote .deco-dot, .newsletter-deco { animation-name: amn-mobile-drift !important; animation-duration: 18s !important; animation-timing-function: var(--ease-soft) !important; animation-iteration-count: infinite !important; } .hero-home .hero-blob { animation-duration: 26s !important; opacity: 0.72; } .hero-blob--ring, .about-deco--2, .about-deco--4, .pull-quote .deco-dot--2, .newsletter-deco--2 { animation-duration: 22s !important; } .hero-home .hero-blob--ring { animation-duration: 31s !important; opacity: 0.78; } .about-deco, .pull-quote .deco-dot { opacity: 0.045 !important; } .pull-quote { padding: clamp(66px, 17vw, 84px) 22px clamp(64px, 16vw, 86px) !important; } .pull-quote::before { border-radius: 100% 100% 100% 100% / 24px 24px 44px 44px !important; } .pull-quote::after { top: -50px !important; width: 124vw !important; min-width: 560px !important; height: 74px !important; } .pull-quote-inner { max-width: 32rem !important; } .pull-quote blockquote { line-height: 1.76 !important; } .pull-quote-mark { opacity: 0.075 !important; } .pull-quote .deco-dot { opacity: 0.026 !important; animation-duration: 32s !important; filter: blur(0.2px); } html.amn-section-motion-ready .pull-quote-inner.amn-section-calm, html.amn-section-motion-ready .pull-quote-stat.amn-section-calm, html.amn-section-motion-ready body.amn-user-scrolling .pull-quote-inner.amn-section-calm:not(.amn-section-visible), html.amn-section-motion-ready body.amn-user-scrolling .pull-quote-stat.amn-section-calm:not(.amn-section-visible) { filter: none !important; transition: opacity 0.78s var(--ease-breath), transform 0.78s var(--ease-breath) !important; will-change: opacity, transform; } .pull-quote .deco-dot--1 { width: 150px !important; height: 150px !important; top: -16% !important; right: -18% !important; animation-delay: -6s !important; } .pull-quote .deco-dot--2 { width: 96px !important; height: 96px !important; bottom: -12% !important; left: -8% !important; animation-duration: 38s !important; } .pull-quote .deco-dot--3 { width: 48px !important; height: 48px !important; right: 6% !important; opacity: 0.018 !important; animation-duration: 34s !important; animation-delay: -14s !important; } .pull-quote-stats { margin-top: 46px !important; gap: 24px !important; } .about-grid { gap: 34px !important; } .about-image { transform-origin: center top; } .about-image.parallax-wrap img, html.amn-media-calm .about-image img.amn-img-calm { border-radius: 22px; box-shadow: 0 16px 42px rgba(34, 82, 59, 0.12); transition: opacity 1.15s var(--ease-breath), filter 1.15s var(--ease-breath), transform 0.86s var(--ease-breath), box-shadow 0.86s ease !important; will-change: auto; } .about-image:hover img { box-shadow: 0 16px 42px rgba(34, 82, 59, 0.12) !important; } .about-deco { opacity: 0.024 !important; animation-duration: 34s !important; filter: blur(0.2px); } .about-deco--1 { width: 132px !important; height: 132px !important; top: 7% !important; right: -18% !important; animation-delay: -8s !important; } .about-deco--2 { width: 84px !important; height: 84px !important; left: -13% !important; bottom: 9% !important; animation-duration: 42s !important; } .about-deco--3, .about-deco--4, .about-deco--5 { opacity: 0.016 !important; animation-duration: 38s !important; } .scroll-arrow { animation: amn-mobile-arrow-breath 5.8s var(--ease-soft) infinite !important; } .flip-hint svg { animation-duration: 4.8s !important; animation-timing-function: var(--ease-soft) !important; } .nav-links { overscroll-behavior: contain; overscroll-behavior-y: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; transition: right 0.62s var(--ease-settle), box-shadow 0.62s ease; } .nav-links.active { box-shadow: -22px 0 70px rgba(26, 63, 45, 0.2); } .nav-links .nav-item { transform: translateX(6px); transition-duration: 0.5s; transition-timing-function: var(--ease-breath); } .nav-links .menu-close-btn { opacity: 0; transform: rotate(-8deg) scale(0.96); transition: opacity 0.42s ease, transform 0.42s var(--ease-breath), color 0.2s ease; } .nav-links.active .menu-close-btn { opacity: 1; transform: rotate(0deg) scale(1); transition-delay: 0.16s; } .mobile-menu-toggle { border-radius: 999px; transition: background-color 0.46s ease, box-shadow 0.46s ease, transform 0.34s var(--ease-breath) !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mobile-menu-toggle:active { transform: scale(0.97); } .mobile-menu-toggle .hamburger span { transform-origin: center; transition: transform 0.58s var(--ease-breath), opacity 0.34s ease, background-color 0.34s ease !important; } .mobile-menu-toggle.amn-menu-toggle-active { background: rgba(255, 253, 251, 0.72); box-shadow: 0 8px 26px rgba(34, 82, 59, 0.08); } .mobile-menu-toggle.amn-menu-toggle-active .hamburger span:nth-child(1) { transform: translate3d(0, 7px, 0) rotate(42deg); } .mobile-menu-toggle.amn-menu-toggle-active .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0.46); } .mobile-menu-toggle.amn-menu-toggle-active .hamburger span:nth-child(3) { transform: translate3d(0, -7px, 0) rotate(-42deg); } .nav-links.active .nav-item:nth-child(2) { transition-delay: 0.03s; } .nav-links.active .nav-item:nth-child(3) { transition-delay: 0.055s; } .nav-links.active .nav-item:nth-child(4) { transition-delay: 0.08s; } .nav-links.active .nav-item:nth-child(5) { transition-delay: 0.105s; } .nav-links.active .nav-item:nth-child(6) { transition-delay: 0.13s; } .nav-links.active .nav-item:nth-child(7) { transition-delay: 0.155s; } .overlay { background: rgba(26, 63, 45, 0.16); backdrop-filter: none; -webkit-backdrop-filter: none; transition: opacity 0.45s ease, visibility 0.45s; } .sticky-cta { box-shadow: 0 16px 40px rgba(26, 63, 45, 0.22); transition: transform 0.72s var(--ease-breath), opacity 0.72s ease, visibility 0.72s; } body.amn-menu-open { overscroll-behavior: contain; touch-action: auto; } body.amn-menu-open .nav-links { touch-action: pan-y; overscroll-behavior-y: contain; } body.amn-menu-open .overlay { touch-action: none; } body.amn-menu-open .navbar { background: rgba(249, 236, 228, 0.98); box-shadow: 0 8px 36px rgba(26, 63, 45, 0.09); } .navbar.amn-navbar-calm { transition: background-color 0.72s var(--ease-breath), border-color 0.72s ease, box-shadow 0.72s ease, backdrop-filter 0.72s ease, -webkit-backdrop-filter 0.72s ease !important; will-change: background-color, box-shadow, backdrop-filter; } .navbar.amn-navbar-calm.scrolled { background: rgba(249, 236, 228, 0.965); border-bottom-color: rgba(34, 82, 59, 0.07); box-shadow: 0 8px 32px rgba(26, 63, 45, 0.075); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } .navbar.amn-navbar-calm.amn-navbar-settling.scrolled { box-shadow: 0 6px 28px rgba(26, 63, 45, 0.065); } body.amn-menu-open .navbar.amn-navbar-calm { background: rgba(249, 236, 228, 0.98); box-shadow: 0 8px 36px rgba(26, 63, 45, 0.09); } body.amn-menu-open .sticky-cta { transform: translate(-50%, 130%); opacity: 0; visibility: hidden; pointer-events: none; } body::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0; background: rgba(249, 236, 228, 0); transition: opacity 0.34s ease, background-color 0.34s ease; } html.amn-page-departing body { pointer-events: none; } html.amn-page-departing body::after { opacity: 1; background: rgba(249, 236, 228, 0.18); } html.amn-page-departing body > :where(nav, main, section, footer, .sticky-cta):not(#lightbox) { opacity: 0.94; filter: saturate(0.98); transform: translate3d(0, -2px, 0) scale(0.9995); transition: opacity 0.3s ease, filter 0.3s ease, transform 0.34s var(--ease-breath) !important; } html.amn-page-departing a.amn-link-departing:is( .btn-primary, .hero-btn, .hero-cta, .hero-cta-btn, .contact-btn, .sticky-cta-link, .lp-cta, .price-btn, .tif-price-btn, .path-card, .explore-card, .booking-path-card, .blog-card, .route-card, .passion-card, .product-card, .course-card, .soft-card, .local-service-card, .local-path ) { animation: none !important; transform: translate3d(0, 1px, 0) scale(0.994) !important; filter: saturate(0.98) brightness(0.995); transition: transform 0.24s var(--ease-breath), filter 0.24s ease !important; } html.amn-page-arriving body { overflow-x: hidden; } .btn-primary:active, .hero-cta:active, .contact-btn:active, .newsletter-form button:active, .sticky-cta-link:active { transform: translateY(0) scale(0.985); transition-duration: 0.16s; } .explore-card:active, .path-card:active, .offering-card:active, .universe-card:active, .soft-card:active { transform: scale(0.992); transition-duration: 0.16s; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(page-title) { animation: none !important; } .animate-on-scroll, .pt-step, [data-animate], .page-hero .ph-eyebrow, .page-hero h1, .page-hero p, .pt-page-hero h1, .pt-page-hero p, .hero h1, .hero-home-text, .hero-home-visual, .hero-home h1, .hero-tagline, .hero-keywords, .hero-logo-text, .hero-description, .hero-cta, .hero-arch img, html.amn-media-calm .hero-arch img.amn-img-calm, html.amn-media-calm .hero-arch img.amn-img-calm.amn-img-loaded, .ref-hero-inner, .lp-hero-inner, .hero-portrait { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .hero::before, .hero::after, .hero-blob, .about-deco, .pull-quote .deco-dot, .newsletter-deco, .scroll-arrow, .flip-hint svg { animation: none !important; } html.amn-media-calm main img.amn-img-calm:not(.cover):not(#lightbox-image), html.amn-media-calm .hero-arch img.amn-img-calm, html.amn-media-calm .hero-arch img.amn-img-calm.amn-img-loaded, html.amn-media-calm .about-image img.amn-img-calm, html.amn-media-calm .local-photo img.amn-img-calm, html.amn-media-calm .pt-split-hero img.amn-img-calm { opacity: 1 !important; filter: none !important; animation: none !important; transition: none !important; } .nav-links .menu-close-btn { opacity: 1 !important; transform: none !important; transition: none !important; } .amn-section-calm, html.amn-section-motion-ready .amn-section-calm, html.amn-section-motion-ready .amn-section-calm.amn-section-visible { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; transition: none !important; will-change: auto !important; } .mobile-menu-toggle, .mobile-menu-toggle .hamburger span, .navbar.amn-navbar-calm { transition: none !important; transform: none !important; will-change: auto !important; } body::after { display: none !important; } html.amn-page-departing body, html.amn-page-departing body > :where(nav, main, section, footer, .sticky-cta):not(#lightbox), html.amn-page-arriving body { opacity: 1 !important; filter: none !important; transform: none !important; pointer-events: auto !important; animation: none !important; transition: none !important; will-change: auto !important; } } /* ============================================ MOBILE MENU SUBMENU CALM ============================================ */ @media (max-width: 968px) { .nav-links .nav-item.has-dropdown > .dropdown-top { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 6px; } .nav-links .nav-item.has-dropdown > .dropdown-top > a { min-height: 46px; display: flex; align-items: center; } .nav-links .dropdown-toggle { width: 46px; min-width: 46px; height: 46px; min-height: 46px; border-radius: 12px; background: rgba(249, 236, 228, 0.56); color: var(--green); } .nav-links .dropdown-arrow { display: inline-block; flex: 0 0 auto; opacity: 0.72; transform-origin: center; transition: transform 0.5s var(--ease-breath), opacity 0.36s ease !important; } .nav-links .nav-item.has-dropdown.open .dropdown-toggle .dropdown-arrow, .nav-links .dropdown-toggle[aria-expanded="true"] .dropdown-arrow { opacity: 1; transform: rotate(180deg); } .nav-links .nav-item.has-dropdown:not(.open) .dropdown-toggle .dropdown-arrow { transform: rotate(0deg); } .nav-links .dropdown-menu { display: block !important; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; background: rgba(249, 236, 228, 0.64); border-radius: 12px; margin-top: 0; padding: 0 0 0 16px; transform: translate3d(0, -4px, 0) scale(0.998); transition: max-height 0.56s var(--ease-breath), opacity 0.42s ease, transform 0.42s var(--ease-breath), padding-top 0.42s ease, padding-bottom 0.42s ease, margin-top 0.42s ease, background 0.42s ease !important; will-change: max-height, opacity, transform; } .nav-links .nav-item.has-dropdown:not(.open) > .dropdown-menu { max-height: 0; opacity: 0; pointer-events: none; margin-top: 0; padding-top: 0; padding-bottom: 0; transform: translate3d(0, -4px, 0) scale(0.998); } .nav-links .nav-item.has-dropdown.open > .dropdown-menu { max-height: var(--amn-mobile-submenu-height, 560px); opacity: 1; pointer-events: auto; margin-top: 4px; padding-top: 8px; padding-bottom: 8px; transform: translate3d(0, 0, 0) scale(1); } .nav-links .dropdown-menu a { border-radius: 10px; opacity: 0; padding: 9px 12px; transform: translate3d(4px, 0, 0); transition: opacity 0.34s ease 0.06s, transform 0.34s var(--ease-breath) 0.06s, background 0.24s ease, color 0.24s ease !important; } .nav-links .nav-item.has-dropdown.open > .dropdown-menu a { opacity: 1; transform: translate3d(0, 0, 0); } } @media (max-width: 968px) and (prefers-reduced-motion: reduce) { .nav-links .dropdown-toggle, .nav-links .dropdown-arrow, .nav-links .dropdown-menu, .nav-links .dropdown-menu a { animation: none !important; transition: none !important; transform: none !important; will-change: auto !important; } .nav-links .nav-item.has-dropdown:not(.open) > .dropdown-menu { opacity: 0; } } /* ============================================ MOBILE HORIZONTAL SCROLL CALM ============================================ */ @keyframes amn-swipe-breath { 0%, 100% { opacity: 0.42; transform: translate3d(0, 0, 0); } 42% { opacity: 0.76; transform: translate3d(5px, 0, 0); } 70% { opacity: 0.52; transform: translate3d(2px, 0, 0); } } @media (max-width: 768px) { .hscroll-track { scroll-behavior: smooth !important; scroll-snap-type: x proximity !important; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; padding-bottom: 36px !important; } .hscroll-card { scroll-snap-stop: normal; transition: transform 0.58s var(--ease-breath), box-shadow 0.58s ease, background 0.58s ease !important; } .hscroll-card:hover { transform: translate3d(0, -2px, 0) scale(1.001) !important; box-shadow: 0 12px 34px rgba(26, 63, 45, 0.09) !important; } .hscroll-card:active { transform: scale(0.996) !important; transition-duration: 0.18s !important; } .hscroll-card-icon { transition: transform 0.7s var(--ease-breath), background 0.7s ease, box-shadow 0.7s ease !important; } .hscroll-card:hover .hscroll-card-icon { transform: translate3d(0, -1px, 0) scale(1.025); } .hscroll-hint { opacity: 1 !important; transform: translate3d(0, 0, 0); transition: opacity 0.82s ease, transform 0.82s var(--ease-breath), visibility 0s linear 0s !important; } .hscroll-hint svg { animation: amn-swipe-breath 4.8s var(--ease-soft) infinite !important; will-change: transform, opacity; } .hscroll-track.amn-hscroll-calm { scroll-padding-inline: 18px; } .hscroll-track.amn-hscroll-interacting .hscroll-card { transition-duration: 0.34s !important; } .hscroll-hint.amn-hscroll-hint-calm { min-height: 28px; } .hscroll-hint.amn-hscroll-hint-resting { opacity: 1 !important; transform: translate3d(0, -2px, 0); } .hscroll-hint.amn-hscroll-hint-used { opacity: 0 !important; visibility: hidden; transform: translate3d(0, -6px, 0); transition: opacity 0.72s ease, transform 0.72s var(--ease-breath), visibility 0s linear 0.72s !important; } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .hscroll-track { scroll-behavior: auto !important; } .hscroll-card, .hscroll-card-icon, .hscroll-hint { transition-duration: 0.01ms !important; } .hscroll-hint svg { animation: none !important; } } @media (max-width: 768px) and (hover: none) and (pointer: coarse) { .hscroll-card:hover, .hscroll-card:hover .hscroll-card-icon { transform: none !important; } .hscroll-card:active { transform: scale(0.997) !important; } } @media (prefers-reduced-motion: reduce) { .hscroll-track { scroll-behavior: auto !important; } .hscroll-card, .hscroll-card-icon, .hscroll-hint, .hscroll-hint svg { animation: none !important; transition: none !important; transform: none !important; will-change: auto !important; } .hscroll-hint.amn-hscroll-hint-used, .hscroll-hint.amn-hscroll-hint-resting { opacity: 1 !important; visibility: visible !important; } } /* ============================================ MOBILE MICRO-MOTION GOVERNOR — slower decorative motion ============================================ */ @keyframes amn-mobile-centered-drift { 0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 0); } 50% { transform: translate(-50%, -50%) translate3d(0, -4px, 0); } } @keyframes amn-mobile-soft-wiggle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(0.45deg); } } @keyframes amn-mobile-soft-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } } @media (max-width: 768px) { .pt-split-left::before { animation: amn-mobile-centered-drift 22s var(--ease-soft) infinite !important; } .pt-split-left::after, .pt-float-shape { animation-name: amn-mobile-drift !important; animation-duration: 22s !important; animation-timing-function: var(--ease-soft) !important; animation-iteration-count: infinite !important; } .pt-split-left::after, .pt-float-shape-2 { animation-duration: 24s !important; } .pt-float-shape-3 { animation-duration: 26s !important; } .flip-hint svg { animation-name: amn-mobile-soft-wiggle !important; animation-duration: 5.8s !important; animation-timing-function: var(--ease-soft) !important; } .ro-scene.ro-i-hvile .ro-ring { animation-duration: 9.6s !important; animation-timing-function: var(--ease-soft) !important; } .pulse-soft { animation-name: amn-mobile-soft-pulse !important; animation-duration: 7s !important; animation-timing-function: var(--ease-soft) !important; } html.amn-ambient-governed .amn-ambient-motion:not(.amn-ambient-near), html.amn-ambient-governed body.amn-user-scrolling .amn-ambient-motion, html.amn-ambient-governed body.amn-menu-open .amn-ambient-motion, html.amn-ambient-governed body.amn-input-focused .amn-ambient-motion { animation-play-state: paused !important; will-change: auto !important; } html.amn-ambient-governed body.amn-user-scrolling .hero::before, html.amn-ambient-governed body.amn-user-scrolling .hero::after, html.amn-ambient-governed body.amn-user-scrolling .pt-split-left::before, html.amn-ambient-governed body.amn-user-scrolling .pt-split-left::after, html.amn-ambient-governed body.amn-menu-open .hero::before, html.amn-ambient-governed body.amn-menu-open .hero::after, html.amn-ambient-governed body.amn-menu-open .pt-split-left::before, html.amn-ambient-governed body.amn-menu-open .pt-split-left::after, html.amn-ambient-governed body.amn-input-focused .hero::before, html.amn-ambient-governed body.amn-input-focused .hero::after, html.amn-ambient-governed body.amn-input-focused .pt-split-left::before, html.amn-ambient-governed body.amn-input-focused .pt-split-left::after { animation-play-state: paused !important; } } @media (prefers-reduced-motion: reduce) { .pt-split-left::before, .pt-split-left::after, .pt-float-shape, .flip-hint svg, .pulse-soft, .ro-scene.ro-i-hvile .ro-cirkel, .ro-scene.ro-i-hvile .ro-ring { animation: none !important; } .amn-ambient-motion { animation: none !important; transition: none !important; will-change: auto !important; } } /* ============================================ MOBILE TOUCH SURFACE CALM — no sticky hover lifts ============================================ */ @media (max-width: 768px) and (hover: none) and (pointer: coarse) { .offering-card, .feature-item, .price-card, .pricing-card, .tif-price-card, .pt-price-row, .pakke-card, .tilbud-card, .topic-item, .program-card, .course-card, .product-card, .flagship, .event-card, .event-choice, .event-info-card, .calendar-card, .booking-path-card, .b2b-kort, .local-service-card, .local-path, .policy-card, .contact-box-item, .contact-info-item, .cert-card, .value-card, .eco-layer, .stat-card, .blog-card, .route-card, .passion-card, .path-card, .universe-card, .explore-card, .soft-card, .org-pill { -webkit-tap-highlight-color: transparent; transition: transform 0.58s var(--ease-breath), box-shadow 0.58s ease, border-color 0.42s ease, background 0.42s ease !important; } .offering-card:hover, .feature-item:hover, .price-card:hover, .price-card.featured:hover, .pricing-card:hover, .tif-price-card:hover, .pt-price-row:hover, .pakke-card:hover, .tilbud-card:hover, .topic-item:hover, .program-card:hover, .course-card:hover, .product-card:hover, .flagship:hover, .event-card:hover, .event-choice:hover, .event-info-card:hover, .calendar-card:hover, .booking-path-card:hover, .b2b-kort:hover, .local-service-card:hover, .local-path:hover, .policy-card:hover, .contact-box-item:hover, .contact-info-item:hover, .cert-card:hover, .value-card:hover, .eco-layer:hover, .stat-card:hover, .blog-card:hover, .route-card:hover, .passion-card:hover, .path-card:hover, .universe-card:hover, .explore-card:hover, .soft-card:hover, .org-pill:hover { transform: none !important; } .offering-card:active, .feature-item:active, .price-card:active, .pricing-card:active, .tif-price-card:active, .pt-price-row:active, .pakke-card:active, .tilbud-card:active, .topic-item:active, .program-card:active, .course-card:active, .product-card:active, .flagship:active, .event-card:active, .event-choice:active, .event-info-card:active, .calendar-card:active, .booking-path-card:active, .b2b-kort:active, .local-service-card:active, .local-path:active, .policy-card:active, .contact-box-item:active, .contact-info-item:active, .cert-card:active, .value-card:active, .eco-layer:active, .stat-card:active, .blog-card:active, .route-card:active, .passion-card:active, .path-card:active, .universe-card:active, .explore-card:active, .soft-card:active, .org-pill:active { transform: scale(0.997) !important; transition-duration: 0.18s !important; } .amn-touch-calm { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transform-origin: center; transition: transform 0.52s var(--ease-breath), box-shadow 0.52s ease, border-color 0.42s ease, background 0.42s ease, filter 0.42s ease !important; } .amn-touch-calm.amn-touch-pressed { transform: translate3d(0, 1px, 0) scale(0.992) !important; filter: saturate(0.97) brightness(0.995); transition-duration: 0.16s !important; } .amn-touch-calm.amn-touch-settling { animation: amn-touch-settle 0.58s var(--ease-breath) both; } :where( .btn-primary, .btn-secondary, .hero-btn, .hero-cta, .hero-cta-btn, .contact-btn, .sticky-cta-link, .lp-cta, .price-btn, .tif-price-btn, .vej-knapper .vej-primaer, .vej-knapper .vej-sekundaer, .universe-cta a, .newsletter-form button ).amn-touch-calm { backface-visibility: hidden; transition: background-color 0.62s var(--ease-breath), color 0.46s ease, border-color 0.52s ease, box-shadow 0.62s ease, transform 0.52s var(--ease-breath), filter 0.46s ease !important; } :where( .btn-primary, .btn-secondary, .hero-btn, .hero-cta, .hero-cta-btn, .contact-btn, .sticky-cta-link, .lp-cta, .price-btn, .tif-price-btn, .vej-knapper .vej-primaer, .vej-knapper .vej-sekundaer, .universe-cta a, .newsletter-form button ).amn-touch-calm.amn-touch-pressed { transform: translate3d(0, 1px, 0) scale(0.99) !important; filter: saturate(0.965) brightness(0.992); transition-duration: 0.18s !important; } :where( .btn-primary, .btn-secondary, .hero-btn, .hero-cta, .hero-cta-btn, .contact-btn, .sticky-cta-link, .lp-cta, .price-btn, .tif-price-btn, .vej-knapper .vej-primaer, .vej-knapper .vej-sekundaer, .universe-cta a, .newsletter-form button ).amn-touch-calm.amn-touch-settling { animation: amn-touch-settle 0.7s var(--ease-breath) both; } .offering-card:hover .offering-icon, .feature-item:hover .feature-icon, .feature-item:hover .feature-number, .event-card:hover .event-card-icon, .event-info-card:hover .event-info-icon, .calendar-card:hover .calendar-date, .cert-card:hover .cert-icon, .value-card:hover .value-icon, .eco-layer:hover .eco-layer-icon, .contact-info-item:hover .contact-info-icon, .topic-item:hover .topic-icon, .tilbud-card:hover .tilbud-icon, .program-card:hover .program-icon, .route-card:hover .route-card-bg, .passion-card:hover .passion-card-bg, .about-image:hover img, .about-image:hover::after { transform: none !important; } .flip-card:not(.flipped):hover .flip-card-inner { transform: none !important; } .flip-card:not(.flipped):hover .flip-hint { opacity: 0.65 !important; } .footer a.amn-touch-calm, .ref-footer a.amn-touch-calm { -webkit-tap-highlight-color: transparent; transition: color 0.46s ease, background-color 0.46s ease, opacity 0.42s ease, transform 0.5s var(--ease-breath), filter 0.42s ease, padding-left 0.42s var(--ease-breath) !important; } } @media (max-width: 768px) and (hover: none) and (pointer: coarse) { .offering-card { border-radius: 22px; transform-origin: center top; transition: transform 0.72s var(--ease-breath), box-shadow 0.72s ease, background 0.72s ease, filter 0.52s ease !important; } .offering-card::before { height: 3px; transform: scaleX(0.18); opacity: 0.55; transition: transform 0.86s var(--ease-breath), opacity 0.72s ease !important; } .offering-card:hover::before, .offering-card.amn-touch-pressed::before { transform: scaleX(0.34); opacity: 0.72; } .offering-icon { transition: background-color 0.76s var(--ease-breath), color 0.46s ease, transform 0.72s var(--ease-breath), box-shadow 0.72s ease !important; } .offering-card:hover .offering-icon, .offering-card.amn-touch-pressed .offering-icon { background: var(--green); transform: translate3d(0, 1px, 0) scale(0.992) !important; } .offering-link { transition: color 0.46s ease, gap 0.6s var(--ease-breath), opacity 0.42s ease !important; } .offering-link:hover { gap: 6px; } } @media (max-width: 768px) and (hover: none) and (pointer: coarse) { .universe-grid { gap: 14px !important; margin-top: 32px !important; } .universe-card { border-radius: 20px !important; box-shadow: 0 10px 30px rgba(26, 63, 45, 0.045); transform-origin: center top; transition: transform 0.72s var(--ease-breath), box-shadow 0.72s ease, background 0.72s ease, filter 0.52s ease !important; } .universe-card:hover { box-shadow: 0 10px 30px rgba(26, 63, 45, 0.045) !important; } .universe-card:active, .universe-card.amn-touch-pressed { transform: translate3d(0, 1px, 0) scale(0.998) !important; box-shadow: 0 8px 22px rgba(26, 63, 45, 0.04) !important; transition-duration: 0.22s !important; } .universe-card .u-num { display: inline-block; transition: color 0.62s ease, transform 0.72s var(--ease-breath), opacity 0.5s ease !important; } .universe-card:active .u-num, .universe-card.amn-touch-pressed .u-num { transform: translate3d(0, 1px, 0) scale(0.99); opacity: 0.88; } .universe-foundation { transition: background-color 0.72s var(--ease-breath), color 0.52s ease, transform 0.72s var(--ease-breath), box-shadow 0.72s ease !important; } .universe-cta a { transition: background-color 0.62s var(--ease-breath), color 0.46s ease, border-color 0.52s ease, transform 0.52s var(--ease-breath), box-shadow 0.62s ease !important; } } @media (max-width: 768px) and (hover: none) and (pointer: coarse) { .instagram-section { padding: 68px 24px !important; } .instagram-icon { box-shadow: 0 10px 28px rgba(34, 82, 59, 0.12); transform-origin: center; transition: background-color 0.78s var(--ease-breath), transform 0.82s var(--ease-breath), box-shadow 0.72s ease !important; } .instagram-icon:hover { transform: none !important; box-shadow: 0 10px 28px rgba(34, 82, 59, 0.12); } .instagram-title::after { transition: width 0.74s var(--ease-breath), opacity 0.52s ease !important; } .instagram-btn { -webkit-tap-highlight-color: transparent; box-shadow: 0 10px 26px rgba(34, 82, 59, 0.18) !important; transform-origin: center; transition: background-color 0.62s var(--ease-breath), color 0.46s ease, gap 0.52s var(--ease-breath), transform 0.52s var(--ease-breath), box-shadow 0.62s ease, filter 0.42s ease !important; } .instagram-btn:hover { transform: none !important; box-shadow: 0 10px 26px rgba(34, 82, 59, 0.18) !important; } .instagram-btn:active, .instagram-btn.amn-touch-pressed { transform: translate3d(0, 1px, 0) scale(0.99) !important; box-shadow: 0 8px 20px rgba(34, 82, 59, 0.16) !important; transition-duration: 0.18s !important; } } @media (max-width: 768px) and (hover: none) and (pointer: coarse) { :where( .btn-primary, .btn-secondary, .hero-btn, .hero-cta, .hero-cta-btn, .contact-btn, .sticky-cta-link, .lp-cta, .price-btn, .tif-price-btn, .vej-knapper .vej-primaer, .vej-knapper .vej-sekundaer, .instagram-btn, .universe-cta a, .newsletter-form button ):hover { transform: none !important; } .footer a:hover { padding-left: 0 !important; } .footer-social a:hover { transform: none !important; } .explore-card:hover .explore-arrow, .sticky-cta-link:hover .sticky-cta-pil { transform: none !important; } .vej-valg button:hover:not(.vej-valgt) { box-shadow: none !important; transform: none !important; } .vej-valg button:hover:not(.vej-valgt)::after { opacity: 0 !important; transform: translate(-6px, -50%) !important; } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .amn-touch-calm, .footer a.amn-touch-calm, .ref-footer a.amn-touch-calm, .amn-touch-calm.amn-touch-pressed, .amn-touch-calm.amn-touch-settling, .offering-card, .offering-card::before, .offering-icon, .offering-link, .universe-card, .universe-card .u-num, .universe-foundation, .universe-cta a, .instagram-icon, .instagram-title::after, .instagram-btn { animation: none !important; transition: none !important; transform: none !important; filter: none !important; } .offering-card::before { transform: scaleX(0.18) !important; } .offering-card, .feature-item, .price-card, .pricing-card, .tif-price-card, .pt-price-row, .pakke-card, .tilbud-card, .topic-item, .program-card, .course-card, .product-card, .flagship, .event-card, .event-choice, .event-info-card, .calendar-card, .booking-path-card, .b2b-kort, .local-service-card, .local-path, .policy-card, .contact-box-item, .contact-info-item, .cert-card, .value-card, .eco-layer, .stat-card, .blog-card, .route-card, .passion-card, .path-card, .universe-card, .explore-card, .soft-card, .org-pill, .flip-card-inner { transition: none !important; } .offering-card:active, .feature-item:active, .price-card:active, .pricing-card:active, .tif-price-card:active, .pt-price-row:active, .pakke-card:active, .tilbud-card:active, .topic-item:active, .program-card:active, .course-card:active, .product-card:active, .flagship:active, .event-card:active, .event-choice:active, .event-info-card:active, .calendar-card:active, .booking-path-card:active, .b2b-kort:active, .local-service-card:active, .local-path:active, .policy-card:active, .contact-box-item:active, .contact-info-item:active, .cert-card:active, .value-card:active, .eco-layer:active, .stat-card:active, .blog-card:active, .route-card:active, .passion-card:active, .path-card:active, .universe-card:active, .explore-card:active, .soft-card:active, .org-pill:active { transform: none !important; } } /* ============================================ MOBILE ACCORDION CALM — FAQ + overview panels ============================================ */ @media (max-width: 768px) { .faq-question, .accordion-header { -webkit-tap-highlight-color: transparent; transition: background 0.48s ease, color 0.48s ease, transform 0.2s ease !important; } .faq-question:active, .accordion-header:active { transform: scale(0.998); } .faq-icon, .faq-icon svg, .accordion-toggle, .accordion-toggle svg, .accordion-icon-wrap { transition-duration: 0.56s !important; transition-timing-function: var(--ease-breath) !important; } .faq-answer, .accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.68s var(--ease-breath) !important; } .faq-answer-content, .accordion-body-inner { opacity: 0; transform: translate3d(0, -6px, 0) scale(0.998); transition: opacity 0.46s ease 0.1s, transform 0.46s var(--ease-breath) 0.1s !important; } .faq-answer.open .faq-answer-content, .accordion-item.active .accordion-body-inner { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .accordion-item { transition: box-shadow 0.58s ease, transform 0.58s var(--ease-breath) !important; } .accordion-item.active { box-shadow: 0 10px 32px rgba(34, 82, 59, 0.10) !important; } .accordion-item.active .accordion-icon-wrap { transform: scale(1.045) rotate(0deg) !important; } } @media (prefers-reduced-motion: reduce) { .faq-question, .accordion-header, .faq-icon, .faq-icon svg, .faq-answer, .faq-answer-content, .accordion-item, .accordion-toggle, .accordion-toggle svg, .accordion-icon-wrap, .accordion-body, .accordion-body-inner { animation: none !important; transition: none !important; } .faq-answer-content, .accordion-body-inner { opacity: 1 !important; transform: none !important; } } /* ============================================ MOBILE FORM CALM — gentler focus and choice feedback ============================================ */ @keyframes amn-choice-settle { 0% { transform: scale(0.992); box-shadow: 0 0 0 0 rgba(45, 107, 77, 0); } 48% { transform: scale(1.003); box-shadow: 0 0 0 7px rgba(45, 107, 77, 0.08); } 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(26, 63, 45, 0.06); } } @keyframes amn-status-settle { 0% { opacity: 0.68; transform: translate3d(0, 5px, 0) scale(0.998); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes amn-submit-breath { 0%, 100% { opacity: 0.22; transform: translate3d(-8%, 0, 0) scaleX(0.72); } 50% { opacity: 0.48; transform: translate3d(8%, 0, 0) scaleX(1); } } @keyframes amn-submit-settle { 0% { transform: scale(0.992); box-shadow: 0 0 0 0 rgba(45, 107, 77, 0); } 58% { transform: scale(1.002); box-shadow: 0 0 0 8px rgba(45, 107, 77, 0.075); } 100% { transform: scale(1); box-shadow: 0 10px 26px rgba(26, 63, 45, 0.10); } } @keyframes amn-field-focus-settle { 0% { box-shadow: 0 0 0 0 rgba(34, 82, 59, 0), 0 8px 24px rgba(26, 63, 45, 0); } 55% { box-shadow: 0 0 0 7px rgba(34, 82, 59, 0.075), 0 8px 24px rgba(26, 63, 45, 0.055); } 100% { box-shadow: 0 0 0 5px rgba(34, 82, 59, 0.08), 0 8px 24px rgba(26, 63, 45, 0.06); } } @keyframes amn-invalid-settle { 0% { transform: scale(0.997); box-shadow: 0 0 0 0 rgba(154, 96, 80, 0), 0 8px 22px rgba(75, 48, 38, 0); } 58% { transform: scale(1.002); box-shadow: 0 0 0 8px rgba(154, 96, 80, 0.068), 0 8px 22px rgba(75, 48, 38, 0.036); } 100% { transform: scale(1); box-shadow: 0 0 0 5px rgba(154, 96, 80, 0.052), 0 8px 22px rgba(75, 48, 38, 0.032); } } @keyframes amn-invalid-group-settle { 0% { transform: translate3d(0, 3px, 0) scale(0.998); box-shadow: 0 0 0 0 rgba(154, 96, 80, 0); } 60% { transform: translate3d(0, 0, 0) scale(1.001); box-shadow: 0 0 0 8px rgba(154, 96, 80, 0.052); } 100% { transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 5px rgba(154, 96, 80, 0.04); } } @media (max-width: 768px) { .amn-dynamic-calm { transition: opacity 0.72s var(--ease-breath), transform 0.72s var(--ease-breath), filter 0.72s ease !important; transition-delay: var(--amn-dynamic-delay, 0ms) !important; will-change: opacity, transform; } .amn-dynamic-calm.amn-dynamic-enter { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.998); filter: blur(4px); } .amn-status-settling { animation: amn-status-settle 0.62s var(--ease-breath) both; } .amn-status-label-calm { min-width: min(100%, var(--amn-status-min-width)); min-height: var(--amn-status-min-height); max-width: 100%; text-align: center; backface-visibility: hidden; transform-origin: center; } .felt-fejl { transition: outline-color 0.42s ease, box-shadow 0.42s ease, background-color 0.42s ease !important; box-shadow: 0 0 0 5px rgba(228, 101, 98, 0.07); } .fejl-hint, .guide-fejl, .balance-fejl, [role="alert"], .ref-copy-btn, .ref-copy-msg, .ref-native, [data-ev-submit] { transition: color 0.42s ease, background-color 0.42s ease, border-color 0.42s ease, opacity 0.42s ease, transform 0.42s var(--ease-breath) !important; } .ref-copy-btn.copied, .ref-copy-msg.copied { animation: amn-status-settle 0.62s var(--ease-breath) both; } body.amn-input-focused .sticky-cta, body.amn-keyboard-open .sticky-cta { transition: transform 0.32s var(--ease-breath), opacity 0.08s ease, visibility 0s linear 0.08s !important; transform: translate(-50%, 130%); opacity: 0; visibility: hidden; pointer-events: none; } body.amn-cta-scroll-resting .sticky-cta, body.amn-cta-quiet-zone .sticky-cta { transition: transform 0.46s var(--ease-breath), opacity 0.22s ease, filter 0.22s ease, visibility 0s linear 0.22s !important; transform: translate(-50%, calc(100% + 18px)) scale(0.992); opacity: 0; filter: saturate(0.96); visibility: hidden; pointer-events: none; } body.amn-validation-guidance-active .sticky-cta { transition: transform 0.34s var(--ease-breath), opacity 0.12s ease, visibility 0s linear 0.12s !important; transform: translate(-50%, 130%); opacity: 0; visibility: hidden; pointer-events: none; } form :where(button[type="submit"], input[type="submit"], button:not([type])).amn-submit-calm { transition: background-color 0.52s ease, border-color 0.52s ease, color 0.42s ease, opacity 0.42s ease, box-shadow 0.52s ease, transform 0.42s var(--ease-breath) !important; } form :where(button[type="submit"], input[type="submit"], button:not([type])).amn-submit-busy { cursor: wait; transform: scale(0.997); box-shadow: 0 10px 26px rgba(26, 63, 45, 0.10); } form button.amn-submit-busy { position: relative; overflow: hidden; isolation: isolate; } form button.amn-submit-busy::after { content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 253, 251, 0.42), transparent); transform-origin: center; animation: amn-submit-breath 2.25s var(--ease-soft) infinite; z-index: 0; } form :where(button[type="submit"], input[type="submit"], button:not([type])).amn-submit-settling { animation: amn-submit-settle 0.78s var(--ease-breath) both; } body form :where( input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], textarea, select ) { scroll-margin-top: 118px !important; transition: border-color 0.52s ease, background-color 0.52s ease, box-shadow 0.52s ease, outline-color 0.52s ease !important; } form :where( input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], textarea, select ):focus { outline: 2px solid rgba(45, 107, 77, 0.42) !important; outline-offset: 2px !important; border-color: rgba(34, 82, 59, 0.52) !important; background-color: #fffdfb !important; box-shadow: 0 0 0 5px rgba(34, 82, 59, 0.08), 0 8px 24px rgba(26, 63, 45, 0.06) !important; } :where( input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], textarea, select ).amn-field-focus-calm { transition: border-color 0.52s ease, background-color 0.52s ease, box-shadow 0.52s ease, outline-color 0.52s ease !important; } :where( input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], textarea, select ).amn-field-focus-settling { animation: amn-field-focus-settle 0.74s var(--ease-breath) both; } form :where( input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], textarea, select ).amn-invalid-calm { outline: 2px solid rgba(154, 96, 80, 0.24) !important; outline-offset: 2px !important; border-color: rgba(154, 96, 80, 0.42) !important; background-color: rgba(255, 250, 247, 0.98) !important; box-shadow: 0 0 0 5px rgba(154, 96, 80, 0.055), 0 8px 22px rgba(75, 48, 38, 0.032) !important; transition: border-color 0.52s ease, background-color 0.52s ease, box-shadow 0.56s ease, outline-color 0.52s ease, transform 0.42s var(--ease-breath) !important; } form :where(input[type="checkbox"], input[type="radio"]).amn-invalid-calm { outline: 2px solid rgba(154, 96, 80, 0.26) !important; outline-offset: 4px !important; box-shadow: 0 0 0 5px rgba(154, 96, 80, 0.05) !important; } form :where(input, textarea, select).amn-invalid-settling { animation: amn-invalid-settle 0.82s var(--ease-breath) both; } form :where( .form-group, .form-section, .samtykke-group, fieldset, label ).amn-invalid-group-calm { scroll-margin-top: 118px; transition: outline-color 0.52s ease, background-color 0.52s ease, box-shadow 0.56s ease, transform 0.42s var(--ease-breath) !important; } form :where(.form-group, .samtykke-group, fieldset).amn-invalid-group-calm { border-radius: 14px; outline: 1px solid rgba(154, 96, 80, 0.13); outline-offset: 6px; background-color: rgba(255, 250, 247, 0.34); } form :where(.form-section).amn-invalid-group-calm { border-radius: 18px; box-shadow: inset 3px 0 0 rgba(154, 96, 80, 0.2); } form :where( .radio-card label, .checkbox-label, .checkbox-time label, .samtykke-label ).amn-invalid-group-calm { background-color: rgba(255, 250, 247, 0.82); box-shadow: 0 0 0 5px rgba(154, 96, 80, 0.05); } form .felt-fejl { outline-color: rgba(154, 96, 80, 0.3) !important; box-shadow: 0 0 0 5px rgba(154, 96, 80, 0.05), 0 8px 22px rgba(75, 48, 38, 0.03) !important; } form :where(.fejl-hint, .amn-validation-hint).amn-invalid-message-calm, form .amn-validation-hint { color: rgb(125, 79, 68); line-height: 1.55; transition: color 0.42s ease, opacity 0.42s ease, transform 0.42s var(--ease-breath) !important; } form .amn-invalid-group-settling { animation: amn-invalid-group-settle 0.86s var(--ease-breath) both; } form :where( .radio-card label, .checkbox-label, .checkbox-time label, .samtykke-label, .bk-pay, .krs-pay, .shp-pay, .ev-pay, .clb-pay, .rc-pay, .gk-chip, .gk-pay, .gc-chip label, .balance-pills button, .bk-time ) { -webkit-tap-highlight-color: transparent; transition: background-color 0.52s ease, border-color 0.52s ease, box-shadow 0.52s ease, color 0.42s ease, transform 0.42s var(--ease-breath) !important; } form :where( .bk-pay.on, .krs-pay.on, .shp-pay.on, .ev-pay.on, .clb-pay.on, .rc-pay.on, .gk-chip.on, .gk-pay.on, .bk-time.sel ) { box-shadow: 0 8px 24px rgba(26, 63, 45, 0.06); } form :where( .bk-pay, .krs-pay, .shp-pay, .ev-pay, .clb-pay, .rc-pay, .gk-chip, .gk-pay, .gc-chip label, .balance-pills button, .bk-time ).amn-choice-settling { animation: amn-choice-settle 0.74s var(--ease-breath) both; } form :where( .radio-card label, .checkbox-label, .checkbox-time label, .samtykke-label, .bk-pay, .krs-pay, .shp-pay, .ev-pay, .clb-pay, .rc-pay, .gk-chip, .gk-pay, .gc-chip label, .balance-pills button, .bk-time ):active { transform: scale(0.998) !important; } form [data-ev-pay].amn-choice-panel { display: block !important; overflow: hidden; max-height: var(--amn-choice-panel-height, 540px); opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition: max-height 0.62s var(--ease-breath), opacity 0.44s ease, transform 0.44s var(--ease-breath), margin-top 0.44s ease !important; will-change: max-height, opacity, transform; } form [data-ev-pay].amn-choice-panel-hidden, form [data-ev-pay].amn-choice-panel-empty { max-height: 0 !important; opacity: 0; transform: translate3d(0, -8px, 0) scale(0.998); margin-top: 0 !important; pointer-events: none; } .ev-status, .ev-err { transition: color 0.44s ease, opacity 0.44s ease, transform 0.44s var(--ease-breath) !important; } .amn-collapse-panel { overflow: hidden; max-height: var(--amn-collapse-height, 420px); opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition: max-height 0.66s var(--ease-breath), opacity 0.46s ease, transform 0.52s var(--ease-breath), margin-top 0.46s ease !important; will-change: max-height, opacity, transform; } .amn-collapse-panel.amn-collapse-hidden { max-height: 0 !important; opacity: 0; transform: translate3d(0, -8px, 0) scale(0.998); margin-top: 0 !important; pointer-events: none; } } @media (max-width: 768px) and (hover: none) and (pointer: coarse) { form :where( .radio-card:hover label, .checkbox-label:hover, .bk-pay:hover, .krs-pay:hover, .shp-pay:hover, .ev-pay:hover, .clb-pay:hover, .rc-pay:hover, .gk-chip:hover, .gk-pay:hover, .gc-chip:hover label, .balance-pills button:hover, .bk-time:hover ) { transform: none !important; box-shadow: none !important; } } @media (prefers-reduced-motion: reduce) { form :where( input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="password"], textarea, select, button[type="submit"].amn-submit-calm, input[type="submit"].amn-submit-calm, button:not([type]).amn-submit-calm, .amn-field-focus-calm, .amn-invalid-calm, .amn-invalid-group-calm, .amn-invalid-message-calm, .radio-card label, .checkbox-label, .checkbox-time label, .samtykke-label, .bk-pay, .krs-pay, .shp-pay, .ev-pay, .clb-pay, .rc-pay, .gk-chip, .gk-pay, .gc-chip label, .balance-pills button, .bk-time, .amn-collapse-panel, [data-ev-pay].amn-choice-panel, .ev-status, .ev-err ) { transition: none !important; animation: none !important; transform: none !important; } .amn-dynamic-calm, .amn-dynamic-calm.amn-dynamic-enter, .amn-collapse-panel, .amn-collapse-panel.amn-collapse-hidden, form :where(button[type="submit"], input[type="submit"], button:not([type])).amn-submit-calm, .amn-field-focus-calm, .amn-field-focus-settling, .amn-invalid-calm, .amn-invalid-settling, .amn-invalid-group-calm, .amn-invalid-group-settling, .amn-invalid-message-calm, .amn-submit-busy, .amn-submit-settling, .amn-status-label-calm, .amn-status-settling, .ref-copy-btn.copied, .ref-copy-msg.copied { opacity: 1 !important; filter: none !important; animation: none !important; transition: none !important; transform: none !important; } form .radio-card input[type="radio"].amn-invalid-calm, form .radio-card input[type="radio"].amn-invalid-settling { opacity: 0 !important; } form button.amn-submit-busy::after { animation: none !important; opacity: 0 !important; } .amn-field-focus-calm, .amn-field-focus-settling, .amn-invalid-calm, .amn-invalid-settling, .amn-invalid-group-calm, .amn-invalid-group-settling { box-shadow: none !important; } body.amn-cta-scroll-resting .sticky-cta, body.amn-cta-quiet-zone .sticky-cta, body.amn-validation-guidance-active .sticky-cta { transition: opacity 0.01ms linear, visibility 0s linear 0.01ms !important; transform: translate(-50%, 0) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } /* ============================================ MOBILE LIGHTBOX CALM — route gallery overlays ============================================ */ .amn-route-gallery-card { display: block; width: 100%; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; background: transparent; } .amn-route-gallery-card:focus-visible, .amn-lightbox-close:focus-visible { outline: 2.5px solid rgba(255, 255, 255, 0.88); outline-offset: 4px; } .amn-lightbox-trigger-calm { -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline-offset: 5px; transition: transform 0.48s var(--ease-breath), box-shadow 0.48s ease, filter 0.48s ease !important; } .amn-lightbox-trigger-calm img { transition: transform 0.72s var(--ease-breath), filter 0.72s ease !important; } .amn-lightbox-trigger-calm:active { transform: scale(0.992); filter: saturate(0.96) brightness(0.99); transition-duration: 0.16s !important; } .amn-lightbox-trigger-calm:active img { transform: scale(1.012); } @media (max-width: 768px) and (hover: none) and (pointer: coarse) { .amn-lightbox-trigger-calm:hover, .amn-lightbox-trigger-calm:hover img { transform: none !important; } } #lightbox.amn-lightbox-calm { display: flex !important; opacity: 0; visibility: hidden; pointer-events: none; background: rgba(18, 25, 20, 0.74) !important; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: opacity 0.44s ease, visibility 0.44s, background-color 0.44s ease, backdrop-filter 0.44s ease, -webkit-backdrop-filter 0.44s ease !important; } #lightbox.amn-lightbox-calm.amn-lightbox-open { opacity: 1; visibility: visible; pointer-events: auto; background: rgba(18, 25, 20, 0.78) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #lightbox.amn-lightbox-calm #lightbox-image { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.986); transition: opacity 0.5s ease, transform 0.58s var(--ease-breath), box-shadow 0.58s ease !important; } #lightbox.amn-lightbox-calm.amn-lightbox-open #lightbox-image { opacity: 1; transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36) !important; } .amn-lightbox-close { position: absolute; top: 20px; right: 40px; z-index: 10000; width: 48px; height: 48px; border: 0; border-radius: 999px; color: #fff; background: rgba(18, 25, 20, 0.28); font: inherit; font-size: 40px; font-weight: 300; line-height: 1; cursor: pointer; } #lightbox.amn-lightbox-calm .amn-lightbox-close { opacity: 0.78; transition: opacity 0.3s ease, transform 0.3s var(--ease-breath) !important; } #lightbox.amn-lightbox-calm .amn-lightbox-close:active { transform: scale(0.94); } body.amn-lightbox-open { overflow: hidden; overscroll-behavior: contain; } @media (max-width: 768px) { #lightbox.amn-lightbox-calm { padding: 22px !important; } #lightbox.amn-lightbox-calm .amn-lightbox-close { top: 14px !important; right: 18px !important; font-size: 34px !important; } #lightbox.amn-lightbox-calm #lightbox-image { max-height: calc(100svh - 96px) !important; border-radius: 14px !important; } } @media (prefers-reduced-motion: reduce) { .amn-lightbox-trigger-calm, .amn-lightbox-trigger-calm img, .amn-lightbox-close, #lightbox.amn-lightbox-calm, #lightbox.amn-lightbox-calm #lightbox-image, #lightbox.amn-lightbox-calm .amn-lightbox-close { animation: none !important; transition: none !important; transform: none !important; filter: none !important; } #lightbox.amn-lightbox-calm #lightbox-image { opacity: 1 !important; transform: none !important; } } /* ============================================ MOBILE FLIP CARD CALM — steadier tap-to-turn cards ============================================ */ @media (max-width: 768px) { .flip-card.amn-flip-calm { -webkit-tap-highlight-color: transparent; touch-action: manipulation; perspective: 1400px; outline-offset: 4px; } .flip-card.amn-flip-calm .flip-card-inner { transition: transform 1.05s var(--ease-settle), filter 0.52s ease !important; } .flip-card.amn-flip-calm.amn-flip-settling .flip-card-inner { filter: saturate(0.96) brightness(0.99); } .flip-card.amn-flip-calm .flip-card-front, .flip-card.amn-flip-calm .flip-card-back { transition: box-shadow 0.64s ease, background-color 0.64s ease !important; } .flip-card.amn-flip-calm .flip-hint { transition: opacity 0.46s ease, transform 0.46s var(--ease-breath) !important; } .flip-card.amn-flip-calm.amn-flip-open .flip-hint { opacity: 0 !important; transform: translate3d(0, 4px, 0); } .flip-card.amn-flip-calm:focus-visible .flip-card-front, .flip-card.amn-flip-calm:focus-visible .flip-card-back { box-shadow: 0 0 0 3px rgba(249, 236, 228, 0.95), 0 0 0 6px rgba(45, 107, 77, 0.28), 0 14px 40px rgba(26, 63, 45, 0.12); } } @media (max-width: 768px) and (prefers-reduced-motion: reduce) { .flip-card.amn-flip-calm .flip-card-inner, .flip-card.amn-flip-calm .flip-card-front, .flip-card.amn-flip-calm .flip-card-back, .flip-card.amn-flip-calm .flip-hint { transition: none !important; filter: none !important; } } /* ============================================ MOBILE MENU COMPOSITE GLIDE — calmer drawer motion ============================================ */ @media (max-width: 968px) { .nav-links { right: 0 !important; transform: translate3d(102%, 0, 0) scale(0.992); transform-origin: right center; opacity: 0.86; visibility: hidden; pointer-events: none; height: 100svh; max-height: 100svh; transition: transform 0.32s var(--ease-settle), opacity 0.34s ease, visibility 0s linear 0.32s, box-shadow 0.38s ease !important; will-change: transform, opacity; backface-visibility: hidden; } @supports (height: 100dvh) { .nav-links { height: 100dvh; max-height: 100dvh; } } .nav-links .nav-contact, .nav-links .nav-contact .contact-btn { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .nav-links .nav-contact .contact-btn { display: flex; align-items: center; justify-content: center; padding-inline: 18px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-links.active { transform: translate3d(0, 0, 0) scale(1); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.32s var(--ease-settle), opacity 0.34s ease, visibility 0s linear 0s, box-shadow 0.38s ease !important; } .nav-links .nav-item { opacity: 0; transform: translate3d(8px, 3px, 0) scale(0.997); transition: opacity 0.42s ease, transform 0.5s var(--ease-breath) !important; } .nav-links.active .nav-item { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } .nav-links.active .nav-item:nth-child(2) { transition-delay: 0.03s; } .nav-links.active .nav-item:nth-child(3) { transition-delay: 0.055s; } .nav-links.active .nav-item:nth-child(4) { transition-delay: 0.08s; } .nav-links.active .nav-item:nth-child(5) { transition-delay: 0.105s; } .nav-links.active .nav-item:nth-child(6) { transition-delay: 0.13s; } .nav-links.active .nav-item:nth-child(7) { transition-delay: 0.155s; } body.amn-menu-open .mobile-menu-toggle { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.96); } } @media (max-width: 968px) and (prefers-reduced-motion: reduce) { .nav-links, .nav-links .nav-item, .overlay { transition: none !important; will-change: auto !important; } .nav-links:not(.active) { transform: translate3d(104%, 0, 0) !important; opacity: 1 !important; } .nav-links.active { transform: translate3d(0, 0, 0) !important; opacity: 1 !important; } .nav-links .nav-item, .nav-links.active .nav-item { opacity: 1 !important; transform: none !important; } .mobile-menu-toggle.amn-menu-toggle-active .hamburger span:nth-child(1) { transform: translate3d(0, 7px, 0) rotate(42deg) !important; } .mobile-menu-toggle.amn-menu-toggle-active .hamburger span:nth-child(2) { opacity: 0 !important; transform: scaleX(0.46) !important; } .mobile-menu-toggle.amn-menu-toggle-active .hamburger span:nth-child(3) { transform: translate3d(0, -7px, 0) rotate(-42deg) !important; } } /* ============================================ ANCHOR ARRIVAL CALM — same-page CTA landings ============================================ */ @keyframes amn-anchor-arrive { 0% { outline-color: rgba(45, 107, 77, 0); box-shadow: 0 0 0 0 rgba(45, 107, 77, 0); } 34% { outline-color: rgba(45, 107, 77, 0.22); box-shadow: 0 0 0 10px rgba(45, 107, 77, 0.055); } 100% { outline-color: rgba(45, 107, 77, 0); box-shadow: 0 0 0 18px rgba(45, 107, 77, 0); } } .amn-anchor-focus-target:focus { outline: none; } [id].amn-anchor-arrive { animation: amn-anchor-arrive 1.35s var(--ease-breath) both; outline: 2px solid transparent; outline-offset: 8px; border-radius: 18px; } body.amn-anchor-scrolling .sticky-cta { transform: translate(-50%, 130%); opacity: 0; visibility: hidden; pointer-events: none; } @media (max-width: 768px) { [id] { scroll-margin-top: 118px; } [id].amn-anchor-arrive { outline-offset: 6px; border-radius: 14px; } } @media (prefers-reduced-motion: reduce) { [id].amn-anchor-arrive { animation: none !important; box-shadow: none !important; outline-color: transparent !important; } } /* ============================================ MOBILE DETAILS CALM — native summary panels ============================================ */ details.amn-details-calm { overflow: visible; } details.amn-details-calm > summary { -webkit-tap-highlight-color: transparent; cursor: pointer; transition: color 0.42s ease, background-color 0.42s ease, border-color 0.42s ease, box-shadow 0.42s ease, transform 0.28s var(--ease-breath) !important; } details.amn-details-calm > summary:active { transform: scale(0.996); } details.amn-details-calm > .amn-details-body { max-height: 0; overflow: hidden; opacity: 0; transform: translate3d(0, -8px, 0) scale(0.998); filter: blur(2px); transition: max-height 0.68s var(--ease-breath), opacity 0.46s ease, transform 0.52s var(--ease-breath), filter 0.52s ease !important; will-change: max-height, opacity, transform; } details.amn-details-calm.amn-details-open > .amn-details-body { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; } details.amn-details-calm > .amn-details-body > * { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.42s ease 0.08s, transform 0.5s var(--ease-breath) 0.08s !important; } details.amn-details-calm.amn-details-open > .amn-details-body > * { opacity: 1; transform: translate3d(0, 0, 0); } @media (max-width: 768px) { details.amn-details-calm > summary { min-height: 48px; touch-action: manipulation; } } @media (prefers-reduced-motion: reduce) { details.amn-details-calm > summary, details.amn-details-calm > .amn-details-body, details.amn-details-calm > .amn-details-body > * { animation: none !important; transition: none !important; transform: none !important; filter: none !important; will-change: auto !important; } details.amn-details-calm > .amn-details-body, details.amn-details-calm > .amn-details-body > * { opacity: 1 !important; } } /* ============================================ NAVBAR LAYOUT SAFETY Keep the shared top menu compact and readable after the expanded Kolding/shop navigation added more desktop items. ============================================ */ .nav-container { justify-content: space-between; gap: clamp(16px, 2vw, 30px); } .nav-logo { flex: 0 0 auto; } .nav-links { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 4px; } .nav-item { flex: 0 1 auto; } .dropdown-top > a, .nav-item > a { white-space: nowrap; } @media (min-width: 969px) { .nav-item a { font-size: 0.94rem; line-height: 1.25; padding: 8px 9px; } .dropdown-top { gap: 0; } .dropdown-toggle { width: 24px; min-width: 24px; } .contact-btn { padding: 9px 18px !important; font-size: 0.78rem !important; } } @media (max-width: 968px) { .nav-container { justify-content: space-between; gap: 16px; height: 70px; } .mobile-menu-toggle { flex: 0 0 auto; margin-left: auto; z-index: 1002; } .nav-links { flex: none; justify-content: flex-start; left: 0; right: 0 !important; width: auto; max-width: none; padding-left: 28px; padding-right: 28px; } .dropdown-top > a, .nav-item > a { white-space: normal; } } /* Consent-bound customer proof. The complete section stays absent until the sessionless feed returns at least one exact, currently approved revision. */ .proof-showcase[hidden] { display: none !important; } .proof-showcase { background: var(--white); padding: 82px 30px 90px; scroll-margin-top: 96px; opacity: 0; transform: translateY(8px); } .proof-showcase.proof-showcase-ready { animation: amn-proof-arrive 560ms cubic-bezier(.22, .8, .3, 1) both; } .proof-showcase-inner { width: min(1100px, 100%); margin: 0 auto; } .proof-showcase-kicker { margin: 0 0 10px; color: var(--coral-text); font-size: .78rem; font-weight: 600; letter-spacing: 0; text-align: center; text-transform: uppercase; } .proof-showcase h2 { max-width: 760px; margin: 0 auto 34px; color: var(--green); font-family: var(--font-display); font-size: 2.45rem; line-height: 1.2; text-align: center; text-wrap: balance; } .public-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 18px; align-items: start; } .public-proof-grid[data-proof-count="1"] .public-proof-item { width: min(760px, 100%); margin: 0 auto; } .public-proof-item { min-width: 0; padding: 28px; overflow-wrap: anywhere; background: var(--cream); border: 1px solid rgba(34, 82, 59, .12); border-radius: 6px; box-shadow: 0 12px 32px rgba(34, 82, 59, .06); } .public-proof-item blockquote { margin: 0; } .public-proof-item blockquote p { margin: 0; color: var(--green-dark); font-family: var(--font-display); font-size: 1.24rem; line-height: 1.65; white-space: pre-line; } .public-proof-item blockquote footer { margin-top: 15px; color: var(--text-light); font-size: .88rem; font-weight: 500; line-height: 1.5; } .public-proof-story { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 13px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid rgba(34, 82, 59, .12); } .public-proof-story dt, .public-proof-story dd { margin: 0; line-height: 1.6; } .public-proof-story dt { color: var(--coral-dark, #9e4e4b); font-size: .78rem; font-weight: 600; text-transform: uppercase; } .public-proof-story dd { color: var(--text-light); font-size: .94rem; white-space: pre-line; } @keyframes amn-proof-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .proof-showcase { padding: 62px 20px 68px; } .proof-showcase h2 { margin-bottom: 26px; font-size: 2rem; } .public-proof-item { padding: 23px 21px; } .public-proof-story { grid-template-columns: 1fr; gap: 3px; } .public-proof-story dd + dt { margin-top: 8px; } } @media (prefers-reduced-motion: reduce) { .proof-showcase, .proof-showcase.proof-showcase-ready { opacity: 1; transform: none; animation: none; } }