[mn="1000"]{ --ttlClru_default: var(--secttlclr); &.btn_full{ .taste .btn{ width: 100%; border-radius: 50px; } } ._ittl{ .h4{ color: var(--ttlClru_default); } } ._subttl { text-align: var(--ttlalign); } .txtbx~.txtbx { margin-top: 30px; } ._content { margin: 0; } ._imgobj { margin: 15px 0; } .taste { margin: 15px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: var(--secalign); } .ttlbx { margin: 0 0 45px; border-left: 9px solid var(--clr01); padding-left: 21px; text-align: left; font-family: var(--ft-t1); .h4 { text-align: inherit; } } } [mn="1000"]{ [dna="content"]{ &.divbx{ --div: 60%; margin: 0 0 21px; @media(media<=767px){ --div: 50%; } } &.div-{ &.div-l{ border-bottom: 2px solid #ccc; padding-right: 15px; } @media(width<=575px){ flex: 0 0 100% !important; max-width: 100% !important; } } ._imgobj{ margin: 0; } } } [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%; } } } } } /* ============================================================================= 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="8028"] 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="8028"] { --secttlmarg_default: 0; /* position: absolute; */ inset: 0 auto auto 0; z-index: 5; padding: 1px 0; line-height: 1; background-color: #fff; @media (width < 768px) { display: none; } /* --- Buttons --------------------------------------------------------- */ .btn { --btnbgclr: var(--clr01, #fff); --btnbgclrhov: var(--clr02, #fff); --btnclr: var(--clr02x, #fff); --btnclrhov: var(--clr01x, #fff); } /* --- 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: 6px 0; margin: 0 0 6px; background-color: var(--clr03x); border-bottom: 1px solid #ccc; } /* --- 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; border-right: 1px solid #fff; .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; border-left: 1px solid #ccc; } @media (width < 768px) { .bar-l, .bar-r { flex: 0 0 100%; max-width: 100%; } } } } /* ============================================================================= 2. NAVIGATION ============================================================================= */ nav { line-height: 1; * { 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(--clr02); } } /* 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: 120%; & > ul { 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(--clr02x, #fff); translate: 0 -101%; transition: 2s all cubic-bezier(.075, .82, .165, 1); @media (width < 768px) { display: none; } nav{ font-size: 120%; } .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(--clr02x, #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(--clr01); --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(--clr01, #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="8028"]) .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="8231"] { margin-top: auto; [gene="Info"]{ [dna="Info"]{ &.divbx{ --div: 300px; line-height: inherit; } &.divw{} &.div-{ &.div-l{ padding-right: 21px; } @media(width<=575px){ flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; text-align: center; img{ max-height: 60px; } } } } } } [mn="8231"] .sitemap { ul { --div: 100%; list-style-type: none; list-style: none; margin: 0; padding: 0; } ._content>ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; text-align: inherit; } ._content>ul>li { flex: 0 0 var(--div); max-width: var(--div); margin: 0 0 6px } li~li { margin: 3px 0 0 } } [mn="8231"] ._imgobj { margin: 0 0 15px } [mn="8231"] a { color: inherit; text-decoration: none; } [mn="8231"] .mediabx { --gap: 9px; margin: 0 0 9px; a { --iconclr: var(--clr01x, #fff); --iconhovclr: var(--clr01x, #fff); --bgclr: var(--clr02x, transparent); --bghovclr: var(--clr01, #fff); --mediaborder: 2px solid #fff; --mediahovborder: 2px solid var(--clr01); --square: 35px; padding: 6px; margin: 0; border-radius: 50%; } @media(width<=767px){ & > .f{ justify-content: center; } } } [mn="8231"] .ttl { margin: 0px 0 9px; font-family: var(--ft-t1); line-height: 1; font-size: 120%; &.font_inherit{ font-family: inherit; } } [mn="8231"] .copyright { font-size: 80%; font-family: var(--ft-t2); } [mn="8231"] .copyright>* { padding: 30px 15px 0; } [mn="8231"] .copyrightw>* { flex: 0 0 100%; } [mn="8231"] a { text-underline-offset: 3px; } [mn="8231"] a:hover { text-decoration: underline; } @media (max-width: 991px) { [mn="8231"] .empty { display: none; } [mn="8231"] .sitemap ul { --div: 100%; } } @media (max-width: 767px) { [mn="8231"] .copyrightw { justify-content: center; } [mn="8231"] .copyrightw .mediabx>* { justify-content: center; } [mn="8231"] .copyrightw>* { flex: 0 0 100%; max-width: 100%; } [mn="8231"] .sitemap ul { --div: 100%; } [mn="8231"] .newsletterbx { width: 250px; margin: 0 auto; } [mn="8231"] .newsletterbx, [mn="8231"] { text-align: center } } @media (max-width: 575px) { [mn="8231"] .sitemap ul { --div: 100%; } } /* ================== */ [mn="8231"] .line { border-top: 1px solid #fff; } [mn="8231"] .contactbx { border-top: 1px solid #fff; margin: 30px 0 0; .divbx{ --div: 120px; line-height: inherit; & ~ & { margin-top: 6px; } } .contactm { flex: 0 0 50%; max-width: 50%; padding: 30px 15px 15px; justify-content: center; display: flex; flex-wrap: wrap; &:nth-child(1) { flex: 0 0 33.3333%; max-width: 33.3333%; border-right: 1px solid #fff; text-align: center; .mediabx{ & > * { justify-content: center; } } } &:nth-child(2) { flex: 0 0 33.3333%; max-width: 33.3333%; border-right: 1px solid #fff; } &:nth-child(3) { flex: 0 0 33.3333%; max-width: 33.3333%; } } @media(width<=767px){ .contactm { flex: 0 0 100% !important; max-width: 100% !important; border: 0 !important; text-align: center; & ~ & { border-top: 1px solid #fff !important } } } } [mn="2018"] { min-height: 450px; z-index: 1; overflow: hidden; aspect-ratio: 16 / 4.5; /* --ttlsize: 350%; */ --secftclr: #fff; --secttlclr: #fff; @media(width<=575px){ min-height: 250px; aspect-ratio: initial; } ._content{ max-width: 600px; } ._subttl{ font-family: var(--ft-t2); } .h4 { margin: 0; position: relative; font-weight: inherit; &::before{ display: none; } } .contentbx { margin: 0; position: relative; z-index: 1; max-width: 100%; /* font-weight: bold; */ /* padding: 30px 60px 30px 0; */ & > * { flex-direction: column; } ._ittl{ margin: 0 0 3px; } } .hori_line{ border-top: 3px solid var(--clr01); } .ttldecor-btm{ display: none !important; } } [mn="1008"]{ z-index: var(--zIndex_default, 1); --listTtlSize_default: 210%; --listAlignItm_default: center; --listingTtlAlg_default: left; ._subttl { font-size: 120%; font-family: var(--ft-t2); margin: 0 0 15px; } .btnbx:has(.btn_enlarge_image){ width: var(--image-width); padding: 15px 0; } &.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{ margin: var(--listingTtlMarg_default, 0 0 18px); text-align: var(--listingTtlAlg_default, var(--ttlalign)); & * { text-align: var(--listingTtlAlg_default, var(--ttlalign)); } & .h4 { color: var(--listingTtlClr_default, var(--secttlclr)); font-size: var(--listTtlSize_default); font-family: var(--ft-t1); } } ._imgobj { text-align: center; @media(width>767px){ display: flex; justify-content: flex-end; } img{ margin: var(--ObjImgMaru); } } &~&{ 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; } } } } /* ============================ */ /* // customise */ [mn="1008"]{ &.contentbx_340{ .contentbx{ max-width: 340px; } } /* .txtbx{ border-left: 1px solid #ccc; padding-left: 35px; &::after{ content: ''; position: absolute; height: 60px; width: 6px; background-color: #000; top: 0; left: 0; translate: -50% 0; } } */ &.img_translate{ ._imgobj{ img { @media(width>767px){ margin: 0 0 -120px; } } } } } /* ======================== */ [mn="4314"]{ ._iframe{ width: 100%; iframe{ width: 100%; aspect-ratio: 12 / 9 !important; } } .contentbx{ background-color: #000; color: #fff; padding: 35px; border-radius: 21px; } } [mn="4314"] .itm { margin: 0 -3px; gap: 15px 0; line-height: 1.2; .itm-l, .itm-r { flex: 0 0 50%; max-width: 50%; padding: 0 3px; @media(width<767px){ flex: 0 0 100%; max-width: 100%; } } .itm-r{ position: relative; z-index: -3; @media(width>767px){ &::after{ content: ''; display: block; width: calc(100% + 90px); height: 3px; background-color: #ccc; position: absolute; top: 0; left: 0; } } } .itm-l{ @media(width>767px){ padding-left: 15px; } } .title { font-family: var(--ft-t1); font-size: 150%; margin: 0 0 15px; color: var(--clr01); } } [mn="4314"] .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); } } [mn="4008"]{ --secftclr: #fff; background-color: #000; min-height: 110svh; ._secttlbx{ margin: 0 0 45px; padding: 0 0 30px; border-bottom: 2px solid var(--clr01); } ._imgobj { margin: 0; } ._ittl{ margin: 0; h4{ font-size: 150% } } [dna="1"]{ &.divbx{ --div: 300px; } &.divw{ gap: 18px 0; } @media(width<=767px){ &.div-{ flex: 0 0 100%; max-width: 100%; } } } [dna="2"]{ &.divbx{ --div: 30px; } } [dna="objectImage"]{ &.divbx{ --div: 60px; } &.div-r{ padding-left: 12px; font-size: 130%; } } .tablistbx{ line-height: 1; [tabid]{ padding: 12px; border: 1px solid #aaa; color: #aaa; border-radius: 50px; cursor: pointer; transition: .3s all ease; &:hover{ border: 1px solid #fff; color: #fff; } &.active{ border: 1px solid #fff; color: #000; background-color: #fff; } } } [bglyr_id]{ z-index: -10; opacity: 0; transition: .6s all ease; &.active{ opacity: 1; } } .displayer{ @media(width>767px){ padding-right: 21px; } } } [mn="4008"] .notebx{ padding: 35px 0; border-top: 2px solid #fff; border-bottom: 2px solid #fff; margin: 30px 0 0; }[mn="1063"]{ .categorylistbx{ --listset-gap: 30px; @media(width<=575px){ --listset-count: 1; } .categorylistw{ .categorybx{ .categoryw{ background-color: #fff; padding: 60px 21px; border-radius: 21px; height: 100%; @media(width<=767px){ padding: 15px; } } ._content{ margin: 21px 0 0; } ._imgsec{ position: absolute; z-index: -1; img{ border-radius: 21px; } } &:nth-child(odd){ ._imgsec{ bottom: 0; right: 0; translate: -60px -30px; } } &:nth-child(even){ ._imgsec{ top: 0; left: 0; translate: 60px 30px; } } } } .btnbx{ text-align: center; padding: 15px 0; } .title{ font-size: 200%; line-height: 1; font-family: var(--ft-t1); } :where(._imgobj, ._imgsec){ margin: 0; } } [dna="1"]{ &.divbx{ --div: 90px; :where(._ittl ._subttl, ._topsubttl, ._btmsubttl){ width: auto; } ._secttlbx{ margin: 0; } } &.div-{ &.div-l{ } &.div-r{ padding-left: 15px; } } } } [mn="7016"]{ --count: var(--count_default, 2); @media (width <= 991px) { --count: var(--count_991, 2); } @media (width <= 767px) { --count: var(--count_767, 1); } @media (width <= 575px) { --count: var(--count_575, 1); } } [mn="7016"]{ .categorylistbx { --listset-count: var(--count); text-align: center; .categorylistw{ justify-content: center; } .categorybx{ border-radius: 15px; background-color: #000; padding: 35px 21px; color: #fff; } } .bimgw { padding: 0; .bimg { --bpt: 95px; @media(width<=575px){ --bpt: 95px; } } } .title { line-height: 1.3; font-family: var(--ft-t1); margin: 9px 0; font-size: 150%; color: var(--clr01); } .infobx { width: 350px; max-width: 100%; margin: 6px auto; } .contentbx:has(._content){ margin: 30px 0 0; ._content{ width: 500px; max-width: 100%; margin: 0 auto; } } } /* =================== */ /* =================== */ /* =================== */ [mn="7016"]{ &.theme_rev{ .categorylistbx { .categorybx{ background-color: #fff; color: #000; } } } } [mn="3044"] { [dna="1"]{ &.divbx{ --div: 90px; margin: 0 0 15px; @media(width<575px){ --div: 60px; } :where(._ittl ._subttl, ._topsubttl, ._btmsubttl){ width: auto; } ._secttlbx{ --secttlclr: var(--clr02); --ttlalign: left; margin: 0; } .ttldecor-btm{ display: none; } } &.div-{ &.div-l{ } &.div-r{ padding-left: 15px; } } } /* .swiper-wrapper { align-items: flex-end; } */ .mySwiper { @media (width <=575px) { overflow: visible; } .swiper-slide { .cardbx{ border-radius: 21px; padding: 21px; background-color: #fff; } } .swiper-slide .bimgbx { display: flex; justify-content: center; align-items: flex-end; } .swiper-slide ._imgobj { margin: 0 } .swiper-pagination { position: relative; margin: 15px 0 0; } .swiper-button-next, .swiper-button-prev { aspect-ratio: 1 / 1 !important; /* background-color: var(--clr01); */ width: 40px; height: auto; border-radius: 50%; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } } } @media only screen and (max-width: 767px) {} [mn="1064"]{ --cus-grad-to-down: var(--clr01); .groupbx{ font-size: 120%; .group-{ & ~ &{ margin-top: 60px; } } } .barbx{ .barw{ width: 100%; height: 15px; border-radius: 50px; background-color: var(--clr03); display: block; } .bar-{ background-color: var(--clr01); height: 100%; width: 0; top: 0; left: 0; transition: .6s all .9s ease; border-radius: 50px; } .percentbx{ background-color: var(--clr01); color: #fff; position: absolute; right: 0; bottom: 100%; translate: 50% -9px; font-size: 70%; font-family: var(--ft1); line-height: 1; padding: 9px; border-radius: 3px; &::after{ content: ''; display: block; position: absolute; left: 50%; bottom: 0; translate: -50% 50%; aspect-ratio: 1; width: 9px; clip-path: polygon(100% 0, 0% 100%, 100% 100%); background-color: var(--clr01); rotate: 45deg; } } } .title{ font-size: 130%; margin: 0 0 30px; } ._subttl { font-family: var(--ft-t2); color: #888 /* font-size: 160%; */ } .btn { margin: 0 0 9px; } .taste a:not(.btn) { font-family: var(--ft-t3); color: var(--clr03); } ._imgobj{ img{ position: sticky; top: 90px; } } .themebx{ --div: 90px; .theme-{ flex: 0 0 100%; max-width: 100%; /* &.theme-l{ flex: 0 0 var(--div); max-width: var(--div); padding-right: 21px; } &.theme-r{ flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); } */ } ._secttl{ writing-mode: sideways-rl; margin: 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 15px; line-height: 1; background-color: var(--cus-grad-to-down); /* background-image: var(--cus-grad-to-down); */ color: #fff; font-size: 150%; } } } /* =================== */ /* =================== */ [mn="1064"] .iconlistbx { --flex: 50%; margin: 30px 0; /* border-top: 1px solid #eee; */ /* border-left: 1px solid #eee; */ line-height: 1; gap: 15px 0; @media(width<575px){ --flex: 100%; } ._imgobj{ margin: 0; } .num{ line-height: 1; font-variant-numeric: tabular-nums; font-size: 230%; font-family: var(--ft-t1); & span{ font-variant-numeric: tabular-nums; } } .iconbx { --div: 65px; flex: 0 0 var(--flex); max-width: var(--flex); background-color: transparent; padding: 0 15px 0 0; line-height: 1.3; .icon-l{ flex: 0 0 var(--div); max-width: var(--div); } .icon-r { flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); text-align: left; padding-left: 15px; } .iconw { padding: 9px; border-radius: 9px; } & img { max-height: 45px; } ._content{ margin: 9px 0 0; font-size: 85%; } } } /* =================== */ /* =================== */ [mn="1064"]{ ._ittl{ .ttldecor-btm::after { content: ''; display: inline-block; height: 6px; width: 90px; background-color: var(--clr01); margin: 15px 0 0; } } } [mn="1064"].dsg_1 { .row{ flex-direction: row-reverse; } }/* ============================================================================= 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: inherit; } .decorbar{ line-height: 0; margin: 6px 0; &::after{ content: ''; width: 60px; height: 3px; display: inline-block; background-color: #fff; vertical-align: middle; } } } /* --- 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: 21px; } .bimg { --bpt: 120%; 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 0; font-family: var(--ft-t1); font-size: 170%; } } /* ============================================================================= 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: 15px 0; 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); } ._subttl { margin: 0 0 15px; font-family: var(--ft-t1); font-style: italic; color: var(--clr04); } /* --- 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); } } } [mn="3045"] { padding: 0; .infobx { padding: 15px } .bimgbx { line-height: inherit; } .bimgw { width: 100vw; line-height: inherit; } .bimg { --bpt: 0%; aspect-ratio: 2 / 1; z-index: 1; position: relative; } .formbx { padding: 30px 45px } .contentbx{ padding: 45px 0; .contentw{ padding: 21px; border-radius: 21px; background-color: #fff; } &::after{ content: ''; display: block; position: absolute; right: 0; top: 50%; z-index: -1; translate: -60px -50%; height: 100%; width: 100svw; background-color: var(--clr02); } } .swiper-button-next, .swiper-button-prev { --square: 35px; aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: var(--square); height: var(--square); height: auto; border-radius: 50%; z-index: 2; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } @media only screen and (max-width: 767px) { .swiper-button-next, .swiper-button-prev { width: 21px; font-size: 9px; padding: 6px; } } @media only screen and (max-width: 575px) { .bimg { aspect-ratio: 2 / 1.5; } } .bar-h{ display: inline-block; height: 2px; width: 30px; background-color: var(--clr01); vertical-align: middle; margin: 0 6px; } .swiper-slide{ --transition: .9s all .9s ease; ._ittl{ margin: 0 0 15px; border-bottom: 3px solid #d89b1f; } ._subttl, ._ittl{ transition: var(--transition); opacity: 0; translate: 0 -100px; width: auto; } ._subttl{ transition: .9s all 1.3s ease; } ._content{ transition: var(--transition); opacity: 0; translate: 100px 0; } ._link{ transition: var(--transition); opacity: 0; display: flex; flex-wrap: wrap; gap: 6px; } &.swiper-slide-active{ ._subttl, ._ittl, ._content, ._link { opacity: 1 !important; translate: 0 0 !important; } } } .swiper-pagination-bullet { width: auto; height: auto; padding: 3px 0; margin: 3px 6px !important; background-color: transparent; color: #fff; font-family: var(--ft-t1); border-bottom: 3px solid transparent; border-radius: 0; opacity: 1; line-height: 1; text-align: center; font-weight: bold; } .swiper-pagination{ text-align: right; padding: 9px 15px; @media(width>767px){ padding: 9px 60px; } } .swiper-pagination-bullet { opacity: .5; } .swiper-pagination-bullet-active { opacity: 1; font-size: 130%; } } [mn="1027"] ._imgobj { text-align: center; margin: 15px auto; } [mn="1027"] ._subttl { font-size: 100%; } [mn="1027"] .btn { margin: 0 0 9px; } [mn="1027"] h4 { margin: 0 0 15px; } [mn="1027"] .txtbglyr { position: absolute; width: auto; text-align: center; white-space: nowrap; font-size: 2500%; z-index: -1; color: #ffecf8; left: 50%; top: 0; translate: -50% 0; font-family: var(--ft-t1); line-height: 1; pointer-events: none; } [mn="1027"] .taste a:not(.btn) { font-family: var(--ft-t3); color: var(--clr03); } [mn="1027"] .btn { min-width: auto; padding: 0; color: var(--clr01); background-color: transparent; border: 0; } @media (max-width: 767px) { [mn="1027"] ._imgobj { text-align: inherit; margin: 0 0 15px; } } @media (max-width: 575px) { [mn="1027"] .txtbglyr { font-size: 18vw; left: 0; top: 60px; translate: 0 0; writing-mode: vertical-lr; transform-origin: center; } }/* ============================================================================= 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: -1; @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: #d89b1f; } } } .col-r{ padding: 25px; background-color: #000; color: #fff; @media(width>767px){ min-height: 50svh; } .bglyr{ left: 0; top: 0; @media(width>767px){ width: 50svw; } } } /* --- Image ------------------------------------------------------------ */ ._imgobj { margin: 15px auto; text-align: center; @media (width <= 767px) { margin: 0 0 15px; text-align: inherit; } } /* --- Links & buttons -------------------------------------------------- */ .btn { min-width: auto; margin: 0 0 9px; padding: 0; border: 0; background-color: transparent; color: var(--clr01); } .taste a:not(.btn) { font-family: var(--ft-t3); color: var(--clr03); } /* --- 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; } } }