/* RocaPress design system v1 — components. Tokens: theme.json (--wp--preset--*). Owner: Agent 2. */ :root { --rp-navy: var(--wp--preset--color--navy, #34495E); --rp-navy-900: var(--wp--preset--color--navy-900, #243342); --rp-sky: var(--wp--preset--color--sky, #4FABD4); --rp-sky-700: var(--wp--preset--color--sky-700, #1B75A8); --rp-sky-50: var(--wp--preset--color--sky-50, #EEF6FB); --rp-ink: var(--wp--preset--color--ink, #22313F); --rp-slate: var(--wp--preset--color--slate, #56657A); --rp-line: var(--wp--preset--color--line, #DCE3EA); --rp-paper: var(--wp--preset--color--paper, #F6F8FA); --rp-night: var(--wp--preset--color--night, #1E1F21); --rp-label: var(--wp--preset--font-family--label, Montserrat, sans-serif); --rp-pill: 999px; --rp-card: 14px; --rp-header-h: 76px; --rp-gutter: clamp(16px, 4vw, 32px); --rp-wide: 1200px; --rp-shadow: 0 1px 2px rgba(34, 49, 63, .06), 0 8px 24px rgba(34, 49, 63, .08); --rp-focus: 0 0 0 3px #fff, 0 0 0 5px var(--rp-sky-700); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--rp-header-h) + 12px); } body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } :focus-visible { outline: none; box-shadow: var(--rp-focus); border-radius: 4px; } .wp-site-blocks { padding: 0; } .wp-site-blocks > * + * { margin-block-start: 0; } /* ---------- Skip link ---------- */ .rp-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--rp-navy); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; } .rp-skip:focus { top: 12px; } /* ---------- Buttons (pill system: DNA) ---------- */ .rp-btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: .75em 1.6em; border-radius: var(--rp-pill); font-family: var(--rp-label); font-size: .9375rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2; text-decoration: none; text-align: center; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .rp-btn:active { transform: translateY(1px); } .rp-btn--navy, .is-style-navy .wp-block-button__link { background: var(--rp-navy); color: #fff; } .rp-btn--navy:hover, .is-style-navy .wp-block-button__link:hover { background: var(--rp-navy-900); color: #fff; } .rp-btn--sky, .wp-block-button__link { background: var(--rp-sky-700); color: #fff; } .rp-btn--sky:hover, .wp-block-button__link:hover { background: #155f89; color: #fff; } .rp-btn--outline, .is-style-outline .wp-block-button__link { background: transparent; color: var(--rp-navy); border-color: var(--rp-navy); } .rp-btn--outline:hover, .is-style-outline .wp-block-button__link:hover { background: var(--rp-navy); color: #fff; } .rp-btn--ghost, .is-style-ghost .wp-block-button__link { background: transparent; color: #fff; border-color: #fff; } .rp-btn--ghost:hover, .is-style-ghost .wp-block-button__link:hover { background: #fff; color: var(--rp-navy); } /* ---------- Header (DNA: wordmark · spaced upper-case nav · pill at far right) ---------- */ .rp-header-part { position: sticky; top: 0; z-index: 100; } .admin-bar .rp-header-part { top: 32px; } @media (max-width: 782px) { .admin-bar .rp-header-part { top: 46px; } } .rp-header { background: #fff; box-shadow: 0 1px 0 var(--rp-line); transition: background-color .2s ease, box-shadow .2s ease; } .rp-header__inner { max-width: calc(var(--rp-wide) + 2 * var(--rp-gutter)); margin: 0 auto; padding: 0 var(--rp-gutter); height: var(--rp-header-h); display: flex; align-items: center; gap: 24px; } .rp-logo { display: block; flex: 0 0 auto; width: 176px; line-height: 0; } .rp-logo img { width: 100%; height: auto; } .rp-logo__light { display: none; } .rp-nav { margin-left: auto; } .rp-nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; } .rp-nav__item > a, .rp-nav__toggle, .rp-nav__item > .rp-link-soon { font-family: var(--rp-label); font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rp-navy); text-decoration: none; background: none; border: 0; padding: 10px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .rp-nav__item > a:hover, .rp-nav__toggle:hover, .rp-nav__item > a[aria-current="page"] { color: var(--rp-sky-700); } .rp-nav__item > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .rp-nav__toggle svg { transition: transform .2s ease; } .rp-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .rp-header__cta { flex: 0 0 auto; min-height: 44px; padding: .65em 1.4em; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; } .rp-header__tel, .rp-burger { display: none; } /* Mega menu */ .rp-nav__item--mega { position: static; } .rp-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--rp-line); box-shadow: 0 18px 40px rgba(34, 49, 63, .14); } .rp-mega__grid { max-width: calc(var(--rp-wide) + 2 * var(--rp-gutter)); margin: 0 auto; padding: 32px var(--rp-gutter) 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .rp-mega__title { margin: 0 0 12px; font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .rp-mega__title a, .rp-mega__title .rp-link-soon { color: var(--rp-sky-700); text-decoration: none; } .rp-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .rp-mega li a, .rp-mega li .rp-link-soon { display: block; padding: 6px 0; color: var(--rp-ink); text-decoration: none; font-size: 1rem; } .rp-mega li a:hover { color: var(--rp-sky-700); text-decoration: underline; text-underline-offset: 4px; } .rp-mega__foot { max-width: calc(var(--rp-wide) + 2 * var(--rp-gutter)); margin: 0 auto; padding: 14px var(--rp-gutter) 22px; border-top: 1px solid var(--rp-line); font-size: .9375rem; } .rp-mega__foot a { color: var(--rp-navy); font-weight: 500; } .rp-link-soon { color: var(--rp-slate) !important; cursor: default; } .rp-soon { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #FFF4D6; color: #6B4E00; font-size: .6875rem; font-family: var(--rp-label); letter-spacing: .06em; vertical-align: middle; } /* Transparent header over photo heroes (DNA): dark = home photo hero, light = photo page headers */ .rp-hero-header .rp-header-part { position: fixed; left: 0; right: 0; } .rp-hero-header .rp-header:not(.is-solid):not(.is-open):not(.is-mega) { background: transparent; box-shadow: none; } .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-logo__dark { display: none; } .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-logo__light { display: block; } .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-nav__item > a, .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-nav__toggle, .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-nav__item > .rp-link-soon, .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-header__tel { color: #fff !important; } .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-soon { background: rgba(255, 244, 214, .92); } .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-burger span { background: #fff; } .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-header__cta { background: #fff; color: var(--rp-navy); } /* Breathing room while transparent (menu not pinned to the top edge); compacts when solid. */ .rp-header__inner { transition: height .25s ease; } @media (min-width: 1025px) { /* Geometry depends ONLY on scroll state (is-solid) – never on the mega/drawer state (B3.5: zero layout shift). */ .rp-hero-header .rp-header:not(.is-solid) .rp-header__inner { height: calc(var(--rp-header-h) + 32px); padding-top: 12px; } .rp-hero-header .rp-header:not(.is-solid) .rp-logo { width: 196px; } .rp-logo { transition: width .25s ease; } } @media (max-width: 1024px) { .rp-hero-header .rp-header:not(.is-solid) .rp-header__inner { height: calc(var(--rp-header-h) + 12px); padding-top: 6px; } } /* Mobile header + drawer */ @media (max-width: 1024px) { :root { --rp-header-h: 64px; } .rp-nav, .rp-header__cta { display: none; } .rp-logo { width: 132px; margin-right: auto; } .rp-header__tel { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--rp-navy); border-radius: 50%; } .rp-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; } .rp-burger span { display: block; height: 2px; background: var(--rp-navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .rp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .rp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .rp-drawer { position: fixed; left: 0; right: 0; top: var(--rp-drawer-top, var(--rp-header-h)); bottom: 0; background: #fff; overflow-y: auto; padding: 8px var(--rp-gutter) calc(140px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rp-line); } .admin-bar .rp-drawer { top: var(--rp-drawer-top, calc(var(--rp-header-h) + 46px)); } .rp-drawer__group { border-bottom: 1px solid var(--rp-line); } .rp-drawer__group summary { list-style: none; cursor: pointer; padding: 16px 0; min-height: 48px; font-family: var(--rp-label); font-size: .875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-navy); display: flex; justify-content: space-between; align-items: center; } .rp-drawer__group summary::-webkit-details-marker { display: none; } .rp-drawer__group summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; } .rp-drawer__group[open] summary::after { content: "–"; } .rp-drawer ul { list-style: none; margin: 0; padding: 0 0 12px; } .rp-drawer li a, .rp-drawer li .rp-link-soon { display: block; padding: 11px 0; color: var(--rp-ink); text-decoration: none; font-size: 1.0625rem; } .rp-drawer__links { padding-top: 8px !important; } .rp-drawer__links a { font-family: var(--rp-label); font-size: .875rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-navy) !important; } .rp-drawer__links .rp-link-soon { font-family: var(--rp-label); font-size: .875rem !important; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-slate) !important; } .rp-drawer__cta { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--rp-line); padding: 12px var(--rp-gutter) calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 10px; } .rp-drawer__cta .rp-btn { width: 100%; } body.rp-drawer-open { overflow: hidden; } } /* ---------- Main ---------- */ .rp-main { padding-bottom: var(--wp--preset--spacing--60); } .rp-main--page { padding-top: var(--wp--preset--spacing--40); } .rp-main > .wp-block-post-content > * { margin-block-start: 0; } .rp-breadcrumbs { font-size: .875rem; color: var(--rp-slate); margin: 0 0 12px; } .rp-breadcrumbs a { color: var(--rp-slate); } .rp-eyebrow { font-family: var(--rp-label); font-size: .75rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--rp-sky-700); margin-bottom: 8px !important; } .rp-lead { font-size: var(--wp--preset--font-size--lead); color: var(--rp-slate); } /* Section rhythm + DNA accent rule under centred H2 */ .rp-section { padding-block: var(--wp--preset--spacing--60); } .rp-section--paper { background: var(--rp-paper); } .rp-section > * { margin-inline: auto; } .rp-rule::after { content: ""; display: block; width: 72px; height: 3px; background: var(--rp-navy); margin: 18px auto 0; border-radius: 2px; } .rp-rule.has-text-align-left::after { margin-left: 0; } /* ---------- Hero ---------- */ .rp-hero { position: relative; color: #fff; overflow: hidden; background: radial-gradient(1200px 500px at 85% 10%, rgba(79, 171, 212, .35), transparent 60%), linear-gradient(160deg, #3b5570 0%, var(--rp-navy) 45%, var(--rp-navy-900) 100%); padding-block: calc(var(--rp-header-h) + clamp(48px, 9vw, 120px)) clamp(56px, 9vw, 120px); } .rp-hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px; border-radius: 50%; border: 70px solid rgba(79, 171, 212, .14); pointer-events: none; } .rp-hero > * { position: relative; z-index: 1; } .rp-hero h1, .rp-hero p { color: #fff; } .rp-hero .rp-lead { color: rgba(255, 255, 255, .88); max-width: 720px; margin-inline: auto; } .rp-hero .rp-facts-line { color: rgba(255, 255, 255, .8); } .rp-hero .is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; } .rp-hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--rp-navy); } .rp-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #fff; color: var(--rp-navy); } .rp-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--rp-sky-50); } .rp-pagehero { background: var(--rp-paper); border-bottom: 1px solid var(--rp-line); padding-block: calc(var(--wp--preset--spacing--50)) var(--wp--preset--spacing--50); } .rp-pagehero .rp-lead { max-width: 720px; } /* Facts line (trust) */ .rp-facts-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--rp-slate); } .rp-facts-line li { display: inline-flex; align-items: center; gap: 8px; } .rp-facts-line li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rp-sky); margin-right: 10px; } .rp-facts-line.is-left { justify-content: flex-start; } /* ---------- Cards: problem tiles / problem cards ---------- */ .rp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; padding: 0; margin: 0; list-style: none; } .rp-tile { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; border: 1px solid var(--rp-line); border-radius: var(--rp-card); background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .rp-tile:hover { border-color: var(--rp-sky); box-shadow: var(--rp-shadow); transform: translateY(-2px); } .rp-tile h3 { margin: 0; font-size: 1.1875rem; } .rp-tile h3 a { color: var(--rp-navy); text-decoration: none; } .rp-tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rp-card); } .rp-tile p { margin: 0; color: var(--rp-slate); } .rp-tile__more { margin-top: auto !important; font-family: var(--rp-label); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-sky-700) !important; } .rp-tile--soon { background: var(--rp-paper); } .rp-tile--soon h3 { color: var(--rp-slate); } /* Steps */ .rp-steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; } .rp-steps li { counter-increment: s; position: relative; padding-top: 56px; } .rp-steps li::before { content: counter(s); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--rp-navy); color: #fff; font-family: var(--rp-label); font-weight: 600; } .rp-steps.is-vertical { grid-template-columns: 1fr; gap: 18px; } .rp-steps.is-vertical li { padding: 4px 0 0 58px; min-height: 40px; } /* Offer card (entry offers) */ .rp-offer { border: 2px solid var(--rp-sky); border-radius: var(--rp-card); background: var(--rp-sky-50); padding: clamp(20px, 4vw, 32px); } .rp-offer h3 { margin-top: 0; } .rp-offer__price { font-family: var(--rp-label); font-weight: 600; color: var(--rp-navy); font-size: 1.125rem; } .rp-provisional { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: #FFF4D6; color: #6B4E00; font-size: .75rem; font-weight: 600; letter-spacing: .02em; vertical-align: middle; } /* Case teaser */ .rp-case-teaser { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--rp-card); background: var(--rp-navy); color: #fff; } .rp-case-teaser h3, .rp-case-teaser p { color: #fff; margin: 0; } .rp-case-teaser p + p { margin-top: 8px; } .rp-case-teaser .rp-eyebrow { color: #9FD3EE !important; } @media (max-width: 700px) { .rp-case-teaser { grid-template-columns: 1fr; } } /* Testimonials */ .rp-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .rp-quote blockquote { margin: 0; padding: 0; border: 0; } .rp-quote { margin: 0; padding: 24px; border-radius: var(--rp-card); background: #fff; border: 1px solid var(--rp-line); } .rp-quote p { margin: 0 0 14px; font-size: 1.0625rem; } .rp-quote cite { font-style: normal; font-size: .9375rem; color: var(--rp-slate); } .rp-quote cite strong { color: var(--rp-navy); display: block; } /* FAQ */ .rp-faq details { border-bottom: 1px solid var(--rp-line); } .rp-faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font-weight: 600; color: var(--rp-navy); font-size: 1.0625rem; } .rp-faq summary::-webkit-details-marker { display: none; } .rp-faq summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 1.5rem; font-weight: 400; color: var(--rp-sky-700); } .rp-faq details[open] summary::after { content: "–"; } .rp-faq details > :not(summary) { margin: 0 0 18px; color: var(--rp-ink); } /* Checklist */ .rp-checklist { list-style: none; padding: 0; display: grid; gap: 10px; } .rp-checklist li { position: relative; padding-left: 32px; } .rp-checklist li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--rp-sky-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231B75A8' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; border: 1px solid var(--rp-sky); } /* Case article */ .rp-case-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9375rem; color: var(--rp-slate); padding: 0; list-style: none; } .rp-result { border-left: 4px solid var(--rp-sky); padding: 4px 0 4px 20px; } /* ---------- Forms (Gravity Forms) ---------- */ .rp-form-card { background: #fff; border: 1px solid var(--rp-line); border-radius: var(--rp-card); padding: clamp(20px, 4vw, 36px); box-shadow: var(--rp-shadow); } .gform_wrapper.gravity-theme .gfield_label { font-weight: 600; color: var(--rp-navy); font-size: 1rem; } .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme textarea, .gform_wrapper.gravity-theme select { width: 100%; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--rp-ink); border: 1px solid #B5C0CC; border-radius: 10px; background: #fff; } .gform_wrapper.gravity-theme textarea { min-height: 140px; } .gform_wrapper.gravity-theme input:focus, .gform_wrapper.gravity-theme textarea:focus, .gform_wrapper.gravity-theme select:focus { outline: none; border-color: var(--rp-sky-700); box-shadow: 0 0 0 3px rgba(27, 117, 168, .2); } .gform_wrapper.gravity-theme .gform_footer input[type=submit], .gform_wrapper.gravity-theme .gform_page_footer input[type=submit], .gform_wrapper.gravity-theme .gform_page_footer input[type=button], .gform_wrapper.gravity-theme .gform_footer button { min-height: 48px; padding: .75em 1.8em; border-radius: var(--rp-pill); border: 0; background: var(--rp-navy); color: #fff; font-family: var(--rp-label); font-weight: 600; font-size: .9375rem; letter-spacing: .02em; cursor: pointer; } .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button { background: transparent; color: var(--rp-navy); border: 2px solid var(--rp-navy); } .gform_confirmation_message { font-size: 1.125rem; color: var(--rp-navy); padding: 20px; background: var(--rp-sky-50); border-radius: var(--rp-card); } /* ---------- Footer (DNA: navy CTA band + dark facts bar) ---------- */ .rp-band { background: var(--rp-navy); color: #fff; } .rp-band__inner { max-width: calc(var(--rp-wide) + 2 * var(--rp-gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 64px) var(--rp-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; } .rp-band__text { margin: 0; flex: 1 1 420px; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.35; font-weight: 400; color: #fff; } .rp-band .rp-btn { flex: 0 0 auto; } .rp-footer__main { background: var(--rp-night); color: #C3CAD2; } .rp-footer__grid { max-width: calc(var(--rp-wide) + 2 * var(--rp-gutter)); margin: 0 auto; padding: 48px var(--rp-gutter) 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 900px) { .rp-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .rp-footer__grid { grid-template-columns: 1fr; gap: 24px; } } .rp-footer__title { margin: 0 0 12px; font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; } .rp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rp-footer a { color: #C3CAD2; text-decoration: none; } .rp-footer a:hover { color: #fff; text-decoration: underline; } .rp-footer address { font-style: normal; line-height: 1.7; } .rp-footer__note { margin: 10px 0 0; font-size: .9375rem; color: #9FB0C0; } .rp-footer .rp-link-soon { color: #8D98A5 !important; } .rp-facts { background: var(--rp-night); border-top: 1px solid #34373B; color: #A9B1BA; } .rp-facts__line, .rp-facts__links { max-width: calc(var(--rp-wide) + 2 * var(--rp-gutter)); margin: 0 auto; padding: 16px var(--rp-gutter) 0; font-size: .875rem; display: flex; flex-wrap: wrap; gap: 4px 0; } .rp-facts__line span:not(:last-child)::after { content: "|"; margin: 0 12px; color: #5C636B; } .rp-facts__links { padding-bottom: 20px; gap: 18px; } .rp-facts a, .rp-linkbtn { color: #A9B1BA; } .rp-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: .875rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .rp-linkbtn:hover { color: #fff; } /* Cookiebot floating trigger replaced by the footer link (B2 decision C9). */ #CookiebotWidget { display: none !important; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* Hero button contrast (navy hero) */ .rp-hero .rp-btn--navy { background: #fff; color: var(--rp-navy); } .rp-hero .rp-btn--navy:hover { background: var(--rp-sky-50); color: var(--rp-navy); } .rp-hero .rp-btn--outline { color: #fff; border-color: rgba(255,255,255,.85); } .rp-hero .rp-btn--outline:hover { background: #fff; color: var(--rp-navy); } .rp-hero .rp-actions { margin-top: 28px; margin-bottom: 24px; } .rp-pagehero .rp-actions { margin-top: 24px; margin-bottom: 18px; } /* Layout refinements (review round 1) */ .rp-tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } @media (min-width: 1000px) { .rp-tiles { grid-template-columns: repeat(3, 1fr); } } .rp-section .rp-lead + .wp-block-html, .rp-section .rp-lead + .rp-tiles { margin-top: 32px; } .page-template-page-landing .rp-main, .home .rp-main { padding-bottom: 0; } @media (max-width: 560px) { .rp-facts-line { gap: 6px 16px; } .rp-facts-line li + li::before { display: none; } } /* Gravity Forms Orbital: pill buttons + label font (colours come from gform_default_styles in inc/forms.php). */ .gform_wrapper.gform-theme { --gf-ctrl-btn-radius: var(--rp-pill) !important; --gf-ctrl-btn-font-family: var(--rp-label) !important; --gf-ctrl-btn-font-weight: 600 !important; --gf-ctrl-btn-letter-spacing: .02em !important; --gf-font-family-base: inherit !important; } .gform_wrapper.gform-theme .gform_previous_button.gform-theme-button { border: 2px solid var(--rp-navy) !important; } /* GF focuses its empty scroll anchor after submit (0px tall) — no visible outline bar on it. */ .gform_anchor:focus, .gform_anchor:focus-visible { outline: none; } /* ===================================================================== B2 refinement round 1 (2026-09-29): RocaPress visual DNA photography + overlay, transparent header over photo heroes, centred photo page headers, project showcase, one-line footer facts. ===================================================================== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Background photo inside a section (decorative , never stretched by constrained layout) */ .rp-media-bg { position: absolute !important; inset: 0; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; object-fit: cover; z-index: -1; pointer-events: none; } .rp-has-photo { position: relative; overflow: hidden; isolation: isolate; } .rp-has-photo::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .rp-has-photo::after { z-index: 0; } .rp-has-photo > *:not(.rp-media-bg) { position: relative; z-index: 1; } /* Home: photographic hero (desk photo from today's site) under a controlled navy overlay */ .rp-hero.rp-hero--photo { background: var(--rp-navy-900); min-height: min(92svh, 860px); display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--rp-header-h) + 32px + clamp(40px, 7vw, 96px)) clamp(56px, 8vw, 104px); } .rp-hero--photo::after { display: none; } .rp-hero--photo::before { background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(30, 42, 55, .55), rgba(30, 42, 55, 0) 100%), radial-gradient(900px 420px at 85% 0%, rgba(79, 171, 212, .20), transparent 65%), linear-gradient(180deg, rgba(36, 51, 66, .62) 0%, rgba(36, 51, 66, .46) 45%, rgba(30, 42, 55, .82) 100%); } .rp-hero--photo .rp-media-bg { object-position: 50% 62%; } .rp-hero--photo h1 { text-shadow: 0 2px 24px rgba(20, 30, 40, .35); } .rp-hero--photo .rp-lead { color: rgba(255, 255, 255, .92); } .rp-hero--photo .rp-facts-line { color: rgba(255, 255, 255, .86); } .rp-hero--photo .rp-eyebrow { color: #fff; } /* Subpages: centred page header on the soft landscape from today's site + fine dot texture (old grid.png) */ .rp-pagehero.rp-pagehero--photo { background: #EEF2F4; border-bottom: 0; text-align: center; padding-block: calc(var(--rp-header-h) + 32px + clamp(28px, 5vw, 64px)) clamp(48px, 6vw, 80px); } .rp-pagehero--photo::before { background: radial-gradient(rgba(52, 73, 94, .10) 1px, transparent 1.2px) 0 0 / 4px 4px, radial-gradient(ellipse 48% 62% at 50% 55%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, rgba(246, 248, 250, .30) 70%, rgba(246, 248, 250, .75) 100%); } .rp-pagehero--photo .rp-media-bg { object-position: 50% 45%; filter: saturate(.9); } .rp-pagehero--photo > * { margin-inline: auto !important; max-width: 820px; } .rp-pagehero--photo h1 { margin-bottom: .35em; } .rp-pagehero--photo .rp-lead { color: #3E4D5E; max-width: 700px; margin-top: 0; } .rp-pagehero--photo .rp-lead::after { content: ""; display: block; width: 72px; height: 3px; background: var(--rp-navy); border-radius: 2px; margin: 22px auto 0; } .rp-pagehero--photo .rp-actions { justify-content: center !important; } .rp-pagehero--photo .rp-facts-line, .rp-pagehero--photo .rp-facts-line.is-left { justify-content: center; color: #3E4D5E; } .rp-pagehero--photo .rp-case-meta { justify-content: center; color: #3E4D5E; } .rp-pagehero--photo .rp-breadcrumbs { text-align: center; } .rp-pagehero--photo .rp-eyebrow { color: #155E88; } /* Testimonials on the street photo (atmosphere band) */ .rp-section--photo { background: var(--rp-navy-900); } .rp-section--photo::before { background: linear-gradient(180deg, rgba(30, 42, 55, .86), rgba(36, 51, 66, .80)); } .rp-section--photo h2 { color: #fff; } .rp-section--photo .rp-rule::after { background: #fff; } .rp-section--photo .rp-quote { border: 0; box-shadow: 0 18px 40px rgba(10, 18, 26, .28); } /* Footer facts: one continuous line where the viewport allows (desktop), wraps on smaller screens */ .rp-facts__row { max-width: calc(var(--rp-wide) + 2 * var(--rp-gutter)); margin: 0 auto; padding: 18px var(--rp-gutter) 22px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; font-size: .875rem; list-style: none; } .rp-facts__row > li { display: inline-flex; align-items: center; white-space: nowrap; } .rp-facts__row > li:not(:last-child)::after { content: "|"; margin: 0 11px; color: #5C636B; } @media (max-width: 1199px) { .rp-facts__row > li { white-space: normal; } } /* Footer facts row wins over the generic footer list grid */ .rp-footer ul.rp-facts__row { display: flex; gap: 0; margin: 0 auto; padding: 18px var(--rp-gutter) 22px; } /* Footer facts row: ≥24px tap targets when wrapped (WCAG 2.5.8) */ .rp-facts__row > li { min-height: 28px; } .rp-facts__row a, .rp-facts__row .rp-linkbtn { display: inline-flex; align-items: center; min-height: 28px; } /* Current nav item on transparent light photo header: navy (sky-700 is too light over the photo) */ .rp-hero-light .rp-header:not(.is-solid):not(.is-open) .rp-nav__item > a[aria-current="page"] { color: var(--rp-navy); } /* ---------- Selected projects (refinement 2): compact portfolio cards ---------- */ .rp-projects { margin: 36px auto 0; max-width: 1080px; } .rp-projects__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; } .rp-project { margin: 0; position: relative; min-width: 0; } .rp-project__card { height: 100%; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #E1E7ED; box-shadow: 0 1px 2px rgba(34, 49, 63, .06), 0 10px 28px rgba(34, 49, 63, .10); transition: transform .25s ease, box-shadow .25s ease; } .rp-project:hover .rp-project__card { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(34, 49, 63, .08), 0 18px 40px rgba(34, 49, 63, .16); } .rp-project__shot { position: relative; line-height: 0; background: #F3F5F8; border-bottom: 1px solid #E6EBF0; } .rp-project__shot::before { content: ""; display: block; height: 20px; border-bottom: 1px solid #E3E8EE; background: radial-gradient(circle at 12px 10px, #F26B5E 3px, transparent 3.5px), radial-gradient(circle at 23px 10px, #F4BE4F 3px, transparent 3.5px), radial-gradient(circle at 34px 10px, #5FC456 3px, transparent 3.5px), #F3F5F8; } .rp-project__shot img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 657; object-fit: cover; object-position: top center; } .rp-project__meta { padding: 14px 18px 16px; line-height: 1.35; } .rp-project__name { margin: 0 0 3px; font-size: 1.0625rem; color: var(--rp-navy); } .rp-project__type { margin: 0; font-size: .875rem; color: var(--rp-slate); } @media (max-width: 999px) and (min-width: 640px) { .rp-projects__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } } @media (max-width: 639px) { /* Swipeable row on phones: the list itself scrolls (scroll-snap); next card peeks */ .rp-projects__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rp-projects__list::-webkit-scrollbar { display: none; } .rp-project { scroll-snap-align: start; } .rp-projects__list:focus-visible { box-shadow: var(--rp-focus); } } .rp-projects-hint { display: none; } @media (max-width: 639px) { .rp-projects-hint { display: block; margin: 0; text-align: center; font-size: .875rem; color: var(--rp-slate); } } /* ---------- Header states (refinement 2): deterministic contrast, never dependent on the photo ---------- solid : white bar (default, all pages; after scroll; mega/drawer open) dark : home photo hero — navy scrim behind white logo/nav (text sits on ≥ .55 navy, whatever the photo) light : photo page headers — frosted white bar behind dark logo/navy nav (text sits on ≥ .86 white) */ .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) { background: linear-gradient(180deg, rgba(22, 32, 44, .78) 0%, rgba(22, 32, 44, .55) 62%, rgba(22, 32, 44, 0) 100%); } .rp-hero-light .rp-header:not(.is-solid):not(.is-open):not(.is-mega) { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.15) blur(12px); backdrop-filter: saturate(1.15) blur(12px); box-shadow: 0 1px 0 rgba(52, 73, 94, .08); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .rp-hero-light .rp-header:not(.is-solid):not(.is-open):not(.is-mega) { background: rgba(255, 255, 255, .94); } } /* Home hero: one system — photo + overlay + content; next section heading peeks on desktop */ .rp-hero.rp-hero--photo { min-height: min(86svh, 800px); } /* ===================================================================== B2 refinement 3 (2026-09-29): page-type hierarchy + heading composition ===================================================================== */ /* Heading composition rule: balanced lines, sensible measures (no
hacks) */ h1, h2, h3, .rp-feature__title { text-wrap: balance; } .rp-lead, .rp-feature__deck { text-wrap: pretty; } .rp-btn--white { background: #fff; color: var(--rp-navy); border-color: #fff; } .rp-btn--white:hover { background: var(--rp-sky-50); color: var(--rp-navy); } /* HOME hero: composed first viewport (header + hero ≈ one screen on desktop; next section starts at the fold) */ @media (min-width: 1025px) { .rp-hero.rp-hero--photo { min-height: clamp(640px, 100svh, 960px); padding-block: calc(var(--rp-header-h) + 32px + 24px) 64px; } } .rp-hero--photo h1 { max-width: 14.5em; margin-inline: auto; } /* resolves as "Digital hjælp til små og / mellemstore virksomheder" */ .rp-hero--photo .rp-lead { max-width: 36em; } /* HOME featured case: full-bleed atmosphere band, content in the constrained width */ .rp-feature { background: var(--rp-navy-900); color: #fff; padding-block: clamp(64px, 9vw, 120px); } .rp-feature::before { background: linear-gradient(100deg, rgba(24, 35, 48, .94) 0%, rgba(30, 44, 60, .88) 48%, rgba(36, 51, 66, .72) 100%); } .rp-feature .rp-media-bg { filter: grayscale(1) contrast(1.05); } .rp-feature__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1200px; margin-inline: auto; } .rp-feature .rp-eyebrow { color: #BFE3F5 !important; } .rp-feature__title { color: #fff; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.2; margin: 0 0 18px; max-width: none; } .rp-feature__deck { color: rgba(255, 255, 255, .9); font-size: var(--wp--preset--font-size--lead); margin: 0 0 28px; max-width: 34em; } .rp-feature__facts { border-left: 3px solid var(--rp-sky); padding: 6px 0 6px clamp(20px, 3vw, 36px); } .rp-feature__facts-title { font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #BFE3F5; margin: 0 0 14px; } .rp-feature__facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .rp-feature__facts li { position: relative; padding-left: 34px; color: #fff; font-size: 1.125rem; line-height: 1.4; } .rp-feature__facts li::before { content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: rgba(79, 171, 212, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") center/13px no-repeat; border: 1px solid rgba(159, 211, 238, .7); } @media (max-width: 860px) { .rp-feature__grid { grid-template-columns: 1fr; } } /* CASE masthead: editorial / proof first (no photo; the case provides the identity) */ .rp-masthead--editorial { background: var(--rp-paper); border-bottom: 1px solid var(--rp-line); padding-block: clamp(40px, 6vw, 72px) clamp(36px, 5vw, 56px); } .rp-masthead--editorial > * { max-width: 860px; margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; } .rp-masthead--editorial h1 { font-size: clamp(1.875rem, 3.4vw, 2.625rem); line-height: 1.14; margin: 6px 0 18px; max-width: none; } .rp-masthead--editorial .rp-lead { color: #3E4D5E; max-width: 40em; margin: 0 0 28px; } .rp-masthead--editorial .rp-eyebrow { color: #155E88; } .rp-crumbs { font-size: .875rem; color: var(--rp-slate); margin-bottom: 18px !important; } .rp-crumbs a { color: var(--rp-slate); } .rp-crumbs a:hover { color: var(--rp-navy); } .rp-masthead--editorial .rp-case-meta { gap: 0; border-top: 1px solid var(--rp-line); padding-top: 18px; margin: 0; } .rp-masthead--editorial .rp-case-meta li { display: flex; flex-direction: column; gap: 2px; padding-right: 32px; margin-right: 32px; border-right: 1px solid var(--rp-line); color: var(--rp-ink); font-size: .9375rem; } .rp-masthead--editorial .rp-case-meta li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .rp-masthead--editorial .rp-case-meta li span { font-family: var(--rp-label); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rp-slate); } @media (max-width: 600px) { .rp-masthead--editorial .rp-case-meta { row-gap: 12px; } .rp-masthead--editorial .rp-case-meta li { padding-right: 18px; margin-right: 18px; } } /* ACTION mastheads (Kontakt, Fortæl om din opgave): compact navy band, form pulled up = the form is the hero */ .rp-masthead--action { position: relative; overflow: hidden; text-align: center; color: #fff; background: radial-gradient(900px 360px at 85% -20%, rgba(79, 171, 212, .28), transparent 65%), linear-gradient(160deg, #3b5570 0%, var(--rp-navy) 50%, var(--rp-navy-900) 100%); padding-block: clamp(36px, 5vw, 56px) calc(clamp(36px, 5vw, 56px) + 72px); } .rp-masthead--action::after { content: ""; position: absolute; right: -90px; bottom: -150px; width: 360px; height: 360px; border-radius: 50%; border: 48px solid rgba(79, 171, 212, .12); pointer-events: none; } .rp-masthead--action > * { position: relative; z-index: 1; } .rp-masthead--action .rp-eyebrow { color: #BFE3F5 !important; } .rp-masthead--action h1 { color: #fff; font-size: clamp(1.875rem, 3.4vw, 2.625rem); line-height: 1.15; margin: 4px auto 12px; max-width: 24em; } .rp-masthead--action .rp-lead { color: rgba(255, 255, 255, .9); margin: 0 auto; max-width: 36em; } .rp-pullup { margin-top: -72px !important; padding-top: 0 !important; position: relative; z-index: 2; } .rp-contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; } .rp-contact-card { background: #fff; border: 1px solid var(--rp-line); border-radius: var(--rp-card); padding: clamp(20px, 3vw, 32px); box-shadow: var(--rp-shadow); } .rp-contact-card h2 { font-size: 1.5rem; margin-top: 0; } .rp-form-card--intake { max-width: 800px; margin-inline: auto; } @media (max-width: 860px) { .rp-contact-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .rp-masthead--action { padding-block: 32px 80px; } .rp-pullup { margin-top: -48px !important; } } /* Footer CTA band: the sentence reads as one line on normal desktop widths */ @media (min-width: 1200px) { .rp-band__inner { flex-wrap: nowrap; gap: 32px; } .rp-band__text { flex: 1 1 auto; font-size: 1.3125rem; } .rp-band .rp-btn { white-space: nowrap; } } /* Case masthead: headline + proof panel (the case provides the visual identity) */ .rp-masthead--editorial > .rp-masthead__grid { max-width: 1200px; margin-inline: auto !important; } .rp-masthead__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: end; } .rp-result-card { background: var(--rp-navy); color: #fff; border-radius: var(--rp-card); padding: 26px 26px 22px; box-shadow: var(--rp-shadow); } .rp-result-card__title { font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #BFE3F5; margin: 0 0 14px; } .rp-result-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rp-result-card li { position: relative; padding-left: 30px; font-size: 1rem; line-height: 1.4; color: #fff; } .rp-result-card li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: rgba(79, 171, 212, .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; border: 1px solid rgba(159, 211, 238, .7); } @media (max-width: 900px) { .rp-masthead__grid { grid-template-columns: 1fr; } } .rp-feature__facts li, .rp-result-card li, .rp-checklist li { text-wrap: pretty; } /* ===================================================================== B3 system (2026-09-29) ===================================================================== */ /* Write-first quick action (mobile header) + drawer contact line */ .rp-header__write { display: none; } @media (max-width: 1024px) { .rp-header__write { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--rp-pill); background: var(--rp-navy); color: #fff; font-family: var(--rp-label); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; white-space: nowrap; } .rp-hero-dark .rp-header:not(.is-solid):not(.is-open):not(.is-mega) .rp-header__write { background: #fff; color: var(--rp-navy); } } .rp-drawer__contact { margin: 10px 0 0; font-size: .875rem; color: var(--rp-slate); text-align: center; } .rp-drawer__contact a { color: var(--rp-slate); } /* Service mastheads: header belongs to the photo (transparent), deterministic light scrim behind the nav */ .rp-hero-light .rp-header:not(.is-solid):not(.is-open):not(.is-mega) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .rp-pagehero--photo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--rp-header-h) + 72px); z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .7) 55%, rgba(255, 255, 255, 0) 100%); } .rp-pagehero--photo::before { background: radial-gradient(rgba(52, 73, 94, .10) 1px, transparent 1.2px) 0 0 / 4px 4px, radial-gradient(ellipse 50% 60% at 50% 58%, rgba(255, 255, 255, .64), rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(246, 248, 250, .22) 70%, rgba(255, 255, 255, .7) 100%) !important; } .rp-pagehero--photo { padding-bottom: clamp(56px, 7vw, 96px); } /* Problem tiles with icons (home: scan the six problems) */ .rp-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--rp-sky-50); color: var(--rp-sky-700); margin-bottom: 6px; flex: 0 0 auto; } .rp-tile__icon svg { width: 24px; height: 24px; } .rp-tile--soon .rp-tile__icon { background: #EEF1F4; color: var(--rp-slate); } /* Section heads for composed pages */ .rp-head { max-width: 760px; margin: 0 0 clamp(24px, 3vw, 40px) !important; } .rp-head h2 { margin: 0 0 10px; } .rp-head p { margin: 0; color: var(--rp-slate); font-size: var(--wp--preset--font-size--lead); } .rp-head--center { margin-inline: auto !important; text-align: center; } .rp-section--tight { padding-block: clamp(40px, 5vw, 64px); } .rp-section--navy { background: var(--rp-navy); color: #fff; } .rp-section--navy h2, .rp-section--navy h3, .rp-section--navy p { color: #fff; } .rp-section--line { border-top: 1px solid var(--rp-line); } /* Split: heading/intro left, content right */ .rp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; } .rp-split__intro h2 { margin-top: 0; } .rp-split__intro p { color: var(--rp-slate); } .rp-split__intro .rp-textlink { display: inline-block; margin-top: 8px; } @media (max-width: 860px) { .rp-split { grid-template-columns: 1fr; } } /* Checklist in two columns (Typiske opgaver etc.) */ .rp-checklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 14px; margin: 0; } @media (max-width: 600px) { .rp-checklist--cols { grid-template-columns: 1fr; } } .rp-checklist li { line-height: 1.5; } /* Cards grid (what we do / included / principles) */ .rp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .rp-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rp-card { position: relative; background: #fff; border: 1px solid var(--rp-line); border-radius: var(--rp-card); padding: 24px; display: flex; flex-direction: column; gap: 8px; } .rp-card h3 { margin: 0; font-size: 1.1875rem; } .rp-card p { margin: 0; color: var(--rp-slate); } .rp-card .rp-tile__icon { margin-bottom: 4px; } .rp-card--link:hover { border-color: var(--rp-sky); box-shadow: var(--rp-shadow); } .rp-card--link h3 a { color: var(--rp-navy); text-decoration: none; } .rp-card--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rp-card); } .rp-card__more { margin-top: auto !important; padding-top: 6px; font-family: var(--rp-label); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-sky-700) !important; } @media (max-width: 1000px) { .rp-cards, .rp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .rp-cards, .rp-cards--2, .rp-cards--4 { grid-template-columns: 1fr; } } /* Process: horizontal numbered steps with a connecting line (vertical on mobile) */ .rp-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; counter-reset: p; position: relative; } .rp-process::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; background: var(--rp-line); } .rp-process li { counter-increment: p; position: relative; padding-top: 62px; } .rp-process li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--rp-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--rp-label); font-weight: 600; box-shadow: 0 0 0 6px #fff; } .rp-process h3 { font-size: 1.0625rem; margin: 0 0 6px; } .rp-process p { margin: 0; color: var(--rp-slate); } @media (max-width: 860px) { .rp-process { grid-template-columns: 1fr; gap: 22px; } .rp-process::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; } .rp-process li { padding: 8px 0 0 64px; min-height: 44px; } } /* Entry-offer module: description + includes left, navy price/CTA panel right */ .rp-offer2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); border-radius: 18px; overflow: hidden; border: 1px solid var(--rp-line); box-shadow: var(--rp-shadow); background: #fff; } .rp-offer2__body { padding: clamp(24px, 4vw, 44px); } .rp-offer2__body h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin: 4px 0 12px; } .rp-offer2__body > p { color: var(--rp-slate); margin: 0 0 18px; } .rp-offer2__panel { background: var(--rp-navy); color: #fff; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 14px; } .rp-offer2__label { font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #BFE3F5; margin: 0; } .rp-offer2__price { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2; margin: 0; color: #fff; } .rp-offer2__price .rp-provisional { display: inline-block; margin-top: 6px; } .rp-offer2__note { font-size: .9375rem; color: rgba(255, 255, 255, .85); margin: 0; } .rp-offer2__panel .rp-btn { align-self: flex-start; } @media (max-width: 860px) { .rp-offer2 { grid-template-columns: 1fr; } } /* Related / next-step cards */ .rp-related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } /* FAQ in split layout */ .rp-split .rp-faq { margin: 0 !important; max-width: none !important; } .rp-split .rp-faq details:first-child { border-top: 1px solid var(--rp-line); } /* Proof strip (case snippet on problem pages) */ .rp-proof { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 24px 28px; border-radius: var(--rp-card); border: 1px solid var(--rp-line); background: #fff; } .rp-proof__label { font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #155E88; margin: 0; white-space: nowrap; } .rp-proof__text { margin: 0; color: var(--rp-ink); } .rp-proof__text strong { color: var(--rp-navy); } @media (max-width: 760px) { .rp-proof { grid-template-columns: 1fr; gap: 10px; } } /* Warning signs list (P2) */ .rp-signs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; } .rp-signs li { position: relative; padding-left: 30px; line-height: 1.5; } .rp-signs li::before { content: "!"; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: #FDECEC; color: #A12C2C; font-weight: 700; font-size: .8125rem; display: flex; align-items: center; justify-content: center; } @media (max-width: 600px) { .rp-signs { grid-template-columns: 1fr; } } /* Two-column compare (included / not included; improve / rebuild) */ .rp-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .rp-compare__col { border-radius: var(--rp-card); padding: 26px; background: #fff; border: 1px solid var(--rp-line); } .rp-compare__col h3 { margin: 0 0 12px; font-size: 1.1875rem; } .rp-compare__col--muted { background: var(--rp-paper); } .rp-compare ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; } @media (max-width: 760px) { .rp-compare { grid-template-columns: 1fr; } } /* Offer overview (Kom godt i gang) */ .rp-offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .rp-offers__item { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 26px; border: 1px solid var(--rp-line); border-radius: var(--rp-card); background: #fff; } .rp-offers__item h3 { margin: 0; font-size: 1.25rem; } .rp-offers__item p { margin: 0; color: var(--rp-slate); } .rp-offers__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rp-line); padding-top: 14px; margin-top: 6px; } .rp-offers__price { font-weight: 700; color: var(--rp-navy); } .rp-offers__area { font-family: var(--rp-label); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #155E88; } @media (max-width: 760px) { .rp-offers { grid-template-columns: 1fr; } } /* Facts block (Om RocaPress: quotable facts) */ .rp-factlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; } .rp-factlist div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rp-line); } .rp-factlist dt { font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-slate); padding-top: 3px; } .rp-factlist dd { margin: 0; color: var(--rp-ink); } @media (max-width: 760px) { .rp-factlist { grid-template-columns: 1fr; } .rp-factlist div { grid-template-columns: 120px minmax(0, 1fr); } } .rp-textlink { color: var(--rp-sky-700); font-weight: 500; text-decoration: none; } .rp-textlink:hover { text-decoration: underline; text-underline-offset: 3px; } .rp-pull { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.45; color: var(--rp-navy); max-width: 36em; } /* B3 additions */ .rp-split .rp-factlist { grid-template-columns: 1fr; } .rp-split .rp-factlist div:first-child { border-top: 1px solid var(--rp-line); } .rp-card--case { border-color: var(--rp-navy); } .rp-card--case .rp-eyebrow { margin: 0; color: #155E88; } .rp-card--note { border-style: dashed; background: transparent; justify-content: center; } .rp-quote--wide { max-width: 820px; margin: 0 auto; text-align: center; background: none; border: 0; box-shadow: none; padding: 0; } .rp-quote--wide blockquote p { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.45; color: var(--rp-navy); } .rp-quote--wide figcaption { justify-content: center; } .rp-pagehero .rp-crumbs { text-align: center; position: relative; z-index: 1; } .rp-pagehero .rp-crumbs a, .rp-pagehero .rp-crumbs span { color: #3E4D5E; } .rp-split .rp-cards { grid-template-columns: 1fr; } .rp-tile .rp-tile__icon { margin-bottom: 14px; } /* rp-head sits on the 1200 content grid (left edge), not the viewport edge */ .rp-section > .rp-head:not(.rp-head--center), .rp-section > .wp-block-html > .rp-head:not(.rp-head--center) { margin-left: max(0px, calc((100% - 1200px) / 2)) !important; } .rp-offer2__unit { margin: -8px 0 0; font-size: .9375rem; color: #BFE3F5; } .rp-section--offer { border-top: 1px solid var(--rp-line); } /* ===================================================================== B3.2 (2026-09-29): header + masthead = one composition on every page type. Reference: the home hero (dark photo, navy overlay, white type). Principle, not one component: service = photo + navy duotone (centred) · people (Om) = warm photo, left-aligned with facts · editorial/action = navy field + arc motif. Header is transparent over all of them (rp-hero-dark), solid white after scroll / with menus open (unchanged, deterministic). ===================================================================== */ /* CTA colour system: context decides, not the button. Light surfaces → navy pill / navy outline. Dark surfaces (.rp-on-dark contexts) → white pill (navy text) / white outline. */ .rp-hero .rp-btn--navy, .rp-pagehero--photo .rp-btn--navy, .rp-masthead--people .rp-btn--navy, .rp-masthead--editorial .rp-btn--navy, .rp-masthead--action .rp-btn--navy, .rp-band .rp-btn--light, .rp-offer2__panel .rp-btn--navy { background: #fff; color: var(--rp-navy); border-color: #fff; } .rp-hero .rp-btn--navy:hover, .rp-pagehero--photo .rp-btn--navy:hover, .rp-masthead--people .rp-btn--navy:hover, .rp-masthead--editorial .rp-btn--navy:hover, .rp-masthead--action .rp-btn--navy:hover, .rp-band .rp-btn--light:hover { background: var(--rp-sky-50); color: var(--rp-navy); } .rp-pagehero--photo .rp-btn--outline, .rp-masthead--people .rp-btn--outline, .rp-masthead--editorial .rp-btn--outline { color: #fff; border-color: rgba(255, 255, 255, .85); background: transparent; } .rp-pagehero--photo .rp-btn--outline:hover, .rp-masthead--people .rp-btn--outline:hover, .rp-masthead--editorial .rp-btn--outline:hover { background: #fff; color: var(--rp-navy); } /* SERVICE mastheads: dark photographic duotone (was pale landscape) */ .rp-pagehero.rp-pagehero--photo { background: var(--rp-navy-900); color: #fff; padding-block: calc(var(--rp-header-h) + 32px + clamp(36px, 6vw, 80px)) clamp(64px, 8vw, 104px); } .rp-pagehero--photo::after { display: none !important; } .rp-pagehero--photo::before { background: radial-gradient(ellipse 58% 62% at 50% 56%, rgba(24, 35, 48, .55), rgba(24, 35, 48, 0) 100%), radial-gradient(900px 420px at 88% 0%, rgba(79, 171, 212, .22), transparent 65%), linear-gradient(180deg, rgba(24, 35, 48, .86) 0%, rgba(36, 51, 66, .70) 42%, rgba(24, 35, 48, .90) 100%) !important; } .rp-pagehero--photo .rp-media-bg { filter: grayscale(.35) contrast(1.05); } .rp-pagehero--photo h1 { color: #fff; text-shadow: 0 2px 24px rgba(20, 30, 40, .35); } .rp-pagehero--photo .rp-lead { color: rgba(255, 255, 255, .92); } .rp-pagehero--photo .rp-lead::after { background: var(--rp-sky); } .rp-pagehero--photo .rp-eyebrow { color: #BFE3F5 !important; } .rp-pagehero--photo .rp-facts-line, .rp-pagehero--photo .rp-facts-line.is-left { color: rgba(255, 255, 255, .86); } .rp-pagehero .rp-crumbs a, .rp-pagehero .rp-crumbs span, .rp-pagehero .rp-crumbs { color: rgba(255, 255, 255, .82); } .rp-pagehero .rp-crumbs a:hover { color: #fff; } /* EDITORIAL mastheads (Cases, Sådan arbejder vi, case): navy field, left-aligned, header integrated */ .rp-masthead--editorial { position: relative; overflow: hidden; border-bottom: 0; color: #fff; background: radial-gradient(900px 380px at 88% -10%, rgba(79, 171, 212, .26), transparent 65%), linear-gradient(160deg, #3b5570 0%, var(--rp-navy) 48%, var(--rp-navy-900) 100%); padding-block: calc(var(--rp-header-h) + 32px + clamp(28px, 5vw, 64px)) clamp(48px, 6vw, 80px); } .rp-masthead--editorial::after { content: ""; position: absolute; right: -110px; bottom: -170px; width: 400px; height: 400px; border-radius: 50%; border: 52px solid rgba(79, 171, 212, .10); pointer-events: none; } .rp-masthead--editorial > * { position: relative; z-index: 1; } .rp-masthead--editorial h1 { color: #fff; } .rp-masthead--editorial .rp-lead { color: rgba(255, 255, 255, .9); } .rp-masthead--editorial .rp-eyebrow { color: #BFE3F5 !important; } .rp-masthead--editorial .rp-crumbs, .rp-masthead--editorial .rp-crumbs a, .rp-masthead--editorial .rp-crumbs span { color: rgba(255, 255, 255, .8); } .rp-masthead--editorial .rp-case-meta { border-top-color: rgba(255, 255, 255, .2); } .rp-masthead--editorial .rp-case-meta li { color: #fff; border-right-color: rgba(255, 255, 255, .2); } .rp-masthead--editorial .rp-case-meta li span { color: #BFE3F5; } .rp-masthead--editorial .rp-result-card { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); box-shadow: none; } /* ACTION mastheads (Kontakt, intake, Kom godt i gang): header sits on the navy field */ .rp-masthead--action { padding-top: calc(var(--rp-header-h) + 32px + clamp(20px, 3vw, 40px)); } @media (max-width: 600px) { .rp-masthead--action { padding-top: calc(var(--rp-header-h) + 12px + 24px); } } /* PEOPLE masthead (Om RocaPress): warm photo, left-aligned story + fact card */ .rp-masthead--people { position: relative; overflow: hidden; color: #fff; background: var(--rp-navy-900); padding-block: calc(var(--rp-header-h) + 32px + clamp(40px, 7vw, 96px)) clamp(56px, 8vw, 104px); } .rp-masthead--people::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(24, 35, 48, .92) 0%, rgba(30, 44, 60, .80) 48%, rgba(36, 51, 66, .45) 100%), linear-gradient(180deg, rgba(24, 35, 48, .55) 0%, rgba(24, 35, 48, 0) 30%); } .rp-masthead--people .rp-media-bg { filter: saturate(.85); } .rp-people { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 88px); align-items: end; } .rp-people h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 6px 0 18px; } .rp-people .rp-eyebrow { color: #BFE3F5; } .rp-people .rp-lead { color: rgba(255, 255, 255, .92); max-width: 34em; margin: 0 0 14px; } .rp-people p { color: rgba(255, 255, 255, .86); max-width: 38em; } .rp-people .rp-crumbs, .rp-people .rp-crumbs a, .rp-people .rp-crumbs span { color: rgba(255, 255, 255, .8); } .rp-people__card { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--rp-card); padding: 24px 26px; } .rp-people__card dl { margin: 0; display: grid; gap: 12px; } .rp-people__card dt { font-family: var(--rp-label); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #BFE3F5; } .rp-people__card dd { margin: 2px 0 0; color: #fff; } .rp-people .rp-actions { margin-top: 26px; } @media (max-width: 900px) { .rp-people { grid-template-columns: 1fr; } .rp-masthead--people::before { background: linear-gradient(180deg, rgba(24, 35, 48, .88), rgba(30, 44, 60, .86)); } } /* CTA band: centred, balanced; white primary pill on navy */ .rp-band__inner { flex-direction: column; justify-content: center; text-align: center; gap: 22px; } .rp-band__text { flex: 0 1 auto; max-width: 40em; margin-inline: auto; } @media (min-width: 1200px) { .rp-band__inner { flex-wrap: wrap; } .rp-band__text { white-space: normal; } } /* Footer: left-aligned columns for scanning, brand column first; legal/NAP row centred on desktop */ .rp-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px 48px; } @media (max-width: 900px) { .rp-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .rp-footer__grid { grid-template-columns: 1fr; } } .rp-footer__brand img { width: 168px; height: auto; display: block; margin: 2px 0 14px; } .rp-footer__brand p { margin: 0 0 12px; color: #C3CAD2; max-width: 22em; line-height: 1.55; } .rp-footer__brand a { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; } .rp-footer__brand svg { width: 18px; height: 18px; } @media (min-width: 1200px) { .rp-footer ul.rp-facts__row { justify-content: center; } } /* Projects: full gallery (Cases) — 3 cols desktop, 2 tablet, compact 2-col grid on phones (no 18-card swipe row) */ .rp-projects--all .rp-projects__list { max-width: 1140px; } @media (max-width: 639px) { .rp-projects--all .rp-projects__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; gap: 12px; padding: 0; } .rp-projects--all .rp-project__meta { padding: 10px 10px 12px; } .rp-projects--all .rp-project__name { font-size: .875rem; } .rp-projects--all .rp-project__type { font-size: .75rem; } } .rp-projects__note { margin-top: 18px !important; font-size: .875rem; color: var(--rp-slate); text-align: center; } .rp-band__text { max-width: 52em; text-wrap: balance; } /* ===================================================================== B3.3 (2026-09-29): subject photography on mastheads, footer palette, CTA band L/R, case storytelling, single Drift service. "Avanceret – men aldrig kompliceret." ===================================================================== */ /* Editorial mastheads with photo (Cases, Sådan arbejder vi, case): left-weighted navy duotone */ .rp-masthead--editorial.rp-has-photo { background: var(--rp-navy-900); } .rp-masthead--editorial.rp-has-photo::after { display: none; } .rp-masthead--editorial.rp-has-photo::before { background: linear-gradient(90deg, rgba(24, 35, 48, .94) 0%, rgba(30, 44, 60, .84) 50%, rgba(36, 51, 66, .62) 100%), linear-gradient(180deg, rgba(24, 35, 48, .6) 0%, rgba(24, 35, 48, 0) 35%); } .rp-masthead--editorial.rp-has-photo .rp-media-bg { filter: grayscale(.35) contrast(1.05); } @media (max-width: 900px) { .rp-masthead--editorial.rp-has-photo::before { background: linear-gradient(180deg, rgba(24, 35, 48, .9), rgba(30, 44, 60, .88)); } } /* Footer: deep navy-slate (belongs to the navy overlays), not near-black */ .rp-footer__main, .rp-facts { background: #1D2B39; } .rp-facts { border-top-color: #2E3E4F; } .rp-facts__row > li:not(:last-child)::after { color: #55677A; } /* Footer CTA band: text left, button right on desktop; stacked + centred on mobile */ .rp-band__inner { flex-direction: row; justify-content: space-between; text-align: left; gap: 20px 48px; } .rp-band__text { flex: 1 1 auto; max-width: none; margin: 0; text-wrap: pretty; } @media (max-width: 860px) { .rp-band__inner { flex-direction: column; text-align: center; } .rp-band__text { text-wrap: balance; } } /* Case storytelling: numbered chapters on one red thread */ .rp-story { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; position: relative; } .rp-story::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, var(--rp-sky) 0%, var(--rp-line) 100%); } .rp-story__step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding-bottom: clamp(36px, 5vw, 56px); } .rp-story__step:last-child { padding-bottom: 0; } .rp-story__marker { width: 48px; height: 48px; border-radius: 50%; background: var(--rp-navy); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px #fff; position: relative; z-index: 1; } .rp-story__marker svg { width: 22px; height: 22px; } .rp-story__label { font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #155E88; margin: 10px 0 4px; } .rp-story__body h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin: 0 0 10px; } .rp-story__body p { margin: 0 0 12px; } .rp-story__list { margin: 0; padding-left: 20px; display: grid; gap: 8px; } .rp-story__note { font-size: .875rem; color: var(--rp-slate); margin-top: 10px !important; } .rp-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; } .rp-evidence__item { margin: 0 !important; padding: 16px 18px 16px 48px; border-radius: 12px; background: var(--rp-sky-50); color: var(--rp-navy); font-weight: 500; position: relative; line-height: 1.4; } .rp-evidence__item::before { content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%; background: var(--rp-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; } @media (max-width: 600px) { .rp-evidence { grid-template-columns: 1fr; } .rp-story__step { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; } .rp-story__marker { width: 40px; height: 40px; } .rp-story::before { left: 19px; } } .rp-diagram { margin: 22px 0 6px; padding: 18px; border: 1px solid var(--rp-line); border-radius: var(--rp-card); background: #fff; } .rp-diagram svg { width: 100%; height: auto; display: block; } .rp-diagram figcaption { font-size: .875rem; color: var(--rp-slate); margin-top: 10px; } /* Drift: one clear service card */ .rp-service { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); border-radius: 18px; overflow: hidden; border: 1px solid var(--rp-line); box-shadow: var(--rp-shadow); background: #fff; } .rp-service__main { padding: clamp(24px, 4vw, 44px); } .rp-service__main h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin: 4px 0 10px; } .rp-service__main > p { color: var(--rp-slate); margin: 0 0 20px; } .rp-service__cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; } .rp-service__label { font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rp-slate); margin: 0 0 10px; } .rp-service__not { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--rp-slate); } .rp-service__not li { position: relative; padding-left: 24px; } .rp-service__not li::before { content: "–"; position: absolute; left: 4px; color: var(--rp-slate); } .rp-service .rp-offer2__panel .rp-btn { align-self: flex-start; } .rp-service__hosting { margin-top: 16px !important; font-weight: 600; color: var(--rp-navy); } @media (max-width: 860px) { .rp-service { grid-template-columns: 1fr; } .rp-service__cols { grid-template-columns: 1fr; gap: 18px; } } .rp-masthead--editorial > .rp-media-bg { position: absolute !important; inset: 0; margin: 0 !important; max-width: none !important; width: 100% !important; height: 100% !important; z-index: -1; } .rp-masthead--editorial.rp-has-photo::before { z-index: 0; } /* Case diagram: SVG on wide screens, readable step list on phones */ .rp-flow { display: none; } @media (max-width: 640px) { .rp-diagram svg { display: none; } .rp-flow { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: f; } .rp-flow li { position: relative; padding: 12px 14px 12px 44px; border-radius: 10px; background: var(--rp-paper); font-size: .9375rem; line-height: 1.4; counter-increment: f; } .rp-flow li::before { content: counter(f); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--rp-navy); color: #fff; font-size: .75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .rp-flow__yes { background: var(--rp-sky-50) !important; } } /* Result card on photo mastheads: solid enough for AA regardless of the photo */ .rp-masthead--editorial .rp-result-card, .rp-people__card { background: rgba(22, 32, 44, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* B3.4 image system: masthead photos are pre-graded ("RocaPress grade", see docs/design/IMAGE-SYSTEM-v1.md) — no extra CSS filter */ .rp-pagehero--photo .rp-media-bg, .rp-masthead--editorial.rp-has-photo .rp-media-bg, .rp-masthead--people .rp-media-bg { filter: none; } /* ===================================================================== B3.5 refinement pass (2026-09-29): surfaces, trust moment, notes, forms, buttons, contact icons, nav, case components. Rules: docs/design/DESIGN-SYSTEM-v1.md §12. ===================================================================== */ :root { --rp-surface-a: #FFFFFF; /* A: default reading surface */ --rp-surface-b: #FAFAFA; /* B: neutral secondary (process, reference, galleries) */ --rp-surface-c: #F1F5F9; /* C: cool navy tint (trust moments, "samlet ét sted" groupings) */ --rp-surface-dark: #1D2B39; /* DARK: mastheads, footer, CTA band */ --rp-focus-field: 0 0 0 3px rgba(27, 117, 168, .18); } .rp-section--a { background: var(--rp-surface-a); } .rp-section--b { background: var(--rp-surface-b); } .rp-section--c { background: var(--rp-surface-c); } .rp-section--paper { background: var(--rp-surface-b); } /* Hairlines only between two sections on the same surface; a surface change is the separator. */ .rp-section--b.rp-section--line, .rp-section--c.rp-section--line, .rp-section--b + .rp-section--line, .rp-section--c + .rp-section--line { border-top: 0; } .rp-section--b + .rp-section--offer, .rp-section--c + .rp-section--offer { border-top: 0; } .rp-section--c .rp-card, .rp-section--b .rp-card { border-color: #E3E9EF; } /* Buttons: one state model everywhere (normal / hover / focus-visible / active). Never underlined. */ a.rp-btn, a.rp-btn:hover, a.rp-btn:focus, a.rp-btn:focus-visible, a.rp-btn:active, .rp-footer a.rp-btn:hover, .wp-block-button__link:hover { text-decoration: none !important; } .rp-btn:focus-visible { box-shadow: var(--rp-focus); border-radius: var(--rp-pill); } .rp-footer .rp-band a.rp-btn--light:hover, .rp-band a.rp-btn--light:hover { color: var(--rp-navy); } /* Notes & captions: small, quiet, always separated from the element above */ .rp-note, .rp-projects__note, .rp-story__note, figcaption.rp-note { margin: 20px auto 0 !important; max-width: 62ch; font-size: .875rem; line-height: 1.6; color: var(--rp-slate); text-align: center; } .rp-note--left { text-align: left; margin-left: 0 !important; } /* Forms: one clear focus (navy-blue border + soft ring), no double outline; UI font, sentence case */ .gform_wrapper.gform-theme input:not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]), .gform_wrapper.gform-theme textarea, .gform_wrapper.gform-theme select { font-family: inherit !important; } .gform_wrapper.gform-theme input:not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):focus, .gform_wrapper.gform-theme input:not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):focus-visible, .gform_wrapper.gform-theme textarea:focus, .gform_wrapper.gform-theme textarea:focus-visible, .gform_wrapper.gform-theme select:focus, .gform_wrapper.gform-theme select:focus-visible { outline: none !important; border-color: var(--rp-sky-700) !important; box-shadow: var(--rp-focus-field) !important; } .gform_wrapper.gform-theme input[type=radio]:focus-visible, .gform_wrapper.gform-theme input[type=checkbox]:focus-visible { outline: none !important; box-shadow: var(--rp-focus) !important; } .gform_wrapper.gform-theme .gfield_label, .gform_wrapper.gform-theme .gform-field-label, .gform_wrapper.gform-theme legend, .gform_wrapper.gform-theme .gfield_required, .gform_wrapper.gform-theme .gf_progressbar_title, .gform_wrapper.gform-theme .gform_page_footer, .gform_wrapper.gform-theme .gfield_description { font-family: var(--wp--preset--font-family--body, inherit) !important; text-transform: none !important; letter-spacing: normal !important; } .gform_wrapper.gform-theme .gfield_label, .gform_wrapper.gform-theme legend.gfield_label { font-weight: 600 !important; color: var(--rp-navy) !important; } .gform_wrapper.gform-theme .gfield_required { color: var(--rp-slate) !important; font-weight: 400 !important; font-size: .875rem !important; } /* Contact card: subtle line icons */ .rp-contact-lines { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; } .rp-contact-lines li { display: flex; align-items: center; gap: 12px; } .rp-contact-lines svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--rp-sky-700); } /* Header nav: never wrap a label; tighter at intermediate widths */ .rp-nav__item > a, .rp-nav__toggle, .rp-nav__item > .rp-link-soon { white-space: nowrap; } @media (max-width: 1280px) and (min-width: 1025px) { .rp-nav__list { gap: 18px; } .rp-nav__item > a, .rp-nav__toggle, .rp-nav__item > .rp-link-soon { letter-spacing: .1em; font-size: .78rem; } .rp-logo { width: 150px; } .rp-header__cta { padding-inline: 1.1em !important; } } /* Team (Om): two people, same weight, no portraits required */ .rp-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .rp-team__card { background: #fff; border: 1px solid var(--rp-line); border-radius: var(--rp-card); padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; } .rp-team__mono { width: 56px; height: 56px; border-radius: 50%; background: var(--rp-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--rp-label); font-weight: 600; letter-spacing: .06em; } .rp-team__card h3 { margin: 4px 0 4px; font-size: 1.25rem; } .rp-team__focus { margin: 0 0 10px; color: var(--rp-sky-700); font-weight: 600; font-size: .9375rem; } .rp-team__card p { margin: 0; color: var(--rp-ink); } @media (max-width: 760px) { .rp-team { grid-template-columns: 1fr; } } /* Capabilities: four grouped areas, short tag lists (not a CV) */ .rp-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; } .rp-caps > li { background: #fff; border: 1px solid #E3E9EF; border-radius: var(--rp-card); padding: 22px; display: flex; flex-direction: column; gap: 10px; } .rp-caps h3 { margin: 0; font-size: 1.0625rem; } .rp-caps h3 a { color: var(--rp-navy); text-decoration: none; } .rp-caps h3 a:hover { color: var(--rp-sky-700); } .rp-caps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .rp-caps ul li { font-size: .8125rem; line-height: 1.3; padding: 5px 10px; border-radius: 999px; background: var(--rp-surface-c); color: var(--rp-navy); } @media (max-width: 1024px) { .rp-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .rp-caps { grid-template-columns: 1fr; } } /* Case: relationship disclosure, status pills, stats, screenshots, pairs */ .rp-disclosure { max-width: 860px; margin: 0 auto; padding: 16px 20px 16px 52px; position: relative; border-radius: 12px; background: var(--rp-surface-c); color: var(--rp-ink); font-size: .9375rem; line-height: 1.55; } .rp-disclosure::before { content: "i"; position: absolute; left: 18px; top: 16px; width: 22px; height: 22px; border-radius: 50%; border: 1.75px solid var(--rp-sky-700); color: var(--rp-sky-700); font: 600 .8125rem/19px Georgia, serif; text-align: center; } .rp-disclosure strong { color: var(--rp-navy); } .rp-status { display: inline-block; font-family: var(--rp-label); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; line-height: 1.2; white-space: nowrap; vertical-align: middle; } .rp-status--built { background: #EEF1F4; color: #3E4D5E; } .rp-status--verified { background: #E3F2EA; color: #1F6443; } .rp-status--measured { background: var(--rp-navy); color: #fff; } .rp-status--early { background: transparent; color: #6B5A1E; border: 1px solid #C9B77A; } .rp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0 0 18px; padding: 0; font-size: .875rem; color: var(--rp-slate); } .rp-legend li { display: flex; align-items: center; gap: 8px; } .rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; list-style: none; margin: 8px 0 0; padding: 0; } .rp-stats li { background: #fff; border: 1px solid var(--rp-line); border-radius: 12px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 6px; } .rp-stats__num { font-size: clamp(1.625rem, 3vw, 2rem); font-weight: 700; line-height: 1.1; color: var(--rp-navy); letter-spacing: -.01em; } .rp-stats__text { font-size: .9375rem; line-height: 1.4; color: var(--rp-ink); flex: 1; } .rp-stats li .rp-status { align-self: flex-start; } .rp-shot { margin: 22px 0 6px; } .rp-shot__frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--rp-line); box-shadow: var(--rp-shadow); background: #fff; } .rp-shot__bar { display: flex; gap: 6px; padding: 9px 12px; background: #EEF1F4; border-bottom: 1px solid var(--rp-line); } .rp-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #C8D0D8; } .rp-shot img { display: block; width: 100%; height: auto; } .rp-shot--mobile { max-width: 260px; margin-inline: auto; } .rp-shot--mobile .rp-shot__frame { border-radius: 26px; border: 6px solid #22313F; } .rp-pair { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; align-items: start; margin-top: 18px; } .rp-pair .rp-shot { margin: 0; } .rp-pair .rp-flow--always { margin: 0; } @media (max-width: 700px) { .rp-pair { grid-template-columns: 1fr; } } .rp-flow--always { display: grid !important; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: f; } .rp-flow--always li { position: relative; padding: 12px 14px 12px 44px; border-radius: 10px; background: var(--rp-surface-b); border: 1px solid #EDF0F3; font-size: .9375rem; line-height: 1.45; counter-increment: f; } .rp-flow--always li::before { content: counter(f); position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--rp-navy); color: #fff; font-size: .75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; } .rp-story__lead { font-size: 1.0625rem; color: var(--rp-ink); } .rp-case-status { margin-top: 16px !important; font-size: .875rem; color: rgba(255,255,255,.8); } .rp-disclosure { margin-bottom: 22px; } .rp-legend { max-width: 860px; margin: 0 auto 28px; } @media (max-width: 600px) { .rp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-stats__num { font-size: 1.5rem; } .rp-stats__text { font-size: .875rem; } .rp-stats .rp-status { font-size: .625rem; letter-spacing: .06em; white-space: normal; } } /* Multi-step intake: step names in the UI font, sentence case (no uppercase) */ .gform_wrapper.gform-theme .gf_step_label, .gform_wrapper.gform-theme .gf_step_number { font-family: var(--wp--preset--font-family--body, inherit) !important; text-transform: none !important; letter-spacing: normal !important; } .gform_wrapper.gform-theme .gf_step_label { font-weight: 600 !important; font-size: .9375rem !important; } /* ===================================================================== B3.6 simplification pass (2026-09-29) ===================================================================== */ /* Testimonials: the approved 3-card component (surface B, centred heading + rule, white cards) */ .rp-quotes { gap: 24px; } .rp-quote { background: #fff; border: 1px solid #E6EBF0; border-radius: var(--rp-card); padding: 28px 26px; box-shadow: 0 1px 2px rgba(34, 49, 63, .04); display: flex; flex-direction: column; } .rp-quote blockquote { flex: 1; } .rp-quote p { font-size: 1rem; line-height: 1.6; color: var(--rp-ink); margin: 0 0 18px; } .rp-quote cite strong { font-size: .9375rem; margin-bottom: 2px; } @media (max-width: 860px) { .rp-quotes { grid-template-columns: 1fr; gap: 16px; } } /* Contact + intake: the action masthead carries a photo from the image family */ .rp-masthead--action.rp-has-photo { background: var(--rp-navy-900); } .rp-masthead--action.rp-has-photo::after { display: none; } .rp-masthead--action.rp-has-photo::before { background: linear-gradient(180deg, rgba(22, 32, 44, .86) 0%, rgba(26, 38, 52, .80) 55%, rgba(30, 44, 60, .88) 100%); } .rp-masthead--action > .rp-media-bg { position: absolute !important; inset: 0; z-index: -1; margin: 0 !important; } .rp-masthead--action.rp-has-photo .rp-media-bg { filter: none; } .rp-masthead--action.rp-has-photo { padding-bottom: calc(clamp(40px, 6vw, 72px) + 72px); } @media (max-width: 600px) { .rp-masthead--action.rp-has-photo { padding-bottom: 96px; } } /* CTA panel: one intentional component (text left, one button right) */ .rp-ctapanel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; background: var(--rp-surface-c); border: 1px solid #E3E9EF; border-radius: 18px; padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 48px); } .rp-ctapanel h2 { margin: 0 0 8px; font-size: clamp(1.375rem, 2.4vw, 1.75rem); } .rp-ctapanel p { margin: 0; color: var(--rp-slate); max-width: 46em; } .rp-ctapanel .rp-btn { white-space: nowrap; } @media (max-width: 760px) { .rp-ctapanel { grid-template-columns: 1fr; } .rp-ctapanel .rp-btn { justify-self: start; white-space: normal; } } /* Case: improvement themes + result cards (readable in ~2 seconds) */ .rp-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 14px 0 0; padding: 0; } .rp-themes li { background: var(--rp-surface-b); border: 1px solid #EDF0F3; border-radius: 12px; padding: 16px 18px; } .rp-themes h3 { margin: 0 0 4px; font-size: 1.0625rem; } .rp-themes p { margin: 0 !important; font-size: .9375rem; line-height: 1.5; color: var(--rp-ink); } @media (max-width: 600px) { .rp-themes { grid-template-columns: 1fr; } } .rp-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 16px 0 0; padding: 0; } .rp-results li { background: #fff; border: 1px solid var(--rp-line); border-radius: 14px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 6px; } .rp-results__num { font-size: clamp(1.75rem, 3.2vw, 2.25rem); font-weight: 700; line-height: 1; color: var(--rp-navy); letter-spacing: -.01em; } .rp-results__text { font-size: 1rem; line-height: 1.4; color: var(--rp-ink); font-weight: 500; } .rp-results__sub { font-size: .8125rem; line-height: 1.4; color: var(--rp-slate); } @media (max-width: 860px) { .rp-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .rp-results { grid-template-columns: 1fr; gap: 10px; } .rp-results li { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: baseline; padding: 16px; } .rp-results__num { font-size: 1.625rem; grid-row: span 2; } } /* B3.7 (2026-09-29): single testimonial = open treatment (no card) on surface B; the 3-card component is unchanged */ .rp-quote.rp-quote--wide { background: none; border: 0; box-shadow: none; padding: 0; max-width: 820px; margin: 0 auto; text-align: center; display: block; } .rp-quote.rp-quote--wide blockquote p { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.45; color: var(--rp-navy); margin: 0 0 18px; } .rp-quote.rp-quote--wide cite strong { display: block; margin-bottom: 4px; } /* B3.7: photo service heroes fill the first screen like the home hero, so the next (white) section never peeks in below the hero. Content stays vertically centred; the image/overlay already cover the full section. */ .rp-pagehero.rp-pagehero--photo { min-height: min(100vh, 1100px); min-height: min(100svh, 1100px); display: flex; flex-direction: column; justify-content: center; } /* Same rule for the home hero (was capped at 860–960px, which left a thin white band on tall screens) */ .rp-hero.rp-hero--photo { min-height: min(100vh, 1100px); min-height: min(100svh, 1100px); } /* B3.5 (2026-09-30): service hero content is centred in the space BELOW the integrated header and never crowds the bottom edge. Cause fixed: long H1s were capped at 820px (3 lines) and spacing ignored viewport height, so tall content filled the screen. */ .rp-pagehero.rp-pagehero--photo { padding-block: calc(var(--rp-header-h) + 32px + clamp(24px, 6vh, 72px)) clamp(48px, 8vh, 96px); } @media (min-width: 1025px) { .rp-pagehero--photo > h1, .rp-pagehero--photo > .wp-block-heading { max-width: 1000px; } } @media (min-width: 1025px) and (max-height: 820px) { .rp-pagehero--photo .rp-lead::after { margin-top: 16px; } .rp-pagehero--photo .rp-actions { margin-top: 18px; margin-bottom: 12px; } } /* ========================================================================== B3.5 follow-up — stable mega menu: a layer below a geometrically fixed header The header never changes size when Ydelser opens (see size rules above: is-solid only). The panel is an absolutely positioned layer (no document flow), revealed with opacity + 6px. Closed = visibility:hidden → links are not focusable/tabbable. ========================================================================== */ .rp-mega { visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .rp-mega.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .18s ease, transform .18s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .rp-mega, .rp-mega.is-open { transition: none; transform: none; } } /* ========================================================================== B3.5 — Viden: editorial article template + archive (DESIGN-SYSTEM §13) One reading column (~720px), strong type, no sidebar. Masthead is light (paper), not photographic. ========================================================================== */ .rp-masthead--article { background: var(--rp-paper); border-bottom: 1px solid var(--rp-line); padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px); } .rp-article__head { max-width: 760px; margin-inline: auto !important; } .rp-masthead--article .rp-eyebrow { color: #155E88; margin: 0 0 8px; } .rp-masthead--article h1 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); line-height: 1.14; margin: 0 0 16px; letter-spacing: -.01em; } .rp-masthead--article .rp-lead { color: #3E4D5E; margin: 0 0 22px; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); } .rp-byline { margin: 0; font-size: .9375rem; color: var(--rp-slate); border-top: 1px solid var(--rp-line); padding-top: 14px; } .rp-byline a { color: var(--rp-navy); font-weight: 600; } .rp-article { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); } .rp-article__body { max-width: 720px; margin-inline: auto !important; font-size: 1.0625rem; line-height: 1.7; color: var(--rp-ink); } .rp-article__body > * + * { margin-top: 1.1em; } .rp-article__body h2 { font-size: clamp(1.375rem, 2.4vw, 1.625rem); line-height: 1.25; margin: 2.2em 0 .6em; scroll-margin-top: calc(var(--rp-header-h) + 24px); } .rp-article__body h3 { font-size: 1.1875rem; margin: 1.6em 0 .4em; } .rp-article__body ul { padding-left: 1.2em; } .rp-article__body li + li { margin-top: .45em; } .rp-article__body p { margin-block: 0; } .rp-article__body p + p { margin-top: 1em; } .rp-answer { background: var(--rp-surface-c); border-left: 3px solid var(--rp-navy); border-radius: 0 12px 12px 0; padding: 20px 24px; margin: 0 0 8px; } .rp-answer__label, .rp-experience__label { margin: 0 0 6px !important; font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #155E88; } .rp-answer p:last-child { margin: 0; font-size: 1.0625rem; } .rp-experience { margin: 2.2em 0 !important; padding: 4px 0 4px 22px; border-left: 3px solid var(--rp-sky); } .rp-experience p:last-child { font-size: 1.125rem; line-height: 1.6; color: var(--rp-navy); margin: 0; } .rp-diagnose { margin-top: 2.4em !important; background: var(--rp-surface-b); border: 1px solid #EAEEF2; border-radius: 14px; padding: 8px 24px 20px; } .rp-diagnose h2 { margin-top: 1em !important; } .rp-diagnose__list { list-style: none; padding: 0 !important; margin: 0; } .rp-diagnose__list li { position: relative; padding-left: 30px; } .rp-diagnose__list li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 14px; height: 14px; border: 2px solid var(--rp-sky-700); border-radius: 4px; } .rp-article__faq { margin-top: 2em !important; } .rp-article__cta { margin-top: 2.6em !important; grid-template-columns: 1fr; gap: 18px; } .rp-article__cta .rp-btn { justify-self: start; white-space: normal; } .rp-author { margin-top: 2em !important; padding-top: 20px; border-top: 1px solid var(--rp-line); font-size: .9375rem; color: var(--rp-slate); } .rp-author__name { margin: 0 0 4px !important; font-weight: 700; color: var(--rp-navy); } .rp-author p { margin: 0; } .rp-readmore { max-width: 1000px; margin-inline: auto !important; } .rp-readmore h2 { font-size: 1.375rem; margin: 0 0 18px; } .rp-readmore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .rp-readmore__item { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #E6EAEE; border-radius: 14px; padding: 20px; text-decoration: none; color: var(--rp-ink); transition: border-color .15s ease, box-shadow .15s ease; } .rp-readmore__item:hover { border-color: var(--rp-sky-700); box-shadow: var(--rp-shadow); } .rp-readmore__item:focus-visible { outline: none; box-shadow: var(--rp-focus); } .rp-readmore__topic { font-family: var(--rp-label); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #155E88; } .rp-readmore__title { font-weight: 600; line-height: 1.35; color: var(--rp-navy); } .rp-readmore__item--service { background: var(--rp-surface-c); } @media (max-width: 800px) { .rp-readmore__grid { grid-template-columns: 1fr; } } .rp-viden-list { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 7vw, 96px); } .rp-viden { list-style: none; margin: 0 auto !important; padding: 0; max-width: 1200px; } .rp-viden__item { border-bottom: 1px solid var(--rp-line); } .rp-viden__item a { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 40px; row-gap: 6px; padding: 28px 0; text-decoration: none; color: var(--rp-ink); } .rp-viden__topic { grid-row: 1 / span 3; font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #155E88; padding-top: 6px; } .rp-viden__title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.25; color: var(--rp-navy); max-width: 34em; } .rp-viden__item a:hover .rp-viden__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .rp-viden__item a:focus-visible { outline: none; box-shadow: var(--rp-focus); border-radius: 6px; } .rp-viden__deck { color: #3E4D5E; max-width: 44em; } .rp-viden__meta { font-size: .875rem; color: var(--rp-slate); } @media (max-width: 700px) { .rp-viden__item a { grid-template-columns: 1fr; padding: 22px 0; } .rp-viden__topic { grid-row: auto; padding-top: 0; } } /* ========================================================================== B3.5 follow-up — proof architecture: Udtalelser page + proof navigation (Cases hub) ========================================================================== */ .rp-quotes--page { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; margin-inline: auto !important; } @media (max-width: 800px) { .rp-quotes--page { grid-template-columns: 1fr; } } .rp-quote--full blockquote p { font-size: 1.0625rem; line-height: 1.65; } .rp-quote__meta { display: block; margin-top: 6px; font-size: .8125rem; color: var(--rp-slate); } .rp-quotes--page + .rp-note { max-width: 1080px; margin-inline: auto !important; text-align: center; } .rp-quotes__more { margin-top: 28px !important; } .rp-proofnav { list-style: none; margin: 0 auto !important; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .rp-proofnav--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rp-proofnav a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 22px; background: #fff; border: 1px solid #E3E9EF; border-radius: 14px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; } .rp-proofnav a:hover { border-color: var(--rp-sky-700); box-shadow: var(--rp-shadow); } .rp-proofnav a:focus-visible { outline: none; box-shadow: var(--rp-focus); } .rp-proofnav__k { font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #155E88; } .rp-proofnav__t { color: var(--rp-navy); font-weight: 600; line-height: 1.35; } .rp-section--proofnav { padding-block: 28px !important; background: var(--rp-surface-c); } @media (max-width: 800px) { .rp-proofnav, .rp-proofnav--3 { grid-template-columns: 1fr; } } .rp-article__cta h2 { margin-top: 0 !important; } .rp-viden__title { margin: 0 !important; } .rp-viden-link { margin-top: 24px !important; } /* ========================================================================== B3.5 refinement — Udtalelser (dedicated page): compact opening + portrait/quote rows Concept from the old site (portrait beside a longer quote, alternating), modernised: white, hairlines, no bubbles, no shadows. DOM order is always person → quote; the desktop flip is visual only, and mobile stacks naturally. ========================================================================== */ .rp-section--pagehead { padding-block: clamp(32px, 5vw, 56px) 8px !important; } .rp-pagehead { max-width: 1080px; margin-inline: auto !important; } .rp-pagehead h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.12; margin: 4px 0 12px; } .rp-pagehead .rp-lead { margin: 0; color: #3E4D5E; max-width: 40em; } .rp-section--voices { padding-block: clamp(24px, 4vw, 40px) clamp(56px, 7vw, 96px) !important; } .rp-voices { max-width: 1080px; margin-inline: auto !important; } .rp-voice { display: grid; grid-template-columns: minmax(0, 23fr) minmax(0, 77fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin: 0; padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid var(--rp-line); } .rp-voice:first-child { border-top: 0; } .rp-voice--flip { grid-template-columns: minmax(0, 77fr) minmax(0, 23fr); } .rp-voice--flip .rp-voice__person { order: 2; } .rp-voice__person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .rp-voice__person img { width: 132px; height: 132px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--rp-surface-c); display: block; } .rp-voice__who cite { font-style: normal; display: flex; flex-direction: column; gap: 2px; } .rp-voice__who strong { color: var(--rp-navy); font-size: 1.0625rem; } .rp-voice__who cite span { color: var(--rp-slate); font-size: .9375rem; } .rp-voice__work { display: block; margin-top: 6px; font-size: .8125rem; color: var(--rp-slate); } .rp-voice__quote { margin: 0; padding: 0; border: 0; } .rp-voice__quote p { margin: 0; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.65; color: var(--rp-ink); max-width: 44em; } .rp-voices__note { max-width: 1080px; margin: 8px auto 0 !important; } @media (max-width: 760px) { .rp-voice, .rp-voice--flip { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; } .rp-voice--flip .rp-voice__person { order: 0; } .rp-voice__person { flex-direction: row; text-align: left; align-items: center; gap: 16px; } .rp-voice__person img { width: 72px; height: 72px; flex: 0 0 72px; } } /* ========================================================================== B3.5 refinement — Viden discovery: filter nav + results (progressively enhanced, see site.js) ========================================================================== */ .rp-viden-hub { max-width: 1200px; margin-inline: auto !important; } .rp-viden-filter ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .rp-viden-filter a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid #C9D3DD; border-radius: var(--rp-pill); font-family: var(--rp-label); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rp-navy); text-decoration: none; background: #fff; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .rp-viden-filter a:hover { border-color: var(--rp-navy); } .rp-viden-filter a:focus-visible { outline: none; box-shadow: var(--rp-focus); } .rp-viden-filter a[aria-current="true"] { background: var(--rp-navy); border-color: var(--rp-navy); color: #fff; } .rp-viden-filter__n { font-size: .6875rem; opacity: .7; letter-spacing: 0; } .rp-viden-status { margin: 18px 0 0 !important; font-size: .875rem; color: var(--rp-slate); } .rp-viden-results { transition: opacity .18s ease; } .rp-viden-results.is-entering { opacity: .35; } .rp-viden-hub[aria-busy="true"] .rp-viden-results { opacity: .6; } .rp-viden-more { margin: 32px 0 0 !important; text-align: center; } @media (prefers-reduced-motion: reduce) { .rp-viden-results { transition: none; } } @media (max-width: 600px) { .rp-viden-filter ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; margin-inline: calc(-1 * var(--rp-gutter)); padding-inline: var(--rp-gutter); scrollbar-width: none; } .rp-viden-filter a { white-space: nowrap; } } /* B3.5 refinement: footer CTA band — text left, button right on desktop (all pages, incl. long Viden text); stacks ≤860px. */ @media (min-width: 861px) { .rp-band__inner { flex-wrap: nowrap; } .rp-band__text { flex: 1 1 0; min-width: 0; } .rp-band .rp-btn { flex: 0 0 auto; white-space: nowrap; } } /* B5 rehearsal (Lighthouse CLS 0.35 on the intake): Gravity Forms' AJAX mode renders the wrapper display:none until its JS runs, so the form "arrives" and pushes the footer. Keep the layout box (invisible) instead → no layout shift. Page 1 of both forms has no conditional fields, so nothing can flash; GF still reveals the form when ready. */ .rp-form-card .gform_wrapper[style*="display:none"], .rp-form-card .gform_wrapper[style*="display: none"] { display: block !important; visibility: hidden; } .rp-form-privacy { margin: 14px 0 0 !important; font-size: .8125rem; color: var(--rp-slate); } .rp-legacy-note { background: #FFF8E5; border: 1px solid #F0DDA8; border-radius: 10px; padding: 12px 16px; font-size: .9375rem; color: #5C4600; } .rp-voice__mono { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; background: var(--rp-surface-c); color: var(--rp-navy); font-weight: 700; font-size: 2rem; letter-spacing: .04em; } @media (max-width: 760px) { .rp-voice__mono { width: 72px; height: 72px; flex: 0 0 72px; font-size: 1.25rem; } } /* ========================================================================== Final pre-launch refinement (2026-09-30): five-card stack, principle callout, compare icons, legal masthead ========================================================================== */ /* Five cards: 3 + 2 on desktop (the two last cards share the row), 2 + 2 + 1 on tablet, stacked on mobile. */ .rp-cards--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .rp-cards--5 > li { grid-column: span 2; } .rp-cards--5 > li:nth-child(n+4) { grid-column: span 3; } @media (max-width: 1000px) { .rp-cards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-cards--5 > li, .rp-cards--5 > li:nth-child(n+4) { grid-column: auto; } .rp-cards--5 > li:last-child { grid-column: 1 / -1; } } @media (max-width: 640px) { .rp-cards--5 { grid-template-columns: 1fr; } } /* Principle callout (e.g. "Måling først"): explanation left, the principle + a 3-step flow in a white card right. */ .rp-principle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .rp-principle__text h2 { margin: 0 0 14px; } .rp-principle__text p { margin: 0 0 16px; color: #3E4D5E; } .rp-principle__text p:last-child { margin-bottom: 0; } .rp-principle__card { background: #fff; border: 1px solid var(--rp-line); border-radius: var(--rp-card); box-shadow: var(--rp-shadow); padding: clamp(24px, 3.2vw, 36px); } .rp-principle__pull { margin: 0 0 22px; padding-left: 18px; border-left: 3px solid var(--rp-blue, #4FABD4); font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.45; color: var(--rp-navy); font-weight: 500; } .rp-principle__flow { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--rp-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: none; } .rp-principle__flow li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 600; color: var(--rp-navy); line-height: 1.3; position: relative; } .rp-principle__flow li span { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #EEF6FB; color: #155E88; font-size: .8125rem; font-weight: 700; } @media (max-width: 860px) { .rp-principle { grid-template-columns: 1fr; } } @media (max-width: 480px) { .rp-principle__flow { grid-template-columns: 1fr; } } /* Compare cards with a leading line icon (AI: good / not good candidates). */ .rp-compare__col .rp-compare__icon { margin-bottom: 14px; } .rp-compare__col--muted .rp-compare__icon { background: #fff; } /* Legal pages (Privatlivspolitik): the light article masthead, aligned with the reading column; no photo. */ .rp-masthead--legal .rp-article__head { max-width: 720px; } .rp-masthead--legal .rp-lead { margin-bottom: 0; } .rp-masthead--legal + .rp-article .rp-article__body > p:first-child { margin-top: 0; }