/* ========================================================================== Nadeshicon 2026: design layer over Route + WPBakery Language: kawaii-retro, taken from the 2026 key art (pink grid, retro OS windows). Rules: one accent (pink), lavender as ink; buttons are pills, windows/cards 18px, inner images 12px; one hard "sticker" shadow lit from the top-left. Printed last in so it wins over Route's inline customizer CSS. ========================================================================== */ :root { --n26-ink: #2a2540; --n26-ink-2: #3f3f65; --n26-lav: #57557e; --n26-lav-200: #d9d6ee; --n26-lav-100: #eeecf8; --n26-pink: #e51978; --n26-pink-600: #c8156a; --n26-pink-300: #f59ac4; --n26-pink-200: #ffbfdf; --n26-pink-100: #ffe6f2; --n26-paper: #fff7fb; --n26-white: #fffdfe; --n26-font-display: "Unbounded", "Arial Black", system-ui, sans-serif; --n26-font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --n26-r-pill: 999px; --n26-r-card: 18px; --n26-r-inner: 12px; --n26-border: 2px solid var(--n26-ink); --n26-shadow: 5px 5px 0 var(--n26-ink); --n26-shadow-lift: 8px 8px 0 var(--n26-ink); --n26-shadow-press: 1px 1px 0 var(--n26-ink); --n26-ease: cubic-bezier(0.16, 1, 0.3, 1); --n26-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --n26-grid: linear-gradient(rgba(255, 255, 255, 0.55) 2px, transparent 2px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(255, 255, 255, 0.55) 2px, transparent 2px) 0 0 / 44px 44px, var(--n26-pink-300); /* z-index scale */ --n26-z-petals: 1; --n26-z-raised: 2; --n26-z-header: 100; } /* ---------- Base ---------------------------------------------------------- */ body.n26, body.n26.custom-background { background: var(--n26-paper); color: var(--n26-ink); font-family: var(--n26-font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .n26 p, .n26 li, .n26 td, .n26 input, .n26 select, .n26 textarea, .n26 button { font-family: var(--n26-font-body); } .n26 h1, .n26 h2, .n26 h3, .n26 h4, .n26 h5, .n26 h6, .n26 .cs-bold, .n26 .cs-extra-bold { font-family: var(--n26-font-display); color: var(--n26-ink); letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; } .n26 h1 { font-weight: 800; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); } .n26 h2 { font-weight: 700; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); } .n26 h3 { font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); } .n26 h4, .n26 h5, .n26 h6 { font-weight: 600; font-size: 1.05rem; letter-spacing: 0; } .n26 p { text-wrap: pretty; } .n26 a { color: var(--n26-pink-600); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 0.2s var(--n26-ease), background-color 0.2s var(--n26-ease); } .n26 a:hover { color: var(--n26-ink); } .n26 ::selection { background: var(--n26-pink-200); color: var(--n26-ink); } .n26 :focus-visible { outline: 3px solid var(--n26-pink); outline-offset: 3px; border-radius: 6px; } .n26 hr { border: 0; height: 2px; background: var(--n26-lav-200); margin: 1.5em 0; } html { scroll-behavior: smooth; } /* ---------- Top bar -------------------------------------------------------- */ .n26 #top-bar { background: var(--n26-ink); border: 0; color: var(--n26-lav-200); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; } .n26 #top-bar a, .n26 #top-bar .cs-in { color: var(--n26-white); } .n26 #top-bar a:hover { color: var(--n26-pink-300); } .n26 #top-bar .cs-top-module { border-color: rgba(255, 255, 255, 0.12); } .n26 #top-bar .cs-module-social a { transition: transform 0.25s var(--n26-spring), color 0.2s; } .n26 #top-bar .cs-module-social a:hover { transform: translateY(-2px) scale(1.12); } /* ---------- Header --------------------------------------------------------- */ /* backdrop-filter makes the header a stacking context; without an explicit z-index it sits at level 0 and the positioned hero / tiles / page-header painted over its dropdowns */ /* Route's sticky state keeps its own `position: fixed !important; z-index: 999` */ .n26 #masthead:not(.is-sticky) { position: relative; z-index: var(--n26-z-header); } .n26 #navigation-mobile { position: relative; z-index: calc(var(--n26-z-header) - 1); } .n26 #masthead { background: rgba(255, 247, 251, 0.86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: var(--n26-border); box-shadow: none; transition: box-shadow 0.3s var(--n26-ease), background-color 0.3s; } .n26 #masthead.is-sticky { box-shadow: 0 5px 0 rgba(42, 37, 64, 0.12); } .n26 #site-header-shadow { display: none; } .n26 #site-logo img { transition: transform 0.4s var(--n26-spring); } .n26 #site-logo a:hover img { transform: rotate(-3deg) scale(1.04); } .n26 #site-nav .cs-link, .n26 #site-nav > ul > li, .n26 #site-nav .current-menu-item > .cs-link { background: transparent; color: var(--n26-ink); } .n26 #site-nav .cs-link-depth-0 { font-family: var(--n26-font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; } .n26 #site-nav .cs-depth-0 > .cs-link { position: relative; padding-left: 14px; padding-right: 14px; } /* hover / current: a pink pill behind the label */ .n26 #site-nav .cs-depth-0 > .cs-link::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 38px; transform: translateY(-50%) scale(0.85); border-radius: var(--n26-r-pill); background: var(--n26-pink-100); opacity: 0; z-index: -1; transition: opacity 0.2s var(--n26-ease), transform 0.3s var(--n26-spring); } .n26 #site-nav .cs-depth-0:hover > .cs-link::before, .n26 #site-nav .cs-depth-0.current-menu-item > .cs-link::before, .n26 #site-nav .cs-depth-0.current-menu-ancestor > .cs-link::before { opacity: 1; transform: translateY(-50%) scale(1); } .n26 #site-nav .cs-depth-0:hover > .cs-link, .n26 #site-nav .cs-depth-0.current-menu-item > .cs-link { color: var(--n26-pink-600); } /* Route's "menu effect 7" paints every hovered item with a solid rectangle on the link itself (customizer #ffbfdf) and forces `color: #fff !important`: white on light pink (~1.6:1), and it covered both the pill hover and the Billetterie button. Switch that paint off. */ .n26.cs-menu-effect-7 #site-nav .cs-depth-0:hover .cs-link-depth-0, .n26.cs-menu-effect-7 #site-nav .cs-depth-0 .cs-link-depth-0:focus-visible { background-color: transparent !important; color: var(--n26-pink-600) !important; } .n26 #site-nav .cs-depth-0 > .cs-link:focus-visible::before { opacity: 1; transform: translateY(-50%) scale(1); } /* the one header CTA: Billetterie */ .n26 #site-nav .cs-depth-0 > a[href*="/prevente/"] { color: var(--n26-white); } .n26.cs-menu-effect-7 #site-nav .cs-depth-0:hover > a[href*="/prevente/"], .n26.cs-menu-effect-7 #site-nav .cs-depth-0 > a[href*="/prevente/"]:focus-visible { color: var(--n26-white) !important; } .n26 #site-nav .cs-depth-0 > a[href*="/prevente/"]:focus-visible::before, .n26 #site-nav .cs-depth-0:hover > a[href*="/prevente/"]::before { background: var(--n26-ink); } .n26 #site-nav .cs-depth-0 > a[href*="/prevente/"]:active::before { transform: translate(2px, calc(-50% + 2px)); box-shadow: 1px 1px 0 var(--n26-ink); } .n26 #site-nav .cs-depth-0 > a[href*="/prevente/"]::before { opacity: 1; transform: translateY(-50%); background: var(--n26-pink-600); border: var(--n26-border); box-shadow: 3px 3px 0 var(--n26-ink); } .n26 #site-nav .cs-depth-0:hover > a[href*="/prevente/"] { color: var(--n26-white); } .n26 #site-nav .cs-depth-0:hover > a[href*="/prevente/"]::before { transform: translate(-2px, calc(-50% - 2px)); box-shadow: 5px 5px 0 var(--n26-ink); } /* GTranslate switcher: sit on the same baseline as the other items */ .n26 #site-nav .menu-item-gtranslate > a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--n26-font-body); font-size: 14px; font-weight: 600; color: var(--n26-lav); vertical-align: middle; } .n26 #site-nav .menu-item-gtranslate > a img { margin: 0; } /* dropdowns: small retro windows */ .n26 #site-nav .sub-menu { background: var(--n26-white); border: var(--n26-border); border-radius: var(--n26-r-card); box-shadow: var(--n26-shadow); padding: 30px 8px 8px; overflow: hidden; } .n26 #site-nav .sub-menu::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 22px; background: radial-gradient(circle at 14px 11px, var(--n26-pink) 4px, transparent 4.5px), radial-gradient(circle at 28px 11px, var(--n26-pink-300) 4px, transparent 4.5px), radial-gradient(circle at 42px 11px, var(--n26-lav-200) 4px, transparent 4.5px), var(--n26-pink-100); border-bottom: var(--n26-border); } .n26 #site-nav .sub-menu li { border: 0; } .n26 #site-nav .sub-menu .cs-link { font-family: var(--n26-font-body); font-size: 15px; font-weight: 500; color: var(--n26-ink); border-radius: var(--n26-r-inner); padding: 9px 14px; line-height: 1.3; } .n26 #site-nav .sub-menu li:hover > .cs-link, .n26 #site-nav .sub-menu .current-menu-item > .cs-link { background: var(--n26-pink-100); color: var(--n26-pink-600); } /* mobile */ .n26 #cs-mobile-icon strong { font-family: var(--n26-font-body); font-weight: 600; color: var(--n26-ink); } .n26 #cs-mobile-icon i { background: var(--n26-ink); } .n26 #navigation-mobile { background: var(--n26-white); border-bottom: var(--n26-border); } .n26 #navigation-mobile a { font-family: var(--n26-font-body); font-weight: 600; font-size: 16px; color: var(--n26-ink); } .n26 #navigation-mobile li { border-color: var(--n26-lav-100); } .n26 #navigation-mobile .sub-menu a { font-weight: 500; } /* ---------- Pink grid (shared motif) --------------------------------------- */ .n26-grid-bg { background: var(--n26-grid); } /* ---------- Page header (inner pages) --------------------------------------- */ .n26 #page-header { position: relative; border-bottom: var(--n26-border); overflow: hidden; } .n26 #page-header::after { /* soft floor so the title chip reads over any banner art */ content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(42, 37, 64, 0.28), transparent); pointer-events: none; } /* #page-header is display:flex (update-2026 snippet): give the container Route's column width back */ .n26 #page-header .container { position: relative; z-index: var(--n26-z-raised); width: 100%; max-width: 1170px; margin: 0 auto; } /* the banner art keeps its window in the centre: park the title chip on the empty left grid */ .n26 #page-header .row > [class*="col-"] { text-align: left !important; } .n26 #page-header .page-title { display: inline-block; position: relative; margin: 0 0 28px; padding: 36px 26px 14px !important; background: var(--n26-white); border: var(--n26-border); border-radius: var(--n26-r-card); box-shadow: var(--n26-shadow); font-family: var(--n26-font-display); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem) !important; letter-spacing: -0.02em; color: var(--n26-ink) !important; text-align: left !important; } .n26 #page-header .page-title::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 24px; border-radius: 16px 16px 0 0; background: radial-gradient(circle at 16px 12px, var(--n26-pink) 4.5px, transparent 5px), radial-gradient(circle at 32px 12px, var(--n26-pink-300) 4.5px, transparent 5px), radial-gradient(circle at 48px 12px, var(--n26-lav-200) 4.5px, transparent 5px), var(--n26-pink-100); border-bottom: var(--n26-border); } /* Breadcrumb NavXT inside the page header: a small pill, bottom right */ .n26 #page-header .cs-breadcrumb { position: absolute; right: 15px; bottom: 14px; background: rgba(255, 253, 254, 0.92); border: var(--n26-border); border-radius: var(--n26-r-pill); padding: 4px 14px; font-size: 13px; font-weight: 500; color: var(--n26-ink); max-width: 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .n26 #page-header .cs-breadcrumb .cs-inner { background: none; padding: 0; } .n26 #page-header .cs-breadcrumb, .n26 #page-header .cs-breadcrumb * { color: var(--n26-ink) !important; } .n26 #page-header .cs-breadcrumb a { color: var(--n26-pink-600); text-decoration: none; } @media (max-width: 767px) { .n26 #page-header .cs-breadcrumb { display: none; } } /* long titles (posts) wrap instead of running into the art's centre window */ @media (min-width: 768px) { .n26 #page-header .page-title { max-width: 36%; } } .n26 #page-header .page-title p { margin: 0 !important; color: inherit !important; font-size: inherit !important; line-height: 1.15; } /* ---------- Buttons (Route cs_button + WPBakery vc_btn) --------------------- */ /* every vc_btn3 style (modern, flat, classic, 3d, outline, custom, gradient): they carry inline colours and inline onmouseenter styles; the !important below outranks both */ .n26 .cs-btn, .n26 .vc_btn3.vc_general, .n26 input[type="submit"], .n26 button[type="submit"] { font-family: var(--n26-font-body) !important; font-weight: 700 !important; letter-spacing: 0.01em; text-transform: none; text-shadow: none !important; background: var(--n26-pink-600) !important; color: var(--n26-white) !important; border: var(--n26-border) !important; border-radius: var(--n26-r-pill) !important; box-shadow: var(--n26-shadow) !important; padding: 0.7em 1.5em; line-height: 1.2; transition: transform 0.25s var(--n26-spring), box-shadow 0.25s var(--n26-spring), background-color 0.2s !important; } .n26 .cs-btn:hover, .n26 .vc_btn3:hover, .n26 input[type="submit"]:hover, .n26 button[type="submit"]:hover { transform: translate(-2px, -2px); box-shadow: var(--n26-shadow-lift) !important; /* white on #e51978 is ~4.1:1 (fails AA at this size): hover goes to ink instead */ background: var(--n26-ink) !important; color: var(--n26-white) !important; } .n26 .cs-btn:active, .n26 .vc_btn3:active, .n26 input[type="submit"]:active, .n26 button[type="submit"]:active { transform: translate(3px, 3px); box-shadow: var(--n26-shadow-press) !important; } /* button labels stay on one line at desktop; narrow containers get the compact size */ .n26 .cs-btn:not(.cs-btn-xl), .n26 .vc_btn3.vc_general { white-space: nowrap; max-width: 100%; } .n26 [class*="vc-hoverbox"] .vc_btn3.vc_general, .n26 .col-md-3 .cs-btn:not(.cs-btn-xl), .n26 .col-md-4 .cs-btn:not(.cs-btn-xl), .n26 .col-md-3 .vc_btn3.vc_general, .n26 .col-md-4 .vc_btn3.vc_general { padding: 0.55em 1.1em; font-size: 14px; } @media (max-width: 767px) { .n26 .cs-btn:not(.cs-btn-xl), .n26 .vc_btn3.vc_general { white-space: normal; } } .n26 .vc_btn3.vc_general { top: auto !important; } /* WPBakery places button icons with position:absolute (right/left: 20px) and relies on ~48px of padding; the compact padding above let the text run under the icon ("dét●ils"). Put the icon in the text flow instead, so no padding value can make them collide. */ .n26 .vc_btn3.vc_general .vc_btn3-icon { position: static !important; display: inline-block; width: auto; height: auto; transform: none !important; line-height: 1; vertical-align: -0.1em; font-size: 1em; } .n26 .vc_btn3.vc_general.vc_btn3-icon-right .vc_btn3-icon { margin: 0 0 0 0.45em; } .n26 .vc_btn3.vc_general.vc_btn3-icon-left .vc_btn3-icon { margin: 0 0.45em 0 0; } .n26 .vc_btn3.vc_general.vc_btn3-icon-left, .n26 .vc_btn3.vc_general.vc_btn3-icon-right { padding-left: 1.1em; padding-right: 1.1em; } /* links inside light-pink bands (vc_row bgcolor #ffbfdf): pink-on-pink is 3.65:1, use ink */ .n26 #content [style*="background-color: #ffbfdf" i] a:not(.cs-btn):not(.vc_btn3), .n26 #content [style*="background-color:#ffbfdf" i] a:not(.cs-btn):not(.vc_btn3) { color: var(--n26-ink) !important; text-decoration: underline; } /* ---------- Inline colours pasted into content ------------------------------------- The editor stored the old accent and a neutral grey inline (44 x #e51978, 546 x #333333, a few #e56ca4 / #e51978 backgrounds). Remap them onto the palette. Guards: a background match never recolours its own text. */ .n26 #content [style*="color: #e51978" i]:not([style*="background-color: #e51978" i]), .n26 #content [style*="color:#e51978" i]:not([style*="background-color:#e51978" i]) { color: var(--n26-pink-600) !important; } .n26 #content [style*="color: #333333" i]:not([style*="background-color: #333333" i]), .n26 #content [style*="color:#333333" i]:not([style*="background-color:#333333" i]), .n26 #content [style*="color: #333" i]:not([style*="background-color: #333" i]) { color: var(--n26-ink) !important; } .n26 #content [style*="background-color: #e56ca4" i], .n26 #content [style*="background-color:#e56ca4" i], .n26 #content [style*="background-color: #e51978" i], .n26 #content [style*="background-color:#e51978" i] { background-color: var(--n26-pink-600) !important; } /* buttons with no destination yet ("(À venir)"): visibly disabled, not clickable */ .n26 a.cs-btn[data-n26-disabled], .n26 a.vc_btn3[data-n26-disabled], .n26 a.cs-btn[data-n26-disabled]:hover, .n26 a.vc_btn3[data-n26-disabled]:hover { background: var(--n26-lav-100) !important; color: var(--n26-ink) !important; border-style: dashed !important; box-shadow: none !important; transform: none !important; cursor: not-allowed; } /* ---------- WPBakery hover boxes (flip cards, e.g. Programmation) --------------------- Each box takes the height of its taller face, so rows ended ragged (258 / 323 / 277px). Stretch them per row; frame the wrapper (not the faces) so the 3D flip is untouched; the inline Noto Sans black titles become brand labels readable on any photo. */ @media (min-width: 992px) { .n26 .row:has(> [class*="col-"] .vc-hoverbox-wrapper) { display: flex; flex-wrap: wrap; } .n26 .row:has(> [class*="col-"] .vc-hoverbox-wrapper) > [class*="col-"] { display: flex; flex-direction: column; } .n26 .row:has(> [class*="col-"] .vc-hoverbox-wrapper) > [class*="col-"] > .cs-column-inner { flex: 1; display: flex; flex-direction: column; } .n26 .vc-hoverbox-wrapper { flex: 1; display: flex; flex-direction: column; } .n26 .vc-hoverbox-wrapper > .vc-hoverbox { flex: 1; display: flex; flex-direction: column; } .n26 .vc-hoverbox-wrapper .vc-hoverbox-inner { flex: 1; } } .n26 .vc-hoverbox-wrapper { border: var(--n26-border); border-radius: var(--n26-r-card); box-shadow: var(--n26-shadow); margin-bottom: 26px; transition: transform 0.35s var(--n26-spring), box-shadow 0.35s var(--n26-spring); } .n26 .vc-hoverbox-wrapper:hover { transform: translate(-2px, -2px); box-shadow: var(--n26-shadow-lift); } .n26 .vc-hoverbox-wrapper.vc-hoverbox-shape--rounded .vc-hoverbox-block { border-radius: calc(var(--n26-r-card) - 2px); } .n26 .vc-hoverbox-front .vc-hoverbox-heading, .n26 .vc-hoverbox-front h2 { display: inline-block; margin: 0; padding: 8px 16px; background: var(--n26-white); border: var(--n26-border); border-radius: var(--n26-r-pill); box-shadow: 3px 3px 0 var(--n26-ink); font-family: var(--n26-font-display) !important; font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.2; color: var(--n26-ink) !important; text-wrap: balance; } .n26 .vc-hoverbox-back .vc-hoverbox-heading, .n26 .vc-hoverbox-back h2 { font-family: var(--n26-font-display) !important; font-size: 1.1rem !important; color: var(--n26-ink) !important; } .n26 .vc-hoverbox-back p { color: var(--n26-ink); font-size: 15px; } /* ---------- WPBakery content elements ---------------------------------------- */ .n26 .wpb_single_image .vc_single_image-img, .n26 .wpb_single_image img { border-radius: var(--n26-r-inner); } .n26 .nadesh-header-hero .vc_single_image-img, .n26 .nadesh-header-hero img { border-radius: 0; } .n26 .vc_separator .vc_sep_line { border-color: var(--n26-pink-200) !important; border-top-width: 2px !important; } .n26 .vc_tta.vc_general .vc_tta-tab > a, .n26 .vc_tta.vc_general .vc_tta-panel-title > a { font-family: var(--n26-font-body); font-weight: 600; } .n26 table { border-collapse: separate; border-spacing: 0; border: var(--n26-border); border-radius: var(--n26-r-inner); overflow: hidden; background: var(--n26-white); } /* no th tint: content tables colour their header rows inline (white text on a pink row) */ .n26 table th { font-family: var(--n26-font-body); font-weight: 700; color: var(--n26-ink); } .n26 table td, .n26 table th { border-color: var(--n26-lav-100); } .n26 input[type="text"], .n26 input[type="email"], .n26 input[type="tel"], .n26 input[type="search"], .n26 input[type="url"], .n26 textarea, .n26 select { background: var(--n26-white); border: var(--n26-border); border-radius: var(--n26-r-inner); color: var(--n26-ink); padding: 0.6em 0.9em; transition: box-shadow 0.2s var(--n26-ease); /* Route fixes form fields at height: 34px (border-box): with this padding that left 9.6px for 17px text (the Archives dropdown was clipped). Size to content instead. */ height: auto; min-height: 44px; line-height: 1.3; } /* sidebar widgets are ~213px wide: full width + 16px keeps "Sélectionner un mois" clear of the arrow */ .n26 .route_widget select { width: 100%; font-size: 16px; } .n26 select { padding-top: 0.45em; padding-bottom: 0.45em; padding-right: 2.2em; max-width: 100%; cursor: pointer; } .n26 input:focus, .n26 textarea:focus, .n26 select:focus { box-shadow: 0 0 0 4px var(--n26-pink-200); outline: none; } /* pagination */ .n26 .page-pagination .page-numbers, .n26 .pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; margin: 0 4px 8px 0; border: var(--n26-border); border-radius: var(--n26-r-pill); background: var(--n26-white); color: var(--n26-ink); font-weight: 700; box-shadow: 3px 3px 0 var(--n26-ink); transition: transform 0.2s var(--n26-spring), box-shadow 0.2s var(--n26-spring); } .n26 .pagination .page-numbers.current { background: var(--n26-pink-600); color: var(--n26-white); } .n26 .pagination a.page-numbers:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--n26-ink); } .n26 .pagination-shadow { background: none; box-shadow: none; border: 0; } /* ---------- Home: hero -------------------------------------------------------- */ .n26 .cs-section:has(.nadesh-header-hero) { position: relative; overflow: hidden; background: var(--n26-grid); border-bottom: var(--n26-border); isolation: isolate; } .n26 .nadesh-header-hero { margin-bottom: 0 !important; } .n26 .nadesh-header-hero .vc_single_image-img { display: block; width: 100%; max-height: min(72vh, 720px); object-fit: contain; } /* ---------- Home: quick-link tiles ------------------------------------------------ */ .n26.home .cs-section:has(.cs-btn-xl) { background: var(--n26-lav) !important; padding-top: 0 !important; padding-bottom: 44px !important; position: relative; z-index: var(--n26-z-raised); } .n26.home .cs-section:has(.cs-btn-xl) > .container > .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: -46px 0 0; } .n26.home .cs-section:has(.cs-btn-xl) > .container > .row::before, .n26.home .cs-section:has(.cs-btn-xl) > .container > .row::after { display: none; } .n26.home .cs-section:has(.cs-btn-xl) .col-md-3 { width: auto; float: none; padding: 0; } .n26.home .cs-btn-xl { --rx: 0deg; --ry: 0deg; display: grid !important; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 104px; height: 100%; padding: 18px 16px !important; text-align: left; white-space: normal; background: var(--n26-white) !important; color: var(--n26-ink) !important; border-radius: var(--n26-r-card) !important; /* labels are stored in capitals; Outfit keeps "PROGRAMMATION" inside a quarter-width tile */ font-family: var(--n26-font-body) !important; font-weight: 800 !important; font-size: clamp(0.9rem, 0.78rem + 0.3vw, 1rem) !important; line-height: 1.2; text-transform: uppercase; letter-spacing: 0; transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.35s var(--n26-spring), box-shadow 0.3s var(--n26-spring), background-color 0.2s !important; } .n26.home .cs-btn-xl::before { font-family: FontAwesome; font-weight: normal; font-size: 20px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--n26-r-pill); background: var(--n26-pink-100); color: var(--n26-pink-600); border: var(--n26-border); transition: transform 0.4s var(--n26-spring), background-color 0.2s, color 0.2s; } .n26.home .cs-section:has(.cs-btn-xl) .col-md-3:nth-child(1) .cs-btn-xl::before { content: "\f004"; } /* heart */ .n26.home .cs-section:has(.cs-btn-xl) .col-md-3:nth-child(2) .cs-btn-xl::before { content: "\f005"; } /* star */ .n26.home .cs-section:has(.cs-btn-xl) .col-md-3:nth-child(3) .cs-btn-xl::before { content: "\f073"; } /* calendar */ .n26.home .cs-section:has(.cs-btn-xl) .col-md-3:nth-child(4) .cs-btn-xl::before { content: "\f145"; } /* ticket */ .n26.home .cs-btn-xl:hover { background: var(--n26-pink-100) !important; color: var(--n26-ink) !important; transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translate(-3px, -3px); } .n26.home .cs-btn-xl:hover::before { background: var(--n26-pink-600); color: var(--n26-white); transform: rotate(-10deg) scale(1.08); } .n26.home .cs-btn-xl:active { transform: translate(3px, 3px); } /* ---------- Home: news ----------------------------------------------------------- */ .n26 .cs-section:has(.n26-news) { padding-top: 72px !important; padding-bottom: 72px !important; } .n26 .cs-section:has(.n26-news) .cs-column-text hr { display: none; } .n26 .cs-section:has(.n26-news) .cs-column-text h1 { display: inline-block; position: relative; margin: 0 0 32px; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); text-transform: none; } .n26 .cs-section:has(.n26-news) .cs-column-text h1::after { content: ""; position: absolute; left: 0; right: -10px; bottom: 2px; height: 14px; background: var(--n26-pink-200); border-radius: var(--n26-r-pill); z-index: -1; } .n26 .cs-section:has(.n26-news) .cs-column-text { position: relative; z-index: 0; } .n26 .cs-section:has(.n26-news) .vc_separator { display: none; } .n26-news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; } .n26-news .n26-card--feature { grid-column: span 2; grid-row: span 2; } /* exact cell counts: 7 = feature(2x2) + 4 + 2 wide; 6 = feature + 4 + 1 wide */ .n26-news--7 .n26-card:nth-child(6), .n26-news--7 .n26-card:nth-child(7) { grid-column: span 2; } .n26-news--6 .n26-card:nth-child(6) { grid-column: span 4; } .n26-news--3 .n26-card:not(.n26-card--feature) { grid-column: span 2; } .n26-news--2 .n26-card { grid-column: span 2; grid-row: auto; } .n26-news--1 .n26-card { grid-column: 1 / -1; grid-row: auto; } .n26-card { --rx: 0deg; --ry: 0deg; position: relative; background: var(--n26-white); border: var(--n26-border); border-radius: var(--n26-r-card); box-shadow: var(--n26-shadow); overflow: hidden; transition: transform 0.35s var(--n26-spring), box-shadow 0.35s var(--n26-spring); } .n26-card:hover { transform: translate(-3px, -3px); box-shadow: var(--n26-shadow-lift); } .n26-card:active { transform: translate(2px, 2px); box-shadow: var(--n26-shadow-press); } .n26 .n26-card__link { display: flex; flex-direction: column; height: 100%; color: var(--n26-ink); text-decoration: none; } .n26-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: var(--n26-border); background: var(--n26-grid); } .n26-card--feature .n26-card__media { aspect-ratio: 16 / 9; } /* (0,3,1): must beat the site's Additional CSS `img.wp-post-image { width: 60%; margin: auto }` */ .n26 .n26-card img.n26-card__img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; transition: transform 0.6s var(--n26-ease); } .n26-card:hover .n26-card__img { transform: scale(1.05); } .n26-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 18px 20px 20px; } .n26-card--feature .n26-card__body { padding: 24px 28px 28px; gap: 12px; } .n26 .n26-card__date { font-size: 13px; font-weight: 600; color: var(--n26-lav); font-variant-numeric: tabular-nums; } .n26 .n26-card__title { margin: 0; font-size: 1.05rem; line-height: 1.25; color: var(--n26-ink); } .n26 .n26-card--feature .n26-card__title { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); } .n26-card__excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: #4d4863; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .n26-card--feature .n26-card__excerpt { font-size: 17px; -webkit-line-clamp: 4; } .n26-card:not(.n26-card--feature).n26-card--has-img .n26-card__excerpt { display: none; } .n26-card__more { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 15px; color: var(--n26-pink-600); } .n26-card__more::after { content: " \2192"; display: inline-block; transition: transform 0.3s var(--n26-spring); } .n26-card:hover .n26-card__more::after { transform: translateX(5px); } .n26-card--no-img { background: var(--n26-pink-100); } /* ---------- Home: partners --------------------------------------------------------- */ .n26 .cs-section:has(.wpb_images_carousel) { padding-bottom: 72px !important; } .n26 .cs-section:has(.wpb_images_carousel) h2, .n26 .cs-section:has(.wpb_images_carousel) h2 span { color: var(--n26-ink) !important; } .n26 .wpb_images_carousel { position: relative; padding: 44px 18px 18px; background: var(--n26-white); border: var(--n26-border); border-radius: var(--n26-r-card); box-shadow: var(--n26-shadow); overflow: hidden; } /* the carousel itself carries .vc_clearfix, whose ::before is taken: draw the bar on the wrapper */ .n26 .wpb_images_carousel > .wpb_wrapper::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 26px; background: radial-gradient(circle at 18px 13px, var(--n26-pink) 5px, transparent 5.5px), radial-gradient(circle at 36px 13px, var(--n26-pink-300) 5px, transparent 5.5px), radial-gradient(circle at 54px 13px, var(--n26-lav-200) 5px, transparent 5.5px), var(--n26-pink-100); border-bottom: var(--n26-border); } .n26 .wpb_images_carousel .vc_item img { max-height: 110px; width: auto !important; margin: 0 auto; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.3s, opacity 0.3s, transform 0.4s var(--n26-spring); } .n26 .wpb_images_carousel .vc_item:hover img { filter: none; opacity: 1; transform: scale(1.06); } .n26 .wpb_images_carousel .vc_inner { display: grid; place-items: center; height: 130px; padding: 0 12px; } /* ---------- Blog / single post ------------------------------------------------------- */ .n26.single-post .entry-header .entry-title { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); } .n26 .entry-meta { font-size: 14px; color: var(--n26-lav); } .n26 .entry-meta a { color: var(--n26-lav); text-decoration: none; } .n26 .entry-meta a:hover { color: var(--n26-pink-600); } .n26 .entry-love { display: none; } /* sidebar widgets as small windows */ .n26 #secondary .route_widget, .n26 .sidebar .route_widget { background: var(--n26-white); border: var(--n26-border); border-radius: var(--n26-r-card); box-shadow: var(--n26-shadow); padding: 20px 22px; margin-bottom: 28px; } .n26 .route_widget .widget-title, .n26 .route_widget h4 { font-family: var(--n26-font-display); font-size: 1rem; color: var(--n26-ink); } .n26 #colophon .route_widget .widget-title, .n26 #colophon .route_widget h4 { color: var(--n26-white); } /* ---------- Footer ------------------------------------------------------------------- */ .n26 #colophon { position: relative; background: var(--n26-ink); color: var(--n26-lav-200); border-top: 4px solid var(--n26-pink); padding-top: 56px; } .n26 #colophon a, .n26 .widget_nav_menu ul li a, .n26 footer #colophon .widget_nav_menu ul li a { color: var(--n26-white) !important; text-decoration: none; } .n26 #colophon a:hover, .n26 #colophon .widget_nav_menu ul li a:hover { color: var(--n26-pink-300) !important; } .n26 #colophon .widget_nav_menu ul li { padding: 4px 0; font-weight: 500; } .n26 #colophon .about-strong { color: var(--n26-white); font-weight: 600; } .n26 #colophon .custom-html-widget img { transition: transform 0.3s var(--n26-spring); } .n26 #colophon .custom-html-widget a:hover img { transform: translateY(-3px) rotate(-6deg); } .n26 #copyright { background: #211d33; color: var(--n26-lav-200); font-size: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .n26 #cs-top { background: var(--n26-pink-600); color: var(--n26-white); border: var(--n26-border); border-radius: var(--n26-r-pill); box-shadow: 3px 3px 0 var(--n26-ink); transition: transform 0.25s var(--n26-spring), box-shadow 0.25s var(--n26-spring), opacity 0.3s; } .n26 #cs-top:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--n26-ink); } /* Complianz banner: brand type only; wording and behaviour untouched */ .n26 .cmplz-cookiebanner, .n26 .cmplz-cookiebanner * { font-family: var(--n26-font-body) !important; } .n26 .cmplz-cookiebanner { border: var(--n26-border) !important; border-radius: var(--n26-r-card) !important; box-shadow: var(--n26-shadow) !important; } /* ---------- Responsive --------------------------------------------------------------- */ @media (max-width: 991px) { .n26.home .cs-section:has(.cs-btn-xl) > .container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: -32px; } .n26-news { grid-template-columns: repeat(2, minmax(0, 1fr)); } .n26-news .n26-card, .n26-news--7 .n26-card:nth-child(n), .n26-news--6 .n26-card:nth-child(n) { grid-column: auto; grid-row: auto; } /* (0,3,0) and later in source: beats the per-count resets above */ .n26-news .n26-card.n26-card--feature { grid-column: 1 / -1; } /* feature is full width; when the cards under it are odd in number, the last one spans */ .n26-news--6 .n26-card:nth-child(6), .n26-news--4 .n26-card:nth-child(4), .n26-news--2 .n26-card:nth-child(2) { grid-column: 1 / -1; } } /* embeds and content tables never push the page sideways */ .n26 #content iframe, .n26 #content video, .n26 #content embed { max-width: 100%; } @media (max-width: 767px) { .n26 #content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* editor images floated with inline width/height/margins: stack them at their natural ratio (floated only: pasted Facebook emoji are inline with widths and must stay inline) */ .n26 #content .cs-column-text img[style*="float"] { float: none !important; display: block; margin: 0 auto 16px !important; max-width: 100% !important; height: auto !important; } body.n26 { font-size: 16px; } /* the mobile hero is short: tiles sit below it (no overlap) as a compact 2x2 */ .n26.home .cs-section:has(.cs-btn-xl) { padding-top: 18px !important; padding-bottom: 26px !important; } .n26.home .cs-section:has(.cs-btn-xl) > .container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0; } .n26.home .cs-btn-xl { grid-template-columns: 1fr; justify-items: center; align-content: center; text-align: center; gap: 8px; min-height: 118px; padding: 14px 10px !important; font-size: 0.86rem !important; } .n26.home .cs-btn-xl::before { width: 40px; height: 40px; font-size: 17px; } .n26-news { grid-template-columns: 1fr; gap: 18px; } .n26-news .n26-card:nth-child(n) { grid-column: auto; } .n26 .cs-section:has(.n26-news) { padding-top: 48px !important; padding-bottom: 48px !important; } .n26 #page-header .page-title { margin-bottom: 14px; padding: 28px 16px 9px !important; font-size: 1.1rem !important; max-width: 48%; } .n26 #page-header .page-title::before { height: 19px; } } /* ========================================================================== Motion. Everything below is gated twice: .n26-motion is only set when the visitor has not asked for reduced motion, and the media query repeats it. Hidden pre-states need .n26-ready (set by the script) so content can never stay invisible if the script fails. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* Hero: the key art settles in, then drifts with scroll */ .n26-motion .nadesh-header-hero .vc_single_image-img { animation: n26-hero-in 1.2s var(--n26-ease) both; } @supports (animation-timeline: scroll()) { .n26-motion .nadesh-header-hero .vc_figure { animation: n26-hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 80vh; } } /* The pink grid drifts slowly, like the key art's background */ .n26-motion .cs-section:has(.nadesh-header-hero) { animation: n26-grid-drift 18s linear infinite; } /* Tiles arrive one after another */ .n26-motion.home .cs-section:has(.cs-btn-xl) .col-md-3 { animation: n26-rise 0.8s var(--n26-spring) both; animation-delay: calc(0.35s + var(--n26-i, 0) * 0.09s); } .n26-motion.home .cs-section:has(.cs-btn-xl) .col-md-3:nth-child(2) { --n26-i: 1; } .n26-motion.home .cs-section:has(.cs-btn-xl) .col-md-3:nth-child(3) { --n26-i: 2; } .n26-motion.home .cs-section:has(.cs-btn-xl) .col-md-3:nth-child(4) { --n26-i: 3; } /* Page-header title chip pops in */ .n26-motion #page-header .page-title { animation: n26-pop 0.7s var(--n26-spring) 0.15s both; } /* Scroll reveal */ .n26-motion.n26-ready [data-n26-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px) scale(0.98); } .n26-motion.n26-ready [data-n26-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--n26-ease), transform 0.8s var(--n26-spring); transition-delay: calc(var(--n26-i, 0) * 70ms); } /* cards keep their hover transition once revealed */ .n26-motion.n26-ready .n26-card.is-in.is-settled { transition: transform 0.35s var(--n26-spring), box-shadow 0.35s var(--n26-spring); transition-delay: 0s; } /* Sakura petals (created by the script inside the hero) */ .n26-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: var(--n26-z-petals); } .n26-petal { position: absolute; top: -24px; left: var(--x, 50%); width: calc(14px * var(--s, 1)); height: calc(11px * var(--s, 1)); border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #fff 0%, var(--n26-pink-200) 45%, var(--n26-pink-300) 100%); box-shadow: 0 1px 2px rgba(200, 21, 106, 0.25); opacity: 0.9; animation: n26-fall var(--d, 11s) linear var(--delay, 0s) infinite, n26-sway var(--sw, 3.2s) ease-in-out var(--delay, 0s) infinite alternate; will-change: transform; } } @keyframes n26-hero-in { from { opacity: 0; transform: scale(1.06); filter: saturate(0.6); } to { opacity: 1; transform: none; filter: none; } } @keyframes n26-hero-parallax { to { transform: translateY(12%) scale(1.04); } } @keyframes n26-grid-drift { to { background-position: 44px 44px, 44px 44px, 0 0; } } @keyframes n26-rise { from { opacity: 0; transform: translateY(36px) scale(0.94); } to { opacity: 1; transform: none; } } @keyframes n26-pop { from { opacity: 0; transform: translateY(16px) scale(0.92) rotate(-2deg); } to { opacity: 1; transform: none; } } @keyframes n26-fall { from { translate: 0 -5vh; rotate: 0deg; } to { translate: 0 105vh; rotate: 540deg; } } @keyframes n26-sway { from { transform: translateX(-26px); } to { transform: translateX(26px); } } @keyframes n26-drop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .n26-motion #site-nav .sub-menu { animation: n26-drop 0.22s var(--n26-ease); transform-origin: top left; } }