/* ========================================================= Animation hooks (driven by 1000.js / anime.js) Helper classes exist only while an entrance plays; every variable defaults to the finished state. ========================================================= */ [mn="1000"] { /* decor lines still use scaleX: from the left */ ._ittl .ttldecor- > div, ._secttlbx .ttldecor- > div { transform-origin: left center; } .a-center { transform-origin: center !important; } /* border draw: a clip, not a transform, so any width / positioning works (100svw, negative margins, translate...). --draw: 0 = hidden, 1 = full. */ ._border-top.a-draw { clip-path: inset(0 calc((1 - var(--draw, 1)) * 100%) 0 0); /* from the left */ } ._border-bottom.a-draw { clip-path: inset(0 0 0 calc((1 - var(--draw, 1)) * 100%)); /* from the right */ } ._border-.a-draw.a-center { clip-path: inset(0 calc((1 - var(--draw, 1)) * 50%)); /* from the centre */ } /* clip wipe (rise: from the bottom, cascade: from a side) */ .a-clip { clip-path: inset(var(--ct, 0%) var(--cr, 0%) var(--cb, 0%) var(--cl, 0%)); } /* blur focus */ .a-blur { filter: blur(var(--blur, 0px)); } /* flip up (3D, driven by --rx / --ty so it doesn't fight other transforms) */ .a-flip { transform: perspective(900px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)); transform-origin: 50% 0%; backface-visibility: hidden; } .a-flip-b { transform-origin: 50% 100%; } /* split words / letters need a box to rotate / scale */ span:is(.a-flip, .a-blur) { display: inline-block; } /* ---- click safety -------------------------------------------------- */ /* the image zoom stays inside its own box during the entrance */ ._imgobj.a-crop { overflow: clip; overflow-clip-margin: 0px; } /* anything still animating lets clicks pass through to what is underneath */ .a-busy, .a-crop img { pointer-events: none; } /* buttons always sit above images (both use .p-r, so without this the later one in the page — the image in dsg_2 — would win) */ ._imgobj { z-index: 1; } .txtbx :is(._link, .taste), .txtbx .btnDoc, .txtbx .wrap:has(> .btnDoc) { position: relative; z-index: 3; } /* buttons: opacity / transform are driven by anime.js */ .taste .btn, .btnDoc { transition-property: color, background-color, border-color, box-shadow, outline-color; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, ._border-, .txtbx) { opacity: 0; animation: mn1000-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, ._border-, .txtbx) { opacity: 1; animation: none; } } } @keyframes mn1000-failsafe { to { opacity: 1; } } /* ========================================================= Full-width border lines (optional — remove if you set the width elsewhere) ========================================================= */ [mn="1000"] { overflow-x: clip; /* 100svw includes the scrollbar — stops a sideways scroll */ ._border- { width: 120svw; } }/* ============================================================================= HEADER & NAVIGATION ----------------------------------------------------------------------------- Breakpoint: 768px. The original mixed `max-width: 767px` with `min-width: 767px`, so both blocks matched at exactly 767px. Range syntax below removes that overlap. Contents 1. Desktop header bar [mn="8029"] 2. Navigation (shared + responsive) 3. Desktop sticky bar .dekstickbx 4. Mobile sticky bar .mobilestickbx 5. Mobile off-canvas menu .mobilenav 6. Burger button .menuburger 7. Shared icon block .iconbx ============================================================================= */ /* ============================================================================= 1. DESKTOP HEADER BAR ============================================================================= */ [mn="8029"] { --secttlmarg_default: 0; /* position: absolute; */ inset: 0 auto auto 0; z-index: 5; padding: 1px 0; line-height: 1; background-color: var(--clr01); @media (width < 768px) { display: none; } /* --- Logo ------------------------------------------------------------ */ .logo { margin: 0; line-height: 0; img { max-height: 50px; } ._imgobj img { max-height: 21px; } } /* --- Section title --------------------------------------------------- */ ._ittl { &::before { display: none; } > * ~ * { margin: 0 !important; } } /* --- Top strip ------------------------------------------------------- */ .top { padding: 0 0 6px; margin: 0 0 6px; background-color: var(--clr03x); } /* --- Social / media icons -------------------------------------------- */ .mediabx { --iconclr: var(--clr03, #fff); --iconhovclr: var(--clr01x, #fff); --bgclr: var(--clr01x, #fff); --bghovclr: var(--clr04); a { padding: 6px; border-radius: 50%; } .unit { margin: 0 0 0 9px; } } /* --- Search ---------------------------------------------------------- */ .searchbx { position: relative; width: 150px; input { width: 100%; margin: 0; padding: 6px 9px 6px 30px; border: 2px solid #ccc; border-radius: 50px; font-size: inherit; } i { position: absolute; left: 9px; top: 50%; translate: 0 -50%; width: 12px; color: #ccc; } } /* --- Icon block ------------------------------------------------------ */ .iconbx { margin: 0 6px 0 0; .icon-l { --div: 30px; .bimgbx { line-height: 0; } } } /* --- Bar block ------------------------------------------------------- */ .barbx { --div: 200px; ._content { margin: 0; } .bar-l { flex: 0 0 var(--div); max-width: var(--div); padding: 15px; .bimgw { padding: 15px; .bimg { padding-top: 18%; @media (width < 768px) { padding-top: 10%; } } } } .bar-r { flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); padding: 9px 0; } @media (width < 768px) { .bar-l, .bar-r { flex: 0 0 100%; max-width: 100%; } } } } /* ============================================================================= 2. NAVIGATION ============================================================================= */ nav { line-height: 1; gap: 15px; * { text-decoration: none; } ul, li { display: inline-flex; justify-content: initial; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } a { display: inline-flex; justify-content: center; align-items: center; font-family: var(--ft-nav); color: inherit; text-decoration: none !important; } > ul > li { position: relative; } > ul li:hover { z-index: 10; } /* --- Mobile ---------------------------------------------------------- */ @media (width < 768px) { > ul > li > ul { padding: 0 0 0 12px; li { width: 100%; font-size: 80%; & ~ li { border-top: 1px solid #eee; } } a { width: 100%; justify-content: flex-start; text-transform: initial; } } } /* --- Desktop --------------------------------------------------------- */ @media (width >= 768px) { a:hover, a.active { color: var(--clr01x, #fff); background-color: var(--clr03); } > ul { gap: 15px; > li { gap: 15px; > a { margin: 0 1px; padding: 0; &:hover, &.active { background-color: var(--clr02x, transparent); color: var(--clr03); } } /* Dropdown */ > ul { position: absolute; right: 50%; bottom: 0; display: block; min-width: 250px; padding: 0; border: 1px solid #eee; background-color: #ebebeb; color: #fff; translate: 50% calc(100% + 22px); scale: 1 0; transform-origin: top; transition: .6s all .3s ease; li { width: 100%; justify-content: flex-start; } a { width: 100%; justify-content: flex-start; padding: 9px; text-transform: initial; color: #000; &:hover, &:active { background-color: #ccc; color: #000; } } } &:hover > ul { scale: 1 1; transition: .6s all ease; } } } } } .dekstopnav { padding: 0; background-color: var(--clr01x); .ttldecor-btm{ display: none !important; } .navbx{ nav{ width: 100%; font-size: 100%; & > ul { &:nth-child(1){ flex: 1 0 0; max-width: 100%; } justify-content: space-around; align-items: center; .decor-bar{ height: 12px; width: 2px; background-color: #000; } } } } } /* ============================================================================= 3. DESKTOP STICKY BAR ============================================================================= */ .dekstickbx { position: fixed; left: 0; top: 0; z-index: 10; width: 100% !important; padding: 15px 0; background-color: var(--clr01, #fff); translate: 0 -101%; transition: 2s all cubic-bezier(.075, .82, .165, 1); color: #fff; @media (width < 768px) { display: none; } nav{ font-size: 100%; } .logo { margin: 0; line-height: 0; img { max-height: 50px; } ._imgobj img { max-height: 15px; } } } body.scrolled .dekstickbx { translate: 0 0; } /* ============================================================================= 4. MOBILE STICKY BAR ============================================================================= */ .mobilestickbxp, .mobilestickbx { width: 100% !important; @media (width >= 768px) { display: none !important; } } .mobilestickbx { position: fixed; left: 0; top: 0; z-index: 50; display: flex; align-items: center; min-height: 65px; padding: 8px 15px; background-color: var(--clr01, #fff); line-height: 1; img { max-height: 45px; max-width: calc(100% - 45px); } ._imgobj { display: none; } } /* ============================================================================= 5. MOBILE OFF-CANVAS MENU ============================================================================= */ .mobilenav { position: fixed; top: 0; z-index: 50; display: block; width: 100% !important; height: 100vh; padding: 0; background-color: rgb(0 0 0 / 50%); opacity: 0; translate: 101% 0; transition: .6s all .3s ease; @media (width >= 768px) { display: none !important; } /* --- Panel ----------------------------------------------------------- */ .mobilenavw { display: block; width: calc(100% - 90px) !important; max-width: 400px; height: 100vh; margin-left: auto; overflow: hidden auto; background-color: var(--clr01x, #fff); color: #000; opacity: 0; translate: 101% 0; transition: .3s all cubic-bezier(.075, .82, .165, 1); } /* --- Open state ------------------------------------------------------ */ &.active { opacity: 1; translate: 0 0; transition: .3s all ease; .mobilenavw { opacity: 1; translate: 0 0; transition: .9s all .3s cubic-bezier(.075, .82, .165, 1); } } /* --- Nav ------------------------------------------------------------- */ nav { padding: 60px 24px 15px; ul, li { margin: 0; } > ul > li { flex: 0 0 100%; } a { flex: 0 0 100%; width: 100%; justify-content: flex-start; padding: 9px 0; font-size: 150%; color: inherit; text-decoration: none; } } /* --- Info block ------------------------------------------------------ */ .infobx { padding: 0 24px 60px; } .infow { padding: 21px 0 0; border-top: 1px solid #ccc; } /* --- Social / media icons -------------------------------------------- */ .mediabx { a { --bgclr: var(--clr03); --iconclr: #fff; --iconhovclr: #fff; padding: 8px; border-radius: 50%; } &:not(.mediabx-coloricon) a { --bgclr: var(--clr02, #fff); --bghovclr: var(--clr01, #fff); --square: 35px; margin: 3px; } .unit { margin: 0 6px 6px 0; } } .iconbx { width: 100%; } } /* ============================================================================= 6. BURGER BUTTON ============================================================================= */ .menuburger { --square: 35px; --height: 3px; --top: 9px; --vpadding: 15px; --bgclr: #555; --radius: 5px; position: fixed; top: var(--vpadding); right: var(--vpadding); z-index: 55; display: flex; align-items: center; width: var(--square) !important; height: var(--square); scale: .7; transition-duration: .5s; @media (width >= 768px) { display: none !important; } .icon { --bgclr: var(--clr03, #fff); position: relative; top: 0; width: var(--square); height: var(--height); border-radius: var(--radius); background-color: var(--bgclr); transition-duration: .5s; &::before, &::after { content: ""; position: absolute; height: var(--height); border-radius: var(--radius); background-color: var(--bgclr); transition-duration: .5s; } &::before { top: calc(-1 * var(--top)); width: var(--square); } &::after { top: var(--top); right: 0; width: calc(var(--square) / 2); } } /* --- Open state (X) -------------------------------------------------- */ &.open .icon { --bgclr: var(--clr01, #fff); transform: rotateZ(360deg); transition-duration: .5s; &::before { transform: rotateZ(45deg) scaleX(.75) translate(var(--top), -6px); } &::after { width: var(--square); transform: rotateZ(-45deg) scaleX(.75) translate(var(--top), 6px); } } } /* ============================================================================= 7. SHARED ICON BLOCK ============================================================================= */ :where(.mobilenav, [mn="8029"]) .iconbx { --clr: var(--secftclr, #000); --clrhov: var(--secftclr, #000); --font: inherit; margin: 0 6px 0 0; font-size: 80%; a { text-decoration: none; } h4 { margin: 0 0 3px; font-family: var(--ft-t2); font-size: inherit; color: inherit; } }[mn="8237"]{ margin-top: auto; @media (max-width: 767px) { text-align: center } .sitemap { :where(ul) { list-style-type: none; list-style: none; margin: 0; padding: 0; } li{ @media(width<=767px){ text-align: center; } } ._content{ & > ul { display: flex; flex-wrap: wrap; gap: 9px 0; & > li { flex: 0 0 50%; max-width: 50%; @media(width<=767px){ flex: 0 0 100%; max-width: 100%; } } } } } ._imgobj img { margin: 0 0 15px; max-width: 90%; } a { color: inherit; text-decoration: none; } .lowerdiv { padding: 15px 0 0; border-top: 1px solid #ccc; } .mediabx { margin: 0; --iconclr: var(--clr01x, #fff); --iconhovclr: var(--clr01x, #fff); & > * { justify-content: center; } a { --iconclr: var(--clr01); --iconhovclr: var(--clr01x, #fff); --bgclr: var(--clr02x, #fff); --bghovclr: var(--clr02, #fff); padding: 9px; border-radius: 50%; } } .ttl { font-size: 120%; line-height: 1; margin: 0 0 12px; font-family: var(--ft-b2); } .ittl { font-size: 110%; line-height: 1; margin: 0 0 3px; } .copyright > * > * { border-top: 1px solid #ccc; padding: 30px 0; text-align: center; } a { text-underline-offset: 3px; &:hover { text-decoration: underline; } } table{ border: 0; font-size: inherit; margin: 15px 0; line-height: 1.5; tr{ border: 0 !important; } td, th { padding: 0; vertical-align: top; border: 0; } } .contact { --div: 25px; text-align: left; .l { flex: 0 0 var(--div); max-width: var(--div); } .l .bimgw { margin-bottom: 15px; --bw: 35px; } .r { flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); padding-left: 9px } @media(width<=767px){ :where(.r, .l){ flex: 0 0 100%; max-width: 100% } .l .bimgw { margin-bottom: 3px; } } } @media (max-width: 991px) { .empty { display: none; } } @media (max-width: 767px) { .newsletterbx { width: 250px; margin: 0 auto; } .newsletterbx { text-align: center } .copyright .container > .f { justify-content: center; } .copyright .container > .f > * { flex: 0 0 100%; max-width: 100%; } } } [mn="5000"] { input:not([type="radio"], [type="checkbox"]), textarea, select{ background-color: #fff; border: 1px solid #ccc; } .taste { margin: 21px 0 0; } .follow-us{ text-align: center; margin: 30px 0 0; .mediabx{ &>*{ justify-content: center; } } } .noticebx{ font-size: 90%; margin: 0 0 15px; } .contactinfobx { line-height: 1.1; .ttldecor- { display: none!important; } ._ittl { margin: 0 0 9px; } .title { font-size: 120%; font-family: var(--ft-t1); margin: 3px 0 9px } @media (width <= 767px) { text-align: center; .iconbx { ._imgobj { margin: 0; } .bimgw { max-width: 60px; } .icon-{ flex: 0 0 100%; max-width: 100%; } } } } } /* ============================================================================= Animation hooks (driven by 5000.js / anime.js) Defaults = finished state, so it looks right without JS. ============================================================================= */ [mn="5000"] { ._secttlbx .ttldecor- > div { transform-origin: center; } /* Pre-JS guard + failsafe */ &.is-anim-pending form { opacity: 0; animation: mn5000-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending form { opacity: 1; animation: none; } } } @keyframes mn5000-failsafe { to { opacity: 1; } } [mn="4315"]{ .row{ z-index: 1; position: relative; } ._iframe{ width: 100%; iframe{ width: 100%; aspect-ratio: 12 / 11 !important; } } ._imgobj{ margin: 15px 0; } .contactinfomain{ z-index: -2; position: relative !important; .contactinfobx{ padding: 15px 0; color: #fff; } &::after{ content: ''; display: block; position: absolute; height: 100%; width: calc(100% + 50%); right: 0; top: 50%; translate: 0 -50%; background-color: var(--clr01); z-index: -1; border-radius: 15px; } } } [mn="4315"] .itm { margin: 0 -3px; gap: 15px 0; line-height: 1.2; .itm-l{ flex: 0 0 60%; max-width: 60%; } .itm-r{ flex: 0 0 40%; max-width: 40%; } .itm-l, .itm-r { padding: 0 3px; @media(width<767px){ flex: 0 0 100%; max-width: 100%; } } .itm-r{ position: relative; z-index: 1; @media(width>=767px){ padding-left: 15px; } } .itm-l{ @media(width>767px){ padding-right: 15px; } } .title { font-family: var(--ft-t1); font-size: 150%; margin: 0 0 15px; color: var(--clr01); } } [mn="4315"] .iconbx { --div: 72px; .icon-l img { max-height: 45px; margin: 3px 0 0; } .icon-{ flex: 0 0 100%; max-width: 100%; } .title{ margin: 6px 0 6px; color: var(--clr01); } } /* ========================================================= Animation hooks (driven by 4315.js / anime.js) Defaults = finished state, so it looks right without JS. ========================================================= */ [mn="4315"] { ._secttlbx .ttldecor- > div { transform-origin: center; } /* Card sweep: the coloured card grows out from its right edge */ .contactinfomain::after { scale: var(--card-sx, 1) 1; transform-origin: right center; } /* Map unfold: opens as a growing circle from its centre. (The clip sits on the map box, not on the observed .itm-r column — a fully clipped element never counts as "in view".) */ .itm-r > .is-unfolding { clip-path: circle(var(--unfold, 75%) at 50% 50%); } /* Pin drop (built and removed by 4315.js) */ .map-pin { position: absolute; left: 50%; top: 50%; z-index: 2; width: 36px; height: 48px; translate: -50% -100%; pointer-events: none; } .map-pin__icon { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--clr01, #c0392b); filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.25)); } .map-pin__shadow { position: absolute; left: 50%; bottom: -4px; width: 22px; height: 7px; margin-left: -11px; border-radius: 50%; background: #000; } .map-pin__ripple { position: absolute; left: 50%; bottom: -12px; width: 24px; height: 24px; margin-left: -12px; border: 2px solid var(--clr01, #c0392b); border-radius: 50%; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, .contentbx, .itm-r) { opacity: 0; animation: mn4315-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, .contentbx, .itm-r) { opacity: 1; animation: none; } } } @keyframes mn4315-failsafe { to { opacity: 1; } }[mn="1065"]{ --secpb: 0; z-index: var(--zIndex_default, 1); --ttlsize: 450%; --listTtlSize_default: var(--ttlsize); --listAlignItm_default: center; min-height: calc(100dvh - var(--dekstickbx-height) + 2px); @media(width<=575px){ --ttlsize: 250%; } ._subttl { font-size: 120%; color: var(--clr02); } &.image_int{ @media (width>767px) { ._imgobj img { max-width: initial; } } } .rowbx{ --ObjImgMaru: var(--ObjImgMaru_default, 0); @media (width <= 1200px) { --ObjImgMaru: var(--ObjImgMaru_1200, 0); } @media (width <= 991px) { --ObjImgMaru: var(--ObjImgMaru_991, 0); } @media (width <= 767px) { --ObjImgMaru: var(--ObjImgMaru_767, 0); } @media (width <= 575px) { --ObjImgMaru: var(--ObjImgMaru_575, 0); } /* ================================== */ /* ================================== */ &>*.row{ align-items: var(--listAlignItm_default); } ._ittl{ --ttlalign: left; margin: var(--listingTtlMarg_default, 0 0 18px); & * { text-align: var(--listingTtlAlg_default); } & .h4 { color: var(--listingTtlClr_default, var(--secttlclr)); font-size: var(--listTtlSize_default); } } ._imgobj { text-align: center; @media(width>767px){ display: flex; justify-content: flex-end; } img{ margin: var(--ObjImgMaru); max-height: calc(100dvh - var(--dekstickbx-height) - var(--secpt)); } } &~&{ margin-top: 30px; } @media (max-width: 1100px) { ._imgobj img { max-height: 600px; } } ._imgobj { margin: 0; line-height: 0 } @media (max-width: 767px) { ._imgobj { margin: 0 0 15px; } ._imgobj img { max-height: unset; } } } &.dsg_1{ .rowbx:nth-child(even){ .row{ flex-direction: row-reverse; } ._imgobj { @media(width>767px){ justify-content: flex-start; } } } } &.dsg_2{ .rowbx:nth-child(odd){ .row{ flex-direction: row-reverse; } ._imgobj { @media(width>767px){ justify-content: flex-start; } } } .rowbx:nth-child(even){ ._imgobj { @media(width>767px){ justify-content: flex-end; } } } ._imgobj{ @media(width>767px){ display: flex; justify-content: flex-start; } } } .row{ @media(width <= 767px){ flex-direction: column-reverse !important; } ._imgobj { margin: 0 !important; } } } /* ============================ */ /* // customise */ [mn="1065"]{ &.cus_contentbx{ .contentbx{ @media(width > 767px){ translate: 0 -40%; } } ._imgobj{ justify-content: flex-end !important; } } &.ori_center{ --secpb: 60px; align-items: center !important; } } /* ========================================================= Animation hooks (driven by 1065.js / anime.js) Defaults = finished state, so it looks right without JS. ========================================================= */ [mn="1065"]{ /* border lines draw in: top from the left, bottom from the right */ ._border-top { transform-origin: left center; } ._border-bottom { transform-origin: right center; } /* title decor lines */ ._secttlbx .ttldecor- > div { transform-origin: center; } .rowbx ._ittl .ttldecor- > div { transform-origin: left center; } /* Slice curtain over the main image (built and removed by 1065.js). Each strip clips its own copy of the image, which rises from the bottom edge — so the picture stays anchored to the bottom. */ .col-image{ z-index: -1; } .col-image ._imgobj { .curtain { position: absolute; z-index: 1; pointer-events: none; } .curtain__strip { position: absolute; top: 0; bottom: 0; overflow: hidden; } .curtain__fill { position: absolute; inset: 0; background-repeat: no-repeat; will-change: transform; } /* Backdrop shape (1065.js inserts and places it behind the image). Colour: a deeper tone of the section background; override with --backdrop-clr on the section or row. */ .backdrop { position: absolute; z-index: 0; overflow: visible; pointer-events: none; transform-origin: 50% 100%; path { fill: var(--backdrop-clr, color-mix(in srgb, var(--secbgclr, #ddc9ae), #000 12%)); } } /* keep the image above the backdrop */ & > img { position: relative; z-index: 1; } /* rise from the floor: pushed down by --rise, bottom clipped by the same amount, so it emerges at the bottom edge */ img.is-rising { translate: 0 var(--rise, 0px); clip-path: inset(0 0 var(--rise, 0px) 0); } /* Light sweep (1065.js positions it over the image and masks it with the image, so transparent areas never shine). */ .shine { --shine-x: 100%; /* parked off-image; animated 100% -> 0% */ position: absolute; z-index: 2; pointer-events: none; background-image: linear-gradient( 105deg, transparent 40%, rgb(255 255 255 / 0.18) 45%, rgb(255 255 255 / 0.45) 50%, rgb(255 255 255 / 0.18) 55%, transparent 60% ); background-size: 250% 100%; background-position: var(--shine-x) 0; background-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } /* Buttons: opacity / transform are driven by anime.js (entrance + magnetic hover), so keep them out of any site-wide ".btn { transition: all }" — otherwise the hidden start state fades instead of applying at once. */ .txtbx ._link .btn { transition-property: color, background-color, border-color, box-shadow, outline-color; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, ._border-, .rowbx) { opacity: 0; animation: mn1065-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, ._border-, .rowbx) { opacity: 1; animation: none; } } } @keyframes mn1065-failsafe { to { opacity: 1; } }/* ============================== Module 1504 ============================== */ [mn="1504"] { /* ---------- Listing ---------- */ .tmplistbx { margin: 21px 0 0; } .categorylistbx.tmplistbx { --listset-count: 3; @media (width < 767px) { --listset-count: 2; } } .divlrbx { .tmp { flex: 0 0 var(--manual-div, var(--listset-div)) !important; max-width: var(--manual-div, var(--listset-div)) !important; padding: 0; } .taste { padding-bottom: 15px; } } .rowitm .h4 { margin: 0; padding: 0; border: 0; &::after { display: none; } } /* ---------- Filter / search ---------- */ .filterbx { .filterw { gap: 15px; } :is(input, select) { margin: 0; height: 50px; } .suchbx { input { padding-right: 21px; } i { position: absolute; top: 50%; right: 9px; translate: 0 -50%; display: flex; align-items: center; height: 100%; cursor: pointer; } } } /* ---------- Category links ---------- */ .catbx { display: none; margin: 0 0 15px; } [catid] { position: relative; display: inline; margin: 3px 0; padding: 3px 15px; font-family: var(--ft-t1); line-height: 1; text-transform: uppercase; cursor: pointer; transition: all .6s ease; &:hover, &.active { color: var(--clr01); } /* slanted divider */ &::after { content: ''; position: absolute; top: 0; right: 0; display: block; width: 1px; height: 100%; background-color: var(--clr01x, #999); rotate: 15deg; } &:last-child::after { display: none; } } /* ---------- Layout ---------- */ .tabbx { @media (width <= 991px) { display: none; } } .divlrw { margin: 0 -15px; } .divlr- { --div: 300px; padding: 0 15px; &.l, &.r { flex: 0 0 100%; max-width: 100%; } } .mediabx.sharer { position: absolute; top: 0; right: 0; z-index: 10; @media (width <= 575px) { position: relative; margin: 0 0 6px; } } /* ---------- Post ---------- */ .postbx { width: 900px; max-width: 100%; margin: 0 auto; .imgObj { width: 100%; max-width: 100%; margin: 0 auto; } ._imgobj{ img{ width: 100%; } } .blurb ul { display: flex; flex-wrap: wrap; margin: 15px 0; padding: 0; list-style: none; border-block: 1px solid #000; > li { padding: 15px; } > li:first-child { flex: 1 0 0; } > li ~ li { border-left: 1px solid #000; } @media (width < 991px) { > li { flex: 0 0 100%; max-width: 100%; } > li ~ li { border-left: 0; border-top: 1px solid #000; } } } /* Post detail page */ &.inner { h1 { font-size: 120%; } ._ittl { margin: 0; } ._date { font-family: var(--ft-t1); color: #888; } .blurb { margin: 0 0 30px; } .galbxmain { margin: 30px 0 0; } .backbtn { margin: 15px 0 0; .btn { gap: 0; min-width: unset; padding: 0; border: 0; background-color: transparent; color: inherit; } } /* Main image with slanted clip + accent block */ .mainimagebx { --clip: 60px; --clip-path: polygon(var(--clip) 0%, 100% 0%, calc(100% - var(--clip)) 100%, 0% 100%); line-height: 0; .mainimagew::after { content: ''; position: absolute; top: 0; right: 0; z-index: -1; width: 120px; height: 100%; background-color: var(--clr02); clip-path: var(--clip-path); translate: 12px -9px; } img { clip-path: var(--clip-path); } } /* Title bar: title (left) + back button (right) */ .divbx { --div: 120px; margin: 0 0 30px; .divw { gap: 9px 0; } .div-l { flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); } .div-r { flex: 0 0 var(--div); max-width: var(--div); } .backbtn { margin: 0; } ._ittl { --ttlalign: left; } @media (width > 991px) { border-block: 1px solid #000; .div- { padding: 9px; &.div-l { padding-left: 0; } &.div-r { padding-right: 0; border-left: 1px solid #000; } } } @media (width <= 991px) { .div-l, .div-r { flex: 0 0 100%; max-width: 100%; } .div-l { padding: 6px 0; border-block: 1px solid #000; } } } } } /* ---------- Post body ---------- */ .postbody { width: 100%; color: #333; text-align: justify; .categorylistbx.galbx { --listset-count: 3; --listset-gap: 45px; @media (width < 991px) { --listset-count: 2; } @media (width < 575px) { --listset-count: 1; } .bimgbx { position: relative; z-index: 1; line-height: 0; &::after { content: ''; position: absolute; top: 0; right: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--clr02); translate: 12px -9px; } } } } /* ============================== Animation hooks (driven by 1504.js / anime.js) Defaults = finished state, so it looks right without JS. ============================== */ ._secttlbx .ttldecor- > div { transform-origin: center; } /* Post title bar wipes in from the left (entrance only) */ .postbx .divbx.is-wiping { clip-path: inset(-2px var(--wipe, 0%) -2px 0); } /* Post main image uncovers from the top (entrance only) */ .postbx ._imgobj img.is-revealing { clip-path: inset(0 0 var(--reveal, 0%) 0); } /* Buttons: opacity / transform are driven by anime.js */ :is(.backbtn, .btnbx) .btn { transition-property: color, background-color, border-color, box-shadow, outline-color; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, .filterbx, .postbx) { opacity: 0; animation: mn1504-failsafe 0s linear 3s forwards; @media (prefers-reduced-motion: reduce) { opacity: 1; animation: none; } } } @keyframes mn1504-failsafe { to { opacity: 1; } } /* Hide module 1065 on post pages */ body:has([mn="1504"] .postbx) { [mn="1065"] { display: none; } } [mn="4112"]{ --tabBgClr: var(--tabBgClr_default, transparent); --tabBgClrActive: var(--tabBgClrActive_default, transparent); --tabTxtClr: var(--tabTxtClr_default, var(--clr01)); --tabTxtClrActive: var(--tabTxtClrActive_default, var(--clr01)); .accordiontabbxx, .accordiontabbx{ width: 900px; max-width: 100%; margin: 0 auto; } .btnbx{ margin: 15px 0 65px; @media(width<=575px){ .btn{ width: 100%; } } } .accordiontabbx:not(:has(._content)){ .btnbx{ margin: 0; } } .accordiontab{ border-top: 1px solid #ccc; position: relative; & ~ & { margin: 0 0 0; } & > * { padding: 21px 45px 21px 0; } .desc { .descw{ padding: 15px 0; } } .blurb{ transition: .3s all ease; font-size: 100%; color: #000; display: none; } .slide { overflow: clip; height: 0; padding: 0; transition: .3s all ease; } .title{ --div: 25px; .ttl-{ &.ttl-l{ flex: 0 0 var(--div); max-width: var(--div); } &.ttl-r{ flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); padding-left: 12px; } } } ._content{ margin: 0; } .top { line-height: 1; cursor: pointer; background-color: var(--tabBgClr); color: var(--tabTxtClr); transition: .6s all ease; &::after { content: ''; aspect-ratio: 1 / 1; width: 21px; /* background-image: url(_src/arrow.svg); background-size: contain; background-position: center; background-repeat: no-repeat; */ -webkit-mask-image: url(_src/arrow.svg); mask-image: url(_src/arrow.svg); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; background-color: var(--tabTxtClr); position: absolute; right: 15px; top: 21px; rotate: 0deg; transform-origin: center; transition: .6s all ease; @media (max-width: 575px){ width: 18px; } } } &.active{ .top{ background-color: var(--tabBgClrActive); color: var(--tabTxtClrActive); &::after { rotate: 180deg; background-color: var(--tabTxtClrActive); pointer-events: none; } } .slide{ height: auto; } .blurb{ height: 0; } } } ._secttlbx{ --secttlclr: #fff; --ttlalign: center; --ttlsize: 150%; padding: 15px; background-color: var(--clr02); } } /* ============================================================================= Animation hooks (driven by 4112.js / anime.js) Defaults = finished state, so it looks right without JS. ============================================================================= */ [mn="4112"] { ._secttlbx .ttldecor- > div { transform-origin: center; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(.accordiontabbxx, .accordiontabbx) { opacity: 0; animation: mn4112-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(.accordiontabbxx, .accordiontabbx) { opacity: 1; animation: none; } } } @keyframes mn4112-failsafe { to { opacity: 1; } } [mn="1066"] { --gradStart_default: var(--secbgclr); --gradEnd_default: rgba(255, 255, 255, 0); --ttlsize: 450%; padding: 0; @media(width>575px){ min-height: calc(100dvh - var(--dekstickbx-height) + 2px); } @media(width<=575px){ --ttlsize: 250%; } .itm { --div-l: 35%; &.lr-w { flex: 0 0 100%; max-width: 100%; flex-direction: row-reverse; padding: 0; } .l{ flex: 0 0 calc(100% - var(--div-l)); max-width: calc(100% - var(--div-l)); position: relative; @media(width<575px) { flex: 0 0 100%; max-width: 100% } } .r { flex: 0 0 var(--div-l); max-width: var(--div-l); position: relative; @media(width<575px) { flex: 0 0 100%; max-width: 100% } } .l { min-height: 300px; &:after { content: ''; left: 0; bottom: 0; position: absolute; display: block; height: 100%; width: 250px; background: rgb(236, 241, 243); background: linear-gradient(90deg, var(--gradStart_default) 0%, var(--gradEnd_default) 100%); } @media(width<=575px) { &:after { display: none } } } } .textbx { padding: 0 0 0 0; width: 600px; max-width: 100%; margin: 0 auto; @media(width>575px){ padding: 30px 0; } } ._content { border: 0; } .floatingbg { position: absolute; left: 0; top: 0; @media(width>575px){ height: 100%; } } @media (max-width: 575px) { .textbx { padding: 0 0 0 0 !important } .floatingbg { position: inherit; padding: 15px } } .rowbxlist { --ObjImgPadu: var(--ObjImgPadu_default, 15px 0); @media (width <= 1200px) { --ObjImgPadu: var(--ObjImgPadu_1200, 30px 0); } @media (width <= 991px) { --ObjImgPadu: var(--ObjImgPadu_991, 30px 0); } @media (width <= 767px) { --ObjImgPadu: var(--ObjImgPadu_767, 30px 0); } @media (width <= 575px) { --ObjImgPadu: var(--ObjImgPadu_575, 30px 0); } /* ================================ */ /* ================================ */ padding: var(--ObjImgPadu); .rowcont { min-height: auto; } .rowcont { @media(width>=575px){ min-height: 65vh; } } } &.dsg_1 { .rowbxlist:nth-child(even) { .rowcont { .row { flex-direction: row-reverse; } } .lr-w { flex-direction: initial; } .l { &:after { background: linear-gradient(90deg, var(--gradEnd_default) 0%, var(--gradStart_default) 100%); left: auto; right: 0; } } } } &.dsg_2 { .rowbxlist:nth-child(odd) { .rowcont { .row { flex-direction: row-reverse; } } .lr-w { flex-direction: initial; } .l { &:after { background: linear-gradient(90deg, var(--gradEnd_default) 0%, var(--gradStart_default) 100%); left: auto; right: 0; } } } } /* ========================================================= Animation hooks (driven by 1066.js / anime.js) Defaults = finished state, so it looks right without JS. ========================================================= */ /* Panel clips the photo; photo layer is taller than the panel so the scroll parallax never exposes an edge. */ .verticalbar { overflow: hidden; &.is-revealing { clip-path: inset(0 var(--wipe-r, 0%) 0 var(--wipe-l, 0%)); } } .verticalbar__img { position: absolute; inset: -8% 0; transform-origin: center; will-change: transform; } /* title decor lines draw from the start edge */ .ttldecor- > div { transform-origin: left center; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(.verticalbar, .textbx) { opacity: 0; animation: mn1066-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(.verticalbar, .textbx) { opacity: 1; animation: none; } } } @keyframes mn1066-failsafe { to { opacity: 1; } }/* ============================================================================= MODULE 1026 ----------------------------------------------------------------------------- Breakpoints written with range syntax (`width <= Npx`), equivalent to the old `max-width: Npx`. ============================================================================= */ [mn="1026"] { /* --- Heading & text -------------------------------------------------- */ h4 { margin: 0 0 15px; } ._subttl { font-size: 100%; } .col-l{ z-index: 3; @media(width>767px){ &::after{ content: ''; width: 100svw; height: 100%; display: block; position: absolute; right: 0; top: 50%; translate: 0 -50%; z-index: -1; background-color: var(--clr01); } } } .col-r{ position: relative; padding: 25px; background-color: #eee; @media(width>767px){ min-height: 50svh; } .bglyr{ left: 0; top: 0; @media(width>767px){ width: calc(50svw + 85px); translate: -85px 0; z-index: -3; } } } /* --- Image ------------------------------------------------------------ */ ._imgobj { margin: 15px auto; text-align: center; @media (width <= 767px) { margin: 0 0 15px; text-align: inherit; } } /* --- Oversized background lettering ----------------------------------- */ .txtbglyr { position: absolute; left: 50%; top: 0; z-index: -1; translate: -50% 0; width: auto; font-family: var(--ft-t1); font-size: 2500%; line-height: 1; text-align: center; white-space: nowrap; color: #ffecf8; pointer-events: none; /* Rotated down the left edge on small screens. */ @media (width <= 575px) { left: 0; top: 60px; translate: 0 0; font-size: 18vw; writing-mode: vertical-lr; transform-origin: center; } } } /* ============================================================================= Animation hooks (driven by 1026.js / anime.js) Defaults = finished state, so it looks right without JS. ============================================================================= */ [mn="1026"] { /* Band sweep: the colour band behind the image grows out from the image to the left edge of the screen */ .col-l::after { scale: var(--band, 1) 1; transform-origin: right center; } /* Diagonal reveal: the image is uncovered by a slanted edge moving left to right (only during the entrance) */ .col-l ._imgobj img.is-revealing { clip-path: polygon(0 0, var(--d, 120%) 0, calc(var(--d, 120%) - 20%) 100%, 0 100%); } /* Background layer in the text card: transforms pivot on its left centre */ .col-r > .bglyr { transform-origin: left center; } /* Card unfold: one sweep from the background layer's left edge to its right edge. --ol lets the clip reach the part of .bglyr that hangs out to the left; --cr ends negative so the right overhang is never cut. */ .col-r.is-unfolding { clip-path: inset(0 var(--cr, 0px) 0 calc(-1 * var(--ol, 0px))); } /* text-style buttons: opacity / transform are driven by anime.js */ .btn { transition-property: color, background-color, border-color, box-shadow, outline-color; } :is(._ittl, ._secttlbx) .ttldecor- > div { transform-origin: left center; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(.col-l, .col-r) { opacity: 0; animation: mn1026-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(.col-l, .col-r) { opacity: 1; animation: none; } } } @keyframes mn1026-failsafe { to { opacity: 1; } }/* ============================================================================= MODULE 7018 — Profile grid + detail dialog ----------------------------------------------------------------------------- Breakpoint written with range syntax (`width <= 575px`), equivalent to the old `max-width: 575px`. Contents 1. Grid [mn="7018"] 2. Dialog .licht7018 ============================================================================= */ /* ============================================================================= 1. GRID ============================================================================= */ [mn="7018"] { --itmdiv: 4; @media (width <= 767px) { --itmdiv: 2; } @media (width <= 575px) { --itmdiv: 2; } /* --- Layout ---------------------------------------------------------- */ .itms { --gap: 12px; margin: 0 calc(-1 * var(--gap)); justify-content: flex-start; } .itm { flex: 0 0 calc(100% / var(--itmdiv)); max-width: calc(100% / var(--itmdiv)); padding: 9px var(--gap) 30px; text-align: center; > * { cursor: pointer; > * { flex-direction: column; } } > div { height: 100%; } &.mitgal > *:hover div.add { opacity: 1; } ._btmsubttl{ font-family: var(--ft-b1); font-size: 80%; } .decorbar{ line-height: 0; margin: 6px 0; &::after{ content: ''; width: 60px; height: 3px; display: inline-block; background-color: #fff; vertical-align: middle; } } .btm{ margin-top: auto; } } /* --- Image ----------------------------------------------------------- */ .bimgbx { z-index: 1; /* Offset backing block — currently disabled. */ &::after { content: ''; display: none; position: absolute; top: 11px; left: 11px; z-index: -1; width: 100%; height: 100%; background-color: var(--clr01); } .bimgw { width: 350px; border-radius: 50%; } .bimg { --bpt: 100%; transform: scale(1); transition: all ease-in-out .4s; } } .bimg-w { background-color: #000; } /* --- Text ------------------------------------------------------------ */ .namebx { line-height: 1.1; } .desc { margin: 0 0 9px; } .ttl { margin: 6px 0; font-family: var(--ft-t1); font-size: 170%; line-height: 1; } } /* ============================================================================= 2. DIALOG ============================================================================= */ .licht7018 { /* --- Shell ----------------------------------------------------------- */ &.licht { .profile { position: sticky; top: 90px; .bimgbx { position: relative; z-index: 1; margin-bottom: 30px; } .bimg { --bpt: 100%; border-radius: 50%; transform: scale(1); transition: all ease-in-out .4s; } } } .the_left { position: relative; z-index: 1; } /* --- Header ---------------------------------------------------------- */ .infobx { position: sticky; top: 0; padding: 0 0 15px; background-color: #fff; > * ~ * { margin: 6px 0 0; } } .ttl { display: flex; justify-content: space-between; padding: 0 0 6px; margin: 0 0 12px; border: 0; border-bottom: 6px solid var(--clr02); border-image: linear-gradient( -90deg, var(--clr05) 0%, var(--clr05) 50%, var(--clr02) 50%, var(--clr02) 100% ) 1; color: var(--clr01); } ._btmsubttl { margin: 0 0 6px; font-family: var(--ft-t1); font-style: italic; color: var(--clr04); line-height: 1.2; } ._topsubttl{ font-size: 90%; font-family: var(--ft-t1); line-height: 1.2; } /* --- Social ---------------------------------------------------------- */ .social { a { padding: 6px; border-radius: 3px; } .mediabx { --iconclr: #fff; --iconhovclr: #fff; --gap: 6px; margin: 0 0 30px; vertical-align: middle; > * { justify-content: center; } } } /* --- Content --------------------------------------------------------- */ /* Editor-produced indents become a quote rule instead. */ p[style*="margin-left:40px"] { margin-left: 0 !important; padding-left: 21px; border-left: 3px solid #333; } .btnCtlr { > * { cursor: pointer; } i { color: var(--clr06); } } ._content{ margin: 15px 0 30px; padding: 15px 0 0; border-top: 1px solid #ccc; } } /* ============================================================================= 3. ANIMATION HOOKS (driven by 7018.js / anime.js) Defaults = finished state, so it looks right without JS. ============================================================================= */ [mn="7018"], .licht7018 { /* Iris open: the round photo opens from its centre (entrance only) */ .bimgw.is-iris { clip-path: circle(var(--iris, 51%) at 50% 50%); } } [mn="7018"] { ._secttlbx .ttldecor- > div { transform-origin: center; } /* the white bar under a name draws out from the centre */ .itm .decorbar::after { scale: var(--bar, 1) 1; } .itm .btm .btn, .messagebx .btn { transition-property: color, background-color, border-color, box-shadow, outline-color; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, .messagebx, .itms) { opacity: 0; animation: mn7018-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, .messagebx, .itms) { opacity: 1; animation: none; } } } /* Dialog: the title's two-colour underline draws across from the left. (A border-image can't be scaled, so it is drawn as a pseudo-element here.) */ .licht7018 .ttl { position: relative; border-bottom-color: transparent; border-image: none; &::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(-90deg, var(--clr03) 0%, var(--clr03) 50%, var(--clr02) 50%, var(--clr02) 100%); scale: var(--ul, 1) 1; transform-origin: left center; } } @keyframes mn7018-failsafe { to { opacity: 1; } }[mn="7048"] { .categorylistbx { --listset-count: 3; @media(width<=767px){ --listset-count: 2; } @media(width<=575px){ --listset-count: 1; } } .categorybx { --ttlalign: left; .h4 { margin: 0; position: relative; color: #fff; display: inline-block; z-index: 0; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); font-size: 120%; } ._link { margin: 15px 0 0; padding: 15px; border-top: 3px solid #fff; } ._subttl { line-height: 1; &:after { content: ''; display: inline-block; vertical-align: middle; width: 90px; height: 1px; background-color: #fff; margin: 0 0 3px 9px; } } ._ittl{ margin: 0; } .infobx { --time-ani: 1.2s; max-width: 100%; margin: 0 auto; padding: 21px; position: relative; z-index: 1; overflow: clip; cursor: pointer; flex-direction: column; justify-content:flex-end; aspect-ratio: 1; border-radius: 21px; @media (width <= 767px){ min-height: 200px; } .bglyr { position: absolute; z-index: -9; height: 100%; width: 100%; left: 0; top: 0; transition: var(--time-ani) all cubic-bezier(0.075, 0.82, 0.165, 1); pointer-events: none; } .categorybx { opacity: 1; translate: 0 0; transition: var(--time-ani) all cubic-bezier(0.19, 1, 0.22, 1); @media (width <= 991px){ /* display: none; */ } } &:hover { .bglyr { scale: 1.15; } /* .categorybx { opacity: 1; translate: 0 0; } &:after { opacity: 1; } */ } .btnbx{ margin: 9px 0 0; .btn{ --btnbgclr: var(--clr01x, transparent); --btnbgclrhov: var(--clr02); --btnborderclr: var(--btnbgclrx, #fff); --btnborderclrhov: var(--btnbgclrhov); --btnclr: var(--clr02x, #fff); --btnclrhov: var(--clr01x, #fff); --btnpad: 9px 12px; letter-spacing: 0; } } } .btn { /* --btnborderclr: #fff; --btnclr: #fff; */ } } } /* ========================================================= Animation hooks (driven by 7048.js / anime.js) Defaults = finished state, so it looks right without JS. ========================================================= */ [mn="7048"] { ._secttlbx .ttldecor- > div { transform-origin: center; } /* 3D tilt on hover needs depth */ .categorybx { perspective: 900px; } .categorybx .infobx { /* Curtain rise: the card is uncovered from the bottom up (entrance only) */ &.is-rising { clip-path: inset(var(--rise, 0%) 0 0 0 round 21px); } /* Keep the hover zoom (the `scale` property) smooth, but leave the entrance zoom (driven by anime.js through `transform`) untouched — "transition: all" would drag every animation frame behind. */ .bglyr { transition-property: scale; } /* the little line after the subtitle draws out */ ._subttl::after { scale: var(--line, 1) 1; transform-origin: left center; } .btnbx .btn { transition-property: color, background-color, border-color, box-shadow, outline-color; } } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, .infobx) { opacity: 0; animation: mn7048-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, .infobx) { opacity: 1; animation: none; } } } @keyframes mn7048-failsafe { to { opacity: 1; } } [mn="1037"]{ .main{ /* max-width: 1000px; */ } ._link.taste{ display: flex; gap: 6px; justify-content: flex-start; } } /* ============================================================================= Animation hooks (driven by 1037.js / anime.js) Defaults = finished state, so it looks right without JS. ============================================================================= */ [mn="1037"] { :is(._ittl, ._secttlbx) .ttldecor- > div { transform-origin: left center; } /* Pre-JS guard + failsafe */ &.is-anim-pending .main .row > * { opacity: 0; animation: mn1037-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending .main .row > * { opacity: 1; animation: none; } } } @keyframes mn1037-failsafe { to { opacity: 1; } } /* ========================================================= How It Works — section styles (native CSS nesting) Auto-arranging: works for any number of steps. Desktop pattern repeats every 4 steps: step 4n+1 → left column, connector → (to the right) step 4n+2 → right column, connector ↓ (down) step 4n+3 → right column, connector ← (to the left) step 4n+4 → left column, connector ↓ (down) The last step never shows a connector. Numbers are generated with a CSS counter (01, 02 … 10, 11 …). Animation hooks (driven by 7317.js / anime.js): .step__media --num-o, --num-x, --num-y, --num-hx, --num-blur .step__image --reveal (only while .is-revealing) .connector --draw, --dot, --ring, --pulse, --pulse-a Every hook defaults to the "finished" state, so the section looks correct with no JavaScript at all. ========================================================= */ [mn="7317"] { /* --------------------------------------------------------- Tokens --------------------------------------------------------- */ /* Colours */ --c-bg: #ffffff; --c-ink: #1b3336; --c-text: #2f4446; --c-number: rgb(122 145 145 / 0.7); --c-line: #7f8c8c; --c-node: #1b3336; /* Fonts */ --f-display: var(--ft-t1); --f-heading: var(--ft-t1); /* Layout */ --container: 81.5rem; --img-w: 18.5rem; --img-ratio: 293 / 347; --img-h: calc(var(--img-w) * 347 / 293); --col-gap: 8rem; --row-gap: 12rem; --number-size: 24rem; --number-offset: 9.5rem; /* Connector */ --line: 2px dotted var(--c-line); --dot-size: 0.55rem; --ring-size: 1.5rem; --ring-border: 0.25rem; /* --------------------------------------------------------- Pre-JS guard: hide animated content until 7317.js has set the start states. Failsafe reveals it after 3s if JS never runs, and it is ignored for reduced-motion users. --------------------------------------------------------- */ &.is-anim-pending :is(._secttlbx, .step) { opacity: 0; animation: hiw-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, .step) { opacity: 1; animation: none; } } /* --------------------------------------------------------- Section --------------------------------------------------------- */ & .how-it-works__container { max-width: var(--container); margin-inline: auto; } & .how-it-works__title { margin: 0 0 6.5rem; font-family: var(--f-display); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 400; line-height: 1.2; text-align: center; color: var(--c-ink); } /* title decor lines grow from the centre */ & ._secttlbx .ttldecor- > div { transform-origin: center; } /* --------------------------------------------------------- Steps list (mobile-first: single column) --------------------------------------------------------- */ & .steps { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--row-gap); margin: 0; padding: 0; list-style: none; counter-reset: step; } /* --------------------------------------------------------- Single step --------------------------------------------------------- */ & .step { position: relative; counter-increment: step; /* The final step never links to anything */ &:last-child .connector { display: none; } } & .step__media { position: relative; height: var(--img-h); margin-bottom: 2.25rem; perspective: 900px; /* Auto-generated big number: 01, 02 … 10, 11 … */ &::after { content: counter(step, decimal-leading-zero); /* fallback */ content: counter(step, decimal-leading-zero) / ""; /* hidden from screen readers */ position: absolute; top: 50%; left: var(--number-offset); translate: calc(var(--num-x, 0px) + var(--num-hx, 0px)) calc(-50% + var(--num-y, 0px)); opacity: var(--num-o, 1); filter: blur(var(--num-blur, 0px)); font-family: var(--f-display); font-size: var(--number-size); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--c-number); white-space: nowrap; pointer-events: none; user-select: none; will-change: translate, opacity; z-index: 2; } } & .step__image { position: relative; z-index: 1; /* keeps the tilted image above the number */ display: block; width: var(--img-w); height: auto; aspect-ratio: var(--img-ratio); object-fit: cover; border-radius: 1rem; box-shadow: 0 0.35rem 0.9rem rgb(0 0 0 / 0.12); transform-origin: center; backface-visibility: hidden; /* bottom-up wipe during the entrance only (clip-path would hide the shadow) */ &.is-revealing { clip-path: inset(var(--reveal, 0%) 0 0 0 round 1rem); } } & .step__body { max-width: 37rem; } & .step__title { margin: 0 0 1.25rem; font-family: var(--f-heading); font-size: clamp(1.5rem, 2vw, 1.9rem); font-style: italic; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); } /* --------------------------------------------------------- Dotted connector Default = vertical ↓ (dot on top, ring at the bottom). .connector__line = the dotted line (scaled by --draw) ::before = start dot, ::after = end ring --------------------------------------------------------- */ & .connector { position: absolute; top: calc(100% + 2.5rem); left: var(--img-w); display: block; width: 0; height: calc(var(--row-gap) - 5rem); pointer-events: none; &::before, &::after { content: ""; position: absolute; z-index: 1; left: 50%; border-radius: 50%; } &::before { top: 0; width: var(--dot-size); height: var(--dot-size); background: var(--c-node); transform: translate(-50%, -50%); scale: var(--dot, 1); } &::after { bottom: 0; width: var(--ring-size); height: var(--ring-size); border: var(--ring-border) solid var(--c-node); background: var(--c-bg); transform: translate(-50%, 50%); scale: var(--ring, 1); box-shadow: 0 0 0 var(--pulse, 0px) rgb(27 51 54 / var(--pulse-a, 0)); } } & .connector__line { position: absolute; inset: 0; display: block; border-left: var(--line); transform: scaleY(var(--draw, 1)); transform-origin: center top; } /* --------------------------------------------------------- Desktop: two-column zig-zag, repeating every 4 steps --------------------------------------------------------- */ @media (min-width: 861px) { & .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; /* lets the right-column step fill its row first */ column-gap: var(--col-gap); } /* Left column: 1, 4, 5, 8, 9, 12 … */ & .step:is(:nth-child(4n + 1), :nth-child(4n + 4)) { grid-column: 1; } /* Right column: 2, 3, 6, 7, 10, 11 … */ & .step:is(:nth-child(4n + 2), :nth-child(4n + 3)) { grid-column: 2; } /* Shared horizontal connector styles */ & .step:is(:nth-child(4n + 1), :nth-child(4n + 3)) .connector { top: calc(var(--img-h) / 2); height: 0; &::before, &::after { top: 50%; bottom: auto; transform: translate(-50%, -50%); } & .connector__line { border-left: 0; border-top: var(--line); transform: scaleX(var(--draw, 1)); } } /* → to the right (1→2, 5→6, 9→10 …) */ & .step:nth-child(4n + 1) .connector { left: calc(100% - 4.75rem); width: calc(4.75rem + var(--col-gap) / 2); &::before { left: 0; } &::after { left: 100%; } & .connector__line { transform-origin: left center; } } /* ← to the left (3→4, 7→8, 11→12 …) */ & .step:nth-child(4n + 3) .connector { left: calc(-1 * var(--col-gap) / 2 - 8rem); width: 8rem; &::before { left: 100%; } &::after { left: 0; } & .connector__line { transform-origin: right center; } } /* 4n+2 and 4n+4 keep the default vertical connector ↓ */ } /* --------------------------------------------------------- Responsive sizing --------------------------------------------------------- */ @media (max-width: 1200px) { --img-w: 16rem; --number-size: 19rem; --number-offset: 8rem; --col-gap: 5rem; } @media (max-width: 860px) { --img-w: 15rem; --number-size: 16rem; --number-offset: 7rem; --row-gap: 9rem; & .how-it-works__title { margin-bottom: 4rem; } & .connector { top: calc(100% + 2rem); height: calc(var(--row-gap) - 4rem); } } @media (max-width: 480px) { --img-w: 12.5rem; --number-size: 12rem; --number-offset: 6rem; } } @keyframes hiw-failsafe { to { opacity: 1; } }[mn="4304"] [image_display_option="dsg_3"]{ img{ width: auto !important; height: auto !important; } } [mn="4304"] .imgbx { line-height: 0; * { margin: 0; } img{ width: 100%; } } [mn="4304"] .iframebx { height: 100svh; background-attachment: fixed; width: 100%; &:not(:has( [href="RUN_VIDEO"] )){ cursor: pointer; } &:has( [href="RUN_VIDEO"] ){ .btnplay{ display: none !important; } } .playbtnbx{ position: absolute; left: 50%; top: 50%; translate: -50% -50%; gap: 15px; text-align: center; width: 900px; max-width: calc(100% - 30px); .btnplay { /* background-image: url(src/play_button.png); */ content: url(_src/4304_play_button_3.png); transition: .6s all ease; max-width: 100%; width: 90px; display: inline; } ._ittl{ width: auto; margin: 0!important; } .h4{ color: #fff; font-size: 150%; } } ._link{ .btn{ margin: 3px; } } } .licht4304.licht{ .contbx > .contbx-w{ padding: 0; } .contbx { aspect-ratio: 16/9; } .contm { background-color: #fff; } } /* ========================================================= Animation hooks (driven by 4304.js / anime.js) Defaults = finished state, so it looks right without JS. ========================================================= */ [mn="4304"] { /* title decor lines grow from the centre */ ._secttlbx .ttldecor- > div, .playbtnbx .ttldecor- > div { transform-origin: center; } /* Frame expand: the hero starts as an inset rounded card */ .iframebx.is-framing { clip-path: inset(var(--frame-y, 0) var(--frame-x, 0) round var(--frame-r, 0)); } /* Play button + pulse rings */ .iframebx .playbtnbx { .playholder { position: relative; line-height: 0; } /* opacity / transform are driven by anime.js, so keep them out of the button's own "transition: all" (it would smear the motion) */ .btnplay { position: relative; z-index: 1; transition-property: filter; } .playring { position: absolute; left: 50%; top: 50%; width: 90px; aspect-ratio: 1; translate: -50% -50%; border: 2px solid rgb(255 255 255 / 0.8); border-radius: 50%; pointer-events: none; } ._link .btn { transition-property: color, background-color, border-color, box-shadow, outline-color; } } /* Centre split: image opens from the middle outward. The clip sits on the box's content, not the box itself — a fully clipped element never counts as "in view" for IntersectionObserver, so the reveal would never start. */ .imgbx { overflow: hidden; &.is-splitting > * { clip-path: inset(0 var(--split, 0%) 0 var(--split, 0%)); } img { transform-origin: center; } } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, .iframebx, .imgbx) { opacity: 0; animation: mn4304-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, .iframebx, .imgbx) { opacity: 1; animation: none; } } } @keyframes mn4304-failsafe { to { opacity: 1; } } [mn="4113"]{ --tabBgClr: var(--tabBgClr_default, transparent); --tabBgClrActive: var(--tabBgClrActive_default, transparent); --tabTxtClr: var(--tabTxtClr_default, var(--clr01)); --tabTxtClrActive: var(--tabTxtClrActive_default, var(--clr01)); .accordiontabbxx, .accordiontabbx{ width: 900px; max-width: 100%; margin: 0 auto; } .btnbx{ margin: 15px 0 65px; @media(width<=575px){ .btn{ width: 100%; } } } .accordiontabbx:not(:has(._content)){ .btnbx{ margin: 0; } } .accordiontab{ border-top: 1px solid #ccc; position: relative; & ~ & { margin: 0 0 0; } & > * { padding: 21px 45px 21px 0; } .desc { .descw{ padding: 15px 0; } } .blurb{ transition: .3s all ease; font-size: 100%; color: #000; display: none; } .slide { overflow: clip; height: 0; padding: 0; transition: .3s all ease; } .title{ --div: 25px; .ttl-{ &.ttl-l{ flex: 0 0 var(--div); max-width: var(--div); } &.ttl-r{ flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); padding-left: 12px; } } } ._content{ margin: 0; } .top { line-height: 1; cursor: pointer; background-color: var(--tabBgClr); color: var(--tabTxtClr); transition: .6s all ease; &::after { content: ''; aspect-ratio: 1 / 1; width: 21px; /* background-image: url(_src/arrow.svg); background-size: contain; background-position: center; background-repeat: no-repeat; */ -webkit-mask-image: url(_src/arrow.svg); mask-image: url(_src/arrow.svg); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; background-color: var(--tabTxtClr); position: absolute; right: 15px; top: 21px; rotate: 0deg; transform-origin: center; transition: .6s all ease; @media (max-width: 575px){ width: 18px; } } } &.active{ .top{ background-color: var(--tabBgClrActive); color: var(--tabTxtClrActive); &::after { rotate: 180deg; background-color: var(--tabTxtClrActive); pointer-events: none; } } .slide{ height: auto; } .blurb{ height: 0; } } } } /* ============================================================================= Animation hooks (driven by 4113.js / anime.js) Defaults = finished state, so it looks right without JS. ============================================================================= */ [mn="4113"] { ._secttlbx .ttldecor- > div { transform-origin: center; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(.accordiontabbxx, .accordiontabbx) { opacity: 0; animation: mn4113-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(.accordiontabbxx, .accordiontabbx) { opacity: 1; animation: none; } } } @keyframes mn4113-failsafe { to { opacity: 1; } } /* ========================================================= Module 3042 — Hero slider Animation defaults = finished state, so it looks right without JS. Motion is driven by 3042.js (anime.js). ========================================================= */ [mn="3042"] { --ttlsize: 450%; padding: 0; @media (width <= 575px) { --ttlsize: 250%; } /* ---------- Layout wrappers ---------- */ .infobx { padding: 15px; } .bimgbx { line-height: inherit; } .bimgw { width: 100vw; line-height: inherit; } .formbx { padding: 30px 60px; @media (width <= 575px) { padding: 30px 21px; } } .swiper-wrapper { min-height: calc(100svh - var(--dekstickbx-height)); } /* ---------- Slide background ---------- */ .bimg { --bpt: 0%; position: relative; z-index: 1; height: 100%; /* Colour panel: sweeps in from the left (--panel) or fades up (--panel-o) */ &::after { --tone: 221 201 174; content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 900px; min-width: calc(50% + 200px); height: 100%; clip-path: polygon(0 0, calc(100% - 150px) 0, 100% 100%, 0 100%); opacity: var(--panel-o, 1); scale: var(--panel, 1) 1; transform-origin: left center; @media (width > 767px) { background: linear-gradient( 79deg, rgb(var(--tone)) 0%, rgb(var(--tone)) 50%, rgb(var(--tone) / 0) 90% ); } @media (width <= 767px) { background-color: rgb(var(--tone) / 0.5); } } /* Ken Burns layer: 3042.js moves the slide background here so it can zoom without scaling the text */ > .kbw { position: absolute; inset: 0; z-index: -2; overflow: hidden; /* clips only the zooming picture, never the text */ > .kb { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover; transform-origin: 60% 50%; will-change: transform; } } } /* ---------- Text & buttons ---------- */ /* Subtitle bar draws from the left */ .bar-h { display: inline-block; width: 30px; height: 2px; margin: 0 6px; vertical-align: middle; background-color: var(--clr01); transform-origin: left center; } /* Blur focus preset (class present only while the move plays) */ .a-blur { filter: blur(var(--blur, 0px)); } /* Opacity / transform are driven by anime.js */ ._link .btn { transition-property: color, background-color, border-color, box-shadow, outline-color; } /* ---------- Navigation arrows ---------- */ /* z-index 20 keeps arrows above the turning slide during a flip */ .swiper-button-next, .swiper-button-prev { --square: 35px; z-index: 20; width: var(--square); height: auto; aspect-ratio: 1 / 1 !important; border-radius: 50%; background-color: var(--clr01); &::after { font-size: 15px; color: #fff; @media (width <= 767px) { font-size: 9px; } @media (width <= 575px) { font-size: 9px; } } @media (width <= 767px) { width: 21px; padding: 6px; } @media (width <= 575px) { width: 21px; padding: 3px; } } /* ---------- Pagination ---------- */ .swiper-pagination { z-index: 20; padding: 9px 15px; text-align: right; @media (width > 767px) { padding: 9px 60px; } } .swiper-pagination-bullet { position: relative; width: auto; height: auto; margin: 3px 6px !important; padding: 3px 0; border-bottom: 3px solid transparent; border-radius: 0; font-family: var(--ft-t1); font-weight: bold; line-height: 1; text-align: center; color: #fff; background-color: transparent; opacity: 0.5; /* Active number fills an underline while the slide waits */ &::after { content: ''; position: absolute; right: 0; bottom: -3px; left: 0; height: 3px; background-color: currentColor; scale: var(--p, 0) 1; transform-origin: left center; } } .swiper-pagination-bullet-active { font-size: 130%; opacity: 1; } /* ---------- Pre-JS guard + failsafe ---------- */ &.is-anim-pending .swiper-slide :is(._subttl, ._btmsubttl, ._topsubttl, ._ittl, ._content, ._link) { opacity: 0; animation: mn3042-failsafe 0s linear 3s forwards; @media (prefers-reduced-motion: reduce) { opacity: 1; animation: none; } } } @keyframes mn3042-failsafe { to { opacity: 1; } }[mn="3103"] { --c3103: var(--clr01, #4b7667); --c3103-soft: #a9c0b7; --c3103-text: #1f2a26; --c3103-muted: #7a7a7a; --arrow3103: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9.5 1.5 14 6l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --wave3103: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 860' preserveAspectRatio='none'%3E%3Cpath d='M0 103 C 150 40, 300 90, 420 280 C 480 380, 530 460, 590 505 C 750 560, 950 460, 1070 365 C 1160 290, 1270 150, 1450 140 C 1560 135, 1640 170, 1720 240 C 1800 310, 1860 330, 1920 320' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); position: relative; overflow: hidden; color: var(--c3103-text); > .container-fluid { position: relative; z-index: 1; padding-right: 0; } /* ---------- Layout: intro (left) + slider (right) ---------- */ .divbx { --div: 480px; } .divw { flex-wrap: nowrap; align-items: center; gap: 100px; } .div- { min-width: 0; &.div-l { flex: 0 0 calc(var(--div) + 100px); max-width: calc(var(--div) + 100px); padding-left: 100px; } &.div-r { flex: 1 1 auto; } } /* ---------- Shared button look (arrow added with a mask) ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; min-width: auto; font-family: var(--ft3103-body); line-height: 1; border-radius: 50px; text-decoration: none; cursor: pointer; transition: color .3s, background-color .3s, border-color .3s; &::after { content: ''; flex: none; width: 16px; height: 12px; background-color: currentColor; mask: var(--arrow3103) center / contain no-repeat; transition: translate .3s; } &:hover::after { translate: 4px 0; } } ._link { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Intro (sectitle) ---------- */ .blogintro { display: flex; flex-direction: column; align-items: flex-start; ._ittl :is(h1, h2, h3, h4, h5, h6, .h4) { margin: 0 0 18px; font-family: var(--ft3103-title); font-weight: 300; font-size: 60px; line-height: 1.1; letter-spacing: -0.5px; color: var(--c3103-text); } :is(._subttl, ._topsubttl, ._btmsubttl, ._content) { margin-bottom: 32px; font-size: 120%; font-weight: 300; line-height: 1.3; letter-spacing: 1.5px; color: var(--c3103-text); p { margin: 0; } @media(width<=575px){ margin-bottom: 15px; } } .btn { padding: 18px 36px 16px; border: 3px solid var(--c3103); background-color: transparent; color: var(--c3103); font-size: 22px; font-weight: 500; &:hover { background-color: var(--c3103); color: #fff; } } } /* ---------- Nav ---------- */ .blognav { display: flex; gap: 18px; align-self: flex-end; margin-top: 24px; margin-right: -50px; } .navbtn { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 2px solid var(--c3103); border-radius: 50%; background: #fff; color: var(--c3103); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } &:hover:not(.swiper-button-disabled) { background-color: var(--c3103); color: #fff; } &.swiper-button-disabled { border-color: var(--c3103-soft); color: var(--c3103-soft); cursor: default; } &.swiper-button-lock { display: none; } &:focus-visible { outline: 2px solid var(--c3103); outline-offset: 3px; } } /* ---------- Slider ---------- Cards run past the right edge but are clipped on the left, so they never slide over the intro column. */ .mySwiper { width: 100%; margin: 0; overflow: visible; clip-path: inset(-40px -100vw -40px 0); } .swiper-slide { width: 438px; height: auto; } /* ---------- Card ---------- Rows (.wrap, in order): 1 image · 2 date · 3 title · 4 excerpt · 5 button */ .blogcard { display: flex; flex-direction: column; height: 100%; padding: 55px 25px 38px; background: #fff; border: 2px solid var(--c3103); border-radius: 24px; > .wrap { width: 100%; &:nth-child(1) { margin-bottom: 70px; &:empty { display: none; } } &:nth-child(2) { margin-bottom: 6px; font-size: 18px; font-weight: 500; line-height: 1.2; color: #3a3a3a; sup { font-size: 60%; line-height: 0; } } &:nth-child(3) { margin-bottom: 10px; font-size: 28px; font-weight: 500; line-height: 1.15; color: #000; } &:nth-child(4) { margin-bottom: 18px; font-size: 20px; font-weight: 300; line-height: 1.35; color: var(--c3103-muted); p { margin: 0; } } &:last-child { margin-top: auto; } } /* excerpt: 3 lines max */ .ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; white-space: normal; } .blogimg { width: 168px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .6s ease; } } &:hover .blogimg img { scale: 1.06; } .btn { gap: 8px; padding: 13px 24px 11px; border: 2px solid var(--c3103); background-color: var(--c3103); color: #fff; font-size: 16px; font-weight: 600; &::after { width: 13px; height: 10px; } &:hover { background-color: #fff; color: var(--c3103); } } } /* ---------- Responsive ---------- */ @media (width <= 1399px) { .divbx { --div: 400px; } .divw { gap: 70px; } .div-.div-l { padding-left: 60px; } .blogintro { ._ittl :is(h1, h2, h3, h4, h5, h6, .h4) { font-size: 52px; } :is(._subttl, ._topsubttl, ._btmsubttl, ._content) { font-size: 24px; } } .blognav { margin-right: -30px; } .swiper-slide { width: 400px; } } @media (width <= 991px) { padding: 90px 0; &::before { display: none; } .divw { flex-wrap: wrap; gap: 48px; } .div- { &.div-l, &.div-r { flex: 0 0 100%; max-width: 100%; } &.div-l { padding: 0 30px 0 18px; } &.div-r { padding-left: 18px; } } .blognav { align-self: flex-start; margin: 32px 0 0; } .swiper-slide { width: 360px; } .blogcard > .wrap:nth-child(1) { margin-bottom: 44px; } } @media (width <= 575px) { padding: 60px 0; .div- { &.div-l { padding: 0 16px 0 4px; } &.div-r { padding-left: 4px; } } .blogintro { ._ittl :is(h1, h2, h3, h4, h5, h6, .h4) { font-size: 40px; } :is(._subttl, ._topsubttl, ._btmsubttl, ._content) { font-size: 20px; letter-spacing: 1px; } .btn { padding: 14px 28px 12px; font-size: 18px; border-width: 2px; } } .navbtn { width: 46px; height: 46px; } .swiper-slide { width: 82vw; } .blogcard { padding: 36px 20px 28px; border-radius: 20px; > .wrap { &:nth-child(1) { margin-bottom: 32px; } &:nth-child(3) { font-size: 24px; } &:nth-child(4) { font-size: 17px; } } .blogimg { width: 130px; } } } @media (prefers-reduced-motion: reduce) { .blogcard .blogimg img, .btn::after { transition: none; } } } /* ========================================================= Animation hooks (driven by 3103.js / anime.js) ========================================================= */ [mn="3103"] { /* decor lines grow from the start edge */ .blogintro .ttldecor- > div { transform-origin: left center; } /* cards lean from their base while the slider moves */ .blogcard { transform-origin: 50% 100%; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(.blogintro, .blogcard) { opacity: 0; animation: mn3103-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(.blogintro, .blogcard) { opacity: 1; animation: none; } } } @keyframes mn3103-failsafe { to { opacity: 1; } }[mn="6001"] { & iframe { border: 1px solid #ccc; background-color: transparent; } /* ========================================================= Animation hooks (driven by 6001.js / anime.js) Defaults = finished state, so it looks right without JS. ========================================================= */ & ._secttlbx .ttldecor- > div { transform-origin: center; } & .DISP { transform-origin: 50% 0%; } /* three-dot loader shown until the form widget has rendered */ & .formloader { display: flex; justify-content: center; align-items: center; gap: 9px; padding: 45px 0; & span { width: 10px; aspect-ratio: 1; border-radius: 50%; background-color: var(--clr01, #999); opacity: 0.35; } } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, .DISP) { opacity: 0; animation: mn6001-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, .DISP) { opacity: 1; animation: none; } & .formloader { display: none; } } } @media (max-width: 767px) { } @keyframes mn6001-failsafe { to { opacity: 1; } }[mn="3046"]{ --secpb: 0; z-index: var(--zIndex_default, 1); --ttlsize: 450%; --listTtlSize_default: var(--ttlsize); --listAlignItm_default: center; min-height: calc(100dvh - var(--dekstickbx-height) + 2px); @media(width<=575px){ --ttlsize: 250%; } ._subttl { font-size: 120%; color: var(--clr02); } .col-text{ padding: 0 0 60px; @media(width<=767px){ padding: 0 0 21px; } } &.image_int{ @media (width>767px) { ._imgobj img { max-width: initial; } } } .rowbx{ --ObjImgMaru: var(--ObjImgMaru_default, 0); overflow: hidden; @media (width <= 1200px) { --ObjImgMaru: var(--ObjImgMaru_1200, 0); } @media (width <= 991px) { --ObjImgMaru: var(--ObjImgMaru_991, 0); } @media (width <= 767px) { --ObjImgMaru: var(--ObjImgMaru_767, 0); } @media (width <= 575px) { --ObjImgMaru: var(--ObjImgMaru_575, 0); } /* ================================== */ /* ================================== */ &>*.row{ align-items: var(--listAlignItm_default); } ._ittl{ --ttlalign: left; margin: var(--listingTtlMarg_default, 0 0 18px); & * { text-align: var(--listingTtlAlg_default); } & .h4 { color: var(--listingTtlClr_default, var(--secttlclr)); font-size: var(--listTtlSize_default); } } ._imgobj { text-align: center; @media(width>767px){ display: flex; justify-content: flex-end; } img{ margin: var(--ObjImgMaru); max-height: calc(100dvh - var(--dekstickbx-height) - var(--secpt)); } } /* stacked rows only when Swiper is missing (see .no-slider) */ .no-slider &~&{ margin-top: 30px; } @media (max-width: 1100px) { ._imgobj img { max-height: 600px; } } ._imgobj { margin: 0; line-height: 0 } @media (max-width: 767px) { ._imgobj { margin: 0 0 15px; } ._imgobj img { max-height: unset; } } } &.dsg_1{ .rowbx:nth-child(even){ .row{ flex-direction: row-reverse; } ._imgobj { @media(width>767px){ justify-content: flex-start; } } } } &.dsg_2{ .rowbx:nth-child(odd){ .row{ flex-direction: row-reverse; } ._imgobj { @media(width>767px){ justify-content: flex-start; } } } .rowbx:nth-child(even){ ._imgobj { @media(width>767px){ justify-content: flex-end; } } } ._imgobj{ @media(width>767px){ display: flex; justify-content: flex-start; } } } .row{ @media(width <= 767px){ flex-direction: column-reverse !important; } ._imgobj { margin: 0 !important; } } } /* ========================================================= Slider (Swiper, created by 3046.js) Each .rowbx is a .swiper-slide. Slides keep the image anchored to the bottom of the section. Pagination number colour: --sw-clr. ========================================================= */ [mn="3046"]{ .slider3046{ --sw-clr: var(--decorClr_default, var(--clr02, #2f3a2f)); .swiper{ width: 100%; } .rowbx.swiper-slide{ display: flex; align-items: flex-end; height: auto; & > .row{ flex: 1 1 auto; min-width: 0; } } /* ---------- Navigation arrows (same as module 3042) ---------- Swiper places them: vertically centred on the left / right edge of the slider. z-index 20 keeps them above the slides. */ .swiper-button-next, .swiper-button-prev{ --square: 35px; z-index: 20; width: var(--square); height: auto; aspect-ratio: 1 / 1 !important; border-radius: 50%; background-color: var(--clr01); &::after{ font-size: 15px; color: #fff; @media (width <= 767px){ font-size: 9px; } } @media (width <= 767px){ width: 21px; padding: 6px; } @media (width <= 575px){ width: 21px; padding: 3px; } } /* ---------- Pagination (same as module 3042) ---------- Numbers sit bottom-right over the slides. */ .swiper-pagination{ z-index: 20; box-sizing: border-box; /* width 100% + padding stays inside the slider */ padding: 9px 15px; text-align: right; @media (width > 767px){ padding: 9px 60px; } /* numbered bullets (01, 02 ...) */ .swiper-pagination-bullet{ position: relative; width: auto; height: auto; margin: 3px 6px !important; padding: 3px 0; border-bottom: 3px solid transparent; border-radius: 0; font-family: var(--ft-t1); font-weight: bold; line-height: 1; text-align: center; color: var(--sw-clr); background-color: transparent; opacity: 0.5; /* active number fills an underline while autoplay waits */ &::after{ content: ''; position: absolute; right: 0; bottom: -3px; left: 0; height: 3px; background-color: currentColor; scale: var(--p, 0) 1; transform-origin: left center; } } .swiper-pagination-bullet-active{ font-size: 130%; opacity: 1; } } /* one slide, or no Swiper at all: no controls */ &.is-single, &.no-slider{ .swiper-button-next, .swiper-button-prev, .swiper-pagination{ display: none; } } /* Swiper missing: fall back to stacked rows */ &.no-slider{ .swiper-wrapper{ display: block; } .rowbx.swiper-slide{ width: auto; } } } } /* ============================ */ /* // customise */ [mn="3046"]{ &.cus_contentbx{ .contentbx{ @media(width > 767px){ translate: 0 -40%; } } ._imgobj{ justify-content: flex-end !important; } } &.ori_center{ --secpb: 60px; align-items: center !important; } } /* ========================================================= Animation hooks (driven by 3046.js / anime.js) Defaults = finished state, so it looks right without JS. ========================================================= */ [mn="3046"]{ /* border lines draw in: top from the left, bottom from the right */ ._border-top { transform-origin: left center; } ._border-bottom { transform-origin: right center; } /* title decor lines */ ._secttlbx .ttldecor- > div { transform-origin: center; } .rowbx ._ittl .ttldecor- > div { transform-origin: left center; } /* Slice curtain over the main image (built and removed by 3046.js). Each strip clips its own copy of the image, which rises from the bottom edge — so the picture stays anchored to the bottom. */ .col-image{ z-index: -1; } .col-image ._imgobj { .curtain { position: absolute; z-index: 1; pointer-events: none; } .curtain__strip { position: absolute; top: 0; bottom: 0; overflow: hidden; } .curtain__fill { position: absolute; inset: 0; background-repeat: no-repeat; will-change: transform; } /* Backdrop shape (3046.js inserts and places it behind the image). Colour: a deeper tone of the section background; override with --backdrop-clr on the section or row. */ .backdrop { position: absolute; z-index: 0; overflow: visible; pointer-events: none; transform-origin: 50% 100%; path { fill: var(--backdrop-clr, color-mix(in srgb, var(--secbgclr, #ddc9ae), #000 12%)); } } /* keep the image above the backdrop */ & > img { position: relative; z-index: 1; } /* rise from the floor: pushed down by --rise, bottom clipped by the same amount, so it emerges at the bottom edge */ img.is-rising { translate: 0 var(--rise, 0px); clip-path: inset(0 0 var(--rise, 0px) 0); } /* Light sweep (3046.js positions it over the image and masks it with the image, so transparent areas never shine). */ .shine { --shine-x: 100%; /* parked off-image; animated 100% -> 0% */ position: absolute; z-index: 2; pointer-events: none; background-image: linear-gradient( 105deg, transparent 40%, rgb(255 255 255 / 0.18) 45%, rgb(255 255 255 / 0.45) 50%, rgb(255 255 255 / 0.18) 55%, transparent 60% ); background-size: 250% 100%; background-position: var(--shine-x) 0; background-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } } /* Buttons: opacity / transform are driven by anime.js (entrance + magnetic hover), so keep them out of any site-wide ".btn { transition: all }" — otherwise the hidden start state fades instead of applying at once. */ .txtbx ._link .btn { transition-property: color, background-color, border-color, box-shadow, outline-color; } /* Pre-JS guard + failsafe */ &.is-anim-pending :is(._secttlbx, ._border-, .rowbx) { opacity: 0; animation: mn3046-failsafe 0s linear 3s forwards; } @media (prefers-reduced-motion: reduce) { &.is-anim-pending :is(._secttlbx, ._border-, .rowbx) { opacity: 1; animation: none; } } } @keyframes mn3046-failsafe { to { opacity: 1; } }