/* * ========================================================== * S2B_INTERIOR_CANON_20260921 * * Centrale visuele taal voor publieke interieurpagina's. * * Basis: * - Business Pro navy/teal hero * - Ship2Buy goud * - grote subtiele cirkel * - rustige witte content * - consistente afronding * ========================================================== */ body.s2b-interior { --s2bi-navy-deep: #0c263a; --s2bi-navy: #11334d; --s2bi-blue: #124b68; --s2bi-teal: #0d6670; --s2bi-gold: #dfb33f; --s2bi-gold-soft: #efd276; --s2bi-text: #1e3247; --s2bi-muted: #667587; --s2bi-border: #dde4ea; --s2bi-soft: #f7f9fb; --s2bi-radius-hero: 28px; --s2bi-radius-card: 20px; } /* * ---------------------------------------------------------- * 8px lucht tussen Uitgelicht en de pagina-inhoud. * ---------------------------------------------------------- */ body.s2b-interior .s2b-section--featured { margin-bottom: 8px !important; } /* * ---------------------------------------------------------- * CENTRALE HERO * ---------------------------------------------------------- */ body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ), body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"]), body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"]) { position: relative !important; isolation: isolate; width: 100%; max-width: 1100px; overflow: hidden !important; margin: 8px auto 20px !important; padding: clamp(28px, 4vw, 44px) clamp(25px, 5vw, 48px) !important; box-sizing: border-box; border: 1px solid rgba(223,179,63,.24) !important; border-radius: var(--s2bi-radius-hero) !important; background: linear-gradient( 118deg, var(--s2bi-navy-deep) 0%, var(--s2bi-navy) 42%, var(--s2bi-blue) 72%, var(--s2bi-teal) 100% ) !important; color: #fff !important; box-shadow: inset 8px 0 0 var(--s2bi-gold), 0 18px 42px rgba(12,38,58,.14) !important; } /* * ---------------------------------------------------------- * Grote subtiele Ship2Buy cirkel. * ---------------------------------------------------------- */ body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero )::after, body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"])::after, body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"])::after { content: ""; position: absolute; z-index: 0; width: 520px; height: 520px; top: 50%; right: -185px; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.10); border-radius: 50%; box-shadow: 0 0 0 72px rgba(255,255,255,.025), 0 0 0 145px rgba(255,255,255,.012); pointer-events: none; } /* * Content boven de cirkel houden. */ body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ) > *, body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"]) > *, body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"]) > * { position: relative; z-index: 1; } /* * Hero titels. */ body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ) :is(h1,h2), body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"]) :is(h1,h2), body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"]) :is(h1,h2) { margin-top: 0; color: #fff !important; font-weight: 900 !important; letter-spacing: -.035em; } /* * Hero tekst. */ body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ) p, body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"]) p, body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"]) p { max-width: 790px; color: rgba(255,255,255,.82) !important; line-height: 1.55; } /* * Kleine gouden labels boven de titel. */ body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ) :is( [class*="eyebrow"], [class*="kicker"], small ) { color: var(--s2bi-gold) !important; font-weight: 900 !important; letter-spacing: .10em; text-transform: uppercase; } /* * ---------------------------------------------------------- * ALGEMENE KAARTFAMILIE * Alleen standaard Drupal/Bootstrap cards. * ---------------------------------------------------------- */ body.s2b-interior .region-content .card { border: 1px solid var(--s2bi-border); border-radius: var(--s2bi-radius-card); background: #fff; box-shadow: 0 8px 26px rgba(15,35,55,.055); } /* * Formvelden dezelfde afronding. */ body.s2b-interior .region-content :is( input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], select, textarea ) { border-radius: 14px; } /* * Normale knoppen dezelfde vorm. * Functionele kleuren blijven van de pagina zelf. */ body.s2b-interior .region-content :is( .btn, .button, button, input[type="submit"] ) { border-radius: 14px; } /* * ---------------------------------------------------------- * MOBIELE CANON * ---------------------------------------------------------- */ @media (max-width: 767.98px) { body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ), body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"]), body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"]) { margin: 8px 0 16px !important; padding: 27px 24px 30px !important; border-radius: 24px !important; box-shadow: inset 6px 0 0 var(--s2bi-gold), 0 14px 32px rgba(12,38,58,.12) !important; } body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero )::after, body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"])::after, body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"])::after { width: 390px; height: 390px; right: -205px; box-shadow: 0 0 0 55px rgba(255,255,255,.024), 0 0 0 110px rgba(255,255,255,.011); } body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ) :is(h1,h2), body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"]) :is(h1,h2), body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"]) :is(h1,h2) { font-size: clamp(30px,8.5vw,42px) !important; line-height: 1.08 !important; } } /* /S2B_INTERIOR_CANON_20260921 */ /* * ========================================================== * S2B_INTERIOR_CANON_CONFLICT_RESET_20260921 * * Definitieve conflictlaag voor de centrale interieurcanon. * * 1. Oude hero-::after decoraties mogen hun achtergrond/ * left/bottom niet meenemen in de centrale grote cirkel. * * 2. Eyebrows/kickers worden overal hetzelfde: * goud, vlak, zonder pill/capsule. * * 3. Effectieve ruimte na Uitgelicht = circa 8px: * slider 8px onderruimte, hero géén extra bovenmarge. * ========================================================== */ /* * ---------------------------------------------------------- * 1. CENTRALE CIRKEL — oude pseudo-elementen volledig resetten. * ---------------------------------------------------------- */ body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero )::after, body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"])::after, body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"])::after { background: transparent !important; background-image: none !important; left: auto !important; bottom: auto !important; border-radius: 50% !important; } /* * ---------------------------------------------------------- * 2. EYEBROW / KICKER — één Ship2Buy-stijl. * * Geen capsule meer bij bijvoorbeeld Mijn wijzigingen. * ---------------------------------------------------------- */ body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ) :is( [class*="eyebrow"], [class*="kicker"] ), body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"]) :is( [class*="eyebrow"], [class*="kicker"] ), body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"]) :is( [class*="eyebrow"], [class*="kicker"] ) { display: block !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--s2bi-gold) !important; font-weight: 900 !important; line-height: 1.2 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } /* * ---------------------------------------------------------- * 3. EXACT 8PX VISUELE RUIMTE NA UITGELICHT. * * De slider levert de 8px. * De daaropvolgende hero voegt zelf geen extra top-gap toe. * ---------------------------------------------------------- */ body.s2b-interior .s2b-section--featured { margin-bottom: 8px !important; } body.s2b-interior :is( .s2b-user-overview-hero, .s2b-user-detail-hero, .s2b-directory-hero, .s2b-company-hero, .s2b-newsletter-page__hero, .s2b-upload-hero, .s2b-choice-hero, .s2b-tech-correct__hero, .s2b-selected-menu__hero, .s2b-mutation-choice-hero, .s2b-owner-choice__hero, .s2b-mutation-hero, .s2b-history-correction-hero ), body.s2b-interior section[class*="s2b-"][class*="hero"]:not([class*="__"]), body.s2b-interior div[class*="s2b-"][class*="hero"]:not([class*="__"]) { margin-top: 0 !important; } /* * Oude route-specifieke 10px regels hebben hogere specificity. * Daarom deze drie expliciete canon-overrides. */ body.s2b-interior.path-mijn-organisaties .s2b-org-hero, body.s2b-interior.path-mijn-organisaties .s2b-org-edit-hero, body.s2b-interior #s2b-profiles-my-notifications-form .s2b-shipconn-hero { margin-top: 0 !important; } /* /S2B_INTERIOR_CANON_CONFLICT_RESET_20260921 */