@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap'); /* colors_and_type */ /* ========================================================================== Estaldo Design System — Colors & Type Source of truth: App/wwwroot/css/site.css (compiled from the Brixter SCSS foundation — forked from Untitled UI). Key facts learned from the compiled CSS: - Brand palette IS the Untitled UI default purple ramp (brand-600 #7F56D9, brand-700 #6941C6). The deep purple #421B4B seen in the logomark is decorative only — NOT the primary brand color. - Every piece of type/spacing is driven by the `displaysize--{xs,sm,md,lg,xl}` class on an ancestor (usually #app). The *same* token names resolve to different px values depending on which displaysize class is active. This is how the app adapts to dense agent desktops, touch phones, and Windows' "insane auto-zoom" display scaling. - The app container is
(or whichever size the user picked). Change the class at runtime to rescale. Usage:

…

…

========================================================================== */ /* ---------- Fonts ---------- */ /* Inconsolata fallback — the real font file has not been supplied yet. */ :root { /* ====================================================================== RAW PALETTE (Untitled UI scales, full set) ====================================================================== */ /* Base */ --palette-base-white: #FFFFFF; --palette-base-black: #000000; /* Brand — Untitled UI default purple */ --palette-brand-25: #FCFAFF; --palette-brand-50: #F9F5FF; --palette-brand-100: #F4EBFF; --palette-brand-200: #E9D7FE; --palette-brand-300: #D6BBFB; --palette-brand-400: #B692F6; --palette-brand-500: #9E77ED; --palette-brand-600: #7F56D9; /* Brand solid */ --palette-brand-700: #6941C6; /* Brand hover */ --palette-brand-800: #53389E; --palette-brand-900: #42307D; --palette-brand-950: #2C1C5F; /* Gray — light mode */ --palette-gray-25: #FCFCFD; --palette-gray-50: #F9FAFB; --palette-gray-100: #F2F4F7; --palette-gray-200: #EAECF0; --palette-gray-300: #D0D5DD; --palette-gray-400: #98A2B3; --palette-gray-500: #667085; --palette-gray-600: #475467; --palette-gray-700: #344054; --palette-gray-800: #182230; --palette-gray-900: #101828; --palette-gray-950: #0C111D; /* Error */ --palette-error-25: #FFFBFA; --palette-error-50: #FEF3F2; --palette-error-100: #FEE4E2; --palette-error-200: #FECDCA; --palette-error-300: #FDA29B; --palette-error-400: #F97066; --palette-error-500: #F04438; --palette-error-600: #D92D20; --palette-error-700: #B42318; --palette-error-800: #912018; --palette-error-900: #7A271A; --palette-error-950: #55160C; /* Warning */ --palette-warning-25: #FFFCF5; --palette-warning-50: #FFFAEB; --palette-warning-100: #FEF0C7; --palette-warning-200: #FEDF89; --palette-warning-300: #FEC84B; --palette-warning-400: #FDB022; --palette-warning-500: #F79009; --palette-warning-600: #DC6803; --palette-warning-700: #B54708; --palette-warning-800: #93370D; --palette-warning-900: #7A2E0E; --palette-warning-950: #4E1D09; /* Success */ --palette-success-25: #F6FEF9; --palette-success-50: #ECFDF3; --palette-success-100: #DCFAE6; --palette-success-200: #ABEFC6; --palette-success-300: #75E0A7; --palette-success-400: #47CD89; --palette-success-500: #17B26A; --palette-success-600: #079455; --palette-success-700: #067647; --palette-success-800: #085D3A; --palette-success-900: #074D31; --palette-success-950: #053321; /* Info / Blue Light */ --palette-blue-light-25: #F5FBFF; --palette-blue-light-50: #F0F9FF; --palette-blue-light-100: #E0F2FE; --palette-blue-light-200: #B9E6FE; --palette-blue-light-300: #7CD4FD; --palette-blue-light-400: #36BFFA; --palette-blue-light-500: #0BA5EC; --palette-blue-light-600: #0086C9; --palette-blue-light-700: #026AA2; --palette-blue-light-800: #065986; --palette-blue-light-900: #0B4A6F; --palette-blue-light-950: #062C41; /* Gray — dark mode */ --palette-gray-dm-25: #FAFAFA; --palette-gray-dm-50: #F5F5F6; --palette-gray-dm-100: #F0F1F1; --palette-gray-dm-200: #ECECED; --palette-gray-dm-300: #CECFD2; --palette-gray-dm-400: #94969C; --palette-gray-dm-500: #85888E; --palette-gray-dm-600: #61646C; --palette-gray-dm-700: #333741; --palette-gray-dm-800: #1F242F; --palette-gray-dm-900: #161B26; --palette-gray-dm-950: #0C111D; /* Gray tones (for data viz / calendars) */ --palette-gray-blue-50: #F8F9FC; --palette-gray-blue-500: #4E5BA6; --palette-gray-blue-600: #3E4784; --palette-gray-blue-700: #363F72; --palette-gray-cool-50: #F9F9FB; --palette-gray-cool-500: #5D6B98; --palette-gray-cool-600: #4A5578; --palette-gray-cool-700: #404968; --palette-gray-modern-50: #F8FAFC; --palette-gray-modern-500: #697586; --palette-gray-modern-600: #4B5565; --palette-gray-modern-700: #364152; --palette-gray-warm-50: #FAFAF9; --palette-gray-warm-500: #79716B; --palette-gray-warm-600: #57534E; --palette-gray-warm-700: #44403C; /* Extended palette (calendar/event colors + accents) */ --palette-teal-50: #F0FDF9; --palette-teal-500: #15B79E; --palette-teal-600: #0E9384; --palette-teal-700: #107569; --palette-cyan-50: #ECFDFF; --palette-cyan-500: #06AED4; --palette-cyan-600: #088AB2; --palette-cyan-700: #0E7090; --palette-blue-50: #EFF8FF; --palette-blue-500: #2E90FA; --palette-blue-600: #1570EF; --palette-blue-700: #175CD3; --palette-blue-dark-50: #EFF4FF; --palette-blue-dark-500: #2970FF; --palette-blue-dark-600: #155EEF; --palette-blue-dark-700: #004EEB; --palette-indigo-50: #EEF4FF; --palette-indigo-500: #6172F3; --palette-indigo-600: #444CE7; --palette-indigo-700: #3538CD; --palette-violet-50: #F5F3FF; --palette-violet-500: #875BF7; --palette-violet-600: #7839EE; --palette-violet-700: #6927DA; --palette-purple-25: #FAFAFF; --palette-purple-50: #F4F3FF; --palette-purple-100: #EBE9FE; --palette-purple-200: #D9D6FE; --palette-purple-300: #BDB4FE; --palette-purple-400: #9B8AFB; --palette-purple-500: #7A5AF8; --palette-purple-600: #6938EF; --palette-purple-700: #5925DC; --palette-fuchsia-50: #FDF4FF; --palette-fuchsia-500: #D444F1; --palette-fuchsia-600: #BA24D5; --palette-fuchsia-700: #9F1AB1; --palette-pink-50: #FDF2FA; --palette-pink-500: #EE46BC; --palette-pink-600: #DD2590; --palette-pink-700: #C11574; --palette-rose-50: #FFF1F3; --palette-rose-500: #F63D68; --palette-rose-600: #E31B54; --palette-rose-700: #C01048; --palette-orange-dark-50: #FFF4ED; --palette-orange-dark-500: #FF4405; --palette-orange-dark-600: #E62E05; --palette-orange-dark-700: #BC1B06; --palette-orange-50: #FEF6EE; --palette-orange-500: #EF6820; --palette-orange-600: #E04F16; --palette-orange-700: #B93815; --palette-yellow-50: #FEFBE8; --palette-yellow-500: #EAAA08; --palette-yellow-600: #CA8504; --palette-yellow-700: #A15C07; /* Decorative: Estaldo logomark deep purple (not part of brand ramp) */ --palette-estaldo-mark: #421B4B; /* ====================================================================== SEMANTIC TOKENS (light mode; matches the compiled --color-* namespace) ====================================================================== */ /* Text */ --color-text-primary: var(--palette-gray-900); --color-text-primary-on-brand: var(--palette-base-white); --color-text-secondary: var(--palette-gray-700); --color-text-secondary-hover: var(--palette-gray-800); --color-text-tertiary: var(--palette-gray-600); --color-text-tertiary-hover: var(--palette-gray-700); --color-text-quaternary: var(--palette-gray-500); --color-text-white: var(--palette-base-white); --color-text-disabled: var(--palette-gray-500); --color-text-placeholder: var(--palette-gray-500); --color-text-brand-primary: var(--palette-brand-900); --color-text-brand-secondary: var(--palette-brand-700); --color-text-brand-tertiary: var(--palette-brand-600); --color-text-error: var(--palette-error-600); --color-text-success: var(--palette-success-600); --color-text-warning: var(--palette-warning-600); --color-text-info: var(--palette-blue-light-600); /* Border */ --color-border-primary: var(--palette-gray-300); --color-border-secondary: var(--palette-gray-200); --color-border-tertiary: var(--palette-gray-100); --color-border-disabled: var(--palette-gray-300); --color-border-brand: var(--palette-brand-300); --color-border-brand-solid: var(--palette-brand-600); --color-border-error: var(--palette-error-300); --color-border-error-solid: var(--palette-error-600); --color-border-success: var(--palette-success-300); --color-border-warning: var(--palette-warning-300); --color-border-info: var(--palette-blue-light-300); /* Background */ --color-background-primary: var(--palette-base-white); --color-background-primary-alt: var(--palette-base-white); --color-background-primary-hover: var(--palette-gray-50); --color-background-secondary: var(--palette-gray-50); --color-background-secondary-alt: var(--palette-gray-50); --color-background-secondary-hover: var(--palette-gray-100); --color-background-tertiary: var(--palette-gray-100); --color-background-quaternary: var(--palette-gray-200); --color-background-active: var(--palette-gray-100); --color-background-disabled: var(--palette-gray-100); --color-background-brand-primary: var(--palette-brand-50); --color-background-brand-secondary: var(--palette-brand-100); --color-background-brand-solid: var(--palette-brand-600); --color-background-brand-solid-hover: var(--palette-brand-700); --color-background-brand-section: var(--palette-brand-800); --color-background-error-primary: var(--palette-error-50); --color-background-error-solid: var(--palette-error-600); --color-background-success-primary: var(--palette-success-50); --color-background-warning-primary: var(--palette-warning-50); --color-background-info-primary: var(--palette-blue-light-50); /* Foreground (icons) */ --color-foreground-primary: var(--palette-gray-900); --color-foreground-secondary: var(--palette-gray-700); --color-foreground-tertiary: var(--palette-gray-600); --color-foreground-quaternary: var(--palette-gray-500); --color-foreground-quinary: var(--palette-gray-400); --color-foreground-disabled: var(--palette-gray-400); --color-foreground-white: var(--palette-base-white); --color-foreground-brand: var(--palette-brand-600); --color-foreground-error: var(--palette-error-600); --color-foreground-success: var(--palette-success-600); --color-foreground-warning: var(--palette-warning-600); /* ====================================================================== TYPOGRAPHY BASE ====================================================================== */ --font-family: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'Inconsolata', 'JetBrains Mono', 'Fira Code', Consolas, monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ====================================================================== RADII — static part (radius scale from the foundation) ui-radius-sm / md are OVERRIDDEN by the displaysize-* class. ====================================================================== */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-4xl: 20px; --radius-full: 9999px; /* ====================================================================== SHADOWS — cool blue ====================================================================== */ --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.10); --shadow-md: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.10); --shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08); --shadow-xl: 0 8px 8px -4px rgba(16, 24, 40, 0.03), 0 20px 24px -4px rgba(16, 24, 40, 0.08); --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18); --shadow-3xl: 0 32px 64px -12px rgba(16, 24, 40, 0.14); --ring-brand: 0 0 0 4px rgba(158, 119, 237, 0.24); --ring-error: 0 0 0 4px rgba(240, 68, 56, 0.24); --ring-gray: 0 0 0 4px rgba(152, 162, 179, 0.14); /* ====================================================================== DEFAULTS (displaysize--md values — so a plain page still works) These are overridden by any ancestor .displaysize--* class. ====================================================================== */ --ui-spacing-3xs: 4px; --ui-spacing-2xs: 6px; --ui-spacing-xs: 8px; --ui-spacing-sm: 12px; --ui-spacing-md: 16px; --ui-spacing-lg: 20px; --ui-spacing-xl: 24px; --ui-spacing-2xl: 32px; --ui-spacing-3xl: 40px; --ui-radius-sm: 6px; --ui-radius-md: 8px; --text-2xs-size: 8px; --text-2xs-line-height: 14px; --text-2xs-letter-spacing: 0.02em; --text-xs-size: 10px; --text-xs-line-height: 16px; --text-xs-letter-spacing: 0.02em; --text-sm-size: 12px; --text-sm-line-height: 18px; --text-sm-letter-spacing: normal; --text-md-size: 14px; --text-md-line-height: 20px; --text-md-letter-spacing: normal; --text-lg-size: 16px; --text-lg-line-height: 24px; --text-lg-letter-spacing: normal; --text-xl-size: 18px; --text-xl-line-height: 28px; --text-xl-letter-spacing: normal; --heading-xs-size: 24px; --heading-xs-line-height: 32px; --heading-xs-letter-spacing: normal; --heading-sm-size: 30px; --heading-sm-line-height: 38px; --heading-sm-letter-spacing: normal; --heading-md-size: 36px; --heading-md-line-height: 44px; --heading-md-letter-spacing: -0.02em; --heading-lg-size: 48px; --heading-lg-line-height: 60px; --heading-lg-letter-spacing: -0.02em; --heading-xl-size: 60px; --heading-xl-line-height: 72px; --heading-xl-letter-spacing: -0.02em; --heading-2xl-size: 72px; --heading-2xl-line-height: 90px; --heading-2xl-letter-spacing: -0.02em; } /* ========================================================================== DISPLAYSIZE CLASSES Put one of these on the app root (#app) and all tokens rescale. ========================================================================== */ .displaysize--xs { --ui-spacing-3xs: 2px; --ui-spacing-2xs: 2px; --ui-spacing-xs: 4px; --ui-spacing-sm: 6px; --ui-spacing-md: 8px; --ui-spacing-lg: 12px; --ui-spacing-xl: 16px; --ui-spacing-2xl: 20px; --ui-spacing-3xl: 24px; --ui-radius-sm: 4px; --ui-radius-md: 4px; --text-2xs-size: 8px; --text-2xs-line-height: 14px; --text-2xs-letter-spacing: 0.02em; --text-xs-size: 8px; --text-xs-line-height: 14px; --text-xs-letter-spacing: 0.02em; --text-sm-size: 8px; --text-sm-line-height: 14px; --text-sm-letter-spacing: 0.02em; --text-md-size: 10px; --text-md-line-height: 16px; --text-md-letter-spacing: 0.02em; --text-lg-size: 12px; --text-lg-line-height: 18px; --text-lg-letter-spacing: normal; --text-xl-size: 14px; --text-xl-line-height: 20px; --text-xl-letter-spacing: normal; --heading-xs-size: 20px; --heading-xs-line-height: 28px; --heading-xs-letter-spacing: normal; --heading-sm-size: 20px; --heading-sm-line-height: 28px; --heading-sm-letter-spacing: normal; --heading-md-size: 24px; --heading-md-line-height: 32px; --heading-md-letter-spacing: normal; --heading-lg-size: 30px; --heading-lg-line-height: 38px; --heading-lg-letter-spacing: normal; --heading-xl-size: 36px; --heading-xl-line-height: 44px; --heading-xl-letter-spacing: -0.02em; --heading-2xl-size: 48px; --heading-2xl-line-height: 60px; --heading-2xl-letter-spacing: -0.02em; } .displaysize--sm { --ui-spacing-3xs: 2px; --ui-spacing-2xs: 4px; --ui-spacing-xs: 6px; --ui-spacing-sm: 8px; --ui-spacing-md: 12px; --ui-spacing-lg: 16px; --ui-spacing-xl: 20px; --ui-spacing-2xl: 24px; --ui-spacing-3xl: 32px; --ui-radius-sm: 4px; --ui-radius-md: 6px; --text-2xs-size: 8px; --text-2xs-line-height: 14px; --text-2xs-letter-spacing: 0.02em; --text-xs-size: 8px; --text-xs-line-height: 14px; --text-xs-letter-spacing: 0.02em; --text-sm-size: 10px; --text-sm-line-height: 16px; --text-sm-letter-spacing: 0.02em; --text-md-size: 12px; --text-md-line-height: 18px; --text-md-letter-spacing: normal; --text-lg-size: 14px; --text-lg-line-height: 20px; --text-lg-letter-spacing: normal; --text-xl-size: 16px; --text-xl-line-height: 24px; --text-xl-letter-spacing: normal; --heading-xs-size: 20px; --heading-xs-line-height: 28px; --heading-xs-letter-spacing: normal; --heading-sm-size: 24px; --heading-sm-line-height: 32px; --heading-sm-letter-spacing: normal; --heading-md-size: 30px; --heading-md-line-height: 38px; --heading-md-letter-spacing: normal; --heading-lg-size: 36px; --heading-lg-line-height: 44px; --heading-lg-letter-spacing: -0.02em; --heading-xl-size: 48px; --heading-xl-line-height: 60px; --heading-xl-letter-spacing: -0.02em; --heading-2xl-size: 60px; --heading-2xl-line-height: 72px; --heading-2xl-letter-spacing: -0.02em; } .displaysize--md { --ui-spacing-3xs: 4px; --ui-spacing-2xs: 6px; --ui-spacing-xs: 8px; --ui-spacing-sm: 12px; --ui-spacing-md: 16px; --ui-spacing-lg: 20px; --ui-spacing-xl: 24px; --ui-spacing-2xl: 32px; --ui-spacing-3xl: 40px; --ui-radius-sm: 6px; --ui-radius-md: 8px; --text-2xs-size: 8px; --text-2xs-line-height: 14px; --text-2xs-letter-spacing: 0.02em; --text-xs-size: 10px; --text-xs-line-height: 16px; --text-xs-letter-spacing: 0.02em; --text-sm-size: 12px; --text-sm-line-height: 18px; --text-sm-letter-spacing: normal; --text-md-size: 14px; --text-md-line-height: 20px; --text-md-letter-spacing: normal; --text-lg-size: 16px; --text-lg-line-height: 24px; --text-lg-letter-spacing: normal; --text-xl-size: 18px; --text-xl-line-height: 28px; --text-xl-letter-spacing: normal; --heading-xs-size: 24px; --heading-xs-line-height: 32px; --heading-xs-letter-spacing: normal; --heading-sm-size: 30px; --heading-sm-line-height: 38px; --heading-sm-letter-spacing: normal; --heading-md-size: 36px; --heading-md-line-height: 44px; --heading-md-letter-spacing: -0.02em; --heading-lg-size: 48px; --heading-lg-line-height: 60px; --heading-lg-letter-spacing: -0.02em; --heading-xl-size: 60px; --heading-xl-line-height: 72px; --heading-xl-letter-spacing: -0.02em; --heading-2xl-size: 72px; --heading-2xl-line-height: 90px; --heading-2xl-letter-spacing: -0.02em; } .displaysize--lg { --ui-spacing-3xs: 6px; --ui-spacing-2xs: 8px; --ui-spacing-xs: 12px; --ui-spacing-sm: 16px; --ui-spacing-md: 20px; --ui-spacing-lg: 24px; --ui-spacing-xl: 32px; --ui-spacing-2xl: 40px; --ui-spacing-3xl: 48px; --ui-radius-sm: 8px; --ui-radius-md: 10px; --text-2xs-size: 10px; --text-2xs-line-height: 16px; --text-2xs-letter-spacing: 0.02em; --text-xs-size: 12px; --text-xs-line-height: 18px; --text-xs-letter-spacing: normal; --text-sm-size: 14px; --text-sm-line-height: 20px; --text-sm-letter-spacing: normal; --text-md-size: 16px; --text-md-line-height: 24px; --text-md-letter-spacing: normal; --text-lg-size: 18px; --text-lg-line-height: 28px; --text-lg-letter-spacing: normal; --text-xl-size: 20px; --text-xl-line-height: 30px; --text-xl-letter-spacing: normal; --heading-xs-size: 30px; --heading-xs-line-height: 38px; --heading-xs-letter-spacing: normal; --heading-sm-size: 36px; --heading-sm-line-height: 44px; --heading-sm-letter-spacing: -0.02em; --heading-md-size: 48px; --heading-md-line-height: 60px; --heading-md-letter-spacing: -0.02em; --heading-lg-size: 60px; --heading-lg-line-height: 72px; --heading-lg-letter-spacing: -0.02em; --heading-xl-size: 72px; --heading-xl-line-height: 90px; --heading-xl-letter-spacing: -0.02em; --heading-2xl-size: 84px; --heading-2xl-line-height: 90px; --heading-2xl-letter-spacing: -0.02em; } .displaysize--xl { --ui-spacing-3xs: 8px; --ui-spacing-2xs: 12px; --ui-spacing-xs: 16px; --ui-spacing-sm: 20px; --ui-spacing-md: 24px; --ui-spacing-lg: 32px; --ui-spacing-xl: 40px; --ui-spacing-2xl: 48px; --ui-spacing-3xl: 64px; --ui-radius-sm: 10px; --ui-radius-md: 12px; --text-2xs-size: 12px; --text-2xs-line-height: 18px; --text-2xs-letter-spacing: normal; --text-xs-size: 14px; --text-xs-line-height: 20px; --text-xs-letter-spacing: normal; --text-sm-size: 16px; --text-sm-line-height: 24px; --text-sm-letter-spacing: normal; --text-md-size: 18px; --text-md-line-height: 28px; --text-md-letter-spacing: normal; --text-lg-size: 20px; --text-lg-line-height: 30px; --text-lg-letter-spacing: normal; --text-xl-size: 22px; --text-xl-line-height: 32px; --text-xl-letter-spacing: normal; --heading-xs-size: 36px; --heading-xs-line-height: 44px; --heading-xs-letter-spacing: -0.02em; --heading-sm-size: 48px; --heading-sm-line-height: 60px; --heading-sm-letter-spacing: -0.02em; --heading-md-size: 60px; --heading-md-line-height: 72px; --heading-md-letter-spacing: -0.02em; --heading-lg-size: 72px; --heading-lg-line-height: 90px; --heading-lg-letter-spacing: -0.02em; --heading-xl-size: 84px; --heading-xl-line-height: 90px; --heading-xl-letter-spacing: -0.02em; --heading-2xl-size: 84px; --heading-2xl-line-height: 90px; --heading-2xl-letter-spacing: -0.02em; } /* ========================================================================== TYPOGRAPHY HELPERS ========================================================================== */ html, body { font-family: var(--font-family); color: var(--color-text-primary); background-color: var(--color-background-primary); -webkit-font-smoothing: antialiased; } .text-2xs { font-size: var(--text-2xs-size); line-height: var(--text-2xs-line-height); letter-spacing: var(--text-2xs-letter-spacing); } .text-xs { font-size: var(--text-xs-size); line-height: var(--text-xs-line-height); letter-spacing: var(--text-xs-letter-spacing); } .text-sm { font-size: var(--text-sm-size); line-height: var(--text-sm-line-height); letter-spacing: var(--text-sm-letter-spacing); } .text-md { font-size: var(--text-md-size); line-height: var(--text-md-line-height); letter-spacing: var(--text-md-letter-spacing); } .text-lg { font-size: var(--text-lg-size); line-height: var(--text-lg-line-height); letter-spacing: var(--text-lg-letter-spacing); } .text-xl { font-size: var(--text-xl-size); line-height: var(--text-xl-line-height); letter-spacing: var(--text-xl-letter-spacing); } .heading-xs { font-size: var(--heading-xs-size); line-height: var(--heading-xs-line-height); letter-spacing: var(--heading-xs-letter-spacing); font-weight: 600; } .heading-sm { font-size: var(--heading-sm-size); line-height: var(--heading-sm-line-height); letter-spacing: var(--heading-sm-letter-spacing); font-weight: 600; } .heading-md { font-size: var(--heading-md-size); line-height: var(--heading-md-line-height); letter-spacing: var(--heading-md-letter-spacing); font-weight: 600; } .heading-lg { font-size: var(--heading-lg-size); line-height: var(--heading-lg-line-height); letter-spacing: var(--heading-lg-letter-spacing); font-weight: 600; } .heading-xl { font-size: var(--heading-xl-size); line-height: var(--heading-xl-line-height); letter-spacing: var(--heading-xl-letter-spacing); font-weight: 700; } .heading-2xl { font-size: var(--heading-2xl-size); line-height: var(--heading-2xl-line-height); letter-spacing: var(--heading-2xl-letter-spacing); font-weight: 700; } /* ========================================================================== BACK-COMPAT ALIASES — so preview cards written before the correction keep working. Prefer --palette-* and --color-* going forward. ========================================================================== */ :root { --brand-25: var(--palette-brand-25); --brand-50: var(--palette-brand-50); --brand-100: var(--palette-brand-100); --brand-200: var(--palette-brand-200); --brand-300: var(--palette-brand-300); --brand-400: var(--palette-brand-400); --brand-500: var(--palette-brand-500); --brand-600: var(--palette-brand-600); --brand-700: var(--palette-brand-700); --brand-800: var(--palette-brand-800); --brand-900: var(--palette-brand-900); --brand-950: var(--palette-brand-950); --gray-25: var(--palette-gray-25); --gray-50: var(--palette-gray-50); --gray-100: var(--palette-gray-100); --gray-200: var(--palette-gray-200); --gray-300: var(--palette-gray-300); --gray-400: var(--palette-gray-400); --gray-500: var(--palette-gray-500); --gray-600: var(--palette-gray-600); --gray-700: var(--palette-gray-700); --gray-800: var(--palette-gray-800); --gray-900: var(--palette-gray-900); --gray-950: var(--palette-gray-950); --error-50: var(--palette-error-50); --error-100: var(--palette-error-100); --error-200: var(--palette-error-200); --error-300: var(--palette-error-300); --error-400: var(--palette-error-400); --error-500: var(--palette-error-500); --error-600: var(--palette-error-600); --error-700: var(--palette-error-700); --success-50: var(--palette-success-50); --success-100: var(--palette-success-100); --success-200: var(--palette-success-200); --success-300: var(--palette-success-300); --success-400: var(--palette-success-400); --success-500: var(--palette-success-500); --success-600: var(--palette-success-600); --success-700: var(--palette-success-700); --warning-50: var(--palette-warning-50); --warning-100: var(--palette-warning-100); --warning-200: var(--palette-warning-200); --warning-300: var(--palette-warning-300); --warning-400: var(--palette-warning-400); --warning-500: var(--palette-warning-500); --warning-600: var(--palette-warning-600); --warning-700: var(--palette-warning-700); --info-50: var(--palette-blue-light-50); --info-100: var(--palette-blue-light-100); --info-200: var(--palette-blue-light-200); --info-300: var(--palette-blue-light-300); --info-400: var(--palette-blue-light-400); --info-500: var(--palette-blue-light-500); --info-600: var(--palette-blue-light-600); --info-700: var(--palette-blue-light-700); /* Back-compat semantic aliases */ --bg-primary: var(--color-background-primary); --bg-secondary: var(--color-background-secondary); --bg-tertiary: var(--color-background-tertiary); --bg-brand-solid: var(--color-background-brand-solid); --text-primary: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-tertiary: var(--color-text-tertiary); --text-quaternary: var(--color-text-quaternary); --text-white: var(--color-text-white); --text-placeholder: var(--color-text-placeholder); --text-disabled: var(--color-text-disabled); --border-primary: var(--color-border-primary); --border-secondary: var(--color-border-secondary); --border-disabled: var(--color-border-disabled); } /* styles */ /* ========================================================================== Estaldo · Salgsforside (hi-fi) — page styles Bygget på Estaldo Design System (colors_and_type.css). Mobil-først. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-background-primary); color: var(--color-text-primary); } img { max-width: 100%; display: block; } a { color: inherit; } :root { --cta: var(--palette-success-600); --cta-hover: var(--palette-success-700); --brand-band: #2A0F3A; --maxw: 1200px; --page-x: 20px; --sec-y: 64px; } @media (min-width: 768px){ :root{ --page-x: 40px; --sec-y: 92px; } } @media (min-width: 1024px){ :root{ --page-x: 48px; --sec-y: 124px; } } /* ---------- type ---------- */ h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--palette-gray-900); } .h-display { font-size: clamp(33px, 6.4vw, 60px); text-wrap: balance; } .h-section { font-size: clamp(27px, 4.4vw, 44px); text-wrap: balance; } .h-card { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.01em; line-height: 1.18; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--palette-brand-700); } .lead { font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: var(--palette-gray-600); } p { margin: 0; } /* ---------- layout ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--page-x); padding-right: var(--page-x); } section { padding-top: var(--sec-y); padding-bottom: var(--sec-y); } .section-alt { background: linear-gradient(180deg, var(--palette-gray-100) 0%, var(--palette-gray-50) 62%); border-top: 1px solid var(--palette-gray-200); border-bottom: 1px solid var(--palette-gray-200); } .section-head { max-width: 760px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head .lead { margin-top: 16px; } /* ---------- icons ---------- */ .ic { width: 24px; height: 24px; flex: none; fill: currentColor; } .ic use { color: inherit; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-family); font-weight: 600; font-size: 16px; line-height: 1; padding: 14px 22px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .2s ease, box-shadow .2s ease, color .2s ease; min-height: 48px; } .btn .ic { width: 20px; height: 20px; } .btn-cta { background: var(--cta); color: #fff; box-shadow: var(--shadow-sm); } .btn-cta:hover { background: var(--cta-hover); } .btn-secondary { background: #fff; color: var(--palette-gray-800); border-color: var(--color-border-primary); box-shadow: var(--shadow-xs); } .btn-secondary:hover { background: var(--palette-gray-50); } .btn-dark { background: var(--palette-gray-900); color: #fff; box-shadow: var(--shadow-sm); } .btn-dark:hover { background: var(--palette-gray-800); } .btn-secondary-brand { background: var(--palette-brand-50); color: var(--palette-brand-700); border-color: var(--palette-brand-200); box-shadow: var(--shadow-xs); } .btn-secondary-brand:hover { background: var(--palette-brand-100); } .btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn-ghost-light:hover { background: rgba(255,255,255,.12); } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 16px; color: var(--palette-brand-700); text-decoration: none; } .textlink:hover { color: var(--palette-brand-800); } .textlink .ic { width: 18px; height: 18px; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border-secondary); } .site-header .bar { display: flex; align-items: center; gap: 16px; height: 64px; } .brand-logo { height: 40px; } .nav-desktop { display: none; gap: 30px; margin-left: 44px; } .nav-desktop a { font-size: 15px; font-weight: 500; color: var(--palette-gray-700); text-decoration: none; } .nav-desktop a:hover { color: var(--palette-gray-900); } .header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .header-tel { display: none; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--palette-gray-800); text-decoration: none; white-space: nowrap; } .header-tel .ic { width: 18px; height: 18px; color: var(--palette-brand-700); } .header-login { font-weight: 600; font-size: 15px; color: var(--palette-gray-700); text-decoration: none; padding: 8px 10px; white-space: nowrap; } .header-cta { padding: 10px 16px; min-height: 0; font-size: 14px; } .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); background: #fff; cursor: pointer; } .hamburger .ic { width: 22px; height: 22px; color: var(--palette-gray-800); } @media (min-width: 1024px){ .nav-desktop { display: flex; } .header-tel { display: inline-flex; } .hamburger { display: none; } } /* mobile menu */ .mobile-menu { display: none; border-bottom: 1px solid var(--color-border-secondary); background: #fff; } .mobile-menu.open { display: block; } .mobile-menu nav { display: flex; flex-direction: column; padding: 8px var(--page-x) 16px; } .mobile-menu nav a { padding: 13px 0; font-size: 17px; font-weight: 500; color: var(--palette-gray-800); text-decoration: none; border-bottom: 1px solid var(--color-border-tertiary); } @media (min-width: 1024px){ .mobile-menu { display: none !important; } } /* ---------- hero ---------- */ .hero { background: var(--brand-band); color: #fff; padding-top: 44px; padding-bottom: 40px; } .hero-grid { display: grid; gap: 32px; } .hero .eyebrow { color: var(--palette-brand-200); } .hero h1 { color: #fff; } .hero-left .h-display { text-wrap: normal; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 4px; } @media (max-width: 1023px){ .hero-left .h-display br { display: none; } } .hero .lead { color: #fff; margin-top: 16px; font-weight: 600; } .hero-sub { color: rgba(255,255,255,.78); margin-top: 12px; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.55; max-width: 50ch; text-wrap: pretty; } .hero-video { margin: 20px 0 0; } .hero-video-frame { position: relative; border-radius: var(--radius-2xl); overflow: hidden; max-width: 480px; border: 1px solid rgba(255,255,255,.25); background: #1c0e26; aspect-ratio: 16/9; } .hero-video-frame video, .hero-video-frame iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } .yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 20px; border: 0; cursor: pointer; background-size: cover; background-position: center; background-color: #1c0e26; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; } .yt-facade .yt-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .yt-facade.is-over { background-color: #2a1640; } .yt-facade .vh-title { color: #fff; font-weight: 700; font-size: 18px; line-height: 1.2; } .yt-facade .vh-sub { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.4; max-width: 26ch; } .yt-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: transform .2s ease; } .yt-facade:hover .yt-play { transform: scale(1.06); } .yt-play svg { width: 28px; height: 28px; color: var(--palette-brand-700); margin-left: 3px; } .hero-video figcaption { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.7); } .video-drop { position: absolute; inset: 0; cursor: pointer; } .video-drop.is-over .video-hint { background: rgba(28,14,38,.7); } .video-hint { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; color: #fff; } .video-play { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); } .video-hint .vh-title { font-weight: 700; font-size: 18px; line-height: 1.2; } .video-hint .vh-sub { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.78); max-width: 26ch; } /* hero action cards (right column) */ .hero-cards { display: flex; flex-direction: column; gap: 12px; align-content: start; } .act-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; } .act-row > .act-card--half { display: flex; flex-direction: column; padding: 16px; min-width: 0; } .act-row > .act-card--half h3 { font-size: 16px; } .act-row > .act-card--half p { font-size: 13px; } .act-row > .act-card--half .btn { margin-top: auto; } .act-link { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-weight: 600; font-size: 14px; color: var(--palette-brand-700); text-decoration: none; transition: gap .2s ease, color .2s ease; } .act-link:hover { color: var(--palette-brand-800); gap: 9px; } .act-link-arr { width: 15px; height: 15px; flex: none; } .act-card { background: #fff; border: 1px solid var(--palette-gray-200); border-radius: var(--radius-2xl); padding: 16px; box-shadow: var(--shadow-lg); } .act-card--tint { background: var(--palette-brand-50); border-color: var(--palette-brand-100); } .act-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .act-head .act-ico { margin-bottom: 0; } .act-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--palette-brand-700); background: var(--palette-brand-50); border-radius: var(--radius-full); padding: 4px 10px; } .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--palette-success-500); flex: none; } .dot-live { animation: livepulse 1.8s ease-in-out infinite; } @keyframes livepulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(23,178,106,.5); } 50%{ box-shadow: 0 0 0 5px rgba(23,178,106,0); } } .act-ico { width: 42px; height: 42px; border-radius: var(--radius-lg); background: var(--palette-brand-50); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .act-ico .ic { width: 24px; height: 24px; color: var(--palette-brand-700); } .act-card h3 { font-size: 18px; letter-spacing: -0.01em; color: var(--palette-gray-900); } .act-card p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--palette-gray-600); } .act-card .btn { margin-top: 16px; } .act-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--palette-gray-500); } .act-foot .ic { width: 15px; height: 15px; color: var(--palette-success-600); flex: none; } /* card 1: compact online valuation */ .calc-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .calc-head-main { min-width: 0; flex: 1 1 auto; } .calc-head-main .act-tag { margin-bottom: 8px; } .calc-head-main h3 { margin-top: 2px; font-size: 15.5px; letter-spacing: -0.01em; white-space: nowrap; } .calc-illu { flex: none; } .calc-illu img { width: 78px; height: auto; display: block; } .calc-readout { margin-top: 10px; padding: 12px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--palette-brand-100); display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; } .calc-main { min-width: 0; } .calc-top { display: flex; align-items: center; justify-content: space-between; } .calc-label { font-size: 12.5px; font-weight: 500; color: var(--palette-gray-600); } .calc-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--palette-brand-700); background: #fff; border: 1px solid var(--palette-brand-200); border-radius: var(--radius-full); padding: 2px 8px; } .calc-value { margin-top: 3px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--palette-brand-700); line-height: 1; } .calc-gauge { position: relative; height: 6px; border-radius: var(--radius-full); margin-top: 10px; background: var(--palette-brand-100); } .calc-gauge .cg-fill { position: absolute; left: 0; top: 0; height: 100%; width: 50%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--palette-brand-300), var(--palette-brand-600)); } .calc-gauge .cg-marker { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; border: 3px solid var(--palette-brand-600); box-shadow: var(--shadow-sm); } .calc-gauge .cg-fill { animation: calcSweep 3.4s ease-in-out 0.4s both; } .calc-gauge .cg-marker { animation: calcSweepM 3.4s ease-in-out 0.4s both; } @keyframes calcSweep { 0% { width: 6%; } 55% { width: 94%; } 100% { width: 50%; } } @keyframes calcSweepM { 0% { left: 6%; } 55% { left: 94%; } 100% { left: 50%; } } .calc-range { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11.5px; color: var(--palette-gray-500); } /* card 3: buyer demand */ .buyer-live { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-lg); background: var(--palette-success-50); border: 1px solid var(--palette-success-200); } .buyer-live span { font-size: 13px; color: var(--palette-gray-700); } .buyer-live b { color: var(--palette-success-700); } .buyer-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; margin-bottom: 4px; font-size: 11.5px; line-height: 1.35; color: var(--palette-gray-600); } .buyer-note .dot-live { margin-top: 4px; } .buyer-stat { margin-top: 8px; font-size: 12.5px; color: var(--palette-gray-500); } .buyer-dots { display: flex; align-items: center; margin-top: 12px; } .buyer-dots i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; background: var(--palette-brand-200); display: block; } .buyer-dots i:first-child { margin-left: 0; } .buyer-dots i:nth-child(2){ background: var(--palette-brand-300); } .buyer-dots i:nth-child(3){ background: var(--palette-brand-400); } .buyer-dots i:nth-child(4){ background: var(--palette-brand-500); } .buyer-dots .more { margin-left: 9px; font-size: 13px; font-weight: 600; color: var(--palette-gray-500); } .addr-field { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 14px; border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); background: var(--palette-gray-50); } .addr-field--hero { background: #fff; border: 2px solid var(--palette-brand-400); box-shadow: 0 0 0 4px rgba(143,90,160,.10), var(--shadow-md); padding: 16px 16px; animation: addrpulse 2.6s ease-in-out infinite; } .addr-field--hero:hover { animation-play-state: paused; } .addr-field--hero:focus-within { animation: none; border-color: var(--palette-brand-600); box-shadow: 0 0 0 4px rgba(143,90,160,.24), var(--shadow-md); } @keyframes addrpulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(143,90,160,.12), var(--shadow-sm); } 50% { box-shadow: 0 0 0 8px rgba(143,90,160,.05), var(--shadow-md); } } .addr-field--hero .ic { color: var(--palette-brand-600); width: 22px; height: 22px; } .addr-field--hero input { font-size: 16.5px; } .addr-field--hero input::placeholder { color: var(--palette-gray-500); font-weight: 500; } .addr-field .ic { width: 20px; height: 20px; color: var(--palette-gray-400); flex: none; } .addr-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-family); font-size: 15px; color: var(--palette-gray-900); } .addr-field input::placeholder { color: var(--palette-gray-400); } .avatar-stack { display: flex; align-items: center; margin-bottom: 12px; } .avatar-stack image-slot { width: 38px; height: 38px; border-radius: 50%; display: block; border: 2px solid #fff; margin-left: -9px; background: var(--palette-brand-100); } .avatar-stack image-slot:first-child { margin-left: 0; } .avatar-stack .more { margin-left: 9px; font-size: 13px; font-weight: 600; color: var(--palette-gray-500); } /* hero trust line (folded in) */ .hero-trust { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); } .ht-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; } .hero-stars { color: #FEC84B; letter-spacing: 2px; font-size: 18px; } .hero-trust .ht-label { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); } .hero-trust .ht-dim { color: rgba(255,255,255,.6); } .hero-trust .ht-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; width: 100%; justify-content: space-between; } .hero-trust .press-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; } .hero-trust .logo-ph { height: 28px; padding: 0 12px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font-weight: 700; font-size: 13px; color: rgba(255,255,255,.85); } @media (min-width: 1024px){ .hero { padding-top: 52px; padding-bottom: 40px; } .hero-grid { grid-template-columns: 1fr 396px; gap: 48px; align-items: stretch; } .hero-grid .hero-cards { order: 2; padding-bottom: 137px; } .hero-grid .hero-cards .act-row { flex: 1 1 auto; } .hero-grid .hero-left { order: 1; } .hero-left .h-display { font-size: clamp(38px, 5vw, 54px); } .hero-left .hero-video { margin-top: 16px; } .hero-left .hero-video-frame { max-width: 440px; } .hero-left .hero-sub { margin-top: 12px; font-size: 16px; line-height: 1.5; } } /* ---------- trust strip ---------- */ .trust { background: var(--palette-gray-50); padding-top: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--color-border-secondary); } .trust .wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .trust-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; } .trust .stars { color: #F79009; letter-spacing: 2px; font-size: 18px; } .trust .trust-label { font-size: 15px; color: var(--palette-gray-600); font-weight: 500; } .press-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; } .press-logos .logo-ph { height: 30px; padding: 0 14px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--color-border-secondary); font-weight: 700; font-size: 14px; color: var(--palette-gray-500); letter-spacing: -0.01em; } /* ---------- narrative (S/P/I) — 2-kolonne rækker (wireframe) ---------- */ .narrative .grid { display: flex; flex-direction: column; } .beat { padding: 30px 0; border-bottom: 1.5px dashed var(--color-border-secondary); } .beat:first-child { padding-top: 0; } .beat:last-child { border-bottom: 0; padding-bottom: 0; } .beat .beat-head { margin-bottom: 0; } .beat .kicker { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--palette-brand-700); margin-bottom: 10px; } .beat h3 { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -0.01em; } .beat .beat-body { margin-top: 14px; } .beat .beat-body p { margin: 0; color: var(--palette-gray-600); font-size: 17px; line-height: 1.6; } .beat .beat-body p + p { margin-top: 14px; } @media (min-width: 768px){ .beat { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; } .beat .beat-body { margin-top: 0; } } /* ---------- brand band (turning point) ---------- */ .band { background: var(--brand-band); color: #fff; } .band .eyebrow { color: var(--palette-brand-200); } .band h2 { color: #fff; } .band p { color: rgba(255,255,255,.82); } .turn .wrap { max-width: 880px; text-align: center; margin: 0 auto; } .turn .lead { color: rgba(255,255,255,.9); margin-top: 18px; } .turn .turn-claim { display: block; margin: 26px auto 0; max-width: 30ch; text-wrap: balance; text-align: center; font-size: clamp(18px, 2.1vw, 23px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-2xl); padding: 18px 30px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-lg); } .turn .btn-row { justify-content: center; margin-top: 28px; } /* ---------- mood band (background video) ---------- */ .mood { padding: 0; } .mood-band { position: relative; width: 100%; height: clamp(300px, 42vw, 500px); overflow: hidden; background: var(--brand-band); } .mood-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .mood-pick { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; background: transparent; display: flex; align-items: center; justify-content: center; color: #fff; transition: background .2s ease; z-index: 2; } .mood-pick.is-over { background: rgba(0,0,0,.4); } .mood-pick-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 24px; } .mood-pick .mp-play { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; transition: transform .2s ease, background .2s ease; } .mood-pick:hover .mp-play { transform: scale(1.06); background: rgba(255,255,255,.22); } .mood-pick .mp-play svg { width: 26px; height: 26px; color: #fff; margin-left: 3px; } .mood-pick .mp-title { font-weight: 700; font-size: 18px; } .mood-pick .mp-sub { font-size: 14px; color: rgba(255,255,255,.72); } .mood-overlay { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: flex-end; background: linear-gradient(180deg, rgba(16,8,22,0) 42%, rgba(16,8,22,.6) 100%); z-index: 1; } .mood-text { color: #fff; font-size: clamp(15px, 1.9vw, 20px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; padding: clamp(20px, 3vw, 40px); max-width: 48ch; text-shadow: 0 1px 14px rgba(0,0,0,.45); } /* skift-video knap (vises når en video er indlæst) */ .video-swap { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; background: rgba(16,8,22,.55); border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-full); padding: 7px 14px; backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease, background .2s ease; } .hero-video-frame:hover .video-swap, .mood-band:hover .video-swap, .video-swap:focus-visible { opacity: 1; } .video-swap:hover { background: rgba(16,8,22,.8); } .video-swap::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--swap-ico) center/contain no-repeat; mask: var(--swap-ico) center/contain no-repeat; } :root { --swap-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E"); } /* ---------- specialists (team7) ---------- */ .specs { display: grid; gap: 18px; margin-top: 36px; counter-reset: spec; } .spec { position: relative; background: #fff; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-2xl); padding: 28px; box-shadow: var(--shadow-sm); counter-increment: spec; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .spec::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--palette-brand-500), var(--palette-brand-300)); opacity: 0; transition: opacity .25s ease; } .spec::before { content: counter(spec, decimal-leading-zero); position: absolute; top: 24px; right: 26px; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--palette-brand-200); } .spec:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--palette-brand-200); } .spec:hover::after { opacity: 1; } .spec .spec-ico { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(145deg, var(--palette-brand-600), var(--palette-brand-800)); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 10px 20px -8px rgba(83,56,158,.45), inset 0 1px 0 rgba(255,255,255,.25); } .spec .spec-ico .ic { width: 28px; height: 28px; color: #fff; } .spec h3 { font-size: 20px; letter-spacing: -0.01em; } .spec p { margin-top: 8px; color: var(--palette-gray-600); font-size: 15px; line-height: 1.55; } .team7 .outro { margin-top: 28px; max-width: 760px; color: var(--palette-gray-600); font-size: 16px; line-height: 1.6; } @media (min-width: 768px){ .specs { grid-template-columns: repeat(3, 1fr); } } /* ---------- local specialists (auto-scroll marquee) ---------- */ .people-marquee { margin-top: 32px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .people-track { display: flex; gap: 20px; width: max-content; will-change: transform; } .people-track { animation: peoplescroll 95s linear infinite; } .people-marquee:hover .people-track { animation-play-state: paused; } @keyframes peoplescroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .person { flex: 0 0 auto; width: 168px; text-align: center; } .town-sign { background: #fff; border: 3px solid #1a1a1a; border-radius: 9px; padding: 16px 12px 13px; display: flex; flex-direction: column; align-items: center; gap: 9px; min-height: 128px; justify-content: center; box-shadow: var(--shadow-sm); } .town-skyline { width: 74px; height: auto; color: #1a1a1a; display: block; } .town-name { font-weight: 700; font-size: 19px; letter-spacing: 0.01em; color: #1a1a1a; line-height: 1.1; width: 100%; border-top: 1.5px solid #1a1a1a; padding-top: 9px; } .town-cap { display: block; margin-top: 11px; font-size: 14px; color: var(--palette-gray-500); } .town-sign--more { background: var(--palette-brand-25); border-style: dashed; border-color: var(--palette-brand-300); } .town-sign--more .town-name { border-top: 0; padding-top: 0; color: var(--palette-brand-700); } .local8 .local-foot { margin-top: 28px; } /* ---------- visibility (portals) ---------- */ .portals { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .portal-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .portal-note { margin-top: 4px; font-size: 14px; color: var(--palette-gray-500); } .portal-ph { height: 56px; padding: 0 22px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-border-secondary); font-weight: 700; font-size: 15px; color: var(--palette-gray-500); box-shadow: var(--shadow-xs); } .portal-ph.has-logo { padding: 0 20px; } .portal-ph.has-logo img { height: 26px; width: auto; max-width: 132px; object-fit: contain; display: block; } /* ---------- how-to (progress) ---------- */ .howto .wrap { text-align: center; } .progress { max-width: 640px; margin: 32px auto 0; } .progress .track { position: relative; display: flex; align-items: center; } .progress .dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--palette-brand-600); background: #fff; flex: none; } .progress .line { flex: 1; height: 3px; background: var(--palette-brand-200); } .progress .goal { width: 34px; height: 34px; border-radius: 50%; background: var(--palette-brand-700); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .progress .goal .ic { width: 18px; height: 18px; } .progress .spark { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--palette-success-500); box-shadow: 0 0 0 5px rgba(23,178,106,.22); transform: translateY(-50%); opacity: 0; } .progress .spark { animation: spark 3s ease-in-out infinite; } @keyframes spark { 0%{ left:0; opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ left: calc(100% - 14px); opacity:0 } } .progress .labels { display: flex; justify-content: space-between; margin-top: 12px; font-size: 15px; color: var(--palette-gray-600); } .howto .howto-link { margin-top: 28px; display: flex; justify-content: center; } .btn-arr { width: 16px; height: 16px; flex: none; transition: transform .2s ease; } .btn:hover .btn-arr { transform: translateX(3px); } /* ---------- positioning callout ---------- */ .position .wrap { } .position .callout { border: 1px solid var(--palette-brand-200); background: linear-gradient(180deg, #fff, var(--palette-brand-25)); border-radius: var(--radius-2xl); padding: 30px; text-align: center; max-width: 760px; margin: 0 auto; box-shadow: var(--shadow-sm); } .position .callout p { font-size: clamp(19px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; color: var(--palette-brand-800); } /* ---------- pricing ---------- */ .pricing { border-top: 1px solid var(--palette-gray-200); } .pricing .wrap { } .pricing .section-head .frame-lead { display: block; margin-top: 14px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; color: var(--palette-brand-700); letter-spacing: -0.01em; } .price-grid { display: grid; gap: 16px; margin-top: 36px; } .price-card { background: #fff; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-2xl); padding: 24px; box-shadow: var(--shadow-sm); } .price-card h3 { font-size: 19px; letter-spacing: -0.01em; } .price-card .row { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--palette-gray-600); font-size: 15px; } .price-card .row span:last-child { white-space: nowrap; font-weight: 500; color: var(--palette-gray-800); } .price-card .total { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border-secondary); font-weight: 700; font-size: 19px; color: var(--palette-gray-900); } .price-card .total span:last-child { white-space: nowrap; } .price-note { margin-top: 18px; font-size: 14px; color: var(--palette-gray-500); text-align: center; } .price-extra { display: grid; gap: 16px; margin-top: 40px; } .promo { background: var(--palette-success-50); border: 1px solid var(--palette-success-200); border-radius: var(--radius-2xl); padding: 20px; } .promo .promo-head { display: flex; align-items: center; gap: 10px; } .promo .promo-head .ic { width: 24px; height: 24px; color: var(--palette-success-700); } .promo b { font-weight: 700; font-size: 18px; color: var(--palette-success-700); letter-spacing: -0.01em; } .promo p { margin-top: 8px; color: var(--palette-gray-700); font-size: 15px; line-height: 1.5; } .usp { position: relative; background: var(--brand-band); color: #fff; border-radius: var(--radius-2xl); padding: 22px; } .usp-arrow { display: none; } @media (min-width: 768px){ .usp-arrow { display: block; position: absolute; left: -54px; top: 6px; width: 54px; height: 40px; color: var(--palette-brand-400); } } .usp .usp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(255,255,255,.16); border-radius: var(--radius-full); padding: 5px 12px; } .usp h3 { color: #fff; font-size: 24px; margin-top: 12px; } .usp p { margin-top: 8px; color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.5; } .pricing .pricing-foot { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .pricing-cta-row { justify-content: center; } @media (min-width: 768px){ .price-grid { grid-template-columns: repeat(3, 1fr); } .price-extra { grid-template-columns: 1fr 1fr; } } /* ---------- reassure (vi hjælper med det hele) ---------- */ .reassure { } .reassure-card { display: grid; gap: 28px; background: #fff; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-3xl); padding: 36px; box-shadow: var(--shadow-sm); } .reassure-copy .eyebrow { color: var(--palette-brand-700); } .reassure-copy h2 { margin-top: 12px; } .reassure-copy .lead { margin-top: 14px; } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; } .checklist li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-xl); background: var(--palette-gray-50); border: 1px solid var(--color-border-secondary); font-size: 17px; font-weight: 500; color: var(--palette-gray-400); transition: color .6s ease, background .6s ease, border-color .6s ease; } .checklist .cl-check { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--palette-gray-300); display: flex; align-items: center; justify-content: center; transition: background .65s ease, border-color .65s ease; } .checklist .cl-check .ic { width: 16px; height: 16px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .5s ease .2s, transform .55s cubic-bezier(.34,1.56,.64,1) .2s; } .checklist li.done { color: var(--palette-gray-900); background: var(--palette-success-50); border-color: var(--palette-success-200); } .checklist li.done .cl-check { background: var(--palette-success-500); border-color: var(--palette-success-500); } .checklist li.done .cl-check .ic { opacity: 1; transform: scale(1); } @media (min-width: 860px){ .reassure-card { grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; padding: 44px; } } /* ---------- results ---------- */ .results .stars { color: #F79009; letter-spacing: 2px; font-size: 18px; } .results .section-head h2 { margin-top: 8px; } .bigquote { margin-top: 28px; padding: 4px 0 4px 22px; border-left: 4px solid var(--palette-brand-600); font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; letter-spacing: -0.01em; color: var(--palette-brand-800); line-height: 1.2; } .bigquote .who { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; color: var(--palette-gray-500); } .quotes { display: grid; gap: 16px; margin-top: 32px; } .quote { background: #fff; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-xs); } .quote .q-stars { color: #F79009; letter-spacing: 1px; font-size: 14px; } .quote p { margin-top: 8px; font-size: 15px; color: var(--palette-gray-700); line-height: 1.55; } .quote .who { margin-top: 12px; font-weight: 600; font-size: 14px; color: var(--palette-gray-900); } @media (min-width: 768px){ .quotes { grid-template-columns: repeat(3, 1fr); } } /* ---------- get started (boligtype-vælger) ---------- */ .getstarted { } .starter-panel { background: var(--brand-band); border-radius: var(--radius-4xl); padding: clamp(28px, 4vw, 56px); display: grid; gap: 32px; align-items: center; } .starter-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--palette-brand-200); } .starter-intro h2 { color: #fff; font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin-top: 16px; text-wrap: balance; } .starter-intro p { color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.55; margin-top: 16px; max-width: 36ch; } .starter-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .starter-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid transparent; border-radius: var(--radius-xl); padding: 16px 18px; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .starter-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--palette-brand-200); } .starter-ico { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .starter-ico .ic { width: 38px; height: 38px; color: var(--palette-brand-700); } .starter-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .starter-title { font-family: var(--font-heading, inherit); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--palette-gray-900); line-height: 1.1; } .starter-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--palette-brand-700); transition: gap .2s ease; } .starter-arr { width: 15px; height: 15px; flex: none; } .starter-card:hover .starter-cta { gap: 9px; } @media (min-width: 700px){ .starter-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px){ .starter-panel { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 48px; } } /* ---------- products (other services) ---------- */ .products .product-grid { display: grid; gap: 20px; margin-top: 36px; } .product-card { background: #fff; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .product-media { position: relative; height: 200px; } .product-media image-slot { width: 100%; height: 100%; display: block; } .product-media.icon-media { background: var(--palette-brand-50); display: flex; align-items: center; justify-content: center; } .product-media .pm-ico { width: 76px; height: 76px; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--palette-brand-100); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); } .product-media .pm-ico .ic { width: 38px; height: 38px; color: var(--palette-brand-700); } .product-badge { position: absolute; top: 14px; left: 14px; background: var(--brand-band); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; padding: 6px 12px; border-radius: var(--radius-full); } .product-badge.ghost { background: #fff; color: var(--palette-brand-700); border: 1px solid var(--palette-brand-200); } .product-body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .product-body h3 { font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.01em; line-height: 1.2; color: var(--palette-gray-900); } .product-body > p { margin-top: 10px; color: var(--palette-gray-600); font-size: 16px; line-height: 1.55; } .service-lede { margin-top: 12px; font-size: 15px; color: var(--palette-gray-500); } .service-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; } .service-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--palette-gray-800); } .service-list li .ic { width: 20px; height: 20px; color: var(--palette-success-600); margin-top: 1px; } .product-body .textlink { margin-top: auto; padding-top: 18px; } @media (min-width: 768px){ .products .product-grid { grid-template-columns: 1fr 1fr; } } /* ---------- final CTA ---------- */ .final .wrap { max-width: 820px; text-align: center; margin: 0 auto; } .final .lead { margin-top: 16px; } .final .btn-row { justify-content: center; margin-top: 28px; } /* ---------- footer ---------- */ .site-footer { background: var(--palette-gray-950); color: var(--palette-gray-400); padding-top: 56px; padding-bottom: 28px; } .footer-top { display: grid; gap: 32px; } .footer-brand .brand-logo { height: 38px; margin-bottom: 16px; } .footer-brand p { font-size: 14px; line-height: 1.6; color: var(--palette-gray-400); max-width: 320px; } .footer-social { display: flex; gap: 10px; margin-top: 18px; } .footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--palette-gray-700); display: flex; align-items: center; justify-content: center; color: var(--palette-gray-300); } .footer-social a:hover { background: var(--palette-gray-800); } .footer-social .ic { width: 20px; height: 20px; } .footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; } .footer-col h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; margin-bottom: 12px; } .footer-col a { display: block; font-size: 14px; color: var(--palette-gray-400); text-decoration: none; padding: 6px 0; } .footer-col a:hover { color: #fff; } .footer-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--palette-gray-800); display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--palette-gray-500); } .footer-bottom .tel a { color: var(--palette-gray-300); text-decoration: none; } .footer-policies { display: flex; flex-wrap: wrap; gap: 8px 18px; } .footer-policies a { color: var(--palette-gray-400); text-decoration: none; } .footer-policies a:hover { color: #fff; } @media (min-width: 768px){ .footer-cols { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px){ .footer-top { grid-template-columns: 1.2fr 2fr; gap: 64px; } .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } } /* ---------- FAQ ---------- */ .faq-list details { border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); background: #fff; overflow: hidden; } .faq-list summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 17px; color: var(--palette-gray-900); display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--palette-brand-700); line-height: 1; } .faq-list details[open] summary::after { content: "\2013"; } .faq-list details p { padding: 0 20px 18px; margin: 0; color: var(--palette-gray-600); font-size: 15px; line-height: 1.6; } /* side-specifik */ /* ===== Estaldo brand-grundfarve: tving den stærke lilla til #2A0F3A overalt ===== (lyse tints brand-25..400 bevares; kun de stærke/solide trin remappes) */ :root{ --palette-brand-500: #2A0F3A; --palette-brand-600: #2A0F3A; --palette-brand-700: #2A0F3A; --palette-brand-800: #2A0F3A; --palette-brand-900: #2A0F3A; --palette-brand-950: #2A0F3A; --brand-band: #2A0F3A; } /* ===== Video-hero (kun denne version) ===== */ .hero--video { position: relative; overflow: hidden; isolation: isolate; background: #1c0e26; } .hero--video .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; display: none; } .hero--video.has-video .hero-bg-video { display: block; } /* lilla brand-tonet overlay + bund-gradient for læsbarhed */ .hero--video .hero-bg-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(28,14,38,.55) 0%, rgba(28,14,38,.30) 38%, rgba(28,14,38,.78) 100%), linear-gradient(90deg, rgba(42,15,58,.80) 0%, rgba(42,15,58,.30) 55%, rgba(42,15,58,.10) 100%); } /* fallback når der ikke er nogen video endnu: deep purple brand-band */ .hero--video:not(.has-video) .hero-bg-overlay { background: var(--brand-band); } .hero--video .wrap.hero-grid { position: relative; z-index: 2; } /* kompakt knap til at vælge baggrundsvideo (blokerer ikke kortene) */ .hero-bg-pick { position: absolute; left: 24px; bottom: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; background: rgba(28,14,38,.55); border: 1px solid rgba(255,255,255,.32); border-radius: var(--radius-full); padding: 8px 16px 8px 8px; color: #fff; backdrop-filter: blur(6px); transition: background .2s ease, transform .2s ease; } .hero-bg-pick:hover { background: rgba(28,14,38,.78); transform: translateY(-1px); } .hero--video.has-video .hero-bg-pick { display: none; } .hero-bg-pick .hp-play { width: 38px; height: 38px; flex: none; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; } .hero-bg-pick .hp-play svg { width: 18px; height: 18px; color: #fff; margin-left: 2px; } .hero-bg-pick .hp-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; } .hero-bg-pick .hp-title { font-weight: 700; font-size: 14px; } .hero-bg-pick .hp-sub { font-size: 12px; color: rgba(255,255,255,.72); } /* drop-hint (vises kun under drag) */ .hero-bg-drophint { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; pointer-events: none; background: rgba(28,14,38,.6); backdrop-filter: blur(3px); } .hero--video.is-dragover .hero-bg-drophint { display: flex; } .hero-bg-drophint span { color: #fff; font-weight: 700; font-size: 18px; border: 1.5px dashed rgba(255,255,255,.6); border-radius: var(--radius-2xl); padding: 22px 34px; } /* skift-video knap for baggrundsvideoen */ .hero--video .hero-bg-swap { position: absolute; top: 16px; right: 16px; z-index: 3; } .hero--video .hero-bg-swap[hidden] { display: none; } .hero--video:hover .hero-bg-swap { opacity: 1; } /* venstre tekstkolonne: lidt mere tyngde over video */ .hero--video .hero-left .h-display { text-shadow: 0 2px 24px rgba(0,0,0,.35); } .hero--video .hero-left .hero-sub { color: rgba(255,255,255,.88); } .hero--video .hero-trust { border-top-color: rgba(255,255,255,.28); } /* kort: stærkere skygge så de "løfter" sig fra videoen */ .hero--video .hero-cards .act-card { box-shadow: 0 24px 48px -16px rgba(16,6,24,.55), var(--shadow-md); } @media (min-width: 1024px){ .hero--video { padding-top: 0; padding-bottom: 0; } .hero--video .wrap.hero-grid { padding-top: 64px; padding-bottom: 56px; align-items: center; } .hero--video .hero-cards { padding-bottom: 0; } } /* ===== Mobil-fix: undgå vandret overflow på små skærme ===== */ @media (max-width: 1023px){ /* hero: lad grid-børn krympe, så et bredt kort-element ikke tvinger kolonnen bredere end skærmen */ .hero--video .wrap.hero-grid { min-width: 0; grid-template-columns: 1fr !important; } .hero-left, .hero-cards, .hero-cards .act-card { min-width: 0; max-width: 100%; } /* header: kun logo + burger i baren (telefon/login/CTA ligger i mobilmenuen) */ .site-header .header-login, .site-header .header-cta { display: none; } } /* større logo i headeren */ .site-header .bar { height: 72px; } .site-header .brand-logo { height: 50px; } /* ===== Video-kundeudtalelser ===== */ .vtest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; } .vtest-head h3 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; letter-spacing: -0.01em; color: var(--palette-gray-900); } .vtest-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: #2A0F3A; text-decoration: none; transition: gap .2s ease; } .vtest-all svg { width: 15px; height: 15px; } .vtest-all:hover { gap: 9px; } .vtest-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .vtest { margin: 0; } .vtest-frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-2xl); overflow: hidden; background: #1c0e26; box-shadow: var(--shadow-md); } .vtest-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; } .vtest.has-video .vtest-video { display: block; } .vtest-pick { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; color: #fff; border: 1.5px dashed rgba(255,255,255,.3); background: linear-gradient(160deg, #3a1f49, #1c0e26); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: background .2s ease; } .vtest.has-video .vtest-pick { display: none; } .vtest-pick.is-over { background: rgba(0,0,0,.5); } .vtest-pick .vt-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; } .vtest-pick .vt-play svg { width: 24px; height: 24px; margin-left: 3px; } .vtest-pick .vt-hint { font-size: 14px; font-weight: 600; text-align: center; line-height: 1.4; } .vtest-pick .vt-hint small { font-weight: 500; color: rgba(255,255,255,.6); font-size: 12px; } /* play-knap til at åbne med lyd (vises når video er indlæst) */ .vtest-expand { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.92); border: 0; color: #2A0F3A; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); opacity: 1; transition: opacity .2s ease, transform .2s ease; } .vtest-expand[hidden] { display: none; } .vtest-frame:hover .vtest-expand { transform: translate(-50%,-50%) scale(1.04); } .vtest-expand:hover { transform: translate(-50%,-50%) scale(1.07); } .vtest-expand svg { width: 26px; height: 26px; margin-left: 3px; } /* sæt/skift YouTube-link */ .vtest-setyt { position: absolute; top: 12px; right: 12px; z-index: 3; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-full); background: rgba(16,8,22,.6); border: 1px solid rgba(255,255,255,.32); color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease, background .2s ease; } .vtest-frame:hover .vtest-setyt { opacity: 1; } .vtest-setyt:hover { background: rgba(16,8,22,.85); } .vtest-setyt svg { width: 16px; height: 16px; color: #FF0000; } .vtest.has-yt .vtest-setyt svg { color: #34C759; } /* navn/sted nederst med gradient */ .vtest-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; padding: 30px 16px 16px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(180deg, transparent, rgba(16,8,22,.82)); color: #fff; } .vtest-meta .vt-name { font-weight: 700; font-size: 16px; } .vtest-meta .vt-loc { font-size: 12.5px; color: rgba(255,255,255,.78); } @media (max-width: 720px){ .vtest-row { grid-template-columns: 1fr 1fr; } } /* lightbox */ .vtest-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(12,5,18,.86); backdrop-filter: blur(8px); padding: 24px; } .vtest-lightbox[hidden] { display: none; } /* online-vurdering modal (iframe) */ .vurd-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(12,5,18,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .vurd-modal[hidden] { display: none; } .vurd-frame { position: relative; width: min(980px, 96vw); height: min(86vh, 860px); background: #fff; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-3xl); } .vurd-frame iframe { width: 100%; height: 100%; border: 0; display: block; } .vurd-close { position: absolute; top: 16px; right: 18px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); cursor: pointer; font-size: 26px; line-height: 1; color: #fff; background: rgba(16,8,22,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .vurd-close:hover { background: rgba(16,8,22,.85); } .hero--video .act-card--calc .addr-field--hero, .hero--video .act-card--calc .addr-field--hero input { cursor: pointer; } .vtest-lb-stage { position: relative; width: min(92vw, 1100px); aspect-ratio: 16 / 9; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-3xl); background: #000; } .vtest-lb-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vtest-lb-close { position: absolute; top: 18px; right: 22px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 26px; line-height: 1; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); } .vtest-lb-close:hover { background: rgba(255,255,255,.26); } /* ===== Narrative — redaktionelt magasin-opslag ===== */ .narrative--rich { position: relative; overflow: hidden; background: #FBFAF9; } .narrative--rich .wrap { max-width: 1180px; } /* gentagen CTA mellem/efter sektioner */ .section-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(40px, 5vw, 64px); } /* fælles opslags-grid */ .mag-spread { display: grid; column-gap: clamp(28px, 4vw, 64px); row-gap: clamp(18px, 2.4vw, 32px); align-items: start; padding: clamp(48px, 6vw, 90px) 0; } .mag-spread:first-of-type { padding-top: 0; } .mag-headcol { display: flex; flex-direction: column; gap: 12px; grid-area: head; align-self: start; } .mag-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #2A0F3A; } .mag-h { font-family: var(--font-family); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--palette-gray-900); text-wrap: balance; font-size: clamp(38px, 5.6vw, 72px); margin: 4px 0 0; } .mag-body { grid-area: body; align-self: start; } .mag-body p { font-size: 16px; line-height: 1.62; color: var(--palette-gray-700); max-width: 44ch; } .mag-body p + p { margin-top: 14px; } .mag-fig { margin: 0; grid-area: figMain; } .mag-fig image-slot { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--palette-gray-100); } .mag-fig--main image-slot { aspect-ratio: 2 / 3; } .mag-fig--sub { grid-area: figSub; } .mag-fig--sub image-slot { aspect-ratio: 1 / 1; } .mag-fig--wide { grid-area: figWide; } .mag-fig--wide image-slot { aspect-ratio: 16 / 9; } /* mag-opslag: wide video-slot (lydløs loop) */ .mag-video-slot { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: var(--palette-gray-100); } .mag-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mag-video-pick { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--palette-gray-500); border: 1.5px dashed var(--palette-gray-300); background: var(--palette-gray-100); transition: border-color .15s ease, background .15s ease; } .mag-video-pick.is-over { border-color: #2A0F3A; background: var(--palette-gray-200); } .mag-video-pick .mvp-inner { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 14px; } .mag-video-pick .mvp-play { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid var(--palette-gray-300); display: flex; align-items: center; justify-content: center; color: #2A0F3A; } .mag-video-pick .mvp-play svg { width: 18px; height: 18px; margin-left: 2px; } .mag-video-pick .mvp-title { font-size: 13px; font-weight: 600; color: var(--palette-gray-700); } .mag-video-pick .mvp-sub { font-size: 11px; color: var(--palette-gray-500); } .mag-video-slot .video-swap { position: absolute; top: 10px; right: 10px; z-index: 2; } .mag-video-slot:hover .video-swap { opacity: 1; } /* variant A — høj foto venstre, tekst højre */ .mag-spread--a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; grid-template-areas: "figMain head" "figMain body" "figMain ."; } .mag-spread--a .mag-fig--main { align-self: start; } /* variant B — tekst venstre, foto højre, bredt foto under */ .mag-spread--b { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "head figMain" "body figMain" ". figMain" "figWide figWide"; } .mag-spread--b .mag-fig--main { align-self: start; } /* variant C — overskrift på tværs, høj foto + tekst + lille foto */ .mag-spread--c { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "head head" "figMain body" "figMain figSub"; } .mag-spread--c .mag-h { max-width: 18ch; } @media (max-width: 767px){ .mag-spread { grid-template-columns: 1fr !important; grid-template-areas: none !important; row-gap: 18px; padding: 40px 0; } .mag-spread > * { grid-area: auto !important; } .mag-h { font-size: clamp(34px, 11vw, 48px); } .mag-body p { font-size: 16px; max-width: none; } } .narrative--rich .narrative-cta { margin-top: 36px; justify-content: center; } /* ===== Vendepunkt — mørkt magasin-opslag ===== */ .turn--mag .wrap { max-width: 1180px; text-align: left; margin: 0 auto; } .turn-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.82fr); column-gap: clamp(40px, 5vw, 88px); align-items: center; } .turn-text { display: flex; flex-direction: column; align-items: flex-start; } .turn--mag .eyebrow { letter-spacing: 0.2em; } .turn--mag h2 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.03; letter-spacing: -0.035em; margin-top: 14px; max-width: 15ch; text-wrap: balance; } .turn--mag .lead { margin-top: 20px; max-width: 46ch; color: rgba(255,255,255,.82); } .turn-claims { list-style: none; display: flex; flex-wrap: wrap; margin: 28px 0 0; border-top: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); } .turn-claims li { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; padding: 14px 22px; } .turn-claims li:first-child { padding-left: 0; } .turn-claims li + li { border-left: 1px solid rgba(255,255,255,.24); } .turn--mag .btn-row { justify-content: flex-start; margin-top: 30px; } .turn-fig { margin: 0; } .turn-fig image-slot { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 2px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); } @media (max-width: 880px){ .turn-grid { grid-template-columns: 1fr; row-gap: 32px; } .turn-fig { order: -1; } .turn-fig image-slot { aspect-ratio: 16 / 10; } } /* ===== Priser — magasin-side (varmt papir + redaktionel opsætning) ===== */ .pricing { border-top: 0; background: #FBFAF9; } .pricing .wrap { max-width: 1120px; } .pricing .section-head.center { max-width: 860px; } .pricing .section-head .eyebrow { letter-spacing: 0.2em; color: #2A0F3A; } .pricing .section-head h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -0.035em; margin-top: 12px; } .pricing .section-head .frame-lead { color: #2A0F3A; } .pricing .section-head .lead { color: var(--palette-gray-600); } /* redaktionelle priskort med prikkede leaders + fremh\u00e6vet total */ .pricing .price-grid { gap: 20px; margin-top: 44px; } .pricing .price-card { background: #fff; border: 1px solid var(--palette-gray-200); border-radius: 10px; box-shadow: none; padding: 30px 28px; display: flex; flex-direction: column; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; } .pricing .price-card:hover { transform: translateY(-3px); border-color: var(--palette-gray-300); box-shadow: 0 22px 46px -26px rgba(42,15,58,.32); } .pricing .price-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--palette-gray-900); margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--palette-gray-200); } .pricing .pc-lines { display: flex; flex-direction: column; gap: 13px; } .pricing .pc-line { display: flex; align-items: baseline; gap: 10px; font-size: 15px; } .pricing .pc-line .lbl { color: var(--palette-gray-600); } .pricing .pc-line .dots { flex: 1; border-bottom: 1px dotted var(--palette-gray-300); transform: translateY(-3px); } .pricing .pc-line .val { color: var(--palette-gray-800); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .pricing .pc-total { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--palette-gray-900); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pricing .pc-total .lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--palette-gray-500); } .pricing .pc-total .val { font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: #2A0F3A; font-variant-numeric: tabular-nums; white-space: nowrap; } .pricing .promo, .pricing .usp { border-radius: 10px; } /* ===== Online-vurdering kort — frostet glas (video hero) ===== */ /* glasset ligger i et baggrundslag (::before), så indholdet ovenpå forbliver knivskarpt */ .hero--video .act-card--calc.act-card--tint { position: relative; background: transparent; border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-3xl); padding: 22px; box-shadow: 0 28px 56px -22px rgba(16,6,24,.6); } .hero--video .act-card--calc.act-card--tint::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: rgba(255,255,255, var(--glass-opacity,.5)); -webkit-backdrop-filter: blur(var(--glass-blur,28px)) saturate(180%); backdrop-filter: blur(var(--glass-blur,28px)) saturate(180%); box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 0 28px rgba(255,255,255,.12); } .hero--video .act-card--calc.act-card--tint > * { position: relative; z-index: 1; } .hero--video .act-card--calc .act-tag { background: var(--palette-success-50); color: var(--palette-success-700); border: 0; font-weight: 600; } .hero--video .act-card--calc .calc-head-main h3 { color: var(--palette-gray-900); font-weight: 700; font-size: 18px; white-space: normal; } .hero--video .act-card--calc .calc-head-main p { color: var(--palette-gray-800); font-weight: 500; } .hero--video .act-card--calc .calc-illu { background: none; box-shadow: none; padding: 0; } .hero--video .act-card--calc .calc-illu img { width: 92px; height: auto; display: block; } /* adressefelt: solid hvidt felt i øverste lag – ikke påvirket af glasset */ .hero--video .act-card--calc .addr-field--hero { background: #fff; border: 1px solid var(--palette-gray-200); border-radius: var(--radius-lg); box-shadow: 0 6px 16px -8px rgba(16,6,24,.35); animation: none; padding: 15px 16px; } .hero--video .act-card--calc .addr-field--hero .ic { color: var(--palette-brand-600); } .hero--video .act-card--calc .addr-field--hero input { color: var(--palette-gray-900); } .hero--video .act-card--calc .addr-field--hero input::placeholder { color: var(--palette-gray-500); } .hero--video .act-card--calc .addr-field--hero:focus-within { background: #fff; border-color: var(--palette-brand-500); box-shadow: 0 0 0 4px rgba(143,90,160,.18); } .hero--video .act-card--calc .btn-cta { border-radius: var(--radius-lg); margin-top: 12px; } .hero--video .act-card--calc .act-foot { color: var(--palette-gray-700); margin-top: 12px; } .hero--video .act-card--calc .act-foot .ic { color: var(--palette-success-600); } /* ===== Synlighed-sektion — 2 kolonner med visuelt felt ===== */ /* ===== Markedsføring (visibility9) — device-showcase + magasin-tiles ===== */ .visibility9 { background: linear-gradient(180deg, #ffffff 0%, #F6F1EE 100%); overflow: hidden; } .vis9-head { max-width: 820px; } .vis9-head .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #2A0F3A; margin-bottom: 14px; } .vis9-head h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.035em; } .vis9-head .lead { margin-top: 18px; max-width: 62ch; color: var(--palette-gray-700); } /* device-stage */ .vis9-stage { position: relative; max-width: 780px; margin: 66px auto 52px; } .dev { background: #fff; border: 1px solid var(--palette-gray-200); } .dev-screen image-slot { display: block; width: 100%; height: auto; background: var(--palette-gray-100); } .dev-desktop { position: relative; z-index: 2; width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 48px 90px -36px rgba(20,8,30,.45), 0 8px 24px -14px rgba(20,8,30,.22); } .dev-bar { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--palette-gray-50); border-bottom: 1px solid var(--palette-gray-200); } .dev-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--palette-gray-300); } .dev-url { margin-left: 12px; font-size: 12px; color: var(--palette-gray-500); background: #fff; border: 1px solid var(--palette-gray-200); border-radius: 999px; padding: 5px 16px; } .dev-desktop .dev-screen image-slot { aspect-ratio: 16 / 10; } .dev-tablet { position: absolute; right: -46px; bottom: -18px; z-index: 1; width: 300px; border-radius: 18px; padding: 10px; box-shadow: 0 40px 72px -30px rgba(20,8,30,.4); } .dev-tablet .dev-screen image-slot { aspect-ratio: 3 / 4; border-radius: 9px; } .dev-phone { position: absolute; left: -32px; bottom: -32px; z-index: 3; width: 152px; border-radius: 28px; padding: 7px; box-shadow: 0 42px 70px -26px rgba(20,8,30,.5); } .dev-phone .dev-notch { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 3px; background: var(--palette-gray-300); z-index: 4; } .dev-phone .dev-screen image-slot { aspect-ratio: 9 / 19; border-radius: 22px; } /* magasin-tiles */ .vis9-tiles { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 64px; } .mtile { margin: 0; border-radius: 6px; overflow: hidden; background: var(--palette-gray-100); border: 1px solid var(--palette-gray-200); } .mtile image-slot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; background: var(--palette-gray-100); } /* portal-strip */ .vis9-portals { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; } .vis9-portals .vp-label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #2A0F3A; } .vis9-portals img { height: 22px; width: auto; opacity: .9; } .vis9-portals .vp-sub { flex-basis: 100%; text-align: center; font-size: 13px; color: var(--palette-gray-500); margin-top: 4px; } @media (min-width: 680px){ .vis9-tiles { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px){ .vis9-stage { max-width: 520px; } .dev-tablet { position: static; width: 100%; max-width: 380px; margin: 18px auto 0; } .dev-phone { position: static; width: 168px; margin: 18px auto 0; } } /* ===== Resultater — premium magasin ===== */ .results { background: #FBFAF9; } .results .wrap { max-width: 1120px; } .results .section-head { max-width: 920px; } .results .section-head .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #2A0F3A; margin-bottom: 14px; } .results .stars { font-size: 16px; letter-spacing: 3px; } .results .section-head h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.035em; margin-top: 14px; } /* stor redaktionel pull-quote */ .results .bigquote { margin-top: 44px; padding: 34px 0 0; border-left: 0; border-top: 1px solid var(--palette-gray-300); font-size: clamp(28px, 3.8vw, 46px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.16; color: var(--palette-gray-900); max-width: 20ch; text-wrap: balance; } .results .bigquote::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 68px; line-height: .5; color: #2A0F3A; margin-bottom: 14px; } .results .bigquote .who { margin-top: 20px; font-size: 15px; font-weight: 600; color: var(--palette-gray-500); letter-spacing: 0; } /* video-overskrift */ .results .vtest-head { margin-top: 66px; padding-top: 28px; border-top: 1px solid var(--palette-gray-300); } .results .vtest-head h3 { font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -0.02em; } .results .vtest-all { color: #2A0F3A; } .results .vtest-frame { border-radius: var(--radius-xl); box-shadow: 0 30px 60px -30px rgba(20,8,30,.45); } /* tekst-citater redaktionelt (ingen kasser) */ .results .quotes { margin-top: 56px; gap: 0; border-top: 1px solid var(--palette-gray-300); } .results .quote { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 30px 0; } .results .quote .q-stars { font-size: 13px; letter-spacing: 2px; } .results .quote p { margin-top: 12px; font-size: 18px; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--palette-gray-900); } .results .quote .who { margin-top: 14px; color: var(--palette-gray-500); font-weight: 600; font-size: 14px; } @media (min-width: 768px){ .results .quote { padding: 32px 34px; border-left: 1px solid var(--palette-gray-200); } .results .quote:first-child { padding-left: 0; border-left: 0; } } /* ===== Find din vej (getstarted) — redaktionelt magasin-index ===== */ .getstarted--mag { background: #FBFAF9; } .getstarted--mag .wrap { max-width: 1180px; } .gs-head { max-width: 760px; } .gs-head .mag-kicker { color: #2A0F3A; } .gs-h { font-size: clamp(38px, 5.2vw, 64px); margin-top: 10px; } .gs-lead { margin-top: 18px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--palette-gray-700); max-width: 48ch; } .gs-index { list-style: none; margin: clamp(34px, 4.4vw, 58px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); border-top: 1px solid var(--palette-gray-900); } .gs-index li { border-bottom: 1px solid var(--palette-gray-200); } .gs-index a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: clamp(20px, 2.1vw, 28px) 6px; text-decoration: none; color: inherit; transition: padding-left .25s ease; } .gs-ico { width: 26px; height: 26px; flex: none; display: flex; align-items: center; color: var(--palette-gray-400); transition: color .2s ease; } .gs-ico .ic { width: 26px; height: 26px; } .gs-type { font-family: var(--font-family); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-size: clamp(26px, 2.9vw, 40px); color: var(--palette-gray-900); transition: color .2s ease; } .gs-go { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--palette-gray-300); flex: none; display: flex; align-items: center; justify-content: center; color: #2A0F3A; transition: background .2s ease, border-color .2s ease; } .gs-go svg { width: 17px; height: 17px; transition: transform .25s ease; } .gs-index a:hover { padding-left: 16px; } .gs-index a:hover .gs-type { color: #2A0F3A; } .gs-index a:hover .gs-ico { color: #2A0F3A; } .gs-index a:hover .gs-go { background: #2A0F3A; border-color: #2A0F3A; color: #fff; } .gs-index a:hover .gs-go svg { transform: translateX(2px); } @media (max-width: 767px){ .gs-index { grid-template-columns: 1fr; } .gs-type { font-size: clamp(28px, 8.5vw, 40px); } } /* flettet lokal-specialist blok i team-sektionen */ .team7 .local-merge { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--palette-gray-200); text-align: center; } .team7 .local-merge-title { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; color: var(--palette-gray-900); } .team7 .local-merge .lead { margin: 12px auto 0; max-width: 640px; } .team7 .local-merge .people-marquee { margin-top: 28px; } /* ===== Specialister (team7) — redaktionel magasin-stil ===== */ .team7 .wrap { max-width: 1120px; } /* feature-opener: udskifteligt billede + header side om side */ .team7-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .team7-fig { margin: 0; } .team7-fig image-slot { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 2px; background: var(--palette-gray-100); } .team7 .section-head { max-width: 900px; } .team7 .section-head .eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #2A0F3A; margin-bottom: 16px; } .team7 .section-head h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.035em; } .team7 .section-head .lead { max-width: 62ch; } /* specialister som redaktionelle spalter (ingen kasser) */ .team7 .specs { gap: 0; margin-top: 56px; border-top: 1px solid var(--palette-gray-900); } .team7 .spec { background: none; border: 0; border-radius: 0; box-shadow: none !important; padding: 32px 0; transition: none; overflow: visible; } .team7 .spec:hover { transform: none; box-shadow: none !important; border-color: transparent; } .team7 .spec::after, .team7 .spec::before { display: none !important; content: none !important; } .team7 .spec .spec-illu { display: block; width: 56px; height: 56px; margin-bottom: 18px; } .team7 .spec h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--palette-gray-900); } .team7 .spec p { margin-top: 8px; color: var(--palette-gray-600); font-size: 15px; line-height: 1.6; } @media (min-width: 768px){ .team7 .specs { grid-template-columns: repeat(3, 1fr); } .team7 .spec { padding: 36px 40px; border-left: 1px solid var(--palette-gray-200); } .team7 .spec:first-child { padding-left: 0; border-left: 0; } } /* outro som redaktionel statement */ .team7 .outro { margin-top: 40px; max-width: 740px; padding-top: 28px; border-top: 1px solid var(--palette-gray-200); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--palette-gray-700); } /* lokal-specialist blok */ .team7 .local-merge { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--palette-gray-900); } .team7 .local-merge-title { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.02em; } /* by-skilte i brand-aubergine i stedet for sort */ .team7 .town-sign { border-color: #2A0F3A; } .team7 .town-skyline { color: #2A0F3A; } .team7 .town-name { color: #2A0F3A; border-top-color: #2A0F3A; } .team7 .local-foot { margin-top: 40px; } @media (max-width: 880px){ .team7-feature { grid-template-columns: 1fr; gap: 26px; } .team7-fig { order: -1; } .team7-fig image-slot { aspect-ratio: 16 / 10; } } /* stemnings-tekst flugter med sidens venstre margin (samme .wrap som logoer) */ .mood-overlay .wrap { width: 100%; } .mood-overlay .mood-text { padding: 0 0 clamp(20px, 3vw, 40px); max-width: 48ch; } /* stemnings-bånd: full-bleed video-band med tekst-overlay */ .mood-band { position: relative; width: 100%; height: clamp(340px, 46vw, 580px); overflow: hidden; isolation: isolate; background: #1c0e26; } .mood-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .mood-pick { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; border: 0; color: #fff; background: linear-gradient(160deg, #3a1f49, #1c0e26); display: flex; align-items: center; justify-content: center; transition: background .2s ease; } .mood-band.has-video .mood-pick { display: none; } .mood-band.is-over .mood-pick { background: rgba(0,0,0,.5); } .mood-pick-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .mood-pick .mp-play { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; } .mood-pick .mp-play svg { width: 24px; height: 24px; margin-left: 3px; } .mood-pick .mp-title { font-size: 16px; font-weight: 700; } .mood-pick .mp-sub { font-size: 13px; color: rgba(255,255,255,.7); } .mood-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; pointer-events: none; background: linear-gradient(0deg, rgba(28,14,38,.74) 0%, rgba(28,14,38,.14) 46%, transparent 72%); } .mood-band .mood-overlay .mood-text { color: #fff; font-size: clamp(22px, 3vw, 36px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-shadow: 0 2px 24px rgba(0,0,0,.4); } .mood-band .video-swap { position: absolute; top: 16px; right: 16px; z-index: 3; opacity: 0; cursor: pointer; padding: 8px 14px; border-radius: var(--ui-radius-sm); border: 1px solid rgba(255,255,255,.4); background: rgba(28,14,38,.6); color: #fff; font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .2s ease; } .mood-band:hover .video-swap { opacity: 1; } /* ===== Hero-kort: sekundær kort som matchende frostet glas (glas i baggrundslag) ===== */ .hero--video .hero-cards .act-card:not(.act-card--calc) { position: relative; background: transparent; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 24px 50px -22px rgba(16,6,24,.55); } .hero--video .hero-cards .act-card:not(.act-card--calc)::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: rgba(255,255,255, var(--glass-opacity,.5)); -webkit-backdrop-filter: blur(var(--glass-blur,28px)) saturate(180%); backdrop-filter: blur(var(--glass-blur,28px)) saturate(180%); box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 0 28px rgba(255,255,255,.12); } .hero--video .hero-cards .act-card:not(.act-card--calc) > * { position: relative; z-index: 1; } .hero--video .hero-cards .act-card:not(.act-card--calc) h3 { color: var(--palette-gray-900); } .hero--video .hero-cards .act-card:not(.act-card--calc) p { color: var(--palette-gray-800); } /* ===== Mørk glas-variant (tweak: glassDark) — mørk flade + lys tekst ===== */ html.glass-dark .hero--video .act-card--calc.act-card--tint, html.glass-dark .hero--video .hero-cards .act-card:not(.act-card--calc) { border-color: rgba(255,255,255,.16); } html.glass-dark .hero--video .act-card--calc.act-card--tint::before, html.glass-dark .hero--video .hero-cards .act-card:not(.act-card--calc)::before { background: rgba(26,10,36, var(--glass-opacity,.5)); box-shadow: inset 0 1px 1px rgba(255,255,255,.16), inset 0 0 28px rgba(255,255,255,.05); } html.glass-dark .hero--video .act-card--calc .calc-head-main h3 { color: #fff; } html.glass-dark .hero--video .act-card--calc .calc-head-main p { color: rgba(255,255,255,.80); } html.glass-dark .hero--video .act-card--calc .act-tag { background: rgba(255,255,255,.16); color: #fff; } html.glass-dark .hero--video .act-card--calc .act-foot { color: rgba(255,255,255,.74); } html.glass-dark .hero--video .act-card--calc .act-foot .ic { color: #47CD89; } html.glass-dark .hero--video .hero-cards .act-card:not(.act-card--calc) h3 { color: #fff; } html.glass-dark .hero--video .hero-cards .act-card:not(.act-card--calc) p { color: rgba(255,255,255,.80); } :root{ --glass-opacity:0.66; --glass-blur:0px; } /* skjul redigerings-UI i produktion */ .hero-bg-pick,.hero-bg-swap,.hero-bg-drophint,.mood-pick,.video-swap, .vtest-setyt,.vtest-pick,.mag-video-pick{ display:none !important; } /* polish: spec-ikoner skjult (fløj over overskriften) + lidt større prisfont */ .team7 .spec .spec-illu{display:none!important} .price-card h3{font-size:21px} .price-card .row{font-size:16px} .price-card .total{font-size:22px} .price-note{font-size:15px} .pricing .price-card h3{font-size:20px} .pricing .pc-line{font-size:17px} .pricing .pc-total .lbl{font-size:13px}