/** * Shared EN-authoritative visual system for localized Live Animals children. * Standard rules normalized from sealed EN page 29417. */ /* * This asset is enqueued only for the six accepted category route families. * Escape WoodMart's page-level .container while every visual band keeps its * own EN-authoritative centered inner shell below. */ #main-content.wd-content-layout.content-layout-wrapper.container { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; } .gekumi-catalog-category{--ink:#101713;--forest:#1d2821;--ivory:#f5f2ea;--stone:#ece7dc;--white:#fff;--text:#172019;--muted:#626a63;--border:#d7d1c5;--soft:#e8e3d9;--moss:#6e7a68;--earth:#9a6148;--shell:1280px;--side:40px;--r1:18px;--r2:14px;width:100%;color:var(--text);background:var(--ivory);font-family:Inter,"Noto Sans",Arial,Helvetica,system-ui,sans-serif!important;font-size:16px;font-style:normal!important;line-height:1.6;overflow-x:clip} .gekumi-catalog-category *,.gekumi-catalog-category *:before,.gekumi-catalog-category *:after{box-sizing:border-box} .gekumi-catalog-category h1,.gekumi-catalog-category h2,.gekumi-catalog-category h3,.gekumi-catalog-category h4{margin:0!important;color:inherit!important;font-family:Inter,"Noto Sans",Arial,Helvetica,system-ui,sans-serif!important;font-style:normal!important;font-weight:650!important;text-transform:none!important;text-decoration:none!important}.gekumi-catalog-category p{margin:0;font-family:inherit!important;font-style:normal!important}.gekumi-catalog-category a{color:inherit!important;text-decoration:none!important}.gekumi-catalog-category button,.gekumi-catalog-category input,.gekumi-catalog-category select{font:inherit} .gekumi-catalog-category:lang(ja){font-family:"Noto Sans JP","Yu Gothic",system-ui,sans-serif!important}.gekumi-catalog-category:lang(ko){font-family:"Noto Sans KR","Malgun Gothic",system-ui,sans-serif!important} .gcc-shell{width:min(var(--shell),calc(100% - (var(--side)*2)));margin-inline:auto}.gcc-section{padding-block:88px}.gcc-eyebrow{margin-bottom:16px;color:var(--moss);font-size:11px;font-weight:800;letter-spacing:.15em;line-height:1.35;text-transform:uppercase}.gcc-eyebrow-light{color:#b7c1b8}.gcc-title{max-width:780px;color:var(--text)!important;font-size:clamp(39px,4vw,58px)!important;font-weight:650!important;letter-spacing:-.045em!important;line-height:1.04!important}.gcc-intro{max-width:690px;margin-top:21px;color:var(--muted);font-size:16px;line-height:1.72} .gcc-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.gcc-btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink)!important;font-size:13px;font-weight:700;line-height:1.2;cursor:pointer;transition:.2s ease}.gcc-btn-primary{background:var(--ink);color:#fff!important}.gcc-btn-light{border-color:rgba(255,255,255,.45);color:#fff!important}.gcc-btn:hover{transform:translateY(-1px)} .gcc-media{position:relative;overflow:hidden;background:linear-gradient(145deg,#d9d4ca,#b9b7af);background-position:center;background-size:cover}.gcc-media.has-image .gcc-placeholder{display:none}.gcc-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;color:rgba(23,32,25,.5);font-size:10px;font-weight:800;letter-spacing:.12em;text-align:center;text-transform:uppercase} /* HERO */ .gcc-hero{padding-block:76px;background:radial-gradient(circle at 78% 42%,rgba(110,122,104,.13),transparent 30%),var(--ivory)}.gcc-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);align-items:center;gap:72px}.gcc-hero-copy{max-width:700px}.gcc-hero h1{max-width:720px;color:var(--text)!important;font-size:clamp(52px,5vw,72px)!important;font-weight:650!important;letter-spacing:-.055em!important;line-height:.99!important}.gcc-hero-description{max-width:650px;margin-top:27px;color:var(--muted);font-size:17px;line-height:1.72}.gcc-dev-line{margin-top:28px;color:#777f77;font-size:10px;font-weight:800;letter-spacing:.14em}.gcc-hero-visual{position:relative;min-height:470px}.gcc-hero-image{position:absolute;inset:0;border-radius:22px}.gcc-hero-chip{position:absolute;left:24px;bottom:24px;max-width:78%;padding:12px 15px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(16,23,19,.76);backdrop-filter:blur(10px);color:#fff;font-size:11px;font-weight:700} /* SPECIES */ .gcc-species{background:#fff}.gcc-species-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}.gcc-species-card{overflow:hidden;border:1px solid var(--border);border-radius:var(--r1);background:#fff;transition:.2s ease}.gcc-species-card:hover{transform:translateY(-2px);border-color:#b9b2a6}.gcc-species-image{aspect-ratio:4/3}.gcc-species-body{padding:19px}.gcc-species-name{color:var(--text);font-size:18px;font-weight:700}.gcc-scientific{margin-top:4px;color:#59635b;font-family:Georgia,"Times New Roman",serif!important;font-size:14px;font-style:italic!important}.gcc-species-link{display:inline-block;margin-top:15px;color:#606961;font-size:12px;font-weight:700} /* CONTEXT */ .gcc-context{background:var(--stone)}.gcc-context-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:80px}.gcc-context-panel{display:grid;grid-template-columns:1fr 1fr;gap:1px;overflow:hidden;border:1px solid #d2cabd;border-radius:var(--r1);background:#d2cabd}.gcc-context-item{min-height:118px;display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:rgba(255,255,255,.72)}.gcc-context-item span:first-child{color:#7b837c;font-size:9px;font-weight:800;letter-spacing:.11em}.gcc-context-item strong{color:var(--text);font-size:17px;line-height:1.3} /* CATALOG */ .gcc-catalog{background:var(--ivory)}.gcc-catalog-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;margin-bottom:34px}.gcc-search-wrap{margin-bottom:32px}.gcc-search{min-height:58px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:0 18px 0 20px;border:1px solid var(--border);border-radius:999px;background:#fff}.gcc-search-icon{color:#768078;font-size:18px}.gcc-search input{width:100%;padding:0;border:0!important;outline:0!important;background:transparent!important;color:var(--text);font-size:14px}.gcc-search input::placeholder{color:#969d97}.gcc-search-clear{border:0;background:transparent;color:#767e77;font-size:11px;font-weight:700;cursor:pointer}.gcc-catalog-layout{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start;gap:30px} .gcc-filters{position:sticky;top:100px;align-self:start;padding:24px;border:1px solid var(--border);border-radius:var(--r1);background:#fff}.gcc-filter-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.gcc-filter-heading strong{font-size:13px;letter-spacing:.08em}.gcc-clear-filters{border:0;background:none;color:#777f78;font-size:10px;font-weight:700;cursor:pointer}.gcc-filter-group{padding-block:16px;border-top:1px solid var(--soft)}.gcc-filter-label{display:block;margin-bottom:9px;color:#606961;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.gcc-filter-group select{width:100%;min-height:42px;padding:8px 33px 8px 12px;border:1px solid #dcd6cb;border-radius:9px;outline:none;background:#faf9f6;color:#354038;font-size:12px}.gcc-mobile-filter-button{display:none} .gcc-results-toolbar{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.gcc-results-count{color:#666f67;font-size:12px}.gcc-record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.gcc-record-card{min-width:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--r1);background:#fff}.gcc-record-card[hidden]{display:none!important}.gcc-record-image{aspect-ratio:4/3}.gcc-record-body{flex:1;display:flex;flex-direction:column;padding:22px}.gcc-record-type{margin-bottom:11px;color:var(--moss);font-size:9px;font-weight:800;letter-spacing:.13em}.gcc-record-title{color:var(--text)!important;font-size:21px!important;font-weight:700!important;letter-spacing:-.025em!important;line-height:1.15!important}.gcc-meta{margin-top:16px;color:#4f5951;font-size:12px;line-height:1.65}.gcc-record-id{margin-top:15px;color:#7f867f;font-size:9px;font-weight:750;letter-spacing:.06em}.gcc-status-block{margin-top:18px;border-top:1px solid var(--soft)}.gcc-status-row{min-height:45px;display:grid;grid-template-columns:68px 1fr;align-items:center;gap:12px;border-bottom:1px solid var(--soft)}.gcc-status-label{color:#858c86;font-size:8px;font-weight:800;letter-spacing:.1em}.gcc-status-value{color:#38423a;font-size:10px;font-weight:600;line-height:1.35}.gcc-trade-state{margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #ded8cc;border-radius:9px;background:#f7f5ef}.gcc-trade-state span:first-child{color:#7d857e;font-size:8px;font-weight:800;letter-spacing:.09em}.gcc-trade-state span:last-child{color:#465047;font-size:10px;font-weight:650;text-align:right}.gcc-record-action{margin-top:auto;padding-top:21px;color:var(--text)!important;font-size:12px;font-weight:700}.gcc-empty{display:none;padding:48px 30px;border:1px dashed #c9c2b6;border-radius:var(--r1);background:rgba(255,255,255,.5);text-align:center}.gcc-empty.is-visible{display:block}.gcc-empty h3{font-size:21px!important}.gcc-empty p{max-width:490px;margin:10px auto 0;color:var(--muted);font-size:13px} /* FIELDS */ .gcc-data{background:#fff}.gcc-data-grid{display:grid;grid-template-columns:.85fr 1.15fr;align-items:start;gap:80px}.gcc-field-list{border-top:1px solid var(--border)}.gcc-field-row{display:grid;grid-template-columns:42px 1fr;gap:18px;padding-block:18px;border-bottom:1px solid var(--border)}.gcc-field-number{color:#929993;font-size:10px;font-weight:800}.gcc-field-row strong{display:block;font-size:14px}.gcc-field-row span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.55} /* DESTINATION */ .gcc-destinations{background:var(--stone)}.gcc-destination-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}.gcc-destination-card{padding:34px;border:1px solid #d3ccbf;border-radius:var(--r1);background:rgba(255,255,255,.43)}.gcc-destination-card h3{color:var(--text)!important;font-size:25px!important}.gcc-destination-card p{margin-top:13px;color:var(--muted);font-size:13px;line-height:1.65}.gcc-destination-link{display:inline-block;margin-top:23px;color:var(--text)!important;font-size:12px;font-weight:700} /* BOUNDARY */ .gcc-boundary{background:#fff}.gcc-boundary-box{display:grid;grid-template-columns:1fr auto;align-items:center;gap:50px;padding:38px 42px;border:1px solid var(--border);border-left:3px solid var(--earth);border-radius:var(--r1)}.gcc-boundary-box h2{color:var(--text)!important;font-size:clamp(30px,3vw,42px)!important;letter-spacing:-.035em!important;line-height:1.08!important}.gcc-boundary-box p{max-width:720px;margin-top:12px;color:var(--muted);font-size:14px;line-height:1.65} /* FINAL */ .gcc-final{padding-block:80px;background:var(--forest);color:#fff}.gcc-final-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:50px}.gcc-final h2{color:#fff!important;font-size:clamp(38px,4vw,54px)!important;font-weight:650!important;letter-spacing:-.04em!important;line-height:1.05!important}.gcc-final p{max-width:650px;margin-top:15px;color:#b8c1ba;font-size:15px;line-height:1.65} /* DRAWER */ .gcc-filter-overlay{position:fixed;z-index:99998;inset:0;display:none;background:rgba(8,14,10,.46);opacity:0;transition:opacity .2s ease}.gcc-filter-overlay.is-open{display:block;opacity:1}.gcc-filter-drawer{position:fixed;z-index:99999;top:0;right:0;bottom:0;width:min(360px,92vw);overflow-y:auto;padding:24px;background:#fff;transform:translateX(105%);transition:transform .24s ease}.gcc-filter-drawer.is-open{transform:translateX(0)}.gcc-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.gcc-drawer-head strong{font-size:18px}.gcc-drawer-close{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:transparent;cursor:pointer}.gcc-drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px} @media(max-width:1180px){.gekumi-catalog-category{--side:32px}.gcc-record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1024px){.gekumi-catalog-category{--side:28px}.gcc-section{padding-block:72px}.gcc-hero-grid{grid-template-columns:1.05fr .95fr;gap:44px}.gcc-species-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gcc-catalog-layout{grid-template-columns:220px minmax(0,1fr);gap:22px}.gcc-filters{padding:20px}} @media(max-width:768px){.gekumi-catalog-category{--side:24px}.gcc-hero-grid,.gcc-context-grid,.gcc-data-grid{grid-template-columns:1fr}.gcc-hero-visual{min-height:440px}.gcc-catalog-layout{grid-template-columns:1fr}.gcc-filters{display:none}.gcc-mobile-filter-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text);font-size:12px;font-weight:700;cursor:pointer}.gcc-destination-grid{grid-template-columns:1fr 1fr}.gcc-final-grid,.gcc-boundary-box{grid-template-columns:1fr}} @media(max-width:480px){.gekumi-catalog-category{--side:18px}.gcc-section{padding-block:54px}.gcc-hero{padding-block:56px}.gcc-hero h1{font-size:44px!important;line-height:1.01!important}.gcc-title{font-size:35px!important;line-height:1.07!important}.gcc-buttons{flex-direction:column}.gcc-btn{width:100%}.gcc-hero-visual{min-height:330px}.gcc-species-grid{grid-template-columns:1fr 1fr;gap:12px}.gcc-species-body{padding:15px}.gcc-species-name{font-size:15px}.gcc-context-panel{grid-template-columns:1fr 1fr}.gcc-context-item{min-height:105px;padding:18px}.gcc-search{min-height:53px;grid-template-columns:auto 1fr}.gcc-search-clear{display:none}.gcc-catalog-head{grid-template-columns:1fr;gap:14px}.gcc-record-grid{grid-template-columns:1fr}.gcc-record-body{padding:22px 20px}.gcc-destination-grid{grid-template-columns:1fr}.gcc-destination-card{padding:27px 22px}.gcc-boundary-box{padding:28px 22px}.gcc-final{padding-block:60px}} @media(prefers-reduced-motion:reduce){.gekumi-catalog-category *,.gekumi-catalog-category *:before,.gekumi-catalog-category *:after{transition:none!important;scroll-behavior:auto!important}} /* ========================================================= CTA VISIBILITY HOTFIX - V1.1.1 Reason: .gekumi-catalog-category a { color: inherit !important; } has higher specificity than the previous unscoped button color rule. These scoped rules explicitly win and keep button labels readable. ========================================================= */ .gekumi-catalog-category a.gcc-btn.gcc-btn-primary, .gekumi-catalog-category button.gcc-btn.gcc-btn-primary { background: #1d2821 !important; border-color: #1d2821 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .gekumi-catalog-category a.gcc-btn.gcc-btn-primary:hover, .gekumi-catalog-category button.gcc-btn.gcc-btn-primary:hover { background: #2b3a30 !important; border-color: #2b3a30 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .gekumi-catalog-category a.gcc-btn:not(.gcc-btn-primary):not(.gcc-btn-light), .gekumi-catalog-category button.gcc-btn:not(.gcc-btn-primary):not(.gcc-btn-light) { background: transparent !important; border-color: #1d2821 !important; color: #1d2821 !important; -webkit-text-fill-color: #1d2821 !important; } .gekumi-catalog-category a.gcc-btn:not(.gcc-btn-primary):not(.gcc-btn-light):hover, .gekumi-catalog-category button.gcc-btn:not(.gcc-btn-primary):not(.gcc-btn-light):hover { background: rgba(29,40,33,.06) !important; border-color: #1d2821 !important; color: #1d2821 !important; -webkit-text-fill-color: #1d2821 !important; } .gekumi-catalog-category a.gcc-btn.gcc-btn-light, .gekumi-catalog-category button.gcc-btn.gcc-btn-light { border-color: rgba(255,255,255,.55) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .gekumi-catalog-category a.gcc-btn.gcc-btn-light:hover, .gekumi-catalog-category button.gcc-btn.gcc-btn-light:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.8) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ========================================================= CATEGORY HERO CLEANUP ========================================================= */ .gekumi-catalog-category .gcc-hero-chip{ display:none!important; } /* ========================================================= CTA VISIBILITY - CATEGORY MASTER RULE ========================================================= */ .gekumi-catalog-category a.gcc-btn.gcc-btn-primary, .gekumi-catalog-category button.gcc-btn.gcc-btn-primary{ background:#1d2821!important; border-color:#1d2821!important; color:#fff!important; -webkit-text-fill-color:#fff!important } .gekumi-catalog-category a.gcc-btn.gcc-btn-primary:hover, .gekumi-catalog-category button.gcc-btn.gcc-btn-primary:hover{ background:#2b3a30!important; border-color:#2b3a30!important; color:#fff!important; -webkit-text-fill-color:#fff!important } .gekumi-catalog-category a.gcc-btn:not(.gcc-btn-primary):not(.gcc-btn-light), .gekumi-catalog-category button.gcc-btn:not(.gcc-btn-primary):not(.gcc-btn-light){ background:transparent!important; border-color:#1d2821!important; color:#1d2821!important; -webkit-text-fill-color:#1d2821!important } .gekumi-catalog-category a.gcc-btn.gcc-btn-light, .gekumi-catalog-category button.gcc-btn.gcc-btn-light{ border-color:rgba(255,255,255,.60)!important; color:#fff!important; -webkit-text-fill-color:#fff!important } /* Controlled-expansion variant normalized from sealed EN page 29418. */ /* ========================================================= 01. DESIGN TOKENS ========================================================= */ .gekumi-other-live-category { --gk-ink: #101713; --gk-forest: #1d2821; --gk-forest-hover: #2b3a30; --gk-ivory: #f5f2ea; --gk-stone: #ece7dc; --gk-white: #ffffff; --gk-text: #172019; --gk-muted: #626a63; --gk-border: #d7d1c5; --gk-border-soft: #e8e3d9; --gk-moss: #6e7a68; --gk-earth: #9a6148; --gk-shell: 1280px; --gk-side: 40px; --gk-r-lg: 18px; --gk-r-md: 14px; width: 100%; color: var(--gk-text); background: var(--gk-ivory); font-family: Inter, "Noto Sans", Arial, Helvetica, system-ui, sans-serif !important; font-size: 16px; font-style: normal !important; line-height: 1.6; overflow-x: clip; } .gekumi-other-live-category *, .gekumi-other-live-category *::before, .gekumi-other-live-category *::after { box-sizing: border-box; } /* ========================================================= 02. WOODMART TYPOGRAPHY ISOLATION ========================================================= */ .gekumi-other-live-category h1, .gekumi-other-live-category h2, .gekumi-other-live-category h3, .gekumi-other-live-category h4, .gekumi-other-live-category h5, .gekumi-other-live-category h6 { margin: 0 !important; color: inherit !important; font-family: Inter, "Noto Sans", Arial, Helvetica, system-ui, sans-serif !important; font-style: normal !important; font-weight: 650 !important; text-transform: none !important; text-decoration: none !important; } .gekumi-other-live-category p { margin: 0; font-family: inherit !important; font-style: normal !important; } .gekumi-other-live-category a { font-family: inherit !important; font-style: normal !important; text-decoration: none !important; } /* ========================================================= 03. JA / KO PREPARATION ========================================================= */ .gekumi-other-live-category:lang(ja) { font-family: "Noto Sans JP", "Yu Gothic", system-ui, sans-serif !important; } .gekumi-other-live-category:lang(ko) { font-family: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif !important; } .gekumi-other-live-category:lang(ja) h1, .gekumi-other-live-category:lang(ja) h2, .gekumi-other-live-category:lang(ko) h1, .gekumi-other-live-category:lang(ko) h2 { letter-spacing: -.02em !important; line-height: 1.14 !important; } /* ========================================================= 04. SHELL / TYPOGRAPHY ========================================================= */ .gekumi-other-live-category .gol-shell { width: min( var(--gk-shell), calc(100% - (var(--gk-side) * 2)) ); margin-inline: auto; } .gekumi-other-live-category .gol-section { padding-block: 88px; } .gekumi-other-live-category .gol-eyebrow { margin-bottom: 16px; color: var(--gk-moss); font-size: 11px; font-weight: 800; letter-spacing: .15em; line-height: 1.35; text-transform: uppercase; } .gekumi-other-live-category .gol-eyebrow-light { color: #b7c1b8; } .gekumi-other-live-category .gol-title { max-width: 820px; color: var(--gk-text) !important; font-size: clamp(39px,4vw,58px) !important; font-weight: 650 !important; letter-spacing: -.045em !important; line-height: 1.04 !important; } .gekumi-other-live-category .gol-intro { max-width: 700px; margin-top: 21px; color: var(--gk-muted); font-size: 16px; line-height: 1.72; } /* ========================================================= 05. BUTTONS - HIGH SPECIFICITY ========================================================= */ .gekumi-other-live-category .gol-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .gekumi-other-live-category a.gol-btn, .gekumi-other-live-category button.gol-btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 1px solid var(--gk-forest) !important; border-radius: 999px; background: transparent !important; color: var(--gk-forest) !important; -webkit-text-fill-color: var(--gk-forest) !important; font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .gekumi-other-live-category a.gol-btn.gol-btn-primary, .gekumi-other-live-category button.gol-btn.gol-btn-primary { background: var(--gk-forest) !important; border-color: var(--gk-forest) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } .gekumi-other-live-category a.gol-btn.gol-btn-primary:hover, .gekumi-other-live-category button.gol-btn.gol-btn-primary:hover { background: var(--gk-forest-hover) !important; border-color: var(--gk-forest-hover) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } .gekumi-other-live-category a.gol-btn:not(.gol-btn-primary):not(.gol-btn-light):hover, .gekumi-other-live-category button.gol-btn:not(.gol-btn-primary):not(.gol-btn-light):hover { transform: translateY(-1px); background: rgba(29,40,33,.06) !important; } .gekumi-other-live-category a.gol-btn.gol-btn-light, .gekumi-other-live-category button.gol-btn.gol-btn-light { border-color: rgba(255,255,255,.60) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } .gekumi-other-live-category a.gol-btn.gol-btn-light:hover, .gekumi-other-live-category button.gol-btn.gol-btn-light:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.82) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ========================================================= 06. MEDIA ========================================================= */ .gekumi-other-live-category .gol-media { position: relative; overflow: hidden; background: linear-gradient( 145deg, #233128, #16221b ); background-position: center; background-size: cover; } .gekumi-other-live-category .gol-media.has-image .gol-placeholder { display: none; } .gekumi-other-live-category .gol-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-align: center; text-transform: uppercase; } /* ========================================================= 07. HERO ========================================================= */ .gekumi-other-live-category .gol-hero { padding-block: 76px; background: radial-gradient( circle at 78% 42%, rgba(110,122,104,.14), transparent 31% ), var(--gk-ivory); } .gekumi-other-live-category .gol-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.92fr); align-items: center; gap: 72px; } .gekumi-other-live-category .gol-hero-copy { max-width: 720px; } .gekumi-other-live-category .gol-hero h1 { max-width: 760px; color: var(--gk-text) !important; font-size: clamp(52px,5vw,72px) !important; font-weight: 650 !important; letter-spacing: -.055em !important; line-height: .99 !important; } .gekumi-other-live-category .gol-hero-description { max-width: 670px; margin-top: 27px; color: var(--gk-muted); font-size: 17px; line-height: 1.72; } .gekumi-other-live-category .gol-dev-line { margin-top: 28px; color: #777f77; font-size: 10px; font-weight: 800; letter-spacing: .14em; } .gekumi-other-live-category .gol-hero-visual, .gekumi-other-live-category .gol-hero-image { min-height: 470px; } .gekumi-other-live-category .gol-hero-image { border-radius: 22px; } /* ========================================================= 08. CURRENT EXPANSION STATE ========================================================= */ .gekumi-other-live-category .gol-state { background: #fff; } .gekumi-other-live-category .gol-state-grid { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 80px; } .gekumi-other-live-category .gol-state-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--gk-border); border-radius: var(--gk-r-lg); background: var(--gk-border); } .gekumi-other-live-category .gol-state-item { min-height: 122px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; background: #fbfaf7; } .gekumi-other-live-category .gol-state-item span { color: #7c847d; font-size: 9px; font-weight: 800; letter-spacing: .11em; } .gekumi-other-live-category .gol-state-item strong { color: var(--gk-text); font-size: 17px; line-height: 1.3; } /* ========================================================= 09. ESTABLISHED CORE GROUPS ========================================================= */ .gekumi-other-live-category .gol-established { background: var(--gk-stone); } .gekumi-other-live-category .gol-group-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; margin-top: 42px; } .gekumi-other-live-category .gol-group-card { min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid #d3ccbf; border-radius: var(--gk-r-md); background: #fff; transition: transform .2s ease, border-color .2s ease; } .gekumi-other-live-category .gol-group-card:hover { transform: translateY(-2px); border-color: #b9b2a6; } .gekumi-other-live-category .gol-group-image { width: 100%; aspect-ratio: 4 / 3; background-position: center; background-repeat: no-repeat; background-size: cover; } .gekumi-other-live-category .gol-group-content { min-height: 122px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px 18px 17px; } .gekumi-other-live-category .gol-group-index { color: #8a918a; font-size: 9px; font-weight: 800; letter-spacing: .11em; } .gekumi-other-live-category .gol-group-name { margin-top: 8px; color: var(--gk-text); font-size: 19px; font-weight: 700; line-height: 1.25; } .gekumi-other-live-category .gol-group-link { margin-top: 18px; color: #59635b !important; -webkit-text-fill-color: #59635b !important; font-size: 12px; font-weight: 700; } /* ========================================================= 10. EXPANSION CARDS ========================================================= */ .gekumi-other-live-category .gol-expansion { background: #fff; } .gekumi-other-live-category .gol-expansion-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 42px; } .gekumi-other-live-category .gol-expansion-card { min-height: 250px; padding: 28px; border: 1px solid var(--gk-border); border-radius: var(--gk-r-lg); background: #fff; } .gekumi-other-live-category .gol-expansion-number { color: #939a94; font-size: 10px; font-weight: 800; letter-spacing: .10em; } .gekumi-other-live-category .gol-expansion-card h3 { margin-top: 25px !important; color: var(--gk-text) !important; font-size: 22px !important; line-height: 1.2 !important; } .gekumi-other-live-category .gol-expansion-card p { margin-top: 12px; color: var(--gk-muted); font-size: 13px; line-height: 1.7; } /* ========================================================= 11. CATALOG ENTRY METHOD ========================================================= */ .gekumi-other-live-category .gol-method { background: var(--gk-forest); color: #fff; } .gekumi-other-live-category .gol-method .gol-title { color: #fff !important; } .gekumi-other-live-category .gol-method .gol-intro { color: #b7c1b8; } .gekumi-other-live-category .gol-method-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 50px; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.14); } .gekumi-other-live-category .gol-method-step { min-height: 205px; padding: 29px 28px 29px 0; } .gekumi-other-live-category .gol-method-step + .gol-method-step { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.14); } .gekumi-other-live-category .gol-method-number { color: #98a59c; font-size: 10px; font-weight: 800; letter-spacing: .1em; } .gekumi-other-live-category .gol-method-step h3 { margin-top: 15px !important; color: #fff !important; font-size: 18px !important; } .gekumi-other-live-category .gol-method-step p { margin-top: 10px; color: #b5beb7; font-size: 13px; line-height: 1.65; } /* ========================================================= 12. REQUEST A SPECIES ========================================================= */ .gekumi-other-live-category .gol-request { background: var(--gk-ivory); } .gekumi-other-live-category .gol-request-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 80px; } .gekumi-other-live-category .gol-request-list { border-top: 1px solid var(--gk-border); } .gekumi-other-live-category .gol-request-row { display: grid; grid-template-columns: 42px 1fr; gap: 18px; padding-block: 18px; border-bottom: 1px solid var(--gk-border); } .gekumi-other-live-category .gol-request-number { color: #929993; font-size: 10px; font-weight: 800; } .gekumi-other-live-category .gol-request-row strong { display: block; color: var(--gk-text); font-size: 14px; } .gekumi-other-live-category .gol-request-row span { display: block; margin-top: 4px; color: var(--gk-muted); font-size: 12px; line-height: 1.55; } /* ========================================================= 13. DESTINATION REVIEW ========================================================= */ .gekumi-other-live-category .gol-destinations { background: var(--gk-stone); } .gekumi-other-live-category .gol-destination-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; } .gekumi-other-live-category .gol-destination-card { padding: 34px; border: 1px solid #d3ccbf; border-radius: var(--gk-r-lg); background: rgba(255,255,255,.43); } .gekumi-other-live-category .gol-destination-card h3 { color: var(--gk-text) !important; font-size: 25px !important; } .gekumi-other-live-category .gol-destination-card p { margin-top: 13px; color: var(--gk-muted); font-size: 13px; line-height: 1.65; } .gekumi-other-live-category .gol-destination-link { display: inline-block; margin-top: 23px; color: var(--gk-text) !important; -webkit-text-fill-color: var(--gk-text) !important; font-size: 12px; font-weight: 700; } /* ========================================================= 14. INFORMATION BOUNDARY ========================================================= */ .gekumi-other-live-category .gol-boundary { background: #fff; } .gekumi-other-live-category .gol-boundary-box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; padding: 38px 42px; border: 1px solid var(--gk-border); border-left: 3px solid var(--gk-earth); border-radius: var(--gk-r-lg); } .gekumi-other-live-category .gol-boundary-box h2 { color: var(--gk-text) !important; font-size: clamp(30px,3vw,42px) !important; letter-spacing: -.035em !important; line-height: 1.08 !important; } .gekumi-other-live-category .gol-boundary-box p { max-width: 760px; margin-top: 12px; color: var(--gk-muted); font-size: 14px; line-height: 1.65; } /* ========================================================= 15. FINAL CTA ========================================================= */ .gekumi-other-live-category .gol-final { padding-block: 80px; background: var(--gk-forest); color: #fff; } .gekumi-other-live-category .gol-final-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; } .gekumi-other-live-category .gol-final h2 { color: #fff !important; font-size: clamp(38px,4vw,54px) !important; font-weight: 650 !important; letter-spacing: -.04em !important; line-height: 1.05 !important; } .gekumi-other-live-category .gol-final p { max-width: 670px; margin-top: 15px; color: #b8c1ba; font-size: 15px; line-height: 1.65; } /* ========================================================= 16. RESPONSIVE ========================================================= */ @media (max-width:1180px) { .gekumi-other-live-category { --gk-side: 32px; } .gekumi-other-live-category .gol-group-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width:1024px) { .gekumi-other-live-category { --gk-side: 28px; } .gekumi-other-live-category .gol-section { padding-block: 72px; } .gekumi-other-live-category .gol-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 44px; } } @media (max-width:768px) { .gekumi-other-live-category { --gk-side: 24px; } .gekumi-other-live-category .gol-hero-grid, .gekumi-other-live-category .gol-state-grid, .gekumi-other-live-category .gol-request-grid { grid-template-columns: 1fr; } .gekumi-other-live-category .gol-hero-visual, .gekumi-other-live-category .gol-hero-image { min-height: 430px; } .gekumi-other-live-category .gol-group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .gekumi-other-live-category .gol-expansion-grid { grid-template-columns: 1fr; } .gekumi-other-live-category .gol-method-grid { grid-template-columns: 1fr 1fr; } .gekumi-other-live-category .gol-method-step:nth-child(3) { border-left: 0; } .gekumi-other-live-category .gol-destination-grid { grid-template-columns: 1fr 1fr; } .gekumi-other-live-category .gol-boundary-box, .gekumi-other-live-category .gol-final-grid { grid-template-columns: 1fr; } } @media (max-width:480px) { .gekumi-other-live-category { --gk-side: 18px; } .gekumi-other-live-category .gol-section { padding-block: 54px; } .gekumi-other-live-category .gol-hero { padding-block: 56px; } .gekumi-other-live-category .gol-hero h1 { font-size: 43px !important; line-height: 1.01 !important; } .gekumi-other-live-category .gol-title { font-size: 35px !important; line-height: 1.07 !important; } .gekumi-other-live-category .gol-buttons { flex-direction: column; } .gekumi-other-live-category a.gol-btn, .gekumi-other-live-category button.gol-btn { width: 100%; } .gekumi-other-live-category .gol-hero-visual, .gekumi-other-live-category .gol-hero-image { min-height: 320px; } .gekumi-other-live-category .gol-state-panel { grid-template-columns: 1fr 1fr; } .gekumi-other-live-category .gol-state-item { min-height: 106px; padding: 18px; } .gekumi-other-live-category .gol-group-grid { grid-template-columns: 1fr; } .gekumi-other-live-category .gol-group-card { min-height: 0; } .gekumi-other-live-category .gol-group-content { min-height: 108px; } .gekumi-other-live-category .gol-method-grid { grid-template-columns: 1fr; } .gekumi-other-live-category .gol-method-step, .gekumi-other-live-category .gol-method-step + .gol-method-step { min-height: auto; padding: 24px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.14); } .gekumi-other-live-category .gol-destination-grid { grid-template-columns: 1fr; } .gekumi-other-live-category .gol-destination-card { padding: 27px 22px; } .gekumi-other-live-category .gol-boundary-box { padding: 28px 22px; } .gekumi-other-live-category .gol-final { padding-block: 60px; } } @media (prefers-reduced-motion:reduce) { .gekumi-other-live-category *, .gekumi-other-live-category *::before, .gekumi-other-live-category *::after { transition: none !important; scroll-behavior: auto !important; } }